merge

3 files changed, 53 insertions, 35 deletions

diff --git a/src/client/views/nodes/DataVizBox/DataVizBox.tsx b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
index f3670622a..e712a25a0 100644
--- a/src/client/views/nodes/DataVizBox/DataVizBox.tsx
+++ b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
@@ -41,6 +41,8 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
     private _mainCont: React.RefObject<HTMLDivElement> = React.createRef();
     private _ffref = React.createRef<CollectionFreeFormView>();
     private _annotationLayer: React.RefObject<HTMLDivElement> = React.createRef();
+    anchorMenuClick?: () => undefined | ((anchor: Doc) => void);
+    crop: ((region: Doc | undefined, addCrop?: boolean) => Doc | undefined) | undefined;
     @observable _marqueeing: number[] | undefined;
     @observable _savedAnnotations = new ObservableMap<number, HTMLDivElement[]>();
     @computed get annotationLayer() {
@@ -255,7 +257,8 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
     };
 
     // 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,
             layoutDoc: this.layoutDoc,
@@ -267,16 +270,13 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         };
         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 vizBox={this} {...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.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)} 
+            margin={{ top: 10, right: 15, bottom: 15, left: 15 }} />;
+        } // prettier-ignore
+    }
 
     @action
     onPointerDown = (e: React.PointerEvent): void => {
@@ -319,6 +319,8 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
     };
 
     render() {
+        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>
@@ -328,15 +330,19 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
                 onPointerDown={this.marqueeDown}
                 style={{
                     pointerEvents: this.props.isContentActive() === true ? 'all' : 'none',
+                    width: `${100 / scale}%`,
+                    height: `${100 / scale}%`,
+                    transform: `scale(${scale})`,
+                    position: 'absolute',
                 }}
                 onWheel={e => e.stopPropagation()}
                 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} />
+                    <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
@@ -358,7 +364,7 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
                     addDocument={this.addDocument}>
                 </CollectionFreeFormView>
 
-                {this.renderVizView()}
+                {this.renderVizView}
                 <div className="dataviz-sidebar" 
                      style={{ width: `${this.sidebarWidthPercent}`, 
                      backgroundColor: `${this.sidebarColor}` }}
@@ -383,20 +389,36 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
                 {this.sidebarHandle}
                 {this.annotationLayer}
                 {!this._marqueeing || !this._mainCont.current || !this._annotationLayer.current ? null : (
+                    // <MarqueeAnnotator
+                    //     rootDoc={this.rootDoc}
+                    //     scrollTop={0}
+                    //     down={this._marqueeing}
+                    //     scaling={this.props.NativeDimScaling}
+                    //     docView={this.props.DocumentView}
+                    //     addDocument={this.sidebarAddDocument}
+                    //     finishMarquee={this.finishMarquee}
+                    //     savedAnnotations={this.savedAnnotations}
+                    //     selectionText={returnEmptyString}
+                    //     annotationLayer={this._annotationLayer.current}
+                    //     mainCont={this._mainCont.current}
+                    //     highlightDragSrcColor={''}
+                    // />
+
                     <MarqueeAnnotator
-                        rootDoc={this.rootDoc}
-                        scrollTop={0}
-                        down={this._marqueeing}
-                        scaling={this.props.NativeDimScaling}
-                        docView={this.props.docViewPath().slice(-1)[0]}
-                        addDocument={this.sidebarAddDocument}
-                        finishMarquee={this.finishMarquee}
-                        savedAnnotations={this.savedAnnotations}
-                        selectionText={returnEmptyString}
-                        annotationLayer={this._annotationLayer.current}
-                        mainCont={this._mainCont.current}
-                        highlightDragSrcColor={''}
-                    />
+                            rootDoc={this.rootDoc}
+                            getPageFromScroll={undefined}
+                            anchorMenuClick={this.anchorMenuClick}
+                            scrollTop={0}
+                            annotationLayerScrollTop={NumCast(this.props.Document._layout_scrollTop)}
+                            addDocument={this.sidebarAddDocument}
+                            docView={this.props.DocumentView!}
+                            finishMarquee={this.finishMarquee}
+                            savedAnnotations={this.savedAnnotations}
+                            selectionText={returnEmptyString}
+                            annotationLayer={this._annotationLayer.current}
+                            mainCont={this._mainCont.current}
+                            anchorMenuCrop={this.crop}
+                        />
                     
                 )}
             </div>
diff --git a/src/client/views/nodes/DataVizBox/components/PieChart.tsx b/src/client/views/nodes/DataVizBox/components/PieChart.tsx
index df65810b5..4622b470a 100644
--- a/src/client/views/nodes/DataVizBox/components/PieChart.tsx
+++ b/src/client/views/nodes/DataVizBox/components/PieChart.tsx
@@ -88,11 +88,7 @@ export class PieChart extends React.Component<PieChartProps> {
     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 }
         );
     };
diff --git a/src/client/views/nodes/DataVizBox/components/TableBox.tsx b/src/client/views/nodes/DataVizBox/components/TableBox.tsx
index 3685a198e..012021dda 100644
--- a/src/client/views/nodes/DataVizBox/components/TableBox.tsx
+++ b/src/client/views/nodes/DataVizBox/components/TableBox.tsx
@@ -220,7 +220,7 @@ export class TableBox extends React.Component<TableBoxProps> {
                             </thead>
                             <tbody>
                                 {this._tableDataIds
-                                    .filter(rowId => this.startID <= rowId && rowId <= this.endID)
+                                    .filter((rowId, i) => this.startID <= i && i <= this.endID)
                                     ?.map(rowId => (
                                         <tr
                                             key={rowId}