From d334eb163e0e960c9d662eb696fcf98aa02fdadf Mon Sep 17 00:00:00 2001 From: srichman333 Date: Thu, 28 Sep 2023 03:09:23 -0400 Subject: doesn't lag / glitch system but scrolling can be kinda funky --- .../views/nodes/DataVizBox/components/TableBox.tsx | 139 +++++++++++++++------ 1 file changed, 100 insertions(+), 39 deletions(-) (limited to 'src') diff --git a/src/client/views/nodes/DataVizBox/components/TableBox.tsx b/src/client/views/nodes/DataVizBox/components/TableBox.tsx index 5045fde3a..243c1a0c7 100644 --- a/src/client/views/nodes/DataVizBox/components/TableBox.tsx +++ b/src/client/views/nodes/DataVizBox/components/TableBox.tsx @@ -1,5 +1,5 @@ import { Button, Type } from 'browndash-components'; -import { action, computed, IReactionDisposer, reaction } from 'mobx'; +import { action, computed, IReactionDisposer, observable, reaction } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; import { Doc, Field, NumListCast } from '../../../../../fields/Doc'; @@ -31,6 +31,9 @@ interface TableBoxProps { @observer export class TableBox extends React.Component { + @observable startID: number = 0; + @observable endID: number = 20; + _inputChangedDisposer?: IReactionDisposer; componentDidMount() { // if the tableData changes (ie., when records are selected by the parent (input) visulization), @@ -67,8 +70,61 @@ export class TableBox extends React.Component { this.props.layoutDoc.dataViz_highlitedRows = new List(highlighted.filter(rowId => this._tableDataIds.includes(rowId))); // filters through highlighted to remove guids that were removed in the incoming data }; + @action handleScroll = () => { + console.log("scroll") + // console.log("before", this.startID, this.endID) + var container = document.getElementsByClassName("table-container"); + var eachCell = document.getElementsByClassName("table-row"); + if (eachCell.length==0 || container.length==0) return; + + var useContainer; + if (container.length==1) useContainer = container[0]; + else { + for (var i=0; i= -1){ + this.startID -= 1; + this.endID -= 1; + } + + // bottom + else if (useContainer.scrollHeight - 50 <= useContainer.scrollTop + useContainer.getBoundingClientRect().height && this.endID<=this._tableDataIds.length){ + this.startID += 1; + this.endID += 1; + } + + // regular scroll + else { + let newStart = (useContainer.scrollTop / useCell.getBoundingClientRect().height ) - 1; + newStart = Math.floor(Number(newStart)) + if (newStart=-1){ this.startID -= 1; } + if (newStart>this.startID) { this.startID += 1; } + + let newEnd = this.startID + useContainer.getBoundingClientRect().height / useCell.getBoundingClientRect().height + 1; + newEnd = Math.floor(Number(newEnd)) + if (newEndthis.endID && this.endID<=this._tableDataIds.length) { this.endID += 1; } + } + } + else { + this.endID = this._tableDataIds.length - 1; + } + } + render() { if (this._tableData.length > 0) { + return (
{
r?.addEventListener( 'wheel', // if scrollTop is 0, then don't let wheel trigger scroll on any container (which it would since onScroll won't be triggered on this) (e: WheelEvent) => { if (!r.scrollTop && e.deltaY <= 0) e.preventDefault(); + this.handleScroll(); e.stopPropagation(); }, { passive: false } @@ -98,7 +155,7 @@ export class TableBox extends React.Component { }> - + {this.columns.map(col => ( {this._tableDataIds ?.map(rowId => ({ record: this.props.records[rowId], rowId })) - .map(({ record, rowId }) => ( - { - const highlited = Cast(this.props.layoutDoc.dataViz_highlitedRows, listSpec('number'), null); - const selected = Cast(this.props.layoutDoc.dataViz_selectedRows, listSpec('number'), null); - if (e.metaKey) { - // highlighting a row - if (highlited?.includes(rowId)) highlited.splice(highlited.indexOf(rowId), 1); - else highlited?.push(rowId); - if (!selected?.includes(rowId)) selected?.push(rowId); - } else { - // selecting a row - if (selected?.includes(rowId)) { - if (highlited?.includes(rowId)) highlited.splice(highlited.indexOf(rowId), 1); - selected.splice(selected.indexOf(rowId), 1); - } else selected?.push(rowId); - } - e.stopPropagation(); - })} - style={{ - background: NumListCast(this.props.layoutDoc.dataViz_highlitedRows).includes(rowId) ? 'lightYellow' : NumListCast(this.props.layoutDoc.dataViz_selectedRows).includes(rowId) ? 'lightgrey' : '', - width: '110%', - }}> - {this.columns.map(col => { - // each cell - const colSelected = this.props.axes.length > 1 ? this.props.axes[0] == col || this.props.axes[1] == col : this.props.axes.length > 0 ? this.props.axes[0] == col : false; - return ( - - ); - })} - - ))} + .map(({ record, rowId }) => { + if (this.startID<=rowId && rowId<=this.endID){ + return ( + { + const highlited = Cast(this.props.layoutDoc.dataViz_highlitedRows, listSpec('number'), null); + const selected = Cast(this.props.layoutDoc.dataViz_selectedRows, listSpec('number'), null); + if (e.metaKey) { + // highlighting a row + if (highlited?.includes(rowId)) highlited.splice(highlited.indexOf(rowId), 1); + else highlited?.push(rowId); + if (!selected?.includes(rowId)) selected?.push(rowId); + } else { + // selecting a row + if (selected?.includes(rowId)) { + if (highlited?.includes(rowId)) highlited.splice(highlited.indexOf(rowId), 1); + selected.splice(selected.indexOf(rowId), 1); + } else selected?.push(rowId); + } + e.stopPropagation(); + })} + style={{ + background: NumListCast(this.props.layoutDoc.dataViz_highlitedRows).includes(rowId) ? 'lightYellow' : NumListCast(this.props.layoutDoc.dataViz_selectedRows).includes(rowId) ? 'lightgrey' : '', + width: '110%', + }}> + {this.columns.map(col => { + // each cell + const colSelected = this.props.axes.length > 1 ? this.props.axes[0] == col || this.props.axes[1] == col : this.props.axes.length > 0 ? this.props.axes[0] == col : false; + return ( + + ); + })} + + ) + } + })}
{
- {record[col]} -
+ {record[col]} +
-- cgit v1.2.3-70-g09d2 From 0d7cb9352552c16f6a7621eb18933ff73e7357af Mon Sep 17 00:00:00 2001 From: srichman333 Date: Thu, 28 Sep 2023 09:50:39 -0400 Subject: smoother scrolling --- .../views/nodes/DataVizBox/components/TableBox.tsx | 25 +++++++++++++--------- 1 file changed, 15 insertions(+), 10 deletions(-) (limited to 'src') diff --git a/src/client/views/nodes/DataVizBox/components/TableBox.tsx b/src/client/views/nodes/DataVizBox/components/TableBox.tsx index 243c1a0c7..07d151702 100644 --- a/src/client/views/nodes/DataVizBox/components/TableBox.tsx +++ b/src/client/views/nodes/DataVizBox/components/TableBox.tsx @@ -92,29 +92,34 @@ export class TableBox extends React.Component { } } if (useCell && useContainer){ + + // check for 20 (inital value) as end point + if (this.endID == 20){ + let newEnd = this.startID + useContainer.getBoundingClientRect().height / useCell.getBoundingClientRect().height + 1; + newEnd = Math.floor(Number(newEnd)) + if (newEndthis.endID && this.endID<=this._tableDataIds.length) { this.endID += .1; } + } + // top if (useContainer.scrollTop <= 10 && this.startID >= -1){ - this.startID -= 1; - this.endID -= 1; + this.startID -= .01; + this.endID -= .01; } // bottom else if (useContainer.scrollHeight - 50 <= useContainer.scrollTop + useContainer.getBoundingClientRect().height && this.endID<=this._tableDataIds.length){ - this.startID += 1; - this.endID += 1; + this.startID += .1; + this.endID += .1; } // regular scroll else { let newStart = (useContainer.scrollTop / useCell.getBoundingClientRect().height ) - 1; newStart = Math.floor(Number(newStart)) - if (newStart=-1){ this.startID -= 1; } - if (newStart>this.startID) { this.startID += 1; } + if (newStart=-1){ this.startID -= .1; this.endID -= -.1; } + if (newStart>this.startID) { this.startID += .1; this.endID += .1; } - let newEnd = this.startID + useContainer.getBoundingClientRect().height / useCell.getBoundingClientRect().height + 1; - newEnd = Math.floor(Number(newEnd)) - if (newEndthis.endID && this.endID<=this._tableDataIds.length) { this.endID += 1; } } } else { -- cgit v1.2.3-70-g09d2 From 1256010bee4d427d35f5ccb13d7ba08b424df3e5 Mon Sep 17 00:00:00 2001 From: srichman333 Date: Thu, 28 Sep 2023 15:43:51 -0400 Subject: header fix + more consistent bar height --- .../views/nodes/DataVizBox/components/TableBox.tsx | 144 ++++++++++----------- 1 file changed, 72 insertions(+), 72 deletions(-) (limited to 'src') diff --git a/src/client/views/nodes/DataVizBox/components/TableBox.tsx b/src/client/views/nodes/DataVizBox/components/TableBox.tsx index 07d151702..556a8b281 100644 --- a/src/client/views/nodes/DataVizBox/components/TableBox.tsx +++ b/src/client/views/nodes/DataVizBox/components/TableBox.tsx @@ -71,8 +71,6 @@ export class TableBox extends React.Component { }; @action handleScroll = () => { - console.log("scroll") - // console.log("before", this.startID, this.endID) var container = document.getElementsByClassName("table-container"); var eachCell = document.getElementsByClassName("table-row"); if (eachCell.length==0 || container.length==0) return; @@ -109,17 +107,16 @@ export class TableBox extends React.Component { // bottom else if (useContainer.scrollHeight - 50 <= useContainer.scrollTop + useContainer.getBoundingClientRect().height && this.endID<=this._tableDataIds.length){ - this.startID += .1; - this.endID += .1; + this.startID += .01; + this.endID += .01; } // regular scroll else { - let newStart = (useContainer.scrollTop / useCell.getBoundingClientRect().height ) - 1; - newStart = Math.floor(Number(newStart)) - if (newStart=-1){ this.startID -= .1; this.endID -= -.1; } - if (newStart>this.startID) { this.startID += .1; this.endID += .1; } - + let newStart = (useContainer.scrollTop / useCell.getBoundingClientRect().height ) - 1; + newStart = Math.floor(Number(newStart)) + if (newStart=-1){ this.startID -= .01; this.endID -= -.01; } + else if (newStart>this.startID) { this.startID += .01; this.endID += .01; } } } else { @@ -161,69 +158,72 @@ export class TableBox extends React.Component { - {this.columns.map(col => ( - - ))} + {this.columns.map(col => { + if (this.startID>0) return; + return ( + + )} + )} -- cgit v1.2.3-70-g09d2 From 3884211ab83db30965a4dc1c4b3133684904ebb9 Mon Sep 17 00:00:00 2001 From: srichman333 Date: Mon, 2 Oct 2023 17:54:58 -0400 Subject: better scrolling in data tables --- .../views/nodes/DataVizBox/components/TableBox.tsx | 42 ++++++++++------------ 1 file changed, 19 insertions(+), 23 deletions(-) (limited to 'src') diff --git a/src/client/views/nodes/DataVizBox/components/TableBox.tsx b/src/client/views/nodes/DataVizBox/components/TableBox.tsx index 556a8b281..dd13c5749 100644 --- a/src/client/views/nodes/DataVizBox/components/TableBox.tsx +++ b/src/client/views/nodes/DataVizBox/components/TableBox.tsx @@ -32,7 +32,7 @@ interface TableBoxProps { @observer export class TableBox extends React.Component { @observable startID: number = 0; - @observable endID: number = 20; + @observable endID: number = 15; _inputChangedDisposer?: IReactionDisposer; componentDidMount() { @@ -90,33 +90,29 @@ export class TableBox extends React.Component { } } if (useCell && useContainer){ - - // check for 20 (inital value) as end point - if (this.endID == 20){ - let newEnd = this.startID + useContainer.getBoundingClientRect().height / useCell.getBoundingClientRect().height + 1; - newEnd = Math.floor(Number(newEnd)) - if (newEndthis.endID && this.endID<=this._tableDataIds.length) { this.endID += .1; } - } - + let atEnd = false; // top - if (useContainer.scrollTop <= 10 && this.startID >= -1){ - this.startID -= .01; - this.endID -= .01; + if (useContainer.scrollTop <= 10){ + atEnd = true; + if (this.startID >= -1){ + this.startID -= .001; + this.endID -= .001; + } } - // bottom - else if (useContainer.scrollHeight - 50 <= useContainer.scrollTop + useContainer.getBoundingClientRect().height && this.endID<=this._tableDataIds.length){ - this.startID += .01; - this.endID += .01; + else if (useContainer.scrollHeight / (useContainer.scrollTop + useContainer.getBoundingClientRect().height) < 1.1 && this.endID<=this._tableDataIds.length){ + this.startID += .015; + this.endID += .015; } - // regular scroll - else { - let newStart = (useContainer.scrollTop / useCell.getBoundingClientRect().height ) - 1; - newStart = Math.floor(Number(newStart)) - if (newStart=-1){ this.startID -= .01; this.endID -= -.01; } - else if (newStart>this.startID) { this.startID += .01; this.endID += .01; } + else if (this.endID<=this._tableDataIds.length && !atEnd) { + let newStart = (useContainer.scrollTop / useCell.getBoundingClientRect().height ) ; + if (newStart=-1){ + this.startID -= .001; + this.endID -= .001; } + else if (newStart>this.startID) { + this.startID += .001; + this.endID += .001; } } } else { -- cgit v1.2.3-70-g09d2 From a376f30189e847ac763c08288428de415f1ce081 Mon Sep 17 00:00:00 2001 From: bobzel Date: Tue, 10 Oct 2023 12:12:33 -0400 Subject: fixes for scrolling large datasets in TableBox --- src/client/views/nodes/DataVizBox/DataVizBox.tsx | 80 ++---- .../views/nodes/DataVizBox/components/TableBox.tsx | 267 +++++++++------------ 2 files changed, 142 insertions(+), 205 deletions(-) (limited to 'src') diff --git a/src/client/views/nodes/DataVizBox/DataVizBox.tsx b/src/client/views/nodes/DataVizBox/DataVizBox.tsx index b9db5fe15..299494c83 100644 --- a/src/client/views/nodes/DataVizBox/DataVizBox.tsx +++ b/src/client/views/nodes/DataVizBox/DataVizBox.tsx @@ -36,7 +36,7 @@ export class DataVizBox extends ViewBoxAnnotatableComponent() { // 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); - return records?.filter(record => Object.keys(record).some(key => record[key])); + return records?.filter(record => Object.keys(record).some(key => record[key])) ?? []; } // currently chosen visualization type: line, pie, histogram, table @@ -110,70 +110,38 @@ export class DataVizBox extends ViewBoxAnnotatableComponent() { // toggles for user to decide which chart type to view the data in renderVizView = () => { - 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: 25, bottom: 75, left: 45 }; - if (this.records) { - switch (this.dataVizView) { - case DataVizView.TABLE: - return ; - case DataVizView.LINECHART: - return ( - (this._vizRenderer = r ?? undefined)} - height={height} - width={width} - fieldKey={this.fieldKey} - margin={margin} - rootDoc={this.rootDoc} - axes={this.axes} - records={this.records} - dataDoc={this.dataDoc} - /> - ); - case DataVizView.HISTOGRAM: - return ( - (this._vizRenderer = r ?? undefined)} - height={height} - width={width} - fieldKey={this.fieldKey} - margin={margin} - rootDoc={this.rootDoc} - axes={this.axes} - records={this.records} - dataDoc={this.dataDoc} - /> - ); - case DataVizView.PIECHART: - return ( - (this._vizRenderer = r ?? undefined)} - height={height} - width={width} - fieldKey={this.fieldKey} - margin={margin} - rootDoc={this.rootDoc} - axes={this.axes} - records={this.records} - dataDoc={this.dataDoc} - /> - ); - } + const sharedProps = { + rootDoc: this.rootDoc, + layoutDoc: this.layoutDoc, + records: this.records, + axes: this.axes, + height: (this.props.PanelHeight() - 32) /* height of 'change view' button */ * 0.9, + width: this.props.PanelWidth() * 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 ; + case DataVizView.LINECHART: + return (this._vizRenderer = r ?? undefined)} />; + case DataVizView.HISTOGRAM: + return (this._vizRenderer = r ?? undefined)} />; + case DataVizView.PIECHART: + return (this._vizRenderer = r ?? undefined)} />; } - return 'no data/visualization'; }; render() { - return !this.records?.length ? ( + return !this.records.length ? ( // displays how to get data into the DataVizBox if its empty
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.
) : (
e.stopPropagation()} ref={r => r?.addEventListener( diff --git a/src/client/views/nodes/DataVizBox/components/TableBox.tsx b/src/client/views/nodes/DataVizBox/components/TableBox.tsx index dd13c5749..edf0ea4c7 100644 --- a/src/client/views/nodes/DataVizBox/components/TableBox.tsx +++ b/src/client/views/nodes/DataVizBox/components/TableBox.tsx @@ -1,6 +1,7 @@ import { Button, Type } from 'browndash-components'; import { action, computed, IReactionDisposer, observable, reaction } from 'mobx'; import { observer } from 'mobx-react'; +import { actionFieldDecorator } from 'mobx/lib/internal'; import * as React from 'react'; import { Doc, Field, NumListCast } from '../../../../../fields/Doc'; import { List } from '../../../../../fields/List'; @@ -32,13 +33,17 @@ interface TableBoxProps { @observer export class TableBox extends React.Component { @observable startID: number = 0; - @observable endID: number = 15; + @observable endID: number = 0; + _tableContainerRef: HTMLDivElement | null = null; + _tableRef = React.createRef(); _inputChangedDisposer?: IReactionDisposer; componentDidMount() { // if the tableData changes (ie., when records are selected by the parent (input) visulization), // then we need to remove any selected rows that are no longer part of the visualized dataset. this._inputChangedDisposer = reaction(() => this._tableData.slice(), this.filterSelectedRowsDown, { fireImmediately: true }); + + this._tableContainerRef && this.handleScroll(); } componentWillUnmount() { this._inputChangedDisposer?.(); @@ -70,59 +75,88 @@ export class TableBox extends React.Component { this.props.layoutDoc.dataViz_highlitedRows = new List(highlighted.filter(rowId => this._tableDataIds.includes(rowId))); // filters through highlighted to remove guids that were removed in the incoming data }; - @action handleScroll = () => { - var container = document.getElementsByClassName("table-container"); - var eachCell = document.getElementsByClassName("table-row"); - if (eachCell.length==0 || container.length==0) return; + @computed get viewScale() { + return this.props.docView?.()?.props.ScreenToLocalTransform().Scale || 1; + } + @computed get rowHeight() { + const tableHeight = this._tableRef.current?.getBoundingClientRect().height; + return !tableHeight ? 1 : (this.viewScale * tableHeight) / this._tableDataIds.length; + } - var useContainer; - if (container.length==1) useContainer = container[0]; - else { - for (var i=0; i { + if (this._tableContainerRef) { + this.startID = Math.floor(this._tableContainerRef.scrollTop / this.rowHeight); + this.endID = this.startID + (this._tableContainerRef.getBoundingClientRect().height * this.viewScale) / this.rowHeight; } - var useCell; - if (eachCell.length==1) useCell = eachCell[0]; - else { - for (var i=0; i { + const highlited = Cast(this.props.layoutDoc.dataViz_highlitedRows, listSpec('number'), null); + const selected = Cast(this.props.layoutDoc.dataViz_selectedRows, listSpec('number'), null); + if (e.metaKey) { + // highlighting a row + if (highlited?.includes(rowId)) highlited.splice(highlited.indexOf(rowId), 1); + else highlited?.push(rowId); + if (!selected?.includes(rowId)) selected?.push(rowId); + } else { + // selecting a row + if (selected?.includes(rowId)) { + if (highlited?.includes(rowId)) highlited.splice(highlited.indexOf(rowId), 1); + selected.splice(selected.indexOf(rowId), 1); + } else selected?.push(rowId); } - if (useCell && useContainer){ - let atEnd = false; - // top - if (useContainer.scrollTop <= 10){ - atEnd = true; - if (this.startID >= -1){ - this.startID -= .001; - this.endID -= .001; + e.stopPropagation(); + }; + + columnPointerDown = (e: React.PointerEvent, col: string) => { + const downX = e.clientX; + const downY = e.clientY; + setupMoveUpEvents( + {}, + e, + e => { + // dragging off a column to create a brushed DataVizBox + const sourceAnchorCreator = () => this.props.docView?.()!.rootDoc!; + const targetCreator = (annotationOn: Doc | undefined) => { + const embedding = Doc.MakeEmbedding(this.props.docView?.()!.rootDoc!); + embedding._dataViz = DataVizView.TABLE; + embedding._dataViz_axes = new List([col, col]); + embedding._dataViz_parentViz = this.props.rootDoc; + embedding.annotationOn = annotationOn; + embedding.histogramBarColors = Field.Copy(this.props.layoutDoc.histogramBarColors); + embedding.defaultHistogramColor = this.props.layoutDoc.defaultHistogramColor; + embedding.pieSliceColors = Field.Copy(this.props.layoutDoc.pieSliceColors); + return embedding; + }; + if (this.props.docView?.() && !Utils.isClick(e.clientX, e.clientY, downX, downY, Date.now())) { + DragManager.StartAnchorAnnoDrag(e.target instanceof HTMLElement ? [e.target] : [], 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.linkDocument.link_displayArrow = true; + // e.annoDragData.linkSourceDoc.followLinkToggle = e.annoDragData.dropDocument.annotationOn === this.props.rootDoc; + // e.annoDragData.linkSourceDoc.followLinkZoom = false; + } + }, + }); + return true; } - } - // bottom - else if (useContainer.scrollHeight / (useContainer.scrollTop + useContainer.getBoundingClientRect().height) < 1.1 && this.endID<=this._tableDataIds.length){ - this.startID += .015; - this.endID += .015; - } - // regular scroll - else if (this.endID<=this._tableDataIds.length && !atEnd) { - let newStart = (useContainer.scrollTop / useCell.getBoundingClientRect().height ) ; - if (newStart=-1){ - this.startID -= .001; - this.endID -= .001; } - else if (newStart>this.startID) { - this.startID += .001; - this.endID += .001; } - } - } - else { - this.endID = this._tableDataIds.length - 1; - } - } + 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.push(col); + this.props.selectAxes(newAxes); + }) + ); + }; render() { if (this._tableData.length > 0) { - return (
{
+ style={{ height: '100%', overflow: 'auto' }} + onScroll={this.handleScroll} + ref={r => { + this._tableContainerRef = r; r?.addEventListener( 'wheel', // if scrollTop is 0, then don't let wheel trigger scroll on any container (which it would since onScroll won't be triggered on this) (e: WheelEvent) => { if (!r.scrollTop && e.deltaY <= 0) e.preventDefault(); - this.handleScroll(); e.stopPropagation(); }, { passive: false } - ) - }> -
{ - const downX = e.clientX; - const downY = e.clientY; - setupMoveUpEvents( - {}, - e, - e => { - // dragging off a column to create a brushed DataVizBox - const sourceAnchorCreator = () => this.props.docView?.()!.rootDoc!; - const targetCreator = (annotationOn: Doc | undefined) => { - const embedding = Doc.MakeEmbedding(this.props.docView?.()!.rootDoc!); - embedding._dataViz = DataVizView.TABLE; - embedding._dataViz_axes = new List([col, col]); - embedding._dataViz_parentViz = this.props.rootDoc; - embedding.annotationOn = annotationOn; //this.props.docView?.()!.rootDoc!; - embedding.histogramBarColors = Field.Copy(this.props.layoutDoc.histogramBarColors); - embedding.defaultHistogramColor = this.props.layoutDoc.defaultHistogramColor; - embedding.pieSliceColors = Field.Copy(this.props.layoutDoc.pieSliceColors); - return embedding; - }; - if (this.props.docView?.() && !Utils.isClick(e.clientX, e.clientY, downX, downY, Date.now())) { - DragManager.StartAnchorAnnoDrag( - e.target instanceof HTMLElement ? [e.target] : [], - 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.push(col); - this.props.selectAxes(newAxes); - }) - ); - }}> - {col} - { + const downX = e.clientX; + const downY = e.clientY; + setupMoveUpEvents( + {}, + e, + e => { + // dragging off a column to create a brushed DataVizBox + const sourceAnchorCreator = () => this.props.docView?.()!.rootDoc!; + const targetCreator = (annotationOn: Doc | undefined) => { + const embedding = Doc.MakeEmbedding(this.props.docView?.()!.rootDoc!); + embedding._dataViz = DataVizView.TABLE; + embedding._dataViz_axes = new List([col, col]); + embedding._dataViz_parentViz = this.props.rootDoc; + embedding.annotationOn = annotationOn; //this.props.docView?.()!.rootDoc!; + embedding.histogramBarColors = Field.Copy(this.props.layoutDoc.histogramBarColors); + embedding.defaultHistogramColor = this.props.layoutDoc.defaultHistogramColor; + embedding.pieSliceColors = Field.Copy(this.props.layoutDoc.pieSliceColors); + return embedding; + }; + if (this.props.docView?.() && !Utils.isClick(e.clientX, e.clientY, downX, downY, Date.now())) { + DragManager.StartAnchorAnnoDrag( + e.target instanceof HTMLElement ? [e.target] : [], + 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.push(col); + this.props.selectAxes(newAxes); + }) + ); + }}> + {col} +
+ ); + }}> +
- - {this.columns.map(col => { - if (this.startID>0) return; - return ( + + {this.columns.map(col => + this.startID > 0 ? null : ( - )} + ) )} {this._tableDataIds ?.map(rowId => ({ record: this.props.records[rowId], rowId })) - .map(({ record, rowId }) => { - if (this.startID<=rowId && rowId<=this.endID){ - return ( - { - const highlited = Cast(this.props.layoutDoc.dataViz_highlitedRows, listSpec('number'), null); - const selected = Cast(this.props.layoutDoc.dataViz_selectedRows, listSpec('number'), null); - if (e.metaKey) { - // highlighting a row - if (highlited?.includes(rowId)) highlited.splice(highlited.indexOf(rowId), 1); - else highlited?.push(rowId); - if (!selected?.includes(rowId)) selected?.push(rowId); - } else { - // selecting a row - if (selected?.includes(rowId)) { - if (highlited?.includes(rowId)) highlited.splice(highlited.indexOf(rowId), 1); - selected.splice(selected.indexOf(rowId), 1); - } else selected?.push(rowId); - } - e.stopPropagation(); - })} - style={{ - background: NumListCast(this.props.layoutDoc.dataViz_highlitedRows).includes(rowId) ? 'lightYellow' : NumListCast(this.props.layoutDoc.dataViz_selectedRows).includes(rowId) ? 'lightgrey' : '', - width: '110%', - }}> - {this.columns.map(col => { - // each cell - const colSelected = this.props.axes.length > 1 ? this.props.axes[0] == col || this.props.axes[1] == col : this.props.axes.length > 0 ? this.props.axes[0] == col : false; - return ( - - ); - })} - - ) - } - })} + .map(({ record, rowId }) => + this.startID > rowId || rowId > this.endID ? ( + + + ) : ( + this.tableRowClick(e, rowId)} + style={{ + background: NumListCast(this.props.layoutDoc.dataViz_highlitedRows).includes(rowId) ? 'lightYellow' : NumListCast(this.props.layoutDoc.dataViz_selectedRows).includes(rowId) ? 'lightgrey' : '', + width: '110%', + }}> + {this.columns.map(col => { + const colSelected = this.props.axes.length > 1 ? this.props.axes[0] == col || this.props.axes[1] == col : this.props.axes.length > 0 ? this.props.axes[0] == col : false; + return ( + + ); + })} + + ) + )}
{ fontWeight: 'bolder', border: '3px solid black', }} - onPointerDown={e => { - const downX = e.clientX; - const downY = e.clientY; - setupMoveUpEvents( - {}, - e, - e => { - // dragging off a column to create a brushed DataVizBox - const sourceAnchorCreator = () => this.props.docView?.()!.rootDoc!; - const targetCreator = (annotationOn: Doc | undefined) => { - const embedding = Doc.MakeEmbedding(this.props.docView?.()!.rootDoc!); - embedding._dataViz = DataVizView.TABLE; - embedding._dataViz_axes = new List([col, col]); - embedding._dataViz_parentViz = this.props.rootDoc; - embedding.annotationOn = annotationOn; //this.props.docView?.()!.rootDoc!; - embedding.histogramBarColors = Field.Copy(this.props.layoutDoc.histogramBarColors); - embedding.defaultHistogramColor = this.props.layoutDoc.defaultHistogramColor; - embedding.pieSliceColors = Field.Copy(this.props.layoutDoc.pieSliceColors); - return embedding; - }; - if (this.props.docView?.() && !Utils.isClick(e.clientX, e.clientY, downX, downY, Date.now())) { - DragManager.StartAnchorAnnoDrag( - e.target instanceof HTMLElement ? [e.target] : [], - 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.push(col); - this.props.selectAxes(newAxes); - }) - ); - }}> + onPointerDown={e => this.columnPointerDown(e, col)}> {col}
- {record[col]} -
{/* empty row data for out-of-view items needed to give row the default row height so that scrolling works */} +
+
{record[col]}
+
-- cgit v1.2.3-70-g09d2 From 2da948c2f19c2afa6c0f92964a2622d0e9a2f144 Mon Sep 17 00:00:00 2001 From: bobzel Date: Tue, 10 Oct 2023 14:36:07 -0400 Subject: more fixes for virtual scrolling and added keeps scroll pos on drag --- .../views/nodes/DataVizBox/components/TableBox.tsx | 138 +++++++++++---------- 1 file changed, 72 insertions(+), 66 deletions(-) (limited to 'src') diff --git a/src/client/views/nodes/DataVizBox/components/TableBox.tsx b/src/client/views/nodes/DataVizBox/components/TableBox.tsx index edf0ea4c7..b8f65cb7d 100644 --- a/src/client/views/nodes/DataVizBox/components/TableBox.tsx +++ b/src/client/views/nodes/DataVizBox/components/TableBox.tsx @@ -1,7 +1,6 @@ import { Button, Type } from 'browndash-components'; import { action, computed, IReactionDisposer, observable, reaction } from 'mobx'; import { observer } from 'mobx-react'; -import { actionFieldDecorator } from 'mobx/lib/internal'; import * as React from 'react'; import { Doc, Field, NumListCast } from '../../../../../fields/Doc'; import { List } from '../../../../../fields/List'; @@ -32,18 +31,18 @@ interface TableBoxProps { @observer export class TableBox extends React.Component { - @observable startID: number = 0; - @observable endID: number = 0; - _tableContainerRef: HTMLDivElement | null = null; - _tableRef = React.createRef(); - _inputChangedDisposer?: IReactionDisposer; + _containerRef: HTMLDivElement | null = null; + + @observable _scrollTop = -1; + @observable _tableHeight = 0; + @observable _tableContainerHeight = 0; + componentDidMount() { // if the tableData changes (ie., when records are selected by the parent (input) visulization), // then we need to remove any selected rows that are no longer part of the visualized dataset. this._inputChangedDisposer = reaction(() => this._tableData.slice(), this.filterSelectedRowsDown, { fireImmediately: true }); - - this._tableContainerRef && this.handleScroll(); + this.handleScroll(); } componentWillUnmount() { this._inputChangedDisposer?.(); @@ -79,14 +78,17 @@ export class TableBox extends React.Component { return this.props.docView?.()?.props.ScreenToLocalTransform().Scale || 1; } @computed get rowHeight() { - const tableHeight = this._tableRef.current?.getBoundingClientRect().height; - return !tableHeight ? 1 : (this.viewScale * tableHeight) / this._tableDataIds.length; + return (this.viewScale * this._tableHeight) / this._tableDataIds.length; + } + @computed get startID() { + return this.rowHeight ? Math.floor(this._scrollTop / this.rowHeight) : 0; + } + @computed get endID() { + return Math.ceil(this.startID + (this._tableContainerHeight * this.viewScale) / (this.rowHeight || 1)); } - @action handleScroll = () => { - if (this._tableContainerRef) { - this.startID = Math.floor(this._tableContainerRef.scrollTop / this.rowHeight); - this.endID = this.startID + (this._tableContainerRef.getBoundingClientRect().height * this.viewScale) / this.rowHeight; + if (!this.props.docView?.()?.ContentDiv?.hidden) { + this._scrollTop = this._containerRef?.scrollTop ?? 0; } }; @action @@ -175,66 +177,70 @@ export class TableBox extends React.Component { className={`table-container ${this.columns[0]}`} style={{ height: '100%', overflow: 'auto' }} onScroll={this.handleScroll} - ref={r => { - this._tableContainerRef = r; - r?.addEventListener( - 'wheel', // if scrollTop is 0, then don't let wheel trigger scroll on any container (which it would since onScroll won't be triggered on this) - (e: WheelEvent) => { - if (!r.scrollTop && e.deltaY <= 0) e.preventDefault(); - e.stopPropagation(); - }, - { passive: false } - ); - }}> - + ref={action((r: HTMLDivElement | null) => { + this._containerRef = r; + if (!this.props.docView?.()?.ContentDiv?.hidden && r) { + this._tableContainerHeight = r.getBoundingClientRect().height ?? 0; + r.addEventListener( + 'wheel', // if scrollTop is 0, then don't let wheel trigger scroll on any container (which it would since onScroll won't be triggered on this) + (e: WheelEvent) => { + if (!r.scrollTop && e.deltaY <= 0) e.preventDefault(); + e.stopPropagation(); + }, + { passive: false } + ); + } + })}> +
{ + if (!this.props.docView?.()?.ContentDiv?.hidden && r) { + this._tableHeight = r?.getBoundingClientRect().height ?? 0; + } + })}> +
- {this.columns.map(col => - this.startID > 0 ? null : ( - - ) - )} + {this.columns.map(col => ( + + ))} {this._tableDataIds + .filter(rowId => this.startID <= rowId && rowId <= this.endID) ?.map(rowId => ({ record: this.props.records[rowId], rowId })) - .map(({ record, rowId }) => - this.startID > rowId || rowId > this.endID ? ( - - - ) : ( - this.tableRowClick(e, rowId)} - style={{ - background: NumListCast(this.props.layoutDoc.dataViz_highlitedRows).includes(rowId) ? 'lightYellow' : NumListCast(this.props.layoutDoc.dataViz_selectedRows).includes(rowId) ? 'lightgrey' : '', - width: '110%', - }}> - {this.columns.map(col => { - const colSelected = this.props.axes.length > 1 ? this.props.axes[0] == col || this.props.axes[1] == col : this.props.axes.length > 0 ? this.props.axes[0] == col : false; - return ( - - ); - })} - - ) - )} + .map(({ record, rowId }) => ( + this.tableRowClick(e, rowId)} + style={{ + background: NumListCast(this.props.layoutDoc.dataViz_highlitedRows).includes(rowId) ? 'lightYellow' : NumListCast(this.props.layoutDoc.dataViz_selectedRows).includes(rowId) ? 'lightgrey' : '', + width: '110%', + }}> + {this.columns.map(col => { + const colSelected = this.props.axes.length > 1 ? this.props.axes[0] == col || this.props.axes[1] == col : this.props.axes.length > 0 ? this.props.axes[0] == col : false; + return ( + + ); + })} + + ))} +
this.columnPointerDown(e, col)}> - {col} - this.columnPointerDown(e, col)}> + {col} +
{/* empty row data for out-of-view items needed to give row the default row height so that scrolling works */} -
-
{record[col]}
-
+
{record[col]}
+
-- cgit v1.2.3-70-g09d2 From 5eca36aa3e775646d96671b922bf7205074ab135 Mon Sep 17 00:00:00 2001 From: bobzel Date: Tue, 10 Oct 2023 14:52:54 -0400 Subject: made tablebox row height a css variable. fixed panmode so that left drag selects w/ marquee and two finger vertical pan isn't clamped. --- .../collections/collectionFreeForm/CollectionFreeFormView.tsx | 2 +- src/client/views/collections/collectionFreeForm/MarqueeView.tsx | 9 ++++----- src/client/views/global/globalCssVariables.scss | 3 +++ src/client/views/global/globalCssVariables.scss.d.ts | 1 + src/client/views/nodes/DataVizBox/components/Chart.scss | 3 ++- src/client/views/nodes/DataVizBox/components/TableBox.tsx | 3 ++- 6 files changed, 13 insertions(+), 8 deletions(-) (limited to 'src') diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index 676e96714..3a8e8f2ef 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -1082,7 +1082,7 @@ export class CollectionFreeFormView extends CollectionSubView Transform; @@ -223,7 +222,7 @@ export class MarqueeView extends React.Component height directly, but you can set the height of all of it's s. So this is the height of a tableBox row. + height: $DATA_VIZ_TABLE_ROW_HEIGHT !important; // bcz: hack. you can't set a height directly, but you can set the height of all of it's s. So this is the height of a tableBox row. padding: 0 !important; vertical-align: middle !important; } diff --git a/src/client/views/nodes/DataVizBox/components/TableBox.tsx b/src/client/views/nodes/DataVizBox/components/TableBox.tsx index b8f65cb7d..8f16df1dc 100644 --- a/src/client/views/nodes/DataVizBox/components/TableBox.tsx +++ b/src/client/views/nodes/DataVizBox/components/TableBox.tsx @@ -10,6 +10,7 @@ import { emptyFunction, setupMoveUpEvents, Utils } from '../../../../../Utils'; import { DragManager } from '../../../../util/DragManager'; import { DocumentView } from '../../DocumentView'; import { DataVizView } from '../DataVizBox'; +import { DATA_VIZ_TABLE_ROW_HEIGHT } from '../../../global/globalCssVariables.scss'; import './Chart.scss'; interface TableBoxProps { @@ -198,7 +199,7 @@ export class TableBox extends React.Component { this._tableHeight = r?.getBoundingClientRect().height ?? 0; } })}> -
+
{this.columns.map(col => ( -- cgit v1.2.3-70-g09d2