From a5294e6ba7fcf82eb3d22c0c187ce351ee698ce5 Mon Sep 17 00:00:00 2001
From: srichman333 <sarah_n_richman@brown.edu>
Date: Thu, 6 Jul 2023 14:19:55 -0400
Subject: basic histogram

---
 src/client/views/nodes/DataVizBox/DataVizBox.tsx   |   8 +-
 .../nodes/DataVizBox/components/Histogram.tsx      | 326 +++++++++++++++++++++
 .../nodes/DataVizBox/components/LineChart.tsx      |   4 +-
 3 files changed, 336 insertions(+), 2 deletions(-)
 create mode 100644 src/client/views/nodes/DataVizBox/components/Histogram.tsx

diff --git a/src/client/views/nodes/DataVizBox/DataVizBox.tsx b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
index 0fe24fe8d..38edf2dd9 100644
--- a/src/client/views/nodes/DataVizBox/DataVizBox.tsx
+++ b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
@@ -12,10 +12,12 @@ import { PinProps } from '../trails';
 import { LineChart } from './components/LineChart';
 import { TableBox } from './components/TableBox';
 import './DataVizBox.scss';
+import { Histogram } from './components/Histogram';
 
 export enum DataVizView {
     TABLE = 'table',
     LINECHART = 'lineChart',
+    HISTOGRAM = 'histogram'
 }
 
 @observer
@@ -100,6 +102,7 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         switch (this.dataVizView) {
             case DataVizView.TABLE:     return <TableBox pairs={this.pairs} axes={this.axes} 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} />;
         }
     }
     @computed get dataUrl() {
@@ -142,7 +145,10 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
                         { passive: false }
                     )
                 }>
-                <button onClick={e => this.changeViewHandler(e)}>{this.dataVizView === DataVizView.TABLE ? DataVizView.LINECHART : DataVizView.TABLE}</button>
+                {/* <button onClick={e => this.changeViewHandler(e)}>{this.dataVizView === DataVizView.TABLE ? DataVizView.LINECHART : DataVizView.TABLE}</button> */}
+                <button onClick={e => this.layoutDoc._dataVizView = DataVizView.TABLE}> TABLE </button>
+                <button onClick={e => this.layoutDoc._dataVizView = DataVizView.LINECHART}> LINE CHART </button>
+                <button onClick={e => this.layoutDoc._dataVizView = DataVizView.HISTOGRAM}> HISTOGRAM </button>
                 {this.selectView}
             </div>
         );
diff --git a/src/client/views/nodes/DataVizBox/components/Histogram.tsx b/src/client/views/nodes/DataVizBox/components/Histogram.tsx
new file mode 100644
index 000000000..cb0b8cd9a
--- /dev/null
+++ b/src/client/views/nodes/DataVizBox/components/Histogram.tsx
@@ -0,0 +1,326 @@
+import { observer } from "mobx-react";
+import { Doc, DocListCast } 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 { useMemo } from "react";
+import { DataPoint, SelectedDataPoint } from "./LineChart";
+import { createLineGenerator, drawLine, minMaxRange, scaleCreatorNumerical, xAxisCreator, xGrid, yAxisCreator, yGrid } from "../utils/D3Utils";
+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";
+import './Chart.scss';
+import { isNaN } from "lodash";
+
+export interface HistogramProps {
+    rootDoc: Doc;
+    axes: string[];
+    pairs: { [key: string]: any }[];
+    width: number;
+    height: number;
+    dataDoc: Doc;
+    fieldKey: string;
+    margin: {
+        top: number;
+        right: number;
+        bottom: number;
+        left: number;
+    };
+}
+
+@observer
+export class Histogram extends React.Component<HistogramProps> {
+
+    private _disposers: { [key: string]: IReactionDisposer } = {};
+    private _histogramRef: React.RefObject<HTMLDivElement> = React.createRef();
+    private _histogramSvg: d3.Selection<SVGGElement, unknown, null, undefined> | undefined;
+    @observable _currSelected: SelectedDataPoint | undefined = undefined;
+    // TODO: nda - some sort of mapping that keeps track of the annotated points so we can easily remove when annotations list updates
+
+    @computed get _histogramData() {
+        if (this.props.axes.length < 1) return [];
+        if (this.props.axes.length < 2) {
+            var ax0 = this.props.axes[0];
+            return this.props.pairs
+                ?.filter(pair => (!this.incomingLinks.length ? true : Array.from(Object.keys(pair)).some(key => pair[key] && key.startsWith('select'))))
+                .map(pair => ({ [ax0]: (pair[this.props.axes[0]])}))
+        };
+        var ax0 = this.props.axes[0];
+        var ax1 = this.props.axes[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 => ({ [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 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
+            .map(link => DocCast(link.link_anchor_1)); // then return the source of the link
+    }
+    @computed get incomingSelected() {
+        // return selected x and y axes
+        // otherwise, use the selection of whatever is linked to us
+        return this.incomingLinks // all links that are pointing to this node
+            .map(anchor => DocumentManager.Instance.getFirstDocumentView(anchor)?.ComponentView as DataVizBox) // get their data viz boxes
+            .filter(dvb => dvb)
+            .map(dvb => dvb.pairs?.filter((pair: { [x: string]: any; }) => pair['select' + dvb.rootDoc[Id]])) // get all the datapoints they have selected field set by incoming anchor
+            .lastElement();
+    }
+    componentWillUnmount() {
+        Array.from(Object.keys(this._disposers)).forEach(key => this._disposers[key]());
+    }
+    componentDidMount = () => {
+        this._disposers.chartData = reaction(
+            () => ({ dataSet: this._histogramData, w: this.width, h: this.height }),
+            ({ dataSet, w, h }) => {
+                if (dataSet) {
+                    this.drawChart(dataSet, w, h);
+
+                    // redraw annotations when the chart data has changed, or the local or inherited selection has changed
+                    this.clearAnnotations();
+                    this._currSelected && this.drawAnnotations(Number(this._currSelected.x), Number(this._currSelected.y), true);
+                    this.incomingSelected?.forEach((pair: any) => this.drawAnnotations(Number(pair[this.props.axes[0]]), Number(pair[this.props.axes[1]])));
+                }
+            },
+            { fireImmediately: true }
+        );
+        this._disposers.annos = reaction(
+            () => DocListCast(this.props.dataDoc[this.props.fieldKey + '_annotations']),
+            annotations => {
+                // modify how d3 renders so that anything in this annotations list would be potentially highlighted in some way
+                // could be blue colored to make it look like anchor
+                // this.drawAnnotations()
+                // loop through annotations and draw them
+                annotations.forEach(a => this.drawAnnotations(Number(a.x), Number(a.y)));
+                // this.drawAnnotations(annotations.x, annotations.y);
+            },
+            { fireImmediately: true }
+        );
+        this._disposers.highlights = reaction(
+            () => ({
+                selected: this._currSelected,
+                incomingSelected: this.incomingSelected,
+            }),
+            ({ selected, incomingSelected }) => {
+                // redraw annotations when the chart data has changed, or the local or inherited selection has changed
+                this.clearAnnotations();
+                selected && this.drawAnnotations(Number(selected.x), Number(selected.y), true);
+                incomingSelected?.forEach((pair: any) => this.drawAnnotations(Number(pair[this.props.axes[0]]), Number(pair[this.props.axes[1]])));
+            },
+            { fireImmediately: true }
+        );
+    };
+
+    // anything that doesn't need to be recalculated should just be stored as drawCharts (i.e. computed values) and drawChart is gonna iterate over these observables and generate svgs based on that
+
+    clearAnnotations = () => {
+        const elements = document.querySelectorAll('.datapoint');
+        for (let i = 0; i < elements.length; i++) {
+            const element = elements[i];
+            element.classList.remove('brushed');
+            element.classList.remove('selected');
+        }
+    };
+    // gets called whenever the "data_annotations" fields gets updated
+    drawAnnotations = (dataX: number, dataY: number, selected?: boolean) => {
+        // TODO: nda - can optimize this by having some sort of mapping of the x and y values to the individual circle elements
+        // loop through all html elements with class .circle-d1 and find the one that has "data-x" and "data-y" attributes that match the dataX and dataY
+        // if it exists, then highlight it
+        // if it doesn't exist, then remove the highlight
+        const elements = document.querySelectorAll('.datapoint');
+        for (let i = 0; i < elements.length; i++) {
+            const element = elements[i];
+            const x = element.getAttribute('data-x');
+            const y = element.getAttribute('data-y');
+            if (x === dataX.toString() && y === dataY.toString()) {
+                element.classList.add(selected ? 'selected' : 'brushed');
+            }
+            // TODO: nda - this remove highlight code should go where we remove the links
+            // } else {
+            // }
+        }
+    };
+
+    removeAnnotations(dataX: number, dataY: number) {
+        // loop through and remove any annotations that no longer exist
+    }
+
+    @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;
+    };
+
+    // 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: 'line doc selection' + this._currSelected?.x,
+        });
+        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;
+        return anchor;
+    };
+
+    @computed get height() {
+        return this.props.height - this.props.margin.top - this.props.margin.bottom;
+    }
+
+    @computed get width() {
+        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));
+    }
+
+    drawDataPoints(data: DataPoint[], idx: number, xScale: d3.ScaleLinear<number, number, never>, yScale: d3.ScaleLinear<number, number, never>) {
+        if (this._histogramSvg) {
+            const circleClass = '.circle-' + idx;
+            this._histogramSvg
+                .selectAll(circleClass)
+                .data(data)
+                .join('circle') // enter append
+                .attr('class', `${circleClass} datapoint`)
+                .attr('r', '3') // radius
+                .attr('cx', d => xScale(d.x))
+                .attr('cy', d => yScale(d.y))
+                .attr('data-x', d => d.x)
+                .attr('data-y', d => d.y);
+        }
+    }
+
+    drawChart = (dataSet: any, width: number, height: number) => {
+
+        var validData = dataSet.filter((d: { [x: string]: unknown; }) => {
+            var valid = true;
+            Object.keys(dataSet[0]).map(key => {
+                if (!d[key] || Number.isNaN(d[key])) valid = false;
+            })
+            return valid;
+        })
+        var field = Object.keys(dataSet[0])[0]
+        const data = validData.map((d: { [x: string]: any; }) => {
+            if (+d[field]) {return +d[field] }
+            return d[field]
+        })
+
+        let uniqueArr = [...new Set(data)]
+        var numBins = uniqueArr.length
+        if (+d3.max(data)!) numBins = +d3.max(data)!
+        // var numBins = (+d3.max(data)!)? +d3.max(data)!  : 3;
+
+        const svg = d3.select(this._histogramRef.current)
+            .append("svg")
+                .attr("width", width + this.props.margin.right + this.props.margin.left)
+                .attr("height", height + this.props.margin.top + this.props.margin.bottom)
+            .append("g")
+                .attr("transform",
+                      "translate(" + this.props.margin.left + "," + this.props.margin.top + ")");
+
+        var x = d3.scaleLinear()
+            .domain([0, numBins])
+            .range([0, width]);
+        var xAxis = d3.axisBottom(x)
+            .ticks(numBins)
+        var translateXAxis = 0;
+
+        var histogram = d3.histogram()
+            .value(function(d) {return d})
+            .domain([0, numBins])
+            .thresholds(x.ticks(numBins))
+        var bins = histogram(data)
+        if (!+d3.max(data)!) { // if the data is strings rather than numbers
+            uniqueArr.sort()
+            for (let i=0; i<data.length; i++){
+                var index = 0
+                for (let j=0; j<uniqueArr.length; j++){
+                    if (uniqueArr[j] == data[i]){
+                        index = j;
+                    }
+                }
+                bins[index].push(data[i])
+            }
+            bins.forEach(d => d.x0 = d.x0!+1)
+            xAxis = d3.axisBottom(x)
+                .ticks(numBins)
+                .tickValues([0, 1, 2, 3, 4])
+                .tickFormat( i => uniqueArr[i])
+                .tickPadding(10)
+            translateXAxis = (width/numBins) / 2;
+        }
+
+        var y = d3.scaleLinear()
+            .range([height, 0]);
+            y.domain([0, d3.max(bins, function(d) { return d.length; })!]);
+        var yAxis = d3.axisLeft(y)
+            .ticks(d3.max(bins, function(d) { return d.length; })!)
+        svg.append("g")
+            .call(yAxis);
+        svg.append("g")
+            .attr("transform", "translate(" + translateXAxis + ", " + height + ")")
+            .call(xAxis)
+
+        d3.format('.0f')
+
+        svg.selectAll("rect")
+            .data(bins)
+            .enter()
+            .append("rect")
+              .attr("x", 1)
+              .attr("transform", function(d) { return "translate(" + x(d.x0! - 1) + "," + y(d.length) + ")"; })
+            //   .attr("width", function(d) { return x(d.x1!) - x(d.x0! )  ; })
+              .attr("width", width/(numBins))
+              .attr("height", function(d) { return height - y(d.length); })
+              .attr("style", "outline: thin solid black;")
+              .style("fill", "#69b3a2")
+    };
+
+    render() {
+        
+        return (
+            this.props.axes.length >= 1 ? (
+            <div ref={this._histogramRef} className="chart-container">
+                <span> {`Selected: ${Object.keys(this._histogramData[0])[0]}`}</span>
+            </div>
+            ) : <span className="chart-container"> {'first use table view to select an axis to plot'}</span>
+        );
+    }
+
+}
\ No newline at end of file
diff --git a/src/client/views/nodes/DataVizBox/components/LineChart.tsx b/src/client/views/nodes/DataVizBox/components/LineChart.tsx
index 6b564b0c9..289cecb6b 100644
--- a/src/client/views/nodes/DataVizBox/components/LineChart.tsx
+++ b/src/client/views/nodes/DataVizBox/components/LineChart.tsx
@@ -20,7 +20,7 @@ export interface DataPoint {
     x: number;
     y: number;
 }
-interface SelectedDataPoint extends DataPoint {
+export interface SelectedDataPoint extends DataPoint {
     elem?: d3.Selection<d3.BaseType, unknown, SVGGElement, unknown>;
 }
 export interface LineChartProps {
@@ -60,6 +60,8 @@ export class LineChart extends React.Component<LineChartProps> {
             .map(link => DocCast(link.link_anchor_1)); // then return the source of the link
     }
     @computed get incomingSelected() {
+        // return selected x and y axes
+        // otherwise, use the selection of whatever is linked to us
         return this.incomingLinks // all links that are pointing to this node
             .map(anchor => DocumentManager.Instance.getFirstDocumentView(anchor)?.ComponentView as DataVizBox) // get their data viz boxes
             .filter(dvb => dvb)
-- 
cgit v1.2.3-70-g09d2


From 9418db69bad9e6cc862ccccb95e04d9a9430c283 Mon Sep 17 00:00:00 2001
From: srichman333 <sarah_n_richman@brown.edu>
Date: Sun, 9 Jul 2023 12:28:51 -0400
Subject: chart axis labels

---
 src/client/views/nodes/DataVizBox/components/Chart.scss   |  5 +++++
 .../views/nodes/DataVizBox/components/Histogram.tsx       | 15 +++++++++++++--
 .../views/nodes/DataVizBox/components/LineChart.tsx       | 15 +++++++++++++++
 3 files changed, 33 insertions(+), 2 deletions(-)

diff --git a/src/client/views/nodes/DataVizBox/components/Chart.scss b/src/client/views/nodes/DataVizBox/components/Chart.scss
index d4f7bfb32..05bb1655d 100644
--- a/src/client/views/nodes/DataVizBox/components/Chart.scss
+++ b/src/client/views/nodes/DataVizBox/components/Chart.scss
@@ -3,6 +3,11 @@
     flex-direction: column;
     align-items: center;
     cursor: default;
+    margin-top: 10px;
+
+    .graph{
+        overflow: visible;
+    }
 
     .tooltip {
         // make the height width bigger
diff --git a/src/client/views/nodes/DataVizBox/components/Histogram.tsx b/src/client/views/nodes/DataVizBox/components/Histogram.tsx
index cb0b8cd9a..1da803076 100644
--- a/src/client/views/nodes/DataVizBox/components/Histogram.tsx
+++ b/src/client/views/nodes/DataVizBox/components/Histogram.tsx
@@ -244,10 +244,10 @@ export class Histogram extends React.Component<HistogramProps> {
         let uniqueArr = [...new Set(data)]
         var numBins = uniqueArr.length
         if (+d3.max(data)!) numBins = +d3.max(data)!
-        // var numBins = (+d3.max(data)!)? +d3.max(data)!  : 3;
 
         const svg = d3.select(this._histogramRef.current)
             .append("svg")
+                .attr("class", "graph")
                 .attr("width", width + this.props.margin.right + this.props.margin.left)
                 .attr("height", height + this.props.margin.top + this.props.margin.bottom)
             .append("g")
@@ -297,6 +297,18 @@ export class Histogram extends React.Component<HistogramProps> {
             .attr("transform", "translate(" + translateXAxis + ", " + height + ")")
             .call(xAxis)
 
+        // axis titles
+        svg.append("text")
+            .attr("transform", "translate(" + (width/2) + " ," + (height+40) + ")")
+            .style("text-anchor", "middle")
+            .text(field);
+        svg.append("text")
+            .attr("transform", "rotate(-90)")
+            .attr("x", -(height/2))
+            .attr("y", -20)
+            .style("text-anchor", "middle")
+            .text('frequency');
+
         d3.format('.0f')
 
         svg.selectAll("rect")
@@ -305,7 +317,6 @@ export class Histogram extends React.Component<HistogramProps> {
             .append("rect")
               .attr("x", 1)
               .attr("transform", function(d) { return "translate(" + x(d.x0! - 1) + "," + y(d.length) + ")"; })
-            //   .attr("width", function(d) { return x(d.x1!) - x(d.x0! )  ; })
               .attr("width", width/(numBins))
               .attr("height", function(d) { return height - y(d.length); })
               .attr("style", "outline: thin solid black;")
diff --git a/src/client/views/nodes/DataVizBox/components/LineChart.tsx b/src/client/views/nodes/DataVizBox/components/LineChart.tsx
index 289cecb6b..b1a759c1f 100644
--- a/src/client/views/nodes/DataVizBox/components/LineChart.tsx
+++ b/src/client/views/nodes/DataVizBox/components/LineChart.tsx
@@ -240,6 +240,7 @@ export class LineChart extends React.Component<LineChartProps> {
         const svg = (this._lineChartSvg = d3
             .select(this._lineChartRef.current)
             .append('svg')
+            .attr("class", "graph")
             .attr('width', `${width + margin.left + margin.right}`)
             .attr('height', `${height + margin.top + margin.bottom}`)
             .append('g')
@@ -295,6 +296,20 @@ export class LineChart extends React.Component<LineChartProps> {
             .on('mouseout', () => tooltip.transition().duration(300).style('opacity', 0))
             .on('mousemove', mousemove)
             .on('click', onPointClick);
+
+        // axis titles
+        svg.append("text")
+            .attr("transform", "translate(" + (width/2) + " ," + (height+40) + ")")
+            .style("text-anchor", "middle")
+            .text(this.props.axes[0]);
+        svg.append("text")
+            .attr("transform", "rotate(-90)")
+            .attr("x", -(height/2))
+            .attr("y", -20)
+            .attr("height", 20)
+            .attr("width", 20)
+            .style("text-anchor", "middle")
+            .text(this.props.axes[1]);
     };
 
     private updateTooltip(
-- 
cgit v1.2.3-70-g09d2


From 6220445cc7832039029b74bc683f21f850daab8f Mon Sep 17 00:00:00 2001
From: srichman333 <sarah_n_richman@brown.edu>
Date: Tue, 11 Jul 2023 10:23:08 -0400
Subject: importing tables from wikipedia -> DataVizBox

---
 .../collections/collectionFreeForm/MarqueeView.tsx | 62 +++++++++-------------
 1 file changed, 26 insertions(+), 36 deletions(-)

diff --git a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
index 5febbe83e..35b3ca5d8 100644
--- a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
+++ b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
@@ -170,6 +170,14 @@ export class MarqueeView extends React.Component<SubCollectionViewProps & Marque
             TreeView._editTitleOnLoad = { id: slide[Id], parent: undefined };
             this.props.addDocument?.(slide);
             e.stopPropagation();
+        } else if (e.key === 't' && e.ctrlKey) {
+            e.preventDefault();
+            (async () => {
+                const text: string = await navigator.clipboard.readText();
+                const ns = text.split('\n').filter(t => t.trim() !== '\r' && t.trim() !== '');
+                this.pasteTable(ns, x, y);
+            })();
+            e.stopPropagation();
         } else if (!e.ctrlKey && !e.metaKey && SelectionManager.Views().length < 2) {
             FormattedTextBox.SelectOnLoadChar = Doc.UserDoc().defaultTextLayout && !this.props.childLayoutString ? e.key : '';
             FormattedTextBox.LiveTextUndo = UndoManager.StartBatch('type new note');
@@ -185,44 +193,26 @@ export class MarqueeView extends React.Component<SubCollectionViewProps & Marque
     //         any row that has only one column is a section header-- this header is then added as a column to subsequent rows until the next header
     // assumes each cell is a string or a number
     pasteTable(ns: string[], x: number, y: number) {
-        while (ns.length > 0 && ns[0].split('\t').length < 2) {
-            ns.splice(0, 1);
-        }
-        if (ns.length > 0) {
-            const columns = ns[0].split('\t');
-            const docList: Doc[] = [];
-            let groupAttr: string | number = '';
-            const rowProto = new Doc();
-            rowProto.title = rowProto.Id;
-            rowProto._width = 200;
-            rowProto.isDataDoc = true;
-            for (let i = 1; i < ns.length - 1; i++) {
-                const values = ns[i].split('\t');
-                if (values.length === 1 && columns.length > 1) {
-                    groupAttr = values[0];
-                    continue;
-                }
-                const docDataProto = Doc.MakeDelegate(rowProto);
-                docDataProto.isDataDoc = true;
-                columns.forEach((col, i) => (docDataProto[columns[i]] = values.length > i ? (values[i].indexOf(Number(values[i]).toString()) !== -1 ? Number(values[i]) : values[i]) : undefined));
-                if (groupAttr) {
-                    docDataProto._group = groupAttr;
-                }
-                docDataProto.title = i.toString();
-                const doc = Doc.MakeDelegate(docDataProto);
-                doc._width = 200;
-                docList.push(doc);
+        let csvRows = [];
+        const headers = ns[0].split('\t');
+        csvRows.push(headers.join(','));
+        ns[0] = '';
+        const eachCell = ns.join('\t').split('\t')
+        let eachRow = []
+        for (let i=1; i<eachCell.length; i++){
+            eachRow.push(eachCell[i]);
+            if (i % headers.length == 0){
+                csvRows.push(eachRow)
+                eachRow = [];
             }
-            const newCol = Docs.Create.SchemaDocument([...(groupAttr ? [new SchemaHeaderField('_group', '#f1efeb')] : []), ...columns.filter(c => c).map(c => new SchemaHeaderField(c, '#f1efeb'))], docList, {
-                x: x,
-                y: y,
-                title: 'droppedTable',
-                _width: 300,
-                _height: 100,
-            });
-
-            this.props.addDocument?.(newCol);
         }
+        
+        const blob = new Blob([csvRows.join('\n')], {type: 'text/csv'})
+        const options = { x: x, y: y, title: 'droppedTable', _width: 300, _height: 100, type:'text/csv'}
+        const file = new File([blob], 'droppedTable', options);
+        const loading = Docs.Create.LoadingDocument(file, options);
+        DocUtils.uploadFileToDoc(file, {}, loading);
+        this.props.addDocument?.(loading);
     }
 
     @action
-- 
cgit v1.2.3-70-g09d2


From 32f8cd2c70e77fa13f6b9d1fed73dc5c1af11189 Mon Sep 17 00:00:00 2001
From: srichman333 <sarah_n_richman@brown.edu>
Date: Tue, 11 Jul 2023 10:30:51 -0400
Subject: multiple histogram bug fix

---
 src/client/views/nodes/DataVizBox/components/Histogram.tsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/client/views/nodes/DataVizBox/components/Histogram.tsx b/src/client/views/nodes/DataVizBox/components/Histogram.tsx
index 1da803076..14063a068 100644
--- a/src/client/views/nodes/DataVizBox/components/Histogram.tsx
+++ b/src/client/views/nodes/DataVizBox/components/Histogram.tsx
@@ -4,10 +4,8 @@ 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 { useMemo } from "react";
+import { Cast, DocCast} from "../../../../../fields/Types";
 import { DataPoint, SelectedDataPoint } from "./LineChart";
-import { createLineGenerator, drawLine, minMaxRange, scaleCreatorNumerical, xAxisCreator, xGrid, yAxisCreator, yGrid } from "../utils/D3Utils";
 import { DocumentManager } from "../../../../util/DocumentManager";
 import { Id } from "../../../../../fields/FieldSymbols";
 import { DataVizBox } from "../DataVizBox";
@@ -16,7 +14,6 @@ import { PinProps, PresBox } from "../../trails";
 import { Docs } from "../../../../documents/Documents";
 import { List } from "../../../../../fields/List";
 import './Chart.scss';
-import { isNaN } from "lodash";
 
 export interface HistogramProps {
     rootDoc: Doc;
@@ -227,6 +224,8 @@ export class Histogram extends React.Component<HistogramProps> {
     }
 
     drawChart = (dataSet: any, width: number, height: number) => {
+        d3.select(this._histogramRef.current).select('svg').remove();
+        d3.select(this._histogramRef.current).select('.tooltip').remove();
 
         var validData = dataSet.filter((d: { [x: string]: unknown; }) => {
             var valid = true;
@@ -245,14 +244,15 @@ export class Histogram extends React.Component<HistogramProps> {
         var numBins = uniqueArr.length
         if (+d3.max(data)!) numBins = +d3.max(data)!
 
-        const svg = d3.select(this._histogramRef.current)
+        const svg = (this._histogramSvg = d3
+            .select(this._histogramRef.current)
             .append("svg")
                 .attr("class", "graph")
                 .attr("width", width + this.props.margin.right + this.props.margin.left)
                 .attr("height", height + this.props.margin.top + this.props.margin.bottom)
             .append("g")
                 .attr("transform",
-                      "translate(" + this.props.margin.left + "," + this.props.margin.top + ")");
+                      "translate(" + this.props.margin.left + "," + this.props.margin.top + ")"));
 
         var x = d3.scaleLinear()
             .domain([0, numBins])
-- 
cgit v1.2.3-70-g09d2


From e3b5e9fd819a394051c760b37ca14bb8c759f72b Mon Sep 17 00:00:00 2001
From: srichman333 <sarah_n_richman@brown.edu>
Date: Tue, 11 Jul 2023 12:49:18 -0400
Subject: cleaner + bottom axis shows bigger numbers (like years) better

---
 .../nodes/DataVizBox/components/Histogram.tsx      | 83 +++++++++++++---------
 1 file changed, 50 insertions(+), 33 deletions(-)

diff --git a/src/client/views/nodes/DataVizBox/components/Histogram.tsx b/src/client/views/nodes/DataVizBox/components/Histogram.tsx
index 14063a068..c7850d8c1 100644
--- a/src/client/views/nodes/DataVizBox/components/Histogram.tsx
+++ b/src/client/views/nodes/DataVizBox/components/Histogram.tsx
@@ -14,6 +14,8 @@ import { PinProps, PresBox } from "../../trails";
 import { Docs } from "../../../../documents/Documents";
 import { List } from "../../../../../fields/List";
 import './Chart.scss';
+import { minMaxRange } from "../utils/D3Utils";
+import e from "connect-flash";
 
 export interface HistogramProps {
     rootDoc: Doc;
@@ -37,6 +39,7 @@ export class Histogram extends React.Component<HistogramProps> {
     private _disposers: { [key: string]: IReactionDisposer } = {};
     private _histogramRef: React.RefObject<HTMLDivElement> = React.createRef();
     private _histogramSvg: d3.Selection<SVGGElement, unknown, null, undefined> | undefined;
+    private numericalData: boolean = false;
     @observable _currSelected: SelectedDataPoint | undefined = undefined;
     // TODO: nda - some sort of mapping that keeps track of the annotated points so we can easily remove when annotations list updates
 
@@ -44,12 +47,15 @@ export class Histogram extends React.Component<HistogramProps> {
         if (this.props.axes.length < 1) return [];
         if (this.props.axes.length < 2) {
             var ax0 = this.props.axes[0];
+            if (+this.props.pairs[0][this.props.axes[0]]) { this.numericalData = true;}
             return this.props.pairs
                 ?.filter(pair => (!this.incomingLinks.length ? true : Array.from(Object.keys(pair)).some(key => pair[key] && key.startsWith('select'))))
                 .map(pair => ({ [ax0]: (pair[this.props.axes[0]])}))
         };
+
         var ax0 = this.props.axes[0];
         var ax1 = this.props.axes[1];
+        if (+this.props.pairs[0][this.props.axes[0]]) { this.numericalData = true;}
         return this.props.pairs
             ?.filter(pair => (!this.incomingLinks.length ? true : Array.from(Object.keys(pair)).some(key => pair[key] && key.startsWith('select'))))
             .map(pair => ({ [ax0]: (pair[this.props.axes[0]]), [ax1]: (pair[this.props.axes[1]]) }))
@@ -73,6 +79,13 @@ export class Histogram extends React.Component<HistogramProps> {
             .map(dvb => dvb.pairs?.filter((pair: { [x: string]: any; }) => pair['select' + dvb.rootDoc[Id]])) // get all the datapoints they have selected field set by incoming anchor
             .lastElement();
     }
+    @computed get rangeVals(): { xMin?: number; xMax?: number; yMin?: number; yMax?: number } {
+        if (this.numericalData){
+            const data = this.data(this._histogramData);
+            return {xMin: Math.min.apply(null, data), xMax: Math.max.apply(null, data), yMin:0, yMax:0}
+        }
+        return {xMin:0, xMax:0, yMin:0, yMax:0}
+    }
     componentWillUnmount() {
         Array.from(Object.keys(this._disposers)).forEach(key => this._disposers[key]());
     }
@@ -207,26 +220,7 @@ export class Histogram extends React.Component<HistogramProps> {
         this.props.pairs.forEach(pair => (pair.selected = pair[this.props.axes[0]] === x && pair[this.props.axes[1]] === y ? true : undefined));
     }
 
-    drawDataPoints(data: DataPoint[], idx: number, xScale: d3.ScaleLinear<number, number, never>, yScale: d3.ScaleLinear<number, number, never>) {
-        if (this._histogramSvg) {
-            const circleClass = '.circle-' + idx;
-            this._histogramSvg
-                .selectAll(circleClass)
-                .data(data)
-                .join('circle') // enter append
-                .attr('class', `${circleClass} datapoint`)
-                .attr('r', '3') // radius
-                .attr('cx', d => xScale(d.x))
-                .attr('cy', d => yScale(d.y))
-                .attr('data-x', d => d.x)
-                .attr('data-y', d => d.y);
-        }
-    }
-
-    drawChart = (dataSet: any, width: number, height: number) => {
-        d3.select(this._histogramRef.current).select('svg').remove();
-        d3.select(this._histogramRef.current).select('.tooltip').remove();
-
+    data = (dataSet: any) => {
         var validData = dataSet.filter((d: { [x: string]: unknown; }) => {
             var valid = true;
             Object.keys(dataSet[0]).map(key => {
@@ -236,13 +230,24 @@ export class Histogram extends React.Component<HistogramProps> {
         })
         var field = Object.keys(dataSet[0])[0]
         const data = validData.map((d: { [x: string]: any; }) => {
-            if (+d[field]) {return +d[field] }
+            if (this.numericalData) {return +d[field] }
             return d[field]
         })
+        return data;
+    }
+
+    drawChart = (dataSet: any, width: number, height: number) => {
+        d3.select(this._histogramRef.current).select('svg').remove();
+        d3.select(this._histogramRef.current).select('.tooltip').remove();
 
+        var field = Object.keys(dataSet[0])[0]
+        const data = this.data(dataSet);
+        
         let uniqueArr = [...new Set(data)]
         var numBins = uniqueArr.length
-        if (+d3.max(data)!) numBins = +d3.max(data)!
+        if (this.numericalData) numBins = this.rangeVals.xMax! - this.rangeVals.xMin! + 1;
+        var startingPoint = this.numericalData==true? this.rangeVals.xMin: 0;
+        console.log(startingPoint)
 
         const svg = (this._histogramSvg = d3
             .select(this._histogramRef.current)
@@ -254,19 +259,32 @@ export class Histogram extends React.Component<HistogramProps> {
                 .attr("transform",
                       "translate(" + this.props.margin.left + "," + this.props.margin.top + ")"));
 
-        var x = d3.scaleLinear()
-            .domain([0, numBins])
-            .range([0, width]);
+        var x: any;
+        if (this.numericalData){
+            x = d3.scaleLinear()
+                .domain([this.rangeVals.xMin!, this.rangeVals.xMax!])
+                .range([0, width-(width/numBins)]);
+        }
+        else {
+            x = d3.scaleLinear()
+                .domain([0, numBins])
+                .range([0, width]);
+        }
+        
         var xAxis = d3.axisBottom(x)
-            .ticks(numBins)
-        var translateXAxis = 0;
+            .ticks(numBins-1)
+        var translateXAxis = (width/numBins) / 2;
 
         var histogram = d3.histogram()
             .value(function(d) {return d})
-            .domain([0, numBins])
+            .domain([startingPoint!, numBins+startingPoint!])
             .thresholds(x.ticks(numBins))
         var bins = histogram(data)
-        if (!+d3.max(data)!) { // if the data is strings rather than numbers
+        console.log(this._histogramData)
+        console.log(data)
+        console.log(bins)
+        console.log(this.rangeVals.xMin, this.rangeVals.xMax, numBins)
+        if (!this.numericalData) { // if the data is strings rather than numbers
             uniqueArr.sort()
             for (let i=0; i<data.length; i++){
                 var index = 0
@@ -277,10 +295,9 @@ export class Histogram extends React.Component<HistogramProps> {
                 }
                 bins[index].push(data[i])
             }
-            bins.forEach(d => d.x0 = d.x0!+1)
+            bins.forEach(d => d.x0 = d.x0!)
             xAxis = d3.axisBottom(x)
-                .ticks(numBins)
-                .tickValues([0, 1, 2, 3, 4])
+                .ticks(numBins-1)
                 .tickFormat( i => uniqueArr[i])
                 .tickPadding(10)
             translateXAxis = (width/numBins) / 2;
@@ -316,7 +333,7 @@ export class Histogram extends React.Component<HistogramProps> {
             .enter()
             .append("rect")
               .attr("x", 1)
-              .attr("transform", function(d) { return "translate(" + x(d.x0! - 1) + "," + y(d.length) + ")"; })
+              .attr("transform", function(d) { return "translate(" + x(d.x0!) + "," + y(d.length) + ")"; })
               .attr("width", width/(numBins))
               .attr("height", function(d) { return height - y(d.length); })
               .attr("style", "outline: thin solid black;")
-- 
cgit v1.2.3-70-g09d2


From 144375b1b8b3fb8119997a9c691b501cfae39826 Mon Sep 17 00:00:00 2001
From: srichman333 <sarah_n_richman@brown.edu>
Date: Tue, 11 Jul 2023 13:07:10 -0400
Subject: drawing line chart fix

---
 .../views/nodes/DataVizBox/components/LineChart.tsx       | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/client/views/nodes/DataVizBox/components/LineChart.tsx b/src/client/views/nodes/DataVizBox/components/LineChart.tsx
index b1a759c1f..d87f5ae1b 100644
--- a/src/client/views/nodes/DataVizBox/components/LineChart.tsx
+++ b/src/client/views/nodes/DataVizBox/components/LineChart.tsx
@@ -252,13 +252,20 @@ export class LineChart extends React.Component<LineChartProps> {
         xAxisCreator(svg.append('g'), height, xScale);
         yAxisCreator(svg.append('g'), width, yScale);
 
-        // draw the plot line
+        // get valid data points
         const data = dataSet[0];
         const lineGen = createLineGenerator(xScale, yScale);
-        drawLine(svg.append('path'), data, lineGen);
-
+        var validData = data.filter((d => {
+            var valid = true;
+            Object.keys(data[0]).map(key => {
+                if (!d[key] || Number.isNaN(d[key])) valid = false;
+            })
+            return valid;
+        }))
+        // draw the plot line
+        drawLine(svg.append('path'), validData, lineGen);
         // draw the datapoint circle
-        this.drawDataPoints(data, 0, xScale, yScale);
+        this.drawDataPoints(validData, 0, xScale, yScale);
 
         const higlightFocusPt = svg.append('g').style('display', 'none');
         higlightFocusPt.append('circle').attr('r', 5).attr('class', 'circle');
-- 
cgit v1.2.3-70-g09d2


From 0694f00a07801a579ae1a7b0f84e0aec852a2a22 Mon Sep 17 00:00:00 2001
From: srichman333 <sarah_n_richman@brown.edu>
Date: Tue, 11 Jul 2023 14:51:30 -0400
Subject: histogram grouped bins for lots / spread out data

---
 .../nodes/DataVizBox/components/Histogram.tsx      | 50 ++++++++++++++--------
 1 file changed, 31 insertions(+), 19 deletions(-)

diff --git a/src/client/views/nodes/DataVizBox/components/Histogram.tsx b/src/client/views/nodes/DataVizBox/components/Histogram.tsx
index c7850d8c1..623453ea3 100644
--- a/src/client/views/nodes/DataVizBox/components/Histogram.tsx
+++ b/src/client/views/nodes/DataVizBox/components/Histogram.tsx
@@ -14,7 +14,6 @@ import { PinProps, PresBox } from "../../trails";
 import { Docs } from "../../../../documents/Documents";
 import { List } from "../../../../../fields/List";
 import './Chart.scss';
-import { minMaxRange } from "../utils/D3Utils";
 import e from "connect-flash";
 
 export interface HistogramProps {
@@ -245,9 +244,17 @@ export class Histogram extends React.Component<HistogramProps> {
         
         let uniqueArr = [...new Set(data)]
         var numBins = uniqueArr.length
-        if (this.numericalData) numBins = this.rangeVals.xMax! - this.rangeVals.xMin! + 1;
-        var startingPoint = this.numericalData==true? this.rangeVals.xMin: 0;
-        console.log(startingPoint)
+        var startingPoint = 0;
+        var endingPoint = numBins;
+        var translateXAxis = 0;
+        if (this.numericalData) {
+            numBins = this.rangeVals.xMax! - this.rangeVals.xMin! + 1;
+            startingPoint = this.rangeVals.xMin!;
+            endingPoint = this.rangeVals.xMax!;
+            if (numBins>15) numBins = 15;
+            else translateXAxis = width/(numBins+1) / 2;
+        }
+        else translateXAxis = width/(numBins+1) / 2;
 
         const svg = (this._histogramSvg = d3
             .select(this._histogramRef.current)
@@ -262,28 +269,27 @@ export class Histogram extends React.Component<HistogramProps> {
         var x: any;
         if (this.numericalData){
             x = d3.scaleLinear()
-                .domain([this.rangeVals.xMin!, this.rangeVals.xMax!])
-                .range([0, width-(width/numBins)]);
+                .domain([startingPoint!, endingPoint!])
+                .range([0, width ]);
         }
         else {
             x = d3.scaleLinear()
                 .domain([0, numBins])
                 .range([0, width]);
         }
-        
-        var xAxis = d3.axisBottom(x)
-            .ticks(numBins-1)
-        var translateXAxis = (width/numBins) / 2;
 
         var histogram = d3.histogram()
             .value(function(d) {return d})
-            .domain([startingPoint!, numBins+startingPoint!])
+            .domain([startingPoint!, endingPoint!])
             .thresholds(x.ticks(numBins))
         var bins = histogram(data)
-        console.log(this._histogramData)
-        console.log(data)
-        console.log(bins)
-        console.log(this.rangeVals.xMin, this.rangeVals.xMax, numBins)
+        var eachRectWidth = width/(bins.length)
+        var graphStartingPoint = bins[0].x1! - (bins[1].x1! - bins[1].x0!)
+        bins[0].x0 = graphStartingPoint;
+        x = x.domain([graphStartingPoint, endingPoint])
+             .range([0, width - eachRectWidth])
+        var xAxis;
+
         if (!this.numericalData) { // if the data is strings rather than numbers
             uniqueArr.sort()
             for (let i=0; i<data.length; i++){
@@ -300,14 +306,20 @@ export class Histogram extends React.Component<HistogramProps> {
                 .ticks(numBins-1)
                 .tickFormat( i => uniqueArr[i])
                 .tickPadding(10)
-            translateXAxis = (width/numBins) / 2;
+            translateXAxis = eachRectWidth / 2;
+        }
+        else {
+            xAxis = d3.axisBottom(x)
+                .ticks(numBins-1)
         }
 
+        const maxFrequency = d3.max(bins, function(d) { return d.length; })
+        
         var y = d3.scaleLinear()
             .range([height, 0]);
-            y.domain([0, d3.max(bins, function(d) { return d.length; })!]);
+            y.domain([0, maxFrequency!]);
         var yAxis = d3.axisLeft(y)
-            .ticks(d3.max(bins, function(d) { return d.length; })!)
+            .ticks(maxFrequency!)
         svg.append("g")
             .call(yAxis);
         svg.append("g")
@@ -334,7 +346,7 @@ export class Histogram extends React.Component<HistogramProps> {
             .append("rect")
               .attr("x", 1)
               .attr("transform", function(d) { return "translate(" + x(d.x0!) + "," + y(d.length) + ")"; })
-              .attr("width", width/(numBins))
+              .attr("width", eachRectWidth)
               .attr("height", function(d) { return height - y(d.length); })
               .attr("style", "outline: thin solid black;")
               .style("fill", "#69b3a2")
-- 
cgit v1.2.3-70-g09d2


From cbe80a7b0fa7a887596859f74f0461a7c7f376d3 Mon Sep 17 00:00:00 2001
From: srichman333 <sarah_n_richman@brown.edu>
Date: Wed, 12 Jul 2023 12:09:53 -0400
Subject: histogram decimals + prices

---
 src/client/views/nodes/DataVizBox/components/Histogram.tsx | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/client/views/nodes/DataVizBox/components/Histogram.tsx b/src/client/views/nodes/DataVizBox/components/Histogram.tsx
index 623453ea3..6047e6424 100644
--- a/src/client/views/nodes/DataVizBox/components/Histogram.tsx
+++ b/src/client/views/nodes/DataVizBox/components/Histogram.tsx
@@ -14,7 +14,6 @@ import { PinProps, PresBox } from "../../trails";
 import { Docs } from "../../../../documents/Documents";
 import { List } from "../../../../../fields/List";
 import './Chart.scss';
-import e from "connect-flash";
 
 export interface HistogramProps {
     rootDoc: Doc;
@@ -46,7 +45,7 @@ export class Histogram extends React.Component<HistogramProps> {
         if (this.props.axes.length < 1) return [];
         if (this.props.axes.length < 2) {
             var ax0 = this.props.axes[0];
-            if (+this.props.pairs[0][this.props.axes[0]]) { this.numericalData = true;}
+            if (/\d/.test(this.props.pairs[0][ax0])){ this.numericalData = true }
             return this.props.pairs
                 ?.filter(pair => (!this.incomingLinks.length ? true : Array.from(Object.keys(pair)).some(key => pair[key] && key.startsWith('select'))))
                 .map(pair => ({ [ax0]: (pair[this.props.axes[0]])}))
@@ -54,7 +53,7 @@ export class Histogram extends React.Component<HistogramProps> {
 
         var ax0 = this.props.axes[0];
         var ax1 = this.props.axes[1];
-        if (+this.props.pairs[0][this.props.axes[0]]) { this.numericalData = true;}
+        if (/\d/.test(this.props.pairs[0][ax0])) { this.numericalData = true;}
         return this.props.pairs
             ?.filter(pair => (!this.incomingLinks.length ? true : Array.from(Object.keys(pair)).some(key => pair[key] && key.startsWith('select'))))
             .map(pair => ({ [ax0]: (pair[this.props.axes[0]]), [ax1]: (pair[this.props.axes[1]]) }))
@@ -229,7 +228,7 @@ export class Histogram extends React.Component<HistogramProps> {
         })
         var field = Object.keys(dataSet[0])[0]
         const data = validData.map((d: { [x: string]: any; }) => {
-            if (this.numericalData) {return +d[field] }
+            if (this.numericalData) { return +d[field].replace(/\$/g, '') }
             return d[field]
         })
         return data;
@@ -248,7 +247,9 @@ export class Histogram extends React.Component<HistogramProps> {
         var endingPoint = numBins;
         var translateXAxis = 0;
         if (this.numericalData) {
-            numBins = this.rangeVals.xMax! - this.rangeVals.xMin! + 1;
+            if (Number.isInteger(this.rangeVals.xMin!)){
+                numBins = this.rangeVals.xMax! - this.rangeVals.xMin! + 1;
+            }
             startingPoint = this.rangeVals.xMin!;
             endingPoint = this.rangeVals.xMax!;
             if (numBins>15) numBins = 15;
@@ -283,7 +284,7 @@ export class Histogram extends React.Component<HistogramProps> {
             .domain([startingPoint!, endingPoint!])
             .thresholds(x.ticks(numBins))
         var bins = histogram(data)
-        var eachRectWidth = width/(bins.length)
+        var eachRectWidth = width/(bins.length+1)
         var graphStartingPoint = bins[0].x1! - (bins[1].x1! - bins[1].x0!)
         bins[0].x0 = graphStartingPoint;
         x = x.domain([graphStartingPoint, endingPoint])
-- 
cgit v1.2.3-70-g09d2


From a6ff4b6481a4490351f715eed4f26b34cbbc5e03 Mon Sep 17 00:00:00 2001
From: srichman333 <sarah_n_richman@brown.edu>
Date: Wed, 12 Jul 2023 12:20:27 -0400
Subject: percentages

---
 src/client/views/nodes/DataVizBox/components/Histogram.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/client/views/nodes/DataVizBox/components/Histogram.tsx b/src/client/views/nodes/DataVizBox/components/Histogram.tsx
index 6047e6424..f9410a580 100644
--- a/src/client/views/nodes/DataVizBox/components/Histogram.tsx
+++ b/src/client/views/nodes/DataVizBox/components/Histogram.tsx
@@ -228,7 +228,7 @@ export class Histogram extends React.Component<HistogramProps> {
         })
         var field = Object.keys(dataSet[0])[0]
         const data = validData.map((d: { [x: string]: any; }) => {
-            if (this.numericalData) { return +d[field].replace(/\$/g, '') }
+            if (this.numericalData) { return +d[field].replace(/\$/g, '').replace(/\%/g, '') }
             return d[field]
         })
         return data;
-- 
cgit v1.2.3-70-g09d2


From 217f656cd39701d87bc298717551ae78e5b9eb13 Mon Sep 17 00:00:00 2001
From: srichman333 <sarah_n_richman@brown.edu>
Date: Wed, 12 Jul 2023 14:40:31 -0400
Subject: start of pie charts

---
 src/client/views/nodes/DataVizBox/DataVizBox.tsx   |   6 +-
 .../views/nodes/DataVizBox/components/PieChart.tsx | 292 +++++++++++++++++++++
 2 files changed, 297 insertions(+), 1 deletion(-)
 create mode 100644 src/client/views/nodes/DataVizBox/components/PieChart.tsx

diff --git a/src/client/views/nodes/DataVizBox/DataVizBox.tsx b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
index b8a448e46..2a0f6c17d 100644
--- a/src/client/views/nodes/DataVizBox/DataVizBox.tsx
+++ b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
@@ -13,11 +13,13 @@ import { LineChart } from './components/LineChart';
 import { TableBox } from './components/TableBox';
 import './DataVizBox.scss';
 import { Histogram } from './components/Histogram';
+import { PieChart } from './components/PieChart';
 
 export enum DataVizView {
     TABLE = 'table',
     LINECHART = 'lineChart',
-    HISTOGRAM = 'histogram'
+    HISTOGRAM = 'histogram',
+    PIECHART = 'pieChart'
 }
 
 @observer
@@ -104,6 +106,7 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
             case DataVizView.TABLE:     return <TableBox pairs={this.pairs} axes={this.axes} 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} />;
         }
     }
     @computed get dataUrl() {
@@ -150,6 +153,7 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
                 <button onClick={e => this.layoutDoc._dataVizView = DataVizView.TABLE}> TABLE </button>
                 <button onClick={e => this.layoutDoc._dataVizView = DataVizView.LINECHART}> LINE CHART </button>
                 <button onClick={e => this.layoutDoc._dataVizView = DataVizView.HISTOGRAM}> HISTOGRAM </button>
+                <button onClick={e => this.layoutDoc._dataVizView = DataVizView.PIECHART}> PIE CHART </button>
                 {this.selectView}
             </div>
         );
diff --git a/src/client/views/nodes/DataVizBox/components/PieChart.tsx b/src/client/views/nodes/DataVizBox/components/PieChart.tsx
new file mode 100644
index 000000000..c746e6fc1
--- /dev/null
+++ b/src/client/views/nodes/DataVizBox/components/PieChart.tsx
@@ -0,0 +1,292 @@
+import { observer } from "mobx-react";
+import { Doc, DocListCast } 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} from "../../../../../fields/Types";
+import { DataPoint, SelectedDataPoint } from "./LineChart";
+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";
+import './Chart.scss';
+import { ChatCompletionResponseMessageRoleEnum } from "openai";
+
+export interface PieChartProps {
+    rootDoc: Doc;
+    axes: string[];
+    pairs: { [key: string]: any }[];
+    width: number;
+    height: number;
+    dataDoc: Doc;
+    fieldKey: string;
+    margin: {
+        top: number;
+        right: number;
+        bottom: number;
+        left: number;
+    };
+}
+
+@observer
+export class PieChart extends React.Component<PieChartProps> {
+
+    private _disposers: { [key: string]: IReactionDisposer } = {};
+    private _piechartRef: React.RefObject<HTMLDivElement> = React.createRef();
+    private _piechartSvg: d3.Selection<SVGGElement, unknown, null, undefined> | undefined;
+    private numericalData: boolean = false;
+    @observable _currSelected: SelectedDataPoint | undefined = undefined;
+    // TODO: nda - some sort of mapping that keeps track of the annotated points so we can easily remove when annotations list updates
+
+    @computed get _piechartData() {
+        if (this.props.axes.length < 1) return [];
+        if (this.props.axes.length < 2) {
+            var ax0 = this.props.axes[0];
+            if (/\d/.test(this.props.pairs[0][ax0])){ this.numericalData = true }
+            return this.props.pairs
+                ?.filter(pair => (!this.incomingLinks.length ? true : Array.from(Object.keys(pair)).some(key => pair[key] && key.startsWith('select'))))
+                .map(pair => ({ [ax0]: (pair[this.props.axes[0]])}))
+        };
+
+        var ax0 = this.props.axes[0];
+        var ax1 = this.props.axes[1];
+        if (/\d/.test(this.props.pairs[0][ax0])) { this.numericalData = true;}
+        return this.props.pairs
+            ?.filter(pair => (!this.incomingLinks.length ? true : Array.from(Object.keys(pair)).some(key => pair[key] && key.startsWith('select'))))
+            .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 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
+            .map(link => DocCast(link.link_anchor_1)); // then return the source of the link
+    }
+    @computed get incomingSelected() {
+        // return selected x and y axes
+        // otherwise, use the selection of whatever is linked to us
+        return this.incomingLinks // all links that are pointing to this node
+            .map(anchor => DocumentManager.Instance.getFirstDocumentView(anchor)?.ComponentView as DataVizBox) // get their data viz boxes
+            .filter(dvb => dvb)
+            .map(dvb => dvb.pairs?.filter((pair: { [x: string]: any; }) => pair['select' + dvb.rootDoc[Id]])) // get all the datapoints they have selected field set by incoming anchor
+            .lastElement();
+    }
+    @computed get rangeVals(): { xMin?: number; xMax?: number; yMin?: number; yMax?: number } {
+        if (this.numericalData){
+            const data = this.data(this._piechartData);
+            return {xMin: Math.min.apply(null, data), xMax: Math.max.apply(null, data), yMin:0, yMax:0}
+        }
+        return {xMin:0, xMax:0, yMin:0, yMax:0}
+    }
+    componentWillUnmount() {
+        Array.from(Object.keys(this._disposers)).forEach(key => this._disposers[key]());
+    }
+    componentDidMount = () => {
+        this._disposers.chartData = reaction(
+            () => ({ dataSet: this._piechartData, w: this.width, h: this.height }),
+            ({ dataSet, w, h }) => {
+                if (dataSet) {
+                    this.drawChart(dataSet, w, h);
+
+                    // redraw annotations when the chart data has changed, or the local or inherited selection has changed
+                    this.clearAnnotations();
+                    this._currSelected && this.drawAnnotations(Number(this._currSelected.x), Number(this._currSelected.y), true);
+                    this.incomingSelected?.forEach((pair: any) => this.drawAnnotations(Number(pair[this.props.axes[0]]), Number(pair[this.props.axes[1]])));
+                }
+            },
+            { fireImmediately: true }
+        );
+        this._disposers.annos = reaction(
+            () => DocListCast(this.props.dataDoc[this.props.fieldKey + '_annotations']),
+            annotations => {
+                // modify how d3 renders so that anything in this annotations list would be potentially highlighted in some way
+                // could be blue colored to make it look like anchor
+                // this.drawAnnotations()
+                // loop through annotations and draw them
+                annotations.forEach(a => this.drawAnnotations(Number(a.x), Number(a.y)));
+                // this.drawAnnotations(annotations.x, annotations.y);
+            },
+            { fireImmediately: true }
+        );
+        this._disposers.highlights = reaction(
+            () => ({
+                selected: this._currSelected,
+                incomingSelected: this.incomingSelected,
+            }),
+            ({ selected, incomingSelected }) => {
+                // redraw annotations when the chart data has changed, or the local or inherited selection has changed
+                this.clearAnnotations();
+                selected && this.drawAnnotations(Number(selected.x), Number(selected.y), true);
+                incomingSelected?.forEach((pair: any) => this.drawAnnotations(Number(pair[this.props.axes[0]]), Number(pair[this.props.axes[1]])));
+            },
+            { fireImmediately: true }
+        );
+    };
+
+    // anything that doesn't need to be recalculated should just be stored as drawCharts (i.e. computed values) and drawChart is gonna iterate over these observables and generate svgs based on that
+
+    clearAnnotations = () => {
+        const elements = document.querySelectorAll('.datapoint');
+        for (let i = 0; i < elements.length; i++) {
+            const element = elements[i];
+            element.classList.remove('brushed');
+            element.classList.remove('selected');
+        }
+    };
+    // gets called whenever the "data_annotations" fields gets updated
+    drawAnnotations = (dataX: number, dataY: number, selected?: boolean) => {
+        // TODO: nda - can optimize this by having some sort of mapping of the x and y values to the individual circle elements
+        // loop through all html elements with class .circle-d1 and find the one that has "data-x" and "data-y" attributes that match the dataX and dataY
+        // if it exists, then highlight it
+        // if it doesn't exist, then remove the highlight
+        const elements = document.querySelectorAll('.datapoint');
+        for (let i = 0; i < elements.length; i++) {
+            const element = elements[i];
+            const x = element.getAttribute('data-x');
+            const y = element.getAttribute('data-y');
+            if (x === dataX.toString() && y === dataY.toString()) {
+                element.classList.add(selected ? 'selected' : 'brushed');
+            }
+            // TODO: nda - this remove highlight code should go where we remove the links
+            // } else {
+            // }
+        }
+    };
+
+    removeAnnotations(dataX: number, dataY: number) {
+        // loop through and remove any annotations that no longer exist
+    }
+
+    @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;
+    };
+
+    // 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: 'line doc selection' + this._currSelected?.x,
+        });
+        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;
+        return anchor;
+    };
+
+    @computed get height() {
+        return this.props.height - this.props.margin.top - this.props.margin.bottom;
+    }
+
+    @computed get width() {
+        return this.props.width - this.props.margin.left - this.props.margin.right;
+    }
+
+    setupTooltip() {
+        return d3
+            .select(this._piechartRef.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;
+            Object.keys(dataSet[0]).map(key => {
+                if (!d[key] || Number.isNaN(d[key])) valid = false;
+            })
+            return valid;
+        })
+        var field = Object.keys(dataSet[0])[0]
+        const data = validData.map((d: { [x: string]: any; }) => {
+            if (this.numericalData) { return +d[field].replace(/\$/g, '').replace(/\%/g, '') }
+            return d[field]
+        })
+        return data;
+    }
+
+    drawChart = (dataSet: any, width: number, height: number) => {
+        d3.select(this._piechartRef.current).select('svg').remove();
+        d3.select(this._piechartRef.current).select('.tooltip').remove();
+        
+        var radius = Math.min(width, height) / 2 - Math.max(this.props.margin.top, this.props.margin.bottom, this.props.margin.left, this.props.margin.right)
+        var svg = (this._piechartSvg = d3
+            .select(this._piechartRef.current)
+            .append("svg")
+                .attr("class", "graph")
+                .attr("width", width + this.props.margin.right + this.props.margin.left)
+                .attr("height", height + this.props.margin.top + this.props.margin.bottom)
+            .append("g"));
+    
+        let g = svg.append("g")
+            .attr("transform",
+                    "translate(" + (width/2 + this.props.margin.left) + "," + height/2 + ")");
+
+        var data = this.data(this._piechartData);
+        var pie = d3.pie();
+        var arc = d3.arc()
+            .innerRadius(0)
+            .outerRadius(radius);
+
+        //Generate groups
+        var percentField = Object.keys(dataSet[0])[0]
+        var descriptionField = Object.keys(dataSet[0])[1]
+        var arcs = g.selectAll("arc")
+            .data(pie(data))
+            .enter()
+            .append("g")
+        arcs.append("path")
+            .attr("fill", (data, i)=>{
+                let value=data.data;
+                return d3.schemeSet3[i];
+            })
+            .attr("d", arc);
+        arcs.append("text")
+            .attr("transform",function(d){ return "translate("+ (arc.centroid(d))  + ")"; })
+            .attr("text-anchor", "middle")
+            .text(function(d){ return dataSet[data.indexOf(d.value)][percentField] + ' ' + dataSet[data.indexOf(d.value)][descriptionField]})
+
+    };
+
+    render() {
+        
+        return (
+            this.props.axes.length >= 1 ? (
+            <div ref={this._piechartRef} className="chart-container">
+                <span> {`Selected: ${Object.keys(this._piechartData[0])[0]}`}</span>
+            </div>
+            ) : <span className="chart-container"> {'first use table view to select an axis to plot'}</span>
+        );
+    }
+
+}
\ No newline at end of file
-- 
cgit v1.2.3-70-g09d2


From d20a4b3791c79325c709c42f797452275f2da312 Mon Sep 17 00:00:00 2001
From: srichman333 <sarah_n_richman@brown.edu>
Date: Wed, 12 Jul 2023 16:25:22 -0400
Subject: histogram bar width fix

---
 src/client/views/nodes/DataVizBox/components/Histogram.tsx | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/client/views/nodes/DataVizBox/components/Histogram.tsx b/src/client/views/nodes/DataVizBox/components/Histogram.tsx
index f9410a580..e4267aee3 100644
--- a/src/client/views/nodes/DataVizBox/components/Histogram.tsx
+++ b/src/client/views/nodes/DataVizBox/components/Histogram.tsx
@@ -278,17 +278,17 @@ export class Histogram extends React.Component<HistogramProps> {
                 .domain([0, numBins])
                 .range([0, width]);
         }
-
+        
         var histogram = d3.histogram()
             .value(function(d) {return d})
             .domain([startingPoint!, endingPoint!])
-            .thresholds(x.ticks(numBins))
+            .thresholds(x.ticks(numBins-1))
         var bins = histogram(data)
-        var eachRectWidth = width/(bins.length+1)
+        var eachRectWidth = width/(bins.length)
         var graphStartingPoint = bins[0].x1! - (bins[1].x1! - bins[1].x0!)
         bins[0].x0 = graphStartingPoint;
         x = x.domain([graphStartingPoint, endingPoint])
-             .range([0, width - eachRectWidth])
+             .range([0, Number.isInteger(this.rangeVals.xMin!)? (width-eachRectWidth) : width ])
         var xAxis;
 
         if (!this.numericalData) { // if the data is strings rather than numbers
@@ -345,7 +345,6 @@ export class Histogram extends React.Component<HistogramProps> {
             .data(bins)
             .enter()
             .append("rect")
-              .attr("x", 1)
               .attr("transform", function(d) { return "translate(" + x(d.x0!) + "," + y(d.length) + ")"; })
               .attr("width", eachRectWidth)
               .attr("height", function(d) { return height - y(d.length); })
-- 
cgit v1.2.3-70-g09d2


From c5740deae879fffdc46a862b81be2c96ae9366b4 Mon Sep 17 00:00:00 2001
From: srichman333 <sarah_n_richman@brown.edu>
Date: Wed, 12 Jul 2023 17:28:20 -0400
Subject: graph type option ui + problem fixes

---
 src/client/views/nodes/DataVizBox/DataVizBox.scss          | 5 +++++
 src/client/views/nodes/DataVizBox/DataVizBox.tsx           | 8 ++++----
 src/client/views/nodes/DataVizBox/components/Histogram.tsx | 2 +-
 src/client/views/nodes/DataVizBox/components/LineChart.tsx | 2 +-
 src/client/views/nodes/DataVizBox/components/PieChart.tsx  | 2 +-
 5 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/src/client/views/nodes/DataVizBox/DataVizBox.scss b/src/client/views/nodes/DataVizBox/DataVizBox.scss
index cd500e9ae..424f8b0f1 100644
--- a/src/client/views/nodes/DataVizBox/DataVizBox.scss
+++ b/src/client/views/nodes/DataVizBox/DataVizBox.scss
@@ -1,4 +1,9 @@
 .dataviz {
     overflow: auto;
     height: 100%;
+
+    .datatype-button{
+        margin: 0;
+        border: 1px solid white;
+    }
 }
diff --git a/src/client/views/nodes/DataVizBox/DataVizBox.tsx b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
index 2a0f6c17d..e6d08d47f 100644
--- a/src/client/views/nodes/DataVizBox/DataVizBox.tsx
+++ b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
@@ -150,10 +150,10 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
                     )
                 }>
                 {/* <button onClick={e => this.changeViewHandler(e)}>{this.dataVizView === DataVizView.TABLE ? DataVizView.LINECHART : DataVizView.TABLE}</button> */}
-                <button onClick={e => this.layoutDoc._dataVizView = DataVizView.TABLE}> TABLE </button>
-                <button onClick={e => this.layoutDoc._dataVizView = DataVizView.LINECHART}> LINE CHART </button>
-                <button onClick={e => this.layoutDoc._dataVizView = DataVizView.HISTOGRAM}> HISTOGRAM </button>
-                <button onClick={e => this.layoutDoc._dataVizView = DataVizView.PIECHART}> PIE CHART </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>
                 {this.selectView}
             </div>
         );
diff --git a/src/client/views/nodes/DataVizBox/components/Histogram.tsx b/src/client/views/nodes/DataVizBox/components/Histogram.tsx
index e4267aee3..0ea492ff1 100644
--- a/src/client/views/nodes/DataVizBox/components/Histogram.tsx
+++ b/src/client/views/nodes/DataVizBox/components/Histogram.tsx
@@ -305,7 +305,7 @@ export class Histogram extends React.Component<HistogramProps> {
             bins.forEach(d => d.x0 = d.x0!)
             xAxis = d3.axisBottom(x)
                 .ticks(numBins-1)
-                .tickFormat( i => uniqueArr[i])
+                .tickFormat( i => uniqueArr[i.valueOf])
                 .tickPadding(10)
             translateXAxis = eachRectWidth / 2;
         }
diff --git a/src/client/views/nodes/DataVizBox/components/LineChart.tsx b/src/client/views/nodes/DataVizBox/components/LineChart.tsx
index d87f5ae1b..dfb9f54c1 100644
--- a/src/client/views/nodes/DataVizBox/components/LineChart.tsx
+++ b/src/client/views/nodes/DataVizBox/components/LineChart.tsx
@@ -221,7 +221,7 @@ export class LineChart extends React.Component<LineChartProps> {
     }
 
     // TODO: nda - can use d3.create() to create html element instead of appending
-    drawChart = (dataSet: DataPoint[][], rangeVals: { xMin?: number; xMax?: number; yMin?: number; yMax?: number }, width: number, height: number) => {
+    drawChart = (dataSet: any[][], rangeVals: { xMin?: number; xMax?: number; yMin?: number; yMax?: number }, width: number, height: number) => {
         // clearing tooltip and the current chart
         d3.select(this._lineChartRef.current).select('svg').remove();
         d3.select(this._lineChartRef.current).select('.tooltip').remove();
diff --git a/src/client/views/nodes/DataVizBox/components/PieChart.tsx b/src/client/views/nodes/DataVizBox/components/PieChart.tsx
index c746e6fc1..121e6db3d 100644
--- a/src/client/views/nodes/DataVizBox/components/PieChart.tsx
+++ b/src/client/views/nodes/DataVizBox/components/PieChart.tsx
@@ -272,7 +272,7 @@ export class PieChart extends React.Component<PieChartProps> {
             })
             .attr("d", arc);
         arcs.append("text")
-            .attr("transform",function(d){ return "translate("+ (arc.centroid(d))  + ")"; })
+            .attr("transform",function(d){ return "translate("+ (arc.centroid(d as unknown as d3.DefaultArcObject))  + ")"; })
             .attr("text-anchor", "middle")
             .text(function(d){ return dataSet[data.indexOf(d.value)][percentField] + ' ' + dataSet[data.indexOf(d.value)][descriptionField]})
 
-- 
cgit v1.2.3-70-g09d2


From aa7642006598bd47b415d4d2452dd4d226ab3ac5 Mon Sep 17 00:00:00 2001
From: srichman333 <sarah_n_richman@brown.edu>
Date: Wed, 12 Jul 2023 22:59:46 -0400
Subject: brushing/linking for histograms + pie charts

---
 src/client/views/nodes/DataVizBox/DataVizBox.tsx           | 1 +
 src/client/views/nodes/DataVizBox/components/Histogram.tsx | 6 +++---
 src/client/views/nodes/DataVizBox/components/PieChart.tsx  | 5 ++---
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/client/views/nodes/DataVizBox/DataVizBox.tsx b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
index e6d08d47f..25098baf1 100644
--- a/src/client/views/nodes/DataVizBox/DataVizBox.tsx
+++ b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
@@ -133,6 +133,7 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
     }
 
     render() {
+        if (!this.layoutDoc._dataVizView) this.layoutDoc._dataVizView = this.dataVizView;
         return !this.pairs?.length ? (
             <div>Loading...</div>
         ) : (
diff --git a/src/client/views/nodes/DataVizBox/components/Histogram.tsx b/src/client/views/nodes/DataVizBox/components/Histogram.tsx
index 0ea492ff1..b6ae15709 100644
--- a/src/client/views/nodes/DataVizBox/components/Histogram.tsx
+++ b/src/client/views/nodes/DataVizBox/components/Histogram.tsx
@@ -305,7 +305,7 @@ export class Histogram extends React.Component<HistogramProps> {
             bins.forEach(d => d.x0 = d.x0!)
             xAxis = d3.axisBottom(x)
                 .ticks(numBins-1)
-                .tickFormat( i => uniqueArr[i.valueOf])
+                .tickFormat( i => uniqueArr[i])
                 .tickPadding(10)
             translateXAxis = eachRectWidth / 2;
         }
@@ -355,11 +355,11 @@ export class Histogram extends React.Component<HistogramProps> {
     render() {
         
         return (
-            this.props.axes.length >= 1 ? (
+            this.props.axes.length >= 1 && (this.incomingSelected? this.incomingSelected.length>0 : true) ? (
             <div ref={this._histogramRef} className="chart-container">
                 <span> {`Selected: ${Object.keys(this._histogramData[0])[0]}`}</span>
             </div>
-            ) : <span className="chart-container"> {'first use table view to select an axis to plot'}</span>
+            ) : <span className="chart-container"> {'first use table view to select a column to graph'}</span>
         );
     }
 
diff --git a/src/client/views/nodes/DataVizBox/components/PieChart.tsx b/src/client/views/nodes/DataVizBox/components/PieChart.tsx
index 121e6db3d..3ca49a46c 100644
--- a/src/client/views/nodes/DataVizBox/components/PieChart.tsx
+++ b/src/client/views/nodes/DataVizBox/components/PieChart.tsx
@@ -14,7 +14,6 @@ import { PinProps, PresBox } from "../../trails";
 import { Docs } from "../../../../documents/Documents";
 import { List } from "../../../../../fields/List";
 import './Chart.scss';
-import { ChatCompletionResponseMessageRoleEnum } from "openai";
 
 export interface PieChartProps {
     rootDoc: Doc;
@@ -281,11 +280,11 @@ export class PieChart extends React.Component<PieChartProps> {
     render() {
         
         return (
-            this.props.axes.length >= 1 ? (
+            this.props.axes.length >= 1 && (this.incomingSelected? this.incomingSelected.length>0 : true) ? (
             <div ref={this._piechartRef} className="chart-container">
                 <span> {`Selected: ${Object.keys(this._piechartData[0])[0]}`}</span>
             </div>
-            ) : <span className="chart-container"> {'first use table view to select an axis to plot'}</span>
+            ) : <span className="chart-container"> {'first use table view to select a column to graph'}</span>
         );
     }
 
-- 
cgit v1.2.3-70-g09d2


From e1e74c5e35c5eafa6b4fadc4df2173ba09e235ec Mon Sep 17 00:00:00 2001
From: srichman333 <sarah_n_richman@brown.edu>
Date: Wed, 12 Jul 2023 23:48:46 -0400
Subject: pie chart axis labels

---
 src/client/views/nodes/DataVizBox/components/PieChart.tsx | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/client/views/nodes/DataVizBox/components/PieChart.tsx b/src/client/views/nodes/DataVizBox/components/PieChart.tsx
index 3ca49a46c..8f7fadfa5 100644
--- a/src/client/views/nodes/DataVizBox/components/PieChart.tsx
+++ b/src/client/views/nodes/DataVizBox/components/PieChart.tsx
@@ -228,7 +228,7 @@ export class PieChart extends React.Component<PieChartProps> {
         })
         var field = Object.keys(dataSet[0])[0]
         const data = validData.map((d: { [x: string]: any; }) => {
-            if (this.numericalData) { return +d[field].replace(/\$/g, '').replace(/\%/g, '') }
+            if (this.numericalData) { return +d[field].replace(/\$/g, '').replace(/\%/g, '').replace(/\</g, '') }
             return d[field]
         })
         return data;
@@ -259,7 +259,7 @@ export class PieChart extends React.Component<PieChartProps> {
 
         //Generate groups
         var percentField = Object.keys(dataSet[0])[0]
-        var descriptionField = Object.keys(dataSet[0])[1]
+        var descriptionField = Object.keys(dataSet[0])[1]!
         var arcs = g.selectAll("arc")
             .data(pie(data))
             .enter()
@@ -273,12 +273,14 @@ export class PieChart extends React.Component<PieChartProps> {
         arcs.append("text")
             .attr("transform",function(d){ return "translate("+ (arc.centroid(d as unknown as d3.DefaultArcObject))  + ")"; })
             .attr("text-anchor", "middle")
-            .text(function(d){ return dataSet[data.indexOf(d.value)][percentField] + ' ' + dataSet[data.indexOf(d.value)][descriptionField]})
+            .text(function(d){ 
+                return dataSet[data.indexOf(d.value)][percentField] 
+                + (!descriptionField? '' : (' ' + dataSet[data.indexOf(d.value)][descriptionField]))})
 
     };
 
     render() {
-        
+
         return (
             this.props.axes.length >= 1 && (this.incomingSelected? this.incomingSelected.length>0 : true) ? (
             <div ref={this._piechartRef} className="chart-container">
-- 
cgit v1.2.3-70-g09d2


From 9cfd160f8e1b6caf4711bc034f9bed850eb4b12b Mon Sep 17 00:00:00 2001
From: srichman333 <sarah_n_richman@brown.edu>
Date: Thu, 13 Jul 2023 12:00:32 -0400
Subject: pie chart readability

---
 src/client/views/nodes/DataVizBox/components/PieChart.tsx | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/client/views/nodes/DataVizBox/components/PieChart.tsx b/src/client/views/nodes/DataVizBox/components/PieChart.tsx
index 8f7fadfa5..5b6bdc4cf 100644
--- a/src/client/views/nodes/DataVizBox/components/PieChart.tsx
+++ b/src/client/views/nodes/DataVizBox/components/PieChart.tsx
@@ -267,15 +267,18 @@ export class PieChart extends React.Component<PieChartProps> {
         arcs.append("path")
             .attr("fill", (data, i)=>{
                 let value=data.data;
-                return d3.schemeSet3[i];
+                return d3.schemeSet3[i]? d3.schemeSet3[i]: d3.schemeSet3[i%12];
             })
             .attr("d", arc);
         arcs.append("text")
-            .attr("transform",function(d){ return "translate("+ (arc.centroid(d as unknown as d3.DefaultArcObject))  + ")"; })
+            .attr("transform",function(d){ 
+                var centroid = arc.centroid(d as unknown as d3.DefaultArcObject)
+                var heightOffset = (centroid[1]/radius) * Math.abs(centroid[1])
+                return "translate("+ (centroid[0]+centroid[0]/(radius*.02)) + "," + (centroid[1]+heightOffset)  + ")"; })
             .attr("text-anchor", "middle")
             .text(function(d){ 
                 return dataSet[data.indexOf(d.value)][percentField] 
-                + (!descriptionField? '' : (' ' + dataSet[data.indexOf(d.value)][descriptionField]))})
+                + (!descriptionField? '' : (' - ' + dataSet[data.indexOf(d.value)][descriptionField]))})
 
     };
 
-- 
cgit v1.2.3-70-g09d2


From 258d9f39bb2eb8b871ad01070eeab033b30c397b Mon Sep 17 00:00:00 2001
From: srichman333 <sarah_n_richman@brown.edu>
Date: Fri, 14 Jul 2023 15:17:03 -0400
Subject: pie chart groupings

---
 .../collections/collectionFreeForm/MarqueeView.tsx |  2 +-
 .../nodes/DataVizBox/components/Histogram.tsx      | 10 ++--
 .../views/nodes/DataVizBox/components/PieChart.tsx | 62 +++++++++++++++-------
 3 files changed, 50 insertions(+), 24 deletions(-)

diff --git a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
index 35b3ca5d8..fc737c4b9 100644
--- a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
+++ b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
@@ -200,7 +200,7 @@ export class MarqueeView extends React.Component<SubCollectionViewProps & Marque
         const eachCell = ns.join('\t').split('\t')
         let eachRow = []
         for (let i=1; i<eachCell.length; i++){
-            eachRow.push(eachCell[i]);
+            eachRow.push(eachCell[i].replace(/\,/g, ''));
             if (i % headers.length == 0){
                 csvRows.push(eachRow)
                 eachRow = [];
diff --git a/src/client/views/nodes/DataVizBox/components/Histogram.tsx b/src/client/views/nodes/DataVizBox/components/Histogram.tsx
index b6ae15709..7a866d742 100644
--- a/src/client/views/nodes/DataVizBox/components/Histogram.tsx
+++ b/src/client/views/nodes/DataVizBox/components/Histogram.tsx
@@ -91,7 +91,7 @@ export class Histogram extends React.Component<HistogramProps> {
         this._disposers.chartData = reaction(
             () => ({ dataSet: this._histogramData, w: this.width, h: this.height }),
             ({ dataSet, w, h }) => {
-                if (dataSet) {
+                if (dataSet!.length>0) {
                     this.drawChart(dataSet, w, h);
 
                     // redraw annotations when the chart data has changed, or the local or inherited selection has changed
@@ -226,10 +226,10 @@ export class Histogram extends React.Component<HistogramProps> {
             })
             return valid;
         })
-        var field = Object.keys(dataSet[0])[0]
+        var field = dataSet[0]? Object.keys(dataSet[0])[0]: undefined;
         const data = validData.map((d: { [x: string]: any; }) => {
-            if (this.numericalData) { return +d[field].replace(/\$/g, '').replace(/\%/g, '') }
-            return d[field]
+            if (this.numericalData) { return +d[field!].replace(/\$/g, '').replace(/\%/g, '') }
+            return d[field!]
         })
         return data;
     }
@@ -241,7 +241,7 @@ export class Histogram extends React.Component<HistogramProps> {
         var field = Object.keys(dataSet[0])[0]
         const data = this.data(dataSet);
         
-        let uniqueArr = [...new Set(data)]
+        let uniqueArr: unknown[] = [...new Set(data)]
         var numBins = uniqueArr.length
         var startingPoint = 0;
         var endingPoint = numBins;
diff --git a/src/client/views/nodes/DataVizBox/components/PieChart.tsx b/src/client/views/nodes/DataVizBox/components/PieChart.tsx
index 5b6bdc4cf..7d532e790 100644
--- a/src/client/views/nodes/DataVizBox/components/PieChart.tsx
+++ b/src/client/views/nodes/DataVizBox/components/PieChart.tsx
@@ -37,7 +37,7 @@ export class PieChart extends React.Component<PieChartProps> {
     private _disposers: { [key: string]: IReactionDisposer } = {};
     private _piechartRef: React.RefObject<HTMLDivElement> = React.createRef();
     private _piechartSvg: d3.Selection<SVGGElement, unknown, null, undefined> | undefined;
-    private numericalData: boolean = false;
+    private byCategory: boolean = true; // whether the data is organized by category or by specified number percentages/ratios
     @observable _currSelected: SelectedDataPoint | undefined = undefined;
     // TODO: nda - some sort of mapping that keeps track of the annotated points so we can easily remove when annotations list updates
 
@@ -45,7 +45,7 @@ export class PieChart extends React.Component<PieChartProps> {
         if (this.props.axes.length < 1) return [];
         if (this.props.axes.length < 2) {
             var ax0 = this.props.axes[0];
-            if (/\d/.test(this.props.pairs[0][ax0])){ this.numericalData = true }
+            if (/\d/.test(this.props.pairs[0][ax0])){ this.byCategory = false }
             return this.props.pairs
                 ?.filter(pair => (!this.incomingLinks.length ? true : Array.from(Object.keys(pair)).some(key => pair[key] && key.startsWith('select'))))
                 .map(pair => ({ [ax0]: (pair[this.props.axes[0]])}))
@@ -53,7 +53,7 @@ export class PieChart extends React.Component<PieChartProps> {
 
         var ax0 = this.props.axes[0];
         var ax1 = this.props.axes[1];
-        if (/\d/.test(this.props.pairs[0][ax0])) { this.numericalData = true;}
+        if (/\d/.test(this.props.pairs[0][ax0])) { this.byCategory = false;}
         return this.props.pairs
             ?.filter(pair => (!this.incomingLinks.length ? true : Array.from(Object.keys(pair)).some(key => pair[key] && key.startsWith('select'))))
             .map(pair => ({ [ax0]: (pair[this.props.axes[0]]), [ax1]: (pair[this.props.axes[1]]) }))
@@ -78,7 +78,7 @@ export class PieChart extends React.Component<PieChartProps> {
             .lastElement();
     }
     @computed get rangeVals(): { xMin?: number; xMax?: number; yMin?: number; yMax?: number } {
-        if (this.numericalData){
+        if (!this.byCategory){
             const data = this.data(this._piechartData);
             return {xMin: Math.min.apply(null, data), xMax: Math.max.apply(null, data), yMin:0, yMax:0}
         }
@@ -91,7 +91,7 @@ export class PieChart extends React.Component<PieChartProps> {
         this._disposers.chartData = reaction(
             () => ({ dataSet: this._piechartData, w: this.width, h: this.height }),
             ({ dataSet, w, h }) => {
-                if (dataSet) {
+                if (dataSet!.length>0) {
                     this.drawChart(dataSet, w, h);
 
                     // redraw annotations when the chart data has changed, or the local or inherited selection has changed
@@ -226,10 +226,10 @@ export class PieChart extends React.Component<PieChartProps> {
             })
             return valid;
         })
-        var field = Object.keys(dataSet[0])[0]
+        var field = dataSet[0]? Object.keys(dataSet[0])[0] : undefined;
         const data = validData.map((d: { [x: string]: any; }) => {
-            if (this.numericalData) { return +d[field].replace(/\$/g, '').replace(/\%/g, '').replace(/\</g, '') }
-            return d[field]
+            if (!this.byCategory) { return +d[field!].replace(/\$/g, '').replace(/\%/g, '').replace(/\</g, '') }
+            return d[field!]
         })
         return data;
     }
@@ -251,24 +251,38 @@ export class PieChart extends React.Component<PieChartProps> {
             .attr("transform",
                     "translate(" + (width/2 + this.props.margin.left) + "," + height/2 + ")");
 
-        var data = this.data(this._piechartData);
+        var data = this.data(dataSet);
+        var pieDataSet = dataSet;
+
         var pie = d3.pie();
         var arc = d3.arc()
             .innerRadius(0)
             .outerRadius(radius);
+        
+        if (this.byCategory){
+            let uniqueCategories = [...new Set(data)]
+            var pieStringDataSet: { frequency: any, label: any }[] = [];
+            for (let i=0; i<uniqueCategories.length; i++){
+                pieStringDataSet.push({frequency: 0, label: uniqueCategories[i]})
+            }
+            for (let i=0; i<data.length; i++){
+                let sliceData = pieStringDataSet.filter(each => each.label==data[i])
+                sliceData[0].frequency = sliceData[0].frequency + 1;
+            }
+            pieDataSet = pieStringDataSet
+            data = this.data(pieStringDataSet)
+        }
+        var trackDuplicates : {[key: string]: any} = {};
+        data.forEach((eachData: any) => !trackDuplicates[eachData]? trackDuplicates[eachData] = 0: null)
 
-        //Generate groups
-        var percentField = Object.keys(dataSet[0])[0]
-        var descriptionField = Object.keys(dataSet[0])[1]!
+        var percentField = Object.keys(pieDataSet[0])[0]
+        var descriptionField = Object.keys(pieDataSet[0])[1]!
         var arcs = g.selectAll("arc")
             .data(pie(data))
             .enter()
             .append("g")
         arcs.append("path")
-            .attr("fill", (data, i)=>{
-                let value=data.data;
-                return d3.schemeSet3[i]? d3.schemeSet3[i]: d3.schemeSet3[i%12];
-            })
+            .attr("fill", (data, i)=>{ return d3.schemeSet3[i]? d3.schemeSet3[i]: d3.schemeSet3[i%12] })
             .attr("d", arc);
         arcs.append("text")
             .attr("transform",function(d){ 
@@ -277,8 +291,20 @@ export class PieChart extends React.Component<PieChartProps> {
                 return "translate("+ (centroid[0]+centroid[0]/(radius*.02)) + "," + (centroid[1]+heightOffset)  + ")"; })
             .attr("text-anchor", "middle")
             .text(function(d){ 
-                return dataSet[data.indexOf(d.value)][percentField] 
-                + (!descriptionField? '' : (' - ' + dataSet[data.indexOf(d.value)][descriptionField]))})
+                var possibleDataPoints = pieDataSet.filter((each: { [x: string]: any | { valueOf(): number; }; }) => {
+                    try {
+                        return each[percentField].replace(/[^0-9]/g,"")==d.data.toString().replace(/[^0-9]/g,"")
+                    } catch (error) {
+                        return each[percentField]==d.data
+                    }})
+                var dataPoint;
+                if (possibleDataPoints.length==1) dataPoint = possibleDataPoints[0];
+                else{
+                    dataPoint = possibleDataPoints[trackDuplicates[d.data.toString()]]
+                    trackDuplicates[d.data.toString()] = trackDuplicates[d.data.toString()] + 1;
+                }
+                return dataPoint[percentField]! 
+                + (!descriptionField? '' : (' - ' + dataPoint[descriptionField]))!})
 
     };
 
-- 
cgit v1.2.3-70-g09d2


From 84b3012d81b403c4a2a7e7517f4fdfe727464a57 Mon Sep 17 00:00:00 2001
From: srichman333 <sarah_n_richman@brown.edu>
Date: Mon, 17 Jul 2023 15:00:52 -0400
Subject: start of click on pie charts

---
 .../views/nodes/DataVizBox/components/Chart.scss   |  6 +++
 .../views/nodes/DataVizBox/components/PieChart.tsx | 46 +++++++++++++++++++++-
 2 files changed, 50 insertions(+), 2 deletions(-)

diff --git a/src/client/views/nodes/DataVizBox/components/Chart.scss b/src/client/views/nodes/DataVizBox/components/Chart.scss
index 05bb1655d..aa005ea66 100644
--- a/src/client/views/nodes/DataVizBox/components/Chart.scss
+++ b/src/client/views/nodes/DataVizBox/components/Chart.scss
@@ -8,6 +8,12 @@
     .graph{
         overflow: visible;
     }
+    .slice {
+        
+    }
+    .hover {
+        stroke: black;
+    }
 
     .tooltip {
         // make the height width bigger
diff --git a/src/client/views/nodes/DataVizBox/components/PieChart.tsx b/src/client/views/nodes/DataVizBox/components/PieChart.tsx
index 7d532e790..0d3c74c32 100644
--- a/src/client/views/nodes/DataVizBox/components/PieChart.tsx
+++ b/src/client/views/nodes/DataVizBox/components/PieChart.tsx
@@ -252,7 +252,13 @@ export class PieChart extends React.Component<PieChartProps> {
                     "translate(" + (width/2 + this.props.margin.left) + "," + height/2 + ")");
 
         var data = this.data(dataSet);
-        var pieDataSet = dataSet;
+        var pieDataSet = dataSet.filter((d: { [x: string]: unknown; }) => {
+            var valid = true;
+            Object.keys(dataSet[0]).map(key => {
+                if (!d[key] || Number.isNaN(d[key])) valid = false;
+            })
+            return valid;
+        });
 
         var pie = d3.pie();
         var arc = d3.arc()
@@ -275,6 +281,40 @@ export class PieChart extends React.Component<PieChartProps> {
         var trackDuplicates : {[key: string]: any} = {};
         data.forEach((eachData: any) => !trackDuplicates[eachData]? trackDuplicates[eachData] = 0: null)
 
+        const onPointClick = action((e: any) => {
+            // check the 4 'corners' of each slice and see if the pointer is within those bounds to get the slice the user clicked on
+            const pointer = d3.pointer(e);
+            var selectedSlice;
+            var index = -1;
+            const selected = svg.selectAll('.slice').filter((d: any) => {
+                index++;
+                var p1 = [0,0];
+                var p3 = [arc.centroid(d)[0]*2, arc.centroid(d)[1]*2];
+                var p2 = [radius*Math.sin(d.startAngle), -radius*Math.cos(d.startAngle)];
+                var p4 = [radius*Math.sin(d.endAngle), -radius*Math.cos(d.endAngle)];
+
+                // draw an imaginary horizontal line from the pointer to see how many times it crosses a slice edge
+                var lineCrossCount = 0;
+                // if for all 4 lines
+                if (Math.min(p1[1], p2[1])<=pointer[1] && pointer[1]<=Math.max(p1[1], p2[1])){ // within y bounds
+                    if (pointer[0] <= (pointer[1]-p1[1])*(p2[0]-p1[0])/(p2[1]-p1[1])+p1[0]) lineCrossCount++; } // intercepts x
+                if (Math.min(p2[1], p3[1])<=pointer[1] && pointer[1]<=Math.max(p2[1], p3[1])){
+                    if (pointer[0] <= (pointer[1]-p2[1])*(p3[0]-p2[0])/(p3[1]-p2[1])+p2[0]) lineCrossCount++; }
+                if (Math.min(p3[1], p4[1])<=pointer[1] && pointer[1]<=Math.max(p3[1], p4[1])){
+                    if (pointer[0] <= (pointer[1]-p3[1])*(p4[0]-p3[0])/(p4[1]-p3[1])+p3[0]) lineCrossCount++; }
+                if (Math.min(p4[1], p1[1])<=pointer[1] && pointer[1]<=Math.max(p4[1], p1[1])){
+                    if (pointer[0] <= (pointer[1]-p4[1])*(p1[0]-p4[0])/(p1[1]-p4[1])+p4[0]) lineCrossCount++; }
+                if (lineCrossCount % 2 != 0) {
+                    selectedSlice = pieDataSet[index];
+                    return true;
+                }
+                return false;
+            });
+            console.log('selectedSlice', selectedSlice)
+            
+            selected.attr('class')=='slice hover'? selected.attr('class', 'slice'): selected.attr('class', 'slice hover')
+        });
+
         var percentField = Object.keys(pieDataSet[0])[0]
         var descriptionField = Object.keys(pieDataSet[0])[1]!
         var arcs = g.selectAll("arc")
@@ -283,7 +323,9 @@ export class PieChart extends React.Component<PieChartProps> {
             .append("g")
         arcs.append("path")
             .attr("fill", (data, i)=>{ return d3.schemeSet3[i]? d3.schemeSet3[i]: d3.schemeSet3[i%12] })
-            .attr("d", arc);
+            .attr("class", `${pieDataSet[0][percentField]} slice`)
+            .attr("d", arc)
+            .on('click', onPointClick)
         arcs.append("text")
             .attr("transform",function(d){ 
                 var centroid = arc.centroid(d as unknown as d3.DefaultArcObject)
-- 
cgit v1.2.3-70-g09d2


From 65ab8c985a86f18ebb51a269f20d7865dcfc6589 Mon Sep 17 00:00:00 2001
From: srichman333 <sarah_n_richman@brown.edu>
Date: Tue, 18 Jul 2023 10:50:16 -0400
Subject: click on histograms

---
 .../views/nodes/DataVizBox/components/Chart.scss      | 15 +++++++++++----
 .../views/nodes/DataVizBox/components/Histogram.tsx   | 19 ++++++++++++++++---
 .../views/nodes/DataVizBox/components/TableBox.tsx    |  5 +++--
 3 files changed, 30 insertions(+), 9 deletions(-)

diff --git a/src/client/views/nodes/DataVizBox/components/Chart.scss b/src/client/views/nodes/DataVizBox/components/Chart.scss
index aa005ea66..6c3d59879 100644
--- a/src/client/views/nodes/DataVizBox/components/Chart.scss
+++ b/src/client/views/nodes/DataVizBox/components/Chart.scss
@@ -9,10 +9,17 @@
         overflow: visible;
     }
     .slice {
-        
-    }
-    .hover {
-        stroke: black;
+        &.hover {
+            stroke: black;
+        }
+    }
+    
+    .histogram-bar{
+        outline: thin solid black;
+        fill: #69b3a2;
+        &.hover{
+            fill: grey;
+        }
     }
 
     .tooltip {
diff --git a/src/client/views/nodes/DataVizBox/components/Histogram.tsx b/src/client/views/nodes/DataVizBox/components/Histogram.tsx
index 7a866d742..34fc9ce82 100644
--- a/src/client/views/nodes/DataVizBox/components/Histogram.tsx
+++ b/src/client/views/nodes/DataVizBox/components/Histogram.tsx
@@ -315,7 +315,7 @@ export class Histogram extends React.Component<HistogramProps> {
         }
 
         const maxFrequency = d3.max(bins, function(d) { return d.length; })
-        
+
         var y = d3.scaleLinear()
             .range([height, 0]);
             y.domain([0, maxFrequency!]);
@@ -327,6 +327,20 @@ export class Histogram extends React.Component<HistogramProps> {
             .attr("transform", "translate(" + translateXAxis + ", " + height + ")")
             .call(xAxis)
 
+        const onPointClick = action((e: any) => {
+            var pointerX = d3.pointer(e)[0];
+            const selected = svg.selectAll('.histogram-bar').filter((d: any) => {
+                if ((d.x0*eachRectWidth ) <= pointerX && pointerX <= (d.x1*eachRectWidth )){
+                    console.log(d)
+                    return true
+                }
+                return false;
+            });
+            selected.attr('class')=='histogram-bar hover'? selected.attr('class', 'histogram-bar'): selected.attr('class', 'histogram-bar hover')
+        });
+
+        svg.on('click', onPointClick);
+
         // axis titles
         svg.append("text")
             .attr("transform", "translate(" + (width/2) + " ," + (height+40) + ")")
@@ -348,8 +362,7 @@ export class Histogram extends React.Component<HistogramProps> {
               .attr("transform", function(d) { return "translate(" + x(d.x0!) + "," + y(d.length) + ")"; })
               .attr("width", eachRectWidth)
               .attr("height", function(d) { return height - y(d.length); })
-              .attr("style", "outline: thin solid black;")
-              .style("fill", "#69b3a2")
+              .attr("class", 'histogram-bar')
     };
 
     render() {
diff --git a/src/client/views/nodes/DataVizBox/components/TableBox.tsx b/src/client/views/nodes/DataVizBox/components/TableBox.tsx
index d84e34d52..8c8264861 100644
--- a/src/client/views/nodes/DataVizBox/components/TableBox.tsx
+++ b/src/client/views/nodes/DataVizBox/components/TableBox.tsx
@@ -33,6 +33,7 @@ export class TableBox extends React.Component<TableBoxProps> {
                                     const header = React.createRef<HTMLElement>();
                                     return (
                                         <th
+                                            key={this.columns.indexOf(col)}
                                             ref={header as any}
                                             style={{
                                                 color: this.props.axes.slice().reverse().lastElement() === col ? 'green' : this.props.axes.lastElement() === col ? 'red' : undefined,
@@ -90,9 +91,9 @@ export class TableBox extends React.Component<TableBoxProps> {
                     <tbody>
                         {this.props.pairs?.map((p, i) => {
                             return (
-                                <tr className="table-row" onClick={action(e => (p['select' + this.props.docView?.()?.rootDoc![Id]] = !p['select' + this.props.docView?.()?.rootDoc![Id]]))}>
+                                <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 => (
-                                        <td style={{ fontWeight: p['select' + this.props.docView?.()?.rootDoc![Id]] ? 'bold' : '' }}>{p[col]}</td>
+                                        <td key={this.columns.indexOf(col)} style={{ fontWeight: p['select' + this.props.docView?.()?.rootDoc![Id]] ? 'bold' : '' }}>{p[col]}</td>
                                     ))}
                                 </tr>
                             );
-- 
cgit v1.2.3-70-g09d2


From 51718316b592e86c0009b7a27e1e32ba74d2488b Mon Sep 17 00:00:00 2001
From: srichman333 <sarah_n_richman@brown.edu>
Date: Tue, 18 Jul 2023 13:22:04 -0400
Subject: click to select for pie charts + some histograms

---
 src/client/views/nodes/DataVizBox/DataVizBox.scss  |  2 +-
 .../views/nodes/DataVizBox/components/Chart.scss   |  4 +++
 .../nodes/DataVizBox/components/Histogram.tsx      | 39 +++++++++++++++++++---
 .../nodes/DataVizBox/components/LineChart.tsx      |  2 +-
 .../views/nodes/DataVizBox/components/PieChart.tsx | 32 ++++++++++++++----
 5 files changed, 65 insertions(+), 14 deletions(-)

diff --git a/src/client/views/nodes/DataVizBox/DataVizBox.scss b/src/client/views/nodes/DataVizBox/DataVizBox.scss
index 424f8b0f1..b3cbc89aa 100644
--- a/src/client/views/nodes/DataVizBox/DataVizBox.scss
+++ b/src/client/views/nodes/DataVizBox/DataVizBox.scss
@@ -1,5 +1,5 @@
 .dataviz {
-    overflow: auto;
+    overflow: hidden;
     height: 100%;
 
     .datatype-button{
diff --git a/src/client/views/nodes/DataVizBox/components/Chart.scss b/src/client/views/nodes/DataVizBox/components/Chart.scss
index 6c3d59879..808300c2c 100644
--- a/src/client/views/nodes/DataVizBox/components/Chart.scss
+++ b/src/client/views/nodes/DataVizBox/components/Chart.scss
@@ -56,4 +56,8 @@
         // change the color of the circle element to be red
         fill: red;
     }
+
+    .selected-data{
+        text-align: center;
+    }
 }
diff --git a/src/client/views/nodes/DataVizBox/components/Histogram.tsx b/src/client/views/nodes/DataVizBox/components/Histogram.tsx
index 34fc9ce82..b8be9bd13 100644
--- a/src/client/views/nodes/DataVizBox/components/Histogram.tsx
+++ b/src/client/views/nodes/DataVizBox/components/Histogram.tsx
@@ -38,7 +38,7 @@ export class Histogram extends React.Component<HistogramProps> {
     private _histogramRef: React.RefObject<HTMLDivElement> = React.createRef();
     private _histogramSvg: d3.Selection<SVGGElement, unknown, null, undefined> | undefined;
     private numericalData: boolean = false;
-    @observable _currSelected: SelectedDataPoint | undefined = undefined;
+    @observable _currSelected: any | undefined = undefined;
     // TODO: nda - some sort of mapping that keeps track of the annotated points so we can easily remove when annotations list updates
 
     @computed get _histogramData() {
@@ -329,14 +329,33 @@ export class Histogram extends React.Component<HistogramProps> {
 
         const onPointClick = action((e: any) => {
             var pointerX = d3.pointer(e)[0];
+            var index = -1;
+            var sameAsCurrent: boolean;
             const selected = svg.selectAll('.histogram-bar').filter((d: any) => {
-                if ((d.x0*eachRectWidth ) <= pointerX && pointerX <= (d.x1*eachRectWidth )){
-                    console.log(d)
+                index++;
+                var left = this.numericalData? d.x0-1: d.x0;
+                var right = (this.numericalData && d.x0!=d.x1)? d.x1-1: d.x1;
+                if ((left*eachRectWidth ) <= pointerX && pointerX <= (right*eachRectWidth )){
+                    // var showSelected = !this.numericalData? dataSet[index] : this.props.pairs[index];
+                    var showSelected = dataSet[index]
+                    showSelected['frequency'] = d.length;
+                    console.log('showSelected', showSelected)
+                    console.log('current', this._currSelected)
+                    sameAsCurrent = this._currSelected? 
+                        (showSelected[Object.keys(showSelected)[0]]==this._currSelected![Object.keys(showSelected)[0]] 
+                      && showSelected[Object.keys(showSelected)[1]]==this._currSelected![Object.keys(showSelected)[1]])
+                        : false;
+                    this._currSelected = sameAsCurrent? undefined: showSelected;
                     return true
                 }
                 return false;
             });
-            selected.attr('class')=='histogram-bar hover'? selected.attr('class', 'histogram-bar'): selected.attr('class', 'histogram-bar hover')
+            // selected.attr('class')=='histogram-bar hover'? selected.attr('class', 'histogram-bar'): selected.attr('class', 'histogram-bar hover')
+            const elements = document.querySelectorAll('.histogram-bar');
+            for (let i = 0; i < elements.length; i++) {
+                elements[i].classList.remove('hover');
+            }
+            if (!sameAsCurrent!) selected.attr('class', 'histogram-bar hover');
         });
 
         svg.on('click', onPointClick);
@@ -367,10 +386,20 @@ export class Histogram extends React.Component<HistogramProps> {
 
     render() {
         
+        var selected: string;
+        if (this._currSelected){
+            selected = '{ ';
+            Object.keys(this._currSelected).map(key => {
+                key!=''? selected += key + ': ' + this._currSelected[key] + ', ': '';
+            })
+            selected = selected.substring(0, selected.length-2);
+            selected += ' }';
+        }
+        else selected = 'none';
         return (
             this.props.axes.length >= 1 && (this.incomingSelected? this.incomingSelected.length>0 : true) ? (
             <div ref={this._histogramRef} className="chart-container">
-                <span> {`Selected: ${Object.keys(this._histogramData[0])[0]}`}</span>
+                <span className={'selected-data'}> {`Selected: ${selected}`}</span>
             </div>
             ) : <span className="chart-container"> {'first use table view to select a column to graph'}</span>
         );
diff --git a/src/client/views/nodes/DataVizBox/components/LineChart.tsx b/src/client/views/nodes/DataVizBox/components/LineChart.tsx
index dfb9f54c1..cb6ba6fe7 100644
--- a/src/client/views/nodes/DataVizBox/components/LineChart.tsx
+++ b/src/client/views/nodes/DataVizBox/components/LineChart.tsx
@@ -339,7 +339,7 @@ export class LineChart extends React.Component<LineChartProps> {
         const selectedPt = this._currSelected ? `x: ${this._currSelected.x} y: ${this._currSelected.y}` : 'none';
         return (
             <div ref={this._lineChartRef} className="chart-container">
-                <span> {this.props.axes.length < 2 ? 'first use table view to select two axes to plot' : `Selected: ${selectedPt}`}</span>
+                <span className={'selected-data'}> {this.props.axes.length < 2 ? 'first use table view to select two axes to plot' : `Selected: ${selectedPt}`}</span>
             </div>
         );
     }
diff --git a/src/client/views/nodes/DataVizBox/components/PieChart.tsx b/src/client/views/nodes/DataVizBox/components/PieChart.tsx
index 0d3c74c32..6241e6221 100644
--- a/src/client/views/nodes/DataVizBox/components/PieChart.tsx
+++ b/src/client/views/nodes/DataVizBox/components/PieChart.tsx
@@ -38,7 +38,7 @@ export class PieChart extends React.Component<PieChartProps> {
     private _piechartRef: React.RefObject<HTMLDivElement> = React.createRef();
     private _piechartSvg: d3.Selection<SVGGElement, unknown, null, undefined> | undefined;
     private byCategory: boolean = true; // whether the data is organized by category or by specified number percentages/ratios
-    @observable _currSelected: SelectedDataPoint | undefined = undefined;
+    @observable _currSelected: any | undefined = undefined;
     // TODO: nda - some sort of mapping that keeps track of the annotated points so we can easily remove when annotations list updates
 
     @computed get _piechartData() {
@@ -284,8 +284,8 @@ export class PieChart extends React.Component<PieChartProps> {
         const onPointClick = action((e: any) => {
             // check the 4 'corners' of each slice and see if the pointer is within those bounds to get the slice the user clicked on
             const pointer = d3.pointer(e);
-            var selectedSlice;
             var index = -1;
+            var sameAsCurrent: boolean;
             const selected = svg.selectAll('.slice').filter((d: any) => {
                 index++;
                 var p1 = [0,0];
@@ -305,14 +305,22 @@ export class PieChart extends React.Component<PieChartProps> {
                 if (Math.min(p4[1], p1[1])<=pointer[1] && pointer[1]<=Math.max(p4[1], p1[1])){
                     if (pointer[0] <= (pointer[1]-p4[1])*(p1[0]-p4[0])/(p1[1]-p4[1])+p4[0]) lineCrossCount++; }
                 if (lineCrossCount % 2 != 0) {
-                    selectedSlice = pieDataSet[index];
+                    var showSelected = this.byCategory? pieDataSet[index] : this.props.pairs[index];
+                    sameAsCurrent = (this.byCategory && this._currSelected)? 
+                        (showSelected[Object.keys(showSelected)[0]]==this._currSelected![Object.keys(showSelected)[0]] 
+                      && showSelected[Object.keys(showSelected)[1]]==this._currSelected![Object.keys(showSelected)[1]])
+                        : 
+                        this._currSelected===showSelected;
+                    this._currSelected = sameAsCurrent? undefined: showSelected;
                     return true;
                 }
                 return false;
             });
-            console.log('selectedSlice', selectedSlice)
-            
-            selected.attr('class')=='slice hover'? selected.attr('class', 'slice'): selected.attr('class', 'slice hover')
+            const elements = document.querySelectorAll('.slice');
+            for (let i = 0; i < elements.length; i++) {
+                elements[i].classList.remove('hover');
+            }
+            if (!sameAsCurrent!) selected.attr('class', 'slice hover');
         });
 
         var percentField = Object.keys(pieDataSet[0])[0]
@@ -352,10 +360,20 @@ export class PieChart extends React.Component<PieChartProps> {
 
     render() {
 
+        var selected: string;
+        if (this._currSelected){
+            selected = '{ ';
+            Object.keys(this._currSelected).map(key => {
+                key!=''? selected += key + ': ' + this._currSelected[key] + ', ': '';
+            })
+            selected = selected.substring(0, selected.length-2);
+            selected += ' }';
+        }
+        else selected = 'none';
         return (
             this.props.axes.length >= 1 && (this.incomingSelected? this.incomingSelected.length>0 : true) ? (
             <div ref={this._piechartRef} className="chart-container">
-                <span> {`Selected: ${Object.keys(this._piechartData[0])[0]}`}</span>
+                <span className={'selected-data'}> {`Selected: ${selected}`}</span>
             </div>
             ) : <span className="chart-container"> {'first use table view to select a column to graph'}</span>
         );
-- 
cgit v1.2.3-70-g09d2


From e7d914710dfe0aef07f35a0ea54c16adcf08600c Mon Sep 17 00:00:00 2001
From: srichman333 <sarah_n_richman@brown.edu>
Date: Tue, 18 Jul 2023 13:31:55 -0400
Subject: Update package-lock.json

---
 package-lock.json | 726 +++++++++++++++++++++++++++---------------------------
 1 file changed, 363 insertions(+), 363 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 3ac6c81d1..77215cc1b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3270,7 +3270,7 @@
         "@types/bcrypt-nodejs": {
             "version": "0.0.30",
             "resolved": "https://registry.npmjs.org/@types/bcrypt-nodejs/-/bcrypt-nodejs-0.0.30.tgz",
-            "integrity": "sha1-TN2WtJKTs5MhIuS34pVD415rrlg=",
+            "integrity": "sha512-gSWCu7EOXhcM0FYM8tanV0deaX1VM07sgBS8dSUmgnAQ5/3Xn6k+mWF+ZfE+c/OCW14IVnNdTOKcHgvL78oDFQ==",
             "dev": true
         },
         "@types/bezier-js": {
@@ -4481,7 +4481,7 @@
         "@types/strip-bom": {
             "version": "3.0.0",
             "resolved": "https://registry.npmjs.org/@types/strip-bom/-/strip-bom-3.0.0.tgz",
-            "integrity": "sha1-FKjsOVbC6B7bdSB5CuzyHCkK69I=",
+            "integrity": "sha512-xevGOReSYGM7g/kUBZzPqCrR/KYAo+F0yiPc85WFTJa0MSLtyFTVTU6cJu/aV4mid7IffDIWqo69THF2o4JiEQ==",
             "dev": true
         },
         "@types/strip-json-comments": {
@@ -4522,7 +4522,7 @@
         "@types/typescript": {
             "version": "2.0.0",
             "resolved": "https://registry.npmjs.org/@types/typescript/-/typescript-2.0.0.tgz",
-            "integrity": "sha1-xDNTnJi64oaCswfqp6D9IRW4PCg=",
+            "integrity": "sha512-WMEWfMISiJ2QKyk5/dSdgL0ZwP//PZj0jmDU0hMh51FmLq4WIYzjlngsUQZXejQL+QtkXJUOGjb3G3UCvgZuSQ==",
             "dev": true,
             "requires": {
                 "typescript": "*"
@@ -4856,7 +4856,7 @@
         "Base64": {
             "version": "0.2.1",
             "resolved": "https://registry.npmjs.org/Base64/-/Base64-0.2.1.tgz",
-            "integrity": "sha1-ujpCMHCOGGcFBl5mur3Uw1z2ACg="
+            "integrity": "sha512-reGEWshDmTDQDsCec/HduOO9Wyj6yMOupMfhIf3ugN1TDlK2NQW4DDJSqNNtp380SNcvRfXtO8HSCQot0d0SMw=="
         },
         "D": {
             "version": "1.0.0",
@@ -5105,7 +5105,7 @@
         "any-promise": {
             "version": "1.3.0",
             "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz",
-            "integrity": "sha1-q8av7tzqUugJzcA3au0845Y10X8="
+            "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A=="
         },
         "anymatch": {
             "version": "2.0.0",
@@ -5258,7 +5258,7 @@
         "arr-diff": {
             "version": "4.0.0",
             "resolved": "https://registry.npmjs.org/arr-diff/-/arr-diff-4.0.0.tgz",
-            "integrity": "sha1-1kYQdP6/7HHn4VI1dhoyml3HxSA="
+            "integrity": "sha512-YVIQ82gZPGBebQV/a8dar4AitzCQs0jjXwMPZllpXMaGjXPYVUawSxQrRsjhjupyVxEvbHgUmIhKVlND+j02kA=="
         },
         "arr-flatten": {
             "version": "1.1.0",
@@ -5268,7 +5268,7 @@
         "arr-union": {
             "version": "3.1.0",
             "resolved": "https://registry.npmjs.org/arr-union/-/arr-union-3.1.0.tgz",
-            "integrity": "sha1-45sJrqne+Gao8gbiiK9jkZuuOcQ="
+            "integrity": "sha512-sKpyeERZ02v1FeCZT8lrfJq5u6goHCtpTAzPwJYe7c8SPFOboNjNg1vz2L4VTn9T4PQxEx13TbXLmYUcS6Ug7Q=="
         },
         "array-back": {
             "version": "2.0.0",
@@ -5370,7 +5370,7 @@
         "array-flatten": {
             "version": "1.1.1",
             "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz",
-            "integrity": "sha1-ml9pkFGx5wczKPKgCJaLZOopVdI="
+            "integrity": "sha512-PCVAQswWemu6UdxsDFFX/+gVeYqKAod3D3UVm91jHwynguOwAvYPhx8nNlM++NqRcK6CxxpUafjmhIdKiHibqg=="
         },
         "array-includes": {
             "version": "3.1.6",
@@ -5403,7 +5403,7 @@
         "array-unique": {
             "version": "0.3.2",
             "resolved": "https://registry.npmjs.org/array-unique/-/array-unique-0.3.2.tgz",
-            "integrity": "sha1-qJS3XUvE9s1nnvMkSp/Y9Gri1Cg="
+            "integrity": "sha512-SleRWjh9JUud2wH1hPs9rZBZ33H6T9HOiL0uwGnGx9FpE6wKGyfWugmbkEOIs6qWrZhg0LWeLziLrEwQJhs5mQ=="
         },
         "array.prototype.flat": {
             "version": "1.3.1",
@@ -5480,7 +5480,7 @@
         "assert-plus": {
             "version": "1.0.0",
             "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz",
-            "integrity": "sha1-8S4PPF13sLHN2RRpQuTpbB5N1SU="
+            "integrity": "sha512-NfJ4UzBCcQGLDlQq7nHxH+tv3kyZ0hHQqF5BO6J7tNJeP5do1llPr8dZ8zHonfhAu0PHAdMkSo+8o0wxg9lZWw=="
         },
         "assertion-error": {
             "version": "1.1.0",
@@ -5490,7 +5490,7 @@
         "assign-symbols": {
             "version": "1.0.0",
             "resolved": "https://registry.npmjs.org/assign-symbols/-/assign-symbols-1.0.0.tgz",
-            "integrity": "sha1-WWZ/QfrdTyDMvCu5a41Pf3jsA2c="
+            "integrity": "sha512-Q+JC7Whu8HhmTdBph/Tq59IoRtoy6KAm5zzPv00WdujX82lbAL8K7WVjne7vdCsAmbF4AYaDOPyO3k0kl8qIrw=="
         },
         "ast-types-flow": {
             "version": "0.0.7",
@@ -5520,7 +5520,7 @@
         "async-foreach": {
             "version": "0.1.3",
             "resolved": "https://registry.npmjs.org/async-foreach/-/async-foreach-0.1.3.tgz",
-            "integrity": "sha1-NhIfhFwFeBct5Bmpfb6x0W7DRUI="
+            "integrity": "sha512-VUeSMD8nEGBWaZK4lizI1sf3yEC7pnAQ/mrI7pC2fBz2s/tq5jWWEngTwaf0Gruu/OoXRGLGg1XFqpYBiGTYJA=="
         },
         "async-limiter": {
             "version": "1.0.1",
@@ -5531,7 +5531,7 @@
         "asynckit": {
             "version": "0.4.0",
             "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
-            "integrity": "sha1-x57Zf380y48robyXkLzDZkdLS3k="
+            "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
         },
         "atob": {
             "version": "2.1.2",
@@ -5581,7 +5581,7 @@
         "aws-sign2": {
             "version": "0.7.0",
             "resolved": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.7.0.tgz",
-            "integrity": "sha1-tG6JCTSpWR8tL2+G1+ap8bP+dqg="
+            "integrity": "sha512-08kcGqnYf/YmjoRhfxyu+CLxBjUtHLXLXX/vUfx9l2LYzG3c1m61nrpyFUZI6zeS+Li/wWMMidD9KgrqtGq3mA=="
         },
         "aws4": {
             "version": "1.12.0",
@@ -5659,7 +5659,7 @@
         "babel": {
             "version": "6.23.0",
             "resolved": "https://registry.npmjs.org/babel/-/babel-6.23.0.tgz",
-            "integrity": "sha1-0NHn2APpdHZb7qMjLU4VPA77kPQ="
+            "integrity": "sha512-ZDcCaI8Vlct8PJ3DvmyqUz+5X2Ylz3ZuuItBe/74yXosk2dwyVo/aN7MCJ8HJzhnnJ+6yP4o+lDgG9MBe91DLA=="
         },
         "babel-code-frame": {
             "version": "6.26.0",
@@ -5818,12 +5818,12 @@
         "babel-plugin-syntax-jsx": {
             "version": "6.18.0",
             "resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz",
-            "integrity": "sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY="
+            "integrity": "sha512-qrPaCSo9c8RHNRHIotaufGbuOBN8rtdC4QrrFFc43vyWCCz7Kl7GL1PGaXtMGQZUXrkCjNEgxDfmAuAabr/rlw=="
         },
         "babel-runtime": {
             "version": "6.26.0",
             "resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.26.0.tgz",
-            "integrity": "sha1-llxwWGaOgrVde/4E/yM3vItWR/4=",
+            "integrity": "sha512-ITKNuq2wKlW1fJg9sSW52eepoYgZBggvOAHC0u/CYu/qxQ9EVzThCgR69BnSXLHjy2f7SY5zaQ4yt7H9ZVxY2g==",
             "requires": {
                 "core-js": "^2.4.0",
                 "regenerator-runtime": "^0.11.0"
@@ -5896,7 +5896,7 @@
                 "define-property": {
                     "version": "1.0.0",
                     "resolved": "https://registry.npmjs.org/define-property/-/define-property-1.0.0.tgz",
-                    "integrity": "sha1-dp66rz9KY6rTr56NMEybvnm/sOY=",
+                    "integrity": "sha512-cZTYKFWspt9jZsMscWo8sc/5lbPC9Q0N5nBLgb+Yd915iL3udB1uFgS3B8YCx66UVHq018DAVFoee7x+gxggeA==",
                     "requires": {
                         "is-descriptor": "^1.0.0"
                     }
@@ -5932,7 +5932,7 @@
         "base16": {
             "version": "1.0.0",
             "resolved": "https://registry.npmjs.org/base16/-/base16-1.0.0.tgz",
-            "integrity": "sha1-4pf2DX7BAUp6lxo568ipjAtoHnA="
+            "integrity": "sha512-pNdYkNPiJUnEhnfXV56+sQy8+AaPcG3POZAUnwr4EeqCUZFz4u2PePbo3e5Gj4ziYPCWGUZT9RHisvJKnwFuBQ=="
         },
         "base64-arraybuffer": {
             "version": "0.1.4",
@@ -5957,18 +5957,18 @@
         "batch": {
             "version": "0.6.1",
             "resolved": "https://registry.npmjs.org/batch/-/batch-0.6.1.tgz",
-            "integrity": "sha1-3DQxT05nkxgJP8dgJyUl+UvyXBY=",
+            "integrity": "sha512-x+VAiMRL6UPkx+kudNvxTl6hB2XNNCG2r+7wixVfIYwu/2HKRXimwQyaumLjMveWvT2Hkd/cAJw+QBMfJ/EKVw==",
             "dev": true
         },
         "bcrypt-nodejs": {
             "version": "0.0.3",
             "resolved": "https://registry.npmjs.org/bcrypt-nodejs/-/bcrypt-nodejs-0.0.3.tgz",
-            "integrity": "sha1-xgkX8m3CNWYVZsaBBhwwPCsohCs="
+            "integrity": "sha512-NmTbLm867btBHCBZ222FQXkQKzecB0KG6pTXFa6NeTVZaSnLfCsx7EK2PL3J+kX8xJThUquEBbhimRCKKZX9zA=="
         },
         "bcrypt-pbkdf": {
             "version": "1.0.2",
             "resolved": "https://registry.npmjs.org/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.2.tgz",
-            "integrity": "sha1-pDAdOJtqQ/m2f/PKEaP2Y342Dp4=",
+            "integrity": "sha512-qeFIXtP4MSoi6NLqO12WfqARWWuCKi2Rn/9hJLEmtB5yTNr9DqFWkJRCf2qShWzPeAMRnOgCrq0sg/KLv5ES9w==",
             "requires": {
                 "tweetnacl": "^0.14.3"
             }
@@ -5981,7 +5981,7 @@
         "bezier-curve": {
             "version": "1.0.0",
             "resolved": "https://registry.npmjs.org/bezier-curve/-/bezier-curve-1.0.0.tgz",
-            "integrity": "sha1-o9+v6rEqlMRicw1QeYxSqEBdc3k="
+            "integrity": "sha512-h6uZJ6qdFfswS1rIRericgouhTeiVi/MnH10OKtCu2IZzXa+ZcjaxRLHY4u/evRsJcxYbbiNkgWQj2Z4UIcpEQ=="
         },
         "bezier-js": {
             "version": "4.1.1",
@@ -6120,7 +6120,7 @@
         "boolbase": {
             "version": "1.0.0",
             "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
-            "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24="
+            "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww=="
         },
         "bootstrap": {
             "version": "4.6.2",
@@ -6182,7 +6182,7 @@
                 "extend-shallow": {
                     "version": "2.0.1",
                     "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
-                    "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
+                    "integrity": "sha512-zCnTtlxNoAiDc3gqY2aYAWFx7XWWiasuF2K8Me5WbN8otHKTUKBwjPtNpRs/rbUZm7KxWAaNj7P1a/p52GbVug==",
                     "requires": {
                         "is-extendable": "^0.1.0"
                     }
@@ -6730,7 +6730,7 @@
         "browser-assert": {
             "version": "1.2.1",
             "resolved": "https://registry.npmjs.org/browser-assert/-/browser-assert-1.2.1.tgz",
-            "integrity": "sha1-mqpaKox0aFwq4Fv+Ru/WBvBowgA="
+            "integrity": "sha512-nfulgvOR6S4gt9UKCeGJOuSGBPGiFT6oQ/2UBnvTY/5aQ1PnksW72fhZkM30DzoRRv2WpwZf1vHHEr3mtuXIWQ=="
         },
         "browser-process-hrtime": {
             "version": "1.0.0",
@@ -6774,7 +6774,7 @@
         "buffer-crc32": {
             "version": "0.2.13",
             "resolved": "https://registry.npmjs.org/buffer-crc32/-/buffer-crc32-0.2.13.tgz",
-            "integrity": "sha1-DTM+PwDqxQqhRUq9MO+MKl2ackI="
+            "integrity": "sha512-VO9Ht/+p3SN7SKWqcrgEzjGbRSJYTx+Q1pTQC0wrWqHx0vpJraQ6GtHx8tvcg1rlK1byhU5gccxgOgj7B0TDkQ=="
         },
         "buffer-equal-constant-time": {
             "version": "1.0.1",
@@ -6800,7 +6800,7 @@
         "built-in-math-eval": {
             "version": "0.3.0",
             "resolved": "https://registry.npmjs.org/built-in-math-eval/-/built-in-math-eval-0.3.0.tgz",
-            "integrity": "sha1-JA3CHLOJQ5WIxhxGDrAHZJfvxBw=",
+            "integrity": "sha512-5XD5cujru60ooKJ4sGZqoH5v2Xvgw7ezV54gJX/OnPkgDKoH3BnlMEi8xW6hl8xaEjxKHebgrsawroeZnGwIMA==",
             "requires": {
                 "math-codegen": "^0.3.5"
             }
@@ -6923,7 +6923,7 @@
         "caller-callsite": {
             "version": "2.0.0",
             "resolved": "https://registry.npmjs.org/caller-callsite/-/caller-callsite-2.0.0.tgz",
-            "integrity": "sha1-hH4PzgoiN1CpoCfFSzNzGtMVQTQ=",
+            "integrity": "sha512-JuG3qI4QOftFsZyOn1qq87fq5grLIyk1JYd5lJmdA+fG7aQ9pA/i3JIJGcO3q0MrRcHlOt1U+ZeHW8Dq9axALQ==",
             "requires": {
                 "callsites": "^2.0.0"
             },
@@ -6931,14 +6931,14 @@
                 "callsites": {
                     "version": "2.0.0",
                     "resolved": "https://registry.npmjs.org/callsites/-/callsites-2.0.0.tgz",
-                    "integrity": "sha1-BuuE8A7qQT2oav/vrL/7Ngk7PFA="
+                    "integrity": "sha512-ksWePWBloaWPxJYQ8TL0JHvtci6G5QTKwQ95RcWAa/lzoAKuAOflGdAK92hpHXjkwb8zLxoLNUoNYZgVsaJzvQ=="
                 }
             }
         },
         "caller-path": {
             "version": "2.0.0",
             "resolved": "https://registry.npmjs.org/caller-path/-/caller-path-2.0.0.tgz",
-            "integrity": "sha1-Ro+DBE42mrIBD6xfBs7uFbsssfQ=",
+            "integrity": "sha512-MCL3sf6nCSXOwCTzvPKhN18TU7AHTvdtam8DAogxcrJ8Rjfbbg7Lgng64H9Iy+vUV6VGFClN/TyxBkAebLRR4A==",
             "requires": {
                 "caller-callsite": "^2.0.0"
             }
@@ -7006,7 +7006,7 @@
         "caseless": {
             "version": "0.12.0",
             "resolved": "https://registry.npmjs.org/caseless/-/caseless-0.12.0.tgz",
-            "integrity": "sha1-G2gcIf+EAzyCZUMJBolCDRhxUdw="
+            "integrity": "sha512-4tYFyifaFfGacoiObjJegolkwSU4xQNGbVgUiNYVUxbQ2x2lUsFvY4hVgVzGiIe6WLOPqycWXA40l+PWsxthUw=="
         },
         "ccount": {
             "version": "2.0.1",
@@ -7083,12 +7083,12 @@
         "check-error": {
             "version": "1.0.2",
             "resolved": "https://registry.npmjs.org/check-error/-/check-error-1.0.2.tgz",
-            "integrity": "sha1-V00xLt2Iu13YkS6Sht1sCu1KrII="
+            "integrity": "sha512-BrgHpW9NURQgzoNyjfq0Wu6VFO6D7IZEmJNdtgNqpzGG8RuNFHt2jQxWlAs4HMe119chBnv+34syEZtc6IhLtA=="
         },
         "child_process": {
             "version": "1.0.2",
             "resolved": "https://registry.npmjs.org/child_process/-/child_process-1.0.2.tgz",
-            "integrity": "sha1-sffn/HPSXn/R1FWtyU4UODAYK1o="
+            "integrity": "sha512-Wmza/JzL0SiWz7kl6MhIKT5ceIlnFPJX+lwUGj7Clhy5MMldsSoJR0+uvRzOS5Kv45Mq7t1PoE8TsOA9bzvb6g=="
         },
         "chokidar": {
             "version": "2.1.8",
@@ -7137,7 +7137,7 @@
         "clamp": {
             "version": "1.0.1",
             "resolved": "https://registry.npmjs.org/clamp/-/clamp-1.0.1.tgz",
-            "integrity": "sha1-ZqDmQBGBbjcZaCj9yMjBRzEshjQ="
+            "integrity": "sha512-kgMuFyE78OC6Dyu3Dy7vcx4uy97EIbVxJB/B0eJ3bUNAkwdNcxYzgKltnyADiYwsR7SEqkkUPsEUT//OVS6XMA=="
         },
         "class-transformer": {
             "version": "0.2.3",
@@ -7158,7 +7158,7 @@
                 "define-property": {
                     "version": "0.2.5",
                     "resolved": "https://registry.npmjs.org/define-property/-/define-property-0.2.5.tgz",
-                    "integrity": "sha1-w1se+RjsPJkPmlvFe+BKrOxcgRY=",
+                    "integrity": "sha512-Rr7ADjQZenceVOAKop6ALkkRAmH1A4Gx9hV/7ZujPUN2rkATqFO0JZLZInbAjpZYoJ1gUx8MRMQVkYemcbMSTA==",
                     "requires": {
                         "is-descriptor": "^0.1.0"
                     }
@@ -7208,7 +7208,7 @@
         "clipboard": {
             "version": "1.7.1",
             "resolved": "https://registry.npmjs.org/clipboard/-/clipboard-1.7.1.tgz",
-            "integrity": "sha1-Ng1taUbpmnof7zleQrqStem1oWs=",
+            "integrity": "sha512-smkaRaIQsrnKN1F3wd1/vY9Q+DeR4L8ZCXKeHCFC2j8RZuSBbuImcLdnIO4GTxmzJxQuDGNKkyfpGoPW7Ua5bQ==",
             "requires": {
                 "good-listener": "^1.2.2",
                 "select": "^1.1.2",
@@ -7283,7 +7283,7 @@
         "clj-fuzzy": {
             "version": "0.3.3",
             "resolved": "https://registry.npmjs.org/clj-fuzzy/-/clj-fuzzy-0.3.3.tgz",
-            "integrity": "sha1-seU0MJHFIC28UlMoY+HEp4RX8D0="
+            "integrity": "sha512-9cyh9A8+OphDZeKIG21MgyDHWDkWxTvagwvFLVjtdi6eToFENF7iDLlKwhHrnBQRSQwprKNhazG053nE/UgwfQ=="
         },
         "clone-deep": {
             "version": "4.0.1",
@@ -7318,7 +7318,7 @@
         "collection-visit": {
             "version": "1.0.0",
             "resolved": "https://registry.npmjs.org/collection-visit/-/collection-visit-1.0.0.tgz",
-            "integrity": "sha1-S8A3PBZLwykbTTaMgpzxqApZ3KA=",
+            "integrity": "sha512-lNkKvzEeMBBjUGHZ+q6z9pSJla0KWAQPvtzhEV9+iGyQYG+pBpl7xKDhxoNSOZH2hhv0v5k0y2yAM4o4SjoSkw==",
             "requires": {
                 "map-visit": "^1.0.0",
                 "object-visit": "^1.0.0"
@@ -7344,7 +7344,7 @@
         "color-name": {
             "version": "1.1.3",
             "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
-            "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU="
+            "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw=="
         },
         "color-string": {
             "version": "1.9.1",
@@ -7479,7 +7479,7 @@
                 "bytes": {
                     "version": "3.0.0",
                     "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.0.0.tgz",
-                    "integrity": "sha1-0ygVQE1olpn4Wk6k+odV3ROpYEg=",
+                    "integrity": "sha512-pMhOfFDPiv9t5jjIXkHosWmkSyQbvsgEVNkz0ERHbuLh2T/7j4Mqqpz523Fe8MVY89KC6Sh/QfS2sM+SjgFDcw==",
                     "dev": true
                 },
                 "debug": {
@@ -7494,7 +7494,7 @@
                 "ms": {
                     "version": "2.0.0",
                     "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-                    "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
+                    "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
                     "dev": true
                 }
             }
@@ -7502,7 +7502,7 @@
         "concat-map": {
             "version": "0.0.1",
             "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
-            "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s="
+            "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg=="
         },
         "concat-stream": {
             "version": "1.6.2",
@@ -7568,7 +7568,7 @@
         "connect-flash": {
             "version": "0.1.1",
             "resolved": "https://registry.npmjs.org/connect-flash/-/connect-flash-0.1.1.tgz",
-            "integrity": "sha1-2GMPJtlaf4UfmVax6MxnMvO2qjA="
+            "integrity": "sha512-2rcfELQt/ZMP+SM/pG8PyhJRaLKp+6Hk2IUBNkEit09X+vwn3QsAL3ZbYtxUn7NVPzbMTSLRDhqe0B/eh30RYA=="
         },
         "connect-history-api-fallback": {
             "version": "1.6.0",
@@ -7626,7 +7626,7 @@
         "console-control-strings": {
             "version": "1.1.0",
             "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz",
-            "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4="
+            "integrity": "sha512-ty/fTekppD2fIwRvnZAVdeOiGd1c7YXEixbgJTNzqcxJWKQnjJ/V1bNEEE6hygpM3WjwHFUVK6HTjWSzV4a8sQ=="
         },
         "constantinople": {
             "version": "3.1.2",
@@ -7707,7 +7707,7 @@
         "cookie-signature": {
             "version": "1.0.6",
             "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz",
-            "integrity": "sha1-4wOogrNCzD7oylE6eZmXNNqzriw="
+            "integrity": "sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ=="
         },
         "cookies": {
             "version": "0.8.0",
@@ -7752,7 +7752,7 @@
         "copy-descriptor": {
             "version": "0.1.1",
             "resolved": "https://registry.npmjs.org/copy-descriptor/-/copy-descriptor-0.1.1.tgz",
-            "integrity": "sha1-Z29us8OZl8LuGsOpJP1hJHSPV40="
+            "integrity": "sha512-XgZ0pFcakEUlbwQEVNg3+QAis1FyTL3Qel9FYy8pSkQqoG3PNoT0bOCQtOXcOkur21r2Eq2kI+IE+gsmAEVlYw=="
         },
         "copy-webpack-plugin": {
             "version": "4.6.0",
@@ -7969,7 +7969,7 @@
         "crypto-random-string": {
             "version": "1.0.0",
             "resolved": "https://registry.npmjs.org/crypto-random-string/-/crypto-random-string-1.0.0.tgz",
-            "integrity": "sha1-ojD2T1aDEOFJgAmUB5DsmVRbyn4="
+            "integrity": "sha512-GsVpkFPlycH7/fRR7Dhcmnoii54gV1nz7y4CWyeFS14N+JVBBhY+r8amRHE4BwSYal7BPTDp8isvAlCxyFt3Hg=="
         },
         "css-box-model": {
             "version": "1.2.1",
@@ -7982,7 +7982,7 @@
         "css-color-keywords": {
             "version": "1.0.0",
             "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz",
-            "integrity": "sha1-/qJhbcZ2spYmhrOvjb2+GAskTgU="
+            "integrity": "sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg=="
         },
         "css-in-js-utils": {
             "version": "2.0.1",
@@ -8448,7 +8448,7 @@
         "dashdash": {
             "version": "1.14.1",
             "resolved": "https://registry.npmjs.org/dashdash/-/dashdash-1.14.1.tgz",
-            "integrity": "sha1-hTz6D3y+L+1d4gMmuN1YEDX24vA=",
+            "integrity": "sha512-jRFi8UDGo6j+odZiEpjazZaWqEal3w/basFjQHQEwVtZJGDpxbH1MeYluwCS8Xq5wmLJooDlMgvVarmWfGM44g==",
             "requires": {
                 "assert-plus": "^1.0.0"
             }
@@ -8500,7 +8500,7 @@
         "de-indent": {
             "version": "1.0.2",
             "resolved": "https://registry.npmjs.org/de-indent/-/de-indent-1.0.2.tgz",
-            "integrity": "sha1-sgOOhG3DO6pXlhKNCAS0VbjB4h0="
+            "integrity": "sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg=="
         },
         "debounce": {
             "version": "1.2.1",
@@ -8518,7 +8518,7 @@
         "decamelize": {
             "version": "1.2.0",
             "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz",
-            "integrity": "sha1-9lNNFRSCabIDUue+4m9QH5oZEpA="
+            "integrity": "sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA=="
         },
         "decimal.js-light": {
             "version": "2.5.1",
@@ -8757,7 +8757,7 @@
         "delayed-stream": {
             "version": "1.0.0",
             "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
-            "integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk="
+            "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ=="
         },
         "delegate": {
             "version": "3.2.0",
@@ -8767,7 +8767,7 @@
         "delegates": {
             "version": "1.0.0",
             "resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz",
-            "integrity": "sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o="
+            "integrity": "sha512-bd2L678uiWATM6m5Z1VzNCErI3jiGzt6HGY8OVICs40JQq/HALfbyNJmp0UDakEY4pMMaN0Ly5om/B1VI/+xfQ=="
         },
         "denque": {
             "version": "1.5.1",
@@ -8870,7 +8870,7 @@
                 "import-fresh": {
                     "version": "2.0.0",
                     "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-2.0.0.tgz",
-                    "integrity": "sha1-2BNVwVYS04bGH53dOSLUMEgipUY=",
+                    "integrity": "sha512-eZ5H8rcgYazHbKC3PG4ClHNykCSxtAhxSSEM+2mb+7evD2CKF5V7c0dNum7AdpDh0ZdICwZY9sRSn8f+KH96sg==",
                     "requires": {
                         "caller-path": "^2.0.0",
                         "resolve-from": "^3.0.0"
@@ -8905,7 +8905,7 @@
                 "parse-json": {
                     "version": "4.0.0",
                     "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-4.0.0.tgz",
-                    "integrity": "sha1-vjX1Qlvh9/bHRxhPmKeIy5lHfuA=",
+                    "integrity": "sha512-aOIos8bujGN93/8Ox/jPLh7RwVnPEysynVFE+fQZyg6jKELEHwzgKdLRFHUgXJL6kylijVSBC4BvN9OmsB48Rw==",
                     "requires": {
                         "error-ex": "^1.3.1",
                         "json-parse-better-errors": "^1.0.1"
@@ -8919,7 +8919,7 @@
                 "resolve-from": {
                     "version": "3.0.0",
                     "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-3.0.0.tgz",
-                    "integrity": "sha1-six699nWiBvItuZTM17rywoYh0g="
+                    "integrity": "sha512-GnlH6vxLymXJNMBo7XP1fJIzBFbdYt49CuTwmB/6N53t+kMPRMFKz783LlQ4tv28XoQfMWinAJX6WCGf2IlaIw=="
                 },
                 "string-width": {
                     "version": "4.2.3",
@@ -8991,7 +8991,7 @@
         "deps-regex": {
             "version": "0.1.4",
             "resolved": "https://registry.npmjs.org/deps-regex/-/deps-regex-0.1.4.tgz",
-            "integrity": "sha1-UYZnt2kUYKXn4KNBvnbrfOgJAYQ="
+            "integrity": "sha512-3tzwGYogSJi8HoG93R5x9NrdefZQOXgHgGih/7eivloOq6yC6O+yoFxZnkgP661twvfILONfoKRdF9GQOGx2RA=="
         },
         "dequal": {
             "version": "2.0.3",
@@ -9196,7 +9196,7 @@
         "double-bits": {
             "version": "1.1.1",
             "resolved": "https://registry.npmjs.org/double-bits/-/double-bits-1.1.1.tgz",
-            "integrity": "sha1-WKu6RUlNpND6Nrc60RoobJGEscY="
+            "integrity": "sha512-BCLEIBq0O/DWoA7BsCu/R+RP0ZXiowP8BhtJT3qeuuQEBpnS8LK/Wo6UTJQv6v8mK1fj8n90YziHLwGdM5whSg=="
         },
         "duplexer3": {
             "version": "0.1.5",
@@ -9235,7 +9235,7 @@
         "dynamic-dedupe": {
             "version": "0.3.0",
             "resolved": "https://registry.npmjs.org/dynamic-dedupe/-/dynamic-dedupe-0.3.0.tgz",
-            "integrity": "sha1-BuRMIj9eTpTXjvnbI6ZRXOL5YqE=",
+            "integrity": "sha512-ssuANeD+z97meYOqd50e04Ze5qp4bPqo8cCkI4TRjZkzAUgIDTrXV1R8QCdINpiI+hw14+rYazvTRdQrz0/rFQ==",
             "dev": true,
             "requires": {
                 "xtend": "^4.0.0"
@@ -9244,7 +9244,7 @@
         "ecc-jsbn": {
             "version": "0.1.2",
             "resolved": "https://registry.npmjs.org/ecc-jsbn/-/ecc-jsbn-0.1.2.tgz",
-            "integrity": "sha1-OoOpBOVDUyh4dMVkt1SThoSamMk=",
+            "integrity": "sha512-eh9O+hwRHNbG4BLTjEl3nw044CkGm5X6LoaCf7LPp7UU8Qrt47JYNi6nPX8xjW97TKGKm1ouctg0QSpZe9qrnw==",
             "requires": {
                 "jsbn": "~0.1.0",
                 "safer-buffer": "^2.1.0"
@@ -9261,7 +9261,7 @@
         "ee-first": {
             "version": "1.1.1",
             "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
-            "integrity": "sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0="
+            "integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow=="
         },
         "electron-to-chromium": {
             "version": "1.4.454",
@@ -9290,7 +9290,7 @@
         "encodeurl": {
             "version": "1.0.2",
             "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
-            "integrity": "sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k="
+            "integrity": "sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w=="
         },
         "encoding": {
             "version": "0.1.13",
@@ -9594,12 +9594,12 @@
         "escape-html": {
             "version": "1.0.3",
             "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
-            "integrity": "sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg="
+            "integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow=="
         },
         "escape-string-regexp": {
             "version": "1.0.5",
             "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
-            "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ="
+            "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg=="
         },
         "escodegen": {
             "version": "1.14.3",
@@ -10912,7 +10912,7 @@
         "etag": {
             "version": "1.8.1",
             "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
-            "integrity": "sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc="
+            "integrity": "sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg=="
         },
         "event-target-shim": {
             "version": "5.0.1",
@@ -10984,7 +10984,7 @@
         "exeq": {
             "version": "2.4.0",
             "resolved": "https://registry.npmjs.org/exeq/-/exeq-2.4.0.tgz",
-            "integrity": "sha1-Td8qaEZIxCeteZNJzzO9dTWPiEo=",
+            "integrity": "sha512-B648qbDS00nQZv9UQGLT5RbZm/5dNBX10F8oWeXcgpFHSLm1249u95t/3sn2wXdQjLhlF+edAECdshFtSr1K0Q==",
             "requires": {
                 "bluebird": "^3.0.3",
                 "native-or-bluebird": "^1.2.0"
@@ -10993,7 +10993,7 @@
         "exif": {
             "version": "0.6.0",
             "resolved": "https://registry.npmjs.org/exif/-/exif-0.6.0.tgz",
-            "integrity": "sha1-YKYmaAdlQst+T1cZnUrG830sX0o=",
+            "integrity": "sha512-gEwM4uanNMfLnDNKclZ7jPEA99E3rpy4ntoS6QW8u6murZjl1o8qRaPdMoC46Syg3d9/QaET0bYKhWlTwJCPgg==",
             "requires": {
                 "debug": "^2.2"
             },
@@ -11009,7 +11009,7 @@
                 "ms": {
                     "version": "2.0.0",
                     "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-                    "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
+                    "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
                 }
             }
         },
@@ -11021,7 +11021,7 @@
         "expand-brackets": {
             "version": "2.1.4",
             "resolved": "https://registry.npmjs.org/expand-brackets/-/expand-brackets-2.1.4.tgz",
-            "integrity": "sha1-t3c14xXOMPa27/D4OwQVGiJEliI=",
+            "integrity": "sha512-w/ozOKR9Obk3qoWeY/WDi6MFta9AoMR+zud60mdnbniMcBxRuFJyDt2LdX/14A1UABeqk+Uk+LDfUpvoGKppZA==",
             "requires": {
                 "debug": "^2.3.3",
                 "define-property": "^0.2.5",
@@ -11043,7 +11043,7 @@
                 "define-property": {
                     "version": "0.2.5",
                     "resolved": "https://registry.npmjs.org/define-property/-/define-property-0.2.5.tgz",
-                    "integrity": "sha1-w1se+RjsPJkPmlvFe+BKrOxcgRY=",
+                    "integrity": "sha512-Rr7ADjQZenceVOAKop6ALkkRAmH1A4Gx9hV/7ZujPUN2rkATqFO0JZLZInbAjpZYoJ1gUx8MRMQVkYemcbMSTA==",
                     "requires": {
                         "is-descriptor": "^0.1.0"
                     }
@@ -11051,7 +11051,7 @@
                 "extend-shallow": {
                     "version": "2.0.1",
                     "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
-                    "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
+                    "integrity": "sha512-zCnTtlxNoAiDc3gqY2aYAWFx7XWWiasuF2K8Me5WbN8otHKTUKBwjPtNpRs/rbUZm7KxWAaNj7P1a/p52GbVug==",
                     "requires": {
                         "is-extendable": "^0.1.0"
                     }
@@ -11059,7 +11059,7 @@
                 "ms": {
                     "version": "2.0.0",
                     "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-                    "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
+                    "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
                 }
             }
         },
@@ -11142,7 +11142,7 @@
         "express-flash": {
             "version": "0.0.2",
             "resolved": "https://registry.npmjs.org/express-flash/-/express-flash-0.0.2.tgz",
-            "integrity": "sha1-I9GovPP5DXB5KOSJ+Whp7K0KzaI=",
+            "integrity": "sha512-QVUR0ZZRCaa8+iPHoUQaQJrQWcQuK/Q+19M7IUIdIEtvwhrA/ifHT7y1CVJI41YfGiOQnbGtn3uvd2vOdgu58A==",
             "requires": {
                 "connect-flash": "0.1.x"
             }
@@ -11199,7 +11199,7 @@
         "expressjs": {
             "version": "1.0.1",
             "resolved": "https://registry.npmjs.org/expressjs/-/expressjs-1.0.1.tgz",
-            "integrity": "sha1-IgMoRpoY31rWFeK3oM6ZXxf7ru8="
+            "integrity": "sha512-eFnQ5bMJxTZ29XwRJPV8ee/OURBBMS6Fm+b5rvMMEyz6u2IxPEh2SRzMZt9WvgnV+SMLmnzkALE1DnGG1HxJCw=="
         },
         "ext": {
             "version": "1.7.0",
@@ -11226,7 +11226,7 @@
         "extend-shallow": {
             "version": "3.0.2",
             "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-3.0.2.tgz",
-            "integrity": "sha1-Jqcarwc7OfshJxcnRhMcJwQCjbg=",
+            "integrity": "sha512-BwY5b5Ql4+qZoefgMj2NUmx+tehVTH/Kf4k1ZEtOHNFcm2wSxMRo992l6X3TIgni2eZVTZ85xMOjF31fwZAj6Q==",
             "requires": {
                 "assign-symbols": "^1.0.0",
                 "is-extendable": "^1.0.1"
@@ -11290,7 +11290,7 @@
                 "define-property": {
                     "version": "1.0.0",
                     "resolved": "https://registry.npmjs.org/define-property/-/define-property-1.0.0.tgz",
-                    "integrity": "sha1-dp66rz9KY6rTr56NMEybvnm/sOY=",
+                    "integrity": "sha512-cZTYKFWspt9jZsMscWo8sc/5lbPC9Q0N5nBLgb+Yd915iL3udB1uFgS3B8YCx66UVHq018DAVFoee7x+gxggeA==",
                     "requires": {
                         "is-descriptor": "^1.0.0"
                     }
@@ -11298,7 +11298,7 @@
                 "extend-shallow": {
                     "version": "2.0.1",
                     "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
-                    "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
+                    "integrity": "sha512-zCnTtlxNoAiDc3gqY2aYAWFx7XWWiasuF2K8Me5WbN8otHKTUKBwjPtNpRs/rbUZm7KxWAaNj7P1a/p52GbVug==",
                     "requires": {
                         "is-extendable": "^0.1.0"
                     }
@@ -11368,7 +11368,7 @@
         "extsprintf": {
             "version": "1.3.0",
             "resolved": "https://registry.npmjs.org/extsprintf/-/extsprintf-1.3.0.tgz",
-            "integrity": "sha1-lpGEQOMEGnpBT4xS48V06zw+HgU="
+            "integrity": "sha512-11Ndz7Nv+mvAC1j0ktTa7fAb0vLyGGX+rMHNBYQviQDGU0Hw7lhctJANqbPhu9nV9/izT/IntTgZ7Im/9LJs9g=="
         },
         "fast-deep-equal": {
             "version": "3.1.3",
@@ -11394,7 +11394,7 @@
         "fast-levenshtein": {
             "version": "2.0.6",
             "resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz",
-            "integrity": "sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc=",
+            "integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==",
             "dev": true
         },
         "fast-text-encoding": {
@@ -11449,7 +11449,7 @@
         "fd-slicer": {
             "version": "1.1.0",
             "resolved": "https://registry.npmjs.org/fd-slicer/-/fd-slicer-1.1.0.tgz",
-            "integrity": "sha1-JcfInLH5B3+IkbvmHY85Dq4lbx4=",
+            "integrity": "sha512-cE1qsB/VwyQozZ+q1dGxR8LBYNZeofhEdUNGSMbQD3Gw2lAzX9Zb3uIU6Ebc/Fmyjo9AWWfnn0AUCHqtevs/8g==",
             "requires": {
                 "pend": "~1.2.0"
             }
@@ -11457,7 +11457,7 @@
         "ffmpeg": {
             "version": "0.0.4",
             "resolved": "https://registry.npmjs.org/ffmpeg/-/ffmpeg-0.0.4.tgz",
-            "integrity": "sha1-HEYN+OfaUSf2LO70v6BsWciWMMs=",
+            "integrity": "sha512-3TgWUJJlZGQn+crJFyhsO/oNeRRnGTy6GhgS98oUCIfZrOW5haPPV7DUfOm3xJcHr5q3TJpjk2GudPutrNisRA==",
             "requires": {
                 "when": ">= 0.0.1"
             }
@@ -11504,7 +11504,7 @@
         "fill-range": {
             "version": "4.0.0",
             "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-4.0.0.tgz",
-            "integrity": "sha1-1USBHUKPmOsGpj3EAtJAPDKMOPc=",
+            "integrity": "sha512-VcpLTWqWDiTerugjj8e3+esbg+skS3M9e54UuR3iCeIDMXCLTsAH8hTSzDQU/X6/6t3eYkOKoZSef2PlU6U1XQ==",
             "requires": {
                 "extend-shallow": "^2.0.1",
                 "is-number": "^3.0.0",
@@ -11515,7 +11515,7 @@
                 "extend-shallow": {
                     "version": "2.0.1",
                     "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
-                    "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
+                    "integrity": "sha512-zCnTtlxNoAiDc3gqY2aYAWFx7XWWiasuF2K8Me5WbN8otHKTUKBwjPtNpRs/rbUZm7KxWAaNj7P1a/p52GbVug==",
                     "requires": {
                         "is-extendable": "^0.1.0"
                     }
@@ -11525,7 +11525,7 @@
         "filter-obj": {
             "version": "1.1.0",
             "resolved": "https://registry.npmjs.org/filter-obj/-/filter-obj-1.1.0.tgz",
-            "integrity": "sha1-mzERErxsYSehbgFsbF1/GeCAXFs="
+            "integrity": "sha512-8rXg1ZnX7xzy2NGDVkBVaAy+lSlPNwad13BtgSlLuxfIslyt5Vg64U7tFcCt4WS1R0hvtnQybT/IyCkGZ3DpXQ=="
         },
         "finalhandler": {
             "version": "1.2.0",
@@ -11559,7 +11559,7 @@
         "find": {
             "version": "0.1.7",
             "resolved": "https://registry.npmjs.org/find/-/find-0.1.7.tgz",
-            "integrity": "sha1-yGyHrxqxjyIrvjjeyGy8dg0Wpvs=",
+            "integrity": "sha512-jPrupTOe/pO//3a9Ty2o4NqQCp0L46UG+swUnfFtdmtQVN8pEltKpAqR7Nuf6vWn0GBXx5w+R1MyZzqwjEIqdA==",
             "requires": {
                 "traverse-chain": "~0.1.0"
             }
@@ -11708,7 +11708,7 @@
         "fluent-ffmpeg": {
             "version": "2.1.2",
             "resolved": "https://registry.npmjs.org/fluent-ffmpeg/-/fluent-ffmpeg-2.1.2.tgz",
-            "integrity": "sha1-yVLeIkD4EuvaCqgAbXd27irPfXQ=",
+            "integrity": "sha512-IZTB4kq5GK0DPp7sGQ0q/BWurGHffRtQQwVkiqDgeO6wYJLLV5ZhgNOQ65loZxxuPMKZKZcICCUnaGtlxBiR0Q==",
             "requires": {
                 "async": ">=0.2.9",
                 "which": "^1.1.1"
@@ -11791,12 +11791,12 @@
         "for-in": {
             "version": "1.0.2",
             "resolved": "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz",
-            "integrity": "sha1-gQaNKVqBQuwKxybG4iAMMPttXoA="
+            "integrity": "sha512-7EwmXrOjyL+ChxMhmG5lnW9MPt1aIeZEwKhQzoBUdTV0N3zuwWDZYVJatDvZ2OyzPUvdIAZDsCetk3coyMfcnQ=="
         },
         "forever-agent": {
             "version": "0.6.1",
             "resolved": "https://registry.npmjs.org/forever-agent/-/forever-agent-0.6.1.tgz",
-            "integrity": "sha1-+8cfDEGt6zf5bFd60e1C2P2sypE="
+            "integrity": "sha512-j0KLYPhm6zeac4lz3oJ3o65qvgQCcPubiyotZrXqEaG4hNagNYO8qdlUrX5vwqv9ohqeT/Z3j6+yW067yWWdUw=="
         },
         "fork-ts-checker-webpack-plugin": {
             "version": "1.6.0",
@@ -11850,7 +11850,7 @@
         "fragment-cache": {
             "version": "0.2.1",
             "resolved": "https://registry.npmjs.org/fragment-cache/-/fragment-cache-0.2.1.tgz",
-            "integrity": "sha1-QpD60n8T6Jvn8zeZxrxaCr//DRk=",
+            "integrity": "sha512-GMBAbW9antB8iZRHLoGw0b3HANt57diZYFO/HL1JGIC1MjKrdmhxvrJbupnVvpys0zsz7yBApXdQyfepKly2kA==",
             "requires": {
                 "map-cache": "^0.2.2"
             }
@@ -11858,7 +11858,7 @@
         "fresh": {
             "version": "0.5.2",
             "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
-            "integrity": "sha1-PYyt2Q2XZWn6g1qx+OSyOhBWBac="
+            "integrity": "sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q=="
         },
         "from2": {
             "version": "2.3.0",
@@ -11895,7 +11895,7 @@
         "fs-extra": {
             "version": "0.26.7",
             "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-0.26.7.tgz",
-            "integrity": "sha1-muH92UiXeY7at20JGM9C0MMYT6k=",
+            "integrity": "sha512-waKu+1KumRhYv8D8gMRCKJGAMI9pRnPuEb1mvgYD0f7wBscg+h6bW4FDTmEZhB9VKxvoTtxW+Y7bnIlB7zja6Q==",
             "requires": {
                 "graceful-fs": "^4.1.2",
                 "jsonfile": "^2.1.0",
@@ -11974,7 +11974,7 @@
         "fs.realpath": {
             "version": "1.0.0",
             "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
-            "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8="
+            "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw=="
         },
         "fsevents": {
             "version": "1.2.13",
@@ -12152,7 +12152,7 @@
         "get-func-name": {
             "version": "2.0.0",
             "resolved": "https://registry.npmjs.org/get-func-name/-/get-func-name-2.0.0.tgz",
-            "integrity": "sha1-6td0q+5y4gQJQzoGY2YCPdaIekE="
+            "integrity": "sha512-Hm0ixYtaSZ/V7C8FJrtZIuBBI+iSgL+1Aq82zSu8VQNB4S3Gk8e7Qs3VwBDJAhmRZcFqkl3tQu36g/Foh5I5ig=="
         },
         "get-intrinsic": {
             "version": "1.2.0",
@@ -12196,12 +12196,12 @@
         "get-value": {
             "version": "2.0.6",
             "resolved": "https://registry.npmjs.org/get-value/-/get-value-2.0.6.tgz",
-            "integrity": "sha1-3BXKHGcjh8p2vTesCjlbogQqLCg="
+            "integrity": "sha512-Ln0UQDlxH1BapMu3GPtf7CuYNwRZf2gwCuPqbyG6pB8WfmFpzqcy4xtAaAMUhnNqjMKTiCPZG2oMT3YSx8U2NA=="
         },
         "getpass": {
             "version": "0.1.7",
             "resolved": "https://registry.npmjs.org/getpass/-/getpass-0.1.7.tgz",
-            "integrity": "sha1-Xv+OPmhNVprkyysSgmBOi6YhSfo=",
+            "integrity": "sha512-0fzj9JxOLfJ+XGLhR8ze3unN0KZCgZwiSSDz168VERjK8Wl8kVSdcu2kspd4s4wtAa1y/qrVRiAA0WclVsu0ng==",
             "requires": {
                 "assert-plus": "^1.0.0"
             }
@@ -12328,7 +12328,7 @@
         "golden-layout": {
             "version": "1.5.9",
             "resolved": "https://registry.npmjs.org/golden-layout/-/golden-layout-1.5.9.tgz",
-            "integrity": "sha1-o5vB9qZ+b4hreXwBbdkk6UJrp38=",
+            "integrity": "sha512-iBXDQCXOTgUEQJo96zPbjDoy5bRIk9XW5l+q+pDgLnIyReqaa1aiQctNud4epsskyLt952BG521dew5Z1liSxA==",
             "requires": {
                 "jquery": "*"
             }
@@ -12336,7 +12336,7 @@
         "good-listener": {
             "version": "1.2.2",
             "resolved": "https://registry.npmjs.org/good-listener/-/good-listener-1.2.2.tgz",
-            "integrity": "sha1-1TswzfkxPf+33JoNR3CWqm0UXFA=",
+            "integrity": "sha512-goW1b+d9q/HIwbVYZzZ6SsTr4IgE+WA44A0GmPIQstuOrgsFcT7VEJ48nmr9GaRtNu0XTKacFLGnBPAM6Afouw==",
             "requires": {
                 "delegate": "^3.1.2"
             }
@@ -12515,7 +12515,7 @@
         "har-schema": {
             "version": "2.0.0",
             "resolved": "https://registry.npmjs.org/har-schema/-/har-schema-2.0.0.tgz",
-            "integrity": "sha1-qUwiJOvKwEeCoNkDVSHyRzW37JI="
+            "integrity": "sha512-Oqluz6zhGX8cyRaTQlFMPw80bSJVG2x/cFb8ZPhUILGgHka9SsokCCOQgpveePerqidZOrT14ipqfJb7ILcW5Q=="
         },
         "har-validator": {
             "version": "5.1.5",
@@ -12577,7 +12577,7 @@
         "has-flag": {
             "version": "3.0.0",
             "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
-            "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0="
+            "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw=="
         },
         "has-property-descriptors": {
             "version": "1.0.0",
@@ -12608,12 +12608,12 @@
         "has-unicode": {
             "version": "2.0.1",
             "resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz",
-            "integrity": "sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk="
+            "integrity": "sha512-8Rf9Y83NBReMnx0gFzA8JImQACstCYWUplepDa9xprwwtmgEZUF0h/i5xSA625zB/I37EtrswSST6OXxwaaIJQ=="
         },
         "has-value": {
             "version": "1.0.0",
             "resolved": "https://registry.npmjs.org/has-value/-/has-value-1.0.0.tgz",
-            "integrity": "sha1-GLKB2lhbHFxR3vJMkw7SmgvmsXc=",
+            "integrity": "sha512-IBXk4GTsLYdQ7Rvt+GRBrFSVEkmuOUy4re0Xjd9kJSUQpnTrWR4/y9RpfexN9vkAPMFuQoeWKwqzPozRTlasGw==",
             "requires": {
                 "get-value": "^2.0.6",
                 "has-values": "^1.0.0",
@@ -12623,7 +12623,7 @@
         "has-values": {
             "version": "1.0.0",
             "resolved": "https://registry.npmjs.org/has-values/-/has-values-1.0.0.tgz",
-            "integrity": "sha1-lbC2P+whRmGab+V/51Yo1aOe/k8=",
+            "integrity": "sha512-ODYZC64uqzmtfGMEAX/FvZiRyWLpAC3vYnNunURUnkGVTS+mI0smVsWaPydRBsE3g+ok7h960jChO8mFcWlHaQ==",
             "requires": {
                 "is-number": "^3.0.0",
                 "kind-of": "^4.0.0"
@@ -12637,7 +12637,7 @@
                 "kind-of": {
                     "version": "4.0.0",
                     "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-4.0.0.tgz",
-                    "integrity": "sha1-IIE989cSkosgc3hpGkUGb65y3Vc=",
+                    "integrity": "sha512-24XsCxmEbRwEDbz/qz3stgin8TTzZ1ESR56OMCN0ujYg+vRutNSiOj9bHH9u85DKgXguraugV5sFuvbD4FW/hw==",
                     "requires": {
                         "is-buffer": "^1.1.5"
                     }
@@ -12740,7 +12740,7 @@
         "hpack.js": {
             "version": "2.1.6",
             "resolved": "https://registry.npmjs.org/hpack.js/-/hpack.js-2.1.6.tgz",
-            "integrity": "sha1-h3dMCUnlE/QuhFdbPEVoH63ioLI=",
+            "integrity": "sha512-zJxVehUdMGIKsRaNt7apO2Gqp0BdqW5yaiGHXXmbpvxgBYVZnAql+BJb4RO5ad2MgpbZKn5G6nMnegrH1FcNYQ==",
             "dev": true,
             "requires": {
                 "inherits": "^2.0.1",
@@ -12769,7 +12769,7 @@
         "html": {
             "version": "1.0.0",
             "resolved": "https://registry.npmjs.org/html/-/html-1.0.0.tgz",
-            "integrity": "sha1-pUT6nqVJK/s6LMqCEKEL57WvH2E=",
+            "integrity": "sha512-lw/7YsdKiP3kk5PnR1INY17iJuzdAtJewxr14ozKJWbbR97znovZ0mh+WEMZ8rjc3lgTK+ID/htTjuyGKB52Kw==",
             "requires": {
                 "concat-stream": "^1.4.7"
             }
@@ -12852,7 +12852,7 @@
         "http-browserify": {
             "version": "1.7.0",
             "resolved": "https://registry.npmjs.org/http-browserify/-/http-browserify-1.7.0.tgz",
-            "integrity": "sha1-M3la3nLfiKz7/TZ3PO/tp2RzWyA=",
+            "integrity": "sha512-Irf/LJXmE3cBzU1eaR4+NEX6bmVLqt1wkmDiA7kBwH7zmb0D8kBAXsDmQ88hhj/qv9iEZKlyGx/hrMcFi8sOHw==",
             "requires": {
                 "Base64": "~0.2.0",
                 "inherits": "~2.0.1"
@@ -12866,7 +12866,7 @@
         "http-deceiver": {
             "version": "1.2.7",
             "resolved": "https://registry.npmjs.org/http-deceiver/-/http-deceiver-1.2.7.tgz",
-            "integrity": "sha1-+nFolEq5pRnTN8sL7HKE3D5yPYc=",
+            "integrity": "sha512-LmpOGxTfbpgtGVxJrj5k7asXHCgNZp5nLfp+hWc8QQRqtb7fUy6kRY3BO1h9ddF6yIPYUARgxGOwB42DnxIaNw==",
             "dev": true
         },
         "http-errors": {
@@ -12913,7 +12913,7 @@
         "http-signature": {
             "version": "1.2.0",
             "resolved": "https://registry.npmjs.org/http-signature/-/http-signature-1.2.0.tgz",
-            "integrity": "sha1-muzZJRFHcvPZW2WmCruPfBj7rOE=",
+            "integrity": "sha512-CAbnr6Rz4CYQkLYUtSNXxQPUH2gK8f3iWexVlsnMeD+GjlsQ0Xsy1cOX+mN3dtxYomRy21CiOzU8Uhw6OwncEQ==",
             "requires": {
                 "assert-plus": "^1.0.0",
                 "jsprim": "^1.2.2",
@@ -12932,12 +12932,12 @@
         "https": {
             "version": "1.0.0",
             "resolved": "https://registry.npmjs.org/https/-/https-1.0.0.tgz",
-            "integrity": "sha1-PDfHrhqO65ZpBKKtHpdaGUt+06Q="
+            "integrity": "sha512-4EC57ddXrkaF0x83Oj8sM6SLQHAWXw90Skqu2M4AEWENZ3F02dFJE/GARA8igO79tcgYqGrD7ae4f5L3um2lgg=="
         },
         "https-browserify": {
             "version": "1.0.0",
             "resolved": "https://registry.npmjs.org/https-browserify/-/https-browserify-1.0.0.tgz",
-            "integrity": "sha1-7AbBDgo0wPL68Zn3/X/Hj//QPHM="
+            "integrity": "sha512-J+FkSdyD+0mA0N+81tMotaRMfSL9SGi+xpD3T6YApKsc3bGSXJlfXri3VyFOeYkfLRQisDk1W+jIFFKBeUBbBg=="
         },
         "https-proxy-agent": {
             "version": "5.0.1",
@@ -12989,7 +12989,7 @@
         "icss-replace-symbols": {
             "version": "1.1.0",
             "resolved": "https://registry.npmjs.org/icss-replace-symbols/-/icss-replace-symbols-1.1.0.tgz",
-            "integrity": "sha1-Bupvg2ead0njhs/h/oEq5dsiPe0=",
+            "integrity": "sha512-chIaY3Vh2mh2Q3RGXttaDIzeiPvaVXJ+C4DAh/w3c37SKZ/U6PGMmuicR2EQQp9bKG8zLMCl7I+PtIoOOPp8Gg==",
             "dev": true
         },
         "icss-utils": {
@@ -13021,7 +13021,7 @@
         "ignore-by-default": {
             "version": "1.0.1",
             "resolved": "https://registry.npmjs.org/ignore-by-default/-/ignore-by-default-1.0.1.tgz",
-            "integrity": "sha1-SMptcvbGo68Aqa1K5odr44ieKwk="
+            "integrity": "sha512-Ius2VYcGNk7T90CppJqcIkS5ooHUZyIQK+ClZfMfMNFEF9VSE73Fq+906u/CWu92x4gzZMWOwfFYckPObzdEbA=="
         },
         "iink-js": {
             "version": "1.5.4",
@@ -13065,7 +13065,7 @@
         "image-size-stream": {
             "version": "1.1.0",
             "resolved": "https://registry.npmjs.org/image-size-stream/-/image-size-stream-1.1.0.tgz",
-            "integrity": "sha1-Ivou2mbG31AQh0bacUkmSy0l+Gs=",
+            "integrity": "sha512-N505B5FSy2Xf5l/Haef+99TwfJqTu40hnU560+rC0Cm6cxtwVz2yRFh9WpOk1YEjfv3dI0PgVYAH0hmXQmjDcw==",
             "requires": {
                 "image-size": "github:netroy/image-size#da2c863807a3e9602617bdd357b0de3ab4a064c1",
                 "readable-stream": "^1.0.33",
@@ -13079,12 +13079,12 @@
                 "isarray": {
                     "version": "0.0.1",
                     "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
-                    "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8="
+                    "integrity": "sha512-D2S+3GLxWH+uhrNEcoh/fnmYeP8E8/zHl644d/jdA0g2uyXvy3sb0qxotE+ne0LtccHknQzWwZEzhak7oJ0COQ=="
                 },
                 "readable-stream": {
                     "version": "1.1.14",
                     "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.1.14.tgz",
-                    "integrity": "sha1-fPTFTvZI44EwhMY23SB54WbAgdk=",
+                    "integrity": "sha512-+MeVjFf4L44XUkhM1eYbD8fyEsxcV81pqMSR5gblfcLCHfZvbrqy4/qYHE+/R5HoBUT11WV5O08Cr1n3YXkWVQ==",
                     "requires": {
                         "core-util-is": "~1.0.0",
                         "inherits": "~2.0.1",
@@ -13095,14 +13095,14 @@
                 "string_decoder": {
                     "version": "0.10.31",
                     "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
-                    "integrity": "sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ="
+                    "integrity": "sha512-ev2QzSzWPYmy9GuqfIVildA4OdcGLeFZQrq5ys6RtiuF+RQQiZWr8TZNyAcuVXyQRYfEO+MsoB/1BuQVhOJuoQ=="
                 }
             }
         },
         "immediate": {
             "version": "3.0.6",
             "resolved": "https://registry.npmjs.org/immediate/-/immediate-3.0.6.tgz",
-            "integrity": "sha1-nbHb0Pr43m++D13V5Wu2BigN5ps="
+            "integrity": "sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ=="
         },
         "import-fresh": {
             "version": "3.3.0",
@@ -13130,7 +13130,7 @@
         "imurmurhash": {
             "version": "0.1.4",
             "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
-            "integrity": "sha1-khi5srkoojixPcT7a21XbyMUU+o="
+            "integrity": "sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA=="
         },
         "in-publish": {
             "version": "2.0.1",
@@ -13153,7 +13153,7 @@
         "inflight": {
             "version": "1.0.6",
             "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
-            "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=",
+            "integrity": "sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==",
             "requires": {
                 "once": "^1.3.0",
                 "wrappy": "1"
@@ -13170,7 +13170,7 @@
                 "camelcase": {
                     "version": "4.1.0",
                     "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-4.1.0.tgz",
-                    "integrity": "sha1-1UVjW+HjPFQmScaRc+Xeas+uNN0="
+                    "integrity": "sha512-FxAv7HpHrXbh3aPo4o2qxHay2lkLY3x5Mw3KeE4KQE8ysVfziWeRZDwcjauvwBSGEC/nXUPzZy8zeh4HokqOnw=="
                 }
             }
         },
@@ -13524,7 +13524,7 @@
         "is-accessor-descriptor": {
             "version": "0.1.6",
             "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-0.1.6.tgz",
-            "integrity": "sha1-qeEss66Nh2cn7u84Q/igiXtcmNY=",
+            "integrity": "sha512-e1BM1qnDbMRG3ll2U9dSK0UMHuWOs3pY3AtcFsmvwPtKL3MML/Q86i+GilLfvqEs4GW+ExB91tQ3Ig9noDIZ+A==",
             "requires": {
                 "kind-of": "^3.0.2"
             },
@@ -13537,7 +13537,7 @@
                 "kind-of": {
                     "version": "3.2.2",
                     "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
-                    "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
+                    "integrity": "sha512-NOW9QQXMoZGg/oqnVNoNTTIFEIid1627WCffUBJEdMxYApq7mNE7CpzucIPc+ZQg25Phej7IJSmX3hO+oblOtQ==",
                     "requires": {
                         "is-buffer": "^1.1.5"
                     }
@@ -13566,7 +13566,7 @@
         "is-arrayish": {
             "version": "0.2.1",
             "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
-            "integrity": "sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0="
+            "integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg=="
         },
         "is-bigint": {
             "version": "1.0.4",
@@ -13622,7 +13622,7 @@
         "is-data-descriptor": {
             "version": "0.1.4",
             "resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-0.1.4.tgz",
-            "integrity": "sha1-C17mSDiOLIYCgueT8YVv7D8wG1Y=",
+            "integrity": "sha512-+w9D5ulSoBNlmw9OHn3U2v51SyoCd0he+bB3xMl62oijhrspxowjU+AIcDY0N3iEJbUEkB15IlMASQsxYigvXg==",
             "requires": {
                 "kind-of": "^3.0.2"
             },
@@ -13635,7 +13635,7 @@
                 "kind-of": {
                     "version": "3.2.2",
                     "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
-                    "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
+                    "integrity": "sha512-NOW9QQXMoZGg/oqnVNoNTTIFEIid1627WCffUBJEdMxYApq7mNE7CpzucIPc+ZQg25Phej7IJSmX3hO+oblOtQ==",
                     "requires": {
                         "is-buffer": "^1.1.5"
                     }
@@ -13670,7 +13670,7 @@
         "is-directory": {
             "version": "0.3.1",
             "resolved": "https://registry.npmjs.org/is-directory/-/is-directory-0.3.1.tgz",
-            "integrity": "sha1-YTObbyR1/Hcv2cnYP1yFddwVSuE="
+            "integrity": "sha512-yVChGzahRFvbkscn2MlwGismPO12i9+znNruC5gVEntG3qu0xQMzsGg/JFbrsqDOHtHFPci+V5aP5T9I+yeKqw=="
         },
         "is-expression": {
             "version": "3.0.0",
@@ -13696,7 +13696,7 @@
         "is-extglob": {
             "version": "2.1.1",
             "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
-            "integrity": "sha1-qIwCU1eR8C7TfHahueqXc8gz+MI="
+            "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ=="
         },
         "is-finite": {
             "version": "1.1.0",
@@ -13706,7 +13706,7 @@
         "is-fullwidth-code-point": {
             "version": "2.0.0",
             "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz",
-            "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8="
+            "integrity": "sha512-VHskAKYM8RfSFXwee5t5cbN5PZeq1Wrh6qd5bkyiXIf6UQcN6w/A0eXM9r6t8d+GYOh+o6ZhiEnb88LN/Y8m2w=="
         },
         "is-generator-function": {
             "version": "1.0.10",
@@ -13727,7 +13727,7 @@
         "is-in-browser": {
             "version": "1.1.3",
             "resolved": "https://registry.npmjs.org/is-in-browser/-/is-in-browser-1.1.3.tgz",
-            "integrity": "sha1-Vv9NtoOgeMYILrldrX3GLh0E+DU="
+            "integrity": "sha512-FeXIBgG/CPGd/WUxuEyvgGTEfwiG9Z4EKGxjNMRqviiIIfsmgrpnHLffEDdwUHqNva1VEW91o3xBT/m8Elgl9g=="
         },
         "is-installed-globally": {
             "version": "0.1.0",
@@ -13757,7 +13757,7 @@
         "is-number": {
             "version": "3.0.0",
             "resolved": "https://registry.npmjs.org/is-number/-/is-number-3.0.0.tgz",
-            "integrity": "sha1-JP1iAaR4LPUFYcgQJ2r8fRLXEZU=",
+            "integrity": "sha512-4cboCqIpliH+mAvFNegjZQ4kgKc3ZUhQVr3HvWbSh5q3WH2v82ct+T2Y1hdU5Gdtorx/cLifQjqCbL7bpznLTg==",
             "requires": {
                 "kind-of": "^3.0.2"
             },
@@ -13770,7 +13770,7 @@
                 "kind-of": {
                     "version": "3.2.2",
                     "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
-                    "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
+                    "integrity": "sha512-NOW9QQXMoZGg/oqnVNoNTTIFEIid1627WCffUBJEdMxYApq7mNE7CpzucIPc+ZQg25Phej7IJSmX3hO+oblOtQ==",
                     "requires": {
                         "is-buffer": "^1.1.5"
                     }
@@ -13908,7 +13908,7 @@
         "is-typedarray": {
             "version": "1.0.0",
             "resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz",
-            "integrity": "sha1-5HnICFjfDBsR3dppQPlgEfzaSpo="
+            "integrity": "sha512-cyA56iCMHAh5CdzjJIa4aohJyeO1YbwLi3Jc35MmRU6poroFjIGZzUzupGiRPOjgHg9TLu43xbpwXk523fMxKA=="
         },
         "is-url": {
             "version": "1.2.4",
@@ -13963,17 +13963,17 @@
         "isarray": {
             "version": "1.0.0",
             "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
-            "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE="
+            "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ=="
         },
         "isexe": {
             "version": "2.0.0",
             "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
-            "integrity": "sha1-6PvzdNxVb/iUehDcsFctYz8s+hA="
+            "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw=="
         },
         "isobject": {
             "version": "3.0.1",
             "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
-            "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8="
+            "integrity": "sha512-WhB9zCku7EGTj/HQQRz5aUQEUeoQZH2bWcltRErOpymJ4boYE6wL9Tbr23krRPSZ+C5zqNSrSw+Cc7sZZ4b7vg=="
         },
         "isomorphic-fetch": {
             "version": "2.2.1",
@@ -13998,7 +13998,7 @@
         "isstream": {
             "version": "0.1.2",
             "resolved": "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz",
-            "integrity": "sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo="
+            "integrity": "sha512-Yljz7ffyPbrLpLngrMtZ7NduUgVvi6wG9RJ9IUcyCd59YQ911PBJphODUcbOVbqYfxe1wuYf/LJ8PauMRwsM/g=="
         },
         "its-set": {
             "version": "1.2.3",
@@ -14080,7 +14080,7 @@
         "jsbn": {
             "version": "0.1.1",
             "resolved": "https://registry.npmjs.org/jsbn/-/jsbn-0.1.1.tgz",
-            "integrity": "sha1-peZUwuWi3rXyAdls77yoDA7y9RM="
+            "integrity": "sha512-UVU9dibq2JcFWxQPA6KCqj5O42VOmAY3zQUfEKxU0KpTGXwNoCjkX1e13eHNvw/xPynt6pU0rZ1htjWTNTSXsg=="
         },
         "jsdom": {
             "version": "15.2.1",
@@ -14206,7 +14206,7 @@
         "json-css": {
             "version": "1.5.6",
             "resolved": "https://registry.npmjs.org/json-css/-/json-css-1.5.6.tgz",
-            "integrity": "sha1-65ZPg0ouTqobwvaY/12wB6JsfAA="
+            "integrity": "sha512-B/0T0OxZH9tSb93tXV6VOYtXqrPz/Vgz2QrCT/4NXen8HGElYkYr9V+8IrSVTMj/ftxa8cG1kcu7f3iAMlaFlQ=="
         },
         "json-parse-better-errors": {
             "version": "1.0.2",
@@ -14237,7 +14237,7 @@
         "json-stringify-safe": {
             "version": "5.0.1",
             "resolved": "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz",
-            "integrity": "sha1-Epai1Y/UXxmg9s4B1lcB4sc1tus="
+            "integrity": "sha512-ZClg6AaYvamvYEE82d3Iyd3vSSIjQ+odgjaTzRuO3s7toCdFKczob2i0zCh7JE8kWn17yvAWhUVxvqGwUalsRA=="
         },
         "json5": {
             "version": "1.0.2",
@@ -14259,7 +14259,7 @@
         "jsonfile": {
             "version": "2.4.0",
             "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-2.4.0.tgz",
-            "integrity": "sha1-NzaitCi4e72gzIO1P6PWM6NcKug=",
+            "integrity": "sha512-PKllAqbgLgxHaj8TElYymKCAgrASebJrWpTnEkOaTowt23VKXXN0sUeriJ+eh7y6ufb/CC5ap11pz71/cM0hUw==",
             "requires": {
                 "graceful-fs": "^4.1.6"
             }
@@ -14489,7 +14489,7 @@
         "klaw": {
             "version": "1.3.1",
             "resolved": "https://registry.npmjs.org/klaw/-/klaw-1.3.1.tgz",
-            "integrity": "sha1-QIhDO0azsbolnXh4XY6W9zugJDk=",
+            "integrity": "sha512-TED5xi9gGQjGpNnvRWknrwAB1eL5GciPfVFOt3Vk1OJCVDQbzuSfrF3hkUQKlsgKrG1F+0t5W0m+Fje1jIt8rw==",
             "requires": {
                 "graceful-fs": "^4.1.9"
             }
@@ -14634,22 +14634,22 @@
         "lodash._getnative": {
             "version": "3.9.1",
             "resolved": "https://registry.npmjs.org/lodash._getnative/-/lodash._getnative-3.9.1.tgz",
-            "integrity": "sha1-VwvH3t5G1hzc3mh9ZdPuy6o6r/U="
+            "integrity": "sha512-RrL9VxMEPyDMHOd9uFbvMe8X55X16/cGM5IgOKgRElQZutpX89iS6vwl64duTV1/16w5JY7tuFNXqoekmh1EmA=="
         },
         "lodash.chunk": {
             "version": "4.2.0",
             "resolved": "https://registry.npmjs.org/lodash.chunk/-/lodash.chunk-4.2.0.tgz",
-            "integrity": "sha1-ZuXOH3btJ7QwPYxlEujRIW6BBrw="
+            "integrity": "sha512-ZzydJKfUHJwHa+hF5X66zLFCBrWn5GeF28OHEr4WVWtNDXlQ/IjWKPBiikqKo2ne0+v6JgCgJ0GzJp8k8bHC7w=="
         },
         "lodash.curry": {
             "version": "4.1.1",
             "resolved": "https://registry.npmjs.org/lodash.curry/-/lodash.curry-4.1.1.tgz",
-            "integrity": "sha1-JI42By7ekGUB11lmIAqG2riyMXA="
+            "integrity": "sha512-/u14pXGviLaweY5JI0IUzgzF2J6Ne8INyzAZjImcryjgkZ+ebruBxy2/JaOOkTqScddcYtakjhSaeemV8lR0tA=="
         },
         "lodash.debounce": {
             "version": "3.1.1",
             "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-3.1.1.tgz",
-            "integrity": "sha1-gSIRw3ipTMKdWqTjNGzwv846ffU=",
+            "integrity": "sha512-lcmJwMpdPAtChA4hfiwxTtgFeNAaow701wWUgVUqeD0XJF7vMXIN+bu/2FJSGxT0NUbZy9g9VFrlOFfPjl+0Ew==",
             "requires": {
                 "lodash._getnative": "^3.0.0"
             }
@@ -14657,27 +14657,27 @@
         "lodash.defaults": {
             "version": "4.2.0",
             "resolved": "https://registry.npmjs.org/lodash.defaults/-/lodash.defaults-4.2.0.tgz",
-            "integrity": "sha1-0JF4cW/+pN3p5ft7N/bwgCJ0WAw="
+            "integrity": "sha512-qjxPLHd3r5DnsdGacqOMU6pb/avJzdh9tFX2ymgoZE27BmjXrNy/y4LoaiTeAb+O3gL8AfpJGtqfX/ae2leYYQ=="
         },
         "lodash.difference": {
             "version": "4.5.0",
             "resolved": "https://registry.npmjs.org/lodash.difference/-/lodash.difference-4.5.0.tgz",
-            "integrity": "sha1-nMtOUF1Ia5FlE0V3KIWi3yf9AXw="
+            "integrity": "sha512-dS2j+W26TQ7taQBGN8Lbbq04ssV3emRw4NY58WErlTO29pIqS0HmoT5aJ9+TUQ1N3G+JOZSji4eugsWwGp9yPA=="
         },
         "lodash.flatten": {
             "version": "4.4.0",
             "resolved": "https://registry.npmjs.org/lodash.flatten/-/lodash.flatten-4.4.0.tgz",
-            "integrity": "sha1-8xwiIlqWMtK7+OSt2+8kCqdlph8="
+            "integrity": "sha512-C5N2Z3DgnnKr0LOpv/hKCgKdb7ZZwafIrsesve6lmzvZIRZRGaZ/l6Q8+2W7NaT+ZwO3fFlSCzCzrDCFdJfZ4g=="
         },
         "lodash.flow": {
             "version": "3.5.0",
             "resolved": "https://registry.npmjs.org/lodash.flow/-/lodash.flow-3.5.0.tgz",
-            "integrity": "sha1-h79AKSuM+D5OjOGjrkIJ4gBxZ1o="
+            "integrity": "sha512-ff3BX/tSioo+XojX4MOsOMhJw0nZoUEF011LX8g8d3gvjVbxd89cCio4BCXronjxcTUIJUoqKEUA+n4CqvvRPw=="
         },
         "lodash.get": {
             "version": "4.4.2",
             "resolved": "https://registry.npmjs.org/lodash.get/-/lodash.get-4.4.2.tgz",
-            "integrity": "sha1-LRd/ZS+jHpObRDjVNBSZ36OCXpk="
+            "integrity": "sha512-z+Uw/vLuy6gQe8cfaFWD7p0wVv8fJl3mbzXh33RS+0oW2wvUqiRXiQ69gLWSLpgB5/6sU+r6BlQR0MBILadqTQ=="
         },
         "lodash.isequal": {
             "version": "4.5.0",
@@ -14687,12 +14687,12 @@
         "lodash.isplainobject": {
             "version": "4.0.6",
             "resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz",
-            "integrity": "sha1-fFJqUtibRcRcxpC4gWO+BJf1UMs="
+            "integrity": "sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA=="
         },
         "lodash.memoize": {
             "version": "4.1.2",
             "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
-            "integrity": "sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4="
+            "integrity": "sha512-t7j+NzmgnQzTAYXcsHYLgimltOV1MXHtlOWf6GjL9Kj8GK5FInw5JotxvbOs+IvV1/Dzo04/fCGfLVs7aXb4Ag=="
         },
         "lodash.merge": {
             "version": "4.6.2",
@@ -14713,12 +14713,12 @@
         "lodash.throttle": {
             "version": "4.1.1",
             "resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz",
-            "integrity": "sha1-wj6RtxAkKscMN/HhzaknTMOb8vQ="
+            "integrity": "sha512-wIkUCfVKpVsWo3JSZlc+8MB5it+2AN5W8J7YVMST30UrvcQNZ1Okbj+rbVniijTWE6FGYy4XJq/rHkas8qJMLQ=="
         },
         "lodash.union": {
             "version": "4.6.0",
             "resolved": "https://registry.npmjs.org/lodash.union/-/lodash.union-4.6.0.tgz",
-            "integrity": "sha1-SLtQiECfFvGCFmZkHETdGqrjzYg="
+            "integrity": "sha512-c4pB2CdGrGdjMKYLA+XiRDO7Y0PRQbm/Gzg8qMj+QH+pFVAoTp5sBpO0odL3FjoPCGjK96p6qsP+yQoiLoOBcw=="
         },
         "log-symbols": {
             "version": "2.2.0",
@@ -14874,7 +14874,7 @@
         "map-cache": {
             "version": "0.2.2",
             "resolved": "https://registry.npmjs.org/map-cache/-/map-cache-0.2.2.tgz",
-            "integrity": "sha1-wyq9C9ZSXZsFFkW7TyasXcmKDb8="
+            "integrity": "sha512-8y/eV9QQZCiyn1SprXSrCmqJN0yNRATe+PO8ztwqrvrbdRLA3eYJF0yaR0YayLWkMbsQSKWS9N2gPcGEc4UsZg=="
         },
         "map-obj": {
             "version": "1.0.1",
@@ -14884,7 +14884,7 @@
         "map-visit": {
             "version": "1.0.0",
             "resolved": "https://registry.npmjs.org/map-visit/-/map-visit-1.0.0.tgz",
-            "integrity": "sha1-7Nyo8TFE5mDxtb1B8S80edmN+48=",
+            "integrity": "sha512-4y7uGv8bd2WdM9vpQsiQNo41Ln1NvhvDRuVt0k2JZQ+ezN2uaQes7lZeZ+QQUHOLQAtDaBJ+7wCbi+ab/KFs+w==",
             "requires": {
                 "object-visit": "^1.0.0"
             }
@@ -14934,7 +14934,7 @@
         "math-codegen": {
             "version": "0.3.5",
             "resolved": "https://registry.npmjs.org/math-codegen/-/math-codegen-0.3.5.tgz",
-            "integrity": "sha1-R5nuRnfe0Ud2bQA8ykt4ee3UDMo=",
+            "integrity": "sha512-SsFYMv33FxMKYxI1PBiaZT+8AeDITK+k/PKhbHNlOPHIz5FIPF4wy78yWqanN6luXdsXENUZgCIC6xH6bfUq1g==",
             "requires": {
                 "extend": "^3.0.0",
                 "mr-parser": "^0.2.1"
@@ -15121,7 +15121,7 @@
         "media-typer": {
             "version": "0.3.0",
             "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
-            "integrity": "sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g="
+            "integrity": "sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ=="
         },
         "memfs": {
             "version": "3.4.13",
@@ -15172,7 +15172,7 @@
         "memorystream": {
             "version": "0.3.1",
             "resolved": "https://registry.npmjs.org/memorystream/-/memorystream-0.3.1.tgz",
-            "integrity": "sha1-htcJCzDORV1j+64S3aUaR93K+bI="
+            "integrity": "sha512-S3UwM3yj5mtUSEfP41UZmt/0SCoVYUcU1rkXv+BQ5Ig8ndL4sPoJNBUJERafdPb5jjHJGuMgytgKvKIf58XNBw=="
         },
         "meow": {
             "version": "3.7.0",
@@ -15202,7 +15202,7 @@
         "merge-descriptors": {
             "version": "1.0.1",
             "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz",
-            "integrity": "sha1-sAqqVW3YtEVoFQ7J0blT8/kMu2E="
+            "integrity": "sha512-cCi6g3/Zr1iqQi6ySbseM1Xvooa98N0w31jzUYrXPX2xqObmFGHJ0tQ5u74H3mVh7wLouTseZyYIq39g8cNp1w=="
         },
         "merge-stream": {
             "version": "2.0.0",
@@ -15213,7 +15213,7 @@
         "methods": {
             "version": "1.1.2",
             "resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz",
-            "integrity": "sha1-VSmk1nZUE07cxSZmVoNbD4Ua/O4="
+            "integrity": "sha512-iclAHeNqNm68zFtnZ0e+1L2yUIdvzNoauKU4WBA3VvH/vPFieF7qfRlwUZU+DA9P9bPXIS90ulxoUoCH23sV2w=="
         },
         "microevent.ts": {
             "version": "0.1.1",
@@ -15777,7 +15777,7 @@
                 "he": {
                     "version": "1.1.1",
                     "resolved": "https://registry.npmjs.org/he/-/he-1.1.1.tgz",
-                    "integrity": "sha1-k0EP0hsAlzUVH4howvJx80J+I/0=",
+                    "integrity": "sha512-z/GDPjlRMNOa2XJiB4em8wJpuuBfrFOlYKTZxtpkdr1uPdibHI8rYA3MY0KDObpVyaes0e/aunid/t88ZI2EKA==",
                     "dev": true
                 },
                 "minimatch": {
@@ -15807,7 +15807,7 @@
                 "ms": {
                     "version": "2.0.0",
                     "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-                    "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
+                    "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
                     "dev": true
                 },
                 "supports-color": {
@@ -15992,14 +15992,14 @@
                 "ms": {
                     "version": "2.0.0",
                     "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-                    "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
+                    "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
                 }
             }
         },
         "mr-parser": {
             "version": "0.2.1",
             "resolved": "https://registry.npmjs.org/mr-parser/-/mr-parser-0.2.1.tgz",
-            "integrity": "sha1-hhi5ukF+KOn0OaQcaVtVTq/u2Sc="
+            "integrity": "sha512-hug+mpbSSKnH13rFqy3zm+XiG+QTStiDAgMTHK355TIstQE0qBkBtSJsa5YHP94AuarVX9b/4dcebdTRZ9YiEw=="
         },
         "mri": {
             "version": "1.2.0",
@@ -16069,7 +16069,7 @@
         "native-or-bluebird": {
             "version": "1.2.0",
             "resolved": "https://registry.npmjs.org/native-or-bluebird/-/native-or-bluebird-1.2.0.tgz",
-            "integrity": "sha1-OcR7/Xgl0fuf+tMiEK4l2q3xAck="
+            "integrity": "sha512-0SH8UubxDfe382eYiwmd12qxAbiWGzlGZv6CkMA+DPojWa/Y0oH4hE0lRtFfFgJmPQFyKXeB8XxPbZz6TvvKaQ=="
         },
         "natural-compare": {
             "version": "1.4.0",
@@ -16096,7 +16096,7 @@
         "nextafter": {
             "version": "1.0.0",
             "resolved": "https://registry.npmjs.org/nextafter/-/nextafter-1.0.0.tgz",
-            "integrity": "sha1-t9d7U1MQ4+CX5gJauwqQNHfsGjo=",
+            "integrity": "sha512-7PO+A89Tll2rSEfyrjtqO0MaI37+nnxBdnQcPypfbEYYuGaJxWGCqaOwQX4a3GHNTS08l1kazuiLEWZniZjMUQ==",
             "requires": {
                 "double-bits": "^1.1.0"
             }
@@ -16127,7 +16127,7 @@
         "node-ensure": {
             "version": "0.0.0",
             "resolved": "https://registry.npmjs.org/node-ensure/-/node-ensure-0.0.0.tgz",
-            "integrity": "sha1-7K52QVDemYYexcgQ/V0Jaxg5Mqc="
+            "integrity": "sha512-DRI60hzo2oKN1ma0ckc6nQWlHU69RH6xN0sjQTjMpChPfTYvKZdcQFfdYK2RWbJcKyUizSIy/l8OTGxMAM1QDw=="
         },
         "node-environment-flags": {
             "version": "1.0.5",
@@ -16637,7 +16637,7 @@
             "dependencies": {
                 "@iarna/cli": {
                     "version": "2.1.0",
-                    "resolved": false,
+                    "resolved": "https://registry.npmjs.org/@iarna/cli/-/cli-2.1.0.tgz",
                     "integrity": "sha512-rvVVqDa2g860niRbqs3D5RhL4la3dc1vwk+NlpKPZxKaMSHtE2se6C2x8NeveN+rcjp3/686X+u+09CZ+7lmAQ==",
                     "requires": {
                         "glob": "^7.1.2",
@@ -16740,7 +16740,7 @@
                             "dependencies": {
                                 "safe-buffer": {
                                     "version": "5.1.2",
-                                    "resolved": false,
+                                    "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
                                     "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
                                 }
                             }
@@ -16755,7 +16755,7 @@
                             "dependencies": {
                                 "safe-buffer": {
                                     "version": "5.1.2",
-                                    "resolved": false,
+                                    "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
                                     "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
                                 }
                             }
@@ -16764,12 +16764,12 @@
                 },
                 "asap": {
                     "version": "2.0.6",
-                    "resolved": false,
+                    "resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz",
                     "integrity": "sha512-BSHWgDSAiKs50o2Re8ppvp3seVHXSRM44cdSsT9FfNEUUZLOGWVCsiWaRPWM1Znn+mqZ1OfVZ3z3DWEzSp7hRA=="
                 },
                 "asn1": {
                     "version": "0.2.6",
-                    "resolved": false,
+                    "resolved": "https://registry.npmjs.org/asn1/-/asn1-0.2.6.tgz",
                     "integrity": "sha512-ix/FxPn0MDjeyJ7i/yoHGFt/EX6LyNbxSEhPPXODPL+KB0VPk86UYfL0lMdy+KCnv+fmvIzySwaK5COwqVbWTQ==",
                     "requires": {
                         "safer-buffer": "~2.1.0"
@@ -16777,7 +16777,7 @@
                 },
                 "assert-plus": {
                     "version": "1.0.0",
-                    "resolved": false,
+                    "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz",
                     "integrity": "sha512-NfJ4UzBCcQGLDlQq7nHxH+tv3kyZ0hHQqF5BO6J7tNJeP5do1llPr8dZ8zHonfhAu0PHAdMkSo+8o0wxg9lZWw=="
                 },
                 "asynckit": {
@@ -16787,22 +16787,22 @@
                 },
                 "aws-sign2": {
                     "version": "0.7.0",
-                    "resolved": false,
+                    "resolved": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.7.0.tgz",
                     "integrity": "sha512-08kcGqnYf/YmjoRhfxyu+CLxBjUtHLXLXX/vUfx9l2LYzG3c1m61nrpyFUZI6zeS+Li/wWMMidD9KgrqtGq3mA=="
                 },
                 "aws4": {
                     "version": "1.11.0",
-                    "resolved": false,
+                    "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.11.0.tgz",
                     "integrity": "sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA=="
                 },
                 "balanced-match": {
                     "version": "1.0.2",
-                    "resolved": false,
+                    "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
                     "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
                 },
                 "bcrypt-pbkdf": {
                     "version": "1.0.2",
-                    "resolved": false,
+                    "resolved": "https://registry.npmjs.org/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.2.tgz",
                     "integrity": "sha512-qeFIXtP4MSoi6NLqO12WfqARWWuCKi2Rn/9hJLEmtB5yTNr9DqFWkJRCf2qShWzPeAMRnOgCrq0sg/KLv5ES9w==",
                     "requires": {
                         "tweetnacl": "^0.14.3"
@@ -16823,7 +16823,7 @@
                 },
                 "bluebird": {
                     "version": "3.7.2",
-                    "resolved": false,
+                    "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz",
                     "integrity": "sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg=="
                 },
                 "boxen": {
@@ -16871,7 +16871,7 @@
                 },
                 "cacache": {
                     "version": "12.0.4",
-                    "resolved": false,
+                    "resolved": "https://registry.npmjs.org/cacache/-/cacache-12.0.4.tgz",
                     "integrity": "sha512-a0tMB40oefvuInr4Cwb3GerbL9xTj1D5yg0T5xrjGCGyfvbxseIXX7BAO/u/hIXdafzOI5JC3wDwHyf24buOAQ==",
                     "requires": {
                         "bluebird": "^3.5.5",
@@ -16908,7 +16908,7 @@
                 },
                 "caseless": {
                     "version": "0.12.0",
-                    "resolved": false,
+                    "resolved": "https://registry.npmjs.org/caseless/-/caseless-0.12.0.tgz",
                     "integrity": "sha512-4tYFyifaFfGacoiObjJegolkwSU4xQNGbVgUiNYVUxbQ2x2lUsFvY4hVgVzGiIe6WLOPqycWXA40l+PWsxthUw=="
                 },
                 "chalk": {
@@ -17052,7 +17052,7 @@
                 },
                 "combined-stream": {
                     "version": "1.0.8",
-                    "resolved": false,
+                    "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
                     "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
                     "requires": {
                         "delayed-stream": "~1.0.0"
@@ -17060,7 +17060,7 @@
                 },
                 "concat-map": {
                     "version": "0.0.1",
-                    "resolved": false,
+                    "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
                     "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg=="
                 },
                 "concat-stream": {
@@ -17090,7 +17090,7 @@
                             "dependencies": {
                                 "safe-buffer": {
                                     "version": "5.1.2",
-                                    "resolved": false,
+                                    "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
                                     "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
                                 }
                             }
@@ -17105,7 +17105,7 @@
                             "dependencies": {
                                 "safe-buffer": {
                                     "version": "5.1.2",
-                                    "resolved": false,
+                                    "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
                                     "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
                                 }
                             }
@@ -17114,7 +17114,7 @@
                 },
                 "config-chain": {
                     "version": "1.1.13",
-                    "resolved": false,
+                    "resolved": "https://registry.npmjs.org/config-chain/-/config-chain-1.1.13.tgz",
                     "integrity": "sha512-qj+f8APARXHrM0hraqXYb2/bOVSV4PvJQlNZ/DVj0QrmNM2q2euizkeuVckQ57J+W0mRH6Hvi+k50M4Jul2VRQ==",
                     "requires": {
                         "ini": "^1.3.4",
@@ -17215,7 +17215,7 @@
                 },
                 "dashdash": {
                     "version": "1.14.1",
-                    "resolved": false,
+                    "resolved": "https://registry.npmjs.org/dashdash/-/dashdash-1.14.1.tgz",
                     "integrity": "sha512-jRFi8UDGo6j+odZiEpjazZaWqEal3w/basFjQHQEwVtZJGDpxbH1MeYluwCS8Xq5wmLJooDlMgvVarmWfGM44g==",
                     "requires": {
                         "assert-plus": "^1.0.0"
@@ -17248,7 +17248,7 @@
                 },
                 "decode-uri-component": {
                     "version": "0.2.2",
-                    "resolved": false,
+                    "resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.2.2.tgz",
                     "integrity": "sha512-FqUYQ+8o158GyGTrMFJms9qh3CqTKvAqgqsTnkLI8sKu0028orqBhxNMFkFen0zGyg6epACD32pjVk58ngIErQ=="
                 },
                 "deep-extend": {
@@ -17294,7 +17294,7 @@
                 },
                 "dezalgo": {
                     "version": "1.0.4",
-                    "resolved": false,
+                    "resolved": "https://registry.npmjs.org/dezalgo/-/dezalgo-1.0.4.tgz",
                     "integrity": "sha512-rXSP0bf+5n0Qonsb+SVVfNfIsimO4HEtmnIpPHY8Q1UCzKlQrDMfdobr8nJOOsRgWCyMRqeSBQzmWUMq7zvVig==",
                     "requires": {
                         "asap": "^2.0.0",
@@ -17346,7 +17346,7 @@
                             "dependencies": {
                                 "safe-buffer": {
                                     "version": "5.1.2",
-                                    "resolved": false,
+                                    "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
                                     "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
                                 }
                             }
@@ -17361,7 +17361,7 @@
                             "dependencies": {
                                 "safe-buffer": {
                                     "version": "5.1.2",
-                                    "resolved": false,
+                                    "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
                                     "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
                                 }
                             }
@@ -17370,7 +17370,7 @@
                 },
                 "ecc-jsbn": {
                     "version": "0.1.2",
-                    "resolved": false,
+                    "resolved": "https://registry.npmjs.org/ecc-jsbn/-/ecc-jsbn-0.1.2.tgz",
                     "integrity": "sha512-eh9O+hwRHNbG4BLTjEl3nw044CkGm5X6LoaCf7LPp7UU8Qrt47JYNi6nPX8xjW97TKGKm1ouctg0QSpZe9qrnw==",
                     "requires": {
                         "jsbn": "~0.1.0",
@@ -17405,7 +17405,7 @@
                 },
                 "env-paths": {
                     "version": "2.2.1",
-                    "resolved": false,
+                    "resolved": "https://registry.npmjs.org/env-paths/-/env-paths-2.2.1.tgz",
                     "integrity": "sha512-+h1lkLKhZMTYjog1VEpJNG7NZJWcuc2DDk/qsqSTRRCOXiLjeQ1d1/udrUGhqMxUgAlwKNZ0cf2uqan5GLuS2A=="
                 },
                 "err-code": {
@@ -17489,7 +17489,7 @@
                 },
                 "extsprintf": {
                     "version": "1.3.0",
-                    "resolved": false,
+                    "resolved": "https://registry.npmjs.org/extsprintf/-/extsprintf-1.3.0.tgz",
                     "integrity": "sha512-11Ndz7Nv+mvAC1j0ktTa7fAb0vLyGGX+rMHNBYQviQDGU0Hw7lhctJANqbPhu9nV9/izT/IntTgZ7Im/9LJs9g=="
                 },
                 "fast-json-stable-stringify": {
@@ -17499,12 +17499,12 @@
                 },
                 "figgy-pudding": {
                     "version": "3.5.2",
-                    "resolved": false,
+                    "resolved": "https://registry.npmjs.org/figgy-pudding/-/figgy-pudding-3.5.2.tgz",
                     "integrity": "sha512-0btnI/H8f2pavGMN8w40mlSKOfTK2SVJmBfBeVIj3kNw0swwgzyRq0d5TJVOwodFmtvpPeWPN/MCcfuWF0Ezbw=="
                 },
                 "filter-obj": {
                     "version": "1.1.0",
-                    "resolved": false,
+                    "resolved": "https://registry.npmjs.org/filter-obj/-/filter-obj-1.1.0.tgz",
                     "integrity": "sha512-8rXg1ZnX7xzy2NGDVkBVaAy+lSlPNwad13BtgSlLuxfIslyt5Vg64U7tFcCt4WS1R0hvtnQybT/IyCkGZ3DpXQ=="
                 },
                 "find-npm-prefix": {
@@ -17537,7 +17537,7 @@
                             "dependencies": {
                                 "safe-buffer": {
                                     "version": "5.1.2",
-                                    "resolved": false,
+                                    "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
                                     "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
                                 }
                             }
@@ -17552,7 +17552,7 @@
                             "dependencies": {
                                 "safe-buffer": {
                                     "version": "5.1.2",
-                                    "resolved": false,
+                                    "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
                                     "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
                                 }
                             }
@@ -17561,12 +17561,12 @@
                 },
                 "forever-agent": {
                     "version": "0.6.1",
-                    "resolved": false,
+                    "resolved": "https://registry.npmjs.org/forever-agent/-/forever-agent-0.6.1.tgz",
                     "integrity": "sha512-j0KLYPhm6zeac4lz3oJ3o65qvgQCcPubiyotZrXqEaG4hNagNYO8qdlUrX5vwqv9ohqeT/Z3j6+yW067yWWdUw=="
                 },
                 "form-data": {
                     "version": "2.3.3",
-                    "resolved": false,
+                    "resolved": "https://registry.npmjs.org/form-data/-/form-data-2.3.3.tgz",
                     "integrity": "sha512-1lLKB2Mu3aGP1Q/2eCOx0fNbRMe7XdwktwOruhfqqd0rIJWwN4Dh+E3hrPSlDCXnSR7UtZ1N38rVXm+6+MEhJQ==",
                     "requires": {
                         "asynckit": "^0.4.0",
@@ -17599,7 +17599,7 @@
                             "dependencies": {
                                 "safe-buffer": {
                                     "version": "5.1.2",
-                                    "resolved": false,
+                                    "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
                                     "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
                                 }
                             }
@@ -17614,7 +17614,7 @@
                             "dependencies": {
                                 "safe-buffer": {
                                     "version": "5.1.2",
-                                    "resolved": false,
+                                    "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
                                     "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
                                 }
                             }
@@ -17682,7 +17682,7 @@
                             "dependencies": {
                                 "safe-buffer": {
                                     "version": "5.1.2",
-                                    "resolved": false,
+                                    "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
                                     "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
                                 }
                             }
@@ -17697,7 +17697,7 @@
                             "dependencies": {
                                 "safe-buffer": {
                                     "version": "5.1.2",
-                                    "resolved": false,
+                                    "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
                                     "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
                                 }
                             }
@@ -17706,7 +17706,7 @@
                 },
                 "fs.realpath": {
                     "version": "1.0.0",
-                    "resolved": false,
+                    "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
                     "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw=="
                 },
                 "function-bind": {
@@ -17796,7 +17796,7 @@
                 },
                 "getpass": {
                     "version": "0.1.7",
-                    "resolved": false,
+                    "resolved": "https://registry.npmjs.org/getpass/-/getpass-0.1.7.tgz",
                     "integrity": "sha512-0fzj9JxOLfJ+XGLhR8ze3unN0KZCgZwiSSDz168VERjK8Wl8kVSdcu2kspd4s4wtAa1y/qrVRiAA0WclVsu0ng==",
                     "requires": {
                         "assert-plus": "^1.0.0"
@@ -17804,7 +17804,7 @@
                 },
                 "glob": {
                     "version": "7.2.3",
-                    "resolved": false,
+                    "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
                     "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
                     "requires": {
                         "fs.realpath": "^1.0.0",
@@ -17817,7 +17817,7 @@
                     "dependencies": {
                         "minimatch": {
                             "version": "3.1.2",
-                            "resolved": false,
+                            "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
                             "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
                             "requires": {
                                 "brace-expansion": "^1.1.7"
@@ -17860,12 +17860,12 @@
                 },
                 "graceful-fs": {
                     "version": "4.2.10",
-                    "resolved": false,
+                    "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.10.tgz",
                     "integrity": "sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA=="
                 },
                 "har-schema": {
                     "version": "2.0.0",
-                    "resolved": false,
+                    "resolved": "https://registry.npmjs.org/har-schema/-/har-schema-2.0.0.tgz",
                     "integrity": "sha512-Oqluz6zhGX8cyRaTQlFMPw80bSJVG2x/cFb8ZPhUILGgHka9SsokCCOQgpveePerqidZOrT14ipqfJb7ILcW5Q=="
                 },
                 "har-validator": {
@@ -17944,7 +17944,7 @@
                 },
                 "http-signature": {
                     "version": "1.2.0",
-                    "resolved": false,
+                    "resolved": "https://registry.npmjs.org/http-signature/-/http-signature-1.2.0.tgz",
                     "integrity": "sha512-CAbnr6Rz4CYQkLYUtSNXxQPUH2gK8f3iWexVlsnMeD+GjlsQ0Xsy1cOX+mN3dtxYomRy21CiOzU8Uhw6OwncEQ==",
                     "requires": {
                         "assert-plus": "^1.0.0",
@@ -18071,7 +18071,7 @@
                 },
                 "is-cidr": {
                     "version": "3.1.1",
-                    "resolved": false,
+                    "resolved": "https://registry.npmjs.org/is-cidr/-/is-cidr-3.1.1.tgz",
                     "integrity": "sha512-Gx+oErgq1j2jAKCR2Kbq0b3wbH0vQKqZ0wOlHxm0o56nq51Cs/DZA8oz9dMDhbHyHEGgJ86eTeVudtgMMOx3Mw==",
                     "requires": {
                         "cidr-regex": "^2.0.10"
@@ -18150,7 +18150,7 @@
                 },
                 "is-typedarray": {
                     "version": "1.0.0",
-                    "resolved": false,
+                    "resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz",
                     "integrity": "sha512-cyA56iCMHAh5CdzjJIa4aohJyeO1YbwLi3Jc35MmRU6poroFjIGZzUzupGiRPOjgHg9TLu43xbpwXk523fMxKA=="
                 },
                 "isarray": {
@@ -18165,12 +18165,12 @@
                 },
                 "isstream": {
                     "version": "0.1.2",
-                    "resolved": false,
+                    "resolved": "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz",
                     "integrity": "sha512-Yljz7ffyPbrLpLngrMtZ7NduUgVvi6wG9RJ9IUcyCd59YQ911PBJphODUcbOVbqYfxe1wuYf/LJ8PauMRwsM/g=="
                 },
                 "jsbn": {
                     "version": "0.1.1",
-                    "resolved": false,
+                    "resolved": "https://registry.npmjs.org/jsbn/-/jsbn-0.1.1.tgz",
                     "integrity": "sha512-UVU9dibq2JcFWxQPA6KCqj5O42VOmAY3zQUfEKxU0KpTGXwNoCjkX1e13eHNvw/xPynt6pU0rZ1htjWTNTSXsg=="
                 },
                 "json-parse-better-errors": {
@@ -18180,7 +18180,7 @@
                 },
                 "json-parse-even-better-errors": {
                     "version": "2.3.1",
-                    "resolved": false,
+                    "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
                     "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w=="
                 },
                 "json-schema": {
@@ -18190,7 +18190,7 @@
                 },
                 "json-stringify-safe": {
                     "version": "5.0.1",
-                    "resolved": false,
+                    "resolved": "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz",
                     "integrity": "sha512-ZClg6AaYvamvYEE82d3Iyd3vSSIjQ+odgjaTzRuO3s7toCdFKczob2i0zCh7JE8kWn17yvAWhUVxvqGwUalsRA=="
                 },
                 "jsonparse": {
@@ -18408,7 +18408,7 @@
                 },
                 "lock-verify": {
                     "version": "2.2.2",
-                    "resolved": false,
+                    "resolved": "https://registry.npmjs.org/lock-verify/-/lock-verify-2.2.2.tgz",
                     "integrity": "sha512-2CUNtr1ZSVKJHcYP8uEzafmmuyauCB5zZimj8TvQd/Lflt9kXVZs+8S+EbAzZLaVUDn8CYGmeC3DFGdYfnCzeQ==",
                     "requires": {
                         "@iarna/cli": "^2.1.0",
@@ -18537,7 +18537,7 @@
                 },
                 "meant": {
                     "version": "1.0.3",
-                    "resolved": false,
+                    "resolved": "https://registry.npmjs.org/meant/-/meant-1.0.3.tgz",
                     "integrity": "sha512-88ZRGcNxAq4EH38cQ4D85PM57pikCwS8Z99EWHODxN7KBY+UuPiqzRTtZzS8KTXO/ywSWbdjjJST2Hly/EQxLw=="
                 },
                 "mime-db": {
@@ -18555,7 +18555,7 @@
                 },
                 "minimatch": {
                     "version": "3.1.2",
-                    "resolved": false,
+                    "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
                     "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
                     "requires": {
                         "brace-expansion": "^1.1.7"
@@ -18604,7 +18604,7 @@
                 },
                 "mkdirp": {
                     "version": "0.5.6",
-                    "resolved": false,
+                    "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.6.tgz",
                     "integrity": "sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==",
                     "requires": {
                         "minimist": "^1.2.6"
@@ -18652,7 +18652,7 @@
                 },
                 "node-gyp": {
                     "version": "5.1.1",
-                    "resolved": false,
+                    "resolved": "https://registry.npmjs.org/node-gyp/-/node-gyp-5.1.1.tgz",
                     "integrity": "sha512-WH0WKGi+a4i4DUt2mHnvocex/xPLp9pYt5R6M2JdFB7pJ7Z34hveZ4nDTGTiLXCkitA9T8HFZjhinBCiVHYcWw==",
                     "requires": {
                         "env-paths": "^2.2.0",
@@ -18990,7 +18990,7 @@
                             "dependencies": {
                                 "safe-buffer": {
                                     "version": "5.1.2",
-                                    "resolved": false,
+                                    "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
                                     "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
                                 }
                             }
@@ -19005,7 +19005,7 @@
                             "dependencies": {
                                 "safe-buffer": {
                                     "version": "5.1.2",
-                                    "resolved": false,
+                                    "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
                                     "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
                                 }
                             }
@@ -19019,7 +19019,7 @@
                 },
                 "path-is-absolute": {
                     "version": "1.0.1",
-                    "resolved": false,
+                    "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
                     "integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg=="
                 },
                 "path-is-inside": {
@@ -19039,7 +19039,7 @@
                 },
                 "performance-now": {
                     "version": "2.1.0",
-                    "resolved": false,
+                    "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
                     "integrity": "sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow=="
                 },
                 "pify": {
@@ -19088,7 +19088,7 @@
                 },
                 "proto-list": {
                     "version": "1.2.4",
-                    "resolved": false,
+                    "resolved": "https://registry.npmjs.org/proto-list/-/proto-list-1.2.4.tgz",
                     "integrity": "sha512-vtK/94akxsTMhe0/cbfpR+syPuszcuwhqVjJq26CuNDgFGj682oRBXOP5MJpv2r7JtE8MsiepGIqvvOTBwn2vA=="
                 },
                 "protoduck": {
@@ -19111,7 +19111,7 @@
                 },
                 "psl": {
                     "version": "1.9.0",
-                    "resolved": false,
+                    "resolved": "https://registry.npmjs.org/psl/-/psl-1.9.0.tgz",
                     "integrity": "sha512-E/ZsdU4HLs/68gYzgGTkMicWTLPdAftJLfJFlLUAAKZGkStNU72sZjT66SnMDVOfOWY/YAoiD7Jxa9iHvngcag=="
                 },
                 "pump": {
@@ -19151,12 +19151,12 @@
                 },
                 "qs": {
                     "version": "6.5.3",
-                    "resolved": false,
+                    "resolved": "https://registry.npmjs.org/qs/-/qs-6.5.3.tgz",
                     "integrity": "sha512-qxXIEh4pCGfHICj1mAJQ2/2XVZkjCDTcEgfoSQxc/fYivUZxTkk7L3bDBJSoNrEzXI17oUO5Dp07ktqE5KzczA=="
                 },
                 "query-string": {
                     "version": "6.14.1",
-                    "resolved": false,
+                    "resolved": "https://registry.npmjs.org/query-string/-/query-string-6.14.1.tgz",
                     "integrity": "sha512-XDxAeVmpfu1/6IjyT/gXHOl+S0vQ9owggJ30hhWKdHAsNPOcasn5o9BW0eejZqL2e4vMjhAxoW3jVHcD6mbcYw==",
                     "requires": {
                         "decode-uri-component": "^0.2.0",
@@ -19167,7 +19167,7 @@
                 },
                 "qw": {
                     "version": "1.0.2",
-                    "resolved": false,
+                    "resolved": "https://registry.npmjs.org/qw/-/qw-1.0.2.tgz",
                     "integrity": "sha512-1PhZ/iLKwlVNq45dnerTMKFjMof49uqli7/0QsvPNbX5OJ3IZ8msa9lUpvPheVdP+IYYPrf6cOaVil7S35joVA=="
                 },
                 "rc": {
@@ -19213,7 +19213,7 @@
                 },
                 "read-package-json": {
                     "version": "2.1.2",
-                    "resolved": false,
+                    "resolved": "https://registry.npmjs.org/read-package-json/-/read-package-json-2.1.2.tgz",
                     "integrity": "sha512-D1KmuLQr6ZSJS0tW8hf3WGpRlwszJOXZ3E8Yd/DNRaM5d+1wVRZdHlpGBLAuovjr28LbWvjpWkBHMxpRGGjzNA==",
                     "requires": {
                         "glob": "^7.1.1",
@@ -19272,7 +19272,7 @@
                 },
                 "request": {
                     "version": "2.88.2",
-                    "resolved": false,
+                    "resolved": "https://registry.npmjs.org/request/-/request-2.88.2.tgz",
                     "integrity": "sha512-MsvtOrfG9ZcrOwAW+Qi+F6HbD0CWXEh9ou77uOb7FM2WPhwT7smM833PzanhJLsgXjN89Ir6V2PczXNnMpwKhw==",
                     "requires": {
                         "aws-sign2": "~0.7.0",
@@ -19342,7 +19342,7 @@
                 },
                 "safe-buffer": {
                     "version": "5.2.1",
-                    "resolved": false,
+                    "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
                     "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ=="
                 },
                 "safer-buffer": {
@@ -19513,7 +19513,7 @@
                 },
                 "sshpk": {
                     "version": "1.17.0",
-                    "resolved": false,
+                    "resolved": "https://registry.npmjs.org/sshpk/-/sshpk-1.17.0.tgz",
                     "integrity": "sha512-/9HIEs1ZXGhSPE8X6Ccm7Nam1z8KcoCqPdI7ecm1N33EzAetWahvQWVqLZtaZQ+IDKX4IyA2o0gBzqIMkAagHQ==",
                     "requires": {
                         "asn1": "~0.2.3",
@@ -19569,7 +19569,7 @@
                             "dependencies": {
                                 "safe-buffer": {
                                     "version": "5.1.2",
-                                    "resolved": false,
+                                    "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
                                     "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
                                 }
                             }
@@ -19584,7 +19584,7 @@
                             "dependencies": {
                                 "safe-buffer": {
                                     "version": "5.1.2",
-                                    "resolved": false,
+                                    "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
                                     "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
                                 }
                             }
@@ -19598,7 +19598,7 @@
                 },
                 "strict-uri-encode": {
                     "version": "2.0.0",
-                    "resolved": false,
+                    "resolved": "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-2.0.0.tgz",
                     "integrity": "sha512-QwiXZgpRcKkhTj2Scnn++4PKtWsH0kpzZ62L2R6c/LUVYv7hVnZqcg2+sMuT6R7Jusu1vviK/MFsu6kNJfWlEQ=="
                 },
                 "string-width": {
@@ -19754,7 +19754,7 @@
                             "dependencies": {
                                 "safe-buffer": {
                                     "version": "5.1.2",
-                                    "resolved": false,
+                                    "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
                                     "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
                                 }
                             }
@@ -19769,7 +19769,7 @@
                             "dependencies": {
                                 "safe-buffer": {
                                     "version": "5.1.2",
-                                    "resolved": false,
+                                    "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
                                     "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
                                 }
                             }
@@ -19788,7 +19788,7 @@
                 },
                 "tough-cookie": {
                     "version": "2.5.0",
-                    "resolved": false,
+                    "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.5.0.tgz",
                     "integrity": "sha512-nlLsUzgm1kfLXSXfRZMc1KLAugd4hqJHDTvc2hDIwS3mZAfMEuMbc03SujMF+GEcpaX/qboeycw6iO8JwVv2+g==",
                     "requires": {
                         "psl": "^1.1.28",
@@ -19797,7 +19797,7 @@
                     "dependencies": {
                         "punycode": {
                             "version": "2.1.1",
-                            "resolved": false,
+                            "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz",
                             "integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A=="
                         }
                     }
@@ -19812,7 +19812,7 @@
                 },
                 "tweetnacl": {
                     "version": "0.14.5",
-                    "resolved": false,
+                    "resolved": "https://registry.npmjs.org/tweetnacl/-/tweetnacl-0.14.5.tgz",
                     "integrity": "sha512-KXXFFdAbFXY4geFIwoyNK+f5Z1b7swfXABfL7HXCmoIWMKU3dmS26672A4EeQtDzLKy7SXmfBu51JolvEKwtGA=="
                 },
                 "typedarray": {
@@ -19883,7 +19883,7 @@
                 },
                 "uri-js": {
                     "version": "4.4.1",
-                    "resolved": false,
+                    "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
                     "integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==",
                     "requires": {
                         "punycode": "^2.1.0"
@@ -19924,7 +19924,7 @@
                 },
                 "uuid": {
                     "version": "3.4.0",
-                    "resolved": false,
+                    "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz",
                     "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A=="
                 },
                 "validate-npm-package-license": {
@@ -19946,7 +19946,7 @@
                 },
                 "verror": {
                     "version": "1.10.0",
-                    "resolved": false,
+                    "resolved": "https://registry.npmjs.org/verror/-/verror-1.10.0.tgz",
                     "integrity": "sha512-ZZKSmDAEFOijERBLkmYfJ+vmk3w+7hOLYDNkRCuRuMJGEmqYNCNLyBBFwWKVMhfwaEF3WOd0Zlw86U/WC/+nYw==",
                     "requires": {
                         "assert-plus": "^1.0.0",
@@ -20231,7 +20231,7 @@
         "oauth": {
             "version": "0.9.15",
             "resolved": "https://registry.npmjs.org/oauth/-/oauth-0.9.15.tgz",
-            "integrity": "sha1-vR/vr2hslrdUda7VGWQS/2DPucE="
+            "integrity": "sha512-a5ERWK1kh38ExDEfoO6qUHJb32rd7aYmPHuyCu3Fta/cnICvYmgd2uhuKXvPD+PXB+gCEYYEaQdIRAjCOwAKNA=="
         },
         "oauth-sign": {
             "version": "0.9.0",
@@ -20241,12 +20241,12 @@
         "object-assign": {
             "version": "4.1.1",
             "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
-            "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM="
+            "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg=="
         },
         "object-copy": {
             "version": "0.1.0",
             "resolved": "https://registry.npmjs.org/object-copy/-/object-copy-0.1.0.tgz",
-            "integrity": "sha1-fn2Fi3gb18mRpBupde04EnVOmYw=",
+            "integrity": "sha512-79LYn6VAb63zgtmAteVOWo9Vdj71ZVBy3Pbse+VqxDpEP83XuujMrGqHIwAXJ5I/aM0zU7dIyIAhifVTPrNItQ==",
             "requires": {
                 "copy-descriptor": "^0.1.0",
                 "define-property": "^0.2.5",
@@ -20256,7 +20256,7 @@
                 "define-property": {
                     "version": "0.2.5",
                     "resolved": "https://registry.npmjs.org/define-property/-/define-property-0.2.5.tgz",
-                    "integrity": "sha1-w1se+RjsPJkPmlvFe+BKrOxcgRY=",
+                    "integrity": "sha512-Rr7ADjQZenceVOAKop6ALkkRAmH1A4Gx9hV/7ZujPUN2rkATqFO0JZLZInbAjpZYoJ1gUx8MRMQVkYemcbMSTA==",
                     "requires": {
                         "is-descriptor": "^0.1.0"
                     }
@@ -20269,7 +20269,7 @@
                 "kind-of": {
                     "version": "3.2.2",
                     "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
-                    "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
+                    "integrity": "sha512-NOW9QQXMoZGg/oqnVNoNTTIFEIid1627WCffUBJEdMxYApq7mNE7CpzucIPc+ZQg25Phej7IJSmX3hO+oblOtQ==",
                     "requires": {
                         "is-buffer": "^1.1.5"
                     }
@@ -20339,7 +20339,7 @@
         "object-visit": {
             "version": "1.0.1",
             "resolved": "https://registry.npmjs.org/object-visit/-/object-visit-1.0.1.tgz",
-            "integrity": "sha1-95xEk68MU3e1n+OdOV5BBC3QRbs=",
+            "integrity": "sha512-GBaMwwAVK9qbQN3Scdo0OyvgPW7l3lnaVMj84uTOZlswkX0KpF6fyDBJhtTthf7pymztoN36/KEr1DyhF96zEA==",
             "requires": {
                 "isobject": "^3.0.0"
             }
@@ -20401,7 +20401,7 @@
         "object.pick": {
             "version": "1.3.0",
             "resolved": "https://registry.npmjs.org/object.pick/-/object.pick-1.3.0.tgz",
-            "integrity": "sha1-h6EKxMFpS9Lhy/U1kaZhQftd10c=",
+            "integrity": "sha512-tqa/UMy/CCoYmj+H5qc07qvSL9dqcs/WZENZ1JbtWBlATP+iVOe778gE6MSijnyCnORzDuX6hU+LA4SZ09YjFQ==",
             "requires": {
                 "isobject": "^3.0.1"
             }
@@ -20439,7 +20439,7 @@
         "once": {
             "version": "1.4.0",
             "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
-            "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
+            "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
             "requires": {
                 "wrappy": "1"
             }
@@ -20540,7 +20540,7 @@
         "os-tmpdir": {
             "version": "1.0.2",
             "resolved": "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz",
-            "integrity": "sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ="
+            "integrity": "sha512-D2FR03Vir7FIu45XBY20mTb+/ZSWB00sjU9jdQXt83gDrI4Ztz5Fs7/yy74g2N5SVQY4xY1qDr4rNddwYRVX0g=="
         },
         "osenv": {
             "version": "0.1.5",
@@ -20559,7 +20559,7 @@
         "p-debounce": {
             "version": "1.0.0",
             "resolved": "https://registry.npmjs.org/p-debounce/-/p-debounce-1.0.0.tgz",
-            "integrity": "sha1-y38svu/YegnrqGHhErZ1J+Yh4v0="
+            "integrity": "sha512-ttOxn4Yt0hzIsLLqKi/Ry9QRxW+UQKdoWHz7g99Ci57zPkqUU3kbWKAeHuv+HfRLe109acYLUY6kuVCOOqnt4g=="
         },
         "p-finally": {
             "version": "1.0.0",
@@ -20736,7 +20736,7 @@
         "pascalcase": {
             "version": "0.1.1",
             "resolved": "https://registry.npmjs.org/pascalcase/-/pascalcase-0.1.1.tgz",
-            "integrity": "sha1-s2PlXoAGym/iF4TS2yK9FdeRfxQ="
+            "integrity": "sha512-XHXfu/yOQRy9vYOtUDVMN60OEJjW013GoObG1o+xwQTpB9eYJX/BjXMsdW13ZDPruFhYYn0AG22w0xgQMwl3Nw=="
         },
         "passport": {
             "version": "0.4.1",
@@ -20758,7 +20758,7 @@
         "passport-local": {
             "version": "1.0.0",
             "resolved": "https://registry.npmjs.org/passport-local/-/passport-local-1.0.0.tgz",
-            "integrity": "sha1-H+YyaMkudWBmJkN+O5BmYsFbpu4=",
+            "integrity": "sha512-9wCE6qKznvf9mQYYbgJ3sVOHmCWoUNMVFoZzNoznmISbhnNNPhN9xfY3sLmScHMetEJeoY7CXwfhCe7argfQow==",
             "requires": {
                 "passport-strategy": "1.x.x"
             }
@@ -20778,7 +20778,7 @@
         "passport-strategy": {
             "version": "1.0.0",
             "resolved": "https://registry.npmjs.org/passport-strategy/-/passport-strategy-1.0.0.tgz",
-            "integrity": "sha1-tVOaqPwiWj0a0XlHbd8ja0QPUuQ="
+            "integrity": "sha512-CB97UUvDKJde2V0KDWWB3lyf6PC3FaZP7YxZ2G8OAtn9p4HI9j9JLP9qjOGZFvyl8uwNT8qM+hGnz/n16NI7oA=="
         },
         "path-browserify": {
             "version": "1.0.1",
@@ -20793,12 +20793,12 @@
         "path-exists": {
             "version": "3.0.0",
             "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-3.0.0.tgz",
-            "integrity": "sha1-zg6+ql94yxiSXqfYENe1mwEP1RU="
+            "integrity": "sha512-bpC7GYwiDYQ4wYLe+FA8lhRjhQCMcQGuSgGGqDkg/QerRWw9CmGRT0iSOVRSZJ29NMLZgIzqaljJ63oaL4NIJQ=="
         },
         "path-is-absolute": {
             "version": "1.0.1",
             "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
-            "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18="
+            "integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg=="
         },
         "path-is-inside": {
             "version": "1.0.2",
@@ -20808,7 +20808,7 @@
         "path-key": {
             "version": "2.0.1",
             "resolved": "https://registry.npmjs.org/path-key/-/path-key-2.0.1.tgz",
-            "integrity": "sha1-QRyttXTFoUDTpLGRDUDYDMn0C0A="
+            "integrity": "sha512-fEHGKCSmUSDPv4uoj8AlD+joPlq3peND+HRYyxFz4KPw4z926S/b8rIuFs2FYJg3BwsxJf6A9/3eIdLaYC+9Dw=="
         },
         "path-parse": {
             "version": "1.0.7",
@@ -20818,7 +20818,7 @@
         "path-to-regexp": {
             "version": "0.1.7",
             "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.7.tgz",
-            "integrity": "sha1-32BBeABfUi8V60SQ5yR6G/qmf4w="
+            "integrity": "sha512-5DFkuoqlv1uYQKxy8omFBeJPQcdoE07Kv2sferDCrAq1ohOU+MSDswDIbnx3YAM60qIOnYa53wBhXW0EbMonrQ=="
         },
         "path-type": {
             "version": "4.0.0",
@@ -20833,7 +20833,7 @@
         "pause": {
             "version": "0.0.1",
             "resolved": "https://registry.npmjs.org/pause/-/pause-0.0.1.tgz",
-            "integrity": "sha1-HUCLP9t2kjuVQ9lvtMnf1TXZy10="
+            "integrity": "sha512-KG8UEiEVkR3wGEb4m5yZkVCzigAD+cVEJck2CzYZO37ZGJfctvVptVO192MwrtPhzONn6go8ylnOdMhKqi4nfg=="
         },
         "pdf-parse": {
             "version": "1.1.1",
@@ -20881,7 +20881,7 @@
         "pend": {
             "version": "1.2.0",
             "resolved": "https://registry.npmjs.org/pend/-/pend-1.2.0.tgz",
-            "integrity": "sha1-elfrVQpng/kRUzH89GY9XI4AelA="
+            "integrity": "sha512-F3asv42UuXchdzt+xXqfW1OGlVBe+mxa2mqI0pg5yAHZPvFmY3Y6drSf/GQ1A86WgWEN9Kzh/WrgKa6iGcHXLg=="
         },
         "perfect-scrollbar": {
             "version": "1.5.5",
@@ -20891,7 +20891,7 @@
         "performance-now": {
             "version": "2.1.0",
             "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
-            "integrity": "sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns="
+            "integrity": "sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow=="
         },
         "picocolors": {
             "version": "1.0.0",
@@ -21037,7 +21037,7 @@
         "posix-character-classes": {
             "version": "0.1.1",
             "resolved": "https://registry.npmjs.org/posix-character-classes/-/posix-character-classes-0.1.1.tgz",
-            "integrity": "sha1-AerA/jta9xoqbAL+q7jB/vfgDqs="
+            "integrity": "sha512-xTgYBc3fuo7Yt7JbiuFxSYGToMoz8fLoE6TC9Wx1P/u+LfeThMOAqmuyECnlBaaJb+u1m9hHiXUEtwW4OzfUJg=="
         },
         "postcss": {
             "version": "7.0.39",
@@ -21290,7 +21290,7 @@
         "process": {
             "version": "0.11.10",
             "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",
-            "integrity": "sha1-czIwDoQBYb2j5podHZGn1LwW8YI="
+            "integrity": "sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A=="
         },
         "process-nextick-args": {
             "version": "2.0.1",
@@ -21364,7 +21364,7 @@
         "prosemirror-find-replace": {
             "version": "0.9.0",
             "resolved": "https://registry.npmjs.org/prosemirror-find-replace/-/prosemirror-find-replace-0.9.0.tgz",
-            "integrity": "sha1-QgsENNF5xdBJD44hSNhVGpVJY4I="
+            "integrity": "sha512-LfhQ/Zr0PkkJpCsr9vTJ5ZPYh49mSVVG+hHJ6djT+chlCW+t2ilSxBpBG+2IeE/I5nlbcvuLLAbxeI1g3pTCpA=="
         },
         "prosemirror-history": {
             "version": "1.3.0",
@@ -21469,7 +21469,7 @@
         "prr": {
             "version": "1.0.1",
             "resolved": "https://registry.npmjs.org/prr/-/prr-1.0.1.tgz",
-            "integrity": "sha1-0/wRS6BplaRexok/SEzrHXj19HY=",
+            "integrity": "sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw==",
             "dev": true
         },
         "pseudomap": {
@@ -21707,12 +21707,12 @@
         "pure-color": {
             "version": "1.3.0",
             "resolved": "https://registry.npmjs.org/pure-color/-/pure-color-1.3.0.tgz",
-            "integrity": "sha1-H+Bk+wrIUfDeYTIKi/eWg2Qi8z4="
+            "integrity": "sha512-QFADYnsVoBMw1srW7OVKEYjG+MbIa49s54w1MA1EDY6r2r/sTcKKYqRX1f4GYvnXP7eN/Pe9HFcX+hwzmrXRHA=="
         },
         "q": {
             "version": "1.5.1",
             "resolved": "https://registry.npmjs.org/q/-/q-1.5.1.tgz",
-            "integrity": "sha1-fjL3W0E4EpHQRhHxvxQQmsAGUdc="
+            "integrity": "sha512-kV/CThkXo6xyFEZUugw/+pIOywXcDbFYgSct5cT3gqlbkBE1SJdwy6UQoZvodiWF/ckQLZyDE/Bu1M6gVu5lVw=="
         },
         "qs": {
             "version": "6.5.3",
@@ -21760,7 +21760,7 @@
         "random-bytes": {
             "version": "1.0.0",
             "resolved": "https://registry.npmjs.org/random-bytes/-/random-bytes-1.0.0.tgz",
-            "integrity": "sha1-T2ih3Arli9P7lYSMMDJNt11kNgs="
+            "integrity": "sha512-iv7LhNVO047HzYR3InF6pUcUsPQiHTM1Qal51DcGSuZFBil1aBBWG5eHPNek7bvILMaYJ/8RU1e8w1AMdHmLQQ=="
         },
         "randombytes": {
             "version": "2.1.0",
@@ -21863,7 +21863,7 @@
         "react-base16-styling": {
             "version": "0.5.3",
             "resolved": "https://registry.npmjs.org/react-base16-styling/-/react-base16-styling-0.5.3.tgz",
-            "integrity": "sha1-OFjyTpxN2MvT9wLz901YHKKRcmk=",
+            "integrity": "sha512-EPuchwVvYPSFFIjGpH0k6wM0HQsmJ0vCk7BSl5ryxMVFIWW4hX4Kksu4PNtxfgOxDebTLkJQ8iC7zwAql0eusg==",
             "requires": {
                 "base16": "^1.0.0",
                 "lodash.curry": "^4.0.1",
@@ -21937,7 +21937,7 @@
         "react-dock": {
             "version": "0.2.4",
             "resolved": "https://registry.npmjs.org/react-dock/-/react-dock-0.2.4.tgz",
-            "integrity": "sha1-5yfcdVCztzEWY13LnA4E0Lev4Xw=",
+            "integrity": "sha512-ywUJPC/TIM9PO700skka0fH4aqbrH8RojUXejZFvjtqlc5KZ+xjHqFdo4A3j+dp+0NLFZ3Nai4xzcf3FUJ9BsQ==",
             "requires": {
                 "lodash.debounce": "^3.1.1",
                 "prop-types": "^15.5.8"
@@ -22300,7 +22300,7 @@
         "react-themeable": {
             "version": "1.1.0",
             "resolved": "https://registry.npmjs.org/react-themeable/-/react-themeable-1.1.0.tgz",
-            "integrity": "sha1-fURm3ZsrX6dQWHJ4JenxUro3mg4=",
+            "integrity": "sha512-kl5tQ8K+r9IdQXZd8WLa+xxYN04lLnJXRVhHfdgwsUJr/SlKJxIejoc9z9obEkx1mdqbTw1ry43fxEUwyD9u7w==",
             "requires": {
                 "object-assign": "^3.0.0"
             },
@@ -22308,7 +22308,7 @@
                 "object-assign": {
                     "version": "3.0.0",
                     "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-3.0.0.tgz",
-                    "integrity": "sha1-m+3VygiXlJvKR+f/QIBi1Un1h/I="
+                    "integrity": "sha512-jHP15vXVGeVh1HuaA2wY6lxk+whK/x4KBG88VXeRma7CCun7iGD5qPc4eYykQ9sdQvg8jkwFKsSxHln2ybW3xQ=="
                 }
             }
         },
@@ -22457,7 +22457,7 @@
         "readline": {
             "version": "1.3.0",
             "resolved": "https://registry.npmjs.org/readline/-/readline-1.3.0.tgz",
-            "integrity": "sha1-xYDXfvLPyHUrEySYBg3JeTp6wBw="
+            "integrity": "sha512-k2d6ACCkiNYz222Fs/iNze30rRJ1iIicW7JuX/7/cozvih6YCkFZH+J6mAFDVgv0dRBaAyr4jDqC95R2y4IADg=="
         },
         "recharts": {
             "version": "2.5.0",
@@ -22486,7 +22486,7 @@
         "rechoir": {
             "version": "0.6.2",
             "resolved": "https://registry.npmjs.org/rechoir/-/rechoir-0.6.2.tgz",
-            "integrity": "sha1-hSBLVNuoLVdC4oyWdW70OvUOM4Q=",
+            "integrity": "sha512-HFM8rkZ+i3zrV+4LQjwQ0W+ez98pApMGM3HUrN04j3CqzPOzl9nmP15Y8YXNm8QHGv/eacOVEjqhmWpkRV0NAw==",
             "requires": {
                 "resolve": "^1.1.6"
             }
@@ -22654,7 +22654,7 @@
         "relateurl": {
             "version": "0.2.7",
             "resolved": "https://registry.npmjs.org/relateurl/-/relateurl-0.2.7.tgz",
-            "integrity": "sha1-VNvzd+UUQKypCkzSdGANP/LYiKk="
+            "integrity": "sha512-G08Dxvm4iDN3MLM0EsP62EDV9IuhXPR6blNz6Utcp7zyV3tr4HVNINt6MpaRWbxoOHT3Q7YN2P+jaHX8vUbgog=="
         },
         "remark-gfm": {
             "version": "3.0.1",
@@ -22777,7 +22777,7 @@
         "repeat-string": {
             "version": "1.6.1",
             "resolved": "https://registry.npmjs.org/repeat-string/-/repeat-string-1.6.1.tgz",
-            "integrity": "sha1-jcrkcOHIirwtYA//Sndihtp15jc="
+            "integrity": "sha512-PV0dzCYDNfRi1jCDbJzpW7jNNDRuCOG/jI5ctQcGKt/clZD+YcPS3yIlWuTJMmESC8aevCFmWJy5wjAFgNqN6w=="
         },
         "repeating": {
             "version": "2.0.1",
@@ -22886,7 +22886,7 @@
         "require-directory": {
             "version": "2.1.1",
             "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
-            "integrity": "sha1-jGStX9MNqxyXbiNE/+f3kqam30I="
+            "integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q=="
         },
         "require-from-string": {
             "version": "2.0.2",
@@ -22901,7 +22901,7 @@
         "require-package-name": {
             "version": "2.0.1",
             "resolved": "https://registry.npmjs.org/require-package-name/-/require-package-name-2.0.1.tgz",
-            "integrity": "sha1-wR6XJ2tluOKSP3Xav1+y7ww4Qbk="
+            "integrity": "sha512-uuoJ1hU/k6M0779t3VMVIYpb2VMJk05cehCaABFhXaibcbvfgR8wKiozLjVFSzJPmQMRqIcO0HMyTFqfV09V6Q=="
         },
         "require_optional": {
             "version": "1.0.1",
@@ -22922,7 +22922,7 @@
         "requires-port": {
             "version": "1.0.0",
             "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
-            "integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8="
+            "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ=="
         },
         "resize-observer-polyfill": {
             "version": "1.5.1",
@@ -22967,7 +22967,7 @@
         "resolve-url": {
             "version": "0.2.1",
             "resolved": "https://registry.npmjs.org/resolve-url/-/resolve-url-0.2.1.tgz",
-            "integrity": "sha1-LGN/53yJOv0qZj/iGqkIAGjiBSo="
+            "integrity": "sha512-ZuF55hVUQaaczgOIwqWzkEcEidmlD/xl44x1UZnhOXcYuFN2S6+rcxpG+C1N3So0wvNI3DmJICUFfu2SxhBmvg=="
         },
         "responselike": {
             "version": "3.0.0",
@@ -23113,7 +23113,7 @@
         "safe-regex": {
             "version": "1.1.0",
             "resolved": "https://registry.npmjs.org/safe-regex/-/safe-regex-1.1.0.tgz",
-            "integrity": "sha1-QKNmnzsHfR6UPURinhV91IAjvy4=",
+            "integrity": "sha512-aJXcif4xnaNUzvUuC5gcb46oTS7zvg4jpMTnuqtrEPlR3vFr4pxtdTwaF1Qs3Enjn9HK+ZlwQui+a7z0SywIzg==",
             "requires": {
                 "ret": "~0.1.10"
             }
@@ -23211,7 +23211,7 @@
         "scss-loader": {
             "version": "0.0.1",
             "resolved": "https://registry.npmjs.org/scss-loader/-/scss-loader-0.0.1.tgz",
-            "integrity": "sha1-6uAXueDzjBKlMtslwiC5Avs05nE=",
+            "integrity": "sha512-SbT/smRJjkvvdHSEdAYAplosVkrtaSwwgUlnQCOuDS5sOKNjrS/eYCMvKeV6+YxK5cCOCsOJZd3vltrXatFp+g==",
             "dev": true
         },
         "scss-tokenizer": {
@@ -23241,17 +23241,17 @@
         "section-iterator": {
             "version": "2.0.0",
             "resolved": "https://registry.npmjs.org/section-iterator/-/section-iterator-2.0.0.tgz",
-            "integrity": "sha1-v0RNev7rlK1Dw5rS+yYVFifMuio="
+            "integrity": "sha512-xvTNwcbeDayXotnV32zLb3duQsP+4XosHpb/F+tu6VzEZFmIjzPdNk6/O+QOOx5XTh08KL2ufdXeCO33p380pQ=="
         },
         "select": {
             "version": "1.1.2",
             "resolved": "https://registry.npmjs.org/select/-/select-1.1.2.tgz",
-            "integrity": "sha1-DnNQrN7ICxEIUoeG7B1EGNEbOW0="
+            "integrity": "sha512-OwpTSOfy6xSs1+pwcNrv0RBMOzI39Lp3qQKUTPVVPRjCdNa5JH/oPRiqsesIskK8TVgmRiHwO4KXlV2Li9dANA=="
         },
         "select-hose": {
             "version": "2.0.0",
             "resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz",
-            "integrity": "sha1-Yl2GWPhlr0Psliv8N2o3NZpJlMo=",
+            "integrity": "sha512-mEugaLK+YfkijB4fx0e6kImuJdCIt2LxCRcbEYPqRGCs4F2ogyfZU5IAZRdjCP8JPq2AtdNoC/Dux63d9Kiryg==",
             "dev": true
         },
         "selfsigned": {
@@ -23271,7 +23271,7 @@
         "semver-compare": {
             "version": "1.0.0",
             "resolved": "https://registry.npmjs.org/semver-compare/-/semver-compare-1.0.0.tgz",
-            "integrity": "sha1-De4hahyUGrN+nvsXiPavxf9VN/w="
+            "integrity": "sha512-YM3/ITh2MJ5MtzaM429anh+x2jiLVjqILF4m4oyQB18W7Ggea7BfqdH/wGMK7dDiMghv/6WG7znWMwUDzJiXow=="
         },
         "semver-diff": {
             "version": "2.1.0",
@@ -23340,7 +23340,7 @@
         "serve-index": {
             "version": "1.9.1",
             "resolved": "https://registry.npmjs.org/serve-index/-/serve-index-1.9.1.tgz",
-            "integrity": "sha1-03aNabHn2C5c4FD/9bRTvqEqkjk=",
+            "integrity": "sha512-pXHfKNP4qujrtteMrSBb0rc8HJ9Ms/GrXwcUtUtD5s4ewDJI8bT3Cz2zTVRMKtri49pLx2e0Ya8ziP5Ya2pZZw==",
             "dev": true,
             "requires": {
                 "accepts": "~1.3.4",
@@ -23370,7 +23370,7 @@
                 "http-errors": {
                     "version": "1.6.3",
                     "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.6.3.tgz",
-                    "integrity": "sha1-i1VoC7S+KDoLW/TqLjhYC+HZMg0=",
+                    "integrity": "sha512-lks+lVC8dgGyh97jxvxeYTWQFvh4uw4yC12gVl63Cg30sjPX4wuGcdkICVXDAESr6OJGjqGA8Iz5mkeN6zlD7A==",
                     "dev": true,
                     "requires": {
                         "depd": "~1.1.2",
@@ -23382,13 +23382,13 @@
                 "inherits": {
                     "version": "2.0.3",
                     "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
-                    "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=",
+                    "integrity": "sha512-x00IRNXNy63jwGkJmzPigoySHbaqpNuzKbBOmzK+g2OdZpQ9w+sxCN+VSB3ja7IAge2OP2qpfxTjeNcyjmW1uw==",
                     "dev": true
                 },
                 "ms": {
                     "version": "2.0.0",
                     "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-                    "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
+                    "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
                     "dev": true
                 },
                 "setprototypeof": {
@@ -23400,7 +23400,7 @@
                 "statuses": {
                     "version": "1.5.0",
                     "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz",
-                    "integrity": "sha1-Fhx9rBd2Wf2YEfQ3cfqZOBR4Yow=",
+                    "integrity": "sha512-OpZ3zP+jT1PI7I8nemJX4AKmAX070ZkYPVWV/AaKTJl+tXCTGyVdC1a4SL8RUQYEwk/f34ZX8UTykN68FwrqAA==",
                     "dev": true
                 }
             }
@@ -23419,7 +23419,7 @@
         "set-blocking": {
             "version": "2.0.0",
             "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
-            "integrity": "sha1-BF+XgtARrppoA93TgrJDkrPYkPc="
+            "integrity": "sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw=="
         },
         "set-value": {
             "version": "2.0.1",
@@ -23435,7 +23435,7 @@
                 "extend-shallow": {
                     "version": "2.0.1",
                     "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
-                    "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
+                    "integrity": "sha512-zCnTtlxNoAiDc3gqY2aYAWFx7XWWiasuF2K8Me5WbN8otHKTUKBwjPtNpRs/rbUZm7KxWAaNj7P1a/p52GbVug==",
                     "requires": {
                         "is-extendable": "^0.1.0"
                     }
@@ -23453,7 +23453,7 @@
         "setimmediate": {
             "version": "1.0.5",
             "resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz",
-            "integrity": "sha1-KQy7Iy4waULX1+qbg3Mqt4VvgoU="
+            "integrity": "sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA=="
         },
         "setprototypeof": {
             "version": "1.2.0",
@@ -23628,7 +23628,7 @@
         "shebang-command": {
             "version": "1.2.0",
             "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz",
-            "integrity": "sha1-RKrGW2lbAzmJaMOfNj/uXer98eo=",
+            "integrity": "sha512-EV3L1+UQWGor21OmnvojK36mhg+TyIKDh3iFBKBohr5xeXIhNBcx8oWdgkTEEQ+BEFFYdLRuqMfd5L84N1V5Vg==",
             "requires": {
                 "shebang-regex": "^1.0.0"
             }
@@ -23636,7 +23636,7 @@
         "shebang-regex": {
             "version": "1.0.0",
             "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-1.0.0.tgz",
-            "integrity": "sha1-2kL0l0DAtC2yypcoVxyxkMmO/qM="
+            "integrity": "sha512-wpoSFAxys6b2a2wHZ1XpDSgD7N9iVjg29Ph9uV/uaP9Ex/KXlkTZTeddxDPSYQpgvzKLGJke2UU0AzoGCjNIvQ=="
         },
         "shelljs": {
             "version": "0.8.5",
@@ -23671,7 +23671,7 @@
         "simple-assign": {
             "version": "0.1.0",
             "resolved": "https://registry.npmjs.org/simple-assign/-/simple-assign-0.1.0.tgz",
-            "integrity": "sha1-F/0wZqXz13OPUDIbsPFMooHMS6o="
+            "integrity": "sha512-otdSSQzuVsmDoe5MnSm4ZgHd5sl0ak6A1CTjW1R/DUHQ8xoZuU1NUzf9x6n9Dvp3nxpvW51WNMQ/7rQ9432xDg=="
         },
         "simple-concat": {
             "version": "1.0.1",
@@ -23691,7 +23691,7 @@
         "simple-swizzle": {
             "version": "0.2.2",
             "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
-            "integrity": "sha1-pNprY1/8zMoz9w0Xy5JZLeleVXo=",
+            "integrity": "sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==",
             "requires": {
                 "is-arrayish": "^0.3.1"
             },
@@ -23723,7 +23723,7 @@
         "sliced": {
             "version": "1.0.1",
             "resolved": "https://registry.npmjs.org/sliced/-/sliced-1.0.1.tgz",
-            "integrity": "sha1-CzpmK10Ewxd7GSa+qCsD+Dei70E="
+            "integrity": "sha512-VZBmZP8WU3sMOZm1bdgTadsQbcscK0UM8oKxKVBs4XAhUo2Xxzm/OFMGBkPusxw9xL3Uy8LrzEqGqJhclsr0yA=="
         },
         "snapdragon": {
             "version": "0.8.2",
@@ -23751,7 +23751,7 @@
                 "define-property": {
                     "version": "0.2.5",
                     "resolved": "https://registry.npmjs.org/define-property/-/define-property-0.2.5.tgz",
-                    "integrity": "sha1-w1se+RjsPJkPmlvFe+BKrOxcgRY=",
+                    "integrity": "sha512-Rr7ADjQZenceVOAKop6ALkkRAmH1A4Gx9hV/7ZujPUN2rkATqFO0JZLZInbAjpZYoJ1gUx8MRMQVkYemcbMSTA==",
                     "requires": {
                         "is-descriptor": "^0.1.0"
                     }
@@ -23759,7 +23759,7 @@
                 "extend-shallow": {
                     "version": "2.0.1",
                     "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
-                    "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
+                    "integrity": "sha512-zCnTtlxNoAiDc3gqY2aYAWFx7XWWiasuF2K8Me5WbN8otHKTUKBwjPtNpRs/rbUZm7KxWAaNj7P1a/p52GbVug==",
                     "requires": {
                         "is-extendable": "^0.1.0"
                     }
@@ -23767,7 +23767,7 @@
                 "ms": {
                     "version": "2.0.0",
                     "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-                    "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
+                    "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
                 }
             }
         },
@@ -23784,7 +23784,7 @@
                 "define-property": {
                     "version": "1.0.0",
                     "resolved": "https://registry.npmjs.org/define-property/-/define-property-1.0.0.tgz",
-                    "integrity": "sha1-dp66rz9KY6rTr56NMEybvnm/sOY=",
+                    "integrity": "sha512-cZTYKFWspt9jZsMscWo8sc/5lbPC9Q0N5nBLgb+Yd915iL3udB1uFgS3B8YCx66UVHq018DAVFoee7x+gxggeA==",
                     "requires": {
                         "is-descriptor": "^1.0.0"
                     }
@@ -23833,7 +23833,7 @@
                 "kind-of": {
                     "version": "3.2.2",
                     "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
-                    "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
+                    "integrity": "sha512-NOW9QQXMoZGg/oqnVNoNTTIFEIid1627WCffUBJEdMxYApq7mNE7CpzucIPc+ZQg25Phej7IJSmX3hO+oblOtQ==",
                     "requires": {
                         "is-buffer": "^1.1.5"
                     }
@@ -24002,7 +24002,7 @@
         "source-map": {
             "version": "0.5.7",
             "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
-            "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w="
+            "integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ=="
         },
         "source-map-js": {
             "version": "1.0.2",
@@ -24050,7 +24050,7 @@
         "sparse-bitfield": {
             "version": "3.0.3",
             "resolved": "https://registry.npmjs.org/sparse-bitfield/-/sparse-bitfield-3.0.3.tgz",
-            "integrity": "sha1-/0rm5oZWBWuks+eSqzM004JzyhE=",
+            "integrity": "sha512-kvzhi7vqKTfkh0PZU+2D2PIllw2ymqJKujUcyPMd9Y75Nv4nPbGJZXNhxsgdQab2BmlDct1YnfQCguEvHr7VsQ==",
             "optional": true,
             "requires": {
                 "memory-pager": "^1.0.2"
@@ -24166,7 +24166,7 @@
         "sprintf-js": {
             "version": "1.0.3",
             "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
-            "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw="
+            "integrity": "sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g=="
         },
         "sshpk": {
             "version": "1.17.0",
@@ -24196,12 +24196,12 @@
         "standard-error": {
             "version": "1.1.0",
             "resolved": "https://registry.npmjs.org/standard-error/-/standard-error-1.1.0.tgz",
-            "integrity": "sha1-I+UWj6HAggGJ5YEnAaeQWFENDTQ="
+            "integrity": "sha512-4v7qzU7oLJfMI5EltUSHCaaOd65J6S4BqKRWgzMi4EYaE5fvNabPxmAPGdxpGXqrcWjhDGI/H09CIdEuUOUeXg=="
         },
         "standard-http-error": {
             "version": "2.0.1",
             "resolved": "https://registry.npmjs.org/standard-http-error/-/standard-http-error-2.0.1.tgz",
-            "integrity": "sha1-+K6RcuPO+cs40ucIShkl9Xp8NL0=",
+            "integrity": "sha512-DX/xPIoyXQTuY6BMZK4Utyi4l3A4vFoafsfqrU6/dO4Oe/59c7PyqPd2IQj9m+ZieDg2K3RL9xOYJsabcD9IUA==",
             "requires": {
                 "standard-error": ">= 1.1.0 < 2"
             }
@@ -24209,7 +24209,7 @@
         "static-extend": {
             "version": "0.1.2",
             "resolved": "https://registry.npmjs.org/static-extend/-/static-extend-0.1.2.tgz",
-            "integrity": "sha1-YICcOcv/VTNyJv1eC1IPNB8ftcY=",
+            "integrity": "sha512-72E9+uLc27Mt718pMHt9VMNiAL4LMsmDbBva8mxWUCkT07fSzEGMYUCk0XWY6lp0j6RBAG4cJ3mWuZv2OE3s0g==",
             "requires": {
                 "define-property": "^0.2.5",
                 "object-copy": "^0.1.0"
@@ -24218,7 +24218,7 @@
                 "define-property": {
                     "version": "0.2.5",
                     "resolved": "https://registry.npmjs.org/define-property/-/define-property-0.2.5.tgz",
-                    "integrity": "sha1-w1se+RjsPJkPmlvFe+BKrOxcgRY=",
+                    "integrity": "sha512-Rr7ADjQZenceVOAKop6ALkkRAmH1A4Gx9hV/7ZujPUN2rkATqFO0JZLZInbAjpZYoJ1gUx8MRMQVkYemcbMSTA==",
                     "requires": {
                         "is-descriptor": "^0.1.0"
                     }
@@ -24257,7 +24257,7 @@
         "stealthy-require": {
             "version": "1.1.1",
             "resolved": "https://registry.npmjs.org/stealthy-require/-/stealthy-require-1.1.1.tgz",
-            "integrity": "sha1-NbCYdbT/SfJqd35QmzCQoyJr8ks="
+            "integrity": "sha512-ZnWpYnYugiOVEY5GkcuJK1io5V8QmNYChG62gSit9pQVGErXtrKuPC55ITaVSukmMta5qpMU7vqLt2Lnni4f/g=="
         },
         "stop-iteration-iterator": {
             "version": "1.0.0",
@@ -24290,7 +24290,7 @@
         "stream-parser": {
             "version": "0.3.1",
             "resolved": "https://registry.npmjs.org/stream-parser/-/stream-parser-0.3.1.tgz",
-            "integrity": "sha1-FhhUhpRCACGhGC/wrxkRwSl2F3M=",
+            "integrity": "sha512-bJ/HgKq41nlKvlhccD5kaCr/P+Hu0wPNKPJOH7en+YrJu/9EgqUF+88w5Jb6KNcjOFMhfX4B2asfeAtIGuHObQ==",
             "requires": {
                 "debug": "2"
             },
@@ -24306,7 +24306,7 @@
                 "ms": {
                     "version": "2.0.0",
                     "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-                    "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
+                    "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
                 }
             }
         },
@@ -24319,7 +24319,7 @@
         "strict-uri-encode": {
             "version": "2.0.0",
             "resolved": "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-2.0.0.tgz",
-            "integrity": "sha1-ucczDHBChi9rFC3CdLvMWGbONUY="
+            "integrity": "sha512-QwiXZgpRcKkhTj2Scnn++4PKtWsH0kpzZ62L2R6c/LUVYv7hVnZqcg2+sMuT6R7Jusu1vviK/MFsu6kNJfWlEQ=="
         },
         "string-width": {
             "version": "2.1.1",
@@ -24409,7 +24409,7 @@
         "strip-ansi": {
             "version": "4.0.0",
             "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
-            "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=",
+            "integrity": "sha512-4XaJ2zQdCzROZDivEVIDPkcQn8LMFSa8kj8Gxb/Lnwzv9A8VctNZ+lfivC/sV3ivW8ElJTERXZoPBRrZKkNKow==",
             "requires": {
                 "ansi-regex": "^3.0.0"
             }
@@ -24445,7 +24445,7 @@
         "strip-json-comments": {
             "version": "2.0.1",
             "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz",
-            "integrity": "sha1-PFMZQukIwml8DsNEhYwobHygpgo="
+            "integrity": "sha512-4gB8na07fecVVkOI6Rs4e7T6NOTki5EmL7TUduTs6bu3EdnSycntVJ4re8kgZA+wx9IueI2Y11bfbgwtzuE0KQ=="
         },
         "style-loader": {
             "version": "0.23.1",
@@ -24647,7 +24647,7 @@
         "temp-dir": {
             "version": "1.0.0",
             "resolved": "https://registry.npmjs.org/temp-dir/-/temp-dir-1.0.0.tgz",
-            "integrity": "sha1-CnwOom06Oa+n4OvqnB/AvE2qAR0="
+            "integrity": "sha512-xZFXEGbG7SNC3itwBzI3RYjq/cEhBkx2hJuKGIUOcEULmkQExXiHat2z/qkISYsuR+IKumhEfKKbV5qXmhICFQ=="
         },
         "tempy": {
             "version": "0.2.1",
@@ -24729,7 +24729,7 @@
         "through": {
             "version": "2.3.8",
             "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",
-            "integrity": "sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU="
+            "integrity": "sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg=="
         },
         "through2": {
             "version": "2.0.5",
@@ -24811,12 +24811,12 @@
         "to-fast-properties": {
             "version": "2.0.0",
             "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
-            "integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4="
+            "integrity": "sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog=="
         },
         "to-object-path": {
             "version": "0.3.0",
             "resolved": "https://registry.npmjs.org/to-object-path/-/to-object-path-0.3.0.tgz",
-            "integrity": "sha1-KXWIt7Dn4KwI4E5nL4XB9JmeF68=",
+            "integrity": "sha512-9mWHdnGRuh3onocaHzukyvCZhzvr6tiflAy/JRFXcJX0TjgfWA9pk9t8CMbzmBE4Jfw58pXbkngtBtqYxzNEyg==",
             "requires": {
                 "kind-of": "^3.0.2"
             },
@@ -24829,7 +24829,7 @@
                 "kind-of": {
                     "version": "3.2.2",
                     "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
-                    "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
+                    "integrity": "sha512-NOW9QQXMoZGg/oqnVNoNTTIFEIid1627WCffUBJEdMxYApq7mNE7CpzucIPc+ZQg25Phej7IJSmX3hO+oblOtQ==",
                     "requires": {
                         "is-buffer": "^1.1.5"
                     }
@@ -24850,7 +24850,7 @@
         "to-regex-range": {
             "version": "2.1.1",
             "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-2.1.1.tgz",
-            "integrity": "sha1-fIDBe53+vlmeJzZ+DU3VWQFB2zg=",
+            "integrity": "sha512-ZZWNfCjUokXXDGXFpZehJIkZqq91BcULFq/Pi7M5i4JnxXdhMKAK682z8bCW3o8Hj1wuuzoKcW3DfVzaP6VuNg==",
             "requires": {
                 "is-number": "^3.0.0",
                 "repeat-string": "^1.6.1"
@@ -24877,7 +24877,7 @@
                 "nopt": {
                     "version": "1.0.10",
                     "resolved": "https://registry.npmjs.org/nopt/-/nopt-1.0.10.tgz",
-                    "integrity": "sha1-bd0hvSoxQXuScn3Vhfim83YI6+4=",
+                    "integrity": "sha512-NWmpvLSqUrgrAC9HCuxEvb+PSloHpqVu+FqcO4eeF2h5qYRhA7ev6KvelyQAKtegUbC6RypJnlEOhd8vloNKYg==",
                     "requires": {
                         "abbrev": "1"
                     }
@@ -24898,7 +24898,7 @@
         "tr46": {
             "version": "0.0.3",
             "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
-            "integrity": "sha1-gYT9NH2snNwYWZLzpmIuFLnZq2o="
+            "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw=="
         },
         "translate-google-api": {
             "version": "1.0.4",
@@ -24926,7 +24926,7 @@
         "traverse-chain": {
             "version": "0.1.0",
             "resolved": "https://registry.npmjs.org/traverse-chain/-/traverse-chain-0.1.0.tgz",
-            "integrity": "sha1-YdvC1Ttp/2CRoSoWj9fUMxB+QPE="
+            "integrity": "sha512-up6Yvai4PYKhpNp5PkYtx50m3KbwQrqDwbuZP/ItyL64YEWHAvH6Md83LFLV/GRSk/BoUVwwgUzX6SOQSbsfAg=="
         },
         "tree-kill": {
             "version": "1.2.2",
@@ -24960,7 +24960,7 @@
         "tryit": {
             "version": "1.0.3",
             "resolved": "https://registry.npmjs.org/tryit/-/tryit-1.0.3.tgz",
-            "integrity": "sha1-OTvnMKlEb9Hq1tpZoBQwjzbCics="
+            "integrity": "sha512-6C5h3CE+0qjGp+YKYTs74xR0k/Nw/ePtl/Lp6CCf44hqBQ66qnH1sDFR5mV/Gc48EsrHLB53lCFSffQCkka3kg=="
         },
         "ts-loader": {
             "version": "5.4.5",
@@ -25178,7 +25178,7 @@
                 "strip-bom": {
                     "version": "3.0.0",
                     "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz",
-                    "integrity": "sha1-IzTBjpx1n3vdVv3vfprj1YjmjtM=",
+                    "integrity": "sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==",
                     "dev": true
                 }
             }
@@ -25304,7 +25304,7 @@
         "tunnel-agent": {
             "version": "0.6.0",
             "resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.6.0.tgz",
-            "integrity": "sha1-J6XeoGs2sEoKmWZ3SykIaPD8QP0=",
+            "integrity": "sha512-McnNiV1l8RYeY8tBgEpuodCC1mLUdbSN+CYBL7kJsJNInOP8UjDDEwdk6Mw60vdLLrr5NHKZhMAOSrR2NZuQ+w==",
             "requires": {
                 "safe-buffer": "^5.0.1"
             }
@@ -25312,7 +25312,7 @@
         "tweetnacl": {
             "version": "0.14.5",
             "resolved": "https://registry.npmjs.org/tweetnacl/-/tweetnacl-0.14.5.tgz",
-            "integrity": "sha1-WuaBd/GS1EViadEIr6k/+HQ/T2Q="
+            "integrity": "sha512-KXXFFdAbFXY4geFIwoyNK+f5Z1b7swfXABfL7HXCmoIWMKU3dmS26672A4EeQtDzLKy7SXmfBu51JolvEKwtGA=="
         },
         "type": {
             "version": "1.2.0",
@@ -25367,7 +25367,7 @@
         "typedarray": {
             "version": "0.0.6",
             "resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz",
-            "integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c="
+            "integrity": "sha512-/aCDEGatGvZ2BIk+HmLf4ifCJFwvKFNb9/JeZPMulfgFracn9QFcAf5GO8B/mweUjSoblS5In0cWhqpfs/5PQA=="
         },
         "typescript": {
             "version": "4.9.5",
@@ -25412,7 +25412,7 @@
                 "jsonfile": {
                     "version": "4.0.0",
                     "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz",
-                    "integrity": "sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=",
+                    "integrity": "sha512-m6F1R3z8jjlf2imQHS2Qez5sjKWQzbuuhuJ/FKYFRZvPE3PuHcSMVZzfsLhGVOkfd20obL5SWEBew5ShlquNxg==",
                     "requires": {
                         "graceful-fs": "^4.1.6"
                     }
@@ -25548,7 +25548,7 @@
         "unicode-trie": {
             "version": "0.3.1",
             "resolved": "https://registry.npmjs.org/unicode-trie/-/unicode-trie-0.3.1.tgz",
-            "integrity": "sha1-1nHd3YkQGgi6w3tqUWEBBgIFIIU=",
+            "integrity": "sha512-WgVuO0M2jDl7hVfbPgXv2LUrD81HM0bQj/bvLGiw6fJ4Zo8nNFnDrA0/hU2Te/wz6pjxCm5cxJwtLjo2eyV51Q==",
             "requires": {
                 "pako": "^0.2.5",
                 "tiny-inflate": "^1.0.0"
@@ -25557,7 +25557,7 @@
                 "pako": {
                     "version": "0.2.9",
                     "resolved": "https://registry.npmjs.org/pako/-/pako-0.2.9.tgz",
-                    "integrity": "sha1-8/dSL073gjSNqBYbrZ7P1Rv4OnU="
+                    "integrity": "sha512-NUcwaKxUxWrZLpDG+z/xZaCgQITkA/Dv4V/T6bw7VON6l1Xz/VnrBqrYjZQ12TamKHzITTfOEIYUj48y2KXImA=="
                 }
             }
         },
@@ -25607,7 +25607,7 @@
         "unique-string": {
             "version": "1.0.0",
             "resolved": "https://registry.npmjs.org/unique-string/-/unique-string-1.0.0.tgz",
-            "integrity": "sha1-nhBXzKhRq7kzmPizOuGHuZyuwRo=",
+            "integrity": "sha512-ODgiYu03y5g76A1I9Gt0/chLCzQjvzDy7DsZGsLOE/1MrF6wriEskSncj1+/C58Xk/kPZDppSctDybCwOSaGAg==",
             "requires": {
                 "crypto-random-string": "^1.0.0"
             }
@@ -25680,12 +25680,12 @@
         "unpipe": {
             "version": "1.0.0",
             "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
-            "integrity": "sha1-sr9O6FFKrmFltIF4KdIbLvSZBOw="
+            "integrity": "sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ=="
         },
         "unset-value": {
             "version": "1.0.0",
             "resolved": "https://registry.npmjs.org/unset-value/-/unset-value-1.0.0.tgz",
-            "integrity": "sha1-g3aHP30jNRef+x5vw6jtDfyKtVk=",
+            "integrity": "sha512-PcA2tsuGSF9cnySLHTLSh2qrQiJ70mn+r+Glzxv2TWZblxsxCC52BDlZoPCsz7STd9pN7EZetkWZBAvk4cgZdQ==",
             "requires": {
                 "has-value": "^0.3.1",
                 "isobject": "^3.0.0"
@@ -25694,7 +25694,7 @@
                 "has-value": {
                     "version": "0.3.1",
                     "resolved": "https://registry.npmjs.org/has-value/-/has-value-0.3.1.tgz",
-                    "integrity": "sha1-ex9YutpiyoJ+wKIHgCVlSEWZXh8=",
+                    "integrity": "sha512-gpG936j8/MzaeID5Yif+577c17TxaDmhuyVgSwtnL/q8UUTySg8Mecb+8Cf1otgLoD7DDH75axp86ER7LFsf3Q==",
                     "requires": {
                         "get-value": "^2.0.3",
                         "has-values": "^0.1.4",
@@ -25704,7 +25704,7 @@
                         "isobject": {
                             "version": "2.1.0",
                             "resolved": "https://registry.npmjs.org/isobject/-/isobject-2.1.0.tgz",
-                            "integrity": "sha1-8GVWEJaj8dou9GJy+BXIQNh+DIk=",
+                            "integrity": "sha512-+OUdGJlgjOBZDfxnDjYYG6zp487z0JGNQq3cYQYg5f5hKR+syHMsaztzGeml/4kGG55CSpKSpWTY+jYGgsHLgA==",
                             "requires": {
                                 "isarray": "1.0.0"
                             }
@@ -25714,7 +25714,7 @@
                 "has-values": {
                     "version": "0.1.4",
                     "resolved": "https://registry.npmjs.org/has-values/-/has-values-0.1.4.tgz",
-                    "integrity": "sha1-bWHeldkd/Km5oCCJrThL/49it3E="
+                    "integrity": "sha512-J8S0cEdWuQbqD9//tlZxiMuMNmxB8PlEwvYwuxsTmR1G5RXUePEX/SJn7aD0GMLieuZYSwNH0cQuJGwnYunXRQ=="
                 }
             }
         },
@@ -25780,7 +25780,7 @@
         "urix": {
             "version": "0.1.0",
             "resolved": "https://registry.npmjs.org/urix/-/urix-0.1.0.tgz",
-            "integrity": "sha1-2pN/emLiH+wf0Y1Js1wpNQZ6bHI="
+            "integrity": "sha512-Am1ousAhSLBeB9cG/7k7r2R0zj50uDRlZHPGbazid5s9rlF1F/QKYObEKSIunSjIOkJZqwRRLpvewjEkM7pSqg=="
         },
         "url": {
             "version": "0.11.0",
@@ -25872,12 +25872,12 @@
         "util-deprecate": {
             "version": "1.0.2",
             "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
-            "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8="
+            "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="
         },
         "utila": {
             "version": "0.4.0",
             "resolved": "https://registry.npmjs.org/utila/-/utila-0.4.0.tgz",
-            "integrity": "sha1-ihagXURWV6Oupe7MWxKk+lN5dyw="
+            "integrity": "sha512-Z0DbgELS9/L/75wZbro8xAnT50pBVFQZ+hUEueGDU5FN51YSCYM+jdxsfCiHjwNP/4LCDD0i/graKpeBnOXKRA=="
         },
         "utility-types": {
             "version": "3.10.0",
@@ -25887,7 +25887,7 @@
         "utils-merge": {
             "version": "1.0.1",
             "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz",
-            "integrity": "sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM="
+            "integrity": "sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA=="
         },
         "uuid": {
             "version": "3.4.0",
@@ -25897,7 +25897,7 @@
         "uuid-js": {
             "version": "0.7.5",
             "resolved": "https://registry.npmjs.org/uuid-js/-/uuid-js-0.7.5.tgz",
-            "integrity": "sha1-bIhtAqU9LUDc8l2RoXC0p7JblNA="
+            "integrity": "sha512-lJFducSMfVDO3E1wBe/zflgU25JbpX9KfF+g0k6OxIt9xeybdZd27n75vPg+4cLN55UKGjJ46w3K3q3l+8KgkQ=="
         },
         "uvu": {
             "version": "0.5.6",
@@ -25932,7 +25932,7 @@
         "valid-url": {
             "version": "1.0.9",
             "resolved": "https://registry.npmjs.org/valid-url/-/valid-url-1.0.9.tgz",
-            "integrity": "sha1-HBRHm0DxOXp1eC8RXkCGRHQzogA="
+            "integrity": "sha512-QQDsV8OnSf5Uc30CKSwG9lnhMPe6exHtTXLRYX8uMwKENy640pU+2BgBL0LRbDh/eYRahNCS7aewCx0wf3NYVA=="
         },
         "validate-npm-package-license": {
             "version": "3.0.4",
@@ -25951,12 +25951,12 @@
         "vary": {
             "version": "1.1.2",
             "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
-            "integrity": "sha1-IpnwLG3tMNSllhsLn3RSShj2NPw="
+            "integrity": "sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg=="
         },
         "verror": {
             "version": "1.10.0",
             "resolved": "https://registry.npmjs.org/verror/-/verror-1.10.0.tgz",
-            "integrity": "sha1-OhBcoXBTr1XW4nDB+CiGguGNpAA=",
+            "integrity": "sha512-ZZKSmDAEFOijERBLkmYfJ+vmk3w+7hOLYDNkRCuRuMJGEmqYNCNLyBBFwWKVMhfwaEF3WOd0Zlw86U/WC/+nYw==",
             "requires": {
                 "assert-plus": "^1.0.0",
                 "core-util-is": "1.0.2",
@@ -26128,7 +26128,7 @@
         "warning": {
             "version": "3.0.0",
             "resolved": "https://registry.npmjs.org/warning/-/warning-3.0.0.tgz",
-            "integrity": "sha1-MuU3fLVy3kqwR1O9+IIcAe1gW3w=",
+            "integrity": "sha512-jMBt6pUrKn5I+OGgtQ4YZLdhIeJmObddh6CsibPxyQ5yPZm1XExSyzC1LCNX7BzhxWgiHmizBWJTHJIjMjTQYQ==",
             "requires": {
                 "loose-envify": "^1.0.0"
             }
@@ -26160,7 +26160,7 @@
         "web-request": {
             "version": "1.0.7",
             "resolved": "https://registry.npmjs.org/web-request/-/web-request-1.0.7.tgz",
-            "integrity": "sha1-twxCs81FV3noLbaIYlOySR8r1Wk=",
+            "integrity": "sha512-mVySwo0f8FFw77ZCEEjZ93g7SqAvWREj15FefhJgPkkylu7b185N/u3Oa92sNpMdhjcErGB7oGpOkAAIvflSjw==",
             "requires": {
                 "request": "^2.69.0"
             }
@@ -26173,7 +26173,7 @@
         "webidl-conversions": {
             "version": "3.0.1",
             "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
-            "integrity": "sha1-JFNCdeKnvGvnvIZhHMFq4KVlSHE="
+            "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ=="
         },
         "webpack": {
             "version": "5.75.0",
@@ -26650,7 +26650,7 @@
         "whatwg-url": {
             "version": "5.0.0",
             "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
-            "integrity": "sha1-lmRU6HZUYuN2RNNib2dCzotwll0=",
+            "integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==",
             "requires": {
                 "tr46": "~0.0.3",
                 "webidl-conversions": "^3.0.0"
@@ -26659,7 +26659,7 @@
         "when": {
             "version": "3.7.8",
             "resolved": "https://registry.npmjs.org/when/-/when-3.7.8.tgz",
-            "integrity": "sha1-xxMLan6gRpPoQs3J56Hyqjmjn4I="
+            "integrity": "sha512-5cZ7mecD3eYcMiCH4wtRPA5iFJZ50BJYDfckI5RRpQiktMiYTcn0ccLTZOvcbBume+1304fQztxeNzNS9Gvrnw=="
         },
         "which": {
             "version": "1.3.1",
@@ -26696,7 +26696,7 @@
         "which-module": {
             "version": "2.0.0",
             "resolved": "https://registry.npmjs.org/which-module/-/which-module-2.0.0.tgz",
-            "integrity": "sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho="
+            "integrity": "sha512-B+enWhmw6cjfVC7kS8Pj9pCrKSc5txArRyaYGe088shv/FGWH+0Rjx/xPgtsWfsUtS27FkP697E4DDhgrgoc0Q=="
         },
         "which-pm-runs": {
             "version": "1.1.0",
@@ -26845,7 +26845,7 @@
         "wrappy": {
             "version": "1.0.2",
             "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
-            "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8="
+            "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ=="
         },
         "write": {
             "version": "1.0.3",
@@ -26916,7 +26916,7 @@
         "xoauth2": {
             "version": "1.2.0",
             "resolved": "https://registry.npmjs.org/xoauth2/-/xoauth2-1.2.0.tgz",
-            "integrity": "sha1-8u76wRRyyXHqO8RuVU60sSMhRuU="
+            "integrity": "sha512-hKuNbkj3q/ifCcfWnW6KURP+6ExSuLdLG007gasNhMEMKlLaejNkIA6eu5Ol1xPP0/kzTuA87XHDaAcUw5k73Q=="
         },
         "xregexp": {
             "version": "4.4.1",
@@ -27011,7 +27011,7 @@
         "yauzl": {
             "version": "2.10.0",
             "resolved": "https://registry.npmjs.org/yauzl/-/yauzl-2.10.0.tgz",
-            "integrity": "sha1-x+sXyT4RLLEIb6bY5R+wZnt5pfk=",
+            "integrity": "sha512-p4a9I6X6nu6IhoGmBqAcbJy1mlC4j27vEPZX9F4L4/vZT3Lyq1VkFHw/V/PUcB9Buo+DG3iHkT0x3Qya58zc3g==",
             "requires": {
                 "buffer-crc32": "~0.2.3",
                 "fd-slicer": "~1.1.0"
-- 
cgit v1.2.3-70-g09d2


From 900efdb5c08397e53e1d00555fc6eac208eff5a1 Mon Sep 17 00:00:00 2001
From: srichman333 <sarah_n_richman@brown.edu>
Date: Tue, 18 Jul 2023 16:24:57 -0400
Subject: brushed graph has can have multiple links + still link to the correct
 graph for data

---
 src/client/views/nodes/DataVizBox/DataVizBox.scss          | 1 +
 src/client/views/nodes/DataVizBox/components/LineChart.tsx | 4 ++--
 src/client/views/nodes/DataVizBox/components/TableBox.tsx  | 1 +
 3 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/client/views/nodes/DataVizBox/DataVizBox.scss b/src/client/views/nodes/DataVizBox/DataVizBox.scss
index b3cbc89aa..5e7230271 100644
--- a/src/client/views/nodes/DataVizBox/DataVizBox.scss
+++ b/src/client/views/nodes/DataVizBox/DataVizBox.scss
@@ -1,6 +1,7 @@
 .dataviz {
     overflow: hidden;
     height: 100%;
+    width: 100%;
 
     .datatype-button{
         margin: 0;
diff --git a/src/client/views/nodes/DataVizBox/components/LineChart.tsx b/src/client/views/nodes/DataVizBox/components/LineChart.tsx
index cb6ba6fe7..637ed0ead 100644
--- a/src/client/views/nodes/DataVizBox/components/LineChart.tsx
+++ b/src/client/views/nodes/DataVizBox/components/LineChart.tsx
@@ -1,7 +1,6 @@
 import { action, computed, IReactionDisposer, observable, reaction } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
-// import d3
 import * as d3 from 'd3';
 import { Doc, DocListCast } from '../../../../../fields/Doc';
 import { Id } from '../../../../../fields/FieldSymbols';
@@ -56,7 +55,8 @@ export class LineChart extends React.Component<LineChartProps> {
     }
     @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/TableBox.tsx b/src/client/views/nodes/DataVizBox/components/TableBox.tsx
index 8c8264861..ff43f67d9 100644
--- a/src/client/views/nodes/DataVizBox/components/TableBox.tsx
+++ b/src/client/views/nodes/DataVizBox/components/TableBox.tsx
@@ -51,6 +51,7 @@ export class TableBox extends React.Component<TableBoxProps> {
                                                             const embedding = Doc.MakeEmbedding(this.props.docView?.()!.rootDoc!);
                                                             embedding._dataVizView = DataVizView.LINECHART;
                                                             embedding._data_vizAxes = new List<string>([col, col]);
+                                                            embedding._draggedFrom = this.props.docView?.()!.rootDoc!;
                                                             embedding.annotationOn = annotationOn; //this.props.docView?.()!.rootDoc!;
                                                             return embedding;
                                                         };
-- 
cgit v1.2.3-70-g09d2


From 27441b60e7af8ea93f277ab3bdc2990ad25ea326 Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Wed, 19 Jul 2023 19:03:59 -0400
Subject: fixed showing of link lines for data visualization views.

---
 src/client/views/nodes/DataVizBox/components/TableBox.tsx | 5 ++++-
 src/client/views/nodes/DocumentView.tsx                   | 8 ++++----
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/client/views/nodes/DataVizBox/components/TableBox.tsx b/src/client/views/nodes/DataVizBox/components/TableBox.tsx
index ff43f67d9..ca888e13f 100644
--- a/src/client/views/nodes/DataVizBox/components/TableBox.tsx
+++ b/src/client/views/nodes/DataVizBox/components/TableBox.tsx
@@ -60,6 +60,7 @@ export class TableBox extends React.Component<TableBoxProps> {
                                                                 dragComplete: e => {
                                                                     if (!e.aborted && e.annoDragData && e.annoDragData.linkSourceDoc && e.annoDragData.dropDocument && e.linkDocument) {
                                                                         e.linkDocument.link_displayLine = true;
+                                                                        e.linkDocument.link_matchEmbeddings = true;
                                                                         // e.annoDragData.linkSourceDoc.followLinkToggle = e.annoDragData.dropDocument.annotationOn === this.props.rootDoc;
                                                                         // e.annoDragData.linkSourceDoc.followLinkZoom = false;
                                                                     }
@@ -94,7 +95,9 @@ export class TableBox extends React.Component<TableBoxProps> {
                             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 => (
-                                        <td key={this.columns.indexOf(col)} style={{ fontWeight: p['select' + this.props.docView?.()?.rootDoc![Id]] ? 'bold' : '' }}>{p[col]}</td>
+                                        <td key={this.columns.indexOf(col)} style={{ fontWeight: p['select' + this.props.docView?.()?.rootDoc![Id]] ? 'bold' : '' }}>
+                                            {p[col]}
+                                        </td>
                                     ))}
                                 </tr>
                             );
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index d7b4ca317..4211b8a81 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -975,8 +975,8 @@ export class DocumentViewInternal extends DocComponent<DocumentViewInternalProps
         TraceMobx();
         return LinkManager.Instance.getAllRelatedLinks(this.rootDoc).filter(
             link =>
-                Doc.AreProtosEqual(link.link_anchor_1 as Doc, this.rootDoc) ||
-                Doc.AreProtosEqual(link.link_anchor_2 as Doc, this.rootDoc) ||
+                (link.link_matchEmbeddings ? link.link_anchor_1 === this.rootDoc : Doc.AreProtosEqual(link.link_anchor_1 as Doc, this.rootDoc)) ||
+                (link.link_matchEmbeddings ? link.link_anchor_2 === this.rootDoc : Doc.AreProtosEqual(link.link_anchor_2 as Doc, this.rootDoc)) ||
                 ((link.link_anchor_1 as Doc)?.layout_unrendered && Doc.AreProtosEqual((link.link_anchor_1 as Doc)?.annotationOn as Doc, this.rootDoc)) ||
                 ((link.link_anchor_2 as Doc)?.layout_unrendered && Doc.AreProtosEqual((link.link_anchor_2 as Doc)?.annotationOn as Doc, this.rootDoc))
         );
@@ -1237,7 +1237,7 @@ export class DocumentViewInternal extends DocComponent<DocumentViewInternalProps
         const renderDoc = this.renderDoc({
             borderRadius: this.borderRounding,
             outline: highlighting && !this.borderRounding && !highlighting.highlightStroke ? `${highlighting.highlightColor} ${highlighting.highlightStyle} ${highlighting.highlightIndex}px` : 'solid 0px',
-            border:  highlighting && this.borderRounding && highlighting.highlightStyle === 'dashed' ? `${highlighting.highlightStyle} ${highlighting.highlightColor} ${highlighting.highlightIndex}px` : undefined,
+            border: highlighting && this.borderRounding && highlighting.highlightStyle === 'dashed' ? `${highlighting.highlightStyle} ${highlighting.highlightColor} ${highlighting.highlightIndex}px` : undefined,
             boxShadow,
             clipPath: borderPath?.clipPath,
         });
@@ -1351,7 +1351,7 @@ export class DocumentView extends React.Component<DocumentViewProps> {
         return this.docView?._componentView;
     }
     get allLinks() {
-        return this.docView?.allLinks || [];
+        return (this.docView?.allLinks || []).filter(link => !link.link_matchEmbeddings || link.link_anchor_1 === this.rootDoc || link.link_anchor_2 === this.rootDoc);
     }
     get LayoutFieldKey() {
         return this.docView?.LayoutFieldKey || 'layout';
-- 
cgit v1.2.3-70-g09d2


From 371f0309ec6b10a86b4a456d233be5b53cf93356 Mon Sep 17 00:00:00 2001
From: srichman333 <sarah_n_richman@brown.edu>
Date: Thu, 20 Jul 2023 17:58:24 -0400
Subject: components + links + brushed TableBox

---
 src/client/views/nodes/DataVizBox/DataVizBox.scss  |  4 ++--
 src/client/views/nodes/DataVizBox/DataVizBox.tsx   | 26 +++++++++++++++++-----
 .../nodes/DataVizBox/components/Histogram.tsx      |  3 ++-
 .../views/nodes/DataVizBox/components/PieChart.tsx |  4 ++--
 .../views/nodes/DataVizBox/components/TableBox.tsx | 22 ++++++++++++++++--
 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 => (
-- 
cgit v1.2.3-70-g09d2


From 27bf26fe688baabff93ab6ebb6b75af4043d29d3 Mon Sep 17 00:00:00 2001
From: srichman333 <sarah_n_richman@brown.edu>
Date: Fri, 21 Jul 2023 11:34:51 -0400
Subject: brushed lightbox fix

---
 src/client/views/nodes/DataVizBox/components/Histogram.tsx | 2 +-
 src/client/views/nodes/DataVizBox/components/PieChart.tsx  | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/client/views/nodes/DataVizBox/components/Histogram.tsx b/src/client/views/nodes/DataVizBox/components/Histogram.tsx
index 01e6709fa..c07c85f7e 100644
--- a/src/client/views/nodes/DataVizBox/components/Histogram.tsx
+++ b/src/client/views/nodes/DataVizBox/components/Histogram.tsx
@@ -398,7 +398,7 @@ export class Histogram extends React.Component<HistogramProps> {
         }
         else selected = 'none';
         return (
-            this.props.axes.length >= 1 && (this.incomingSelected? this.incomingSelected.length>0 : true) ? (
+            this.props.axes.length >= 1 ? (
             <div ref={this._histogramRef} className="chart-container">
                 <span className={'selected-data'}> {`Selected: ${selected}`}</span>
             </div>
diff --git a/src/client/views/nodes/DataVizBox/components/PieChart.tsx b/src/client/views/nodes/DataVizBox/components/PieChart.tsx
index 05a2f1588..37c435411 100644
--- a/src/client/views/nodes/DataVizBox/components/PieChart.tsx
+++ b/src/client/views/nodes/DataVizBox/components/PieChart.tsx
@@ -371,7 +371,7 @@ export class PieChart extends React.Component<PieChartProps> {
         }
         else selected = 'none';
         return (
-            this.props.axes.length >= 1 && (this.incomingSelected? this.incomingSelected.length>0 : true) ? (
+            this.props.axes.length >= 1 ? (
             <div ref={this._piechartRef} className="chart-container">
                 <span className={'selected-data'}> {`Selected: ${selected}`}</span>
             </div>
-- 
cgit v1.2.3-70-g09d2


From 3a177316c1f104da538ed4a53c6a442c6f3fcdc4 Mon Sep 17 00:00:00 2001
From: srichman333 <sarah_n_richman@brown.edu>
Date: Wed, 26 Jul 2023 16:27:12 -0400
Subject: histogram reorganized to accommodate more data types

---
 src/client/documents/Documents.ts                  |   2 +-
 .../nodes/DataVizBox/components/Histogram.tsx      | 134 ++++++++++++---------
 .../nodes/DataVizBox/components/LineChart.tsx      |   2 +-
 .../views/nodes/DataVizBox/components/PieChart.tsx |  13 +-
 4 files changed, 86 insertions(+), 65 deletions(-)

diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index 5ef033e35..426eaa14d 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -1143,7 +1143,7 @@ export namespace Docs {
         }
 
         export function DataVizDocument(url: string, options?: DocumentOptions, overwriteDoc?: Doc) {
-            return InstanceFromProto(Prototypes.get(DocumentType.DATAVIZ), new CsvField(url), { title: 'Data Viz', ...options }, undefined, undefined, undefined, overwriteDoc);
+            return InstanceFromProto(Prototypes.get(DocumentType.DATAVIZ), new CsvField(url), { title: 'Data Viz', type: 'dataviz',  ...options }, undefined, undefined, undefined, overwriteDoc);
         }
 
         export function DockDocument(documents: Array<Doc>, config: string, options: DocumentOptions, id?: string) {
diff --git a/src/client/views/nodes/DataVizBox/components/Histogram.tsx b/src/client/views/nodes/DataVizBox/components/Histogram.tsx
index c07c85f7e..5fbe92563 100644
--- a/src/client/views/nodes/DataVizBox/components/Histogram.tsx
+++ b/src/client/views/nodes/DataVizBox/components/Histogram.tsx
@@ -38,6 +38,9 @@ export class Histogram extends React.Component<HistogramProps> {
     private _histogramRef: React.RefObject<HTMLDivElement> = React.createRef();
     private _histogramSvg: d3.Selection<SVGGElement, unknown, null, undefined> | undefined;
     private numericalData: boolean = false;
+    private numericalXData: boolean = false; // whether the data is organized by numbers rather than categoreis
+    private numericalYData: boolean = false; // whether the y axis is controlled by provided data rather than frequency
+    private maxBins = 15; // maximum number of bins that is readable on a normal sized doc
     @observable _currSelected: any | undefined = undefined;
     // TODO: nda - some sort of mapping that keeps track of the annotated points so we can easily remove when annotations list updates
 
@@ -45,7 +48,7 @@ export class Histogram extends React.Component<HistogramProps> {
         if (this.props.axes.length < 1) return [];
         if (this.props.axes.length < 2) {
             var ax0 = this.props.axes[0];
-            if (/\d/.test(this.props.pairs[0][ax0])){ this.numericalData = true }
+            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'))))
                 .map(pair => ({ [ax0]: (pair[this.props.axes[0]])}))
@@ -53,7 +56,8 @@ export class Histogram extends React.Component<HistogramProps> {
 
         var ax0 = this.props.axes[0];
         var ax1 = this.props.axes[1];
-        if (/\d/.test(this.props.pairs[0][ax0])) { this.numericalData = true;}
+        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'))))
             .map(pair => ({ [ax0]: (pair[this.props.axes[0]]), [ax1]: (pair[this.props.axes[1]]) }))
@@ -79,7 +83,7 @@ export class Histogram extends React.Component<HistogramProps> {
             .lastElement();
     }
     @computed get rangeVals(): { xMin?: number; xMax?: number; yMin?: number; yMax?: number } {
-        if (this.numericalData){
+        if (this.numericalXData){
             const data = this.data(this._histogramData);
             return {xMin: Math.min.apply(null, data), xMax: Math.max.apply(null, data), yMin:0, yMax:0}
         }
@@ -182,7 +186,7 @@ export class Histogram extends React.Component<HistogramProps> {
     getAnchor = (pinProps?: PinProps) => {
         const anchor = Docs.Create.ConfigDocument({
             //
-            title: 'line doc selection' + this._currSelected?.x,
+            title: 'histogram doc selection' + this._currSelected?.x,
         });
         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;
@@ -227,9 +231,9 @@ export class Histogram extends React.Component<HistogramProps> {
             })
             return valid;
         })
-        var field = dataSet[0]? Object.keys(dataSet[0])[0]: undefined;
+        var field = dataSet[0]? Object.keys(dataSet[0])[0] : undefined;
         const data = validData.map((d: { [x: string]: any; }) => {
-            if (this.numericalData) { return +d[field!].replace(/\$/g, '').replace(/\%/g, '') }
+            if (this.numericalXData) { return +d[field!].replace(/\$/g, '').replace(/\%/g, '').replace(/\</g, '') }
             return d[field!]
         })
         return data;
@@ -239,26 +243,43 @@ export class Histogram extends React.Component<HistogramProps> {
         d3.select(this._histogramRef.current).select('svg').remove();
         d3.select(this._histogramRef.current).select('.tooltip').remove();
 
-        var field = Object.keys(dataSet[0])[0]
-        const data = this.data(dataSet);
+        var data = this.data(dataSet);
         
         let uniqueArr: unknown[] = [...new Set(data)]
-        var numBins = uniqueArr.length
-        var startingPoint = 0;
-        var endingPoint = numBins;
-        var translateXAxis = 0;
-        if (this.numericalData) {
-            if (Number.isInteger(this.rangeVals.xMin!)){
-                numBins = this.rangeVals.xMax! - this.rangeVals.xMin! + 1;
+        var numBins = this.numericalXData? (this.rangeVals.xMax! - this.rangeVals.xMin! + 1) : uniqueArr.length
+        var translateXAxis = !this.numericalXData || numBins<this.maxBins ?  width/(numBins+1)/2 : 0;
+        if (numBins>this.maxBins) numBins = this.maxBins;
+        var startingPoint = this.numericalXData? this.rangeVals.xMin! : 0;
+        var endingPoint = this.numericalXData? this.rangeVals.xMax! : numBins;
+        var xAxisTitle = Object.keys(dataSet[0])[0]
+        var yAxisTitle = this.numericalYData ? Object.keys(dataSet[0])[1] : 'frequency';
+        var histDataSet = dataSet.filter((d: { [x: string]: unknown; }) => {
+            var valid = true;
+            Object.keys(dataSet[0]).map(key => {
+                if (!d[key] || Number.isNaN(d[key])) valid = false;
+            })
+            return valid;
+        });
+        if (!this.numericalXData) {
+            var histStringDataSet: { frequency: any, label: any }[] = [];
+            if (this.numericalYData){
+                for (let i=0; i<dataSet.length; i++){
+                    histStringDataSet.push({frequency: dataSet[i][yAxisTitle], label: dataSet[i][xAxisTitle]})
+                }
+            }
+            else{
+                for (let i=0; i<uniqueArr.length; i++){
+                    histStringDataSet.push({frequency: 0, label: uniqueArr[i]})
+                }
+                for (let i=0; i<data.length; i++){
+                    let sliceData = histStringDataSet.filter(each => each.label==data[i])
+                    sliceData[0].frequency = sliceData[0].frequency + 1;
+                }
             }
-            startingPoint = this.rangeVals.xMin!;
-            endingPoint = this.rangeVals.xMax!;
-            if (numBins>15) numBins = 15;
-            else translateXAxis = width/(numBins+1) / 2;
+            histDataSet = histStringDataSet
         }
-        else translateXAxis = width/(numBins+1) / 2;
 
-        const svg = (this._histogramSvg = d3
+        var svg = (this._histogramSvg = d3
             .select(this._histogramRef.current)
             .append("svg")
                 .attr("class", "graph")
@@ -268,32 +289,24 @@ export class Histogram extends React.Component<HistogramProps> {
                 .attr("transform",
                       "translate(" + this.props.margin.left + "," + this.props.margin.top + ")"));
 
-        var x: any;
-        if (this.numericalData){
-            x = d3.scaleLinear()
-                .domain([startingPoint!, endingPoint!])
+        var x = d3.scaleLinear()
+                .domain(this.numericalXData? [startingPoint!, endingPoint!] : [0, numBins])
                 .range([0, width ]);
-        }
-        else {
-            x = d3.scaleLinear()
-                .domain([0, numBins])
-                .range([0, width]);
-        }
-        
         var histogram = d3.histogram()
             .value(function(d) {return d})
             .domain([startingPoint!, endingPoint!])
             .thresholds(x.ticks(numBins-1))
         var bins = histogram(data)
         var eachRectWidth = width/(bins.length)
-        var graphStartingPoint = bins[0].x1! - (bins[1].x1! - bins[1].x0!)
+        var graphStartingPoint = bins[0].x1? bins[0].x1! - (bins[1].x1! - bins[1].x0!) : 0;
         bins[0].x0 = graphStartingPoint;
         x = x.domain([graphStartingPoint, endingPoint])
              .range([0, Number.isInteger(this.rangeVals.xMin!)? (width-eachRectWidth) : width ])
         var xAxis;
 
-        if (!this.numericalData) { // if the data is strings rather than numbers
-            uniqueArr.sort()
+        if (!this.numericalXData) { // reorganize if the data is strings rather than numbers
+            // uniqueArr.sort()
+            histDataSet.sort()
             for (let i=0; i<data.length; i++){
                 var index = 0
                 for (let j=0; j<uniqueArr.length; j++){
@@ -303,23 +316,27 @@ export class Histogram extends React.Component<HistogramProps> {
                 }
                 bins[index].push(data[i])
             }
+            bins.pop();
+            eachRectWidth = width/(bins.length)
             bins.forEach(d => d.x0 = d.x0!)
             xAxis = d3.axisBottom(x)
-                .ticks(numBins-1)
+                .ticks(bins.length-1)
                 .tickFormat( i => uniqueArr[i])
                 .tickPadding(10)
+            x.range([0, width-eachRectWidth])
+            x.domain([0, bins.length-1])
             translateXAxis = eachRectWidth / 2;
         }
         else {
             xAxis = d3.axisBottom(x)
                 .ticks(numBins-1)
         }
-
-        const maxFrequency = d3.max(bins, function(d) { return d.length; })
+        const maxFrequency = this.numericalYData? d3.max(histDataSet, function(d) {return d.frequency.replace(/\$/g, '').replace(/\%/g, '').replace(/\</g, '')})
+                    : d3.max(bins, function(d) { return d.length; })
 
         var y = d3.scaleLinear()
             .range([height, 0]);
-            y.domain([0, maxFrequency!]);
+            y.domain([0, +maxFrequency!]);
         var yAxis = d3.axisLeft(y)
             .ticks(maxFrequency!)
         svg.append("g")
@@ -337,16 +354,14 @@ export class Histogram extends React.Component<HistogramProps> {
                 var left = this.numericalData? d.x0-1: d.x0;
                 var right = (this.numericalData && d.x0!=d.x1)? d.x1-1: d.x1;
                 if ((left*eachRectWidth ) <= pointerX && pointerX <= (right*eachRectWidth )){
-                    // var showSelected = !this.numericalData? dataSet[index] : this.props.pairs[index];
-                    var showSelected = dataSet[index]
-                    showSelected['frequency'] = d.length;
-                    console.log('showSelected', showSelected)
-                    console.log('current', this._currSelected)
+                    var showSelected = histDataSet[index]
+                    var selectedDisplay = {[xAxisTitle]: showSelected.label, [yAxisTitle]: showSelected.frequency}
+                    // showSelected['frequency'] = d.length;
                     sameAsCurrent = this._currSelected? 
-                        (showSelected[Object.keys(showSelected)[0]]==this._currSelected![Object.keys(showSelected)[0]] 
-                      && showSelected[Object.keys(showSelected)[1]]==this._currSelected![Object.keys(showSelected)[1]])
+                        (selectedDisplay[xAxisTitle]==this._currSelected![xAxisTitle] 
+                      && selectedDisplay[yAxisTitle]==this._currSelected![yAxisTitle])
                         : false;
-                    this._currSelected = sameAsCurrent? undefined: showSelected;
+                    this._currSelected = sameAsCurrent? undefined: selectedDisplay;
                     return true
                 }
                 return false;
@@ -358,30 +373,37 @@ export class Histogram extends React.Component<HistogramProps> {
             }
             if (!sameAsCurrent!) selected.attr('class', 'histogram-bar hover');
         });
-
         svg.on('click', onPointClick);
 
-        // axis titles
         svg.append("text")
             .attr("transform", "translate(" + (width/2) + " ," + (height+40) + ")")
             .style("text-anchor", "middle")
-            .text(field);
+            .text(xAxisTitle);
         svg.append("text")
-            .attr("transform", "rotate(-90)")
+            .attr("transform", "rotate(-90)" + " " + "translate( 0, " + -10 + ")")
             .attr("x", -(height/2))
             .attr("y", -20)
             .style("text-anchor", "middle")
-            .text('frequency');
-
+            .text(yAxisTitle);
         d3.format('.0f')
-
         svg.selectAll("rect")
             .data(bins)
             .enter()
             .append("rect")
-              .attr("transform", function(d) { return "translate(" + x(d.x0!) + "," + y(d.length) + ")"; })
+              .attr("transform", this.numericalYData?
+                    function (d) {
+                        var eachData = histDataSet.filter((data: { label: number; }) => {return data.label==d[0]}) 
+                        var length = eachData[0].frequency.replace(/\$/g, '').replace(/\%/g, '').replace(/\</g, '');
+                        return "translate(" + x(d.x0!) + "," + y(length) + ")";
+                    }
+                    : function(d) { return "translate(" + x(d.x0!) + "," + y(d.length) + ")"; })
+              .attr("height", this.numericalYData? 
+                    function(d) {
+                        var eachData = histDataSet.filter((data: { label: number; }) => {return data.label==d[0]}) 
+                        var length = eachData[0].frequency.replace(/\$/g, '').replace(/\%/g, '').replace(/\</g, '');
+                        return height-y(length)}
+                    : function(d) { return height - y(d.length)})
               .attr("width", eachRectWidth)
-              .attr("height", function(d) { return height - y(d.length); })
               .attr("class", 'histogram-bar')
     };
 
diff --git a/src/client/views/nodes/DataVizBox/components/LineChart.tsx b/src/client/views/nodes/DataVizBox/components/LineChart.tsx
index 637ed0ead..91baf095d 100644
--- a/src/client/views/nodes/DataVizBox/components/LineChart.tsx
+++ b/src/client/views/nodes/DataVizBox/components/LineChart.tsx
@@ -310,7 +310,7 @@ export class LineChart extends React.Component<LineChartProps> {
             .style("text-anchor", "middle")
             .text(this.props.axes[0]);
         svg.append("text")
-            .attr("transform", "rotate(-90)")
+            .attr("transform", "rotate(-90)" + " " + "translate( 0, " + -10 + ")")
             .attr("x", -(height/2))
             .attr("y", -20)
             .attr("height", 20)
diff --git a/src/client/views/nodes/DataVizBox/components/PieChart.tsx b/src/client/views/nodes/DataVizBox/components/PieChart.tsx
index 37c435411..fc24e5821 100644
--- a/src/client/views/nodes/DataVizBox/components/PieChart.tsx
+++ b/src/client/views/nodes/DataVizBox/components/PieChart.tsx
@@ -182,7 +182,7 @@ export class PieChart extends React.Component<PieChartProps> {
     getAnchor = (pinProps?: PinProps) => {
         const anchor = Docs.Create.ConfigDocument({
             //
-            title: 'line doc selection' + this._currSelected?.x,
+            title: 'piechart doc selection' + this._currSelected?.x,
         });
         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;
@@ -260,12 +260,6 @@ export class PieChart extends React.Component<PieChartProps> {
             })
             return valid;
         });
-
-        var pie = d3.pie();
-        var arc = d3.arc()
-            .innerRadius(0)
-            .outerRadius(radius);
-        
         if (this.byCategory){
             let uniqueCategories = [...new Set(data)]
             var pieStringDataSet: { frequency: any, label: any }[] = [];
@@ -282,6 +276,11 @@ export class PieChart extends React.Component<PieChartProps> {
         var trackDuplicates : {[key: string]: any} = {};
         data.forEach((eachData: any) => !trackDuplicates[eachData]? trackDuplicates[eachData] = 0: null)
 
+        var pie = d3.pie();
+        var arc = d3.arc()
+            .innerRadius(0)
+            .outerRadius(radius);
+
         const onPointClick = action((e: any) => {
             // check the 4 'corners' of each slice and see if the pointer is within those bounds to get the slice the user clicked on
             const pointer = d3.pointer(e);
-- 
cgit v1.2.3-70-g09d2


From 16d543ae2c2c3b2beca593db7ec503af88ee727b Mon Sep 17 00:00:00 2001
From: srichman333 <sarah_n_richman@brown.edu>
Date: Wed, 26 Jul 2023 23:09:28 -0400
Subject: clicking on histogram data fix

---
 .../nodes/DataVizBox/components/Histogram.tsx      | 38 ++++++++++------------
 1 file changed, 17 insertions(+), 21 deletions(-)

diff --git a/src/client/views/nodes/DataVizBox/components/Histogram.tsx b/src/client/views/nodes/DataVizBox/components/Histogram.tsx
index 5fbe92563..7b9eba1cd 100644
--- a/src/client/views/nodes/DataVizBox/components/Histogram.tsx
+++ b/src/client/views/nodes/DataVizBox/components/Histogram.tsx
@@ -37,7 +37,6 @@ export class Histogram extends React.Component<HistogramProps> {
     private _disposers: { [key: string]: IReactionDisposer } = {};
     private _histogramRef: React.RefObject<HTMLDivElement> = React.createRef();
     private _histogramSvg: d3.Selection<SVGGElement, unknown, null, undefined> | undefined;
-    private numericalData: boolean = false;
     private numericalXData: boolean = false; // whether the data is organized by numbers rather than categoreis
     private numericalYData: boolean = false; // whether the y axis is controlled by provided data rather than frequency
     private maxBins = 15; // maximum number of bins that is readable on a normal sized doc
@@ -261,19 +260,19 @@ export class Histogram extends React.Component<HistogramProps> {
             return valid;
         });
         if (!this.numericalXData) {
-            var histStringDataSet: { frequency: any, label: any }[] = [];
+            var histStringDataSet: { [x: string]: unknown; }[] = [];
             if (this.numericalYData){
                 for (let i=0; i<dataSet.length; i++){
-                    histStringDataSet.push({frequency: dataSet[i][yAxisTitle], label: dataSet[i][xAxisTitle]})
+                    histStringDataSet.push({[yAxisTitle]: dataSet[i][yAxisTitle], [xAxisTitle]: dataSet[i][xAxisTitle]})
                 }
             }
             else{
                 for (let i=0; i<uniqueArr.length; i++){
-                    histStringDataSet.push({frequency: 0, label: uniqueArr[i]})
+                    histStringDataSet.push({[yAxisTitle]: 0, [xAxisTitle]: uniqueArr[i]})
                 }
                 for (let i=0; i<data.length; i++){
-                    let sliceData = histStringDataSet.filter(each => each.label==data[i])
-                    sliceData[0].frequency = sliceData[0].frequency + 1;
+                    let sliceData = histStringDataSet.filter(each => each[xAxisTitle]==data[i])
+                    sliceData[0][yAxisTitle] = sliceData[0][yAxisTitle] + 1;
                 }
             }
             histDataSet = histStringDataSet
@@ -331,7 +330,7 @@ export class Histogram extends React.Component<HistogramProps> {
             xAxis = d3.axisBottom(x)
                 .ticks(numBins-1)
         }
-        const maxFrequency = this.numericalYData? d3.max(histDataSet, function(d) {return d.frequency.replace(/\$/g, '').replace(/\%/g, '').replace(/\</g, '')})
+        const maxFrequency = this.numericalYData? d3.max(histDataSet, function(d) { return d[yAxisTitle].replace(/\$/g, '').replace(/\%/g, '').replace(/\</g, '')})
                     : d3.max(bins, function(d) { return d.length; })
 
         var y = d3.scaleLinear()
@@ -347,16 +346,13 @@ export class Histogram extends React.Component<HistogramProps> {
 
         const onPointClick = action((e: any) => {
             var pointerX = d3.pointer(e)[0];
-            var index = -1;
             var sameAsCurrent: boolean;
             const selected = svg.selectAll('.histogram-bar').filter((d: any) => {
-                index++;
-                var left = this.numericalData? d.x0-1: d.x0;
-                var right = (this.numericalData && d.x0!=d.x1)? d.x1-1: d.x1;
-                if ((left*eachRectWidth ) <= pointerX && pointerX <= (right*eachRectWidth )){
-                    var showSelected = histDataSet[index]
-                    var selectedDisplay = {[xAxisTitle]: showSelected.label, [yAxisTitle]: showSelected.frequency}
-                    // showSelected['frequency'] = d.length;
+                var left = this.numericalXData? d.x0-1: d.x0;
+                var right = (this.numericalXData && d.x0!=d.x1)? d.x1-1: d.x1;
+                if ((left*eachRectWidth ) <= pointerX && pointerX <= (right*eachRectWidth)){
+                    var showSelected = histDataSet.filter((data: { [x: string]: any; }) => data[xAxisTitle]==d[0])[0];
+                    var selectedDisplay = {[xAxisTitle]: showSelected[xAxisTitle], [yAxisTitle]: this.numericalXData? d.length : showSelected[yAxisTitle]}
                     sameAsCurrent = this._currSelected? 
                         (selectedDisplay[xAxisTitle]==this._currSelected![xAxisTitle] 
                       && selectedDisplay[yAxisTitle]==this._currSelected![yAxisTitle])
@@ -366,7 +362,6 @@ export class Histogram extends React.Component<HistogramProps> {
                 }
                 return false;
             });
-            // selected.attr('class')=='histogram-bar hover'? selected.attr('class', 'histogram-bar'): selected.attr('class', 'histogram-bar hover')
             const elements = document.querySelectorAll('.histogram-bar');
             for (let i = 0; i < elements.length; i++) {
                 elements[i].classList.remove('hover');
@@ -392,17 +387,18 @@ export class Histogram extends React.Component<HistogramProps> {
             .append("rect")
               .attr("transform", this.numericalYData?
                     function (d) {
-                        var eachData = histDataSet.filter((data: { label: number; }) => {return data.label==d[0]}) 
-                        var length = eachData[0].frequency.replace(/\$/g, '').replace(/\%/g, '').replace(/\</g, '');
+                        var eachData = histDataSet.filter((data: { [x: string]: number; }) => {return data[xAxisTitle]==d[0]}) 
+                        var length = eachData[0][yAxisTitle].replace(/\$/g, '').replace(/\%/g, '').replace(/\</g, '');
                         return "translate(" + x(d.x0!) + "," + y(length) + ")";
                     }
                     : function(d) { return "translate(" + x(d.x0!) + "," + y(d.length) + ")"; })
               .attr("height", this.numericalYData? 
                     function(d) {
-                        var eachData = histDataSet.filter((data: { label: number; }) => {return data.label==d[0]}) 
-                        var length = eachData[0].frequency.replace(/\$/g, '').replace(/\%/g, '').replace(/\</g, '');
+                        var eachData = histDataSet.filter((data: { [x: string]: number; }) => {return data[xAxisTitle]==d[0]}) 
+                        var length = eachData[0][yAxisTitle].replace(/\$/g, '').replace(/\%/g, '').replace(/\</g, '');
                         return height-y(length)}
-                    : function(d) { return height - y(d.length)})
+                    : function(d) { 
+                        return height - y(d.length)})
               .attr("width", eachRectWidth)
               .attr("class", 'histogram-bar')
     };
-- 
cgit v1.2.3-70-g09d2


From ed63ae81b1ba6954c1a1e75da8df8665a7a34fd1 Mon Sep 17 00:00:00 2001
From: srichman333 <sarah_n_richman@brown.edu>
Date: Thu, 27 Jul 2023 11:28:43 -0400
Subject: more info on selected histogram bars + better labels for selected pie
 chart slices

---
 src/client/views/nodes/DataVizBox/components/Histogram.tsx |  9 ++++-----
 src/client/views/nodes/DataVizBox/components/PieChart.tsx  | 12 +++++++-----
 2 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/src/client/views/nodes/DataVizBox/components/Histogram.tsx b/src/client/views/nodes/DataVizBox/components/Histogram.tsx
index 7b9eba1cd..c9cd49aa1 100644
--- a/src/client/views/nodes/DataVizBox/components/Histogram.tsx
+++ b/src/client/views/nodes/DataVizBox/components/Histogram.tsx
@@ -351,13 +351,12 @@ export class Histogram extends React.Component<HistogramProps> {
                 var left = this.numericalXData? d.x0-1: d.x0;
                 var right = (this.numericalXData && d.x0!=d.x1)? d.x1-1: d.x1;
                 if ((left*eachRectWidth ) <= pointerX && pointerX <= (right*eachRectWidth)){
-                    var showSelected = histDataSet.filter((data: { [x: string]: any; }) => data[xAxisTitle]==d[0])[0];
-                    var selectedDisplay = {[xAxisTitle]: showSelected[xAxisTitle], [yAxisTitle]: this.numericalXData? d.length : showSelected[yAxisTitle]}
+                    var showSelected = this.numericalYData? this.props.pairs.filter((data: { [x: string]: any; }) => data[xAxisTitle]==d[0])[0] : histDataSet.filter((data: { [x: string]: any; }) => data[xAxisTitle]==d[0])[0];
                     sameAsCurrent = this._currSelected? 
-                        (selectedDisplay[xAxisTitle]==this._currSelected![xAxisTitle] 
-                      && selectedDisplay[yAxisTitle]==this._currSelected![yAxisTitle])
+                        (showSelected[xAxisTitle]==this._currSelected![xAxisTitle] 
+                      && showSelected[yAxisTitle]==this._currSelected![yAxisTitle])
                         : false;
-                    this._currSelected = sameAsCurrent? undefined: selectedDisplay;
+                    this._currSelected = sameAsCurrent? undefined: showSelected;
                     return true
                 }
                 return false;
diff --git a/src/client/views/nodes/DataVizBox/components/PieChart.tsx b/src/client/views/nodes/DataVizBox/components/PieChart.tsx
index fc24e5821..cead40d92 100644
--- a/src/client/views/nodes/DataVizBox/components/PieChart.tsx
+++ b/src/client/views/nodes/DataVizBox/components/PieChart.tsx
@@ -239,6 +239,8 @@ export class PieChart extends React.Component<PieChartProps> {
         d3.select(this._piechartRef.current).select('svg').remove();
         d3.select(this._piechartRef.current).select('.tooltip').remove();
         
+        var percentField = Object.keys(dataSet[0])[0]
+        var descriptionField = Object.keys(dataSet[0])[1]!
         var radius = Math.min(width, height) / 2 - Math.max(this.props.margin.top, this.props.margin.bottom, this.props.margin.left, this.props.margin.right)
         var svg = (this._piechartSvg = d3
             .select(this._piechartRef.current)
@@ -262,15 +264,17 @@ export class PieChart extends React.Component<PieChartProps> {
         });
         if (this.byCategory){
             let uniqueCategories = [...new Set(data)]
-            var pieStringDataSet: { frequency: any, label: any }[] = [];
+            var pieStringDataSet: { frequency: number, [percentField]: string }[] = [];
             for (let i=0; i<uniqueCategories.length; i++){
-                pieStringDataSet.push({frequency: 0, label: uniqueCategories[i]})
+                pieStringDataSet.push({frequency: 0, [percentField]: uniqueCategories[i]})
             }
             for (let i=0; i<data.length; i++){
-                let sliceData = pieStringDataSet.filter(each => each.label==data[i])
+                let sliceData = pieStringDataSet.filter(each => each[percentField]==data[i])
                 sliceData[0].frequency = sliceData[0].frequency + 1;
             }
             pieDataSet = pieStringDataSet
+            percentField = Object.keys(pieDataSet[0])[0]
+            descriptionField = Object.keys(pieDataSet[0])[1]!
             data = this.data(pieStringDataSet)
         }
         var trackDuplicates : {[key: string]: any} = {};
@@ -323,8 +327,6 @@ export class PieChart extends React.Component<PieChartProps> {
             if (!sameAsCurrent!) selected.attr('class', 'slice hover');
         });
 
-        var percentField = Object.keys(pieDataSet[0])[0]
-        var descriptionField = Object.keys(pieDataSet[0])[1]!
         var arcs = g.selectAll("arc")
             .data(pie(data))
             .enter()
-- 
cgit v1.2.3-70-g09d2


From ad6cbd1e4abf97cff81d160b3b3afa0bc9b8c204 Mon Sep 17 00:00:00 2001
From: srichman333 <sarah_n_richman@brown.edu>
Date: Thu, 27 Jul 2023 13:55:56 -0400
Subject: titles

---
 .../views/nodes/DataVizBox/components/Chart.scss       | 11 +++++++----
 .../views/nodes/DataVizBox/components/Histogram.tsx    | 14 ++++++++++++--
 .../views/nodes/DataVizBox/components/LineChart.tsx    | 11 +++++++++--
 .../views/nodes/DataVizBox/components/PieChart.tsx     | 18 ++++++++++++++----
 4 files changed, 42 insertions(+), 12 deletions(-)

diff --git a/src/client/views/nodes/DataVizBox/components/Chart.scss b/src/client/views/nodes/DataVizBox/components/Chart.scss
index 808300c2c..5945840b5 100644
--- a/src/client/views/nodes/DataVizBox/components/Chart.scss
+++ b/src/client/views/nodes/DataVizBox/components/Chart.scss
@@ -8,6 +8,13 @@
     .graph{
         overflow: visible;
     }
+    .graph-title{
+        align-items: center;
+        font-size: larger;
+    }
+    .selected-data{
+        align-items: center;
+    }
     .slice {
         &.hover {
             stroke: black;
@@ -56,8 +63,4 @@
         // change the color of the circle element to be red
         fill: red;
     }
-
-    .selected-data{
-        text-align: center;
-    }
 }
diff --git a/src/client/views/nodes/DataVizBox/components/Histogram.tsx b/src/client/views/nodes/DataVizBox/components/Histogram.tsx
index c9cd49aa1..479f6584c 100644
--- a/src/client/views/nodes/DataVizBox/components/Histogram.tsx
+++ b/src/client/views/nodes/DataVizBox/components/Histogram.tsx
@@ -66,6 +66,14 @@ export class Histogram extends React.Component<HistogramProps> {
             .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 graphTitle(){
+        var ax0 = this.props.axes[0];
+        var ax1 = (this.props.axes.length>1)? this.props.axes[1] : undefined;
+        if (this.props.axes.length<2 || !/\d/.test(this.props.pairs[0][ax0]) || !ax1){
+            return ax0 + " Histogram";
+        }
+        else return ax1 + " by " + ax0 + " Histogram";
+    }    
     @computed get incomingLinks() {
         return LinkManager.Instance.getAllRelatedLinks(this.props.rootDoc) // out of all links
             .filter(link => {
@@ -416,8 +424,10 @@ export class Histogram extends React.Component<HistogramProps> {
         else selected = 'none';
         return (
             this.props.axes.length >= 1 ? (
-            <div ref={this._histogramRef} className="chart-container">
-                <span className={'selected-data'}> {`Selected: ${selected}`}</span>
+            <div className="chart-container" >
+                <div className="graph-title"> {this.graphTitle} </div>
+                <div className={'selected-data'}> {`Selected: ${selected}`}</div>
+                <div ref={this._histogramRef} />
             </div>
             ) : <span className="chart-container"> {'first use table view to select a column to graph'}</span>
         );
diff --git a/src/client/views/nodes/DataVizBox/components/LineChart.tsx b/src/client/views/nodes/DataVizBox/components/LineChart.tsx
index 91baf095d..da79df476 100644
--- a/src/client/views/nodes/DataVizBox/components/LineChart.tsx
+++ b/src/client/views/nodes/DataVizBox/components/LineChart.tsx
@@ -53,6 +53,9 @@ export class LineChart extends React.Component<LineChartProps> {
             .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 graphTitle(){
+        return this.props.axes[1] + " vs. " + this.props.axes[0] + " Line Chart";
+    }  
     @computed get incomingLinks() {
         return LinkManager.Instance.getAllRelatedLinks(this.props.rootDoc) // out of all links
             .filter(link => {
@@ -338,9 +341,13 @@ export class LineChart extends React.Component<LineChartProps> {
     render() {
         const selectedPt = this._currSelected ? `x: ${this._currSelected.x} y: ${this._currSelected.y}` : 'none';
         return (
-            <div ref={this._lineChartRef} className="chart-container">
-                <span className={'selected-data'}> {this.props.axes.length < 2 ? 'first use table view to select two axes to plot' : `Selected: ${selectedPt}`}</span>
+            this.props.axes.length >= 2 ? (
+            <div className="chart-container" >
+                <div className="graph-title"> {this.graphTitle} </div>
+                <div className={'selected-data'}> {`Selected: ${selectedPt}`}</div>
+                <div ref={this._lineChartRef} />
             </div>
+            ) : <span className="chart-container"> {'first use table view to select two axes to plot'}</span>
         );
     }
 }
diff --git a/src/client/views/nodes/DataVizBox/components/PieChart.tsx b/src/client/views/nodes/DataVizBox/components/PieChart.tsx
index cead40d92..27653b847 100644
--- a/src/client/views/nodes/DataVizBox/components/PieChart.tsx
+++ b/src/client/views/nodes/DataVizBox/components/PieChart.tsx
@@ -53,7 +53,7 @@ export class PieChart extends React.Component<PieChartProps> {
 
         var ax0 = this.props.axes[0];
         var ax1 = this.props.axes[1];
-        if (/\d/.test(this.props.pairs[0][ax0])) { this.byCategory = false;}
+        if (/\d/.test(this.props.pairs[0][ax0])) { this.byCategory = false; }
         return this.props.pairs
             ?.filter(pair => (!this.incomingLinks.length ? true : Array.from(Object.keys(pair)).some(key => pair[key] && key.startsWith('select'))))
             .map(pair => ({ [ax0]: (pair[this.props.axes[0]]), [ax1]: (pair[this.props.axes[1]]) }))
@@ -63,6 +63,14 @@ export class PieChart extends React.Component<PieChartProps> {
             .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 graphTitle(){
+        var ax0 = this.props.axes[0];
+        var ax1 = (this.props.axes.length>1)? this.props.axes[1] : undefined;
+        if (this.props.axes.length<2 || !/\d/.test(this.props.pairs[0][ax0]) || !ax1){
+            return ax0 + " Pie Chart";
+        }
+        else return ax1 + " by " + ax0 + " Pie Chart";
+    }    
     @computed get incomingLinks() {
         return LinkManager.Instance.getAllRelatedLinks(this.props.rootDoc) // out of all links
             .filter(link => {
@@ -333,7 +341,7 @@ export class PieChart extends React.Component<PieChartProps> {
             .append("g")
         arcs.append("path")
             .attr("fill", (data, i)=>{ return d3.schemeSet3[i]? d3.schemeSet3[i]: d3.schemeSet3[i%12] })
-            .attr("class", `${pieDataSet[0][percentField]} slice`)
+            .attr("class", 'slice')
             .attr("d", arc)
             .on('click', onPointClick)
         arcs.append("text")
@@ -373,8 +381,10 @@ export class PieChart extends React.Component<PieChartProps> {
         else selected = 'none';
         return (
             this.props.axes.length >= 1 ? (
-            <div ref={this._piechartRef} className="chart-container">
-                <span className={'selected-data'}> {`Selected: ${selected}`}</span>
+            <div className="chart-container">
+                <div className="graph-title"> {this.graphTitle} </div>
+                <div className={'selected-data'}> {`Selected: ${selected}`}</div>
+                <div ref={this._piechartRef} />
             </div>
             ) : <span className="chart-container"> {'first use table view to select a column to graph'}</span>
         );
-- 
cgit v1.2.3-70-g09d2


From 7bdc4799c2546de168cc74d536463d898673afc6 Mon Sep 17 00:00:00 2001
From: srichman333 <sarah_n_richman@brown.edu>
Date: Thu, 27 Jul 2023 15:19:14 -0400
Subject: numerical histogram fix

---
 .../nodes/DataVizBox/components/Histogram.tsx      | 23 ++++++++++++++--------
 1 file changed, 15 insertions(+), 8 deletions(-)

diff --git a/src/client/views/nodes/DataVizBox/components/Histogram.tsx b/src/client/views/nodes/DataVizBox/components/Histogram.tsx
index 479f6584c..fdde29c81 100644
--- a/src/client/views/nodes/DataVizBox/components/Histogram.tsx
+++ b/src/client/views/nodes/DataVizBox/components/Histogram.tsx
@@ -252,14 +252,14 @@ export class Histogram extends React.Component<HistogramProps> {
 
         var data = this.data(dataSet);
         
+        var xAxisTitle = Object.keys(dataSet[0])[0]
+        var yAxisTitle = this.numericalYData ? Object.keys(dataSet[0])[1] : 'frequency';
         let uniqueArr: unknown[] = [...new Set(data)]
-        var numBins = this.numericalXData? (this.rangeVals.xMax! - this.rangeVals.xMin! + 1) : uniqueArr.length
+        var numBins = (this.numericalXData && Number.isInteger(data[0][xAxisTitle]))? (this.rangeVals.xMax! - this.rangeVals.xMin! + 1) : uniqueArr.length
         var translateXAxis = !this.numericalXData || numBins<this.maxBins ?  width/(numBins+1)/2 : 0;
         if (numBins>this.maxBins) numBins = this.maxBins;
         var startingPoint = this.numericalXData? this.rangeVals.xMin! : 0;
         var endingPoint = this.numericalXData? this.rangeVals.xMax! : numBins;
-        var xAxisTitle = Object.keys(dataSet[0])[0]
-        var yAxisTitle = this.numericalYData ? Object.keys(dataSet[0])[1] : 'frequency';
         var histDataSet = dataSet.filter((d: { [x: string]: unknown; }) => {
             var valid = true;
             Object.keys(dataSet[0]).map(key => {
@@ -351,15 +351,22 @@ export class Histogram extends React.Component<HistogramProps> {
         svg.append("g")
             .attr("transform", "translate(" + translateXAxis + ", " + height + ")")
             .call(xAxis)
-
+        
         const onPointClick = action((e: any) => {
             var pointerX = d3.pointer(e)[0];
             var sameAsCurrent: boolean;
+            var barCounter = -1;
             const selected = svg.selectAll('.histogram-bar').filter((d: any) => {
-                var left = this.numericalXData? d.x0-1: d.x0;
-                var right = (this.numericalXData && d.x0!=d.x1)? d.x1-1: d.x1;
-                if ((left*eachRectWidth ) <= pointerX && pointerX <= (right*eachRectWidth)){
-                    var showSelected = this.numericalYData? this.props.pairs.filter((data: { [x: string]: any; }) => data[xAxisTitle]==d[0])[0] : histDataSet.filter((data: { [x: string]: any; }) => data[xAxisTitle]==d[0])[0];
+                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] 
+                    : 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]){
+                            showSelected = {[xAxisTitle]: (d3.min(d) + " to " + d3.max(d)), frequency: d.length}
+                        }
+                        else if (!this.numericalYData) showSelected = {[xAxisTitle]: showSelected[xAxisTitle], frequency: d.length}
+                    } 
                     sameAsCurrent = this._currSelected? 
                         (showSelected[xAxisTitle]==this._currSelected![xAxisTitle] 
                       && showSelected[yAxisTitle]==this._currSelected![yAxisTitle])
-- 
cgit v1.2.3-70-g09d2


From 47d5a651e1725ceca285cb489b059d6df4ef00da Mon Sep 17 00:00:00 2001
From: srichman333 <sarah_n_richman@brown.edu>
Date: Thu, 27 Jul 2023 15:23:00 -0400
Subject: merge

---
 src/client/views/collections/collectionFreeForm/MarqueeView.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
index 7e574e839..ba8585749 100644
--- a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
+++ b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
@@ -170,7 +170,7 @@ export class MarqueeView extends React.Component<SubCollectionViewProps & Marque
             TreeView._editTitleOnLoad = { id: slide[Id], parent: undefined };
             this.props.addDocument?.(slide);
             e.stopPropagation();
-        } else if (e.key === 't' && e.ctrlKey) {
+        }*/ else if (e.key === 't' && e.ctrlKey) {
             e.preventDefault();
             (async () => {
                 const text: string = await navigator.clipboard.readText();
@@ -178,7 +178,7 @@ export class MarqueeView extends React.Component<SubCollectionViewProps & Marque
                 this.pasteTable(ns, x, y);
             })();
             e.stopPropagation();
-        }*/ else if (!e.ctrlKey && !e.metaKey && SelectionManager.Views().length < 2) {
+        } else if (!e.ctrlKey && !e.metaKey && SelectionManager.Views().length < 2) {
             FormattedTextBox.SelectOnLoadChar = Doc.UserDoc().defaultTextLayout && !this.props.childLayoutString ? e.key : '';
             FormattedTextBox.LiveTextUndo = UndoManager.StartBatch('type new note');
             this.props.addLiveTextDocument(DocUtils.GetNewTextDoc('-typed text-', x, y, 200, 100, this.props.xPadding === 0));
-- 
cgit v1.2.3-70-g09d2


From 6984267d0f70f080bc1e1e6397b2377145e3cae2 Mon Sep 17 00:00:00 2001
From: srichman333 <sarah_n_richman@brown.edu>
Date: Fri, 28 Jul 2023 12:13:52 -0400
Subject: DataVizBox from 'tools' instructions

---
 src/client/util/CurrentUserUtils.ts               | 4 ++--
 src/client/views/nodes/DataVizBox/DataVizBox.scss | 4 ++++
 src/client/views/nodes/DataVizBox/DataVizBox.tsx  | 6 +++++-
 3 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index 2e4fb0f1c..64a056753 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -295,7 +295,7 @@ export class CurrentUserUtils {
             { toolTip: "Tap or drag to create a note",            title: "Note", icon: "sticky-note",   dragFactory: doc.emptyNote as Doc,       clickFactory: DocCast(doc.emptyNote)},
             { toolTip: "Tap or drag to create a flashcard",       title: "Flashcard", icon: "id-card",  dragFactory: doc.emptyFlashcard as Doc,  clickFactory: DocCast(doc.emptyFlashcard)},
             { toolTip: "Tap or drag to create an equation",       title: "Math", icon: "calculator",    dragFactory: doc.emptyEquation as Doc,   clickFactory: DocCast(doc.emptyEquation)},
-            { toolTip: "Tap or drag to create a physics simulation", title: "Simulation", icon: "atom", dragFactory: doc.emptySimulation as Doc, }, 
+            { toolTip: "Tap or drag to create a physics simulation",title: "Simulation", icon: "rocket",dragFactory: doc.emptySimulation as Doc, clickFactory: DocCast(doc.emptySimulation)}, 
             { toolTip: "Tap or drag to create a note board",      title: "Notes", icon: "folder",       dragFactory: doc.emptyNoteboard as Doc,  clickFactory: DocCast(doc.emptyNoteboard)},
             { toolTip: "Tap or drag to create a collection",      title: "Col", icon: "folder",         dragFactory: doc.emptyCollection as Doc, clickFactory: DocCast(doc.emptyTab)},
             { toolTip: "Tap or drag to create a webpage",         title: "Web", icon: "globe-asia",     dragFactory: doc.emptyWebpage as Doc,    clickFactory: DocCast(doc.emptyWebpage)},
@@ -306,7 +306,7 @@ export class CurrentUserUtils {
             { toolTip: "Tap or drag to create a WebCam recorder", title: "WebCam", icon: "photo-video", dragFactory: doc.emptyWebCam as Doc,     clickFactory: DocCast(doc.emptyWebCam),     openFactoryLocation: OpenWhere.overlay},
             { toolTip: "Tap or drag to create a button",          title: "Button", icon: "bolt",        dragFactory: doc.emptyButton as Doc,     clickFactory: DocCast(doc.emptyButton)},
             { toolTip: "Tap or drag to create a scripting box",   title: "Script", icon: "terminal",    dragFactory: doc.emptyScript as Doc,     clickFactory: DocCast(doc.emptyScript)},
-            { toolTip: "Tap or drag to create a data viz node",   title: "DataViz", icon: "file",       dragFactory: doc.emptyDataViz as Doc,    clickFactory: DocCast(doc.emptyDataViz)},
+            { toolTip: "Tap or drag to create a data viz node",   title: "DataViz", icon: "chart-bar",  dragFactory: doc.emptyDataViz as Doc,    clickFactory: DocCast(doc.emptyDataViz)},
             { toolTip: "Tap or drag to create a bullet slide",    title: "PPT Slide", icon: "file",     dragFactory: doc.emptySlide as Doc,      clickFactory: DocCast(doc.emptySlide),      openFactoryLocation: OpenWhere.overlay},
             { toolTip: "Tap or drag to create a data note",       title: "DataNote", icon: "window-maximize",dragFactory: doc.emptyHeader as Doc,clickFactory: DocCast(doc.emptyHeader),     openFactoryAsDelegate: true },
             { toolTip: "Toggle a Calculator REPL",                title: "replviewer",  icon: "calculator",                                      clickFactory: '<ScriptingRepl />' as any,   openFactoryLocation: OpenWhere.overlay}, // hack: clickFactory is not a Doc but will get interpreted as a custom UI by the openDoc() onClick script
diff --git a/src/client/views/nodes/DataVizBox/DataVizBox.scss b/src/client/views/nodes/DataVizBox/DataVizBox.scss
index 32c0bbfc1..ab2f19726 100644
--- a/src/client/views/nodes/DataVizBox/DataVizBox.scss
+++ b/src/client/views/nodes/DataVizBox/DataVizBox.scss
@@ -8,3 +8,7 @@
         flex-direction: row;
     }
 }
+.start-message {
+    margin: 10px;
+    align-self: baseline;
+}
diff --git a/src/client/views/nodes/DataVizBox/DataVizBox.tsx b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
index 4ddebb833..d5e21ce0e 100644
--- a/src/client/views/nodes/DataVizBox/DataVizBox.tsx
+++ b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
@@ -136,7 +136,11 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
     render() {
         if (!this.layoutDoc._dataVizView) this.layoutDoc._dataVizView = this.dataVizView;
         return !this.pairs?.length ? (
-            <div>Loading...</div>
+            <div className="start-message">
+                To create a DataViz box, either import / drag a CSV file into your canvas
+                or copy a data table and use the command 'ctrl + t' to bring the data table
+                to your canvas.
+            </div>
         ) : (
             <div
                 className="dataViz"
-- 
cgit v1.2.3-70-g09d2


From b236882faef4e5434158e7a8dfb82daa47031ca5 Mon Sep 17 00:00:00 2001
From: srichman333 <sarah_n_richman@brown.edu>
Date: Fri, 28 Jul 2023 14:36:30 -0400
Subject: graph colorPickers

---
 src/client/views/nodes/DataVizBox/DataVizBox.tsx   | 33 +++++++++++++---
 .../views/nodes/DataVizBox/components/Chart.scss   |  3 +-
 .../nodes/DataVizBox/components/Histogram.tsx      | 46 +++++++++++++++++++++-
 .../views/nodes/DataVizBox/components/PieChart.tsx | 32 +++++++++++++--
 4 files changed, 102 insertions(+), 12 deletions(-)

diff --git a/src/client/views/nodes/DataVizBox/DataVizBox.tsx b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
index d5e21ce0e..70fed91ef 100644
--- a/src/client/views/nodes/DataVizBox/DataVizBox.tsx
+++ b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
@@ -97,17 +97,38 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
     }
     selectAxes = (axes: string[]) => (this.layoutDoc.data_vizAxes = new List<string>(axes));
 
-    @computed get selectView() {
+    @computed get table(){
+        if (!this.pairs) return 'no data';
+        return <TableBox pairs={this.pairs} axes={this.axes} rootDoc={this.rootDoc} docView={this.props.DocumentView} selectAxes={this.selectAxes}/>;
+    }
+    @computed get lineChart(){
+        const width = this.props.PanelWidth() * 0.9;
+        const height = (this.props.PanelHeight() - 32) /* height of 'change view' button */ * 0.9;
+        const margin = { top: 10, right: 25, bottom: 50, left: 25 };
+        if (!this.pairs) return 'no data';
+        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} />;
+    }
+    @computed get histogram(){
         const width = this.props.PanelWidth() * 0.9;
         const height = (this.props.PanelHeight() - 32) /* height of 'change view' button */ * 0.9;
         const margin = { top: 10, right: 25, bottom: 50, left: 25 };
         if (!this.pairs) return 'no data';
-        // prettier-ignore
+        return <Histogram height={height} width={width} fieldKey={this.fieldKey} margin={margin} rootDoc={this.rootDoc} axes={this.axes} pairs={this.pairs} dataDoc={this.dataDoc} />;
+    }
+    @computed get pieChart(){
+        const width = this.props.PanelWidth() * 0.9;
+        const height = (this.props.PanelHeight() - 32) /* height of 'change view' button */ * 0.9;
+        const margin = { top: 10, right: 25, bottom: 50, left: 25 };
+        if (!this.pairs) return 'no data';
+        console.log('new pie')
+        return <PieChart height={height} width={width} fieldKey={this.fieldKey} margin={margin} rootDoc={this.rootDoc} axes={this.axes} pairs={this.pairs} dataDoc={this.dataDoc} />;
+    }
+    @computed get selectView() {
         switch (this.dataVizView) {
-            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} />;
+            case DataVizView.TABLE:     return this.table;
+            case DataVizView.LINECHART: return this.lineChart;
+            case DataVizView.HISTOGRAM: return this.histogram;
+            case DataVizView.PIECHART: return this.pieChart;
         }
     }
     @computed get dataUrl() {
diff --git a/src/client/views/nodes/DataVizBox/components/Chart.scss b/src/client/views/nodes/DataVizBox/components/Chart.scss
index 5945840b5..da5a274a5 100644
--- a/src/client/views/nodes/DataVizBox/components/Chart.scss
+++ b/src/client/views/nodes/DataVizBox/components/Chart.scss
@@ -23,9 +23,8 @@
     
     .histogram-bar{
         outline: thin solid black;
-        fill: #69b3a2;
         &.hover{
-            fill: grey;
+            outline: 5px solid black;
         }
     }
 
diff --git a/src/client/views/nodes/DataVizBox/components/Histogram.tsx b/src/client/views/nodes/DataVizBox/components/Histogram.tsx
index fdde29c81..998636a42 100644
--- a/src/client/views/nodes/DataVizBox/components/Histogram.tsx
+++ b/src/client/views/nodes/DataVizBox/components/Histogram.tsx
@@ -14,6 +14,8 @@ import { PinProps, PresBox } from "../../trails";
 import { Docs } from "../../../../documents/Documents";
 import { List } from "../../../../../fields/List";
 import './Chart.scss';
+import { ColorPicker, Size, Type } from "browndash-components";
+import { FaFillDrip } from "react-icons/fa";
 
 export interface HistogramProps {
     rootDoc: Doc;
@@ -41,6 +43,9 @@ export class Histogram extends React.Component<HistogramProps> {
     private numericalYData: boolean = false; // whether the y axis is controlled by provided data rather than frequency
     private maxBins = 15; // maximum number of bins that is readable on a normal sized doc
     @observable _currSelected: any | undefined = undefined;
+    private curBarSelected: any = undefined;
+    private barColors: any = {};
+    private defaultBarColor: string = '#69b3a2';
     // TODO: nda - some sort of mapping that keeps track of the annotated points so we can easily remove when annotations list updates
 
     @computed get _histogramData() {
@@ -381,6 +386,11 @@ export class Histogram extends React.Component<HistogramProps> {
                 elements[i].classList.remove('hover');
             }
             if (!sameAsCurrent!) selected.attr('class', 'histogram-bar hover');
+            if (sameAsCurrent!) this.curBarSelected = undefined;
+            else {
+                selected.attr('class', 'histogram-bar hover')
+                this.curBarSelected = selected;
+            }
         });
         svg.on('click', onPointClick);
 
@@ -415,6 +425,20 @@ export class Histogram extends React.Component<HistogramProps> {
                         return height - y(d.length)})
               .attr("width", eachRectWidth)
               .attr("class", 'histogram-bar')
+              .attr("fill", (d)=>{ return this.barColors[d[0]]? this.barColors[d[0]] : this.defaultBarColor})
+    };
+
+    @action changeSelectedColor = (color: string) => {
+        this.curBarSelected.attr("fill", color);
+        this.barColors[this._currSelected[this.props.axes[0]].replace(/\$/g, '').replace(/\%/g, '').replace(/\</g, '')] = color;
+    };
+    @action changeDefaultColor = (color: string) => {
+        const defaultColorBars = this._histogramSvg!.selectAll('.histogram-bar').filter((d: any) => {
+            if (this.barColors[d[0]]) return false;
+            else return true;
+        })
+        defaultColorBars.attr("fill", color);
+        this.defaultBarColor = color;
     };
 
     render() {
@@ -433,7 +457,27 @@ export class Histogram extends React.Component<HistogramProps> {
             this.props.axes.length >= 1 ? (
             <div className="chart-container" >
                 <div className="graph-title"> {this.graphTitle} </div>
-                <div className={'selected-data'}> {`Selected: ${selected}`}</div>
+                <ColorPicker
+                    tooltip={'Change Default Slice Color'} 
+                    type={Type.SEC} 
+                    icon={<FaFillDrip/>}
+                    selectedColor={this.defaultBarColor}
+                    setSelectedColor={color => this.changeDefaultColor(color)}
+                    size={Size.XSMALL}
+                />
+                {selected != 'none' ? 
+                    <div className={'selected-data'}>
+                        Selected: {selected}
+                        <ColorPicker
+                            tooltip={'Change Slice Color'} 
+                            type={Type.SEC} 
+                            icon={<FaFillDrip/>}
+                            selectedColor={this.curBarSelected.attr("fill")}
+                            setSelectedColor={color => this.changeSelectedColor(color)}
+                            size={Size.XSMALL}
+                        />
+                    </div>
+                : null}
                 <div ref={this._histogramRef} />
             </div>
             ) : <span className="chart-container"> {'first use table view to select a column to graph'}</span>
diff --git a/src/client/views/nodes/DataVizBox/components/PieChart.tsx b/src/client/views/nodes/DataVizBox/components/PieChart.tsx
index 27653b847..872bf9af1 100644
--- a/src/client/views/nodes/DataVizBox/components/PieChart.tsx
+++ b/src/client/views/nodes/DataVizBox/components/PieChart.tsx
@@ -14,6 +14,8 @@ import { PinProps, PresBox } from "../../trails";
 import { Docs } from "../../../../documents/Documents";
 import { List } from "../../../../../fields/List";
 import './Chart.scss';
+import { ColorPicker, Size, Type } from "browndash-components";
+import { FaFillDrip } from "react-icons/fa";
 
 export interface PieChartProps {
     rootDoc: Doc;
@@ -39,6 +41,8 @@ export class PieChart extends React.Component<PieChartProps> {
     private _piechartSvg: d3.Selection<SVGGElement, unknown, null, undefined> | undefined;
     private byCategory: boolean = true; // whether the data is organized by category or by specified number percentages/ratios
     @observable _currSelected: any | undefined = undefined;
+    private curSliceSelected: any = undefined;
+    private sliceColors: any = {};
     // TODO: nda - some sort of mapping that keeps track of the annotated points so we can easily remove when annotations list updates
 
     @computed get _piechartData() {
@@ -332,7 +336,11 @@ export class PieChart extends React.Component<PieChartProps> {
             for (let i = 0; i < elements.length; i++) {
                 elements[i].classList.remove('hover');
             }
-            if (!sameAsCurrent!) selected.attr('class', 'slice hover');
+            if (sameAsCurrent!) this.curSliceSelected = undefined;
+            else {
+                selected.attr('class', 'slice hover') 
+                this.curSliceSelected = selected;
+            }
         });
 
         var arcs = g.selectAll("arc")
@@ -340,7 +348,7 @@ export class PieChart extends React.Component<PieChartProps> {
             .enter()
             .append("g")
         arcs.append("path")
-            .attr("fill", (data, i)=>{ return d3.schemeSet3[i]? d3.schemeSet3[i]: d3.schemeSet3[i%12] })
+            .attr("fill", (data, i)=>{ return this.sliceColors[data.data.valueOf()]? this.sliceColors[data.data.valueOf()] : d3.schemeSet3[i]? d3.schemeSet3[i]: d3.schemeSet3[i%12] })
             .attr("class", 'slice')
             .attr("d", arc)
             .on('click', onPointClick)
@@ -368,7 +376,13 @@ export class PieChart extends React.Component<PieChartProps> {
 
     };
 
+    @action changeSelectedColor = (color: string) => {
+        this.curSliceSelected.attr("fill", color);
+        this.sliceColors[this._currSelected[this.props.axes[0]].replace(/\$/g, '').replace(/\%/g, '').replace(/\</g, '')] = color;
+    };
+
     render() {
+        console.log(this.sliceColors)
         var selected: string;
         if (this._currSelected){
             selected = '{ ';
@@ -383,7 +397,19 @@ export class PieChart extends React.Component<PieChartProps> {
             this.props.axes.length >= 1 ? (
             <div className="chart-container">
                 <div className="graph-title"> {this.graphTitle} </div>
-                <div className={'selected-data'}> {`Selected: ${selected}`}</div>
+                {selected != 'none' ? 
+                    <div className={'selected-data'}>
+                        Selected: {selected}
+                        <ColorPicker
+                            tooltip={'Change Slice Color'} 
+                            type={Type.SEC} 
+                            icon={<FaFillDrip/>}
+                            selectedColor={this.curSliceSelected.attr("fill")}
+                            setSelectedColor={color => this.changeSelectedColor(color)}
+                            size={Size.XSMALL}
+                        />
+                    </div>
+                : null}
                 <div ref={this._piechartRef} />
             </div>
             ) : <span className="chart-container"> {'first use table view to select a column to graph'}</span>
-- 
cgit v1.2.3-70-g09d2


From 7da381226f86467729c4fcad685dac17e30c9bf9 Mon Sep 17 00:00:00 2001
From: srichman333 <sarah_n_richman@brown.edu>
Date: Mon, 31 Jul 2023 13:47:28 -0400
Subject: color ui fix + editable titles

---
 src/client/views/nodes/DataVizBox/DataVizBox.tsx   |  1 -
 .../views/nodes/DataVizBox/components/Chart.scss   | 14 +++++++-
 .../nodes/DataVizBox/components/Histogram.tsx      | 41 ++++++++++++++++------
 .../views/nodes/DataVizBox/components/PieChart.tsx | 22 +++++++++---
 4 files changed, 61 insertions(+), 17 deletions(-)

diff --git a/src/client/views/nodes/DataVizBox/DataVizBox.tsx b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
index 70fed91ef..12aa2ae34 100644
--- a/src/client/views/nodes/DataVizBox/DataVizBox.tsx
+++ b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
@@ -120,7 +120,6 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         const height = (this.props.PanelHeight() - 32) /* height of 'change view' button */ * 0.9;
         const margin = { top: 10, right: 25, bottom: 50, left: 25 };
         if (!this.pairs) return 'no data';
-        console.log('new pie')
         return <PieChart height={height} width={width} fieldKey={this.fieldKey} margin={margin} rootDoc={this.rootDoc} axes={this.axes} pairs={this.pairs} dataDoc={this.dataDoc} />;
     }
     @computed get selectView() {
diff --git a/src/client/views/nodes/DataVizBox/components/Chart.scss b/src/client/views/nodes/DataVizBox/components/Chart.scss
index da5a274a5..fc0c4cea3 100644
--- a/src/client/views/nodes/DataVizBox/components/Chart.scss
+++ b/src/client/views/nodes/DataVizBox/components/Chart.scss
@@ -11,20 +11,32 @@
     .graph-title{
         align-items: center;
         font-size: larger;
+        display: flex;
+        flex-direction: row;
+        margin-top: -10px;
+        margin-bottom: -10px;
     }
     .selected-data{
         align-items: center;
+        text-align: center;
+        display: flex;
+        flex-direction: row;
+        margin: 10px;
+        margin-top: 0px;
+        margin-bottom: -5px;
     }
     .slice {
         &.hover {
             stroke: black;
+            stroke-width: 2px;
         }
     }
     
     .histogram-bar{
         outline: thin solid black;
         &.hover{
-            outline: 5px solid black;
+            outline: 3px solid black;
+            outline-offset: -3px;
         }
     }
 
diff --git a/src/client/views/nodes/DataVizBox/components/Histogram.tsx b/src/client/views/nodes/DataVizBox/components/Histogram.tsx
index 998636a42..6d0a8bf75 100644
--- a/src/client/views/nodes/DataVizBox/components/Histogram.tsx
+++ b/src/client/views/nodes/DataVizBox/components/Histogram.tsx
@@ -14,7 +14,7 @@ import { PinProps, PresBox } from "../../trails";
 import { Docs } from "../../../../documents/Documents";
 import { List } from "../../../../../fields/List";
 import './Chart.scss';
-import { ColorPicker, Size, Type } from "browndash-components";
+import { ColorPicker, EditableText, Size, Type } from "browndash-components";
 import { FaFillDrip } from "react-icons/fa";
 
 export interface HistogramProps {
@@ -46,6 +46,7 @@ export class Histogram extends React.Component<HistogramProps> {
     private curBarSelected: any = undefined;
     private barColors: any = {};
     private defaultBarColor: string = '#69b3a2';
+    @observable graphTitle: string = this.defaultGraphTitle;
     // TODO: nda - some sort of mapping that keeps track of the annotated points so we can easily remove when annotations list updates
 
     @computed get _histogramData() {
@@ -71,7 +72,7 @@ export class Histogram extends React.Component<HistogramProps> {
             .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 graphTitle(){
+    @computed get defaultGraphTitle(){
         var ax0 = this.props.axes[0];
         var ax1 = (this.props.axes.length>1)? this.props.axes[1] : undefined;
         if (this.props.axes.length<2 || !/\d/.test(this.props.pairs[0][ax0]) || !ax1){
@@ -432,6 +433,7 @@ export class Histogram extends React.Component<HistogramProps> {
         this.curBarSelected.attr("fill", color);
         this.barColors[this._currSelected[this.props.axes[0]].replace(/\$/g, '').replace(/\%/g, '').replace(/\</g, '')] = color;
     };
+    
     @action changeDefaultColor = (color: string) => {
         const defaultColorBars = this._histogramSvg!.selectAll('.histogram-bar').filter((d: any) => {
             if (this.barColors[d[0]]) return false;
@@ -441,6 +443,19 @@ export class Histogram extends React.Component<HistogramProps> {
         this.defaultBarColor = color;
     };
 
+    @computed get editableTitle() {
+        const title = this.graphTitle;
+        return (
+            <EditableText
+                val={title}
+                setVal={action(val => this.graphTitle = val as string)}
+                color={"black"}
+                size={Size.LARGE}
+                fillWidth
+            />
+        );
+    }
+
     render() {
         
         var selected: string;
@@ -456,18 +471,22 @@ export class Histogram extends React.Component<HistogramProps> {
         return (
             this.props.axes.length >= 1 ? (
             <div className="chart-container" >
-                <div className="graph-title"> {this.graphTitle} </div>
-                <ColorPicker
-                    tooltip={'Change Default Slice Color'} 
-                    type={Type.SEC} 
-                    icon={<FaFillDrip/>}
-                    selectedColor={this.defaultBarColor}
-                    setSelectedColor={color => this.changeDefaultColor(color)}
-                    size={Size.XSMALL}
-                />
+                <div className="graph-title"> 
+                    {this.editableTitle} 
+                    &nbsp; &nbsp; 
+                    <ColorPicker
+                        tooltip={'Change Default Bar Color'} 
+                        type={Type.SEC} 
+                        icon={<FaFillDrip/>}
+                        selectedColor={this.defaultBarColor}
+                        setSelectedColor={color => this.changeDefaultColor(color)}
+                        size={Size.XSMALL}
+                    />
+                </div>
                 {selected != 'none' ? 
                     <div className={'selected-data'}>
                         Selected: {selected}
+                        &nbsp; &nbsp;
                         <ColorPicker
                             tooltip={'Change Slice Color'} 
                             type={Type.SEC} 
diff --git a/src/client/views/nodes/DataVizBox/components/PieChart.tsx b/src/client/views/nodes/DataVizBox/components/PieChart.tsx
index 872bf9af1..5080f0c74 100644
--- a/src/client/views/nodes/DataVizBox/components/PieChart.tsx
+++ b/src/client/views/nodes/DataVizBox/components/PieChart.tsx
@@ -14,7 +14,7 @@ import { PinProps, PresBox } from "../../trails";
 import { Docs } from "../../../../documents/Documents";
 import { List } from "../../../../../fields/List";
 import './Chart.scss';
-import { ColorPicker, Size, Type } from "browndash-components";
+import { ColorPicker, EditableText, Size, Type } from "browndash-components";
 import { FaFillDrip } from "react-icons/fa";
 
 export interface PieChartProps {
@@ -43,6 +43,7 @@ export class PieChart extends React.Component<PieChartProps> {
     @observable _currSelected: any | undefined = undefined;
     private curSliceSelected: any = undefined;
     private sliceColors: any = {};
+    @observable graphTitle: string = this.defaultGraphTitle;
     // TODO: nda - some sort of mapping that keeps track of the annotated points so we can easily remove when annotations list updates
 
     @computed get _piechartData() {
@@ -67,7 +68,7 @@ export class PieChart extends React.Component<PieChartProps> {
             .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 graphTitle(){
+    @computed get defaultGraphTitle(){
         var ax0 = this.props.axes[0];
         var ax1 = (this.props.axes.length>1)? this.props.axes[1] : undefined;
         if (this.props.axes.length<2 || !/\d/.test(this.props.pairs[0][ax0]) || !ax1){
@@ -381,8 +382,20 @@ export class PieChart extends React.Component<PieChartProps> {
         this.sliceColors[this._currSelected[this.props.axes[0]].replace(/\$/g, '').replace(/\%/g, '').replace(/\</g, '')] = color;
     };
 
+    @computed get editableTitle() {
+        const title = this.graphTitle;
+        return (
+            <EditableText
+                val={title}
+                setVal={action(val => this.graphTitle = val as string)}
+                color={"black"}
+                size={Size.LARGE}
+                fillWidth
+            />
+        );
+    }
+
     render() {
-        console.log(this.sliceColors)
         var selected: string;
         if (this._currSelected){
             selected = '{ ';
@@ -396,10 +409,11 @@ export class PieChart extends React.Component<PieChartProps> {
         return (
             this.props.axes.length >= 1 ? (
             <div className="chart-container">
-                <div className="graph-title"> {this.graphTitle} </div>
+                <div className="graph-title"> {this.editableTitle} </div>
                 {selected != 'none' ? 
                     <div className={'selected-data'}>
                         Selected: {selected}
+                        &nbsp; &nbsp;
                         <ColorPicker
                             tooltip={'Change Slice Color'} 
                             type={Type.SEC} 
-- 
cgit v1.2.3-70-g09d2


From 74b3a04a40338a4f16027560e52ec771b7aa19be Mon Sep 17 00:00:00 2001
From: srichman333 <sarah_n_richman@brown.edu>
Date: Mon, 31 Jul 2023 17:18:48 -0400
Subject: import table on windows

---
 src/client/views/collections/collectionFreeForm/MarqueeView.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
index ba8585749..158588e8a 100644
--- a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
+++ b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
@@ -170,7 +170,7 @@ export class MarqueeView extends React.Component<SubCollectionViewProps & Marque
             TreeView._editTitleOnLoad = { id: slide[Id], parent: undefined };
             this.props.addDocument?.(slide);
             e.stopPropagation();
-        }*/ else if (e.key === 't' && e.ctrlKey) {
+        }*/ else if (e.key === 'p' && e.ctrlKey) {
             e.preventDefault();
             (async () => {
                 const text: string = await navigator.clipboard.readText();
-- 
cgit v1.2.3-70-g09d2


From 710cb3aa93ea30799479ca7c79444f05aeab2209 Mon Sep 17 00:00:00 2001
From: srichman333 <sarah_n_richman@brown.edu>
Date: Mon, 31 Jul 2023 18:49:44 -0400
Subject: TableBox editable headers start

---
 .../nodes/DataVizBox/components/Histogram.tsx      |  23 ++---
 .../views/nodes/DataVizBox/components/PieChart.tsx |  24 ++---
 .../views/nodes/DataVizBox/components/TableBox.tsx | 108 ++++++++++++++++++++-
 3 files changed, 125 insertions(+), 30 deletions(-)

diff --git a/src/client/views/nodes/DataVizBox/components/Histogram.tsx b/src/client/views/nodes/DataVizBox/components/Histogram.tsx
index 6d0a8bf75..64e61fca8 100644
--- a/src/client/views/nodes/DataVizBox/components/Histogram.tsx
+++ b/src/client/views/nodes/DataVizBox/components/Histogram.tsx
@@ -443,21 +443,8 @@ export class Histogram extends React.Component<HistogramProps> {
         this.defaultBarColor = color;
     };
 
-    @computed get editableTitle() {
-        const title = this.graphTitle;
-        return (
-            <EditableText
-                val={title}
-                setVal={action(val => this.graphTitle = val as string)}
-                color={"black"}
-                size={Size.LARGE}
-                fillWidth
-            />
-        );
-    }
-
     render() {
-        
+        const title = this.graphTitle;
         var selected: string;
         if (this._currSelected){
             selected = '{ ';
@@ -472,7 +459,13 @@ export class Histogram extends React.Component<HistogramProps> {
             this.props.axes.length >= 1 ? (
             <div className="chart-container" >
                 <div className="graph-title"> 
-                    {this.editableTitle} 
+                    <EditableText
+                        val={title}
+                        setVal={action(val => this.graphTitle = val as string)}
+                        color={"black"}
+                        size={Size.LARGE}
+                        fillWidth
+                    />
                     &nbsp; &nbsp; 
                     <ColorPicker
                         tooltip={'Change Default Bar Color'} 
diff --git a/src/client/views/nodes/DataVizBox/components/PieChart.tsx b/src/client/views/nodes/DataVizBox/components/PieChart.tsx
index 5080f0c74..47d4fb23e 100644
--- a/src/client/views/nodes/DataVizBox/components/PieChart.tsx
+++ b/src/client/views/nodes/DataVizBox/components/PieChart.tsx
@@ -382,20 +382,8 @@ export class PieChart extends React.Component<PieChartProps> {
         this.sliceColors[this._currSelected[this.props.axes[0]].replace(/\$/g, '').replace(/\%/g, '').replace(/\</g, '')] = color;
     };
 
-    @computed get editableTitle() {
-        const title = this.graphTitle;
-        return (
-            <EditableText
-                val={title}
-                setVal={action(val => this.graphTitle = val as string)}
-                color={"black"}
-                size={Size.LARGE}
-                fillWidth
-            />
-        );
-    }
-
     render() {
+        const title = this.graphTitle;
         var selected: string;
         if (this._currSelected){
             selected = '{ ';
@@ -409,7 +397,15 @@ export class PieChart extends React.Component<PieChartProps> {
         return (
             this.props.axes.length >= 1 ? (
             <div className="chart-container">
-                <div className="graph-title"> {this.editableTitle} </div>
+                <div className="graph-title"> 
+                    <EditableText
+                        val={title}
+                        setVal={action(val => this.graphTitle = val as string)}
+                        color={"black"}
+                        size={Size.LARGE}
+                        fillWidth
+                    />
+                </div>
                 {selected != 'none' ? 
                     <div className={'selected-data'}>
                         Selected: {selected}
diff --git a/src/client/views/nodes/DataVizBox/components/TableBox.tsx b/src/client/views/nodes/DataVizBox/components/TableBox.tsx
index 500e7b639..aaedba202 100644
--- a/src/client/views/nodes/DataVizBox/components/TableBox.tsx
+++ b/src/client/views/nodes/DataVizBox/components/TableBox.tsx
@@ -1,4 +1,4 @@
-import { action, computed } from 'mobx';
+import { action, computed, observable } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
 import { Doc } from '../../../../../fields/Doc';
@@ -10,6 +10,7 @@ import { DocumentView } from '../../DocumentView';
 import { DataVizView } from '../DataVizBox';
 import { LinkManager } from '../../../../util/LinkManager';
 import { DocCast } from '../../../../../fields/Types';
+import { EditableText, Size, Type } from 'browndash-components';
 
 interface TableBoxProps {
     rootDoc: Doc;
@@ -21,6 +22,8 @@ interface TableBoxProps {
 
 @observer
 export class TableBox extends React.Component<TableBoxProps> {
+    @observable editableHeaders = this.columns;
+    @observable editableCells = this._tableData;
 
     @computed get _tableData() {
         if (this.incomingLinks.length! <= 0) return this.props.pairs;
@@ -39,6 +42,106 @@ export class TableBox extends React.Component<TableBoxProps> {
         return this._tableData.length ? Array.from(Object.keys(this._tableData[0])) : [];
     }
 
+    // render() {
+    //     return (
+    //         <div className="table-container">
+    //             <table className="table">
+    //                 <thead>
+    //                     <tr className="table-row">
+    //                         {this.editableHeaders
+    //                             .filter(col => !col.startsWith('select'))
+    //                             .map(col => {
+    //                                 const header = React.createRef<HTMLElement>();
+    //                                 const displayColName = col;
+    //                                 return (
+    //                                     <th
+    //                                         key={this.editableHeaders.indexOf(col)}
+    //                                         ref={header as any}
+    //                                         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 => {
+    //                                             const downX = e.clientX;
+    //                                             const downY = e.clientY;
+    //                                             setupMoveUpEvents(
+    //                                                 {},
+    //                                                 e,
+    //                                                 e => {
+    //                                                     const sourceAnchorCreator = () => this.props.docView?.()!.rootDoc!;
+    //                                                     const targetCreator = (annotationOn: Doc | undefined) => {
+    //                                                         const embedding = Doc.MakeEmbedding(this.props.docView?.()!.rootDoc!);
+    //                                                         embedding._dataVizView = DataVizView.LINECHART;
+    //                                                         embedding._data_vizAxes = new List<string>([col, col]);
+    //                                                         embedding._draggedFrom = this.props.docView?.()!.rootDoc!;
+    //                                                         embedding.annotationOn = annotationOn; //this.props.docView?.()!.rootDoc!;
+    //                                                         return embedding;
+    //                                                     };
+    //                                                     if (this.props.docView?.() && !Utils.isClick(e.clientX, e.clientY, downX, downY, Date.now())) {
+    //                                                         DragManager.StartAnchorAnnoDrag([header.current!], new DragManager.AnchorAnnoDragData(this.props.docView()!, sourceAnchorCreator, targetCreator), downX, downY, {
+    //                                                             dragComplete: e => {
+    //                                                                 if (!e.aborted && e.annoDragData && e.annoDragData.linkSourceDoc && e.annoDragData.dropDocument && e.linkDocument) {
+    //                                                                     e.linkDocument.link_displayLine = true;
+    //                                                                     e.linkDocument.link_matchEmbeddings = true;
+    //                                                                     // e.annoDragData.linkSourceDoc.followLinkToggle = e.annoDragData.dropDocument.annotationOn === this.props.rootDoc;
+    //                                                                     // e.annoDragData.linkSourceDoc.followLinkZoom = false;
+    //                                                                 }
+    //                                                             },
+    //                                                         });
+    //                                                         return true;
+    //                                                     }
+    //                                                     return false;
+    //                                                 },
+    //                                                 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);
+    //                                                 })
+    //                                             );
+    //                                         }}>
+    //                                         <EditableText
+    //                                             val={displayColName}
+    //                                             setVal={action(val => {
+    //                                                 this.editableHeaders[this.editableHeaders.indexOf(col)] = val as string
+    //                                                 this.props.pairs.map(pair => {
+    //                                                     pair[val as string] = pair[col];
+    //                                                     delete pair[col]
+    //                                                 })
+    //                                             })}
+    //                                             color={"black"}
+    //                                             size={Size.LARGE}
+    //                                         />
+    //                                     </th>
+    //                                 );
+    //                             })}
+    //                     </tr>
+    //                 </thead>
+    //                 <tbody>
+    //                     {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.editableHeaders.map(col => (
+    //                                     <td key={this.editableHeaders.indexOf(col)} style={{ fontWeight: p['select' + this.props.docView?.()?.rootDoc![Id]] ? 'bold' : '' }}>
+    //                                         {p[col]}
+    //                                     </td>
+    //                                 ))}
+    //                             </tr>
+    //                         );
+    //                     })}
+    //                 </tbody>
+    //             </table>
+    //         </div>
+    //     );
+    // }
+
+
     render() {
         return (
             <div className="table-container">
@@ -125,4 +228,7 @@ export class TableBox extends React.Component<TableBoxProps> {
             </div>
         );
     }
+
+
+
 }
-- 
cgit v1.2.3-70-g09d2


From 591533a40c847f84e23428ab757b8822edbc2a61 Mon Sep 17 00:00:00 2001
From: srichman333 <sarah_n_richman@brown.edu>
Date: Tue, 1 Aug 2023 17:41:09 -0400
Subject: things save: editable title for all 3 + color for histogram

---
 src/client/views/nodes/DataVizBox/DataVizBox.tsx   | 42 ++++++----------------
 .../views/nodes/DataVizBox/components/Chart.scss   |  3 ++
 .../nodes/DataVizBox/components/Histogram.tsx      | 37 ++++++++++---------
 .../nodes/DataVizBox/components/LineChart.tsx      | 28 +++++++++++++--
 .../views/nodes/DataVizBox/components/PieChart.tsx | 20 ++++++-----
 .../views/nodes/DataVizBox/components/TableBox.tsx | 26 +++++++++++---
 6 files changed, 95 insertions(+), 61 deletions(-)

diff --git a/src/client/views/nodes/DataVizBox/DataVizBox.tsx b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
index 12aa2ae34..710c049a2 100644
--- a/src/client/views/nodes/DataVizBox/DataVizBox.tsx
+++ b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
@@ -14,7 +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';
+import { Toggle, ToggleType, Type } from 'browndash-components';
 
 export enum DataVizView {
     TABLE = 'table',
@@ -25,6 +25,7 @@ export enum DataVizView {
 
 @observer
 export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
+
     public static LayoutString(fieldKey: string) {
         return FieldView.LayoutString(DataVizBox, fieldKey);
     }
@@ -97,37 +98,16 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
     }
     selectAxes = (axes: string[]) => (this.layoutDoc.data_vizAxes = new List<string>(axes));
 
-    @computed get table(){
-        if (!this.pairs) return 'no data';
-        return <TableBox pairs={this.pairs} axes={this.axes} rootDoc={this.rootDoc} docView={this.props.DocumentView} selectAxes={this.selectAxes}/>;
-    }
-    @computed get lineChart(){
-        const width = this.props.PanelWidth() * 0.9;
-        const height = (this.props.PanelHeight() - 32) /* height of 'change view' button */ * 0.9;
-        const margin = { top: 10, right: 25, bottom: 50, left: 25 };
-        if (!this.pairs) return 'no data';
-        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} />;
-    }
-    @computed get histogram(){
-        const width = this.props.PanelWidth() * 0.9;
-        const height = (this.props.PanelHeight() - 32) /* height of 'change view' button */ * 0.9;
-        const margin = { top: 10, right: 25, bottom: 50, left: 25 };
-        if (!this.pairs) return 'no data';
-        return <Histogram height={height} width={width} fieldKey={this.fieldKey} margin={margin} rootDoc={this.rootDoc} axes={this.axes} pairs={this.pairs} dataDoc={this.dataDoc} />;
-    }
-    @computed get pieChart(){
+    @computed get selectView() {
         const width = this.props.PanelWidth() * 0.9;
         const height = (this.props.PanelHeight() - 32) /* height of 'change view' button */ * 0.9;
         const margin = { top: 10, right: 25, bottom: 50, left: 25 };
         if (!this.pairs) return 'no data';
-        return <PieChart height={height} width={width} fieldKey={this.fieldKey} margin={margin} rootDoc={this.rootDoc} axes={this.axes} pairs={this.pairs} dataDoc={this.dataDoc} />;
-    }
-    @computed get selectView() {
         switch (this.dataVizView) {
-            case DataVizView.TABLE:     return this.table;
-            case DataVizView.LINECHART: return this.lineChart;
-            case DataVizView.HISTOGRAM: return this.histogram;
-            case DataVizView.PIECHART: return this.pieChart;
+            case DataVizView.TABLE:     return <TableBox pairs={this.pairs} axes={this.axes} height={height} width={width} margin={margin} rootDoc={this.rootDoc} docView={this.props.DocumentView} selectAxes={this.selectAxes}/>;
+            case DataVizView.LINECHART: return <LineChart layoutDoc={this.layoutDoc} 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 layoutDoc={this.layoutDoc} 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 layoutDoc={this.layoutDoc} height={height} width={width} fieldKey={this.fieldKey} margin={margin} rootDoc={this.rootDoc} axes={this.axes} pairs={this.pairs} dataDoc={this.dataDoc} />;
         }
     }
     @computed get dataUrl() {
@@ -176,19 +156,19 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
                     )
                 }>
                 <div className={'datatype-button'}>
-                    <Toggle text={"TABLE"} toggleType={ToggleType.BUTTON} type={"secondary"} color={"black"} 
+                    <Toggle text={"TABLE"} toggleType={ToggleType.BUTTON} type={Type.SEC} 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"} 
+                    <Toggle text={"LINECHART"} toggleType={ToggleType.BUTTON} type={Type.SEC} 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"} 
+                    <Toggle text={"HISTOGRAM"} toggleType={ToggleType.BUTTON} type={Type.SEC} 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"} 
+                    <Toggle text={"PIE CHART"} toggleType={ToggleType.BUTTON} type={Type.SEC} color={"black"} 
                         onClick={e => this.layoutDoc._dataVizView = DataVizView.PIECHART} 
                         toggleStatus={this.layoutDoc._dataVizView == DataVizView.PIECHART} 
                     />
diff --git a/src/client/views/nodes/DataVizBox/components/Chart.scss b/src/client/views/nodes/DataVizBox/components/Chart.scss
index fc0c4cea3..6c87241b8 100644
--- a/src/client/views/nodes/DataVizBox/components/Chart.scss
+++ b/src/client/views/nodes/DataVizBox/components/Chart.scss
@@ -75,3 +75,6 @@
         fill: red;
     }
 }
+.table-container{
+    overflow: scroll;
+}
\ No newline at end of file
diff --git a/src/client/views/nodes/DataVizBox/components/Histogram.tsx b/src/client/views/nodes/DataVizBox/components/Histogram.tsx
index 64e61fca8..740ee6e3a 100644
--- a/src/client/views/nodes/DataVizBox/components/Histogram.tsx
+++ b/src/client/views/nodes/DataVizBox/components/Histogram.tsx
@@ -1,10 +1,10 @@
 import { observer } from "mobx-react";
-import { Doc, DocListCast } from "../../../../../fields/Doc";
+import { Doc, DocListCast, FieldResult } 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} from "../../../../../fields/Types";
+import { Cast, DocCast, StrCast} from "../../../../../fields/Types";
 import { DataPoint, SelectedDataPoint } from "./LineChart";
 import { DocumentManager } from "../../../../util/DocumentManager";
 import { Id } from "../../../../../fields/FieldSymbols";
@@ -19,6 +19,7 @@ import { FaFillDrip } from "react-icons/fa";
 
 export interface HistogramProps {
     rootDoc: Doc;
+    layoutDoc: Doc;
     axes: string[];
     pairs: { [key: string]: any }[];
     width: number;
@@ -44,9 +45,6 @@ export class Histogram extends React.Component<HistogramProps> {
     private maxBins = 15; // maximum number of bins that is readable on a normal sized doc
     @observable _currSelected: any | undefined = undefined;
     private curBarSelected: any = undefined;
-    private barColors: any = {};
-    private defaultBarColor: string = '#69b3a2';
-    @observable graphTitle: string = this.defaultGraphTitle;
     // TODO: nda - some sort of mapping that keeps track of the annotated points so we can easily remove when annotations list updates
 
     @computed get _histogramData() {
@@ -75,7 +73,7 @@ export class Histogram extends React.Component<HistogramProps> {
     @computed get defaultGraphTitle(){
         var ax0 = this.props.axes[0];
         var ax1 = (this.props.axes.length>1)? this.props.axes[1] : undefined;
-        if (this.props.axes.length<2 || !/\d/.test(this.props.pairs[0][ax0]) || !ax1){
+        if (this.props.axes.length<2 || !/\d/.test(this.props.pairs[0][ax0]) || !ax1 || !this.numericalYData){
             return ax0 + " Histogram";
         }
         else return ax1 + " by " + ax0 + " Histogram";
@@ -285,8 +283,8 @@ export class Histogram extends React.Component<HistogramProps> {
                     histStringDataSet.push({[yAxisTitle]: 0, [xAxisTitle]: uniqueArr[i]})
                 }
                 for (let i=0; i<data.length; i++){
-                    let sliceData = histStringDataSet.filter(each => each[xAxisTitle]==data[i])
-                    sliceData[0][yAxisTitle] = sliceData[0][yAxisTitle] + 1;
+                    let barData = histStringDataSet.filter(each => each[xAxisTitle]==data[i])
+                    barData[0][yAxisTitle] = barData[0][yAxisTitle] + 1;
                 }
             }
             histDataSet = histStringDataSet
@@ -426,27 +424,33 @@ export class Histogram extends React.Component<HistogramProps> {
                         return height - y(d.length)})
               .attr("width", eachRectWidth)
               .attr("class", 'histogram-bar')
-              .attr("fill", (d)=>{ return this.barColors[d[0]]? this.barColors[d[0]] : this.defaultBarColor})
+              .attr("fill", (d)=>{ return this.props.layoutDoc['histogramBarColors-'+d[0]]? StrCast(this.props.layoutDoc['histogramBarColors-'+d[0]]) : this.props.layoutDoc.defaultHistogramColor? StrCast(this.props.layoutDoc.defaultHistogramColor): '#69b3a2'})
     };
 
     @action changeSelectedColor = (color: string) => {
         this.curBarSelected.attr("fill", color);
-        this.barColors[this._currSelected[this.props.axes[0]].replace(/\$/g, '').replace(/\%/g, '').replace(/\</g, '')] = color;
+        var barName = StrCast(this._currSelected[this.props.axes[0]].replace(/\$/g, '').replace(/\%/g, '').replace(/\</g, ''))
+        this.props.layoutDoc['histogramBarColors-'+barName] = color;
     };
     
     @action changeDefaultColor = (color: string) => {
         const defaultColorBars = this._histogramSvg!.selectAll('.histogram-bar').filter((d: any) => {
-            if (this.barColors[d[0]]) return false;
+            if (this.props.layoutDoc['histogramBarColors-'+d[0]]) return false;
             else return true;
         })
         defaultColorBars.attr("fill", color);
-        this.defaultBarColor = color;
+        this.props.layoutDoc.defaultHistogramColor = color;
     };
 
     render() {
-        const title = this.graphTitle;
+        var curSelectedBarName;
+        var titleAccessor: any='';
+        if (this.props.axes.length==2) titleAccessor = StrCast(this.props.layoutDoc['histogram-title-'+this.props.axes[0]+'-'+this.props.axes[1]]);
+        else if (this.props.axes.length>0) titleAccessor = StrCast(this.props.layoutDoc['histogram-title-'+this.props.axes[0]]);
+        const title = titleAccessor? titleAccessor : this.defaultGraphTitle;
         var selected: string;
         if (this._currSelected){
+            curSelectedBarName = StrCast(this._currSelected![this.props.axes[0]].replace(/\$/g, '').replace(/\%/g, '').replace(/\</g, ''))
             selected = '{ ';
             Object.keys(this._currSelected).map(key => {
                 key!=''? selected += key + ': ' + this._currSelected[key] + ', ': '';
@@ -461,7 +465,8 @@ export class Histogram extends React.Component<HistogramProps> {
                 <div className="graph-title"> 
                     <EditableText
                         val={title}
-                        setVal={action(val => this.graphTitle = val as string)}
+                        setVal={action(val => {this.props.axes.length>1? this.props.layoutDoc['histogram-title-'+this.props.axes[0]+"-"+this.props.axes[1]] = val as string
+                            : this.props.layoutDoc['histogram-title-'+this.props.axes[0]] = val as string})}
                         color={"black"}
                         size={Size.LARGE}
                         fillWidth
@@ -471,7 +476,7 @@ export class Histogram extends React.Component<HistogramProps> {
                         tooltip={'Change Default Bar Color'} 
                         type={Type.SEC} 
                         icon={<FaFillDrip/>}
-                        selectedColor={this.defaultBarColor}
+                        selectedColor={this.props.layoutDoc.defaultHistogramColor? StrCast(this.props.layoutDoc.defaultHistogramColor): '#69b3a2'}
                         setSelectedColor={color => this.changeDefaultColor(color)}
                         size={Size.XSMALL}
                     />
@@ -484,7 +489,7 @@ export class Histogram extends React.Component<HistogramProps> {
                             tooltip={'Change Slice Color'} 
                             type={Type.SEC} 
                             icon={<FaFillDrip/>}
-                            selectedColor={this.curBarSelected.attr("fill")}
+                            selectedColor={this.props.layoutDoc['histogramBarColors-'+curSelectedBarName]? this.props.layoutDoc['histogramBarColors-'+curSelectedBarName] : this.curBarSelected.attr("fill")}
                             setSelectedColor={color => this.changeSelectedColor(color)}
                             size={Size.XSMALL}
                         />
diff --git a/src/client/views/nodes/DataVizBox/components/LineChart.tsx b/src/client/views/nodes/DataVizBox/components/LineChart.tsx
index da79df476..0142e96ad 100644
--- a/src/client/views/nodes/DataVizBox/components/LineChart.tsx
+++ b/src/client/views/nodes/DataVizBox/components/LineChart.tsx
@@ -6,7 +6,7 @@ import { Doc, DocListCast } from '../../../../../fields/Doc';
 import { Id } from '../../../../../fields/FieldSymbols';
 import { List } from '../../../../../fields/List';
 import { listSpec } from '../../../../../fields/Schema';
-import { Cast, DocCast } from '../../../../../fields/Types';
+import { Cast, DocCast, StrCast } from '../../../../../fields/Types';
 import { Docs } from '../../../../documents/Documents';
 import { DocumentManager } from '../../../../util/DocumentManager';
 import { LinkManager } from '../../../../util/LinkManager';
@@ -14,6 +14,7 @@ import { PinProps, PresBox } from '../../trails';
 import { DataVizBox } from '../DataVizBox';
 import { createLineGenerator, drawLine, minMaxRange, scaleCreatorNumerical, xAxisCreator, xGrid, yAxisCreator, yGrid } from '../utils/D3Utils';
 import './Chart.scss';
+import { EditableText, Size } from 'browndash-components';
 
 export interface DataPoint {
     x: number;
@@ -24,6 +25,7 @@ export interface SelectedDataPoint extends DataPoint {
 }
 export interface LineChartProps {
     rootDoc: Doc;
+    layoutDoc: Doc;
     axes: string[];
     pairs: { [key: string]: any }[];
     width: number;
@@ -185,6 +187,15 @@ export class LineChart extends React.Component<LineChartProps> {
         return this.props.width - this.props.margin.left - this.props.margin.right;
     }
 
+    @computed get defaultGraphTitle(){
+        var ax0 = this.props.axes[0];
+        var ax1 = (this.props.axes.length>1)? this.props.axes[1] : undefined;
+        if (this.props.axes.length<2 || !/\d/.test(this.props.pairs[0][ax0]) || !ax1){
+            return ax0 + " Line Chart";
+        }
+        else return ax1 + " by " + ax0 + " Line Chart";
+    } 
+
     setupTooltip() {
         return d3
             .select(this._lineChartRef.current)
@@ -339,11 +350,24 @@ export class LineChart extends React.Component<LineChartProps> {
     }
 
     render() {
+        var titleAccessor:any = '';
+        if (this.props.axes.length==2) titleAccessor = StrCast(this.props.layoutDoc['lineChart-title-'+this.props.axes[0]+'-'+this.props.axes[1]]);
+        else if (this.props.axes.length>0) titleAccessor = StrCast(this.props.layoutDoc['lineChart-title-'+this.props.axes[0]]);
+        const title = titleAccessor? titleAccessor : this.defaultGraphTitle;
         const selectedPt = this._currSelected ? `x: ${this._currSelected.x} y: ${this._currSelected.y}` : 'none';
         return (
             this.props.axes.length >= 2 ? (
             <div className="chart-container" >
-                <div className="graph-title"> {this.graphTitle} </div>
+                <div className="graph-title"> 
+                    <EditableText
+                        val={title}
+                        setVal={action(val => {this.props.axes.length>1? this.props.layoutDoc['lineChart-title-'+this.props.axes[0]+"-"+this.props.axes[1]] = val as string
+                            : this.props.layoutDoc['lineChart-title-'+this.props.axes[0]] = val as string})}
+                        color={"black"}
+                        size={Size.LARGE}
+                        fillWidth
+                    />
+                </div>
                 <div className={'selected-data'}> {`Selected: ${selectedPt}`}</div>
                 <div ref={this._lineChartRef} />
             </div>
diff --git a/src/client/views/nodes/DataVizBox/components/PieChart.tsx b/src/client/views/nodes/DataVizBox/components/PieChart.tsx
index 47d4fb23e..f0c27866d 100644
--- a/src/client/views/nodes/DataVizBox/components/PieChart.tsx
+++ b/src/client/views/nodes/DataVizBox/components/PieChart.tsx
@@ -4,7 +4,7 @@ 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} from "../../../../../fields/Types";
+import { Cast, DocCast, StrCast} from "../../../../../fields/Types";
 import { DataPoint, SelectedDataPoint } from "./LineChart";
 import { DocumentManager } from "../../../../util/DocumentManager";
 import { Id } from "../../../../../fields/FieldSymbols";
@@ -19,6 +19,7 @@ import { FaFillDrip } from "react-icons/fa";
 
 export interface PieChartProps {
     rootDoc: Doc;
+    layoutDoc: Doc;
     axes: string[];
     pairs: { [key: string]: any }[];
     width: number;
@@ -42,8 +43,6 @@ export class PieChart extends React.Component<PieChartProps> {
     private byCategory: boolean = true; // whether the data is organized by category or by specified number percentages/ratios
     @observable _currSelected: any | undefined = undefined;
     private curSliceSelected: any = undefined;
-    private sliceColors: any = {};
-    @observable graphTitle: string = this.defaultGraphTitle;
     // TODO: nda - some sort of mapping that keeps track of the annotated points so we can easily remove when annotations list updates
 
     @computed get _piechartData() {
@@ -254,7 +253,7 @@ export class PieChart extends React.Component<PieChartProps> {
         
         var percentField = Object.keys(dataSet[0])[0]
         var descriptionField = Object.keys(dataSet[0])[1]!
-        var radius = Math.min(width, height) / 2 - Math.max(this.props.margin.top, this.props.margin.bottom, this.props.margin.left, this.props.margin.right)
+        var radius = Math.min(width, height-this.props.margin.top-this.props.margin.bottom) /2
         var svg = (this._piechartSvg = d3
             .select(this._piechartRef.current)
             .append("svg")
@@ -349,7 +348,7 @@ export class PieChart extends React.Component<PieChartProps> {
             .enter()
             .append("g")
         arcs.append("path")
-            .attr("fill", (data, i)=>{ return this.sliceColors[data.data.valueOf()]? this.sliceColors[data.data.valueOf()] : d3.schemeSet3[i]? d3.schemeSet3[i]: d3.schemeSet3[i%12] })
+            .attr("fill", (data, i)=>{ return this.props.layoutDoc['pieSliceColors-'+data.data.valueOf()]? StrCast(this.props.layoutDoc['pieSliceColors-'+data.data.valueOf()]) : d3.schemeSet3[i]? d3.schemeSet3[i]: d3.schemeSet3[i%12] })
             .attr("class", 'slice')
             .attr("d", arc)
             .on('click', onPointClick)
@@ -379,11 +378,15 @@ export class PieChart extends React.Component<PieChartProps> {
 
     @action changeSelectedColor = (color: string) => {
         this.curSliceSelected.attr("fill", color);
-        this.sliceColors[this._currSelected[this.props.axes[0]].replace(/\$/g, '').replace(/\%/g, '').replace(/\</g, '')] = color;
+        var sliceName = this._currSelected[this.props.axes[0]].replace(/\$/g, '').replace(/\%/g, '').replace(/\</g, '')
+        this.props.layoutDoc['pieSliceColors-'+sliceName] = color;
     };
 
     render() {
-        const title = this.graphTitle;
+        var titleAccessor: any='';
+        if (this.props.axes.length==2) titleAccessor = StrCast(this.props.layoutDoc['pieChart-title-'+this.props.axes[0]+'-'+this.props.axes[1]]);
+        else if (this.props.axes.length>0) titleAccessor = StrCast(this.props.layoutDoc['pieChart-title-'+this.props.axes[0]]);
+        const title = titleAccessor? titleAccessor : this.defaultGraphTitle;
         var selected: string;
         if (this._currSelected){
             selected = '{ ';
@@ -400,7 +403,8 @@ export class PieChart extends React.Component<PieChartProps> {
                 <div className="graph-title"> 
                     <EditableText
                         val={title}
-                        setVal={action(val => this.graphTitle = val as string)}
+                        setVal={action(val => {this.props.axes.length>1? this.props.layoutDoc['pieChart-title-'+this.props.axes[0]+"-"+this.props.axes[1]] = val as string
+                            : this.props.layoutDoc['pieChart-title-'+this.props.axes[0]] = val as string})}
                         color={"black"}
                         size={Size.LARGE}
                         fillWidth
diff --git a/src/client/views/nodes/DataVizBox/components/TableBox.tsx b/src/client/views/nodes/DataVizBox/components/TableBox.tsx
index aaedba202..64c6dc940 100644
--- a/src/client/views/nodes/DataVizBox/components/TableBox.tsx
+++ b/src/client/views/nodes/DataVizBox/components/TableBox.tsx
@@ -9,14 +9,24 @@ import { DragManager } from '../../../../util/DragManager';
 import { DocumentView } from '../../DocumentView';
 import { DataVizView } from '../DataVizBox';
 import { LinkManager } from '../../../../util/LinkManager';
-import { DocCast } from '../../../../../fields/Types';
+import { Cast, DocCast } from '../../../../../fields/Types';
 import { EditableText, Size, Type } from 'browndash-components';
+import './Chart.scss';
+import { listSpec } from '../../../../../fields/Schema';
 
 interface TableBoxProps {
     rootDoc: Doc;
     pairs: { [key: string]: any }[];
     selectAxes: (axes: string[]) => void;
     axes: string[];
+    width: number;
+    height: number;
+    margin: {
+        top: number;
+        right: number;
+        bottom: number;
+        left: number;
+    };
     docView?: () => DocumentView | undefined;
 }
 
@@ -27,6 +37,7 @@ export class TableBox extends React.Component<TableBoxProps> {
 
     @computed get _tableData() {
         if (this.incomingLinks.length! <= 0) return this.props.pairs;
+        /// StrListCast(this.incomingLinks[0].anchor_1.selected) ==> list of guids that the parent has selected
         return this.props.pairs?.filter(pair => (Array.from(Object.keys(pair)).some(key => pair[key] && key.startsWith('select'))))
     }
 
@@ -44,7 +55,7 @@ export class TableBox extends React.Component<TableBoxProps> {
 
     // render() {
     //     return (
-    //         <div className="table-container">
+    //         <div className="table-container" style={{height: this.props.height+this.props.margin.top+this.props.margin.bottom}}>
     //             <table className="table">
     //                 <thead>
     //                     <tr className="table-row">
@@ -144,7 +155,7 @@ export class TableBox extends React.Component<TableBoxProps> {
 
     render() {
         return (
-            <div className="table-container">
+            <div className="table-container" style={{height: this.props.height+this.props.margin.top+this.props.margin.bottom}}>
                 <table className="table">
                     <thead>
                         <tr className="table-row">
@@ -214,7 +225,14 @@ export class TableBox extends React.Component<TableBoxProps> {
                     <tbody>
                         {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]]))}>
+                                <tr key={i} className="table-row" onClick={action(e => {
+                                        // if (!this.props.docView?.()!.layoutDoc.selected) 
+                                        //     this.props.docView!.()!.layoutDoc.selected = new List<string>();
+                                        // const selected = Cast(this.props.docView?.()!.layoutDoc.selected, listSpec("string"), null);
+                                        //                    // StrListCast(this.props.docView?.()!.layoutDoc.selected)
+                                        // selected.push(p.guid);
+                                        (p['select' + this.props.docView?.()?.rootDoc![Id]] = !p['select' + this.props.docView?.()?.rootDoc![Id]])
+                                    })}>
                                     {this.columns.map(col => (
                                         <td key={this.columns.indexOf(col)} style={{ fontWeight: p['select' + this.props.docView?.()?.rootDoc![Id]] ? 'bold' : '' }}>
                                             {p[col]}
-- 
cgit v1.2.3-70-g09d2


From 719ac430e7f0e338cc8d911813f25a90696aba15 Mon Sep 17 00:00:00 2001
From: srichman333 <sarah_n_richman@brown.edu>
Date: Wed, 2 Aug 2023 11:12:50 -0400
Subject: linking+trails getAnchor+restoreView update

---
 src/client/views/nodes/DataVizBox/DataVizBox.tsx           | 13 +++++++++++++
 src/client/views/nodes/DataVizBox/components/Histogram.tsx |  1 +
 2 files changed, 14 insertions(+)

diff --git a/src/client/views/nodes/DataVizBox/DataVizBox.tsx b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
index 710c049a2..f167346de 100644
--- a/src/client/views/nodes/DataVizBox/DataVizBox.tsx
+++ b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
@@ -68,6 +68,13 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
     restoreView = (data: Doc) => {
         const changedView = this.dataVizView !== data.presDataVizView && (this.layoutDoc._dataVizView = data.presDataVizView);
         const changedAxes = this.axes.join('') !== StrListCast(data.presDataVizAxes).join('') && (this.layoutDoc._data_vizAxes = new List<string>(StrListCast(data.presDataVizAxes)));
+        Object.keys(this.layoutDoc).map(key => {
+            if (key.startsWith('histogram-title') || key.startsWith('histogramBarColors') || key.startsWith('defaultHistogramColor')
+                || key.startsWith('lineChart-title') || key.startsWith('pieChart-title')){
+                    console.log(key)
+                    this.layoutDoc['_'+key] = data[key];
+                }
+        })
         const func = () => this._chartRenderer?.restoreView(data);
         if (changedView || changedAxes) {
             setTimeout(func, 100);
@@ -88,6 +95,12 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
 
         anchor.presDataVizView = this.dataVizView;
         anchor.presDataVizAxes = this.axes.length ? new List<string>(this.axes) : undefined;
+        Object.keys(this.layoutDoc).map(key => {
+            if (key.startsWith('histogram-title') || key.startsWith('histogramBarColors') || key.startsWith('defaultHistogramColor')
+                || key.startsWith('lineChart-title') || key.startsWith('pieChart-title')){
+                    anchor[key] = this.layoutDoc[key];
+                }
+        })
 
         this.addDocument(anchor);
         return anchor;
diff --git a/src/client/views/nodes/DataVizBox/components/Histogram.tsx b/src/client/views/nodes/DataVizBox/components/Histogram.tsx
index 740ee6e3a..c6e3b4cd1 100644
--- a/src/client/views/nodes/DataVizBox/components/Histogram.tsx
+++ b/src/client/views/nodes/DataVizBox/components/Histogram.tsx
@@ -443,6 +443,7 @@ export class Histogram extends React.Component<HistogramProps> {
     };
 
     render() {
+        this.componentDidMount();
         var curSelectedBarName;
         var titleAccessor: any='';
         if (this.props.axes.length==2) titleAccessor = StrCast(this.props.layoutDoc['histogram-title-'+this.props.axes[0]+'-'+this.props.axes[1]]);
-- 
cgit v1.2.3-70-g09d2


From 49fa6721e2a7af21db5da339cd3c7d90d3e8bf8b Mon Sep 17 00:00:00 2001
From: srichman333 <sarah_n_richman@brown.edu>
Date: Wed, 2 Aug 2023 12:37:52 -0400
Subject: linking title bug fix

---
 src/client/views/nodes/DataVizBox/DataVizBox.tsx   |  5 ++--
 .../nodes/DataVizBox/components/Histogram.tsx      | 11 ++++---
 .../nodes/DataVizBox/components/LineChart.tsx      | 12 ++++----
 .../views/nodes/DataVizBox/components/PieChart.tsx | 35 +++++++++++++++++-----
 4 files changed, 40 insertions(+), 23 deletions(-)

diff --git a/src/client/views/nodes/DataVizBox/DataVizBox.tsx b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
index f167346de..9a4de3c36 100644
--- a/src/client/views/nodes/DataVizBox/DataVizBox.tsx
+++ b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
@@ -70,8 +70,7 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         const changedAxes = this.axes.join('') !== StrListCast(data.presDataVizAxes).join('') && (this.layoutDoc._data_vizAxes = new List<string>(StrListCast(data.presDataVizAxes)));
         Object.keys(this.layoutDoc).map(key => {
             if (key.startsWith('histogram-title') || key.startsWith('histogramBarColors') || key.startsWith('defaultHistogramColor')
-                || key.startsWith('lineChart-title') || key.startsWith('pieChart-title')){
-                    console.log(key)
+                || key.startsWith('lineChart-title') || key.startsWith('pieChart-title') || key.startsWith('pieSliceColors')){
                     this.layoutDoc['_'+key] = data[key];
                 }
         })
@@ -97,7 +96,7 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         anchor.presDataVizAxes = this.axes.length ? new List<string>(this.axes) : undefined;
         Object.keys(this.layoutDoc).map(key => {
             if (key.startsWith('histogram-title') || key.startsWith('histogramBarColors') || key.startsWith('defaultHistogramColor')
-                || key.startsWith('lineChart-title') || key.startsWith('pieChart-title')){
+                || key.startsWith('lineChart-title') || key.startsWith('pieChart-title') || key.startsWith('pieSliceColors')){
                     anchor[key] = this.layoutDoc[key];
                 }
         })
diff --git a/src/client/views/nodes/DataVizBox/components/Histogram.tsx b/src/client/views/nodes/DataVizBox/components/Histogram.tsx
index c6e3b4cd1..e5e3ccd53 100644
--- a/src/client/views/nodes/DataVizBox/components/Histogram.tsx
+++ b/src/client/views/nodes/DataVizBox/components/Histogram.tsx
@@ -446,9 +446,9 @@ export class Histogram extends React.Component<HistogramProps> {
         this.componentDidMount();
         var curSelectedBarName;
         var titleAccessor: any='';
-        if (this.props.axes.length==2) titleAccessor = StrCast(this.props.layoutDoc['histogram-title-'+this.props.axes[0]+'-'+this.props.axes[1]]);
-        else if (this.props.axes.length>0) titleAccessor = StrCast(this.props.layoutDoc['histogram-title-'+this.props.axes[0]]);
-        const title = titleAccessor? titleAccessor : this.defaultGraphTitle;
+        if (this.props.axes.length==2) titleAccessor = 'histogram-title-'+this.props.axes[0]+'-'+this.props.axes[1];
+        else if (this.props.axes.length>0) titleAccessor = 'histogram-title-'+this.props.axes[0];
+        if (!this.props.layoutDoc[titleAccessor]) this.props.layoutDoc[titleAccessor] = this.defaultGraphTitle;
         var selected: string;
         if (this._currSelected){
             curSelectedBarName = StrCast(this._currSelected![this.props.axes[0]].replace(/\$/g, '').replace(/\%/g, '').replace(/\</g, ''))
@@ -465,9 +465,8 @@ export class Histogram extends React.Component<HistogramProps> {
             <div className="chart-container" >
                 <div className="graph-title"> 
                     <EditableText
-                        val={title}
-                        setVal={action(val => {this.props.axes.length>1? this.props.layoutDoc['histogram-title-'+this.props.axes[0]+"-"+this.props.axes[1]] = val as string
-                            : this.props.layoutDoc['histogram-title-'+this.props.axes[0]] = val as string})}
+                        val={StrCast(this.props.layoutDoc[titleAccessor])}
+                        setVal={action(val => this.props.layoutDoc[titleAccessor] = val as string)}
                         color={"black"}
                         size={Size.LARGE}
                         fillWidth
diff --git a/src/client/views/nodes/DataVizBox/components/LineChart.tsx b/src/client/views/nodes/DataVizBox/components/LineChart.tsx
index 0142e96ad..0e699bb99 100644
--- a/src/client/views/nodes/DataVizBox/components/LineChart.tsx
+++ b/src/client/views/nodes/DataVizBox/components/LineChart.tsx
@@ -350,19 +350,19 @@ export class LineChart extends React.Component<LineChartProps> {
     }
 
     render() {
+        this.componentDidMount();
         var titleAccessor:any = '';
-        if (this.props.axes.length==2) titleAccessor = StrCast(this.props.layoutDoc['lineChart-title-'+this.props.axes[0]+'-'+this.props.axes[1]]);
-        else if (this.props.axes.length>0) titleAccessor = StrCast(this.props.layoutDoc['lineChart-title-'+this.props.axes[0]]);
-        const title = titleAccessor? titleAccessor : this.defaultGraphTitle;
+        if (this.props.axes.length==2) titleAccessor = 'lineChart-title-'+this.props.axes[0]+'-'+this.props.axes[1];
+        else if (this.props.axes.length>0) titleAccessor = 'lineChart-title-'+this.props.axes[0];
+        if (!this.props.layoutDoc[titleAccessor]) this.props.layoutDoc[titleAccessor] = this.defaultGraphTitle;
         const selectedPt = this._currSelected ? `x: ${this._currSelected.x} y: ${this._currSelected.y}` : 'none';
         return (
             this.props.axes.length >= 2 ? (
             <div className="chart-container" >
                 <div className="graph-title"> 
                     <EditableText
-                        val={title}
-                        setVal={action(val => {this.props.axes.length>1? this.props.layoutDoc['lineChart-title-'+this.props.axes[0]+"-"+this.props.axes[1]] = val as string
-                            : this.props.layoutDoc['lineChart-title-'+this.props.axes[0]] = val as string})}
+                        val={StrCast(this.props.layoutDoc[titleAccessor])}
+                        setVal={action(val => this.props.layoutDoc[titleAccessor] = val as string)}
                         color={"black"}
                         size={Size.LARGE}
                         fillWidth
diff --git a/src/client/views/nodes/DataVizBox/components/PieChart.tsx b/src/client/views/nodes/DataVizBox/components/PieChart.tsx
index f0c27866d..98c79f95a 100644
--- a/src/client/views/nodes/DataVizBox/components/PieChart.tsx
+++ b/src/client/views/nodes/DataVizBox/components/PieChart.tsx
@@ -348,10 +348,27 @@ export class PieChart extends React.Component<PieChartProps> {
             .enter()
             .append("g")
         arcs.append("path")
-            .attr("fill", (data, i)=>{ return this.props.layoutDoc['pieSliceColors-'+data.data.valueOf()]? StrCast(this.props.layoutDoc['pieSliceColors-'+data.data.valueOf()]) : d3.schemeSet3[i]? d3.schemeSet3[i]: d3.schemeSet3[i%12] })
+            .attr("fill", (d, i)=>{ 
+                var possibleDataPoints = pieDataSet.filter((each: { [x: string]: any | { valueOf(): number; }; }) => {
+                    try {
+                        return each[percentField].replace(/[^0-9]/g,"")==d.data.toString().replace(/[^0-9]/g,"")
+                    } catch (error) {
+                        return each[percentField]==d.data
+                    }})
+                var dataPoint;
+                if (possibleDataPoints.length==1) dataPoint = possibleDataPoints[0];
+                else{
+                    dataPoint = possibleDataPoints[trackDuplicates[d.data.toString()]]
+                    trackDuplicates[d.data.toString()] = trackDuplicates[d.data.toString()] + 1;
+                }
+                var accessByName = descriptionField? dataPoint[descriptionField] : dataPoint[percentField];
+                return this.props.layoutDoc['pieSliceColors-'+accessByName]? StrCast(this.props.layoutDoc['pieSliceColors-'+accessByName]) : d3.schemeSet3[i]? d3.schemeSet3[i]: d3.schemeSet3[i%12] })
             .attr("class", 'slice')
             .attr("d", arc)
             .on('click', onPointClick)
+
+        trackDuplicates = {};
+        data.forEach((eachData: any) => !trackDuplicates[eachData]? trackDuplicates[eachData] = 0: null)
         arcs.append("text")
             .attr("transform",function(d){ 
                 var centroid = arc.centroid(d as unknown as d3.DefaultArcObject)
@@ -383,12 +400,15 @@ export class PieChart extends React.Component<PieChartProps> {
     };
 
     render() {
+        this.componentDidMount();
         var titleAccessor: any='';
-        if (this.props.axes.length==2) titleAccessor = StrCast(this.props.layoutDoc['pieChart-title-'+this.props.axes[0]+'-'+this.props.axes[1]]);
-        else if (this.props.axes.length>0) titleAccessor = StrCast(this.props.layoutDoc['pieChart-title-'+this.props.axes[0]]);
-        const title = titleAccessor? titleAccessor : this.defaultGraphTitle;
+        if (this.props.axes.length==2) titleAccessor = 'pieChart-title-'+this.props.axes[0]+'-'+this.props.axes[1];
+        else if (this.props.axes.length>0) titleAccessor = 'pieChart-title-'+this.props.axes[0];
+        if (!this.props.layoutDoc[titleAccessor]) this.props.layoutDoc[titleAccessor] = this.defaultGraphTitle;
         var selected: string;
+        var curSelectedSliceName;
         if (this._currSelected){
+            curSelectedSliceName = StrCast(this._currSelected![this.props.axes[0]].replace(/\$/g, '').replace(/\%/g, '').replace(/\</g, ''))
             selected = '{ ';
             Object.keys(this._currSelected).map(key => {
                 key!=''? selected += key + ': ' + this._currSelected[key] + ', ': '';
@@ -402,9 +422,8 @@ export class PieChart extends React.Component<PieChartProps> {
             <div className="chart-container">
                 <div className="graph-title"> 
                     <EditableText
-                        val={title}
-                        setVal={action(val => {this.props.axes.length>1? this.props.layoutDoc['pieChart-title-'+this.props.axes[0]+"-"+this.props.axes[1]] = val as string
-                            : this.props.layoutDoc['pieChart-title-'+this.props.axes[0]] = val as string})}
+                        val={StrCast(this.props.layoutDoc[titleAccessor])}
+                        setVal={action(val => this.props.layoutDoc[titleAccessor] = val as string)}
                         color={"black"}
                         size={Size.LARGE}
                         fillWidth
@@ -418,7 +437,7 @@ export class PieChart extends React.Component<PieChartProps> {
                             tooltip={'Change Slice Color'} 
                             type={Type.SEC} 
                             icon={<FaFillDrip/>}
-                            selectedColor={this.curSliceSelected.attr("fill")}
+                            selectedColor={this.props.layoutDoc['pieSliceColors-'+curSelectedSliceName]? this.props.layoutDoc['pieSliceColors-'+curSelectedSliceName] : this.curSliceSelected.attr("fill")}
                             setSelectedColor={color => this.changeSelectedColor(color)}
                             size={Size.XSMALL}
                         />
-- 
cgit v1.2.3-70-g09d2


From e94534bc9f9dd44980e7574b860ea0b7912371bd Mon Sep 17 00:00:00 2001
From: srichman333 <sarah_n_richman@brown.edu>
Date: Wed, 2 Aug 2023 13:00:18 -0400
Subject: linking default histogram color bug fix

---
 src/client/views/nodes/DataVizBox/components/Histogram.tsx | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/client/views/nodes/DataVizBox/components/Histogram.tsx b/src/client/views/nodes/DataVizBox/components/Histogram.tsx
index e5e3ccd53..46a264386 100644
--- a/src/client/views/nodes/DataVizBox/components/Histogram.tsx
+++ b/src/client/views/nodes/DataVizBox/components/Histogram.tsx
@@ -424,7 +424,7 @@ export class Histogram extends React.Component<HistogramProps> {
                         return height - y(d.length)})
               .attr("width", eachRectWidth)
               .attr("class", 'histogram-bar')
-              .attr("fill", (d)=>{ return this.props.layoutDoc['histogramBarColors-'+d[0]]? StrCast(this.props.layoutDoc['histogramBarColors-'+d[0]]) : this.props.layoutDoc.defaultHistogramColor? StrCast(this.props.layoutDoc.defaultHistogramColor): '#69b3a2'})
+              .attr("fill", (d)=>{ return this.props.layoutDoc['histogramBarColors-'+d[0]]? StrCast(this.props.layoutDoc['histogramBarColors-'+d[0]]) : StrCast(this.props.layoutDoc['defaultHistogramColor'])})
     };
 
     @action changeSelectedColor = (color: string) => {
@@ -439,16 +439,16 @@ export class Histogram extends React.Component<HistogramProps> {
             else return true;
         })
         defaultColorBars.attr("fill", color);
-        this.props.layoutDoc.defaultHistogramColor = color;
+        this.props.layoutDoc['defaultHistogramColor'] = color;
     };
 
     render() {
-        this.componentDidMount();
         var curSelectedBarName;
         var titleAccessor: any='';
         if (this.props.axes.length==2) titleAccessor = 'histogram-title-'+this.props.axes[0]+'-'+this.props.axes[1];
         else if (this.props.axes.length>0) titleAccessor = 'histogram-title-'+this.props.axes[0];
         if (!this.props.layoutDoc[titleAccessor]) this.props.layoutDoc[titleAccessor] = this.defaultGraphTitle;
+        if (!this.props.layoutDoc['defaultHistogramColor']) this.props.layoutDoc['defaultHistogramColor'] = '#69b3a2';
         var selected: string;
         if (this._currSelected){
             curSelectedBarName = StrCast(this._currSelected![this.props.axes[0]].replace(/\$/g, '').replace(/\%/g, '').replace(/\</g, ''))
@@ -460,6 +460,8 @@ export class Histogram extends React.Component<HistogramProps> {
             selected += ' }';
         }
         else selected = 'none';
+
+        this.componentDidMount();
         return (
             this.props.axes.length >= 1 ? (
             <div className="chart-container" >
@@ -476,7 +478,7 @@ export class Histogram extends React.Component<HistogramProps> {
                         tooltip={'Change Default Bar Color'} 
                         type={Type.SEC} 
                         icon={<FaFillDrip/>}
-                        selectedColor={this.props.layoutDoc.defaultHistogramColor? StrCast(this.props.layoutDoc.defaultHistogramColor): '#69b3a2'}
+                        selectedColor={StrCast(this.props.layoutDoc['defaultHistogramColor'])}
                         setSelectedColor={color => this.changeDefaultColor(color)}
                         size={Size.XSMALL}
                     />
-- 
cgit v1.2.3-70-g09d2


From 9fc748e6b09783f6bb375a68d10040141ac502f2 Mon Sep 17 00:00:00 2001
From: srichman333 <sarah_n_richman@brown.edu>
Date: Wed, 2 Aug 2023 15:02:26 -0400
Subject: last

---
 .../views/nodes/DataVizBox/components/Histogram.tsx    | 18 ++++++++++++++++--
 .../views/nodes/DataVizBox/components/PieChart.tsx     |  8 +++++++-
 2 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/src/client/views/nodes/DataVizBox/components/Histogram.tsx b/src/client/views/nodes/DataVizBox/components/Histogram.tsx
index 46a264386..68cb768d1 100644
--- a/src/client/views/nodes/DataVizBox/components/Histogram.tsx
+++ b/src/client/views/nodes/DataVizBox/components/Histogram.tsx
@@ -45,6 +45,7 @@ export class Histogram extends React.Component<HistogramProps> {
     private maxBins = 15; // maximum number of bins that is readable on a normal sized doc
     @observable _currSelected: any | undefined = undefined;
     private curBarSelected: any = undefined;
+    private selectTry: any = undefined;
     // TODO: nda - some sort of mapping that keeps track of the annotated points so we can easily remove when annotations list updates
 
     @computed get _histogramData() {
@@ -376,23 +377,32 @@ export class Histogram extends React.Component<HistogramProps> {
                       && showSelected[yAxisTitle]==this._currSelected![yAxisTitle])
                         : false;
                     this._currSelected = sameAsCurrent? undefined: showSelected;
+                    this.selectTry = sameAsCurrent? undefined: d;
                     return true
                 }
                 return false;
             });
+            // console.log(this.curBarSelected.groups[0][0].data==selected)
             const elements = document.querySelectorAll('.histogram-bar');
             for (let i = 0; i < elements.length; i++) {
                 elements[i].classList.remove('hover');
             }
             if (!sameAsCurrent!) selected.attr('class', 'histogram-bar hover');
-            if (sameAsCurrent!) this.curBarSelected = undefined;
+            if (sameAsCurrent!) {
+                selected.attr('class', 'histogram-bar')
+                this.curBarSelected = undefined;
+            }
             else {
                 selected.attr('class', 'histogram-bar hover')
+                selected.attr('stroke', 'blue')
                 this.curBarSelected = selected;
             }
+            console.log(this._currSelected)
+            console.log(this.selectTry)
         });
         svg.on('click', onPointClick);
 
+        var selected = this.selectTry;
         svg.append("text")
             .attr("transform", "translate(" + (width/2) + " ," + (height+40) + ")")
             .style("text-anchor", "middle")
@@ -423,7 +433,11 @@ export class Histogram extends React.Component<HistogramProps> {
                     : function(d) { 
                         return height - y(d.length)})
               .attr("width", eachRectWidth)
-              .attr("class", 'histogram-bar')
+              .attr("class", selected? 
+                    function(d) {
+                        console.log(d[0]==selected[0], d)
+                        return (selected && selected[0]==d[0])? 'histogram-bar hover' : 'histogram-bar';
+                    }: function(d) {return 'histogram-bar'})
               .attr("fill", (d)=>{ return this.props.layoutDoc['histogramBarColors-'+d[0]]? StrCast(this.props.layoutDoc['histogramBarColors-'+d[0]]) : StrCast(this.props.layoutDoc['defaultHistogramColor'])})
     };
 
diff --git a/src/client/views/nodes/DataVizBox/components/PieChart.tsx b/src/client/views/nodes/DataVizBox/components/PieChart.tsx
index 98c79f95a..d3d16aa4c 100644
--- a/src/client/views/nodes/DataVizBox/components/PieChart.tsx
+++ b/src/client/views/nodes/DataVizBox/components/PieChart.tsx
@@ -43,6 +43,7 @@ export class PieChart extends React.Component<PieChartProps> {
     private byCategory: boolean = true; // whether the data is organized by category or by specified number percentages/ratios
     @observable _currSelected: any | undefined = undefined;
     private curSliceSelected: any = undefined;
+    private selectedTry: any = undefined;
     // TODO: nda - some sort of mapping that keeps track of the annotated points so we can easily remove when annotations list updates
 
     @computed get _piechartData() {
@@ -328,6 +329,7 @@ export class PieChart extends React.Component<PieChartProps> {
                         : 
                         this._currSelected===showSelected;
                     this._currSelected = sameAsCurrent? undefined: showSelected;
+                    this.selectedTry = sameAsCurrent? undefined: d;
                     return true;
                 }
                 return false;
@@ -343,6 +345,7 @@ export class PieChart extends React.Component<PieChartProps> {
             }
         });
 
+        var selected = this.selectedTry;
         var arcs = g.selectAll("arc")
             .data(pie(data))
             .enter()
@@ -363,7 +366,10 @@ export class PieChart extends React.Component<PieChartProps> {
                 }
                 var accessByName = descriptionField? dataPoint[descriptionField] : dataPoint[percentField];
                 return this.props.layoutDoc['pieSliceColors-'+accessByName]? StrCast(this.props.layoutDoc['pieSliceColors-'+accessByName]) : d3.schemeSet3[i]? d3.schemeSet3[i]: d3.schemeSet3[i%12] })
-            .attr("class", 'slice')
+                .attr("class", selected? 
+                function(d) {
+                    return (selected && d.startAngle==selected.startAngle && d.endAngle==selected.endAngle)? 'slice hover' : 'slice';
+                }: function(d) {return 'slice'})
             .attr("d", arc)
             .on('click', onPointClick)
 
-- 
cgit v1.2.3-70-g09d2


From de064a6b0acf7f3dff04c579afc2562d782472d2 Mon Sep 17 00:00:00 2001
From: srichman333 <sarah_n_richman@brown.edu>
Date: Wed, 2 Aug 2023 17:50:25 -0400
Subject: selected fix

---
 .../nodes/DataVizBox/components/Histogram.tsx      | 26 +++++-----------------
 .../views/nodes/DataVizBox/components/PieChart.tsx | 15 ++++---------
 2 files changed, 9 insertions(+), 32 deletions(-)

diff --git a/src/client/views/nodes/DataVizBox/components/Histogram.tsx b/src/client/views/nodes/DataVizBox/components/Histogram.tsx
index 68cb768d1..89dcf87db 100644
--- a/src/client/views/nodes/DataVizBox/components/Histogram.tsx
+++ b/src/client/views/nodes/DataVizBox/components/Histogram.tsx
@@ -45,7 +45,7 @@ export class Histogram extends React.Component<HistogramProps> {
     private maxBins = 15; // maximum number of bins that is readable on a normal sized doc
     @observable _currSelected: any | undefined = undefined;
     private curBarSelected: any = undefined;
-    private selectTry: any = undefined;
+    private selectedData: any = undefined;
     // TODO: nda - some sort of mapping that keeps track of the annotated points so we can easily remove when annotations list updates
 
     @computed get _histogramData() {
@@ -377,32 +377,17 @@ export class Histogram extends React.Component<HistogramProps> {
                       && showSelected[yAxisTitle]==this._currSelected![yAxisTitle])
                         : false;
                     this._currSelected = sameAsCurrent? undefined: showSelected;
-                    this.selectTry = sameAsCurrent? undefined: d;
+                    this.selectedData = sameAsCurrent? undefined: d;
                     return true
                 }
                 return false;
             });
-            // console.log(this.curBarSelected.groups[0][0].data==selected)
-            const elements = document.querySelectorAll('.histogram-bar');
-            for (let i = 0; i < elements.length; i++) {
-                elements[i].classList.remove('hover');
-            }
-            if (!sameAsCurrent!) selected.attr('class', 'histogram-bar hover');
-            if (sameAsCurrent!) {
-                selected.attr('class', 'histogram-bar')
-                this.curBarSelected = undefined;
-            }
-            else {
-                selected.attr('class', 'histogram-bar hover')
-                selected.attr('stroke', 'blue')
-                this.curBarSelected = selected;
-            }
-            console.log(this._currSelected)
-            console.log(this.selectTry)
+            if (sameAsCurrent!) this.curBarSelected = undefined;
+            else this.curBarSelected = selected;
         });
         svg.on('click', onPointClick);
 
-        var selected = this.selectTry;
+        var selected = this.selectedData;
         svg.append("text")
             .attr("transform", "translate(" + (width/2) + " ," + (height+40) + ")")
             .style("text-anchor", "middle")
@@ -435,7 +420,6 @@ export class Histogram extends React.Component<HistogramProps> {
               .attr("width", eachRectWidth)
               .attr("class", selected? 
                     function(d) {
-                        console.log(d[0]==selected[0], d)
                         return (selected && selected[0]==d[0])? 'histogram-bar hover' : 'histogram-bar';
                     }: function(d) {return 'histogram-bar'})
               .attr("fill", (d)=>{ return this.props.layoutDoc['histogramBarColors-'+d[0]]? StrCast(this.props.layoutDoc['histogramBarColors-'+d[0]]) : StrCast(this.props.layoutDoc['defaultHistogramColor'])})
diff --git a/src/client/views/nodes/DataVizBox/components/PieChart.tsx b/src/client/views/nodes/DataVizBox/components/PieChart.tsx
index d3d16aa4c..d01d4429f 100644
--- a/src/client/views/nodes/DataVizBox/components/PieChart.tsx
+++ b/src/client/views/nodes/DataVizBox/components/PieChart.tsx
@@ -43,7 +43,7 @@ export class PieChart extends React.Component<PieChartProps> {
     private byCategory: boolean = true; // whether the data is organized by category or by specified number percentages/ratios
     @observable _currSelected: any | undefined = undefined;
     private curSliceSelected: any = undefined;
-    private selectedTry: any = undefined;
+    private selectedData: any = undefined;
     // TODO: nda - some sort of mapping that keeps track of the annotated points so we can easily remove when annotations list updates
 
     @computed get _piechartData() {
@@ -329,23 +329,16 @@ export class PieChart extends React.Component<PieChartProps> {
                         : 
                         this._currSelected===showSelected;
                     this._currSelected = sameAsCurrent? undefined: showSelected;
-                    this.selectedTry = sameAsCurrent? undefined: d;
+                    this.selectedData = sameAsCurrent? undefined: d;
                     return true;
                 }
                 return false;
             });
-            const elements = document.querySelectorAll('.slice');
-            for (let i = 0; i < elements.length; i++) {
-                elements[i].classList.remove('hover');
-            }
             if (sameAsCurrent!) this.curSliceSelected = undefined;
-            else {
-                selected.attr('class', 'slice hover') 
-                this.curSliceSelected = selected;
-            }
+            else  this.curSliceSelected = selected;
         });
 
-        var selected = this.selectedTry;
+        var selected = this.selectedData;
         var arcs = g.selectAll("arc")
             .data(pie(data))
             .enter()
-- 
cgit v1.2.3-70-g09d2


From 23e0ee2dcad8df2bc3467647e05c433f27787d54 Mon Sep 17 00:00:00 2001
From: srichman333 <sarah_n_richman@brown.edu>
Date: Thu, 3 Aug 2023 14:38:47 -0400
Subject: table fixes (selected by guid not extra row + ui changes)

---
 src/client/views/nodes/DataVizBox/DataVizBox.tsx   |  17 +-
 .../views/nodes/DataVizBox/components/Chart.scss   |   1 +
 .../nodes/DataVizBox/components/Histogram.tsx      |  56 +---
 .../nodes/DataVizBox/components/LineChart.tsx      |   4 +-
 .../views/nodes/DataVizBox/components/PieChart.tsx |  47 +---
 .../views/nodes/DataVizBox/components/TableBox.tsx | 310 +++++++--------------
 6 files changed, 135 insertions(+), 300 deletions(-)

diff --git a/src/client/views/nodes/DataVizBox/DataVizBox.tsx b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
index 9a4de3c36..80586d7c7 100644
--- a/src/client/views/nodes/DataVizBox/DataVizBox.tsx
+++ b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
@@ -1,9 +1,9 @@
-import { action, computed, observable, ObservableMap, ObservableSet } from 'mobx';
+import { action, computed, ObservableMap, ObservableSet } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
 import { Doc, StrListCast } from '../../../../fields/Doc';
 import { List } from '../../../../fields/List';
-import { Cast, CsvCast, NumCast, StrCast } from '../../../../fields/Types';
+import { Cast, CsvCast, StrCast } from '../../../../fields/Types';
 import { CsvField } from '../../../../fields/URLField';
 import { Docs } from '../../../documents/Documents';
 import { ViewBoxAnnotatableComponent } from '../../DocComponent';
@@ -15,6 +15,7 @@ import './DataVizBox.scss';
 import { Histogram } from './components/Histogram';
 import { PieChart } from './components/PieChart';
 import { Toggle, ToggleType, Type } from 'browndash-components';
+import { Utils } from '../../../../Utils';
 
 export enum DataVizView {
     TABLE = 'table',
@@ -35,9 +36,11 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
     // @observable private pairs: { [key: string]: FieldResult }[] = [];
     static pairSet = new ObservableMap<string, { [key: string]: string }[]>();
     @computed.struct get pairs() {
-        return DataVizBox.pairSet.get(CsvCast(this.rootDoc[this.fieldKey]).url.href);
+        var pairs = DataVizBox.pairSet.get(CsvCast(this.rootDoc[this.fieldKey]).url.href);
+        pairs?.map(pair => {if (!pair.guid) pair.guid = Utils.GenerateGuid()})
+        return pairs;
     }
-    private _chartRenderer: LineChart | undefined;
+    private _chartRenderer: LineChart | Histogram | PieChart | undefined;
     // // another way would be store a schema that defines the type of data we are expecting from an imported doc
 
     // method1() {
@@ -116,10 +119,10 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         const margin = { top: 10, right: 25, bottom: 50, left: 25 };
         if (!this.pairs) return 'no data';
         switch (this.dataVizView) {
-            case DataVizView.TABLE:     return <TableBox pairs={this.pairs} axes={this.axes} height={height} width={width} margin={margin} rootDoc={this.rootDoc} docView={this.props.DocumentView} selectAxes={this.selectAxes}/>;
+            case DataVizView.TABLE:     return <TableBox layoutDoc={this.layoutDoc} pairs={this.pairs} axes={this.axes} height={height} width={width} margin={margin} rootDoc={this.rootDoc} docView={this.props.DocumentView} selectAxes={this.selectAxes}/>;
             case DataVizView.LINECHART: return <LineChart layoutDoc={this.layoutDoc} 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 layoutDoc={this.layoutDoc} 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 layoutDoc={this.layoutDoc} 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 layoutDoc={this.layoutDoc} 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.PIECHART: return <PieChart layoutDoc={this.layoutDoc} 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} />;
         }
     }
     @computed get dataUrl() {
diff --git a/src/client/views/nodes/DataVizBox/components/Chart.scss b/src/client/views/nodes/DataVizBox/components/Chart.scss
index 6c87241b8..996183cb8 100644
--- a/src/client/views/nodes/DataVizBox/components/Chart.scss
+++ b/src/client/views/nodes/DataVizBox/components/Chart.scss
@@ -77,4 +77,5 @@
 }
 .table-container{
     overflow: scroll;
+    margin: 10px;
 }
\ No newline at end of file
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]){
diff --git a/src/client/views/nodes/DataVizBox/components/LineChart.tsx b/src/client/views/nodes/DataVizBox/components/LineChart.tsx
index 0e699bb99..da5f7dbbb 100644
--- a/src/client/views/nodes/DataVizBox/components/LineChart.tsx
+++ b/src/client/views/nodes/DataVizBox/components/LineChart.tsx
@@ -2,7 +2,7 @@ import { action, computed, IReactionDisposer, observable, reaction } from 'mobx'
 import { observer } from 'mobx-react';
 import * as React from 'react';
 import * as d3 from 'd3';
-import { Doc, DocListCast } from '../../../../../fields/Doc';
+import { Doc, DocListCast, StrListCast } from '../../../../../fields/Doc';
 import { Id } from '../../../../../fields/FieldSymbols';
 import { List } from '../../../../../fields/List';
 import { listSpec } from '../../../../../fields/Schema';
@@ -51,7 +51,7 @@ export class LineChart extends React.Component<LineChartProps> {
     @computed get _lineChartData() {
         if (this.props.axes.length <= 1) return [];
         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 => ({ x: Number(pair[this.props.axes[0]]), y: Number(pair[this.props.axes[1]]) }))
             .sort((a, b) => (a.x < b.x ? -1 : 1));
     }
diff --git a/src/client/views/nodes/DataVizBox/components/PieChart.tsx b/src/client/views/nodes/DataVizBox/components/PieChart.tsx
index d01d4429f..f3a72a53b 100644
--- a/src/client/views/nodes/DataVizBox/components/PieChart.tsx
+++ b/src/client/views/nodes/DataVizBox/components/PieChart.tsx
@@ -1,15 +1,13 @@
 import { observer } from "mobx-react";
-import { Doc, DocListCast } 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";
@@ -52,7 +50,7 @@ export class PieChart extends React.Component<PieChartProps> {
             var ax0 = this.props.axes[0];
             if (/\d/.test(this.props.pairs[0][ax0])){ this.byCategory = false }
             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]])}))
         };
 
@@ -60,13 +58,8 @@ export class PieChart extends React.Component<PieChartProps> {
         var ax1 = this.props.axes[1];
         if (/\d/.test(this.props.pairs[0][ax0])) { this.byCategory = false; }
         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];
@@ -178,27 +171,16 @@ export class PieChart extends React.Component<PieChartProps> {
     }
 
     @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: 'piechart doc selection' + this._currSelected?.x,
+            title: 'piechart 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;
     };
 
@@ -210,19 +192,6 @@ export class PieChart extends React.Component<PieChartProps> {
         return this.props.width - this.props.margin.left - this.props.margin.right;
     }
 
-    setupTooltip() {
-        return d3
-            .select(this._piechartRef.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) {
@@ -322,7 +291,7 @@ export class PieChart extends React.Component<PieChartProps> {
                 if (Math.min(p4[1], p1[1])<=pointer[1] && pointer[1]<=Math.max(p4[1], p1[1])){
                     if (pointer[0] <= (pointer[1]-p4[1])*(p1[0]-p4[0])/(p1[1]-p4[1])+p4[0]) lineCrossCount++; }
                 if (lineCrossCount % 2 != 0) {
-                    var showSelected = this.byCategory? pieDataSet[index] : this.props.pairs[index];
+                    var showSelected = this.byCategory? pieDataSet[index] : this._piechartData[index];
                     sameAsCurrent = (this.byCategory && this._currSelected)? 
                         (showSelected[Object.keys(showSelected)[0]]==this._currSelected![Object.keys(showSelected)[0]] 
                       && showSelected[Object.keys(showSelected)[1]]==this._currSelected![Object.keys(showSelected)[1]])
diff --git a/src/client/views/nodes/DataVizBox/components/TableBox.tsx b/src/client/views/nodes/DataVizBox/components/TableBox.tsx
index 64c6dc940..5653adbce 100644
--- a/src/client/views/nodes/DataVizBox/components/TableBox.tsx
+++ b/src/client/views/nodes/DataVizBox/components/TableBox.tsx
@@ -1,21 +1,20 @@
-import { action, computed, observable } from 'mobx';
+import { action, computed, } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
-import { Doc } from '../../../../../fields/Doc';
-import { Id } from '../../../../../fields/FieldSymbols';
+import { Doc, StrListCast } from '../../../../../fields/Doc';
 import { List } from '../../../../../fields/List';
-import { emptyFunction, returnFalse, setupMoveUpEvents, Utils } from '../../../../../Utils';
+import { emptyFunction, setupMoveUpEvents, Utils } from '../../../../../Utils';
 import { DragManager } from '../../../../util/DragManager';
 import { DocumentView } from '../../DocumentView';
 import { DataVizView } from '../DataVizBox';
 import { LinkManager } from '../../../../util/LinkManager';
 import { Cast, DocCast } from '../../../../../fields/Types';
-import { EditableText, Size, Type } from 'browndash-components';
 import './Chart.scss';
 import { listSpec } from '../../../../../fields/Schema';
 
 interface TableBoxProps {
     rootDoc: Doc;
+    layoutDoc: Doc;
     pairs: { [key: string]: any }[];
     selectAxes: (axes: string[]) => void;
     axes: string[];
@@ -32,13 +31,10 @@ interface TableBoxProps {
 
 @observer
 export class TableBox extends React.Component<TableBoxProps> {
-    @observable editableHeaders = this.columns;
-    @observable editableCells = this._tableData;
 
     @computed get _tableData() {
         if (this.incomingLinks.length! <= 0) return this.props.pairs;
-        /// StrListCast(this.incomingLinks[0].anchor_1.selected) ==> list of guids that the parent has selected
-        return this.props.pairs?.filter(pair => (Array.from(Object.keys(pair)).some(key => pair[key] && key.startsWith('select'))))
+        return this.props.pairs?.filter(pair => this.incomingLinks[0]!.selected && StrListCast(this.incomingLinks[0].selected).includes(pair.guid))
     }
 
     @computed get incomingLinks() {
@@ -49,204 +45,110 @@ export class TableBox extends React.Component<TableBoxProps> {
     }
 
     @computed get columns() {
-        // return this.props.pairs.length ? Array.from(Object.keys(this.props.pairs[0])) : [];
-        return this._tableData.length ? Array.from(Object.keys(this._tableData[0])) : [];
+        return this._tableData.length ? Array.from(Object.keys(this._tableData[0])).filter(header => header!='guid' && header!='') : [];
     }
 
-    // render() {
-    //     return (
-    //         <div className="table-container" style={{height: this.props.height+this.props.margin.top+this.props.margin.bottom}}>
-    //             <table className="table">
-    //                 <thead>
-    //                     <tr className="table-row">
-    //                         {this.editableHeaders
-    //                             .filter(col => !col.startsWith('select'))
-    //                             .map(col => {
-    //                                 const header = React.createRef<HTMLElement>();
-    //                                 const displayColName = col;
-    //                                 return (
-    //                                     <th
-    //                                         key={this.editableHeaders.indexOf(col)}
-    //                                         ref={header as any}
-    //                                         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 => {
-    //                                             const downX = e.clientX;
-    //                                             const downY = e.clientY;
-    //                                             setupMoveUpEvents(
-    //                                                 {},
-    //                                                 e,
-    //                                                 e => {
-    //                                                     const sourceAnchorCreator = () => this.props.docView?.()!.rootDoc!;
-    //                                                     const targetCreator = (annotationOn: Doc | undefined) => {
-    //                                                         const embedding = Doc.MakeEmbedding(this.props.docView?.()!.rootDoc!);
-    //                                                         embedding._dataVizView = DataVizView.LINECHART;
-    //                                                         embedding._data_vizAxes = new List<string>([col, col]);
-    //                                                         embedding._draggedFrom = this.props.docView?.()!.rootDoc!;
-    //                                                         embedding.annotationOn = annotationOn; //this.props.docView?.()!.rootDoc!;
-    //                                                         return embedding;
-    //                                                     };
-    //                                                     if (this.props.docView?.() && !Utils.isClick(e.clientX, e.clientY, downX, downY, Date.now())) {
-    //                                                         DragManager.StartAnchorAnnoDrag([header.current!], new DragManager.AnchorAnnoDragData(this.props.docView()!, sourceAnchorCreator, targetCreator), downX, downY, {
-    //                                                             dragComplete: e => {
-    //                                                                 if (!e.aborted && e.annoDragData && e.annoDragData.linkSourceDoc && e.annoDragData.dropDocument && e.linkDocument) {
-    //                                                                     e.linkDocument.link_displayLine = true;
-    //                                                                     e.linkDocument.link_matchEmbeddings = true;
-    //                                                                     // e.annoDragData.linkSourceDoc.followLinkToggle = e.annoDragData.dropDocument.annotationOn === this.props.rootDoc;
-    //                                                                     // e.annoDragData.linkSourceDoc.followLinkZoom = false;
-    //                                                                 }
-    //                                                             },
-    //                                                         });
-    //                                                         return true;
-    //                                                     }
-    //                                                     return false;
-    //                                                 },
-    //                                                 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);
-    //                                                 })
-    //                                             );
-    //                                         }}>
-    //                                         <EditableText
-    //                                             val={displayColName}
-    //                                             setVal={action(val => {
-    //                                                 this.editableHeaders[this.editableHeaders.indexOf(col)] = val as string
-    //                                                 this.props.pairs.map(pair => {
-    //                                                     pair[val as string] = pair[col];
-    //                                                     delete pair[col]
-    //                                                 })
-    //                                             })}
-    //                                             color={"black"}
-    //                                             size={Size.LARGE}
-    //                                         />
-    //                                     </th>
-    //                                 );
-    //                             })}
-    //                     </tr>
-    //                 </thead>
-    //                 <tbody>
-    //                     {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.editableHeaders.map(col => (
-    //                                     <td key={this.editableHeaders.indexOf(col)} style={{ fontWeight: p['select' + this.props.docView?.()?.rootDoc![Id]] ? 'bold' : '' }}>
-    //                                         {p[col]}
-    //                                     </td>
-    //                                 ))}
-    //                             </tr>
-    //                         );
-    //                     })}
-    //                 </tbody>
-    //             </table>
-    //         </div>
-    //     );
-    // }
-
-
     render() {
-        return (
-            <div className="table-container" style={{height: this.props.height+this.props.margin.top+this.props.margin.bottom}}>
-                <table className="table">
-                    <thead>
-                        <tr className="table-row">
-                            {this.columns
-                                .filter(col => !col.startsWith('select'))
-                                .map(col => {
-                                    const header = React.createRef<HTMLElement>();
-                                    return (
-                                        <th
-                                            key={this.columns.indexOf(col)}
-                                            ref={header as any}
-                                            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 => {
-                                                const downX = e.clientX;
-                                                const downY = e.clientY;
-                                                setupMoveUpEvents(
-                                                    {},
-                                                    e,
-                                                    e => {
-                                                        const sourceAnchorCreator = () => this.props.docView?.()!.rootDoc!;
-                                                        const targetCreator = (annotationOn: Doc | undefined) => {
-                                                            const embedding = Doc.MakeEmbedding(this.props.docView?.()!.rootDoc!);
-                                                            embedding._dataVizView = DataVizView.LINECHART;
-                                                            embedding._data_vizAxes = new List<string>([col, col]);
-                                                            embedding._draggedFrom = this.props.docView?.()!.rootDoc!;
-                                                            embedding.annotationOn = annotationOn; //this.props.docView?.()!.rootDoc!;
-                                                            return embedding;
-                                                        };
-                                                        if (this.props.docView?.() && !Utils.isClick(e.clientX, e.clientY, downX, downY, Date.now())) {
-                                                            DragManager.StartAnchorAnnoDrag([header.current!], new DragManager.AnchorAnnoDragData(this.props.docView()!, sourceAnchorCreator, targetCreator), downX, downY, {
-                                                                dragComplete: e => {
-                                                                    if (!e.aborted && e.annoDragData && e.annoDragData.linkSourceDoc && e.annoDragData.dropDocument && e.linkDocument) {
-                                                                        e.linkDocument.link_displayLine = true;
-                                                                        e.linkDocument.link_matchEmbeddings = true;
-                                                                        // e.annoDragData.linkSourceDoc.followLinkToggle = e.annoDragData.dropDocument.annotationOn === this.props.rootDoc;
-                                                                        // e.annoDragData.linkSourceDoc.followLinkZoom = false;
-                                                                    }
-                                                                },
-                                                            });
-                                                            return true;
-                                                        }
-                                                        return false;
-                                                    },
-                                                    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._tableData?.map((p, i) => {
-                            return (
-                                <tr key={i} className="table-row" onClick={action(e => {
-                                        // if (!this.props.docView?.()!.layoutDoc.selected) 
-                                        //     this.props.docView!.()!.layoutDoc.selected = new List<string>();
-                                        // const selected = Cast(this.props.docView?.()!.layoutDoc.selected, listSpec("string"), null);
-                                        //                    // StrListCast(this.props.docView?.()!.layoutDoc.selected)
-                                        // selected.push(p.guid);
-                                        (p['select' + this.props.docView?.()?.rootDoc![Id]] = !p['select' + this.props.docView?.()?.rootDoc![Id]])
-                                    })}>
-                                    {this.columns.map(col => (
-                                        <td key={this.columns.indexOf(col)} style={{ fontWeight: p['select' + this.props.docView?.()?.rootDoc![Id]] ? 'bold' : '' }}>
-                                            {p[col]}
-                                        </td>
-                                    ))}
-                                </tr>
-                            );
-                        })}
-                    </tbody>
-                </table>
+        if (this._tableData.length>0){
+            return (
+                <div className="table-container" style={{height: this.props.height+this.props.margin.top+this.props.margin.bottom}}>
+                    <table className="table">
+                        <thead>
+                            <tr className="table-row">
+                                {this.columns
+                                    .filter(col => !col.startsWith('select'))
+                                    .map(col => {
+                                        const header = React.createRef<HTMLElement>();
+                                        return (
+                                            <th
+                                                key={this.columns.indexOf(col)}
+                                                ref={header as any}
+                                                style={{
+                                                    color: this.props.axes.slice().reverse().lastElement() === col ? 'green' : this.props.axes.lastElement() === col ? 'red' : undefined,
+                                                    fontWeight: 'bolder', border: '3px solid black'
+                                                }}
+                                                onPointerDown={e => {
+                                                    const downX = e.clientX;
+                                                    const downY = e.clientY;
+                                                    setupMoveUpEvents(
+                                                        {},
+                                                        e,
+                                                        e => {
+                                                            const sourceAnchorCreator = () => this.props.docView?.()!.rootDoc!;
+                                                            const targetCreator = (annotationOn: Doc | undefined) => {
+                                                                const embedding = Doc.MakeEmbedding(this.props.docView?.()!.rootDoc!);
+                                                                embedding._dataVizView = DataVizView.TABLE;
+                                                                embedding._data_vizAxes = new List<string>([col, col]);
+                                                                embedding._draggedFrom = this.props.docView?.()!.rootDoc!;
+                                                                embedding.annotationOn = annotationOn; //this.props.docView?.()!.rootDoc!;
+                                                                return embedding;
+                                                            };
+                                                            if (this.props.docView?.() && !Utils.isClick(e.clientX, e.clientY, downX, downY, Date.now())) {
+                                                                DragManager.StartAnchorAnnoDrag([header.current!], new DragManager.AnchorAnnoDragData(this.props.docView()!, sourceAnchorCreator, targetCreator), downX, downY, {
+                                                                    dragComplete: e => {
+                                                                        if (!e.aborted && e.annoDragData && e.annoDragData.linkSourceDoc && e.annoDragData.dropDocument && e.linkDocument) {
+                                                                            e.linkDocument.link_displayLine = true;
+                                                                            e.linkDocument.link_matchEmbeddings = true;
+                                                                            // e.annoDragData.linkSourceDoc.followLinkToggle = e.annoDragData.dropDocument.annotationOn === this.props.rootDoc;
+                                                                            // e.annoDragData.linkSourceDoc.followLinkZoom = false;
+                                                                        }
+                                                                    },
+                                                                });
+                                                                return true;
+                                                            }
+                                                            return false;
+                                                        },
+                                                        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._tableData?.map((p, i) => {
+                                return (
+                                    <tr key={i} className="table-row" onClick={action(e => {
+                                            if (!this.props.layoutDoc.selected) this.props.layoutDoc.selected = new List<string>();
+                                            const selected = Cast(this.props.layoutDoc.selected, listSpec("string"), null);
+                                            if (selected.includes(p.guid)) selected.splice(selected.indexOf(p.guid), 1);
+                                            else {
+                                                selected.push(p.guid)};
+                                        })} style={
+                                            { fontWeight: StrListCast(this.props.layoutDoc.selected).includes(p.guid) ? 'bold' : '' , width: '110%',
+                                            background: StrListCast(this.props.layoutDoc.selected).includes(p.guid) ? 'lightgrey' : '' }}>
+                                        {this.columns.map(col => (
+                                            (this.props.layoutDoc.selected)?
+                                                <td key={this.columns.indexOf(col)} style={{border: '1px solid black'}}>
+                                                    {p[col]}
+                                                </td>
+                                            : <td key={this.columns.indexOf(col)} style={{border: '1px solid black'}}> {p[col]} </td>
+                                        ))}
+                                    </tr>
+                                );
+                            })}
+                        </tbody>
+                    </table>
+                </div>
+            );
+        }
+        else return (
+            <div className='chart-container'>
+                Selected rows of data from the incoming DataVizBox to display.
             </div>
-        );
+        )
     }
-
-
-
 }
-- 
cgit v1.2.3-70-g09d2


From 8bdae208c4ae44766241c285f2f7234027b9b80f Mon Sep 17 00:00:00 2001
From: srichman333 <sarah_n_richman@brown.edu>
Date: Thu, 3 Aug 2023 15:56:11 -0400
Subject: histogram small data fix

---
 .../nodes/DataVizBox/components/Histogram.tsx      |  6 ++--
 .../views/nodes/DataVizBox/components/TableBox.tsx | 42 ++++++++++++----------
 2 files changed, 26 insertions(+), 22 deletions(-)

diff --git a/src/client/views/nodes/DataVizBox/components/Histogram.tsx b/src/client/views/nodes/DataVizBox/components/Histogram.tsx
index efe17297b..1077df844 100644
--- a/src/client/views/nodes/DataVizBox/components/Histogram.tsx
+++ b/src/client/views/nodes/DataVizBox/components/Histogram.tsx
@@ -267,10 +267,10 @@ export class Histogram extends React.Component<HistogramProps> {
         var histogram = d3.histogram()
             .value(function(d) {return d})
             .domain([startingPoint!, endingPoint!])
-            .thresholds(x.ticks(numBins-1))
+            .thresholds(x.ticks(numBins))
         var bins = histogram(data)
         var eachRectWidth = width/(bins.length)
-        var graphStartingPoint = bins[0].x1? bins[0].x1! - (bins[1].x1! - bins[1].x0!) : 0;
+        var graphStartingPoint = (bins[0].x1 && bins[1])? bins[0].x1! - (bins[1].x1! - bins[1].x0!) : 0;
         bins[0].x0 = graphStartingPoint;
         x = x.domain([graphStartingPoint, endingPoint])
              .range([0, Number.isInteger(this.rangeVals.xMin!)? (width-eachRectWidth) : width ])
@@ -286,7 +286,7 @@ export class Histogram extends React.Component<HistogramProps> {
                         index = j;
                     }
                 }
-                bins[index].push(data[i])
+                if (bins[index]) bins[index].push(data[i])
             }
             bins.pop();
             eachRectWidth = width/(bins.length)
diff --git a/src/client/views/nodes/DataVizBox/components/TableBox.tsx b/src/client/views/nodes/DataVizBox/components/TableBox.tsx
index 5653adbce..f244502a4 100644
--- a/src/client/views/nodes/DataVizBox/components/TableBox.tsx
+++ b/src/client/views/nodes/DataVizBox/components/TableBox.tsx
@@ -120,25 +120,29 @@ export class TableBox extends React.Component<TableBoxProps> {
                         </thead>
                         <tbody>
                             {this._tableData?.map((p, i) => {
-                                return (
-                                    <tr key={i} className="table-row" onClick={action(e => {
-                                            if (!this.props.layoutDoc.selected) this.props.layoutDoc.selected = new List<string>();
-                                            const selected = Cast(this.props.layoutDoc.selected, listSpec("string"), null);
-                                            if (selected.includes(p.guid)) selected.splice(selected.indexOf(p.guid), 1);
-                                            else {
-                                                selected.push(p.guid)};
-                                        })} style={
-                                            { fontWeight: StrListCast(this.props.layoutDoc.selected).includes(p.guid) ? 'bold' : '' , width: '110%',
-                                            background: StrListCast(this.props.layoutDoc.selected).includes(p.guid) ? 'lightgrey' : '' }}>
-                                        {this.columns.map(col => (
-                                            (this.props.layoutDoc.selected)?
-                                                <td key={this.columns.indexOf(col)} style={{border: '1px solid black'}}>
-                                                    {p[col]}
-                                                </td>
-                                            : <td key={this.columns.indexOf(col)} style={{border: '1px solid black'}}> {p[col]} </td>
-                                        ))}
-                                    </tr>
-                                );
+                                var containsData = false;
+                                this.columns.map(col => {if (p[col]!='' && p[col]!=null && p[col]!=undefined) containsData = true})
+                                if (containsData){
+                                    return (
+                                        <tr key={i} className="table-row" onClick={action(e => {
+                                                if (!this.props.layoutDoc.selected) this.props.layoutDoc.selected = new List<string>();
+                                                const selected = Cast(this.props.layoutDoc.selected, listSpec("string"), null);
+                                                if (selected.includes(p.guid)) selected.splice(selected.indexOf(p.guid), 1);
+                                                else {
+                                                    selected.push(p.guid)};
+                                            })} style={
+                                                { fontWeight: StrListCast(this.props.layoutDoc.selected).includes(p.guid) ? 'bold' : '' , width: '110%',
+                                                background: StrListCast(this.props.layoutDoc.selected).includes(p.guid) ? 'lightgrey' : '' }}>
+                                            {this.columns.map(col => (
+                                                (this.props.layoutDoc.selected)?
+                                                    <td key={this.columns.indexOf(col)} style={{border: '1px solid black'}}>
+                                                        {p[col]}
+                                                    </td>
+                                                : <td key={this.columns.indexOf(col)} style={{border: '1px solid black'}}> {p[col]} </td>
+                                            ))}
+                                        </tr>
+                                    );
+                                }
                             })}
                         </tbody>
                     </table>
-- 
cgit v1.2.3-70-g09d2


From acbfb6e690b98388d1f7d9a8544c89b2740adea4 Mon Sep 17 00:00:00 2001
From: srichman333 <sarah_n_richman@brown.edu>
Date: Thu, 3 Aug 2023 17:51:48 -0400
Subject: ability to revert histogram bar colors

---
 src/client/views/nodes/DataVizBox/DataVizBox.tsx   | 19 ++++++----
 .../nodes/DataVizBox/components/Histogram.tsx      | 43 +++++++++++++++++-----
 2 files changed, 44 insertions(+), 18 deletions(-)

diff --git a/src/client/views/nodes/DataVizBox/DataVizBox.tsx b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
index 80586d7c7..e08c55197 100644
--- a/src/client/views/nodes/DataVizBox/DataVizBox.tsx
+++ b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
@@ -71,12 +71,14 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
     restoreView = (data: Doc) => {
         const changedView = this.dataVizView !== data.presDataVizView && (this.layoutDoc._dataVizView = data.presDataVizView);
         const changedAxes = this.axes.join('') !== StrListCast(data.presDataVizAxes).join('') && (this.layoutDoc._data_vizAxes = new List<string>(StrListCast(data.presDataVizAxes)));
+        // this.layoutDoc.selected = data.selected;
+        // this.layoutDoc.histogramBarColors = data.histogramBarColors;
+        this.layoutDoc.defaultHistogramColor = data.defaultHistogramColor;
+        this.layoutDoc.pieSliceColors = data.pieSliceColors;
         Object.keys(this.layoutDoc).map(key => {
-            if (key.startsWith('histogram-title') || key.startsWith('histogramBarColors') || key.startsWith('defaultHistogramColor')
-                || key.startsWith('lineChart-title') || key.startsWith('pieChart-title') || key.startsWith('pieSliceColors')){
-                    this.layoutDoc['_'+key] = data[key];
-                }
+            if (key.startsWith('histogram-title') || key.startsWith('lineChart-title') || key.startsWith('pieChart-title')){ this.layoutDoc['_'+key] = data[key]; }
         })
+
         const func = () => this._chartRenderer?.restoreView(data);
         if (changedView || changedAxes) {
             setTimeout(func, 100);
@@ -97,11 +99,12 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
 
         anchor.presDataVizView = this.dataVizView;
         anchor.presDataVizAxes = this.axes.length ? new List<string>(this.axes) : undefined;
+        // anchor.selected = this.layoutDoc.selected;
+        // anchor.histogramBarColors = this.layoutDoc.histogramBarColors;
+        anchor.defaultHistogramColor = this.layoutDoc.defaultHistogramColor;
+        anchor.pieSliceColors = this.layoutDoc.pieSliceColors;
         Object.keys(this.layoutDoc).map(key => {
-            if (key.startsWith('histogram-title') || key.startsWith('histogramBarColors') || key.startsWith('defaultHistogramColor')
-                || key.startsWith('lineChart-title') || key.startsWith('pieChart-title') || key.startsWith('pieSliceColors')){
-                    anchor[key] = this.layoutDoc[key];
-                }
+            if (key.startsWith('histogram-title') || key.startsWith('lineChart-title') || key.startsWith('pieChart-title')){ anchor[key] = this.layoutDoc[key]; }
         })
 
         this.addDocument(anchor);
diff --git a/src/client/views/nodes/DataVizBox/components/Histogram.tsx b/src/client/views/nodes/DataVizBox/components/Histogram.tsx
index 1077df844..b574a0062 100644
--- a/src/client/views/nodes/DataVizBox/components/Histogram.tsx
+++ b/src/client/views/nodes/DataVizBox/components/Histogram.tsx
@@ -4,7 +4,7 @@ import * as React from 'react';
 import * as d3 from 'd3';
 import { IReactionDisposer, action, computed, observable, reaction } from "mobx";
 import { LinkManager } from "../../../../util/LinkManager";
-import { DocCast, StrCast} from "../../../../../fields/Types";
+import { Cast, DocCast, StrCast} from "../../../../../fields/Types";
 import { DocumentManager } from "../../../../util/DocumentManager";
 import { Id } from "../../../../../fields/FieldSymbols";
 import { DataVizBox } from "../DataVizBox";
@@ -12,8 +12,10 @@ import { PinProps, PresBox } from "../../trails";
 import { Docs } from "../../../../documents/Documents";
 import { List } from "../../../../../fields/List";
 import './Chart.scss';
-import { ColorPicker, EditableText, Size, Type } from "browndash-components";
+import { ColorPicker, EditableText, IconButton, Size, Type } from "browndash-components";
 import { FaFillDrip } from "react-icons/fa";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { listSpec } from "../../../../../fields/Schema";
 
 export interface HistogramProps {
     rootDoc: Doc;
@@ -183,7 +185,7 @@ export class Histogram extends React.Component<HistogramProps> {
             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]) : undefined;
+        // anchor.presDataVizSelection = this._currSelected ? new List<number>([this._currSelected]) : undefined;
         return anchor;
     };
 
@@ -303,7 +305,7 @@ export class Histogram extends React.Component<HistogramProps> {
             xAxis = d3.axisBottom(x)
                 .ticks(numBins-1)
         }
-        const maxFrequency = this.numericalYData? d3.max(histDataSet, function(d) { return d[yAxisTitle].replace(/\$/g, '').replace(/\%/g, '').replace(/\</g, '')})
+        const maxFrequency = this.numericalYData? d3.max(histDataSet, function(d) { return d[yAxisTitle]!.replace(/\$/g, '').replace(/\%/g, '').replace(/\</g, '')})
                     : d3.max(bins, function(d) { return d.length; })
 
         var y = d3.scaleLinear()
@@ -382,13 +384,21 @@ export class Histogram extends React.Component<HistogramProps> {
                     function(d) {
                         return (selected && selected[0]==d[0])? 'histogram-bar hover' : 'histogram-bar';
                     }: function(d) {return 'histogram-bar'})
-              .attr("fill", (d)=>{ return this.props.layoutDoc['histogramBarColors-'+d[0]]? StrCast(this.props.layoutDoc['histogramBarColors-'+d[0]]) : StrCast(this.props.layoutDoc['defaultHistogramColor'])})
+              .attr("fill", (d)=>{ 
+                var barColor;
+                var barColors = StrListCast(this.props.layoutDoc.histogramBarColors).map(each => each.split('::'));
+                barColors.map(each => {if (each[0]==StrCast(d[0])) barColor = each[1]});
+                return barColor? StrCast(barColor) : StrCast(this.props.layoutDoc.defaultHistogramColor)})
     };
 
     @action changeSelectedColor = (color: string) => {
         this.curBarSelected.attr("fill", color);
         var barName = StrCast(this._currSelected[this.props.axes[0]].replace(/\$/g, '').replace(/\%/g, '').replace(/\</g, ''))
-        this.props.layoutDoc['histogramBarColors-'+barName] = color;
+        // this.props.layoutDoc['histogramBarColors-'+barName] = color;
+
+        const barColors = Cast(this.props.layoutDoc.histogramBarColors, listSpec("string"), null);
+        barColors.map(each => { if (each.split('::')[0] == barName) barColors.splice(barColors.indexOf(each)) });
+        barColors.push(StrCast(barName + '::' + color));
     };
     
     @action changeDefaultColor = (color: string) => {
@@ -397,7 +407,7 @@ export class Histogram extends React.Component<HistogramProps> {
             else return true;
         })
         defaultColorBars.attr("fill", color);
-        this.props.layoutDoc['defaultHistogramColor'] = color;
+        this.props.layoutDoc.defaultHistogramColor = color;
     };
 
     render() {
@@ -406,7 +416,8 @@ export class Histogram extends React.Component<HistogramProps> {
         if (this.props.axes.length==2) titleAccessor = 'histogram-title-'+this.props.axes[0]+'-'+this.props.axes[1];
         else if (this.props.axes.length>0) titleAccessor = 'histogram-title-'+this.props.axes[0];
         if (!this.props.layoutDoc[titleAccessor]) this.props.layoutDoc[titleAccessor] = this.defaultGraphTitle;
-        if (!this.props.layoutDoc['defaultHistogramColor']) this.props.layoutDoc['defaultHistogramColor'] = '#69b3a2';
+        if (!this.props.layoutDoc.defaultHistogramColor) this.props.layoutDoc.defaultHistogramColor = '#69b3a2';
+        if (!this.props.layoutDoc.histogramBarColors) this.props.layoutDoc.histogramBarColors = new List<string>();
         var selected: string;
         if (this._currSelected){
             curSelectedBarName = StrCast(this._currSelected![this.props.axes[0]].replace(/\$/g, '').replace(/\%/g, '').replace(/\</g, ''))
@@ -418,6 +429,9 @@ export class Histogram extends React.Component<HistogramProps> {
             selected += ' }';
         }
         else selected = 'none';
+        var selectedBarColor;
+        var barColors = StrListCast(this.props.layoutDoc.histogramBarColors).map(each => each.split('::'));
+        barColors.map(each => {if (each[0]==curSelectedBarName!) selectedBarColor = each[1]});
 
         this.componentDidMount();
         return (
@@ -436,10 +450,19 @@ export class Histogram extends React.Component<HistogramProps> {
                         tooltip={'Change Default Bar Color'} 
                         type={Type.SEC} 
                         icon={<FaFillDrip/>}
-                        selectedColor={StrCast(this.props.layoutDoc['defaultHistogramColor'])}
+                        selectedColor={StrCast(this.props.layoutDoc.defaultHistogramColor)}
                         setSelectedColor={color => this.changeDefaultColor(color)}
                         size={Size.XSMALL}
                     />
+                    &nbsp;
+                    <IconButton
+                        icon={<FontAwesomeIcon icon={'eraser'} />} 
+                        size={Size.XSMALL} 
+                        color={'black'} 
+                        type={Type.SEC}
+                        tooltip={'Revert all bars to the default color'}
+                        onClick={action(() => {this.props.layoutDoc.histogramBarColors = new List<string>()})}
+                    />
                 </div>
                 {selected != 'none' ? 
                     <div className={'selected-data'}>
@@ -449,7 +472,7 @@ export class Histogram extends React.Component<HistogramProps> {
                             tooltip={'Change Slice Color'} 
                             type={Type.SEC} 
                             icon={<FaFillDrip/>}
-                            selectedColor={this.props.layoutDoc['histogramBarColors-'+curSelectedBarName]? this.props.layoutDoc['histogramBarColors-'+curSelectedBarName] : this.curBarSelected.attr("fill")}
+                            selectedColor={selectedBarColor? selectedBarColor : this.curBarSelected.attr("fill")}
                             setSelectedColor={color => this.changeSelectedColor(color)}
                             size={Size.XSMALL}
                         />
-- 
cgit v1.2.3-70-g09d2


From f073fd90481d58f2eaccc1d546899dd157aff905 Mon Sep 17 00:00:00 2001
From: srichman333 <sarah_n_richman@brown.edu>
Date: Fri, 4 Aug 2023 11:25:36 -0400
Subject: selected rows + colored bars + colored slices updating with getAnchor
 / restoreView

---
 src/client/views/nodes/DataVizBox/DataVizBox.tsx   | 14 +++++++-------
 .../nodes/DataVizBox/components/Histogram.tsx      | 14 ++------------
 .../views/nodes/DataVizBox/components/PieChart.tsx | 22 +++++++++++++++++-----
 3 files changed, 26 insertions(+), 24 deletions(-)

diff --git a/src/client/views/nodes/DataVizBox/DataVizBox.tsx b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
index e08c55197..a92fc1eb9 100644
--- a/src/client/views/nodes/DataVizBox/DataVizBox.tsx
+++ b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
@@ -1,7 +1,7 @@
 import { action, computed, ObservableMap, ObservableSet } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
-import { Doc, StrListCast } from '../../../../fields/Doc';
+import { Doc, Field, StrListCast } from '../../../../fields/Doc';
 import { List } from '../../../../fields/List';
 import { Cast, CsvCast, StrCast } from '../../../../fields/Types';
 import { CsvField } from '../../../../fields/URLField';
@@ -71,10 +71,10 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
     restoreView = (data: Doc) => {
         const changedView = this.dataVizView !== data.presDataVizView && (this.layoutDoc._dataVizView = data.presDataVizView);
         const changedAxes = this.axes.join('') !== StrListCast(data.presDataVizAxes).join('') && (this.layoutDoc._data_vizAxes = new List<string>(StrListCast(data.presDataVizAxes)));
-        // this.layoutDoc.selected = data.selected;
-        // this.layoutDoc.histogramBarColors = data.histogramBarColors;
+        this.layoutDoc.selected = Field.Copy(data.selected);
+        this.layoutDoc.histogramBarColors = Field.Copy(data.histogramBarColors);
         this.layoutDoc.defaultHistogramColor = data.defaultHistogramColor;
-        this.layoutDoc.pieSliceColors = data.pieSliceColors;
+        this.layoutDoc.pieSliceColors = Field.Copy(data.pieSliceColors);
         Object.keys(this.layoutDoc).map(key => {
             if (key.startsWith('histogram-title') || key.startsWith('lineChart-title') || key.startsWith('pieChart-title')){ this.layoutDoc['_'+key] = data[key]; }
         })
@@ -99,10 +99,10 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
 
         anchor.presDataVizView = this.dataVizView;
         anchor.presDataVizAxes = this.axes.length ? new List<string>(this.axes) : undefined;
-        // anchor.selected = this.layoutDoc.selected;
-        // anchor.histogramBarColors = this.layoutDoc.histogramBarColors;
+        anchor.selected = Field.Copy(this.layoutDoc.selected);
+        anchor.histogramBarColors = Field.Copy(this.layoutDoc.histogramBarColors);
         anchor.defaultHistogramColor = this.layoutDoc.defaultHistogramColor;
-        anchor.pieSliceColors = this.layoutDoc.pieSliceColors;
+        anchor.pieSliceColors = Field.Copy(this.layoutDoc.pieSliceColors);
         Object.keys(this.layoutDoc).map(key => {
             if (key.startsWith('histogram-title') || key.startsWith('lineChart-title') || key.startsWith('pieChart-title')){ anchor[key] = this.layoutDoc[key]; }
         })
diff --git a/src/client/views/nodes/DataVizBox/components/Histogram.tsx b/src/client/views/nodes/DataVizBox/components/Histogram.tsx
index b574a0062..02f1ddbbb 100644
--- a/src/client/views/nodes/DataVizBox/components/Histogram.tsx
+++ b/src/client/views/nodes/DataVizBox/components/Histogram.tsx
@@ -394,21 +394,11 @@ export class Histogram extends React.Component<HistogramProps> {
     @action changeSelectedColor = (color: string) => {
         this.curBarSelected.attr("fill", color);
         var barName = StrCast(this._currSelected[this.props.axes[0]].replace(/\$/g, '').replace(/\%/g, '').replace(/\</g, ''))
-        // this.props.layoutDoc['histogramBarColors-'+barName] = color;
 
         const barColors = Cast(this.props.layoutDoc.histogramBarColors, listSpec("string"), null);
-        barColors.map(each => { if (each.split('::')[0] == barName) barColors.splice(barColors.indexOf(each)) });
+        barColors.map(each => { if (each.split('::')[0] == barName) barColors.splice(barColors.indexOf(each), 1) });
         barColors.push(StrCast(barName + '::' + color));
     };
-    
-    @action changeDefaultColor = (color: string) => {
-        const defaultColorBars = this._histogramSvg!.selectAll('.histogram-bar').filter((d: any) => {
-            if (this.props.layoutDoc['histogramBarColors-'+d[0]]) return false;
-            else return true;
-        })
-        defaultColorBars.attr("fill", color);
-        this.props.layoutDoc.defaultHistogramColor = color;
-    };
 
     render() {
         var curSelectedBarName;
@@ -451,7 +441,7 @@ export class Histogram extends React.Component<HistogramProps> {
                         type={Type.SEC} 
                         icon={<FaFillDrip/>}
                         selectedColor={StrCast(this.props.layoutDoc.defaultHistogramColor)}
-                        setSelectedColor={color => this.changeDefaultColor(color)}
+                        setSelectedColor={color => this.props.layoutDoc.defaultHistogramColor = color}
                         size={Size.XSMALL}
                     />
                     &nbsp;
diff --git a/src/client/views/nodes/DataVizBox/components/PieChart.tsx b/src/client/views/nodes/DataVizBox/components/PieChart.tsx
index f3a72a53b..8fdead3d7 100644
--- a/src/client/views/nodes/DataVizBox/components/PieChart.tsx
+++ b/src/client/views/nodes/DataVizBox/components/PieChart.tsx
@@ -4,7 +4,7 @@ import * as React from 'react';
 import * as d3 from 'd3';
 import { IReactionDisposer, action, computed, observable, reaction } from "mobx";
 import { LinkManager } from "../../../../util/LinkManager";
-import { DocCast, StrCast} from "../../../../../fields/Types";
+import { Cast, DocCast, StrCast} from "../../../../../fields/Types";
 import { DocumentManager } from "../../../../util/DocumentManager";
 import { Id } from "../../../../../fields/FieldSymbols";
 import { DataVizBox } from "../DataVizBox";
@@ -14,6 +14,7 @@ import { List } from "../../../../../fields/List";
 import './Chart.scss';
 import { ColorPicker, EditableText, Size, Type } from "browndash-components";
 import { FaFillDrip } from "react-icons/fa";
+import { listSpec } from "../../../../../fields/Schema";
 
 export interface PieChartProps {
     rootDoc: Doc;
@@ -180,7 +181,7 @@ export class PieChart extends React.Component<PieChartProps> {
             title: 'piechart 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]) : undefined;
+        // anchor.presDataVizSelection = this._currSelected ? new List<number>([this._currSelected]) : undefined;
         return anchor;
     };
 
@@ -327,7 +328,10 @@ export class PieChart extends React.Component<PieChartProps> {
                     trackDuplicates[d.data.toString()] = trackDuplicates[d.data.toString()] + 1;
                 }
                 var accessByName = descriptionField? dataPoint[descriptionField] : dataPoint[percentField];
-                return this.props.layoutDoc['pieSliceColors-'+accessByName]? StrCast(this.props.layoutDoc['pieSliceColors-'+accessByName]) : d3.schemeSet3[i]? d3.schemeSet3[i]: d3.schemeSet3[i%12] })
+                var sliceColor;
+                var sliceColors = StrListCast(this.props.layoutDoc.pieSliceColors).map(each => each.split('::'));
+                sliceColors.map(each => {if (each[0]==StrCast(accessByName)) sliceColor = each[1]});
+                return sliceColor? StrCast(sliceColor) : d3.schemeSet3[i]? d3.schemeSet3[i]: d3.schemeSet3[i%12] })
                 .attr("class", selected? 
                 function(d) {
                     return (selected && d.startAngle==selected.startAngle && d.endAngle==selected.endAngle)? 'slice hover' : 'slice';
@@ -364,7 +368,10 @@ export class PieChart extends React.Component<PieChartProps> {
     @action changeSelectedColor = (color: string) => {
         this.curSliceSelected.attr("fill", color);
         var sliceName = this._currSelected[this.props.axes[0]].replace(/\$/g, '').replace(/\%/g, '').replace(/\</g, '')
-        this.props.layoutDoc['pieSliceColors-'+sliceName] = color;
+        
+        const sliceColors = Cast(this.props.layoutDoc.pieSliceColors, listSpec("string"), null);
+        sliceColors.map(each => { if (each.split('::')[0] == sliceName) sliceColors.splice(sliceColors.indexOf(each), 1) });
+        sliceColors.push(StrCast(sliceName + '::' + color));
     };
 
     render() {
@@ -373,6 +380,7 @@ export class PieChart extends React.Component<PieChartProps> {
         if (this.props.axes.length==2) titleAccessor = 'pieChart-title-'+this.props.axes[0]+'-'+this.props.axes[1];
         else if (this.props.axes.length>0) titleAccessor = 'pieChart-title-'+this.props.axes[0];
         if (!this.props.layoutDoc[titleAccessor]) this.props.layoutDoc[titleAccessor] = this.defaultGraphTitle;
+        if (!this.props.layoutDoc.pieSliceColors) this.props.layoutDoc.pieSliceColors = new List<string>();
         var selected: string;
         var curSelectedSliceName;
         if (this._currSelected){
@@ -385,6 +393,10 @@ export class PieChart extends React.Component<PieChartProps> {
             selected += ' }';
         }
         else selected = 'none';
+        var selectedSliceColor;
+        var sliceColors = StrListCast(this.props.layoutDoc.pieSliceColors).map(each => each.split('::'));
+        sliceColors.map(each => {if (each[0]==curSelectedSliceName!) selectedSliceColor = each[1]});
+
         return (
             this.props.axes.length >= 1 ? (
             <div className="chart-container">
@@ -405,7 +417,7 @@ export class PieChart extends React.Component<PieChartProps> {
                             tooltip={'Change Slice Color'} 
                             type={Type.SEC} 
                             icon={<FaFillDrip/>}
-                            selectedColor={this.props.layoutDoc['pieSliceColors-'+curSelectedSliceName]? this.props.layoutDoc['pieSliceColors-'+curSelectedSliceName] : this.curSliceSelected.attr("fill")}
+                            selectedColor={selectedSliceColor? selectedSliceColor : this.curSliceSelected.attr("fill")}
                             setSelectedColor={color => this.changeSelectedColor(color)}
                             size={Size.XSMALL}
                         />
-- 
cgit v1.2.3-70-g09d2


From bee66361d878c366e8c753ca844abc2f78fbf7f3 Mon Sep 17 00:00:00 2001
From: srichman333 <sarah_n_richman@brown.edu>
Date: Fri, 4 Aug 2023 14:52:35 -0400
Subject: better row guids so selected rows stay on refresh

---
 src/client/views/nodes/DataVizBox/DataVizBox.tsx        |  5 +----
 .../views/nodes/DataVizBox/components/Histogram.tsx     |  5 +++--
 .../views/nodes/DataVizBox/components/LineChart.tsx     |  3 ++-
 .../views/nodes/DataVizBox/components/PieChart.tsx      |  5 +++--
 .../views/nodes/DataVizBox/components/TableBox.tsx      | 17 +++++++++++------
 5 files changed, 20 insertions(+), 15 deletions(-)

diff --git a/src/client/views/nodes/DataVizBox/DataVizBox.tsx b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
index a92fc1eb9..8b951a002 100644
--- a/src/client/views/nodes/DataVizBox/DataVizBox.tsx
+++ b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
@@ -15,7 +15,6 @@ import './DataVizBox.scss';
 import { Histogram } from './components/Histogram';
 import { PieChart } from './components/PieChart';
 import { Toggle, ToggleType, Type } from 'browndash-components';
-import { Utils } from '../../../../Utils';
 
 export enum DataVizView {
     TABLE = 'table',
@@ -36,9 +35,7 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
     // @observable private pairs: { [key: string]: FieldResult }[] = [];
     static pairSet = new ObservableMap<string, { [key: string]: string }[]>();
     @computed.struct get pairs() {
-        var pairs = DataVizBox.pairSet.get(CsvCast(this.rootDoc[this.fieldKey]).url.href);
-        pairs?.map(pair => {if (!pair.guid) pair.guid = Utils.GenerateGuid()})
-        return pairs;
+        return DataVizBox.pairSet.get(CsvCast(this.rootDoc[this.fieldKey]).url.href);
     }
     private _chartRenderer: LineChart | Histogram | PieChart | undefined;
     // // another way would be store a schema that defines the type of data we are expecting from an imported doc
diff --git a/src/client/views/nodes/DataVizBox/components/Histogram.tsx b/src/client/views/nodes/DataVizBox/components/Histogram.tsx
index 02f1ddbbb..a9be151bc 100644
--- a/src/client/views/nodes/DataVizBox/components/Histogram.tsx
+++ b/src/client/views/nodes/DataVizBox/components/Histogram.tsx
@@ -49,12 +49,13 @@ export class Histogram extends React.Component<HistogramProps> {
     // TODO: nda - some sort of mapping that keeps track of the annotated points so we can easily remove when annotations list updates
 
     @computed get _histogramData() {
+        var guids = StrListCast(this.props.layoutDoc.rowGuids);
         if (this.props.axes.length < 1) return [];
         if (this.props.axes.length < 2) {
             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 : this.incomingLinks[0]!.selected && StrListCast(this.incomingLinks[0].selected).includes(pair.guid)))
+                ?.filter(pair => (!this.incomingLinks.length ? true : this.incomingLinks[0]!.selected && StrListCast(this.incomingLinks[0].selected).includes(guids[this.props.pairs.indexOf(pair)])))
                 .map(pair => ({ [ax0]: (pair[this.props.axes[0]])}))
         };
 
@@ -63,7 +64,7 @@ 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 : this.incomingLinks[0]!.selected && StrListCast(this.incomingLinks[0].selected).includes(pair.guid)))
+            ?.filter(pair => (!this.incomingLinks.length ? true : this.incomingLinks[0]!.selected && StrListCast(this.incomingLinks[0].selected).includes(guids[this.props.pairs.indexOf(pair)])))
             .map(pair => ({ [ax0]: (pair[this.props.axes[0]]), [ax1]: (pair[this.props.axes[1]]) }))
     }
     @computed get defaultGraphTitle(){
diff --git a/src/client/views/nodes/DataVizBox/components/LineChart.tsx b/src/client/views/nodes/DataVizBox/components/LineChart.tsx
index da5f7dbbb..77b3acf47 100644
--- a/src/client/views/nodes/DataVizBox/components/LineChart.tsx
+++ b/src/client/views/nodes/DataVizBox/components/LineChart.tsx
@@ -49,9 +49,10 @@ export class LineChart extends React.Component<LineChartProps> {
     // TODO: nda - some sort of mapping that keeps track of the annotated points so we can easily remove when annotations list updates
 
     @computed get _lineChartData() {
+        var guids = StrListCast(this.props.layoutDoc.rowGuids);
         if (this.props.axes.length <= 1) return [];
         return this.props.pairs
-            ?.filter(pair => (!this.incomingLinks.length ? true : this.incomingLinks[0]!.selected && StrListCast(this.incomingLinks[0].selected).includes(pair.guid)))
+            ?.filter(pair => (!this.incomingLinks.length ? true : this.incomingLinks[0]!.selected && StrListCast(this.incomingLinks[0].selected).includes(guids[this.props.pairs.indexOf(pair)])))
             .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));
     }
diff --git a/src/client/views/nodes/DataVizBox/components/PieChart.tsx b/src/client/views/nodes/DataVizBox/components/PieChart.tsx
index 8fdead3d7..cc5cc231b 100644
--- a/src/client/views/nodes/DataVizBox/components/PieChart.tsx
+++ b/src/client/views/nodes/DataVizBox/components/PieChart.tsx
@@ -46,12 +46,13 @@ export class PieChart extends React.Component<PieChartProps> {
     // TODO: nda - some sort of mapping that keeps track of the annotated points so we can easily remove when annotations list updates
 
     @computed get _piechartData() {
+        var guids = StrListCast(this.props.layoutDoc.rowGuids);
         if (this.props.axes.length < 1) return [];
         if (this.props.axes.length < 2) {
             var ax0 = this.props.axes[0];
             if (/\d/.test(this.props.pairs[0][ax0])){ this.byCategory = false }
             return this.props.pairs
-                ?.filter(pair => (!this.incomingLinks.length ? true :  this.incomingLinks[0]!.selected && StrListCast(this.incomingLinks[0].selected).includes(pair.guid)))
+                ?.filter(pair => (!this.incomingLinks.length ? true :  this.incomingLinks[0]!.selected && StrListCast(this.incomingLinks[0].selected).includes(guids[this.props.pairs.indexOf(pair)])))
                 .map(pair => ({ [ax0]: (pair[this.props.axes[0]])}))
         };
 
@@ -59,7 +60,7 @@ export class PieChart extends React.Component<PieChartProps> {
         var ax1 = this.props.axes[1];
         if (/\d/.test(this.props.pairs[0][ax0])) { this.byCategory = false; }
         return this.props.pairs
-            ?.filter(pair => (!this.incomingLinks.length ? true :  this.incomingLinks[0]!.selected && StrListCast(this.incomingLinks[0].selected).includes(pair.guid)))
+            ?.filter(pair => (!this.incomingLinks.length ? true :  this.incomingLinks[0]!.selected && StrListCast(this.incomingLinks[0].selected).includes(guids[this.props.pairs.indexOf(pair)])))
             .map(pair => ({ [ax0]: (pair[this.props.axes[0]]), [ax1]: (pair[this.props.axes[1]]) }))
     }
     @computed get defaultGraphTitle(){
diff --git a/src/client/views/nodes/DataVizBox/components/TableBox.tsx b/src/client/views/nodes/DataVizBox/components/TableBox.tsx
index f244502a4..7d6f934b9 100644
--- a/src/client/views/nodes/DataVizBox/components/TableBox.tsx
+++ b/src/client/views/nodes/DataVizBox/components/TableBox.tsx
@@ -34,7 +34,8 @@ 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 => this.incomingLinks[0]!.selected && StrListCast(this.incomingLinks[0].selected).includes(pair.guid))
+        var guids = StrListCast(this.props.layoutDoc.rowGuids);
+        return this.props.pairs?.filter(pair => this.incomingLinks[0]!.selected && StrListCast(this.incomingLinks[0].selected).includes(guids[this.props.pairs.indexOf(pair)]))
     }
 
     @computed get incomingLinks() {
@@ -45,7 +46,10 @@ export class TableBox extends React.Component<TableBoxProps> {
     }
 
     @computed get columns() {
-        return this._tableData.length ? Array.from(Object.keys(this._tableData[0])).filter(header => header!='guid' && header!='') : [];
+        if (!this.props.layoutDoc.rowGuids) this.props.layoutDoc.rowGuids = new List<string>();
+        const guids = Cast(this.props.layoutDoc.rowGuids, listSpec("string"), null);
+        if (guids.length==0) this.props.pairs.map(row => guids.push(Utils.GenerateGuid()));
+        return this._tableData.length ? Array.from(Object.keys(this._tableData[0])).filter(header => header!='') : [];
     }
 
     render() {
@@ -121,18 +125,19 @@ export class TableBox extends React.Component<TableBoxProps> {
                         <tbody>
                             {this._tableData?.map((p, i) => {
                                 var containsData = false;
+                                var guid = StrListCast(this.props.layoutDoc.rowGuids)![this.props.pairs.indexOf(p)]
                                 this.columns.map(col => {if (p[col]!='' && p[col]!=null && p[col]!=undefined) containsData = true})
                                 if (containsData){
                                     return (
                                         <tr key={i} className="table-row" onClick={action(e => {
                                                 if (!this.props.layoutDoc.selected) this.props.layoutDoc.selected = new List<string>();
                                                 const selected = Cast(this.props.layoutDoc.selected, listSpec("string"), null);
-                                                if (selected.includes(p.guid)) selected.splice(selected.indexOf(p.guid), 1);
+                                                if (selected.includes(guid)) selected.splice(selected.indexOf(guid), 1);
                                                 else {
-                                                    selected.push(p.guid)};
+                                                    selected.push(guid)};
                                             })} style={
-                                                { fontWeight: StrListCast(this.props.layoutDoc.selected).includes(p.guid) ? 'bold' : '' , width: '110%',
-                                                background: StrListCast(this.props.layoutDoc.selected).includes(p.guid) ? 'lightgrey' : '' }}>
+                                                { fontWeight: StrListCast(this.props.layoutDoc.selected).includes(guid) ? 'bold' : '' , width: '110%',
+                                                background: StrListCast(this.props.layoutDoc.selected).includes(guid) ? 'lightgrey' : '' }}>
                                             {this.columns.map(col => (
                                                 (this.props.layoutDoc.selected)?
                                                     <td key={this.columns.indexOf(col)} style={{border: '1px solid black'}}>
-- 
cgit v1.2.3-70-g09d2


From 8cbfb72751a3f8814c0dbda54c8ed22c8bb58783 Mon Sep 17 00:00:00 2001
From: srichman333 <sarah_n_richman@brown.edu>
Date: Fri, 4 Aug 2023 15:17:25 -0400
Subject: color stays on dragged charts + erase bar color is on individual bars

---
 .../nodes/DataVizBox/components/Histogram.tsx      | 28 ++++++++++++++--------
 .../views/nodes/DataVizBox/components/TableBox.tsx |  5 +++-
 2 files changed, 22 insertions(+), 11 deletions(-)

diff --git a/src/client/views/nodes/DataVizBox/components/Histogram.tsx b/src/client/views/nodes/DataVizBox/components/Histogram.tsx
index a9be151bc..2a47abf32 100644
--- a/src/client/views/nodes/DataVizBox/components/Histogram.tsx
+++ b/src/client/views/nodes/DataVizBox/components/Histogram.tsx
@@ -400,6 +400,14 @@ export class Histogram extends React.Component<HistogramProps> {
         barColors.map(each => { if (each.split('::')[0] == barName) barColors.splice(barColors.indexOf(each), 1) });
         barColors.push(StrCast(barName + '::' + color));
     };
+    
+    @action eraseSelectedColor= () => {
+        this.curBarSelected.attr("fill", this.props.layoutDoc.defaultHistogramColor);
+        var barName = StrCast(this._currSelected[this.props.axes[0]].replace(/\$/g, '').replace(/\%/g, '').replace(/\</g, ''))
+
+        const barColors = Cast(this.props.layoutDoc.histogramBarColors, listSpec("string"), null);
+        barColors.map(each => { if (each.split('::')[0] == barName) barColors.splice(barColors.indexOf(each), 1) });
+    };
 
     render() {
         var curSelectedBarName;
@@ -445,28 +453,28 @@ export class Histogram extends React.Component<HistogramProps> {
                         setSelectedColor={color => this.props.layoutDoc.defaultHistogramColor = color}
                         size={Size.XSMALL}
                     />
-                    &nbsp;
-                    <IconButton
-                        icon={<FontAwesomeIcon icon={'eraser'} />} 
-                        size={Size.XSMALL} 
-                        color={'black'} 
-                        type={Type.SEC}
-                        tooltip={'Revert all bars to the default color'}
-                        onClick={action(() => {this.props.layoutDoc.histogramBarColors = new List<string>()})}
-                    />
                 </div>
                 {selected != 'none' ? 
                     <div className={'selected-data'}>
                         Selected: {selected}
                         &nbsp; &nbsp;
                         <ColorPicker
-                            tooltip={'Change Slice Color'} 
+                            tooltip={'Change Bar Color'} 
                             type={Type.SEC} 
                             icon={<FaFillDrip/>}
                             selectedColor={selectedBarColor? selectedBarColor : this.curBarSelected.attr("fill")}
                             setSelectedColor={color => this.changeSelectedColor(color)}
                             size={Size.XSMALL}
                         />
+                        &nbsp;
+                        <IconButton
+                            icon={<FontAwesomeIcon icon={'eraser'} />} 
+                            size={Size.XSMALL} 
+                            color={'black'} 
+                            type={Type.SEC}
+                            tooltip={'Revert to the default bar color'}
+                            onClick={action(() => this.eraseSelectedColor())}
+                        />
                     </div>
                 : null}
                 <div ref={this._histogramRef} />
diff --git a/src/client/views/nodes/DataVizBox/components/TableBox.tsx b/src/client/views/nodes/DataVizBox/components/TableBox.tsx
index 7d6f934b9..8a99d332f 100644
--- a/src/client/views/nodes/DataVizBox/components/TableBox.tsx
+++ b/src/client/views/nodes/DataVizBox/components/TableBox.tsx
@@ -1,7 +1,7 @@
 import { action, computed, } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
-import { Doc, StrListCast } from '../../../../../fields/Doc';
+import { Doc, Field, StrListCast } from '../../../../../fields/Doc';
 import { List } from '../../../../../fields/List';
 import { emptyFunction, setupMoveUpEvents, Utils } from '../../../../../Utils';
 import { DragManager } from '../../../../util/DragManager';
@@ -85,6 +85,9 @@ export class TableBox extends React.Component<TableBoxProps> {
                                                                 embedding._data_vizAxes = new List<string>([col, col]);
                                                                 embedding._draggedFrom = this.props.docView?.()!.rootDoc!;
                                                                 embedding.annotationOn = annotationOn; //this.props.docView?.()!.rootDoc!;
+                                                                embedding.histogramBarColors = Field.Copy(this.props.layoutDoc.histogramBarColors);
+                                                                embedding.defaultHistogramColor = this.props.layoutDoc.defaultHistogramColor;
+                                                                embedding.pieSliceColors = Field.Copy(this.props.layoutDoc.pieSliceColors);
                                                                 return embedding;
                                                             };
                                                             if (this.props.docView?.() && !Utils.isClick(e.clientX, e.clientY, downX, downY, Date.now())) {
-- 
cgit v1.2.3-70-g09d2


From 1bfa61ae441458cdcd860eb39e617417d013f1fa Mon Sep 17 00:00:00 2001
From: srichman333 <sarah_n_richman@brown.edu>
Date: Mon, 7 Aug 2023 10:53:09 -0400
Subject: Issues when you remove a highlighted row more than 1 chart up the
 tree fixed

---
 src/client/views/nodes/DataVizBox/components/TableBox.tsx | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/client/views/nodes/DataVizBox/components/TableBox.tsx b/src/client/views/nodes/DataVizBox/components/TableBox.tsx
index 8a99d332f..a7cc3f2fb 100644
--- a/src/client/views/nodes/DataVizBox/components/TableBox.tsx
+++ b/src/client/views/nodes/DataVizBox/components/TableBox.tsx
@@ -52,7 +52,18 @@ export class TableBox extends React.Component<TableBoxProps> {
         return this._tableData.length ? Array.from(Object.keys(this._tableData[0])).filter(header => header!='') : [];
     }
 
+    filterSelectedRowsDown() {
+        if (!this.props.layoutDoc.selected) this.props.layoutDoc.selected = new List<string>();
+        const selected = Cast(this.props.layoutDoc.selected, listSpec("string"), null);
+        const incomingSelected = this.incomingLinks.length? StrListCast(this.incomingLinks[0].selected) : undefined;
+        if (incomingSelected){
+            selected.map(guid => {
+                if (!incomingSelected.includes(guid)) selected.splice(selected.indexOf(guid), 1)}); // filters through selected to remove guids that were removed in the incoming data
+        }
+    }
+
     render() {
+        this.filterSelectedRowsDown();
         if (this._tableData.length>0){
             return (
                 <div className="table-container" style={{height: this.props.height+this.props.margin.top+this.props.margin.bottom}}>
@@ -133,7 +144,6 @@ export class TableBox extends React.Component<TableBoxProps> {
                                 if (containsData){
                                     return (
                                         <tr key={i} className="table-row" onClick={action(e => {
-                                                if (!this.props.layoutDoc.selected) this.props.layoutDoc.selected = new List<string>();
                                                 const selected = Cast(this.props.layoutDoc.selected, listSpec("string"), null);
                                                 if (selected.includes(guid)) selected.splice(selected.indexOf(guid), 1);
                                                 else {
-- 
cgit v1.2.3-70-g09d2


From 85f91733a21c7b41829eb9280ce33e90783c926d Mon Sep 17 00:00:00 2001
From: srichman333 <sarah_n_richman@brown.edu>
Date: Mon, 7 Aug 2023 13:30:40 -0400
Subject: selected data at bottom of graph

---
 src/client/views/nodes/DataVizBox/DataVizBox.scss          | 2 +-
 src/client/views/nodes/DataVizBox/DataVizBox.tsx           | 2 +-
 src/client/views/nodes/DataVizBox/components/Chart.scss    | 7 +++++--
 src/client/views/nodes/DataVizBox/components/Histogram.tsx | 2 +-
 src/client/views/nodes/DataVizBox/components/LineChart.tsx | 5 +++--
 src/client/views/nodes/DataVizBox/components/PieChart.tsx  | 2 +-
 src/client/views/nodes/DataVizBox/components/TableBox.tsx  | 4 ++--
 7 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/src/client/views/nodes/DataVizBox/DataVizBox.scss b/src/client/views/nodes/DataVizBox/DataVizBox.scss
index ab2f19726..a69881b7c 100644
--- a/src/client/views/nodes/DataVizBox/DataVizBox.scss
+++ b/src/client/views/nodes/DataVizBox/DataVizBox.scss
@@ -1,5 +1,5 @@
 .dataviz {
-    overflow: hidden;
+    overflow: scroll;
     height: 100%;
     width: 100%;
 
diff --git a/src/client/views/nodes/DataVizBox/DataVizBox.tsx b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
index 8b951a002..9a4546900 100644
--- a/src/client/views/nodes/DataVizBox/DataVizBox.tsx
+++ b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
@@ -116,7 +116,7 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
     @computed get selectView() {
         const width = this.props.PanelWidth() * 0.9;
         const height = (this.props.PanelHeight() - 32) /* height of 'change view' button */ * 0.9;
-        const margin = { top: 10, right: 25, bottom: 50, left: 25 };
+        const margin = { top: 10, right: 25, bottom: 75, left: 45 };
         if (!this.pairs) return 'no data';
         switch (this.dataVizView) {
             case DataVizView.TABLE:     return <TableBox layoutDoc={this.layoutDoc} pairs={this.pairs} axes={this.axes} height={height} width={width} margin={margin} rootDoc={this.rootDoc} docView={this.props.DocumentView} selectAxes={this.selectAxes}/>;
diff --git a/src/client/views/nodes/DataVizBox/components/Chart.scss b/src/client/views/nodes/DataVizBox/components/Chart.scss
index 996183cb8..35e5187b2 100644
--- a/src/client/views/nodes/DataVizBox/components/Chart.scss
+++ b/src/client/views/nodes/DataVizBox/components/Chart.scss
@@ -4,6 +4,7 @@
     align-items: center;
     cursor: default;
     margin-top: 10px;
+    overflow-y: visible;
 
     .graph{
         overflow: visible;
@@ -22,8 +23,8 @@
         display: flex;
         flex-direction: row;
         margin: 10px;
-        margin-top: 0px;
-        margin-bottom: -5px;
+        margin-top: -25px;
+        margin-bottom: 5px;
     }
     .slice {
         &.hover {
@@ -78,4 +79,6 @@
 .table-container{
     overflow: scroll;
     margin: 10px;
+    margin-left: 25px;
+    margin-top: 25px;
 }
\ No newline at end of file
diff --git a/src/client/views/nodes/DataVizBox/components/Histogram.tsx b/src/client/views/nodes/DataVizBox/components/Histogram.tsx
index 2a47abf32..cb882cf4a 100644
--- a/src/client/views/nodes/DataVizBox/components/Histogram.tsx
+++ b/src/client/views/nodes/DataVizBox/components/Histogram.tsx
@@ -454,6 +454,7 @@ export class Histogram extends React.Component<HistogramProps> {
                         size={Size.XSMALL}
                     />
                 </div>
+                <div ref={this._histogramRef} />
                 {selected != 'none' ? 
                     <div className={'selected-data'}>
                         Selected: {selected}
@@ -477,7 +478,6 @@ export class Histogram extends React.Component<HistogramProps> {
                         />
                     </div>
                 : null}
-                <div ref={this._histogramRef} />
             </div>
             ) : <span className="chart-container"> {'first use table view to select a column to graph'}</span>
         );
diff --git a/src/client/views/nodes/DataVizBox/components/LineChart.tsx b/src/client/views/nodes/DataVizBox/components/LineChart.tsx
index 77b3acf47..3a416c401 100644
--- a/src/client/views/nodes/DataVizBox/components/LineChart.tsx
+++ b/src/client/views/nodes/DataVizBox/components/LineChart.tsx
@@ -216,7 +216,6 @@ export class LineChart extends React.Component<LineChartProps> {
         // 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));
     }
 
     drawDataPoints(data: DataPoint[], idx: number, xScale: d3.ScaleLinear<number, number, never>, yScale: d3.ScaleLinear<number, number, never>) {
@@ -369,8 +368,10 @@ export class LineChart extends React.Component<LineChartProps> {
                         fillWidth
                     />
                 </div>
-                <div className={'selected-data'}> {`Selected: ${selectedPt}`}</div>
                 <div ref={this._lineChartRef} />
+                {selectedPt!='none'? 
+                    <div className={'selected-data'}> {`Selected: ${selectedPt}`}</div>
+                : null}
             </div>
             ) : <span className="chart-container"> {'first use table view to select two axes to plot'}</span>
         );
diff --git a/src/client/views/nodes/DataVizBox/components/PieChart.tsx b/src/client/views/nodes/DataVizBox/components/PieChart.tsx
index cc5cc231b..ca93a2942 100644
--- a/src/client/views/nodes/DataVizBox/components/PieChart.tsx
+++ b/src/client/views/nodes/DataVizBox/components/PieChart.tsx
@@ -410,6 +410,7 @@ export class PieChart extends React.Component<PieChartProps> {
                         fillWidth
                     />
                 </div>
+                <div ref={this._piechartRef} />
                 {selected != 'none' ? 
                     <div className={'selected-data'}>
                         Selected: {selected}
@@ -424,7 +425,6 @@ export class PieChart extends React.Component<PieChartProps> {
                         />
                     </div>
                 : null}
-                <div ref={this._piechartRef} />
             </div>
             ) : <span className="chart-container"> {'first use table view to select a column to graph'}</span>
         );
diff --git a/src/client/views/nodes/DataVizBox/components/TableBox.tsx b/src/client/views/nodes/DataVizBox/components/TableBox.tsx
index a7cc3f2fb..38dd62d8d 100644
--- a/src/client/views/nodes/DataVizBox/components/TableBox.tsx
+++ b/src/client/views/nodes/DataVizBox/components/TableBox.tsx
@@ -49,7 +49,7 @@ export class TableBox extends React.Component<TableBoxProps> {
         if (!this.props.layoutDoc.rowGuids) this.props.layoutDoc.rowGuids = new List<string>();
         const guids = Cast(this.props.layoutDoc.rowGuids, listSpec("string"), null);
         if (guids.length==0) this.props.pairs.map(row => guids.push(Utils.GenerateGuid()));
-        return this._tableData.length ? Array.from(Object.keys(this._tableData[0])).filter(header => header!='') : [];
+        return this._tableData.length ? Array.from(Object.keys(this._tableData[0])).filter(header => header!='' && header!=undefined) : [];
     }
 
     filterSelectedRowsDown() {
@@ -66,7 +66,7 @@ export class TableBox extends React.Component<TableBoxProps> {
         this.filterSelectedRowsDown();
         if (this._tableData.length>0){
             return (
-                <div className="table-container" style={{height: this.props.height+this.props.margin.top+this.props.margin.bottom}}>
+                <div className="table-container" style={{height: this.props.height}}>
                     <table className="table">
                         <thead>
                             <tr className="table-row">
-- 
cgit v1.2.3-70-g09d2


From 36a34ed8b3be3f0db156fcce09842a2c45193cea Mon Sep 17 00:00:00 2001
From: srichman333 <sarah_n_richman@brown.edu>
Date: Mon, 7 Aug 2023 15:03:45 -0400
Subject: histogram hover vs click

---
 .../nodes/DataVizBox/components/Histogram.tsx      | 81 ++++++++++++++--------
 1 file changed, 52 insertions(+), 29 deletions(-)

diff --git a/src/client/views/nodes/DataVizBox/components/Histogram.tsx b/src/client/views/nodes/DataVizBox/components/Histogram.tsx
index cb882cf4a..092718e17 100644
--- a/src/client/views/nodes/DataVizBox/components/Histogram.tsx
+++ b/src/client/views/nodes/DataVizBox/components/Histogram.tsx
@@ -46,6 +46,7 @@ export class Histogram extends React.Component<HistogramProps> {
     @observable _currSelected: any | undefined = undefined;
     private curBarSelected: any = undefined;
     private selectedData: any = undefined;
+    private hoverOverData: any = undefined;
     // TODO: nda - some sort of mapping that keeps track of the annotated points so we can easily remove when annotations list updates
 
     @computed get _histogramData() {
@@ -214,6 +215,39 @@ export class Histogram extends React.Component<HistogramProps> {
         return data;
     }
 
+    highlightSelectedBar = (changeSelectedVariables: boolean, svg: any, eachRectWidth: any, pointerX: any, xAxisTitle: any, yAxisTitle: any, histDataSet: any) => {
+        var sameAsCurrent: boolean;
+        var barCounter = -1;
+        const selected = svg.selectAll('.histogram-bar').filter((d: any) => {
+            barCounter++;
+            if ((barCounter*eachRectWidth ) <= pointerX && pointerX <= ((barCounter+1)*eachRectWidth)){
+                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]){
+                        showSelected = {[xAxisTitle]: (d3.min(d) + " to " + d3.max(d)), frequency: d.length}
+                    }
+                    else if (!this.numericalYData) showSelected = {[xAxisTitle]: showSelected[xAxisTitle], frequency: d.length}
+                } 
+                if (changeSelectedVariables){
+                    sameAsCurrent = this._currSelected? 
+                        (showSelected[xAxisTitle]==this._currSelected![xAxisTitle] 
+                    && showSelected[yAxisTitle]==this._currSelected![yAxisTitle])
+                        : false;
+                    this._currSelected = sameAsCurrent? undefined: showSelected;
+                    this.selectedData = sameAsCurrent? undefined: d;
+                }
+                else this.hoverOverData = d;
+                return true
+            }
+            return false;
+        });
+        if (changeSelectedVariables){
+            if (sameAsCurrent!) this.curBarSelected = undefined;
+            else this.curBarSelected = selected;
+        }
+    }
+
     drawChart = (dataSet: any, width: number, height: number) => {
         d3.select(this._histogramRef.current).select('svg').remove();
         d3.select(this._histogramRef.current).select('.tooltip').remove();
@@ -320,35 +354,24 @@ export class Histogram extends React.Component<HistogramProps> {
             .attr("transform", "translate(" + translateXAxis + ", " + height + ")")
             .call(xAxis)
         
-        const onPointClick = action((e: any) => {
-            var pointerX = d3.pointer(e)[0];
-            var sameAsCurrent: boolean;
-            var barCounter = -1;
-            const selected = svg.selectAll('.histogram-bar').filter((d: any) => {
-                barCounter++;
-                if ((barCounter*eachRectWidth ) <= pointerX && pointerX <= ((barCounter+1)*eachRectWidth)){
-                    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]){
-                            showSelected = {[xAxisTitle]: (d3.min(d) + " to " + d3.max(d)), frequency: d.length}
-                        }
-                        else if (!this.numericalYData) showSelected = {[xAxisTitle]: showSelected[xAxisTitle], frequency: d.length}
-                    } 
-                    sameAsCurrent = this._currSelected? 
-                        (showSelected[xAxisTitle]==this._currSelected![xAxisTitle] 
-                      && showSelected[yAxisTitle]==this._currSelected![yAxisTitle])
-                        : false;
-                    this._currSelected = sameAsCurrent? undefined: showSelected;
-                    this.selectedData = sameAsCurrent? undefined: d;
-                    return true
-                }
-                return false;
-            });
-            if (sameAsCurrent!) this.curBarSelected = undefined;
-            else this.curBarSelected = selected;
-        });
-        svg.on('click', onPointClick);
+        const onPointClick = action((e: any) => this.highlightSelectedBar(true, svg, eachRectWidth, d3.pointer(e)[0], xAxisTitle, yAxisTitle, histDataSet));
+        const onHover = action((e: any) => {
+            const selected = this.highlightSelectedBar(false, svg, eachRectWidth, d3.pointer(e)[0], xAxisTitle, yAxisTitle, histDataSet)
+            updateHighlights();
+        })
+        const mouseOut = action((e: any) => {
+            this.hoverOverData = undefined;
+            updateHighlights();
+        })
+        const updateHighlights = () => {
+            const hoverOverBar = this.hoverOverData;
+            const selectedData = this.selectedData;
+            svg.selectAll('rect').attr("class", function(d) { return ((hoverOverBar && hoverOverBar[0]==d[0]) || selectedData && selectedData[0]==d[0])? 'histogram-bar hover' : 'histogram-bar'; })
+        }
+
+        svg.on('click', onPointClick)
+            .on('mouseover', onHover)
+            .on('mouseout', mouseOut)
 
         var selected = this.selectedData;
         svg.append("text")
-- 
cgit v1.2.3-70-g09d2


From b44722cc4e35b994ad50d47cf2586785b3e0ab2d Mon Sep 17 00:00:00 2001
From: srichman333 <sarah_n_richman@brown.edu>
Date: Tue, 8 Aug 2023 11:19:54 -0400
Subject: hover vs click working for all 3 graph types

---
 .../nodes/DataVizBox/components/Histogram.tsx      |   6 +-
 .../nodes/DataVizBox/components/LineChart.tsx      |   3 +-
 .../views/nodes/DataVizBox/components/PieChart.tsx | 102 +++++++++++++--------
 3 files changed, 68 insertions(+), 43 deletions(-)

diff --git a/src/client/views/nodes/DataVizBox/components/Histogram.tsx b/src/client/views/nodes/DataVizBox/components/Histogram.tsx
index 092718e17..6591581f7 100644
--- a/src/client/views/nodes/DataVizBox/components/Histogram.tsx
+++ b/src/client/views/nodes/DataVizBox/components/Histogram.tsx
@@ -282,7 +282,7 @@ export class Histogram extends React.Component<HistogramProps> {
                 }
                 for (let i=0; i<data.length; i++){
                     let barData = histStringDataSet.filter(each => each[xAxisTitle]==data[i])
-                    barData[0][yAxisTitle] = barData[0][yAxisTitle] + 1;
+                    barData[0][yAxisTitle] = Number(barData[0][yAxisTitle]) + 1;
                 }
             }
             histDataSet = histStringDataSet
@@ -340,7 +340,7 @@ export class Histogram extends React.Component<HistogramProps> {
             xAxis = d3.axisBottom(x)
                 .ticks(numBins-1)
         }
-        const maxFrequency = this.numericalYData? d3.max(histDataSet, function(d) { return d[yAxisTitle]!.replace(/\$/g, '').replace(/\%/g, '').replace(/\</g, '')})
+        const maxFrequency = this.numericalYData? d3.max(histDataSet, function(d: any) { return d[yAxisTitle]!.replace(/\$/g, '').replace(/\%/g, '').replace(/\</g, '')})
                     : d3.max(bins, function(d) { return d.length; })
 
         var y = d3.scaleLinear()
@@ -366,7 +366,7 @@ export class Histogram extends React.Component<HistogramProps> {
         const updateHighlights = () => {
             const hoverOverBar = this.hoverOverData;
             const selectedData = this.selectedData;
-            svg.selectAll('rect').attr("class", function(d) { return ((hoverOverBar && hoverOverBar[0]==d[0]) || selectedData && selectedData[0]==d[0])? 'histogram-bar hover' : 'histogram-bar'; })
+            svg.selectAll('rect').attr("class", function(d: any) { return ((hoverOverBar && hoverOverBar[0]==d[0]) || selectedData && selectedData[0]==d[0])? 'histogram-bar hover' : 'histogram-bar'; })
         }
 
         svg.on('click', onPointClick)
diff --git a/src/client/views/nodes/DataVizBox/components/LineChart.tsx b/src/client/views/nodes/DataVizBox/components/LineChart.tsx
index 3a416c401..16794886e 100644
--- a/src/client/views/nodes/DataVizBox/components/LineChart.tsx
+++ b/src/client/views/nodes/DataVizBox/components/LineChart.tsx
@@ -214,7 +214,8 @@ export class LineChart extends React.Component<LineChartProps> {
     @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;
+        if (this._currSelected && this._currSelected.x==x && this._currSelected.y==y) this._currSelected = undefined;
+        else 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));
     }
 
diff --git a/src/client/views/nodes/DataVizBox/components/PieChart.tsx b/src/client/views/nodes/DataVizBox/components/PieChart.tsx
index ca93a2942..913bdd9a4 100644
--- a/src/client/views/nodes/DataVizBox/components/PieChart.tsx
+++ b/src/client/views/nodes/DataVizBox/components/PieChart.tsx
@@ -43,6 +43,7 @@ export class PieChart extends React.Component<PieChartProps> {
     @observable _currSelected: any | undefined = undefined;
     private curSliceSelected: any = undefined;
     private selectedData: any = undefined;
+    private hoverOverData: any = undefined;
     // TODO: nda - some sort of mapping that keeps track of the annotated points so we can easily remove when annotations list updates
 
     @computed get _piechartData() {
@@ -219,6 +220,50 @@ export class PieChart extends React.Component<PieChartProps> {
         return data;
     }
 
+    highlightSelectedSlice = (changeSelectedVariables: boolean, svg: any, arc: any, radius: any, pointer: any, pieDataSet: any) => {
+            var index = -1;
+            var sameAsCurrent: boolean;
+            const selected = svg.selectAll('.slice').filter((d: any) => {
+                index++;
+                var p1 = [0,0];
+                var p3 = [arc.centroid(d)[0]*2, arc.centroid(d)[1]*2];
+                var p2 = [radius*Math.sin(d.startAngle), -radius*Math.cos(d.startAngle)];
+                var p4 = [radius*Math.sin(d.endAngle), -radius*Math.cos(d.endAngle)];
+
+                // draw an imaginary horizontal line from the pointer to see how many times it crosses a slice edge
+                var lineCrossCount = 0;
+                // if for all 4 lines
+                if (Math.min(p1[1], p2[1])<=pointer[1] && pointer[1]<=Math.max(p1[1], p2[1])){ // within y bounds
+                    if (pointer[0] <= (pointer[1]-p1[1])*(p2[0]-p1[0])/(p2[1]-p1[1])+p1[0]) lineCrossCount++; } // intercepts x
+                if (Math.min(p2[1], p3[1])<=pointer[1] && pointer[1]<=Math.max(p2[1], p3[1])){
+                    if (pointer[0] <= (pointer[1]-p2[1])*(p3[0]-p2[0])/(p3[1]-p2[1])+p2[0]) lineCrossCount++; }
+                if (Math.min(p3[1], p4[1])<=pointer[1] && pointer[1]<=Math.max(p3[1], p4[1])){
+                    if (pointer[0] <= (pointer[1]-p3[1])*(p4[0]-p3[0])/(p4[1]-p3[1])+p3[0]) lineCrossCount++; }
+                if (Math.min(p4[1], p1[1])<=pointer[1] && pointer[1]<=Math.max(p4[1], p1[1])){
+                    if (pointer[0] <= (pointer[1]-p4[1])*(p1[0]-p4[0])/(p1[1]-p4[1])+p4[0]) lineCrossCount++; }
+                if (lineCrossCount % 2 != 0) {
+                    var showSelected = this.byCategory? pieDataSet[index] : this._piechartData[index];
+
+                    if (changeSelectedVariables){
+                        sameAsCurrent = (this.byCategory && this._currSelected)? 
+                            (showSelected[Object.keys(showSelected)[0]]==this._currSelected![Object.keys(showSelected)[0]] 
+                        && showSelected[Object.keys(showSelected)[1]]==this._currSelected![Object.keys(showSelected)[1]])
+                            : 
+                            this._currSelected===showSelected;
+                        this._currSelected = sameAsCurrent? undefined: showSelected;
+                        this.selectedData = sameAsCurrent? undefined: d;
+                    }
+                    else this.hoverOverData = d;
+                    return true;
+                }
+                return false;
+            });
+            if (changeSelectedVariables){
+                if (sameAsCurrent!) this.curSliceSelected = undefined;
+                else  this.curSliceSelected = selected;
+            }
+    }
+
     drawChart = (dataSet: any, width: number, height: number) => {
         d3.select(this._piechartRef.current).select('svg').remove();
         d3.select(this._piechartRef.current).select('.tooltip').remove();
@@ -269,45 +314,22 @@ export class PieChart extends React.Component<PieChartProps> {
             .innerRadius(0)
             .outerRadius(radius);
 
-        const onPointClick = action((e: any) => {
-            // check the 4 'corners' of each slice and see if the pointer is within those bounds to get the slice the user clicked on
-            const pointer = d3.pointer(e);
-            var index = -1;
-            var sameAsCurrent: boolean;
-            const selected = svg.selectAll('.slice').filter((d: any) => {
-                index++;
-                var p1 = [0,0];
-                var p3 = [arc.centroid(d)[0]*2, arc.centroid(d)[1]*2];
-                var p2 = [radius*Math.sin(d.startAngle), -radius*Math.cos(d.startAngle)];
-                var p4 = [radius*Math.sin(d.endAngle), -radius*Math.cos(d.endAngle)];
-
-                // draw an imaginary horizontal line from the pointer to see how many times it crosses a slice edge
-                var lineCrossCount = 0;
-                // if for all 4 lines
-                if (Math.min(p1[1], p2[1])<=pointer[1] && pointer[1]<=Math.max(p1[1], p2[1])){ // within y bounds
-                    if (pointer[0] <= (pointer[1]-p1[1])*(p2[0]-p1[0])/(p2[1]-p1[1])+p1[0]) lineCrossCount++; } // intercepts x
-                if (Math.min(p2[1], p3[1])<=pointer[1] && pointer[1]<=Math.max(p2[1], p3[1])){
-                    if (pointer[0] <= (pointer[1]-p2[1])*(p3[0]-p2[0])/(p3[1]-p2[1])+p2[0]) lineCrossCount++; }
-                if (Math.min(p3[1], p4[1])<=pointer[1] && pointer[1]<=Math.max(p3[1], p4[1])){
-                    if (pointer[0] <= (pointer[1]-p3[1])*(p4[0]-p3[0])/(p4[1]-p3[1])+p3[0]) lineCrossCount++; }
-                if (Math.min(p4[1], p1[1])<=pointer[1] && pointer[1]<=Math.max(p4[1], p1[1])){
-                    if (pointer[0] <= (pointer[1]-p4[1])*(p1[0]-p4[0])/(p1[1]-p4[1])+p4[0]) lineCrossCount++; }
-                if (lineCrossCount % 2 != 0) {
-                    var showSelected = this.byCategory? pieDataSet[index] : this._piechartData[index];
-                    sameAsCurrent = (this.byCategory && this._currSelected)? 
-                        (showSelected[Object.keys(showSelected)[0]]==this._currSelected![Object.keys(showSelected)[0]] 
-                      && showSelected[Object.keys(showSelected)[1]]==this._currSelected![Object.keys(showSelected)[1]])
-                        : 
-                        this._currSelected===showSelected;
-                    this._currSelected = sameAsCurrent? undefined: showSelected;
-                    this.selectedData = sameAsCurrent? undefined: d;
-                    return true;
-                }
-                return false;
-            });
-            if (sameAsCurrent!) this.curSliceSelected = undefined;
-            else  this.curSliceSelected = selected;
-        });
+        const onPointClick = action((e: any) => this.highlightSelectedSlice(true, svg, arc, radius, d3.pointer(e), pieDataSet));
+        const onHover = action((e: any) => {
+            const selected = this.highlightSelectedSlice(false, svg, arc, radius, d3.pointer(e), pieDataSet)
+            updateHighlights();
+        })
+        const mouseOut = action((e: any) => {
+            this.hoverOverData = undefined;
+            updateHighlights();
+        })
+        const updateHighlights = () => {
+            const hoverOverSlice = this.hoverOverData;
+            const selectedData = this.selectedData;
+            svg.selectAll('path').attr("class", function(d: any) { 
+                return ((selectedData && d.startAngle==selectedData.startAngle && d.endAngle==selectedData.endAngle)
+                    || ((hoverOverSlice && d.startAngle==hoverOverSlice.startAngle && d.endAngle==hoverOverSlice.endAngle)))? 'slice hover' : 'slice'; })
+        }
 
         var selected = this.selectedData;
         var arcs = g.selectAll("arc")
@@ -339,6 +361,8 @@ export class PieChart extends React.Component<PieChartProps> {
                 }: function(d) {return 'slice'})
             .attr("d", arc)
             .on('click', onPointClick)
+            .on('mouseover', onHover)
+            .on('mouseout', mouseOut);
 
         trackDuplicates = {};
         data.forEach((eachData: any) => !trackDuplicates[eachData]? trackDuplicates[eachData] = 0: null)
-- 
cgit v1.2.3-70-g09d2


From 5614478b54b754665faff41c9a09b9bd0535e2f5 Mon Sep 17 00:00:00 2001
From: srichman333 <sarah_n_richman@brown.edu>
Date: Tue, 8 Aug 2023 14:25:18 -0400
Subject: histogram bug fixes

---
 .../views/nodes/DataVizBox/components/Histogram.tsx    | 18 ++++++++++++++----
 .../views/nodes/DataVizBox/components/PieChart.tsx     |  2 +-
 2 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/src/client/views/nodes/DataVizBox/components/Histogram.tsx b/src/client/views/nodes/DataVizBox/components/Histogram.tsx
index 6591581f7..26c40045c 100644
--- a/src/client/views/nodes/DataVizBox/components/Histogram.tsx
+++ b/src/client/views/nodes/DataVizBox/components/Histogram.tsx
@@ -16,6 +16,7 @@ import { ColorPicker, EditableText, IconButton, Size, Type } from "browndash-com
 import { FaFillDrip } from "react-icons/fa";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { listSpec } from "../../../../../fields/Schema";
+import { scaleCreatorNumerical, yAxisCreator } from "../utils/D3Utils";
 
 export interface HistogramProps {
     rootDoc: Doc;
@@ -63,7 +64,7 @@ export class Histogram extends React.Component<HistogramProps> {
         var ax0 = this.props.axes[0];
         var ax1 = this.props.axes[1];
         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;}
+        if (/\d/.test(this.props.pairs[0][ax1]) ) { this.numericalYData = true;}
         return this.props.pairs
             ?.filter(pair => (!this.incomingLinks.length ? true : this.incomingLinks[0]!.selected && StrListCast(this.incomingLinks[0].selected).includes(guids[this.props.pairs.indexOf(pair)])))
             .map(pair => ({ [ax0]: (pair[this.props.axes[0]]), [ax1]: (pair[this.props.axes[1]]) }))
@@ -282,7 +283,7 @@ export class Histogram extends React.Component<HistogramProps> {
                 }
                 for (let i=0; i<data.length; i++){
                     let barData = histStringDataSet.filter(each => each[xAxisTitle]==data[i])
-                    barData[0][yAxisTitle] = Number(barData[0][yAxisTitle]) + 1;
+                    histStringDataSet.filter(each => each[xAxisTitle]==data[i])[0][yAxisTitle] = Number(barData[0][yAxisTitle]) + 1;
                 }
             }
             histDataSet = histStringDataSet
@@ -337,10 +338,13 @@ export class Histogram extends React.Component<HistogramProps> {
             translateXAxis = eachRectWidth / 2;
         }
         else {
+            eachRectWidth = width/(bins.length+1)
+            x.range([0, width-eachRectWidth])
             xAxis = d3.axisBottom(x)
                 .ticks(numBins-1)
         }
-        const maxFrequency = this.numericalYData? d3.max(histDataSet, function(d: any) { return d[yAxisTitle]!.replace(/\$/g, '').replace(/\%/g, '').replace(/\</g, '')})
+        const maxFrequency = this.numericalYData? d3.max(histDataSet, function(d: any) { 
+            return Number(d[yAxisTitle]!.replace(/\$/g, '').replace(/\%/g, '').replace(/\</g, ''))})
                     : d3.max(bins, function(d) { return d.length; })
 
         var y = d3.scaleLinear()
@@ -348,8 +352,14 @@ export class Histogram extends React.Component<HistogramProps> {
             y.domain([0, +maxFrequency!]);
         var yAxis = d3.axisLeft(y)
             .ticks(maxFrequency!)
-        svg.append("g")
+        if (this.numericalYData){
+            const yScale = scaleCreatorNumerical(0, Number(maxFrequency), height, 0);
+            yAxisCreator(svg.append('g'), width, yScale);
+        }
+        else{
+            svg.append("g")
             .call(yAxis);
+        }
         svg.append("g")
             .attr("transform", "translate(" + translateXAxis + ", " + height + ")")
             .call(xAxis)
diff --git a/src/client/views/nodes/DataVizBox/components/PieChart.tsx b/src/client/views/nodes/DataVizBox/components/PieChart.tsx
index 913bdd9a4..0fd4f6b54 100644
--- a/src/client/views/nodes/DataVizBox/components/PieChart.tsx
+++ b/src/client/views/nodes/DataVizBox/components/PieChart.tsx
@@ -245,7 +245,7 @@ export class PieChart extends React.Component<PieChartProps> {
                     var showSelected = this.byCategory? pieDataSet[index] : this._piechartData[index];
 
                     if (changeSelectedVariables){
-                        sameAsCurrent = (this.byCategory && this._currSelected)? 
+                        sameAsCurrent = (this._currSelected)? 
                             (showSelected[Object.keys(showSelected)[0]]==this._currSelected![Object.keys(showSelected)[0]] 
                         && showSelected[Object.keys(showSelected)[1]]==this._currSelected![Object.keys(showSelected)[1]])
                             : 
-- 
cgit v1.2.3-70-g09d2


From 318d56e1dff94204b100f5636e1a3288724aaffc Mon Sep 17 00:00:00 2001
From: srichman333 <sarah_n_richman@brown.edu>
Date: Tue, 8 Aug 2023 16:15:36 -0400
Subject: comments + cleanups

---
 src/client/views/nodes/DataVizBox/DataVizBox.tsx   |  47 +------
 .../nodes/DataVizBox/components/Histogram.tsx      | 120 ++++------------
 .../views/nodes/DataVizBox/components/PieChart.tsx | 155 +++++----------------
 .../views/nodes/DataVizBox/components/TableBox.tsx |   7 +-
 src/client/views/nodes/DataVizBox/utils/D3Utils.ts |   1 -
 5 files changed, 78 insertions(+), 252 deletions(-)

diff --git a/src/client/views/nodes/DataVizBox/DataVizBox.tsx b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
index 9a4546900..e71739231 100644
--- a/src/client/views/nodes/DataVizBox/DataVizBox.tsx
+++ b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
@@ -26,45 +26,20 @@ export enum DataVizView {
 @observer
 export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
 
-    public static LayoutString(fieldKey: string) {
-        return FieldView.LayoutString(DataVizBox, fieldKey);
-    }
-    // says we have an object and any string
-    // 2 ways of doing it
-    // @observable private pairs: { [key: string]: number | string | undefined }[] = [];
-    // @observable private pairs: { [key: string]: FieldResult }[] = [];
+    // all data
     static pairSet = new ObservableMap<string, { [key: string]: string }[]>();
     @computed.struct get pairs() {
         return DataVizBox.pairSet.get(CsvCast(this.rootDoc[this.fieldKey]).url.href);
     }
-    private _chartRenderer: LineChart | Histogram | PieChart | undefined;
-    // // another way would be store a schema that defines the type of data we are expecting from an imported doc
-
-    // method1() {
-    //     this.pairs[0].x = 3;
-    // }
-
-    // method() {
-    //     // this.pairs[0].x = 3;
-    //     // go through the pairs
-    //     const x = this.pairs[0].x;
-    //     if (typeof x == 'number') {
-    //         let x1 = Number(x);
-    //         // let x1 = NumCast(x);
-    //     }
-    // }
 
-    // could use field result
-    // [key: string]: FieldResult;
-    // instead of numeric x,y in there,
-
-    // TODO: nda - use onmousedown and onmouseup when dragging and changing height and width to update the height and width props only when dragging stops
+    private _chartRenderer: LineChart | Histogram | PieChart | undefined;
 
+    // current displayed chart type
     @computed get dataVizView(): DataVizView {
         return StrCast(this.layoutDoc._dataVizView, 'table') as DataVizView;
     }
 
-    @action
+    @action // pinned / linked anchor doc includes selected rows, graph titles, and graph colors
     restoreView = (data: Doc) => {
         const changedView = this.dataVizView !== data.presDataVizView && (this.layoutDoc._dataVizView = data.presDataVizView);
         const changedAxes = this.axes.join('') !== StrListCast(data.presDataVizAxes).join('') && (this.layoutDoc._data_vizAxes = new List<string>(StrListCast(data.presDataVizAxes)));
@@ -75,7 +50,6 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         Object.keys(this.layoutDoc).map(key => {
             if (key.startsWith('histogram-title') || key.startsWith('lineChart-title') || key.startsWith('pieChart-title')){ this.layoutDoc['_'+key] = data[key]; }
         })
-
         const func = () => this._chartRenderer?.restoreView(data);
         if (changedView || changedAxes) {
             setTimeout(func, 100);
@@ -83,7 +57,6 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         }
         return func() ?? false;
     };
-
     getAnchor = (addAsAnnotation?: boolean, pinProps?: PinProps) => {
         const anchor = !pinProps
             ? this.rootDoc
@@ -93,7 +66,6 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
                   // this is for when we want the whole doc (so when the chartBox getAnchor returns without a marker)
                   /*put in some options*/
               });
-
         anchor.presDataVizView = this.dataVizView;
         anchor.presDataVizAxes = this.axes.length ? new List<string>(this.axes) : undefined;
         anchor.selected = Field.Copy(this.layoutDoc.selected);
@@ -103,7 +75,6 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         Object.keys(this.layoutDoc).map(key => {
             if (key.startsWith('histogram-title') || key.startsWith('lineChart-title') || key.startsWith('pieChart-title')){ anchor[key] = this.layoutDoc[key]; }
         })
-
         this.addDocument(anchor);
         return anchor;
     };
@@ -113,6 +84,7 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
     }
     selectAxes = (axes: string[]) => (this.layoutDoc.data_vizAxes = new List<string>(axes));
 
+    // toggles for user to decide which chart type to view the data in
     @computed get selectView() {
         const width = this.props.PanelWidth() * 0.9;
         const height = (this.props.PanelHeight() - 32) /* height of 'change view' button */ * 0.9;
@@ -125,6 +97,7 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
             case DataVizView.PIECHART: return <PieChart layoutDoc={this.layoutDoc} 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} />;
         }
     }
+
     @computed get dataUrl() {
         return Cast(this.dataDoc[this.fieldKey], CsvField);
     }
@@ -141,16 +114,10 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
             .then(res => res.json().then(action(res => !res.errno && DataVizBox.pairSet.set(CsvCast(this.rootDoc[this.fieldKey]).url.href, res))));
     }
 
-    // handle changing the view using a button
-    @action changeViewHandler(e: React.MouseEvent<HTMLButtonElement>) {
-        e.preventDefault();
-        e.stopPropagation();
-        this.layoutDoc._dataVizView = this.dataVizView === DataVizView.TABLE ? DataVizView.LINECHART : DataVizView.TABLE;
-    }
-
     render() {
         if (!this.layoutDoc._dataVizView) this.layoutDoc._dataVizView = this.dataVizView;
         return !this.pairs?.length ? (
+            // displays how to get data into the DataVizBox if its empty
             <div className="start-message">
                 To create a DataViz box, either import / drag a CSV file into your canvas
                 or copy a data table and use the command 'ctrl + t' to bring the data table
diff --git a/src/client/views/nodes/DataVizBox/components/Histogram.tsx b/src/client/views/nodes/DataVizBox/components/Histogram.tsx
index 26c40045c..0b35f2856 100644
--- a/src/client/views/nodes/DataVizBox/components/Histogram.tsx
+++ b/src/client/views/nodes/DataVizBox/components/Histogram.tsx
@@ -44,12 +44,12 @@ export class Histogram extends React.Component<HistogramProps> {
     private numericalXData: boolean = false; // whether the data is organized by numbers rather than categoreis
     private numericalYData: boolean = false; // whether the y axis is controlled by provided data rather than frequency
     private maxBins = 15; // maximum number of bins that is readable on a normal sized doc
-    @observable _currSelected: any | undefined = undefined;
-    private curBarSelected: any = undefined;
-    private selectedData: any = undefined;
-    private hoverOverData: any = undefined;
-    // TODO: nda - some sort of mapping that keeps track of the annotated points so we can easily remove when annotations list updates
+    @observable _currSelected: any | undefined = undefined; // Object of selected bar
+    private curBarSelected: any = undefined; // histogram bin of selected bar
+    private selectedData: any = undefined; // Selection of selected bar
+    private hoverOverData: any = undefined; // Selection of bar being hovered over
 
+    // filters all data to just display selected data if brushed (created from an incoming link)
     @computed get _histogramData() {
         var guids = StrListCast(this.props.layoutDoc.rowGuids);
         if (this.props.axes.length < 1) return [];
@@ -60,7 +60,6 @@ export class Histogram extends React.Component<HistogramProps> {
                 ?.filter(pair => (!this.incomingLinks.length ? true : this.incomingLinks[0]!.selected && StrListCast(this.incomingLinks[0].selected).includes(guids[this.props.pairs.indexOf(pair)])))
                 .map(pair => ({ [ax0]: (pair[this.props.axes[0]])}))
         };
-
         var ax0 = this.props.axes[0];
         var ax1 = this.props.axes[1];
         if (/\d/.test(this.props.pairs[0][ax0])) { this.numericalXData = true;}
@@ -69,6 +68,7 @@ export class Histogram extends React.Component<HistogramProps> {
             ?.filter(pair => (!this.incomingLinks.length ? true : this.incomingLinks[0]!.selected && StrListCast(this.incomingLinks[0].selected).includes(guids[this.props.pairs.indexOf(pair)])))
             .map(pair => ({ [ax0]: (pair[this.props.axes[0]]), [ax1]: (pair[this.props.axes[1]]) }))
     }
+
     @computed get defaultGraphTitle(){
         var ax0 = this.props.axes[0];
         var ax1 = (this.props.axes.length>1)? this.props.axes[1] : undefined;
@@ -77,21 +77,13 @@ export class Histogram extends React.Component<HistogramProps> {
         }
         else return ax1 + " by " + ax0 + " Histogram";
     }    
+
     @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
+            .filter(link => 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() {
-        // return selected x and y axes
-        // otherwise, use the selection of whatever is linked to us
-        return this.incomingLinks // all links that are pointing to this node
-            .map(anchor => DocumentManager.Instance.getFirstDocumentView(anchor)?.ComponentView as DataVizBox) // get their data viz boxes
-            .filter(dvb => dvb)
-            .map(dvb => dvb.pairs?.filter((pair: { [x: string]: any; }) => pair['select' + dvb.rootDoc[Id]])) // get all the datapoints they have selected field set by incoming anchor
-            .lastElement();
-    }
+
     @computed get rangeVals(): { xMin?: number; xMax?: number; yMin?: number; yMax?: number } {
         if (this.numericalXData){
             const data = this.data(this._histogramData);
@@ -99,6 +91,7 @@ export class Histogram extends React.Component<HistogramProps> {
         }
         return {xMin:0, xMax:0, yMin:0, yMax:0}
     }
+
     componentWillUnmount() {
         Array.from(Object.keys(this._disposers)).forEach(key => this._disposers[key]());
     }
@@ -108,79 +101,14 @@ export class Histogram extends React.Component<HistogramProps> {
             ({ dataSet, w, h }) => {
                 if (dataSet!.length>0) {
                     this.drawChart(dataSet, w, h);
-
-                    // redraw annotations when the chart data has changed, or the local or inherited selection has changed
-                    this.clearAnnotations();
-                    this._currSelected && this.drawAnnotations(Number(this._currSelected.x), Number(this._currSelected.y), true);
-                    this.incomingSelected?.forEach((pair: any) => this.drawAnnotations(Number(pair[this.props.axes[0]]), Number(pair[this.props.axes[1]])));
                 }
             },
             { fireImmediately: true }
         );
-        this._disposers.annos = reaction(
-            () => DocListCast(this.props.dataDoc[this.props.fieldKey + '_annotations']),
-            annotations => {
-                // modify how d3 renders so that anything in this annotations list would be potentially highlighted in some way
-                // could be blue colored to make it look like anchor
-                // this.drawAnnotations()
-                // loop through annotations and draw them
-                annotations.forEach(a => this.drawAnnotations(Number(a.x), Number(a.y)));
-                // this.drawAnnotations(annotations.x, annotations.y);
-            },
-            { fireImmediately: true }
-        );
-        this._disposers.highlights = reaction(
-            () => ({
-                selected: this._currSelected,
-                incomingSelected: this.incomingSelected,
-            }),
-            ({ selected, incomingSelected }) => {
-                // redraw annotations when the chart data has changed, or the local or inherited selection has changed
-                this.clearAnnotations();
-                selected && this.drawAnnotations(Number(selected.x), Number(selected.y), true);
-                incomingSelected?.forEach((pair: any) => this.drawAnnotations(Number(pair[this.props.axes[0]]), Number(pair[this.props.axes[1]])));
-            },
-            { fireImmediately: true }
-        );
     };
 
-    // anything that doesn't need to be recalculated should just be stored as drawCharts (i.e. computed values) and drawChart is gonna iterate over these observables and generate svgs based on that
-
-    clearAnnotations = () => {
-        const elements = document.querySelectorAll('.datapoint');
-        for (let i = 0; i < elements.length; i++) {
-            const element = elements[i];
-            element.classList.remove('brushed');
-            element.classList.remove('selected');
-        }
-    };
-    // gets called whenever the "data_annotations" fields gets updated
-    drawAnnotations = (dataX: number, dataY: number, selected?: boolean) => {
-        // TODO: nda - can optimize this by having some sort of mapping of the x and y values to the individual circle elements
-        // loop through all html elements with class .circle-d1 and find the one that has "data-x" and "data-y" attributes that match the dataX and dataY
-        // if it exists, then highlight it
-        // if it doesn't exist, then remove the highlight
-        const elements = document.querySelectorAll('.datapoint');
-        for (let i = 0; i < elements.length; i++) {
-            const element = elements[i];
-            const x = element.getAttribute('data-x');
-            const y = element.getAttribute('data-y');
-            if (x === dataX.toString() && y === dataY.toString()) {
-                element.classList.add(selected ? 'selected' : 'brushed');
-            }
-            // TODO: nda - this remove highlight code should go where we remove the links
-            // } else {
-            // }
-        }
-    };
-
-    removeAnnotations(dataX: number, dataY: number) {
-        // loop through and remove any annotations that no longer exist
-    }
-
     @action
     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({
@@ -188,7 +116,6 @@ export class Histogram extends React.Component<HistogramProps> {
             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]) : undefined;
         return anchor;
     };
 
@@ -200,6 +127,7 @@ export class Histogram extends React.Component<HistogramProps> {
         return this.props.width - this.props.margin.left - this.props.margin.right;
     }
 
+    // cleans data by converting numerical data to numbers and taking out empty cells
     data = (dataSet: any) => {
         var validData = dataSet.filter((d: { [x: string]: unknown; }) => {
             var valid = true;
@@ -216,21 +144,24 @@ export class Histogram extends React.Component<HistogramProps> {
         return data;
     }
 
+    // outlines the bar selected / hovered over
     highlightSelectedBar = (changeSelectedVariables: boolean, svg: any, eachRectWidth: any, pointerX: any, xAxisTitle: any, yAxisTitle: any, histDataSet: any) => {
         var sameAsCurrent: boolean;
         var barCounter = -1;
         const selected = svg.selectAll('.histogram-bar').filter((d: any) => {
-            barCounter++;
+            barCounter++; // uses the order of bars and width of each bar to find which one the pointer is over
             if ((barCounter*eachRectWidth ) <= pointerX && pointerX <= ((barCounter+1)*eachRectWidth)){
                 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){
+                    // calculating frequency
                     if (d[0] && d[1] && d[0]!=d[1]){
                         showSelected = {[xAxisTitle]: (d3.min(d) + " to " + d3.max(d)), frequency: d.length}
                     }
                     else if (!this.numericalYData) showSelected = {[xAxisTitle]: showSelected[xAxisTitle], frequency: d.length}
                 } 
                 if (changeSelectedVariables){
+                    // for when a bar is selected - not just hovered over
                     sameAsCurrent = this._currSelected? 
                         (showSelected[xAxisTitle]==this._currSelected![xAxisTitle] 
                     && showSelected[yAxisTitle]==this._currSelected![yAxisTitle])
@@ -249,12 +180,12 @@ export class Histogram extends React.Component<HistogramProps> {
         }
     }
 
+    // draws the histogram
     drawChart = (dataSet: any, width: number, height: number) => {
         d3.select(this._histogramRef.current).select('svg').remove();
         d3.select(this._histogramRef.current).select('.tooltip').remove();
 
         var data = this.data(dataSet);
-        
         var xAxisTitle = Object.keys(dataSet[0])[0]
         var yAxisTitle = this.numericalYData ? Object.keys(dataSet[0])[1] : 'frequency';
         let uniqueArr: unknown[] = [...new Set(data)]
@@ -263,6 +194,8 @@ export class Histogram extends React.Component<HistogramProps> {
         if (numBins>this.maxBins) numBins = this.maxBins;
         var startingPoint = this.numericalXData? this.rangeVals.xMin! : 0;
         var endingPoint = this.numericalXData? this.rangeVals.xMax! : numBins;
+
+        // converts data into Objects
         var histDataSet = dataSet.filter((d: { [x: string]: unknown; }) => {
             var valid = true;
             Object.keys(dataSet[0]).map(key => {
@@ -289,6 +222,7 @@ export class Histogram extends React.Component<HistogramProps> {
             histDataSet = histStringDataSet
         }
 
+        // initial graph and binning data for histogram
         var svg = (this._histogramSvg = d3
             .select(this._histogramRef.current)
             .append("svg")
@@ -298,7 +232,6 @@ export class Histogram extends React.Component<HistogramProps> {
             .append("g")
                 .attr("transform",
                       "translate(" + this.props.margin.left + "," + this.props.margin.top + ")"));
-
         var x = d3.scaleLinear()
                 .domain(this.numericalXData? [startingPoint!, endingPoint!] : [0, numBins])
                 .range([0, width ]);
@@ -314,6 +247,8 @@ export class Histogram extends React.Component<HistogramProps> {
              .range([0, Number.isInteger(this.rangeVals.xMin!)? (width-eachRectWidth) : width ])
         var xAxis;
 
+        // more calculations based on bins
+        // x-axis
         if (!this.numericalXData) { // reorganize if the data is strings rather than numbers
             // uniqueArr.sort()
             histDataSet.sort()
@@ -331,7 +266,7 @@ export class Histogram extends React.Component<HistogramProps> {
             bins.forEach(d => d.x0 = d.x0!)
             xAxis = d3.axisBottom(x)
                 .ticks(bins.length-1)
-                .tickFormat( i => uniqueArr[i])
+                .tickFormat( i => uniqueArr[i.valueOf()] as string)
                 .tickPadding(10)
             x.range([0, width-eachRectWidth])
             x.domain([0, bins.length-1])
@@ -343,10 +278,10 @@ export class Histogram extends React.Component<HistogramProps> {
             xAxis = d3.axisBottom(x)
                 .ticks(numBins-1)
         }
+        // y-axis
         const maxFrequency = this.numericalYData? d3.max(histDataSet, function(d: any) { 
             return Number(d[yAxisTitle]!.replace(/\$/g, '').replace(/\%/g, '').replace(/\</g, ''))})
                     : d3.max(bins, function(d) { return d.length; })
-
         var y = d3.scaleLinear()
             .range([height, 0]);
             y.domain([0, +maxFrequency!]);
@@ -363,7 +298,8 @@ export class Histogram extends React.Component<HistogramProps> {
         svg.append("g")
             .attr("transform", "translate(" + translateXAxis + ", " + height + ")")
             .call(xAxis)
-        
+
+        // click/hover
         const onPointClick = action((e: any) => this.highlightSelectedBar(true, svg, eachRectWidth, d3.pointer(e)[0], xAxisTitle, yAxisTitle, histDataSet));
         const onHover = action((e: any) => {
             const selected = this.highlightSelectedBar(false, svg, eachRectWidth, d3.pointer(e)[0], xAxisTitle, yAxisTitle, histDataSet)
@@ -378,12 +314,11 @@ export class Histogram extends React.Component<HistogramProps> {
             const selectedData = this.selectedData;
             svg.selectAll('rect').attr("class", function(d: any) { return ((hoverOverBar && hoverOverBar[0]==d[0]) || selectedData && selectedData[0]==d[0])? 'histogram-bar hover' : 'histogram-bar'; })
         }
-
         svg.on('click', onPointClick)
             .on('mouseover', onHover)
             .on('mouseout', mouseOut)
 
-        var selected = this.selectedData;
+        // axis titles
         svg.append("text")
             .attr("transform", "translate(" + (width/2) + " ," + (height+40) + ")")
             .style("text-anchor", "middle")
@@ -395,6 +330,9 @@ export class Histogram extends React.Component<HistogramProps> {
             .style("text-anchor", "middle")
             .text(yAxisTitle);
         d3.format('.0f')
+
+        // draw bars
+        var selected = this.selectedData;
         svg.selectAll("rect")
             .data(bins)
             .enter()
diff --git a/src/client/views/nodes/DataVizBox/components/PieChart.tsx b/src/client/views/nodes/DataVizBox/components/PieChart.tsx
index 0fd4f6b54..d4570dee2 100644
--- a/src/client/views/nodes/DataVizBox/components/PieChart.tsx
+++ b/src/client/views/nodes/DataVizBox/components/PieChart.tsx
@@ -40,12 +40,12 @@ export class PieChart extends React.Component<PieChartProps> {
     private _piechartRef: React.RefObject<HTMLDivElement> = React.createRef();
     private _piechartSvg: d3.Selection<SVGGElement, unknown, null, undefined> | undefined;
     private byCategory: boolean = true; // whether the data is organized by category or by specified number percentages/ratios
-    @observable _currSelected: any | undefined = undefined;
-    private curSliceSelected: any = undefined;
-    private selectedData: any = undefined;
-    private hoverOverData: any = undefined;
-    // TODO: nda - some sort of mapping that keeps track of the annotated points so we can easily remove when annotations list updates
+    @observable _currSelected: any | undefined = undefined; // Object of selected slice
+    private curSliceSelected: any = undefined; // d3 data of selected slice
+    private selectedData: any = undefined; // Selection of selected slice
+    private hoverOverData: any = undefined; // Selection of slice being hovered over
 
+    // filters all data to just display selected data if brushed (created from an incoming link)
     @computed get _piechartData() {
         var guids = StrListCast(this.props.layoutDoc.rowGuids);
         if (this.props.axes.length < 1) return [];
@@ -56,7 +56,6 @@ export class PieChart extends React.Component<PieChartProps> {
                 ?.filter(pair => (!this.incomingLinks.length ? true :  this.incomingLinks[0]!.selected && StrListCast(this.incomingLinks[0].selected).includes(guids[this.props.pairs.indexOf(pair)])))
                 .map(pair => ({ [ax0]: (pair[this.props.axes[0]])}))
         };
-
         var ax0 = this.props.axes[0];
         var ax1 = this.props.axes[1];
         if (/\d/.test(this.props.pairs[0][ax0])) { this.byCategory = false; }
@@ -64,6 +63,7 @@ export class PieChart extends React.Component<PieChartProps> {
             ?.filter(pair => (!this.incomingLinks.length ? true :  this.incomingLinks[0]!.selected && StrListCast(this.incomingLinks[0].selected).includes(guids[this.props.pairs.indexOf(pair)])))
             .map(pair => ({ [ax0]: (pair[this.props.axes[0]]), [ax1]: (pair[this.props.axes[1]]) }))
     }
+
     @computed get defaultGraphTitle(){
         var ax0 = this.props.axes[0];
         var ax1 = (this.props.axes.length>1)? this.props.axes[1] : undefined;
@@ -72,28 +72,13 @@ export class PieChart extends React.Component<PieChartProps> {
         }
         else return ax1 + " by " + ax0 + " Pie Chart";
     }    
+
     @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
+            .filter(link => 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() {
-        // return selected x and y axes
-        // otherwise, use the selection of whatever is linked to us
-        return this.incomingLinks // all links that are pointing to this node
-            .map(anchor => DocumentManager.Instance.getFirstDocumentView(anchor)?.ComponentView as DataVizBox) // get their data viz boxes
-            .filter(dvb => dvb)
-            .map(dvb => dvb.pairs?.filter((pair: { [x: string]: any; }) => pair['select' + dvb.rootDoc[Id]])) // get all the datapoints they have selected field set by incoming anchor
-            .lastElement();
-    }
-    @computed get rangeVals(): { xMin?: number; xMax?: number; yMin?: number; yMax?: number } {
-        if (!this.byCategory){
-            const data = this.data(this._piechartData);
-            return {xMin: Math.min.apply(null, data), xMax: Math.max.apply(null, data), yMin:0, yMax:0}
-        }
-        return {xMin:0, xMax:0, yMin:0, yMax:0}
-    }
+
     componentWillUnmount() {
         Array.from(Object.keys(this._disposers)).forEach(key => this._disposers[key]());
     }
@@ -103,79 +88,14 @@ export class PieChart extends React.Component<PieChartProps> {
             ({ dataSet, w, h }) => {
                 if (dataSet!.length>0) {
                     this.drawChart(dataSet, w, h);
-
-                    // redraw annotations when the chart data has changed, or the local or inherited selection has changed
-                    this.clearAnnotations();
-                    this._currSelected && this.drawAnnotations(Number(this._currSelected.x), Number(this._currSelected.y), true);
-                    this.incomingSelected?.forEach((pair: any) => this.drawAnnotations(Number(pair[this.props.axes[0]]), Number(pair[this.props.axes[1]])));
                 }
             },
             { fireImmediately: true }
         );
-        this._disposers.annos = reaction(
-            () => DocListCast(this.props.dataDoc[this.props.fieldKey + '_annotations']),
-            annotations => {
-                // modify how d3 renders so that anything in this annotations list would be potentially highlighted in some way
-                // could be blue colored to make it look like anchor
-                // this.drawAnnotations()
-                // loop through annotations and draw them
-                annotations.forEach(a => this.drawAnnotations(Number(a.x), Number(a.y)));
-                // this.drawAnnotations(annotations.x, annotations.y);
-            },
-            { fireImmediately: true }
-        );
-        this._disposers.highlights = reaction(
-            () => ({
-                selected: this._currSelected,
-                incomingSelected: this.incomingSelected,
-            }),
-            ({ selected, incomingSelected }) => {
-                // redraw annotations when the chart data has changed, or the local or inherited selection has changed
-                this.clearAnnotations();
-                selected && this.drawAnnotations(Number(selected.x), Number(selected.y), true);
-                incomingSelected?.forEach((pair: any) => this.drawAnnotations(Number(pair[this.props.axes[0]]), Number(pair[this.props.axes[1]])));
-            },
-            { fireImmediately: true }
-        );
-    };
-
-    // anything that doesn't need to be recalculated should just be stored as drawCharts (i.e. computed values) and drawChart is gonna iterate over these observables and generate svgs based on that
-
-    clearAnnotations = () => {
-        const elements = document.querySelectorAll('.datapoint');
-        for (let i = 0; i < elements.length; i++) {
-            const element = elements[i];
-            element.classList.remove('brushed');
-            element.classList.remove('selected');
-        }
-    };
-    // gets called whenever the "data_annotations" fields gets updated
-    drawAnnotations = (dataX: number, dataY: number, selected?: boolean) => {
-        // TODO: nda - can optimize this by having some sort of mapping of the x and y values to the individual circle elements
-        // loop through all html elements with class .circle-d1 and find the one that has "data-x" and "data-y" attributes that match the dataX and dataY
-        // if it exists, then highlight it
-        // if it doesn't exist, then remove the highlight
-        const elements = document.querySelectorAll('.datapoint');
-        for (let i = 0; i < elements.length; i++) {
-            const element = elements[i];
-            const x = element.getAttribute('data-x');
-            const y = element.getAttribute('data-y');
-            if (x === dataX.toString() && y === dataY.toString()) {
-                element.classList.add(selected ? 'selected' : 'brushed');
-            }
-            // TODO: nda - this remove highlight code should go where we remove the links
-            // } else {
-            // }
-        }
     };
 
-    removeAnnotations(dataX: number, dataY: number) {
-        // loop through and remove any annotations that no longer exist
-    }
-
     @action
     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({
@@ -183,7 +103,6 @@ export class PieChart extends React.Component<PieChartProps> {
             title: 'piechart 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]) : undefined;
         return anchor;
     };
 
@@ -195,15 +114,7 @@ export class PieChart extends React.Component<PieChartProps> {
         return this.props.width - this.props.margin.left - this.props.margin.right;
     }
 
-    // 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));
-    }
-
+    // cleans data by converting numerical data to numbers and taking out empty cells
     data = (dataSet: any) => {
         var validData = dataSet.filter((d: { [x: string]: unknown; }) => {
             var valid = true;
@@ -220,15 +131,16 @@ export class PieChart extends React.Component<PieChartProps> {
         return data;
     }
 
+    // outlines the slice selected / hovered over
     highlightSelectedSlice = (changeSelectedVariables: boolean, svg: any, arc: any, radius: any, pointer: any, pieDataSet: any) => {
             var index = -1;
             var sameAsCurrent: boolean;
             const selected = svg.selectAll('.slice').filter((d: any) => {
                 index++;
-                var p1 = [0,0];
-                var p3 = [arc.centroid(d)[0]*2, arc.centroid(d)[1]*2];
-                var p2 = [radius*Math.sin(d.startAngle), -radius*Math.cos(d.startAngle)];
-                var p4 = [radius*Math.sin(d.endAngle), -radius*Math.cos(d.endAngle)];
+                var p1 = [0,0]; // center of pie
+                var p3 = [arc.centroid(d)[0]*2, arc.centroid(d)[1]*2]; // outward peak of arc
+                var p2 = [radius*Math.sin(d.startAngle), -radius*Math.cos(d.startAngle)]; // start of arc
+                var p4 = [radius*Math.sin(d.endAngle), -radius*Math.cos(d.endAngle)]; // end of arc
 
                 // draw an imaginary horizontal line from the pointer to see how many times it crosses a slice edge
                 var lineCrossCount = 0;
@@ -241,10 +153,10 @@ export class PieChart extends React.Component<PieChartProps> {
                     if (pointer[0] <= (pointer[1]-p3[1])*(p4[0]-p3[0])/(p4[1]-p3[1])+p3[0]) lineCrossCount++; }
                 if (Math.min(p4[1], p1[1])<=pointer[1] && pointer[1]<=Math.max(p4[1], p1[1])){
                     if (pointer[0] <= (pointer[1]-p4[1])*(p1[0]-p4[0])/(p1[1]-p4[1])+p4[0]) lineCrossCount++; }
-                if (lineCrossCount % 2 != 0) {
+                if (lineCrossCount % 2 != 0) { // inside the slice of it crosses an odd number of edges
                     var showSelected = this.byCategory? pieDataSet[index] : this._piechartData[index];
-
                     if (changeSelectedVariables){
+                        // for when a bar is selected - not just hovered over
                         sameAsCurrent = (this._currSelected)? 
                             (showSelected[Object.keys(showSelected)[0]]==this._currSelected![Object.keys(showSelected)[0]] 
                         && showSelected[Object.keys(showSelected)[1]]==this._currSelected![Object.keys(showSelected)[1]])
@@ -264,6 +176,7 @@ export class PieChart extends React.Component<PieChartProps> {
             }
     }
 
+    // draws the pie chart
     drawChart = (dataSet: any, width: number, height: number) => {
         d3.select(this._piechartRef.current).select('svg').remove();
         d3.select(this._piechartRef.current).select('.tooltip').remove();
@@ -271,18 +184,8 @@ export class PieChart extends React.Component<PieChartProps> {
         var percentField = Object.keys(dataSet[0])[0]
         var descriptionField = Object.keys(dataSet[0])[1]!
         var radius = Math.min(width, height-this.props.margin.top-this.props.margin.bottom) /2
-        var svg = (this._piechartSvg = d3
-            .select(this._piechartRef.current)
-            .append("svg")
-                .attr("class", "graph")
-                .attr("width", width + this.props.margin.right + this.props.margin.left)
-                .attr("height", height + this.props.margin.top + this.props.margin.bottom)
-            .append("g"));
-    
-        let g = svg.append("g")
-            .attr("transform",
-                    "translate(" + (width/2 + this.props.margin.left) + "," + height/2 + ")");
 
+        // converts data into Objects
         var data = this.data(dataSet);
         var pieDataSet = dataSet.filter((d: { [x: string]: unknown; }) => {
             var valid = true;
@@ -293,12 +196,12 @@ export class PieChart extends React.Component<PieChartProps> {
         });
         if (this.byCategory){
             let uniqueCategories = [...new Set(data)]
-            var pieStringDataSet: { frequency: number, [percentField]: string }[] = [];
+            var pieStringDataSet: { frequency: number }[] = [];
             for (let i=0; i<uniqueCategories.length; i++){
                 pieStringDataSet.push({frequency: 0, [percentField]: uniqueCategories[i]})
             }
             for (let i=0; i<data.length; i++){
-                let sliceData = pieStringDataSet.filter(each => each[percentField]==data[i])
+                let sliceData = pieStringDataSet.filter((each: any) => each[percentField]==data[i])
                 sliceData[0].frequency = sliceData[0].frequency + 1;
             }
             pieDataSet = pieStringDataSet
@@ -309,11 +212,23 @@ export class PieChart extends React.Component<PieChartProps> {
         var trackDuplicates : {[key: string]: any} = {};
         data.forEach((eachData: any) => !trackDuplicates[eachData]? trackDuplicates[eachData] = 0: null)
 
+        // initial chart
+        var svg = (this._piechartSvg = d3
+            .select(this._piechartRef.current)
+            .append("svg")
+                .attr("class", "graph")
+                .attr("width", width + this.props.margin.right + this.props.margin.left)
+                .attr("height", height + this.props.margin.top + this.props.margin.bottom)
+            .append("g"));
+        let g = svg.append("g")
+            .attr("transform",
+                    "translate(" + (width/2 + this.props.margin.left) + "," + height/2 + ")");
         var pie = d3.pie();
         var arc = d3.arc()
             .innerRadius(0)
             .outerRadius(radius);
 
+        // click/hover
         const onPointClick = action((e: any) => this.highlightSelectedSlice(true, svg, arc, radius, d3.pointer(e), pieDataSet));
         const onHover = action((e: any) => {
             const selected = this.highlightSelectedSlice(false, svg, arc, radius, d3.pointer(e), pieDataSet)
@@ -331,6 +246,7 @@ export class PieChart extends React.Component<PieChartProps> {
                     || ((hoverOverSlice && d.startAngle==hoverOverSlice.startAngle && d.endAngle==hoverOverSlice.endAngle)))? 'slice hover' : 'slice'; })
         }
 
+        // drawing the slices
         var selected = this.selectedData;
         var arcs = g.selectAll("arc")
             .data(pie(data))
@@ -359,11 +275,12 @@ export class PieChart extends React.Component<PieChartProps> {
                 function(d) {
                     return (selected && d.startAngle==selected.startAngle && d.endAngle==selected.endAngle)? 'slice hover' : 'slice';
                 }: function(d) {return 'slice'})
-            .attr("d", arc)
+            .attr('d', arc)
             .on('click', onPointClick)
             .on('mouseover', onHover)
             .on('mouseout', mouseOut);
 
+        // adding labels
         trackDuplicates = {};
         data.forEach((eachData: any) => !trackDuplicates[eachData]? trackDuplicates[eachData] = 0: null)
         arcs.append("text")
diff --git a/src/client/views/nodes/DataVizBox/components/TableBox.tsx b/src/client/views/nodes/DataVizBox/components/TableBox.tsx
index 38dd62d8d..277ee83ec 100644
--- a/src/client/views/nodes/DataVizBox/components/TableBox.tsx
+++ b/src/client/views/nodes/DataVizBox/components/TableBox.tsx
@@ -32,6 +32,7 @@ interface TableBoxProps {
 @observer
 export class TableBox extends React.Component<TableBoxProps> {
 
+    // filters all data to just display selected data if brushed (created from an incoming link)
     @computed get _tableData() {
         if (this.incomingLinks.length! <= 0) return this.props.pairs;
         var guids = StrListCast(this.props.layoutDoc.rowGuids);
@@ -52,6 +53,7 @@ export class TableBox extends React.Component<TableBoxProps> {
         return this._tableData.length ? Array.from(Object.keys(this._tableData[0])).filter(header => header!='' && header!=undefined) : [];
     }
 
+    // updates the 'selected' field to no longer include rows that aren't in the table
     filterSelectedRowsDown() {
         if (!this.props.layoutDoc.selected) this.props.layoutDoc.selected = new List<string>();
         const selected = Cast(this.props.layoutDoc.selected, listSpec("string"), null);
@@ -88,7 +90,7 @@ export class TableBox extends React.Component<TableBoxProps> {
                                                     setupMoveUpEvents(
                                                         {},
                                                         e,
-                                                        e => {
+                                                        e => { // dragging off a column to create a brushed DataVizBox
                                                             const sourceAnchorCreator = () => this.props.docView?.()!.rootDoc!;
                                                             const targetCreator = (annotationOn: Doc | undefined) => {
                                                                 const embedding = Doc.MakeEmbedding(this.props.docView?.()!.rootDoc!);
@@ -144,6 +146,7 @@ export class TableBox extends React.Component<TableBoxProps> {
                                 if (containsData){
                                     return (
                                         <tr key={i} className="table-row" onClick={action(e => {
+                                                // selecting a row
                                                 const selected = Cast(this.props.layoutDoc.selected, listSpec("string"), null);
                                                 if (selected.includes(guid)) selected.splice(selected.indexOf(guid), 1);
                                                 else {
@@ -153,6 +156,7 @@ export class TableBox extends React.Component<TableBoxProps> {
                                                 background: StrListCast(this.props.layoutDoc.selected).includes(guid) ? 'lightgrey' : '' }}>
                                             {this.columns.map(col => (
                                                 (this.props.layoutDoc.selected)?
+                                                    // each cell
                                                     <td key={this.columns.indexOf(col)} style={{border: '1px solid black'}}>
                                                         {p[col]}
                                                     </td>
@@ -168,6 +172,7 @@ export class TableBox extends React.Component<TableBoxProps> {
             );
         }
         else return (
+            // when it is a brushed table and the incoming table doesn't have any rows selected
             <div className='chart-container'>
                 Selected rows of data from the incoming DataVizBox to display.
             </div>
diff --git a/src/client/views/nodes/DataVizBox/utils/D3Utils.ts b/src/client/views/nodes/DataVizBox/utils/D3Utils.ts
index e1ff6f8eb..10bfb0c64 100644
--- a/src/client/views/nodes/DataVizBox/utils/D3Utils.ts
+++ b/src/client/views/nodes/DataVizBox/utils/D3Utils.ts
@@ -34,7 +34,6 @@ export const createLineGenerator = (xScale: d3.ScaleLinear<number, number, never
 };
 
 export const xAxisCreator = (g: d3.Selection<SVGGElement, unknown, null, undefined>, height: number, xScale: d3.ScaleLinear<number, number, never>) => {
-    console.log('x axis creator being called');
     g.attr('class', 'x-axis').attr('transform', `translate(0,${height})`).call(d3.axisBottom(xScale).tickSize(15));
 };
 
-- 
cgit v1.2.3-70-g09d2


From 5a77db9f5f1e842c59d071f230c09f5f94018ea1 Mon Sep 17 00:00:00 2001
From: srichman333 <sarah_n_richman@brown.edu>
Date: Wed, 9 Aug 2023 11:25:10 -0400
Subject: histogram numerical bars bug fix

---
 .../nodes/DataVizBox/components/Histogram.tsx      | 22 ++++++++++++++++++----
 .../views/nodes/DataVizBox/components/PieChart.tsx |  2 +-
 2 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/src/client/views/nodes/DataVizBox/components/Histogram.tsx b/src/client/views/nodes/DataVizBox/components/Histogram.tsx
index 0b35f2856..7bf546a62 100644
--- a/src/client/views/nodes/DataVizBox/components/Histogram.tsx
+++ b/src/client/views/nodes/DataVizBox/components/Histogram.tsx
@@ -189,7 +189,7 @@ export class Histogram extends React.Component<HistogramProps> {
         var xAxisTitle = Object.keys(dataSet[0])[0]
         var yAxisTitle = this.numericalYData ? Object.keys(dataSet[0])[1] : 'frequency';
         let uniqueArr: unknown[] = [...new Set(data)]
-        var numBins = (this.numericalXData && Number.isInteger(data[0][xAxisTitle]))? (this.rangeVals.xMax! - this.rangeVals.xMin! + 1) : uniqueArr.length
+        var numBins = (this.numericalXData && Number.isInteger(data[0]))? (this.rangeVals.xMax! - this.rangeVals.xMin! ) : uniqueArr.length
         var translateXAxis = !this.numericalXData || numBins<this.maxBins ?  width/(numBins+1)/2 : 0;
         if (numBins>this.maxBins) numBins = this.maxBins;
         var startingPoint = this.numericalXData? this.rangeVals.xMin! : 0;
@@ -249,7 +249,7 @@ export class Histogram extends React.Component<HistogramProps> {
 
         // more calculations based on bins
         // x-axis
-        if (!this.numericalXData) { // reorganize if the data is strings rather than numbers
+        if (!this.numericalXData) { // reorganize to match data if the data is strings rather than numbers
             // uniqueArr.sort()
             histDataSet.sort()
             for (let i=0; i<data.length; i++){
@@ -273,10 +273,24 @@ export class Histogram extends React.Component<HistogramProps> {
             translateXAxis = eachRectWidth / 2;
         }
         else {
-            eachRectWidth = width/(bins.length+1)
+            var allSame = true;
+            for (var i=0; i<bins.length; i++){
+                if (bins[i] && bins[i][0]){
+                    var compare = bins[i][0];
+                    for (let j=1; j<bins[i].length; j++){
+                        if (bins[i][j] != compare) allSame = false;
+                    }
+                }
+            }
+            if (allSame){ 
+                translateXAxis = eachRectWidth / 2;
+                eachRectWidth = width/(bins.length)
+            }
+            else eachRectWidth = width/(bins.length+1)
+
             x.range([0, width-eachRectWidth])
             xAxis = d3.axisBottom(x)
-                .ticks(numBins-1)
+                .ticks(bins.length-1)
         }
         // y-axis
         const maxFrequency = this.numericalYData? d3.max(histDataSet, function(d: any) { 
diff --git a/src/client/views/nodes/DataVizBox/components/PieChart.tsx b/src/client/views/nodes/DataVizBox/components/PieChart.tsx
index d4570dee2..133e3a33a 100644
--- a/src/client/views/nodes/DataVizBox/components/PieChart.tsx
+++ b/src/client/views/nodes/DataVizBox/components/PieChart.tsx
@@ -270,7 +270,7 @@ export class PieChart extends React.Component<PieChartProps> {
                 var sliceColor;
                 var sliceColors = StrListCast(this.props.layoutDoc.pieSliceColors).map(each => each.split('::'));
                 sliceColors.map(each => {if (each[0]==StrCast(accessByName)) sliceColor = each[1]});
-                return sliceColor? StrCast(sliceColor) : d3.schemeSet3[i]? d3.schemeSet3[i]: d3.schemeSet3[i%12] })
+                return sliceColor? StrCast(sliceColor) : d3.schemeSet3[i]? d3.schemeSet3[i]: d3.schemeSet3[i%(d3.schemeSet3.length)] })
                 .attr("class", selected? 
                 function(d) {
                     return (selected && d.startAngle==selected.startAngle && d.endAngle==selected.endAngle)? 'slice hover' : 'slice';
-- 
cgit v1.2.3-70-g09d2


From d70e2a955633734d5c19c2e76efb075ddf33327b Mon Sep 17 00:00:00 2001
From: srichman333 <sarah_n_richman@brown.edu>
Date: Wed, 9 Aug 2023 12:29:12 -0400
Subject: more histogram cleanup

---
 src/client/views/nodes/DataVizBox/components/Histogram.tsx | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/client/views/nodes/DataVizBox/components/Histogram.tsx b/src/client/views/nodes/DataVizBox/components/Histogram.tsx
index 7bf546a62..e04d37094 100644
--- a/src/client/views/nodes/DataVizBox/components/Histogram.tsx
+++ b/src/client/views/nodes/DataVizBox/components/Histogram.tsx
@@ -286,11 +286,16 @@ export class Histogram extends React.Component<HistogramProps> {
                 translateXAxis = eachRectWidth / 2;
                 eachRectWidth = width/(bins.length)
             }
-            else eachRectWidth = width/(bins.length+1)
+            else {
+                eachRectWidth = width/(bins.length+1)
+                var tickDiff = (bins.length>=2? (bins[bins.length-2].x1!-bins[bins.length-2].x0!): 0)
+                var curDomain = x.domain();
+                x.domain([curDomain[0], curDomain[0] + tickDiff*bins.length])
+            }
 
-            x.range([0, width-eachRectWidth])
             xAxis = d3.axisBottom(x)
                 .ticks(bins.length-1)
+            x.range([0, width-eachRectWidth])
         }
         // y-axis
         const maxFrequency = this.numericalYData? d3.max(histDataSet, function(d: any) { 
-- 
cgit v1.2.3-70-g09d2


From 79a5cddf969a027811a9b7069f8ae8614b825a05 Mon Sep 17 00:00:00 2001
From: srichman333 <sarah_n_richman@brown.edu>
Date: Wed, 9 Aug 2023 12:58:59 -0400
Subject: display clarification for when a string column is given to a
 LineChart

---
 src/client/views/nodes/DataVizBox/components/LineChart.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/client/views/nodes/DataVizBox/components/LineChart.tsx b/src/client/views/nodes/DataVizBox/components/LineChart.tsx
index 16794886e..053696807 100644
--- a/src/client/views/nodes/DataVizBox/components/LineChart.tsx
+++ b/src/client/views/nodes/DataVizBox/components/LineChart.tsx
@@ -358,7 +358,7 @@ export class LineChart extends React.Component<LineChartProps> {
         if (!this.props.layoutDoc[titleAccessor]) this.props.layoutDoc[titleAccessor] = this.defaultGraphTitle;
         const selectedPt = this._currSelected ? `x: ${this._currSelected.x} y: ${this._currSelected.y}` : 'none';
         return (
-            this.props.axes.length >= 2 ? (
+            this.props.axes.length>=2 && /\d/.test(this.props.pairs[0][this.props.axes[0]]) && /\d/.test(this.props.pairs[0][this.props.axes[1]]) ? (
             <div className="chart-container" >
                 <div className="graph-title"> 
                     <EditableText
@@ -374,7 +374,7 @@ export class LineChart extends React.Component<LineChartProps> {
                     <div className={'selected-data'}> {`Selected: ${selectedPt}`}</div>
                 : null}
             </div>
-            ) : <span className="chart-container"> {'first use table view to select two axes to plot'}</span>
+            ) : <span className="chart-container"> {'first use table view to select two numerical axes to plot'}</span>
         );
     }
 }
-- 
cgit v1.2.3-70-g09d2


From 481a847b1074c9544e947e409b96778ac4d4f852 Mon Sep 17 00:00:00 2001
From: srichman333 <sarah_n_richman@brown.edu>
Date: Wed, 9 Aug 2023 15:24:03 -0400
Subject: numerical y axis data fix

---
 .../views/nodes/DataVizBox/components/Histogram.tsx | 11 ++++-------
 .../views/nodes/DataVizBox/components/PieChart.tsx  | 21 +++++++++------------
 .../views/nodes/DataVizBox/components/TableBox.tsx  |  4 ++--
 3 files changed, 15 insertions(+), 21 deletions(-)

diff --git a/src/client/views/nodes/DataVizBox/components/Histogram.tsx b/src/client/views/nodes/DataVizBox/components/Histogram.tsx
index e04d37094..ed663006f 100644
--- a/src/client/views/nodes/DataVizBox/components/Histogram.tsx
+++ b/src/client/views/nodes/DataVizBox/components/Histogram.tsx
@@ -1,13 +1,10 @@
 import { observer } from "mobx-react";
-import { Doc, DocListCast, StrListCast } from "../../../../../fields/Doc";
+import { Doc, 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 { DocumentManager } from "../../../../util/DocumentManager";
-import { Id } from "../../../../../fields/FieldSymbols";
-import { DataVizBox } from "../DataVizBox";
 import { PinProps, PresBox } from "../../trails";
 import { Docs } from "../../../../documents/Documents";
 import { List } from "../../../../../fields/List";
@@ -299,7 +296,7 @@ export class Histogram extends React.Component<HistogramProps> {
         }
         // y-axis
         const maxFrequency = this.numericalYData? d3.max(histDataSet, function(d: any) { 
-            return Number(d[yAxisTitle]!.replace(/\$/g, '').replace(/\%/g, '').replace(/\</g, ''))})
+            return d[yAxisTitle]? Number(d[yAxisTitle]!.replace(/\$/g, '').replace(/\%/g, '').replace(/\</g, '')) : 0})
                     : d3.max(bins, function(d) { return d.length; })
         var y = d3.scaleLinear()
             .range([height, 0]);
@@ -359,14 +356,14 @@ export class Histogram extends React.Component<HistogramProps> {
               .attr("transform", this.numericalYData?
                     function (d) {
                         var eachData = histDataSet.filter((data: { [x: string]: number; }) => {return data[xAxisTitle]==d[0]}) 
-                        var length = eachData[0][yAxisTitle].replace(/\$/g, '').replace(/\%/g, '').replace(/\</g, '');
+                        var length = eachData.length? eachData[0][yAxisTitle].replace(/\$/g, '').replace(/\%/g, '').replace(/\</g, '') : 0;
                         return "translate(" + x(d.x0!) + "," + y(length) + ")";
                     }
                     : function(d) { return "translate(" + x(d.x0!) + "," + y(d.length) + ")"; })
               .attr("height", this.numericalYData? 
                     function(d) {
                         var eachData = histDataSet.filter((data: { [x: string]: number; }) => {return data[xAxisTitle]==d[0]}) 
-                        var length = eachData[0][yAxisTitle].replace(/\$/g, '').replace(/\%/g, '').replace(/\</g, '');
+                        var length = eachData.length? eachData[0][yAxisTitle].replace(/\$/g, '').replace(/\%/g, '').replace(/\</g, '') : 0;
                         return height-y(length)}
                     : function(d) { 
                         return height - y(d.length)})
diff --git a/src/client/views/nodes/DataVizBox/components/PieChart.tsx b/src/client/views/nodes/DataVizBox/components/PieChart.tsx
index 133e3a33a..6581b6b75 100644
--- a/src/client/views/nodes/DataVizBox/components/PieChart.tsx
+++ b/src/client/views/nodes/DataVizBox/components/PieChart.tsx
@@ -1,13 +1,10 @@
 import { observer } from "mobx-react";
-import { Doc, DocListCast, StrListCast } from "../../../../../fields/Doc";
+import { Doc, 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 { DocumentManager } from "../../../../util/DocumentManager";
-import { Id } from "../../../../../fields/FieldSymbols";
-import { DataVizBox } from "../DataVizBox";
 import { PinProps, PresBox } from "../../trails";
 import { Docs } from "../../../../documents/Documents";
 import { List } from "../../../../../fields/List";
@@ -256,7 +253,7 @@ export class PieChart extends React.Component<PieChartProps> {
             .attr("fill", (d, i)=>{ 
                 var possibleDataPoints = pieDataSet.filter((each: { [x: string]: any | { valueOf(): number; }; }) => {
                     try {
-                        return each[percentField].replace(/[^0-9]/g,"")==d.data.toString().replace(/[^0-9]/g,"")
+                        return Number(each[percentField].replace(/\$/g, '').replace(/\%/g, '').replace(/\</g, ''))==Number(d.data)
                     } catch (error) {
                         return each[percentField]==d.data
                     }})
@@ -266,10 +263,12 @@ export class PieChart extends React.Component<PieChartProps> {
                     dataPoint = possibleDataPoints[trackDuplicates[d.data.toString()]]
                     trackDuplicates[d.data.toString()] = trackDuplicates[d.data.toString()] + 1;
                 }
-                var accessByName = descriptionField? dataPoint[descriptionField] : dataPoint[percentField];
                 var sliceColor;
-                var sliceColors = StrListCast(this.props.layoutDoc.pieSliceColors).map(each => each.split('::'));
-                sliceColors.map(each => {if (each[0]==StrCast(accessByName)) sliceColor = each[1]});
+                if (dataPoint){
+                    var accessByName = descriptionField? dataPoint[descriptionField] : dataPoint[percentField];
+                    var sliceColors = StrListCast(this.props.layoutDoc.pieSliceColors).map(each => each.split('::'));
+                    sliceColors.map(each => {if (each[0]==StrCast(accessByName)) sliceColor = each[1]});
+                }
                 return sliceColor? StrCast(sliceColor) : d3.schemeSet3[i]? d3.schemeSet3[i]: d3.schemeSet3[i%(d3.schemeSet3.length)] })
                 .attr("class", selected? 
                 function(d) {
@@ -292,7 +291,7 @@ export class PieChart extends React.Component<PieChartProps> {
             .text(function(d){ 
                 var possibleDataPoints = pieDataSet.filter((each: { [x: string]: any | { valueOf(): number; }; }) => {
                     try {
-                        return each[percentField].replace(/[^0-9]/g,"")==d.data.toString().replace(/[^0-9]/g,"")
+                        return Number(each[percentField].replace(/\$/g, '').replace(/\%/g, '').replace(/\</g, ''))==Number(d.data)
                     } catch (error) {
                         return each[percentField]==d.data
                     }})
@@ -302,9 +301,7 @@ export class PieChart extends React.Component<PieChartProps> {
                     dataPoint = possibleDataPoints[trackDuplicates[d.data.toString()]]
                     trackDuplicates[d.data.toString()] = trackDuplicates[d.data.toString()] + 1;
                 }
-                return dataPoint[percentField]! 
-                + (!descriptionField? '' : (' - ' + dataPoint[descriptionField]))!})
-
+                return dataPoint? dataPoint[percentField]! + (!descriptionField? '' : (' - ' + dataPoint[descriptionField]))! : ''})
     };
 
     @action changeSelectedColor = (color: string) => {
diff --git a/src/client/views/nodes/DataVizBox/components/TableBox.tsx b/src/client/views/nodes/DataVizBox/components/TableBox.tsx
index 277ee83ec..f80cbdf99 100644
--- a/src/client/views/nodes/DataVizBox/components/TableBox.tsx
+++ b/src/client/views/nodes/DataVizBox/components/TableBox.tsx
@@ -123,10 +123,10 @@ export class TableBox extends React.Component<TableBoxProps> {
                                                             const newAxes = this.props.axes;
                                                             if (newAxes.includes(col)) {
                                                                 newAxes.splice(newAxes.indexOf(col), 1);
-                                                            } else if (newAxes.length >= 1) {
+                                                            } else if (newAxes.length > 1) {
                                                                 newAxes[1] = col;
                                                             } else {
-                                                                newAxes[0] = col;
+                                                                newAxes.push(col);
                                                             }
                                                             this.props.selectAxes(newAxes);
                                                         })
-- 
cgit v1.2.3-70-g09d2


From a89ba9afe33d973c50c0a66aec73db1e22367913 Mon Sep 17 00:00:00 2001
From: srichman333 <sarah_n_richman@brown.edu>
Date: Thu, 10 Aug 2023 11:28:09 -0400
Subject: undo/redo for colors + titles

---
 src/client/views/nodes/DataVizBox/components/Histogram.tsx | 9 +++++----
 src/client/views/nodes/DataVizBox/components/LineChart.tsx | 3 ++-
 src/client/views/nodes/DataVizBox/components/PieChart.tsx  | 5 +++--
 3 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/src/client/views/nodes/DataVizBox/components/Histogram.tsx b/src/client/views/nodes/DataVizBox/components/Histogram.tsx
index ed663006f..883cc006b 100644
--- a/src/client/views/nodes/DataVizBox/components/Histogram.tsx
+++ b/src/client/views/nodes/DataVizBox/components/Histogram.tsx
@@ -14,6 +14,7 @@ import { FaFillDrip } from "react-icons/fa";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { listSpec } from "../../../../../fields/Schema";
 import { scaleCreatorNumerical, yAxisCreator } from "../utils/D3Utils";
+import { undoBatch, undoable } from "../../../../util/UndoManager";
 
 export interface HistogramProps {
     rootDoc: Doc;
@@ -426,7 +427,7 @@ export class Histogram extends React.Component<HistogramProps> {
                 <div className="graph-title"> 
                     <EditableText
                         val={StrCast(this.props.layoutDoc[titleAccessor])}
-                        setVal={action(val => this.props.layoutDoc[titleAccessor] = val as string)}
+                        setVal={undoable (action(val => this.props.layoutDoc[titleAccessor] = val as string), "Change Graph Title")}
                         color={"black"}
                         size={Size.LARGE}
                         fillWidth
@@ -437,7 +438,7 @@ export class Histogram extends React.Component<HistogramProps> {
                         type={Type.SEC} 
                         icon={<FaFillDrip/>}
                         selectedColor={StrCast(this.props.layoutDoc.defaultHistogramColor)}
-                        setSelectedColor={color => this.props.layoutDoc.defaultHistogramColor = color}
+                        setSelectedColor={undoable (color => this.props.layoutDoc.defaultHistogramColor = color, "Change Default Bar Color")}
                         size={Size.XSMALL}
                     />
                 </div>
@@ -451,7 +452,7 @@ export class Histogram extends React.Component<HistogramProps> {
                             type={Type.SEC} 
                             icon={<FaFillDrip/>}
                             selectedColor={selectedBarColor? selectedBarColor : this.curBarSelected.attr("fill")}
-                            setSelectedColor={color => this.changeSelectedColor(color)}
+                            setSelectedColor={undoable (color => this.changeSelectedColor(color), "Change Selected Bar Color")}
                             size={Size.XSMALL}
                         />
                         &nbsp;
@@ -461,7 +462,7 @@ export class Histogram extends React.Component<HistogramProps> {
                             color={'black'} 
                             type={Type.SEC}
                             tooltip={'Revert to the default bar color'}
-                            onClick={action(() => this.eraseSelectedColor())}
+                            onClick={undoable (action(() => this.eraseSelectedColor()), "Change Selected Bar Color")}
                         />
                     </div>
                 : null}
diff --git a/src/client/views/nodes/DataVizBox/components/LineChart.tsx b/src/client/views/nodes/DataVizBox/components/LineChart.tsx
index 053696807..49ef577e4 100644
--- a/src/client/views/nodes/DataVizBox/components/LineChart.tsx
+++ b/src/client/views/nodes/DataVizBox/components/LineChart.tsx
@@ -15,6 +15,7 @@ import { DataVizBox } from '../DataVizBox';
 import { createLineGenerator, drawLine, minMaxRange, scaleCreatorNumerical, xAxisCreator, xGrid, yAxisCreator, yGrid } from '../utils/D3Utils';
 import './Chart.scss';
 import { EditableText, Size } from 'browndash-components';
+import { undoable } from '../../../../util/UndoManager';
 
 export interface DataPoint {
     x: number;
@@ -363,7 +364,7 @@ export class LineChart extends React.Component<LineChartProps> {
                 <div className="graph-title"> 
                     <EditableText
                         val={StrCast(this.props.layoutDoc[titleAccessor])}
-                        setVal={action(val => this.props.layoutDoc[titleAccessor] = val as string)}
+                        setVal={undoable (action(val => this.props.layoutDoc[titleAccessor] = val as string), "Change Graph Title")}
                         color={"black"}
                         size={Size.LARGE}
                         fillWidth
diff --git a/src/client/views/nodes/DataVizBox/components/PieChart.tsx b/src/client/views/nodes/DataVizBox/components/PieChart.tsx
index 6581b6b75..de725209d 100644
--- a/src/client/views/nodes/DataVizBox/components/PieChart.tsx
+++ b/src/client/views/nodes/DataVizBox/components/PieChart.tsx
@@ -12,6 +12,7 @@ import './Chart.scss';
 import { ColorPicker, EditableText, Size, Type } from "browndash-components";
 import { FaFillDrip } from "react-icons/fa";
 import { listSpec } from "../../../../../fields/Schema";
+import { undoable } from "../../../../util/UndoManager";
 
 export interface PieChartProps {
     rootDoc: Doc;
@@ -342,7 +343,7 @@ export class PieChart extends React.Component<PieChartProps> {
                 <div className="graph-title"> 
                     <EditableText
                         val={StrCast(this.props.layoutDoc[titleAccessor])}
-                        setVal={action(val => this.props.layoutDoc[titleAccessor] = val as string)}
+                        setVal={undoable (action(val => this.props.layoutDoc[titleAccessor] = val as string), "Change Graph Title")}
                         color={"black"}
                         size={Size.LARGE}
                         fillWidth
@@ -358,7 +359,7 @@ export class PieChart extends React.Component<PieChartProps> {
                             type={Type.SEC} 
                             icon={<FaFillDrip/>}
                             selectedColor={selectedSliceColor? selectedSliceColor : this.curSliceSelected.attr("fill")}
-                            setSelectedColor={color => this.changeSelectedColor(color)}
+                            setSelectedColor={undoable (color => this.changeSelectedColor(color), "Change Selected Slice Color")}
                             size={Size.XSMALL}
                         />
                     </div>
-- 
cgit v1.2.3-70-g09d2


From 5a1bf41682f641967304c8a7fa7df9b6b343b7b2 Mon Sep 17 00:00:00 2001
From: srichman333 <sarah_n_richman@brown.edu>
Date: Thu, 10 Aug 2023 13:21:10 -0400
Subject: changing selected slice/bar color w different data types bug fix

---
 src/client/views/nodes/DataVizBox/components/Histogram.tsx | 8 +++++++-
 src/client/views/nodes/DataVizBox/components/PieChart.tsx  | 2 +-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/client/views/nodes/DataVizBox/components/Histogram.tsx b/src/client/views/nodes/DataVizBox/components/Histogram.tsx
index 883cc006b..8161a12c9 100644
--- a/src/client/views/nodes/DataVizBox/components/Histogram.tsx
+++ b/src/client/views/nodes/DataVizBox/components/Histogram.tsx
@@ -376,7 +376,13 @@ export class Histogram extends React.Component<HistogramProps> {
               .attr("fill", (d)=>{ 
                 var barColor;
                 var barColors = StrListCast(this.props.layoutDoc.histogramBarColors).map(each => each.split('::'));
-                barColors.map(each => {if (each[0]==StrCast(d[0])) barColor = each[1]});
+                barColors.map(each => { 
+                    if (d[0] && d[0].toString() && each[0]==d[0].toString()) barColor = each[1]; 
+                    else {
+                        var range = StrCast(each[0]).split(" to ");
+                        if (Number(range[0])<=d[0] && d[0]<=Number(range[1])) barColor = each[1];
+                    }
+                });
                 return barColor? StrCast(barColor) : StrCast(this.props.layoutDoc.defaultHistogramColor)})
     };
 
diff --git a/src/client/views/nodes/DataVizBox/components/PieChart.tsx b/src/client/views/nodes/DataVizBox/components/PieChart.tsx
index de725209d..03c9efdd1 100644
--- a/src/client/views/nodes/DataVizBox/components/PieChart.tsx
+++ b/src/client/views/nodes/DataVizBox/components/PieChart.tsx
@@ -266,7 +266,7 @@ export class PieChart extends React.Component<PieChartProps> {
                 }
                 var sliceColor;
                 if (dataPoint){
-                    var accessByName = descriptionField? dataPoint[descriptionField] : dataPoint[percentField];
+                    var accessByName = dataPoint[this.props.axes[0]].replace(/\$/g, '').replace(/\%/g, '').replace(/\</g, '');
                     var sliceColors = StrListCast(this.props.layoutDoc.pieSliceColors).map(each => each.split('::'));
                     sliceColors.map(each => {if (each[0]==StrCast(accessByName)) sliceColor = each[1]});
                 }
-- 
cgit v1.2.3-70-g09d2


From 5417c64b0723df1bc011efbea2f0f286100d9bf3 Mon Sep 17 00:00:00 2001
From: srichman333 <sarah_n_richman@brown.edu>
Date: Thu, 10 Aug 2023 17:22:16 -0400
Subject: histogram numerical Y axis fixes

---
 src/client/views/nodes/DataVizBox/components/Histogram.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/client/views/nodes/DataVizBox/components/Histogram.tsx b/src/client/views/nodes/DataVizBox/components/Histogram.tsx
index 8161a12c9..df713c462 100644
--- a/src/client/views/nodes/DataVizBox/components/Histogram.tsx
+++ b/src/client/views/nodes/DataVizBox/components/Histogram.tsx
@@ -70,10 +70,10 @@ export class Histogram extends React.Component<HistogramProps> {
     @computed get defaultGraphTitle(){
         var ax0 = this.props.axes[0];
         var ax1 = (this.props.axes.length>1)? this.props.axes[1] : undefined;
-        if (this.props.axes.length<2 || !/\d/.test(this.props.pairs[0][ax0]) || !ax1 || !this.numericalYData){
+        if (this.props.axes.length<2 || !ax1 || !/\d/.test(this.props.pairs[0][ax1]) || !this.numericalYData){
             return ax0 + " Histogram";
         }
-        else return ax1 + " by " + ax0 + " Histogram";
+        else return ax0 + " by " + ax1 + " Histogram";
     }    
 
     @computed get incomingLinks() {
@@ -149,7 +149,7 @@ export class Histogram extends React.Component<HistogramProps> {
         const selected = svg.selectAll('.histogram-bar').filter((d: any) => {
             barCounter++; // uses the order of bars and width of each bar to find which one the pointer is over
             if ((barCounter*eachRectWidth ) <= pointerX && pointerX <= ((barCounter+1)*eachRectWidth)){
-                var showSelected = this.numericalYData? this._histogramData.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; }) => StrCast(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){
                     // calculating frequency
@@ -404,6 +404,7 @@ export class Histogram extends React.Component<HistogramProps> {
     };
 
     render() {
+        this._histogramData
         var curSelectedBarName;
         var titleAccessor: any='';
         if (this.props.axes.length==2) titleAccessor = 'histogram-title-'+this.props.axes[0]+'-'+this.props.axes[1];
-- 
cgit v1.2.3-70-g09d2


From da893c2739c9589bac04c00df3d22ebbfd78c09d Mon Sep 17 00:00:00 2001
From: srichman333 <sarah_n_richman@brown.edu>
Date: Sun, 13 Aug 2023 17:13:31 -0400
Subject: LineChart ui fixes + selected columns bolded

---
 .../views/nodes/DataVizBox/components/LineChart.tsx     |  4 ++--
 .../views/nodes/DataVizBox/components/TableBox.tsx      | 17 ++++++++---------
 2 files changed, 10 insertions(+), 11 deletions(-)

diff --git a/src/client/views/nodes/DataVizBox/components/LineChart.tsx b/src/client/views/nodes/DataVizBox/components/LineChart.tsx
index 49ef577e4..d27aaafbc 100644
--- a/src/client/views/nodes/DataVizBox/components/LineChart.tsx
+++ b/src/client/views/nodes/DataVizBox/components/LineChart.tsx
@@ -348,7 +348,7 @@ export class LineChart extends React.Component<LineChartProps> {
         tooltip
             .html(() => `<b>(${d0.x},${d0.y})</b>`) // text content for tooltip
             .style('pointer-events', 'none')
-            .style('transform', `translate(${xScale(d0.x) - this.width / 2}px,${yScale(d0.y) - 30}px)`);
+            .style('transform', `translate(${xScale(d0.x)-this.width}px,${yScale(d0.y)}px)`);
     }
 
     render() {
@@ -357,7 +357,7 @@ export class LineChart extends React.Component<LineChartProps> {
         if (this.props.axes.length==2) titleAccessor = 'lineChart-title-'+this.props.axes[0]+'-'+this.props.axes[1];
         else if (this.props.axes.length>0) titleAccessor = 'lineChart-title-'+this.props.axes[0];
         if (!this.props.layoutDoc[titleAccessor]) this.props.layoutDoc[titleAccessor] = this.defaultGraphTitle;
-        const selectedPt = this._currSelected ? `x: ${this._currSelected.x} y: ${this._currSelected.y}` : 'none';
+        const selectedPt = this._currSelected ? `{ ${this.props.axes[0]}: ${this._currSelected.x} ${this.props.axes[1]}: ${this._currSelected.y} }` : 'none';
         return (
             this.props.axes.length>=2 && /\d/.test(this.props.pairs[0][this.props.axes[0]]) && /\d/.test(this.props.pairs[0][this.props.axes[1]]) ? (
             <div className="chart-container" >
diff --git a/src/client/views/nodes/DataVizBox/components/TableBox.tsx b/src/client/views/nodes/DataVizBox/components/TableBox.tsx
index f80cbdf99..f56d34fa6 100644
--- a/src/client/views/nodes/DataVizBox/components/TableBox.tsx
+++ b/src/client/views/nodes/DataVizBox/components/TableBox.tsx
@@ -81,7 +81,8 @@ export class TableBox extends React.Component<TableBoxProps> {
                                                 key={this.columns.indexOf(col)}
                                                 ref={header as any}
                                                 style={{
-                                                    color: this.props.axes.slice().reverse().lastElement() === col ? 'green' : this.props.axes.lastElement() === col ? 'red' : undefined,
+                                                    color: this.props.axes.slice().reverse().lastElement() === col ? 'darkgreen' : this.props.axes.lastElement() === col ? 'darkred' : undefined,
+                                                    background: this.props.axes.slice().reverse().lastElement() === col ? '#E3fbdb' : this.props.axes.lastElement() === col ? '#Fbdbdb' : undefined,
                                                     fontWeight: 'bolder', border: '3px solid black'
                                                 }}
                                                 onPointerDown={e => {
@@ -151,17 +152,15 @@ export class TableBox extends React.Component<TableBoxProps> {
                                                 if (selected.includes(guid)) selected.splice(selected.indexOf(guid), 1);
                                                 else {
                                                     selected.push(guid)};
-                                            })} style={
-                                                { fontWeight: StrListCast(this.props.layoutDoc.selected).includes(guid) ? 'bold' : '' , width: '110%',
-                                                background: StrListCast(this.props.layoutDoc.selected).includes(guid) ? 'lightgrey' : '' }}>
-                                            {this.columns.map(col => (
-                                                (this.props.layoutDoc.selected)?
+                                            })} style={{ background: StrListCast(this.props.layoutDoc.selected).includes(guid) ? 'lightgrey' : '', width: '110%' }}>
+                                            {this.columns.map(col => {
                                                     // each cell
-                                                    <td key={this.columns.indexOf(col)} style={{border: '1px solid black'}}>
+                                                    var colSelected = this.props.axes[0]==col || this.props.axes[1]==col;
+                                                    return (
+                                                    <td key={this.columns.indexOf(col)} style={{border: colSelected? '3px solid black' : '1px solid black', fontWeight: colSelected? 'bolder' : 'normal'}}>
                                                         {p[col]}
                                                     </td>
-                                                : <td key={this.columns.indexOf(col)} style={{border: '1px solid black'}}> {p[col]} </td>
-                                            ))}
+                                             )})}
                                         </tr>
                                     );
                                 }
-- 
cgit v1.2.3-70-g09d2


From 9dbd9efeb0080418fcb44c5c78511fffa09ad229 Mon Sep 17 00:00:00 2001
From: srichman333 <sarah_n_richman@brown.edu>
Date: Sun, 13 Aug 2023 17:37:02 -0400
Subject: just one histogram bar bug fix + message displayed when graphs have
 no incoming data rows selected

---
 .../nodes/DataVizBox/components/Histogram.tsx      | 94 ++++++++++++----------
 .../nodes/DataVizBox/components/LineChart.tsx      | 42 ++++++----
 .../views/nodes/DataVizBox/components/PieChart.tsx | 62 +++++++-------
 3 files changed, 111 insertions(+), 87 deletions(-)

diff --git a/src/client/views/nodes/DataVizBox/components/Histogram.tsx b/src/client/views/nodes/DataVizBox/components/Histogram.tsx
index df713c462..df6aac6bc 100644
--- a/src/client/views/nodes/DataVizBox/components/Histogram.tsx
+++ b/src/client/views/nodes/DataVizBox/components/Histogram.tsx
@@ -263,7 +263,7 @@ export class Histogram extends React.Component<HistogramProps> {
             eachRectWidth = width/(bins.length)
             bins.forEach(d => d.x0 = d.x0!)
             xAxis = d3.axisBottom(x)
-                .ticks(bins.length-1)
+                .ticks(bins.length>1? bins.length-1: 1)
                 .tickFormat( i => uniqueArr[i.valueOf()] as string)
                 .tickPadding(10)
             x.range([0, width-eachRectWidth])
@@ -428,54 +428,62 @@ export class Histogram extends React.Component<HistogramProps> {
         barColors.map(each => {if (each[0]==curSelectedBarName!) selectedBarColor = each[1]});
 
         this.componentDidMount();
-        return (
-            this.props.axes.length >= 1 ? (
-            <div className="chart-container" >
-                <div className="graph-title"> 
-                    <EditableText
-                        val={StrCast(this.props.layoutDoc[titleAccessor])}
-                        setVal={undoable (action(val => this.props.layoutDoc[titleAccessor] = val as string), "Change Graph Title")}
-                        color={"black"}
-                        size={Size.LARGE}
-                        fillWidth
-                    />
-                    &nbsp; &nbsp; 
-                    <ColorPicker
-                        tooltip={'Change Default Bar Color'} 
-                        type={Type.SEC} 
-                        icon={<FaFillDrip/>}
-                        selectedColor={StrCast(this.props.layoutDoc.defaultHistogramColor)}
-                        setSelectedColor={undoable (color => this.props.layoutDoc.defaultHistogramColor = color, "Change Default Bar Color")}
-                        size={Size.XSMALL}
-                    />
-                </div>
-                <div ref={this._histogramRef} />
-                {selected != 'none' ? 
-                    <div className={'selected-data'}>
-                        Selected: {selected}
-                        &nbsp; &nbsp;
+
+        if (this._histogramData.length>0){
+            return (
+                this.props.axes.length >= 1 ? (
+                <div className="chart-container" >
+                    <div className="graph-title"> 
+                        <EditableText
+                            val={StrCast(this.props.layoutDoc[titleAccessor])}
+                            setVal={undoable (action(val => this.props.layoutDoc[titleAccessor] = val as string), "Change Graph Title")}
+                            color={"black"}
+                            size={Size.LARGE}
+                            fillWidth
+                        />
+                        &nbsp; &nbsp; 
                         <ColorPicker
-                            tooltip={'Change Bar Color'} 
+                            tooltip={'Change Default Bar Color'} 
                             type={Type.SEC} 
                             icon={<FaFillDrip/>}
-                            selectedColor={selectedBarColor? selectedBarColor : this.curBarSelected.attr("fill")}
-                            setSelectedColor={undoable (color => this.changeSelectedColor(color), "Change Selected Bar Color")}
+                            selectedColor={StrCast(this.props.layoutDoc.defaultHistogramColor)}
+                            setSelectedColor={undoable (color => this.props.layoutDoc.defaultHistogramColor = color, "Change Default Bar Color")}
                             size={Size.XSMALL}
                         />
-                        &nbsp;
-                        <IconButton
-                            icon={<FontAwesomeIcon icon={'eraser'} />} 
-                            size={Size.XSMALL} 
-                            color={'black'} 
-                            type={Type.SEC}
-                            tooltip={'Revert to the default bar color'}
-                            onClick={undoable (action(() => this.eraseSelectedColor()), "Change Selected Bar Color")}
-                        />
                     </div>
-                : null}
+                    <div ref={this._histogramRef} />
+                    {selected != 'none' ? 
+                        <div className={'selected-data'}>
+                            Selected: {selected}
+                            &nbsp; &nbsp;
+                            <ColorPicker
+                                tooltip={'Change Bar Color'} 
+                                type={Type.SEC} 
+                                icon={<FaFillDrip/>}
+                                selectedColor={selectedBarColor? selectedBarColor : this.curBarSelected.attr("fill")}
+                                setSelectedColor={undoable (color => this.changeSelectedColor(color), "Change Selected Bar Color")}
+                                size={Size.XSMALL}
+                            />
+                            &nbsp;
+                            <IconButton
+                                icon={<FontAwesomeIcon icon={'eraser'} />} 
+                                size={Size.XSMALL} 
+                                color={'black'} 
+                                type={Type.SEC}
+                                tooltip={'Revert to the default bar color'}
+                                onClick={undoable (action(() => this.eraseSelectedColor()), "Change Selected Bar Color")}
+                            />
+                        </div>
+                    : null}
+                </div>
+                ) : <span className="chart-container"> {'first use table view to select a column to graph'}</span>
+            );
+        }
+        else return (
+            // when it is a brushed table and the incoming table doesn't have any rows selected
+            <div className='chart-container'>
+                Selected rows of data from the incoming DataVizBox to display.
             </div>
-            ) : <span className="chart-container"> {'first use table view to select a column to graph'}</span>
-        );
+        )
     }
-
 }
\ No newline at end of file
diff --git a/src/client/views/nodes/DataVizBox/components/LineChart.tsx b/src/client/views/nodes/DataVizBox/components/LineChart.tsx
index d27aaafbc..8bace941f 100644
--- a/src/client/views/nodes/DataVizBox/components/LineChart.tsx
+++ b/src/client/views/nodes/DataVizBox/components/LineChart.tsx
@@ -358,24 +358,32 @@ export class LineChart extends React.Component<LineChartProps> {
         else if (this.props.axes.length>0) titleAccessor = 'lineChart-title-'+this.props.axes[0];
         if (!this.props.layoutDoc[titleAccessor]) this.props.layoutDoc[titleAccessor] = this.defaultGraphTitle;
         const selectedPt = this._currSelected ? `{ ${this.props.axes[0]}: ${this._currSelected.x} ${this.props.axes[1]}: ${this._currSelected.y} }` : 'none';
-        return (
-            this.props.axes.length>=2 && /\d/.test(this.props.pairs[0][this.props.axes[0]]) && /\d/.test(this.props.pairs[0][this.props.axes[1]]) ? (
-            <div className="chart-container" >
-                <div className="graph-title"> 
-                    <EditableText
-                        val={StrCast(this.props.layoutDoc[titleAccessor])}
-                        setVal={undoable (action(val => this.props.layoutDoc[titleAccessor] = val as string), "Change Graph Title")}
-                        color={"black"}
-                        size={Size.LARGE}
-                        fillWidth
-                    />
+        if (this._lineChartData.length>0){
+            return (
+                this.props.axes.length>=2 && /\d/.test(this.props.pairs[0][this.props.axes[0]]) && /\d/.test(this.props.pairs[0][this.props.axes[1]]) ? (
+                <div className="chart-container" >
+                    <div className="graph-title"> 
+                        <EditableText
+                            val={StrCast(this.props.layoutDoc[titleAccessor])}
+                            setVal={undoable (action(val => this.props.layoutDoc[titleAccessor] = val as string), "Change Graph Title")}
+                            color={"black"}
+                            size={Size.LARGE}
+                            fillWidth
+                        />
+                    </div>
+                    <div ref={this._lineChartRef} />
+                    {selectedPt!='none'? 
+                        <div className={'selected-data'}> {`Selected: ${selectedPt}`}</div>
+                    : null}
                 </div>
-                <div ref={this._lineChartRef} />
-                {selectedPt!='none'? 
-                    <div className={'selected-data'}> {`Selected: ${selectedPt}`}</div>
-                : null}
+                ) : <span className="chart-container"> {'first use table view to select two numerical axes to plot'}</span>
+            );
+        }
+        else return (
+            // when it is a brushed table and the incoming table doesn't have any rows selected
+            <div className='chart-container'>
+                Selected rows of data from the incoming DataVizBox to display.
             </div>
-            ) : <span className="chart-container"> {'first use table view to select two numerical axes to plot'}</span>
-        );
+        )
     }
 }
diff --git a/src/client/views/nodes/DataVizBox/components/PieChart.tsx b/src/client/views/nodes/DataVizBox/components/PieChart.tsx
index 03c9efdd1..0c54d0a4e 100644
--- a/src/client/views/nodes/DataVizBox/components/PieChart.tsx
+++ b/src/client/views/nodes/DataVizBox/components/PieChart.tsx
@@ -337,36 +337,44 @@ export class PieChart extends React.Component<PieChartProps> {
         var sliceColors = StrListCast(this.props.layoutDoc.pieSliceColors).map(each => each.split('::'));
         sliceColors.map(each => {if (each[0]==curSelectedSliceName!) selectedSliceColor = each[1]});
 
-        return (
-            this.props.axes.length >= 1 ? (
-            <div className="chart-container">
-                <div className="graph-title"> 
-                    <EditableText
-                        val={StrCast(this.props.layoutDoc[titleAccessor])}
-                        setVal={undoable (action(val => this.props.layoutDoc[titleAccessor] = val as string), "Change Graph Title")}
-                        color={"black"}
-                        size={Size.LARGE}
-                        fillWidth
-                    />
-                </div>
-                <div ref={this._piechartRef} />
-                {selected != 'none' ? 
-                    <div className={'selected-data'}>
-                        Selected: {selected}
-                        &nbsp; &nbsp;
-                        <ColorPicker
-                            tooltip={'Change Slice Color'} 
-                            type={Type.SEC} 
-                            icon={<FaFillDrip/>}
-                            selectedColor={selectedSliceColor? selectedSliceColor : this.curSliceSelected.attr("fill")}
-                            setSelectedColor={undoable (color => this.changeSelectedColor(color), "Change Selected Slice Color")}
-                            size={Size.XSMALL}
+        if (this._piechartData.length>0){
+            return (
+                this.props.axes.length >= 1 ? (
+                <div className="chart-container">
+                    <div className="graph-title"> 
+                        <EditableText
+                            val={StrCast(this.props.layoutDoc[titleAccessor])}
+                            setVal={undoable (action(val => this.props.layoutDoc[titleAccessor] = val as string), "Change Graph Title")}
+                            color={"black"}
+                            size={Size.LARGE}
+                            fillWidth
                         />
                     </div>
-                : null}
+                    <div ref={this._piechartRef} />
+                    {selected != 'none' ? 
+                        <div className={'selected-data'}>
+                            Selected: {selected}
+                            &nbsp; &nbsp;
+                            <ColorPicker
+                                tooltip={'Change Slice Color'} 
+                                type={Type.SEC} 
+                                icon={<FaFillDrip/>}
+                                selectedColor={selectedSliceColor? selectedSliceColor : this.curSliceSelected.attr("fill")}
+                                setSelectedColor={undoable (color => this.changeSelectedColor(color), "Change Selected Slice Color")}
+                                size={Size.XSMALL}
+                            />
+                        </div>
+                    : null}
+                </div>
+                ) : <span className="chart-container"> {'first use table view to select a column to graph'}</span>
+            );
+        }
+        else return (
+            // when it is a brushed table and the incoming table doesn't have any rows selected
+            <div className='chart-container'>
+                Selected rows of data from the incoming DataVizBox to display.
             </div>
-            ) : <span className="chart-container"> {'first use table view to select a column to graph'}</span>
-        );
+        )
     }
 
 }
\ No newline at end of file
-- 
cgit v1.2.3-70-g09d2


From 51b525b5f727311628cba1809e078b67543ddfa4 Mon Sep 17 00:00:00 2001
From: srichman333 <sarah_n_richman@brown.edu>
Date: Mon, 14 Aug 2023 23:22:55 -0400
Subject: merge

---
 src/client/util/CurrentUserUtils.ts              | 2 +-
 src/client/util/SettingsManager.tsx              | 2 +-
 src/client/views/nodes/DataVizBox/DataVizBox.tsx | 5 ++++-
 3 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index ef8b69d12..ae5d97082 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -306,7 +306,7 @@ export class CurrentUserUtils {
             { toolTip: "Tap or drag to create a WebCam recorder", title: "WebCam", icon: "photo-video", dragFactory: doc.emptyWebCam as Doc,     clickFactory: DocCast(doc.emptyWebCam),     openFactoryLocation: OpenWhere.overlay, funcs: { hidden: "IsNoviceMode()"}},
             { toolTip: "Tap or drag to create a button",          title: "Button", icon: "bolt",        dragFactory: doc.emptyButton as Doc,     clickFactory: DocCast(doc.emptyButton)},
             { toolTip: "Tap or drag to create a scripting box",   title: "Script", icon: "terminal",    dragFactory: doc.emptyScript as Doc,     clickFactory: DocCast(doc.emptyScript)},
-            { toolTip: "Tap or drag to create a data viz node",   title: "DataViz", icon: "file",       dragFactory: doc.emptyDataViz as Doc,    clickFactory: DocCast(doc.emptyDataViz)},
+            { toolTip: "Tap or drag to create a data viz node",   title: "DataViz", icon: "chart-bar",       dragFactory: doc.emptyDataViz as Doc,    clickFactory: DocCast(doc.emptyDataViz)},
             { toolTip: "Tap or drag to create a bullet slide",    title: "PPT Slide", icon: "file",     dragFactory: doc.emptySlide as Doc,      clickFactory: DocCast(doc.emptySlide),      openFactoryLocation: OpenWhere.overlay},
             { toolTip: "Tap or drag to create a data note",       title: "DataNote", icon: "window-maximize",dragFactory: doc.emptyHeader as Doc,clickFactory: DocCast(doc.emptyHeader),     openFactoryAsDelegate: true },
             { toolTip: "Toggle a Calculator REPL",                title: "replviewer",  icon: "calculator",                                      clickFactory: '<ScriptingRepl />' as any,   openFactoryLocation: OpenWhere.overlay}, // hack: clickFactory is not a Doc but will get interpreted as a custom UI by the openDoc() onClick script
diff --git a/src/client/util/SettingsManager.tsx b/src/client/util/SettingsManager.tsx
index b2b5be070..6acba8af4 100644
--- a/src/client/util/SettingsManager.tsx
+++ b/src/client/util/SettingsManager.tsx
@@ -450,7 +450,7 @@ export class SettingsManager extends React.Component<{}> {
                     </div>
 
                     <div className="settings-user">
-                        <div style={{ color: 'black' }}>{DashVersion}</div>
+                        <div style={{ color: this.userBackgroundColor }}>{DashVersion}</div>
                         <div className="settings-username" style={{ color: this.userBackgroundColor }}>
                             {Doc.CurrentUserEmail}
                         </div>
diff --git a/src/client/views/nodes/DataVizBox/DataVizBox.tsx b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
index e71739231..0cc73f32f 100644
--- a/src/client/views/nodes/DataVizBox/DataVizBox.tsx
+++ b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
@@ -25,6 +25,9 @@ export enum DataVizView {
 
 @observer
 export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
+    public static LayoutString(fieldStr: string) {
+        return FieldView.LayoutString(DataVizBox, fieldStr);
+    }
 
     // all data
     static pairSet = new ObservableMap<string, { [key: string]: string }[]>();
@@ -120,7 +123,7 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
             // displays how to get data into the DataVizBox if its empty
             <div className="start-message">
                 To create a DataViz box, either import / drag a CSV file into your canvas
-                or copy a data table and use the command 'ctrl + t' to bring the data table
+                or copy a data table and use the command 'ctrl + p' to bring the data table
                 to your canvas.
             </div>
         ) : (
-- 
cgit v1.2.3-70-g09d2


From 61fb855ec92540c48cc4cc844d3b21728e8a4754 Mon Sep 17 00:00:00 2001
From: srichman333 <sarah_n_richman@brown.edu>
Date: Tue, 15 Aug 2023 19:21:30 -0400
Subject: DataViz node documentation link

---
 src/client/views/nodes/DocumentView.tsx | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 4beaeb10e..90fb55290 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -846,6 +846,10 @@ export class DocumentViewInternal extends DocComponent<DocumentViewInternalProps
                 documentationDescription = 'See text node documentation';
                 documentationLink = 'https://brown-dash.github.io/Dash-Documentation/documents/text/';
                 break;
+            case DocumentType.DATAVIZ:
+                documentationDescription = 'See DataViz node documentation';
+                documentationLink = 'https://brown-dash.github.io/Dash-Documentation/documents/dataViz/';
+                break;
         }
         // Add link to help documentation
         if (!this.props.treeViewDoc && documentationDescription && documentationLink) {
-- 
cgit v1.2.3-70-g09d2