Subgraph Frontend Support

package.json

@@ -33,7 +33,7 @@
     "typescript": "^4.7.4"
   },
   "dependencies": {
-    "@elicdavis/node-flow": "^0.1.11",
+    "@elicdavis/node-flow": "^0.1.12",
     "@fortawesome/fontawesome-free": "^7.2.0",
     "@mkkellogg/gaussian-splats-3d": "^0.4.7",
     "@tanstack/react-query": "^5.101.0",

web/src/components/AppOverlays.tsx

@@ -0,0 +1,12 @@
+import { MessageOverlay } from "@/components/MessageOverlay";
+import { PortTypePickerModal } from "@/features/popups/PortTypePickerModal";
+
+/** Global overlays and store-driven modals (imperative APIs from non-React code). */
+export function AppOverlays() {
+  return (
+    <>
+      <MessageOverlay />
+      <PortTypePickerModal />
+    </>
+  );
+}

web/src/features/editor/EditorContext.tsx

@@ -1,6 +1,7 @@
 import { createContext, useContext } from "react";
 import type { SchemaManager } from "@/lib/schema_manager";
 import type { NodeManager } from "@/lib/node_manager";
+import type { NoteManager } from "@/lib/note_manager";
 import type { ProducerViewManager } from "@/lib/ProducerView/producer_view_manager";
 import type { ThreeApp } from "@/lib/three_app";
 import type { RequestManager } from "@/lib/requests";
@@ -10,6 +11,7 @@ import type { NodeFlowGraph } from "@elicdavis/node-flow";
 export interface EditorContextValue {
   schemaManager: SchemaManager;
   nodeManager: NodeManager;
+  noteManager: NoteManager;
   producerViewManager: ProducerViewManager;
   requestManager: RequestManager;
   threeApp: ThreeApp;

web/src/features/editor/EditorProvider.tsx

@@ -21,6 +21,7 @@ import {
   FlowGraphBootstrapProvider,
   useFlowGraphInit,
 } from "@/features/nodeFlow/FlowGraphBootstrapContext";
+import { useGraphTabStore, activeGraphScope } from "@/stores/graphTabStore";
 
 const viewportSettings: ViewportSettings = {
   renderWireframe: false,
@@ -38,6 +39,27 @@ function EditorModelVersionPoller() {
   return null;
 }
 
+function GraphTabScopeSync({
+  nodeManager,
+  noteManager,
+  schemaManager,
+}: {
+  nodeManager: NodeManager;
+  noteManager: NoteManager;
+  schemaManager: SchemaManager;
+}) {
+  const activeTabId = useGraphTabStore((s) => s.activeTabId);
+
+  useEffect(() => {
+    if (!schemaManager.currentGraph) return;
+    const scope = activeGraphScope(activeTabId);
+    nodeManager.switchGraphScope(scope, schemaManager.currentGraph);
+    noteManager.switchGraphScope(scope, schemaManager.currentGraph);
+  }, [activeTabId, nodeManager, noteManager, schemaManager]);
+
+  return null;
+}
+
 function EditorBootstrap({
   registeredTypes,
   onReady,
@@ -112,6 +134,14 @@ function EditorBootstrap({
         schemaManager.setParameter(param.id, param.data, param.binary);
       });
 
+      nodeManager.setOnSchemaRefreshNeeded(() => {
+        schemaManager.refreshSchema("sub-graph definition changed");
+      });
+
+      requestManager.subscribeToEditorGraphMutations(() => {
+        schemaManager.refreshSchema("graph mutation");
+      });
+
       schemaManager.subscribe((g) => {
         producerViewManager.NewSchema(g);
         nodeManager.updateNodes(g);
@@ -176,6 +206,7 @@ function EditorBootstrap({
       const value: EditorContextValue = {
         schemaManager,
         nodeManager,
+        noteManager,
         producerViewManager,
         requestManager,
         threeApp,
@@ -204,7 +235,16 @@ export function EditorProvider({ children }: { children: ReactNode }) {
     <FlowGraphBootstrapProvider>
       <EditorContext.Provider value={ctx}>
         {children}
-        {ctx && <EditorModelVersionPoller />}
+        {ctx && (
+          <>
+            <GraphTabScopeSync
+              nodeManager={ctx.nodeManager}
+              noteManager={ctx.noteManager}
+              schemaManager={ctx.schemaManager}
+            />
+            <EditorModelVersionPoller />
+          </>
+        )}
         {registeredTypes && !ctx && (
           <EditorBootstrap registeredTypes={registeredTypes} onReady={setCtx} />
         )}

web/src/features/graph/GraphPanel.module.css

@@ -0,0 +1,17 @@
+.panel {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  height: 100%;
+  width: 100%;
+  min-height: 0;
+  min-width: 0;
+}
+
+.body {
+  display: flex;
+  flex: 1;
+  min-height: 0;
+  width: 100%;
+  overflow: hidden;
+}

web/src/features/graph/GraphPanel.tsx

@@ -0,0 +1,14 @@
+import { GraphTabBar } from "./GraphTabBar";
+import { NodeFlowPanel } from "@/features/nodeFlow/NodeFlowPanel";
+import styles from "./GraphPanel.module.css";
+
+export function GraphPanel() {
+  return (
+    <div className={styles.panel}>
+      <GraphTabBar />
+      <div className={styles.body}>
+        <NodeFlowPanel />
+      </div>
+    </div>
+  );
+}

web/src/features/graph/GraphTabBar.module.css

@@ -0,0 +1,40 @@
+.tabBar {
+  display: flex;
+  align-items: stretch;
+  gap: 2px;
+  padding: 4px 8px 0;
+  background: #1e1e1e;
+  border-bottom: 1px solid #333;
+  min-height: 32px;
+  flex-shrink: 0;
+}
+
+.tab {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 10px;
+  border-radius: 4px 4px 0 0;
+  background: transparent;
+  border: 1px solid transparent;
+  cursor: pointer;
+  font-size: 13px;
+  color: #aaa;
+}
+
+.tabActive {
+  background: #2a2a2a;
+  border-color: #444;
+  border-bottom-color: #2a2a2a;
+  color: #fff;
+}
+
+.closeButton {
+  border: none;
+  background: transparent;
+  color: #888;
+  cursor: pointer;
+  padding: 0 2px;
+  font-size: 14px;
+  line-height: 1;
+}

web/src/features/graph/GraphTabBar.tsx

@@ -0,0 +1,39 @@
+import { useGraphTabStore } from "@/stores/graphTabStore";
+import styles from "./GraphTabBar.module.css";
+
+export function GraphTabBar() {
+  const tabs = useGraphTabStore((s) => s.tabs);
+  const activeTabId = useGraphTabStore((s) => s.activeTabId);
+  const setActiveTab = useGraphTabStore((s) => s.setActiveTab);
+  const closeTab = useGraphTabStore((s) => s.closeTab);
+
+  return (
+    <div className={styles.tabBar}>
+      {tabs.map((tab) => {
+        const isActive = tab.id === activeTabId;
+        return (
+          <div
+            key={tab.id}
+            className={`${styles.tab} ${isActive ? styles.tabActive : ""}`}
+            onClick={() => setActiveTab(tab.id)}
+          >
+            <span>{tab.label}</span>
+            {tab.id !== "root" && (
+              <button
+                type="button"
+                className={styles.closeButton}
+                aria-label={`Close ${tab.label}`}
+                onClick={(e) => {
+                  e.stopPropagation();
+                  closeTab(tab.id);
+                }}
+              >
+                ×
+              </button>
+            )}
+          </div>
+        );
+      })}
+    </div>
+  );
+}

web/src/features/layout/AppShell.tsx

@@ -1,8 +1,8 @@
-import { MessageOverlay } from "@/components/MessageOverlay";
+import { AppOverlays } from "@/components/AppOverlays";
 import { ResizablePanels } from "./ResizablePanels";
 import { Sidebar } from "./Sidebar";
 import { ViewportPanel } from "@/features/viewport/ViewportPanel";
-import { NodeFlowPanel } from "@/features/nodeFlow/NodeFlowPanel";
+import { GraphPanel } from "@/features/graph/GraphPanel";
 import { useUiStore } from "@/stores/uiStore";
 
 export function AppShell() {
@@ -17,7 +17,7 @@ export function AppShell() {
         </div>
       )}
       <div id="running-message">Running...</div>
-      <MessageOverlay />
+      <AppOverlays />
       <div style={{ display: "flex", flexDirection: "column", height: "100%" }}>
         <div id="full-page">
           <ResizablePanels
@@ -33,7 +33,7 @@ export function AppShell() {
                     direction="vertical"
                     initialFirstPercent={40}
                     first={<ViewportPanel />}
-                    second={<NodeFlowPanel />}
+                    second={<GraphPanel />}
                   />
                 )}
               </div>

web/src/features/layout/ResizablePanels.tsx

@@ -88,7 +88,7 @@ export function ResizablePanels({
         data-direction={direction}
         onMouseDown={onMouseDown}
       />
-      <div style={{ flex: 1, minHeight: 0, minWidth: 0, display: "flex" }}>
+      <div style={{ flex: 1, minHeight: 0, minWidth: 0, display: "flex", flexDirection: isHorizontal ? "row" : "column" }}>
         {second}
       </div>
     </div>

web/src/features/layout/Sidebar.tsx

@@ -1,6 +1,7 @@
 import { GraphControls } from "@/features/graph/GraphControls";
 import { ProfileSection } from "@/features/profiles/ProfileSection";
 import { VariableSection } from "@/features/variables/VariableSection";
+import { SubGraphSection } from "@/features/subgraph/SubGraphSection";
 import { useUiStore } from "@/stores/uiStore";
 
 export function Sidebar() {
@@ -15,6 +16,7 @@ export function Sidebar() {
           </div>
         )}
         <GraphControls />
+        <SubGraphSection />
         <ProfileSection />
         <VariableSection />
       </div>

web/src/features/nodeFlow/NodeFlowPanel.module.css

@@ -0,0 +1,14 @@
+.container {
+  display: flex;
+  flex: 1;
+  height: 100%;
+  min-height: 0;
+  width: 100%;
+  overflow: hidden;
+}
+
+.canvas {
+  width: 100%;
+  height: 100%;
+  display: block;
+}

web/src/features/nodeFlow/NodeFlowPanel.tsx

@@ -2,6 +2,7 @@ import { useEffect, useRef } from "react";
 import { NodeFlowGraph, Publisher } from "@elicdavis/node-flow";
 import { parameterNodeConfigs } from "./parameterNodeConfigs";
 import { useFlowGraphBootstrap } from "./FlowGraphBootstrapContext";
+import styles from "./NodeFlowPanel.module.css";
 
 export function NodeFlowPanel() {
   const canvasRef = useRef<HTMLCanvasElement>(null);
@@ -14,10 +15,12 @@ export function NodeFlowPanel() {
 
     initialized.current = true;
 
+    // SubGraph Input/Output are registered by NodeManager only while a
+    // sub-graph tab is active (they require a port type at create time).
     const publisher = new Publisher({
       name: "Polyform",
       version: "1.0.0",
-      nodes: parameterNodeConfigs,
+      nodes: { ...parameterNodeConfigs },
     });
     const nodeFlowGraph = new NodeFlowGraph(canvas, {});
     nodeFlowGraph.addPublisher("polyform", publisher);
@@ -29,8 +32,8 @@ export function NodeFlowPanel() {
   }, [registerFlowGraph]);
 
   return (
-    <div id="light-container">
-      <canvas id="light-canvas" ref={canvasRef} />
+    <div className={styles.container}>
+      <canvas className={styles.canvas} ref={canvasRef} />
     </div>
   );
 }