Add layer name to transaction change view

Test: Make sure layer names show up when looking at the changes view
Change-Id: I29efcc6522fb5701d86e44da2cb29655df15beb5

tools/winscope/src/TransactionEntry.vue

@@ -78,6 +78,7 @@ export default {
     },
     sufacesAffectedBy(transaction) {
       if (transaction.type !== 'transaction') {
+        // TODO (b/162402459): Shorten layer name
         return [{name: transaction.layerName, id: transaction.obj.id}];
       }
 

tools/winscope/src/TransactionsView.vue

@@ -170,9 +170,10 @@ export default {
     transactionSelected(transaction) {
       this.selectedTransaction = transaction;
 
-      let obj = this.removeNullFields(transaction.obj);
+      const META_DATA_KEY = "metadata"
-      let name = transaction.type;
 
+      let obj;
+      let name;
       if (transaction.type == "transaction") {
         name = "changes";
         obj = {};
@@ -180,11 +181,27 @@ export default {
         const [surfaceChanges, displayChanges] =
           this.aggregateTransactions(transaction.transactions);
 
+        // Prepare the surface and display changes to be passed through
+        // the ObjectTransformer — in particular, remove redundant properties
+        // and add metadata that can be accessed post transformation
+        const perpareForTreeViewTransform = (change) => {
+          this.removeNullFields(change);
+          change[META_DATA_KEY] = {
+            // TODO (b/162402459): Shorten layer name
+            layerName: change.layerName,
+          }
+          // remove redundant properties
+          delete change.layerName;
+          delete change.id;
+
+          console.log(change)
+        };
+
         for (const changeId in surfaceChanges) {
-          this.removeNullFields(surfaceChanges[changeId]);
+          perpareForTreeViewTransform(surfaceChanges[changeId])
         }
         for (const changeId in displayChanges) {
-          this.removeNullFields(displayChanges[changeId]);
+          perpareForTreeViewTransform(displayChanges[changeId])
         }
 
         if (Object.keys(surfaceChanges).length > 0) {
@@ -194,8 +211,12 @@ export default {
         if (Object.keys(displayChanges).length > 0) {
           obj.displayChanges = displayChanges;
         }
+      } else {
+        obj = this.removeNullFields(transaction.obj);
+        name = transaction.type;
       }
 
+      // Transform the raw JS object to be TreeView compatible
       const transactionUniqueId = transaction.timestamp;
       let tree = new ObjectTransformer(
         obj,
@@ -203,8 +224,29 @@ export default {
         transactionUniqueId
       ).setOptions({
         formatter: () => {},
-      }).transform();
+      }).transform({
+        keepOriginal: true,
+        metadataKey: META_DATA_KEY,
+        freeze: false
+      });
 
+      // Add the layer name as the kind of the object to be shown in the TreeView
+      const addLayerNameAsKind = (tree) => {
+        for (const layerChanges of tree.children) {
+          layerChanges.kind = layerChanges.metadata.layerName;
+        }
+      }
+
+      if (transaction.type == "transaction") {
+        for (const child of tree.children) {
+          // child = surfaceChanges or displayChanges tree node
+          addLayerNameAsKind(child)
+        }
+      }
+
+      // If there are only surfaceChanges or only displayChanges and not both
+      // remove the extra top layer node which is meant to hold both types of
+      // changes when both are present
       if (tree.name == "changes" && tree.children.length === 1) {
         tree = tree.children[0];
       }
@@ -227,7 +269,7 @@ export default {
       };
     },
     isMeaningfulChange(object, key) {
-      // TODO: Handle cases of non null objects but meaningless change
+      // TODO (b/159799733): Handle cases of non null objects but meaningless change
       return object[key] !== null && object.hasOwnProperty(key)
     },
     mergeChanges(a, b) {
@@ -257,15 +299,22 @@ export default {
       for (const transaction of transactions) {
         const obj = transaction.obj;
 
+        // Create a new base object to merge all changes into
+        const newBaseObj = () => {
+          return {
+            layerName: transaction.layerName,
+          }
+        }
+
         switch (transaction.type) {
           case "surfaceChange":
             surfaceChanges[obj.id] =
-              this.mergeChanges(surfaceChanges[obj.id] ?? {}, obj);
+              this.mergeChanges(surfaceChanges[obj.id] ?? newBaseObj(), obj);
             break;
 
           case "displayChange":
             displayChanges[obj.id] =
-              this.mergeChanges(displayChanges[obj.id] ?? {}, obj);
+              this.mergeChanges(displayChanges[obj.id] ?? newBaseObj(), obj);
             break;
 
           default:

tools/winscope/src/transform.js

@@ -137,7 +137,16 @@ class ObjectTransformer {
 		return this;
 	}
 
-	transform() {
+	/**
+	 * Transform the raw JS Object into a TreeView compatible object
+	 * @param {bool} keepOriginal whether or not to store the original object in
+	 *                            the obj property of a tree node for future reference
+	 * @param {bool} freeze whether or not the returned objected should be frozen
+	 *                      to prevent changing any of its properties
+	 * @param {string} metadataKey the key that contains a node's metadata to be
+	 *                             accessible after the transformation
+	 */
+	transform(transformOptions = { keepOriginal: false, freeze: true, metadataKey: null }) {
 		const { formatter } = this.options;
 		if (!formatter) {
 			throw new Error("Missing formatter, please set with setOptions()");
@@ -145,10 +154,13 @@ class ObjectTransformer {
 
 		return this._transform(this.obj, this.rootName, null,
 			this.compareWithObj, this.rootName, null,
-			this.stableId);
+			this.stableId, transformOptions);
 	}
 
-	_transformObject(obj, fieldOptions) {
+	/**
+	 * @param {*} metadataKey if 'obj' contains this key, it is excluded from the transformation
+	 */
+	_transformObject(obj, fieldOptions, metadataKey) {
 		const { skip, formatter } = this.options;
 		const transformedObj = {
 			obj: {},
@@ -178,6 +190,9 @@ class ObjectTransformer {
 			transformedObj.fieldOptions["" + obj] = fieldOptions;
 		} else if (obj && typeof obj == 'object') {
 			Object.keys(obj).forEach((key) => {
+				if (key === metadataKey) {
+					return;
+				}
 				transformedObj.obj[key] = obj[key];
 				transformedObj.fieldOptions[key] = obj.$type?.fields[key]?.options;
 			});
@@ -190,18 +205,38 @@ class ObjectTransformer {
 		return transformedObj;
 	}
 
+	/**
+	 * Extract the value of obj's property with key 'metadataKey'
+	 * @param {Object} obj the obj we want to extract the metadata from
+	 * @param {string} metadataKey the key that stores the metadata in the object
+	 * @return the metadata value or null in no metadata is present
+	 */
+	_getMetadata(obj, metadataKey) {
+		if (metadataKey && obj[metadataKey]) {
+			const metadata = obj[metadataKey];
+			obj[metadataKey] = undefined;
+			return metadata;
+		} else {
+			return null;
+		}
+	}
+
 	_transform(obj, name, fieldOptions,
 		compareWithObj, compareWithName, compareWithFieldOptions,
-		stableId) {
+		stableId, transformOptions) {
+
+		const originalObj = obj;
+		const metadata = this._getMetadata(obj, transformOptions.metadataKey);
+
 		const children = [];
 
 		if (!isTerminal(obj)) {
-			const transformedObj = this._transformObject(obj, fieldOptions);
+			const transformedObj = this._transformObject(obj, fieldOptions, transformOptions.metadataKey);
 			obj = transformedObj.obj;
 			fieldOptions = transformedObj.fieldOptions;
 		}
 		if (!isTerminal(compareWithObj)) {
-			const transformedObj = this._transformObject(compareWithObj, compareWithFieldOptions);
+			const transformedObj = this._transformObject(compareWithObj, compareWithFieldOptions, transformOptions.metadataKey);
 			compareWithObj = transformedObj.obj;
 			compareWithFieldOptions = transformedObj.fieldOptions;
 		}
@@ -218,7 +253,7 @@ class ObjectTransformer {
 				}
 				children.push(this._transform(obj[key], key, fieldOptions[key],
 					compareWithChild, compareWithChildName, compareWithChildFieldOptions,
-					`${stableId}.${key}`));
+					`${stableId}.${key}`, transformOptions));
 			}
 		}
 
@@ -226,7 +261,7 @@ class ObjectTransformer {
 		for (const key in compareWithObj) {
 			if (!obj.hasOwnProperty(key) && compareWithObj.hasOwnProperty(key)) {
 				children.push(this._transform(new Terminal(), new Terminal(), undefined,
-					compareWithObj[key], key, compareWithFieldOptions[key], `${stableId}.${key}`));
+					compareWithObj[key], key, compareWithFieldOptions[key], `${stableId}.${key}`, transformOptions));
 			}
 		}
 
@@ -282,7 +317,15 @@ class ObjectTransformer {
 			}
 		}
 
-		return Object.freeze(transformedObj);
+		if (transformOptions.keepOriginal) {
+			transformedObj.obj = originalObj;
+		}
+
+		if (metadata) {
+			transformedObj[transformOptions.metadataKey] = metadata;
+		}
+
+		return transformOptions.freeze ? Object.freeze(transformedObj) : transformedObj;
 	}
 }