cell highlighting from equations WORKS!

1 files changed, 28 insertions, 2 deletions

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);