forced 'hidden' documents to appear in schema. added colorizing/underlining to schema cells to indicate if value is on layout, data, or proto

2 files changed, 21 insertions, 2 deletions

diff --git a/src/client/views/StyleProvider.tsx b/src/client/views/StyleProvider.tsx
index 5f16e0ebd..c810cb155 100644
--- a/src/client/views/StyleProvider.tsx
+++ b/src/client/views/StyleProvider.tsx
@@ -24,6 +24,7 @@ import { KeyValueBox } from './nodes/KeyValueBox';
 import { SliderBox } from './nodes/SliderBox';
 import './StyleProvider.scss';
 import React = require('react');
+import { SchemaRowBox } from './collections/collectionSchema/SchemaRowBox';
 
 export enum StyleProp {
     TreeViewIcon = 'treeViewIcon',
@@ -173,7 +174,7 @@ export function DefaultStyleProvider(doc: Opt<Doc>, props: Opt<DocumentViewProps
             if (!backColor) return undefined;
             return lightOrDark(backColor);
         case StyleProp.Hidden:
-            return props?.LayoutTemplateString?.includes(KeyValueBox.name) ? false : BoolCast(doc?.hidden);
+            return props?.LayoutTemplateString?.includes(KeyValueBox.name) || props?.LayoutTemplateString?.includes(SchemaRowBox.name) ? false : BoolCast(doc?.hidden);
         case StyleProp.BorderRounding:
             return StrCast(doc?.[fieldKey + 'borderRounding'], StrCast(doc?.borderRounding, doc?._viewType === CollectionViewType.Pile ? '50%' : ''));
         case StyleProp.TitleHeight:
diff --git a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
index 686b21283..bbf8e2bbf 100644
--- a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
@@ -90,9 +90,27 @@ export class SchemaTableCell extends React.Component<SchemaTableCellProps> {
             addDocTab: returnFalse,
             pinToPres: returnZero,
         };
+        let protoCount = 0;
+        let doc: Doc | undefined = this.props.Document;
+        while (doc) {
+            if (Object.keys(doc).includes(this.props.fieldKey)) {
+                break;
+            }
+            protoCount++;
+            doc = doc.proto;
+        }
+        const parenCount = Math.max(0, protoCount - 1);
+        const color = protoCount === 0 ? 'black' : 'blue';
 
         return (
-            <div className="schemacell-edit-wrapper" style={{ cursor: !this.readOnly ? 'text' : 'default', pointerEvents: !this.readOnly && this.props.isRowActive() ? 'all' : 'none' }}>
+            <div
+                className="schemacell-edit-wrapper"
+                style={{
+                    color,
+                    textDecoration: parenCount ? 'underline' : undefined,
+                    cursor: !this.readOnly ? 'text' : 'default',
+                    pointerEvents: !this.readOnly && this.props.isRowActive() ? 'all' : 'none',
+                }}>
                 <EditableView
                     ref={ref => (this._editorRef = ref)}
                     contents={<FieldView {...props} />}