Merge branch 'dev' into backend/graph-interpreter

package.json

@@ -69,7 +69,7 @@
   "dependencies": {
     "@electron/remote": "^2.0.10",
     "@popperjs/core": "^2.11.8",
-    "blix_svelvet": "^1.0.7",
+    "blix_svelvet": "^1.0.13",
     "child_process": "^1.0.2",
     "chokidar": "^3.5.3",
     "cohere-ai": "^5.1.0",

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

@@ -1,11 +1,12 @@
 import logger from "../../utils/logger";
 import { type UUID, UniqueEntity } from "../../../shared/utils/UniqueEntity";
 import type { CoreGraphSubscriber } from "./CoreGraphInteractors";
-import type {
-  AnchorType,
+import {
+  type AnchorType,
   InputAnchorInstance,
   NodeInstance,
   OutputAnchorInstance,
+  checkEdgeDataTypesCompatible,
 } from "../registries/ToolboxRegistry";
 import { get } from "http";
 import type { EdgeToJSON, GraphToJSON, NodeToJSON } from "./CoreGraphExporter";
@@ -179,7 +180,7 @@ export class CoreGraph extends UniqueEntity {
     }
 
     // Data flowing through edge must be of same type for both anchors
-    if (ancFrom.type !== ancTo.type) {
+    if (!checkEdgeDataTypesCompatible(ancFrom.type, ancTo.type)) {
       return {
         status: "error",
         message: "Data flowing through edge must be of same type for both anchors",

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

@@ -29,24 +29,6 @@ export class CoreGraphManager {
     this._toolbox = toolbox;
     this._importer = new CoreGraphImporter(this._toolbox);
     // Test send dummy graph to frontend
-    this.testingSendToClient();
-  }
-
-  testingSendToClient() {
-    this.createGraph(); // TODO: REMOVE; This is just for testing
-    this.createGraph();
-    this.createGraph();
-    this.createGraph();
-
-    // There currently isn't proper implementation to map the CoreGraph to a
-    // UIGraph with the frontend nodes and anchors. Sorry that I didn't do this,
-    // not sure if Jake can help with this cause he made the CoreGraph
-    // setTimeout(() => {
-    //   setInterval(() => {
-    //     if (this._mainWindow)
-    //       this._mainWindow?.apis.clientGraphApi.graphChanged(ids[0], { uuid: ids[0] } as UIGraph);
-    //   }, 5000);
-    // }, 5000);
   }
 
   importGraph(format: string, data: GraphToJSON | string) {

src/electron/lib/registries/ToolboxRegistry.ts

@@ -126,3 +126,10 @@ export class InputAnchorInstance implements AnchorInstance {
 export class OutputAnchorInstance implements AnchorInstance {
   constructor(readonly type: AnchorType, readonly id: string, readonly displayName: string) {}
 }
+
+export function checkEdgeDataTypesCompatible(sourceDataType: string, targetDataType: string) {
+  const dataTypeA = sourceDataType.trim().split(/\s+/).join(" ") || "";
+  const dataTypeB = targetDataType.trim().split(/\s+/).join(" ") || "";
+
+  return dataTypeA === "" || dataTypeB === "" || dataTypeA === dataTypeB;
+}

src/frontend/lib/stores/GraphStore.ts

@@ -45,9 +45,9 @@ export class GraphStore {
       for (const node of Object.keys(oldNodes)) {
         if (graph.nodes[node]) {
           graph.nodes[node].styling = oldNodes[node].styling;
+          graph.nodes[node].inputUIValues = oldNodes[node].inputUIValues;
         }
       }
-
       return graph;
     });
   }

src/frontend/ui/tiles/Graph.svelte

@@ -8,7 +8,8 @@
   import { projectsStore } from "lib/stores/ProjectStore";
   import { graphMenuStore } from "../../lib/stores/GraphContextMenuStore";
   import type { UUID } from "@shared/utils/UniqueEntity";
-  import type { GraphEdge, GraphNode } from "@shared/ui/UIGraph";
+  import { GraphNode, type GraphEdge } from "@shared/ui/UIGraph";
+  import { tick } from "svelte";
   // import { type Anchor } from "blix_svelvet/dist/types"; // TODO: Use to createEdge
 
   // TODO: Abstract panelId to use a generic UUID
@@ -45,16 +46,19 @@
     if ($thisGraphStore) {
       graphNodes = $thisGraphStore.getNodesReactive();
       graphEdges = $thisGraphStore.getEdgesReactive();
+      updateOnGraphEdges($graphEdges);
     }
   }
 
-  function updateOnGraphEdges(graphEdges: GraphEdge[]) {
+  async function updateOnGraphEdges(edges: GraphEdge[]) {
+    // When the tile first loads, `clearAllGraphEdges` and `connectAnchorIds`
+    // only work after the tick - when the new graph anchors have been created
+    await tick();
     if (clearAllGraphEdges) clearAllGraphEdges();
 
-    for (let edge in graphEdges) {
-      console.log("EDGE", edge, graphEdges[edge]);
-      if (!graphEdges.hasOwnProperty(edge)) continue;
-      const edgeData = graphEdges[edge];
+    for (let edge in edges) {
+      if (!edges.hasOwnProperty(edge)) continue;
+      const edgeData = edges[edge];
 
       // Skip if nodes don't exist
       // const fromNode = $graphNodes.find(node => node.id === edgeData.nodeFrom)
@@ -78,11 +82,6 @@
   // Only updates when _graphId_ changes
   $: updateOnGraphId(graphId);
 
-  function addNode() {
-    $thisGraphStore?.addNode("hello-plugin.hello", getGraphCenter());
-    // $thisGraphStore?.addNode();
-  }
-
   function getGraphCenter() {
     return {
       x: $dimensions.width / 2 - $translation.x / $zoom,

src/frontend/ui/utils/graph/PluginNode.svelte

@@ -1,9 +1,8 @@
 <script lang="ts">
   import { GraphNode, NodeStylingStore } from "@shared/ui/UIGraph";
-  import { Anchor, Node } from "blix_svelvet";
+  import { Anchor, DefaultAnchor, Node, type CSSColorString } from "blix_svelvet";
   import { toolboxStore } from "lib/stores/ToolboxStore";
   import NodeUiFragment from "./NodeUIFragment.svelte";
-  import PluginEdge from "./PluginEdge.svelte";
   import { createEventDispatcher } from "svelte";
 
   const dispatch = createEventDispatcher();
@@ -27,6 +26,22 @@
   // node.inputUIValues = new AnchorValueStore();
 
   const nodePos = node.styling.pos;
+
+  function stringToColor(str: string): CSSColorString {
+    let hash = 0;
+    str.split("").forEach((char) => {
+      hash = char.charCodeAt(0) + ((hash << 5) - hash);
+    });
+
+    let colour = "#";
+
+    for (let i = 0; i < 3; i++) {
+      const value = (hash >> (i * 8)) & 0xff;
+      colour += value.toString(16).padStart(2, "0");
+    }
+
+    return colour as CSSColorString;
+  }
 </script>
 
 {#if svelvetNodeId !== ""}
@@ -41,8 +56,6 @@ height="{graphNode.dims.h}" -->
     borderColor="#ffffff"
     borderWidth="{3}"
     borderRadius="{10}"
-    inputs="{2}"
-    outputs="{1}"
   >
     <div class="node">
       <div class="header">
@@ -61,26 +74,63 @@ height="{graphNode.dims.h}" -->
       {#if $toolboxNode}
         <div class="anchors inputs">
           {#each $toolboxNode.inputs as input}
+            {@const color = stringToColor(input.type)}
             <Anchor
-              on:connection="{() => dispatch('connection', { input })}"
-              on:disconnection="{() => dispatch('disconnection', { input })}"
+              input
+              dataType="{input.type || ''}"
+              bgColor="{color}"
               id="{panelId}_{input.id}"
               direction="west"
-              edge="{PluginEdge}"
-              input
-            />
+              on:connection="{() => dispatch('connection', { input })}"
+              on:disconnection="{() => dispatch('disconnection', { input })}"
+              let:connecting
+              let:hovering
+            >
+              {#if hovering}
+                <div class="anchorTooltip">
+                  {input.type || "any"}
+                </div>
+              {/if}
+              <DefaultAnchor
+                input="{true}"
+                output="{false}"
+                connecting="{connecting}"
+                hovering="{false}"
+                bgColor="{color}"
+                connected="{false}"
+              />
+            </Anchor>
             <!-- bind:connections={$nodeConns} -->
           {/each}
         </div>
         <div class="anchors outputs">
           {#each $toolboxNode.outputs as output}
+            {@const color = stringToColor(output.type)}
             <Anchor
-              on:connection="{() => dispatch('connection', { output })}"
-              on:disconnection="{() => dispatch('disconnection', { output })}"
+              output
+              dataType="{output.type || ''}"
+              bgColor="{color}"
               id="{panelId}_{output.id}"
               direction="east"
-              output
-            />
+              on:connection="{() => dispatch('connection', { output })}"
+              on:disconnection="{() => dispatch('disconnection', { output })}"
+              let:connecting
+              let:hovering
+            >
+              {#if hovering}
+                <div class="anchorTooltip">
+                  {output.type || "any"}
+                </div>
+              {/if}
+              <DefaultAnchor
+                input="{true}"
+                output="{false}"
+                connecting="{connecting}"
+                hovering="{false}"
+                bgColor="{color}"
+                connected="{false}"
+              />
+            </Anchor>
           {/each}
         </div>
       {/if}
@@ -135,6 +185,15 @@ height="{graphNode.dims.h}" -->
     right: -24px;
     top: 40px;
   }
+
+  .anchorTooltip {
+    position: absolute;
+    background: #444444;
+    color: white;
+    border-radius: 2px;
+    padding: 0.2em;
+    top: -1.5em;
+  }
   .header {
     display: flex;
     justify-content: space-between;