1 files changed, 13 insertions, 5 deletions

diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
index b1488679f..48b87fae7 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
@@ -38,7 +38,7 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
     @observable _templateRefToDoc?: ObservableMap<HTMLDivElement, Doc>;
     @observable _selectedTemplate: Doc | undefined = undefined;
 
-    @observable _layout: {type: LayoutType, yMargin: number, xMargin: number, columns: number, repeat: number} = {type: LayoutType.Grid, yMargin: 0, xMargin: 0, columns: 1, repeat: 0};
+    @observable _layout: {type: LayoutType, yMargin: number, xMargin: number, columns?: number, repeat: number} = {type: LayoutType.Grid, yMargin: 0, xMargin: 0, repeat: 0};
     @observable _layoutPreview: boolean = true;
     @observable _layoutPreviewScale: number = 1;
 
@@ -48,6 +48,7 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
     @observable _indicatorY: number | undefined = undefined;
     @observable _display: boolean = false;
 
+    @observable _hoveredLayoutPreview: number | undefined = undefined;
     @observable _mouseX: number = -1;
     @observable _mouseY: number = -1;
     @observable _startPos?: {x: number, y: number};
@@ -68,7 +69,7 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
     @action setTemplateDocs = (docs: Doc[]) => {this._templateDocs = docs.map(doc => doc.annotationOn ? DocCast(doc.annotationOn):doc)};
 
     @computed get docsToRender() {
-        return NumListCast(this._dataViz?.layoutDoc.dataViz_selectedRows);
+        return this._selectedTemplate ? NumListCast(this._dataViz?.layoutDoc.dataViz_selectedRows) : [];
     }
 
     @computed get rowsCount(){
@@ -255,6 +256,8 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
         }
     }
 
+
+
     get layoutPreviewContents() {
         const docWidth = Number(this._selectedTemplate?._width);
         const docHeight = Number(this._selectedTemplate?._height);
@@ -298,6 +301,8 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
                     </div> : 
                     this.docsToRender.map(num => 
                         <div 
+                        onMouseEnter={() => this._dataViz?.setSpecialHighlightedRow(num)}
+                        onMouseLeave={() => this._dataViz?.setSpecialHighlightedRow(undefined)}
                         className='docCreatorMenu-layout-preview-item'
                         style={{
                             width: scaledDown(docWidth), 
@@ -348,7 +353,7 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
                         <div className="docCreatorMenu-option-title">{this._layout.type ? this._layout.type.toUpperCase() : 'Choose Layout'}</div>
                         <div className="docCreatorMenu-dropdown-content">
                             {layoutOption(LayoutType.Stacked)}
-                            {layoutOption(LayoutType.Grid, undefined, () => {this._layout.columns = Math.ceil(Math.sqrt(this.docsToRender.length))})}
+                            {layoutOption(LayoutType.Grid, undefined, () => {if (!this._layout.columns) this._layout.columns = Math.ceil(Math.sqrt(this.docsToRender.length))})}
                             {layoutOption(LayoutType.Row)}
                             {layoutOption(LayoutType.Column)}
                             {layoutOption(LayoutType.Custom, {borderBottom: `0px`})}
@@ -432,7 +437,10 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
                         >
                             <button 
                                 className='docCreatorMenu-menu-button'
-                                onPointerDown={e => this.setUpButtonClick(e, () => runInAction(() => this._menuContent = this._menuContent === 'templates' ? 'options' : 'templates'))}>
+                                onPointerDown={e => this.setUpButtonClick(e, () => runInAction(() => {
+                                    this._menuContent = this._menuContent === 'templates' ? 'options' : 'templates';
+                                    if (!this._layout.columns) this._layout.columns = Math.ceil(Math.sqrt(this.docsToRender.length));
+                                }))}>
                                 <FontAwesomeIcon icon={this._menuContent === 'templates' ? 'bars' : 'table-cells'}/>
                             </button>
                             <button 
@@ -442,7 +450,7 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
                                         clickEv.stopPropagation();
                                         if (!this._selectedTemplate) return;
                                         const templateInfo: DataVizTemplateInfo = {doc: this._selectedTemplate, layout: this._layout, referencePos: {x: this._pageX + 450, y: this._pageY}, columns: this.columnsCount};
-                                        
+
                                         this._dataViz?.createDocsFromTemplate(templateInfo);
                                     }, 'make docs')
                                 )