a bunch more cleanup

7 files changed, 222 insertions, 276 deletions

diff --git a/src/client/northstar/operations/HistogramOperation.ts b/src/client/northstar/operations/HistogramOperation.ts
index bceadb961..6c7288d42 100644
--- a/src/client/northstar/operations/HistogramOperation.ts
+++ b/src/client/northstar/operations/HistogramOperation.ts
@@ -10,7 +10,7 @@ import { FilterOperand } from "../core/filter/FilterOperand";
 import { IBaseFilterConsumer } from "../core/filter/IBaseFilterConsumer";
 import { IBaseFilterProvider } from "../core/filter/IBaseFilterProvider";
 import { SETTINGS_SAMPLE_SIZE, SETTINGS_X_BINS, SETTINGS_Y_BINS } from "../model/binRanges/VisualBinRangeHelper";
-import { AggregateFunction, AggregateParameters, Attribute, AverageAggregateParameters, DataType, HistogramOperationParameters, QuantitativeBinRange } from "../model/idea/idea";
+import { AggregateFunction, AggregateParameters, Attribute, AverageAggregateParameters, DataType, HistogramOperationParameters, QuantitativeBinRange, HistogramResult, Brush, DoubleValueAggregateResult, Bin } from "../model/idea/idea";
 import { ModelHelpers } from "../model/ModelHelpers";
 import { ArrayUtil } from "../utils/ArrayUtil";
 import { BaseOperation } from "./BaseOperation";
@@ -37,6 +37,12 @@ export class HistogramOperation extends BaseOperation implements IBaseFilterCons
         ArrayUtil.RemoveMany(this.FilterModels, filterModels);
     }
 
+    public getValue(axis: number, bin: Bin, result: HistogramResult, brushIndex: number) {
+        var aggregateKey = ModelHelpers.CreateAggregateKey(axis == 0 ? this.X : axis == 1 ? this.Y : this.V, result, brushIndex);
+        let dataValue = ModelHelpers.GetAggregateResult(bin, aggregateKey) as DoubleValueAggregateResult;
+        return dataValue != null && dataValue.hasResult ? dataValue.result : undefined;
+    }
+
     public static Empty = new HistogramOperation(new AttributeTransformationModel(new ColumnAttributeModel(new Attribute())), new AttributeTransformationModel(new ColumnAttributeModel(new Attribute())), new AttributeTransformationModel(new ColumnAttributeModel(new Attribute())));
 
     Equals(other: Object): boolean {
@@ -57,11 +63,6 @@ export class HistogramOperation extends BaseOperation implements IBaseFilterCons
         let fstring = FilterModel.GetFilterModelsRecursive(this, new Set<IBaseFilterProvider>(), filterModels, true)
         return fstring;
     }
-    @computed
-    public get OutputFilterString(): string {
-        let filterModels: FilterModel[] = [];
-        return FilterModel.GetFilterModelsRecursive(this, new Set<IBaseFilterProvider>(), filterModels, false)
-    }
 
     @computed.struct
     public get BrushString() {
diff --git a/src/client/northstar/utils/Extensions.ts b/src/client/northstar/utils/Extensions.ts
index 71bcadf89..7c2b7fc9d 100644
--- a/src/client/northstar/utils/Extensions.ts
+++ b/src/client/northstar/utils/Extensions.ts
@@ -1,5 +1,6 @@
 interface String {
     ReplaceAll(toReplace: string, replacement: string): string;
+    Truncate(length: number, replacement: string): String;
 }
 
 String.prototype.ReplaceAll = function (toReplace: string, replacement: string): string {
@@ -7,6 +8,14 @@ String.prototype.ReplaceAll = function (toReplace: string, replacement: string):
     return target.split(toReplace).join(replacement);
 }
 
+String.prototype.Truncate = function (length: number, replacement: string): String {
+    var target = this;
+    if (target.length >= length) {
+        target = target.slice(0, Math.max(0, length - replacement.length)) + replacement;
+    }
+    return target;
+}
+
 interface Math {
     log10(val: number): number;
 }
diff --git a/src/client/northstar/utils/SizeConverter.ts b/src/client/northstar/utils/SizeConverter.ts
index e8973cfd5..2dc2a7557 100644
--- a/src/client/northstar/utils/SizeConverter.ts
+++ b/src/client/northstar/utils/SizeConverter.ts
@@ -1,6 +1,9 @@
 import { PIXIPoint } from "./MathUtil";
 import { NominalVisualBinRange } from "../model/binRanges/NominalVisualBinRange";
 import { VisualBinRange } from "../model/binRanges/VisualBinRange";
+import { Bin, DoubleValueAggregateResult, AggregateKey } from "../model/idea/idea";
+import { AttributeTransformationModel } from "../core/attribute/AttributeTransformationModel";
+import { ModelHelpers } from "../model/ModelHelpers";
 
 export class SizeConverter {
     public RenderSize: Array<number> = new Array<number>(2);
@@ -70,6 +73,26 @@ export class SizeConverter {
         this.DataRanges[1] = this.DataMaxs[1] - this.DataMins[1];
     }
 
+    public DataToScreenNormalizedRange(dataValue: number, normalization: number, axis: number, binBrushMaxAxis: number) {
+        var value = normalization != 1 - axis || binBrushMaxAxis == 0 ? dataValue : (dataValue - 0) / (binBrushMaxAxis - 0) * this.DataRanges[axis];
+        var from = this.DataToScreenCoord(Math.min(0, value), axis);
+        var to = this.DataToScreenCoord(Math.max(0, value), axis);
+        return [from, value, to];
+    }
+
+    public DataToScreenPointRange(axis: number, bin: Bin, aggregateKey: AggregateKey) {
+        var value = ModelHelpers.GetAggregateResult(bin, aggregateKey) as DoubleValueAggregateResult;
+        if (value.hasResult)
+            return [this.DataToScreenCoord(value.result!, axis) - 5,
+            this.DataToScreenCoord(value.result!, axis) + 5];
+        return [undefined, undefined];
+    }
+
+    public DataToScreenAxisRange(visualBinRanges: VisualBinRange[], index: number, bin: Bin) {
+        var value = visualBinRanges[0].GetValueFromIndex(bin.binIndex!.indices![index]);
+        return [this.DataToScreenX(value), this.DataToScreenX(visualBinRanges[index].AddStep(value))]
+    }
+
     public DataToScreenX(x: number): number {
         return (((x - this.DataMins[0]) / this.DataRanges[0]) * (this.RenderSize[0]) + (this.LeftOffset));
     }
@@ -77,4 +100,16 @@ export class SizeConverter {
         var retY = ((y - this.DataMins[1]) / this.DataRanges[1]) * (this.RenderSize[1]);
         return flip ? (this.RenderSize[1]) - retY + (this.TopOffset) : retY + (this.TopOffset);
     }
+    public DataToScreenCoord(v: number, axis: number) {
+        if (axis == 0)
+            return this.DataToScreenX(v);
+        return this.DataToScreenY(v);
+    }
+    public DataToScreenRange(minVal: number, maxVal: number, axis: number) {
+        let xFrom = this.DataToScreenX(axis === 0 ? minVal : this.DataMins[0]);
+        let xTo = this.DataToScreenX(axis === 0 ? maxVal : this.DataMaxs[0]);
+        let yFrom = this.DataToScreenY(axis === 1 ? minVal : this.DataMins[1]);
+        let yTo = this.DataToScreenY(axis === 1 ? maxVal : this.DataMaxs[1]);
+        return { xFrom, yFrom, xTo, yTo }
+    }
 }
\ No newline at end of file
diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx
index 3e0e02f42..87d8eb648 100644
--- a/src/client/views/Main.tsx
+++ b/src/client/views/Main.tsx
@@ -89,10 +89,6 @@ export class Main extends React.Component {
             }
         };
 
-        // this.initializeNorthstar();
-        let y = "";
-        y.ReplaceAll("a", "B");
-
         CurrentUserUtils.loadCurrentUser();
 
         library.add(faFont);
diff --git a/src/client/views/nodes/HistogramBox.tsx b/src/client/views/nodes/HistogramBox.tsx
index 4d7922c1b..c9537bcf8 100644
--- a/src/client/views/nodes/HistogramBox.tsx
+++ b/src/client/views/nodes/HistogramBox.tsx
@@ -1,9 +1,8 @@
 import React = require("react")
-import { computed, observable, reaction, runInAction, trace } from "mobx";
+import { computed, observable, reaction, runInAction } from "mobx";
 import { observer } from "mobx-react";
 import Measure from "react-measure";
 import { Dictionary } from "typescript-collections";
-import { Document } from "../../../fields/Document";
 import { Opt } from "../../../fields/Field";
 import { HistogramField } from "../../../fields/HistogramField";
 import { KeyStore } from "../../../fields/KeyStore";
@@ -19,81 +18,60 @@ import { HistogramOperation } from "../../northstar/operations/HistogramOperatio
 import { PIXIRectangle } from "../../northstar/utils/MathUtil";
 import { SizeConverter } from "../../northstar/utils/SizeConverter";
 import { StyleConstants } from "../../northstar/utils/StyleContants";
+import "./../../northstar/utils/Extensions";
 import { FieldView, FieldViewProps } from './FieldView';
 import "./HistogramBox.scss";
 import { HistogramBoxPrimitives } from './HistogramBoxPrimitives';
 
 @observer
 export class HistogramBox extends React.Component<FieldViewProps> {
-
     public static LayoutString(fieldStr: string = "DataKey") { return FieldView.LayoutString(HistogramBox, fieldStr) }
 
     @observable private _panelWidth: number = 100;
     @observable private _panelHeight: number = 100;
     @observable public HistoOp?: HistogramOperation;
     @observable public VisualBinRanges: VisualBinRange[] = [];
-    @observable public MinValue: number = 0;
-    @observable public MaxValue: number = 0;
+    @observable public ValueRange: number[] = [];
     @observable public SizeConverter?: SizeConverter;
-    @observable public ChartType: ChartType = ChartType.VerticalBar;
     public HitTargets: Dictionary<PIXIRectangle, FilterModel> = new Dictionary<PIXIRectangle, FilterModel>();
 
     @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; }
+    @computed get ChartType() {
+        return !this.BinRanges ? ChartType.SinglePoint : this.BinRanges[0] instanceof AggregateBinRange ?
+            (this.BinRanges[1] instanceof AggregateBinRange ? ChartType.SinglePoint : ChartType.HorizontalBar) :
+            this.BinRanges[1] instanceof AggregateBinRange ? ChartType.VerticalBar : ChartType.HeatMap;
+    }
 
     componentDidMount() {
         reaction(() => [CurrentUserUtils.ActiveSchemaName, this.props.doc.GetText(KeyStore.NorthstarSchema, "?")],
-            () => CurrentUserUtils.ActiveSchemaName == this.props.doc.GetText(KeyStore.NorthstarSchema, "?") && this.activateHistogramOperation(),
-            { fireImmediately: true });
+            (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.HistoOp && this.HistoOp.Result instanceof HistogramResult ? this.HistoOp.Result.binRanges : undefined,
-            (binRanges: BinRange[] | undefined) => {
-                if (!binRanges || !this.HistoOp || !(this.HistoOp!.Result instanceof HistogramResult))
-                    return;
-
-                this.ChartType = binRanges[0] instanceof AggregateBinRange ? (binRanges[1] instanceof AggregateBinRange ? ChartType.SinglePoint : ChartType.HorizontalBar) :
-                    binRanges[1] instanceof AggregateBinRange ? ChartType.VerticalBar : ChartType.HeatMap;
-
-                this.VisualBinRanges.length = 0;
-                this.VisualBinRanges.push(VisualBinRangeHelper.GetVisualBinRange(binRanges[0], this.HistoOp!.Result!, this.HistoOp!.X, this.ChartType));
-                this.VisualBinRanges.push(VisualBinRangeHelper.GetVisualBinRange(binRanges[1], this.HistoOp!.Result!, this.HistoOp!.Y, this.ChartType));
-
-                if (!this.HistoOp.Result.isEmpty) {
-                    this.MaxValue = Number.MIN_VALUE;
-                    this.MinValue = Number.MAX_VALUE;
-                    for (let key in this.HistoOp.Result.bins) {
-                        if (this.HistoOp.Result.bins.hasOwnProperty(key)) {
-                            let bin = this.HistoOp.Result.bins[key];
-                            let valueAggregateKey = ModelHelpers.CreateAggregateKey(this.HistoOp.V, this.HistoOp.Result, ModelHelpers.AllBrushIndex(this.HistoOp.Result));
-                            let value = ModelHelpers.GetAggregateResult(bin, valueAggregateKey) as DoubleValueAggregateResult;
-                            if (value && value.hasResult) {
-                                this.MaxValue = Math.max(this.MaxValue, value.result!);
-                                this.MinValue = Math.min(this.MinValue, value.result!);
-                            }
-                        }
-                    }
-                }
+        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)));
+
+                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);
-                this.HistoOp!.Update();
-                reaction(
-                    () => this.createOperationParamsCache,
-                    () => this.HistoOp!.Update());
                 reaction(() => this.props.doc.GetList(KeyStore.LinkedFromDocs, []),
-                    (docs: Document[]) => {
-                        this.HistoOp!.Links.length = 0;
-                        this.HistoOp!.Links.push(...docs);
-                    },
-                    { fireImmediately: true }
-                );
+                    docs => this.HistoOp!.Links.splice(0, this.HistoOp!.Links.length, ...docs), { fireImmediately: true });
+                reaction(() => this.createOperationParamsCache, () => this.HistoOp!.Update(), { fireImmediately: true });
             }
         })
     }
@@ -113,33 +91,27 @@ export class HistogramBox extends React.Component<FieldViewProps> {
         let prims: JSX.Element[] = [];
         let labels = this.VisualBinRanges[axis].GetLabels();
         labels.map((binLabel, i) => {
-            let xFrom = sc.DataToScreenX(axis === 0 ? binLabel.minValue! : sc.DataMins[0]);
-            let xTo = sc.DataToScreenX(axis === 0 ? binLabel.maxValue! : sc.DataMaxs[0]);
-            let yFrom = sc.DataToScreenY(axis === 0 ? sc.DataMins[1] : binLabel.minValue!);
-            let yTo = sc.DataToScreenY(axis === 0 ? sc.DataMaxs[1] : binLabel.maxValue!);
+            let r = sc.DataToScreenRange(binLabel.minValue!, binLabel.maxValue!, axis);
 
-            prims.push(this.drawLine(xFrom, yFrom, axis == 0 ? 1 : xTo - xFrom, axis == 0 ? yTo - yFrom : 1));
+            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 ? xTo : xFrom, axis == 0 ? yFrom : yTo, axis == 0 ? 1 : xTo - xFrom, axis == 0 ? yTo - yFrom : 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) {
-                let text = binLabel.label;
-                if (text.length >= StyleConstants.MAX_CHAR_FOR_HISTOGRAM_LABELS) {
-                    text = text.slice(0, StyleConstants.MAX_CHAR_FOR_HISTOGRAM_LABELS - 3) + "...";
-                }
+                const label = binLabel.label.Truncate(StyleConstants.MAX_CHAR_FOR_HISTOGRAM_LABELS, "...");
                 const textHeight = 14; const textWidth = 30;
-                let xStart = (axis === 0 ? xFrom + (xTo - xFrom) / 2.0 : xFrom - 10 - textWidth);
-                let yStart = (axis === 1 ? yFrom - textHeight / 2 : yFrom);
+                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 / (xTo - xFrom) * 90));
-                    xStart += Math.max(textWidth / 2, (1 - textWidth / (xTo - xFrom)) * textWidth / 2) - textHeight / 2;
+                    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;
                 }
 
                 prims.push(
                     <div key={DashUtils.GenerateGuid()} className="histogrambox-gridlabel" style={{ transform: `translate(${xStart}px, ${yStart}px) rotate(${rotation}deg)` }}>
-                        {text}
+                        {label}
                     </div>)
             }
         });
diff --git a/src/client/views/nodes/HistogramBoxPrimitives.scss b/src/client/views/nodes/HistogramBoxPrimitives.scss
new file mode 100644
index 000000000..c88d3a227
--- /dev/null
+++ b/src/client/views/nodes/HistogramBoxPrimitives.scss
@@ -0,0 +1,10 @@
+.histogramboxprimitives-border {
+    border: 1px;
+    border-style: solid;
+    pointer-events: none;
+    position: absolute;
+    border-color: #282828;
+}
+.histogramboxprimitives-bar {
+    position: absolute;
+}
\ No newline at end of file
diff --git a/src/client/views/nodes/HistogramBoxPrimitives.tsx b/src/client/views/nodes/HistogramBoxPrimitives.tsx
index a8ada99a4..8c5969938 100644
--- a/src/client/views/nodes/HistogramBoxPrimitives.tsx
+++ b/src/client/views/nodes/HistogramBoxPrimitives.tsx
@@ -1,18 +1,17 @@
 import React = require("react")
+import { computed, observable, runInAction } from "mobx";
+import { observer } from "mobx-react";
+import { Utils as DashUtils } from '../../../Utils';
+import { AttributeTransformationModel } from "../../northstar/core/attribute/AttributeTransformationModel";
 import { ChartType } from '../../northstar/model/binRanges/VisualBinRange';
-import { AggregateFunction, Bin, Brush, DoubleValueAggregateResult, HistogramResult, MarginAggregateParameters, MarginAggregateResult } from "../../northstar/model/idea/idea";
+import { AggregateFunction, Bin, Brush, HistogramResult, MarginAggregateParameters, MarginAggregateResult } from "../../northstar/model/idea/idea";
 import { ModelHelpers } from "../../northstar/model/ModelHelpers";
+import { ArrayUtil } from "../../northstar/utils/ArrayUtil";
 import { LABColor } from '../../northstar/utils/LABcolor';
 import { PIXIRectangle } from "../../northstar/utils/MathUtil";
-import { SizeConverter } from "../../northstar/utils/SizeConverter";
 import { StyleConstants } from "../../northstar/utils/StyleContants";
-import "./HistogramBox.scss";
 import { HistogramBox } from "./HistogramBox";
-import { computed, runInAction, observable, trace } from "mobx";
-import { ArrayUtil } from "../../northstar/utils/ArrayUtil";
-import { Utils as DashUtils } from '../../../Utils';
-import { observer } from "mobx-react";
-
+import "./HistogramBox.scss";
 
 export interface HistogramBoxPrimitivesProps {
     HistoBox: HistogramBox;
@@ -24,80 +23,63 @@ export class HistogramBoxPrimitives extends React.Component<HistogramBoxPrimitiv
 
     @computed
     get selectedPrimitives() {
-        return this._selectedPrims.map((bp) => this.drawBorder(bp.Rect, StyleConstants.OPERATOR_BACKGROUND_COLOR));
+        return this._selectedPrims.map((bp) => this.drawRect(bp.Rect, undefined, () => { }, "border"));
     }
     @computed
     get binPrimitives() {
-        if (!this.props.HistoBox.HistoOp || !(this.props.HistoBox.HistoOp.Result instanceof HistogramResult) || !this.props.HistoBox.SizeConverter)
+        let histoOp = this.props.HistoBox.HistoOp;
+        let histoResult = this.props.HistoBox.HistogramResult;
+        if (!histoOp || !histoResult || !this.props.HistoBox.SizeConverter || !histoResult.bins)
             return (null);
+
         let prims: JSX.Element[] = [];
-        let allBrushIndex = ModelHelpers.AllBrushIndex(this.props.HistoBox.HistoOp.Result);
-        for (let key in this.props.HistoBox.HistoOp.Result.bins) {
-            if (this.props.HistoBox.HistoOp.Result.bins.hasOwnProperty(key)) {
-                let drawPrims = new HistogramBinPrimitiveCollection(key, this.props.HistoBox);
-                let filterModel = ModelHelpers.GetBinFilterModel(this.props.HistoBox.HistoOp.Result.bins![key], allBrushIndex, this.props.HistoBox.HistoOp.Result, this.props.HistoBox.HistoOp.X, this.props.HistoBox.HistoOp.Y);
-
-                this.props.HistoBox.HitTargets.setValue(drawPrims.HitGeom, filterModel);
-
-                drawPrims.BinPrimitives.filter(bp => bp.DataValue && bp.BrushIndex !== allBrushIndex).map(binPrimitive => {
-                    let toggleFilter = () => {
-                        if ([filterModel].filter(h => ArrayUtil.Contains(this.props.HistoBox.HistoOp!.FilterModels, h)).length > 0) {
-                            let bp = ArrayUtil.FirstOrDefault<HistogramBinPrimitive>(drawPrims.BinPrimitives, (bp: HistogramBinPrimitive) => bp.BrushIndex == allBrushIndex);
-                            if (bp && bp.DataValue) {
-                                this._selectedPrims.splice(this._selectedPrims.indexOf(bp), 1);
-                            }
-                            this.props.HistoBox.HistoOp!.RemoveFilterModels([filterModel]);
-                        }
-                        else {
-                            let bp = ArrayUtil.FirstOrDefault<HistogramBinPrimitive>(drawPrims.BinPrimitives, (bp: HistogramBinPrimitive) => bp.BrushIndex == allBrushIndex);
-                            if (bp && bp.DataValue) {
-                                this._selectedPrims.push(bp!);
-                            }
-                            this.props.HistoBox.HistoOp!.AddFilterModels([filterModel]);
-                        }
+        let allBrushIndex = ModelHelpers.AllBrushIndex(histoResult);
+        for (let key in Object.keys(histoResult.bins)) {
+            let drawPrims = new HistogramBinPrimitiveCollection(histoResult.bins![key], this.props.HistoBox);
+            let filterModel = ModelHelpers.GetBinFilterModel(histoResult.bins[key], allBrushIndex, histoResult, histoOp.X, histoOp.Y);
+
+            this.props.HistoBox.HitTargets.setValue(drawPrims.HitGeom, filterModel);
+
+            let allBrushPrim = ArrayUtil.FirstOrDefault<HistogramBinPrimitive>(drawPrims.BinPrimitives, (bp: HistogramBinPrimitive) => bp.BrushIndex == allBrushIndex);
+            if (allBrushPrim && allBrushPrim.DataValue) {
+                let toggleFilter = () => {
+                    if (ArrayUtil.Contains(histoOp!.FilterModels, filterModel)) {
+                        this._selectedPrims.splice(this._selectedPrims.indexOf(allBrushPrim!), 1);
+                        histoOp!.RemoveFilterModels([filterModel]);
+                    }
+                    else {
+                        this._selectedPrims.push(allBrushPrim!);
+                        histoOp!.AddFilterModels([filterModel]);
                     }
-                    prims.push(this.drawRect(binPrimitive.Rect, binPrimitive.Color, () => runInAction(toggleFilter)));
-                    prims.push(this.drawRect(binPrimitive.MarginRect, StyleConstants.MARGIN_BARS_COLOR, () => runInAction(toggleFilter)));
-                });
+                }
+                drawPrims.BinPrimitives.filter(bp => bp.DataValue && bp.BrushIndex !== allBrushIndex).map(bp =>
+                    prims.push(
+                        this.drawRect(bp.Rect, bp.Color, () => runInAction(toggleFilter), "bar"),
+                        this.drawRect(bp.MarginRect, StyleConstants.MARGIN_BARS_COLOR, () => runInAction(toggleFilter), "bar")));
             }
         }
+
         return prims;
     }
-    drawBorder(r: PIXIRectangle, color: number) {
-        return <div key={DashUtils.GenerateGuid()} className="histogramboxprimitive-border"
-            style={{
-                position: "absolute",
-                transform: `translate(${r.x}px,${r.y}px)`,
-                width: `${r.width - 1}`,
-                height: `${r.height}`,
-                border: "1px",
-                borderStyle: "solid",
-                pointerEvents: "none",
-                borderColor: `${LABColor.RGBtoHexString(color)}`
-            }}
-        />
-    }
 
-    drawRect(r: PIXIRectangle, color: number, tapHandler: () => void) {
-        return <div key={DashUtils.GenerateGuid()} onPointerDown={(e: React.PointerEvent) => { if (e.button == 0) tapHandler() }}
+    drawRect(r: PIXIRectangle, color: number | undefined, tapHandler: () => void, classExt: string) {
+        return <div key={DashUtils.GenerateGuid()} className={`histogramboxprimitives-+${classExt}`} onPointerDown={(e: React.PointerEvent) => { if (e.button == 0) tapHandler() }}
             style={{
-                position: "absolute",
                 transform: `translate(${r.x}px,${r.y}px)`,
                 width: `${r.width - 1}`,
                 height: `${r.height}`,
-                background: `${LABColor.RGBtoHexString(color)}`
+                background: color ? `${LABColor.RGBtoHexString(color)}` : ""
             }}
         />
     }
     render() {
-        return <div>
+        return <div className="histogramboxprimitives-container">
             {this.binPrimitives}
             {this.selectedPrimitives}
         </div>
     }
 }
 
-
 class HistogramBinPrimitive {
     constructor(init?: Partial<HistogramBinPrimitive>) {
         Object.assign(this, init);
@@ -117,114 +99,89 @@ export class HistogramBinPrimitiveCollection {
     private _histoBox: HistogramBox;
     private get histoOp() { return this._histoBox.HistoOp!; }
     private get histoResult() { return this.histoOp.Result as HistogramResult; }
+    private get sizeConverter() { return this._histoBox.SizeConverter!; }
     public BinPrimitives: Array<HistogramBinPrimitive> = new Array<HistogramBinPrimitive>();
     public HitGeom: PIXIRectangle = PIXIRectangle.EMPTY;
 
-    constructor(key: string, histoBox: HistogramBox) {
+    constructor(bin: Bin, histoBox: HistogramBox) {
         this._histoBox = histoBox;
-        let bin = this.histoResult.bins![key];
-
-        var overlapBrushIndex = ModelHelpers.OverlapBrushIndex(this.histoResult);
-        var orderedBrushes = new Array<Brush>();
-        orderedBrushes.push(this.histoResult.brushes![0]);
-        orderedBrushes.push(this.histoResult.brushes![overlapBrushIndex]);
-        for (var b = 0; b < this.histoResult.brushes!.length; b++) {
-            var brush = this.histoResult.brushes![b];
-            if (brush.brushIndex != 0 && brush.brushIndex != overlapBrushIndex) {
-                orderedBrushes.push(brush);
+        let brushing = this.setupBrushing(bin, this.histoOp.Normalization); // X= 0, Y = 1, V = 2
+
+        brushing.orderedBrushes.reduce((brushFactorSum, brush) => {
+            switch (histoBox.ChartType) {
+                case ChartType.VerticalBar: return this.createVerticalBarChartBinPrimitives(bin, brush, brushing.maxAxis, this.histoOp.Normalization);
+                case ChartType.HorizontalBar: return this.createHorizontalBarChartBinPrimitives(bin, brush, brushing.maxAxis, this.histoOp.Normalization);
+                case ChartType.SinglePoint: return this.createSinglePointChartBinPrimitives(bin, brush);
+                case ChartType.HeatMap: return this.createHeatmapBinPrimitives(bin, brush, brushFactorSum);
             }
-        }
-        var binBrushMaxAxis = this.getBinBrushAxisRange(bin, orderedBrushes, this.histoOp.Normalization); // X= 0, Y = 1
-
-        var brushFactorSum: number = 0;
-        for (var b = 0; b < orderedBrushes.length; b++) {
-            var brush = orderedBrushes[b];
-            var valueAggregateKey = ModelHelpers.CreateAggregateKey(this.histoOp.V, this.histoResult, brush.brushIndex!);
-            var doubleRes = ModelHelpers.GetAggregateResult(bin, valueAggregateKey) as DoubleValueAggregateResult;
-            var unNormalizedValue = (doubleRes != null && doubleRes.hasResult) ? doubleRes.result : null;
-            if (unNormalizedValue)
-                switch (histoBox.ChartType) {
-                    case ChartType.VerticalBar:
-                        this.createVerticalBarChartBinPrimitives(bin, brush, binBrushMaxAxis, this.histoOp.Normalization, histoBox.SizeConverter!); // X = 0, Y = 1, NOne = -1
-                        break;
-                    case ChartType.HorizontalBar:
-                        this.createHorizontalBarChartBinPrimitives(bin, brush, binBrushMaxAxis, this.histoOp.Normalization, histoBox.SizeConverter!);
-                        break;
-                    case ChartType.SinglePoint:
-                        this.createSinlgePointChartBinPrimitives(bin, brush, unNormalizedValue, histoBox.SizeConverter!);
-                        break;
-                    case ChartType.HeatMap:
-                        var normalizedValue = (unNormalizedValue - histoBox.MinValue) / (Math.abs((histoBox.MaxValue - histoBox.MinValue)) < HistogramBinPrimitiveCollection.TOLERANCE ?
-                            unNormalizedValue : histoBox.MaxValue - histoBox.MinValue);
-                        brushFactorSum = this.createHeatmapBinPrimitives(bin, brush, unNormalizedValue, brushFactorSum, normalizedValue, histoBox.SizeConverter!);
-                }
-        }
+        }, 0);
 
         // adjust brush rects (stacking or not)
-        var sum: number = 0;
         var allBrushIndex = ModelHelpers.AllBrushIndex(this.histoResult);
         var filteredBinPrims = this.BinPrimitives.filter(b => b.BrushIndex != allBrushIndex && b.DataValue != 0.0);
-        var count: number = filteredBinPrims.length;
-        filteredBinPrims.map(fbp => {
+        filteredBinPrims.reduce((sum, fbp) => {
             if (histoBox.ChartType == ChartType.VerticalBar) {
                 if (this.histoOp.X.AggregateFunction == AggregateFunction.Count) {
                     fbp.Rect = new PIXIRectangle(fbp.Rect.x, fbp.Rect.y - sum, fbp.Rect.width, fbp.Rect.height);
                     fbp.MarginRect = new PIXIRectangle(fbp.MarginRect.x, fbp.MarginRect.y - sum, fbp.MarginRect.width, fbp.MarginRect.height);
-                    sum += fbp.Rect.height;
+                    return sum + fbp.Rect.height;
                 }
                 if (this.histoOp.Y.AggregateFunction == AggregateFunction.Avg) {
                     var w = fbp.Rect.width / 2.0;
-                    fbp.Rect = new PIXIRectangle(fbp.Rect.x + sum, fbp.Rect.y, fbp.Rect.width / count, fbp.Rect.height);
+                    fbp.Rect = new PIXIRectangle(fbp.Rect.x + sum, fbp.Rect.y, fbp.Rect.width / filteredBinPrims.length, fbp.Rect.height);
                     fbp.MarginRect = new PIXIRectangle(fbp.MarginRect.x - w + sum + (fbp.Rect.width / 2.0), fbp.MarginRect.y, fbp.MarginRect.width, fbp.MarginRect.height);
-                    sum += fbp.Rect.width;
+                    return sum + fbp.Rect.width;
                 }
             }
             else if (histoBox.ChartType == ChartType.HorizontalBar) {
                 if (this.histoOp.X.AggregateFunction == AggregateFunction.Count) {
                     fbp.Rect = new PIXIRectangle(fbp.Rect.x + sum, fbp.Rect.y, fbp.Rect.width, fbp.Rect.height);
                     fbp.MarginRect = new PIXIRectangle(fbp.MarginRect.x + sum, fbp.MarginRect.y, fbp.MarginRect.width, fbp.MarginRect.height);
-                    sum += fbp.Rect.width;
+                    return sum + fbp.Rect.width;
                 }
                 if (this.histoOp.X.AggregateFunction == AggregateFunction.Avg) {
                     var h = fbp.Rect.height / 2.0;
-                    fbp.Rect = new PIXIRectangle(fbp.Rect.x, fbp.Rect.y + sum, fbp.Rect.width, fbp.Rect.height / count);
+                    fbp.Rect = new PIXIRectangle(fbp.Rect.x, fbp.Rect.y + sum, fbp.Rect.width, fbp.Rect.height / filteredBinPrims.length);
                     fbp.MarginRect = new PIXIRectangle(fbp.MarginRect.x, fbp.MarginRect.y - h + sum + (fbp.Rect.height / 2.0), fbp.MarginRect.width, fbp.MarginRect.height);
-                    sum += fbp.Rect.height;
+                    return sum + fbp.Rect.height;
                 }
             }
-        });
+            return 0;
+        }, 0);
         this.BinPrimitives = this.BinPrimitives.reverse();
         var f = this.BinPrimitives.filter(b => b.BrushIndex == allBrushIndex);
         this.HitGeom = f.length > 0 ? f[0].Rect : PIXIRectangle.EMPTY;
     }
-    private getBinBrushAxisRange(bin: Bin, brushes: Array<Brush>, axis: number): number {
-        var binBrushMaxAxis = Number.MIN_VALUE;
-        brushes.forEach((Brush) => {
-            var maxAggregateKey = ModelHelpers.CreateAggregateKey(axis === 0 ? this.histoOp.Y : this.histoOp.X, this.histoResult, Brush.brushIndex!);
-            var aggResult = ModelHelpers.GetAggregateResult(bin, maxAggregateKey) as DoubleValueAggregateResult;
-            if (aggResult != null) {
-                if (aggResult.result! > binBrushMaxAxis)
-                    binBrushMaxAxis = aggResult.result!;
-            }
-        });
-        return binBrushMaxAxis;
+    private setupBrushing(bin: Bin, normalization: number) {
+        var overlapBrushIndex = ModelHelpers.OverlapBrushIndex(this.histoResult);
+        var orderedBrushes = [this.histoResult.brushes![0], this.histoResult.brushes![overlapBrushIndex]];
+        this.histoResult.brushes!.map(brush => brush.brushIndex != 0 && brush.brushIndex != overlapBrushIndex && orderedBrushes.push(brush));
+        return {
+            orderedBrushes,
+            maxAxis: orderedBrushes.reduce((prev, Brush) => {
+                let aggResult = this.histoOp.getValue(normalization, bin, this.histoResult, Brush.brushIndex!);
+                return aggResult != undefined && aggResult > prev ? aggResult : prev;
+            }, Number.MIN_VALUE)
+        };
     }
-    private createHeatmapBinPrimitives(bin: Bin, brush: Brush, unNormalizedValue: number, brushFactorSum: number, normalizedValue: number, sizeConverter: SizeConverter): number {
+    private createHeatmapBinPrimitives(bin: Bin, brush: Brush, brushFactorSum: number): number {
+
+        let unNormalizedValue = this.histoOp!.getValue(2, bin, this.histoResult, brush.brushIndex!);
+        if (unNormalizedValue == undefined)
+            return brushFactorSum;
 
-        var valueAggregateKey = ModelHelpers.CreateAggregateKey(this.histoOp.V, this.histoResult, ModelHelpers.AllBrushIndex(this.histoResult));
-        var allUnNormalizedValue = ModelHelpers.GetAggregateResult(bin, valueAggregateKey) as DoubleValueAggregateResult;
+        var normalizedValue = (unNormalizedValue - this._histoBox.ValueRange[0]) / (Math.abs((this._histoBox.ValueRange[1] - this._histoBox.ValueRange[0])) < HistogramBinPrimitiveCollection.TOLERANCE ?
+            unNormalizedValue : this._histoBox.ValueRange[1] - this._histoBox.ValueRange[0]);
 
-        var tx = this._histoBox.VisualBinRanges[0].GetValueFromIndex(bin.binIndex!.indices![0]);
-        var xFrom = sizeConverter.DataToScreenX(tx);
-        var xTo = sizeConverter.DataToScreenX(this._histoBox.VisualBinRanges[0].AddStep(tx));
+        let allUnNormalizedValue = this.histoOp.getValue(2, bin, this.histoResult, ModelHelpers.AllBrushIndex(this.histoResult))
 
-        var ty = this._histoBox.VisualBinRanges[1].GetValueFromIndex(bin.binIndex!.indices![1]);
-        var yFrom = sizeConverter.DataToScreenY(ty);
-        var yTo = sizeConverter.DataToScreenY(this._histoBox.VisualBinRanges[1].AddStep(ty));
+        // bcz: are these calls needed?  
+        let [xFrom, xTo] = this.sizeConverter.DataToScreenAxisRange(this._histoBox.VisualBinRanges, 0, bin);
+        let [yFrom, yTo] = this.sizeConverter.DataToScreenAxisRange(this._histoBox.VisualBinRanges, 1, bin);
 
         var returnBrushFactorSum = brushFactorSum;
-        if (allUnNormalizedValue.hasResult) {
-            var brushFactor = (unNormalizedValue / allUnNormalizedValue.result!);
+        if (allUnNormalizedValue != undefined) {
+            var brushFactor = (unNormalizedValue / allUnNormalizedValue);
             returnBrushFactorSum += brushFactor;
             returnBrushFactorSum = Math.min(returnBrushFactorSum, 1.0);
 
@@ -250,95 +207,67 @@ export class HistogramBinPrimitiveCollection {
         return returnBrushFactorSum;
     }
 
-    private createSinlgePointChartBinPrimitives(bin: Bin, brush: Brush, unNormalizedValue: number, sizeConverter: SizeConverter): void {
-        var yAggregateKey = ModelHelpers.CreateAggregateKey(this.histoOp.Y, this.histoResult, brush.brushIndex!);
-        var xAggregateKey = ModelHelpers.CreateAggregateKey(this.histoOp.X, this.histoResult, brush.brushIndex!);
-
-        var xValue = ModelHelpers.GetAggregateResult(bin, xAggregateKey) as DoubleValueAggregateResult;
-        if (!xValue.hasResult)
-            return;
-        var xFrom = sizeConverter.DataToScreenX(xValue.result!) - 5;
-        var xTo = sizeConverter.DataToScreenX(xValue.result!) + 5;
+    private createSinglePointChartBinPrimitives(bin: Bin, brush: Brush): number {
+        let unNormalizedValue = this._histoBox.HistoOp!.getValue(2, bin, this.histoResult, brush.brushIndex!);
+        if (unNormalizedValue != undefined) {
+            let [xFrom, xTo] = this.sizeConverter.DataToScreenPointRange(0, bin, ModelHelpers.CreateAggregateKey(this.histoOp.X, this.histoResult, brush.brushIndex!));
+            let [yFrom, yTo] = this.sizeConverter.DataToScreenPointRange(1, bin, ModelHelpers.CreateAggregateKey(this.histoOp.Y, this.histoResult, brush.brushIndex!));
 
-        var yValue = ModelHelpers.GetAggregateResult(bin, yAggregateKey) as DoubleValueAggregateResult;;
-        if (!yValue.hasResult)
-            return;
-        var yFrom = sizeConverter.DataToScreenY(yValue.result!) + 5;
-        var yTo = sizeConverter.DataToScreenY(yValue.result!);
-
-        this.createBinPrimitive(bin, brush, PIXIRectangle.EMPTY, 0, xFrom, xTo, yFrom, yTo, this.baseColorFromBrush(brush), 1, unNormalizedValue);
+            if (xFrom != undefined && yFrom != undefined && xTo != undefined && yTo != undefined)
+                this.createBinPrimitive(bin, brush, PIXIRectangle.EMPTY, 0, xFrom, xTo, yFrom, yTo, this.baseColorFromBrush(brush), 1, unNormalizedValue);
+        }
+        return 0;
     }
 
-    private createVerticalBarChartBinPrimitives(bin: Bin, brush: Brush, binBrushMaxAxis: number, normalization: number, sizeConverter: SizeConverter): void {
-        var yAggregateKey = ModelHelpers.CreateAggregateKey(this.histoOp.Y, this.histoResult, brush.brushIndex!);
-        var marginParams = new MarginAggregateParameters();
-        marginParams.aggregateFunction = this.histoOp.Y.AggregateFunction;
-        var yMarginAggregateKey = ModelHelpers.CreateAggregateKey(this.histoOp.Y, this.histoResult,
-            brush.brushIndex!, marginParams);
-        var dataValue = ModelHelpers.GetAggregateResult(bin, yAggregateKey) as DoubleValueAggregateResult;
-
-        if (dataValue != null && dataValue.hasResult) {
-            var yValue = normalization != 0 || binBrushMaxAxis == 0 ? dataValue.result! : (dataValue.result! - 0) / (binBrushMaxAxis - 0) * sizeConverter.DataRanges[1];
-
-            var yFrom = sizeConverter.DataToScreenY(Math.min(0, yValue));
-            var yTo = sizeConverter.DataToScreenY(Math.max(0, yValue));;
-
-            var xValue = this._histoBox.VisualBinRanges[0].GetValueFromIndex(bin.binIndex!.indices![0])!;
-            var xFrom = sizeConverter.DataToScreenX(xValue);
-            var xTo = sizeConverter.DataToScreenX(this._histoBox.VisualBinRanges[0].AddStep(xValue));
+    private createVerticalBarChartBinPrimitives(bin: Bin, brush: Brush, binBrushMaxAxis: number, normalization: number): number {
+        let dataValue = this.histoOp.getValue(1, bin, this.histoResult, brush.brushIndex!);
+        if (dataValue != undefined) {
+            let [yFrom, yValue, yTo] = this.sizeConverter.DataToScreenNormalizedRange(dataValue, normalization, 1, binBrushMaxAxis);
+            let [xFrom, xTo] = this.sizeConverter.DataToScreenAxisRange(this._histoBox.VisualBinRanges, 0, bin);
 
-            var marginResult = ModelHelpers.GetAggregateResult(bin, yMarginAggregateKey) as MarginAggregateResult;
-            var yMarginAbsolute = !marginResult ? 0 : marginResult.absolutMargin!;
+            var yMarginAbsolute = this.getMargin(bin, brush, this.histoOp.Y);
             var marginRect = new PIXIRectangle(xFrom + (xTo - xFrom) / 2.0 - 1,
-                sizeConverter.DataToScreenY(yValue + yMarginAbsolute), 2,
-                sizeConverter.DataToScreenY(yValue - yMarginAbsolute) - sizeConverter.DataToScreenY(yValue + yMarginAbsolute));
+                this.sizeConverter.DataToScreenY(yValue + yMarginAbsolute), 2,
+                this.sizeConverter.DataToScreenY(yValue - yMarginAbsolute) - this.sizeConverter.DataToScreenY(yValue + yMarginAbsolute));
 
             this.createBinPrimitive(bin, brush, marginRect, 0, xFrom, xTo, yFrom, yTo,
-                this.baseColorFromBrush(brush), normalization != 0 ? 1 : 0.6 * binBrushMaxAxis / sizeConverter.DataRanges[1] + 0.4, dataValue.result!);
+                this.baseColorFromBrush(brush), normalization != 0 ? 1 : 0.6 * binBrushMaxAxis / this.sizeConverter.DataRanges[1] + 0.4, dataValue);
         }
+        return 0;
     }
 
-    private createHorizontalBarChartBinPrimitives(bin: Bin, brush: Brush, binBrushMaxAxis: number, normalization: number, sizeConverter: SizeConverter): void {
-        var xAggregateKey = ModelHelpers.CreateAggregateKey(this.histoOp.X, this.histoResult, brush.brushIndex!);
-        var marginParams = new MarginAggregateParameters();
-        marginParams.aggregateFunction = this.histoOp.X.AggregateFunction;
-        var xMarginAggregateKey = ModelHelpers.CreateAggregateKey(this.histoOp.X, this.histoResult,
-            brush.brushIndex!, marginParams);
-        var dataValue = ModelHelpers.GetAggregateResult(bin, xAggregateKey) as DoubleValueAggregateResult;
-
-        if (dataValue != null && dataValue.hasResult) {
-            var xValue = normalization != 1 || binBrushMaxAxis == 0 ? dataValue.result! : (dataValue.result! - 0) / (binBrushMaxAxis - 0) * sizeConverter.DataRanges[0];
-            var xFrom = sizeConverter.DataToScreenX(Math.min(0, xValue));
-            var xTo = sizeConverter.DataToScreenX(Math.max(0, xValue));
-
-            var yValue = this._histoBox.VisualBinRanges[1].GetValueFromIndex(bin.binIndex!.indices![1]);
-            var yFrom = yValue;
-            var yTo = this._histoBox.VisualBinRanges[1].AddStep(yValue);
+    private createHorizontalBarChartBinPrimitives(bin: Bin, brush: Brush, binBrushMaxAxis: number, normalization: number): number {
+        let dataValue = this.histoOp.getValue(0, bin, this.histoResult, brush.brushIndex!);
+        if (dataValue != undefined) {
+            let [xFrom, xValue, xTo] = this.sizeConverter.DataToScreenNormalizedRange(dataValue, normalization, 0, binBrushMaxAxis);
+            let [yFrom, yTo] = this.sizeConverter.DataToScreenAxisRange(this._histoBox.VisualBinRanges, 1, bin);
 
-            var marginResult = ModelHelpers.GetAggregateResult(bin, xMarginAggregateKey) as MarginAggregateResult;
-            var xMarginAbsolute = sizeConverter.IsSmall || !marginResult ? 0 : marginResult.absolutMargin!;
-
-            var marginRect = new PIXIRectangle(sizeConverter.DataToScreenX(xValue - xMarginAbsolute),
+            var xMarginAbsolute = this.sizeConverter.IsSmall ? 0 : this.getMargin(bin, brush, this.histoOp.X);
+            var marginRect = new PIXIRectangle(this.sizeConverter.DataToScreenX(xValue - xMarginAbsolute),
                 yTo + (yFrom - yTo) / 2.0 - 1,
-                sizeConverter.DataToScreenX(xValue + xMarginAbsolute) - sizeConverter.DataToScreenX(xValue - xMarginAbsolute),
+                this.sizeConverter.DataToScreenX(xValue + xMarginAbsolute) - this.sizeConverter.DataToScreenX(xValue - xMarginAbsolute),
                 2.0);
 
             this.createBinPrimitive(bin, brush, marginRect, 0, xFrom, xTo, yFrom, yTo,
-                this.baseColorFromBrush(brush), normalization != 1 ? 1 : 0.6 * binBrushMaxAxis / sizeConverter.DataRanges[0] + 0.4, dataValue.result!);
+                this.baseColorFromBrush(brush), normalization != 1 ? 1 : 0.6 * binBrushMaxAxis / this.sizeConverter.DataRanges[0] + 0.4, dataValue);
         }
+        return 0;
+    }
+
+
+    private getMargin(bin: Bin, brush: Brush, axis: AttributeTransformationModel) {
+        var marginParams = new MarginAggregateParameters();
+        marginParams.aggregateFunction = axis.AggregateFunction;
+        var marginAggregateKey = ModelHelpers.CreateAggregateKey(axis, this.histoResult, brush.brushIndex!, marginParams);
+        var marginResult = ModelHelpers.GetAggregateResult(bin, marginAggregateKey) as MarginAggregateResult;
+        return !marginResult ? 0 : marginResult.absolutMargin!;
     }
 
     private createBinPrimitive(bin: Bin, brush: Brush, marginRect: PIXIRectangle,
         marginPercentage: number, xFrom: number, xTo: number, yFrom: number, yTo: number, color: number, opacity: number, dataValue: number) {
-        // hitgeom todo
-
         var binPrimitive = new HistogramBinPrimitive(
             {
-                Rect: new PIXIRectangle(
-                    xFrom,
-                    yTo,
-                    xTo - xFrom,
-                    yFrom - yTo),
+                Rect: new PIXIRectangle(xFrom, yTo, xTo - xFrom, yFrom - yTo),
                 MarginRect: marginRect,
                 MarginPercentage: marginPercentage,
                 BrushIndex: brush.brushIndex,
@@ -350,24 +279,18 @@ export class HistogramBinPrimitiveCollection {
     }
 
     private baseColorFromBrush(brush: Brush): number {
-        var baseColor: number = StyleConstants.HIGHLIGHT_COLOR;
         if (brush.brushIndex == ModelHelpers.RestBrushIndex(this.histoResult)) {
-            baseColor = StyleConstants.HIGHLIGHT_COLOR;
+            return StyleConstants.HIGHLIGHT_COLOR;
         }
         else if (brush.brushIndex == ModelHelpers.OverlapBrushIndex(this.histoResult)) {
-            baseColor = StyleConstants.OVERLAP_COLOR;
+            return StyleConstants.OVERLAP_COLOR;
         }
         else if (brush.brushIndex == ModelHelpers.AllBrushIndex(this.histoResult)) {
-            baseColor = 0x00ff00;
+            return 0x00ff00;
         }
-        else {
-            if (this._histoBox.HistoOp!.BrushColors.length > 0) {
-                baseColor = this._histoBox.HistoOp!.BrushColors[brush.brushIndex! % this._histoBox.HistoOp!.BrushColors.length];
-            }
-            else {
-                baseColor = StyleConstants.HIGHLIGHT_COLOR;
-            }
+        else if (this.histoOp.BrushColors.length > 0) {
+            return this.histoOp.BrushColors[brush.brushIndex! % this.histoOp.BrushColors.length];
         }
-        return baseColor;
+        return StyleConstants.HIGHLIGHT_COLOR;
     }
 }
\ No newline at end of file