Merge branch 'fieldSyntaxUpdate' into aarav_edit

1 files changed, 9 insertions, 9 deletions

diff --git a/src/client/views/nodes/KeyValuePair.tsx b/src/client/views/nodes/KeyValuePair.tsx
index 85aff04c3..93f5231cb 100644
--- a/src/client/views/nodes/KeyValuePair.tsx
+++ b/src/client/views/nodes/KeyValuePair.tsx
@@ -61,17 +61,18 @@ export class KeyValuePair extends ObservableReactComponent<KeyValuePairProps> {
 
     render() {
         // let fieldKey = Object.keys(props.Document).indexOf(props.fieldKey) !== -1 ? props.fieldKey : "(" + props.fieldKey + ")";
-        let protoCount = 0;
-        let { doc } = this._props;
+        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)) {
+            if (Object.keys(doc).includes(this._props.keyName.replace(/^_/, ''))) {
                 break;
             }
             protoCount++;
             doc = DocCast(doc.proto);
         }
-        const parenCount = Math.max(0, protoCount - 1);
-        const keyStyle = protoCount === 0 ? 'black' : 'blue';
+        const parenCount = Math.max(0, protoCount);
+        const keyStyle = protoCount === 0 && doc === this._props.doc ? 'black' : 'blue';
 
         const hover = { transition: '0.3s ease opacity', opacity: this.isPointerOver || this.isChecked ? 1 : 0 };
 
@@ -99,10 +100,9 @@ export class KeyValuePair extends ObservableReactComponent<KeyValuePairProps> {
                         </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, '').match(/_/g)?.length || 0), color: keyStyle }}>
-                                {'('.repeat(parenCount)}
-                                {this._props.keyName}
-                                {')'.repeat(parenCount)}
+                            <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}
                             </div>
                         </Tooltip>
                     </div>