fixed doccreatemenu warnings.

1 files changed, 185 insertions, 165 deletions

diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx
index 16d588c55..64416c26d 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx
@@ -1,5 +1,5 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { Colors } from 'browndash-components';
+import { Colors } from '@dash/components';
 import { action, computed, makeObservable, observable, runInAction } from 'mobx';
 import { observer } from 'mobx-react';
 import { IDisposer } from 'mobx-utils';
@@ -20,7 +20,6 @@ import { UndoManager, undoable } from '../../../../util/UndoManager';
 import { ObservableReactComponent } from '../../../ObservableReactComponent';
 import { CollectionFreeFormView } from '../../../collections/collectionFreeForm/CollectionFreeFormView';
 import { DocumentView, DocumentViewInternal } from '../../DocumentView';
-import { FieldViewProps } from '../../FieldView';
 import { OpenWhere } from '../../OpenWhere';
 import { DataVizBox } from '../DataVizBox';
 import './DocCreatorMenu.scss';
@@ -64,22 +63,27 @@ export type Col = {
     defaultContent?: string;
 };
 
+interface DocCreateMenuProps {
+    addDocTab: (doc: Doc | Doc[], where: OpenWhere) => boolean;
+}
+
 @observer
-export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
+export class DocCreatorMenu extends ObservableReactComponent<DocCreateMenuProps> {
+    // eslint-disable-next-line no-use-before-define
     static Instance: DocCreatorMenu;
 
     private _disposers: { [name: string]: IDisposer } = {};
 
     private _ref: HTMLDivElement | null = null;
 
-    private templateManager: TemplateManager; 
+    private templateManager: TemplateManager;
 
     @observable _fullyRenderedDocs: Doc[] = [];
     @observable _renderedDocCollectionPreview: Doc | undefined = undefined;
     @observable _renderedDocCollection: Doc | undefined = undefined;
     @observable _docsRendering: boolean = false;
 
-    @observable _userTemplates: {template: Template, doc: Doc}[] = []; //!!! used to keep track of all templates, should be refactored to work with actual templates and not docs
+    @observable _userTemplates: { template: Template; doc: Doc }[] = []; //!!! used to keep track of all templates, should be refactored to work with actual templates and not docs
     @observable _selectedTemplate: Template | undefined = undefined;
     @observable _currEditingTemplate: Template | undefined = undefined;
 
@@ -92,7 +96,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
     @observable _expandedPreview: Doc | undefined = undefined;
 
     @observable _suggestedTemplates: Template[] = [];
-    @observable _suggestedTemplatePreviews: {doc: Doc, template: Template}[] = [];
+    @observable _suggestedTemplatePreviews: { doc: Doc; template: Template }[] = [];
     @observable _GPTOpt: boolean = false;
     @observable _callCount: number = 0;
     @observable _GPTLoading: boolean = false;
@@ -111,7 +115,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
     @observable _draggingIndicator: boolean = false;
     @observable _dataViz?: DataVizBox;
     @observable _interactionLock: boolean | undefined;
-    @observable _snapPt: {x: number, y: number} = {x: 0, y: 0};
+    @observable _snapPt: { x: number; y: number } = { x: 0, y: 0 };
     @observable _resizeHdlId: string = '';
     @observable _resizing: boolean = false;
     @observable _offset: { x: number; y: number } = { x: 0, y: 0 };
@@ -120,7 +124,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
     @observable _menuDimensions: { width: number; height: number } = { width: 400, height: 400 };
     @observable _editing: boolean = false;
 
-    constructor(props: any) {
+    constructor(props: DocCreateMenuProps) {
         super(props);
         makeObservable(this);
         DocCreatorMenu.Instance = this;
@@ -138,14 +142,14 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
         this._userCreatedFields = [];
     };
     @action addUserTemplate = (template: Template) => {
-        this._userTemplates.push({template: template.cloneBase(), doc: template.getRenderedDoc()});
+        this._userTemplates.push({ template: template.cloneBase(), doc: template.getRenderedDoc() });
     };
     @action removeUserTemplate = (template: Template) => {
         this._userTemplates = this._userTemplates.filter(info => info.template !== template);
-    }
+    };
     @action updateTemplatePreview = (template: Template) => {
         template.renderUpdates();
-        const preview = {template: template, doc: template.getRenderedDoc()};
+        const preview = { template: template, doc: template.getRenderedDoc() };
         this._suggestedTemplatePreviews = this._suggestedTemplatePreviews.map(t => { return t.template === preview.template ? preview : t }); //prettier-ignore
         this._userTemplates = this._userTemplates.map(t => { return t.template === preview.template ? preview : t }); //prettier-ignore
     };
@@ -216,7 +220,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
         return bounds;
     }
 
-    setUpButtonClick = (e: any, func: () => void) => {
+    setUpButtonClick = (e: React.PointerEvent, func: () => void) => {
         setupMoveUpEvents(
             this,
             e,
@@ -298,7 +302,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
         SnappingManager.SetIsResizing(DocumentView.Selected().lastElement()?.Document[Id]); // turns off pointer events on things like youtube videos and web pages so that dragging doesn't get "stuck" when cursor moves over them
         e.stopPropagation();
         const id = (this._resizeHdlId = e.currentTarget.className);
-        const pad = id.includes('Left') || id.includes('Right') ? Number(getComputedStyle(e.target as any).width.replace('px', '')) / 2 : 0;
+        const pad = id.includes('Left') || id.includes('Right') ? Number(getComputedStyle(e.target as HTMLElement).width.replace('px', '')) / 2 : 0;
         const bounds = e.currentTarget.getBoundingClientRect();
         this._offset = {
             x: id.toLowerCase().includes('left') ? bounds.right - e.clientX - pad : bounds.left - e.clientX + pad, //
@@ -309,7 +313,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
     };
 
     @action
-    onResize = (e: any): boolean => {
+    onResize = (e: PointerEvent): boolean => {
         const dragHdl = this._resizeHdlId.split(' ')[1];
         const thisPt = DragManager.snapDrag(e, -this._offset.x, -this._offset.y, this._offset.x, this._offset.y);
 
@@ -324,7 +328,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
     };
 
     @action
-    onDrag = (e: any): boolean => {
+    onDrag = (e: PointerEvent): boolean => {
         this._pageX = e.pageX - (this._startPos?.x ?? 0);
         this._pageY = e.pageY - (this._startPos?.y ?? 0);
         this._initDimensions.x = this._pageX;
@@ -377,7 +381,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
         } else {
             this._selectedTemplate = template;
             template.renderUpdates();
-            this._fullyRenderedDocs = await this.createDocsFromTemplate(template) ?? [];
+            this._fullyRenderedDocs = (await this.createDocsFromTemplate(template)) ?? [];
             this.updateRenderedDocCollection();
         }
     };
@@ -486,9 +490,8 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
      * @returns a doc containing the fully rendered template
      */
     applyGPTContentToTemplate = async (template: Template, assignments: { [field: string]: Col }): Promise<Template | undefined> => {
-
-        const GPTTextCalls = Object.entries(assignments).filter(([str, col]) => col.type === TemplateFieldType.TEXT && this._userCreatedFields.includes(col));
-        const GPTIMGCalls = Object.entries(assignments).filter(([str, col]) => col.type === TemplateFieldType.VISUAL && this._userCreatedFields.includes(col));
+        const GPTTextCalls = Object.entries(assignments).filter(([, col]) => col.type === TemplateFieldType.TEXT && this._userCreatedFields.includes(col));
+        const GPTIMGCalls = Object.entries(assignments).filter(([, col]) => col.type === TemplateFieldType.VISUAL && this._userCreatedFields.includes(col));
 
         if (GPTTextCalls.length) {
             const promises = GPTTextCalls.map(([str, col]) => {
@@ -504,7 +507,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
             });
 
             await Promise.all(promises);
-        };
+        }
 
         return template;
     };
@@ -557,7 +560,8 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
                     const toObj = Object.entries(assignment).reduce(
                         (a, [fieldID, colTitle]) => {
                             const col = this.getColByTitle(colTitle);
-                            if (!this._userCreatedFields.includes(col)){ // do the following for any fields not added by the user; will change in the future, for now only GPT content works with user-added fields
+                            if (!this._userCreatedFields.includes(col)) {
+                                // do the following for any fields not added by the user; will change in the future, for now only GPT content works with user-added fields
                                 const field = template.getFieldByID(Number(fieldID));
                                 field.setContent(col.defaultContent ?? '', col.type === TemplateFieldType.VISUAL ? FieldContentType.IMAGE : FieldContentType.STRING);
                                 field.setTitle(col.title);
@@ -623,7 +627,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
             console.log(e);
         }
         return true;
-    }
+    };
 
     renderGPTTextCall = async (template: Template, col: Col, fieldNum: number): Promise<boolean> => {
         const wordLimit = (size: TemplateFieldSize) => {
@@ -667,7 +671,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
         }
 
         return true;
-    }
+    };
 
     createDocsFromTemplate = async (template: Template) => {
         const dv = this._dataViz;
@@ -676,61 +680,72 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
 
         this._docsRendering = true;
 
-        const fields: string[] = Array.from(Object.keys(dv.records[0]));  
+        const fields: string[] = Array.from(Object.keys(dv.records[0]));
         const selectedRows = NumListCast(dv.layoutDoc.dataViz_selectedRows);
-    
+
         const rowContents: { [title: string]: string }[] = selectedRows.map(row => {
             const values: { [title: string]: string } = {};
             fields.forEach(col => {
                 values[col] = dv.records[row][col];
             });
-    
+
             return values;
         });
-    
-        const processContent = async (content: {[title: string]: string}) => {
-            const templateCopy = template.cloneBase(); 
-
-            fields.filter(title => title).forEach(title => {
-                const field = templateCopy.getFieldByTitle(title);
-                if (field === undefined) { return };
-                field.setContent(content[title]);
-            });
-    
-            const gptPromises = this._userCreatedFields.filter(field => field.type === TemplateFieldType.TEXT).map(field => {
-                const title = field.title;
-                const templateField = templateCopy.getFieldByTitle(title);
-                if (templateField === undefined) { return };
-                const templatefieldID = templateField.getID;
-    
-                return this.renderGPTTextCall(templateCopy, field, templatefieldID);
-            });
 
-            const imagePromises = this._userCreatedFields.filter(field => field.type === TemplateFieldType.VISUAL).map(field => {
-                const title = field.title;
-                const templateField = templateCopy.getFieldByTitle(title);
-                if (templateField === undefined) { return };
-                const templatefieldID = templateField.getID;
-    
-                return this.renderGPTImageCall(templateCopy, field, templatefieldID);
-            });
-    
+        const processContent = async (content: { [title: string]: string }) => {
+            const templateCopy = template.cloneBase();
+
+            fields
+                .filter(title => title)
+                .forEach(title => {
+                    const field = templateCopy.getFieldByTitle(title);
+                    if (field === undefined) {
+                        return;
+                    }
+                    field.setContent(content[title]);
+                });
+
+            const gptPromises = this._userCreatedFields
+                .filter(field => field.type === TemplateFieldType.TEXT)
+                .map(field => {
+                    const title = field.title;
+                    const templateField = templateCopy.getFieldByTitle(title);
+                    if (templateField === undefined) {
+                        return;
+                    }
+                    const templatefieldID = templateField.getID;
+
+                    return this.renderGPTTextCall(templateCopy, field, templatefieldID);
+                });
+
+            const imagePromises = this._userCreatedFields
+                .filter(field => field.type === TemplateFieldType.VISUAL)
+                .map(field => {
+                    const title = field.title;
+                    const templateField = templateCopy.getFieldByTitle(title);
+                    if (templateField === undefined) {
+                        return;
+                    }
+                    const templatefieldID = templateField.getID;
+
+                    return this.renderGPTImageCall(templateCopy, field, templatefieldID);
+                });
+
             await Promise.all(gptPromises);
 
             await Promise.all(imagePromises);
-    
+
             return templateCopy.getRenderedDoc();
         };
-    
+
         const promises = rowContents.map(content => processContent(content));
-    
+
         const renderedDocs = await Promise.all(promises);
 
         this._docsRendering = false;
 
         return renderedDocs;
-    }
-    
+    };
 
     addRenderedCollectionToMainview = () => {
         const collection = this._renderedDocCollection;
@@ -740,7 +755,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
         collection.y = this._pageY - this._menuDimensions.height;
         mainCollection.addDocument(collection);
         this.closeMenu();
-    }
+    };
 
     @action setExpandedView = (template: Template | undefined) => {
         if (template) {
@@ -752,8 +767,8 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
         }
     };
 
-    get editingWindow(){
-        const rendered = !this._expandedPreview ? null :
+    get editingWindow() {
+        const rendered = !this._expandedPreview ? null : (
             <div className="docCreatorMenu-expanded-template-preview">
                 <DocumentView
                     Document={this._expandedPreview}
@@ -763,7 +778,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
                     removeDocument={returnFalse}
                     PanelWidth={() => this._menuDimensions.width - 10}
                     PanelHeight={() => this._menuDimensions.height - 60}
-                    ScreenToLocalTransform={() => new Transform(-this._pageX - 5,-this._pageY - 35, 1)}
+                    ScreenToLocalTransform={() => new Transform(-this._pageX - 5, -this._pageY - 35, 1)}
                     renderDepth={5}
                     whenChildContentsActiveChanged={emptyFunction}
                     focus={emptyFunction}
@@ -777,19 +792,31 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
                     fitWidth={returnFalse}
                 />
             </div>
+        );
 
         return (
             <div className="docCreatorMenu-expanded-template-preview">
-                <div className="top-panel"/>
+                <div className="top-panel" />
                 {rendered}
                 <div className="right-buttons-panel">
-                    <button className="docCreatorMenu-menu-button section-reveal-options top-right" onPointerDown={e => this.setUpButtonClick(e, () => {
-                        this._currEditingTemplate && this.updateTemplatePreview(this._currEditingTemplate); 
-                        this.setExpandedView(undefined)}
-                        )}>
+                    <button
+                        className="docCreatorMenu-menu-button section-reveal-options top-right"
+                        onPointerDown={e =>
+                            this.setUpButtonClick(e, () => {
+                                this._currEditingTemplate && this.updateTemplatePreview(this._currEditingTemplate);
+                                this.setExpandedView(undefined);
+                            })
+                        }>
                         <FontAwesomeIcon icon="minimize" />
                     </button>
-                    <button className="docCreatorMenu-menu-button section-reveal-options top-right-lower" onPointerDown={e => this.setUpButtonClick(e, () => {this._currEditingTemplate?.resetToBase(); this.setExpandedView(this._currEditingTemplate);})}>
+                    <button
+                        className="docCreatorMenu-menu-button section-reveal-options top-right-lower"
+                        onPointerDown={e =>
+                            this.setUpButtonClick(e, () => {
+                                this._currEditingTemplate?.resetToBase();
+                                this.setExpandedView(this._currEditingTemplate);
+                            })
+                        }>
                         <FontAwesomeIcon icon="arrows-rotate" color="white" />
                     </button>
                 </div>
@@ -798,7 +825,6 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
     }
 
     get templatesPreviewContents() {
-
         const GPTOptions = <div></div>;
 
         return (
@@ -820,80 +846,10 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
                                         <ReactLoading type="spin" color={StrCast(Doc.UserDoc().userVariantColor)} height={30} width={30} />
                                     </div>
                                 ) : (
-                                    this._suggestedTemplatePreviews
-                                        .map(({doc, template}) => (
-                                            <div
-                                                className="docCreatorMenu-preview-window"
-                                                key='0'
-                                                style={{
-                                                    border: this._selectedTemplate === template ? `solid 3px ${Colors.MEDIUM_BLUE}` : '',
-                                                    boxShadow: this._selectedTemplate === template ? `0 0 15px rgba(68, 118, 247, .8)` : '',
-                                                }}
-                                                onPointerDown={e => this.setUpButtonClick(e, () => runInAction(() => this.updateSelectedTemplate(template)))}>
-                                                <button
-                                                    className="option-button left"
-                                                    onPointerDown={e =>
-                                                        this.setUpButtonClick(e, () => {
-                                                            this.setExpandedView(template);
-                                                        })
-                                                    }>
-                                                    <FontAwesomeIcon icon="magnifying-glass" color="white" />
-                                                </button>
-                                                <button className="option-button right" onPointerDown={e => this.setUpButtonClick(e, () => this.addUserTemplate(template))}>
-                                                    <FontAwesomeIcon icon="plus" color="white" />
-                                                </button>
-                                                <DocumentView
-                                                    Document={doc}
-                                                    isContentActive={emptyFunction} // !!! should be return false
-                                                    addDocument={returnFalse}
-                                                    moveDocument={returnFalse}
-                                                    removeDocument={returnFalse}
-                                                    PanelWidth={() => this._selectedTemplate === template ? 104 : 111}
-                                                    PanelHeight={() => this._selectedTemplate === template ? 104 : 111}
-                                                    ScreenToLocalTransform={() => new Transform(-this._pageX - 5,-this._pageY - 35, 1)}
-                                                    renderDepth={1}
-                                                    whenChildContentsActiveChanged={emptyFunction}
-                                                    focus={emptyFunction}
-                                                    styleProvider={DefaultStyleProvider}
-                                                    addDocTab={this._props.addDocTab}
-                                                    pinToPres={() => undefined}
-                                                    childFilters={returnEmptyFilter}
-                                                    childFiltersByRanges={returnEmptyFilter}
-                                                    searchFilterDocs={returnEmptyDoclist}
-                                                    fitContentsToBox={returnFalse}
-                                                    fitWidth={returnFalse}
-                                                    hideDecorations={true}
-                                                    />
-                                            </div>
-                                        ))
-                                )}
-                            </div>
-                            <div className="docCreatorMenu-GPT-options">
-                                <div className="docCreatorMenu-GPT-options-container">
-                                    <button className="docCreatorMenu-menu-button" onPointerDown={e => this.setUpButtonClick(e, () => this.generatePresetTemplates())}>
-                                        <FontAwesomeIcon icon="arrows-rotate" />
-                                    </button>
-                                </div>
-                                {this._GPTOpt ? GPTOptions : null}
-                            </div>
-                        </div>
-                        <hr className="docCreatorMenu-option-divider full no-margin" />
-                        <div className="docCreatorMenu-section">
-                            <div className="docCreatorMenu-section-topbar">
-                                <div className="docCreatorMenu-section-title">Your Templates</div>
-                                <button className="docCreatorMenu-menu-button section-reveal-options" onPointerDown={e => this.setUpButtonClick(e, () => (this._GPTOpt = !this._GPTOpt))}>
-                                    <FontAwesomeIcon icon="gear" />
-                                </button>
-                            </div>
-                            <div className="docCreatorMenu-templates-preview-window" style={{ justifyContent: this._menuDimensions.width > 400 ? 'center' : '' }}>
-                                <div className="docCreatorMenu-preview-window empty">
-                                    <FontAwesomeIcon icon="plus" color="rgb(160, 160, 160)" />
-                                </div>
-                                {this._userTemplates
-                                    .map(({template, doc}) => (
+                                    this._suggestedTemplatePreviews.map(({ doc, template }) => (
                                         <div
                                             className="docCreatorMenu-preview-window"
-                                            key='0'
+                                            key="0"
                                             style={{
                                                 border: this._selectedTemplate === template ? `solid 3px ${Colors.MEDIUM_BLUE}` : '',
                                                 boxShadow: this._selectedTemplate === template ? `0 0 15px rgba(68, 118, 247, .8)` : '',
@@ -908,8 +864,8 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
                                                 }>
                                                 <FontAwesomeIcon icon="magnifying-glass" color="white" />
                                             </button>
-                                            <button className="option-button right" onPointerDown={e => this.setUpButtonClick(e, () => this.removeUserTemplate(template))}>
-                                                <FontAwesomeIcon icon="minus" color="white" />
+                                            <button className="option-button right" onPointerDown={e => this.setUpButtonClick(e, () => this.addUserTemplate(template))}>
+                                                <FontAwesomeIcon icon="plus" color="white" />
                                             </button>
                                             <DocumentView
                                                 Document={doc}
@@ -917,8 +873,8 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
                                                 addDocument={returnFalse}
                                                 moveDocument={returnFalse}
                                                 removeDocument={returnFalse}
-                                                PanelWidth={() => this._selectedTemplate === template ? 104 : 111}
-                                                PanelHeight={() => this._selectedTemplate === template ? 104 : 111}
+                                                PanelWidth={() => (this._selectedTemplate === template ? 104 : 111)}
+                                                PanelHeight={() => (this._selectedTemplate === template ? 104 : 111)}
                                                 ScreenToLocalTransform={() => new Transform(-this._pageX - 5, -this._pageY - 35, 1)}
                                                 renderDepth={1}
                                                 whenChildContentsActiveChanged={emptyFunction}
@@ -932,9 +888,77 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
                                                 fitContentsToBox={returnFalse}
                                                 fitWidth={returnFalse}
                                                 hideDecorations={true}
-                                                />
+                                            />
                                         </div>
-                                    ))}
+                                    ))
+                                )}
+                            </div>
+                            <div className="docCreatorMenu-GPT-options">
+                                <div className="docCreatorMenu-GPT-options-container">
+                                    <button className="docCreatorMenu-menu-button" onPointerDown={e => this.setUpButtonClick(e, () => this.generatePresetTemplates())}>
+                                        <FontAwesomeIcon icon="arrows-rotate" />
+                                    </button>
+                                </div>
+                                {this._GPTOpt ? GPTOptions : null}
+                            </div>
+                        </div>
+                        <hr className="docCreatorMenu-option-divider full no-margin" />
+                        <div className="docCreatorMenu-section">
+                            <div className="docCreatorMenu-section-topbar">
+                                <div className="docCreatorMenu-section-title">Your Templates</div>
+                                <button className="docCreatorMenu-menu-button section-reveal-options" onPointerDown={e => this.setUpButtonClick(e, () => (this._GPTOpt = !this._GPTOpt))}>
+                                    <FontAwesomeIcon icon="gear" />
+                                </button>
+                            </div>
+                            <div className="docCreatorMenu-templates-preview-window" style={{ justifyContent: this._menuDimensions.width > 400 ? 'center' : '' }}>
+                                <div className="docCreatorMenu-preview-window empty">
+                                    <FontAwesomeIcon icon="plus" color="rgb(160, 160, 160)" />
+                                </div>
+                                {this._userTemplates.map(({ template, doc }) => (
+                                    <div
+                                        className="docCreatorMenu-preview-window"
+                                        key="0"
+                                        style={{
+                                            border: this._selectedTemplate === template ? `solid 3px ${Colors.MEDIUM_BLUE}` : '',
+                                            boxShadow: this._selectedTemplate === template ? `0 0 15px rgba(68, 118, 247, .8)` : '',
+                                        }}
+                                        onPointerDown={e => this.setUpButtonClick(e, () => runInAction(() => this.updateSelectedTemplate(template)))}>
+                                        <button
+                                            className="option-button left"
+                                            onPointerDown={e =>
+                                                this.setUpButtonClick(e, () => {
+                                                    this.setExpandedView(template);
+                                                })
+                                            }>
+                                            <FontAwesomeIcon icon="magnifying-glass" color="white" />
+                                        </button>
+                                        <button className="option-button right" onPointerDown={e => this.setUpButtonClick(e, () => this.removeUserTemplate(template))}>
+                                            <FontAwesomeIcon icon="minus" color="white" />
+                                        </button>
+                                        <DocumentView
+                                            Document={doc}
+                                            isContentActive={emptyFunction} // !!! should be return false
+                                            addDocument={returnFalse}
+                                            moveDocument={returnFalse}
+                                            removeDocument={returnFalse}
+                                            PanelWidth={() => (this._selectedTemplate === template ? 104 : 111)}
+                                            PanelHeight={() => (this._selectedTemplate === template ? 104 : 111)}
+                                            ScreenToLocalTransform={() => new Transform(-this._pageX - 5, -this._pageY - 35, 1)}
+                                            renderDepth={1}
+                                            whenChildContentsActiveChanged={emptyFunction}
+                                            focus={emptyFunction}
+                                            styleProvider={DefaultStyleProvider}
+                                            addDocTab={this._props.addDocTab}
+                                            pinToPres={() => undefined}
+                                            childFilters={returnEmptyFilter}
+                                            childFiltersByRanges={returnEmptyFilter}
+                                            searchFilterDocs={returnEmptyDoclist}
+                                            fitContentsToBox={returnFalse}
+                                            fitWidth={returnFalse}
+                                            hideDecorations={true}
+                                        />
+                                    </div>
+                                ))}
                             </div>
                         </div>
                     </div>
@@ -943,7 +967,6 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
         );
     }
 
-
     @action updateXMargin = (input: string) => {
         this._layout.xMargin = Number(input);
         setTimeout(() => {
@@ -989,8 +1012,6 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
         }
     }
 
-    screenToLocalTransform = () => this._props.ScreenToLocalTransform();
-
     applyLayout = (collection: Doc, docs: Doc[]) => {
         const { horizontalSpan, verticalSpan } = this.previewInfo;
         collection._height = verticalSpan;
@@ -1001,12 +1022,12 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
         const xGap: number = layout.xMargin;
         const yGap: number = layout.yMargin;
         // const repeat: number = templateInfo.layout.repeat;
-        const startX: number = -Number(collection._width)/2;
-        const startY: number = -Number(collection._height)/2;
+        const startX: number = -Number(collection._width) / 2;
+        const startY: number = -Number(collection._height) / 2;
         const docHeight: number = Number(docs[0]._height);
         const docWidth: number = Number(docs[0]._width);
 
-        if (columns === 0 || docs.length === 0){
+        if (columns === 0 || docs.length === 0) {
             return;
         }
 
@@ -1030,16 +1051,16 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
     };
 
     @computed
-    get previewInfo(){
+    get previewInfo() {
         const docHeight: number = Number(this._fullyRenderedDocs[0]._height);
         const docWidth: number = Number(this._fullyRenderedDocs[0]._width);
         const layout = this._layout;
         return {
             docHeight: docHeight,
             docWidth: docWidth,
-            horizontalSpan: (docWidth + layout.xMargin) * (this.columnsCount) - layout.xMargin,
-            verticalSpan: (docHeight + layout.yMargin) * (this.rowsCount) - layout.yMargin,
-        }
+            horizontalSpan: (docWidth + layout.xMargin) * this.columnsCount - layout.xMargin,
+            verticalSpan: (docHeight + layout.yMargin) * this.rowsCount - layout.yMargin,
+        };
     }
 
     /**
@@ -1051,7 +1072,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
 
         const { horizontalSpan, verticalSpan } = this.previewInfo;
 
-        const collectionFactory = (): (docs: Doc[], options: DocumentOptions) => Doc => {
+        const collectionFactory = (): ((docs: Doc[], options: DocumentOptions) => Doc) => {
             switch (this._layout.type) {
                 case LayoutType.CAROUSEL3D:
                     return Docs.Create.Carousel3DDocument;
@@ -1066,7 +1087,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
                 default:
                     return Docs.Create.FreeformDocument;
             }
-        }
+        };
 
         const collection: Doc = collectionFactory()(this._fullyRenderedDocs, {
             isDefaultTemplateDoc: true,
@@ -1079,17 +1100,16 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
         this.applyLayout(collection, this._fullyRenderedDocs);
 
         this._renderedDocCollection = collection;
-    }
+    };
 
     layoutPreviewContents = () => {
-
         return this._docsRendering ? (
             <div className="docCreatorMenu-layout-preview-window-wrapper loading">
                 <div className="loading-spinner">
                     <ReactLoading type="spin" color={StrCast(Doc.UserDoc().userVariantColor)} height={30} width={30} />
-                </div> 
+                </div>
             </div>
-            ) : !this._renderedDocCollection? null : (
+        ) : !this._renderedDocCollection ? null : (
             <div className="docCreatorMenu-layout-preview-window-wrapper">
                 <DocumentView
                     Document={this._renderedDocCollection}
@@ -1099,7 +1119,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
                     removeDocument={returnFalse}
                     PanelWidth={() => this._menuDimensions.width - 80}
                     PanelHeight={() => this._menuDimensions.height - 105}
-                    ScreenToLocalTransform={() => new Transform(-this._pageX - 5,-this._pageY - 35, 1)}
+                    ScreenToLocalTransform={() => new Transform(-this._pageX - 5, -this._pageY - 35, 1)}
                     renderDepth={5}
                     whenChildContentsActiveChanged={emptyFunction}
                     focus={emptyFunction}
@@ -1114,7 +1134,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
                     hideDecorations={true}
                 />
             </div>
-        )
+        );
     };
 
     get optionsMenuContents() {