windmill-components 1.85.0 → 1.87.0

package/components/graph/FlowGraph.svelte

@@ -1,447 +0,0 @@
-<script>import { sugiyama, dagStratify, decrossOpt, coordCenter } from 'd3-dag';
-import { FlowStatusModule } from '../../gen';
-import { NODE, createIdGenerator, isNode, isLoop, isBranch } from '.';
-import { defaultIfEmptyString, truncateRev } from '../../utils';
-import { createEventDispatcher, setContext } from 'svelte';
-import Svelvet from './svelvet/container/views/Svelvet.svelte';
-import MapItem from '../flows/map/MapItem.svelte';
-import VirtualItem from '../flows/map/VirtualItem.svelte';
-import { writable } from 'svelte/store';
-export let success = undefined;
-export let modules = [];
-export let failureModule = undefined;
-export let minHeight = 0;
-export let maxHeight = undefined;
-export let notSelectable = false;
-export let flowModuleStates = undefined;
-export let rebuildOnChange = undefined;
-export let selectedId = writable(undefined);
-export let insertable = false;
-export let moving = undefined;
-export let scroll = false;
-setContext('FlowGraphContext', { selectedId });
-let idGenerator;
-let nestedNodes;
-let nodes = [];
-let edges = [];
-let width, height;
-let errorHandlers = {};
-let dispatch = createEventDispatcher();
-$: {
-    rebuildOnChange;
-    moving;
-    width && height && minHeight && $selectedId && flowModuleStates;
-    nodes = edges = [];
-    errorHandlers = {};
-    createGraph();
-}
-async function createGraph() {
-    if (modules) {
-        idGenerator = createIdGenerator();
-    }
-    else {
-        nodes = edges = [];
-        return;
-    }
-    nestedNodes = nodes = [];
-    nestedNodes.push(createVirtualNode(getParentIds(), 'Input', modules, 'after', undefined, undefined, 0, 0, true, undefined));
-    modules.forEach((m, i) => {
-        const item = getConvertedFlowModule(m, undefined, undefined, 0, i + 1 == modules?.length, modules);
-        item && nestedNodes.push(item);
-    });
-    nestedNodes.push(createVirtualNode(getParentIds(), 'Result', undefined, 'before', undefined, undefined, 0, modules.length, true, undefined));
-    if (!flowModuleStates) {
-        if (failureModule)
-            nestedNodes.push(createErrorHandler(failureModule));
-    }
-    else {
-        Object.entries(flowModuleStates ?? [])
-            .filter(([k, v]) => k.startsWith('failure'))
-            .forEach(([k, v]) => {
-            nestedNodes.push(createErrorHandler({ id: k }, v.parent_module));
-        });
-    }
-    const flatNodes = flattenNestedNodes(nestedNodes);
-    const layered = layoutNodes(flatNodes);
-    nodes = layered.nodes;
-    // width = layered.width
-    height = Math.min(Math.max(layered.height, minHeight), maxHeight ?? window.innerHeight - 100);
-    edges = createEdges(nodes);
-}
-function getConvertedFlowModule(module, parent, edgeLabel, loopDepth, insertableEnd, modules) {
-    const type = module.value.type;
-    const parentIds = getParentIds(parent);
-    if (type === 'forloopflow') {
-        //@ts-ignore
-        return flowModuleToLoop(modules, module, parent, loopDepth);
-    }
-    else if (type === 'branchone') {
-        const branches = [
-            { summary: 'Default Branch', modules: module.value.default, removable: false },
-            ...module.value.branches.map((b, i) => ({
-                summary: defaultIfEmptyString(b.summary, 'Branch ' + (i + 1)),
-                modules: b.modules,
-                removable: true
-            }))
-        ];
-        return flowModuleToBranch(module, modules, branches, ['', ...module.value.branches.map((x) => `${truncateRev(x.expr, 20)}`)], parent, loopDepth, false);
-    }
-    else if (type === 'branchall') {
-        const branches = module.value.branches.map((b, i) => ({
-            summary: defaultIfEmptyString(b.summary, `Branch ${i + 1}`),
-            modules: b.modules,
-            removable: true
-        }));
-        return flowModuleToBranch(module, modules, branches, [], parent, loopDepth, true);
-    }
-    return flowModuleToNode(parentIds, module, edgeLabel, undefined, loopDepth, insertableEnd, false, modules);
-}
-function getParentIds(items = undefined) {
-    if (typeof items == 'string') {
-        return [items];
-    }
-    const item = items?.at(-1) || nestedNodes.at(-1);
-    if (!item)
-        return [];
-    if (isNode(item)) {
-        const id = item.id;
-        return [id];
-    }
-    else if (isLoop(item)) {
-        return getParentIds(item.items);
-    }
-    else if (isBranch(item)) {
-        return [item.nodeEnd.id];
-    }
-    return [];
-}
-function getStateColor(state) {
-    switch (state) {
-        case FlowStatusModule.type.SUCCESS:
-            return 'rgb(193, 255, 216)';
-        case FlowStatusModule.type.FAILURE:
-            return 'rgb(248 113 113)';
-        case FlowStatusModule.type.IN_PROGRESS:
-            return 'rgb(253, 240, 176)';
-        case FlowStatusModule.type.WAITING_FOR_EVENTS:
-            return 'rgb(229, 176, 253)';
-        case FlowStatusModule.type.WAITING_FOR_EXECUTOR:
-            return 'rgb(255, 208, 193)';
-        default:
-            return '#fff';
-    }
-}
-function getResultColor() {
-    switch (success) {
-        case true:
-            return getStateColor(FlowStatusModule.type.SUCCESS);
-        case false:
-            return getStateColor(FlowStatusModule.type.FAILURE);
-        default:
-            return '#fff';
-    }
-}
-function flowModuleToNode(parentIds, mod, edgeLabel, annotation, loopDepth, insertableEnd, branchable, modules) {
-    return {
-        type: 'node',
-        id: mod.id,
-        position: { x: -1, y: -1 },
-        data: {
-            custom: {
-                component: MapItem,
-                props: {
-                    trigger: parentIds.length == 0,
-                    mod,
-                    insertable,
-                    insertableEnd,
-                    branchable,
-                    bgColor: getStateColor(flowModuleStates?.[mod.id]?.type),
-                    // annotation,
-                    modules,
-                    moving
-                },
-                cb: (e, detail) => {
-                    if (e == 'delete') {
-                        dispatch('delete', detail);
-                    }
-                    else if (e == 'select') {
-                        if (!notSelectable) {
-                            if ($selectedId != mod.id) {
-                                $selectedId = mod.id;
-                                dispatch('select', mod);
-                            }
-                        }
-                    }
-                    else if (e == 'insert') {
-                        dispatch('insert', detail);
-                    }
-                    else if (e == 'newBranch') {
-                        dispatch('newBranch', detail);
-                    }
-                    else if (e == 'move') {
-                        dispatch('move', { module: mod, modules });
-                    }
-                }
-            }
-        },
-        width: NODE.width,
-        height: NODE.height,
-        parentIds,
-        sourcePosition: 'bottom',
-        targetPosition: 'top',
-        edgeLabel,
-        loopDepth
-    };
-}
-function flowModuleToLoop(modules, module, parent, loopDepth) {
-    const loop = {
-        type: 'loop',
-        items: [
-            flowModuleToNode(getParentIds(parent), module, undefined, flowModuleStates?.[module.id]?.iteration_total
-                ? 'Iteration ' + flowModuleStates?.[module.id]?.iteration_total
-                : '', loopDepth, false, false, modules)
-        ]
-    };
-    const innerModules = module.value.modules;
-    loop.items.push(createVirtualNode(getParentIds(loop.items), `Do one iteration`, innerModules, 'after', undefined, 1000, loopDepth + 1, 0, true, undefined, undefined));
-    innerModules.forEach((module, i) => {
-        const item = getConvertedFlowModule(module, loop.items, undefined, loopDepth + 1, i + 1 == innerModules?.length, innerModules);
-        item && loop.items.push(item);
-    });
-    loop.items.push(createVirtualNode(getParentIds(loop.items), `Collect result of each iteration`, modules, 'after', undefined, 1000, loopDepth, modules.findIndex((m) => m.id == module.id) + 1, true, undefined, module.id));
-    return loop;
-}
-function flowModuleToBranch(module, modules, branches, edgesLabel, parent = undefined, loopDepth, branchall) {
-    const node = flowModuleToNode(getParentIds(parent), module, undefined, undefined, loopDepth, false, true, modules);
-    const bitems = [];
-    const branchParent = [node.id];
-    if (branches.length == 0) {
-        bitems.push([
-            createVirtualNode(branchParent, 'No branches', undefined, 'after', undefined, 0, loopDepth, 0, false, undefined)
-        ]);
-    }
-    branches.forEach(({ summary, modules, removable }, i) => {
-        const items = [];
-        items.push(createVirtualNode(branchParent, summary, modules, 'after', edgesLabel[i], undefined, loopDepth, 0, false, removable ? { module, index: i } : undefined));
-        if (modules.length) {
-            modules.forEach((module, j) => {
-                const item = getConvertedFlowModule(module, items, undefined, loopDepth, j + 1 == modules?.length, modules);
-                item && items.push(item);
-            });
-        }
-        items.length && bitems.push(items);
-    });
-    return {
-        type: 'branch',
-        node,
-        nodeEnd: createVirtualNode(bitems.map((i) => getParentIds(i)).flat(), branchall ? 'Collect result of each branch' : 'Result of the chosen branch', modules, 'after', undefined, 0, loopDepth, modules.findIndex((m) => m.id == module.id) + 1, true, undefined, module.id),
-        items: bitems
-    };
-}
-function flattenNestedNodes(nestedNodes, nodes = []) {
-    const array = nodes;
-    nestedNodes.forEach((node) => {
-        if (isNode(node)) {
-            array.push(node);
-        }
-        else if (isLoop(node)) {
-            flattenNestedNodes(node.items, array);
-        }
-        else if (isBranch(node)) {
-            array.push(node.node);
-            node.items.forEach((item) => {
-                flattenNestedNodes(item, array);
-            });
-            array.push(node.nodeEnd);
-        }
-    });
-    return array;
-}
-function layoutNodes(nodes) {
-    const stratify = dagStratify().id(({ id }) => id);
-    const dag = stratify(nodes);
-    let boxSize;
-    try {
-        const layout = sugiyama()
-            .decross(decrossOpt())
-            .coord(coordCenter())
-            .nodeSize(() => [NODE.width + NODE.gap.horizontal, NODE.height + NODE.gap.vertical]);
-        boxSize = layout(dag);
-    }
-    catch {
-        const layout = sugiyama()
-            .coord(coordCenter())
-            .nodeSize(() => [NODE.width + NODE.gap.horizontal, NODE.height + NODE.gap.vertical]);
-        boxSize = layout(dag);
-    }
-    return {
-        nodes: dag.descendants().map((des) => ({
-            ...des.data,
-            id: des.data.id,
-            position: {
-                x: des.x
-                    ? des.data.loopDepth * 50 + des.x + width / 2 - boxSize.width / 2 - NODE.width / 2
-                    : 0,
-                y: des.y || 0
-            }
-        })),
-        height: boxSize.height + NODE.height
-    };
-}
-function createEdges(nodes) {
-    const edges = [];
-    nodes.forEach((node) => {
-        node.parentIds.forEach((pid, i) => {
-            // skip virtual nodes such as collect result
-            if (false &&
-                errorHandlers[pid] &&
-                parseInt(node.id) < 900 &&
-                nodes.find((x) => x.id == errorHandlers[pid])) {
-                edges.push({
-                    id: `e-${pid}-${node.id}`,
-                    source: pid,
-                    target: errorHandlers[pid],
-                    labelBgColor: 'white',
-                    arrow: false,
-                    animate: false,
-                    noHandle: true,
-                    label: node.edgeLabel,
-                    type: 'bezier'
-                });
-                edges.push({
-                    id: `e-${pid}-${node.id}`,
-                    source: errorHandlers[pid],
-                    target: node.id,
-                    labelBgColor: 'white',
-                    arrow: false,
-                    animate: false,
-                    noHandle: true,
-                    label: node.edgeLabel,
-                    type: 'bezier'
-                });
-            }
-            else {
-                edges.push({
-                    id: `e-${pid}-${node.id}`,
-                    source: pid,
-                    target: node.id,
-                    labelBgColor: 'white',
-                    arrow: false,
-                    animate: false,
-                    noHandle: true,
-                    label: node.edgeLabel,
-                    edgeColor: '#999',
-                    type: 'bezier'
-                });
-            }
-        });
-    });
-    return edges;
-}
-function createVirtualNode(parentIds, label, modules, whereInsert, edgeLabel, offset, loopDepth, index, selectable, deleteBranch, mid = undefined) {
-    const id = -idGenerator.next().value - 2 + (offset ?? 0);
-    return {
-        type: 'node',
-        id: id.toString(),
-        position: { x: -1, y: -1 },
-        data: {
-            // html: `
-            // 	<div class="w-full max-h-full text-center ellipsize-multi-line text-2xs [-webkit-line-clamp:2] px-1">
-            // 		${label}
-            // 	</div>
-            // `
-            custom: {
-                component: VirtualItem,
-                props: {
-                    label,
-                    insertable,
-                    modules,
-                    bgColor: label == 'Result' ? getResultColor() : '#dfe6ee',
-                    selected: $selectedId == label,
-                    index,
-                    selectable,
-                    whereInsert,
-                    deleteBranch,
-                    id: mid,
-                    moving
-                },
-                cb: (e, detail) => {
-                    if (e == 'insert') {
-                        dispatch('insert', detail);
-                    }
-                    else if (e == 'select') {
-                        $selectedId = detail;
-                        dispatch('select', detail);
-                    }
-                    else if (e == 'deleteBranch') {
-                        $selectedId = label;
-                        dispatch('deleteBranch', detail);
-                    }
-                }
-            }
-        },
-        width: NODE.width,
-        height: NODE.height,
-        borderColor: $selectedId == label ? 'black' : '#999',
-        sourcePosition: 'bottom',
-        targetPosition: 'top',
-        parentIds,
-        edgeLabel,
-        loopDepth
-    };
-}
-function createErrorHandler(mod, parent_module) {
-    const nId = (-idGenerator.next().value - 1 + 1100).toString();
-    parent_module && (errorHandlers[parent_module] = nId);
-    let label = 'Error handler';
-    return {
-        type: 'node',
-        id: nId,
-        position: { x: -1, y: -1 },
-        data: {
-            custom: {
-                component: VirtualItem,
-                props: {
-                    label,
-                    insertable: false,
-                    modules: undefined,
-                    bgColor: getStateColor(flowModuleStates?.[mod.id]?.type),
-                    selected: $selectedId == mod.id,
-                    index: 0,
-                    selectable: true,
-                    id: mod.id
-                },
-                cb: (e, detail) => {
-                    console.log(detail);
-                    if (e == 'select') {
-                        $selectedId = detail;
-                        dispatch('select', detail);
-                    }
-                }
-            }
-        },
-        width: NODE.width,
-        height: NODE.height,
-        sourcePosition: 'bottom',
-        targetPosition: 'top',
-        parentIds: parent_module ? [parent_module] : [],
-        loopDepth: 0
-    };
-}
-</script>
-
-<div bind:clientWidth={width} class="w-full h-full overflow-hidden relative">
-	{#if width && height}
-		<Svelvet
-			highlightEdges={false}
-			locked
-			{nodes}
-			{width}
-			{edges}
-			{height}
-			{scroll}
-			background={false}
-			bgColor="rgb(249 250 251)"
-		/>
-	{/if}
-</div>

package/components/graph/FlowGraph.svelte.d.ts

@@ -1,37 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-import { type FlowModule } from '../../gen';
-import { type GraphModuleState } from '.';
-import { type Writable } from 'svelte/store';
-declare const __propDef: {
-    props: {
-        success?: boolean | undefined;
-        modules?: FlowModule[] | undefined;
-        failureModule?: FlowModule | undefined;
-        minHeight?: number | undefined;
-        maxHeight?: number | undefined;
-        notSelectable?: boolean | undefined;
-        flowModuleStates?: Record<string, GraphModuleState> | undefined;
-        rebuildOnChange?: any;
-        selectedId?: Writable<string | undefined> | undefined;
-        insertable?: boolean | undefined;
-        moving?: string | undefined;
-        scroll?: boolean | undefined;
-    };
-    events: {
-        delete: CustomEvent<any>;
-        select: CustomEvent<any>;
-        insert: CustomEvent<any>;
-        newBranch: CustomEvent<any>;
-        move: CustomEvent<any>;
-        deleteBranch: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type FlowGraphProps = typeof __propDef.props;
-export type FlowGraphEvents = typeof __propDef.events;
-export type FlowGraphSlots = typeof __propDef.slots;
-export default class FlowGraph extends SvelteComponentTyped<FlowGraphProps, FlowGraphEvents, FlowGraphSlots> {
-}
-export {};

package/components/graph/svelvet/container/views/GraphView.svelte

@@ -1,222 +0,0 @@
-<script>import { pointer, select, selectAll } from 'd3-selection';
-import { zoom, zoomIdentity, zoomTransform } from 'd3-zoom';
-import { onMount } from 'svelte';
-import SimpleBezierEdge from '../../edges/views/Edges/SimpleBezierEdge.svelte';
-import SmoothStepEdge from '../../edges/views/Edges/SmoothStepEdge.svelte';
-import StepEdge from '../../edges/views/Edges/StepEdge.svelte';
-import Node from '../../nodes/views/Node.svelte';
-import { determineD3Instance } from '../..//d3/controllers/d3';
-import { findStore } from '../../store/controllers/storeApi';
-import { onDestroy } from 'svelte';
-//these are typscripted as any, however they have been transformed inside of store.ts
-export let canvasId;
-export let width;
-export let height;
-export let boundary = false;
-export let scroll = false;
-// here we lookup the store using the unique key
-const store = findStore(canvasId);
-const { edgesStore, nodesStore, nodeSelected, backgroundStore, movementStore, widthStore, heightStore, d3Scale } = store;
-$: nodes = Object.values($nodesStore);
-$: edges = Object.values($edgesStore);
-// declaring the grid and dot size for d3's transformations and zoom
-const gridSize = 15;
-const dotSize = 10;
-// leveraging d3 library to zoom/pan
-let d3 = {
-    zoom,
-    zoomTransform,
-    zoomIdentity,
-    select,
-    selectAll,
-    pointer
-};
-let d3Zoom = determineD3Instance(boundary, d3, nodeSelected, width, height, movementStore, backgroundStore, gridSize, dotSize, canvasId, d3Scale, handleZoom);
-// d3Translate is used for the minimap
-onMount(() => {
-    // actualizes the d3 instance
-    const nodes = d3.select(`.zoomable`).call(d3Zoom).on('dblclick.zoom', null);
-    if (!scroll) {
-        ;
-        [nodes].forEach((d3Instance) => {
-            d3Instance
-                .on('wheel.zoom', null)
-                .on('mousewheel.zoom', null)
-                .on('mousemove.zoom', null)
-                .on('DOMMouseScroll.zoom', null);
-        });
-    }
-    d3.select('#zoom_in').on('click', function () {
-        try {
-            d3Zoom.scaleBy(nodes.transition().duration(250), 1.4);
-            // d3Zoom.translateTo(edgesd3, d3Translate.x, d3Translate.y)
-            // d3Zoom.translateTo(nodesd3, d3Translate.x, d3Translate.y)
-        }
-        catch (e) {
-            console.log('error', e);
-        }
-    });
-    d3.select('#zoom_out').on('click', function () {
-        try {
-            d3Zoom.scaleBy(nodes.transition().duration(250), 0.714);
-            // d3Zoom.translateTo(edgesd3.transition().duration(0), d3Translate.x, d3Translate.y)
-            // d3Zoom.translateTo(nodesd3.transition().duration(0), d3Translate.x, d3Translate.y)
-        }
-        catch (e) {
-            console.log('error', e);
-        }
-    });
-    // })
-    // d3Translate = zoomInit(d3, canvasId, d3Zoom, d3Translate, initialLocation, initialZoom, d3Scale)
-});
-onDestroy(() => {
-    d3.select('svg').remove();
-});
-// This is necessary to make Graphview reactive to changes in initialZoom
-// When initialZoom changes, then zoomInit will set the zoom/position
-// let prevZoom = initialZoom
-// let prevInitialLocationX = initialLocation.x
-// let prevInitialLocationY = initialLocation.y
-// $: if (
-// 	initialZoom !== prevZoom ||
-// 	prevInitialLocationX !== initialLocation.x ||
-// 	prevInitialLocationY !== initialLocation.y
-// ) {
-// 	prevZoom = initialZoom
-// 	prevInitialLocationX = initialLocation.x
-// 	prevInitialLocationY = initialLocation.y
-// 	d3Translate = zoomInit(d3, canvasId, d3Zoom, d3Translate, initialLocation, initialZoom, d3Scale)
-// }
-// moves canvas when you click on the minimap
-// handles case for when minimap sends message back to initiate translation event (click to traverse minimap)
-// moves camera to the clicked node
-function handleZoom(e) {
-    if (!$movementStore)
-        return;
-    //add a store that contains the current value of the d3-zoom's scale to be used in onMouseMove function
-    d3Scale.set(e.transform.k);
-    // transform 'g' SVG elements (edge, edge text, edge anchor)
-    d3.select(`.Edges-${canvasId} g`).attr('transform', e.transform);
-    // transform div elements (nodes)
-    //@ts-ignore
-    let transform = d3.zoomTransform(this);
-    store.d3ZoomParameters.set({ ...transform }); // record x,y position of pan, and zoom level
-    // selects and transforms all node divs from class 'Node' and performs transformation
-    d3.select(`.Node-${canvasId}`)
-        .style('transform', 'translate(' + transform.x + 'px,' + transform.y + 'px) scale(' + transform.k + ')')
-        .style('transform-origin', '0 0');
-}
-</script>
-
-<div class="zoomable">
-	<!-- This is the container that holds GraphView and we have disabled right click functionality to prevent a sticking behavior -->
-	<div id="graphview-container">
-		<div class={`Nodes Nodes-${canvasId}`} on:contextmenu|preventDefault>
-			<!-- This container is transformed by d3zoom -->
-			<div class={`Node Node-${canvasId}`}>
-				{#each nodes as node}
-					{#if node.data.html}
-						<Node {node} {canvasId}>{@html node.data.html}</Node>
-					{:else if node.data.custom}
-						<Node isCustom {node} {canvasId}>
-							<svelte:component
-								this={node.data.custom.component}
-								on:new={(e) => node?.data?.custom?.cb?.('new', e.detail)}
-								on:delete={(e) => node?.data?.custom?.cb?.('delete', e.detail)}
-								on:select={(e) => node?.data?.custom?.cb?.('select', e.detail)}
-								on:insert={(e) => node?.data?.custom?.cb?.('insert', e.detail)}
-								on:newBranch={(e) => node?.data?.custom?.cb?.('newBranch', e.detail)}
-								on:deleteBranch={(e) => node?.data?.custom?.cb?.('deleteBranch', e.detail)}
-								on:move={(e) => node?.data?.custom?.cb?.('move', e.detail)}
-								{...node.data.custom.props}
-							/>
-						</Node>
-					{:else}
-						<Node {node} {canvasId}>{node.data.label}</Node>
-					{/if}
-				{/each}
-			</div>
-		</div>
-	</div>
-	<!-- rendering dots on the background depending on the zoom level -->
-	<svg
-		class={`Edges Edges-${canvasId}`}
-		viewBox="0 0 {$widthStore} {$heightStore}"
-		on:contextmenu|preventDefault
-	>
-		<defs>
-			<pattern
-				id={`background-${canvasId}`}
-				x="0"
-				y="0"
-				width={gridSize}
-				height={gridSize}
-				patternUnits="userSpaceOnUse"
-			>
-				<circle
-					id="dot"
-					cx={gridSize / 2 - dotSize / 2}
-					cy={gridSize / 2 - dotSize / 2}
-					r="0.5"
-					style="fill: gray"
-				/>
-			</pattern>
-		</defs>
-
-		<!-- <g> tag defines which edge type to render depending on properties of edge object -->
-		<g>
-			{#each edges as edge}
-				{#if edge.type === 'smoothstep'}
-					<SmoothStepEdge {edge} {canvasId} />
-				{:else if edge.type === 'step'}
-					<StepEdge {edge} {canvasId} />
-				{:else}
-					<SimpleBezierEdge edgeId={edge.id} {canvasId} />
-				{/if}
-			{/each}
-
-			<!-- {#each filteredAnchors as anchor} -->
-			<!-- note that these are SVG -->
-			<!-- <EdgeAnchor x={anchor.positionX} y={anchor.positionY} /> -->
-			<!-- {/each} -->
-		</g>
-	</svg>
-</div>
-<div id="buttons">
-	<button id="zoom_in">+</button>
-	<button id="zoom_out">-</button>
-</div>
-
-<style>
-	#buttons {
-		position: absolute;
-		top: 4px;
-		right: 4px;
-		z-index: 20;
-	}
-
-	#buttons > button {
-		border-radius: 4px;
-		background-color: white;
-		border: #999 solid 1px;
-		padding-right: 4px;
-		padding-left: 4px;
-		width: 24px;
-	}
-
-	.Nodes {
-		position: absolute;
-		width: 100%;
-		height: 100%;
-	}
-	.Node {
-		color: black; /* remove this once color is set to default via types */
-		width: 100%;
-		height: 100%;
-	}
-	#graphview-container {
-		pointer-events: none;
-	}
-	.pointer-events-auto {
-		pointer-events: auto;
-	}</style>