Feat: add WorkflowDetail, but comment out until we decide where to pu…

…t it

package.json

@@ -59,6 +59,7 @@
   "dependencies": {
     "@fission-codes/homestar": "^1.0.0",
     "@oddjs/odd": "0.37.0",
+    "@zerodevx/svelte-json-view": "^1.0.7",
     "chart.js": "^4.4.0",
     "clipboard-copy": "^4.0.1",
     "iso-base": "^2.0.1",

src/lib/workflows/index.ts

@@ -98,7 +98,7 @@ export type Builder = {
 
 export const WORKFLOWS_DIR = odd.path.directory('private', 'workflows')
 
-const prepareWorkflow = async (payload: TemplateWorkflow, dataUrl: string) => {
+export const prepareWorkflow = async (payload: TemplateWorkflow, dataUrl: string) => {
   payload.workflow.tasks[0].run.input.args[0] = dataUrl
 
   const builtWorkflow = await workflowBuilder(payload)

src/routes/workflows/components/RunsAndReceipts.svelte

@@ -5,10 +5,11 @@
   import '$routes/workflows/components/graph/graph.css'
   import { themeStore } from '$lib/stores'
   import Actions from '$routes/workflows/components/graph/Actions.svelte'
+  import ImageModal from '$routes/workflows/components/graph/ImageModal.svelte'
   import ImageNode from '$routes/workflows/components/graph/ImageNode.svelte'
   import Node from '$routes/workflows/components/graph/Node.svelte'
   import Runs from '$routes/workflows/components/Runs.svelte'
-  import ImageModal from '$routes/workflows/components/graph/ImageModal.svelte'
+  import WorkflowDetail from '$routes/workflows/components/WorkflowDetail.svelte'
 
   export let workflow
 
@@ -63,6 +64,8 @@
 
 <svelte:window on:resize={handleWindowResize} />
 
+<!-- <WorkflowDetail workflowRun={selectedRun} uploadedImage={workflow.savedImage} /> -->
+
 <div class="flex flex-row w-full px-4 md:px-0 bg-base-200 md:bg-base-100">
   <div
     class="w-[{columnWidth}px] md:border-r {$themeStore.selectedTheme ===

src/routes/workflows/components/WorkflowDetail.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+  import { JsonView } from '@zerodevx/svelte-json-view'
+  import { slide } from 'svelte/transition'
+  import { quartOut } from 'svelte/easing'
+
+  import { prepareWorkflow } from '$lib/workflows'
+
+  export let uploadedImage
+  export let workflowRun
+
+  let preparedWorkflow
+
+  const processWorkflow = async () => {
+    preparedWorkflow = await prepareWorkflow(workflowRun.payload, uploadedImage)
+  }
+
+  $: {
+    if (workflowRun) {
+      preparedWorkflow = processWorkflow()
+    }
+  }
+</script>
+
+<div
+  transition:slide={{ delay: 50, duration: 500, easing: quartOut }}
+  class="absolute w-screen h-[calc(100vh-48px)] top-12 z-50 bg-white"
+>
+  <div class="w-full h-full">
+    <div class="p-4 overflow-y-auto scrollbar-hide">
+      <div class="text-lg uppercase font-medium">Raw workflow for Homestar</div>
+      {#if preparedWorkflow}
+        <div class="jsonview">
+          {#await preparedWorkflow then workflowOne}
+            <JsonView json={workflowOne} />
+          {/await}
+        </div>
+      {/if}
+    </div>
+  </div>
+</div>

src/routes/workflows/components/graph/graph.css

@@ -79,3 +79,12 @@
     stroke-dashoffset: 100;
   }
 }
+
+/* JSON View */
+.jsonview {
+  @apply font-mono;
+  --jsonBorderLeft: 1px solid #ddd;
+  --jsonValStringColor: #6649f8;
+  --jsonValNumberColor: #0f9162;
+  --jsonValColor: #a6163a;
+}