Add support for viewing nodes that are in the node tree from NodeCoun…

…tByTypePage (#579)

Co-authored-by: Brian Leighty <bleighty@tubi.tv>

webviews/src/views/SceneGraphInspectorView/NodeCountByTypePage.svelte

@@ -1,13 +1,56 @@
 <script lang="ts">
+    import { ArrowLeft } from 'svelte-codicons';
+    import Chevron from '../../shared/Chevron.svelte';
+    import type { TreeNodeWithBase } from '../../shared/types';
+
     export let showNodeCountByType: boolean;
     export let nodeCountByType = {} as {
         [key: string]: number;
     };
+    export let flatTree = [] as TreeNodeWithBase[];
+    export let inspectNodeTreeNode: TreeNodeWithBase | null;
+
+    let nodesByType = {} as {
+        [key: string]: TreeNodeWithBase[];
+    };
+
+    let nodeCountByTypeNotInTree = {} as {
+        [key: string]: number;
+    };
+
     function close() {
         showNodeCountByType = false;
     }
 
+    function toggleShowNodes() {
+        const nodeSubtype = this.id;
+        if (nodesByType[nodeSubtype]) {
+            nodesByType[nodeSubtype] = null;
+            nodeCountByTypeNotInTree[nodeSubtype] = 0;
+        } else {
+            const nodes = [];
+            for (const treeNode of flatTree) {
+                // debugger;
+                if (treeNode.subtype === nodeSubtype) {
+                    nodes.push(treeNode);
+                }
+            }
+            nodeCountByTypeNotInTree[nodeSubtype] = nodeCountByType[nodeSubtype] - nodes.length;;
+            nodesByType[nodeSubtype] = nodes;
+        }
+    }
+
+    function onNodeClicked() {
+        const nodeRef = this.id;
+        inspectNodeTreeNode = flatTree[nodeRef];
+    }
+
     function onKeydown(event) {
+        // Don't handle anything if we're not the top detail view
+        if (inspectNodeTreeNode) {
+            return;
+        }
+
         const key = event.key;
 
         switch (key) {
@@ -25,6 +68,7 @@
         top: 0;
         left: 0;
         right: 0;
+        bottom: 0;
         z-index: 200;
     }
 
@@ -49,38 +93,51 @@
         z-index: -1;
     }
 
-    #closeButton {
-        font-size: small;
-        float: right;
-        cursor: pointer;
-        padding: 3px 20px 0 0;
-    }
-
-    ul {
+    #nodesOfTypeContainer {
         padding: var(--headerHeight) 0 0;
         margin: 5px;
-        list-style: none;
     }
 
-    li {
-        padding: 0 5px 10px;
+    .nodeOfType {
+        display: inline-block;
+        margin: 2px 5px 10px;
+    }
+
+    .nodesOfTypeItem {
+        cursor: pointer;
+        padding: 5px;
     }
 </style>
 
 <svelte:window on:keydown={onKeydown} />
 <div id="container">
     <div id="background" />
     <div id="header">
-        Node Count By Type
-        <div id="closeButton" on:click={close}>X</div>
+        <section style="display: flex; flex-direction:row">
+            <vscode-button appearance="icon" title="Back" on:click={close}>
+                <ArrowLeft />
+            </vscode-button>
+
+            Node Count By Type
+        </section>
     </div>
 
-    <ul>
+    <div id="nodesOfTypeContainer">
         {#each Object.entries(nodeCountByType) as [key, value]}
-            <li>
-                <strong>{key}:</strong>
-                {value}
-            </li>
+            <div id={key} class="nodesOfTypeItem" on:click={toggleShowNodes}>
+                <Chevron expanded={!!nodesByType[key] || !!nodeCountByTypeNotInTree[key]} />
+                <div>{key} ({value})</div>
+                <div style="clear: both" />
+            </div>
+
+            {#each nodesByType[key] ?? [] as node, i}
+                <vscode-button id={node.ref} class="nodeOfType" appearance="secondary" title={node.keyPath} on:click={onNodeClicked}>{node.id ? `#${node.id}` : `${i}`}</vscode-button>
+            {/each}
+
+            {#if nodeCountByTypeNotInTree[key] > 0}
+                <div class="nodeOfType">{`${nodeCountByTypeNotInTree[key]} node(s) not in scene tree`}</div>
+            {/if}
+            <div style="clear: both" />
         {/each}
-    </ul>
+    </div>
 </div>

webviews/src/views/SceneGraphInspectorView/SceneGraphInspectorView.svelte

@@ -24,6 +24,7 @@
     let showNodeCountByType = false;
     let nodeCountByType = {} as Record<string, number>;
     let rootTree = [] as TreeNodeWithBase[];
+    let flatTree = [] as TreeNodeWithBase[];
 
     const globalNode: TreeNodeWithBase = {
         id: '',
@@ -45,13 +46,14 @@
     let containerWidth = -1
     let shouldDisplaySideBySide = false;
     $:{
-        shouldDisplaySideBySide = (containerWidth > 600);
+        shouldDisplaySideBySide = (containerWidth > 600) && !showNodeCountByType;
     }
 
     intermediary.observeEvent(ViewProviderEvent.onStoredNodeReferencesUpdated, async () => {
         loading = true;
         const result = await intermediary.getStoredNodeReferences();
         rootTree = result.rootTree as TreeNodeWithBase[];
+        flatTree = result.flatTree as TreeNodeWithBase[];
 
         //insert the global node to the top of the rootNodes list
         rootTree.unshift(globalNode);
@@ -80,6 +82,7 @@
             });
             utils.debugLog(`Store node references took ${result.timeTaken}ms`);
             rootTree = result.rootTree as TreeNodeWithBase[];
+            flatTree = result.flatTree as TreeNodeWithBase[];
 
             //insert the global node to the top of the rootNodes list
             rootTree.unshift(globalNode);
@@ -267,7 +270,9 @@
         <SettingsPage bind:showSettingsPage />
     {/if}
     {#if showNodeCountByType}
-        <NodeCountByTypePage bind:showNodeCountByType bind:nodeCountByType />
+        <span class:hide={inspectNodeTreeNode}>
+            <NodeCountByTypePage bind:showNodeCountByType bind:nodeCountByType bind:flatTree bind:inspectNodeTreeNode />
+        </span>
     {/if}
     {#if loading}
         <Loader />
@@ -298,7 +303,7 @@
             <OdcSetManualIpAddress />
         </div>
     {:else}
-        <div id="header" class={inspectNodeTreeNode && !shouldDisplaySideBySide ? 'hide' : ''}>
+        <div id="header" class:hide={inspectNodeTreeNode && !shouldDisplaySideBySide}>
             <div id="drop-shadow-blocker" />
             <span
                 class="icon-button"