images displaying

3 files changed, 107 insertions, 40 deletions

diff --git a/src/client/views/nodes/DataVizBox/DataVizBox.tsx b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
index 1e0a72a91..f75ba9700 100644
--- a/src/client/views/nodes/DataVizBox/DataVizBox.tsx
+++ b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
@@ -429,12 +429,18 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         this.layoutDoc.dataViz_filterSelection = !this.layoutDoc.dataViz_filterSelection;
     };
 
+    openDocCreatorMenu = (x: number, y: number) => {
+        DocCreatorMenu.Instance.toggleDisplay(x, y);
+        DocCreatorMenu.Instance.setDataViz(this);
+        DocCreatorMenu.Instance.setTemplateDocs(this.getPossibleTemplates());
+    }
+
     specificContextMenu = (x: number, y: number): void => {
         const cm = ContextMenu.Instance;
         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: () => DocCreatorMenu.Instance.toggleDisplay(x, y), icon: 'table-cells' });
+        optionItems.push({ description: `Create documents`, event: () => this.openDocCreatorMenu(x, y), icon: 'table-cells' });
         !options && cm.addItem({ description: 'Options...', subitems: optionItems, icon: 'eye' });
     };
 
@@ -452,13 +458,12 @@ 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 === '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) {
-                    console.log(true);
+                    console.log(true); 
                     return true;
                 }
             }
@@ -472,7 +477,7 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
             }
             return false;
         }
-        return linkedCollections.filter(col => isValidTemplate(col));
+        return linkedDocs;
     }
 
     /**
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss b/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
index dc0f99cbd..43d4ed7e5 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
@@ -23,13 +23,13 @@
     font-size: 14px;
      
     &.right{
-        margin-left: auto;
+        margin-left: 0px;
         font-size: 12px;
     }
 
     &.close-menu {
-        margin-left: 0px;
         font-size: 12px;
+        margin-left: auto;
     }
 
     &.options {
@@ -46,7 +46,7 @@
     margin-bottom: 0px;
 }
 
-.docCreatorMenu-preview-content {
+.docCreatorMenu-preview-container {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     overflow-y: scroll;
@@ -64,4 +64,50 @@
         border: 1px solid whitesmoke;
         border-radius: 5px;
     }
-}
\ No newline at end of file
+}
+
+.docCreatorMenu-options-container {
+    display: flex;
+    overflow-y: scroll;
+    margin: 5px;
+    width: calc(100% - 10px);
+    height: calc(100% - 51px);
+    border: 1px solid whitesmoke;
+    border-radius: 5px;
+
+    .docCreatorMenu-dropdown-button{
+        display: flex;
+        width: 120px;
+        height: 30px;
+        background: whitesmoke; 
+        background-color: rgb(34, 34, 37);
+        border-radius: 5px;
+        border: 1px solid whitesmoke;
+        padding: 0px;
+        font-size: 13px;
+        margin: 10px;
+        align-content: center;
+        justify-content: center;
+        text-transform: uppercase;
+
+        // &:hover .docCreatorMenu-dropdown-content{
+        //     display: block;
+        // }
+    }
+
+    .docCreatorMenu-dropdown-content {
+        display: none;
+        position: absolute;
+        min-width: 100px;
+        z-index: 1;
+
+        .docCreatorMenu-dropdown-option{
+            display: block;
+        }
+
+    }
+
+
+
+}
+
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
index 520dd9c2d..1976ecad2 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
@@ -1,17 +1,18 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { action, computed, IReactionDisposer, makeObservable, observable, runInAction } from 'mobx';
+import { IReactionDisposer, action, makeObservable, observable, reaction, runInAction } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
-import { SnappingManager } from '../../../util/SnappingManager';
-import './DocCreatorMenu.scss';
-import { ObservableReactComponent } from '../../ObservableReactComponent';
-import { IconButton, Size } from 'browndash-components';
 import { returnFalse, setupMoveUpEvents } from '../../../../ClientUtils';
+import { Doc } from '../../../../fields/Doc';
+import { DocCast, ImageCast } from '../../../../fields/Types';
+import { ImageField } from '../../../../fields/URLField';
 import { emptyFunction } from '../../../../Utils';
+import { SnappingManager } from '../../../util/SnappingManager';
 import { undoable } from '../../../util/UndoManager';
-import { DragManager } from '../../../util/DragManager';
+import { ObservableReactComponent } from '../../ObservableReactComponent';
 import { DocumentView } from '../DocumentView';
-import { dropActionType } from '../../../util/DropActionTypes';
+import { DataVizBox } from './DataVizBox';
+import './DocCreatorMenu.scss';
 
 @observer
 export class DocCreatorMenu extends ObservableReactComponent<{}> {
@@ -20,22 +21,21 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
 
     private _ref: HTMLDivElement | null = null;
 
-    private _reactionDisposer?: IReactionDisposer;
+    @observable _templateDocs: Doc[] = [];
+    @observable _icons : (ImageField|undefined)[] = [];
 
     @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 _startPos: {x: number, y: number} | undefined = undefined;
+    @observable _startPos?: {x: number, y: number};
     @observable _shouldDisplay: boolean = false;
 
     @observable _menuContent: 'templates' | 'options' = 'templates';
     @observable _dragging: boolean = false;
+    @observable _dataViz?: DataVizBox;
 
     constructor(props: any) {
         super(props);
@@ -43,6 +43,11 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
         DocCreatorMenu.Instance = this;
     }
 
+    @action setDataViz = (dataViz: DataVizBox) => { this._dataViz = dataViz };
+    @action setTemplateDocs = (docs: Doc[]) => {
+         this._templateDocs = docs.map(doc => doc.annotationOn ? DocCast(doc.annotationOn):doc);
+    };
+
     @action
     onPointerDown = (e: PointerEvent) => {
         this._mouseX = e.clientX;
@@ -59,22 +64,19 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
         }
     };
 
+    _disposer: IReactionDisposer|undefined;
     componentDidMount() {
         document.addEventListener('pointerdown', this.onPointerDown, true);
         document.addEventListener('pointerup', this.onPointerUp);
+        this._disposer = reaction(() => this._templateDocs.slice(),
+            async(docs) => this._icons =  (await Promise.all(docs.map(doc => this.getIcon(doc))))
+            , {fireImmediately: true});
     }
 
     componentWillUnmount() {
+        this._disposer?.();
         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);
     }
 
     @action
@@ -105,23 +107,37 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
         }
     }
 
+    async getIcon(doc: Doc) {
+        const docView = DocumentView.getDocumentView(doc);
+        if (docView) {
+            docView.ComponentView?.updateIcon?.();
+            return new Promise<ImageField | undefined>(res => setTimeout(() => res(ImageCast(docView.Document.icon)), 500));
+        }
+        return undefined;
+    }
+
     get templatesPreviewContents(){
-        const tempArray = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
         return (
-            <div className='docCreatorMenu-preview-content'>
-                {tempArray.map(i => 
-                    <div
-                        className='docCreatorMenu-preview-window'
-                    >
-                    
-                    </div>)}
+            <div className='docCreatorMenu-preview-container'>
+                {this._icons.filter(url => url).map(url => 
+                    <div className='docCreatorMenu-preview-window'>
+                        <img src={url!.url.href.replace(".png", "_s.png")} />
+                    </div>)
+                }
             </div>
         );
     }
 
     get optionsMenuContents(){
         return (
-            <div></div>
+            <div className='docCreatorMenu-options-container'>
+                <div className="docCreatorMenu-dropdown-button">Dropdown</div>
+                <div className="docCreatorMenu-dropdown-content">
+                    <div className="docCreatorMenu-dropdown-option">Link 1</div>
+                    <div className="docCreatorMenu-dropdown-option">Link 1</div>
+                    <div className="docCreatorMenu-dropdown-option">Link 1</div>
+                </div>
+            </div>
         );
     }
 
@@ -181,6 +197,9 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
                         >
                             <FontAwesomeIcon icon={this._menuContent === 'templates' ? 'table-cells' : 'window-maximize'}/>
                         </button>
+                        <button className='docCreatorMenu-menu-button right'>
+                            <FontAwesomeIcon icon={'plus'}/>
+                        </button>
                         <button 
                             className='docCreatorMenu-menu-button close-menu'
                             onPointerDown={e =>
@@ -198,9 +217,6 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
                         >
                             <FontAwesomeIcon icon={'minus'}/>
                         </button>
-                        <button className='docCreatorMenu-menu-button right'>
-                            <FontAwesomeIcon icon={'plus'}/>
-                        </button>
                     </div>
                     <hr className='docCreatorMenu-menu-hr'/>
                     {this._menuContent === 'templates' ? this.templatesPreviewContents : this.optionsMenuContents}