cell highlighting from equations WORKS!

4 files changed, 36 insertions, 7 deletions

diff --git a/src/client/views/EditableView.tsx b/src/client/views/EditableView.tsx
index f8d6596d8..14af8febb 100644
--- a/src/client/views/EditableView.tsx
+++ b/src/client/views/EditableView.tsx
@@ -61,6 +61,7 @@ export interface EditableProps {
     onClick?: () => void;
     updateAlt?: (newAlt: string) => void;
     updateSearch?: (value: string) => void;
+    highlightCells?: (text: string) => void;
 }
 
 /**
@@ -74,7 +75,6 @@ export class EditableView extends ObservableReactComponent<EditableProps> {
     private _inputref: HTMLInputElement | HTMLTextAreaElement | null = null;
     private _disposers: { [name: string]: IReactionDisposer } = {};
     _overlayDisposer?: () => void;
-    _highlightsDisposer?: () => void;
     @observable _editing: boolean = false;
 
     constructor(props: EditableProps) {
@@ -91,11 +91,13 @@ export class EditableView extends ObservableReactComponent<EditableProps> {
                         if (this._inputref?.value.startsWith('=') || this._inputref?.value.startsWith(':=')) {
                             this._overlayDisposer?.();
                             this._overlayDisposer = OverlayView.Instance.addElement(<DocumentIconContainer />, { x: 0, y: 0 });
+                            this._props.highlightCells?.(this._props.GetValue() ?? '');
                         } 
                     });
                 } else {
                     this._overlayDisposer?.();
                     this._overlayDisposer = undefined;
+                    this._props.highlightCells?.('');
                 }
             },
             { fireImmediately: true }
@@ -127,6 +129,7 @@ export class EditableView extends ObservableReactComponent<EditableProps> {
             this._overlayDisposer = OverlayView.Instance.addElement(<DocumentIconContainer />, { x: 0, y: 0 });
         }
         this._props.updateSearch && this._props.updateSearch(targVal);
+        this._props.highlightCells?.(targVal);
     };
 
     @action
diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
index 4d959e42c..4fc89488d 100644
--- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
+++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
@@ -40,6 +40,7 @@ import { GetEffectiveAcl } from '../../../../fields/util';
 import { ContextMenuProps } from '../../ContextMenuItem';
 import { truncate } from 'lodash';
 import { DocumentManager } from '../../../util/DocumentManager';
+import { TbHemispherePlus } from 'react-icons/tb';
 
 const { SCHEMA_NEW_NODE_HEIGHT } = require('../../global/globalCssVariables.module.scss'); // prettier-ignore
 
@@ -99,6 +100,8 @@ export class CollectionSchemaView extends CollectionSubView() {
     @observable _colBeingDragged: boolean = false;
     @observable _colKeysFiltered: boolean = false;
     @observable _cellTags: ObservableMap = new ObservableMap<Doc, Array<string>>();
+    @observable _highlightedCells: Array<HTMLDivElement> = [];
+    @observable _cellHighlightColors: ObservableMap = new ObservableMap<HTMLDivElement, string>();
     @observable _docs: Doc[] = [];
 
     // target HTMLelement portal for showing a popup menu to edit cell values.
@@ -508,12 +511,35 @@ export class CollectionSchemaView extends CollectionSubView() {
             if (this.columnKeys.includes(field)) {cells.push(this.getCellElement(doc, field))}
         })
 
-        console.log(cells);
-
         return cells;
     }
 
+    removeCellHighlights = () => {
+        this._highlightedCells.forEach(cell => cell.style.border = '');
+        this._highlightedCells = [];
+    }
+
+    highlightCells = (text: string) => {
+        this.removeCellHighlights();
 
+        const randNum = (): number => {return Math.floor(Math.random() * (255 - 1));}
+        const randomRGBColor = (): string => {
+            const r = randNum(); const g = randNum(); const b = randNum(); // prettier-ignore
+            return `rgb(${r}, ${g}, ${b})`;
+        }
+
+        const cellsToHighlight = this.findCellRefs(text);
+        this._highlightedCells = [...cellsToHighlight];
+        this._highlightedCells.forEach(cell => {
+            if (!this._cellHighlightColors.has(cell)) {this._cellHighlightColors.set(cell, `solid 2px ${randomRGBColor()}`)}
+            cell.style.border = this._cellHighlightColors.get(cell);
+        });
+        // const cellsToRemove = [];
+        // this._highlightedCells.forEach(cell => !cellsToHighlight.includes(cell) && cellsToRemove.push(cell));
+        // this._highlightedCells = this._highlightedCells.filter(cell => cellsToHighlight.includes(cell));
+        // const cellsToAdd = cellsToHighlight.filter(cell => !this._highlightedCells.includes(cell));
+        // this._highlightedCells = this._highlightedCells.concat(cellsToAdd);
+    }
 
     @action
     addRowRef = (doc: Doc, ref: HTMLDivElement) => this._rowEles.set(doc, ref);
diff --git a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
index f6d99b47e..4902a49ff 100644
--- a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
@@ -121,7 +121,7 @@ export class SchemaRowBox extends ViewBoxBaseComponent<SchemaRowBoxProps>() {
     setColumnValues = (field: any, value: any) => this.schemaView?.setCellValues(field, value) ?? false;
     columnWidth = computedFn((index: number) => () => this.schemaView?.displayColumnWidths[index] ?? CollectionSchemaView._minColWidth);
     computeRowIndex = () => this.schemaView?.rowIndex(this.Document);
-    findCellRefs = (text: string) => this.schemaView?.findCellRefs(text);
+    highlightCells = (text: string) => this.schemaView?.highlightCells(text);
     render() {
         return (
             <div
@@ -164,7 +164,7 @@ export class SchemaRowBox extends ViewBoxBaseComponent<SchemaRowBoxProps>() {
                 <div className="row-cells">
                     {this.schemaView?.columnKeys?.map((key, index) => (
                         <SchemaTableCell
-                            getCellRefs={this.findCellRefs}
+                            highlightCells={this.highlightCells}
                             isolatedSelection={this.isolatedSelection}
                             key={key}
                             rowSelected={this._props.isSelected}
diff --git a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
index 51555fa61..50ec2f978 100644
--- a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
@@ -60,7 +60,7 @@ export interface SchemaTableCellProps {
     rootSelected?: () => boolean;
     rowSelected: () => boolean;
     isolatedSelection: [boolean, boolean];
-    getCellRefs: (text: string) => any;
+    highlightCells: (text: string) => void;
 }
 
 function selectedCell(props: SchemaTableCellProps) {
@@ -175,6 +175,7 @@ export class SchemaTableCell extends ObservableReactComponent<SchemaTableCellPro
                     pointerEvents: this.lockedInteraction ? 'none' : pointerEvents,
                 }}>
                 <EditableView
+                    highlightCells={this._props.highlightCells}
                     ref={r => selectedCell(this._props) && this._props.autoFocus && r?.setIsFocused(true)}
                     oneLine={this._props.oneLine}
                     allowCRs={this._props.allowCRs}
@@ -190,7 +191,6 @@ export class SchemaTableCell extends ObservableReactComponent<SchemaTableCellPro
                         }
                         const hasNoLayout =  Doc.IsDataProto(fieldProps.Document) ? true : undefined; // the "delegate" is a a data document so never write to it's proto
                         const ret = Doc.SetField(fieldProps.Document, this._props.fieldKey.replace(/^_/, ''), value, hasNoLayout);
-                        this._props.getCellRefs(value);
                         this._props.finishEdit?.();
                         return ret;
                     }, 'edit schema cell')}