converted histograms to % coords to avoid re-rendering.

1 files changed, 89 insertions, 57 deletions

diff --git a/src/client/views/nodes/HistogramBox.tsx b/src/client/views/nodes/HistogramBox.tsx
index c9537bcf8..2291d1418 100644
--- a/src/client/views/nodes/HistogramBox.tsx
+++ b/src/client/views/nodes/HistogramBox.tsx
@@ -1,5 +1,5 @@
 import React = require("react")
-import { computed, observable, reaction, runInAction } from "mobx";
+import { computed, observable, reaction, runInAction, trace, action } from "mobx";
 import { observer } from "mobx-react";
 import Measure from "react-measure";
 import { Dictionary } from "typescript-collections";
@@ -21,22 +21,20 @@ import { StyleConstants } from "../../northstar/utils/StyleContants";
 import "./../../northstar/utils/Extensions";
 import { FieldView, FieldViewProps } from './FieldView';
 import "./HistogramBox.scss";
-import { HistogramBoxPrimitives } from './HistogramBoxPrimitives';
+import { HistogramBoxPrimitives, HistogramBoxPrimitivesProps } from './HistogramBoxPrimitives';
 
 @observer
 export class HistogramBox extends React.Component<FieldViewProps> {
     public static LayoutString(fieldStr: string = "DataKey") { return FieldView.LayoutString(HistogramBox, fieldStr) }
+    public HitTargets: Dictionary<PIXIRectangle, FilterModel> = new Dictionary<PIXIRectangle, FilterModel>();
 
-    @observable private _panelWidth: number = 100;
-    @observable private _panelHeight: number = 100;
+    @observable public PanelWidth: number = 100;
+    @observable public PanelHeight: number = 100;
     @observable public HistoOp?: HistogramOperation;
     @observable public VisualBinRanges: VisualBinRange[] = [];
     @observable public ValueRange: number[] = [];
-    @observable public SizeConverter?: SizeConverter;
-    public HitTargets: Dictionary<PIXIRectangle, FilterModel> = new Dictionary<PIXIRectangle, FilterModel>();
+    @observable public SizeConverter: SizeConverter = new SizeConverter();
 
-    @computed get xaxislines() { return this.renderGridLinesAndLabels(0); }
-    @computed get yaxislines() { return this.renderGridLinesAndLabels(1); }
     @computed get createOperationParamsCache() { return this.HistoOp!.CreateOperationParameters(); }
     @computed get HistogramResult() { return this.HistoOp ? this.HistoOp.Result as HistogramResult : undefined; }
     @computed get BinRanges() { return this.HistogramResult ? this.HistogramResult.binRanges : undefined; }
@@ -48,93 +46,127 @@ export class HistogramBox extends React.Component<FieldViewProps> {
 
     componentDidMount() {
         reaction(() => [CurrentUserUtils.ActiveSchemaName, this.props.doc.GetText(KeyStore.NorthstarSchema, "?")],
-            (params: string[]) => params[0] == params[1] && this.activateHistogramOperation(), { fireImmediately: true });
-        reaction(() => [this.VisualBinRanges && this.VisualBinRanges.slice(), this._panelHeight, this._panelWidth],
-            () => this.SizeConverter = new SizeConverter({ x: this._panelWidth, y: this._panelHeight }, this.VisualBinRanges, Math.PI / 4));
-        reaction(() => this.BinRanges, (binRanges: BinRange[] | undefined) => {
-            if (binRanges && this.HistogramResult && !this.HistogramResult!.isEmpty && this.HistogramResult!.bins) {
-                this.VisualBinRanges.splice(0, this.VisualBinRanges.length, ...binRanges.map(br =>
-                    VisualBinRangeHelper.GetVisualBinRange(br, this.HistogramResult!, this.HistoOp!.X, this.ChartType)));
+            (params: string[]) => params[0] === params[1] && this.activateHistogramOperation(), { fireImmediately: true });
+        reaction(() => [this.VisualBinRanges && this.VisualBinRanges.slice()], () => this.SizeConverter.SetVisualBinRanges(this.VisualBinRanges));
+        reaction(() => [this.PanelHeight, this.PanelWidth], () => this.SizeConverter.SetIsSmall(this.PanelWidth < 40 && this.PanelHeight < 40))
+        reaction(() => this.HistogramResult ? this.HistogramResult.binRanges : undefined,
+            (binRanges: BinRange[] | undefined) => {
+                if (binRanges) {
+                    this.VisualBinRanges.splice(0, this.VisualBinRanges.length, ...binRanges.map((br, ind) =>
+                        VisualBinRangeHelper.GetVisualBinRange(br, this.HistogramResult!, ind ? this.HistoOp!.Y : this.HistoOp!.X, this.ChartType)));
 
-                let valueAggregateKey = ModelHelpers.CreateAggregateKey(this.HistoOp!.V, this.HistogramResult!, ModelHelpers.AllBrushIndex(this.HistogramResult!));
-                this.ValueRange = Object.values(this.HistogramResult!.bins).reduce((prev, cur) => {
-                    let value = ModelHelpers.GetAggregateResult(cur, valueAggregateKey) as DoubleValueAggregateResult;
-                    return value && value.hasResult ? [Math.min(prev[0], value.result!), Math.max(prev[1], value.result!)] : prev;
-                }, [Number.MIN_VALUE, Number.MAX_VALUE]);
-            }
-        });
+                    let valueAggregateKey = ModelHelpers.CreateAggregateKey(this.HistoOp!.V, this.HistogramResult!, ModelHelpers.AllBrushIndex(this.HistogramResult!));
+                    this.ValueRange = Object.values(this.HistogramResult!.bins!).reduce((prev, cur) => {
+                        let value = ModelHelpers.GetAggregateResult(cur, valueAggregateKey) as DoubleValueAggregateResult;
+                        return value && value.hasResult ? [Math.min(prev[0], value.result!), Math.max(prev[1], value.result!)] : prev;
+                    }, [Number.MIN_VALUE, Number.MAX_VALUE]);
+                }
+            });
     }
 
     activateHistogramOperation() {
         this.props.doc.GetTAsync(this.props.fieldKey, HistogramField).then((histoOp: Opt<HistogramField>) => {
             if (histoOp) {
                 runInAction(() => this.HistoOp = histoOp.Data);
-                reaction(() => this.props.doc.GetList(KeyStore.LinkedFromDocs, []),
-                    docs => this.HistoOp!.Links.splice(0, this.HistoOp!.Links.length, ...docs), { fireImmediately: true });
+                reaction(() => this.props.doc.GetList(KeyStore.LinkedFromDocs, []), docs => this.HistoOp!.Links.splice(0, this.HistoOp!.Links.length, ...docs), { fireImmediately: true });
                 reaction(() => this.createOperationParamsCache, () => this.HistoOp!.Update(), { fireImmediately: true });
             }
         })
     }
+    render() {
+        let label = this.HistoOp && this.HistoOp.X ? this.HistoOp.X.AttributeModel.DisplayName : "<...>";
+        var h = this.props.isTopMost ? this.PanelHeight : this.props.doc.GetNumber(KeyStore.Height, 0);
+        var w = this.props.isTopMost ? this.PanelWidth : this.props.doc.GetNumber(KeyStore.Width, 0);
+        let loff = this.SizeConverter.LeftOffset;
+        let toff = this.SizeConverter.TopOffset;
+        let roff = this.SizeConverter.RightOffset;
+        let boff = this.SizeConverter.BottomOffset;
+        return (
+            <Measure onResize={(r: any) => runInAction(() => { this.PanelWidth = r.entry.width; this.PanelHeight = r.entry.height })}>
+                {({ measureRef }) =>
+                    <div className="histogrambox-container" ref={measureRef} style={{ transform: `translate(${-w / 2}px, ${-h / 2}px)` }}>
+                        <div style={{
+                            transform: `translate(${loff}px, ${toff}px)`,
+                            width: `calc(100% - ${loff + roff}px)`,
+                            height: `calc(100% - ${toff + boff}px)`,
+                        }}>
+                            <HistogramLabelPrimitives HistoBox={this} />
+                            <HistogramBoxPrimitives HistoBox={this} />
+                        </div>
+                        <div className="histogrambox-xaxislabel">{label}</div>
+                    </div>
+                }
+            </Measure>
+        )
+    }
+}
+
+@observer
+export class HistogramLabelPrimitives extends React.Component<HistogramBoxPrimitivesProps> {
+    componentDidMount() {
+        reaction(() => [this.props.HistoBox.PanelWidth, this.props.HistoBox.SizeConverter.LeftOffset, this.props.HistoBox.VisualBinRanges.length],
+            (fields) => HistogramLabelPrimitives.computeLabelAngle(fields[0] as number, fields[1] as number, this.props.HistoBox), { fireImmediately: true });
+    }
 
-    drawLine(xFrom: number, yFrom: number, width: number, height: number) {
-        return <div key={DashUtils.GenerateGuid()} style={{ position: "absolute", width: `${width}px`, height: `${height}px`, background: "lightgray", transform: `translate(${xFrom}px, ${yFrom}px)` }} />;
+    @action
+    static computeLabelAngle(panelWidth: number, leftOffset: number, histoBox: HistogramBox) {
+        const textWidth = 30;
+        if (panelWidth > 0 && histoBox.VisualBinRanges.length && histoBox.VisualBinRanges[0] instanceof NominalVisualBinRange) {
+            let space = (panelWidth - leftOffset * 2) / histoBox.VisualBinRanges[0].GetBins().length;
+            histoBox.SizeConverter.SetLabelAngle(Math.min(Math.PI / 2, Math.max(Math.PI / 6, textWidth / space * Math.PI / 2)));
+        } else if (histoBox.SizeConverter.LabelAngle) {
+            histoBox.SizeConverter.SetLabelAngle(0);
+        }
     }
+    @computed get xaxislines() { return this.renderGridLinesAndLabels(0); }
+    @computed get yaxislines() { return this.renderGridLinesAndLabels(1); }
 
     private renderGridLinesAndLabels(axis: number) {
-        let sc = this.SizeConverter!;
-        if (!sc || !this.VisualBinRanges.length)
+        let sc = this.props.HistoBox.SizeConverter;
+        let vb = this.props.HistoBox.VisualBinRanges;
+        if (!vb.length || !sc.Initialized)
             return (null);
-        let dim = sc.RenderSize[axis] / ((axis == 0 && this.VisualBinRanges[axis] instanceof NominalVisualBinRange) ?
+        let dim = (axis == 0 ? this.props.HistoBox.PanelWidth : this.props.HistoBox.PanelHeight) / ((axis == 0 && vb[axis] instanceof NominalVisualBinRange) ?
             (12 + 5) : //  (<number>FontStyles.AxisLabel.fontSize + 5)));
             sc.MaxLabelSizes[axis].coords[axis] + 5);
 
         let prims: JSX.Element[] = [];
-        let labels = this.VisualBinRanges[axis].GetLabels();
+        let labels = vb[axis].GetLabels();
         labels.map((binLabel, i) => {
             let r = sc.DataToScreenRange(binLabel.minValue!, binLabel.maxValue!, axis);
-
-            prims.push(this.drawLine(r.xFrom, r.yFrom, axis == 0 ? 1 : r.xTo - r.xFrom, axis == 0 ? r.yTo - r.yFrom : 1));
-            if (i == labels.length - 1)
-                prims.push(this.drawLine(axis == 0 ? r.xTo : r.xFrom, axis == 0 ? r.yFrom : r.yTo, axis == 0 ? 1 : r.xTo - r.xFrom, axis == 0 ? r.yTo - r.yFrom : 1));
-
             if (i % Math.ceil(labels.length / dim) === 0 && binLabel.label) {
                 const label = binLabel.label.Truncate(StyleConstants.MAX_CHAR_FOR_HISTOGRAM_LABELS, "...");
                 const textHeight = 14; const textWidth = 30;
                 let xStart = (axis === 0 ? r.xFrom + (r.xTo - r.xFrom) / 2.0 : r.xFrom - 10 - textWidth);
                 let yStart = (axis === 1 ? r.yFrom - textHeight / 2 : r.yFrom);
-                let rotation = 0;
 
-                if (axis == 0 && this.VisualBinRanges[axis] instanceof NominalVisualBinRange) {
-                    rotation = Math.min(90, Math.max(30, textWidth / (r.xTo - r.xFrom) * 90));
-                    xStart += Math.max(textWidth / 2, (1 - textWidth / (r.xTo - r.xFrom)) * textWidth / 2) - textHeight / 2;
+                if (axis == 0 && vb[axis] instanceof NominalVisualBinRange) {
+                    let space = (r.xTo - r.xFrom) / sc.RenderDimension * this.props.HistoBox.PanelWidth;
+                    xStart += Math.max(textWidth / 2, (1 - textWidth / space) * textWidth / 2) - textHeight / 2;
                 }
 
+                let xPercent = axis == 1 ? `${xStart}px` : `${xStart / sc.RenderDimension * 100}%`
+                let yPercent = axis == 0 ? `${this.props.HistoBox.PanelHeight - sc.BottomOffset - textHeight}px` : `${yStart / sc.RenderDimension * 100}%`
+
                 prims.push(
-                    <div key={DashUtils.GenerateGuid()} className="histogrambox-gridlabel" style={{ transform: `translate(${xStart}px, ${yStart}px) rotate(${rotation}deg)` }}>
-                        {label}
-                    </div>)
+                    <div className="histogramLabelPrimitives-placer" key={DashUtils.GenerateGuid()} style={{ transform: `translate(${xPercent}, ${yPercent})` }}>
+                        <div className="histogramLabelPrimitives-gridlabel" style={{ transform: `rotate(${axis == 0 ? sc.LabelAngle : 0}rad)` }}>
+                            {label}
+                        </div>
+                    </div>
+                )
             }
         });
         return prims;
     }
 
     render() {
-        let label = this.HistoOp && this.HistoOp.X ? this.HistoOp.X.AttributeModel.DisplayName : "<...>";
         let xaxislines = this.xaxislines;
         let yaxislines = this.yaxislines;
-        var h = this.props.isTopMost ? this._panelHeight : this.props.doc.GetNumber(KeyStore.Height, 0);
-        var w = this.props.isTopMost ? this._panelWidth : this.props.doc.GetNumber(KeyStore.Width, 0);
-        return (
-            <Measure onResize={(r: any) => runInAction(() => { this._panelWidth = r.entry.width; this._panelHeight = r.entry.height })}>
-                {({ measureRef }) =>
-                    <div className="histogrambox-container" ref={measureRef} style={{ transform: `translate(${-w / 2}px, ${-h / 2}px)` }}>
-                        {xaxislines}
-                        {yaxislines}
-                        <HistogramBoxPrimitives HistoBox={this} />
-                        <div className="histogrambox-xaxislabel">{label}</div>
-                    </div>
-                }
-            </Measure>
-        )
+        return <div className="histogramLabelPrimitives-container">
+            {xaxislines}
+            {yaxislines}
+        </div>
     }
+
 }
\ No newline at end of file