feat(devtools-core): Render ST's Visualizer to Include Root Field's Allowed Types

packages/tools/devtools/devtools-core/src/data-visualization/DefaultVisualizers.ts

@@ -28,10 +28,12 @@ import { EditType } from "../CommonInterfaces.js";
 
 import type { VisualizeChildData, VisualizeSharedObject } from "./DataVisualization.js";
 import {
+	concatenateTypes,
 	determineNodeKind,
 	toVisualTree,
-	visualizeSharedTreeNodeBySchema,
+	visualizeSharedTreeBySchema,
 } from "./SharedTreeVisualizer.js";
+import type { VisualSharedTreeNode } from "./VisualSharedTreeTypes.js";
 import {
 	type FluidObjectNode,
 	type FluidObjectTreeNode,
@@ -260,26 +262,37 @@ export const visualizeSharedTree: VisualizeSharedObject = async (
 
 	// Root node of the SharedTree's content.
 	const treeView = sharedTree.exportVerbose();
-	// TODO: this visualizer doesn't consider the root as a field, and thus does not display the allowed types or handle when it is empty.
-	// Tracked by https://dev.azure.com/fluidframework/internal/_workitems/edit/26472.
+
 	if (treeView === undefined) {
-		throw new Error("Support for visualizing empty trees is not implemented");
+		return {
+			fluidObjectId: sharedTree.id,
+			typeMetadata: "SharedTree",
+			nodeKind: VisualNodeKind.FluidTreeNode,
+			children: {},
+		};
 	}
 
 	// Schema of the tree node.
-	const treeSchema = sharedTree.exportSimpleSchema();
+	const treeDefinitions = sharedTree.exportSimpleSchema().definitions;
+
+	/**
+	 * {@link visualizeSharedTreeBySchema} passes `allowedTypes` into co-recursive functions while constructing the visual representation.
+	 * Since the {@link SimpleTreeSchema.allowedTypes} of each children node is only accessible at the parent field level,
+	 * each node's allowed types are computed at the parent field level.
+	 */
+	const allowedTypes = concatenateTypes(sharedTree.exportSimpleSchema().allowedTypes);
 
-	// Traverses the SharedTree and generates a visual representation of the tree and its schema.
-	const visualTreeRepresentation = await visualizeSharedTreeNodeBySchema(
+	// Create a root field visualization that shows the allowed types at the root
+	const visualTreeRepresentation: VisualSharedTreeNode = await visualizeSharedTreeBySchema(
 		treeView,
-		treeSchema,
+		treeDefinitions,
+		allowedTypes,
 		visualizeChildData,
 	);
 
 	// Maps the `visualTreeRepresentation` in the format compatible to {@link visualizeChildData} function.
 	const visualTree = toVisualTree(visualTreeRepresentation);
 
-	// TODO: Validate the type casting.
 	const visualTreeResult: FluidObjectNode = {
 		...visualTree,
 		fluidObjectId: sharedTree.id,

packages/tools/devtools/devtools-core/src/data-visualization/SharedTreeVisualizer.ts

@@ -5,8 +5,8 @@
 
 import type {
 	SimpleMapNodeSchema,
+	SimpleNodeSchema,
 	SimpleObjectNodeSchema,
-	SimpleTreeSchema,
 	VerboseTree,
 	VerboseTreeNode,
 } from "@fluidframework/tree/internal";
@@ -91,7 +91,7 @@ function createToolTipContents(schema: SharedTreeSchemaNode): VisualTreeNode {
 }
 
 /**
- * Converts the visual representation from {@link visualizeSharedTreeNodeBySchema} to a visual tree compatible with the devtools-view.
+ * Converts the visual representation from {@link visualizeInternalNodeBySchema} to a visual tree compatible with the devtools-view.
  * @param tree - the visual representation of the SharedTree.
  * @returns - the visual representation of type {@link VisualChildNode}
  */
@@ -150,62 +150,72 @@ export function toVisualTree(tree: VisualSharedTreeNode): VisualChildNode {
 /**
  * Concatenrate allowed types for `ObjectNodeStoredSchema` and `MapNodeStoredSchema`.
  */
-function concatenateTypes(fieldTypes: ReadonlySet<string>): string {
+export function concatenateTypes(fieldTypes: ReadonlySet<string>): string {
 	return [...fieldTypes].join(" | ");
 }
 
 /**
  * Returns the allowed fields & types for the object fields (e.g., `foo : string | number, bar: boolean`)
  */
-function getObjectAllowedTypes(schema: SimpleObjectNodeSchema): string {
-	const result: string[] = [];
-
-	for (const [fieldKey, treeFieldSimpleSchema] of Object.entries(schema.fields)) {
-		const fieldTypes = treeFieldSimpleSchema.allowedTypes;
-		result.push(`${fieldKey} : ${concatenateTypes(fieldTypes)}`);
-	}
-
-	return `{ ${result.join(", ")} }`;
-}
 
 /**
  * Returns the schema & fields of the node.
  */
 async function visualizeVerboseNodeFields(
-	tree: VerboseTreeNode,
-	treeSchema: SimpleTreeSchema,
+	treeFields: VerboseTree[] | Record<string, VerboseTree>,
+	treeDefinitions: ReadonlyMap<string, SimpleNodeSchema>,
+	allowedTypes: Record<string, string>,
 	visualizeChildData: VisualizeChildData,
 ): Promise<Record<string, VisualSharedTreeNode>> {
-	const treeFields = tree.fields;
-
 	const fields: Record<string | number, VisualSharedTreeNode> = {};
 
 	for (const [fieldKey, childField] of Object.entries(treeFields)) {
-		fields[fieldKey] = await visualizeSharedTreeNodeBySchema(
+		fields[fieldKey] = await visualizeSharedTreeBySchema(
 			childField,
-			treeSchema,
+			treeDefinitions,
+			allowedTypes[fieldKey],
 			visualizeChildData,
 		);
 	}
 
 	return fields;
 }
 
+function storeObjectAllowedTypes(schema: SimpleObjectNodeSchema): Record<string, string> {
+	const result: Record<string, string> = {};
+
+	for (const [fieldKey, treeFieldSimpleSchema] of Object.entries(schema.fields)) {
+		const fieldTypes = treeFieldSimpleSchema.allowedTypes;
+		result[fieldKey] = concatenateTypes(fieldTypes);
+	}
+
+	return result;
+}
+
 /**
  * Returns the schema & fields of the node with type {@link ObjectNodeStoredSchema}.
  */
 async function visualizeObjectNode(
 	tree: VerboseTreeNode,
-	nodeSchema: SimpleObjectNodeSchema,
-	treeSchema: SimpleTreeSchema,
+	treeDefinitions: ReadonlyMap<string, SimpleNodeSchema>,
+	allowedTypes: string,
 	visualizeChildData: VisualizeChildData,
 ): Promise<VisualSharedTreeNode> {
+	const objectAllowedTypes = storeObjectAllowedTypes(
+		treeDefinitions.get(tree.type) as SimpleObjectNodeSchema,
+	);
+
 	return {
 		schema: {
 			schemaName: tree.type,
-			allowedTypes: getObjectAllowedTypes(nodeSchema),
+			allowedTypes,
 		},
-		fields: await visualizeVerboseNodeFields(tree, treeSchema, visualizeChildData),
+		fields: await visualizeVerboseNodeFields(
+			tree.fields,
+			treeDefinitions,
+			objectAllowedTypes,
+			visualizeChildData,
+		),
 		kind: VisualSharedTreeNodeKind.InternalNode,
 	};
 }
@@ -216,45 +226,47 @@ async function visualizeObjectNode(
 async function visualizeMapNode(
 	tree: VerboseTreeNode,
 	nodeSchema: SimpleMapNodeSchema,
-	treeSchema: SimpleTreeSchema,
+	treeDefinitions: ReadonlyMap<string, SimpleNodeSchema>,
+	allowedTypes: string,
 	visualizeChildData: VisualizeChildData,
 ): Promise<VisualSharedTreeNode> {
+	const mapAllowedTypes: Record<string, string> = {};
+
+	for (const key of Object.keys(tree.fields)) {
+		mapAllowedTypes[key] = concatenateTypes(nodeSchema.allowedTypes);
+	}
 	return {
 		schema: {
 			schemaName: tree.type,
-			allowedTypes: `Record<string, ${concatenateTypes(nodeSchema.allowedTypes)}>`,
+			allowedTypes,
 		},
-		fields: await visualizeVerboseNodeFields(tree, treeSchema, visualizeChildData),
+		fields: await visualizeVerboseNodeFields(
+			tree.fields,
+			treeDefinitions,
+			mapAllowedTypes,
+			visualizeChildData,
+		),
 		kind: VisualSharedTreeNodeKind.InternalNode,
 	};
 }
 
 /**
- * Main recursive helper function to create the visual representation of the SharedTree.
- * Processes tree nodes based on their schema type (e.g., ObjectNodeStoredSchema, MapNodeStoredSchema, LeafNodeStoredSchema), producing the visual representation for each type.
+ * Helper function to create the visual representation of non-leaf SharedTree nodes.
+ * Processes internal tree nodes based on their schema type (e.g., ObjectNodeStoredSchema, MapNodeStoredSchema, ArrayNodeStoredSchema),
+ * producing the visual representation for each type.
  *
  * @see {@link https://fluidframework.com/docs/data-structures/tree/} for more information on the SharedTree schema.
  *
  * @remarks
  */
-export async function visualizeSharedTreeNodeBySchema(
-	tree: VerboseTree,
-	treeSchema: SimpleTreeSchema,
+async function visualizeInternalNodeBySchema(
+	tree: VerboseTreeNode,
+	treeDefinitions: ReadonlyMap<string, SimpleNodeSchema>,
+	allowedTypes: string,
 	visualizeChildData: VisualizeChildData,
 ): Promise<VisualSharedTreeNode> {
-	const sf = new SchemaFactory(undefined);
-	if (Tree.is(tree, [sf.boolean, sf.null, sf.number, sf.handle, sf.string])) {
-		const nodeSchema = Tree.schema(tree);
-		return {
-			schema: {
-				schemaName: nodeSchema.identifier,
-			},
-			value: await visualizeChildData(tree),
-			kind: VisualSharedTreeNodeKind.LeafNode,
-		};
-	}
+	const schema = treeDefinitions.get(tree.type);
 
-	const schema = treeSchema.definitions.get(tree.type);
 	if (schema === undefined) {
 		throw new TypeError("Unrecognized schema type.");
 	}
@@ -263,14 +275,20 @@ export async function visualizeSharedTreeNodeBySchema(
 		case NodeKind.Object: {
 			const objectVisualized = visualizeObjectNode(
 				tree,
-				schema,
-				treeSchema,
+				treeDefinitions,
+				allowedTypes,
 				visualizeChildData,
 			);
 			return objectVisualized;
 		}
 		case NodeKind.Map: {
-			const mapVisualized = visualizeMapNode(tree, schema, treeSchema, visualizeChildData);
+			const mapVisualized = visualizeMapNode(
+				tree,
+				schema,
+				treeDefinitions,
+				allowedTypes,
+				visualizeChildData,
+			);
 			return mapVisualized;
 		}
 		case NodeKind.Array: {
@@ -280,20 +298,29 @@ export async function visualizeSharedTreeNodeBySchema(
 				throw new TypeError("Invalid array");
 			}
 
+			const arrayAllowedTypes: Record<string, string> = {};
 			for (let i = 0; i < children.length; i++) {
-				fields[i] = await visualizeSharedTreeNodeBySchema(
+				arrayAllowedTypes[i] = concatenateTypes(schema.allowedTypes);
+
+				fields[i] = await visualizeSharedTreeBySchema(
 					children[i],
-					treeSchema,
+					treeDefinitions,
+					arrayAllowedTypes[i],
 					visualizeChildData,
 				);
 			}
 
 			return {
 				schema: {
 					schemaName: tree.type,
-					allowedTypes: concatenateTypes(schema.allowedTypes),
+					allowedTypes,
 				},
-				fields: await visualizeVerboseNodeFields(tree, treeSchema, visualizeChildData),
+				fields: await visualizeVerboseNodeFields(
+					tree.fields,
+					treeDefinitions,
+					arrayAllowedTypes,
+					visualizeChildData,
+				),
 				kind: VisualSharedTreeNodeKind.InternalNode,
 			};
 		}
@@ -302,3 +329,41 @@ export async function visualizeSharedTreeNodeBySchema(
 		}
 	}
 }
+
+/**
+ * Creates a visual representation of a SharedTree based on its schema.
+ * @param tree - The {@link VerboseTree} to visualize
+ * @param treeSchema - The schema that defines the structure and types of the tree
+ * @param visualizeChildData - Callback function to visualize child node data
+ * @returns A visual representation of the tree that includes schema information and node values
+ *
+ * @remarks
+ * This function handles both leaf nodes (primitive values, handles) and internal nodes (objects, maps, arrays).
+ * For leaf nodes, it creates a visual representation with the node's schema and value.
+ * For internal nodes, it recursively processes the node's fields using {@link visualizeInternalNodeBySchema}.
+ */
+export async function visualizeSharedTreeBySchema(
+	tree: VerboseTree,
+	treeDefinitions: ReadonlyMap<string, SimpleNodeSchema>,
+	allowedTypes: string,
+	visualizeChildData: VisualizeChildData,
+): Promise<VisualSharedTreeNode> {
+	const schemaFactory = new SchemaFactory(undefined);
+
+	return Tree.is(tree, [
+		schemaFactory.boolean,
+		schemaFactory.null,
+		schemaFactory.number,
+		schemaFactory.handle,
+		schemaFactory.string,
+	])
+		? {
+				schema: {
+					schemaName: Tree.schema(tree).identifier,
+					allowedTypes,
+				},
+				value: await visualizeChildData(tree),
+				kind: VisualSharedTreeNodeKind.LeafNode,
+			}
+		: visualizeInternalNodeBySchema(tree, treeDefinitions, allowedTypes, visualizeChildData);
+}