cyclic preset colors for eqhighlights

1 files changed, 24 insertions, 18 deletions

diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
index e4ffc5b13..d3259d42e 100644
--- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
+++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
@@ -68,10 +68,26 @@ export class CollectionSchemaView extends CollectionSubView() {
     private _tableContentRef: HTMLDivElement | null = null;
     private _menuTarget = React.createRef<HTMLDivElement>();
     private _headerRefs: SchemaColumnHeader[] = [];
+    private _eqHighlightColors: Array<[{r: number, g: number, b: number}, {r: number, g: number, b: number}]> = [];
 
     constructor(props: any) {
         super(props);
         makeObservable(this);
+        const lightenedColor = (r: number, g: number, b:number) => {
+            const lightened = ClientUtils.lightenRGB(r, g, b, 165);
+            return {r: lightened[0], g: lightened[1], b: lightened[2]}
+        }
+        const colors = (r: number, g: number, b: number): [any, any] => {return [{r: r, g: g, b: b}, lightenedColor(r, g, b)]}
+        this._eqHighlightColors.push(colors(70, 150, 50));
+        this._eqHighlightColors.push(colors(180, 70, 20));
+        this._eqHighlightColors.push(colors(70, 50, 150));
+        this._eqHighlightColors.push(colors(0, 140, 140));
+        this._eqHighlightColors.push(colors(140, 30, 110));
+        this._eqHighlightColors.push(colors(20, 50, 200));
+        this._eqHighlightColors.push(colors(210, 30, 40));
+        this._eqHighlightColors.push(colors(120, 130, 30));
+        this._eqHighlightColors.push(colors(50, 150, 70));
+        this._eqHighlightColors.push(colors(10, 90, 180));
     }
 
     static _rowHeight: number = 50;
@@ -607,32 +623,22 @@ export class CollectionSchemaView extends CollectionSubView() {
     highlightCells = (text: string) => {
         this.removeCellHighlights();
 
-        const randomRGBColor = (): string[] => {
-            const brightness = 450;
-            const r = Math.floor(Math.random() * 256);
-            const g = Math.floor(Math.random() * Math.min(256, brightness - r));
-            const b = Math.floor(brightness - r - g);
-        
-            const lightenedRGB =  ClientUtils.lightenRGB(r, g, b, 65);
-            const rL = lightenedRGB[0]; const gL = lightenedRGB[1]; const bL = lightenedRGB[2]; // prettier-ignore
-            const bgdRGB = {rL, gL, bL};
-
-            return new Array<string>(`rgb(${r}, ${g}, ${b})`, `rgb(${bgdRGB.rL}, ${bgdRGB.gL}, ${bgdRGB.bL})`);
-        }
-
         const cellsToHighlight = this.findCellRefs(text);
+        console.log(cellsToHighlight);
         this._highlightedCellsInfo = [...cellsToHighlight];
-        this._highlightedCellsInfo.forEach(info => {
-            const color = randomRGBColor();
+
+        for (let i = 0; i < this._highlightedCellsInfo.length; ++i) {
+            const info = this._highlightedCellsInfo[i];
+            const color = this._eqHighlightColors[i % 10];
+            const colorStrings = [`solid 2px rgb(${color[0].r}, ${color[0].g}, ${color[0].b})`, `rgb(${color[1].r}, ${color[1].g}, ${color[1].b})`];
             const doc = info[0]; 
             const field = info[1];
             const key = `${doc[Id]}_${field}`;
             const cell = this.getCellElement(doc, field);
-            if (!this._cellHighlightColors.has(key)) {this._cellHighlightColors.set(key, new Array<string>(`solid 2px ${color[0]}`, color[1]))}
+            if (!this._cellHighlightColors.has(key)) {this._cellHighlightColors.set(key, [colorStrings[0], colorStrings[1]])}
             cell.style.border = this._cellHighlightColors.get(key)[0];
             cell.style.backgroundColor = this._cellHighlightColors.get(key)[1];
-        });
-
+        }
     }
 
     @action