aboutsummaryrefslogtreecommitdiff
path: root/src/client/views
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/views')
-rw-r--r--src/client/views/Main.tsx39
-rw-r--r--src/client/views/nodes/DocumentContentsView.tsx5
-rw-r--r--src/client/views/nodes/DocumentView.tsx3
-rw-r--r--src/client/views/nodes/HistogramBox.scss22
-rw-r--r--src/client/views/nodes/HistogramBox.tsx105
-rw-r--r--src/client/views/nodes/HistogramBoxPrimitives.scss25
-rw-r--r--src/client/views/nodes/HistogramBoxPrimitives.tsx336
-rw-r--r--src/client/views/nodes/HistogramLabelPrimitives.scss12
-rw-r--r--src/client/views/nodes/HistogramLabelPrimitives.tsx78
9 files changed, 23 insertions, 602 deletions
diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx
index 09778ac77..2f20b102c 100644
--- a/src/client/views/Main.tsx
+++ b/src/client/views/Main.tsx
@@ -58,7 +58,7 @@ export class Main extends React.Component {
@observable private mainfreeform?: Document;
@observable public pwidth: number = 0;
@observable public pheight: number = 0;
- private _northstarColumns: Document[] = [];
+ private _northstarSchemas: Document[] = [];
@computed private get mainContainer(): Document | undefined {
let doc = this.userDocument.GetT(KeyStore.ActiveWorkspace, Document);
@@ -245,7 +245,7 @@ export class Main extends React.Component {
let addTextNode = action(() => Documents.TextDocument({ width: 200, height: 200, title: "a text note" }))
let addColNode = action(() => Documents.FreeformDocument([], { width: 200, height: 200, title: "a freeform collection" }));
let addSchemaNode = action(() => Documents.SchemaDocument([], { width: 200, height: 200, title: "a schema collection" }));
- let addTreeNode = action(() => Documents.TreeDocument(this._northstarColumns, { width: 200, height: 200, title: "a tree collection" }));
+ let addTreeNode = action(() => Documents.TreeDocument(this._northstarSchemas, { width: 100, height: 400, title: "northstar schemas" }));
let addVideoNode = action(() => Documents.VideoDocument(videourl, { width: 200, height: 200, title: "video node" }));
let addPDFNode = action(() => Documents.PdfDocument(pdfurl, { width: 200, height: 200, title: "a schema collection" }));
let addImageNode = action(() => Documents.ImageDocument(imgurl, { width: 200, height: 200, title: "an image of a cat" }));
@@ -334,24 +334,27 @@ export class Main extends React.Component {
// --------------- Northstar hooks ------------- /
@action SetNorthstarCatalog(ctlog: Catalog) {
+ CurrentUserUtils.NorthstarDBCatalog = ctlog;
if (ctlog && ctlog.schemas) {
- CurrentUserUtils.ActiveSchema = ArrayUtil.FirstOrDefault<Schema>(ctlog.schemas!, (s: Schema) => s.displayName === "mimic");
- CurrentUserUtils.GetAllNorthstarColumnAttributes().map(attr => {
- Server.GetField(attr.displayName!, action((field: Opt<Field>) => {
- if (field instanceof Document) {
- this._northstarColumns.push(field);
- } else {
- var atmod = new ColumnAttributeModel(attr);
- let histoOp = new HistogramOperation(
- new AttributeTransformationModel(atmod, AggregateFunction.None),
- new AttributeTransformationModel(atmod, AggregateFunction.Count),
- new AttributeTransformationModel(atmod, AggregateFunction.Count));
- this._northstarColumns.push(Documents.HistogramDocument(histoOp, { width: 200, height: 200, title: attr.displayName!, northstarSchema: CurrentUserUtils.ActiveSchema!.displayName! }, attr.displayName!));
- }
- }));
+ this._northstarSchemas = ctlog.schemas.map(schema => {
+ let schemaDoc = Documents.TreeDocument([], { width: 50, height: 100, title: schema.displayName! });
+ let schemaDocuments = schemaDoc.GetList(KeyStore.Data, [] as Document[]);
+ CurrentUserUtils.GetAllNorthstarColumnAttributes(schema).map(attr => {
+ Server.GetField(attr.displayName!, action((field: Opt<Field>) => {
+ if (field instanceof Document) {
+ schemaDocuments.push(field);
+ } else {
+ var atmod = new ColumnAttributeModel(attr);
+ let histoOp = new HistogramOperation(schema!.displayName!,
+ new AttributeTransformationModel(atmod, AggregateFunction.None),
+ new AttributeTransformationModel(atmod, AggregateFunction.Count),
+ new AttributeTransformationModel(atmod, AggregateFunction.Count));
+ schemaDocuments.push(Documents.HistogramDocument(histoOp, { width: 200, height: 200, title: attr.displayName! }, attr.displayName!));
+ }
+ }));
+ });
+ return schemaDoc;
})
- console.log("Activating schema " + CurrentUserUtils.ActiveSchema!.displayName!)
- CurrentUserUtils.ActiveSchemaName = CurrentUserUtils.ActiveSchema!.displayName!;
}
}
async initializeNorthstar(): Promise<void> {
diff --git a/src/client/views/nodes/DocumentContentsView.tsx b/src/client/views/nodes/DocumentContentsView.tsx
index b54744337..77551649c 100644
--- a/src/client/views/nodes/DocumentContentsView.tsx
+++ b/src/client/views/nodes/DocumentContentsView.tsx
@@ -19,8 +19,7 @@ import { KeyValueBox } from "./KeyValueBox";
import { PDFBox } from "./PDFBox";
import { VideoBox } from "./VideoBox";
import { WebBox } from "./WebBox";
-import { HistogramBox } from "./HistogramBox";
-import { HistogramBoxPrimitives } from "./HistogramBoxPrimitives";
+import { HistogramBox } from "../../northstar/dash-nodes/HistogramBox";
import React = require("react");
const JsxParser = require('react-jsx-parser').default; //TODO Why does this need to be imported like this?
@@ -54,7 +53,7 @@ export class DocumentContentsView extends React.Component<DocumentViewProps & {
return <p>Error loading layout keys</p>;
}
return <JsxParser
- components={{ FormattedTextBox, ImageBox, CollectionFreeFormView, CollectionDockingView, CollectionSchemaView, CollectionView, CollectionPDFView, CollectionVideoView, WebBox, KeyValueBox, PDFBox, VideoBox, AudioBox, HistogramBox, HistogramBoxPrimitives }}
+ components={{ FormattedTextBox, ImageBox, CollectionFreeFormView, CollectionDockingView, CollectionSchemaView, CollectionView, CollectionPDFView, CollectionVideoView, WebBox, KeyValueBox, PDFBox, VideoBox, AudioBox, HistogramBox }}
bindings={this.CreateBindings()}
jsx={this.layout}
showWarnings={true}
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 769d893f3..71613ca4f 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -120,9 +120,6 @@ export class DocumentView extends React.Component<DocumentViewProps> {
}
private dropDisposer?: DragManager.DragDropDisposer;
- protected createDropTarget = (ele: HTMLDivElement) => {
-
- }
componentDidMount() {
if (this._mainCont.current) {
diff --git a/src/client/views/nodes/HistogramBox.scss b/src/client/views/nodes/HistogramBox.scss
deleted file mode 100644
index 2660b1b75..000000000
--- a/src/client/views/nodes/HistogramBox.scss
+++ /dev/null
@@ -1,22 +0,0 @@
-.histogrambox-container {
- padding: 0vw;
- position: absolute;
- text-align: center;
- width: 100%;
- height: 100%;
- }
- .histogrambox-xaxislabel {
- position:absolute;
- width:100%;
- text-align: center;
- bottom:0;
- font-size: 14;
- font-weight: bold;
- }
-
- .histogrambox-container {
- position:absolute;
- width:100%;
- height: 100%;
- }
- \ No newline at end of file
diff --git a/src/client/views/nodes/HistogramBox.tsx b/src/client/views/nodes/HistogramBox.tsx
deleted file mode 100644
index 3307925a2..000000000
--- a/src/client/views/nodes/HistogramBox.tsx
+++ /dev/null
@@ -1,105 +0,0 @@
-import React = require("react")
-import { computed, observable, reaction, runInAction } from "mobx";
-import { observer } from "mobx-react";
-import Measure from "react-measure";
-import { Dictionary } from "typescript-collections";
-import { Opt } from "../../../fields/Field";
-import { HistogramField } from "../../../fields/HistogramField";
-import { KeyStore } from "../../../fields/KeyStore";
-import { CurrentUserUtils } from "../../../server/authentication/models/current_user_utils";
-import { FilterModel } from '../../northstar/core/filter/FilterModel';
-import { ChartType, VisualBinRange } from '../../northstar/model/binRanges/VisualBinRange';
-import { VisualBinRangeHelper } from "../../northstar/model/binRanges/VisualBinRangeHelper";
-import { AggregateBinRange, BinRange, DoubleValueAggregateResult, HistogramResult } from "../../northstar/model/idea/idea";
-import { ModelHelpers } from "../../northstar/model/ModelHelpers";
-import { HistogramOperation } from "../../northstar/operations/HistogramOperation";
-import { PIXIRectangle } from "../../northstar/utils/MathUtil";
-import { SizeConverter } from "../../northstar/utils/SizeConverter";
-import "./../../northstar/utils/Extensions";
-import { FieldView, FieldViewProps } from './FieldView';
-import "./HistogramBox.scss";
-import { HistogramBoxPrimitives } from './HistogramBoxPrimitives';
-import { HistogramLabelPrimitives } from "./HistogramLabelPrimitives";
-
-export interface HistogramPrimitivesProps {
- HistoBox: HistogramBox;
-}
-
-@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 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 = new SizeConverter();
-
- @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, "?")],
- (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]);
- }
- });
- }
-
- 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.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>
- )
- }
-}
-
diff --git a/src/client/views/nodes/HistogramBoxPrimitives.scss b/src/client/views/nodes/HistogramBoxPrimitives.scss
deleted file mode 100644
index 85f2c092d..000000000
--- a/src/client/views/nodes/HistogramBoxPrimitives.scss
+++ /dev/null
@@ -1,25 +0,0 @@
-.histogramboxprimitives-border {
- border: 3px;
- border-style: solid;
- border-color: #282828;
- pointer-events: none;
- position: absolute;
-}
-.histogramboxprimitives-bar {
- position: absolute;
- border: 1px;
- border-style: solid;
- border-color: #282828;
- pointer-events: all;
-}
-
-.histogramboxprimitives-placer {
- position: absolute;
- pointer-events: none;
- width: 100%;
- height: 100%;
-}
-.histogramboxprimitives-line {
- position: absolute;
- background: lightgray;
-} \ No newline at end of file
diff --git a/src/client/views/nodes/HistogramBoxPrimitives.tsx b/src/client/views/nodes/HistogramBoxPrimitives.tsx
deleted file mode 100644
index f15cb5689..000000000
--- a/src/client/views/nodes/HistogramBoxPrimitives.tsx
+++ /dev/null
@@ -1,336 +0,0 @@
-import React = require("react")
-import { computed, observable, runInAction, trace } 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, HistogramResult, MarginAggregateParameters, MarginAggregateResult, BinLabel } 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 { StyleConstants } from "../../northstar/utils/StyleContants";
-import { HistogramBox, HistogramPrimitivesProps } from "./HistogramBox";
-import "./HistogramBoxPrimitives.scss";
-import { HistogramOperation } from "../../northstar/operations/HistogramOperation";
-import { FilterModel } from "../../northstar/core/filter/FilterModel";
-
-
-@observer
-export class HistogramBoxPrimitives extends React.Component<HistogramPrimitivesProps> {
- private get histoOp() { return this.props.HistoBox.HistoOp; }
- private get renderDimension() { return this.props.HistoBox.SizeConverter.RenderDimension; }
- @observable _selectedPrims: HistogramBinPrimitive[] = [];
- @computed get xaxislines() { return this.renderGridLinesAndLabels(0); }
- @computed get yaxislines() { return this.renderGridLinesAndLabels(1); }
- @computed get selectedPrimitives() { return this._selectedPrims.map(bp => this.drawRect(bp.Rect, bp.BarAxis, undefined, "border")); }
- @computed get binPrimitives() {
- let histoResult = this.props.HistoBox.HistogramResult;
- if (!histoResult || !histoResult.bins || !this.props.HistoBox.VisualBinRanges.length)
- return (null);
- let allBrushIndex = ModelHelpers.AllBrushIndex(histoResult);
- return Object.keys(histoResult.bins).reduce((prims, key) => {
- let drawPrims = new HistogramBinPrimitiveCollection(histoResult!.bins![key], this.props.HistoBox);
- let filterModel = ModelHelpers.GetBinFilterModel(histoResult!.bins![key], allBrushIndex, histoResult!, this.histoOp!.X, this.histoOp!.Y);
-
- this.props.HistoBox.HitTargets.setValue(drawPrims.HitGeom, filterModel);
-
- let toggle = this.getSelectionToggle(drawPrims.BinPrimitives, allBrushIndex, filterModel);
- drawPrims.BinPrimitives.filter(bp => bp.DataValue && bp.BrushIndex !== allBrushIndex).map(bp =>
- prims.push(...[{ r: bp.Rect, c: bp.Color }, { r: bp.MarginRect, c: StyleConstants.MARGIN_BARS_COLOR }].map(pair => this.drawRect(pair.r, bp.BarAxis, pair.c, "bar", toggle))));
- return prims;
- }, [] as JSX.Element[]);
- }
-
- private getSelectionToggle(binPrimitives: HistogramBinPrimitive[], allBrushIndex: number, filterModel: FilterModel) {
- let allBrushPrim = ArrayUtil.FirstOrDefault(binPrimitives, bp => bp.BrushIndex == allBrushIndex);
- return !allBrushPrim ? () => { } : () => runInAction(() => {
- if (ArrayUtil.Contains(this.histoOp!.FilterModels, filterModel)) {
- this._selectedPrims.splice(this._selectedPrims.indexOf(allBrushPrim!), 1);
- this.histoOp!.RemoveFilterModels([filterModel]);
- }
- else {
- this._selectedPrims.push(allBrushPrim!);
- this.histoOp!.AddFilterModels([filterModel]);
- }
- })
- }
-
- private renderGridLinesAndLabels(axis: number) {
- if (!this.props.HistoBox.SizeConverter.Initialized)
- return (null);
- let labels = this.props.HistoBox.VisualBinRanges[axis].GetLabels();
- return labels.reduce((prims, binLabel, i) => {
- let r = this.props.HistoBox.SizeConverter.DataToScreenRange(binLabel.minValue!, binLabel.maxValue!, axis);
- prims.push(this.drawLine(r.xFrom, r.yFrom, axis == 0 ? 0 : r.xTo - r.xFrom, axis == 0 ? r.yTo - r.yFrom : 0));
- if (i == labels.length - 1)
- prims.push(this.drawLine(axis == 0 ? r.xTo : r.xFrom, axis == 0 ? r.yFrom : r.yTo, axis == 0 ? 0 : r.xTo - r.xFrom, axis == 0 ? r.yTo - r.yFrom : 0));
- return prims;
- }, [] as JSX.Element[]);
- }
-
- drawEntity(xFrom: number, yFrom: number, entity: JSX.Element) {
- let transXpercent = xFrom / this.renderDimension * 100;
- let transYpercent = yFrom / this.renderDimension * 100;
- return (<div key={DashUtils.GenerateGuid()} className={`histogramboxprimitives-placer`} style={{ transform: `translate(${transXpercent}%, ${transYpercent}%)` }}>
- {entity}
- </div>);
- }
- drawLine(xFrom: number, yFrom: number, width: number, height: number) {
- if (height < 0) {
- yFrom += height;
- height = -height;
- }
- if (width < 0) {
- xFrom += width;
- width = -width;
- }
- let trans2Xpercent = width == 0 ? `1px` : `${(xFrom + width) / this.renderDimension * 100}%`;
- let trans2Ypercent = height == 0 ? `1px` : `${(yFrom + height) / this.renderDimension * 100}%`;
- let line = (<div className="histogramboxprimitives-line" style={{ width: trans2Xpercent, height: trans2Ypercent, }} />);
- return this.drawEntity(xFrom, yFrom, line);
- }
-
- drawRect(r: PIXIRectangle, barAxis: number, color: number | undefined, classExt: string, tapHandler: () => void = () => { }) {
- let widthPercent = r.width / this.renderDimension * 100;
- let heightPercent = r.height / this.renderDimension * 100;
- let rect = (<div className={`histogramboxprimitives-${classExt}`} onPointerDown={(e: React.PointerEvent) => { if (e.button == 0) tapHandler() }}
- style={{
- borderBottomStyle: barAxis == 1 ? "none" : "solid",
- borderLeftStyle: barAxis == 0 ? "none" : "solid",
- width: `${widthPercent}%`,
- height: `${heightPercent}%`,
- background: color ? `${LABColor.RGBtoHexString(color)}` : ""
- }}
- />);
- return this.drawEntity(r.x, r.y, rect);
- }
- render() {
- return <div className="histogramboxprimitives-container" style={{
- width: "100%",
- height: "100%",
- }}>
- {this.xaxislines}
- {this.yaxislines}
- {this.binPrimitives}
- {this.selectedPrimitives}
- </div>
- }
-}
-
-class HistogramBinPrimitive {
- constructor(init?: Partial<HistogramBinPrimitive>) {
- Object.assign(this, init);
- }
- public DataValue: number = 0;
- public Rect: PIXIRectangle = PIXIRectangle.EMPTY;
- public MarginRect: PIXIRectangle = PIXIRectangle.EMPTY;
- public MarginPercentage: number = 0;
- public Color: number = StyleConstants.WARNING_COLOR;
- public Opacity: number = 1;
- public BrushIndex: number = 0;
- public BarAxis: number = -1;
-}
-
-export class HistogramBinPrimitiveCollection {
- private static TOLERANCE: number = 0.0001;
-
- 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(bin: Bin, histoBox: HistogramBox) {
- this._histoBox = histoBox;
- 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);
- }
- }, 0);
-
- // adjust brush rects (stacking or not)
- var allBrushIndex = ModelHelpers.AllBrushIndex(this.histoResult);
- var filteredBinPrims = this.BinPrimitives.filter(b => b.BrushIndex != allBrushIndex && b.DataValue != 0.0);
- 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);
- 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 / 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);
- 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);
- 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 / 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);
- 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 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, brushFactorSum: number): number {
-
- let unNormalizedValue = this.histoOp!.getValue(2, bin, this.histoResult, brush.brushIndex!);
- if (unNormalizedValue == undefined)
- return brushFactorSum;
-
- 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]);
-
- let allUnNormalizedValue = this.histoOp.getValue(2, bin, this.histoResult, ModelHelpers.AllBrushIndex(this.histoResult))
-
- // 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 != undefined) {
- var brushFactor = (unNormalizedValue / allUnNormalizedValue);
- returnBrushFactorSum += brushFactor;
- returnBrushFactorSum = Math.min(returnBrushFactorSum, 1.0);
-
- var tempRect = new PIXIRectangle(xFrom, yTo, xTo - xFrom, yFrom - yTo);
- var ratio = (tempRect.width / tempRect.height);
- var newHeight = Math.sqrt((1.0 / ratio) * ((tempRect.width * tempRect.height) * returnBrushFactorSum));
- var newWidth = newHeight * ratio;
-
- xFrom = (tempRect.x + (tempRect.width - newWidth) / 2.0);
- yTo = (tempRect.y + (tempRect.height - newHeight) / 2.0);
- xTo = (xFrom + newWidth);
- yFrom = (yTo + newHeight);
- }
- var alpha = 0.0;
- var color = this.baseColorFromBrush(brush);
- var lerpColor = LABColor.Lerp(
- LABColor.FromColor(StyleConstants.MIN_VALUE_COLOR),
- LABColor.FromColor(color),
- (alpha + Math.pow(normalizedValue, 1.0 / 3.0) * (1.0 - alpha)));
- var dataColor = LABColor.ToColor(lerpColor);
-
- this.createBinPrimitive(-1, brush, PIXIRectangle.EMPTY, 0, xFrom, xTo, yFrom, yTo, dataColor, 1, unNormalizedValue);
- return returnBrushFactorSum;
- }
-
- 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!));
-
- if (xFrom != undefined && yFrom != undefined && xTo != undefined && yTo != undefined)
- this.createBinPrimitive(-1, 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): 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 yMarginAbsolute = this.getMargin(bin, brush, this.histoOp.Y);
- var marginRect = new PIXIRectangle(xFrom + (xTo - xFrom) / 2.0 - 1,
- this.sizeConverter.DataToScreenY(yValue + yMarginAbsolute), 2,
- this.sizeConverter.DataToScreenY(yValue - yMarginAbsolute) - this.sizeConverter.DataToScreenY(yValue + yMarginAbsolute));
-
- this.createBinPrimitive(1, brush, marginRect, 0, xFrom, xTo, yFrom, yTo,
- 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): 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 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,
- this.sizeConverter.DataToScreenX(xValue + xMarginAbsolute) - this.sizeConverter.DataToScreenX(xValue - xMarginAbsolute),
- 2.0);
-
- this.createBinPrimitive(0, brush, marginRect, 0, xFrom, xTo, yFrom, yTo,
- 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(barAxis: number, brush: Brush, marginRect: PIXIRectangle,
- marginPercentage: number, xFrom: number, xTo: number, yFrom: number, yTo: number, color: number, opacity: number, dataValue: number) {
- var binPrimitive = new HistogramBinPrimitive(
- {
- Rect: new PIXIRectangle(xFrom, yTo, xTo - xFrom, yFrom - yTo),
- MarginRect: marginRect,
- MarginPercentage: marginPercentage,
- BrushIndex: brush.brushIndex,
- Color: color,
- Opacity: opacity,
- DataValue: dataValue,
- BarAxis: barAxis
- });
- this.BinPrimitives.push(binPrimitive);
- }
-
- private baseColorFromBrush(brush: Brush): number {
- if (brush.brushIndex == ModelHelpers.RestBrushIndex(this.histoResult)) {
- return StyleConstants.HIGHLIGHT_COLOR;
- }
- else if (brush.brushIndex == ModelHelpers.OverlapBrushIndex(this.histoResult)) {
- return StyleConstants.OVERLAP_COLOR;
- }
- else if (brush.brushIndex == ModelHelpers.AllBrushIndex(this.histoResult)) {
- return 0x00ff00;
- }
- else if (this.histoOp.BrushColors.length > 0) {
- return this.histoOp.BrushColors[brush.brushIndex! % this.histoOp.BrushColors.length];
- }
- return StyleConstants.HIGHLIGHT_COLOR;
- }
-} \ No newline at end of file
diff --git a/src/client/views/nodes/HistogramLabelPrimitives.scss b/src/client/views/nodes/HistogramLabelPrimitives.scss
deleted file mode 100644
index d8ee88d72..000000000
--- a/src/client/views/nodes/HistogramLabelPrimitives.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-
- .histogramLabelPrimitives-gridlabel {
- position:absolute;
- transform-origin: left top;
- font-size: 11;
- }
- .histogramLabelPrimitives-placer {
- position:absolute;
- width:100%;
- height:100%;
- pointer-events: none;
- } \ No newline at end of file
diff --git a/src/client/views/nodes/HistogramLabelPrimitives.tsx b/src/client/views/nodes/HistogramLabelPrimitives.tsx
deleted file mode 100644
index 7f365e45b..000000000
--- a/src/client/views/nodes/HistogramLabelPrimitives.tsx
+++ /dev/null
@@ -1,78 +0,0 @@
-import React = require("react")
-import { action, computed, reaction } from "mobx";
-import { observer } from "mobx-react";
-import { Utils as DashUtils } from '../../../Utils';
-import { NominalVisualBinRange } from "../../northstar/model/binRanges/NominalVisualBinRange";
-import { StyleConstants } from "../../northstar/utils/StyleContants";
-import "./../../northstar/utils/Extensions";
-import "./HistogramLabelPrimitives.scss";
-import { HistogramBox, HistogramPrimitivesProps } from "./HistogramBox";
-
-@observer
-export class HistogramLabelPrimitives extends React.Component<HistogramPrimitivesProps> {
- 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 });
- }
-
- @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.props.HistoBox.SizeConverter;
- let vb = this.props.HistoBox.VisualBinRanges;
- if (!vb.length || !sc.Initialized)
- return (null);
- 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 labels = vb[axis].GetLabels();
- return labels.reduce((prims, binLabel, i) => {
- let r = sc.DataToScreenRange(binLabel.minValue!, binLabel.maxValue!, axis);
- 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);
-
- 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 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;
- }, [] as JSX.Element[]);
- }
-
- render() {
- let xaxislines = this.xaxislines;
- let yaxislines = this.yaxislines;
- return <div className="histogramLabelPrimitives-container">
- {xaxislines}
- {yaxislines}
- </div>
- }
-
-} \ No newline at end of file
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-12-17 10:32:55 +0000