fixed pivot viewer to not have multiple columns with the same value. fixed imagebox to show fade views. cleaned up makeMetadataFieldTemplate

3 files changed, 42 insertions, 40 deletions

diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLayoutEngines.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLayoutEngines.tsx
index 5924c3afb..5c6336248 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLayoutEngines.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLayoutEngines.tsx
@@ -8,7 +8,6 @@ import { emptyFunction } from "../../../../Utils";
 import React = require("react");
 import { ObservableMap, runInAction } from "mobx";
 import { Id, ToString } from "../../../../new_fields/FieldSymbols";
-import { DateField } from "../../../../new_fields/DateField";
 import { ObjectField } from "../../../../new_fields/ObjectField";
 import { RefField } from "../../../../new_fields/RefField";
 
@@ -47,8 +46,9 @@ export function computePivotLayout(poolData: ObservableMap<string, any>, pivotDo
     const pivotAxisWidth = NumCast(pivotDoc.pivotWidth, 200);
     const pivotColumnGroups = new Map<FieldResult<Field>, Doc[]>();
 
+    const pivotFieldKey = toLabel(pivotDoc.pivotField);
     for (const doc of childDocs) {
-        const val = doc[StrCast(pivotDoc.pivotField, "title")];
+        const val = Field.toString(doc[pivotFieldKey] as Field);
         if (val) {
             !pivotColumnGroups.get(val) && pivotColumnGroups.set(val, []);
             pivotColumnGroups.get(val)!.push(doc);
diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx
index 634555012..4b2a1c1cb 100644
--- a/src/client/views/nodes/ImageBox.tsx
+++ b/src/client/views/nodes/ImageBox.tsx
@@ -319,7 +319,7 @@ export class ImageBox extends DocAnnotatableComponent<FieldViewProps, ImageDocum
                     width={nativeWidth}
                     ref={this._imgRef}
                     onError={this.onError} />
-                {fadepath === srcpath ? (null) : <div className="imageBox-fadeBlocker" style={{ width: nativeWidth, height: nativeWidth / srcaspect }}>
+                {fadepath === srcpath ? (null) : <div className="imageBox-fadeBlocker">
                     <img className="imageBox-fadeaway"
                         key={"fadeaway" + this._smallRetryCount + (this._mediumRetryCount << 4) + (this._largeRetryCount << 8)} // force cache to update on retrys
                         src={fadepath}
diff --git a/src/new_fields/Doc.ts b/src/new_fields/Doc.ts
index 50dc02e57..674c7cc25 100644
--- a/src/new_fields/Doc.ts
+++ b/src/new_fields/Doc.ts
@@ -46,7 +46,7 @@ export namespace Field {
         } else if (field instanceof RefField) {
             return field[ToString]();
         }
-        return "-invalid field-";
+        return "(null)";
     }
     export function IsField(field: any): field is Field;
     export function IsField(field: any, includeUndefined: true): field is Field | undefined;
@@ -601,42 +601,44 @@ export namespace Doc {
         return target;
     }
 
-    export function MakeMetadataFieldTemplate(fieldTemplate: Doc, templateDataDoc: Doc, suppressTitle: boolean = false): boolean {
-        // move data doc fields to layout doc as needed (nativeWidth/nativeHeight, data, ??)
-        const metadataFieldName = StrCast(fieldTemplate.title).replace(/^-/, "");
-        let fieldLayoutDoc = fieldTemplate;
-        if (fieldTemplate.layout instanceof Doc) {
-            fieldLayoutDoc = Doc.MakeDelegate(fieldTemplate.layout);
-        }
-        const fieldLayoutKey = StrCast(Doc.LayoutField(fieldLayoutDoc))?.split("'")[1];
-        const fieldLayoutExt = fieldLayoutKey && Doc.MakeDelegate(fieldTemplate[fieldLayoutKey + "_ext"] as Doc);
-
-        fieldTemplate.templateField = metadataFieldName;
-        fieldTemplate.title = metadataFieldName;
-        fieldTemplate.isTemplateField = true;
-        /* move certain layout properties from the original data doc to the template layout to avoid
-           inheriting them from the template's data doc which may also define these fields for its own use.
-        */
-        fieldTemplate.ignoreAspect = fieldTemplate.ignoreAspect === undefined ? undefined : BoolCast(fieldTemplate.ignoreAspect);
-        fieldTemplate.singleColumn = BoolCast(fieldTemplate.singleColumn);
-        fieldTemplate.nativeWidth = Cast(fieldTemplate.nativeWidth, "number");
-        fieldTemplate.nativeHeight = Cast(fieldTemplate.nativeHeight, "number");
-        fieldTemplate.type = fieldTemplate.type;
-        fieldTemplate.panX = 0;
-        fieldTemplate.panY = 0;
-        fieldTemplate.scale = 1;
-        fieldTemplate.showTitle = suppressTitle ? undefined : "title";
-        const data = fieldTemplate.data;
-        // setTimeout(action(() => {
-        !templateDataDoc[metadataFieldName] && data instanceof ObjectField && (Doc.GetProto(templateDataDoc)[metadataFieldName] = ObjectField.MakeCopy(data));
-        const layout = StrCast(fieldLayoutDoc.layout).replace(/fieldKey={'[^']*'}/, `fieldKey={'${metadataFieldName}'}`);
-        const layoutDelegate = Doc.Layout(fieldTemplate);
-        layoutDelegate[metadataFieldName + "_ext"] = fieldLayoutExt;
-        layoutDelegate.layout = layout;
-        fieldTemplate.layout = layoutDelegate !== fieldTemplate ? layoutDelegate : layout;
-        if (fieldTemplate.backgroundColor !== templateDataDoc.defaultBackgroundColor) fieldTemplate.defaultBackgroundColor = fieldTemplate.backgroundColor;
-        fieldTemplate.proto = templateDataDoc;
-        // }), 0);
+    //
+    //  This function converts a generic field layout display into a field layout that displays a specific
+    // metadata field indicated by the title of the template field (not the default field that it was rendering)
+    //
+    export function MakeMetadataFieldTemplate(templateField: Doc, templateDoc: Doc, suppressTitle: boolean = false): boolean {
+
+        // find the metadata field key that this template field doc will display (indicated by its title)
+        const metadataFieldKey = StrCast(templateField.title).replace(/^-/, "");
+
+        // update the original template to mark it as a template
+        templateField.templateField = metadataFieldKey;
+        templateField.isTemplateField = true;
+        templateField.title = metadataFieldKey;
+        templateField.showTitle = suppressTitle ? undefined : "title";
+
+        // move any data that the template field had been rendering over to the template doc so that things will 
+        // appear the same after the conversion to a template has completed.  (otherwise, there would be no data for the template to render)
+        // note: this will not overwrite any field that already exists on the template doc at the field key
+        if (!templateDoc[metadataFieldKey] && templateField.data instanceof ObjectField) {
+            (Doc.GetProto(templateDoc)[metadataFieldKey] = ObjectField.MakeCopy(templateField.data));
+        }
+
+        // get the layout string that the template uses to specify its layout
+        const templateFieldLayoutString = StrCast(Doc.LayoutField(Doc.Layout(templateField)));
+
+        // change itto render the target metadata field instead of what it was rendering before and assign it to the template field layout document.
+        Doc.Layout(templateField).layout = templateFieldLayoutString.replace(/fieldKey={'[^']*'}/, `fieldKey={'${metadataFieldKey}'}`);
+
+        // assign the template field doc a delegate of any extension document that was previously used to render the template field (since extension doc's carry rendering informatino)
+        Doc.Layout(templateField)[metadataFieldKey + "_ext"] = Doc.MakeDelegate(templateField[templateFieldLayoutString?.split("'")[1] + "_ext"] as Doc);
+
+        if (templateField.backgroundColor !== templateDoc.defaultBackgroundColor) {
+            templateField.defaultBackgroundColor = templateField.backgroundColor;
+        }
+
+        // finally, make the templateField be a delegate of the templateDoc so that it can find all the fields needed to render itselt
+        // (note that this is only useful to see the template doc itself which may not be necessary for many use cases)
+        templateField.proto = templateDoc;
         return true;
     }