added selection ui for choosing linechart axes.

1 files changed, 37 insertions, 6 deletions

diff --git a/src/client/views/nodes/DataVizBox/components/TableBox.tsx b/src/client/views/nodes/DataVizBox/components/TableBox.tsx
index 28114036f..adefe90cd 100644
--- a/src/client/views/nodes/DataVizBox/components/TableBox.tsx
+++ b/src/client/views/nodes/DataVizBox/components/TableBox.tsx
@@ -1,28 +1,59 @@
-import { action, computed, observable } from 'mobx';
+import { action, computed } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
+import { emptyFunction, returnFalse, setupMoveUpEvents } from '../../../../../Utils';
 
 interface TableBoxProps {
-    pairs: { x: number; y: number }[];
+    pairs: { [key: string]: any }[];
+    selectAxes: (axes: string[]) => void;
+    axes: string[];
 }
 
+@observer
 export class TableBox extends React.Component<TableBoxProps> {
+    @computed get columns() {
+        return this.props.pairs.length ? Array.from(Object.keys(this.props.pairs[0])) : [];
+    }
     render() {
         return (
             <div className="table-container">
                 <table className="table">
                     <thead>
                         <tr className="table-row">
-                            <th>x</th>
-                            <th>y</th>
+                            {this.columns.map(col => (
+                                <th
+                                    style={{ color: this.props.axes.slice().reverse().lastElement() === col ? 'green' : this.props.axes.lastElement() === col ? 'red' : undefined, fontWeight: this.props.axes.includes(col) ? 'bolder' : 'normal' }}
+                                    onPointerDown={e =>
+                                        setupMoveUpEvents(
+                                            {},
+                                            e,
+                                            returnFalse,
+                                            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[0] = col;
+                                                }
+                                                this.props.selectAxes(newAxes);
+                                            })
+                                        )
+                                    }>
+                                    {col}
+                                </th>
+                            ))}
                         </tr>
                     </thead>
                     <tbody>
                         {this.props.pairs?.map(p => {
                             return (
                                 <tr className="table-row">
-                                    <td>{p.x}</td>
-                                    <td>{p.y}</td>
+                                    {this.columns.map(col => (
+                                        <td>{p[col]}</td>
+                                    ))}
                                 </tr>
                             );
                         })}