components + links + brushed TableBox

5 files changed, 46 insertions, 13 deletions

diff --git a/src/client/views/nodes/DataVizBox/DataVizBox.scss b/src/client/views/nodes/DataVizBox/DataVizBox.scss
index 5e7230271..32c0bbfc1 100644
--- a/src/client/views/nodes/DataVizBox/DataVizBox.scss
+++ b/src/client/views/nodes/DataVizBox/DataVizBox.scss
@@ -4,7 +4,7 @@
     width: 100%;
 
     .datatype-button{
-        margin: 0;
-        border: 1px solid white;
+        display: flex;
+        flex-direction: row;
     }
 }
diff --git a/src/client/views/nodes/DataVizBox/DataVizBox.tsx b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
index 25098baf1..4ddebb833 100644
--- a/src/client/views/nodes/DataVizBox/DataVizBox.tsx
+++ b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
@@ -14,6 +14,7 @@ import { TableBox } from './components/TableBox';
 import './DataVizBox.scss';
 import { Histogram } from './components/Histogram';
 import { PieChart } from './components/PieChart';
+import { Toggle, ToggleType } from 'browndash-components';
 
 export enum DataVizView {
     TABLE = 'table',
@@ -103,7 +104,7 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         if (!this.pairs) return 'no data';
         // prettier-ignore
         switch (this.dataVizView) {
-            case DataVizView.TABLE:     return <TableBox pairs={this.pairs} axes={this.axes} docView={this.props.DocumentView} selectAxes={this.selectAxes}/>;
+            case DataVizView.TABLE:     return <TableBox pairs={this.pairs} axes={this.axes} rootDoc={this.rootDoc} docView={this.props.DocumentView} selectAxes={this.selectAxes}/>;
             case DataVizView.LINECHART: return <LineChart ref={r => (this._chartRenderer = r ?? undefined)} height={height} width={width} fieldKey={this.fieldKey} margin={margin} rootDoc={this.rootDoc} axes={this.axes} pairs={this.pairs} dataDoc={this.dataDoc} />;
             case DataVizView.HISTOGRAM: return <Histogram height={height} width={width} fieldKey={this.fieldKey} margin={margin} rootDoc={this.rootDoc} axes={this.axes} pairs={this.pairs} dataDoc={this.dataDoc} />;
             case DataVizView.PIECHART: return <PieChart height={height} width={width} fieldKey={this.fieldKey} margin={margin} rootDoc={this.rootDoc} axes={this.axes} pairs={this.pairs} dataDoc={this.dataDoc} />;
@@ -150,11 +151,24 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
                         { passive: false }
                     )
                 }>
-                {/* <button onClick={e => this.changeViewHandler(e)}>{this.dataVizView === DataVizView.TABLE ? DataVizView.LINECHART : DataVizView.TABLE}</button> */}
-                <button className={'datatype-button'} style={{background: this.layoutDoc._dataVizView == DataVizView.TABLE? 'grey': 'black'}} onClick={e => this.layoutDoc._dataVizView = DataVizView.TABLE}> TABLE </button>
-                <button className={'datatype-button'} style={{background: this.layoutDoc._dataVizView == DataVizView.LINECHART? 'grey': 'black'}} onClick={e => this.layoutDoc._dataVizView = DataVizView.LINECHART}> LINE CHART </button>
-                <button className={'datatype-button'} style={{background: this.layoutDoc._dataVizView == DataVizView.HISTOGRAM? 'grey': 'black'}} onClick={e => this.layoutDoc._dataVizView = DataVizView.HISTOGRAM}> HISTOGRAM </button>
-                <button className={'datatype-button'} style={{background: this.layoutDoc._dataVizView == DataVizView.PIECHART? 'grey': 'black'}} onClick={e => this.layoutDoc._dataVizView = DataVizView.PIECHART}> PIE CHART </button>
+                <div className={'datatype-button'}>
+                    <Toggle text={"TABLE"} toggleType={ToggleType.BUTTON} type={"secondary"} color={"black"} 
+                        onClick={e => this.layoutDoc._dataVizView = DataVizView.TABLE} 
+                        toggleStatus={this.layoutDoc._dataVizView == DataVizView.TABLE} 
+                    />
+                    <Toggle text={"LINECHART"} toggleType={ToggleType.BUTTON} type={"secondary"} color={"black"} 
+                        onClick={e => this.layoutDoc._dataVizView = DataVizView.LINECHART} 
+                        toggleStatus={this.layoutDoc._dataVizView == DataVizView.LINECHART} 
+                    />
+                    <Toggle text={"HISTOGRAM"} toggleType={ToggleType.BUTTON} type={"secondary"} color={"black"} 
+                        onClick={e => this.layoutDoc._dataVizView = DataVizView.HISTOGRAM} 
+                        toggleStatus={this.layoutDoc._dataVizView == DataVizView.HISTOGRAM} 
+                    />
+                    <Toggle text={"PIE CHART"} toggleType={ToggleType.BUTTON} type={"secondary"} color={"black"} 
+                        onClick={e => this.layoutDoc._dataVizView = DataVizView.PIECHART} 
+                        toggleStatus={this.layoutDoc._dataVizView == DataVizView.PIECHART} 
+                    />
+                </div>
                 {this.selectView}
             </div>
         );
diff --git a/src/client/views/nodes/DataVizBox/components/Histogram.tsx b/src/client/views/nodes/DataVizBox/components/Histogram.tsx
index b8be9bd13..01e6709fa 100644
--- a/src/client/views/nodes/DataVizBox/components/Histogram.tsx
+++ b/src/client/views/nodes/DataVizBox/components/Histogram.tsx
@@ -65,7 +65,8 @@ export class Histogram extends React.Component<HistogramProps> {
     }
     @computed get incomingLinks() {
         return LinkManager.Instance.getAllRelatedLinks(this.props.rootDoc) // out of all links
-            .filter(link => link.link_anchor_1 !== this.props.rootDoc) // get links where this chart doc is the target of the link
+            .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 incomingSelected() {
diff --git a/src/client/views/nodes/DataVizBox/components/PieChart.tsx b/src/client/views/nodes/DataVizBox/components/PieChart.tsx
index 6241e6221..05a2f1588 100644
--- a/src/client/views/nodes/DataVizBox/components/PieChart.tsx
+++ b/src/client/views/nodes/DataVizBox/components/PieChart.tsx
@@ -65,7 +65,8 @@ export class PieChart extends React.Component<PieChartProps> {
     }
     @computed get incomingLinks() {
         return LinkManager.Instance.getAllRelatedLinks(this.props.rootDoc) // out of all links
-            .filter(link => link.link_anchor_1 !== this.props.rootDoc) // get links where this chart doc is the target of the link
+            .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 incomingSelected() {
@@ -359,7 +360,6 @@ export class PieChart extends React.Component<PieChartProps> {
     };
 
     render() {
-
         var selected: string;
         if (this._currSelected){
             selected = '{ ';
diff --git a/src/client/views/nodes/DataVizBox/components/TableBox.tsx b/src/client/views/nodes/DataVizBox/components/TableBox.tsx
index ca888e13f..500e7b639 100644
--- a/src/client/views/nodes/DataVizBox/components/TableBox.tsx
+++ b/src/client/views/nodes/DataVizBox/components/TableBox.tsx
@@ -8,8 +8,11 @@ import { emptyFunction, returnFalse, setupMoveUpEvents, Utils } from '../../../.
 import { DragManager } from '../../../../util/DragManager';
 import { DocumentView } from '../../DocumentView';
 import { DataVizView } from '../DataVizBox';
+import { LinkManager } from '../../../../util/LinkManager';
+import { DocCast } from '../../../../../fields/Types';
 
 interface TableBoxProps {
+    rootDoc: Doc;
     pairs: { [key: string]: any }[];
     selectAxes: (axes: string[]) => void;
     axes: string[];
@@ -18,9 +21,24 @@ interface TableBoxProps {
 
 @observer
 export class TableBox extends React.Component<TableBoxProps> {
+
+    @computed get _tableData() {
+        if (this.incomingLinks.length! <= 0) return this.props.pairs;
+        return this.props.pairs?.filter(pair => (Array.from(Object.keys(pair)).some(key => pair[key] && key.startsWith('select'))))
+    }
+
+    @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 columns() {
-        return this.props.pairs.length ? Array.from(Object.keys(this.props.pairs[0])) : [];
+        // return this.props.pairs.length ? Array.from(Object.keys(this.props.pairs[0])) : [];
+        return this._tableData.length ? Array.from(Object.keys(this._tableData[0])) : [];
     }
+
     render() {
         return (
             <div className="table-container">
@@ -91,7 +109,7 @@ export class TableBox extends React.Component<TableBoxProps> {
                         </tr>
                     </thead>
                     <tbody>
-                        {this.props.pairs?.map((p, i) => {
+                        {this._tableData?.map((p, i) => {
                             return (
                                 <tr key={i} className="table-row" onClick={action(e => (p['select' + this.props.docView?.()?.rootDoc![Id]] = !p['select' + this.props.docView?.()?.rootDoc![Id]]))}>
                                     {this.columns.map(col => (