diff options
Diffstat (limited to 'src/client/views/nodes/DataVizBox/DataVizBox.tsx')
| -rw-r--r-- | src/client/views/nodes/DataVizBox/DataVizBox.tsx | 81 |
1 files changed, 41 insertions, 40 deletions
diff --git a/src/client/views/nodes/DataVizBox/DataVizBox.tsx b/src/client/views/nodes/DataVizBox/DataVizBox.tsx index 4eb241380..56c130e0f 100644 --- a/src/client/views/nodes/DataVizBox/DataVizBox.tsx +++ b/src/client/views/nodes/DataVizBox/DataVizBox.tsx @@ -52,10 +52,10 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { @observable _savedAnnotations = new ObservableMap<number, HTMLDivElement[]>(); @computed get annotationLayer() { TraceMobx(); - return <div className="dataVizBox-annotationLayer" style={{ height: this.props.PanelHeight(), width: this.props.PanelWidth() }} ref={this._annotationLayer} />; + return <div className="dataVizBox-annotationLayer" style={{ height: this._props.PanelHeight(), width: this._props.PanelWidth() }} ref={this._annotationLayer} />; } marqueeDown = (e: React.PointerEvent) => { - if (!e.altKey && e.button === 0 && NumCast(this.rootDoc._freeform_scale, 1) <= NumCast(this.rootDoc.freeform_scaleMin, 1) && this.props.isContentActive(true) && ![InkTool.Highlighter, InkTool.Pen, InkTool.Write].includes(Doc.ActiveTool)) { + if (!e.altKey && e.button === 0 && NumCast(this.Document._freeform_scale, 1) <= NumCast(this.Document.freeform_scaleMin, 1) && this._props.isContentActive(true) && ![InkTool.Highlighter, InkTool.Pen, InkTool.Write].includes(Doc.ActiveTool)) { setupMoveUpEvents( this, e, @@ -75,7 +75,7 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { finishMarquee = () => { this._getAnchor = AnchorMenu.Instance?.GetAnchor; this._marqueeing = undefined; - this.props.select(false); + this._props.select(false); }; savedAnnotations = () => this._savedAnnotations; @@ -90,7 +90,7 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { // all CSV records in the dataset (that aren't an empty row) @computed.struct get records() { - var records = DataVizBox.dataset.get(CsvCast(this.rootDoc[this.fieldKey]).url.href); + var records = DataVizBox.dataset.get(CsvCast(this.dataDoc[this.fieldKey]).url.href); return records?.filter(record => Object.keys(record).some(key => record[key])) ?? []; } @@ -131,15 +131,15 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { getAnchor = (addAsAnnotation?: boolean, pinProps?: PinProps) => { const visibleAnchor = this._getAnchor?.(this._savedAnnotations, false); // use marquee anchor, otherwise, save zoom/pan as anchor const anchor = !pinProps - ? this.rootDoc + ? this.Document : this._vizRenderer?.getAnchor(pinProps) ?? visibleAnchor ?? Docs.Create.ConfigDocument({ - title: 'ImgAnchor:' + this.rootDoc.title, + title: 'ImgAnchor:' + this.Document.title, config_panX: NumCast(this.layoutDoc._freeform_panX), config_panY: NumCast(this.layoutDoc._freeform_panY), config_viewScale: Cast(this.layoutDoc._freeform_scale, 'number', null), - annotationOn: this.rootDoc, + annotationOn: this.Document, // when we clear selection -> we should have it so chartBox getAnchor returns undefined // this is for when we want the whole doc (so when the chartBox getAnchor returns without a marker) /*put in some options*/ @@ -193,8 +193,8 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { key="sidebar" title="Toggle Sidebar" style={{ - display: !this.props.isContentActive() ? 'none' : undefined, - top: StrCast(this.rootDoc._layout_showTitle) === 'title' ? 20 : 5, + display: !this._props.isContentActive() ? 'none' : undefined, + top: StrCast(this.Document._layout_showTitle) === 'title' ? 20 : 5, backgroundColor: this.SidebarShown ? Colors.MEDIUM_BLUE : Colors.BLACK, }} onPointerDown={this.sidebarBtnDown}> @@ -212,11 +212,11 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { e, (e, down, delta) => runInAction(() => { - const localDelta = this.props + const localDelta = this._props .ScreenToLocalTransform() - .scale(this.props.NativeDimScaling?.() || 1) + .scale(this._props.NativeDimScaling?.() || 1) .transformDirection(delta[0], delta[1]); - const fullWidth = this.props.width; + const fullWidth = this._props.width; const mapWidth = fullWidth! - this.sidebarWidth(); if (this.sidebarWidth() + localDelta[0] > 0) { this.layoutDoc._layout_showSidebar = true; @@ -241,9 +241,9 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { return StrCast(this.layoutDoc._layout_sidebarWidthPercent, '0%'); } @computed get sidebarColor() { - return StrCast(this.layoutDoc.sidebar_color, StrCast(this.layoutDoc[this.props.fieldKey + '_backgroundColor'], '#e4e4e4')); + return StrCast(this.layoutDoc.sidebar_color, StrCast(this.layoutDoc[this._props.fieldKey + '_backgroundColor'], '#e4e4e4')); } - sidebarWidth = () => (Number(this.sidebarWidthPercent.substring(0, this.sidebarWidthPercent.length - 1)) / 100) * this.props.PanelWidth(); + sidebarWidth = () => (Number(this.sidebarWidthPercent.substring(0, this.sidebarWidthPercent.length - 1)) / 100) * this._props.PanelWidth(); sidebarAddDocument = (doc: Doc | Doc[], sidebarKey?: string) => { if (!this.SidebarShown) this.toggleSidebar(); return this.addDocument(doc, sidebarKey); @@ -251,31 +251,32 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { sidebarRemoveDocument = (doc: Doc | Doc[], sidebarKey?: string) => this.removeDocument(doc, sidebarKey); componentDidMount() { - this.props.setContentView?.(this); - if (!DataVizBox.dataset.has(CsvCast(this.rootDoc[this.fieldKey]).url.href)) this.fetchData(); + this._props.setContentView?.(this); + if (!DataVizBox.dataset.has(CsvCast(this.dataDoc[this.fieldKey]).url.href)) this.fetchData(); } fetchData = () => { - DataVizBox.dataset.set(CsvCast(this.rootDoc[this.fieldKey]).url.href, []); // assign temporary dataset as a lock to prevent duplicate server requests + DataVizBox.dataset.set(CsvCast(this.dataDoc[this.fieldKey]).url.href, []); // assign temporary dataset as a lock to prevent duplicate server requests fetch('/csvData?uri=' + this.dataUrl?.url.href) // - .then(res => res.json().then(action(res => !res.errno && DataVizBox.dataset.set(CsvCast(this.rootDoc[this.fieldKey]).url.href, res)))); + .then(res => res.json().then(action(res => !res.errno && DataVizBox.dataset.set(CsvCast(this.dataDoc[this.fieldKey]).url.href, res)))); }; // toggles for user to decide which chart type to view the data in @computed get renderVizView() { - const scale = this.props.NativeDimScaling?.() || 1; + const scale = this._props.NativeDimScaling?.() || 1; const sharedProps = { - rootDoc: this.rootDoc, + Document: this.Document, layoutDoc: this.layoutDoc, records: this.records, axes: this.axes, - height: (this.props.PanelHeight() - 32) /* height of 'change view' button */ * 0.9, - width: this.SidebarShown? this.props.PanelWidth()*.9/1.2: this.props.PanelWidth() * 0.9, + //width: this.SidebarShown? this._props.PanelWidth()*.9/1.2: this._props.PanelWidth() * 0.9, + height: (this._props.PanelHeight() / scale - 32) /* height of 'change view' button */ * 0.9, + width: (this._props.PanelWidth() / scale) * 0.9, margin: { top: 10, right: 25, bottom: 75, left: 45 }, }; if (!this.records.length) return 'no data/visualization'; switch (this.dataVizView) { - case DataVizView.TABLE: return <TableBox {...sharedProps} docView={this.props.DocumentView} selectAxes={this.selectAxes} />; + case DataVizView.TABLE: return <TableBox {...sharedProps} docView={this.DocumentView} selectAxes={this.selectAxes} />; case DataVizView.LINECHART: return <LineChart {...sharedProps} dataDoc={this.dataDoc} fieldKey={this.fieldKey} ref={r => (this._vizRenderer = r ?? undefined)} />; case DataVizView.HISTOGRAM: return <Histogram {...sharedProps} dataDoc={this.dataDoc} fieldKey={this.fieldKey} ref={r => (this._vizRenderer = r ?? undefined)} />; case DataVizView.PIECHART: return <PieChart {...sharedProps} dataDoc={this.dataDoc} fieldKey={this.fieldKey} ref={r => (this._vizRenderer = r ?? undefined)} @@ -285,9 +286,9 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { @action onPointerDown = (e: React.PointerEvent): void => { - if ((this.props.Document._freeform_scale || 1) !== 1) return; - if (!e.altKey && e.button === 0 && this.props.isContentActive(true) && ![InkTool.Highlighter, InkTool.Pen, InkTool.Write].includes(Doc.ActiveTool)) { - this.props.select(false); + if ((this.Document._freeform_scale || 1) !== 1) return; + if (!e.altKey && e.button === 0 && this._props.isContentActive(true) && ![InkTool.Highlighter, InkTool.Pen, InkTool.Write].includes(Doc.ActiveTool)) { + this._props.select(false); MarqueeAnnotator.clearAnnotations(this._savedAnnotations); this._marqueeing = [e.clientX, e.clientY]; const target = e.target as any; @@ -306,7 +307,7 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { @action onSelectEnd = (e: PointerEvent): void => { - this.props.select(false); + this._props.select(false); document.removeEventListener('pointerup', this.onSelectEnd); const sel = window.getSelection(); @@ -341,7 +342,7 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { } current.push(row) } - DataVizBox.dataset.set(CsvCast(this.rootDoc[this.fieldKey]).url.href, current ) + DataVizBox.dataset.set(CsvCast(this.Document[this.fieldKey]).url.href, current ) } render() { @@ -350,7 +351,7 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { this.updateSchemaViz(); } - const scale = this.props.NativeDimScaling?.() || 1; + const scale = this._props.NativeDimScaling?.() || 1; return !this.records.length ? ( // displays how to get data into the DataVizBox if its empty <div className="start-message">To create a DataViz box, either import / drag a CSV file into your canvas or copy a data table and use the command 'ctrl + p' to bring the data table to your canvas.</div> @@ -359,7 +360,7 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { className="dataViz-box" onPointerDown={this.marqueeDown} style={{ - pointerEvents: this.props.isContentActive() === true ? 'all' : 'none', + pointerEvents: this._props.isContentActive() === true ? 'all' : 'none', width: `${100 / scale}%`, height: `${100 / scale}%`, transform: `scale(${scale})`, @@ -377,15 +378,15 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { {/* <CollectionFreeFormView ref={this._ffref} - {...this.props} + {...this._props} setContentView={emptyFunction} - renderDepth={this.props.renderDepth - 1} + renderDepth={this._props.renderDepth - 1} fieldKey={this.annotationKey} - styleProvider={this.props.styleProvider} + styleProvider={this._props.styleProvider} isAnnotationOverlay={true} annotationLayerHostsContent={false} - PanelWidth={this.props.PanelWidth} - PanelHeight={this.props.PanelHeight} + PanelWidth={this._props.PanelWidth} + PanelHeight={this._props.PanelHeight} select={emptyFunction} isAnyChildContentActive={returnFalse} whenChildContentsActiveChanged={this.whenChildContentsActiveChanged} @@ -402,9 +403,9 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { onPointerDown={this.onPointerDown}> <SidebarAnnos ref={this._sidebarRef} - {...this.props} + {...this._props} fieldKey={this.fieldKey} - rootDoc={this.rootDoc} + rootDoc={this.Document} layoutDoc={this.layoutDoc} dataDoc={this.dataDoc} usePanelWidth={true} @@ -421,13 +422,13 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { {this.annotationLayer} {!this._marqueeing || !this._mainCont.current || !this._annotationLayer.current ? null : ( <MarqueeAnnotator - rootDoc={this.rootDoc} + rootDoc={this.Document} getPageFromScroll={undefined} anchorMenuClick={this.anchorMenuClick} scrollTop={0} - annotationLayerScrollTop={NumCast(this.props.Document._layout_scrollTop)} + annotationLayerScrollTop={NumCast(this.Document._layout_scrollTop)} addDocument={this.sidebarAddDocument} - docView={this.props.DocumentView!} + docView={this.DocumentView!} finishMarquee={this.finishMarquee} savedAnnotations={this.savedAnnotations} selectionText={returnEmptyString} |