restored labels to pivot viewer

2 files changed, 18 insertions, 12 deletions

diff --git a/src/client/apis/google_docs/GooglePhotosClientUtils.ts b/src/client/apis/google_docs/GooglePhotosClientUtils.ts
index 49eb5b354..700c0401a 100644
--- a/src/client/apis/google_docs/GooglePhotosClientUtils.ts
+++ b/src/client/apis/google_docs/GooglePhotosClientUtils.ts
@@ -135,13 +135,15 @@ export namespace GooglePhotos {
 
     export namespace Query {
 
+        const delimiter = ", ";
         export const TagChildImages = async (collection: Doc) => {
             const idMapping = await Cast(collection.googlePhotosIdMapping, Doc);
             if (!idMapping) {
                 throw new Error("Appending image metadata requires that the targeted collection have already been mapped to an album!");
             }
+            const tagMapping = new Map<string, string>();
             const images = await DocListCastAsync(collection.data);
-            images && images.forEach(image => image.googlePhotosTags = new List([ContentCategories.NONE]));
+            images && images.forEach(image => tagMapping.set(image[Id], ContentCategories.NONE));
             const values = Object.values(ContentCategories);
             for (let value of values) {
                 if (value !== ContentCategories.NONE) {
@@ -151,9 +153,10 @@ export namespace GooglePhotos {
                         for (let id of ids) {
                             const image = await Cast(idMapping[id], Doc);
                             if (image) {
-                                const tags = Cast(image.googlePhotosTags, listSpec("string"))!;
+                                const key = image[Id];
+                                const tags = tagMapping.get(key)!;
                                 if (!tags.includes(value)) {
-                                    tags.push(value);
+                                    tagMapping.set(key, tags + delimiter + value);
                                 }
                             }
                         }
@@ -161,9 +164,11 @@ export namespace GooglePhotos {
                 }
             }
             images && images.forEach(image => {
-                const tags = Cast(image.googlePhotosTags, listSpec("string"))!;
-                if (tags.includes(ContentCategories.NONE) && tags.length > 1) {
-                    image.googlePhotosTags = new List(tags.splice(tags.indexOf(ContentCategories.NONE), 1));
+                const concatenated = tagMapping.get(image[Id])!;
+                const tags = concatenated.split(delimiter);
+                if (tags.length > 1) {
+                    const cleaned = concatenated.replace(ContentCategories.NONE + delimiter, "");
+                    image.googlePhotosTags = cleaned.split(delimiter).sort((a, b) => (a < b) ? -1 : (a > b ? 1 : 0)).join(delimiter);
                 }
             });
 
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index a7acd9e91..1af534ecd 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -98,7 +98,7 @@ export namespace PivotView {
         groups.forEach((val, key) => minSize = Math.min(minSize, val.length));
 
         const numCols = NumCast(collection.pivotNumColumns) || Math.ceil(Math.sqrt(minSize));
-        const fontSize = NumCast(collection.pivotFontSize);
+        const fontSize = NumCast(collection.pivotFontSize, 30);
 
         const docMap = new Map<Doc, ViewDefBounds>();
         const groupNames: PivotData[] = [];
@@ -113,7 +113,8 @@ export namespace PivotView {
                 x,
                 y: width + 50,
                 width: width * 1.25 * numCols,
-                height: 100, fontSize: fontSize
+                height: 100,
+                fontSize
             });
             for (const doc of val) {
                 docMap.set(doc, {
@@ -701,7 +702,7 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) {
         return result.result === undefined ? { x: Cast(doc.x, "number"), y: Cast(doc.y, "number"), z: Cast(doc.z, "number"), width: Cast(doc.width, "number"), height: Cast(doc.height, "number") } : result.result;
     }
 
-    viewDefsToJSX = (views: any[]) => {
+    viewDefsToJSX = (views: PivotView.PivotData[]) => {
         let elements: ViewDefResult[] = [];
         if (Array.isArray(views)) {
             elements = views.reduce<typeof elements>((prev, ele) => {
@@ -713,12 +714,12 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) {
         return elements;
     }
 
-    private viewDefToJSX(viewDef: any): Opt<ViewDefResult> {
+    private viewDefToJSX(viewDef: PivotView.PivotData): Opt<ViewDefResult> {
         if (viewDef.type === "text") {
             const text = Cast(viewDef.text, "string");
             const x = Cast(viewDef.x, "number");
             const y = Cast(viewDef.y, "number");
-            const z = Cast(viewDef.z, "number");
+            // const z = Cast(viewDef.z, "number");
             const width = Cast(viewDef.width, "number");
             const height = Cast(viewDef.height, "number");
             const fontSize = Cast(viewDef.fontSize, "number");
@@ -730,7 +731,7 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) {
                 ele: <div className="collectionFreeform-customText" style={{
                     transform: `translate(${x}px, ${y}px)`,
                     width, height, fontSize
-                }}>{text}</div>, bounds: { x: x!, y: y!, z: z, width: width!, height: height! }
+                }}>{text}</div>, bounds: { x: x!, y: y!, width: width!, height: height! }
             };
         }
     }