table fixes (selected by guid not extra row + ui changes)

1 files changed, 8 insertions, 48 deletions

diff --git a/src/client/views/nodes/DataVizBox/components/Histogram.tsx b/src/client/views/nodes/DataVizBox/components/Histogram.tsx
index 89dcf87db..efe17297b 100644
--- a/src/client/views/nodes/DataVizBox/components/Histogram.tsx
+++ b/src/client/views/nodes/DataVizBox/components/Histogram.tsx
@@ -1,15 +1,13 @@
 import { observer } from "mobx-react";
-import { Doc, DocListCast, FieldResult } from "../../../../../fields/Doc";
+import { Doc, DocListCast, StrListCast } from "../../../../../fields/Doc";
 import * as React from 'react';
 import * as d3 from 'd3';
 import { IReactionDisposer, action, computed, observable, reaction } from "mobx";
 import { LinkManager } from "../../../../util/LinkManager";
-import { Cast, DocCast, StrCast} from "../../../../../fields/Types";
-import { DataPoint, SelectedDataPoint } from "./LineChart";
+import { DocCast, StrCast} from "../../../../../fields/Types";
 import { DocumentManager } from "../../../../util/DocumentManager";
 import { Id } from "../../../../../fields/FieldSymbols";
 import { DataVizBox } from "../DataVizBox";
-import { listSpec } from "../../../../../fields/Schema";
 import { PinProps, PresBox } from "../../trails";
 import { Docs } from "../../../../documents/Documents";
 import { List } from "../../../../../fields/List";
@@ -54,7 +52,7 @@ export class Histogram extends React.Component<HistogramProps> {
             var ax0 = this.props.axes[0];
             if (/\d/.test(this.props.pairs[0][ax0])){ this.numericalXData = true }
             return this.props.pairs
-                ?.filter(pair => (!this.incomingLinks.length ? true : Array.from(Object.keys(pair)).some(key => pair[key] && key.startsWith('select'))))
+                ?.filter(pair => (!this.incomingLinks.length ? true : this.incomingLinks[0]!.selected && StrListCast(this.incomingLinks[0].selected).includes(pair.guid)))
                 .map(pair => ({ [ax0]: (pair[this.props.axes[0]])}))
         };
 
@@ -63,13 +61,8 @@ export class Histogram extends React.Component<HistogramProps> {
         if (/\d/.test(this.props.pairs[0][ax0])) { this.numericalXData = true;}
         if (/\d/.test(this.props.pairs[0][ax1]) && this.props.pairs.length < this.maxBins) { this.numericalYData = true;}
         return this.props.pairs
-            ?.filter(pair => (!this.incomingLinks.length ? true : Array.from(Object.keys(pair)).some(key => pair[key] && key.startsWith('select'))))
+            ?.filter(pair => (!this.incomingLinks.length ? true : this.incomingLinks[0]!.selected && StrListCast(this.incomingLinks[0].selected).includes(pair.guid)))
             .map(pair => ({ [ax0]: (pair[this.props.axes[0]]), [ax1]: (pair[this.props.axes[1]]) }))
-            // .sort((a, b) => (a[ax0] < b[ax0] ? -1 : 1));
-        return this.props.pairs
-            ?.filter(pair => (!this.incomingLinks.length ? true : Array.from(Object.keys(pair)).some(key => pair[key] && key.startsWith('select'))))
-            .map(pair => ({ x: Number(pair[this.props.axes[0]]), y: Number(pair[this.props.axes[1]]) }))
-            .sort((a, b) => (a.x < b.x ? -1 : 1));
     }
     @computed get defaultGraphTitle(){
         var ax0 = this.props.axes[0];
@@ -181,27 +174,16 @@ export class Histogram extends React.Component<HistogramProps> {
     }
 
     @action
-    restoreView = (data: Doc) => {
-        const coords = Cast(data.presDataVizSelection, listSpec('number'), null);
-        if (coords?.length > 1 && (this._currSelected?.x !== coords[0] || this._currSelected?.y !== coords[1])) {
-            this.setCurrSelected(coords[0], coords[1]);
-            return true;
-        }
-        if (this._currSelected) {
-            this.setCurrSelected();
-            return true;
-        }
-        return false;
-    };
+    restoreView = (data: Doc) => {};
 
     // create a document anchor that stores whatever is needed to reconstruct the viewing state (selection,zoom,etc)
     getAnchor = (pinProps?: PinProps) => {
         const anchor = Docs.Create.ConfigDocument({
             //
-            title: 'histogram doc selection' + this._currSelected?.x,
+            title: 'histogram doc selection' + this._currSelected,
         });
         PresBox.pinDocView(anchor, { pinDocLayout: pinProps?.pinDocLayout, pinData: pinProps?.pinData }, this.props.dataDoc);
-        anchor.presDataVizSelection = this._currSelected ? new List<number>([this._currSelected.x, this._currSelected.y]) : undefined;
+        anchor.presDataVizSelection = this._currSelected ? new List<number>([this._currSelected]) : undefined;
         return anchor;
     };
 
@@ -213,28 +195,6 @@ export class Histogram extends React.Component<HistogramProps> {
         return this.props.width - this.props.margin.left - this.props.margin.right;
     }
 
-    setupTooltip() {
-        return d3
-            .select(this._histogramRef.current)
-            .append('div')
-            .attr('class', 'tooltip')
-            .style('opacity', 0)
-            .style('background', '#fff')
-            .style('border', '1px solid #ccc')
-            .style('padding', '5px')
-            .style('position', 'absolute')
-            .style('font-size', '12px');
-    }
-
-    // TODO: nda - use this everyewhere we update currSelected?
-    @action
-    setCurrSelected(x?: number, y?: number) {
-        // TODO: nda - get rid of svg element in the list?
-        this._currSelected = x !== undefined && y !== undefined ? { x, y } : undefined;
-        this.props.pairs.forEach(pair => pair[this.props.axes[0]] === x && pair[this.props.axes[1]] === y && (pair.selected = true));
-        this.props.pairs.forEach(pair => (pair.selected = pair[this.props.axes[0]] === x && pair[this.props.axes[1]] === y ? true : undefined));
-    }
-
     data = (dataSet: any) => {
         var validData = dataSet.filter((d: { [x: string]: unknown; }) => {
             var valid = true;
@@ -364,7 +324,7 @@ export class Histogram extends React.Component<HistogramProps> {
             const selected = svg.selectAll('.histogram-bar').filter((d: any) => {
                 barCounter++;
                 if ((barCounter*eachRectWidth ) <= pointerX && pointerX <= ((barCounter+1)*eachRectWidth)){
-                    var showSelected = this.numericalYData? this.props.pairs.filter((data: { [x: string]: any; }) => data[xAxisTitle].replace(/\$/g, '').replace(/\%/g, '').replace(/\</g, '')==d[0])[0] 
+                    var showSelected = this.numericalYData? this._histogramData.filter((data: { [x: string]: any; }) => data[xAxisTitle].replace(/\$/g, '').replace(/\%/g, '').replace(/\</g, '')==d[0])[0] 
                     : histDataSet.filter((data: { [x: string]: any; }) => data[xAxisTitle].replace(/\$/g, '').replace(/\%/g, '').replace(/\</g, '')==d[0])[0];
                     if (this.numericalXData){
                         if (d[0] && d[1] && d[0]!=d[1]){