started doccreatormenu for dataviz

3 files changed, 138 insertions, 3 deletions

diff --git a/src/client/views/nodes/DataVizBox/DataVizBox.tsx b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
index 1cb1ad6af..dae535ba6 100644
--- a/src/client/views/nodes/DataVizBox/DataVizBox.tsx
+++ b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
@@ -34,6 +34,7 @@ import { PieChart } from './components/PieChart';
 import { TableBox } from './components/TableBox';
 import { LinkManager } from '../../../util/LinkManager';
 import { Collection } from 'mongoose';
+import { DocCreatorMenu } from './DocCreatorMenu';
 
 export enum DataVizView {
     TABLE = 'table',
@@ -433,7 +434,7 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         const options = cm.findByDescription('Options...');
         const optionItems = options && 'subitems' in options ? options.subitems : [];
         optionItems.push({ description: `Analyze with AI`, event: () => this.askGPT(), icon: 'lightbulb' });
-        optionItems.push({ description: `Create documents`, event: () => this.askGPT(), icon: 'table-cells' });
+        optionItems.push({ description: `Create documents`, event: () => DocCreatorMenu.Instance.displayMenu(200, 200), icon: 'table-cells' });
         !options && cm.addItem({ description: 'Options...', subitems: optionItems, icon: 'eye' });
     };
 
@@ -450,16 +451,22 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
 
     getPossibleTemplates = (): Doc[] => {
         const linkedDocs: Doc[] = LinkManager.Instance.getAllRelatedLinks(this.Document).map(d => DocCast(LinkManager.getOppositeAnchor(d, this.Document)));
-        const linkedCollections: Doc[] = linkedDocs.filter(doc => doc.type === 'collection');
+        const linkedCollections: Doc[] = linkedDocs.filter(doc => doc.type === 'config').filter(doc => DocCast(doc.annotationOn).type === 'collection');
+        console.log('cols: ' + linkedCollections)
         const isColumnTitle = (title: string): boolean => {
             const colTitles: string[] = Object.keys(this.records[0]);
+            console.log('titles: ' + colTitles)
             for (let i = 0; i < colTitles.length; ++i){
-                if (colTitles[i] === title) return true;
+                if (colTitles[i] === title) {
+                    console.log(true);
+                    return true;
+                }
             }
             return false;
         }
         const isValidTemplate = (collection: Doc) => {
             const childDocs = DocListCast(collection[Doc.LayoutFieldKey(collection)]);
+            console.log('childDocs of col: ' + childDocs)
             for (let i = 0; i < childDocs.length; ++i){
                 if (isColumnTitle(String(childDocs[i].title))) return true;
             }
@@ -511,6 +518,8 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
             // 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>
+                <DocCreatorMenu/>
             <div
                 className="dataViz-box"
                 onPointerDown={this.marqueeDown}
@@ -587,6 +596,7 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
                     />
                 )}
             </div>
+            </div>
         );
     }
 }
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss b/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
new file mode 100644
index 000000000..fea5a6f59
--- /dev/null
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
@@ -0,0 +1,12 @@
+.docCreatorMenu-cont {
+    position: absolute;
+    display: flex;
+    min-width: 300px;
+    min-height: 400px;
+    z-index: 6;
+    box-shadow: 0px 3px 4px rgba(0, 0, 0, 30%);
+    flex-direction: column;
+    background: whitesmoke;
+    color: black;
+    border-radius: 3px;
+}
\ No newline at end of file
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
new file mode 100644
index 000000000..d5c2bc227
--- /dev/null
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
@@ -0,0 +1,113 @@
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { action, computed, IReactionDisposer, makeObservable, observable } from 'mobx';
+import { observer } from 'mobx-react';
+import * as React from 'react';
+import { SnappingManager } from '../../../util/SnappingManager';
+import './DocCreatorMenu.scss';
+import { ObservableReactComponent } from '../../ObservableReactComponent';
+
+@observer
+export class DocCreatorMenu extends ObservableReactComponent<{}> {
+
+    static Instance: DocCreatorMenu;
+
+    private _reactionDisposer?: IReactionDisposer;
+
+    @observable _pageX: number = 0;
+    @observable _pageY: number = 0;
+    @observable _display: boolean = false;
+
+    @observable _yRelativeToTop: boolean = true;
+    @observable _selectedIndex = -1;
+
+    @observable _mouseX: number = -1;
+    @observable _mouseY: number = -1;
+    @observable _shouldDisplay: boolean = false;
+
+    constructor(props: any) {
+        super(props);
+        makeObservable(this);
+        DocCreatorMenu.Instance = this;
+    }
+
+    @action
+    onPointerDown = (e: PointerEvent) => {
+        this._mouseX = e.clientX;
+        this._mouseY = e.clientY;
+    };
+    @action
+    onPointerUp = (e: PointerEvent) => {
+        if (e.button !== 2 && !e.ctrlKey) return;
+        const curX = e.clientX;
+        const curY = e.clientY;
+        if (Math.abs(this._mouseX - curX) > 1 || Math.abs(this._mouseY - curY) > 1) {
+            this._shouldDisplay = false;
+        }
+
+        if (this._shouldDisplay) {
+            this._display = true;
+        }
+    };
+
+    componentDidMount() {
+        document.addEventListener('pointerdown', this.onPointerDown, true);
+        document.addEventListener('pointerup', this.onPointerUp);
+    }
+
+    componentWillUnmount() {
+        document.removeEventListener('pointerdown', this.onPointerDown, true);
+        document.removeEventListener('pointerup', this.onPointerUp);
+        this._reactionDisposer?.();
+    }
+
+    static readonly buffer = 20;
+    static readonly width = 300;
+    static readonly height = 400;
+    get pageX() {
+        return this._pageX + DocCreatorMenu.width > window.innerWidth - DocCreatorMenu.buffer ? window.innerWidth - DocCreatorMenu.buffer - DocCreatorMenu.width : Math.max(0, this._pageX);
+    }
+
+    get pageY() {
+        return this._pageY + DocCreatorMenu.height > window.innerHeight - DocCreatorMenu.buffer ? window.innerHeight - DocCreatorMenu.buffer - DocCreatorMenu.height : Math.max(0, this._pageY);
+    }
+
+    @action
+    displayMenu = (x: number, y: number) => {
+        // maxX and maxY will change if the UI/font size changes, but will work for any amount
+        // of items added to the menu
+
+        this._pageX = x;
+        this._pageY = y;
+        this._shouldDisplay = true;
+    };
+
+    @action
+    closeMenu = () => {
+        const wasOpen = this._display;
+        this._display = false;
+        this._shouldDisplay = false;
+        return wasOpen;
+    };
+
+    render() {
+        return (
+            <div
+                className="docCreatorMenu-cont"
+                style={{
+                    display: '',
+                    left: this.pageX,
+                    ...(this._yRelativeToTop ? { top: Math.max(0, this.pageY) } : { bottom: this.pageY }),
+                    background: SnappingManager.userBackgroundColor,
+                    color: SnappingManager.userColor,
+                }}>
+            {!this._shouldDisplay ? undefined : 
+            <div>hi hi</div>
+            
+            
+            }
+            </div>
+            )
+        }
+    
+
+}
\ No newline at end of file