Merge branch 'master' into aarav_edit

1 files changed, 19 insertions, 27 deletions

diff --git a/src/client/views/nodes/KeyValuePair.tsx b/src/client/views/nodes/KeyValuePair.tsx
index 93f5231cb..c9e0aea5a 100644
--- a/src/client/views/nodes/KeyValuePair.tsx
+++ b/src/client/views/nodes/KeyValuePair.tsx
@@ -16,6 +16,7 @@ import { DefaultStyleProvider, returnEmptyDocViewList } from '../StyleProvider';
 import './KeyValueBox.scss';
 import './KeyValuePair.scss';
 import { OpenWhere } from './OpenWhere';
+import { DocLayout } from '../../../fields/DocSymbols';
 
 // Represents one row in a key value plane
 
@@ -60,31 +61,23 @@ export class KeyValuePair extends ObservableReactComponent<KeyValuePairProps> {
     };
 
     render() {
-        // let fieldKey = Object.keys(props.Document).indexOf(props.fieldKey) !== -1 ? props.fieldKey : "(" + props.fieldKey + ")";
-        const layoutField = this._props.keyName.startsWith('_');
-        let doc = layoutField ? Doc.Layout(this._props.doc) : this._props.doc;
-        let protoCount = doc !== this._props.doc && !layoutField ? 1 : 0;
-        while (doc) {
-            if (Object.keys(doc).includes(this._props.keyName.replace(/^_/, ''))) {
-                break;
-            }
+        let doc = this._props.keyName.startsWith('_') ? this._props.doc[DocLayout] : this._props.doc;
+        const layoutField = doc !== this._props.doc;
+        const key = layoutField ? this._props.keyName.replace(/^_/, '') : this._props.keyName;
+        let protoCount = 0;
+        while (doc && !Object.keys(doc).includes(key)) {
             protoCount++;
             doc = DocCast(doc.proto);
         }
-        const parenCount = Math.max(0, protoCount);
-        const keyStyle = protoCount === 0 && doc === this._props.doc ? 'black' : 'blue';
-
+        const parenCount = Math.max(0, protoCount - 1);
+        const keyStyle = layoutField ? 'red' : protoCount === 0 ? 'black' : 'blue';
         const hover = { transition: '0.3s ease opacity', opacity: this.isPointerOver || this.isChecked ? 1 : 0 };
-
+        const docOpts = Object.entries(new DocumentOptions());
         return (
             <tr
-                className={this._props.rowStyle}
-                onPointerEnter={action(() => {
-                    this.isPointerOver = true;
-                })}
-                onPointerLeave={action(() => {
-                    this.isPointerOver = false;
-                })}>
+                className={this._props.rowStyle} //
+                onPointerEnter={action(() => (this.isPointerOver = true))}
+                onPointerLeave={action(() => (this.isPointerOver = false))}>
                 <td className="keyValuePair-td-key" style={{ width: `${this._props.keyWidth}%` }}>
                     <div className="keyValuePair-td-key-container">
                         <button
@@ -92,17 +85,16 @@ export class KeyValuePair extends ObservableReactComponent<KeyValuePairProps> {
                             style={hover}
                             className="keyValuePair-td-key-delete"
                             onClick={undoable(() => {
-                                if (Object.keys(this._props.doc).indexOf(this._props.keyName) !== -1) {
-                                    delete this._props.doc[this._props.keyName];
-                                } else delete DocCast(this._props.doc.proto)?.[this._props.keyName];
+                                delete (Object.keys(doc).indexOf(key) !== -1 ? doc : DocCast(this._props.doc.proto))[key];
                             }, 'set key value')}>
                             X
                         </button>
                         <input className="keyValuePair-td-key-check" type="checkbox" style={hover} onChange={this.handleCheck} ref={this.checkbox} />
-                        <Tooltip title={Object.entries(new DocumentOptions()).find((pair: [string, FInfo]) => pair[0].replace(/^_/, '') === this._props.keyName)?.[1].description ?? ''}>
-                            <div className="keyValuePair-keyField" style={{ marginLeft: 20 * (this._props.keyName.replace(/__/g, '').replace(/^_/, '').match(/_/g)?.length || 0), color: keyStyle }}>
-                                {(layoutField ? '_' : '$').repeat(parenCount)}
-                                {(keyStyle === 'blue' && !layoutField && !parenCount ? '$' : '') + this._props.keyName}
+                        <Tooltip title={(docOpts.find(([k]) => k.replace(/^_/, '') === key)?.[1] as FInfo)?.description ?? ''}>
+                            <div className="keyValuePair-keyField" style={{ marginLeft: 20 * (key.match(/_/g)?.length || 0), color: keyStyle }}>
+                                {'('.repeat(parenCount)}
+                                {(keyStyle === 'black' ? '' : layoutField ? '_' : '$') + key}
+                                {')'.repeat(parenCount)}
                             </div>
                         </Tooltip>
                     </div>
@@ -133,7 +125,7 @@ export class KeyValuePair extends ObservableReactComponent<KeyValuePairProps> {
                                 pinToPres: returnZero,
                             }}
                             GetValue={() => Field.toKeyValueString(this._props.doc, this._props.keyName)}
-                            SetValue={(value: string) => Doc.SetField(this._props.doc, this._props.keyName, value)}
+                            SetValue={value => Doc.SetField(this._props.doc, this._props.keyName, value)}
                         />
                     </div>
                 </td>