feat(devtools-core): Visualize TreeDataObject in Devtools

[jikim-msft]

NOTE

This PR prototypes a devtools-core API integration and explores its potential use cases.

Background

This work originates from ADO 36175, which proposed creating an adapter in the office-bohemia repo to support per-Loop-Component (DataObject) visualization. However, implementing a full IContainer adapter was not feasible, as the required properties for the devtools-core visualizer couldn't be fulfilled.

Description

Rather than wrapping everything into an adapter, this PR takes the inverse approach. It introduces a new DecomposedIContainer interface and a DecomposedContainer class that implements it. This class is a lightweight, strict subset of the IContainer interface, exposing only the properties necessary for visualization.

Thanks to the property and event overlap (clientId, audience, connected, attached, etc.) with PureDataObject.runtime, we can effectively translate a PureDataObject into a decomposed IContainer type, enabling visualizer compatibility.

Change in the devtools-view package

[Josmithr]

I would recommend making this PR a draft. There is still a fair amount of work that needs to be done to this package and devtools-view to make this new infrastructure robust. I've left a handful of comments to this effect. Great proof of concept, but there is still a fair amount of work to be done to productionize it.

[Copilot]

Pull Request Overview

This PR introduces support for visualizing TreeDataObject in the Fluid Devtools by extending the devtools architecture to handle Data Objects alongside Containers. The implementation creates a lightweight abstraction of containers to enable Data Object visualization without requiring full container adapter implementation.

• Introduces a DecomposedContainer interface and implementation to abstract common container properties for devtools use
• Adds DataObjectDevtools and BaseDevtools classes to share functionality between container and data object devtools
• Updates the UI to display both Containers and Data Objects sections with appropriate visual distinctions

Reviewed Changes

Copilot reviewed 28 out of 29 changed files in this pull request and generated 5 comments.

Show a summary per file

File	Description
packages/tools/devtools/devtools-core/src/IFluidDevtools.ts	Adds registerDataObject method to support data object registration
packages/tools/devtools/devtools-core/src/FluidDevtools.ts	Implements data object registration and management alongside containers
packages/tools/devtools/devtools-core/src/DecomposedContainer.ts	Creates abstraction layer for containers to support both real containers and data objects
packages/tools/devtools/devtools-core/src/BaseDevtools.ts	Extracts shared devtools functionality into base class
packages/tools/devtools/devtools-core/src/DataObjectDevtools.ts	Provides devtools implementation specifically for data objects
packages/tools/devtools/devtools-view/src/components/Menu.tsx	Updates UI to display both container and data object sections with state management
packages/tools/devtools/devtools-view/src/components/ContainerSummaryView.tsx	Conditionally displays action controls based on devtools type
packages/tools/devtools/devtools-test-app/src/App.tsx	Demonstrates data object registration in test application

Files not reviewed (1)

• pnpm-lock.yaml: Language not supported

Comments suppressed due to low confidence (3)

packages/tools/devtools/devtools-core/src/FluidDevtools.ts:32

• The error message 'TODO' is not helpful. Replace with a descriptive error message that explains what went wrong.

import { pkgVersion as devtoolsVersion } from "./packageVersion.js";

packages/tools/devtools/devtools-core/src/BaseDevtools.ts:76

• [nitpick] The underscore prefix in '_audienceChangeLog' is inconsistent with the naming convention used for '_connectionStateLog' in the same context. Consider using consistent naming patterns.

	protected readonly _audienceChangeLog: AudienceChangeLogEntry[];

packages/tools/devtools/devtools-view/src/components/Menu.tsx:160

• The telemetry event name 'RefreshContainerListButtonClicked' should be updated to be more generic since this button now refreshes both containers and data objects. Consider 'RefreshListButtonClicked' or include the label parameter.

		usageLogger?.sendTelemetryEvent({ eventName: "RefreshContainerListButtonClicked" });

[github-actions]

🔗 No broken links found! ✅

Your attention to detail is admirable.

linkcheck output

> fluid-framework-docs-site@0.0.0 ci:check-links /home/runner/work/FluidFramework/FluidFramework/docs
> start-server-and-test "npm run serve -- --no-open" 3000 check-links

1: starting server using command "npm run serve -- --no-open"
and when url "[ 'http://127.0.0.1:3000' ]" is responding with HTTP status code 200
running tests using command "npm run check-links"


> fluid-framework-docs-site@0.0.0 serve
> docusaurus serve --no-open

[SUCCESS] Serving "build" directory at: http://localhost:3000/

> fluid-framework-docs-site@0.0.0 check-links
> linkcheck http://localhost:3000 --skip-file skipped-urls.txt

Crawling...

Stats:
  232061 links
    1712 destination URLs
    1942 URLs ignored
       0 warnings
       0 errors