diff --git a/src/lib/components/Graph/Graph.svelte b/src/lib/components/Graph/Graph.svelte index 30b457f..7c0af8e 100644 --- a/src/lib/components/Graph/Graph.svelte +++ b/src/lib/components/Graph/Graph.svelte @@ -18,6 +18,16 @@ import * as d3Force from 'd3-force'; + import { + Button, + buttonVariants + } from '@coral-os/component-library/components/ui/button/index.js'; + import * as Tooltip from '@coral-os/component-library/components/ui/tooltip/index.js'; + + import IconSelection from 'phosphor-icons-svelte/IconSelectionFill.svelte'; + import IconPlay from 'phosphor-icons-svelte/IconPlayFill.svelte'; + import IconPause from 'phosphor-icons-svelte/IconPauseFill.svelte'; + const nodeTypes = { circleNode: GraphCircleNode }; @@ -271,20 +281,26 @@ > {#if controls && nodes.length > 0} - fitView()} - type="button" - class="text-muted-foreground opacity-20 transition-opacity hover:opacity-100" - > - Home - - - {running ? 'Stop' : 'Start'} simulation - + + fitView()} + class={buttonVariants({ variant: 'ghost', size: 'icon-sm' })} + > + + Fit all in view + + + + {#if running}{:else}{/if} + + {running ? 'Stop simulating' : 'Start simulating'} + + {/if}
Fit all in view
{running ? 'Stop simulating' : 'Start simulating'}