Merge branch 'master' into nathan-starter

1 files changed, 58 insertions, 11 deletions

diff --git a/src/client/views/nodes/DataVizBox/DataVizBox.tsx b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
index 9ca63194c..4d5f15a3e 100644
--- a/src/client/views/nodes/DataVizBox/DataVizBox.tsx
+++ b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
@@ -127,8 +127,8 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
 
     @action // pinned / linked anchor doc includes selected rows, graph titles, and graph colors
     restoreView = (data: Doc) => {
-        const changedView = data.config_dataViz && this.dataVizView !== data.config_dataViz && (this.layoutDoc._dataViz = data.config_dataViz);
-        const changedAxes = data.config_dataVizAxes && this.axes.join('') !== StrListCast(data.config_dataVizAxes).join('') && (this.layoutDoc._dataViz_axes = new List<string>(StrListCast(data.config_dataVizAxes)));
+        // const changedView = data.config_dataViz && this.dataVizView !== data.config_dataViz && (this.layoutDoc._dataViz = data.config_dataViz);
+        // const changedAxes = data.config_dataVizAxes && this.axes.join('') !== StrListCast(data.config_dataVizAxes).join('') && (this.layoutDoc._dataViz_axes = new List<string>(StrListCast(data.config_dataVizAxes)));
         this.layoutDoc.dataViz_selectedRows = Field.Copy(data.dataViz_selectedRows);
         this.layoutDoc.dataViz_histogram_barColors = Field.Copy(data.dataViz_histogram_barColors);
         this.layoutDoc.dataViz_histogram_defaultColor = data.dataViz_histogram_defaultColor;
@@ -138,12 +138,13 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
                 this.layoutDoc['_' + key] = data[key];
             }
         });
-        const func = () => this._vizRenderer?.restoreView(data);
-        if (changedView || changedAxes) {
-            setTimeout(func, 100);
-            return true;
-        }
-        return func() ?? false;
+        return true;
+        // const func = () => this._vizRenderer?.restoreView(data);
+        // if (changedView || changedAxes) {
+        //     setTimeout(func, 100);
+        //     return true;
+        // }
+        // return func() ?? false;
     };
     getAnchor = (addAsAnnotation: boolean, pinProps?: PinProps) => {
         const visibleAnchor = AnchorMenu.Instance.GetAnchor?.(undefined, addAsAnnotation);
@@ -352,7 +353,7 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
             axes: this.axes,
             titleCol: this.titleCol,
             // width: this.SidebarShown? this._props.PanelWidth()*.9/1.2: this._props.PanelWidth() * 0.9,
-            height: (this._props.PanelHeight() / scale - 32) /* height of 'change view' button */ * 0.9,
+            height: (this._props.PanelHeight() / scale - 55) /* height of 'change view' button */ * 0.8,
             width: ((this._props.PanelWidth() - this.sidebarWidth()) / scale) * 0.9,
             margin: { top: 10, right: 25, bottom: 75, left: 45 },
         };
@@ -411,11 +412,20 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         GPTPopup.Instance.addDoc = this.sidebarAddDocument;
     };
 
+    // represents whether or not a data viz box created from a schema table displays live updates to the canvas
     @action
     changeLiveSchemaCheckbox = () => {
         this.layoutDoc.dataViz_schemaLive = !this.layoutDoc.dataViz_schemaLive;
     };
 
+    // represents whether or not clicking on a peice of data in the visualization
+    //      (i.e. a data point in a linechart, a bar on a histogram, or a slice of a pie chart)
+    //      filters the data onto a new data viz doc created off of this one
+    @action
+    changeFilteringCheckbox = () => {
+        this.layoutDoc.dataViz_filterSelection = !this.layoutDoc.dataViz_filterSelection;
+    };
+
     specificContextMenu = (): void => {
         const cm = ContextMenu.Instance;
         const options = cm.findByDescription('Options...');
@@ -423,17 +433,43 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         optionItems.push({ description: `Analyze with AI`, event: () => this.askGPT(), icon: 'lightbulb' });
         !options && cm.addItem({ description: 'Options...', subitems: optionItems, icon: 'eye' });
     };
+
     askGPT = action(async () => {
         GPTPopup.Instance.setSidebarId('data_sidebar');
         GPTPopup.Instance.addDoc = this.sidebarAddDocument;
+        GPTPopup.Instance.createFilteredDoc = this.createFilteredDoc;
         GPTPopup.Instance.setDataJson('');
         GPTPopup.Instance.setMode(GPTPopupMode.DATA);
         const data = DataVizBox.dataset.get(CsvCast(this.dataDoc[this.fieldKey]).url.href);
-        const input = JSON.stringify(data);
-        GPTPopup.Instance.setDataJson(input);
+        GPTPopup.Instance.setDataJson(JSON.stringify(data));
         GPTPopup.Instance.generateDataAnalysis();
     });
 
+    /**
+     * creates a new dataviz document filter from this one
+     *      it appears to the right of this document, with the
+     *      parameters passed in being used to create an initial display
+     */
+    createFilteredDoc = (axes?: any) => {
+        const embedding = Doc.MakeEmbedding(this.Document!);
+        embedding._layout_showSidebar = false;
+        embedding._dataViz = DataVizView.LINECHART;
+        embedding._dataViz_axes = new List<string>(axes);
+        embedding._dataViz_parentViz = this.Document;
+        embedding.histogramBarColors = Field.Copy(this.layoutDoc.histogramBarColors);
+        embedding.defaultHistogramColor = this.layoutDoc.defaultHistogramColor;
+        embedding.pieSliceColors = Field.Copy(this.layoutDoc.pieSliceColors);
+        embedding._layout_showSidebar = false;
+        embedding.width = NumCast(this.layoutDoc._width) - this.sidebarWidth();
+        embedding._layout_sidebarWidthPercent = '0%';
+        this._props.addDocument?.(embedding);
+        embedding._dataViz_axes = new List<string>(axes);
+        this.layoutDoc.dataViz_selectedRows = new List<number>(this.records.map((rec, i) => i));
+        embedding.x = Number(embedding.x) + Number(this.Document.width);
+
+        return true;
+    };
+
     render() {
         const scale = this._props.NativeDimScaling?.() || 1;
         const toggleBtn = (name: string, type: DataVizView) => (
@@ -480,6 +516,12 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
                         </div>
                     </div>
                 ) : null}
+                {this.layoutDoc._dataViz !== DataVizView.TABLE ? (
+                    <div className="filterData-checkBox">
+                        <Checkbox color="primary" onChange={this.changeFilteringCheckbox} checked={this.layoutDoc.dataViz_filterSelection as boolean} />
+                        Select data to filter
+                    </div>
+                ) : null}
 
                 {this.renderVizView}
 
@@ -540,3 +582,8 @@ Docs.Prototypes.TemplateMap.set(DocumentType.DATAVIZ, {
         _layout_nativeDimEditable: true,
     },
 });
+
+Docs.Prototypes.TemplateMap.set(DocumentType.DATAVIZ, {
+    layout: { view: DataVizBox, dataField: 'data' },
+    options: { dataViz_title: '', dataViz_line: '', dataViz_pie: '', dataViz_histogram: '', dataViz: 'table', _layout_fitWidth: true, _layout_reflowHorizontal: true, _layout_reflowVertical: true, _layout_nativeDimEditable: true },
+});