1 files changed, 20 insertions, 7 deletions
diff --git a/src/client/views/nodes/DataVizBox/components/TableBox.tsx b/src/client/views/nodes/DataVizBox/components/TableBox.tsx
index e57c9e842..fe596bc36 100644
--- a/src/client/views/nodes/DataVizBox/components/TableBox.tsx
+++ b/src/client/views/nodes/DataVizBox/components/TableBox.tsx
@@ -1,4 +1,4 @@
-import { Button, Type } from 'browndash-components';
+import { Button, Colors, Type } from 'browndash-components';
 import { IReactionDisposer, action, computed, makeObservable, observable, reaction, runInAction } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
@@ -16,6 +16,7 @@ import { DocumentView } from '../../DocumentView';
 import { DataVizView } from '../DataVizBox';
 import './Chart.scss';
 
+// eslint-disable-next-line @typescript-eslint/no-require-imports
 const { DATA_VIZ_TABLE_ROW_HEIGHT } = require('../../../global/globalCssVariables.module.scss'); // prettier-ignore
 
 interface TableBoxProps {
@@ -35,6 +36,7 @@ interface TableBoxProps {
         left: number;
     };
     docView?: () => DocumentView | undefined;
+    specHighlightedRow: number | undefined;
 }
 
 @observer
@@ -178,7 +180,6 @@ export class TableBox extends ObservableReactComponent<TableBoxProps> {
                 } else {
                     const newAxes = this._props.axes;
                     if (newAxes.includes(col)) newAxes.splice(newAxes.indexOf(col), 1);
-                    else if (newAxes.length > 2) newAxes[newAxes.length - 1] = col;
                     else newAxes.push(col);
                     this._props.selectAxes(newAxes);
                 }
@@ -410,11 +411,13 @@ export class TableBox extends ObservableReactComponent<TableBoxProps> {
                                                 color:
                                                     this._props.axes.slice().reverse().lastElement() === col
                                                         ? 'darkgreen'
-                                                        : this._props.axes.length > 2 && this._props.axes.lastElement() === col
+                                                        : this._props.axes.length > 3 && this._props.axes.lastElement() === col
                                                           ? 'darkred'
-                                                          : this._props.axes.lastElement() === col || (this._props.axes.length > 2 && this._props.axes[1] === col)
+                                                          : this._props.axes.length > 3 && this._props.axes[1] === col
                                                             ? 'darkblue'
-                                                            : undefined,
+                                                            : this._props.axes.lastElement() === col || (this._props.axes.length > 3 && this._props.axes[2] === col)
+                                                              ? 'darkcyan'
+                                                              : undefined,
                                                 background: this.settingTitle
                                                     ? 'lightgrey'
                                                     : this._props.axes.slice().reverse().lastElement() === col
@@ -423,7 +426,9 @@ export class TableBox extends ObservableReactComponent<TableBoxProps> {
                                                         ? '#Fbdbdb'
                                                         : this._props.axes.lastElement() === col || (this._props.axes.length > 2 && this._props.axes[1] === col)
                                                           ? '#c6ebf7'
-                                                          : undefined,
+                                                          : this._props.axes.lastElement() === col || (this._props.axes.length > 3 && this._props.axes[2] === col)
+                                                            ? '#c2f0f4'
+                                                            : undefined,
                                                 fontWeight: 'bolder',
                                                 border: '3px solid black',
                                             }}
@@ -442,7 +447,15 @@ export class TableBox extends ObservableReactComponent<TableBoxProps> {
                                             className={`tableBox-row ${this.columns[0]}`}
                                             onClick={e => this.tableRowClick(e, rowId)}
                                             style={{
-                                                background: NumListCast(this._props.layoutDoc.dataViz_highlitedRows).includes(rowId) ? 'lightYellow' : NumListCast(this._props.layoutDoc.dataViz_selectedRows).includes(rowId) ? 'lightgrey' : '',
+                                                background:
+                                                    rowId === this._props.specHighlightedRow
+                                                        ? 'lightblue'
+                                                        : NumListCast(this._props.layoutDoc.dataViz_highlitedRows).includes(rowId)
+                                                          ? 'lightYellow'
+                                                          : NumListCast(this._props.layoutDoc.dataViz_selectedRows).includes(rowId)
+                                                            ? 'lightgrey'
+                                                            : '',
+                                                border: rowId === this._props.specHighlightedRow ? `solid 3px ${Colors.MEDIUM_BLUE}` : '',
                                             }}>
                                             {this.columns.map(col => {
                                                 let colSelected = false;