refactor: Upgrade svelvet

examples/websocket-relay/relay-app/package.json

@@ -32,13 +32,12 @@
     "tailwindcss": "^3.3.1",
     "tslib": "^2.4.1",
     "typescript": "^5.0.0",
-    "vite": "^4.2.0",
+    "vite": "^4.4.2",
     "vitest": "^0.25.3"
   },
   "type": "module",
   "dependencies": {
-    "@zerodevx/svelte-json-view": "^1.0.3",
     "clipboard-copy": "^4.0.1",
-    "svelvet": "github:bgins/Svelvet#custom-for-homestar"
+    "svelvet": "8.1.0"
   }
 }

examples/websocket-relay/relay-app/src/app.css

@@ -12,3 +12,9 @@
   font-weight: 400;
   src: url("/IBMPlexMono-Regular.ttf") format("truetype");
 }
+
+
+/* Svelvet */
+.label-wrapper .default-label {
+  @apply font-sans text-xs !important;
+}

examples/websocket-relay/relay-app/src/components/WorkflowDetail.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
-  import { JsonView } from "@zerodevx/svelte-json-view";
+  // import { JsonView } from "@zerodevx/svelte-json-view";
   import { slide } from "svelte/transition";
   import { quartOut } from "svelte/easing";
 
-  import { workflowOneJson, workflowTwoJson } from "$lib/workflow";
+  // import { workflowOneJson, workflowTwoJson } from "../lib/workflow";
+  // import * as workflows from "$lib/workflow";
 </script>
 
 <div
@@ -14,13 +15,13 @@
     <div class="p-4 overflow-y-auto scrollbar-hide">
       <div class="text-lg uppercase font-medium">Workflow One</div>
       <div class="jsonview">
-        <JsonView json={workflowOneJson} />
+        <!-- <JsonView json={workflowOneJson} /> -->
       </div>
     </div>
     <div class="p-4 overflow-y-auto scrollbar-hide">
       <div class="text-lg uppercase font-medium">Workflow Two</div>
       <div class="jsonview">
-        <JsonView json={workflowTwoJson} />
+        <!--  <JsonView json={workflowTwoJson} /> -->
       </div>
     </div>
   </div>

examples/websocket-relay/relay-app/src/components/node/Edge.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+  import { Edge } from "svelvet";
+
+  export let arrowDirection: string = 'left'
+</script>
+
+<Edge let:path labelColor="white">
+	<defs>
+		<marker
+			id="arrow"
+			viewBox="0 0 10 10"
+			refX="11"
+			refY="5"
+			markerWidth="6"
+			markerHeight="6"
+			orient="auto-start-reverse"
+      fill="#000000"
+		>
+			<path d="M 0 0 L 10 5 L 0 10 z" />
+		</marker>
+	</defs>
+	<path
+		d={path}
+    {...(arrowDirection === 'right' ? { 'marker-end': "url(#arrow)" } : { 'marker-start': "url(#arrow)" })}
+	/>
+</Edge>
+
+<style>
+  path {
+    stroke: #000000;
+    stroke-width: 2px;
+  }
+</style>

examples/websocket-relay/relay-app/src/components/node/Node.svelte

@@ -0,0 +1,123 @@
+<script lang="ts">
+  import { Anchor, Node } from "svelvet";
+  import type { CSSColorString } from "svelvet";
+
+  import { base64CatStore, edgeStore, firstWorkflowToRunStore } from "../../stores";
+  import type { Position } from "$lib/node";
+  import type { Task } from "$lib/task";
+  import Edge from "./Edge.svelte";
+
+  export let base64Cat: string = $base64CatStore;
+  export let bgColor: CSSColorString = "white";
+  export let borderColor: CSSColorString = "transparent";
+  export let dimensions = {
+    height: 150,
+    width: 150,
+  };
+  export let label = "Default Node";
+  export let tempcat = false;
+  export let id: string;
+  export let position: Position;
+  export let task: Task | null = null;
+
+  const matchingEdge = $edgeStore.find((edge) => edge?.target === id)
+</script>
+
+<Node
+  {id}
+  {...dimensions}
+  {bgColor}
+  {borderColor}
+  {label}
+  {position}
+>
+  <div class="relative w-full h-full">
+    {#if task === null}
+      {#if !tempcat}
+        <img
+          src={`data:image/png;base64,${base64Cat}`}
+          draggable="false"
+          alt="A cat in space chilling on a synth."
+        />
+        <Anchor
+          id="1-east"
+          multiple
+          invisible
+          direction="east"
+          dynamic
+        />
+      {:else}
+        <img
+          src={`data:image/png;base64,${base64Cat}`}
+          draggable="false"
+          alt="A cat in space chilling on a synth."
+        />
+        <Anchor
+          id={`${id}-west`}
+          multiple
+          invisible
+          direction="west"
+          connections={[["1", "1-east"]]}
+          dynamic
+        >
+          <Edge slot="edge" />
+        </Anchor>
+      {/if}
+    {:else if task.status === "replayed"}
+      <img
+        src={`data:image/png;base64,${task.receipt?.out[1]}`}
+        draggable="false"
+        style="filter: opacity(75%)"
+        alt={`A cat image after a ${task.operation} performed by Homestar. The operation was replayed.`}
+      />
+      {#if matchingEdge}
+        <!-- If difference between `target` and `source` is greater than 1, we're breaking to a new row, so we'll use north/south directions -->
+        {#if (matchingEdge.target - matchingEdge.source) > 1}
+          <Anchor
+            id={`${id}-north`}
+            multiple
+            invisible
+            direction="north"
+            connections={[[`${matchingEdge.source}`, `${matchingEdge.source}-south`]]}
+            edgeLabel={matchingEdge.label}
+            dynamic
+          >
+            <Edge slot="edge" />
+          </Anchor>
+        {:else}
+          <Anchor
+            id={`${id}-west`}
+            multiple
+            invisible
+            direction="west"
+            connections={[[`${matchingEdge.source}`, `${matchingEdge.source}-east`]]}
+            edgeLabel={matchingEdge.label}
+            dynamic
+          >
+            <Edge slot="edge" />
+          </Anchor>
+        {/if}
+      {/if}
+    {:else}
+      <img
+        src={`data:image/png;base64,${task.receipt?.out[1]}`}
+        draggable="false"
+        alt={`A cat image after a ${task.operation} performed by Homestar`}
+      />
+    {/if}
+    <Anchor
+      id={`${id}-east`}
+      multiple
+      invisible
+      direction="east"
+      dynamic
+    />
+    <Anchor
+      id={`${id}-south`}
+      multiple
+      invisible
+      direction="south"
+      dynamic
+    />
+  </div>
+</Node>

examples/websocket-relay/relay-app/src/lib/node.ts

@@ -0,0 +1,4 @@
+export type Position = {
+  x: number;
+  y: number;
+};

examples/websocket-relay/relay-app/src/lib/workflow.ts

@@ -1,6 +1,6 @@
 import { get as getStore } from "svelte/store";
 
-import { base64CatStore } from "../stores";
+import { base64CatStore, firstWorkflowToRunStore } from "../stores";
 import type { Receipt, TaskOperation, TaskStatus, Meta } from "$lib/task";
 
 import {
@@ -29,6 +29,7 @@ export type WorkflowId = "one" | "two";
 // RUN
 export async function run(workflowId: WorkflowId) {
   let channel = getStore(channelStore);
+  const firstWorkflowToRun = getStore(firstWorkflowToRunStore);
   const tasks = getStore(taskStore);
 
   if (!channel) {
@@ -47,6 +48,11 @@ export async function run(workflowId: WorkflowId) {
     failedPingCount: 0,
   });
 
+  // Record the first workflow that ran
+  if (!firstWorkflowToRun) {
+    firstWorkflowToRunStore.set(workflowId)
+  }
+
   // Set workflow status to working
   workflowStore.update((workflows) => ({
     ...workflows,

examples/websocket-relay/relay-app/src/routes/+page.svelte

@@ -1,16 +1,15 @@
 <script lang="ts">
-  import type { NodeType } from "svelvet";
   import { onDestroy } from "svelte";
-  import Svelvet from "svelvet";
+  import { Svelvet } from "svelvet";
 
   import { connect } from "$lib/channel";
-  import { base64CatStore, edgeStore, nodeStore } from "../stores";
+  import { base64CatStore, nodeStore } from "../stores";
   import Controls from "$components/Controls.svelte";
   import Header from "$components/Header.svelte";
   import WorkflowDetail from "$components/WorkflowDetail.svelte";
+  import Node from "$components/node/Node.svelte";
 
   let nodes: any[] = [];
-  let edges: any[] = [];
   let showWorkflowModal = false;
   let windowHeight = window.innerHeight;
   let windowWidth = window.innerWidth;
@@ -19,11 +18,7 @@
     nodes = store;
   });
 
-  const unsubscribeEdgeStore = edgeStore.subscribe((store) => {
-    edges = store;
-  });
-
-  function handleWindowResize(event: Event) {
+  function handleWindowResize() {
     windowHeight = window.innerHeight;
     windowWidth = window.innerWidth;
   }
@@ -40,30 +35,32 @@
   }
 
   // Set spacecat unmodified image
-  initializeSpaceCat();
+  const fetchCat = initializeSpaceCat();
 
   // Connect to websocket server
   connect();
 
   onDestroy(() => {
     unsubscribeNodeStore();
-    unsubscribeEdgeStore();
   });
 </script>
 
 <svelte:window on:resize={handleWindowResize} />
 
 <Header on:workflow={toggleWorflowModal} />
+
 {#if showWorkflowModal}
   <WorkflowDetail />
 {/if}
+
 <Controls />
-<Svelvet
-  {nodes}
-  {edges}
-  width={windowWidth}
-  height={windowHeight}
-  initialZoom={1.25}
-  initialLocation={{ x: 0, y: 0 }}
-  boundary={{ x: windowWidth + 200, y: windowHeight + 200 }}
-/>
+
+{#await fetchCat then _}
+  <Svelvet width={windowWidth} height={windowHeight} zoom={1.25}>
+    {#key nodes}
+      {#each nodes as node}
+        <Node {...node} />
+      {/each}
+    {/key}
+  </Svelvet>
+{/await}