cell value parser for highlighting cells used in equation works; need to implement actual VU

5 files changed, 63 insertions, 14 deletions

diff --git a/src/client/views/EditableView.tsx b/src/client/views/EditableView.tsx
index c05812e1a..f8d6596d8 100644
--- a/src/client/views/EditableView.tsx
+++ b/src/client/views/EditableView.tsx
@@ -11,6 +11,7 @@ import { FieldView, FieldViewProps } from './nodes/FieldView';
 import { ObservableReactComponent } from './ObservableReactComponent';
 import { OverlayView } from './OverlayView';
 import { Padding } from 'browndash-components';
+import { SchemaFieldType } from './collections/collectionSchema/SchemaColumnHeader';
 
 export interface EditableProps {
     /**
@@ -56,7 +57,7 @@ export interface EditableProps {
     placeholder?: string;
     wrap?: string; // nowrap, pre-wrap, etc
 
-    schemaHeader?: boolean;
+    schemaFieldType?: SchemaFieldType;
     onClick?: () => void;
     updateAlt?: (newAlt: string) => void;
     updateSearch?: (value: string) => void;
@@ -71,19 +72,18 @@ export interface EditableProps {
 export class EditableView extends ObservableReactComponent<EditableProps> {
     private _ref = React.createRef<HTMLDivElement>();
     private _inputref: HTMLInputElement | HTMLTextAreaElement | null = null;
+    private _disposers: { [name: string]: IReactionDisposer } = {};
     _overlayDisposer?: () => void;
-    _editingDisposer?: IReactionDisposer;
+    _highlightsDisposer?: () => void;
     @observable _editing: boolean = false;
 
     constructor(props: EditableProps) {
         super(props);
         makeObservable(this);
-        this._editing = !!this._props.editing;
-        if (this._props.schemaHeader) this._editing = true;
     }
 
     componentDidMount(): void {
-        this._editingDisposer = reaction(
+        this._disposers.editing = reaction(
             () => this._editing,
             editing => {
                 if (editing) {
@@ -91,7 +91,7 @@ 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 });
-                        }
+                        } 
                     });
                 } else {
                     this._overlayDisposer?.();
@@ -114,7 +114,7 @@ export class EditableView extends ObservableReactComponent<EditableProps> {
 
     componentWillUnmount() {
         this._overlayDisposer?.();
-        this._editingDisposer?.();
+        this._disposers.editing?.();
         this._inputref?.value && this.finalizeEdit(this._inputref.value, false, true, false);
     }
 
@@ -287,7 +287,7 @@ export class EditableView extends ObservableReactComponent<EditableProps> {
     staticDisplay = () => {
         let toDisplay;
         const gval = this._props.GetValue()?.replace(/\n/g, '\\r\\n');
-        if (this._props.schemaHeader){
+        if (this._props.schemaFieldType === SchemaFieldType.Header){
             toDisplay = <input className="editableView-input"
             value={gval}
             placeholder='Add key'
diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
index affa70a62..4d959e42c 100644
--- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
+++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
@@ -39,6 +39,7 @@ import { listSpec } from '../../../../fields/Schema';
 import { GetEffectiveAcl } from '../../../../fields/util';
 import { ContextMenuProps } from '../../ContextMenuItem';
 import { truncate } from 'lodash';
+import { DocumentManager } from '../../../util/DocumentManager';
 
 const { SCHEMA_NEW_NODE_HEIGHT } = require('../../global/globalCssVariables.module.scss'); // prettier-ignore
 
@@ -481,6 +482,39 @@ export class CollectionSchemaView extends CollectionSubView() {
             cellEles.slice(-1)[0].style.borderBottom = edgeStyle;
         });
 
+    getCellElement = (doc: Doc, fieldKey: string) => {
+        const index = this.columnKeys.indexOf(fieldKey);
+        console.log(doc.title)
+        const cell = this._rowEles.get(doc).children[1].children[index];
+        return cell;
+    }
+
+    findCellRefs = (text: string) => {
+        const pattern = /(this|d(\d+))\.(\w+)/g;
+        interface Match { docRef: string; field: string; }
+
+        const matches: Match[] = [];
+        let match: RegExpExecArray | null;
+
+        while ((match = pattern.exec(text)) !== null) {
+            const docRef = match[1] === 'this' ? match[1] : match[2]; 
+        matches.push({ docRef, field: match[3] });
+        }
+
+        const cells: Array<any> = [];
+        matches.forEach((match: Match) => {
+            const {docRef, field} = match;
+            const doc = DocumentManager.Instance.DocumentViews[Number(docRef)].Document;
+            if (this.columnKeys.includes(field)) {cells.push(this.getCellElement(doc, field))}
+        })
+
+        console.log(cells);
+
+        return cells;
+    }
+
+
+
     @action
     addRowRef = (doc: Doc, ref: HTMLDivElement) => this._rowEles.set(doc, ref);
 
@@ -1012,22 +1046,26 @@ export class CollectionSchemaView extends CollectionSubView() {
         }
     };
 
-    displayedSubCollectionDocs = (doc: Doc) => {
+    subCollectionDocs = (doc: Doc, displayed: boolean) => {
         const childDocs = DocListCast(doc[Doc.LayoutFieldKey(doc)]);
-        const displayedCollections = childDocs.filter(d => d.type === 'collection' && d._childrenSharedWithSchema);
+        let collections: Array<Doc> = [];
+        if (displayed) collections = childDocs.filter(d => d.type === 'collection' && d._childrenSharedWithSchema);
+        else collections = childDocs.filter(d => d.type === 'collection' && !d._childrenSharedWithSchema);
         let toReturn: Doc[] = [...childDocs];
-        displayedCollections.forEach(d => toReturn = toReturn.concat(this.displayedSubCollectionDocs(d)));
+        collections.forEach(d => toReturn = toReturn.concat(this.subCollectionDocs(d, displayed)));
         return toReturn;
     }
-    
+
     @computed get docs() {
         let docsFromChildren: Doc[] = [];
+
         const displayedCollections = this.childDocs.filter(d => d.type === 'collection' && d._childrenSharedWithSchema);
         displayedCollections.forEach(d => {
-            let docsNotAlreadyDisplayed = this.displayedSubCollectionDocs(d).filter(dc => !this._docs.includes(dc));
+            let docsNotAlreadyDisplayed = this.subCollectionDocs(d, true).filter(dc => !this._docs.includes(dc));
             docsFromChildren = docsFromChildren.concat(docsNotAlreadyDisplayed);
         });
         let docs = this._docs.concat(docsFromChildren);
+
         return docs;
     }
     
diff --git a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
index 0fe0033d4..f0debaec2 100644
--- a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
@@ -24,6 +24,10 @@ import { FInfo } from '../../../documents/Documents';
 import { ColumnType } from '../../../../fields/SchemaHeaderField';
 import { IconButton, Size } from 'browndash-components';
 
+export enum SchemaFieldType {
+    Header, Cell
+}
+
 export interface SchemaColumnHeaderProps {
     Document: Doc;
     autoFocus?: boolean;
@@ -131,7 +135,7 @@ export class SchemaColumnHeader extends ObservableReactComponent<SchemaColumnHea
                 placeholder={'Add key'}
                 updateAlt={this.updateAlt} // alternate title to display
                 updateSearch={this.updateKeyDropdown}
-                schemaHeader={true} 
+                schemaFieldType={SchemaFieldType.Header} 
                 GetValue={() => {
                     if (SchemaColumnHeader.isDefaultField(this.fieldKey)) return '';
                     else if (this._altTitle) return this._altTitle;
diff --git a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
index 107e29754..f6d99b47e 100644
--- a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
@@ -121,6 +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);
     render() {
         return (
             <div
@@ -163,6 +164,7 @@ export class SchemaRowBox extends ViewBoxBaseComponent<SchemaRowBoxProps>() {
                 <div className="row-cells">
                     {this.schemaView?.columnKeys?.map((key, index) => (
                         <SchemaTableCell
+                            getCellRefs={this.findCellRefs}
                             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 c8bd48019..51555fa61 100644
--- a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
@@ -60,6 +60,7 @@ export interface SchemaTableCellProps {
     rootSelected?: () => boolean;
     rowSelected: () => boolean;
     isolatedSelection: [boolean, boolean];
+    getCellRefs: (text: string) => any;
 }
 
 function selectedCell(props: SchemaTableCellProps) {
@@ -72,6 +73,9 @@ function selectedCell(props: SchemaTableCellProps) {
 
 @observer
 export class SchemaTableCell extends ObservableReactComponent<SchemaTableCellProps> {
+
+    @observable _highlighted: boolean = false;
+
     constructor(props: SchemaTableCellProps) {
         super(props);
         makeObservable(this);
@@ -186,6 +190,7 @@ 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')}