added cmdKey clicking on table rows to 'highlight' them by setting dataViz_highlitedRows, and changed lineChart's to read dataViz_highlitedRows to highlight data points

1 files changed, 16 insertions, 5 deletions

diff --git a/src/client/views/nodes/DataVizBox/components/TableBox.tsx b/src/client/views/nodes/DataVizBox/components/TableBox.tsx
index 7bca08c15..9e2ce1c80 100644
--- a/src/client/views/nodes/DataVizBox/components/TableBox.tsx
+++ b/src/client/views/nodes/DataVizBox/components/TableBox.tsx
@@ -59,10 +59,12 @@ export class TableBox extends React.Component<TableBoxProps> {
         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
+    // 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 selected to remove guids that were removed in the incoming data
     };
 
     render() {
@@ -152,12 +154,21 @@ export class TableBox extends React.Component<TableBoxProps> {
                                         className="table-row"
                                         onClick={action(e => {
                                             // selecting a row
-                                            const selected = Cast(this.props.layoutDoc.dataViz_selectedRows, listSpec('number'), null);
-                                            if (selected?.includes(rowId)) selected.splice(selected.indexOf(rowId), 1);
-                                            else selected?.push(rowId);
+                                            if (e.metaKey) {
+                                                const highlited = Cast(this.props.layoutDoc.dataViz_highlitedRows, listSpec('number'), null);
+                                                if (highlited?.includes(rowId)) highlited.splice(highlited.indexOf(rowId), 1);
+                                                else highlited?.push(rowId);
+                                            } else {
+                                                const selected = Cast(this.props.layoutDoc.dataViz_selectedRows, listSpec('number'), null);
+                                                if (selected?.includes(rowId)) selected.splice(selected.indexOf(rowId), 1);
+                                                else selected?.push(rowId);
+                                            }
                                             e.stopPropagation();
                                         })}
-                                        style={{ background: NumListCast(this.props.layoutDoc.dataViz_selectedRows).includes(rowId) ? '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
                                             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;