From c5c2c309cd88bbeb2f1b668cb040cffaac9c8470 Mon Sep 17 00:00:00 2001 From: bobzel Date: Tue, 4 Apr 2023 20:12:16 -0400 Subject: fixed using freeformview in sidebar of pdfs. fixed issues with dragging items out of schema and with selecting the schema view by clicking on headers. Fixed a lot of errors caused by using OmitKeys which masks type checking. fixed some pointerevent problems with treeview and freeformview --- src/fields/Doc.ts | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) (limited to 'src/fields') diff --git a/src/fields/Doc.ts b/src/fields/Doc.ts index 553c4525c..cc024d83a 100644 --- a/src/fields/Doc.ts +++ b/src/fields/Doc.ts @@ -1213,7 +1213,7 @@ export namespace Doc { return doc[StrCast(doc.layoutKey, 'layout')]; } export function LayoutFieldKey(doc: Doc): string { - return StrCast(Doc.Layout(doc).layout).split("'")[1]; + return StrCast(Doc.Layout(doc)[StrCast(doc.layoutKey, 'layout')]).split("'")[1]; // bcz: TODO check on this . used to always reference 'layout', now it uses the layout speicfied by the current layoutKey } export function NativeAspect(doc: Doc, dataDoc?: Doc, useDim?: boolean) { return Doc.NativeWidth(doc, dataDoc, useDim) / (Doc.NativeHeight(doc, dataDoc, useDim) || 1); @@ -1222,9 +1222,10 @@ export namespace Doc { return !doc ? 0 : NumCast(doc._nativeWidth, NumCast((dataDoc || doc)[Doc.LayoutFieldKey(doc) + '-nativeWidth'], useWidth ? doc[WidthSym]() : 0)); } export function NativeHeight(doc?: Doc, dataDoc?: Doc, useHeight?: boolean) { - const dheight = doc ? NumCast((dataDoc || doc)[Doc.LayoutFieldKey(doc) + '-nativeHeight'], useHeight ? doc[HeightSym]() : 0) : 0; - const nheight = doc ? (Doc.NativeWidth(doc, dataDoc, useHeight) * doc[HeightSym]()) / doc[WidthSym]() : 0; - return !doc ? 0 : NumCast(doc._nativeHeight, nheight || dheight); + if (!doc) return 0; + const nheight = (Doc.NativeWidth(doc, dataDoc, useHeight) * doc[HeightSym]()) / doc[WidthSym](); + const dheight = NumCast((dataDoc || doc)[Doc.LayoutFieldKey(doc) + '-nativeHeight'], useHeight ? doc[HeightSym]() : 0); + return NumCast(doc._nativeHeight, nheight || dheight); } export function SetNativeWidth(doc: Doc, width: number | undefined, fieldKey?: string) { doc[(fieldKey ?? Doc.LayoutFieldKey(doc)) + '-nativeWidth'] = width; -- cgit v1.2.3-70-g09d2 From 986c5bdc899954c4609f71405d3334147be721fe Mon Sep 17 00:00:00 2001 From: bobzel Date: Fri, 7 Apr 2023 10:42:16 -0400 Subject: experimetnal changes to datavizbox to allow brushing data items and better highlighting of selections. Also working on drawing link lines between chart aliases. --- src/client/views/nodes/DataVizBox/DataVizBox.tsx | 11 ++- .../views/nodes/DataVizBox/components/Chart.scss | 20 ++++ .../nodes/DataVizBox/components/LineChart.tsx | 105 +++++++++++++++------ .../views/nodes/DataVizBox/components/TableBox.tsx | 98 +++++++++++++------ src/fields/Doc.ts | 1 + 5 files changed, 170 insertions(+), 65 deletions(-) (limited to 'src/fields') diff --git a/src/client/views/nodes/DataVizBox/DataVizBox.tsx b/src/client/views/nodes/DataVizBox/DataVizBox.tsx index 0ce589a13..aaa8c3c53 100644 --- a/src/client/views/nodes/DataVizBox/DataVizBox.tsx +++ b/src/client/views/nodes/DataVizBox/DataVizBox.tsx @@ -13,7 +13,7 @@ import { LineChart } from './components/LineChart'; import { TableBox } from './components/TableBox'; import './DataVizBox.scss'; -enum DataVizView { +export enum DataVizView { TABLE = 'table', LINECHART = 'lineChart', } @@ -27,7 +27,7 @@ export class DataVizBox extends ViewBoxAnnotatableComponent() { // 2 ways of doing it // @observable private pairs: { [key: string]: number | string | undefined }[] = []; // @observable private pairs: { [key: string]: FieldResult }[] = []; - @observable private pairs: { [key: string]: string }[] = []; + @observable pairs: { [key: string]: string }[] = []; private _chartRenderer: LineChart | undefined; // // another way would be store a schema that defines the type of data we are expecting from an imported doc @@ -71,6 +71,7 @@ export class DataVizBox extends ViewBoxAnnotatableComponent() { const anchor = this._chartRenderer?.getAnchor(pinProps) ?? Docs.Create.TextanchorDocument({ + unrendered: true, // 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*/ @@ -89,12 +90,12 @@ export class DataVizBox extends ViewBoxAnnotatableComponent() { selectAxes = (axes: string[]) => (this.layoutDoc.dataVizAxes = new List(axes)); @computed get selectView() { - const width = NumCast(this.rootDoc._width) * 0.9; + const width = this.props.PanelWidth() * 0.9; const height = (this.props.PanelHeight() - 32) /* height of 'change view' button */ * 0.9; const margin = { top: 10, right: 50, bottom: 50, left: 50 }; // prettier-ignore switch (this.dataVizView) { - case DataVizView.TABLE: return ; + case DataVizView.TABLE: return ; case DataVizView.LINECHART: return (this._chartRenderer = r ?? undefined)} height={height} width={width} fieldKey={this.fieldKey} margin={margin} rootDoc={this.rootDoc} axes={this.axes} pairs={this.pairs} dataDoc={this.dataDoc} />; } } @@ -136,7 +137,7 @@ export class DataVizBox extends ViewBoxAnnotatableComponent() { { passive: false } ) }> - + {this.selectView} ); diff --git a/src/client/views/nodes/DataVizBox/components/Chart.scss b/src/client/views/nodes/DataVizBox/components/Chart.scss index 2d6c5f0f2..c8daf7c90 100644 --- a/src/client/views/nodes/DataVizBox/components/Chart.scss +++ b/src/client/views/nodes/DataVizBox/components/Chart.scss @@ -8,8 +8,28 @@ // change the color of the circle element to be red fill: red; } +.focus-selected, +.selected { + // change the color of the circle element to be red + fill: lightblue; + position: absolute; + transform-box: fill-box; + scale: 2; + transform-origin: center; +} +.focus { + fill: transparent; + outline: black solid 1px; + border-radius: 100%; +} +.focus-selected { + scale: 1; + outline: black solid 1px; + border-radius: 100%; +} .chart-container { display: flex; flex-direction: column; align-items: center; + cursor: default; } diff --git a/src/client/views/nodes/DataVizBox/components/LineChart.tsx b/src/client/views/nodes/DataVizBox/components/LineChart.tsx index e6a06a454..6a223e683 100644 --- a/src/client/views/nodes/DataVizBox/components/LineChart.tsx +++ b/src/client/views/nodes/DataVizBox/components/LineChart.tsx @@ -6,11 +6,15 @@ import * as d3 from 'd3'; import { Doc, DocListCast } from '../../../../../fields/Doc'; import { List } from '../../../../../fields/List'; import { listSpec } from '../../../../../fields/Schema'; -import { Cast } from '../../../../../fields/Types'; +import { Cast, DocCast, NumCast } from '../../../../../fields/Types'; import { Docs } from '../../../../documents/Documents'; import { PinProps, PresBox } from '../../trails'; import { createLineGenerator, drawLine, minMaxRange, scaleCreatorNumerical, xAxisCreator, xGrid, yAxisCreator, yGrid } from '../utils/D3Utils'; import './Chart.scss'; +import { LinkManager } from '../../../../util/LinkManager'; +import { DocumentManager } from '../../../../util/DocumentManager'; +import { Id } from '../../../../../fields/FieldSymbols'; +import { DataVizBox } from '../DataVizBox'; export interface DataPoint { x: number; @@ -40,7 +44,7 @@ export class LineChart extends React.Component { private _disposers: { [key: string]: IReactionDisposer } = {}; private _lineChartRef: React.RefObject = React.createRef(); private _lineChartSvg: d3.Selection | undefined; - private _rangeVals: { xMin?: number; xMax?: number;yMin?: number;yMax?: number;}= {}; + private _rangeVals: { xMin?: number; xMax?: number; yMin?: number; yMax?: number } = {}; @observable _currSelected: SelectedDataPoint | undefined = undefined; @observable _lineChartData: DataPoint[][] | undefined = undefined; // TODO: nda - some sort of mapping that keeps track of the annotated points so we can easily remove when annotations list updates @@ -51,9 +55,11 @@ export class LineChart extends React.Component { componentDidMount = () => { this._disposers.chartdata = reaction( () => this.props.axes.slice(), - axes => {if (axes.length > 1) { - this._lineChartData = [this.props.pairs?.map(pair => ({ x: Number(pair[this.props.axes[0]]), y: Number(pair[this.props.axes[1]]) })).sort((a,b) => a.x < b.x ? 1:-1)] - }}, + axes => { + if (axes.length > 1) { + this._lineChartData = [this.props.pairs?.map(pair => ({ x: Number(pair[this.props.axes[0]]), y: Number(pair[this.props.axes[1]]) })).sort((a, b) => (a.x < b.x ? -1 : 1))]; + } + }, { fireImmediately: true } ); this._disposers.chartData = reaction( @@ -78,12 +84,38 @@ export class LineChart extends React.Component { }, { fireImmediately: true } ); + this._disposers.highlights = reaction( + () => ({ + selected: this._currSelected, + pairs: LinkManager.Instance.getAllRelatedLinks(this.props.rootDoc) + .filter(link => link.anchor1 !== this.props.rootDoc) // all links that are pointing to this node + .map(link => DocCast(link.anchor1)) // get the documents that are pointing to this node + .map(anchor => DocumentManager.Instance.getFirstDocumentView(anchor)?.ComponentView as DataVizBox) // get their data viz boxes + .filter(dvb => dvb) + .map(dvb => dvb.pairs.filter(pair => pair['select' + dvb.rootDoc[Id]])) // get all the datapoints they have selected field set by incoming anchor + .lastElement(), + }), + ({ selected, pairs }) => { + this.clearAnnoations(); + selected && this.drawAnnotations(Number(selected.x), Number(selected.y), true); + pairs.forEach(pair => this.drawAnnotations(Number(pair[this.props.axes[0]]), Number(pair[this.props.axes[1]]))); + }, + { fireImmediately: true } + ); }; // anything that doesn't need to be recalculated should just be stored as drawCharts (i.e. computed values) and drawChart is gonna iterate over these observables and generate svgs based on that + clearAnnoations = () => { + const elements = document.querySelectorAll('.datapoint'); + for (let i = 0; i < elements.length; i++) { + const element = elements[i]; + element.classList.remove('highlight'); + element.classList.remove('selected'); + } + }; // gets called whenever the "data-annotations" fields gets updated - drawAnnotations(dataX: number, dataY: number) { + drawAnnotations = (dataX: number, dataY: number, selected?: boolean) => { // TODO: nda - can optimize this by having some sort of mapping of the x and y values to the individual circle elements // loop through all html elements with class .circle-d1 and find the one that has "data-x" and "data-y" attributes that match the dataX and dataY // if it exists, then highlight it @@ -94,14 +126,13 @@ export class LineChart extends React.Component { const x = element.getAttribute('data-x'); const y = element.getAttribute('data-y'); if (x === dataX.toString() && y === dataY.toString()) { - element.classList.add('highlight'); + element.classList.add(selected ? 'selected' : 'highlight'); } // TODO: nda - this remove highlight code should go where we remove the links // } else { - // element.classList.remove('highlight'); // } } - } + }; removeAnnotations(dataX: number, dataY: number) { // loop through and remove any annotations that no longer exist @@ -115,7 +146,7 @@ export class LineChart extends React.Component { return true; } if (this._currSelected) { - this._currSelected = undefined; + this.setCurrSelected(); return true; } return false; @@ -123,9 +154,7 @@ export class LineChart extends React.Component { // create a document anchor that stores whatever is needed to reconstruct the viewing state (selection,zoom,etc) getAnchor = (pinProps?: PinProps) => { - const anchor = Docs.Create.TextanchorDocument({ - title: 'line doc selection' + this._currSelected?.x, - }); + const anchor = Docs.Create.TextanchorDocument({ title: 'line doc selection' + this._currSelected?.x, unrendered: true }); PresBox.pinDocView(anchor, { pinDocLayout: pinProps?.pinDocLayout, pinData: pinProps?.pinData }, this.props.dataDoc); anchor.presDataVizSelection = this._currSelected ? new List([this._currSelected.x, this._currSelected.y]) : undefined; return anchor; @@ -140,7 +169,7 @@ export class LineChart extends React.Component { } setupTooltip() { - const tooltip = d3 + return d3 .select(this._lineChartRef.current) .append('div') .attr('class', 'tooltip') @@ -150,14 +179,15 @@ export class LineChart extends React.Component { .style('padding', '5px') .style('position', 'absolute') .style('font-size', '12px'); - return tooltip; } // TODO: nda - use this everyewhere we update currSelected? @action - setCurrSelected(x: number, y: number) { + setCurrSelected(x?: number, y?: number) { // TODO: nda - get rid of svg element in the list? - this._currSelected = { x, y }; + this._currSelected = x !== undefined && y !== undefined ? { x, y } : undefined; + this.props.pairs.forEach(pair => pair[this.props.axes[0]] === x && pair[this.props.axes[1]] === y && (pair.selected = true)); + this.props.pairs.forEach(pair => (pair.selected = pair[this.props.axes[0]] === x && pair[this.props.axes[1]] === y ? true : undefined)); } drawDataPoints(data: DataPoint[], idx: number, xScale: d3.ScaleLinear, yScale: d3.ScaleLinear) { @@ -215,32 +245,29 @@ export class LineChart extends React.Component { // draw the datapoint circle this.drawDataPoints(data, 0, xScale, yScale); - const focus = svg.append('g').attr('class', 'focus').style('display', 'none'); - focus.append('circle').attr('r', 5).attr('class', 'circle'); + const higlightFocusPt = svg.append('g').style('display', 'none'); + higlightFocusPt.append('circle').attr('r', 5).attr('class', 'circle'); const tooltip = this.setupTooltip(); // add all the tooltipContent to the tooltip const mousemove = action((e: any) => { const bisect = d3.bisector((d: DataPoint) => d.x).left; const xPos = d3.pointer(e)[0]; - const x0 = bisect(data, xScale.invert(xPos - 25)); // shift x by -25 so that you can reach points on the left-side axis + const x0 = Math.min(data.length - 1, bisect(data, xScale.invert(xPos - 5))); // shift x by -5 so that you can reach points on the left-side axis const d0 = data[x0]; - focus.attr('transform', `translate(${xScale(d0.x)},${yScale(d0.y)})`); - tooltip.transition().duration(300).style('opacity', 0.9); - // TODO: nda - updating the inner html could be deadly cause injection attacks! - tooltip - .html(() => `(${d0.x},${d0.y})`) // text content for tooltip - .style('pointer-events', 'none') - .style('transform', `translate(${xScale(d0.x) - this.width / 2 + 12}px,${yScale(d0.y) + 30}px)`); + if (!d0) return; + + this.updateTooltip(higlightFocusPt, xScale, d0, yScale, tooltip); }); const onPointClick = action((e: any) => { const bisect = d3.bisector((d: DataPoint) => d.x).left; const xPos = d3.pointer(e)[0]; - const x0 = bisect(data, xScale.invert(xPos - 25)); // shift x by -25 so that you can reach points on the left-side axis + const x0 = bisect(data, xScale.invert(xPos - 5)); // shift x by -5 so that you can reach points on the left-side axis const d0 = data[x0]; // find .circle-d1 with data-x = d0.x and data-y = d0.y const selected = svg.selectAll('.datapoint').filter((d: any) => d['data-x'] === d0.x && d['data-y'] === d0.y); - this._currSelected = { x: d0.x, y: d0.y, elem: selected }; + this.setCurrSelected(d0.x, d0.y); + this.updateTooltip(higlightFocusPt, xScale, d0, yScale, tooltip); }); svg.append('rect') @@ -250,17 +277,33 @@ export class LineChart extends React.Component { .attr('fill', 'none') .attr('translate', `translate(${margin.left}, ${-(margin.top + margin.bottom)})`) .style('opacity', 0) - .on('mouseover', () => focus.style('display', null)) + .on('mouseover', () => higlightFocusPt.style('display', null)) .on('mouseout', () => tooltip.transition().duration(300).style('opacity', 0)) .on('mousemove', mousemove) .on('click', onPointClick); }; + private updateTooltip( + higlightFocusPt: d3.Selection, + xScale: d3.ScaleLinear, + d0: DataPoint, + yScale: d3.ScaleLinear, + tooltip: d3.Selection + ) { + higlightFocusPt.attr('transform', `translate(${xScale(d0.x)},${yScale(d0.y)})`).attr('class', this._currSelected?.x === d0.x && this._currSelected?.y === d0.y ? 'focus-selected' : 'focus'); + tooltip.transition().duration(300).style('opacity', 0.9); + // TODO: nda - updating the inner html could be deadly cause injection attacks! + tooltip + .html(() => `(${d0.x},${d0.y})`) // text content for tooltip + .style('pointer-events', 'none') + .style('transform', `translate(${xScale(d0.x) - this.width / 2}px,${yScale(d0.y) - 30}px)`); + } + render() { const selectedPt = this._currSelected ? `x: ${this._currSelected.x} y: ${this._currSelected.y}` : 'none'; return (
- {this.props.axes.length < 2 ? 'first use table view to select two axes to plot' : `Curr Selected: ${selectedPt}`} + {this.props.axes.length < 2 ? 'first use table view to select two axes to plot' : `Selected: ${selectedPt}`}
); } diff --git a/src/client/views/nodes/DataVizBox/components/TableBox.tsx b/src/client/views/nodes/DataVizBox/components/TableBox.tsx index adefe90cd..0d69ac890 100644 --- a/src/client/views/nodes/DataVizBox/components/TableBox.tsx +++ b/src/client/views/nodes/DataVizBox/components/TableBox.tsx @@ -1,12 +1,19 @@ import { action, computed } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; -import { emptyFunction, returnFalse, setupMoveUpEvents } from '../../../../../Utils'; +import { AnimationSym, Doc } from '../../../../../fields/Doc'; +import { Id } from '../../../../../fields/FieldSymbols'; +import { List } from '../../../../../fields/List'; +import { emptyFunction, returnFalse, setupMoveUpEvents, Utils } from '../../../../../Utils'; +import { DragManager } from '../../../../util/DragManager'; +import { DocumentView } from '../../DocumentView'; +import { DataVizView } from '../DataVizBox'; interface TableBoxProps { pairs: { [key: string]: any }[]; selectAxes: (axes: string[]) => void; axes: string[]; + docView?: () => DocumentView | undefined; } @observer @@ -20,39 +27,72 @@ export class TableBox extends React.Component { - {this.columns.map(col => ( - - ))} + {this.columns + .filter(col => !col.startsWith('select')) + .map(col => { + const header = React.createRef(); + return ( + + ); + })} - {this.props.pairs?.map(p => { + {this.props.pairs?.map((p, i) => { return ( - + (p['select' + this.props.docView?.()?.rootDoc![Id]] = !p['select' + this.props.docView?.()?.rootDoc![Id]]))}> {this.columns.map(col => ( - + ))} ); diff --git a/src/fields/Doc.ts b/src/fields/Doc.ts index cc024d83a..e89f5db52 100644 --- a/src/fields/Doc.ts +++ b/src/fields/Doc.ts @@ -1335,6 +1335,7 @@ export namespace Doc { } export function LinkEndpoint(linkDoc: Doc, anchorDoc: Doc) { + if (linkDoc.anchor2 === anchorDoc || (linkDoc.anchor2 as Doc).annotationOn) return '2'; return Doc.AreProtosEqual(anchorDoc, (linkDoc.anchor1 as Doc).annotationOn as Doc) || Doc.AreProtosEqual(anchorDoc, linkDoc.anchor1 as Doc) ? '1' : '2'; } -- cgit v1.2.3-70-g09d2 From 68c6c36af823255824a6b0692e8c33618c2d7ca2 Mon Sep 17 00:00:00 2001 From: bobzel Date: Mon, 10 Apr 2023 11:32:44 -0400 Subject: fixed brushing of fonticon boxes with dropdowns. made line charts use computed values instead of observables --- .../collectionFreeForm/CollectionFreeFormView.tsx | 4 +- src/client/views/nodes/DataVizBox/DataVizBox.tsx | 14 +++- .../views/nodes/DataVizBox/components/Chart.scss | 2 +- .../nodes/DataVizBox/components/LineChart.tsx | 89 ++++++++++++---------- src/client/views/nodes/button/FontIconBox.tsx | 33 ++++++-- .../nodes/button/colorDropdown/ColorDropdown.tsx | 57 +++++++------- src/fields/Doc.ts | 2 +- 7 files changed, 120 insertions(+), 81 deletions(-) (limited to 'src/fields') diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index 9fe8f5f49..9d4a788db 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -664,8 +664,8 @@ export class CollectionFreeFormView extends CollectionSubView() { // 2 ways of doing it // @observable private pairs: { [key: string]: number | string | undefined }[] = []; // @observable private pairs: { [key: string]: FieldResult }[] = []; - @observable pairs: { [key: string]: string }[] = []; + static pairSet = new ObservableMap(); + @computed.struct get pairs() { + return DataVizBox.pairSet.get(StrCast(this.rootDoc.fileUpload)); + } private _chartRenderer: LineChart | undefined; // // another way would be store a schema that defines the type of data we are expecting from an imported doc @@ -93,6 +96,7 @@ export class DataVizBox extends ViewBoxAnnotatableComponent() { const width = this.props.PanelWidth() * 0.9; const height = (this.props.PanelHeight() - 32) /* height of 'change view' button */ * 0.9; const margin = { top: 10, right: 50, bottom: 50, left: 50 }; + if (!this.pairs) return 'no data'; // prettier-ignore switch (this.dataVizView) { case DataVizView.TABLE: return ; @@ -109,8 +113,10 @@ export class DataVizBox extends ViewBoxAnnotatableComponent() { } fetchData() { + if (DataVizBox.pairSet.has(StrCast(this.rootDoc.fileUpload))) return; + DataVizBox.pairSet.set(StrCast(this.rootDoc.fileUpload), []); fetch('/csvData?uri=' + this.dataUrl?.url.href) // - .then(res => res.json().then(action(res => !res.errno && (this.pairs = res)))); + .then(res => res.json().then(action(res => !res.errno && DataVizBox.pairSet.set(StrCast(this.rootDoc.fileUpload), res)))); } // handle changing the view using a button @@ -121,7 +127,7 @@ export class DataVizBox extends ViewBoxAnnotatableComponent() { } render() { - return this.pairs.length == 0 ? ( + return !this.pairs?.length ? (
Loading...
) : (
{ private _disposers: { [key: string]: IReactionDisposer } = {}; private _lineChartRef: React.RefObject = React.createRef(); private _lineChartSvg: d3.Selection | undefined; - private _rangeVals: { xMin?: number; xMax?: number; yMin?: number; yMax?: number } = {}; @observable _currSelected: SelectedDataPoint | undefined = undefined; - @observable _lineChartData: DataPoint[][] | undefined = undefined; // TODO: nda - some sort of mapping that keeps track of the annotated points so we can easily remove when annotations list updates + @computed get _lineChartData() { + if (this.props.axes.length <= 1) return []; + return this.props.pairs + ?.filter(pair => (!this.incomingLinks.length ? true : Array.from(Object.keys(pair)).some(key => pair[key] && key.startsWith('select')))) + .map(pair => ({ x: Number(pair[this.props.axes[0]]), y: Number(pair[this.props.axes[1]]) })) + .sort((a, b) => (a.x < b.x ? -1 : 1)); + } + @computed get incomingLinks() { + return LinkManager.Instance.getAllRelatedLinks(this.props.rootDoc) // out of all links + .filter(link => link.anchor1 !== this.props.rootDoc) // get links where this chart doc is the target of the link + .map(link => DocCast(link.anchor1)); // then return the source of the link + } + @computed get incomingSelected() { + return this.incomingLinks // all links that are pointing to this node + .map(anchor => DocumentManager.Instance.getFirstDocumentView(anchor)?.ComponentView as DataVizBox) // get their data viz boxes + .filter(dvb => dvb) + .map(dvb => dvb.pairs?.filter(pair => pair['select' + dvb.rootDoc[Id]])) // get all the datapoints they have selected field set by incoming anchor + .lastElement(); + } + @computed get rangeVals(): { xMin?: number; xMax?: number; yMin?: number; yMax?: number } { + return minMaxRange([this._lineChartData]); + } componentWillUnmount() { Array.from(Object.keys(this._disposers)).forEach(key => this._disposers[key]()); } componentDidMount = () => { - this._disposers.chartdata = reaction( - () => this.props.axes.slice(), - axes => { - if (axes.length > 1) { - this._lineChartData = [this.props.pairs?.map(pair => ({ x: Number(pair[this.props.axes[0]]), y: Number(pair[this.props.axes[1]]) })).sort((a, b) => (a.x < b.x ? -1 : 1))]; - } - }, - { fireImmediately: true } - ); this._disposers.chartData = reaction( - () => ({ dataSet: this._lineChartData, axes: this.props.axes.slice(), w: this.props.width, h: this.props.height }), - vals => { - if (vals.dataSet) { - this._rangeVals = minMaxRange(vals.dataSet); - this.drawChart(vals.dataSet); + () => ({ dataSet: this._lineChartData, w: this.props.width, h: this.props.height }), + ({ dataSet, w, h }) => { + if (dataSet) { + this.drawChart([dataSet], this.rangeVals, w, h); + // redraw annotations when the chart data has changed, or the local or inherited selection has changed + this.clearAnnotations(); + this._currSelected && this.drawAnnotations(Number(this._currSelected.x), Number(this._currSelected.y), true); + this.incomingSelected?.forEach((pair: any) => this.drawAnnotations(Number(pair[this.props.axes[0]]), Number(pair[this.props.axes[1]]))); } }, { fireImmediately: true } @@ -87,18 +101,13 @@ export class LineChart extends React.Component { this._disposers.highlights = reaction( () => ({ selected: this._currSelected, - pairs: LinkManager.Instance.getAllRelatedLinks(this.props.rootDoc) - .filter(link => link.anchor1 !== this.props.rootDoc) // all links that are pointing to this node - .map(link => DocCast(link.anchor1)) // get the documents that are pointing to this node - .map(anchor => DocumentManager.Instance.getFirstDocumentView(anchor)?.ComponentView as DataVizBox) // get their data viz boxes - .filter(dvb => dvb) - .map(dvb => dvb.pairs.filter(pair => pair['select' + dvb.rootDoc[Id]])) // get all the datapoints they have selected field set by incoming anchor - .lastElement(), + incomingSelected: this.incomingSelected, }), - ({ selected, pairs }) => { - this.clearAnnoations(); + ({ selected, incomingSelected }) => { + // redraw annotations when the chart data has changed, or the local or inherited selection has changed + this.clearAnnotations(); selected && this.drawAnnotations(Number(selected.x), Number(selected.y), true); - pairs.forEach(pair => this.drawAnnotations(Number(pair[this.props.axes[0]]), Number(pair[this.props.axes[1]]))); + incomingSelected?.forEach((pair: any) => this.drawAnnotations(Number(pair[this.props.axes[0]]), Number(pair[this.props.axes[1]]))); }, { fireImmediately: true } ); @@ -106,7 +115,7 @@ export class LineChart extends React.Component { // anything that doesn't need to be recalculated should just be stored as drawCharts (i.e. computed values) and drawChart is gonna iterate over these observables and generate svgs based on that - clearAnnoations = () => { + clearAnnotations = () => { const elements = document.querySelectorAll('.datapoint'); for (let i = 0; i < elements.length; i++) { const element = elements[i]; @@ -207,12 +216,12 @@ export class LineChart extends React.Component { } // TODO: nda - can use d3.create() to create html element instead of appending - drawChart = (dataSet: DataPoint[][]) => { + drawChart = (dataSet: DataPoint[][], rangeVals: { xMin?: number; xMax?: number; yMin?: number; yMax?: number }, width: number, height: number) => { // clearing tooltip and the current chart d3.select(this._lineChartRef.current).select('svg').remove(); d3.select(this._lineChartRef.current).select('.tooltip').remove(); - const { xMin, xMax, yMin, yMax } = this._rangeVals; + const { xMin, xMax, yMin, yMax } = rangeVals; if (xMin === undefined || xMax === undefined || yMin === undefined || yMax === undefined) { return; } @@ -226,16 +235,16 @@ export class LineChart extends React.Component { const svg = (this._lineChartSvg = d3 .select(this._lineChartRef.current) .append('svg') - .attr('width', `${this.width + margin.right + margin.left}`) - .attr('height', `${this.height + margin.top + margin.bottom}`) + .attr('width', `${width + margin.right + margin.left}`) + .attr('height', `${height + margin.top + margin.bottom}`) .append('g') .attr('transform', `translate(${margin.left}, ${margin.top})`)); // create x and y grids - xGrid(svg.append('g'), this.height, xScale); - yGrid(svg.append('g'), this.width, yScale); - xAxisCreator(svg.append('g'), this.height, xScale); - yAxisCreator(svg.append('g'), this.width, yScale); + xGrid(svg.append('g'), height, xScale); + yGrid(svg.append('g'), width, yScale); + xAxisCreator(svg.append('g'), height, xScale); + yAxisCreator(svg.append('g'), width, yScale); // draw the plot line const data = dataSet[0]; diff --git a/src/client/views/nodes/button/FontIconBox.tsx b/src/client/views/nodes/button/FontIconBox.tsx index 8410fda18..8eacfbc51 100644 --- a/src/client/views/nodes/button/FontIconBox.tsx +++ b/src/client/views/nodes/button/FontIconBox.tsx @@ -161,7 +161,13 @@ export class FontIconBox extends DocComponent() {
); return ( -
e.stopPropagation()} onClick={action(() => (this.rootDoc.dropDownOpen = !this.rootDoc.dropDownOpen))}> +
e.stopPropagation()} + onClick={action(() => { + this.rootDoc.dropDownOpen = !this.rootDoc.dropDownOpen; + Doc.UnBrushAllDocs(); + })}> {checkResult} {label} {this.rootDoc.dropDownOpen ? dropdown : null} @@ -198,7 +204,10 @@ export class FontIconBox extends DocComponent() { e.stopPropagation(); e.preventDefault(); }} - onClick={action(() => (this.rootDoc.dropDownOpen = !this.rootDoc.dropDownOpen))}> + onClick={action(() => { + this.rootDoc.dropDownOpen = !this.rootDoc.dropDownOpen; + Doc.UnBrushAllDocs(); + })}> setValue(Number(e.target.value))))} />
setValue(Number(checkResult) + 1))}> @@ -215,6 +224,7 @@ export class FontIconBox extends DocComponent() { onClick={e => { e.stopPropagation(); this.rootDoc.dropDownOpen = false; + Doc.UnBrushAllDocs(); }} />
@@ -237,7 +247,10 @@ export class FontIconBox extends DocComponent() {
(this.rootDoc.dropDownOpen = !this.rootDoc.dropDownOpen))}> + onClick={action(() => { + this.rootDoc.dropDownOpen = !this.rootDoc.dropDownOpen; + Doc.UnBrushAllDocs(); + })}> {this.Icon(color)} {!this.label || !FontIconBox.GetShowLabels() ? null : (
@@ -316,7 +329,14 @@ export class FontIconBox extends DocComponent() {
(this.rootDoc.dropDownOpen = !this.rootDoc.dropDownOpen) : undefined}> + onClick={ + dropdown + ? () => { + this.rootDoc.dropDownOpen = !this.rootDoc.dropDownOpen; + Doc.UnBrushAllDocs(); + } + : undefined + }> {dropdown ? null : }
{text && text[0].toUpperCase() + text.slice(1)}
{label} @@ -335,6 +355,7 @@ export class FontIconBox extends DocComponent() { onClick={e => { e.stopPropagation(); this.rootDoc.dropDownOpen = false; + Doc.UnBrushAllDocs(); }} />
@@ -379,6 +400,7 @@ export class FontIconBox extends DocComponent() { style={{ color: color, borderBottomLeftRadius: this.dropdown ? 0 : undefined }} onClick={action(e => { this.colorPickerClosed = !this.colorPickerClosed; + setTimeout(() => Doc.UnBrushAllDocs()); e.stopPropagation(); })} onPointerDown={e => e.stopPropagation()}> @@ -397,6 +419,7 @@ export class FontIconBox extends DocComponent() { e.preventDefault(); e.stopPropagation(); this.colorPickerClosed = true; + Doc.UnBrushAllDocs(); })} />
@@ -816,7 +839,7 @@ ScriptingGlobals.add(function setInkProperty(option: 'inkMask' | 'fillColor' | ' setMode: () => selected?.type !== DocumentType.INK && SetActiveIsInkMask(!ActiveIsInkMask()), }], ['fillColor', { - checkResult: () => (selected?.type === DocumentType.INK ? StrCast(selected.fillColor) : ActiveFillColor() ? Colors.MEDIUM_BLUE : 'transparent'), + checkResult: () => (selected?.type === DocumentType.INK ? StrCast(selected.fillColor) : ActiveFillColor() ?? "transparent"), setInk: (doc: Doc) => (doc.fillColor = StrCast(value)), setMode: () => SetActiveFillColor(StrCast(value)), }], diff --git a/src/client/views/nodes/button/colorDropdown/ColorDropdown.tsx b/src/client/views/nodes/button/colorDropdown/ColorDropdown.tsx index 7f414ddbb..74c3c563c 100644 --- a/src/client/views/nodes/button/colorDropdown/ColorDropdown.tsx +++ b/src/client/views/nodes/button/colorDropdown/ColorDropdown.tsx @@ -12,7 +12,7 @@ export class ColorDropdown extends Component { const active: string = StrCast(this.props.rootDoc.dropDownOpen); const script: string = StrCast(this.props.rootDoc.script); - const scriptCheck: string = script + "(undefined, true)"; + const scriptCheck: string = script + '(undefined, true)'; const boolResult = ScriptField.MakeScript(scriptCheck)?.script.run().result; const stroke: boolean = false; @@ -24,24 +24,21 @@ export class ColorDropdown extends Component { // strokeIcon = (
); // } - const colorOptions: string[] = ['#D0021B', '#F5A623', '#F8E71C', '#8B572A', '#7ED321', '#417505', - '#9013FE', '#4A90E2', '#50E3C2', '#B8E986', '#000000', '#4A4A4A', '#9B9B9B', - '#FFFFFF', '#f1efeb']; + const colorOptions: string[] = ['#D0021B', '#F5A623', '#F8E71C', '#8B572A', '#7ED321', '#417505', '#9013FE', '#4A90E2', '#50E3C2', '#B8E986', '#000000', '#4A4A4A', '#9B9B9B', '#FFFFFF', '#f1efeb']; - const colorBox = (func: (color: ColorState) => void) => ; - const label = !this.props.label || !FontIconBox.GetShowLabels() ? (null) : -
- {this.props.label} -
; + const colorBox = (func: (color: ColorState) => void) => ; + const label = + !this.props.label || !FontIconBox.GetShowLabels() ? null : ( +
+ {this.props.label} +
+ ); - const dropdownCaret =
- -
; + const dropdownCaret = ( +
+ +
+ ); const click = (value: ColorState) => { const hex: string = value.hex; @@ -51,26 +48,30 @@ export class ColorDropdown extends Component { } }; return ( -
this.props.rootDoc.dropDownOpen = !this.props.rootDoc.dropDownOpen} + onClick={() => (this.props.rootDoc.dropDownOpen = !this.props.rootDoc.dropDownOpen)} onPointerDown={e => e.stopPropagation()}> -
+
{label} {/* {dropdownCaret} */} - {this.props.rootDoc.dropDownOpen ? + {this.props.rootDoc.dropDownOpen ? (
-
e.stopPropagation()} - onClick={e => e.stopPropagation()}> +
e.stopPropagation()} onClick={e => e.stopPropagation()}> {colorBox(click)}
-
{ e.stopPropagation(); this.props.rootDoc.dropDownOpen = false; }} /> +
{ + e.stopPropagation(); + this.props.rootDoc.dropDownOpen = false; + }} + />
- : null} + ) : null}
); } -} \ No newline at end of file +} diff --git a/src/fields/Doc.ts b/src/fields/Doc.ts index e89f5db52..1db56cbdd 100644 --- a/src/fields/Doc.ts +++ b/src/fields/Doc.ts @@ -1394,7 +1394,7 @@ export namespace Doc { }); } export function UnBrushAllDocs() { - brushManager.BrushedDoc.clear(); + runInAction(() => brushManager.BrushedDoc.clear()); } export function getDocTemplate(doc?: Doc) { -- cgit v1.2.3-70-g09d2
- setupMoveUpEvents( - {}, - e, - returnFalse, - emptyFunction, - action(e => { - const newAxes = this.props.axes; - if (newAxes.includes(col)) { - newAxes.splice(newAxes.indexOf(col), 1); - } else if (newAxes.length >= 1) { - newAxes[1] = col; - } else { - newAxes[0] = col; - } - this.props.selectAxes(newAxes); - }) - ) - }> - {col} - { + const downX = e.clientX; + const downY = e.clientY; + setupMoveUpEvents( + {}, + e, + e => { + const sourceAnchorCreator = () => this.props.docView?.()!.rootDoc!; + const targetCreator = (annotationOn: Doc | undefined) => { + const alias = Doc.MakeAlias(this.props.docView?.()!.rootDoc!); + alias._dataVizView = DataVizView.LINECHART; + alias._dataVizAxes = new List([col, col]); + alias.annotationOn = annotationOn; //this.props.docView?.()!.rootDoc!; + return alias; + }; + if (this.props.docView?.() && !Utils.isClick(e.clientX, e.clientY, downX, downY, Date.now())) { + DragManager.StartAnchorAnnoDrag([header.current!], new DragManager.AnchorAnnoDragData(this.props.docView()!, sourceAnchorCreator, targetCreator), downX, downY, { + dragComplete: e => { + if (!e.aborted && e.annoDragData && e.annoDragData.linkSourceDoc && e.annoDragData.dropDocument && e.linkDocument) { + e.linkDocument.linkDisplay = true; + // e.annoDragData.linkSourceDoc.followLinkToggle = e.annoDragData.dropDocument.annotationOn === this.props.rootDoc; + // e.annoDragData.linkSourceDoc.followLinkZoom = false; + } + }, + }); + return true; + } + return false; + }, + emptyFunction, + action(e => { + const newAxes = this.props.axes; + if (newAxes.includes(col)) { + newAxes.splice(newAxes.indexOf(col), 1); + } else if (newAxes.length >= 1) { + newAxes[1] = col; + } else { + newAxes[0] = col; + } + this.props.selectAxes(newAxes); + }) + ); + }}> + {col} +
{p[col]}{p[col]}