From 23e0ee2dcad8df2bc3467647e05c433f27787d54 Mon Sep 17 00:00:00 2001 From: srichman333 Date: Thu, 3 Aug 2023 14:38:47 -0400 Subject: table fixes (selected by guid not extra row + ui changes) --- src/client/views/nodes/DataVizBox/DataVizBox.tsx | 17 +- .../views/nodes/DataVizBox/components/Chart.scss | 1 + .../nodes/DataVizBox/components/Histogram.tsx | 56 +--- .../nodes/DataVizBox/components/LineChart.tsx | 4 +- .../views/nodes/DataVizBox/components/PieChart.tsx | 47 +--- .../views/nodes/DataVizBox/components/TableBox.tsx | 310 +++++++-------------- 6 files changed, 135 insertions(+), 300 deletions(-) (limited to 'src') diff --git a/src/client/views/nodes/DataVizBox/DataVizBox.tsx b/src/client/views/nodes/DataVizBox/DataVizBox.tsx index 9a4de3c36..80586d7c7 100644 --- a/src/client/views/nodes/DataVizBox/DataVizBox.tsx +++ b/src/client/views/nodes/DataVizBox/DataVizBox.tsx @@ -1,9 +1,9 @@ -import { action, computed, observable, ObservableMap, ObservableSet } from 'mobx'; +import { action, computed, ObservableMap, ObservableSet } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; import { Doc, StrListCast } from '../../../../fields/Doc'; import { List } from '../../../../fields/List'; -import { Cast, CsvCast, NumCast, StrCast } from '../../../../fields/Types'; +import { Cast, CsvCast, StrCast } from '../../../../fields/Types'; import { CsvField } from '../../../../fields/URLField'; import { Docs } from '../../../documents/Documents'; import { ViewBoxAnnotatableComponent } from '../../DocComponent'; @@ -15,6 +15,7 @@ import './DataVizBox.scss'; import { Histogram } from './components/Histogram'; import { PieChart } from './components/PieChart'; import { Toggle, ToggleType, Type } from 'browndash-components'; +import { Utils } from '../../../../Utils'; export enum DataVizView { TABLE = 'table', @@ -35,9 +36,11 @@ export class DataVizBox extends ViewBoxAnnotatableComponent() { // @observable private pairs: { [key: string]: FieldResult }[] = []; static pairSet = new ObservableMap(); @computed.struct get pairs() { - return DataVizBox.pairSet.get(CsvCast(this.rootDoc[this.fieldKey]).url.href); + var pairs = DataVizBox.pairSet.get(CsvCast(this.rootDoc[this.fieldKey]).url.href); + pairs?.map(pair => {if (!pair.guid) pair.guid = Utils.GenerateGuid()}) + return pairs; } - private _chartRenderer: LineChart | undefined; + private _chartRenderer: LineChart | Histogram | PieChart | undefined; // // another way would be store a schema that defines the type of data we are expecting from an imported doc // method1() { @@ -116,10 +119,10 @@ export class DataVizBox extends ViewBoxAnnotatableComponent() { const margin = { top: 10, right: 25, bottom: 50, left: 25 }; if (!this.pairs) return 'no data'; 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} />; - case DataVizView.HISTOGRAM: return ; - case DataVizView.PIECHART: return ; + case DataVizView.HISTOGRAM: 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} />; + case DataVizView.PIECHART: 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} />; } } @computed get dataUrl() { diff --git a/src/client/views/nodes/DataVizBox/components/Chart.scss b/src/client/views/nodes/DataVizBox/components/Chart.scss index 6c87241b8..996183cb8 100644 --- a/src/client/views/nodes/DataVizBox/components/Chart.scss +++ b/src/client/views/nodes/DataVizBox/components/Chart.scss @@ -77,4 +77,5 @@ } .table-container{ overflow: scroll; + margin: 10px; } \ No newline at end of file diff --git a/src/client/views/nodes/DataVizBox/components/Histogram.tsx b/src/client/views/nodes/DataVizBox/components/Histogram.tsx index 89dcf87db..efe17297b 100644 --- a/src/client/views/nodes/DataVizBox/components/Histogram.tsx +++ b/src/client/views/nodes/DataVizBox/components/Histogram.tsx @@ -1,15 +1,13 @@ import { observer } from "mobx-react"; -import { Doc, DocListCast, FieldResult } from "../../../../../fields/Doc"; +import { Doc, DocListCast, StrListCast } from "../../../../../fields/Doc"; import * as React from 'react'; import * as d3 from 'd3'; import { IReactionDisposer, action, computed, observable, reaction } from "mobx"; import { LinkManager } from "../../../../util/LinkManager"; -import { Cast, DocCast, StrCast} from "../../../../../fields/Types"; -import { DataPoint, SelectedDataPoint } from "./LineChart"; +import { DocCast, StrCast} from "../../../../../fields/Types"; import { DocumentManager } from "../../../../util/DocumentManager"; import { Id } from "../../../../../fields/FieldSymbols"; import { DataVizBox } from "../DataVizBox"; -import { listSpec } from "../../../../../fields/Schema"; import { PinProps, PresBox } from "../../trails"; import { Docs } from "../../../../documents/Documents"; import { List } from "../../../../../fields/List"; @@ -54,7 +52,7 @@ export class Histogram extends React.Component { var ax0 = this.props.axes[0]; if (/\d/.test(this.props.pairs[0][ax0])){ this.numericalXData = true } return this.props.pairs - ?.filter(pair => (!this.incomingLinks.length ? true : Array.from(Object.keys(pair)).some(key => pair[key] && key.startsWith('select')))) + ?.filter(pair => (!this.incomingLinks.length ? true : this.incomingLinks[0]!.selected && StrListCast(this.incomingLinks[0].selected).includes(pair.guid))) .map(pair => ({ [ax0]: (pair[this.props.axes[0]])})) }; @@ -63,13 +61,8 @@ export class Histogram extends React.Component { if (/\d/.test(this.props.pairs[0][ax0])) { this.numericalXData = true;} if (/\d/.test(this.props.pairs[0][ax1]) && this.props.pairs.length < this.maxBins) { this.numericalYData = true;} return this.props.pairs - ?.filter(pair => (!this.incomingLinks.length ? true : Array.from(Object.keys(pair)).some(key => pair[key] && key.startsWith('select')))) + ?.filter(pair => (!this.incomingLinks.length ? true : this.incomingLinks[0]!.selected && StrListCast(this.incomingLinks[0].selected).includes(pair.guid))) .map(pair => ({ [ax0]: (pair[this.props.axes[0]]), [ax1]: (pair[this.props.axes[1]]) })) - // .sort((a, b) => (a[ax0] < b[ax0] ? -1 : 1)); - 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 defaultGraphTitle(){ var ax0 = this.props.axes[0]; @@ -181,27 +174,16 @@ export class Histogram extends React.Component { } @action - restoreView = (data: Doc) => { - const coords = Cast(data.presDataVizSelection, listSpec('number'), null); - if (coords?.length > 1 && (this._currSelected?.x !== coords[0] || this._currSelected?.y !== coords[1])) { - this.setCurrSelected(coords[0], coords[1]); - return true; - } - if (this._currSelected) { - this.setCurrSelected(); - return true; - } - return false; - }; + restoreView = (data: Doc) => {}; // create a document anchor that stores whatever is needed to reconstruct the viewing state (selection,zoom,etc) getAnchor = (pinProps?: PinProps) => { const anchor = Docs.Create.ConfigDocument({ // - title: 'histogram doc selection' + this._currSelected?.x, + title: 'histogram doc selection' + this._currSelected, }); 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; + anchor.presDataVizSelection = this._currSelected ? new List([this._currSelected]) : undefined; return anchor; }; @@ -213,28 +195,6 @@ export class Histogram extends React.Component { return this.props.width - this.props.margin.left - this.props.margin.right; } - setupTooltip() { - return d3 - .select(this._histogramRef.current) - .append('div') - .attr('class', 'tooltip') - .style('opacity', 0) - .style('background', '#fff') - .style('border', '1px solid #ccc') - .style('padding', '5px') - .style('position', 'absolute') - .style('font-size', '12px'); - } - - // TODO: nda - use this everyewhere we update currSelected? - @action - setCurrSelected(x?: number, y?: number) { - // TODO: nda - get rid of svg element in the list? - 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)); - } - data = (dataSet: any) => { var validData = dataSet.filter((d: { [x: string]: unknown; }) => { var valid = true; @@ -364,7 +324,7 @@ export class Histogram extends React.Component { const selected = svg.selectAll('.histogram-bar').filter((d: any) => { barCounter++; if ((barCounter*eachRectWidth ) <= pointerX && pointerX <= ((barCounter+1)*eachRectWidth)){ - var showSelected = this.numericalYData? this.props.pairs.filter((data: { [x: string]: any; }) => data[xAxisTitle].replace(/\$/g, '').replace(/\%/g, '').replace(/\ data[xAxisTitle].replace(/\$/g, '').replace(/\%/g, '').replace(/\ data[xAxisTitle].replace(/\$/g, '').replace(/\%/g, '').replace(/\ { @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')))) + ?.filter(pair => (!this.incomingLinks.length ? true : this.incomingLinks[0]!.selected && StrListCast(this.incomingLinks[0].selected).includes(pair.guid))) .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)); } diff --git a/src/client/views/nodes/DataVizBox/components/PieChart.tsx b/src/client/views/nodes/DataVizBox/components/PieChart.tsx index d01d4429f..f3a72a53b 100644 --- a/src/client/views/nodes/DataVizBox/components/PieChart.tsx +++ b/src/client/views/nodes/DataVizBox/components/PieChart.tsx @@ -1,15 +1,13 @@ import { observer } from "mobx-react"; -import { Doc, DocListCast } from "../../../../../fields/Doc"; +import { Doc, DocListCast, StrListCast } from "../../../../../fields/Doc"; import * as React from 'react'; import * as d3 from 'd3'; import { IReactionDisposer, action, computed, observable, reaction } from "mobx"; import { LinkManager } from "../../../../util/LinkManager"; -import { Cast, DocCast, StrCast} from "../../../../../fields/Types"; -import { DataPoint, SelectedDataPoint } from "./LineChart"; +import { DocCast, StrCast} from "../../../../../fields/Types"; import { DocumentManager } from "../../../../util/DocumentManager"; import { Id } from "../../../../../fields/FieldSymbols"; import { DataVizBox } from "../DataVizBox"; -import { listSpec } from "../../../../../fields/Schema"; import { PinProps, PresBox } from "../../trails"; import { Docs } from "../../../../documents/Documents"; import { List } from "../../../../../fields/List"; @@ -52,7 +50,7 @@ export class PieChart extends React.Component { var ax0 = this.props.axes[0]; if (/\d/.test(this.props.pairs[0][ax0])){ this.byCategory = false } return this.props.pairs - ?.filter(pair => (!this.incomingLinks.length ? true : Array.from(Object.keys(pair)).some(key => pair[key] && key.startsWith('select')))) + ?.filter(pair => (!this.incomingLinks.length ? true : this.incomingLinks[0]!.selected && StrListCast(this.incomingLinks[0].selected).includes(pair.guid))) .map(pair => ({ [ax0]: (pair[this.props.axes[0]])})) }; @@ -60,13 +58,8 @@ export class PieChart extends React.Component { var ax1 = this.props.axes[1]; if (/\d/.test(this.props.pairs[0][ax0])) { this.byCategory = false; } return this.props.pairs - ?.filter(pair => (!this.incomingLinks.length ? true : Array.from(Object.keys(pair)).some(key => pair[key] && key.startsWith('select')))) + ?.filter(pair => (!this.incomingLinks.length ? true : this.incomingLinks[0]!.selected && StrListCast(this.incomingLinks[0].selected).includes(pair.guid))) .map(pair => ({ [ax0]: (pair[this.props.axes[0]]), [ax1]: (pair[this.props.axes[1]]) })) - // .sort((a, b) => (a[ax0] < b[ax0] ? -1 : 1)); - 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 defaultGraphTitle(){ var ax0 = this.props.axes[0]; @@ -178,27 +171,16 @@ export class PieChart extends React.Component { } @action - restoreView = (data: Doc) => { - const coords = Cast(data.presDataVizSelection, listSpec('number'), null); - if (coords?.length > 1 && (this._currSelected?.x !== coords[0] || this._currSelected?.y !== coords[1])) { - this.setCurrSelected(coords[0], coords[1]); - return true; - } - if (this._currSelected) { - this.setCurrSelected(); - return true; - } - return false; - }; + restoreView = (data: Doc) => {}; // create a document anchor that stores whatever is needed to reconstruct the viewing state (selection,zoom,etc) getAnchor = (pinProps?: PinProps) => { const anchor = Docs.Create.ConfigDocument({ // - title: 'piechart doc selection' + this._currSelected?.x, + title: 'piechart doc selection' + this._currSelected, }); 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; + anchor.presDataVizSelection = this._currSelected ? new List([this._currSelected]) : undefined; return anchor; }; @@ -210,19 +192,6 @@ export class PieChart extends React.Component { return this.props.width - this.props.margin.left - this.props.margin.right; } - setupTooltip() { - return d3 - .select(this._piechartRef.current) - .append('div') - .attr('class', 'tooltip') - .style('opacity', 0) - .style('background', '#fff') - .style('border', '1px solid #ccc') - .style('padding', '5px') - .style('position', 'absolute') - .style('font-size', '12px'); - } - // TODO: nda - use this everyewhere we update currSelected? @action setCurrSelected(x?: number, y?: number) { @@ -322,7 +291,7 @@ export class PieChart extends React.Component { if (Math.min(p4[1], p1[1])<=pointer[1] && pointer[1]<=Math.max(p4[1], p1[1])){ if (pointer[0] <= (pointer[1]-p4[1])*(p1[0]-p4[0])/(p1[1]-p4[1])+p4[0]) lineCrossCount++; } if (lineCrossCount % 2 != 0) { - var showSelected = this.byCategory? pieDataSet[index] : this.props.pairs[index]; + var showSelected = this.byCategory? pieDataSet[index] : this._piechartData[index]; sameAsCurrent = (this.byCategory && this._currSelected)? (showSelected[Object.keys(showSelected)[0]]==this._currSelected![Object.keys(showSelected)[0]] && showSelected[Object.keys(showSelected)[1]]==this._currSelected![Object.keys(showSelected)[1]]) diff --git a/src/client/views/nodes/DataVizBox/components/TableBox.tsx b/src/client/views/nodes/DataVizBox/components/TableBox.tsx index 64c6dc940..5653adbce 100644 --- a/src/client/views/nodes/DataVizBox/components/TableBox.tsx +++ b/src/client/views/nodes/DataVizBox/components/TableBox.tsx @@ -1,21 +1,20 @@ -import { action, computed, observable } from 'mobx'; +import { action, computed, } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; -import { Doc } from '../../../../../fields/Doc'; -import { Id } from '../../../../../fields/FieldSymbols'; +import { Doc, StrListCast } from '../../../../../fields/Doc'; import { List } from '../../../../../fields/List'; -import { emptyFunction, returnFalse, setupMoveUpEvents, Utils } from '../../../../../Utils'; +import { emptyFunction, setupMoveUpEvents, Utils } from '../../../../../Utils'; import { DragManager } from '../../../../util/DragManager'; import { DocumentView } from '../../DocumentView'; import { DataVizView } from '../DataVizBox'; import { LinkManager } from '../../../../util/LinkManager'; import { Cast, DocCast } from '../../../../../fields/Types'; -import { EditableText, Size, Type } from 'browndash-components'; import './Chart.scss'; import { listSpec } from '../../../../../fields/Schema'; interface TableBoxProps { rootDoc: Doc; + layoutDoc: Doc; pairs: { [key: string]: any }[]; selectAxes: (axes: string[]) => void; axes: string[]; @@ -32,13 +31,10 @@ interface TableBoxProps { @observer export class TableBox extends React.Component { - @observable editableHeaders = this.columns; - @observable editableCells = this._tableData; @computed get _tableData() { if (this.incomingLinks.length! <= 0) return this.props.pairs; - /// StrListCast(this.incomingLinks[0].anchor_1.selected) ==> list of guids that the parent has selected - return this.props.pairs?.filter(pair => (Array.from(Object.keys(pair)).some(key => pair[key] && key.startsWith('select')))) + return this.props.pairs?.filter(pair => this.incomingLinks[0]!.selected && StrListCast(this.incomingLinks[0].selected).includes(pair.guid)) } @computed get incomingLinks() { @@ -49,204 +45,110 @@ export class TableBox extends React.Component { } @computed get columns() { - // return this.props.pairs.length ? Array.from(Object.keys(this.props.pairs[0])) : []; - return this._tableData.length ? Array.from(Object.keys(this._tableData[0])) : []; + return this._tableData.length ? Array.from(Object.keys(this._tableData[0])).filter(header => header!='guid' && header!='') : []; } - // render() { - // return ( - //
- // - // - // - // {this.editableHeaders - // .filter(col => !col.startsWith('select')) - // .map(col => { - // const header = React.createRef(); - // const displayColName = col; - // return ( - // - // ); - // })} - // - // - // - // {this._tableData?.map((p, i) => { - // return ( - // (p['select' + this.props.docView?.()?.rootDoc![Id]] = !p['select' + this.props.docView?.()?.rootDoc![Id]]))}> - // {this.editableHeaders.map(col => ( - // - // ))} - // - // ); - // })} - // - //
{ - // const downX = e.clientX; - // const downY = e.clientY; - // setupMoveUpEvents( - // {}, - // e, - // e => { - // const sourceAnchorCreator = () => this.props.docView?.()!.rootDoc!; - // const targetCreator = (annotationOn: Doc | undefined) => { - // const embedding = Doc.MakeEmbedding(this.props.docView?.()!.rootDoc!); - // embedding._dataVizView = DataVizView.LINECHART; - // embedding._data_vizAxes = new List([col, col]); - // embedding._draggedFrom = this.props.docView?.()!.rootDoc!; - // embedding.annotationOn = annotationOn; //this.props.docView?.()!.rootDoc!; - // return embedding; - // }; - // 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.link_displayLine = true; - // e.linkDocument.link_matchEmbeddings = 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); - // }) - // ); - // }}> - // { - // this.editableHeaders[this.editableHeaders.indexOf(col)] = val as string - // this.props.pairs.map(pair => { - // pair[val as string] = pair[col]; - // delete pair[col] - // }) - // })} - // color={"black"} - // size={Size.LARGE} - // /> - //
- // {p[col]} - //
- //
- // ); - // } - - render() { - return ( -
- - - - {this.columns - .filter(col => !col.startsWith('select')) - .map(col => { - const header = React.createRef(); - return ( - - ); - })} - - - - {this._tableData?.map((p, i) => { - return ( - { - // if (!this.props.docView?.()!.layoutDoc.selected) - // this.props.docView!.()!.layoutDoc.selected = new List(); - // const selected = Cast(this.props.docView?.()!.layoutDoc.selected, listSpec("string"), null); - // // StrListCast(this.props.docView?.()!.layoutDoc.selected) - // selected.push(p.guid); - (p['select' + this.props.docView?.()?.rootDoc![Id]] = !p['select' + this.props.docView?.()?.rootDoc![Id]]) - })}> - {this.columns.map(col => ( - - ))} - - ); - })} - -
{ - const downX = e.clientX; - const downY = e.clientY; - setupMoveUpEvents( - {}, - e, - e => { - const sourceAnchorCreator = () => this.props.docView?.()!.rootDoc!; - const targetCreator = (annotationOn: Doc | undefined) => { - const embedding = Doc.MakeEmbedding(this.props.docView?.()!.rootDoc!); - embedding._dataVizView = DataVizView.LINECHART; - embedding._data_vizAxes = new List([col, col]); - embedding._draggedFrom = this.props.docView?.()!.rootDoc!; - embedding.annotationOn = annotationOn; //this.props.docView?.()!.rootDoc!; - return embedding; - }; - 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.link_displayLine = true; - e.linkDocument.link_matchEmbeddings = 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]} -
+ if (this._tableData.length>0){ + return ( +
+ + + + {this.columns + .filter(col => !col.startsWith('select')) + .map(col => { + const header = React.createRef(); + return ( + + ); + })} + + + + {this._tableData?.map((p, i) => { + return ( + { + if (!this.props.layoutDoc.selected) this.props.layoutDoc.selected = new List(); + const selected = Cast(this.props.layoutDoc.selected, listSpec("string"), null); + if (selected.includes(p.guid)) selected.splice(selected.indexOf(p.guid), 1); + else { + selected.push(p.guid)}; + })} style={ + { fontWeight: StrListCast(this.props.layoutDoc.selected).includes(p.guid) ? 'bold' : '' , width: '110%', + background: StrListCast(this.props.layoutDoc.selected).includes(p.guid) ? 'lightgrey' : '' }}> + {this.columns.map(col => ( + (this.props.layoutDoc.selected)? + + : + ))} + + ); + })} + +
{ + const downX = e.clientX; + const downY = e.clientY; + setupMoveUpEvents( + {}, + e, + e => { + const sourceAnchorCreator = () => this.props.docView?.()!.rootDoc!; + const targetCreator = (annotationOn: Doc | undefined) => { + const embedding = Doc.MakeEmbedding(this.props.docView?.()!.rootDoc!); + embedding._dataVizView = DataVizView.TABLE; + embedding._data_vizAxes = new List([col, col]); + embedding._draggedFrom = this.props.docView?.()!.rootDoc!; + embedding.annotationOn = annotationOn; //this.props.docView?.()!.rootDoc!; + return embedding; + }; + 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.link_displayLine = true; + e.linkDocument.link_matchEmbeddings = 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]}
+
+ ); + } + else return ( +
+ Selected rows of data from the incoming DataVizBox to display.
- ); + ) } - - - } -- cgit v1.2.3-70-g09d2