Attempt to fix Blix instantiation order

src/electron/lib/Blix.ts

@@ -1,5 +1,5 @@
 import { CommandRegistry } from "./registries/CommandRegistry";
 import { NodeInstance, ToolboxRegistry } from "./registries/ToolboxRegistry";
 import { TileRegistry } from "./registries/TileRegistry";
 import { ProjectManager } from "./projects/ProjectManager";
 import type { MainWindow } from "./api/apis/WindowApi";
@@ -9,9 +9,9 @@
 import type { UUID } from "../../shared/utils/UniqueEntity";
 import type { UIGraph } from "../../shared/ui/UIGraph";
 import { blixCommands } from "./BlixCommands";
 import logger from "../utils/logger";
 import { AiManager } from "./ai/AiManager";
 import { NodeBuilder, NodeUIBuilder } from "./plugins/builders/NodeBuilder";
 
 // Encapsulates the backend representation for
 // the entire running Blix application
@@ -60,14 +60,8 @@
     // this._aiManager = new AiManager(mainWindow);
     this._projectManager = new ProjectManager(mainWindow);
 
-    // Add subscribers
-    const graphSubscriber = new IPCGraphSubscriber();
-
-    graphSubscriber.listen = (graphId: UUID, newGraph: UIGraph) => {
-      mainWindow.apis.graphClientApi.graphChanged(graphId, newGraph);
-    };
-
-    this._graphManager.addAllSubscriber(graphSubscriber);
+    this.initSubscribers();
+    mainWindow.apis.utilClientApi.onBlixReady();
 
     // testStuffies(this);
 
@@ -84,6 +78,16 @@
     // }, 3000);
   }
 
+  private initSubscribers() {
+    const graphSubscriber = new IPCGraphSubscriber();
+
+    graphSubscriber.listen = (graphId: UUID, newGraph: UIGraph) => {
+      this.mainWindow?.apis.graphClientApi.graphChanged(graphId, newGraph);
+    };
+
+    this._graphManager.addAllSubscriber(graphSubscriber);
+  }
+
   // TODO: Move these to a Utils.ts or something like that
   sendInformationMessage(message: string) {
     this._mainWindow.apis.utilClientApi.showToast({ message, type: "info" });

src/electron/lib/api/MainApi.ts

@@ -31,15 +31,7 @@ export function exposeMainApis(blix: Blix) {
 
   // @ts-ignore: no-var-requires
   global.mainApis = apis as any;
-
-  // Return callback to initialize APIs
-  // once everything else is ready
-  return async () => {
-    // apis.projectApi.init();
-    // apis.pluginApi.init();
-    apis.graphApi.init();
-    // apis.toolboxApi.init();
-  };
+  return apis;
 }
 
 export type MainApis = ReturnType<typeof exposeMainApis>;

src/electron/lib/api/apis/GraphApi.ts

@@ -1,28 +1,17 @@
 import type { ElectronMainApi } from "electron-affinity/main";
 import type { Blix } from "../../Blix";
 import { type UUID } from "../../../../shared/utils/UniqueEntity";
 import { IPCGraphSubscriber } from "../../core-graph/CoreGraphInteractors";
 import { UIGraph } from "@shared/ui/UIGraph";
 import { NodeInstance } from "../../registries/ToolboxRegistry";
 import { type NodeSignature } from "@shared/ui/ToolboxTypes";
 
 // Graphs across projects are stored homogeneously and referenced by UUID
 export class GraphApi implements ElectronMainApi<GraphApi> {
   private readonly _blix: Blix;
-  private readonly graphSubscriber: IPCGraphSubscriber;
 
   constructor(blix: Blix) {
     this._blix = blix;
-    this.graphSubscriber = new IPCGraphSubscriber();
-  }
-
-  // Called in index.ts after Blix has been initialized
-  async init() {
-    // Add IPC subscriber to listen for graph changes and alert the frontend
-    this._blix.graphManager.addAllSubscriber(this.graphSubscriber);
-    this.graphSubscriber.listen = (graphId: UUID, newGraph: UIGraph) => {
-      this._blix.mainWindow?.apis.graphClientApi.graphChanged(graphId, newGraph);
-    };
   }
 
   // TODO: Implement these properly

src/frontend/lib/api/apiInitializer.ts

@@ -10,21 +10,16 @@ import type { ToolboxApi } from "@electron/lib/api/apis/ToolboxApi";
 
 // Window APIs
 import { CommandClientApi } from "./apis/CommandClientApi";
-
-// stores
-import { blixStore } from "../stores/BlixStore";
-import { commandStore } from "../stores/CommandStore";
 import { GraphClientApi } from "./apis/GraphClientApi";
 import { ProjectClientApi } from "./apis/ProjectClientApi";
 import { UtilClientApi } from "./apis/UtilClientApi";
-import { toolboxStore } from "../stores/ToolboxStore";
 import { ToolboxClientApi } from "./apis/ToolboxClientApi";
 
 /**
  * Initializes the application by exposing the window IPC APIs to the main
  * process and binding the main process IPC APIs to the window.
  */
-export async function initializeAPIs() {
+export async function initAPIs() {
   exposeWindowApis();
   window.apis = await bindMainApis();
 }

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

@@ -1,8 +1,14 @@
 import type { ElectronWindowApi } from "electron-affinity/window";
 import { toastStore, type ToastOptions } from "../../stores/ToastStore";
+import { blixStore, setInitialStores } from "../../../lib/stores/BlixStore";
 
 export class UtilClientApi implements ElectronWindowApi<UtilClientApi> {
   showToast(options: Partial<ToastOptions>) {
     toastStore.trigger(options);
   }
+
+  async onBlixReady() {
+    await setInitialStores();
+    blixStore.update((state) => ({ ...state, blixReady: true }));
+  }
 }

src/frontend/lib/stores/BlixStore.ts

@@ -1,6 +1,9 @@
 import { writable } from "svelte/store";
+import { commandStore } from "./CommandStore";
+import { toolboxStore } from "./ToolboxStore";
 
 interface BlixStore {
+  blixReady: boolean;
   systemInfo: {
     nodeVersion: string;
     systemPlatform: string;
@@ -12,10 +15,48 @@ interface BlixStore {
 // Currently used to store some startup config. Can potentially be used to store
 // some other global state in the future.
 export const blixStore = writable<BlixStore>({
+  blixReady: false,
   systemInfo: {
     nodeVersion: "",
     systemPlatform: "",
     systemType: "",
     systemVersion: "",
   },
 });
+
+export async function setInitialStores() {
+  // BLix store
+  const res = await window.apis.utilApi.getSystemInfo();
+  blixStore.update((state) => ({ ...state, systemInfo: res }));
+
+  // Command store
+  const command = await window.apis.commandApi.getCommands();
+  commandStore.refreshStore(command);
+
+  // Toolbox store
+  const node = await window.apis.toolboxApi.getNodes();
+  toolboxStore.refreshStore(node);
+
+  // Graph store
+  // const allGraphIds = await window.apis.graphApi.getAllGraphUUIDs();
+  // console.log("ALL GRAPHS", allGraphIds);
+
+  // for (const graphId of allGraphIds) {
+  //   const graph = await window.apis.graphApi.getGraph(graphId);
+  // console.log("BACKEND GRAPH", graph.getNodes);
+
+  // TODO: REMOVE; This is just for testing
+  // const uiGraph = new UIGraph(graphId);
+  // const node1 = new GraphNode("1");
+  // const node2 = new GraphNode("2");
+  // const node3 = new GraphNode("a");
+  // uiGraph.nodes[node1.uuid] = node1;
+  // uiGraph.nodes[node2.uuid] = node2;
+  // uiGraph.nodes[node3.uuid] = node3;
+  // node1.pos.x = 100;
+  // node1.pos.y = 100;
+
+  // graphMall.refreshGraph(uiGraph.uuid, uiGraph);
+  // }
+  // exportLayout()
+}

src/frontend/ui/base/App.svelte

@@ -1,46 +1,43 @@
 <script lang="ts">
   import { onMount } from "svelte";
-  import { init } from "../../lib/Blix";
   import { blixStore } from "../../lib/stores/BlixStore";
   import Navbar from "./Navbar.svelte";
   import Layout from "./layout/Layout.svelte";
   import Palette from "./palette/Palette.svelte";
   import Toasts from "../../ui/utils/toasts/Toasts.svelte";
+  import { initAPIs } from "lib/api/apiInitializer";
 
   import Test from "./Test.svelte";
 
-  let isLoading = false;
   const testing = false;
 
   onMount(async () => {
-    isLoading = true;
-    await init();
-    isLoading = false;
+    await initAPIs();
   });
 </script>
 
 <Toasts />
 
 {#if testing}
-  {#if isLoading}
+  {#if $blixStore.blixReady}
+    <Test />
+  {:else}
     <div class="flex h-screen w-screen items-center justify-center bg-zinc-800 p-0">
       <span class="text-5xl text-purple-400">Loading</span>
     </div>
-  {:else}
-    <Test />
   {/if}
-{:else if isLoading}
-  <div class="flex h-screen w-screen items-center justify-center bg-zinc-800 p-0">
-    <span class="text-5xl text-purple-400">Loading</span>
-  </div>
-{:else}
+{:else if $blixStore.blixReady}
   <div class="h-screen w-screen bg-zinc-800 p-0">
     <div class="navbar {$blixStore.systemInfo.systemPlatform === 'darwin' ? 'pl-20' : ''}">
       <Navbar />
     </div>
     <div class="layout"><Layout /></div>
     <Palette />
   </div>
+{:else}
+  <div class="flex h-screen w-screen items-center justify-center bg-zinc-800 p-0">
+    <span class="text-5xl text-purple-400">Loading</span>
+  </div>
 {/if}
 
 <style lang="postcss" global>

src/index.ts

@@ -59,12 +59,11 @@ app.on("ready", async () => {
   // coreGraphInterpreter.run();
 
   blix = new Blix();
-  const initMainApis = exposeMainApis(blix);
+  exposeMainApis(blix);
 
   createMainWindow().then(async () => {
     if (mainWindow) {
       await blix.init(mainWindow);
-      initMainApis();
     } else {
       app.quit();
     }