clicking on tables bug fix

2 files changed, 62 insertions, 34 deletions

diff --git a/src/client/views/nodes/DataVizBox/DataVizBox.tsx b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
index e712a25a0..cfa420473 100644
--- a/src/client/views/nodes/DataVizBox/DataVizBox.tsx
+++ b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
@@ -6,7 +6,7 @@ import { Doc, Field, Opt, StrListCast } from '../../../../fields/Doc';
 import { List } from '../../../../fields/List';
 import { Cast, CsvCast, DocCast, NumCast, StrCast } from '../../../../fields/Types';
 import { CsvField } from '../../../../fields/URLField';
-import { Docs } from '../../../documents/Documents';
+import { DocUtils, Docs } from '../../../documents/Documents';
 import { ViewBoxAnnotatableComponent } from '../../DocComponent';
 import { FieldView, FieldViewProps } from '../FieldView';
 import { PinProps } from '../trails';
@@ -18,7 +18,7 @@ import './DataVizBox.scss';
 import { UndoManager, undoable } from '../../../util/UndoManager';
 import { SidebarAnnos } from '../../SidebarAnnos';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { emptyFunction, returnEmptyString, returnFalse, setupMoveUpEvents } from '../../../../Utils';
+import { Utils, emptyFunction, returnEmptyString, returnFalse, setupMoveUpEvents } from '../../../../Utils';
 import { DocumentView } from '../DocumentView';
 import { DocumentManager } from '../../../util/DocumentManager';
 import { TraceMobx } from '../../../../fields/util';
@@ -27,6 +27,9 @@ import { InkTool } from '../../../../fields/InkField';
 import { AnchorMenu } from '../../pdf/AnchorMenu';
 import { GPTPopup } from '../../pdf/GPTPopup/GPTPopup';
 import { CollectionFreeFormView } from '../../collections/collectionFreeForm';
+import { ContextMenu } from '../../ContextMenu';
+import { gptImageCall } from '../../../apis/gpt/GPT';
+import { Networking } from '../../../Network';
 
 export enum DataVizView {
     TABLE = 'table',
@@ -318,6 +321,43 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         GPTPopup.Instance.addDoc = this.sidebarAddDocument;
     };
 
+    datavizContextMenu = (e: React.MouseEvent): void => {
+        const cm = ContextMenu.Instance;
+        const options = cm.findByDescription('Options...');
+        const optionItems = options && 'subitems' in options ? options.subitems : [];
+        optionItems.push({ description: `Ask GPT`, event: () => {this.askGPT()}, icon: 'lightbulb' });
+        !options && cm.addItem({ description: 'Options...', subitems: optionItems, icon: 'eye' });
+    };
+
+    async askGPT() {
+        let image_urls = await gptImageCall(Object.keys(this.records[0])[0]);
+        if (image_urls && image_urls[0]) {
+            const [result] = await Networking.PostToServer('/uploadRemoteImage', { sources: [image_urls[0]] });
+            const source = Utils.prepend(result.accessPaths.agnostic.client);
+            //this.setImgUrls([[image_urls[0], source]]);
+            const anchor = this.rootDoc;
+            if (!anchor) return;
+            const newDoc = Docs.Create.ImageDocument(source, {
+                x: NumCast(anchor.x) + NumCast(anchor._width) + 10,
+                y: NumCast(anchor.y),
+                _height: 200,
+                _width: 200,
+                data_nativeWidth: 1024,
+                data_nativeHeight: 1024,
+            });
+            if (Doc.IsInMyOverlay(anchor)) {
+                newDoc.overlayX = anchor.x;
+                newDoc.overlayY = NumCast(anchor.y) + NumCast(anchor._height);
+                Doc.AddToMyOverlay(newDoc);
+            } else {
+                this.props.addDocument?.(newDoc);
+            }
+            DocUtils.MakeLink(anchor, newDoc, { link_relationship: 'GPT Data Prompt' });
+        }
+
+        
+    }
+
     render() {
         const scale = this.props.NativeDimScaling?.() || 1;
 
@@ -337,6 +377,7 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
                 }}
                 onWheel={e => e.stopPropagation()}
                 ref={this._mainCont}
+                onContextMenu={this.datavizContextMenu}
                 >
                 <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} />
@@ -362,9 +403,11 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
                     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}` }}
@@ -389,37 +432,21 @@ 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}
-                            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}
-                        />
-                    
+                        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/Chart.scss b/src/client/views/nodes/DataVizBox/components/Chart.scss
index c8ea88d63..cc1923b98 100644
--- a/src/client/views/nodes/DataVizBox/components/Chart.scss
+++ b/src/client/views/nodes/DataVizBox/components/Chart.scss
@@ -4,7 +4,7 @@
     flex-direction: column;
     align-items: center;
     cursor: default;
-    margin-top: 10px;
+    margin-top: 30px;
     overflow-y: visible;
 
     .graph {
@@ -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;