Merge branch 'master' into sophie-ai-images

9 files changed, 865 insertions, 234 deletions

diff --git a/src/client/views/nodes/DataVizBox/DataVizBox.scss b/src/client/views/nodes/DataVizBox/DataVizBox.scss
index 430446c06..a3132dc6e 100644
--- a/src/client/views/nodes/DataVizBox/DataVizBox.scss
+++ b/src/client/views/nodes/DataVizBox/DataVizBox.scss
@@ -1,4 +1,4 @@
-.dataviz {
+.dataViz-box {
     overflow: auto;
     height: 100%;
     width: 100%;
@@ -7,9 +7,46 @@
         display: flex;
         flex-direction: row;
     }
+
+    .dataviz-overlayButton-sidebar {
+        background: #121721;
+        height: 25px;
+        width: 25px;
+        right: 5px;
+        display: flex;
+        position: absolute;
+        align-items: center;
+        justify-content: center;
+        border-radius: 3px;
+        pointer-events: all;
+        z-index: 1; // so it appears on top of the document's title, if shown
+
+        // box-shadow: $standard-box-shadow;
+        // transition: 0.2s;
+
+        &:hover {
+            filter: brightness(0.85);
+        }
+    }
+
+    .dataviz-sidebar {
+        position: absolute;
+        right: 0;
+        top: 0;
+        height: 100%;
+    }
     .button-container {
         pointer-events: unset;
     }
+
+    .dataVizBox-annotationLayer{
+        position: absolute;
+        transform-origin: left top;
+        top: 0;
+        width: 100%;
+        pointer-events: none;
+        mix-blend-mode: multiply;
+    }
 }
 .start-message {
     margin: 10px;
diff --git a/src/client/views/nodes/DataVizBox/DataVizBox.tsx b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
index 299494c83..8365f4770 100644
--- a/src/client/views/nodes/DataVizBox/DataVizBox.tsx
+++ b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
@@ -1,20 +1,32 @@
-import { Toggle, ToggleType, Type } from 'browndash-components';
-import { action, computed, ObservableMap } from 'mobx';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { Colors, Toggle, ToggleType, Type } from 'browndash-components';
+import { ObservableMap, action, computed, makeObservable, observable, runInAction } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
-import { Doc, Field, StrListCast } from '../../../../fields/Doc';
+import { emptyFunction, returnEmptyString, returnFalse, returnOne, setupMoveUpEvents } from '../../../../Utils';
+import { Doc, DocListCast, Field, Opt, StrListCast } from '../../../../fields/Doc';
+import { InkTool } from '../../../../fields/InkField';
 import { List } from '../../../../fields/List';
-import { Cast, CsvCast, StrCast } from '../../../../fields/Types';
+import { listSpec } from '../../../../fields/Schema';
+import { Cast, CsvCast, DocCast, NumCast, StrCast } from '../../../../fields/Types';
 import { CsvField } from '../../../../fields/URLField';
+import { TraceMobx } from '../../../../fields/util';
 import { Docs } from '../../../documents/Documents';
-import { ViewBoxAnnotatableComponent } from '../../DocComponent';
-import { FieldView, FieldViewProps } from '../FieldView';
+import { DocumentManager } from '../../../util/DocumentManager';
+import { UndoManager, undoable } from '../../../util/UndoManager';
+import { ViewBoxAnnotatableComponent, ViewBoxInterface } from '../../DocComponent';
+import { MarqueeAnnotator } from '../../MarqueeAnnotator';
+import { SidebarAnnos } from '../../SidebarAnnos';
+import { AnchorMenu } from '../../pdf/AnchorMenu';
+import { GPTPopup } from '../../pdf/GPTPopup/GPTPopup';
+import { DocumentView } from '../DocumentView';
+import { FocusViewOptions, FieldView, FieldViewProps } from '../FieldView';
 import { PinProps } from '../trails';
+import './DataVizBox.scss';
 import { Histogram } from './components/Histogram';
 import { LineChart } from './components/LineChart';
 import { PieChart } from './components/PieChart';
 import { TableBox } from './components/TableBox';
-import './DataVizBox.scss';
 
 export enum DataVizView {
     TABLE = 'table',
@@ -24,7 +36,49 @@ export enum DataVizView {
 }
 
 @observer
-export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
+export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() implements ViewBoxInterface {
+    private _mainCont: React.RefObject<HTMLDivElement> = React.createRef();
+    private _marqueeref = React.createRef<MarqueeAnnotator>();
+    private _annotationLayer: React.RefObject<HTMLDivElement> = React.createRef();
+    anchorMenuClick?: () => undefined | ((anchor: Doc) => void);
+    crop: ((region: Doc | undefined, addCrop?: boolean) => Doc | undefined) | undefined;
+    @observable _schemaDataVizChildren: any = undefined;
+    @observable _marqueeing: number[] | undefined = undefined;
+    @observable _savedAnnotations = new ObservableMap<number, HTMLDivElement[]>();
+
+    constructor(props: FieldViewProps) {
+        super(props);
+        makeObservable(this);
+        this._props.setContentViewBox?.(this);
+    }
+
+    @computed get annotationLayer() {
+        TraceMobx();
+        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.Document._freeform_scale, 1) <= NumCast(this.Document.freeform_scaleMin, 1) && this._props.isContentActive() && ![InkTool.Highlighter, InkTool.Pen, InkTool.Write].includes(Doc.ActiveTool)) {
+            setupMoveUpEvents(
+                this,
+                e,
+                action(e => {
+                    MarqueeAnnotator.clearAnnotations(this._savedAnnotations);
+                    this._marqueeref.current?.onInitiateSelection([e.clientX, e.clientY]);
+                    return true;
+                }),
+                returnFalse,
+                () => MarqueeAnnotator.clearAnnotations(this._savedAnnotations),
+                false
+            );
+        }
+    };
+    @action
+    finishMarquee = () => {
+        this._marqueeref.current?.onTerminateSelection();
+        this._props.select(false);
+    };
+    savedAnnotations = () => this._savedAnnotations;
+
     public static LayoutString(fieldStr: string) {
         return FieldView.LayoutString(DataVizBox, fieldStr);
     }
@@ -32,10 +86,11 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
     // all datasets that have been retrieved from the server stored as a map from the dataset url to an array of records
     static dataset = new ObservableMap<string, { [key: string]: string }[]>();
     private _vizRenderer: LineChart | Histogram | PieChart | undefined;
+    private _sidebarRef = React.createRef<SidebarAnnos>();
 
     // 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])) ?? [];
     }
 
@@ -73,11 +128,18 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         }
         return func() ?? false;
     };
-    getAnchor = (addAsAnnotation?: boolean, pinProps?: PinProps) => {
+    getAnchor = (addAsAnnotation: boolean, pinProps?: PinProps) => {
+        const visibleAnchor = AnchorMenu.Instance.GetAnchor?.(undefined, addAsAnnotation);
         const anchor = !pinProps
-            ? this.rootDoc
+            ? this.Document
             : this._vizRenderer?.getAnchor(pinProps) ??
+              visibleAnchor ??
               Docs.Create.ConfigDocument({
+                  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.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*/
@@ -93,73 +155,288 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
                 anchor[key] = this.layoutDoc[key];
             }
         });
+
         this.addDocument(anchor);
+        //addAsAnnotation && this.addDocument(anchor);
         return anchor;
     };
 
+    createNoteAnnotation = () => {
+        const createFunc = undoable(
+            action(() => {
+                const note = this._sidebarRef.current?.anchorMenuClick(this.getAnchor(false), ['latitude', 'longitude', '-linkedTo']);
+            }),
+            'create note annotation'
+        );
+        if (!this.layoutDoc.layout_showSidebar) {
+            this.toggleSidebar();
+            setTimeout(createFunc);
+        } else createFunc();
+    };
+
+    @observable _showSidebar = false;
+    @observable _previewNativeWidth: Opt<number> = undefined;
+    @observable _previewWidth: Opt<number> = undefined;
+    @action
+    toggleSidebar = () => {
+        const prevWidth = this.sidebarWidth();
+        this.layoutDoc._layout_showSidebar = (this.layoutDoc._layout_sidebarWidthPercent = StrCast(this.layoutDoc._layout_sidebarWidthPercent, '0%') === '0%' ? `${(100 * 0.2) / 1.2}%` : '0%') !== '0%';
+        this.layoutDoc._width = this.layoutDoc._layout_showSidebar ? NumCast(this.layoutDoc._width) * 1.2 : Math.max(20, NumCast(this.layoutDoc._width) - prevWidth);
+    };
+    @computed get SidebarShown() {
+        return this.layoutDoc._layout_showSidebar ? true : false;
+    }
+    @computed get sidebarHandle() {
+        return (
+            <div
+                className="dataviz-overlayButton-sidebar"
+                key="sidebar"
+                title="Toggle Sidebar"
+                style={{
+                    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}>
+                <FontAwesomeIcon style={{ color: Colors.WHITE }} icon={'comment-alt'} size="sm" />
+            </div>
+        );
+    }
+    /**
+     * Toggle sidebar onclick the tiny comment button on the top right corner
+     * @param e
+     */
+    sidebarBtnDown = (e: React.PointerEvent) => {
+        setupMoveUpEvents(
+            this,
+            e,
+            (e, down, delta) =>
+                runInAction(() => {
+                    const localDelta = this._props
+                        .ScreenToLocalTransform()
+                        .scale(this._props.NativeDimScaling?.() || 1)
+                        .transformDirection(delta[0], delta[1]);
+                    const fullWidth = NumCast(this.layoutDoc._width);
+                    const mapWidth = fullWidth - this.sidebarWidth();
+                    if (this.sidebarWidth() + localDelta[0] > 0) {
+                        this.layoutDoc._layout_showSidebar = true;
+                        this.layoutDoc._layout_sidebarWidthPercent = ((100 * (this.sidebarWidth() + localDelta[0])) / (fullWidth + localDelta[0])).toString() + '%';
+                        this.layoutDoc._width = fullWidth + localDelta[0];
+                    } else {
+                        this.layoutDoc._layout_showSidebar = false;
+                        this.layoutDoc._width = mapWidth;
+                        this.layoutDoc._layout_sidebarWidthPercent = '0%';
+                    }
+                    return false;
+                }),
+            emptyFunction,
+            () => UndoManager.RunInBatch(this.toggleSidebar, 'toggle sidebar')
+        );
+    };
+    getView = async (doc: Doc, options: FocusViewOptions) => {
+        if (this._sidebarRef?.current?.makeDocUnfiltered(doc) && !this.SidebarShown) {
+            options.didMove = true;
+            this.toggleSidebar();
+        }
+        return new Promise<Opt<DocumentView>>(res => DocumentManager.Instance.AddViewRenderedCb(doc, dv => res(dv)));
+    };
+    @computed get sidebarWidthPercent() {
+        return StrCast(this.layoutDoc._layout_sidebarWidthPercent, '0%');
+    }
+    @computed get sidebarColor() {
+        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();
+    sidebarAddDocument = (doc: Doc | Doc[], sidebarKey?: string) => {
+        if (!this.SidebarShown) this.toggleSidebar();
+        return this.addDocument(doc, sidebarKey);
+    };
+    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.setContentViewBox?.(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
-    renderVizView = () => {
+    @computed get renderVizView() {
+        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.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() - this.sidebarWidth()) / 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.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)} />;
+            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)} vizBox={this} />;
+            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)} 
+            margin={{ top: 10, right: 15, bottom: 15, left: 15 }} />;
+        } // prettier-ignore
+    }
+
+    @action
+    onPointerDown = (e: React.PointerEvent): void => {
+        if ((this.Document._freeform_scale || 1) !== 1) return;
+        if (!e.altKey && e.button === 0 && this._props.isContentActive() && ![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;
+            if (e.target && (target.className.includes('endOfContent') || (target.parentElement.className !== 'textLayer' && target.parentElement.parentElement?.className !== 'textLayer'))) {
+            } else {
+                // if textLayer is hit, then we select text instead of using a marquee so clear out the marquee.
+                setTimeout(
+                    action(() => (this._marqueeing = undefined)),
+                    100
+                ); // bcz: hack .. anchor menu is setup within MarqueeAnnotator so we need to at least create the marqueeAnnotator even though we aren't using it.
+
+                document.addEventListener('pointerup', this.onSelectEnd);
+            }
         }
     };
 
+    @action
+    onSelectEnd = (e: PointerEvent): void => {
+        this._props.select(false);
+        document.removeEventListener('pointerup', this.onSelectEnd);
+
+        const sel = window.getSelection();
+        if (sel) {
+            AnchorMenu.Instance.setSelectedText(sel.toString());
+        }
+
+        if (sel?.type === 'Range') {
+            AnchorMenu.Instance.jumpTo(e.clientX, e.clientY);
+        }
+
+        // Changing which document to add the annotation to (the currently selected PDF)
+        GPTPopup.Instance.setSidebarId('data_sidebar');
+        GPTPopup.Instance.addDoc = this.sidebarAddDocument;
+    };
+
+    @action
+    updateSchemaViz = () => {
+        const getFrom = DocCast(this.layoutDoc.dataViz_asSchema);
+        const keys = Cast(getFrom.schema_columnKeys, listSpec('string'))?.filter(key => key != 'text');
+        if (!keys) return;
+        const children = DocListCast(getFrom[Doc.LayoutFieldKey(getFrom)]);
+        var current: { [key: string]: string }[] = [];
+        for (let i = 0; i < children.length; i++) {
+            var row: { [key: string]: string } = {};
+            if (children[i]) {
+                for (let j = 0; j < keys.length; j++) {
+                    var cell = children[i][keys[j]];
+                    if (cell && (cell as string)) cell = cell.toString().replace(/\,/g, '');
+                    row[keys[j]] = StrCast(cell);
+                }
+            }
+            current.push(row);
+        }
+        DataVizBox.dataset.set(CsvCast(this.Document[this.fieldKey]).url.href, current);
+    };
+
     render() {
+        if (this.layoutDoc && this.layoutDoc.dataViz_asSchema) {
+            this._schemaDataVizChildren = DocListCast(DocCast(this.layoutDoc.dataViz_asSchema)[Doc.LayoutFieldKey(DocCast(this.layoutDoc.dataViz_asSchema))]).length;
+            this.updateSchemaViz();
+        }
+
+        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>
         ) : (
             <div
-                className="dataViz"
+                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})`,
+                    position: 'absolute',
                 }}
                 onWheel={e => e.stopPropagation()}
-                ref={r =>
-                    r?.addEventListener(
-                        'wheel', // if scrollTop is 0, then don't let wheel trigger scroll on any container (which it would since onScroll won't be triggered on this)
-                        (e: WheelEvent) => {
-                            if (!r.scrollTop && e.deltaY <= 0) e.preventDefault();
-                            e.stopPropagation();
-                        },
-                        { passive: false }
-                    )
-                }>
-                <div className={'datatype-button'}>
-                    <Toggle text={'TABLE'} toggleType={ToggleType.BUTTON} type={Type.SEC} color={'black'} onClick={e => (this.layoutDoc._dataViz = DataVizView.TABLE)} toggleStatus={this.layoutDoc._dataViz == DataVizView.TABLE} />
-                    <Toggle text={'LINECHART'} toggleType={ToggleType.BUTTON} type={Type.SEC} color={'black'} onClick={e => (this.layoutDoc._dataViz = DataVizView.LINECHART)} toggleStatus={this.layoutDoc._dataViz == DataVizView.LINECHART} />
-                    <Toggle text={'HISTOGRAM'} toggleType={ToggleType.BUTTON} type={Type.SEC} color={'black'} onClick={e => (this.layoutDoc._dataViz = DataVizView.HISTOGRAM)} toggleStatus={this.layoutDoc._dataViz == DataVizView.HISTOGRAM} />
-                    <Toggle text={'PIE CHART'} toggleType={ToggleType.BUTTON} type={Type.SEC} color={'black'} onClick={e => (this.layoutDoc._dataViz = DataVizView.PIECHART)} toggleStatus={this.layoutDoc._dataViz == DataVizView.PIECHART} />
+                ref={this._mainCont}>
+                <div className="datatype-button">
+                    <Toggle text={'  TABLE  '} toggleType={ToggleType.BUTTON} type={Type.SEC} color={'black'} onClick={e => (this.layoutDoc._dataViz = DataVizView.TABLE)} toggleStatus={this.layoutDoc._dataViz === DataVizView.TABLE} />
+                    <Toggle text={'LINECHART'} toggleType={ToggleType.BUTTON} type={Type.SEC} color={'black'} onClick={e => (this.layoutDoc._dataViz = DataVizView.LINECHART)} toggleStatus={this.layoutDoc._dataViz === DataVizView.LINECHART} />
+                    <Toggle text={'HISTOGRAM'} toggleType={ToggleType.BUTTON} type={Type.SEC} color={'black'} onClick={e => (this.layoutDoc._dataViz = DataVizView.HISTOGRAM)} toggleStatus={this.layoutDoc._dataViz === DataVizView.HISTOGRAM} />
+                    <Toggle text={'PIE CHART'} toggleType={ToggleType.BUTTON} type={Type.SEC} color={'black'} onClick={e => (this.layoutDoc._dataViz = DataVizView.PIECHART)} toggleStatus={this.layoutDoc._dataViz == -DataVizView.PIECHART} />
+                </div>
+
+                {/* <CollectionFreeFormView
+                    ref={this._ffref}
+                    {...this._props}
+                    setContentView={emptyFunction}
+                    renderDepth={this._props.renderDepth - 1}
+                    fieldKey={this.annotationKey}
+                    styleProvider={this._props.styleProvider}
+                    isAnnotationOverlay={true}
+                    annotationLayerHostsContent={false}
+                    PanelWidth={this._props.PanelWidth}
+                    PanelHeight={this._props.PanelHeight}
+                    select={emptyFunction}
+                    isAnyChildContentActive={returnFalse}
+                    whenChildContentsActiveChanged={this.whenChildContentsActiveChanged}
+                    removeDocument={this.removeDocument}
+                    moveDocument={this.moveDocument}
+                    addDocument={this.addDocument}>
+                    {this.renderVizView}
+                </CollectionFreeFormView> */}
+
+                {this.renderVizView}
+                <div className="dataviz-sidebar" style={{ width: `${this.sidebarWidthPercent}`, backgroundColor: `${this.sidebarColor}` }} onPointerDown={this.onPointerDown}>
+                    <SidebarAnnos
+                        ref={this._sidebarRef}
+                        {...this._props}
+                        fieldKey={this.fieldKey}
+                        Document={this.Document}
+                        layoutDoc={this.layoutDoc}
+                        dataDoc={this.dataDoc}
+                        usePanelWidth={true}
+                        showSidebar={this.SidebarShown}
+                        nativeWidth={NumCast(this.layoutDoc._nativeWidth)}
+                        whenChildContentsActiveChanged={this.whenChildContentsActiveChanged}
+                        PanelWidth={this.sidebarWidth}
+                        sidebarAddDocument={this.sidebarAddDocument}
+                        moveDocument={this.moveDocument}
+                        removeDocument={this.sidebarRemoveDocument}
+                    />
                 </div>
-                {this.renderVizView()}
+                {this.sidebarHandle}
+                {this.annotationLayer}
+                {!this._mainCont.current || !this.DocumentView || !this._annotationLayer.current ? null : (
+                    <MarqueeAnnotator
+                        ref={this._marqueeref}
+                        Document={this.Document}
+                        anchorMenuClick={this.anchorMenuClick}
+                        scrollTop={0}
+                        annotationLayerScrollTop={NumCast(this.Document._layout_scrollTop)}
+                        scaling={returnOne}
+                        docView={this.DocumentView}
+                        addDocument={this.sidebarAddDocument}
+                        finishMarquee={this.finishMarquee}
+                        savedAnnotations={this.savedAnnotations}
+                        selectionText={returnEmptyString}
+                        annotationLayer={this._annotationLayer.current}
+                        marqueeContainer={this._mainCont.current}
+                        anchorMenuCrop={this.crop}
+                    />
+                )}
             </div>
         );
     }
diff --git a/src/client/views/nodes/DataVizBox/SchemaCSVPopUp.scss b/src/client/views/nodes/DataVizBox/SchemaCSVPopUp.scss
new file mode 100644
index 000000000..63a693918
--- /dev/null
+++ b/src/client/views/nodes/DataVizBox/SchemaCSVPopUp.scss
@@ -0,0 +1,175 @@
+$textgrey: #707070;
+$lighttextgrey: #a3a3a3;
+$greyborder: #d3d3d3;
+$lightgrey: #ececec;
+$button: #5b97ff;
+$highlightedText: #82e0ff;
+
+.summary-box {
+    position: fixed;
+    bottom: 10px;
+    right: 10px;
+    width: 250px;
+    min-height: 200px;
+    border-radius: 15px;
+    padding: 15px;
+    padding-bottom: 0;
+    z-index: 999;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    background-color: #ffffff;
+    box-shadow: 0 2px 5px #7474748d;
+    color: $textgrey;
+
+    .summary-heading {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        border-bottom: 1px solid $greyborder;
+        padding-bottom: 5px;
+
+        .summary-text {
+            font-size: 12px;
+            font-weight: 500;
+        }
+    }
+
+    label {
+        color: $textgrey;
+        font-size: 12px;
+        font-weight: 400;
+        letter-spacing: 1px;
+        margin: 0;
+        padding-right: 5px;
+    }
+
+    a {
+        cursor: pointer;
+    }
+
+    .content-wrapper {
+        padding-top: 10px;
+        min-height: 50px;
+        max-height: 150px;
+        overflow-y: auto;
+    }
+
+    .btns-wrapper {
+        height: 50px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        .summarizing {
+            display: flex;
+            align-items: center;
+        }
+    }
+
+    button {
+        font-size: 9px;
+        padding: 10px;
+        color: #ffffff;
+        background-color: $button;
+        border-radius: 5px;
+    }
+
+    .text-btn {
+        &:hover {
+            background-color: $button;
+        }
+    }
+
+    .btn-secondary {
+        font-size: 8px;
+        padding: 10px 5px;
+        background-color: $lightgrey;
+        color: $textgrey;
+        &:hover {
+            background-color: $lightgrey;
+        }
+    }
+
+    .icon-btn {
+        background-color: #ffffff;
+        padding: 10px;
+        border-radius: 50%;
+        color: $button;
+        border: 1px solid $button;
+    }
+}
+
+.image-content-wrapper {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 8px;
+    padding-bottom: 16px;
+
+    .img-wrapper {
+        position: relative;
+        cursor: pointer;
+
+        .img-container {
+            pointer-events: none;
+            position: relative;
+
+            img {
+                pointer-events: all;
+                position: relative;
+            }
+        }
+
+        .img-container::after {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-color: rgba(0, 0, 0, 0.5);
+            opacity: 0;
+            transition: opacity 0.3s ease;
+        }
+
+        .btn-container {
+            position: absolute;
+            right: 8px;
+            bottom: 8px;
+            opacity: 0;
+            transition: opacity 0.3s ease;
+        }
+
+        &:hover {
+            .img-container::after {
+                opacity: 1;
+            }
+
+            .btn-container {
+                opacity: 1;
+            }
+        }
+    }
+}
+
+// Typist CSS
+.Typist .Cursor {
+    display: inline-block;
+}
+.Typist .Cursor--blinking {
+    opacity: 1;
+    animation: blink 1s linear infinite;
+}
+
+@keyframes blink {
+    0% {
+        opacity: 1;
+    }
+    50% {
+        opacity: 0;
+    }
+    100% {
+        opacity: 1;
+    }
+}
diff --git a/src/client/views/nodes/DataVizBox/SchemaCSVPopUp.tsx b/src/client/views/nodes/DataVizBox/SchemaCSVPopUp.tsx
new file mode 100644
index 000000000..24023077f
--- /dev/null
+++ b/src/client/views/nodes/DataVizBox/SchemaCSVPopUp.tsx
@@ -0,0 +1,109 @@
+import { IconButton } from 'browndash-components';
+import { action, makeObservable, observable } from 'mobx';
+import { observer } from 'mobx-react';
+import * as React from 'react';
+import { CgClose } from 'react-icons/cg';
+import { Utils, emptyFunction, setupMoveUpEvents } from '../../../../Utils';
+import { Doc } from '../../../../fields/Doc';
+import { StrCast } from '../../../../fields/Types';
+import { DragManager } from '../../../util/DragManager';
+import { DocumentView } from '../DocumentView';
+import './SchemaCSVPopUp.scss';
+
+interface SchemaCSVPopUpProps {}
+
+@observer
+export class SchemaCSVPopUp extends React.Component<SchemaCSVPopUpProps> {
+    static Instance: SchemaCSVPopUp;
+
+    @observable
+    public dataVizDoc: Doc | undefined = undefined;
+    @action
+    public setDataVizDoc = (doc: Doc) => {
+        this.dataVizDoc = doc;
+    };
+
+    @observable
+    public view: DocumentView | undefined = undefined;
+    @action
+    public setView = (docView: DocumentView) => {
+        this.view = docView;
+    };
+
+    @observable
+    public target: Doc | undefined = undefined;
+    @action
+    public setTarget = (doc: Doc) => {
+        this.target = doc;
+    };
+
+    @observable
+    public visible: boolean = false;
+    @action
+    public setVisible = (vis: boolean) => {
+        this.visible = vis;
+    };
+
+    constructor(props: SchemaCSVPopUpProps) {
+        super(props);
+        makeObservable(this);
+        SchemaCSVPopUp.Instance = this;
+    }
+
+    dataBox = () => {
+        return (
+            <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
+                {this.heading('Schema Table as Data Visualization Doc')}
+                <div className="image-content-wrapper">
+                    <div className="img-wrapper">
+                        <div className="img-container" onPointerDown={e => this.drag(e)}>
+                            <img width={150} height={150} src={'/assets/dataVizBox.png'} />
+                        </div>
+                    </div>
+                </div>
+            </div>
+        );
+    };
+
+    heading = (headingText: string) => (
+        <div className="summary-heading">
+            <label className="summary-text">{headingText}</label>
+            <IconButton color={StrCast(Doc.UserDoc().userVariantColor)} tooltip="close" icon={<CgClose size="16px" />} onClick={() => this.setVisible(false)} />
+        </div>
+    );
+
+    drag = (e: React.PointerEvent) => {
+        const downX = e.clientX;
+        const downY = e.clientY;
+        setupMoveUpEvents(
+            {},
+            e,
+            e => {
+                const sourceAnchorCreator = () => this.dataVizDoc!;
+                const targetCreator = (annotationOn: Doc | undefined) => {
+                    const embedding = Doc.MakeEmbedding(this.dataVizDoc!);
+                    return embedding;
+                };
+                if (this.view && sourceAnchorCreator && !Utils.isClick(e.clientX, e.clientY, downX, downY, Date.now())) {
+                    DragManager.StartAnchorAnnoDrag(e.target instanceof HTMLElement ? [e.target] : [], new DragManager.AnchorAnnoDragData(this.view, sourceAnchorCreator, targetCreator), downX, downY, {
+                        dragComplete: e => {
+                            this.setVisible(false);
+                        },
+                    });
+                    return true;
+                }
+                return false;
+            },
+            emptyFunction,
+            action(e => {})
+        );
+    };
+
+    render() {
+        return (
+            <div className="summary-box" style={{ display: this.visible ? 'flex' : 'none' }}>
+                {this.dataBox()}
+            </div>
+        );
+    }
+}
diff --git a/src/client/views/nodes/DataVizBox/components/Chart.scss b/src/client/views/nodes/DataVizBox/components/Chart.scss
index c788a64c2..2f7dd0487 100644
--- a/src/client/views/nodes/DataVizBox/components/Chart.scss
+++ b/src/client/views/nodes/DataVizBox/components/Chart.scss
@@ -1,10 +1,10 @@
-@import '../../../global/globalCssVariables';
+@import '../../../global/globalCssVariables.module.scss';
 .chart-container {
     display: flex;
     flex-direction: column;
     align-items: center;
     cursor: default;
-    margin-top: 10px;
+    margin-top: 30px;
     overflow-y: visible;
 
     .graph {
@@ -15,8 +15,8 @@
         font-size: larger;
         display: flex;
         flex-direction: row;
-        margin-top: -10px;
-        margin-bottom: -10px;
+        margin-top: -20px;
+        margin-bottom: -20px;
     }
     .asHistogram-checkBox {
         // display: flex;
@@ -93,6 +93,7 @@
     display: flex;
     flex-direction: column;
     cursor: default;
+    margin-top: 30px;
     height: calc(100% - 40px); // bcz: hack 40px is the size of the button rows
     .tableBox-container {
         overflow: scroll;
@@ -111,6 +112,7 @@
                     white-space: pre;
                     max-width: 150;
                     overflow: hidden;
+                    margin-left: 2px;
                 }
             }
         }
diff --git a/src/client/views/nodes/DataVizBox/components/Histogram.tsx b/src/client/views/nodes/DataVizBox/components/Histogram.tsx
index e67e2bf31..4a1fb2ed1 100644
--- a/src/client/views/nodes/DataVizBox/components/Histogram.tsx
+++ b/src/client/views/nodes/DataVizBox/components/Histogram.tsx
@@ -1,7 +1,7 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { ColorPicker, EditableText, IconButton, Size, Type } from 'browndash-components';
 import * as d3 from 'd3';
-import { action, computed, IReactionDisposer, observable, reaction } from 'mobx';
+import { IReactionDisposer, action, computed, makeObservable, observable, reaction } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
 import { FaFillDrip } from 'react-icons/fa';
@@ -10,14 +10,14 @@ import { List } from '../../../../../fields/List';
 import { listSpec } from '../../../../../fields/Schema';
 import { Cast, DocCast, StrCast } from '../../../../../fields/Types';
 import { Docs } from '../../../../documents/Documents';
-import { LinkManager } from '../../../../util/LinkManager';
 import { undoable } from '../../../../util/UndoManager';
+import { ObservableReactComponent } from '../../../ObservableReactComponent';
 import { PinProps, PresBox } from '../../trails';
 import { scaleCreatorNumerical, yAxisCreator } from '../utils/D3Utils';
 import './Chart.scss';
 
 export interface HistogramProps {
-    rootDoc: Doc;
+    Document: Doc;
     layoutDoc: Doc;
     axes: string[];
     records: { [key: string]: any }[];
@@ -34,7 +34,7 @@ export interface HistogramProps {
 }
 
 @observer
-export class Histogram extends React.Component<HistogramProps> {
+export class Histogram extends ObservableReactComponent<HistogramProps> {
     private _disposers: { [key: string]: IReactionDisposer } = {};
     private _histogramRef: React.RefObject<HTMLDivElement> = React.createRef();
     private _histogramSvg: d3.Selection<SVGGElement, unknown, null, undefined> | undefined;
@@ -46,46 +46,51 @@ export class Histogram extends React.Component<HistogramProps> {
     private selectedData: any = undefined; // Selection of selected bar
     private hoverOverData: any = undefined; // Selection of bar being hovered over
 
+    constructor(props: any) {
+        super(props);
+        makeObservable(this);
+    }
+
     @computed get _tableDataIds() {
-        return !this.parentViz ? this.props.records.map((rec, i) => i) : NumListCast(this.parentViz.dataViz_selectedRows);
+        return !this.parentViz ? this._props.records.map((rec, i) => i) : NumListCast(this.parentViz.dataViz_selectedRows);
     }
     // returns all the data records that will be rendered by only returning those records that have been selected by the parent visualization (or all records if there is no parent)
     @computed get _tableData() {
-        return !this.parentViz ? this.props.records : this._tableDataIds.map(rowId => this.props.records[rowId]);
+        return !this.parentViz ? this._props.records : this._tableDataIds.map(rowId => this._props.records[rowId]);
     }
     // filters all data to just display selected data if brushed (created from an incoming link)
     @computed get _histogramData() {
-        if (this.props.axes.length < 1) return [];
-        if (this.props.axes.length < 2) {
-            var ax0 = this.props.axes[0];
-            if (/\d/.test(this.props.records[0][ax0])) {
+        if (this._props.axes.length < 1) return [];
+        if (this._props.axes.length < 2) {
+            var ax0 = this._props.axes[0];
+            if (/\d/.test(this._props.records[0][ax0])) {
                 this.numericalXData = true;
             }
-            return this._tableData.map(record => ({ [ax0]: record[this.props.axes[0]] }));
+            return this._tableData.map(record => ({ [ax0]: record[this._props.axes[0]] }));
         }
-        var ax0 = this.props.axes[0];
-        var ax1 = this.props.axes[1];
-        if (/\d/.test(this.props.records[0][ax0])) {
+        var ax0 = this._props.axes[0];
+        var ax1 = this._props.axes[1];
+        if (/\d/.test(this._props.records[0][ax0])) {
             this.numericalXData = true;
         }
-        if (/\d/.test(this.props.records[0][ax1])) {
+        if (/\d/.test(this._props.records[0][ax1])) {
             this.numericalYData = true;
         }
-        return this._tableData.map(record => ({ [ax0]: record[this.props.axes[0]], [ax1]: record[this.props.axes[1]] }));
+        return this._tableData.map(record => ({ [ax0]: record[this._props.axes[0]], [ax1]: record[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;
-        if (this.props.axes.length < 2 || !ax1 || !/\d/.test(this.props.records[0][ax1]) || !this.numericalYData) {
+        var ax0 = this._props.axes[0];
+        var ax1 = this._props.axes.length > 1 ? this._props.axes[1] : undefined;
+        if (this._props.axes.length < 2 || !ax1 || !/\d/.test(this._props.records[0][ax1]) || !this.numericalYData) {
             return ax0 + ' Histogram';
         } else return ax0 + ' by ' + ax1 + ' Histogram';
     }
 
     @computed get parentViz() {
-        return DocCast(this.props.rootDoc.dataViz_parentViz);
-        // return LinkManager.Instance.getAllRelatedLinks(this.props.rootDoc) // out of all links
-        //     .filter(link => link.link_anchor_1 == this.props.rootDoc.dataViz_parentViz) // get links where this chart doc is the target of the link
+        return DocCast(this._props.Document.dataViz_parentViz);
+        // return LinkManager.Instance.getAllRelatedLinks(this._props.Document) // out of all links
+        //     .filter(link => link.link_anchor_1 == this._props.Document.dataViz_parentViz) // 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
     }
 
@@ -100,13 +105,13 @@ export class Histogram extends React.Component<HistogramProps> {
     componentWillUnmount() {
         Array.from(Object.keys(this._disposers)).forEach(key => this._disposers[key]());
     }
-    componentDidMount = () => {
+    componentDidMount() {
         this._disposers.chartData = reaction(
             () => ({ dataSet: this._histogramData, w: this.width, h: this.height }),
             ({ dataSet, w, h }) => dataSet!.length > 0 && this.drawChart(dataSet, w, h),
             { fireImmediately: true }
         );
-    };
+    }
 
     @action
     restoreView = (data: Doc) => {};
@@ -115,16 +120,16 @@ export class Histogram extends React.Component<HistogramProps> {
         const anchor = Docs.Create.ConfigDocument({
             title: 'histogram doc selection' + this._currSelected,
         });
-        PresBox.pinDocView(anchor, { pinDocLayout: pinProps?.pinDocLayout, pinData: pinProps?.pinData }, this.props.rootDoc);
+        PresBox.pinDocView(anchor, { pinDocLayout: pinProps?.pinDocLayout, pinData: pinProps?.pinData }, this._props.Document);
         return anchor;
     };
 
     @computed get height() {
-        return this.props.height - this.props.margin.top - this.props.margin.bottom;
+        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;
+        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
@@ -212,10 +217,10 @@ export class Histogram extends React.Component<HistogramProps> {
             .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)
+            .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 + ')'));
+            .attr('transform', 'translate(' + this._props.margin.left + ',' + this._props.margin.top + ')'));
         var x = d3
             .scaleLinear()
             .domain(this.numericalXData ? [startingPoint!, endingPoint!] : [0, numBins])
@@ -383,7 +388,7 @@ export class Histogram extends React.Component<HistogramProps> {
             )
             .attr('fill', d => {
                 var barColor;
-                const barColors = StrListCast(this.props.layoutDoc.dataViz_histogram_barColors).map(each => each.split('::'));
+                const barColors = StrListCast(this._props.layoutDoc.dataViz_histogram_barColors).map(each => each.split('::'));
                 barColors.forEach(each => {
                     if (d[0] && d[0].toString() && each[0] == d[0].toString()) barColor = each[1];
                     else {
@@ -391,24 +396,24 @@ 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.dataViz_histogram_defaultColor);
+                return barColor ? StrCast(barColor) : StrCast(this._props.layoutDoc.dataViz_histogram_defaultColor);
             });
     };
 
     @action changeSelectedColor = (color: string) => {
         this.curBarSelected.attr('fill', color);
-        const barName = StrCast(this._currSelected[this.props.axes[0]].replace(/\$/g, '').replace(/\%/g, '').replace(/\</g, ''));
+        const barName = StrCast(this._currSelected[this._props.axes[0]].replace(/\$/g, '').replace(/\%/g, '').replace(/\</g, ''));
 
-        const barColors = Cast(this.props.layoutDoc.dataViz_histogram_barColors, listSpec('string'), null);
+        const barColors = Cast(this._props.layoutDoc.dataViz_histogram_barColors, listSpec('string'), null);
         barColors.forEach(each => each.split('::')[0] === barName && barColors.splice(barColors.indexOf(each), 1));
         barColors.push(StrCast(barName + '::' + color));
     };
 
     @action eraseSelectedColor = () => {
-        this.curBarSelected.attr('fill', this.props.layoutDoc.dataViz_histogram_defaultColor);
-        const barName = StrCast(this._currSelected[this.props.axes[0]].replace(/\$/g, '').replace(/\%/g, '').replace(/\</g, ''));
+        this.curBarSelected.attr('fill', this._props.layoutDoc.dataViz_histogram_defaultColor);
+        const barName = StrCast(this._currSelected[this._props.axes[0]].replace(/\$/g, '').replace(/\%/g, '').replace(/\</g, ''));
 
-        const barColors = Cast(this.props.layoutDoc.dataViz_histogram_barColors, listSpec('string'), null);
+        const barColors = Cast(this._props.layoutDoc.dataViz_histogram_barColors, listSpec('string'), null);
         barColors.forEach(each => each.split('::')[0] === barName && barColors.splice(barColors.indexOf(each), 1));
     };
 
@@ -417,7 +422,7 @@ export class Histogram extends React.Component<HistogramProps> {
         if (svg)
             svg.selectAll('rect').attr('fill', (d: any) => {
                 var barColor;
-                const barColors = StrListCast(this.props.layoutDoc.dataViz_histogram_barColors).map(each => each.split('::'));
+                const barColors = StrListCast(this._props.layoutDoc.dataViz_histogram_barColors).map(each => each.split('::'));
                 barColors.forEach(each => {
                     if (d[0] && d[0].toString() && each[0] == d[0].toString()) barColor = each[1];
                     else {
@@ -425,7 +430,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.dataViz_histogram_defaultColor);
+                return barColor ? StrCast(barColor) : StrCast(this._props.layoutDoc.dataViz_histogram_defaultColor);
             });
     };
 
@@ -434,14 +439,14 @@ export class Histogram extends React.Component<HistogramProps> {
         this._histogramData;
         var curSelectedBarName = '';
         var titleAccessor: any = '';
-        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.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>();
+        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.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 = 'none';
         if (this._currSelected) {
-            curSelectedBarName = StrCast(this._currSelected![this.props.axes[0]].replace(/\$/g, '').replace(/\%/g, '').replace(/\</g, ''));
+            curSelectedBarName = StrCast(this._currSelected![this._props.axes[0]].replace(/\$/g, '').replace(/\%/g, '').replace(/\</g, ''));
             selected = '{ ';
             Object.keys(this._currSelected).forEach(key =>
                 key //
@@ -451,17 +456,17 @@ export class Histogram extends React.Component<HistogramProps> {
             selected = selected.substring(0, selected.length - 2) + ' }';
         }
         var selectedBarColor;
-        var barColors = StrListCast(this.props.layoutDoc.histogramBarColors).map(each => each.split('::'));
+        var barColors = StrListCast(this._props.layoutDoc.histogramBarColors).map(each => each.split('::'));
         barColors.forEach(each => each[0] === curSelectedBarName && (selectedBarColor = each[1]));
 
         if (this._histogramData.length > 0 || !this.parentViz) {
-            return this.props.axes.length >= 1 ? (
-                <div className="chart-container">
+            return this._props.axes.length >= 1 ? (
+                <div className="chart-container" style={{ width: this._props.width + this._props.margin.right }}>
                     <div className="graph-title">
                         <EditableText
-                            val={StrCast(this.props.layoutDoc[titleAccessor])}
+                            val={StrCast(this._props.layoutDoc[titleAccessor])}
                             setVal={undoable(
-                                action(val => (this.props.layoutDoc[titleAccessor] = val as string)),
+                                action(val => (this._props.layoutDoc[titleAccessor] = val as string)),
                                 'Change Graph Title'
                             )}
                             color={'black'}
@@ -473,9 +478,9 @@ export class Histogram extends React.Component<HistogramProps> {
                             tooltip={'Change Default Bar Color'}
                             type={Type.SEC}
                             icon={<FaFillDrip />}
-                            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')}
+                            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 3de7a0c4a..2a9a8b354 100644
--- a/src/client/views/nodes/DataVizBox/components/LineChart.tsx
+++ b/src/client/views/nodes/DataVizBox/components/LineChart.tsx
@@ -1,6 +1,6 @@
-import { EditableText, Size } from 'browndash-components';
+import { Button, EditableText, Size } from 'browndash-components';
 import * as d3 from 'd3';
-import { action, computed, IReactionDisposer, observable, reaction } from 'mobx';
+import { IReactionDisposer, action, computed, makeObservable, observable, reaction } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
 import { Doc, DocListCast, NumListCast, StrListCast } from '../../../../../fields/Doc';
@@ -10,6 +10,7 @@ import { Cast, DocCast, StrCast } from '../../../../../fields/Types';
 import { Docs } from '../../../../documents/Documents';
 import { DocumentManager } from '../../../../util/DocumentManager';
 import { undoable } from '../../../../util/UndoManager';
+import { ObservableReactComponent } from '../../../ObservableReactComponent';
 import { PinProps, PresBox } from '../../trails';
 import { DataVizBox } from '../DataVizBox';
 import { createLineGenerator, drawLine, minMaxRange, scaleCreatorNumerical, xAxisCreator, xGrid, yAxisCreator, yGrid } from '../utils/D3Utils';
@@ -23,7 +24,8 @@ export interface SelectedDataPoint extends DataPoint {
     elem?: d3.Selection<d3.BaseType, unknown, SVGGElement, unknown>;
 }
 export interface LineChartProps {
-    rootDoc: Doc;
+    vizBox: DataVizBox;
+    Document: Doc;
     layoutDoc: Doc;
     axes: string[];
     records: { [key: string]: any }[];
@@ -40,33 +42,37 @@ export interface LineChartProps {
 }
 
 @observer
-export class LineChart extends React.Component<LineChartProps> {
+export class LineChart extends ObservableReactComponent<LineChartProps> {
     private _disposers: { [key: string]: IReactionDisposer } = {};
     private _lineChartRef: React.RefObject<HTMLDivElement> = React.createRef();
     private _lineChartSvg: 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
+    constructor(props: any) {
+        super(props);
+        makeObservable(this);
+    }
 
     @computed get _tableDataIds() {
-        return !this.parentViz ? this.props.records.map((rec, i) => i) : NumListCast(this.parentViz.dataViz_selectedRows);
+        return !this.parentViz ? this._props.records.map((rec, i) => i) : NumListCast(this.parentViz.dataViz_selectedRows);
     }
     // returns all the data records that will be rendered by only returning those records that have been selected by the parent visualization (or all records if there is no parent)
     @computed get _tableData() {
-        return !this.parentViz ? this.props.records : this._tableDataIds.map(rowId => this.props.records[rowId]);
+        return !this.parentViz ? this._props.records : this._tableDataIds.map(rowId => this._props.records[rowId]);
     }
     @computed get _lineChartData() {
-        var guids = StrListCast(this.props.layoutDoc.dataViz_rowIds);
-        if (this.props.axes.length <= 1) return [];
-        return this._tableData.map(record => ({ x: Number(record[this.props.axes[0]]), y: Number(record[this.props.axes[1]]) })).sort((a, b) => (a.x < b.x ? -1 : 1));
+        var guids = StrListCast(this._props.layoutDoc.dataViz_rowIds);
+        if (this._props.axes.length <= 1) return [];
+        return this._tableData.map(record => ({ x: Number(record[this._props.axes[0]]), y: Number(record[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';
+        return this._props.axes[1] + ' vs. ' + this._props.axes[0] + ' Line Chart';
     }
     @computed get parentViz() {
-        return DocCast(this.props.rootDoc.dataViz_parentViz);
-        // return LinkManager.Instance.getAllRelatedLinks(this.props.rootDoc) // out of all links
+        return DocCast(this._props.Document.dataViz_parentViz);
+        // return LinkManager.Instance.getAllRelatedLinks(this._props.Document) // out of all links
         //     .filter(link => {
-        //         return link.link_anchor_1 == this.props.rootDoc.dataViz_parentViz;
+        //         return link.link_anchor_1 == this._props.Document.dataViz_parentViz;
         //     }) // 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
     }
@@ -74,7 +80,7 @@ export class LineChart extends React.Component<LineChartProps> {
         // return selected x and y axes
         // otherwise, use the selection of whatever is linked to us
         const incomingVizBox = DocumentManager.Instance.getFirstDocumentView(this.parentViz)?.ComponentView as DataVizBox;
-        const highlitedRowIds = NumListCast(incomingVizBox?.rootDoc?.dataViz_highlitedRows);
+        const highlitedRowIds = NumListCast(incomingVizBox?.layoutDoc?.dataViz_highlitedRows);
         return this._tableData.filter((record, i) => highlitedRowIds.includes(this._tableDataIds[i])); // get all the datapoints they have selected field set by incoming anchor
     }
     @computed get rangeVals(): { xMin?: number; xMax?: number; yMin?: number; yMax?: number } {
@@ -83,7 +89,7 @@ export class LineChart extends React.Component<LineChartProps> {
     componentWillUnmount() {
         Array.from(Object.keys(this._disposers)).forEach(key => this._disposers[key]());
     }
-    componentDidMount = () => {
+    componentDidMount() {
         this._disposers.chartData = reaction(
             () => ({ dataSet: this._lineChartData, w: this.width, h: this.height }),
             ({ dataSet, w, h }) => {
@@ -94,7 +100,7 @@ export class LineChart extends React.Component<LineChartProps> {
             { fireImmediately: true }
         );
         this._disposers.annos = reaction(
-            () => DocListCast(this.props.dataDoc[this.props.fieldKey + '_annotations']),
+            () => 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
@@ -114,11 +120,11 @@ export class LineChart extends React.Component<LineChartProps> {
                 // 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);
-                incomingHighlited?.forEach((record: any) => this.drawAnnotations(Number(record[this.props.axes[0]]), Number(record[this.props.axes[1]])));
+                incomingHighlited?.forEach((record: any) => this.drawAnnotations(Number(record[this._props.axes[0]]), Number(record[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
 
@@ -170,23 +176,23 @@ export class LineChart extends React.Component<LineChartProps> {
             //
             title: 'line doc selection' + this._currSelected?.x,
         });
-        PresBox.pinDocView(anchor, { pinDocLayout: pinProps?.pinDocLayout, pinData: pinProps?.pinData }, this.props.rootDoc);
+        PresBox.pinDocView(anchor, { pinDocLayout: pinProps?.pinDocLayout, pinData: pinProps?.pinData }, this._props.Document);
         anchor.config_dataVizSelection = 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;
+        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;
+        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.records[0][ax0]) || !ax1) {
+        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.records[0][ax0]) || !ax1) {
             return ax0 + ' Line Chart';
         } else return ax1 + ' by ' + ax0 + ' Line Chart';
     }
@@ -210,7 +216,7 @@ export class LineChart extends React.Component<LineChartProps> {
         // TODO: nda - get rid of svg element in the list?
         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.records.forEach(record => record[this.props.axes[0]] === x && record[this.props.axes[1]] === y && (record.selected = true));
+        this._props.records.forEach(record => record[this._props.axes[0]] === x && record[this._props.axes[1]] === y && (record.selected = true));
     }
 
     drawDataPoints(data: DataPoint[], idx: number, xScale: d3.ScaleLinear<number, number, never>, yScale: d3.ScaleLinear<number, number, never>) {
@@ -245,7 +251,7 @@ export class LineChart extends React.Component<LineChartProps> {
         const yScale = scaleCreatorNumerical(0, yMax, height, 0);
 
         // adding svg
-        const margin = this.props.margin;
+        const margin = this._props.margin;
         const svg = (this._lineChartSvg = d3
             .select(this._lineChartRef.current)
             .append('svg')
@@ -317,7 +323,7 @@ export class LineChart extends React.Component<LineChartProps> {
         svg.append('text')
             .attr('transform', 'translate(' + width / 2 + ' ,' + (height + 40) + ')')
             .style('text-anchor', 'middle')
-            .text(this.props.axes[0]);
+            .text(this._props.axes[0]);
         svg.append('text')
             .attr('transform', 'rotate(-90)' + ' ' + 'translate( 0, ' + -10 + ')')
             .attr('x', -(height / 2))
@@ -325,7 +331,7 @@ export class LineChart extends React.Component<LineChartProps> {
             .attr('height', 20)
             .attr('width', 20)
             .style('text-anchor', 'middle')
-            .text(this.props.axes[1]);
+            .text(this._props.axes[1]);
     };
 
     private updateTooltip(
@@ -346,18 +352,18 @@ export class LineChart extends React.Component<LineChartProps> {
 
     render() {
         var titleAccessor: any = '';
-        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._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.parentViz || this.parentViz.length == 0) {
-            return this.props.axes.length >= 2 && /\d/.test(this.props.records[0][this.props.axes[0]]) && /\d/.test(this.props.records[0][this.props.axes[1]]) ? (
-                <div className="chart-container">
+            return this._props.axes.length >= 2 && /\d/.test(this._props.records[0][this._props.axes[0]]) && /\d/.test(this._props.records[0][this._props.axes[1]]) ? (
+                <div className="chart-container" style={{ width: this._props.width + this._props.margin.right }}>
                     <div className="graph-title">
                         <EditableText
-                            val={StrCast(this.props.layoutDoc[titleAccessor])}
+                            val={StrCast(this._props.layoutDoc[titleAccessor])}
                             setVal={undoable(
-                                action(val => (this.props.layoutDoc[titleAccessor] = val as string)),
+                                action(val => (this._props.layoutDoc[titleAccessor] = val as string)),
                                 'Change Graph Title'
                             )}
                             color={'black'}
@@ -366,7 +372,17 @@ export class LineChart extends React.Component<LineChartProps> {
                         />
                     </div>
                     <div ref={this._lineChartRef} />
-                    {selectedPt != 'none' ? <div className={'selected-data'}> {`Selected: ${selectedPt}`}</div> : null}
+                    {selectedPt != 'none' ? (
+                        <div className={'selected-data'}>
+                            {`Selected: ${selectedPt}`}
+                            <Button
+                                onClick={e => {
+                                    console.log('test plzz');
+                                    this._props.vizBox.sidebarBtnDown;
+                                    this._props.vizBox.sidebarAddDocument;
+                                }}></Button>
+                        </div>
+                    ) : null}
                 </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 561f39141..1259a13ff 100644
--- a/src/client/views/nodes/DataVizBox/components/PieChart.tsx
+++ b/src/client/views/nodes/DataVizBox/components/PieChart.tsx
@@ -1,6 +1,7 @@
+import { Checkbox } from '@mui/material';
 import { ColorPicker, EditableText, Size, Type } from 'browndash-components';
 import * as d3 from 'd3';
-import { action, computed, IReactionDisposer, observable, reaction } from 'mobx';
+import { IReactionDisposer, action, computed, makeObservable, observable, reaction } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
 import { FaFillDrip } from 'react-icons/fa';
@@ -10,12 +11,12 @@ import { listSpec } from '../../../../../fields/Schema';
 import { Cast, DocCast, StrCast } from '../../../../../fields/Types';
 import { Docs } from '../../../../documents/Documents';
 import { undoable } from '../../../../util/UndoManager';
+import { ObservableReactComponent } from '../../../ObservableReactComponent';
 import { PinProps, PresBox } from '../../trails';
 import './Chart.scss';
-import { Checkbox } from '@material-ui/core';
 
 export interface PieChartProps {
-    rootDoc: Doc;
+    Document: Doc;
     layoutDoc: Doc;
     axes: string[];
     records: { [key: string]: any }[];
@@ -32,7 +33,7 @@ export interface PieChartProps {
 }
 
 @observer
-export class PieChart extends React.Component<PieChartProps> {
+export class PieChart extends ObservableReactComponent<PieChartProps> {
     private _disposers: { [key: string]: IReactionDisposer } = {};
     private _piechartRef: React.RefObject<HTMLDivElement> = React.createRef();
     private _piechartSvg: d3.Selection<SVGGElement, unknown, null, undefined> | undefined;
@@ -41,61 +42,62 @@ export class PieChart extends React.Component<PieChartProps> {
     private hoverOverData: any = undefined; // Selection of slice being hovered over
     @observable _currSelected: any | undefined = undefined; // Object of selected slice
 
+    constructor(props: any) {
+        super(props);
+        makeObservable(this);
+    }
+
     @computed get _tableDataIds() {
-        return !this.parentViz ? this.props.records.map((rec, i) => i) : NumListCast(this.parentViz.dataViz_selectedRows);
+        return !this.parentViz ? this._props.records.map((rec, i) => i) : NumListCast(this.parentViz.dataViz_selectedRows);
     }
     // returns all the data records that will be rendered by only returning those records that have been selected by the parent visualization (or all records if there is no parent)
     @computed get _tableData() {
-        return !this.parentViz ? this.props.records : this._tableDataIds.map(rowId => this.props.records[rowId]);
+        return !this.parentViz ? this._props.records : this._tableDataIds.map(rowId => this._props.records[rowId]);
     }
 
     // organized by specified number percentages/ratios if one column is selected and it contains numbers
     // otherwise, assume data is organized by categories
     @computed get byCategory() {
-        return !/\d/.test(this.props.records[0][this.props.axes[0]]) || this.props.layoutDoc.dataViz_pie_asHistogram;
+        return !/\d/.test(this._props.records[0][this._props.axes[0]]) || this._props.layoutDoc.dataViz_pie_asHistogram;
     }
     // filters all data to just display selected data if brushed (created from an incoming link)
     @computed get _pieChartData() {
-        if (this.props.axes.length < 1) return [];
+        if (this._props.axes.length < 1) return [];
 
-        const ax0 = this.props.axes[0];
-        if (this.props.axes.length < 2) {
-            return this._tableData.map(record => ({ [ax0]: record[this.props.axes[0]] }));
+        const ax0 = this._props.axes[0];
+        if (this._props.axes.length < 2) {
+            return this._tableData.map(record => ({ [ax0]: record[this._props.axes[0]] }));
         }
-        const ax1 = this.props.axes[1];
-        return this._tableData.map(record => ({ [ax0]: record[this.props.axes[0]], [ax1]: record[this.props.axes[1]] }));
+        const ax1 = this._props.axes[1];
+        return this._tableData.map(record => ({ [ax0]: record[this._props.axes[0]], [ax1]: record[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;
-        if (this.props.axes.length < 2 || !/\d/.test(this.props.records[0][ax0]) || !ax1) {
+        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.records[0][ax0]) || !ax1) {
             return ax0 + ' Pie Chart';
         }
         return ax1 + ' by ' + ax0 + ' Pie Chart';
     }
 
     @computed get parentViz() {
-        return DocCast(this.props.rootDoc.dataViz_parentViz);
-        // return LinkManager.Instance.getAllRelatedLinks(this.props.rootDoc) // out of all links
-        //     .filter(link => link.link_anchor_1 == this.props.rootDoc.dataViz_parentViz) // get links where this chart doc is the target of the link
+        return DocCast(this._props.Document.dataViz_parentViz);
+        // return LinkManager.Instance.getAllRelatedLinks(this._props.Document) // out of all links
+        //     .filter(link => link.link_anchor_1 == this._props.Document.dataViz_parentViz) // 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
     }
 
     componentWillUnmount() {
         Array.from(Object.keys(this._disposers)).forEach(key => this._disposers[key]());
     }
-    componentDidMount = () => {
+    componentDidMount() {
         this._disposers.chartData = reaction(
             () => ({ dataSet: this._pieChartData, w: this.width, h: this.height }),
-            ({ dataSet, w, h }) => {
-                if (dataSet!.length > 0) {
-                    this.drawChart(dataSet, w, h);
-                }
-            },
+            ({ dataSet, w, h }) => dataSet!.length > 0 && this.drawChart(dataSet, w, h),
             { fireImmediately: true }
         );
-    };
+    }
 
     @action
     restoreView = (data: Doc) => {};
@@ -105,16 +107,16 @@ export class PieChart extends React.Component<PieChartProps> {
             //
             title: 'piechart doc selection' + this._currSelected,
         });
-        PresBox.pinDocView(anchor, { pinDocLayout: pinProps?.pinDocLayout, pinData: pinProps?.pinData }, this.props.rootDoc);
+        PresBox.pinDocView(anchor, { pinDocLayout: pinProps?.pinDocLayout, pinData: pinProps?.pinData }, this._props.Document);
         return anchor;
     };
 
     @computed get height() {
-        return this.props.height - this.props.margin.top - this.props.margin.bottom;
+        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;
+        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
@@ -185,7 +187,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 - this.props.margin.top - this.props.margin.bottom) / 2;
+        var radius = Math.min(width, height - this._props.margin.top - this._props.margin.bottom) / 2;
 
         // converts data into Objects
         var data = this.data(dataSet);
@@ -213,10 +215,10 @@ export class PieChart extends React.Component<PieChartProps> {
             .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)
+            .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 + ')');
+        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);
 
@@ -253,7 +255,7 @@ export class PieChart extends React.Component<PieChartProps> {
             } catch (error) {}
             possibleDataPointVals.push(dataPointVal);
         });
-        const sliceColors = StrListCast(this.props.layoutDoc.dataViz_pie_sliceColors).map(each => each.split('::'));
+        const sliceColors = StrListCast(this._props.layoutDoc.dataViz_pie_sliceColors).map(each => each.split('::'));
         arcs.append('path')
             .attr('fill', (d, i) => {
                 var dataPoint;
@@ -265,7 +267,7 @@ export class PieChart extends React.Component<PieChartProps> {
                 }
                 var sliceColor;
                 if (dataPoint) {
-                    const sliceTitle = dataPoint[this.props.axes[0]];
+                    const sliceTitle = dataPoint[this._props.axes[0]];
                     const accessByName = StrCast(sliceTitle) ? StrCast(sliceTitle).replace(/\$/g, '').replace(/\%/g, '').replace(/\#/g, '').replace(/\</g, '') : sliceTitle;
                     sliceColors.forEach(each => each[0] == accessByName && (sliceColor = each[1]));
                 }
@@ -281,6 +283,7 @@ export class PieChart extends React.Component<PieChartProps> {
                           return 'slice';
                       }
             )
+            // @ts-ignore
             .attr('d', arc)
             .on('click', onPointClick)
             .on('mouseover', onHover)
@@ -312,10 +315,10 @@ export class PieChart extends React.Component<PieChartProps> {
 
     @action changeSelectedColor = (color: string) => {
         this.curSliceSelected.attr('fill', color);
-        const sliceTitle = this._currSelected[this.props.axes[0]];
+        const sliceTitle = this._currSelected[this._props.axes[0]];
         const sliceName = StrCast(sliceTitle) ? StrCast(sliceTitle).replace(/\$/g, '').replace(/\%/g, '').replace(/\#/g, '').replace(/\</g, '') : sliceTitle;
 
-        const sliceColors = Cast(this.props.layoutDoc.dataViz_pie_sliceColors, 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);
         });
@@ -323,20 +326,20 @@ export class PieChart extends React.Component<PieChartProps> {
     };
 
     @action changeHistogramCheckBox = () => {
-        this.props.layoutDoc.dataViz_pie_asHistogram = !this.props.layoutDoc.dataViz_pie_asHistogram;
+        this._props.layoutDoc.dataViz_pie_asHistogram = !this._props.layoutDoc.dataViz_pie_asHistogram;
         this.drawChart(this._pieChartData, this.width, this.height);
     };
 
     render() {
         var titleAccessor: any = '';
-        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.dataViz_pie_sliceColors) this.props.layoutDoc.dataViz_pie_sliceColors = new List<string>();
+        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.dataViz_pie_sliceColors) this._props.layoutDoc.dataViz_pie_sliceColors = new List<string>();
         var selected: string;
         var curSelectedSliceName = '';
         if (this._currSelected) {
-            const sliceTitle = this._currSelected[this.props.axes[0]];
+            const sliceTitle = this._currSelected[this._props.axes[0]];
             curSelectedSliceName = StrCast(sliceTitle) ? StrCast(sliceTitle).replace(/\$/g, '').replace(/\%/g, '').replace(/\#/g, '').replace(/\</g, '') : sliceTitle;
             selected = '{ ';
             Object.keys(this._currSelected).map(key => {
@@ -346,19 +349,19 @@ export class PieChart extends React.Component<PieChartProps> {
             selected += ' }';
         } else selected = 'none';
         var selectedSliceColor;
-        var sliceColors = StrListCast(this.props.layoutDoc.dataViz_pie_sliceColors).map(each => each.split('::'));
+        var sliceColors = StrListCast(this._props.layoutDoc.dataViz_pie_sliceColors).map(each => each.split('::'));
         sliceColors.forEach(each => {
             if (each[0] == curSelectedSliceName!) selectedSliceColor = each[1];
         });
 
         if (this._pieChartData.length > 0 || !this.parentViz) {
-            return this.props.axes.length >= 1 ? (
-                <div className="chart-container">
+            return this._props.axes.length >= 1 ? (
+                <div className="chart-container" style={{ width: this._props.width + this._props.margin.right }}>
                     <div className="graph-title">
                         <EditableText
-                            val={StrCast(this.props.layoutDoc[titleAccessor])}
+                            val={StrCast(this._props.layoutDoc[titleAccessor])}
                             setVal={undoable(
-                                action(val => (this.props.layoutDoc[titleAccessor] = val as string)),
+                                action(val => (this._props.layoutDoc[titleAccessor] = val as string)),
                                 'Change Graph Title'
                             )}
                             color={'black'}
@@ -366,9 +369,9 @@ export class PieChart extends React.Component<PieChartProps> {
                             fillWidth
                         />
                     </div>
-                    {this.props.axes.length === 1 && /\d/.test(this.props.records[0][this.props.axes[0]]) ? (
-                        <div className={'asHistogram-checkBox'} style={{ width: this.props.width }}>
-                            <Checkbox color="primary" onChange={this.changeHistogramCheckBox} checked={this.props.layoutDoc.dataViz_pie_asHistogram as boolean} />
+                    {this._props.axes.length === 1 && /\d/.test(this._props.records[0][this._props.axes[0]]) ? (
+                        <div className={'asHistogram-checkBox'} style={{ width: this._props.width }}>
+                            <Checkbox color="primary" onChange={this.changeHistogramCheckBox} checked={this._props.layoutDoc.dataViz_pie_asHistogram as boolean} />
                             Organize data as histogram
                         </div>
                     ) : null}
diff --git a/src/client/views/nodes/DataVizBox/components/TableBox.tsx b/src/client/views/nodes/DataVizBox/components/TableBox.tsx
index b88389de6..ed44d9269 100644
--- a/src/client/views/nodes/DataVizBox/components/TableBox.tsx
+++ b/src/client/views/nodes/DataVizBox/components/TableBox.tsx
@@ -1,20 +1,20 @@
 import { Button, Type } from 'browndash-components';
-import { action, computed, IReactionDisposer, observable, reaction } from 'mobx';
+import { IReactionDisposer, action, computed, makeObservable, observable, reaction } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
+import { Utils, emptyFunction, setupMoveUpEvents } from '../../../../../Utils';
 import { Doc, Field, NumListCast } from '../../../../../fields/Doc';
 import { List } from '../../../../../fields/List';
 import { listSpec } from '../../../../../fields/Schema';
 import { Cast, DocCast } from '../../../../../fields/Types';
-import { emptyFunction, setupMoveUpEvents, Utils } from '../../../../../Utils';
 import { DragManager } from '../../../../util/DragManager';
+import { ObservableReactComponent } from '../../../ObservableReactComponent';
 import { DocumentView } from '../../DocumentView';
 import { DataVizView } from '../DataVizBox';
-import { DATA_VIZ_TABLE_ROW_HEIGHT } from '../../../global/globalCssVariables.scss';
 import './Chart.scss';
-
+const {  default: { DATA_VIZ_TABLE_ROW_HEIGHT } } = require('../../../global/globalCssVariables.module.scss'); // prettier-ignore
 interface TableBoxProps {
-    rootDoc: Doc;
+    Document: Doc;
     layoutDoc: Doc;
     records: { [key: string]: any }[];
     selectAxes: (axes: string[]) => void;
@@ -31,13 +31,17 @@ interface TableBoxProps {
 }
 
 @observer
-export class TableBox extends React.Component<TableBoxProps> {
+export class TableBox extends ObservableReactComponent<TableBoxProps> {
     _inputChangedDisposer?: IReactionDisposer;
     _containerRef: HTMLDivElement | null = null;
 
     @observable _scrollTop = -1;
     @observable _tableHeight = 0;
     @observable _tableContainerHeight = 0;
+    constructor(props: any) {
+        super(props);
+        makeObservable(this);
+    }
 
     componentDidMount() {
         // if the tableData changes (ie., when records are selected by the parent (input) visulization),
@@ -49,17 +53,17 @@ export class TableBox extends React.Component<TableBoxProps> {
         this._inputChangedDisposer?.();
     }
     @computed get _tableDataIds() {
-        return !this.parentViz ? this.props.records.map((rec, i) => i) : NumListCast(this.parentViz.dataViz_selectedRows);
+        return !this.parentViz ? this._props.records.map((rec, i) => i) : NumListCast(this.parentViz.dataViz_selectedRows);
     }
     // returns all the data records that will be rendered by only returning those records that have been selected by the parent visualization (or all records if there is no parent)
     @computed get _tableData() {
-        return !this.parentViz ? this.props.records : this._tableDataIds.map(rowId => this.props.records[rowId]);
+        return !this.parentViz ? this._props.records : this._tableDataIds.map(rowId => this._props.records[rowId]);
     }
 
     @computed get parentViz() {
-        return DocCast(this.props.rootDoc.dataViz_parentViz);
-        // return LinkManager.Instance.getAllRelatedLinks(this.props.rootDoc) // out of all links
-        //     .filter(link => link.link_anchor_1 == this.props.rootDoc.dataViz_parentViz) // get links where this chart doc is the target of the link
+        return DocCast(this._props.Document.dataViz_parentViz);
+        // return LinkManager.Instance.getAllRelatedLinks(this._props.Document) // out of all links
+        //     .filter(link => link.link_anchor_1 == this._props.Document.dataViz_parentViz) // 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
     }
 
@@ -69,33 +73,35 @@ export class TableBox extends React.Component<TableBoxProps> {
 
     // updates the 'dataViz_selectedRows' and 'dataViz_highlightedRows' fields to no longer include rows that aren't in the table
     filterSelectedRowsDown = () => {
-        const selected = NumListCast(this.props.layoutDoc.dataViz_selectedRows);
-        this.props.layoutDoc.dataViz_selectedRows = new List<number>(selected.filter(rowId => this._tableDataIds.includes(rowId))); // filters through selected to remove guids that were removed in the incoming data
-        const highlighted = NumListCast(this.props.layoutDoc.dataViz_highlitedRows);
-        this.props.layoutDoc.dataViz_highlitedRows = new List<number>(highlighted.filter(rowId => this._tableDataIds.includes(rowId))); // filters through highlighted to remove guids that were removed in the incoming data
+        const selected = NumListCast(this._props.layoutDoc.dataViz_selectedRows);
+        this._props.layoutDoc.dataViz_selectedRows = new List<number>(selected.filter(rowId => this._tableDataIds.includes(rowId))); // filters through selected to remove guids that were removed in the incoming data
+        const highlighted = NumListCast(this._props.layoutDoc.dataViz_highlitedRows);
+        this._props.layoutDoc.dataViz_highlitedRows = new List<number>(highlighted.filter(rowId => this._tableDataIds.includes(rowId))); // filters through highlighted to remove guids that were removed in the incoming data
     };
 
     @computed get viewScale() {
-        return this.props.docView?.()?.props.ScreenToLocalTransform().Scale || 1;
+        return this._props.docView?.()?.screenToViewTransform().Scale || 1;
     }
     @computed get rowHeight() {
+        console.log('scale = ' + this.viewScale + '  table = ' + this._tableHeight + ' ids = ' + this._tableDataIds.length);
         return (this.viewScale * this._tableHeight) / this._tableDataIds.length;
     }
     @computed get startID() {
-        return this.rowHeight ? Math.floor(this._scrollTop / this.rowHeight) : 0;
+        return this.rowHeight ? Math.max(Math.floor(this._scrollTop / this.rowHeight) - 1, 0) : 0;
     }
     @computed get endID() {
+        console.log('start = ' + this.startID + '  container = ' + this._tableContainerHeight + ' scale = ' + this.viewScale + ' row = ' + this.rowHeight);
         return Math.ceil(this.startID + (this._tableContainerHeight * this.viewScale) / (this.rowHeight || 1));
     }
     @action handleScroll = () => {
-        if (!this.props.docView?.()?.ContentDiv?.hidden) {
+        if (!this._props.docView?.()?.ContentDiv?.hidden) {
             this._scrollTop = this._containerRef?.scrollTop ?? 0;
         }
     };
     @action
     tableRowClick = (e: React.MouseEvent, rowId: number) => {
-        const highlited = Cast(this.props.layoutDoc.dataViz_highlitedRows, listSpec('number'), null);
-        const selected = Cast(this.props.layoutDoc.dataViz_selectedRows, listSpec('number'), null);
+        const highlited = Cast(this._props.layoutDoc.dataViz_highlitedRows, listSpec('number'), null);
+        const selected = Cast(this._props.layoutDoc.dataViz_selectedRows, listSpec('number'), null);
         if (e.metaKey) {
             // highlighting a row
             if (highlited?.includes(rowId)) highlited.splice(highlited.indexOf(rowId), 1);
@@ -119,26 +125,26 @@ export class TableBox extends React.Component<TableBoxProps> {
             e,
             e => {
                 // dragging off a column to create a brushed DataVizBox
-                const sourceAnchorCreator = () => this.props.docView?.()!.rootDoc!;
+                const sourceAnchorCreator = () => this._props.docView?.()!.Document!;
                 const targetCreator = (annotationOn: Doc | undefined) => {
-                    const embedding = Doc.MakeEmbedding(this.props.docView?.()!.rootDoc!);
+                    const embedding = Doc.MakeEmbedding(this._props.docView?.()!.Document!);
                     embedding._dataViz = DataVizView.TABLE;
                     embedding._dataViz_axes = new List<string>([col, col]);
-                    embedding._dataViz_parentViz = this.props.rootDoc;
+                    embedding._dataViz_parentViz = this._props.Document;
                     embedding.annotationOn = annotationOn;
-                    embedding.histogramBarColors = Field.Copy(this.props.layoutDoc.histogramBarColors);
-                    embedding.defaultHistogramColor = this.props.layoutDoc.defaultHistogramColor;
-                    embedding.pieSliceColors = Field.Copy(this.props.layoutDoc.pieSliceColors);
+                    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())) {
-                    DragManager.StartAnchorAnnoDrag(e.target instanceof HTMLElement ? [e.target] : [], new DragManager.AnchorAnnoDragData(this.props.docView()!, sourceAnchorCreator, targetCreator), downX, downY, {
+                if (this._props.docView?.() && !Utils.isClick(e.clientX, e.clientY, downX, downY, Date.now())) {
+                    DragManager.StartAnchorAnnoDrag(e.target instanceof HTMLElement ? [e.target] : [], 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.linkDocument.link_displayArrow = true;
-                                // e.annoDragData.linkSourceDoc.followLinkToggle = e.annoDragData.dropDocument.annotationOn === this.props.rootDoc;
+                                // e.annoDragData.linkSourceDoc.followLinkToggle = e.annoDragData.dropDocument.annotationOn === this._props.Document;
                                 // e.annoDragData.linkSourceDoc.followLinkZoom = false;
                             }
                         },
@@ -149,11 +155,11 @@ export class TableBox extends React.Component<TableBoxProps> {
             },
             emptyFunction,
             action(e => {
-                const newAxes = this.props.axes;
+                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.push(col);
-                this.props.selectAxes(newAxes);
+                this._props.selectAxes(newAxes);
             })
         );
     };
@@ -163,16 +169,17 @@ export class TableBox extends React.Component<TableBoxProps> {
             return (
                 <div
                     className="tableBox"
+                    style={{ width: this._props.width + this._props.margin.right }}
                     tabIndex={0}
                     onKeyDown={e => {
-                        if (this.props.layoutDoc && e.key === 'a' && (e.ctrlKey || e.metaKey)) {
+                        if (this._props.layoutDoc && e.key === 'a' && (e.ctrlKey || e.metaKey)) {
                             e.stopPropagation();
-                            this.props.layoutDoc.dataViz_selectedRows = new List<number>(this._tableDataIds);
+                            this._props.layoutDoc.dataViz_selectedRows = new List<number>(this._tableDataIds);
                         }
                     }}>
                     <div className="selectAll-buttons">
-                        <Button onClick={action(() => (this.props.layoutDoc.dataViz_selectedRows = new List<number>(this._tableDataIds)))} text="Select All" type={Type.SEC} color={'black'} />
-                        <Button onClick={action(() => (this.props.layoutDoc.dataViz_selectedRows = new List<number>()))} text="Deselect All" type={Type.SEC} color={'black'} />
+                        <Button onClick={action(() => (this._props.layoutDoc.dataViz_selectedRows = new List<number>(this._tableDataIds)))} text="Select All" type={Type.SEC} color={'black'} />
+                        <Button onClick={action(() => (this._props.layoutDoc.dataViz_selectedRows = new List<number>()))} text="Deselect All" type={Type.SEC} color={'black'} />
                     </div>
                     <div
                         className={`tableBox-container ${this.columns[0]}`}
@@ -180,7 +187,7 @@ export class TableBox extends React.Component<TableBoxProps> {
                         onScroll={this.handleScroll}
                         ref={action((r: HTMLDivElement | null) => {
                             this._containerRef = r;
-                            if (!this.props.docView?.()?.ContentDiv?.hidden && r) {
+                            if (!this._props.docView?.()?.ContentDiv?.hidden && r) {
                                 this._tableContainerHeight = r.getBoundingClientRect().height ?? 0;
                                 r.addEventListener(
                                     'wheel', // if scrollTop is 0, then don't let wheel trigger scroll on any container (which it would since onScroll won't be triggered on this)
@@ -195,7 +202,7 @@ export class TableBox extends React.Component<TableBoxProps> {
                         <table
                             className="tableBox-table"
                             ref={action((r: HTMLTableElement | null) => {
-                                if (!this.props.docView?.()?.ContentDiv?.hidden && r) {
+                                if (!this._props.docView?.()?.ContentDiv?.hidden && r) {
                                     this._tableHeight = r?.getBoundingClientRect().height ?? 0;
                                 }
                             })}>
@@ -206,8 +213,8 @@ export class TableBox extends React.Component<TableBoxProps> {
                                         <th
                                             key={this.columns.indexOf(col)}
                                             style={{
-                                                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,
+                                                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',
                                             }}
@@ -219,20 +226,20 @@ export class TableBox extends React.Component<TableBoxProps> {
                             </thead>
                             <tbody>
                                 {this._tableDataIds
-                                    .filter(rowId => this.startID <= rowId && rowId <= this.endID)
+                                    .filter((rowId, i) => this.startID - 2 <= i && i <= this.endID + 2)
                                     ?.map(rowId => (
                                         <tr
                                             key={rowId}
                                             className={`tableBox-row ${this.columns[0]}`}
                                             onClick={e => this.tableRowClick(e, rowId)}
                                             style={{
-                                                background: NumListCast(this.props.layoutDoc.dataViz_highlitedRows).includes(rowId) ? 'lightYellow' : NumListCast(this.props.layoutDoc.dataViz_selectedRows).includes(rowId) ? 'lightgrey' : '',
+                                                background: NumListCast(this._props.layoutDoc.dataViz_highlitedRows).includes(rowId) ? 'lightYellow' : NumListCast(this._props.layoutDoc.dataViz_selectedRows).includes(rowId) ? 'lightgrey' : '',
                                             }}>
                                             {this.columns.map(col => {
-                                                const colSelected = this.props.axes.length > 1 ? this.props.axes[0] == col || this.props.axes[1] == col : this.props.axes.length > 0 ? this.props.axes[0] == col : false;
+                                                const colSelected = this._props.axes.length > 1 ? this._props.axes[0] == col || this._props.axes[1] == col : this._props.axes.length > 0 ? this._props.axes[0] == col : false;
                                                 return (
                                                     <td key={this.columns.indexOf(col)} style={{ border: colSelected ? '3px solid black' : '1px solid black', fontWeight: colSelected ? 'bolder' : 'normal' }}>
-                                                        <div className="tableBox-cell">{this.props.records[rowId][col]}</div>
+                                                        <div className="tableBox-cell">{this._props.records[rowId][col]}</div>
                                                     </td>
                                                 );
                                             })}