1 files changed, 16 insertions, 69 deletions

diff --git a/src/client/views/nodes/DataVizBox/ChartBox.tsx b/src/client/views/nodes/DataVizBox/ChartBox.tsx
index c5ec1716d..56f61474b 100644
--- a/src/client/views/nodes/DataVizBox/ChartBox.tsx
+++ b/src/client/views/nodes/DataVizBox/ChartBox.tsx
@@ -21,6 +21,15 @@ export interface ChartBoxProps {
     pairs: {x: number, y:number}[];
 }
 
+export interface ChartJsData {
+    labels: number[];
+    datasets: {
+        label: string;
+        data: number[];
+        backgroundColor: string[];
+    }[] 
+}
+
 ChartJS.register(
     CategoryScale,
     LinearScale,
@@ -30,37 +39,6 @@ ChartJS.register(
     Legend
   );
   
-//   export const options = {
-//     responsive: true,
-//     plugins: {
-//       legend: {
-//         position: 'top' as const,
-//       },
-//       title: {
-//         display: true,
-//         text: 'Chart.js Bar Chart',
-//       },
-//     },
-//   };
-  
-//   const labels = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
-  
-//   export const data = {
-//     labels,
-//     datasets: [
-//       {
-//         label: 'Dataset 1',
-//         data: [100, 200, 300, 400, 500, 600, 700],
-//         backgroundColor: 'rgba(255, 99, 132, 0.5)',
-//       },
-//       {
-//         label: 'Dataset 2',
-//         data: [700, 600, 500, 400, 300, 200, 100],
-//         backgroundColor: 'rgba(53, 162, 235, 0.5)',
-//       },
-//     ],
-//   };
-
 const primaryColor = 'rgba(53, 162, 235, 0.5)';
 const selectedColor = 'rgba(255, 99, 132, 0.5)';
 
@@ -68,18 +46,9 @@ const selectedColor = 'rgba(255, 99, 132, 0.5)';
 export class ChartBox extends React.Component<ChartBoxProps> {
     private _chartRef: any = React.createRef<ChartJSOrUndefined<"bar", number[], string>>();
 
-    // TODO: add alternate | undefined to all these variables
-    @observable private _prevColor: string = undefined;
-    @observable private _prevIndex: { dIndex: number, index: number} = undefined;
-    // @observable private _chartJsData: {
-    //     labels: number[];
-    //     datasets: {
-    //         label: string;
-    //         data: number[];
-    //         backgroundColor: string;
-    //     }[];
-    // } = undefined;
-    @observable private _chartJsData: any = null;
+    @observable private _prevColor: string | undefined= undefined;
+    @observable private _prevIndex: { dIndex: number, index: number} | undefined = undefined;
+    @observable private _chartJsData: ChartJsData | undefined= undefined;
 
     @computed get options() {
         return {
@@ -102,7 +71,6 @@ export class ChartBox extends React.Component<ChartBoxProps> {
         const dataset = {
             label: 'Dataset 1',
             data: this.props.pairs.map(p => p.y),
-            // backgroundColor: primaryColor 
             backgroundColor: this.props.pairs.map(p => primaryColor),
         }
         const data = {
@@ -110,39 +78,21 @@ export class ChartBox extends React.Component<ChartBoxProps> {
             datasets: [dataset]
         };
         this._chartJsData = data;
-        // this._chartRef.current.update()
     }
     
-    @computed get chartJsData() {
-        const labels = this.props.pairs.map(p => p.x);
-        const dataset = {
-            label: 'Dataset 1',
-            data: this.props.pairs.map(p => p.y),
-            backgroundColor: this.props.pairs.map(p => primaryColor),
-            // backgroundColor: primaryColor,
-        }
-        const data = {
-            labels,
-            datasets: [dataset]
-        };
-        return data;
+    componentDidMount() {
+        this.generateChartJsData();
     }
 
-    // componentDidMount() {
-    //     this.generateChartJsData();
-    // }
-
     @action
     onClick = (e: any) => {
         e.preventDefault();
-        console.log(getDatasetAtEvent(this._chartRef.current, e));
-        console.log(getElementAtEvent(this._chartRef.current, e));
-
+        if (getDatasetAtEvent(this._chartRef.current, e).length == 0) return;
+        if (!this._chartJsData) return;
         if (this._prevIndex && this._prevColor) {
             this._chartJsData.datasets[this._prevIndex.dIndex].backgroundColor[this._prevIndex.index] = this._prevColor;
         }
 
-
         const currSelected = getElementAtEvent(this._chartRef.current, e);
         const index = { datasetIndex: currSelected[0].datasetIndex, index: currSelected[0].index };
         this._prevIndex = { dIndex: index.datasetIndex, index: index.index };
@@ -150,12 +100,9 @@ export class ChartBox extends React.Component<ChartBoxProps> {
         this._chartJsData.datasets[index.datasetIndex].backgroundColor[index.index] = selectedColor;
         // TODO: nda - send data back to the backend so that we know how to render the chart
         this._chartRef.current.update();
-        console.log(this._chartJsData.datasets[index.datasetIndex].backgroundColor[index.index]);
     }
 
     render() {
-        if (this.props.pairs && !this._chartJsData) this.generateChartJsData();
-            
         if (this.props.pairs && this._chartJsData) {
             return <Bar ref={this._chartRef} options={this.options} data={this._chartJsData} onClick={(e) => this.onClick(e)} />
         } else {