layout doc fields organized

6 files changed, 37 insertions, 34 deletions

diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index 96a983153..54f2b7132 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -679,7 +679,7 @@ export namespace Docs {
                 DocumentType.DATAVIZ,
                 {
                     layout: { view: DataVizBox, dataField: defaultDataKey },
-                    options: { dataViz_title: '', _layout_fitWidth: true, nativeDimModifiable: true },
+                    options: { _layout_fitWidth: true, nativeDimModifiable: true },
                 },
             ],
             [
diff --git a/src/client/views/nodes/DataVizBox/DataVizBox.tsx b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
index 9c59fcd13..399d6ada0 100644
--- a/src/client/views/nodes/DataVizBox/DataVizBox.tsx
+++ b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
@@ -47,11 +47,11 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         const changedView = this.dataVizView !== data.config_dataViz && (this.layoutDoc._dataViz = data.config_dataViz);
         const changedAxes = 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.histogramBarColors = Field.Copy(data.histogramBarColors);
-        this.layoutDoc.defaultHistogramColor = data.defaultHistogramColor;
-        this.layoutDoc.pieSliceColors = Field.Copy(data.pieSliceColors);
+        this.layoutDoc.dataViz_histogram_barColors = Field.Copy(data.dataViz_histogram_barColors);
+        this.layoutDoc.dataViz_histogram_defaultColor = data.dataViz_histogram_defaultColor;
+        this.layoutDoc.dataViz_pie_sliceColors = Field.Copy(data.dataViz_pie_sliceColors);
         Object.keys(this.layoutDoc).map(key => {
-            if (key.startsWith('histogram_title') || key.startsWith('lineChart_title') || key.startsWith('pieChart_title')) {
+            if (key.startsWith('dataViz_histogram_title') || key.startsWith('dataViz_lineChart_title') || key.startsWith('dataViz_pieChart_title')) {
                 this.layoutDoc['_' + key] = data[key];
             }
         });
@@ -74,11 +74,11 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         anchor.config_dataViz = this.dataVizView;
         anchor.config_dataVizAxes = this.axes.length ? new List<string>(this.axes) : undefined;
         anchor.dataViz_selectedRows = Field.Copy(this.layoutDoc.dataViz_selectedRows);
-        anchor.histogramBarColors = Field.Copy(this.layoutDoc.histogramBarColors);
-        anchor.defaultHistogramColor = this.layoutDoc.defaultHistogramColor;
-        anchor.pieSliceColors = Field.Copy(this.layoutDoc.pieSliceColors);
+        anchor.dataViz_histogram_barColors = Field.Copy(this.layoutDoc.dataViz_histogram_barColors);
+        anchor.dataViz_histogram_defaultColor = this.layoutDoc.dataViz_histogram_defaultColor;
+        anchor.dataViz_pie_sliceColors = Field.Copy(this.layoutDoc.dataViz_pie_sliceColors);
         Object.keys(this.layoutDoc).map(key => {
-            if (key.startsWith('histogram_title') || key.startsWith('lineChart_title') || key.startsWith('pieChart_title')) {
+            if (key.startsWith('dataViz_histogram_title') || key.startsWith('dataViz_lineChart_title') || key.startsWith('dataViz_pieChart_title')) {
                 anchor[key] = this.layoutDoc[key];
             }
         });
@@ -155,7 +155,7 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
     componentDidMount() {
         this.props.setContentView?.(this);
         this.fetchData();
-        if (!this.layoutDoc._dataVizView) this.layoutDoc._dataVizView = this.dataVizView;
+        if (!this.layoutDoc.dataViz) this.layoutDoc.dataViz = this.dataVizView;
     }
 
     fetchData() {
diff --git a/src/client/views/nodes/DataVizBox/components/Histogram.tsx b/src/client/views/nodes/DataVizBox/components/Histogram.tsx
index b3bdccbbb..1eb57a323 100644
--- a/src/client/views/nodes/DataVizBox/components/Histogram.tsx
+++ b/src/client/views/nodes/DataVizBox/components/Histogram.tsx
@@ -107,6 +107,7 @@ export class Histogram extends React.Component<HistogramProps> {
             },
             { fireImmediately: true }
         );
+        if (!this.props.layoutDoc.dataViz_histogram) this.props.layoutDoc.dataViz_histogram = '';
     };
 
     @action
@@ -397,7 +398,7 @@ export class Histogram extends React.Component<HistogramProps> {
             )
             .attr('fill', d => {
                 var barColor;
-                var barColors = StrListCast(this.props.layoutDoc.histogramBarColors).map(each => each.split('::'));
+                var barColors = StrListCast(this.props.layoutDoc.dataViz_histogram_barColors).map(each => each.split('::'));
                 barColors.map(each => {
                     if (d[0] && d[0].toString() && each[0] == d[0].toString()) barColor = each[1];
                     else {
@@ -405,7 +406,7 @@ export class Histogram extends React.Component<HistogramProps> {
                         if (Number(range[0]) <= d[0] && d[0] <= Number(range[1])) barColor = each[1];
                     }
                 });
-                return barColor ? StrCast(barColor) : StrCast(this.props.layoutDoc.defaultHistogramColor);
+                return barColor ? StrCast(barColor) : StrCast(this.props.layoutDoc.dataViz_histogram_defaultColor);
             });
     };
 
@@ -413,7 +414,7 @@ export class Histogram extends React.Component<HistogramProps> {
         this.curBarSelected.attr('fill', color);
         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);
+        const barColors = Cast(this.props.layoutDoc.dataViz_histogram_barColors, listSpec('string'), null);
         barColors.map(each => {
             if (each.split('::')[0] == barName) barColors.splice(barColors.indexOf(each), 1);
         });
@@ -421,10 +422,10 @@ export class Histogram extends React.Component<HistogramProps> {
     };
 
     @action eraseSelectedColor = () => {
-        this.curBarSelected.attr('fill', this.props.layoutDoc.defaultHistogramColor);
+        this.curBarSelected.attr('fill', this.props.layoutDoc.dataViz_histogram_defaultColor);
         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);
+        const barColors = Cast(this.props.layoutDoc.dataViz_histogram_barColors, listSpec('string'), null);
         barColors.map(each => {
             if (each.split('::')[0] == barName) barColors.splice(barColors.indexOf(each), 1);
         });
@@ -434,11 +435,11 @@ export class Histogram extends React.Component<HistogramProps> {
         this._histogramData;
         var curSelectedBarName = '';
         var titleAccessor: any = '';
-        if (this.props.axes.length == 2) titleAccessor = 'dataViz_title_histogram_' + this.props.axes[0] + '-' + this.props.axes[1];
-        else if (this.props.axes.length > 0) titleAccessor = 'dataViz_title_histogram_' + this.props.axes[0];
+        if (this.props.axes.length == 2) titleAccessor = 'dataViz_histogram_title' + this.props.axes[0] + '-' + this.props.axes[1];
+        else if (this.props.axes.length > 0) titleAccessor = 'dataViz_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.histogramBarColors) this.props.layoutDoc.histogramBarColors = new List<string>();
+        if (!this.props.layoutDoc.dataViz_histogram_defaultColor) this.props.layoutDoc.dataViz_histogram_defaultColor = '#69b3a2';
+        if (!this.props.layoutDoc.dataViz_histogram_barColors) this.props.layoutDoc.dataViz_histogram_barColors = new List<string>();
         var selected: string;
         if (this._currSelected) {
             curSelectedBarName = StrCast(this._currSelected![this.props.axes[0]].replace(/\$/g, '').replace(/\%/g, '').replace(/\</g, ''));
@@ -450,7 +451,7 @@ export class Histogram extends React.Component<HistogramProps> {
             selected += ' }';
         } else selected = 'none';
         var selectedBarColor;
-        var barColors = StrListCast(this.props.layoutDoc.histogramBarColors).map(each => each.split('::'));
+        var barColors = StrListCast(this.props.layoutDoc.dataViz_histogram_barColors).map(each => each.split('::'));
         barColors.map(each => {
             if (each[0] == curSelectedBarName!) selectedBarColor = each[1];
         });
@@ -476,9 +477,9 @@ export class Histogram extends React.Component<HistogramProps> {
                             tooltip={'Change Default Bar Color'}
                             type={Type.SEC}
                             icon={<FaFillDrip />}
-                            selectedColor={StrCast(this.props.layoutDoc.defaultHistogramColor)}
-                            setFinalColor={undoable(color => (this.props.layoutDoc.defaultHistogramColor = color), 'Change Default Bar Color')}
-                            setSelectedColor={undoable(color => (this.props.layoutDoc.defaultHistogramColor = color), 'Change Default Bar Color')}
+                            selectedColor={StrCast(this.props.layoutDoc.dataViz_histogram_defaultColor)}
+                            setFinalColor={undoable(color => (this.props.layoutDoc.dataViz_histogram_defaultColor = color), 'Change Default Bar Color')}
+                            setSelectedColor={undoable(color => (this.props.layoutDoc.dataViz_histogram_defaultColor = color), 'Change Default Bar Color')}
                             size={Size.XSMALL}
                         />
                     </div>
diff --git a/src/client/views/nodes/DataVizBox/components/LineChart.tsx b/src/client/views/nodes/DataVizBox/components/LineChart.tsx
index 46cf27705..d2e67e678 100644
--- a/src/client/views/nodes/DataVizBox/components/LineChart.tsx
+++ b/src/client/views/nodes/DataVizBox/components/LineChart.tsx
@@ -121,6 +121,7 @@ export class LineChart extends React.Component<LineChartProps> {
             },
             { fireImmediately: true }
         );
+        if (!this.props.layoutDoc.dataViz_lineChart) this.props.layoutDoc.dataViz_lineChart = '';
     };
 
     // 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
@@ -354,8 +355,8 @@ export class LineChart extends React.Component<LineChartProps> {
     render() {
         this.componentDidMount();
         var titleAccessor: any = '';
-        if (this.props.axes.length == 2) titleAccessor = 'dataViz_title_lineChart_' + this.props.axes[0] + '-' + this.props.axes[1];
-        else if (this.props.axes.length > 0) titleAccessor = 'dataViz_title_lineChart_' + this.props.axes[0];
+        if (this.props.axes.length == 2) titleAccessor = 'dataViz_lineChart_title' + this.props.axes[0] + '-' + this.props.axes[1];
+        else if (this.props.axes.length > 0) titleAccessor = 'dataViz_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';
         if (this._lineChartData.length>0 || (!this.incomingLinks || this.incomingLinks.length==0)){
diff --git a/src/client/views/nodes/DataVizBox/components/PieChart.tsx b/src/client/views/nodes/DataVizBox/components/PieChart.tsx
index 213baa8a4..6d8302b6a 100644
--- a/src/client/views/nodes/DataVizBox/components/PieChart.tsx
+++ b/src/client/views/nodes/DataVizBox/components/PieChart.tsx
@@ -92,6 +92,7 @@ export class PieChart extends React.Component<PieChartProps> {
             },
             { fireImmediately: true }
         );
+        if (!this.props.layoutDoc.dataViz_pie) this.props.layoutDoc.dataViz_pie = '';
     };
 
     @action
@@ -270,7 +271,7 @@ export class PieChart extends React.Component<PieChartProps> {
                 var sliceColor;
                 if (dataPoint) {
                     var accessByName = dataPoint[this.props.axes[0]].replace(/\$/g, '').replace(/\%/g, '').replace(/\</g, '');
-                    var sliceColors = StrListCast(this.props.layoutDoc.pieSliceColors).map(each => each.split('::'));
+                    var sliceColors = StrListCast(this.props.layoutDoc.dataViz_pie_sliceColors).map(each => each.split('::'));
                     sliceColors.map(each => {
                         if (each[0] == StrCast(accessByName)) sliceColor = each[1];
                     });
@@ -324,7 +325,7 @@ export class PieChart extends React.Component<PieChartProps> {
         this.curSliceSelected.attr('fill', color);
         var sliceName = this._currSelected[this.props.axes[0]].replace(/\$/g, '').replace(/\%/g, '').replace(/\</g, '');
 
-        const sliceColors = Cast(this.props.layoutDoc.pieSliceColors, listSpec('string'), null);
+        const sliceColors = Cast(this.props.layoutDoc.dataViz_pie_sliceColors, listSpec('string'), null);
         sliceColors.map(each => {
             if (each.split('::')[0] == sliceName) sliceColors.splice(sliceColors.indexOf(each), 1);
         });
@@ -334,10 +335,10 @@ export class PieChart extends React.Component<PieChartProps> {
     render() {
         this.componentDidMount();
         var titleAccessor: any = '';
-        if (this.props.axes.length == 2) titleAccessor = 'dataViz_title_pieChart_' + this.props.axes[0] + '-' + this.props.axes[1];
-        else if (this.props.axes.length > 0) titleAccessor = 'dataViz_title_pieChart_' + this.props.axes[0];
+        if (this.props.axes.length == 2) titleAccessor = 'dataViz_pie_title' + this.props.axes[0] + '-' + this.props.axes[1];
+        else if (this.props.axes.length > 0) titleAccessor = 'dataViz_pie_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>();
+        if (!this.props.layoutDoc.dataViz_pie_sliceColors) this.props.layoutDoc.dataViz_pie_sliceColors = new List<string>();
         var selected: string;
         var curSelectedSliceName = '';
         if (this._currSelected) {
@@ -350,7 +351,7 @@ export class PieChart extends React.Component<PieChartProps> {
             selected += ' }';
         } else selected = 'none';
         var selectedSliceColor;
-        var sliceColors = StrListCast(this.props.layoutDoc.pieSliceColors).map(each => each.split('::'));
+        var sliceColors = StrListCast(this.props.layoutDoc.dataViz_pie_sliceColors).map(each => each.split('::'));
         sliceColors.map(each => {
             if (each[0] == curSelectedSliceName!) selectedSliceColor = each[1];
         });
diff --git a/src/client/views/nodes/DataVizBox/components/TableBox.tsx b/src/client/views/nodes/DataVizBox/components/TableBox.tsx
index edec72cc5..33688462c 100644
--- a/src/client/views/nodes/DataVizBox/components/TableBox.tsx
+++ b/src/client/views/nodes/DataVizBox/components/TableBox.tsx
@@ -102,9 +102,9 @@ export class TableBox extends React.Component<TableBoxProps> {
                                                                 embedding._dataViz_axes = 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);
+                                                                embedding.dataViz_histogram_barColors = Field.Copy(this.props.layoutDoc.dataViz_histogram_barColors);
+                                                                embedding.dataViz_histogram_defaultColor = this.props.layoutDoc.dataViz_histogram_defaultColor;
+                                                                embedding.dataViz_pie_sliceColors = Field.Copy(this.props.layoutDoc.dataViz_pie_sliceColors);
                                                                 return embedding;
                                                             };
                                                             if (this.props.docView?.() && !Utils.isClick(e.clientX, e.clientY, downX, downY, Date.now())) {