Inspector v2: Add frame scene explorer command for making a frame graph active (#17003)

This is a small change that adds a scene explorer command to set the
active frame graph. It's just a shortcut and lets you see at a glance
which frame graph is the active one.

<img width="493" height="183" alt="image"
src="https://github.com/user-attachments/assets/1459c687-33cc-4693-a867-5bd53b51c991"
/>

Also update frame graph properties to use a switch instead of checkbox
for consistency.

Author: ryantrem

packages/dev/inspector-v2/src/components/properties/frameGraph/frameGraphProperties.tsx

@@ -3,10 +3,10 @@ import type { FrameGraph } from "core/index";
 import type { FunctionComponent } from "react";
 
 import { TextPropertyLine } from "shared-ui-components/fluent/hoc/propertyLines/textPropertyLine";
-import { CheckboxPropertyLine } from "shared-ui-components/fluent/hoc/propertyLines/checkboxPropertyLine";
 import { ButtonLine } from "shared-ui-components/fluent/hoc/buttonLine";
 import { useProperty } from "../../../hooks/compoundPropertyHooks";
 import { BoundProperty } from "../boundProperty";
+import { SwitchPropertyLine } from "shared-ui-components/fluent/hoc/propertyLines/switchPropertyLine";
 
 export const FrameGraphTaskProperties: FunctionComponent<{ frameGraph: FrameGraph }> = (props) => {
     const { frameGraph } = props;
@@ -29,7 +29,7 @@ export const FrameGraphGeneralProperties: FunctionComponent<{ frameGraph: FrameG
     return (
         <>
             <BoundProperty
-                component={CheckboxPropertyLine}
+                component={SwitchPropertyLine}
                 label="Optimize Texture Allocation"
                 description="Whether to optimize texture allocation."
                 target={frameGraph}

packages/dev/inspector-v2/src/services/panes/scene/frameGraphExplorerService.tsx

@@ -2,7 +2,7 @@ import type { ServiceDefinition } from "../../../modularity/serviceDefinition";
 import type { ISceneContext } from "../../sceneContext";
 import type { ISceneExplorerService } from "./sceneExplorerService";
 
-import { FrameRegular } from "@fluentui/react-icons";
+import { FrameRegular, PlayFilled, PlayRegular } from "@fluentui/react-icons";
 
 import { FrameGraph } from "core/FrameGraph/frameGraph";
 import { Observable } from "core/Misc";
@@ -50,9 +50,39 @@ export const FrameGraphExplorerServiceDefinition: ServiceDefinition<[], [ISceneE
             getEntityRemovedObservables: () => [scene.onFrameGraphRemovedObservable],
         });
 
+        const activeFrameGraphCommandRegistration = sceneExplorerService.addCommand({
+            predicate: (entity: unknown) => entity instanceof FrameGraph,
+            getCommand: (frameGraph) => {
+                const onChangeObservable = new Observable<void>();
+                const frameGraphHook = InterceptProperty(scene, "frameGraph", {
+                    afterSet: () => onChangeObservable.notifyObservers(),
+                });
+
+                return {
+                    type: "toggle",
+                    displayName: "Make Active",
+                    icon: () => (scene.frameGraph === frameGraph ? <PlayFilled /> : <PlayRegular />),
+                    get isEnabled() {
+                        return scene.frameGraph === frameGraph;
+                    },
+                    set isEnabled(enabled: boolean) {
+                        if (enabled && scene.frameGraph !== frameGraph) {
+                            scene.frameGraph = frameGraph;
+                        }
+                    },
+                    onChange: onChangeObservable,
+                    dispose: () => {
+                        frameGraphHook.dispose();
+                        onChangeObservable.clear();
+                    },
+                };
+            },
+        });
+
         return {
             dispose: () => {
                 sectionRegistration.dispose();
+                activeFrameGraphCommandRegistration.dispose();
             },
         };
     },

packages/dev/inspector-v2/test/app/index.ts

@@ -1,3 +1,7 @@
+// NOTE: This app is an easy place to test Inspector v2.
+// Additionally, here are some PGs that are helpful for testing specific features:
+// Frame graphs: http://localhost:1338/?inspectorv2#9YU4C5#23
+
 import HavokPhysics from "@babylonjs/havok";
 import type { Nullable } from "core/types";