feat: improve loading times

frontend/src/lib/components/graph/Graph.svelte

@@ -24,6 +24,7 @@
   const status = graph.status;
   const nodes = graph.nodes;
   const edges = graph.edges;
+  const graphId = graph.id;
 
   let camera: OrthographicCamera;
   const minZoom = 1;
@@ -523,8 +524,6 @@
 
     const clickedNodeId = getNodeIdFromEvent(event);
 
-    console.log({ clickedNodeId });
-
     if (clickedNodeId !== -1) {
       if (activeNode) {
         if (!activeNode?.tmp?.isMoving && !event.ctrlKey && !event.shiftKey) {
@@ -676,7 +675,9 @@
       to={{ x: mousePosition[0], y: mousePosition[1] }}
     />
   {/if}
-  <GraphView {nodes} {edges} {cameraPosition} />
+  {#key $graphId}
+    <GraphView {nodes} {edges} {cameraPosition} />
+  {/key}
 {:else if $status === "loading"}
   <span>Loading</span>
 {:else if $status === "error"}

frontend/src/lib/components/graph/GraphView.svelte

@@ -78,6 +78,7 @@
     width: 0px;
     height: 0px;
     transform: scale(calc(var(--cz) * 0.1));
-    --input-opacity: calc((var(--cz) - 2) / 5);
+    display: var(--node-display, block);
+    opacity: calc((var(--cz) - 2) / 5);
   }
 </style>

frontend/src/lib/components/graph/stores.ts

@@ -4,7 +4,7 @@ import { writable, type Writable } from "svelte/store";
 import { Color } from "three/src/math/Color.js";
 
 export const activeNodeId: Writable<number> = writable(-1);
-export const selectedNodes: Writable<Set<number> | null> = writable(null);
+export const selectedNodes: Writable<Set<number> | null> = writable(new Set());
 
 export const activeSocket: Writable<Socket | null> = writable(null);
 export const hoveredSocket: Writable<Socket | null> = writable(null);