Merge branch 'moreUpgrading' into dataViz-annotations

1 files changed, 41 insertions, 40 deletions

diff --git a/src/client/views/nodes/DataVizBox/DataVizBox.tsx b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
index 4eb241380..56c130e0f 100644
--- a/src/client/views/nodes/DataVizBox/DataVizBox.tsx
+++ b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
@@ -52,10 +52,10 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
     @observable _savedAnnotations = new ObservableMap<number, HTMLDivElement[]>();
     @computed get annotationLayer() {
         TraceMobx();
-        return <div className="dataVizBox-annotationLayer" style={{ height: this.props.PanelHeight(), width: this.props.PanelWidth() }} ref={this._annotationLayer} />;
+        return <div className="dataVizBox-annotationLayer" style={{ height: this._props.PanelHeight(), width: this._props.PanelWidth() }} ref={this._annotationLayer} />;
     }
     marqueeDown = (e: React.PointerEvent) => {
-        if (!e.altKey && e.button === 0 && NumCast(this.rootDoc._freeform_scale, 1) <= NumCast(this.rootDoc.freeform_scaleMin, 1) && this.props.isContentActive(true) && ![InkTool.Highlighter, InkTool.Pen, InkTool.Write].includes(Doc.ActiveTool)) {
+        if (!e.altKey && e.button === 0 && NumCast(this.Document._freeform_scale, 1) <= NumCast(this.Document.freeform_scaleMin, 1) && this._props.isContentActive(true) && ![InkTool.Highlighter, InkTool.Pen, InkTool.Write].includes(Doc.ActiveTool)) {
             setupMoveUpEvents(
                 this,
                 e,
@@ -75,7 +75,7 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
     finishMarquee = () => {
         this._getAnchor = AnchorMenu.Instance?.GetAnchor;
         this._marqueeing = undefined;
-        this.props.select(false);
+        this._props.select(false);
     };
     savedAnnotations = () => this._savedAnnotations;
 
@@ -90,7 +90,7 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
 
     // all CSV records in the dataset (that aren't an empty row)
     @computed.struct get records() {
-        var records = DataVizBox.dataset.get(CsvCast(this.rootDoc[this.fieldKey]).url.href);
+        var records = DataVizBox.dataset.get(CsvCast(this.dataDoc[this.fieldKey]).url.href);
         return records?.filter(record => Object.keys(record).some(key => record[key])) ?? [];
     }
 
@@ -131,15 +131,15 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
     getAnchor = (addAsAnnotation?: boolean, pinProps?: PinProps) => {
         const visibleAnchor = this._getAnchor?.(this._savedAnnotations, false); // use marquee anchor, otherwise, save zoom/pan as anchor
         const anchor = !pinProps
-            ? this.rootDoc
+            ? this.Document
             : this._vizRenderer?.getAnchor(pinProps) ??
             visibleAnchor ??
               Docs.Create.ConfigDocument({
-                title: 'ImgAnchor:' + this.rootDoc.title,
+                title: 'ImgAnchor:' + this.Document.title,
                 config_panX: NumCast(this.layoutDoc._freeform_panX),
                 config_panY: NumCast(this.layoutDoc._freeform_panY),
                 config_viewScale: Cast(this.layoutDoc._freeform_scale, 'number', null),
-                annotationOn: this.rootDoc,
+                annotationOn: this.Document,
                   // when we clear selection -> we should have it so chartBox getAnchor returns undefined
                   // this is for when we want the whole doc (so when the chartBox getAnchor returns without a marker)
                   /*put in some options*/
@@ -193,8 +193,8 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
                 key="sidebar"
                 title="Toggle Sidebar"
                 style={{
-                    display: !this.props.isContentActive() ? 'none' : undefined,
-                    top: StrCast(this.rootDoc._layout_showTitle) === 'title' ? 20 : 5,
+                    display: !this._props.isContentActive() ? 'none' : undefined,
+                    top: StrCast(this.Document._layout_showTitle) === 'title' ? 20 : 5,
                     backgroundColor: this.SidebarShown ? Colors.MEDIUM_BLUE : Colors.BLACK,
                 }}
                 onPointerDown={this.sidebarBtnDown}>
@@ -212,11 +212,11 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
             e,
             (e, down, delta) =>
                 runInAction(() => {
-                    const localDelta = this.props
+                    const localDelta = this._props
                         .ScreenToLocalTransform()
-                        .scale(this.props.NativeDimScaling?.() || 1)
+                        .scale(this._props.NativeDimScaling?.() || 1)
                         .transformDirection(delta[0], delta[1]);
-                    const fullWidth = this.props.width;
+                    const fullWidth = this._props.width;
                     const mapWidth = fullWidth! - this.sidebarWidth();
                     if (this.sidebarWidth() + localDelta[0] > 0) {
                         this.layoutDoc._layout_showSidebar = true;
@@ -241,9 +241,9 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         return StrCast(this.layoutDoc._layout_sidebarWidthPercent, '0%');
     }
     @computed get sidebarColor() {
-        return StrCast(this.layoutDoc.sidebar_color, StrCast(this.layoutDoc[this.props.fieldKey + '_backgroundColor'], '#e4e4e4'));
+        return StrCast(this.layoutDoc.sidebar_color, StrCast(this.layoutDoc[this._props.fieldKey + '_backgroundColor'], '#e4e4e4'));
     }
-    sidebarWidth = () => (Number(this.sidebarWidthPercent.substring(0, this.sidebarWidthPercent.length - 1)) / 100) * this.props.PanelWidth();
+    sidebarWidth = () => (Number(this.sidebarWidthPercent.substring(0, this.sidebarWidthPercent.length - 1)) / 100) * this._props.PanelWidth();
     sidebarAddDocument = (doc: Doc | Doc[], sidebarKey?: string) => {
         if (!this.SidebarShown) this.toggleSidebar();
         return this.addDocument(doc, sidebarKey);
@@ -251,31 +251,32 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
     sidebarRemoveDocument = (doc: Doc | Doc[], sidebarKey?: string) => this.removeDocument(doc, sidebarKey);
 
     componentDidMount() {
-        this.props.setContentView?.(this);
-        if (!DataVizBox.dataset.has(CsvCast(this.rootDoc[this.fieldKey]).url.href)) this.fetchData();
+        this._props.setContentView?.(this);
+        if (!DataVizBox.dataset.has(CsvCast(this.dataDoc[this.fieldKey]).url.href)) this.fetchData();
     }
 
     fetchData = () => {
-        DataVizBox.dataset.set(CsvCast(this.rootDoc[this.fieldKey]).url.href, []); // assign temporary dataset as a lock to prevent duplicate server requests
+        DataVizBox.dataset.set(CsvCast(this.dataDoc[this.fieldKey]).url.href, []); // assign temporary dataset as a lock to prevent duplicate server requests
         fetch('/csvData?uri=' + this.dataUrl?.url.href) //
-            .then(res => res.json().then(action(res => !res.errno && DataVizBox.dataset.set(CsvCast(this.rootDoc[this.fieldKey]).url.href, res))));
+            .then(res => res.json().then(action(res => !res.errno && DataVizBox.dataset.set(CsvCast(this.dataDoc[this.fieldKey]).url.href, res))));
     };
 
     // toggles for user to decide which chart type to view the data in
     @computed get renderVizView() {
-        const scale = this.props.NativeDimScaling?.() || 1;
+        const scale = this._props.NativeDimScaling?.() || 1;
         const sharedProps = {
-            rootDoc: this.rootDoc,
+            Document: this.Document,
             layoutDoc: this.layoutDoc,
             records: this.records,
             axes: this.axes,
-            height: (this.props.PanelHeight() - 32) /* height of 'change view' button */ * 0.9,
-            width: this.SidebarShown? this.props.PanelWidth()*.9/1.2: this.props.PanelWidth() * 0.9,
+           //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,
+            width: (this._props.PanelWidth() / scale) * 0.9,
             margin: { top: 10, right: 25, bottom: 75, left: 45 },
         };
         if (!this.records.length) return 'no data/visualization';
         switch (this.dataVizView) {
-            case DataVizView.TABLE:     return <TableBox  {...sharedProps} docView={this.props.DocumentView} selectAxes={this.selectAxes} />;
+            case DataVizView.TABLE:     return <TableBox  {...sharedProps} docView={this.DocumentView} selectAxes={this.selectAxes} />;
             case DataVizView.LINECHART: return <LineChart {...sharedProps} dataDoc={this.dataDoc} fieldKey={this.fieldKey} ref={r => (this._vizRenderer = r ?? undefined)} />;
             case DataVizView.HISTOGRAM: return <Histogram {...sharedProps} dataDoc={this.dataDoc} fieldKey={this.fieldKey} ref={r => (this._vizRenderer = r ?? undefined)} />;
             case DataVizView.PIECHART:  return <PieChart  {...sharedProps} dataDoc={this.dataDoc} fieldKey={this.fieldKey} ref={r => (this._vizRenderer = r ?? undefined)} 
@@ -285,9 +286,9 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
 
     @action
     onPointerDown = (e: React.PointerEvent): void => {
-        if ((this.props.Document._freeform_scale || 1) !== 1) return;
-        if (!e.altKey && e.button === 0 && this.props.isContentActive(true) && ![InkTool.Highlighter, InkTool.Pen, InkTool.Write].includes(Doc.ActiveTool)) {
-            this.props.select(false);
+        if ((this.Document._freeform_scale || 1) !== 1) return;
+        if (!e.altKey && e.button === 0 && this._props.isContentActive(true) && ![InkTool.Highlighter, InkTool.Pen, InkTool.Write].includes(Doc.ActiveTool)) {
+            this._props.select(false);
             MarqueeAnnotator.clearAnnotations(this._savedAnnotations);
             this._marqueeing = [e.clientX, e.clientY];
             const target = e.target as any;
@@ -306,7 +307,7 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
 
     @action
     onSelectEnd = (e: PointerEvent): void => {
-        this.props.select(false);
+        this._props.select(false);
         document.removeEventListener('pointerup', this.onSelectEnd);
 
         const sel = window.getSelection();
@@ -341,7 +342,7 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
             }
             current.push(row)
         }
-        DataVizBox.dataset.set(CsvCast(this.rootDoc[this.fieldKey]).url.href, current )
+        DataVizBox.dataset.set(CsvCast(this.Document[this.fieldKey]).url.href, current )
     }
     
     render() {
@@ -350,7 +351,7 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
             this.updateSchemaViz();
         }
 
-        const scale = this.props.NativeDimScaling?.() || 1;
+        const scale = this._props.NativeDimScaling?.() || 1;
         return !this.records.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 + p' to bring the data table to your canvas.</div>
@@ -359,7 +360,7 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
                 className="dataViz-box"
                 onPointerDown={this.marqueeDown}
                 style={{
-                    pointerEvents: this.props.isContentActive() === true ? 'all' : 'none',
+                    pointerEvents: this._props.isContentActive() === true ? 'all' : 'none',
                     width: `${100 / scale}%`,
                     height: `${100 / scale}%`,
                     transform: `scale(${scale})`,
@@ -377,15 +378,15 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
 
                 {/* <CollectionFreeFormView
                     ref={this._ffref}
-                    {...this.props}
+                    {...this._props}
                     setContentView={emptyFunction}
-                    renderDepth={this.props.renderDepth - 1}
+                    renderDepth={this._props.renderDepth - 1}
                     fieldKey={this.annotationKey}
-                    styleProvider={this.props.styleProvider}
+                    styleProvider={this._props.styleProvider}
                     isAnnotationOverlay={true}
                     annotationLayerHostsContent={false}
-                    PanelWidth={this.props.PanelWidth}
-                    PanelHeight={this.props.PanelHeight}
+                    PanelWidth={this._props.PanelWidth}
+                    PanelHeight={this._props.PanelHeight}
                     select={emptyFunction}
                     isAnyChildContentActive={returnFalse}
                     whenChildContentsActiveChanged={this.whenChildContentsActiveChanged}
@@ -402,9 +403,9 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
                      onPointerDown={this.onPointerDown}>
                     <SidebarAnnos
                         ref={this._sidebarRef}
-                        {...this.props}
+                        {...this._props}
                         fieldKey={this.fieldKey}
-                        rootDoc={this.rootDoc}
+                        rootDoc={this.Document}
                         layoutDoc={this.layoutDoc}
                         dataDoc={this.dataDoc}
                         usePanelWidth={true}
@@ -421,13 +422,13 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
                 {this.annotationLayer}
                 {!this._marqueeing || !this._mainCont.current || !this._annotationLayer.current ? null : (
                     <MarqueeAnnotator
-                        rootDoc={this.rootDoc}
+                        rootDoc={this.Document}
                         getPageFromScroll={undefined}
                         anchorMenuClick={this.anchorMenuClick}
                         scrollTop={0}
-                        annotationLayerScrollTop={NumCast(this.props.Document._layout_scrollTop)}
+                        annotationLayerScrollTop={NumCast(this.Document._layout_scrollTop)}
                         addDocument={this.sidebarAddDocument}
-                        docView={this.props.DocumentView!}
+                        docView={this.DocumentView!}
                         finishMarquee={this.finishMarquee}
                         savedAnnotations={this.savedAnnotations}
                         selectionText={returnEmptyString}