diff options
| -rw-r--r-- | src/client/views/nodes/DataVizBox/DataVizBox.tsx | 93 | ||||
| -rw-r--r-- | src/client/views/nodes/DataVizBox/components/Chart.scss | 3 |
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; |