windmill-components 1.83.4 → 1.85.0

package/components/flows/content/DynamicInputHelpBox.svelte

@@ -5,6 +5,7 @@ $: opened = false;
 </script>
 
 <div class="text-xs flex flex-row-reverse">
+	<!-- svelte-ignore a11y-click-events-have-key-events -->
 	<span
 		class="underline mr-4"
 		on:click={() => {

package/components/flows/content/FlowBranchesAllWrapper.svelte

@@ -1,4 +1,4 @@
-<script>import { Alert, Badge, Button, Tab } from '../../common';
+<script>import { Alert, Tab } from '../../common';
 import TabContent from '../../common/tabs/TabContent.svelte';
 import Tabs from '../../common/tabs/Tabs.svelte';
 import Toggle from '../../Toggle.svelte';
@@ -26,7 +26,7 @@ let selected = 'early-stop';
 					<h3 class="mb-4">{value.branches.length} branch{value.branches.length > 1 ? 'es' : ''}</h3
 					>
 					<div class="flex flex-col gap-y-4 py-2 w-full max-w-xl">
-						{#each value.branches as branch, i}
+						{#each value.branches as branch}
 							<div class="flex flex-row gap-x-4 w-full items-center">
 								<div class="grow">
 									<input type="text" bind:value={branch.summary} placeholder="Summary" />

package/components/flows/content/FlowBranchesOneWrapper.svelte

@@ -1,4 +1,4 @@
-<script>import { Alert, Badge, Button, Tab } from '../../common';
+<script>import { Alert, Badge, Tab } from '../../common';
 import TabContent from '../../common/tabs/TabContent.svelte';
 import Tabs from '../../common/tabs/Tabs.svelte';
 import FlowCard from '../common/FlowCard.svelte';
@@ -34,7 +34,7 @@ let selected = 'early-stop';
 								chosen</p
 							>
 						</div>
-						{#each value.branches as branch, i}
+						{#each value.branches as branch}
 							<div class="flex flex-col gap-x-2 p-2 items-center border border-gray-400">
 								<input
 									class="w-full"

package/components/flows/content/FlowInputsFlow.svelte

@@ -7,7 +7,7 @@ import { emptyString } from '../../../utils';
 import { createEventDispatcher } from 'svelte';
 import { flip } from 'svelte/animate';
 import { fade } from 'svelte/transition';
-export let failureModule;
+// export let failureModule: boolean
 const dispatch = createEventDispatcher();
 let items = undefined;
 let filteredItems = undefined;

package/components/flows/content/FlowInputsFlow.svelte.d.ts

@@ -1,8 +1,6 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
-    props: {
-        failureModule: boolean;
-    };
+    props: Record<string, never>;
     events: {
         pick: CustomEvent<any>;
     } & {

package/components/flows/content/FlowModuleComponent.svelte

@@ -154,33 +154,31 @@ let forceReload = 0;
 				<Splitpanes horizontal>
 					<Pane size={isScript ? 30 : 50} minSize={20}>
 						{#if value.type === 'rawscript'}
-							<div class="h-full">
-								<Editor
-									bind:websocketAlive
-									bind:this={editor}
-									class="h-full px-2"
-									bind:code={value.content}
-									deno={value.language === RawScript.language.DENO}
-									lang={scriptLangToEditorLang(value.language)}
-									automaticLayout={true}
-									cmdEnterAction={async () => {
-										selected = 'test'
-										if (value.type === 'rawscript') {
-											value.content = editor.getCode()
-										}
-										await reload(flowModule)
-										modulePreview?.runTestWithStepArgs()
-									}}
-									on:change={async (event) => {
-										if (flowModule.value.type === 'rawscript') {
-											flowModule.value.content = event.detail
-										}
-										await reload(flowModule)
-									}}
-									formatAction={() => reload(flowModule)}
-									fixedOverflowWidgets
-								/>
-							</div>
+							<Editor
+								bind:websocketAlive
+								bind:this={editor}
+								class="h-full relative"
+								bind:code={value.content}
+								deno={value.language === RawScript.language.DENO}
+								lang={scriptLangToEditorLang(value.language)}
+								automaticLayout={true}
+								cmdEnterAction={async () => {
+									selected = 'test'
+									if (value.type === 'rawscript') {
+										value.content = editor.getCode()
+									}
+									await reload(flowModule)
+									modulePreview?.runTestWithStepArgs()
+								}}
+								on:change={async (event) => {
+									if (flowModule.value.type === 'rawscript') {
+										flowModule.value.content = event.detail
+									}
+									await reload(flowModule)
+								}}
+								formatAction={() => reload(flowModule)}
+								fixedOverflowWidgets={true}
+							/>
 						{:else if value.type === 'script'}
 							{#key forceReload}
 								<FlowModuleScript path={value.path} hash={value.hash} />
@@ -239,7 +237,7 @@ let forceReload = 0;
 										<FlowModuleSleep previousModuleId={previousModule?.id} bind:flowModule />
 									</div>
 								{:else if selected === 'advanced-same_worker'}
-									<div class="p-4  h-full overflow-auto">
+									<div class="p-4 h-full overflow-auto">
 										<Alert type="info" title="Share a directory between steps">
 											If shared directory is set, will share a folder that will be mounted on
 											`./shared` for each of them to pass data between each other.

package/components/flows/content/FlowModuleWrapper.svelte

@@ -35,7 +35,6 @@ export let previousModule = undefined;
 
 		{#if flowModule.value.flow}
 			<FlowInputsFlow
-				failureModule={$selectedId === 'failure'}
 				on:pick={async ({ detail }) => {
 					const { path, summary } = detail
 					const [module, state] = await pickFlow(path, summary, flowModule.id)

package/components/flows/content/FlowRetries.svelte

@@ -1,5 +1,4 @@
-<script>import { Alert } from '../../common';
-import Toggle from '../../Toggle.svelte';
+<script>import Toggle from '../../Toggle.svelte';
 import Tooltip from '../../Tooltip.svelte';
 export let flowModule;
 function setConstantRetries() {

package/components/flows/content/ScriptEditorDrawer.svelte

@@ -3,7 +3,7 @@ import ScriptEditor from '../../ScriptEditor.svelte';
 import { ScriptService } from '../../../gen';
 import { inferArgs } from '../../../infer';
 import { workspaceStore } from '../../../stores';
-import { emptySchema, getScriptByPath, sendUserToast } from '../../../utils';
+import { emptySchema, sendUserToast } from '../../../utils';
 import { faSave } from '@fortawesome/free-solid-svg-icons';
 import { Loader2 } from 'lucide-svelte';
 import { createEventDispatcher } from 'svelte';

package/components/flows/flowStateUtils.d.ts

@@ -2,10 +2,7 @@ import type { Schema } from '../../common';
 import { Script, type Flow, type FlowModule, type PathFlow, type PathScript, type RawScript } from '../../gen';
 import { type Writable } from 'svelte/store';
 import type { FlowModuleState, FlowState } from './flowState';
-import { Mutex } from 'async-mutex';
 export declare function loadFlowModuleState(flowModule: FlowModule): Promise<FlowModuleState>;
-export declare const idMutex: Mutex;
-export declare function getNextId(currentKeys: string[]): string;
 export declare function nextId(flowState: FlowState): string;
 export declare function pickScript(path: string, summary: string, id: string, hash?: string): Promise<[FlowModule & {
     value: PathScript;

package/components/flows/flowStateUtils.js

@@ -3,8 +3,8 @@ import { initialCode } from '../../script_helpers';
 import { userStore, workspaceStore } from '../../stores';
 import { getScriptByPath } from '../../utils';
 import { get } from 'svelte/store';
-import { charsToNumber, emptyFlowModuleState, findNextAvailablePath, loadSchemaFromModule, NEVER_TESTED_THIS_FAR, numberToChars } from './utils';
-import { Mutex } from 'async-mutex';
+import { charsToNumber, numberToChars } from './idUtils';
+import { emptyFlowModuleState, findNextAvailablePath, loadSchemaFromModule, NEVER_TESTED_THIS_FAR } from './utils';
 export async function loadFlowModuleState(flowModule) {
     try {
         const { input_transforms, schema } = await loadSchemaFromModule(flowModule);
@@ -20,26 +20,6 @@ export async function loadFlowModuleState(flowModule) {
         return emptyFlowModuleState();
     }
 }
-export const idMutex = new Mutex();
-const forbiddenIds = ['do'];
-export function getNextId(currentKeys) {
-    const max = currentKeys.reduce((acc, key) => {
-        if (key === 'failure' || key.includes('branch') || key.includes('loop')) {
-            return acc;
-        }
-        else {
-            const num = charsToNumber(key);
-            return Math.max(acc, num + 1);
-        }
-    }, 0);
-    const char = numberToChars(max);
-    if (forbiddenIds.includes(char)) {
-        return getNextId(currentKeys.concat(char));
-    }
-    else {
-        return char;
-    }
-}
 // Computes the next available id
 export function nextId(flowState) {
     const max = Object.keys(flowState).reduce((acc, key) => {
@@ -163,7 +143,7 @@ export async function createScriptFromInlineScript(flowModule, suffix, schema, f
     const originalScriptPath = flowModule.value.path;
     const wasForked = Boolean(originalScriptPath);
     if (wasForked && originalScriptPath) {
-        const [first, second, ...others] = originalScriptPath.split('/');
+        const [_first, _second, ...others] = originalScriptPath.split('/');
         suffix = others.join('/');
     }
     const path = `${flow.path}/${suffix}`;

package/components/flows/header/FlowPreviewButtons.svelte

@@ -24,7 +24,6 @@ $: upToDisabled =
             'constants'
         ].includes($selectedId) ||
         $selectedId?.includes('branch');
-let is_owner = false;
 </script>
 
 <div class="flex flex-row-reverse justify-between items-center gap-x-2">

package/components/flows/idUtils.d.ts

@@ -0,0 +1,4 @@
+export declare const forbiddenIds: string[];
+export declare function numberToChars(n: number): any;
+export declare function getNextId(currentKeys: string[]): string;
+export declare function charsToNumber(n: string): number;

package/components/flows/idUtils.js

@@ -0,0 +1,47 @@
+const aCharCode = 'a'.charCodeAt(0);
+export const forbiddenIds = ['do', 'bg', 'ctx', 'state'];
+export function numberToChars(n) {
+    if (n < 0) {
+        return '-' + numberToChars(-n);
+    }
+    var b = [n], sp, out, i, div;
+    sp = 0;
+    while (sp < b.length) {
+        if (b[sp] > 25) {
+            div = Math.floor(b[sp] / 26);
+            b[sp + 1] = div - 1;
+            b[sp] %= 26;
+        }
+        sp += 1;
+    }
+    out = '';
+    for (i = 0; i < b.length; i += 1) {
+        let charCode = aCharCode + b[i];
+        out = String.fromCharCode(charCode) + out;
+    }
+    return out;
+}
+export function getNextId(currentKeys) {
+    const takenKeys = [...currentKeys, ...forbiddenIds].map(charsToNumber);
+    let i = charsToNumber('a');
+    while (true) {
+        if (!takenKeys.includes(i)) {
+            break;
+        }
+        i++;
+    }
+    return numberToChars(i);
+}
+export function charsToNumber(n) {
+    if (n.charAt(0) == '-') {
+        return charsToNumber(n.slice(1)) * -1;
+    }
+    let b = Math.pow(26, n.length - 1);
+    let res = 0;
+    for (let c of n) {
+        let charCode = c == '-' || c == '_' ? aCharCode + 25 : c.charCodeAt(0);
+        res += (charCode - aCharCode + 1) * b;
+        b = b / 26;
+    }
+    return res - 1;
+}

package/components/flows/map/FlowModuleSchemaItem.svelte

@@ -1,9 +1,9 @@
 <script>import Badge from '../../common/badge/Badge.svelte';
 import Popover from '../../Popover.svelte';
 import { classNames } from '../../../utils';
+import { Bed, Move, PhoneIncoming, Repeat, Square, X } from 'lucide-svelte';
 import { createEventDispatcher } from 'svelte';
 import { fade } from 'svelte/transition';
-import { Bed, Move, PhoneIncoming, Repeat, Square, X } from 'lucide-svelte';
 export let selected = false;
 export let deletable = false;
 export let retry = false;
@@ -75,7 +75,7 @@ const dispatch = createEventDispatcher();
 		{/if}
 	</div>
 	<div
-		class="flex gap-1 justify-between items-center w-full overflow-hidden rounded-sm 
+		class="flex gap-1 justify-between items-center w-full overflow-hidden rounded-sm
 			border border-gray-400 p-2 text-2xs module"
 	>
 		{#if $$slots.icon}
@@ -91,8 +91,8 @@ const dispatch = createEventDispatcher();
 	</div>
 	{#if deletable}
 		<button
-			class="absolute -top-2 -right-2 rounded-full h-4 w-4 trash center-center 
-	border-[1.5px] border-gray-700 bg-white duration-150 hover:bg-red-400 hover:text-white 
+			class="absolute -top-2 -right-2 rounded-full h-4 w-4 trash center-center
+	border-[1.5px] border-gray-700 bg-white duration-150 hover:bg-red-400 hover:text-white
 	hover:border-red-700 {selected ? '' : '!hidden'}"
 			on:click|preventDefault|stopPropagation={(event) =>
 				dispatch('delete', { event, id, type: modType })}
@@ -101,8 +101,8 @@ const dispatch = createEventDispatcher();
 		</button>
 
 		<button
-			class="absolute -top-2 right-10 rounded-full h-4 w-4 trash center-center 
-border-[1.5px] border-gray-700 bg-white duration-150 hover:bg-blue-400 hover:text-white 
+			class="absolute -top-2 right-10 rounded-full h-4 w-4 trash center-center
+border-[1.5px] border-gray-700 bg-white duration-150 hover:bg-blue-400 hover:text-white
 hover:border-blue-700 {selected ? '' : '!hidden'}"
 			on:click|preventDefault|stopPropagation={(event) => dispatch('move')}
 		>

package/components/flows/map/MapItem.svelte

@@ -1,17 +1,17 @@
-<script>import { createEventDispatcher, getContext } from 'svelte';
-import FlowModuleSchemaItem from './FlowModuleSchemaItem.svelte';
-import InsertModuleButton from './InsertModuleButton.svelte';
+<script>import { Button } from '../../common';
+import LanguageIcon from '../../common/languageIcons/LanguageIcon.svelte';
+import IconedResourceType from '../../IconedResourceType.svelte';
 import { faBarsStaggered, faCodeBranch, faLongArrowDown } from '@fortawesome/free-solid-svg-icons';
+import { Building, ClipboardCopy, GitBranchPlus, Repeat, Square } from 'lucide-svelte';
+import { createEventDispatcher, getContext } from 'svelte';
 import Icon from 'svelte-awesome';
-import IconedResourceType from '../../IconedResourceType.svelte';
-import LanguageIcon from '../../common/languageIcons/LanguageIcon.svelte';
-import { Building, ClipboardCopy, GitBranchPlus, Move, Repeat, Square } from 'lucide-svelte';
-import { Button } from '../../common';
+import FlowModuleSchemaItem from './FlowModuleSchemaItem.svelte';
+import InsertModuleButton from './InsertModuleButton.svelte';
 export let mod;
 export let trigger;
 export let insertable;
 export let insertableEnd = false;
-export let annotation = undefined;
+// export let annotation: string | undefined = undefined
 export let branchable = false;
 export let bgColor = '';
 export let modules;
@@ -168,7 +168,7 @@ let openMenu2 = undefined;
 						dispatch('insert', { modules, index: idx + 1, detail: 'move' })
 					}}
 					type="button"
-					class=" text-gray-900 bg-white border mx-0.5  border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 font-medium rounded-full text-sm w-6 h-6 flex items-center justify-center"
+					class=" text-gray-900 bg-white border mx-0.5 border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 font-medium rounded-full text-sm w-6 h-6 flex items-center justify-center"
 				>
 					<ClipboardCopy size={12} />
 				</button>

package/components/flows/map/MapItem.svelte.d.ts

@@ -6,7 +6,6 @@ declare const __propDef: {
         trigger: boolean;
         insertable: boolean;
         insertableEnd?: boolean | undefined;
-        annotation?: string | undefined;
         branchable?: boolean | undefined;
         bgColor?: string | undefined;
         modules: FlowModule[];

package/components/flows/utils.d.ts

@@ -15,6 +15,4 @@ export declare function runFlowPreview(args: Record<string, any>, flow: Flow): P
 export declare function codeToStaticTemplate(code?: string): string | undefined;
 export declare const NEVER_TESTED_THIS_FAR = "never tested this far";
 export declare function emptyFlowModuleState(): FlowModuleState;
-export declare function numberToChars(n: number): any;
-export declare function charsToNumber(n: string): number;
 export declare function findNextAvailablePath(path: string): Promise<string>;

package/components/flows/utils.js

@@ -124,6 +124,9 @@ export function codeToStaticTemplate(code) {
         if (line[0] == '`' && line.charAt(line.length - 1) == '`') {
             return line.slice(1, line.length - 1).replaceAll('\\`', '`');
         }
+        else {
+            return `\$\{${line}\}`;
+        }
     }
     return undefined;
 }
@@ -134,41 +137,6 @@ export function emptyFlowModuleState() {
         previewResult: NEVER_TESTED_THIS_FAR
     };
 }
-const aCharCode = 'a'.charCodeAt(0);
-export function numberToChars(n) {
-    if (n < 0) {
-        return '-' + numberToChars(-n);
-    }
-    var b = [n], sp, out, i, div;
-    sp = 0;
-    while (sp < b.length) {
-        if (b[sp] > 25) {
-            div = Math.floor(b[sp] / 26);
-            b[sp + 1] = div - 1;
-            b[sp] %= 26;
-        }
-        sp += 1;
-    }
-    out = '';
-    for (i = 0; i < b.length; i += 1) {
-        let charCode = aCharCode + b[i];
-        out = String.fromCharCode(charCode) + out;
-    }
-    return out;
-}
-export function charsToNumber(n) {
-    if (n.charAt(0) == '-') {
-        return charsToNumber(n.slice(1)) * -1;
-    }
-    let b = Math.pow(26, n.length - 1);
-    let res = 0;
-    for (let c of n) {
-        let charCode = c == '-' || c == '_' ? aCharCode + 25 : c.charCodeAt(0);
-        res += (charCode - aCharCode + 1) * b;
-        b = b / 26;
-    }
-    return res - 1;
-}
 export async function findNextAvailablePath(path) {
     try {
         await ScriptService.getScriptByPath({

package/components/graph/FlowGraph.svelte

@@ -156,7 +156,7 @@ function flowModuleToNode(parentIds, mod, edgeLabel, annotation, loopDepth, inse
                     insertableEnd,
                     branchable,
                     bgColor: getStateColor(flowModuleStates?.[mod.id]?.type),
-                    annotation,
+                    // annotation,
                     modules,
                     moving
                 },

package/components/graph/svelvet/collapsible/controllers/util.js

@@ -14,22 +14,12 @@ export function populateCollapsibleStore(store, userNodes, userEdges, canvasId)
     }
     store.collapsibleStore.set(newCollapsibleStore);
 }
-/*
-
-*/
-function incrementHideCount(store, nodeId) {
-    const collapsibles = get(store.collapsibleStore);
-    for (let collapsible of collapsibles)
-        if (collapsible.nodeId === nodeId)
-            collapsible.hideCount++;
-    store.collapsibleStore.set(collapsibles);
-}
 // Given a nodeId, find ids of all connecting target nodes
 function findTargets(store, nodeId) {
     // get source anchors on the node
     const anchors = getAnchors(store, {
         nodeId: nodeId,
-        sourceOrTarget: 'source',
+        sourceOrTarget: 'source'
     });
     // get target anchors on other node, and record the node id
     const targetNodeIds = [];
@@ -128,8 +118,7 @@ export function filterByCollapsible(store, nodes, resizeNodes, anchors, edges) {
     const filteredAnchors = anchors.filter((selfAnchor) => {
         const otherAnchorId = selfAnchor.getOtherAnchorId();
         const otherAnchor = get(store.anchorsStore)[otherAnchorId];
-        if (filteredNodeIds.includes(selfAnchor.nodeId) &&
-            filteredNodeIds.includes(otherAnchor.nodeId))
+        if (filteredNodeIds.includes(selfAnchor.nodeId) && filteredNodeIds.includes(otherAnchor.nodeId))
             return true;
         return false;
     });
@@ -139,6 +128,6 @@ export function filterByCollapsible(store, nodes, resizeNodes, anchors, edges) {
         filteredNodes,
         filteredResizeNodes,
         filteredAnchors,
-        filteredEdges,
+        filteredEdges
     };
 }

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

@@ -1,13 +1,12 @@
-<script>import { onMount } from 'svelte';
-import { zoom, zoomTransform, zoomIdentity } from 'd3-zoom';
-import { select, selectAll, pointer } from 'd3-selection';
+<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 StepEdge from '../../edges/views/Edges/StepEdge.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 { determineD3Instance, zoomInit } from '../..//d3/controllers/d3';
-import { filterByCollapsible } from '../../collapsible/controllers/util';
 import { onDestroy } from 'svelte';
 //these are typscripted as any, however they have been transformed inside of store.ts
 export let canvasId;
@@ -17,10 +16,9 @@ export let boundary = false;
 export let scroll = false;
 // here we lookup the store using the unique key
 const store = findStore(canvasId);
-const { edgesStore, nodesStore, anchorsStore, nodeSelected, backgroundStore, movementStore, widthStore, heightStore, d3Scale, collapsibleStore } = store;
+const { edgesStore, nodesStore, nodeSelected, backgroundStore, movementStore, widthStore, heightStore, d3Scale } = store;
 $: nodes = Object.values($nodesStore);
 $: edges = Object.values($edgesStore);
-$: anchors = Object.values($anchorsStore);
 // declaring the grid and dot size for d3's transformations and zoom
 const gridSize = 15;
 const dotSize = 10;
@@ -35,7 +33,6 @@ let d3 = {
 };
 let d3Zoom = determineD3Instance(boundary, d3, nodeSelected, width, height, movementStore, backgroundStore, gridSize, dotSize, canvasId, d3Scale, handleZoom);
 // d3Translate is used for the minimap
-let d3Translate = { x: 0, y: 0, k: 1 };
 onMount(() => {
     // actualizes the d3 instance
     const nodes = d3.select(`.zoomable`).call(d3Zoom).on('dblclick.zoom', null);
@@ -93,7 +90,6 @@ onDestroy(() => {
 // 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
-const key = canvasId;
 function handleZoom(e) {
     if (!$movementStore)
         return;
@@ -104,7 +100,6 @@ function handleZoom(e) {
     // transform div elements (nodes)
     //@ts-ignore
     let transform = d3.zoomTransform(this);
-    d3Translate = transform;
     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}`)
@@ -121,9 +116,9 @@ function handleZoom(e) {
 			<div class={`Node Node-${canvasId}`}>
 				{#each nodes as node}
 					{#if node.data.html}
-						<Node {node} {canvasId} nodeId={node.id}>{@html node.data.html}</Node>
+						<Node {node} {canvasId}>{@html node.data.html}</Node>
 					{:else if node.data.custom}
-						<Node isCustom {node} {canvasId} nodeId={node.id}>
+						<Node isCustom {node} {canvasId}>
 							<svelte:component
 								this={node.data.custom.component}
 								on:new={(e) => node?.data?.custom?.cb?.('new', e.detail)}
@@ -137,7 +132,7 @@ function handleZoom(e) {
 							/>
 						</Node>
 					{:else}
-						<Node {node} {canvasId} nodeId={node.id}>{node.data.label}</Node>
+						<Node {node} {canvasId}>{node.data.label}</Node>
 					{/if}
 				{/each}
 			</div>

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

@@ -112,4 +112,5 @@ afterUpdate(() => {
 		overflow: hidden;
 		display: grid;
 		font-family: 'Segoe UI', sans-serif;
+		z-index: 1;
 	}</style>

package/components/graph/svelvet/edges/controllers/anchorCbDev.js

@@ -46,7 +46,7 @@ export function dynamicCbCreator(store, edgeId, anchorId) {
             nodeSelf.positionX + nodeSelf.width / 2,
             nodeSelf.positionY + nodeSelf.height / 2,
             nodeOther.positionX + nodeOther.width / 2,
-            nodeOther.positionY + nodeOther.height / 2,
+            nodeOther.positionY + nodeOther.height / 2
         ];
         // record angle for later. We use this so we don't have an infinite loop
         let prevAngle = anchorSelf.angle;
@@ -57,14 +57,14 @@ export function dynamicCbCreator(store, edgeId, anchorId) {
             // self node is on the left, other node is on the right
             if (nodeSelf.positionX < nodeOther.positionX) {
                 const [selfX, selfY] = rightCb(nodeSelf.positionX, nodeSelf.positionY, nodeSelf.width, nodeSelf.height);
-                const [otherX, otherY] = leftCb(nodeOther.positionX, nodeOther.positionY, nodeOther.width, nodeOther.height);
+                leftCb(nodeOther.positionX, nodeOther.positionY, nodeOther.width, nodeOther.height);
                 anchorSelf.setPosition(selfX, selfY);
                 anchorSelf.angle = 0; // if the self node is on the left, the anchor should have orientation of 0 degrees on the unit circle
             }
             else {
                 // in this case, the self node is on the right and the other node is on the left
                 const [selfX, selfY] = leftCb(nodeSelf.positionX, nodeSelf.positionY, nodeSelf.width, nodeSelf.height);
-                const [otherX, otherY] = rightCb(nodeOther.positionX, nodeOther.positionY, nodeOther.width, nodeOther.height);
+                rightCb(nodeOther.positionX, nodeOther.positionY, nodeOther.width, nodeOther.height);
                 anchorSelf.setPosition(selfX, selfY);
                 anchorSelf.angle = 180;
             }
@@ -73,13 +73,13 @@ export function dynamicCbCreator(store, edgeId, anchorId) {
             if (nodeSelf.positionY < nodeOther.positionY) {
                 // here the self node is above the other node
                 const [selfX, selfY] = bottomCb(nodeSelf.positionX, nodeSelf.positionY, nodeSelf.width, nodeSelf.height);
-                const [otherX, otherY] = topCb(nodeOther.positionX, nodeOther.positionY, nodeOther.width, nodeOther.height);
+                topCb(nodeOther.positionX, nodeOther.positionY, nodeOther.width, nodeOther.height);
                 anchorSelf.setPosition(selfX, selfY);
                 anchorSelf.angle = 270;
             }
             else {
                 const [selfX, selfY] = topCb(nodeSelf.positionX, nodeSelf.positionY, nodeSelf.width, nodeSelf.height);
-                const [otherX, otherY] = bottomCb(nodeOther.positionX, nodeOther.positionY, nodeOther.width, nodeOther.height);
+                bottomCb(nodeOther.positionX, nodeOther.positionY, nodeOther.width, nodeOther.height);
                 anchorSelf.setPosition(selfX, selfY);
                 anchorSelf.angle = 90;
             }

package/components/graph/svelvet/edges/controllers/util.js

@@ -33,7 +33,7 @@ export function getAnchors(store, filter) {
  * @returns The source or target Anchor object of a given edge
  */
 export function getAnchorFromEdge(store, edgeId, sourceOrTarget) {
-    const edge = getEdgeById(store, edgeId);
+    getEdgeById(store, edgeId);
     const anchors = getAnchors(store, { edgeId: edgeId });
     if (anchors.length !== 2)
         throw `there should be two anchors for a given edge, there are ${anchors.length}`;

package/components/graph/svelvet/edges/models/Edge.js

@@ -58,7 +58,7 @@ export class Edge {
      */
     delete() {
         const store = stores[this.canvasId];
-        const { nodesStore, anchorsStore, edgesStore } = store;
+        const { anchorsStore, edgesStore } = store;
         const sourceAnchor = getAnchorFromEdge(store, this.id, 'source'); // this is a bit wasteful
         const targetAnchor = getAnchorFromEdge(store, this.id, 'target');
         anchorsStore.update((anchors) => {
@@ -89,7 +89,7 @@ export class Edge {
             noHandle: this.noHandle,
             arrow: this.arrow,
             source: 'dummy',
-            target: 'dummy', // these will be set later
+            target: 'dummy' // these will be set later
         };
         // set source, target on exportableData
         const store = findStore(this.canvasId);

package/components/graph/svelvet/edges/views/Edges/SimpleBezierEdge.svelte

@@ -102,7 +102,7 @@ function getSimpleBezierCenter({ sourceX, sourceY, sourcePosition = Position.Bot
 export let canvasId;
 export let edgeId;
 const store = findStore(canvasId);
-const { nodesStore, edgesStore, anchorsStore } = store;
+const { edgesStore } = store;
 let edge;
 $: edge = $edgesStore[edgeId];
 let params;