aboutsummaryrefslogtreecommitdiff
path: root/src/client/northstar/dash-nodes/HistogramBox.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/northstar/dash-nodes/HistogramBox.tsx')
-rw-r--r--src/client/northstar/dash-nodes/HistogramBox.tsx104
1 files changed, 53 insertions, 51 deletions
diff --git a/src/client/northstar/dash-nodes/HistogramBox.tsx b/src/client/northstar/dash-nodes/HistogramBox.tsx
index 0e84ace50..765ecf8f0 100644
--- a/src/client/northstar/dash-nodes/HistogramBox.tsx
+++ b/src/client/northstar/dash-nodes/HistogramBox.tsx
@@ -1,10 +1,6 @@
import React = require("react");
import { action, computed, observable, reaction, runInAction, trace } from "mobx";
import { observer } from "mobx-react";
-import Measure from "react-measure";
-import { FieldWaiting, Opt } from "../../../fields/Field";
-import { Document } from "../../../fields/Document";
-import { KeyStore } from "../../../fields/KeyStore";
import { CurrentUserUtils } from "../../../server/authentication/models/current_user_utils";
import { ChartType, VisualBinRange } from '../../northstar/model/binRanges/VisualBinRange';
import { VisualBinRangeHelper } from "../../northstar/model/binRanges/VisualBinRangeHelper";
@@ -21,18 +17,20 @@ import "./HistogramBox.scss";
import { HistogramBoxPrimitives } from './HistogramBoxPrimitives';
import { HistogramLabelPrimitives } from "./HistogramLabelPrimitives";
import { StyleConstants } from "../utils/StyleContants";
+import { NumCast, Cast } from "../../../new_fields/Types";
+import { listSpec } from "../../../new_fields/Schema";
+import { Doc } from "../../../new_fields/Doc";
+import { Id } from "../../../new_fields/RefField";
@observer
export class HistogramBox extends React.Component<FieldViewProps> {
- public static LayoutString(fieldStr: string = "DataKey") { return FieldView.LayoutString(HistogramBox, fieldStr); }
+ public static LayoutString(fieldStr: string = "data") { return FieldView.LayoutString(HistogramBox, fieldStr); }
private _dropXRef = React.createRef<HTMLDivElement>();
private _dropYRef = React.createRef<HTMLDivElement>();
private _dropXDisposer?: DragManager.DragDropDisposer;
private _dropYDisposer?: DragManager.DragDropDisposer;
- @observable public PanelWidth: number = 100;
- @observable public PanelHeight: number = 100;
@observable public HistoOp: HistogramOperation = HistogramOperation.Empty;
@observable public VisualBinRanges: VisualBinRange[] = [];
@observable public ValueRange: number[] = [];
@@ -50,9 +48,9 @@ export class HistogramBox extends React.Component<FieldViewProps> {
@action
dropX = (e: Event, de: DragManager.DropEvent) => {
if (de.data instanceof DragManager.DocumentDragData) {
- let h = de.data.draggedDocuments[0].GetT(KeyStore.Data, HistogramField);
- if (h && h !== FieldWaiting) {
- this.HistoOp.X = h.Data.X;
+ let h = Cast(de.data.draggedDocuments[0].data, HistogramField);
+ if (h) {
+ this.HistoOp.X = h.HistoOp.X;
}
e.stopPropagation();
e.preventDefault();
@@ -61,9 +59,9 @@ export class HistogramBox extends React.Component<FieldViewProps> {
@action
dropY = (e: Event, de: DragManager.DropEvent) => {
if (de.data instanceof DragManager.DocumentDragData) {
- let h = de.data.draggedDocuments[0].GetT(KeyStore.Data, HistogramField);
- if (h && h !== FieldWaiting) {
- this.HistoOp.Y = h.Data.X;
+ let h = Cast(de.data.draggedDocuments[0].data, HistogramField);
+ if (h) {
+ this.HistoOp.Y = h.HistoOp.X;
}
e.stopPropagation();
e.preventDefault();
@@ -88,7 +86,7 @@ export class HistogramBox extends React.Component<FieldViewProps> {
}
reaction(() => CurrentUserUtils.NorthstarDBCatalog, (catalog?: Catalog) => this.activateHistogramOperation(catalog), { 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.props.PanelWidth(), this.props.PanelHeight()], (size: number[]) => this.SizeConverter.SetIsSmall(size[0] < 40 && size[1] < 40));
reaction(() => this.HistogramResult ? this.HistogramResult.binRanges : undefined,
(binRanges: BinRange[] | undefined) => {
if (binRanges) {
@@ -113,59 +111,63 @@ export class HistogramBox extends React.Component<FieldViewProps> {
}
}
- activateHistogramOperation(catalog?: Catalog) {
+ async activateHistogramOperation(catalog?: Catalog) {
if (catalog) {
- this.props.Document.GetTAsync(this.props.fieldKey, HistogramField).then((histoOp: Opt<HistogramField>) => runInAction(() => {
- this.HistoOp = histoOp ? histoOp.Data : HistogramOperation.Empty;
+ let histoOp = await Cast(this.props.Document[this.props.fieldKey], HistogramField);
+ runInAction(() => {
+ this.HistoOp = histoOp ? histoOp.HistoOp : HistogramOperation.Empty;
if (this.HistoOp !== HistogramOperation.Empty) {
- reaction(() => this.props.Document.GetList(KeyStore.LinkedFromDocs, [] as Document[]), (docs) => this.HistoOp.Links.splice(0, this.HistoOp.Links.length, ...docs), { fireImmediately: true });
- reaction(() => this.props.Document.GetList(KeyStore.BrushingDocs, []).length,
+ reaction(() => Cast(this.props.Document.linkedFromDocs, listSpec(Doc), []), (docs) => this.HistoOp.Links.splice(0, this.HistoOp.Links.length, ...docs), { fireImmediately: true });
+ reaction(() => Cast(this.props.Document.brushingDocs, listSpec(Doc), []).length,
() => {
- let brushingDocs = this.props.Document.GetList(KeyStore.BrushingDocs, [] as Document[]);
- let proto = this.props.Document.GetPrototype() as Document;
- this.HistoOp.BrushLinks.splice(0, this.HistoOp.BrushLinks.length, ...brushingDocs.map((brush, i) => {
- brush.SetNumber(KeyStore.BackgroundColor, StyleConstants.BRUSH_COLORS[i % StyleConstants.BRUSH_COLORS.length]);
- let brushed = brush.GetList(KeyStore.BrushingDocs, [] as Document[]);
- return { l: brush, b: brushed[0].Id === proto.Id ? brushed[1] : brushed[0] };
- }));
+ let brushingDocs = Cast(this.props.Document.brushingDocs, listSpec(Doc), []);
+ const proto = this.props.Document.proto;
+ if (proto) {
+ this.HistoOp.BrushLinks.splice(0, this.HistoOp.BrushLinks.length, ...brushingDocs.map((brush, i) => {
+ brush.bckgroundColor = StyleConstants.BRUSH_COLORS[i % StyleConstants.BRUSH_COLORS.length];
+ let brushed = Cast(brush.brushingDocs, listSpec(Doc), []);
+ return { l: brush, b: brushed[0][Id] === proto[Id] ? brushed[1] : brushed[0] };
+ }));
+ }
}, { fireImmediately: true });
reaction(() => this.createOperationParamsCache, () => this.HistoOp.Update(), { fireImmediately: true });
}
- }));
+ });
}
}
+
+ @action
+ private onScrollWheel = (e: React.WheelEvent) => {
+ this.HistoOp.DrillDown(e.deltaY > 0);
+ e.stopPropagation();
+ }
+
render() {
let labelY = this.HistoOp && this.HistoOp.Y ? this.HistoOp.Y.PresentedName : "<...>";
let labelX = this.HistoOp && this.HistoOp.X ? this.HistoOp.X.PresentedName : "<...>";
- var h = this.props.isTopMost ? this.PanelHeight : this.props.Document.GetNumber(KeyStore.Height, 0);
- var w = this.props.isTopMost ? this.PanelWidth : this.props.Document.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(-50%, -50%)` }}>
- <div className="histogrambox-yaxislabel" onPointerDown={this.yLabelPointerDown} ref={this._dropYRef} >
- <span className="histogrambox-yaxislabel-text">
- {labelY}
- </span>
- </div>
- <div className="histogrambox-primitives" style={{
- transform: `translate(${loff + 25}px, ${toff}px)`,
- width: `calc(100% - ${loff + roff + 25}px)`,
- height: `calc(100% - ${toff + boff}px)`,
- }}>
- <HistogramLabelPrimitives HistoBox={this} />
- <HistogramBoxPrimitives HistoBox={this} />
- </div>
- <div className="histogrambox-xaxislabel" onPointerDown={this.xLabelPointerDown} ref={this._dropXRef} >
- {labelX}
- </div>
- </div>
- }
- </Measure>
+ <div className="histogrambox-container" onWheel={this.onScrollWheel}>
+ <div className="histogrambox-yaxislabel" onPointerDown={this.yLabelPointerDown} ref={this._dropYRef} >
+ <span className="histogrambox-yaxislabel-text">
+ {labelY}
+ </span>
+ </div>
+ <div className="histogrambox-primitives" style={{
+ transform: `translate(${loff + 25}px, ${toff}px)`,
+ width: `calc(100% - ${loff + roff + 25}px)`,
+ height: `calc(100% - ${toff + boff}px)`,
+ }}>
+ <HistogramLabelPrimitives HistoBox={this} />
+ <HistogramBoxPrimitives HistoBox={this} />
+ </div>
+ <div className="histogrambox-xaxislabel" onPointerDown={this.xLabelPointerDown} ref={this._dropXRef} >
+ {labelX}
+ </div>
+ </div>
);
}
}
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-06 16:29:34 +0000