Merge branch 'master' into advanced-trails-2-jesus

1 files changed, 147 insertions, 119 deletions

diff --git a/src/client/views/nodes/DataVizBox/components/TableBox.tsx b/src/client/views/nodes/DataVizBox/components/TableBox.tsx
index 70483ac6f..5045fde3a 100644
--- a/src/client/views/nodes/DataVizBox/components/TableBox.tsx
+++ b/src/client/views/nodes/DataVizBox/components/TableBox.tsx
@@ -1,21 +1,21 @@
-import { action, computed } from 'mobx';
+import { Button, Type } from 'browndash-components';
+import { action, computed, IReactionDisposer, reaction } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
-import { Doc, Field, StrListCast } from '../../../../../fields/Doc';
+import { Doc, Field, NumListCast } from '../../../../../fields/Doc';
 import { List } from '../../../../../fields/List';
+import { listSpec } from '../../../../../fields/Schema';
+import { Cast, DocCast } from '../../../../../fields/Types';
 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 './Chart.scss';
-import { listSpec } from '../../../../../fields/Schema';
 
 interface TableBoxProps {
     rootDoc: Doc;
     layoutDoc: Doc;
-    pairs: { [key: string]: any }[];
+    records: { [key: string]: any }[];
     selectAxes: (axes: string[]) => void;
     axes: string[];
     width: number;
@@ -31,84 +31,110 @@ interface TableBoxProps {
 
 @observer
 export class TableBox extends React.Component<TableBoxProps> {
-    // filters all data to just display selected data if brushed (created from an incoming link)
+    _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 });
+    }
+    componentWillUnmount() {
+        this._inputChangedDisposer?.();
+    }
+    @computed get _tableDataIds() {
+        return !this.parentViz ? this.props.records.map((rec, i) => i) : NumListCast(this.parentViz.dataViz_selectedRows);
+    }
+    // returns all the data records that will be rendered by only returning those records that have been selected by the parent visualization (or all records if there is no parent)
     @computed get _tableData() {
-        if (this.incomingLinks.length! <= 0) return this.props.pairs;
-        var guids = StrListCast(this.props.layoutDoc.dataViz_rowGuids);
-        return this.props.pairs?.filter(pair => this.incomingLinks[0]!.dataViz_selectedRows && StrListCast(this.incomingLinks[0].dataViz_selectedRows).includes(guids[this.props.pairs.indexOf(pair)]));
+        return !this.parentViz ? this.props.records : this._tableDataIds.map(rowId => this.props.records[rowId]);
     }
 
-    @computed get incomingLinks() {
-        return LinkManager.Instance.getAllRelatedLinks(this.props.rootDoc) // out of all links
-            .filter(link => {
-                return link.link_anchor_1 == this.props.rootDoc.draggedFrom;
-            }) // get links where this chart doc is the target of the link
-            .map(link => DocCast(link.link_anchor_1)); // then return the source of the link
+    @computed get parentViz() {
+        return DocCast(this.props.rootDoc.dataViz_parentViz);
+        // return LinkManager.Instance.getAllRelatedLinks(this.props.rootDoc) // out of all links
+        //     .filter(link => link.link_anchor_1 == this.props.rootDoc.dataViz_parentViz) // get links where this chart doc is the target of the link
+        //     .map(link => DocCast(link.link_anchor_1)); // then return the source of the link
     }
 
     @computed get columns() {
-        if (!this.props.layoutDoc.dataViz_rowGuids) this.props.layoutDoc.dataViz_rowGuids = new List<string>();
-        const guids = Cast(this.props.layoutDoc.dataViz_rowGuids, listSpec('string'), null);
-        if (guids.length == 0) this.props.pairs.map(row => guids.push(Utils.GenerateGuid()));
         return this._tableData.length ? Array.from(Object.keys(this._tableData[0])).filter(header => header != '' && header != undefined) : [];
     }
 
-    // updates the 'selected' field to no longer include rows that aren't in the table
-    filterSelectedRowsDown() {
-        if (!this.props.layoutDoc.dataViz_selectedRows) this.props.layoutDoc.dataViz_selectedRows = new List<string>();
-        const selected = Cast(this.props.layoutDoc.dataViz_selectedRows, listSpec('string'), null);
-        const incomingSelected = this.incomingLinks.length ? StrListCast(this.incomingLinks[0].dataViz_selectedRows) : undefined;
-        if (incomingSelected) {
-            selected.map(guid => {
-                if (!incomingSelected.includes(guid)) selected.splice(selected.indexOf(guid), 1);
-            }); // filters through selected to remove guids that were removed in the incoming data
-        }
-    }
+    // updates the 'dataViz_selectedRows' and 'dataViz_highlightedRows' fields to no longer include rows that aren't in the table
+    filterSelectedRowsDown = () => {
+        const selected = NumListCast(this.props.layoutDoc.dataViz_selectedRows);
+        this.props.layoutDoc.dataViz_selectedRows = new List<number>(selected.filter(rowId => this._tableDataIds.includes(rowId))); // filters through selected to remove guids that were removed in the incoming data
+        const highlighted = NumListCast(this.props.layoutDoc.dataViz_highlitedRows);
+        this.props.layoutDoc.dataViz_highlitedRows = new List<number>(highlighted.filter(rowId => this._tableDataIds.includes(rowId))); // filters through highlighted to remove guids that were removed in the incoming data
+    };
 
     render() {
-        this.filterSelectedRowsDown();
         if (this._tableData.length > 0) {
             return (
-                <div className="table-container" style={{ height: this.props.height }}>
-                    <table className="table">
-                        <thead>
-                            <tr className="table-row">
-                                {this.columns
-                                    .filter(col => !col.startsWith('select'))
-                                    .map(col => {
-                                        const header = React.createRef<HTMLElement>();
-                                        return (
-                                            <th
-                                                key={this.columns.indexOf(col)}
-                                                ref={header as any}
-                                                style={{
-                                                    color: this.props.axes.slice().reverse().lastElement() === col ? 'darkgreen' : this.props.axes.lastElement() === col ? 'darkred' : undefined,
-                                                    background: this.props.axes.slice().reverse().lastElement() === col ? '#E3fbdb' : this.props.axes.lastElement() === col ? '#Fbdbdb' : undefined,
-                                                    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<string>([col, col]);
-                                                                embedding._draggedFrom = this.props.docView?.()!.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([header.current!], new DragManager.AnchorAnnoDragData(this.props.docView()!, sourceAnchorCreator, targetCreator), downX, downY, {
+                <div
+                    className="tableBox"
+                    tabIndex={0}
+                    onKeyDown={e => {
+                        if (this.props.layoutDoc && e.key === 'a' && (e.ctrlKey || e.metaKey)) {
+                            e.stopPropagation();
+                            this.props.layoutDoc.dataViz_selectedRows = new List<number>(this._tableDataIds);
+                        }
+                    }}>
+                    <div className="selectAll-buttons">
+                        <Button onClick={action(() => (this.props.layoutDoc.dataViz_selectedRows = new List<number>(this._tableDataIds)))} text="Select All" type={Type.SEC} color={'black'} />
+                        <Button onClick={action(() => (this.props.layoutDoc.dataViz_selectedRows = new List<number>()))} text="Deselect All" type={Type.SEC} color={'black'} />
+                    </div>
+                    <div
+                        className="table-container"
+                        style={{ height: this.props.height }}
+                        ref={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 }
+                            )
+                        }>
+                        <table className="table">
+                            <thead>
+                                <tr className="table-row">
+                                    {this.columns.map(col => (
+                                        <th
+                                            key={this.columns.indexOf(col)}
+                                            style={{
+                                                color: this.props.axes.slice().reverse().lastElement() === col ? 'darkgreen' : this.props.axes.lastElement() === col ? 'darkred' : undefined,
+                                                background: this.props.axes.slice().reverse().lastElement() === col ? '#E3fbdb' : this.props.axes.lastElement() === col ? '#Fbdbdb' : undefined,
+                                                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<string>([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;
@@ -117,67 +143,69 @@ export class TableBox extends React.Component<TableBoxProps> {
                                                                             // 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}
-                                            </th>
-                                        );
-                                    })}
-                            </tr>
-                        </thead>
-                        <tbody>
-                            {this._tableData?.map((p, i) => {
-                                var containsData = false;
-                                var guid = StrListCast(this.props.layoutDoc.dataViz_rowGuids)![this.props.pairs.indexOf(p)];
-                                this.columns.map(col => {
-                                    if (p[col] != '' && p[col] != null && p[col] != undefined) containsData = true;
-                                });
-                                if (containsData) {
-                                    return (
+                                                                }
+                                                            );
+                                                            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}
+                                        </th>
+                                    ))}
+                                </tr>
+                            </thead>
+                            <tbody>
+                                {this._tableDataIds
+                                    ?.map(rowId => ({ record: this.props.records[rowId], rowId }))
+                                    .map(({ record, rowId }) => (
                                         <tr
-                                            key={i}
+                                            key={rowId}
                                             className="table-row"
                                             onClick={action(e => {
-                                                // selecting a row
-                                                const selected = Cast(this.props.layoutDoc.dataViz_selectedRows, listSpec('string'), null);
-                                                if (selected.includes(guid)) selected.splice(selected.indexOf(guid), 1);
-                                                else {
-                                                    selected.push(guid);
+                                                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: StrListCast(this.props.layoutDoc.dataViz_selectedRows).includes(guid) ? 'lightgrey' : '', width: '110%' }}>
+                                            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
-                                                var 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;
+                                                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 (
                                                     <td key={this.columns.indexOf(col)} style={{ border: colSelected ? '3px solid black' : '1px solid black', fontWeight: colSelected ? 'bolder' : 'normal' }}>
-                                                        {p[col]}
+                                                        {record[col]}
                                                     </td>
                                                 );
                                             })}
                                         </tr>
-                                    );
-                                }
-                            })}
-                        </tbody>
-                    </table>
+                                    ))}
+                            </tbody>
+                        </table>
+                    </div>
                 </div>
             );
         } else