add graphviz sandbox route

pi-base · Nov 4, 2024 · 9be5ef2 · 9be5ef2
1 parent d172e04
commit 9be5ef2
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 1 deletion.
diff --git a/packages/viewer/src/components/GraphViz/GraphViz.svelte b/packages/viewer/src/components/GraphViz/GraphViz.svelte
@@ -4,10 +4,11 @@
   import * as d3 from 'd3'
   import * as graphviz from 'd3-graphviz'
   export let dot = 'digraph  {a -> b}'
-  let graphDiv : HTMLElement
+  let graphDiv: HTMLElement
   onMount(() => {
     d3.select(graphDiv).graphviz().renderDot(dot)
   })
+  $: if (graphDiv) { d3.select(graphDiv).graphviz().renderDot(dot) }
 </script>
 
 <div bind:this={graphDiv} style="text-align: center;" />
diff --git a/packages/viewer/src/routes/(app)/dev/graph/+page.svelte b/packages/viewer/src/routes/(app)/dev/graph/+page.svelte
@@ -0,0 +1,11 @@
+<script lang="ts">
+  import Title from '@/components/Shared/Title.svelte'
+  import { GraphViz } from '@/components/GraphViz'
+  let dot = 'digraph  {a -> b}'
+</script>
+
+<Title title="GraphViz" />
+
+<input type="text" bind:value={dot} />
+
+<GraphViz {dot} />