Inspector v2: Stub out stats pane (#16755)

In this PR, I'm stubbing out a new stats pane, which includes:
1. Factoring out an `AccordionPane` react component from the
`PropertiesPane` component. The idea is that we will have several panes
that will have the same basic accordion UI, and each can support the
same type of extensibility as properties.
2. `PropertiesPane`/`PropertiesService` are slightly more complicated
that the other panes in that the "context" of the pane can have
different types (e.g. a Mesh or a Light). Given this, I kept the
predicate stuff specific to Properties. Other panes like Stats can have
a single type that is always the same (like Scene) and be a little
simpler.
3. Added a new `StatsPane`/`StatsService` that otherwise follow the same
model as properties.

One other difference that I am trying with `StatsService` is to not
bother having separate service definitions for the default/built-in
content of the status pane. Instead it is defined directly in the
`StatsService`, but new service definitions could be defined to extend
the default content of the stats pane. This was based off a suggestion
@deltakosh had in the original inspector v2 PR.


![image](https://github.com/user-attachments/assets/4c177ec7-e988-4eb5-8875-b423d93926c1)

Author: ryantrem

packages/dev/core/src/Instrumentation/engineInstrumentation.ts

@@ -19,11 +19,13 @@ export class EngineInstrumentation implements IDisposable {
     private _onBeforeShaderCompilationObserver: Nullable<Observer<AbstractEngine>> = null;
     private _onAfterShaderCompilationObserver: Nullable<Observer<AbstractEngine>> = null;
 
+    private _disposed = false;
+
     // Properties
     /**
      * Gets the perf counter used for GPU frame time
      */
-    public get gpuFrameTimeCounter(): Nullable<PerfCounter> {
+    public get gpuFrameTimeCounter(): PerfCounter {
         return this.engine.getGPUFrameTimeCounter();
     }
 
@@ -104,6 +106,10 @@ export class EngineInstrumentation implements IDisposable {
      * Dispose and release associated resources.
      */
     public dispose() {
+        if (this._disposed) {
+            return;
+        }
+
         this.engine.onBeginFrameObservable.remove(this._onBeginFrameObserver);
         this._onBeginFrameObserver = null;
 
@@ -117,5 +123,6 @@ export class EngineInstrumentation implements IDisposable {
         this._onAfterShaderCompilationObserver = null;
 
         (<any>this.engine) = null;
+        this._disposed = true;
     }
 }

packages/dev/core/src/Instrumentation/sceneInstrumentation.ts

@@ -66,6 +66,8 @@ export class SceneInstrumentation implements IDisposable {
     private _onBeforeCameraRenderObserver: Nullable<Observer<Camera>> = null;
     private _onAfterCameraRenderObserver: Nullable<Observer<Camera>> = null;
 
+    private _disposed = false;
+
     // Properties
     /**
      * Gets the perf counter used for active meshes evaluation time
@@ -551,6 +553,10 @@ export class SceneInstrumentation implements IDisposable {
      * Dispose and release associated resources.
      */
     public dispose() {
+        if (this._disposed) {
+            return;
+        }
+
         this.scene.onAfterRenderObservable.remove(this._onAfterRenderObserver);
         this._onAfterRenderObserver = null;
 
@@ -611,5 +617,6 @@ export class SceneInstrumentation implements IDisposable {
         this._onAfterCameraRenderObserver = null;
 
         (<any>this.scene) = null;
+        this._disposed = true;
     }
 }

packages/dev/inspector-v2/src/components/accordionPane.tsx

@@ -0,0 +1,149 @@
+// eslint-disable-next-line import/no-internal-modules
+
+import { Accordion, AccordionHeader, AccordionItem, AccordionPanel, makeStyles, Subtitle1, tokens } from "@fluentui/react-components";
+import { useMemo, useState, type ComponentType } from "react";
+
+export type AccordionSection = Readonly<{
+    /**
+     * A unique identity for the section, which can be referenced by section content.
+     */
+    identity: symbol;
+
+    /**
+     * An optional order for the section, relative to other sections.
+     * Defaults to 0.
+     */
+    order?: number;
+
+    /**
+     * An optional flag indicating whether the section should be collapsed by default.
+     * Defaults to false.
+     */
+    collapseByDefault?: boolean;
+}>;
+
+export type AccordionSectionContent<ContextT> = Readonly<{
+    /**
+     * A unique key for the the content.
+     */
+    key: string;
+
+    /**
+     * The content that is added to individual sections.
+     */
+    content: readonly Readonly<{
+        /**
+         * The section this content belongs to.
+         */
+        section: symbol;
+
+        /**
+         * An optional order for the content within the section.
+         * Defaults to 0.
+         */
+        order?: number;
+
+        /**
+         * The React component that will be rendered for this content.
+         */
+        component: ComponentType<{ context: ContextT }>;
+    }>[];
+}>;
+
+// eslint-disable-next-line @typescript-eslint/naming-convention
+const useStyles = makeStyles({
+    rootDiv: {
+        flex: 1,
+        overflow: "hidden",
+        display: "flex",
+        flexDirection: "column",
+    },
+    placeholderDiv: {
+        padding: `${tokens.spacingVerticalM} ${tokens.spacingHorizontalM}`,
+    },
+    accordion: {
+        overflowY: "auto",
+        paddingBottom: tokens.spacingVerticalM,
+    },
+    panelDiv: {
+        display: "flex",
+        flexDirection: "column",
+        overflow: "hidden",
+    },
+});
+
+export function AccordionPane<ContextT = unknown>(props: {
+    sections: readonly AccordionSection[];
+    sectionContent: readonly AccordionSectionContent<ContextT>[];
+    context: ContextT;
+}) {
+    const classes = useStyles();
+
+    const { sections, sectionContent, context } = props;
+
+    const [version, setVersion] = useState(0);
+
+    const visibleSections = useMemo(() => {
+        // When any of this state changes, we should re-render the Accordion so the defaultOpenItems are re-evaluated.
+        setVersion((prev) => prev + 1);
+
+        if (!context) {
+            return [];
+        }
+
+        return sections
+            .map((section) => {
+                // Get a flat list of the section content, preserving the key so it can be used when each component for each section is rendered.
+                const contentForSection = sectionContent
+                    .flatMap((entry) => entry.content.map((content) => ({ key: entry.key, ...content })))
+                    .filter((content) => content.section === section.identity);
+
+                // If there is no content for this section, we skip it.
+                if (contentForSection.length === 0) {
+                    return null; // No content for this section
+                }
+
+                // Sort the content for this section by order, defaulting to 0 if not specified.
+                contentForSection.sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
+
+                // Return the section with its identity, collapseByDefault flag, and the content components to render.
+                return {
+                    identity: section.identity,
+                    collapseByDefault: section.collapseByDefault ?? false,
+                    components: contentForSection.map((content) => ({ key: content.key, component: content.component })),
+                };
+            })
+            .filter((section) => section !== null);
+    }, [sections, sectionContent, context]);
+
+    return (
+        <div className={classes.rootDiv}>
+            {visibleSections.length > 0 && (
+                <Accordion
+                    key={version}
+                    className={classes.accordion}
+                    collapsible
+                    multiple
+                    defaultOpenItems={visibleSections.filter((section) => !section.collapseByDefault).map((section) => section.identity.description)}
+                >
+                    {visibleSections.map((section) => {
+                        return (
+                            <AccordionItem key={section.identity.description} value={section.identity.description}>
+                                <AccordionHeader expandIconPosition="end">
+                                    <Subtitle1>{section.identity.description}</Subtitle1>
+                                </AccordionHeader>
+                                <AccordionPanel>
+                                    <div className={classes.panelDiv}>
+                                        {section.components.map((component) => {
+                                            return <component.component key={component.key} context={context} />;
+                                        })}
+                                    </div>
+                                </AccordionPanel>
+                            </AccordionItem>
+                        );
+                    })}
+                </Accordion>
+            )}
+        </div>
+    );
+}

packages/dev/inspector-v2/src/components/properties/commonGeneralProperties.tsx

@@ -7,7 +7,7 @@ type CommonEntity = {
     getClassName?: () => string;
 };
 
-export const CommonGeneralProperties: FunctionComponent<{ entity: CommonEntity }> = ({ entity: commonEntity }) => {
+export const CommonGeneralProperties: FunctionComponent<{ context: CommonEntity }> = ({ context: commonEntity }) => {
     return (
         // TODO: Use the new Fluent property line shared components.
         <>

packages/dev/inspector-v2/src/components/properties/meshAdvancedProperties.tsx

@@ -6,7 +6,7 @@ import type { FunctionComponent } from "react";
 import { useInterceptObservable } from "../../hooks/instrumentationHooks";
 import { useObservableState } from "../../hooks/observableHooks";
 
-export const MeshAdvancedProperties: FunctionComponent<{ entity: AbstractMesh }> = ({ entity: mesh }) => {
+export const MeshAdvancedProperties: FunctionComponent<{ context: AbstractMesh }> = ({ context: mesh }) => {
     // There is no observable for computeBonesUsingShaders, so we use an interceptor to listen for changes.
     const computeBonesUsingShaders = useObservableState(() => mesh.computeBonesUsingShaders, useInterceptObservable("property", mesh, "computeBonesUsingShaders"));
 

packages/dev/inspector-v2/src/components/properties/meshGeneralProperties.tsx

@@ -5,7 +5,7 @@ import type { FunctionComponent } from "react";
 
 import { useObservableState } from "../../hooks/observableHooks";
 
-export const MeshGeneralProperties: FunctionComponent<{ entity: AbstractMesh }> = ({ entity: mesh }) => {
+export const MeshGeneralProperties: FunctionComponent<{ context: AbstractMesh }> = ({ context: mesh }) => {
     // Use the observable to keep keep state up-to-date and re-render the component when it changes.
     const material = useObservableState(() => mesh.material, mesh.onMaterialChangedObservable);
 

packages/dev/inspector-v2/src/components/properties/meshTransformProperties.tsx

@@ -3,7 +3,7 @@ import type { AbstractMesh } from "core/index";
 
 import type { FunctionComponent } from "react";
 
-export const MeshTransformProperties: FunctionComponent<{ entity: AbstractMesh }> = ({ entity: mesh }) => {
+export const MeshTransformProperties: FunctionComponent<{ context: AbstractMesh }> = ({ context: mesh }) => {
     return (
         // TODO: Use the new Fluent property line shared components.
         <>