Merge branch 'backend/graph-interpreter' into dev

src/electron/lib/core-graph/CoreGraphManager.ts

@@ -12,6 +12,7 @@ import { CoreGraphExporter, type GraphToJSON } from "./CoreGraphExporter";
 import { NodeInstance } from "../registries/ToolboxRegistry";
 import { Blix } from "../Blix";
 import type { INodeUIInputs, QueryResponse } from "../../../shared/types";
+import type { MediaOutputId } from "../../../shared/types/media";
 
 const GRAPH_UPDATED_EVENT = new Set([CoreGraphUpdateEvent.graphUpdated]);
 
@@ -25,9 +26,12 @@ export class CoreGraphManager {
   private _subscribers: { [key: UUID]: CoreGraphSubscriber<any>[] };
   private _toolbox: ToolboxRegistry;
   private readonly _mainWindow: MainWindow | undefined;
+  // private _importer: CoreGraphImporter;
+  private _outputIds: { [key: UUID]: MediaOutputId };
 
   constructor(toolbox: ToolboxRegistry, mainWindow?: MainWindow) {
     this._graphs = {};
+    this._outputIds = {};
     this._subscribers = {};
     this._toolbox = toolbox;
     this._mainWindow = mainWindow;
@@ -77,7 +81,10 @@ export class CoreGraphManager {
     if (this._graphs[graphUUID] === undefined)
       return { status: "error", message: "Graph does not exist" };
     const res = this._graphs[graphUUID].removeNode(nodeUUID);
-    if (res.status === "success") this.onGraphUpdated(graphUUID, GRAPH_UPDATED_EVENT, participant);
+    if (res.status === "success") {
+      this.onGraphUpdated(graphUUID, GRAPH_UPDATED_EVENT, participant);
+      delete this._outputIds[nodeUUID];
+    }
     return res;
   }
 
@@ -113,6 +120,13 @@ export class CoreGraphManager {
       const uiConfigs = this._toolbox.getNodeInstance(signature).uiConfigs;
       const changes = nodeUIInputs.changes;
 
+      if (signature === "blix.output") {
+        this._outputIds[nodeUUID] = nodeUIInputs.inputs.outputId as string;
+        this._mainWindow?.apis.mediaClientApi.onMediaOutputIdsChanged(
+          new Set(Object.values(this._outputIds))
+        );
+      }
+
       let shouldUpdate = false;
       for (const change of changes) {
         if (uiConfigs[change].updatesBackend) {

src/frontend/lib/api/apis/MediaClientApi.ts

@@ -1,9 +1,13 @@
-import type { MediaOutput } from "@shared/types/media";
+import type { MediaOutput, MediaOutputId } from "@shared/types/media";
 import type { ElectronWindowApi } from "electron-affinity/window";
 import { mediaStore } from "@frontend/lib/stores/MediaStore";
 
 export class MediaClientApi implements ElectronWindowApi<MediaClientApi> {
   outputChanged(mediaOutput: MediaOutput): void {
     mediaStore.refreshStore(mediaOutput);
   }
+
+  public onMediaOutputIdsChanged(outputIds: Set<MediaOutputId>) {
+    mediaStore.updateOutputIds(outputIds);
+  }
 }

src/frontend/lib/stores/MediaStore.ts

@@ -8,6 +8,7 @@ type MediaOutputs = {
 
 class MediaStore {
   private store = writable<MediaOutputs>({});
+  private outputIds = writable<Set<MediaOutputId>>();
 
   public refreshStore(media: MediaOutput) {
     // Refresh media store
@@ -17,6 +18,10 @@ class MediaStore {
     });
   }
 
+  public updateOutputIds(ids: Set<MediaOutputId>) {
+    this.outputIds.set(ids);
+  }
+
   // Stop listening for graph changes
   // public stopMediaReactive(graphUUID: GraphUUID, outputNodeUUID: GraphNodeUUID) {
   public async stopMediaReactive(mediaId: MediaOutputId) {
@@ -37,9 +42,9 @@ class MediaStore {
     });
   }
 
-  public getOutputMediaIdsReactive() {
-    return derived(graphMall, (graph) => {
-      return Object.keys(graph);
+  public getMediaOutputIdsReactive() {
+    return derived(this.outputIds, (store) => {
+      return store;
     });
   }
 

src/frontend/ui/tiles/Media.svelte

@@ -3,29 +3,13 @@
   import Image from "../utils/mediaDisplays/Image.svelte";
   import TextBox from "../utils/mediaDisplays/TextBox.svelte";
   import { mediaStore } from "../../lib/stores/MediaStore";
-  import type { GraphNode, GraphNodeUUID, GraphUUID } from "@shared/ui/UIGraph";
-  import { graphMall } from "../../lib/stores/GraphStore";
-  import { get, writable, type Readable } from "svelte/store";
+  import type { GraphNodeUUID, GraphUUID } from "@shared/ui/UIGraph";
+  import { writable, type Readable } from "svelte/store";
   import type { MediaOutput } from "@shared/types/media";
   import { onDestroy } from "svelte";
   import ColorDisplay from "../utils/mediaDisplays/ColorDisplay.svelte";
 
-  const graphUUIDs = graphMall.getAllGraphUUIDsReactive();
-
-  $: outputNodesByGraphUUID = getAllOutputNodesByGraphUUID($graphUUIDs);
-  type NodesByUUID = Readable<{ [key: GraphNodeUUID]: GraphNode }>;
-
-  function getAllOutputNodesByGraphUUID(graphUUIDs: GraphUUID[]): {
-    [key: GraphUUID]: NodesByUUID;
-  } {
-    let res: { [key: GraphUUID]: NodesByUUID } = {};
-
-    for (let uuid of graphUUIDs) {
-      res[uuid] = graphMall.getGraph(uuid)?.getOutputNodesByIdReactive();
-    }
-
-    return res;
-  }
+  const mediaOutputIds = mediaStore.getMediaOutputIdsReactive();
 
   let mediaId = writable("default");
   let oldMediaId: string | null = null;
@@ -54,14 +38,14 @@
     unsubMedia();
   });
 
-  function handleSelect(e: Event) {
-    return;
-    const value = (e.target as HTMLSelectElement).value;
-    if (!value) return;
+  // function handleSelect(e: Event) {
+  //   return;
+  //   const value = (e.target as HTMLSelectElement).value;
+  //   if (!value) return;
 
-    const [graphUUID, nodeUUID] = value.split("/");
-    selectedNode = { graphUUID, outNode: nodeUUID };
-  }
+  //   const [graphUUID, nodeUUID] = value.split("/");
+  //   selectedNode = { graphUUID, outNode: nodeUUID };
+  // }
 
   type MediaDisplay = {
     component: any;
@@ -101,21 +85,14 @@
 <div class="fullPane">
   <div class="hover">
     <input type="text" bind:value="{$mediaId}" />
-    <select on:change="{handleSelect}">
-      <option selected disabled value> --- </option>
-      {#each Object.keys(outputNodesByGraphUUID) as graphUUID}
-        {@const outputNodes = get(outputNodesByGraphUUID[graphUUID])}
-        <option value="{graphUUID}" disabled>
-          --- {graphUUID.slice(0, 6)} ---
-        </option>
-
-        {#each Object.keys(outputNodes) as outputId}
-          {@const output = outputNodes[outputId]}
-          <option value="{graphUUID}/{output.uuid}">
-            {output.uuid.slice(0, 6)}
-          </option>
+    <select bind:value="{$mediaId}">
+      {#if $mediaOutputIds}
+        {#each Array.from($mediaOutputIds) as id}
+          <option value="{id}">{id}</option>
         {/each}
-      {/each}
+      {:else}
+        <option selected disabled value>No Outputs</option>
+      {/if}
     </select>
   </div>