select title col ui

2 files changed, 26 insertions, 14 deletions

diff --git a/src/client/views/nodes/DataVizBox/components/Chart.scss b/src/client/views/nodes/DataVizBox/components/Chart.scss
index 41ce637ac..15d289abf 100644
--- a/src/client/views/nodes/DataVizBox/components/Chart.scss
+++ b/src/client/views/nodes/DataVizBox/components/Chart.scss
@@ -120,11 +120,18 @@
         }
     }
 }
-.selectAll-buttons {
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-end;
+.select-buttons {
     margin-top: 5px;
-    margin-right: 10px;
-    float: right;
+    margin-left: 25px;
+    display: inline-block;
+    .selectTitle {
+        display: inline-block;
+
+    }
+    .selectAll {
+        display: flex;
+        flex-direction: row;
+        float: right;
+        margin-right: 10px;
+    }
 }
diff --git a/src/client/views/nodes/DataVizBox/components/TableBox.tsx b/src/client/views/nodes/DataVizBox/components/TableBox.tsx
index 1b239b5e5..c9491da59 100644
--- a/src/client/views/nodes/DataVizBox/components/TableBox.tsx
+++ b/src/client/views/nodes/DataVizBox/components/TableBox.tsx
@@ -36,6 +36,7 @@ interface TableBoxProps {
 export class TableBox extends ObservableReactComponent<TableBoxProps> {
     _inputChangedDisposer?: IReactionDisposer;
     _containerRef: HTMLDivElement | null = null;
+    @observable settingTitle: boolean = false;
 
     @observable _scrollTop = -1;
     @observable _tableHeight = 0;
@@ -155,7 +156,8 @@ export class TableBox extends ObservableReactComponent<TableBoxProps> {
             },
             emptyFunction,
             action(e => {
-                if (e.shiftKey){
+                if (e.shiftKey || this.settingTitle){
+                    if (this.settingTitle) this.settingTitle = false;
                     if (this._props.titleCol == col) this._props.titleCol = "";
                     else this._props.titleCol = col;
                     this._props.selectTitleCol(this._props.titleCol);
@@ -184,9 +186,14 @@ export class TableBox extends ObservableReactComponent<TableBoxProps> {
                             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 className="select-buttons">
+                        <div className="selectTitle">
+                            <Button onClick={action(() => (this.settingTitle = !this.settingTitle))} text="Select Title Column" type={Type.SEC} color={'black'} />
+                            </div>
+                        <div className="selectAll">
+                            <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>
                     <div
                         className={`tableBox-container ${this.columns[0]}`}
@@ -223,12 +230,10 @@ 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) ? 'darkred' 
                                                     : (this._props.axes.lastElement()===col || (this._props.axes.length>2 && this._props.axes[1]==col))? 'darkblue' : undefined,
-                                                background: this._props.axes.slice().reverse().lastElement() === col ? '#E3fbdb' 
+                                                background: this.settingTitle? 'lightgrey'
+                                                    : this._props.axes.slice().reverse().lastElement() === col ? '#E3fbdb' 
                                                     : (this._props.axes.length>2 && this._props.axes.lastElement() === col) ? '#Fbdbdb' 
                                                     : (this._props.axes.lastElement()===col || (this._props.axes.length>2 && this._props.axes[1]==col))? '#c6ebf7' : undefined,
-                                                // blue: #ADD8E6
-                                                // green: #E3fbdb
-                                                // red: #Fbdbdb
                                                 fontWeight: 'bolder',
                                                 border: '3px solid black',
                                             }}