highlighting rows based on layoutpreview hover

5 files changed, 45 insertions, 12 deletions

diff --git a/src/client/views/nodes/DataVizBox/DataVizBox.tsx b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
index e03da8e7b..765642891 100644
--- a/src/client/views/nodes/DataVizBox/DataVizBox.tsx
+++ b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
@@ -38,6 +38,7 @@ import { CollectionFreeFormView } from '../../collections/collectionFreeForm';
 import { PrefetchProxy } from '../../../../fields/Proxy';
 import { AclAdmin, AclAugment, AclEdit } from '../../../../fields/DocSymbols';
 import { template } from 'lodash';
+import { data } from 'jquery';
 
 export enum DataVizView {
     TABLE = 'table',
@@ -57,6 +58,7 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
     crop: ((region: Doc | undefined, addCrop?: boolean) => Doc | undefined) | undefined;
     @observable _marqueeing: number[] | undefined = undefined;
     @observable _savedAnnotations = new ObservableMap<number, HTMLDivElement[]>();
+    @observable _specialHighlightedRow: number | undefined = undefined;
 
     constructor(props: FieldViewProps) {
         super(props);
@@ -131,6 +133,10 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         this.layoutDoc._dataViz_titleCol = titleCol;
     };
 
+    @action setSpecialHighlightedRow = (row: number | undefined) => {
+        this._specialHighlightedRow = row;
+    }
+
     @action // pinned / linked anchor doc includes selected rows, graph titles, and graph colors
     restoreView = (data: Doc) => {
         // const changedView = data.config_dataViz && this.dataVizView !== data.config_dataViz && (this.layoutDoc._dataViz = data.config_dataViz);
@@ -366,7 +372,7 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         };
         if (!this.records.length) return 'no data/visualization';
         switch (this.dataVizView) {
-            case DataVizView.TABLE:     return <TableBox  {...sharedProps} docView={this.DocumentView} selectAxes={this.selectAxes} selectTitleCol={this.selectTitleCol}/>;
+            case DataVizView.TABLE:     return <TableBox  {...sharedProps} specHighlightedRow={this._specialHighlightedRow} docView={this.DocumentView} selectAxes={this.selectAxes} selectTitleCol={this.selectTitleCol}/>;
             case DataVizView.LINECHART: return <LineChart {...sharedProps} dataDoc={this.dataDoc} fieldKey={this.fieldKey} ref={r => {this._vizRenderer = r ?? undefined;}} vizBox={this} />;
             case DataVizView.HISTOGRAM: return <Histogram {...sharedProps} dataDoc={this.dataDoc} fieldKey={this.fieldKey} ref={r => {this._vizRenderer = r ?? undefined;}} />;
             case DataVizView.PIECHART:  return <PieChart  {...sharedProps} dataDoc={this.dataDoc} fieldKey={this.fieldKey} ref={r => {this._vizRenderer = r ?? undefined;}} 
@@ -515,7 +521,6 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
             while (i < columns && docsChanged < docs.length){ 
                 docs[docsChanged].x = curX;
                 docs[docsChanged].y = curY;
-                console.log('x: ' + docs[i].x + ' y: ' + docs[i].y);
                 curX += templWidth + xGap;
                 ++docsChanged;
                 ++i;
@@ -527,6 +532,16 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         }
     }
 
+    // applyImagesTo = (doc: Doc, cols: string[]) => {
+    //     const childDocs = DocListCast(doc[Doc.LayoutFieldKey(doc)]);
+    //     const imageFields = childDocs.filter(doc => doc.type === 'image');
+    //     const imageToKey: Map<Doc, string> = new Map();
+    //     imageFields.forEach(img => cols.forEach(col => {if (img[col]) imageToKey.set(img, col)}));
+
+    //     imageFields.forEach(doc => doc['data'] = String(doc[String(imageToKey.get(doc))]).replace(/"/g, ''));
+
+    // }
+
     @action
     createDocsFromTemplate = (templateInfo: DataVizTemplateInfo) => {
         if (!templateInfo.doc) return;
@@ -545,6 +560,7 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
             const targetKey = StrCast(templateInfo.doc!.layout_fieldKey, 'layout');
             const applied = this.ApplyTemplateTo(templateInfo.doc!, target, targetKey, templateInfo.doc!.title + `${row}`);
             target.layout_fieldKey = targetKey;
+            //this.applyImagesTo(target, fields);
             return applied;
         });
 
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss b/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
index 8b17f1ed4..328cbbaf1 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
@@ -81,8 +81,9 @@
     grid-auto-rows: 141px;
     overflow-y: scroll;
     margin: 5px;
+    margin-top: 0px;
     width: calc(100% - 10px);
-    height: calc(100% - 51px);
+    height: calc(100% - 45px);
     border: 1px solid rgb(180, 180, 180);
     border-radius: 5px;
 
@@ -240,8 +241,9 @@
     align-items: center;
     overflow-y: scroll;
     margin: 5px;
+    margin-top: 0px;
     width: calc(100% - 10px);
-    height: calc(100% - 51px);
+    height: calc(100% - 45px);
     border: 1px solid rgb(180, 180, 180);
     border-radius: 5px;
 
@@ -329,6 +331,11 @@
                 align-items: center;
                 border-radius: 3px;
                 border: solid 1px lightblue;
+
+                &:hover {
+                    border: solid 2px rgb(68, 153, 233);
+                    z-index: 2;
+                }
             }
         }
 
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')
                                 )
diff --git a/src/client/views/nodes/DataVizBox/components/TableBox.tsx b/src/client/views/nodes/DataVizBox/components/TableBox.tsx
index a1deb1625..d484bf5e8 100644
--- a/src/client/views/nodes/DataVizBox/components/TableBox.tsx
+++ b/src/client/views/nodes/DataVizBox/components/TableBox.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable jsx-a11y/no-noninteractive-tabindex */
 /* eslint-disable jsx-a11y/no-static-element-interactions */
-import { Button, Type } from 'browndash-components';
+import { Button, Colors, Type } from 'browndash-components';
 import { IReactionDisposer, action, computed, makeObservable, observable, reaction, runInAction } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
@@ -37,6 +37,7 @@ interface TableBoxProps {
         left: number;
     };
     docView?: () => DocumentView | undefined;
+    specHighlightedRow: number | undefined;
 }
 
 @observer
@@ -440,7 +441,8 @@ export class TableBox extends ObservableReactComponent<TableBoxProps> {
                                             className={`tableBox-row ${this.columns[0]}`}
                                             onClick={e => this.tableRowClick(e, rowId)}
                                             style={{
-                                                background: NumListCast(this._props.layoutDoc.dataViz_highlitedRows).includes(rowId) ? 'lightYellow' : NumListCast(this._props.layoutDoc.dataViz_selectedRows).includes(rowId) ? 'lightgrey' : '',
+                                                background: rowId === this._props.specHighlightedRow ? 'lightblue' : NumListCast(this._props.layoutDoc.dataViz_highlitedRows).includes(rowId) ? 'lightYellow' : NumListCast(this._props.layoutDoc.dataViz_selectedRows).includes(rowId) ? 'lightgrey' : '',
+                                                border: rowId === this._props.specHighlightedRow ? `solid 3px ${Colors.MEDIUM_BLUE}` : ''
                                             }}>
                                             {this.columns.map(col => {
                                                 let colSelected = false;
diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx
index e4b3a1b9b..b7943f503 100644
--- a/src/client/views/nodes/ImageBox.tsx
+++ b/src/client/views/nodes/ImageBox.tsx
@@ -341,7 +341,7 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
     }
 
     @computed get paths() {
-        const field = Cast(this.dataDoc[this.fieldKey], ImageField, null); // retrieve the primary image URL that is being rendered from the data doc
+        const field = this.dataDoc[this.fieldKey] instanceof ImageField ? Cast(this.dataDoc[this.fieldKey], ImageField, null) : new ImageField(String(this.dataDoc[this.fieldKey])); // retrieve the primary image URL that is being rendered from the data doc
         const alts = DocListCast(this.dataDoc[this.fieldKey + '_alternates']); // retrieve alternate documents that may be rendered as alternate images
         const defaultUrl = new URL(ClientUtils.prepend('/assets/unknown-file-icon-hi.png'));
         const altpaths =