remove all frontend warnings and unused imports

frontend/src/lib/components/AppConnect.svelte

@@ -370,7 +370,7 @@
 			<h2 class="mt-8 mb-4">Non OAuth APIs & Resources</h2>
 			<div class="grid sm:grid-cols-2 md:grid-cols-3 gap-x-2 gap-y-1 items-center mb-2">
 				{#if filteredConnectsManual}
-					{#each filteredConnectsManual as [key, instructions]}
+					{#each filteredConnectsManual as [key, _]}
 						<Button
 							size="sm"
 							variant="border"
@@ -414,7 +414,7 @@
 				</div>
 				{#if apiTokenApps[resource_type].img}
 					<div class="mt-4 w-full overflow-hidden">
-						<img class="m-auto  max-h-60" alt="connect" src={apiTokenApps[resource_type].img} />
+						<img class="m-auto max-h-60" alt="connect" src={apiTokenApps[resource_type].img} />
 					</div>
 				{/if}
 			{/if}

frontend/src/lib/components/ArgInfo.svelte

@@ -1,13 +1,11 @@
 <script lang="ts">
-	import { truncate } from '$lib/utils'
-	import Tooltip from './Tooltip.svelte'
-	import json from 'svelte-highlight/languages/json'
-	import { Highlight } from 'svelte-highlight'
 	import { ResourceService } from '$lib/gen'
 	import { workspaceStore } from '$lib/stores'
-	import Drawer from './common/drawer/Drawer.svelte'
+	import { truncate } from '$lib/utils'
 	import { DrawerContent } from './common'
+	import Drawer from './common/drawer/Drawer.svelte'
 	import ObjectViewer from './propertyPicker/ObjectViewer.svelte'
+	import Tooltip from './Tooltip.svelte'
 
 	export let value: any
 	let jsonViewer: Drawer

frontend/src/lib/components/ArgInput.svelte

@@ -3,32 +3,31 @@
 		faChevronDown,
 		faChevronUp,
 		faDollarSign,
-		faMinus,
 		faPlus
 	} from '@fortawesome/free-solid-svg-icons'
 
-	import { setInputCat as computeInputCat } from '$lib/utils'
-	import { Badge, Button } from './common'
-	import { createEventDispatcher } from 'svelte'
-	import Icon from 'svelte-awesome'
-	import FieldHeader from './FieldHeader.svelte'
-	import ObjectResourceInput from './ObjectResourceInput.svelte'
-	import ObjectTypeNarrowing from './ObjectTypeNarrowing.svelte'
-	import ResourcePicker from './ResourcePicker.svelte'
-	import StringTypeNarrowing from './StringTypeNarrowing.svelte'
-	import SchemaForm from './SchemaForm.svelte'
 	import type { SchemaProperty } from '$lib/common'
-	import SimpleEditor from './SimpleEditor.svelte'
+	import { setInputCat as computeInputCat } from '$lib/utils'
+	import { X } from 'lucide-svelte'
+	import { createEventDispatcher } from 'svelte'
 	import autosize from 'svelte-autosize'
-	import Toggle from './Toggle.svelte'
-	import Password from './Password.svelte'
-	import type VariableEditor from './VariableEditor.svelte'
+	import Icon from 'svelte-awesome'
+	import { fade } from 'svelte/transition'
+	import JsonEditor from './apps/editor/settingsPanel/inputEditor/JsonEditor.svelte'
+	import { Badge, Button } from './common'
+	import FieldHeader from './FieldHeader.svelte'
 	import type ItemPicker from './ItemPicker.svelte'
 	import NumberTypeNarrowing from './NumberTypeNarrowing.svelte'
+	import ObjectResourceInput from './ObjectResourceInput.svelte'
+	import ObjectTypeNarrowing from './ObjectTypeNarrowing.svelte'
+	import Password from './Password.svelte'
 	import Range from './Range.svelte'
-	import JsonEditor from './apps/editor/settingsPanel/inputEditor/JsonEditor.svelte'
-	import { fade } from 'svelte/transition'
-	import { X } from 'lucide-svelte'
+	import ResourcePicker from './ResourcePicker.svelte'
+	import SchemaForm from './SchemaForm.svelte'
+	import SimpleEditor from './SimpleEditor.svelte'
+	import StringTypeNarrowing from './StringTypeNarrowing.svelte'
+	import Toggle from './Toggle.svelte'
+	import type VariableEditor from './VariableEditor.svelte'
 
 	export let label: string = ''
 	export let value: any
@@ -42,7 +41,6 @@
 	export let required = false
 	export let pattern: undefined | string = undefined
 	export let valid = required ? false : true
-	export let maxRows = 10
 	export let enum_: string[] | undefined = undefined
 	export let disabled = false
 	export let editableSchema = false
@@ -63,8 +61,6 @@
 	let seeEditable: boolean = enum_ != undefined || pattern != undefined
 	const dispatch = createEventDispatcher()
 
-	$: maxHeight = maxRows ? `${1 + maxRows * 1.2}em` : `auto`
-
 	$: validateInput(pattern, value)
 
 	let error: string = ''

frontend/src/lib/components/CronInput.svelte

@@ -4,7 +4,7 @@
 
 <script lang="ts">
 	import { ScheduleService } from '$lib/gen'
-	import { displayDate, emptyString, formatCron, sendUserToast } from '$lib/utils'
+	import { displayDate, emptyString, formatCron } from '$lib/utils'
 	import CollapseLink from './CollapseLink.svelte'
 
 	export let validCRON = true

frontend/src/lib/components/Editor.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" context="module">
-	import { StandaloneServices } from 'vscode/services'
-	import getNotificationServiceOverride from 'vscode/service-override/notifications'
 	import getDialogServiceOverride from 'vscode/service-override/dialogs'
+	import getNotificationServiceOverride from 'vscode/service-override/notifications'
+	import { StandaloneServices } from 'vscode/services'
 
 	try {
 		StandaloneServices?.initialize({
@@ -14,7 +14,7 @@
 </script>
 
 <script lang="ts">
-	import { browser, dev } from '$app/environment'
+	import { browser } from '$app/environment'
 	import { page } from '$app/stores'
 	import { sendUserToast } from '$lib/utils'
 
@@ -22,7 +22,7 @@
 	import type { MonacoLanguageClient } from 'monaco-languageclient'
 	import { createEventDispatcher, onDestroy, onMount } from 'svelte'
 
-	import { languages, editor as meditor, KeyCode, KeyMod, Uri as mUri } from 'monaco-editor'
+	import { editor as meditor, KeyCode, KeyMod, languages, Uri as mUri } from 'monaco-editor'
 
 	languages.typescript.typescriptDefaults.setCompilerOptions({
 		target: languages.typescript.ScriptTarget.Latest,
@@ -47,21 +47,21 @@
 	})
 	meditor.setTheme('myTheme')
 
-	import {
-		BASH_INIT_CODE,
-		DENO_INIT_CODE_CLEAR,
-		GO_INIT_CODE,
-		PYTHON_INIT_CODE_CLEAR
-	} from '$lib/script_helpers'
 	import {
 		createHash as randomHash,
 		editorConfig,
 		langToExt,
 		updateOptions
 	} from '$lib/editorUtils'
-	import { dirtyStore } from './common/confirmationModal/dirtyStore'
+	import {
+		BASH_INIT_CODE,
+		DENO_INIT_CODE_CLEAR,
+		GO_INIT_CODE,
+		PYTHON_INIT_CODE_CLEAR
+	} from '$lib/script_helpers'
 	import type { Disposable } from 'vscode'
 	import type { DocumentUri, MessageTransports } from 'vscode-languageclient'
+	import { dirtyStore } from './common/confirmationModal/dirtyStore'
 
 	let divEl: HTMLDivElement | null = null
 	let editor: meditor.IStandaloneCodeEditor

frontend/src/lib/components/FlowGraphViewer.svelte

@@ -23,7 +23,6 @@
 
 	let stepDetail: FlowModule | string | undefined = undefined
 	let codeViewer: Drawer
-	let topHeight = 0
 </script>
 
 <Drawer bind:this={codeViewer} size="900px">
@@ -48,7 +47,7 @@
 					<div class="mt-6">
 						<h3>Code</h3>
 						<iframe
-							class="w-full h-full  text-sm"
+							class="w-full h-full text-sm"
 							title="embedded script from hub"
 							frameborder="0"
 							src="https://hub.windmill.dev/embed/script/{stepDetail.value?.path?.substring(4)}"
@@ -141,7 +140,7 @@
 								>
 							</h3>
 							<iframe
-								class="w-full h-full  text-sm"
+								class="w-full h-full text-sm"
 								title="embedded script from hub"
 								frameborder="0"
 								src="https://hub.windmill.dev/embed/script/{stepDetail.value?.path?.substring(4)}"

frontend/src/lib/components/FolderEditor.svelte

@@ -19,11 +19,9 @@
 	type Role = 'viewer' | 'writer' | 'admin'
 	let folder: Folder | undefined
 	let perms: { owner_name: string; role: Role }[] | undefined = undefined
-	let managing_folders: string[] = []
 	let usernames: string[] = []
 	let groups: string[] = []
 	let ownerItem: string = ''
-	let folders: string[] = []
 
 	async function loadUsernames(): Promise<void> {
 		usernames = await UserService.listUsernames({ workspace: $workspaceStore! })
@@ -42,14 +40,9 @@
 	async function load() {
 		loadUsernames()
 		loadGroups()
-		loadFolders()
 		await loadFolder()
 	}
 
-	async function loadFolders(): Promise<void> {
-		folders = (await FolderService.listFolders({ workspace: $workspaceStore! })).map((x) => x.name)
-	}
-
 	async function addToFolder() {
 		await GranularAclService.addGranularAcls({
 			workspace: $workspaceStore ?? '',
@@ -67,7 +60,8 @@
 		can_write =
 			$userStore != undefined &&
 			(folder?.owners.includes('u/' + $userStore.username) ||
-				($userStore.is_admin ?? false) || ($userStore.is_super_admin ?? false) ||
+				($userStore.is_admin ?? false) ||
+				($userStore.is_super_admin ?? false) ||
 				$userStore.pgroups.findIndex((x) => folder?.owners.includes(x)) != -1)
 
 		perms = Array.from(
@@ -82,9 +76,6 @@
 				role: getRole(x)
 			}
 		})
-		managing_folders = Object.entries(folder?.extra_perms ?? {})
-			.filter(([k, v]) => k.startsWith('g/') && v)
-			.map(([k, v]) => k)
 	}
 
 	function getRole(x: string): Role {

frontend/src/lib/components/FolderUsageInfo.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { FolderService, GroupService } from '$lib/gen'
+	import { FolderService } from '$lib/gen'
 	import { workspaceStore } from '$lib/stores'
 
 	export let name: string

frontend/src/lib/components/GroupEditor.svelte

@@ -1,14 +1,14 @@
 <script lang="ts">
+	import { GranularAclService, GroupService, UserService, type Group } from '$lib/gen'
 	import { userStore, workspaceStore } from '$lib/stores'
-	import { type Group, GroupService, UserService, GranularAclService } from '$lib/gen'
-	import AutoComplete from 'simple-svelte-autocomplete'
-	import TableCustom from './TableCustom.svelte'
 	import { canWrite, sendUserToast } from '$lib/utils'
+	import AutoComplete from 'simple-svelte-autocomplete'
+	import { createEventDispatcher } from 'svelte'
+	import autosize from 'svelte-autosize'
 	import { Button, ToggleButton, ToggleButtonGroup } from './common'
 	import Skeleton from './common/skeleton/Skeleton.svelte'
+	import TableCustom from './TableCustom.svelte'
 	import Tooltip from './Tooltip.svelte'
-	import autosize from 'svelte-autosize'
-	import { createEventDispatcher } from 'svelte'
 
 	export let name: string
 	let can_write = false
@@ -16,10 +16,8 @@
 	type Role = 'member' | 'manager' | 'admin'
 	let group: Group | undefined
 	let members: { member_name: string; role: Role }[] | undefined = undefined
-	let managing_groups: string[] = []
 	let usernames: string[] | undefined = []
 	let username: string = ''
-	let groups: string[] = []
 
 	const dispatch = createEventDispatcher()
 
@@ -34,15 +32,10 @@
 	}
 
 	async function load() {
-		loadGroups()
 		await loadGroup()
 		loadUsernames()
 	}
 
-	async function loadGroups(): Promise<void> {
-		groups = (await GroupService.listGroups({ workspace: $workspaceStore! })).map((x) => x.name)
-	}
-
 	async function addToGroup() {
 		await GroupService.addUserToGroup({
 			workspace: $workspaceStore ?? '',
@@ -68,9 +61,6 @@
 				role: getRole(x)
 			}
 		})
-		managing_groups = Object.entries(group?.extra_perms ?? {})
-			.filter(([k, v]) => k.startsWith('g/') && v)
-			.map(([k, v]) => k)
 	}
 
 	function getRole(x: string): Role {

frontend/src/lib/components/InputTransformSchemaForm.svelte

@@ -55,7 +55,7 @@
 
 <div class="w-full {clazz}">
 	{#if keys.length > 0}
-		{#each keys as argName, i (argName)}
+		{#each keys as argName (argName)}
 			{#if (!filter || filter.includes(argName)) && Object.keys(schema.properties ?? {}).includes(argName)}
 				<div class="z-10">
 					<InputTransformForm

frontend/src/lib/components/LightweightArgInput.svelte

@@ -314,5 +314,14 @@
 			{/if}
 			<slot name="actions" />
 		</div>
+		{#if error && error != ''}
+			<div class="text-right text-xs text-red-600">
+				{#if error === ''}
+					&nbsp;
+				{:else}
+					{error}
+				{/if}
+			</div>
+		{/if}
 	</div>
 </div>

frontend/src/lib/components/LightweightSchemaForm.svelte

@@ -11,7 +11,7 @@
 </script>
 
 <div class="w-full">
-	{#each Object.keys(schema.properties ?? {}) as argName, i (argName)}
+	{#each Object.keys(schema.properties ?? {}) as argName (argName)}
 		<div>
 			{#if typeof args == 'object' && schema?.properties[argName] && args}
 				<LightweightArgInput

frontend/src/lib/components/ModulePreview.svelte

@@ -1,17 +1,17 @@
 <script lang="ts">
 	import type { Schema } from '$lib/common'
 	import { ScriptService, type FlowModule, type InputTransform, type Job } from '$lib/gen'
-	import { getScriptByPath, sendUserToast, truncateRev } from '$lib/utils'
-	import { Pane, Splitpanes } from 'svelte-splitpanes'
-	import RunForm from './RunForm.svelte'
-	import TestJobLoader from './TestJobLoader.svelte'
-	import LogViewer from './LogViewer.svelte'
-	import DisplayResult from './DisplayResult.svelte'
-	import Button from './common/button/Button.svelte'
 	import { workspaceStore } from '$lib/stores'
+	import { getScriptByPath } from '$lib/utils'
 	import { Loader2 } from 'lucide-svelte'
 	import { getContext } from 'svelte'
+	import { Pane, Splitpanes } from 'svelte-splitpanes'
+	import Button from './common/button/Button.svelte'
+	import DisplayResult from './DisplayResult.svelte'
 	import type { FlowEditorContext } from './flows/types'
+	import LogViewer from './LogViewer.svelte'
+	import RunForm from './RunForm.svelte'
+	import TestJobLoader from './TestJobLoader.svelte'
 
 	export let mod: FlowModule
 	export let schema: Schema
@@ -43,14 +43,14 @@
 
 	export async function runTest(args: any) {
 		const val = mod.value
-		let jobId: string | undefined = undefined
+		// let jobId: string | undefined = undefined
 		if (val.type == 'rawscript') {
-			jobId = await testJobLoader?.runPreview(val.path, val.content, val.language, args)
+			await testJobLoader?.runPreview(val.path, val.content, val.language, args)
 		} else if (val.type == 'script') {
 			const script = val.hash
 				? await ScriptService.getScriptByHash({ workspace: $workspaceStore!, hash: val.hash })
 				: await getScriptByPath(val.path)
-			jobId = await testJobLoader?.runPreview(val.path, script.content, script.language, args)
+			await testJobLoader?.runPreview(val.path, script.content, script.language, args)
 		} else {
 			throw Error('not testable module type')
 		}

frontend/src/lib/components/ModuleStatus.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
 	import { FlowStatusModule } from '$lib/gen'
-	import { displayDate } from '$lib/utils'
 	import { faHourglassHalf } from '@fortawesome/free-solid-svg-icons'
 	import { Icon } from 'svelte-awesome'
 	import { Badge } from './common'

frontend/src/lib/components/ObjectResourceInput.svelte

@@ -1,7 +1,4 @@
 <script lang="ts">
-	import { ResourceService } from '$lib/gen'
-
-	import { workspaceStore } from '$lib/stores'
 	import ResourcePicker from './ResourcePicker.svelte'
 
 	export let format: string
@@ -12,26 +9,6 @@
 	}
 
 	let path: string = ''
-	let args: Record<string, any> = {}
-
-	let schema: any | undefined = undefined
-	let resourceTypeName: string = ''
-
-	$: format.startsWith('resource-') && loadSchema(format)
-
-	async function loadSchema(format: string) {
-		resourceTypeName = format.substring('resource-'.length)
-		try {
-			schema = (
-				await ResourceService.getResourceType({
-					workspace: $workspaceStore!,
-					path: resourceTypeName
-				})
-			).schema
-		} catch (e) {
-			schema = undefined
-		}
-	}
 
 	function resourceToValue() {
 		if (path) {
@@ -46,10 +23,6 @@
 	}
 
 	function valueToPath() {
-		if (!isString(value) && value) {
-			args = value
-		}
-
 		if (isResource()) {
 			path = value.substr('$res:'.length)
 		}
@@ -60,7 +33,6 @@
 
 <div class="flex flex-row w-full flex-wrap gap-x-2 gap-y-0.5">
 	<ResourcePicker
-		on:refresh={() => loadSchema(format)}
 		on:change={(e) => {
 			path = e.detail
 			resourceToValue()

frontend/src/lib/components/Path.svelte

@@ -3,32 +3,30 @@
 </script>
 
 <script lang="ts">
-	import { type Meta, pathToMeta } from '$lib/common'
+	import { pathToMeta, type Meta } from '$lib/common'
 
 	import {
 		AppService,
 		FlowService,
 		FolderService,
-		GroupService,
 		ResourceService,
 		ScheduleService,
 		ScriptService,
 		VariableService
 	} from '$lib/gen'
 	import { superadmin, userStore, workspaceStore } from '$lib/stores'
-	import { createEventDispatcher } from 'svelte'
-	import Required from './Required.svelte'
-	import { Button, Drawer, DrawerContent } from './common'
 	import { faEye, faPlus } from '@fortawesome/free-solid-svg-icons'
-	import ToggleButtonGroup from './common/toggleButton/ToggleButtonGroup.svelte'
-	import ToggleButton from './common/toggleButton/ToggleButton.svelte'
+	import { createEventDispatcher } from 'svelte'
 	import { Icon } from 'svelte-awesome'
-	import Tooltip from './Tooltip.svelte'
-	import FolderEditor from './FolderEditor.svelte'
-	import GroupEditor from './GroupEditor.svelte'
-	import { random_adj } from './random_positive_adjetive'
-	import Badge from './common/badge/Badge.svelte'
 	import { writable } from 'svelte/store'
+	import { Button, Drawer, DrawerContent } from './common'
+	import Badge from './common/badge/Badge.svelte'
+	import ToggleButton from './common/toggleButton/ToggleButton.svelte'
+	import ToggleButtonGroup from './common/toggleButton/ToggleButtonGroup.svelte'
+	import FolderEditor from './FolderEditor.svelte'
+	import { random_adj } from './random_positive_adjetive'
+	import Required from './Required.svelte'
+	import Tooltip from './Tooltip.svelte'
 
 	type PathKind = 'resource' | 'script' | 'variable' | 'flow' | 'schedule' | 'app'
 	let meta: Meta | undefined = undefined
@@ -46,7 +44,6 @@
 	const dispatch = createEventDispatcher()
 
 	let folders: { name: string; write: boolean }[] = []
-	let groups: string[] = []
 
 	$: meta && onMetaChange()
 
@@ -130,18 +127,6 @@
 		)
 	}
 
-	async function loadGroups(): Promise<void> {
-		let initialGroups: string[] = []
-		if (initialPath?.split('/')?.[0] == 'f') {
-			initialGroups.push(initialPath?.split('/')?.[1])
-		}
-		groups = initialGroups.concat(
-			await GroupService.listGroupNames({
-				workspace: $workspaceStore!
-			})
-		)
-	}
-
 	async function validate(meta: Meta, path: string, kind: PathKind) {
 		error = ''
 		validateName(meta) && validatePath(path, kind)
@@ -214,7 +199,6 @@
 	$: {
 		if ($workspaceStore && $userStore) {
 			loadFolders()
-			loadGroups()
 			initPath()
 		}
 	}

frontend/src/lib/components/Range.svelte

@@ -51,10 +51,6 @@
 		onDragStart(e)
 	}
 
-	function onHover(e) {
-		thumbHover = thumbHover ? false : true
-	}
-
 	function onDragStart(e) {
 		// If mouse event add a pointer events shield
 		if (e.type === 'mousedown') document.body.append(mouseEventShield)

frontend/src/lib/components/ResourceEditor.svelte

@@ -1,18 +1,18 @@
 <script lang="ts">
-	import { type Resource, ResourceService, type ResourceType, VariableService } from '$lib/gen'
+	import type { Schema } from '$lib/common'
+	import { ResourceService, type Resource } from '$lib/gen'
 	import { canWrite, emptyString, sendUserToast } from '$lib/utils'
 	import { createEventDispatcher } from 'svelte'
-	import type { Schema } from '$lib/common'
+	import { Alert, Button, Drawer, Skeleton } from './common'
 	import Path from './Path.svelte'
 	import Required from './Required.svelte'
-	import { Alert, Button, Drawer, Skeleton } from './common'
 
 	import { userStore, workspaceStore } from '$lib/stores'
-	import DrawerContent from './common/drawer/DrawerContent.svelte'
-	import autosize from 'svelte-autosize'
-	import SimpleEditor from './SimpleEditor.svelte'
 	import { faSave } from '@fortawesome/free-solid-svg-icons'
+	import autosize from 'svelte-autosize'
+	import DrawerContent from './common/drawer/DrawerContent.svelte'
 	import SchemaForm from './SchemaForm.svelte'
+	import SimpleEditor from './SimpleEditor.svelte'
 	import Toggle from './Toggle.svelte'
 
 	let path = ''
@@ -131,7 +131,7 @@
 		on:close={drawer.closeDrawer}
 	>
 		<div>
-			<div class="flex flex-col gap-3 py-3  text-gray-700">
+			<div class="flex flex-col gap-3 py-3 text-gray-700">
 				<div>
 					{#if !can_write}
 						<div class="m-2">

frontend/src/lib/components/ResourcePicker.svelte

@@ -1,14 +1,14 @@
 <script lang="ts">
-	import { ResourceService, type Resource } from '$lib/gen'
+	import { ResourceService } from '$lib/gen'
 	import { workspaceStore } from '$lib/stores'
 	import { faPen, faPlus, faRotateRight } from '@fortawesome/free-solid-svg-icons'
 	import { createEventDispatcher } from 'svelte'
 	import Icon from 'svelte-awesome'
-	import { Button } from './common'
 	import Select from 'svelte-select'
-	import AppConnect from './AppConnect.svelte'
-	import ResourceEditor from './ResourceEditor.svelte'
 	import { SELECT_INPUT_DEFAULT_STYLE } from '../defaults'
+	import AppConnect from './AppConnect.svelte'
+	import { Button } from './common'
+	import ResourceEditor from './ResourceEditor.svelte'
 
 	const dispatch = createEventDispatcher()
 

frontend/src/lib/components/RunForm.svelte

@@ -1,7 +1,5 @@
 <script lang="ts">
-	import { page } from '$app/stores'
 	import {
-		decodeArgs,
 		defaultIfEmptyString,
 		displayDaysAgo,
 		emptyString,
@@ -10,16 +8,16 @@
 	} from '$lib/utils'
 	import { slide } from 'svelte/transition'
 
-	import { faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons'
-	import SchemaForm from './SchemaForm.svelte'
 	import type { Schema } from '$lib/common'
+	import { runFormStore, userStore } from '$lib/stores'
+	import { faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons'
+	import CliHelpBox from './CliHelpBox.svelte'
 	import { Badge, Button } from './common'
+	import InlineCodeCopy from './InlineCodeCopy.svelte'
+	import SchemaForm from './SchemaForm.svelte'
 	import SharedBadge from './SharedBadge.svelte'
 	import Toggle from './Toggle.svelte'
-	import { runFormStore, userStore } from '$lib/stores'
 	import Tooltip from './Tooltip.svelte'
-	import CliHelpBox from './CliHelpBox.svelte'
-	import InlineCodeCopy from './InlineCodeCopy.svelte'
 
 	export let runnable:
 		| {

frontend/src/lib/components/ScheduleEditor.svelte

@@ -7,21 +7,21 @@
 </script>
 
 <script lang="ts">
-	import { sendUserToast, formatCron, canWrite, emptyString } from '$lib/utils'
-	import { ScriptService, Script, ScheduleService, type Flow, FlowService } from '$lib/gen'
 	import Toggle from '$lib/components/Toggle.svelte'
+	import { FlowService, ScheduleService, Script, ScriptService, type Flow } from '$lib/gen'
+	import { canWrite, emptyString, formatCron, sendUserToast } from '$lib/utils'
 
-	import Path from '$lib/components/Path.svelte'
-	import { Alert, Badge, Button } from '$lib/components/common'
-	import Tooltip from '$lib/components/Tooltip.svelte'
-	import { userStore, workspaceStore } from '$lib/stores'
-	import SchemaForm from '$lib/components/SchemaForm.svelte'
-	import ScriptPicker from '$lib/components/ScriptPicker.svelte'
-	import Required from '$lib/components/Required.svelte'
-	import CronInput, { OFFSET } from '$lib/components/CronInput.svelte'
-	import { faSave } from '@fortawesome/free-solid-svg-icons'
+	import { Alert, Button } from '$lib/components/common'
 	import Drawer from '$lib/components/common/drawer/Drawer.svelte'
 	import DrawerContent from '$lib/components/common/drawer/DrawerContent.svelte'
+	import CronInput, { OFFSET } from '$lib/components/CronInput.svelte'
+	import Path from '$lib/components/Path.svelte'
+	import Required from '$lib/components/Required.svelte'
+	import SchemaForm from '$lib/components/SchemaForm.svelte'
+	import ScriptPicker from '$lib/components/ScriptPicker.svelte'
+	import Tooltip from '$lib/components/Tooltip.svelte'
+	import { userStore, workspaceStore } from '$lib/stores'
+	import { faSave } from '@fortawesome/free-solid-svg-icons'
 	import { createEventDispatcher } from 'svelte'
 
 	let initialPath = ''

frontend/src/lib/components/SharedBadge.svelte

@@ -3,7 +3,6 @@
 	import { Users } from 'lucide-svelte'
 	import Badge from './common/badge/Badge.svelte'
 	import Popover from './Popover.svelte'
-	import Tooltip from './Tooltip.svelte'
 
 	export let extraPerms: Record<string, boolean> = {}
 	export let canWrite: boolean

frontend/src/lib/components/SimpleEditor.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
-	import { browser, dev } from '$app/environment'
+	import { browser } from '$app/environment'
 
-	import { createEventDispatcher, onDestroy, onMount } from 'svelte'
 	import { createHash, editorConfig, langToExt, updateOptions } from '$lib/editorUtils'
-	import { languages, editor as meditor, KeyCode, KeyMod, Uri as mUri } from 'monaco-editor'
+	import { editor as meditor, KeyCode, KeyMod, languages, Uri as mUri } from 'monaco-editor'
+	import { createEventDispatcher, onDestroy, onMount } from 'svelte'
 
 	import libStdContent from '$lib/es5.d.ts.txt?raw'
 	import { buildWorkerDefinition } from 'monaco-editor-workers'
@@ -115,17 +115,14 @@
 		})
 
 		if (autoHeight) {
-			let ignoreEvent = false
 			const updateHeight = () => {
 				const contentHeight = Math.min(1000, editor.getContentHeight())
 				if (divEl) {
 					divEl.style.height = `${contentHeight}px`
 				}
 				try {
-					ignoreEvent = true
 					editor.layout({ width, height: contentHeight })
 				} finally {
-					ignoreEvent = false
 				}
 			}
 			editor.onDidContentSizeChange(updateHeight)

frontend/src/lib/components/TemplateEditor.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
-	import { browser, dev } from '$app/environment'
-	import { createEventDispatcher, onDestroy, onMount } from 'svelte'
+	import { browser } from '$app/environment'
 	import {
 		convertKind,
 		createDocumentationString,
@@ -9,9 +8,10 @@
 		editorConfig,
 		updateOptions
 	} from '$lib/editorUtils'
-	import { languages, editor as meditor, Uri as mUri, Range } from 'monaco-editor'
 	import libStdContent from '$lib/es5.d.ts.txt?raw'
+	import { editor as meditor, languages, Range, Uri as mUri } from 'monaco-editor'
 	import { buildWorkerDefinition } from 'monaco-editor-workers'
+	import { createEventDispatcher, onDestroy, onMount } from 'svelte'
 
 	languages.typescript.javascriptDefaults.setCompilerOptions({
 		target: languages.typescript.ScriptTarget.Latest,
@@ -529,18 +529,14 @@
 		})
 
 		if (autoHeight) {
-			let ignoreEvent = false
 			const updateHeight = () => {
 				const contentHeight = Math.min(1000, editor.getContentHeight())
 				if (divEl) {
 					divEl.style.height = `${contentHeight}px`
 				}
 				try {
-					ignoreEvent = true
 					editor.layout({ width, height: contentHeight })
-				} finally {
-					ignoreEvent = false
-				}
+				} catch {}
 			}
 			editor.onDidContentSizeChange(updateHeight)
 			updateHeight()

frontend/src/lib/components/apps/components/buttons/AppForm.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Button, type ButtonType } from '$lib/components/common'
+	import { Button } from '$lib/components/common'
 	import { faUser } from '@fortawesome/free-solid-svg-icons'
 	import { getContext } from 'svelte'
 	import { Icon } from 'svelte-awesome'

frontend/src/lib/components/apps/components/display/AppBarChart.svelte

@@ -1,24 +1,24 @@
 <script lang="ts">
-	import { Bar, Line } from 'svelte-chartjs'
-	import {
-		Chart as ChartJS,
-		Title,
-		Tooltip,
-		Legend,
-		LineElement,
-		LinearScale,
-		PointElement,
-		CategoryScale,
-		BarElement
-	} from 'chart.js'
 	import type { ChartOptions } from 'chart.js'
-	import RunnableWrapper from '../helpers/RunnableWrapper.svelte'
-	import type { AppInput, RichAppInput } from '../../inputType'
-	import InputValue from '../helpers/InputValue.svelte'
-	import { concatCustomCss } from '../../utils'
+	import {
+		BarElement,
+		CategoryScale,
+		Chart as ChartJS,
+		Legend,
+		LinearScale,
+		LineElement,
+		PointElement,
+		Title,
+		Tooltip
+	} from 'chart.js'
 	import { getContext } from 'svelte'
-	import type { AppViewerContext, ComponentCustomCSS, RichConfigurations } from '../../types'
+	import { Bar, Line } from 'svelte-chartjs'
 	import { initOutput } from '../../editor/appUtils'
+	import type { AppInput } from '../../inputType'
+	import type { AppViewerContext, ComponentCustomCSS, RichConfigurations } from '../../types'
+	import { concatCustomCss } from '../../utils'
+	import InputValue from '../helpers/InputValue.svelte'
+	import RunnableWrapper from '../helpers/RunnableWrapper.svelte'
 
 	export let id: string
 	export let componentInput: AppInput | undefined

frontend/src/lib/components/apps/components/display/AppIcon.svelte

@@ -1,12 +1,7 @@
 <script lang="ts">
 	import { getContext } from 'svelte'
 	import { initOutput } from '../../editor/appUtils'
-	import type {
-		AppViewerContext,
-		ComponentCustomCSS,
-		RichConfiguration,
-		RichConfigurations
-	} from '../../types'
+	import type { AppViewerContext, ComponentCustomCSS, RichConfigurations } from '../../types'
 	import { concatCustomCss } from '../../utils'
 	import { AlignWrapper, InputValue } from '../helpers'
 	import { loadIcon } from '../icon'

frontend/src/lib/components/apps/components/display/AppImage.svelte

@@ -2,7 +2,7 @@
 	import { getContext } from 'svelte'
 	import { twMerge } from 'tailwind-merge'
 	import { initConfig, initOutput } from '../../editor/appUtils'
-	import { components, selectOptions } from '../../editor/component'
+	import { components } from '../../editor/component'
 	import type { AppViewerContext, ComponentCustomCSS, RichConfigurations } from '../../types'
 	import { concatCustomCss } from '../../utils'
 	import Loader from '../helpers/Loader.svelte'

frontend/src/lib/components/apps/components/display/AppPdf.svelte

@@ -1,21 +1,16 @@
 <script lang="ts">
-	import { getContext } from 'svelte'
-	import { twMerge } from 'tailwind-merge'
+	import { Download, Loader2, MoveHorizontal, ZoomIn, ZoomOut } from 'lucide-svelte'
 	import { getDocument, type PDFDocumentProxy, type PDFPageProxy } from 'pdfjs-dist'
 	import 'pdfjs-dist/build/pdf.worker.entry'
-	import type {
-		AppViewerContext,
-		ComponentCustomCSS,
-		RichConfiguration,
-		RichConfigurations
-	} from '../../types'
-	import { concatCustomCss } from '../../utils'
-	import InputValue from '../helpers/InputValue.svelte'
+	import { getContext } from 'svelte'
+	import { fade } from 'svelte/transition'
+	import { twMerge } from 'tailwind-merge'
 	import { throttle } from '../../../../utils'
 	import { Button } from '../../../common'
-	import { Download, Loader2, MoveHorizontal, ZoomIn, ZoomOut } from 'lucide-svelte'
-	import { fade } from 'svelte/transition'
 	import { findGridItem, initOutput } from '../../editor/appUtils'
+	import type { AppViewerContext, ComponentCustomCSS, RichConfigurations } from '../../types'
+	import { concatCustomCss } from '../../utils'
+	import InputValue from '../helpers/InputValue.svelte'
 
 	export let id: string
 	export let configuration: RichConfigurations
@@ -314,7 +309,7 @@
 		{/if}
 		{#if $mode !== 'preview' && $selectedComponent?.includes(id)}
 			<button
-				class="fixed z-10 bottom-0 left-0 px-2 py-0.5 bg-indigo-500/90 
+				class="fixed z-10 bottom-0 left-0 px-2 py-0.5 bg-indigo-500/90
 			hover:bg-indigo-500 focus:bg-indigo-500 duration-200 text-white text-2xs"
 				on:click={() => syncZoomValue()}
 			>
@@ -323,7 +318,7 @@
 		{/if}
 		{#if error}
 			<div
-				class="absolute inset-0 z-20 center-center 
+				class="absolute inset-0 z-20 center-center
 		bg-gray-100 text-center text-gray-600 text-sm"
 			>
 				{error}

frontend/src/lib/components/apps/components/display/AppText.svelte

@@ -1,25 +1,25 @@
 <script lang="ts">
+	import { isCodeInjection } from '$lib/components/flows/utils'
+	import Tooltip from '$lib/components/Tooltip.svelte'
 	import { Clipboard } from 'lucide-svelte'
+	import { getContext } from 'svelte'
+	import { get } from 'svelte/store'
+	import { twMerge } from 'tailwind-merge'
 	import { copyToClipboard } from '../../../../utils'
 	import Button from '../../../common/button/Button.svelte'
 	import Popover from '../../../Popover.svelte'
-	import type { AppInput, EvalAppInput } from '../../inputType'
-	import AlignWrapper from '../helpers/AlignWrapper.svelte'
-	import RunnableWrapper from '../helpers/RunnableWrapper.svelte'
-	import { twMerge } from 'tailwind-merge'
+	import { initConfig, initOutput } from '../../editor/appUtils'
+	import { components } from '../../editor/component'
+	import type { AppInput } from '../../inputType'
 	import type {
 		AppEditorContext,
 		AppViewerContext,
 		ComponentCustomCSS,
 		RichConfigurations
 	} from '../../types'
-	import { getContext } from 'svelte'
-	import { initConfig, initOutput } from '../../editor/appUtils'
-	import Tooltip from '$lib/components/Tooltip.svelte'
-	import { get } from 'svelte/store'
+	import AlignWrapper from '../helpers/AlignWrapper.svelte'
 	import ResolveConfig from '../helpers/ResolveConfig.svelte'
-	import { components } from '../../editor/component'
-	import { isCodeInjection } from '$lib/components/flows/utils'
+	import RunnableWrapper from '../helpers/RunnableWrapper.svelte'
 
 	export let id: string
 	export let componentInput: AppInput | undefined
@@ -104,7 +104,7 @@
 			{:else}
 				<!-- svelte-ignore a11y-click-events-have-key-events -->
 				<div
-					class="flex flex-wrap gap-2 pb-0.5  {$mode === 'dnd' && componentInput?.type == 'template'
+					class="flex flex-wrap gap-2 pb-0.5 {$mode === 'dnd' && componentInput?.type == 'template'
 						? 'cursor-text'
 						: ''}"
 					on:click={() => {

frontend/src/lib/components/apps/components/display/VegaLiteHtml.svelte

@@ -2,7 +2,7 @@
 	import { getContext, onMount } from 'svelte'
 	import { initOutput } from '../../editor/appUtils'
 	import type { AppInput } from '../../inputType'
-	import type { AppViewerContext, RichConfiguration, RichConfigurations } from '../../types'
+	import type { AppViewerContext, RichConfigurations } from '../../types'
 	import InputValue from '../helpers/InputValue.svelte'
 	import RunnableWrapper from '../helpers/RunnableWrapper.svelte'
 

frontend/src/lib/components/apps/components/display/table/AppTableFooter.svelte

@@ -5,7 +5,6 @@
 	import { ChevronLeft, ChevronRight } from 'lucide-svelte'
 	import type { Readable } from 'svelte/store'
 	import { twMerge } from 'tailwind-merge'
-	import { tableOptions } from './tableOptions'
 
 	type T = Record<string, any>
 

frontend/src/lib/components/apps/components/helpers/InputValue.svelte

@@ -2,7 +2,7 @@
 	import { isCodeInjection } from '$lib/components/flows/utils'
 	import { deepEqual } from 'fast-equals'
 	import { createEventDispatcher, getContext, onDestroy } from 'svelte'
-	import type { AppInput, EvalAppInput, RichAppInput, UploadAppInput } from '../../inputType'
+	import type { AppInput, EvalAppInput, UploadAppInput } from '../../inputType'
 	import type { AppViewerContext, RichConfiguration } from '../../types'
 	import { accessPropertyByPath } from '../../utils'
 	import { computeGlobalContext, eval_like } from './eval'

frontend/src/lib/components/apps/components/helpers/NonRunnableComponent.svelte

@@ -1,7 +1,5 @@
 <script lang="ts">
-	import { Loader2 } from 'lucide-svelte'
 	import { getContext } from 'svelte'
-	import { fade } from 'svelte/transition'
 	import type { AppInput } from '../../inputType'
 	import type { Output } from '../../rx'
 	import type { AppViewerContext } from '../../types'

frontend/src/lib/components/apps/components/inputs/AppCheckbox.svelte

@@ -2,8 +2,6 @@
 	import Toggle from '$lib/components/Toggle.svelte'
 	import { getContext } from 'svelte'
 	import { initOutput } from '../../editor/appUtils'
-	import type { AppInput } from '../../inputType'
-	import type { Output } from '../../rx'
 	import type { AppViewerContext, ComponentCustomCSS, RichConfigurations } from '../../types'
 	import { concatCustomCss } from '../../utils'
 	import AlignWrapper from '../helpers/AlignWrapper.svelte'

frontend/src/lib/components/apps/components/inputs/AppMultiSelect.svelte

@@ -1,14 +1,12 @@
 <script lang="ts">
 	import { getContext } from 'svelte'
 	import Select from 'svelte-select'
-	import type { AppInput } from '../../inputType'
-	import type { Output } from '../../rx'
+	import { SELECT_INPUT_DEFAULT_STYLE } from '../../../../defaults'
+	import { initOutput } from '../../editor/appUtils'
 	import type { AppViewerContext, ComponentCustomCSS, RichConfigurations } from '../../types'
 	import { concatCustomCss } from '../../utils'
 	import AlignWrapper from '../helpers/AlignWrapper.svelte'
 	import InputValue from '../helpers/InputValue.svelte'
-	import { SELECT_INPUT_DEFAULT_STYLE } from '../../../../defaults'
-	import { initOutput } from '../../editor/appUtils'
 
 	export let id: string
 	export let configuration: RichConfigurations

frontend/src/lib/components/apps/components/inputs/AppRangeInput.svelte

@@ -1,14 +1,12 @@
 <script lang="ts">
-	import RangeSlider from 'svelte-range-slider-pips'
 	import { getContext } from 'svelte'
-	import type { AppInput } from '../../inputType'
-	import type { Output } from '../../rx'
-	import type { AppViewerContext, ComponentCustomCSS, RichConfigurations } from '../../types'
-	import AlignWrapper from '../helpers/AlignWrapper.svelte'
-	import InputValue from '../helpers/InputValue.svelte'
-	import { concatCustomCss } from '../../utils'
+	import RangeSlider from 'svelte-range-slider-pips'
 	import { twMerge } from 'tailwind-merge'
 	import { initOutput } from '../../editor/appUtils'
+	import type { AppViewerContext, ComponentCustomCSS, RichConfigurations } from '../../types'
+	import { concatCustomCss } from '../../utils'
+	import AlignWrapper from '../helpers/AlignWrapper.svelte'
+	import InputValue from '../helpers/InputValue.svelte'
 
 	export let id: string
 	export let configuration: RichConfigurations

frontend/src/lib/components/apps/components/inputs/currency/AppCurrencyInput.svelte

@@ -2,8 +2,6 @@
 	import { initOutput } from '$lib/components/apps/editor/appUtils'
 	import { getContext } from 'svelte'
 	import { twMerge } from 'tailwind-merge'
-	import type { AppInput } from '../../../inputType'
-	import type { Output } from '../../../rx'
 	import type { AppViewerContext, ComponentCustomCSS, RichConfigurations } from '../../../types'
 	import { concatCustomCss } from '../../../utils'
 	import AlignWrapper from '../../helpers/AlignWrapper.svelte'

frontend/src/lib/components/apps/components/layout/AppDivider.svelte

@@ -2,7 +2,6 @@
 	import { getContext } from 'svelte'
 	import { twMerge } from 'tailwind-merge'
 	import { initOutput } from '../../editor/appUtils'
-	import type { AppInput } from '../../inputType'
 	import type {
 		AppViewerContext,
 		ComponentCustomCSS,

frontend/src/lib/components/apps/components/layout/AppTabs.svelte

@@ -114,7 +114,7 @@
 
 	<div class="w-full">
 		{#if $app.subgrids}
-			{#each tabs ?? [] as res, i}
+			{#each tabs ?? [] as _res, i}
 				<SubGridEditor
 					{id}
 					visible={render && i === selectedIndex}

frontend/src/lib/components/apps/editor/AppEditor.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import SplitPanesWrapper from '$lib/components/splitPanes/SplitPanesWrapper.svelte'
-	import { onMount, setContext } from 'svelte'
+	import { setContext } from 'svelte'
 	import { twMerge } from 'tailwind-merge'
 
 	import { Pane, Splitpanes } from 'svelte-splitpanes'
@@ -19,30 +19,30 @@
 	import AppEditorHeader from './AppEditorHeader.svelte'
 	import GridEditor from './GridEditor.svelte'
 
-	import Tabs from '$lib/components/common/tabs/Tabs.svelte'
-	import TabContent from '$lib/components/common/tabs/TabContent.svelte'
 	import { Button, Tab } from '$lib/components/common'
-	import ComponentList from './componentsPanel/ComponentList.svelte'
-	import { faPlus } from '@fortawesome/free-solid-svg-icons'
-	import ContextPanel from './contextPanel/ContextPanel.svelte'
-	import { classNames, encodeState } from '$lib/utils'
-	import AppPreview from './AppPreview.svelte'
+	import TabContent from '$lib/components/common/tabs/TabContent.svelte'
+	import Tabs from '$lib/components/common/tabs/Tabs.svelte'
 	import { userStore, workspaceStore } from '$lib/stores'
+	import { classNames, encodeState } from '$lib/utils'
+	import { faPlus } from '@fortawesome/free-solid-svg-icons'
+	import AppPreview from './AppPreview.svelte'
+	import ComponentList from './componentsPanel/ComponentList.svelte'
+	import ContextPanel from './contextPanel/ContextPanel.svelte'
 
 	import InlineScriptsPanel from './inlineScriptsPanel/InlineScriptsPanel.svelte'
 
-	import SettingsPanel from './SettingsPanel.svelte'
-	import { VariableService, type Policy } from '$lib/gen'
 	import { page } from '$app/stores'
-	import CssSettings from './componentsPanel/CssSettings.svelte'
-	import { initHistory } from '$lib/history'
-	import ComponentNavigation from './component/ComponentNavigation.svelte'
 	import ItemPicker from '$lib/components/ItemPicker.svelte'
 	import VariableEditor from '$lib/components/VariableEditor.svelte'
-	import { secondaryMenu, SecondaryMenu } from './settingsPanel/secondaryMenu'
+	import { VariableService, type Policy } from '$lib/gen'
+	import { initHistory } from '$lib/history'
 	import { Component, Paintbrush, Plus } from 'lucide-svelte'
 	import { findGridItem, findGridItemParentGrid } from './appUtils'
+	import ComponentNavigation from './component/ComponentNavigation.svelte'
+	import CssSettings from './componentsPanel/CssSettings.svelte'
 	import ConnectionInstructions from './ConnectionInstructions.svelte'
+	import SettingsPanel from './SettingsPanel.svelte'
+	import { secondaryMenu, SecondaryMenu } from './settingsPanel/secondaryMenu'
 
 	export let app: App
 	export let path: string
@@ -124,12 +124,6 @@
 		}, 500)
 	}
 
-	let mounted = false
-
-	onMount(() => {
-		mounted = true
-	})
-
 	function hashchange(e: HashChangeEvent) {
 		context.hash = e.newURL.split('#')[1]
 		context = context

frontend/src/lib/components/apps/editor/SubGridEditor.svelte

@@ -1,15 +1,15 @@
 <script lang="ts">
+	import { push } from '$lib/history'
 	import { classNames } from '$lib/utils'
 	import { createEventDispatcher, getContext } from 'svelte'
 	import { twMerge } from 'tailwind-merge'
 	import { columnConfiguration, isFixed, toggleFixed } from '../gridUtils'
-	import type { AppEditorContext, AppViewerContext, ContextPanelContext, GridItem } from '../types'
-	import Component from './component/Component.svelte'
-	import { expandGriditem, findGridItem, selectId } from './appUtils'
-	import { push } from '$lib/history'
 	import Grid from '../svelte-grid/Grid.svelte'
-	import GridViewer from './GridViewer.svelte'
+	import type { AppEditorContext, AppViewerContext, GridItem } from '../types'
+	import { expandGriditem, findGridItem, selectId } from './appUtils'
+	import Component from './component/Component.svelte'
 	import ComponentWrapper from './component/ComponentWrapper.svelte'
+	import GridViewer from './GridViewer.svelte'
 
 	export let containerHeight: number | undefined = undefined
 	export let containerWidth: number | undefined = undefined

frontend/src/lib/components/apps/editor/componentsPanel/CssSettings.svelte

@@ -24,7 +24,6 @@
 	const { app } = getContext<AppViewerContext>('AppViewerContext')
 
 	let rawCode = ''
-	let viewJsonSchema = false
 
 	$: rawCode && parseJson()
 	let jsonError = ''
@@ -39,7 +38,6 @@
 	}
 
 	function switchTab(asJson: boolean) {
-		viewJsonSchema = asJson
 		if (asJson) {
 			rawCode = JSON.stringify($app.css, null, 2)
 		} else {

frontend/src/lib/components/apps/editor/componentsPanel/QuickStyleMenu.svelte

@@ -175,8 +175,8 @@
 </script>
 
 <div class="pb-2 pt-1">
-	{#each properties as property, i}
-		{#each Object.keys(property) as group, j}
+	{#each properties as property}
+		{#each Object.keys(property) as group (group)}
 			{@const prefix = `${componentType}_${componentProperty}_${group}`}
 			<ListItem
 				bind:isOpen={isOpen[prefix]}

frontend/src/lib/components/apps/editor/contextPanel/ComponentOutputViewer.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
 	import ObjectViewer from '$lib/components/propertyPicker/ObjectViewer.svelte'
 	import { getContext } from 'svelte'
-	import type { Writable } from 'svelte/store'
 	import type { Output } from '../../rx'
 	import type { AppViewerContext, ContextPanelContext } from '../../types'
 	import { recursivelyFilterKeyInJSON as recursivelyFilterInJSON } from '../appUtils'

frontend/src/lib/components/apps/editor/contextPanel/ContextPanel.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import Alert from '$lib/components/common/alert/Alert.svelte'
 	import { classNames } from '$lib/utils'
 	import { X } from 'lucide-svelte'
 	import { getContext } from 'svelte'

frontend/src/lib/components/apps/editor/settingsPanel/mainInput/WorkspaceFlowList.svelte

@@ -11,7 +11,6 @@
 	export let filter = ''
 
 	let flows: Flow[] | undefined = undefined
-	let loading: boolean = false
 	let filteredItems: (Flow & { marked?: string })[] = []
 	$: prefilteredItems = flows ?? []
 
@@ -24,11 +23,9 @@
 		})
 
 		flows = loadedFlows
-		loading = false
 	}
 
 	onMount(() => {
-		loading = true
 		loadFlow()
 	})
 </script>
@@ -63,7 +60,7 @@
 						<div class="flex items-center gap-4">
 							<RowIcon kind="flow" />
 
-							<div class="w-full text-left font-normal ">
+							<div class="w-full text-left font-normal">
 								<div class="text-gray-900 flex-wrap text-md font-semibold mb-1">
 									{#if item.marked}
 										{@html item.marked ?? ''}
@@ -71,7 +68,7 @@
 										{!item.summary || item.summary.length == 0 ? item.path : item.summary}
 									{/if}
 								</div>
-								<div class="text-gray-600 text-xs ">
+								<div class="text-gray-600 text-xs">
 									{item.path}
 								</div>
 							</div>

frontend/src/lib/components/apps/editor/settingsPanel/mainInput/WorkspaceScriptList.svelte

@@ -11,7 +11,6 @@
 	export let filter = ''
 
 	let scripts: Script[] | undefined = undefined
-	let loading: boolean = false
 	let filteredItems: (Script & { marked?: string })[] = []
 	$: prefilteredItems = scripts ?? []
 
@@ -24,12 +23,9 @@
 		})
 
 		scripts = loadedScripts
-
-		loading = false
 	}
 
 	onMount(() => {
-		loading = true
 		loadScripts()
 	})
 </script>
@@ -64,7 +60,7 @@
 						<div class="flex items-center gap-4">
 							<RowIcon kind="script" />
 
-							<div class="w-full text-left font-normal ">
+							<div class="w-full text-left font-normal">
 								<div class="text-gray-900 flex-wrap text-md font-semibold mb-1">
 									{#if item.marked}
 										{@html item.marked ?? ''}
@@ -72,7 +68,7 @@
 										{!item.summary || item.summary.length == 0 ? item.path : item.summary}
 									{/if}
 								</div>
-								<div class="text-gray-600 text-xs ">
+								<div class="text-gray-600 text-xs">
 									{item.path}
 								</div>
 							</div>

frontend/src/lib/components/apps/svelte-grid/utils/helper.ts

@@ -1,5 +1,5 @@
+import { adjust, findFreeSpaceForItem } from './item'
 import { makeMatrixFromItems } from './matrix'
-import { findFreeSpaceForItem, normalize, adjust } from './item'
 import { getRowsCount } from './other'
 
 function makeItem(item) {

frontend/src/lib/components/apps/utils.ts

@@ -1,12 +1,12 @@
 import type { Schema } from '$lib/common'
 import { FlowService, ScriptService } from '$lib/gen'
 import { inferArgs } from '$lib/infer'
-import { emptySchema, sendUserToast } from '$lib/utils'
-import type { AppComponent } from './editor/component'
-import type { App, ComponentCssProperty, GridItem } from './types'
+import { emptySchema } from '$lib/utils'
 import { twMerge } from 'tailwind-merge'
+import type { AppComponent } from './editor/component'
 import type { AppInput, InputType, ResultAppInput, StaticAppInput } from './inputType'
 import type { Output } from './rx'
+import type { App, ComponentCssProperty, GridItem } from './types'
 
 export function allItems(
 	grid: GridItem[],

frontend/src/lib/components/common/drawer/DrawerContent.svelte

@@ -1,20 +1,15 @@
 <script lang="ts">
 	import { classNames } from '$lib/utils'
-	import { faClose } from '@fortawesome/free-solid-svg-icons'
-	import { createEventDispatcher } from 'svelte'
-	import { Icon } from 'svelte-awesome'
 	import CloseButton from '../CloseButton.svelte'
 
 	export let title: string | undefined = undefined
 	export let overflow_y = true
 	export let noPadding = false
 	export let forceOverflowVisible = false
-
-	const dispatch = createEventDispatcher()
 </script>
 
 <div class="flex flex-col divide-y h-screen max-h-screen">
-	<div class="flex justify-between w-wull items-center px-2 py-2 ">
+	<div class="flex justify-between w-wull items-center px-2 py-2">
 		<div class="flex items-center gap-2">
 			<CloseButton on:close />
 

frontend/src/lib/components/common/table/AppRow.svelte

@@ -14,7 +14,6 @@
 		faShare,
 		faTrashAlt
 	} from '@fortawesome/free-solid-svg-icons'
-	import { MoreVertical } from 'lucide-svelte'
 	import { createEventDispatcher } from 'svelte'
 	import Button from '../button/Button.svelte'
 	import Row from './Row.svelte'

frontend/src/lib/components/common/table/FlowRow.svelte

@@ -20,7 +20,6 @@
 		faShare,
 		faTrashAlt
 	} from '@fortawesome/free-solid-svg-icons'
-	import { MoreVertical } from 'lucide-svelte'
 	import { createEventDispatcher } from 'svelte'
 	import Badge from '../badge/Badge.svelte'
 	import Button from '../button/Button.svelte'

frontend/src/lib/components/common/table/ScriptRow.svelte

@@ -21,7 +21,6 @@
 		faShare,
 		faTrashAlt
 	} from '@fortawesome/free-solid-svg-icons'
-	import { MoreVertical } from 'lucide-svelte'
 	import { createEventDispatcher } from 'svelte'
 	import Badge from '../badge/Badge.svelte'
 	import Button from '../button/Button.svelte'

frontend/src/lib/components/flows/CreateActionsApp.svelte

@@ -1,13 +1,13 @@
 <script lang="ts">
 	import { goto } from '$app/navigation'
-	import { faBarsStaggered, faPlus } from '@fortawesome/free-solid-svg-icons'
+	import { faPlus } from '@fortawesome/free-solid-svg-icons'
 
 	import { Button, ButtonPopup, ButtonPopupItem } from '$lib/components/common'
 	import Drawer from '$lib/components/common/drawer/Drawer.svelte'
 	import DrawerContent from '$lib/components/common/drawer/DrawerContent.svelte'
 	import SimpleEditor from '$lib/components/SimpleEditor.svelte'
-	import { importStore } from '../apps/store'
 	import { LayoutDashboard } from 'lucide-svelte'
+	import { importStore } from '../apps/store'
 
 	let drawer: Drawer | undefined = undefined
 	let pendingJson: string

frontend/src/lib/components/flows/content/FlowBranchesAllWrapper.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Alert, Badge, Button, Tab } from '$lib/components/common'
+	import { Alert, Tab } from '$lib/components/common'
 	import TabContent from '$lib/components/common/tabs/TabContent.svelte'
 	import Tabs from '$lib/components/common/tabs/Tabs.svelte'
 	import Toggle from '$lib/components/Toggle.svelte'
@@ -32,7 +32,7 @@
 					<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" />

frontend/src/lib/components/flows/content/FlowBranchesOneWrapper.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Alert, Badge, Button, Tab } from '$lib/components/common'
+	import { Alert, Badge, Tab } from '$lib/components/common'
 	import TabContent from '$lib/components/common/tabs/TabContent.svelte'
 	import Tabs from '$lib/components/common/tabs/Tabs.svelte'
 
@@ -40,7 +40,7 @@
 								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"

frontend/src/lib/components/flows/content/FlowRetries.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { Alert } from '$lib/components/common'
 	import Toggle from '$lib/components/Toggle.svelte'
 	import Tooltip from '$lib/components/Tooltip.svelte'
 	import type { FlowModule } from '$lib/gen'

frontend/src/lib/components/flows/content/ScriptEditorDrawer.svelte

@@ -4,7 +4,7 @@
 	import { ScriptService, type Preview } from '$lib/gen'
 	import { inferArgs } from '$lib/infer'
 	import { workspaceStore } from '$lib/stores'
-	import { emptySchema, getScriptByPath, sendUserToast } from '$lib/utils'
+	import { emptySchema, sendUserToast } from '$lib/utils'
 	import { faSave } from '@fortawesome/free-solid-svg-icons'
 	import { Loader2 } from 'lucide-svelte'
 	import { createEventDispatcher } from 'svelte'

frontend/src/lib/components/flows/flowStateUtils.ts

@@ -13,13 +13,13 @@ import { userStore, workspaceStore } from '$lib/stores'
 import { getScriptByPath } from '$lib/utils'
 import { get, type Writable } from 'svelte/store'
 import type { FlowModuleState, FlowState } from './flowState'
+import { charsToNumber, numberToChars } from './idUtils'
 import {
 	emptyFlowModuleState,
 	findNextAvailablePath,
 	loadSchemaFromModule,
 	NEVER_TESTED_THIS_FAR
 } from './utils'
-import { charsToNumber, numberToChars } from './idUtils'
 
 export async function loadFlowModuleState(flowModule: FlowModule): Promise<FlowModuleState> {
 	try {
@@ -214,7 +214,7 @@ export async function createScriptFromInlineScript(
 	const wasForked = Boolean(originalScriptPath)
 
 	if (wasForked && originalScriptPath) {
-		const [first, second, ...others] = originalScriptPath.split('/')
+		const [_first, _second, ...others] = originalScriptPath.split('/')
 		suffix = others.join('/')
 	}
 

frontend/src/lib/components/flows/header/FlowPreviewButtons.svelte

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

frontend/src/lib/components/flows/map/FlowModuleSchemaItem.svelte

@@ -2,10 +2,9 @@
 	import Badge from '$lib/components/common/badge/Badge.svelte'
 	import Popover from '$lib/components/Popover.svelte'
 	import { classNames } from '$lib/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'
-	import type { FlowModule } from '$lib/gen'
 
 	export let selected: boolean = false
 	export let deletable: boolean = false
@@ -79,7 +78,7 @@
 		{/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}
@@ -95,8 +94,8 @@
 	</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 })}
@@ -105,8 +104,8 @@
 		</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')}
 		>

frontend/src/lib/components/flows/map/MapItem.svelte

@@ -1,15 +1,15 @@
 <script lang="ts">
-	import { createEventDispatcher, getContext } from 'svelte'
-	import FlowModuleSchemaItem from './FlowModuleSchemaItem.svelte'
-	import type { FlowModule } from '$lib/gen'
-	import InsertModuleButton from './InsertModuleButton.svelte'
-	import { faBarsStaggered, faCodeBranch, faLongArrowDown } from '@fortawesome/free-solid-svg-icons'
-	import Icon from 'svelte-awesome'
-	import IconedResourceType from '$lib/components/IconedResourceType.svelte'
-	import LanguageIcon from '$lib/components/common/languageIcons/LanguageIcon.svelte'
-	import { Building, ClipboardCopy, GitBranchPlus, Move, Repeat, Square } from 'lucide-svelte'
-	import type { Writable } from 'svelte/store'
 	import { Button } from '$lib/components/common'
+	import LanguageIcon from '$lib/components/common/languageIcons/LanguageIcon.svelte'
+	import IconedResourceType from '$lib/components/IconedResourceType.svelte'
+	import type { FlowModule } from '$lib/gen'
+	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 type { Writable } from 'svelte/store'
+	import FlowModuleSchemaItem from './FlowModuleSchemaItem.svelte'
+	import InsertModuleButton from './InsertModuleButton.svelte'
 
 	export let mod: FlowModule
 	export let trigger: boolean

frontend/src/lib/components/graph/svelvet/collapsible/controllers/util.ts

@@ -1,138 +1,111 @@
-import type {
-  EdgeType,
-  NodeType,
-  ResizeNodeType,
-  StoreType,
-} from '../../store/types/types';
-import type { UserEdgeType, UserNodeType } from '../../types/types';
-import { Collapsible } from '../models/Collapsible';
-import type { CollapsibleType } from '../types/types';
-import { get } from 'svelte/store';
-import type { AnchorType } from '../../edges/types/types';
-import { getAnchorById } from '../../edges/controllers/util';
-import { getAnchors } from '../../edges/controllers/util';
+import type { EdgeType, NodeType, ResizeNodeType, StoreType } from '../../store/types/types'
+import type { UserEdgeType, UserNodeType } from '../../types/types'
+import { Collapsible } from '../models/Collapsible'
+import type { CollapsibleType } from '../types/types'
+import { get } from 'svelte/store'
+import type { AnchorType } from '../../edges/types/types'
+import { getAnchorById } from '../../edges/controllers/util'
+import { getAnchors } from '../../edges/controllers/util'
 
-const pkStringGenerator = () => (Math.random() + 1).toString(36).substring(7);
+const pkStringGenerator = () => (Math.random() + 1).toString(36).substring(7)
 
 /*
 Initializes store with array of Collapsible objects. You shoould only use this if you want the collapsible feature enabled.
 */
 export function populateCollapsibleStore(
-  store: StoreType,
-  userNodes: UserNodeType[],
-  userEdges: UserEdgeType[],
-  canvasId: string
+	store: StoreType,
+	userNodes: UserNodeType[],
+	userEdges: UserEdgeType[],
+	canvasId: string
 ) {
-  const newCollapsibleStore: CollapsibleType[] = [];
-  for (let userNode of userNodes) {
-    const collapsible = new Collapsible(
-      pkStringGenerator(),
-      userNode.id,
-      0,
-      'expanded'
-    );
-    newCollapsibleStore.push(collapsible);
-  }
-  store.collapsibleStore.set(newCollapsibleStore);
-}
-
-/*
-
-*/
-function incrementHideCount(store: StoreType, nodeId: string) {
-  const collapsibles = get(store.collapsibleStore);
-  for (let collapsible of collapsibles)
-    if (collapsible.nodeId === nodeId) collapsible.hideCount++;
-  store.collapsibleStore.set(collapsibles);
+	const newCollapsibleStore: CollapsibleType[] = []
+	for (let userNode of userNodes) {
+		const collapsible = new Collapsible(pkStringGenerator(), userNode.id, 0, 'expanded')
+		newCollapsibleStore.push(collapsible)
+	}
+	store.collapsibleStore.set(newCollapsibleStore)
 }
 
 // Given a nodeId, find ids of all connecting target nodes
 function findTargets(store: StoreType, nodeId: string): string[] {
-  // get source anchors on the node
-  const anchors = getAnchors(store, {
-    nodeId: nodeId,
-    sourceOrTarget: 'source',
-  });
+	// get source anchors on the node
+	const anchors = getAnchors(store, {
+		nodeId: nodeId,
+		sourceOrTarget: 'source'
+	})
 
-  // get target anchors on other node, and record the node id
-  const targetNodeIds: string[] = [];
-  for (const anchor of anchors) {
-    const targetAnchorId = anchor.getOtherAnchorId();
-    const targetAnchor = getAnchorById(store, targetAnchorId);
-    targetNodeIds.push(targetAnchor.nodeId);
-  }
-  return targetNodeIds;
+	// get target anchors on other node, and record the node id
+	const targetNodeIds: string[] = []
+	for (const anchor of anchors) {
+		const targetAnchorId = anchor.getOtherAnchorId()
+		const targetAnchor = getAnchorById(store, targetAnchorId)
+		targetNodeIds.push(targetAnchor.nodeId)
+	}
+	return targetNodeIds
 }
 
 // traverses tree and increments hideCount
 function traverseAndIncrement(
-  store: StoreType,
-  nodeId: string,
-  operation: 'increment' | 'decrement'
+	store: StoreType,
+	nodeId: string,
+	operation: 'increment' | 'decrement'
 ) {
-  const collapsibles = get(store.collapsibleStore);
-  recursiveTraverse(nodeId);
-  store.collapsibleStore.set(collapsibles);
+	const collapsibles = get(store.collapsibleStore)
+	recursiveTraverse(nodeId)
+	store.collapsibleStore.set(collapsibles)
 
-  function recursiveTraverse(nId: string) {
-    for (const collapsible of collapsibles) {
-      if (collapsible.nodeId === nId) {
-        if (operation === 'increment') collapsible.hideCount++;
-        else collapsible.hideCount--;
-        const targetIds = findTargets(store, nId);
-        for (const targetId of targetIds) {
-          recursiveTraverse(targetId);
-        }
-      }
-    }
-  }
+	function recursiveTraverse(nId: string) {
+		for (const collapsible of collapsibles) {
+			if (collapsible.nodeId === nId) {
+				if (operation === 'increment') collapsible.hideCount++
+				else collapsible.hideCount--
+				const targetIds = findTargets(store, nId)
+				for (const targetId of targetIds) {
+					recursiveTraverse(targetId)
+				}
+			}
+		}
+	}
 }
 
 function collapse(store: StoreType, nodeId: string) {
-  const targetNodeIds = findTargets(store, nodeId);
-  for (const targetNodeId of targetNodeIds)
-    traverseAndIncrement(store, targetNodeId, 'increment');
+	const targetNodeIds = findTargets(store, nodeId)
+	for (const targetNodeId of targetNodeIds) traverseAndIncrement(store, targetNodeId, 'increment')
 }
 function expand(store: StoreType, nodeId: string) {
-  const targetNodeIds = findTargets(store, nodeId);
-  for (const targetNodeId of targetNodeIds)
-    traverseAndIncrement(store, targetNodeId, 'decrement');
+	const targetNodeIds = findTargets(store, nodeId)
+	for (const targetNodeId of targetNodeIds) traverseAndIncrement(store, targetNodeId, 'decrement')
 }
 
 export function toggleExpandAndCollapse(store: StoreType, nodeId: string) {
-  const collapsibles = getCollapsibles(store, { nodeId: nodeId });
-  if (collapsibles.length === 0) return; // when the collapsible feature is disabled, there will be no collapbsible objects
-  if (collapsibles.length > 1)
-    throw 'there should only be one collapsible object per node';
-  const collapsible = collapsibles[0];
-  if (collapsible.state === 'expanded') collapse(store, nodeId);
-  else expand(store, nodeId);
-  store.collapsibleStore.update((arr) => {
-    for (const c of arr) if (c.id === collapsible.id) c.toggleState();
-    return [...arr];
-  });
+	const collapsibles = getCollapsibles(store, { nodeId: nodeId })
+	if (collapsibles.length === 0) return // when the collapsible feature is disabled, there will be no collapbsible objects
+	if (collapsibles.length > 1) throw 'there should only be one collapsible object per node'
+	const collapsible = collapsibles[0]
+	if (collapsible.state === 'expanded') collapse(store, nodeId)
+	else expand(store, nodeId)
+	store.collapsibleStore.update((arr) => {
+		for (const c of arr) if (c.id === collapsible.id) c.toggleState()
+		return [...arr]
+	})
 }
 
-export function getCollapsibles(
-  store: StoreType,
-  filter?: { [key: string]: any }
-) {
-  let collapsibles = Object.values(get(store.collapsibleStore));
-  // filter the array of anchors for elements that match filter
-  // Example: if filter = {sourceOrTarget: 'source', positionX: 35} then we will
-  //return all anchors with sourceOrTarget = source AND poxitionX = 35
-  if (filter !== undefined) {
-    collapsibles = collapsibles.filter((collapsible) => {
-      for (let filterKey in filter) {
-        const filterValue = filter[filterKey];
-        if (collapsible[filterKey as keyof CollapsibleType] !== filterValue)
-          return false;
-      }
-      return true;
-    });
-  }
-  // return list of anchors
-  return collapsibles;
+export function getCollapsibles(store: StoreType, filter?: { [key: string]: any }) {
+	let collapsibles = Object.values(get(store.collapsibleStore))
+	// filter the array of anchors for elements that match filter
+	// Example: if filter = {sourceOrTarget: 'source', positionX: 35} then we will
+	//return all anchors with sourceOrTarget = source AND poxitionX = 35
+	if (filter !== undefined) {
+		collapsibles = collapsibles.filter((collapsible) => {
+			for (let filterKey in filter) {
+				const filterValue = filter[filterKey]
+				if (collapsible[filterKey as keyof CollapsibleType] !== filterValue) return false
+			}
+			return true
+		})
+	}
+	// return list of anchors
+	return collapsibles
 }
 
 /*
@@ -143,44 +116,39 @@ export function getCollapsibles(
   linking to that node (like a cascading delete in SQL, but with hiding instead of deleting)
 */
 export function filterByCollapsible(
-  store: StoreType,
-  nodes: NodeType[],
-  resizeNodes: ResizeNodeType[],
-  anchors: AnchorType[],
-  edges: EdgeType[]
+	store: StoreType,
+	nodes: NodeType[],
+	resizeNodes: ResizeNodeType[],
+	anchors: AnchorType[],
+	edges: EdgeType[]
 ) {
-  // filter nodes for the collapsible nodes feature
-  const filteredNodes = nodes.filter((node) => {
-    const nodeId = node.id;
-    const collapssibleObj = get(store.collapsibleStore).find(
-      (e) => e.nodeId === nodeId
-    );
-    if (collapssibleObj === undefined) return true;
-    return collapssibleObj.isHidden() === false;
-  });
-  const filteredNodeIds = filteredNodes.map((e) => e.id);
-  // filter resizeNodes
-  const filteredResizeNodes = resizeNodes.filter((resizeNode) =>
-    filteredNodeIds.includes(resizeNode.nodeId)
-  );
-  const filteredAnchors = anchors.filter((selfAnchor) => {
-    const otherAnchorId = selfAnchor.getOtherAnchorId();
-    const otherAnchor = get(store.anchorsStore)[otherAnchorId];
+	// filter nodes for the collapsible nodes feature
+	const filteredNodes = nodes.filter((node) => {
+		const nodeId = node.id
+		const collapssibleObj = get(store.collapsibleStore).find((e) => e.nodeId === nodeId)
+		if (collapssibleObj === undefined) return true
+		return collapssibleObj.isHidden() === false
+	})
+	const filteredNodeIds = filteredNodes.map((e) => e.id)
+	// filter resizeNodes
+	const filteredResizeNodes = resizeNodes.filter((resizeNode) =>
+		filteredNodeIds.includes(resizeNode.nodeId)
+	)
+	const filteredAnchors = anchors.filter((selfAnchor) => {
+		const otherAnchorId = selfAnchor.getOtherAnchorId()
+		const otherAnchor = get(store.anchorsStore)[otherAnchorId]
 
-    if (
-      filteredNodeIds.includes(selfAnchor.nodeId) &&
-      filteredNodeIds.includes(otherAnchor.nodeId)
-    )
-      return true;
-    return false;
-  });
-  const filteredEdgeIds = new Set(filteredAnchors.map((e) => e.edgeId));
-  const filteredEdges = edges.filter((edge) => filteredEdgeIds.has(edge.id));
+		if (filteredNodeIds.includes(selfAnchor.nodeId) && filteredNodeIds.includes(otherAnchor.nodeId))
+			return true
+		return false
+	})
+	const filteredEdgeIds = new Set(filteredAnchors.map((e) => e.edgeId))
+	const filteredEdges = edges.filter((edge) => filteredEdgeIds.has(edge.id))
 
-  return {
-    filteredNodes,
-    filteredResizeNodes,
-    filteredAnchors,
-    filteredEdges,
-  };
+	return {
+		filteredNodes,
+		filteredResizeNodes,
+		filteredAnchors,
+		filteredEdges
+	}
 }

frontend/src/lib/components/graph/svelvet/container/views/GraphView.svelte

@@ -1,19 +1,16 @@
 <script lang="ts">
+	import { pointer, select, selectAll } from 'd3-selection'
+	import { zoom, zoomIdentity, zoomTransform } from 'd3-zoom'
 	import { onMount } from 'svelte'
-	import { zoom, zoomTransform, zoomIdentity } from 'd3-zoom'
-	import { select, selectAll, pointer } from 'd3-selection'
 	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 type { EdgeType, NodeType, ResizeNodeType } from '../../store/types/types'
+	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 type { AnchorType } from '../../edges/types/types'
 	import { onDestroy } from 'svelte'
 
 	//these are typscripted as any, however they have been transformed inside of store.ts
@@ -28,18 +25,15 @@
 	const {
 		edgesStore,
 		nodesStore,
-		anchorsStore,
 		nodeSelected,
 		backgroundStore,
 		movementStore,
 		widthStore,
 		heightStore,
-		d3Scale,
-		collapsibleStore
+		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
@@ -70,7 +64,6 @@
 	)
 
 	// d3Translate is used for the minimap
-	let d3Translate = { x: 0, y: 0, k: 1 }
 	onMount(() => {
 		// actualizes the d3 instance
 
@@ -134,7 +127,6 @@
 	// 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
 		//add a store that contains the current value of the d3-zoom's scale to be used in onMouseMove function
@@ -144,7 +136,6 @@
 		// 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}`)

frontend/src/lib/components/graph/svelvet/edges/controllers/anchorCbDev.ts

@@ -1,148 +1,119 @@
-import { rightCb, leftCb, topCb, bottomCb } from './anchorCbUser'; // these are callbacks used to calculate anchor position relative to node
-import type { AnchorCbType } from '../../edges/types/types';
-import type { StoreType } from '../../store/types/types';
+import { rightCb, leftCb, topCb, bottomCb } from './anchorCbUser' // these are callbacks used to calculate anchor position relative to node
+import type { AnchorCbType } from '../../edges/types/types'
+import type { StoreType } from '../../store/types/types'
 
-
-import { getAnchors } from './util';
-import { getNodeById } from '../../nodes/controllers/util';
+import { getAnchors } from './util'
+import { getNodeById } from '../../nodes/controllers/util'
 export function fixedCbCreator(
-  store: StoreType,
-  edgeId: string,
-  anchorId: string,
-  userNodeId: string,
-  positionCb: Function // positionCb should be a function that takes 4 arguments (x,y,width,height) and returns a 3-array [x,y,angle] that represents the x,y position of the anchor as well as it's angle with respect to it's node.
+	store: StoreType,
+	edgeId: string,
+	anchorId: string,
+	userNodeId: string,
+	positionCb: Function // positionCb should be a function that takes 4 arguments (x,y,width,height) and returns a 3-array [x,y,angle] that represents the x,y position of the anchor as well as it's angle with respect to it's node.
 ) {
-  const rn = <AnchorCbType>fixedCb;
-  rn.type = 'fixed';
-  return rn;
+	const rn = <AnchorCbType>fixedCb
+	rn.type = 'fixed'
+	return rn
 
-  function fixedCb() {
-    // get the two anchors
-    const anchors = getAnchors(store, { edgeId: edgeId });
-    if (anchors.length !== 2)
-      throw `there should be two anchors per edge, have: ${anchors.length}`;
-    let [anchorSelf, anchorOther] = anchors;
-    if (anchorSelf.id !== anchorId)
-      [anchorSelf, anchorOther] = [anchorOther, anchorSelf];
+	function fixedCb() {
+		// get the two anchors
+		const anchors = getAnchors(store, { edgeId: edgeId })
+		if (anchors.length !== 2) throw `there should be two anchors per edge, have: ${anchors.length}`
+		let [anchorSelf, anchorOther] = anchors
+		if (anchorSelf.id !== anchorId) [anchorSelf, anchorOther] = [anchorOther, anchorSelf]
 
-    const node = getNodeById(store, userNodeId);
-    const { positionX, positionY, width, height } = node;
-    const [x, y, angle] = positionCb(positionX, positionY, width, height);
-    anchorSelf.positionX = x;
-    anchorSelf.positionY = y;
-    anchorSelf.angle = angle;
-    // update the other anchor if it is a dynamic anchor
-    // Note dyanamic anchor callbacks have a check that prevents an infinite loop
-    if (anchorOther.callback.type === 'dynamic') anchorOther.callback();
-  }
+		const node = getNodeById(store, userNodeId)
+		const { positionX, positionY, width, height } = node
+		const [x, y, angle] = positionCb(positionX, positionY, width, height)
+		anchorSelf.positionX = x
+		anchorSelf.positionY = y
+		anchorSelf.angle = angle
+		// update the other anchor if it is a dynamic anchor
+		// Note dyanamic anchor callbacks have a check that prevents an infinite loop
+		if (anchorOther.callback.type === 'dynamic') anchorOther.callback()
+	}
 }
 
-export function dynamicCbCreator(
-  store: StoreType,
-  edgeId: string,
-  anchorId: string
-) {
-  const rn = <AnchorCbType>dynamicCb;
-  rn.type = 'dynamic';
-  return rn;
+export function dynamicCbCreator(store: StoreType, edgeId: string, anchorId: string) {
+	const rn = <AnchorCbType>dynamicCb
+	rn.type = 'dynamic'
+	return rn
 
-  function dynamicCb() {
-    // get the two anchors
-    const anchors = getAnchors(store, { edgeId: edgeId });
-    if (anchors.length !== 2)
-      throw `there should be two anchors per edge, have: ${anchors.length}`;
+	function dynamicCb() {
+		// get the two anchors
+		const anchors = getAnchors(store, { edgeId: edgeId })
+		if (anchors.length !== 2) throw `there should be two anchors per edge, have: ${anchors.length}`
 
-    let [anchorSelf, anchorOther] = anchors;
-    if (anchorSelf.id !== anchorId)
-      [anchorSelf, anchorOther] = [anchorOther, anchorSelf];
-    // get the two nodes
-    const nodeSelf = getNodeById(store, anchorSelf.nodeId);
-    const nodeOther = getNodeById(store, anchorOther.nodeId);
-    // get the midpoints
-    const [xSelf, ySelf, xOther, yOther] = [
-      nodeSelf.positionX + nodeSelf.width / 2,
-      nodeSelf.positionY + nodeSelf.height / 2,
-      nodeOther.positionX + nodeOther.width / 2,
-      nodeOther.positionY + nodeOther.height / 2,
-    ];
+		let [anchorSelf, anchorOther] = anchors
+		if (anchorSelf.id !== anchorId) [anchorSelf, anchorOther] = [anchorOther, anchorSelf]
+		// get the two nodes
+		const nodeSelf = getNodeById(store, anchorSelf.nodeId)
+		const nodeOther = getNodeById(store, anchorOther.nodeId)
+		// get the midpoints
+		const [xSelf, ySelf, xOther, yOther] = [
+			nodeSelf.positionX + nodeSelf.width / 2,
+			nodeSelf.positionY + nodeSelf.height / 2,
+			nodeOther.positionX + nodeOther.width / 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;
+		// record angle for later. We use this so we don't have an infinite loop
+		let prevAngle = anchorSelf.angle
 
-    // calculate the slope
-    const slope = (ySelf - yOther) / (xSelf - xOther);
-    // slope<1 means -45 to 45 degrees so left/right anchors
-    if (Math.abs(slope) < 1) {
-      // 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
-        );
-        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
-        );
-        anchorSelf.setPosition(selfX, selfY);
-        anchorSelf.angle = 180;
-      }
-    } else {
-      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
-        );
-        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
-        );
-        anchorSelf.setPosition(selfX, selfY);
-        anchorSelf.angle = 90;
-      }
-    }
+		// calculate the slope
+		const slope = (ySelf - yOther) / (xSelf - xOther)
+		// slope<1 means -45 to 45 degrees so left/right anchors
+		if (Math.abs(slope) < 1) {
+			// 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
+				)
+				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
+				)
+				rightCb(nodeOther.positionX, nodeOther.positionY, nodeOther.width, nodeOther.height)
+				anchorSelf.setPosition(selfX, selfY)
+				anchorSelf.angle = 180
+			}
+		} else {
+			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
+				)
+				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
+				)
+				bottomCb(nodeOther.positionX, nodeOther.positionY, nodeOther.width, nodeOther.height)
+				anchorSelf.setPosition(selfX, selfY)
+				anchorSelf.angle = 90
+			}
+		}
 
-    // if the anchor changed position, then do operation for other anchor
-    // otherwise, don't do anything. This check is so we don't have an infinite loop
-    if (prevAngle !== anchorSelf.angle) anchorOther.callback();
-  }
+		// if the anchor changed position, then do operation for other anchor
+		// otherwise, don't do anything. This check is so we don't have an infinite loop
+		if (prevAngle !== anchorSelf.angle) anchorOther.callback()
+	}
 }

frontend/src/lib/components/graph/svelvet/edges/controllers/util.ts

@@ -1,6 +1,6 @@
-import type { StoreType } from '../../store/types/types';
-import { get } from 'svelte/store';
-import type { AnchorType } from '../types/types';
+import type { StoreType } from '../../store/types/types'
+import { get } from 'svelte/store'
+import type { AnchorType } from '../types/types'
 
 /**
  * Finds all Anchors that matches the conditions specified in the filter parameter from a Svelvet store and returns these Anchors in an array.
@@ -10,21 +10,21 @@ import type { AnchorType } from '../types/types';
  * @returns An array of Anchors that matches the conditions specified in the filter parameter
  */
 export function getAnchors(store: StoreType, filter?: { [key: string]: any }) {
-  let anchors = Object.values(get(store.anchorsStore));
-  // filter the array of anchors for elements that match filter
-  // Example: if filter = {sourceOrTarget: 'source', positionX: 35} then we will
-  //return all anchors with sourceOrTarget = source AND poxitionX = 35
-  if (filter !== undefined) {
-    anchors = anchors.filter((anchor) => {
-      for (let filterKey in filter) {
-        const filterValue = filter[filterKey];
-        if (anchor[filterKey as keyof AnchorType] !== filterValue) return false;
-      }
-      return true;
-    });
-  }
-  // return list of anchors
-  return anchors;
+	let anchors = Object.values(get(store.anchorsStore))
+	// filter the array of anchors for elements that match filter
+	// Example: if filter = {sourceOrTarget: 'source', positionX: 35} then we will
+	//return all anchors with sourceOrTarget = source AND poxitionX = 35
+	if (filter !== undefined) {
+		anchors = anchors.filter((anchor) => {
+			for (let filterKey in filter) {
+				const filterValue = filter[filterKey]
+				if (anchor[filterKey as keyof AnchorType] !== filterValue) return false
+			}
+			return true
+		})
+	}
+	// return list of anchors
+	return anchors
 }
 
 /**
@@ -36,21 +36,18 @@ export function getAnchors(store: StoreType, filter?: { [key: string]: any }) {
  * @returns The source or target Anchor object of a given edge
  */
 export function getAnchorFromEdge(
-  store: StoreType,
-  edgeId: string,
-  sourceOrTarget: 'source' | 'target'
+	store: StoreType,
+	edgeId: string,
+	sourceOrTarget: 'source' | 'target'
 ): AnchorType {
-  const edge = 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}`;
-  // there should be one source anchor and one target anchor. Return the source anchor
-  const anchor = anchors.filter(
-    (anchor) => anchor.sourceOrTarget === sourceOrTarget
-  );
-  if (anchor.length !== 1)
-    throw `there should only be one source/target anchor`;
-  return anchor[0];
+	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}`
+	// there should be one source anchor and one target anchor. Return the source anchor
+	const anchor = anchors.filter((anchor) => anchor.sourceOrTarget === sourceOrTarget)
+	if (anchor.length !== 1) throw `there should only be one source/target anchor`
+	return anchor[0]
 }
 
 /**
@@ -61,10 +58,10 @@ export function getAnchorFromEdge(
  * @returns The targeted Edge object in store.edgesStore
  */
 export function getEdgeById(store: StoreType, id: string) {
-  const edgesStore = get(store.edgesStore);
-  const edge = edgesStore[id];
-  if (edge === undefined) throw 'edge not found';
-  return edge;
+	const edgesStore = get(store.edgesStore)
+	const edge = edgesStore[id]
+	if (edge === undefined) throw 'edge not found'
+	return edge
 }
 
 /**
@@ -75,7 +72,7 @@ export function getEdgeById(store: StoreType, id: string) {
  * @returns The target Anchor object in store.anchorsStore
  */
 export function getAnchorById(store: StoreType, id: string) {
-  const anchorsStore = get(store.anchorsStore);
-  const anchor = anchorsStore[id];
-  return anchor;
+	const anchorsStore = get(store.anchorsStore)
+	const anchor = anchorsStore[id]
+	return anchor
 }

frontend/src/lib/components/graph/svelvet/edges/models/Edge.ts

@@ -1,9 +1,9 @@
-import { findStore } from '../../store/controllers/storeApi';
-import type { UserEdgeType } from '../../types/types';
-import type { EdgeType } from '../../store/types/types';
+import { findStore } from '../../store/controllers/storeApi'
+import type { UserEdgeType } from '../../types/types'
+import type { EdgeType } from '../../store/types/types'
 
-import { stores } from '../../store/models/store';
-import { getAnchors, getAnchorFromEdge } from '../../edges/controllers/util';
+import { stores } from '../../store/models/store'
+import { getAnchors, getAnchorFromEdge } from '../../edges/controllers/util'
 /**
  * Class Edge that implements EdgeType.
  * @param id The id of the Edge
@@ -22,76 +22,73 @@ import { getAnchors, getAnchorFromEdge } from '../../edges/controllers/util';
  * @param arraw Boolean value to specify whether the Edge displays an arrow near its target Anchor
  */
 export class Edge implements EdgeType {
-  constructor(
-    public id: string,
-    public sourceX: number,
-    public sourceY: number,
-    public targetX: number,
-    public targetY: number,
-    public canvasId: string,
-    public label: string,
-    public type: 'straight' | 'smoothstep' | 'step' | 'bezier',
-    public labelBgColor: string,
-    public labelTextColor: string,
-    public edgeColor: string,
-    public animate: boolean,
-    public noHandle: boolean,
-    public arrow: boolean,
-    public clickCallback: Function,
-    public className: string
-  ) {}
+	constructor(
+		public id: string,
+		public sourceX: number,
+		public sourceY: number,
+		public targetX: number,
+		public targetY: number,
+		public canvasId: string,
+		public label: string,
+		public type: 'straight' | 'smoothstep' | 'step' | 'bezier',
+		public labelBgColor: string,
+		public labelTextColor: string,
+		public edgeColor: string,
+		public animate: boolean,
+		public noHandle: boolean,
+		public arrow: boolean,
+		public clickCallback: Function,
+		public className: string
+	) {}
 
-  /**
-   * delete is going to delete the Edge and also delete associated Anchors
-   */
-  delete() {
-    const store = stores[this.canvasId];
-    const { nodesStore, 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) => {
-      for (const anchorId in anchors) {
-        if (anchorId === sourceAnchor.id || anchorId == targetAnchor.id)
-          delete anchors[anchorId];
-      }
-      return { ...anchors };
-    });
-    edgesStore.update((edges) => {
-      delete edges[this.id];
-      return { ...edges };
-    });
-  }
+	/**
+	 * delete is going to delete the Edge and also delete associated Anchors
+	 */
+	delete() {
+		const store = stores[this.canvasId]
+		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) => {
+			for (const anchorId in anchors) {
+				if (anchorId === sourceAnchor.id || anchorId == targetAnchor.id) delete anchors[anchorId]
+			}
+			return { ...anchors }
+		})
+		edgesStore.update((edges) => {
+			delete edges[this.id]
+			return { ...edges }
+		})
+	}
 
-  /**
-   * setExportableData will construct an object that holds all the edge data that can be exported. This is needed for the Exporting Diagram feature.
-   * @returns The object of exportable edge data. The format of the object should be as close as what user initially passes in to Svelvet.
-   */
-  setExportableData() {
-    const exportableData: UserEdgeType = {
-      id: this.id,
-      label: this.label,
-      type: this.type,
-      labelBgColor: this.labelBgColor,
-      labelTextColor: this.labelTextColor,
-      edgeColor: this.edgeColor,
-      animate: this.animate,
-      noHandle: this.noHandle,
-      arrow: this.arrow,
-      source: 'dummy', // these will be set later
-      target: 'dummy', // these will be set later
-    };
+	/**
+	 * setExportableData will construct an object that holds all the edge data that can be exported. This is needed for the Exporting Diagram feature.
+	 * @returns The object of exportable edge data. The format of the object should be as close as what user initially passes in to Svelvet.
+	 */
+	setExportableData() {
+		const exportableData: UserEdgeType = {
+			id: this.id,
+			label: this.label,
+			type: this.type,
+			labelBgColor: this.labelBgColor,
+			labelTextColor: this.labelTextColor,
+			edgeColor: this.edgeColor,
+			animate: this.animate,
+			noHandle: this.noHandle,
+			arrow: this.arrow,
+			source: 'dummy', // these will be set later
+			target: 'dummy' // these will be set later
+		}
 
-    // set source, target on exportableData
-    const store = findStore(this.canvasId);
-    const anchors = getAnchors(store, { edgeId: this.id });
-    if (anchors.length !== 2) throw 'there should be two anchors per edge';
-    for (const anchor of anchors) {
-      if (anchor.sourceOrTarget === 'target')
-        exportableData.target = anchor.nodeId;
-      if (anchor.sourceOrTarget === 'source')
-        exportableData.source = anchor.nodeId;
-    }
+		// set source, target on exportableData
+		const store = findStore(this.canvasId)
+		const anchors = getAnchors(store, { edgeId: this.id })
+		if (anchors.length !== 2) throw 'there should be two anchors per edge'
+		for (const anchor of anchors) {
+			if (anchor.sourceOrTarget === 'target') exportableData.target = anchor.nodeId
+			if (anchor.sourceOrTarget === 'source') exportableData.source = anchor.nodeId
+		}
 
-    return exportableData;
-  }
+		return exportableData
+	}
 }

frontend/src/lib/components/graph/svelvet/edges/views/Edges/SimpleBezierEdge.svelte

@@ -122,7 +122,7 @@
 	export let canvasId: string
 	export let edgeId: string
 	const store = findStore(canvasId)
-	const { nodesStore, edgesStore, anchorsStore } = store
+	const { edgesStore } = store
 	let edge
 	$: edge = $edgesStore[edgeId]
 

frontend/src/lib/components/graph/svelvet/editEdges/views/EditEdge.svelte

@@ -1,153 +0,0 @@
-<script lang="ts">
-  import { findStore } from '../../store/controllers/storeApi';
-  import { writable, derived, get, readable } from 'svelte/store';
-
-  import { getEdgeById } from '../../edges/controllers/util';
-
-  export let edgeId: string;
-  export let canvasId: string;
-
-  let label;
-  let width;
-  let height;
-  let customClass;
-  let backgroundColor;
-  let type: 'straight' | 'smoothstep' | 'step' | 'bezier';
-
-  const store = findStore(canvasId);
-  const canvasWidth = get(store.widthStore);
-  const canvasHeight = get(store.widthStore);
-  const edge = getEdgeById(store, edgeId);
-  const { edgesStore, nodeSelected } = store;
-
-  function closeModal() {
-    const store = findStore(canvasId);
-    store.edgeEditModal.set(null);
-  }
-  function handleDelete() {
-    const store = findStore(canvasId);
-    const edge = getEdgeById(store, edgeId);
-    edge.delete();
-    closeModal();
-  }
-  function handleSubmit(e) {
-    e.preventDefault();
-    const store = findStore(canvasId);
-    const edge = getEdgeById(store, edgeId);
-    if (label) edge.label = label;
-    if (backgroundColor) edge.edgeColor = backgroundColor;
-    if (type) edge.type = type;
-    // width = '';
-    // height = '';
-    // customClass = '';
-    // label = '';
-    store.edgesStore.set($edgesStore);
-    closeModal();
-  }
-</script>
-
-<div
-  class="EditEdge"
-  style="left:{canvasWidth / 3}px; top:{canvasHeight / 3}px"
-  on:mouseover={(e) => ($nodeSelected = true)}
-  on:focus
-  on:wheel|preventDefault
->
-  <form on:submit={handleSubmit}>
-    <label for="label-input">Edge label</label>
-    <input
-      type="text"
-      id="label-input-{edgeId}"
-      placeholder={edge.label}
-      bind:value={label}
-    />
-
-    <label for="bg-color-input">Edge color</label>
-    <input
-      type="color"
-      id="bg-color-input-{edgeId}"
-      class="bgci"
-      bind:value={backgroundColor}
-    />
-    <input
-      type="text"
-      placeholder={edge.edgeColor}
-      bind:value={backgroundColor}
-    />
-
-    <label for="type-input">Edge type</label>
-    <input
-      type="text"
-      id="type-input-{edgeId}"
-      placeholder={edge.type}
-      bind:value={type}
-    />
-  </form>
-  <div class="btn-container">
-    <button on:click={handleSubmit}>Submit</button>
-    <button on:click={handleDelete}>Delete</button>
-    <button on:click={closeModal}>Cancel</button>
-  </div>
-</div>
-
-<style>
-  .EditEdge {
-    position: absolute;
-    padding: 0 1rem 1rem 1rem;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    border: 1px solid #333333;
-    border-radius: 0.25rem;
-    background-color: #ffffff;
-    z-index: 10;
-    user-select: text;
-    box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.4);
-    color: #333333;
-  }
-
-  label {
-    font-size: 0.8rem;
-    font-weight: bold;
-    margin-bottom: 0.15rem;
-  }
-
-  .btn-container {
-    display: flex;
-    justify-content: space-between;
-    margin-top: 0.5rem;
-  }
-
-  button {
-    border-radius: 0.25rem;
-    background-color: white;
-    box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.4);
-    margin: 0.2rem;
-  }
-
-  input {
-    height: 1.6rem;
-    border-color: #e45b56;
-  }
-
-  .bgci {
-    height: 2rem;
-    width: 5rem;
-    padding: 0;
-    border: none;
-    background-color: none;
-  }
-
-  button:hover {
-    cursor: pointer;
-    background-color: #e45b56;
-    color: white;
-  }
-
-  form {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-  }
-</style>

frontend/src/lib/components/graph/svelvet/nodes/models/Node.ts

@@ -2,7 +2,6 @@
 import type { NodeType } from '../../store/types/types'
 import { get } from 'svelte/store'
 import { stores } from '../../store/models/store'
-import { getAnchors, getEdgeById } from '../../edges/controllers/util'
 /** A Node class that implements NodeType interface
  * @param {string} id The id of the Node
  * @param {number} positionX The X-axis position of the Node (left top corner of the Node)

frontend/src/lib/components/graph/svelvet/store/controllers/util.ts

@@ -1,15 +1,15 @@
 const pkStringGenerator = () => (Math.random() + 1).toString(36).substring(7) // these are callbacks used to calculate anchor position relative to node
 import { dynamicCbCreator, fixedCbCreator } from '../../edges/controllers/anchorCbDev'
 
-import type { AnchorType, AnchorCbType } from '../../edges/types/types'
+import type { AnchorCbType, AnchorType } from '../../edges/types/types'
 
-import type { NodeType, EdgeType, StoreType, ResizeNodeType } from '../types/types'
-import type { UserNodeType, UserEdgeType } from '../../types/types'
+import type { UserEdgeType, UserNodeType } from '../../types/types'
+import type { EdgeType, NodeType, StoreType } from '../types/types'
 
-import { Anchor } from '../../edges/models/Anchor'
-import { Node } from '../../nodes/models/Node'
-import { Edge } from '../../edges/models/Edge'
 import { getAnchors } from '../../edges/controllers/util'
+import { Anchor } from '../../edges/models/Anchor'
+import { Edge } from '../../edges/models/Edge'
+import { Node } from '../../nodes/models/Node'
 
 /**
  * Creates an Anchor on the targeted Node with infomation the userNode holds
@@ -76,21 +76,7 @@ export function populateEdgesStore(store: StoreType, edges: UserEdgeType[], canv
 		// source is node.id for the source node
 		// target is node.id for the target node
 		// We need to get the anchors
-		const {
-			source: sourceNodeId,
-			target: targetNodeId,
-			id: edgeId,
-			type,
-			label,
-			labelBgColor,
-			labelTextColor,
-			edgeColor,
-			animate,
-			noHandle,
-			arrow,
-			clickCallback,
-			className
-		} = userEdge
+		const { id: edgeId } = userEdge
 
 		const anchors = getAnchors(store, { edgeId: edgeId })
 		// check that we have two anchors for every edge

frontend/src/lib/components/home/ItemsList.svelte

@@ -1,27 +1,27 @@
 <script lang="ts">
 	import CenteredPage from '$lib/components/CenteredPage.svelte'
+	import { Alert, Badge, Skeleton, ToggleButton, ToggleButtonGroup } from '$lib/components/common'
+	import ShareModal from '$lib/components/ShareModal.svelte'
+	import Toggle from '$lib/components/Toggle.svelte'
 	import { AppService, FlowService, ListableApp, Script, ScriptService, type Flow } from '$lib/gen'
 	import { userStore, workspaceStore } from '$lib/stores'
-	import { Alert, Badge, Skeleton, ToggleButton, ToggleButtonGroup } from '$lib/components/common'
 	import { canWrite } from '$lib/utils'
-	import ShareModal from '$lib/components/ShareModal.svelte'
 	import type uFuzzy from '@leeoniya/ufuzzy'
 	import { Code2, LayoutDashboard } from 'lucide-svelte'
-	import Toggle from '$lib/components/Toggle.svelte'
 
 	export let filter = ''
 
-	import ScriptRow from '$lib/components/common/table/ScriptRow.svelte'
-	import FlowRow from '$lib/components/common/table/FlowRow.svelte'
 	import AppRow from '$lib/components/common/table/AppRow.svelte'
+	import FlowRow from '$lib/components/common/table/FlowRow.svelte'
+	import ScriptRow from '$lib/components/common/table/ScriptRow.svelte'
 
-	import NoItemFound from './NoItemFound.svelte'
-	import ListFilters from './ListFilters.svelte'
-	import SearchItems from '../SearchItems.svelte'
-	import { Icon } from 'svelte-awesome'
 	import { faBarsStaggered } from '@fortawesome/free-solid-svg-icons'
-	import MoveDrawer from '../MoveDrawer.svelte'
+	import { Icon } from 'svelte-awesome'
 	import ConfirmationModal from '../common/confirmationModal/ConfirmationModal.svelte'
+	import MoveDrawer from '../MoveDrawer.svelte'
+	import SearchItems from '../SearchItems.svelte'
+	import ListFilters from './ListFilters.svelte'
+	import NoItemFound from './NoItemFound.svelte'
 
 	type TableItem<T, U extends 'script' | 'flow' | 'app'> = T & {
 		canWrite: boolean
@@ -320,7 +320,7 @@
 		{:else}
 			<div class="border rounded-md divide-y divide-gray-200">
 				<!-- <VirtualList {items} let:item bind:start bind:end> -->
-				{#each (items ?? []).slice(0, nbDisplayed) as item, i (item.type + '/' + item.path + (item.summary ?? ''))}
+				{#each (items ?? []).slice(0, nbDisplayed) as item (item.type + '/' + item.path + (item.summary ?? ''))}
 					{#if item.type == 'script'}
 						<ScriptRow
 							bind:deleteConfirmedCallback

frontend/src/lib/components/sidebar/WorkspaceMenu.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { workspaceStore, userWorkspaces, switchWorkspace, usersWorkspaceStore } from '$lib/stores'
+	import { switchWorkspace, userWorkspaces, workspaceStore } from '$lib/stores'
 	import { classNames } from '$lib/utils'
 	import { Building } from 'lucide-svelte'
 
@@ -30,10 +30,14 @@
 			<table class="w-full">
 				{#each $userWorkspaces as workspace}
 					<tr
-						class="text-xs 
-						{$workspaceStore === workspace.id ? 'cursor-default bg-blue-50' : 'cursor-pointer hover:bg-gray-100'}"
+						class="text-xs
+						{$workspaceStore === workspace.id
+							? 'cursor-default bg-blue-50'
+							: 'cursor-pointer hover:bg-gray-100'}"
 						on:click={() => {
-							if($workspaceStore === workspace.id) { return }
+							if ($workspaceStore === workspace.id) {
+								return
+							}
 							switchWorkspace(workspace.id)
 							close()
 						}}

frontend/src/routes/(root)/(logged)/apps/edit/[...path]/+page.svelte

@@ -16,10 +16,7 @@
 		goto('?', { replaceState: true })
 	}
 
-	let loading = true
-
 	async function loadApp(): Promise<void> {
-		loading = true
 		app = await AppService.getAppByPath({
 			path,
 			workspace: $workspaceStore!
@@ -31,7 +28,6 @@
 			sendUserToast('App restored from draft')
 			app.value = stateLoadedFromUrl
 		}
-		loading = false
 		$dirtyStore = false
 	}
 

frontend/src/routes/(root)/(logged)/audit_logs/+page.svelte

@@ -1,15 +1,15 @@
 <script lang="ts">
-	import { AuditService, AuditLog, UserService } from '$lib/gen'
-	import type { ActionKind } from '$lib/common'
-	import { page } from '$app/stores'
-	import { displayDate } from '$lib/utils'
 	import { goto } from '$app/navigation'
-	import PageHeader from '$lib/components/PageHeader.svelte'
-	import { superadmin, userStore, workspaceStore } from '$lib/stores'
-	import TableCustom from '$lib/components/TableCustom.svelte'
+	import { page } from '$app/stores'
+	import type { ActionKind } from '$lib/common'
 	import CenteredPage from '$lib/components/CenteredPage.svelte'
-	import Icon from 'svelte-awesome'
+	import PageHeader from '$lib/components/PageHeader.svelte'
+	import TableCustom from '$lib/components/TableCustom.svelte'
+	import { AuditLog, AuditService, UserService } from '$lib/gen'
+	import { userStore, workspaceStore } from '$lib/stores'
+	import { displayDate } from '$lib/utils'
 	import { faCross, faEdit, faPlay, faPlus, faQuestion } from '@fortawesome/free-solid-svg-icons'
+	import Icon from 'svelte-awesome'
 
 	let logs: AuditLog[]
 	let usernames: string[]

frontend/src/routes/(root)/(logged)/flows/get/[...path]/+page.svelte

@@ -2,46 +2,46 @@
 	import { page } from '$app/stores'
 	import { FlowService, JobService, ScheduleService, type Flow, type Schedule } from '$lib/gen'
 	import {
-		displayDaysAgo,
 		canWrite,
-		sendUserToast,
-		defaultIfEmptyString,
-		flowToHubUrl,
 		copyToClipboard,
+		defaultIfEmptyString,
+		displayDaysAgo,
 		emptyString,
-		encodeState
+		encodeState,
+		flowToHubUrl,
+		sendUserToast
 	} from '$lib/utils'
 	import {
-		faPlay,
-		faEdit,
 		faArchive,
-		faList,
 		faCalendar,
-		faShare,
-		faGlobe,
-		faCodeFork,
-		faClipboard,
-		faChevronUp,
 		faChevronDown,
+		faChevronUp,
+		faClipboard,
+		faCodeFork,
+		faEdit,
+		faGlobe,
+		faList,
+		faPlay,
+		faShare,
 		faTrash
 	} from '@fortawesome/free-solid-svg-icons'
 
-	import Tooltip from '$lib/components/Tooltip.svelte'
+	import { goto } from '$app/navigation'
+	import CenteredPage from '$lib/components/CenteredPage.svelte'
+	import { Badge, Button, Skeleton } from '$lib/components/common'
+	import CronInput from '$lib/components/CronInput.svelte'
+	import FlowViewer from '$lib/components/FlowViewer.svelte'
+	import JobArgs from '$lib/components/JobArgs.svelte'
+	import MoveDrawer from '$lib/components/MoveDrawer.svelte'
+	import RunForm from '$lib/components/RunForm.svelte'
+	import ScheduleEditor from '$lib/components/ScheduleEditor.svelte'
 	import ShareModal from '$lib/components/ShareModal.svelte'
 	import Toggle from '$lib/components/Toggle.svelte'
-	import { userStore, workspaceStore } from '$lib/stores'
-	import CenteredPage from '$lib/components/CenteredPage.svelte'
-	import FlowViewer from '$lib/components/FlowViewer.svelte'
-	import { Button, ActionRow, Skeleton, Badge } from '$lib/components/common'
+	import Tooltip from '$lib/components/Tooltip.svelte'
 	import UserSettings from '$lib/components/UserSettings.svelte'
-	import JobArgs from '$lib/components/JobArgs.svelte'
-	import CronInput from '$lib/components/CronInput.svelte'
+	import { userStore, workspaceStore } from '$lib/stores'
 	import Icon from 'svelte-awesome'
-	import RunForm from '$lib/components/RunForm.svelte'
-	import { goto } from '$app/navigation'
-	import ScheduleEditor from '$lib/components/ScheduleEditor.svelte'
 	import { slide } from 'svelte/transition'
-	import MoveDrawer from '$lib/components/MoveDrawer.svelte'
 
 	let userSettings: UserSettings
 
@@ -114,7 +114,6 @@
 	$: urlAsync = `${$page.url.hostname}/api/w/${$workspaceStore}/jobs/run/f/${flow?.path}`
 	$: urlSync = `${$page.url.hostname}/api/w/${$workspaceStore}/jobs/run_wait_result/f/${flow?.path}`
 
-	let runForm: RunForm | undefined
 	let isValid = true
 	let loading = false
 
@@ -303,7 +302,6 @@
 						autofocus
 						detailed={false}
 						bind:isValid
-						bind:this={runForm}
 						runnable={flow}
 						runAction={runFlow}
 						bind:args

frontend/src/routes/(root)/(logged)/groups/+page.svelte

@@ -4,15 +4,15 @@
 	import { canWrite } from '$lib/utils'
 
 	import CenteredPage from '$lib/components/CenteredPage.svelte'
+	import { Button, Drawer, DrawerContent, Skeleton } from '$lib/components/common'
 	import Dropdown from '$lib/components/Dropdown.svelte'
 	import GroupEditor from '$lib/components/GroupEditor.svelte'
+	import GroupInfo from '$lib/components/GroupInfo.svelte'
 	import PageHeader from '$lib/components/PageHeader.svelte'
 	import SharedBadge from '$lib/components/SharedBadge.svelte'
 	import TableCustom from '$lib/components/TableCustom.svelte'
 	import { userStore, workspaceStore } from '$lib/stores'
-	import { faEdit, faPlus, faShare, faTrash } from '@fortawesome/free-solid-svg-icons'
-	import { Button, Drawer, DrawerContent, Skeleton } from '$lib/components/common'
-	import GroupInfo from '$lib/components/GroupInfo.svelte'
+	import { faEdit, faPlus, faTrash } from '@fortawesome/free-solid-svg-icons'
 
 	type GroupW = Group & { canWrite: boolean }
 

frontend/src/routes/(root)/(logged)/oauth/callback/[client_name]/+page.svelte

@@ -5,7 +5,6 @@
 	import { onMount } from 'svelte'
 	import { OauthService } from '$lib/gen'
 	import { oauthStore } from '$lib/stores'
-	import Icon from 'svelte-awesome'
 	import CenteredPage from '$lib/components/CenteredPage.svelte'
 	import PageHeader from '$lib/components/PageHeader.svelte'
 	import { Loader2 } from 'lucide-svelte'

frontend/src/routes/(root)/(logged)/resources/+page.svelte

@@ -1,47 +1,47 @@
 <script lang="ts">
-	import { canWrite, emptySchema, removeMarkdown, sendUserToast, truncate } from '$lib/utils'
-	import { OauthService, ResourceService, type ListableResource } from '$lib/gen'
-	import type { ResourceType } from '$lib/gen'
-	import PageHeader from '$lib/components/PageHeader.svelte'
-	import ResourceEditor from '$lib/components/ResourceEditor.svelte'
-	import TableCustom from '$lib/components/TableCustom.svelte'
-	import IconedResourceType from '$lib/components/IconedResourceType.svelte'
-	import ShareModal from '$lib/components/ShareModal.svelte'
-	import SharedBadge from '$lib/components/SharedBadge.svelte'
-	import { userStore, workspaceStore, oauthStore, superadmin } from '$lib/stores'
-	import SchemaEditor from '$lib/components/SchemaEditor.svelte'
-	import SchemaViewer from '$lib/components/SchemaViewer.svelte'
-	import Dropdown from '$lib/components/Dropdown.svelte'
-	import {
-		faEdit,
-		faPlus,
-		faShare,
-		faTrash,
-		faCircle,
-		faChain,
-		faSave,
-		faRefresh
-	} from '@fortawesome/free-solid-svg-icons'
-	import CenteredPage from '$lib/components/CenteredPage.svelte'
-	import Icon from 'svelte-awesome'
-	import Required from '$lib/components/Required.svelte'
-	import AppConnect from '$lib/components/AppConnect.svelte'
 	import { page } from '$app/stores'
-	import { onMount } from 'svelte'
-	import { Button, Alert, Badge, Skeleton, Tab } from '$lib/components/common'
+	import AppConnect from '$lib/components/AppConnect.svelte'
+	import CenteredPage from '$lib/components/CenteredPage.svelte'
+	import { Alert, Badge, Button, Skeleton, Tab } from '$lib/components/common'
 	import ConfirmationModal from '$lib/components/common/confirmationModal/ConfirmationModal.svelte'
 	import Drawer from '$lib/components/common/drawer/Drawer.svelte'
 	import DrawerContent from '$lib/components/common/drawer/DrawerContent.svelte'
+	import Tabs from '$lib/components/common/tabs/Tabs.svelte'
+	import Dropdown from '$lib/components/Dropdown.svelte'
+	import ListFilters from '$lib/components/home/ListFilters.svelte'
+	import IconedResourceType from '$lib/components/IconedResourceType.svelte'
+	import PageHeader from '$lib/components/PageHeader.svelte'
 	import Popover from '$lib/components/Popover.svelte'
+	import Required from '$lib/components/Required.svelte'
+	import ResourceEditor from '$lib/components/ResourceEditor.svelte'
+	import SchemaEditor from '$lib/components/SchemaEditor.svelte'
+	import SchemaViewer from '$lib/components/SchemaViewer.svelte'
+	import SearchItems from '$lib/components/SearchItems.svelte'
+	import SharedBadge from '$lib/components/SharedBadge.svelte'
+	import ShareModal from '$lib/components/ShareModal.svelte'
+	import SimpleEditor from '$lib/components/SimpleEditor.svelte'
+	import TableCustom from '$lib/components/TableCustom.svelte'
 	import Toggle from '$lib/components/Toggle.svelte'
 	import Tooltip from '$lib/components/Tooltip.svelte'
-	import Tabs from '$lib/components/common/tabs/Tabs.svelte'
-	import { Building } from 'lucide-svelte'
-	import ListFilters from '$lib/components/home/ListFilters.svelte'
-	import SearchItems from '$lib/components/SearchItems.svelte'
-	import autosize from 'svelte-autosize'
-	import SimpleEditor from '$lib/components/SimpleEditor.svelte'
+	import type { ResourceType } from '$lib/gen'
+	import { OauthService, ResourceService, type ListableResource } from '$lib/gen'
+	import { oauthStore, userStore, workspaceStore } from '$lib/stores'
+	import { canWrite, emptySchema, removeMarkdown, sendUserToast, truncate } from '$lib/utils'
+	import {
+		faChain,
+		faCircle,
+		faEdit,
+		faPlus,
+		faRefresh,
+		faSave,
+		faShare,
+		faTrash
+	} from '@fortawesome/free-solid-svg-icons'
 	import { convert } from '@redocly/json-to-json-schema'
+	import { Building } from 'lucide-svelte'
+	import { onMount } from 'svelte'
+	import autosize from 'svelte-autosize'
+	import Icon from 'svelte-awesome'
 	import Portal from 'svelte-portal'
 
 	type ResourceW = ListableResource & { canWrite: boolean }

frontend/src/routes/(root)/(logged)/schedules/+page.svelte

@@ -1,12 +1,18 @@
 <script lang="ts">
-	import { sendUserToast, displayDate, canWrite } from '$lib/utils'
-	import { type Schedule, ScheduleService } from '$lib/gen'
+	import { ScheduleService, type Schedule } from '$lib/gen'
+	import { canWrite, displayDate, sendUserToast } from '$lib/utils'
 
-	import PageHeader from '$lib/components/PageHeader.svelte'
-	import TableCustom from '$lib/components/TableCustom.svelte'
+	import CenteredPage from '$lib/components/CenteredPage.svelte'
+	import { Badge, Button, Skeleton } from '$lib/components/common'
 	import Dropdown from '$lib/components/Dropdown.svelte'
-	import ShareModal from '$lib/components/ShareModal.svelte'
+	import PageHeader from '$lib/components/PageHeader.svelte'
+	import Popover from '$lib/components/Popover.svelte'
+	import ScheduleEditor from '$lib/components/ScheduleEditor.svelte'
 	import SharedBadge from '$lib/components/SharedBadge.svelte'
+	import ShareModal from '$lib/components/ShareModal.svelte'
+	import TableCustom from '$lib/components/TableCustom.svelte'
+	import Toggle from '$lib/components/Toggle.svelte'
+	import { userStore, workspaceStore } from '$lib/stores'
 	import {
 		faCircle,
 		faEdit,
@@ -17,14 +23,7 @@
 		faToggleOn,
 		faTrash
 	} from '@fortawesome/free-solid-svg-icons'
-	import { userStore, workspaceStore } from '$lib/stores'
-	import CenteredPage from '$lib/components/CenteredPage.svelte'
-	import Toggle from '$lib/components/Toggle.svelte'
-	import { Badge, Button, Skeleton } from '$lib/components/common'
-	import Popover from '$lib/components/Popover.svelte'
 	import { Icon } from 'svelte-awesome'
-	import ScheduleEditor from '$lib/components/ScheduleEditor.svelte'
-	import { MoreVertical } from 'lucide-svelte'
 
 	type ScheduleW = Schedule & { canWrite: boolean }
 

frontend/src/routes/(root)/(logged)/scripts/get/[...hash]/+page.svelte

@@ -147,7 +147,6 @@
 	})
 
 	let isValid = true
-	let runForm: RunForm | undefined
 
 	let runLoading = false
 	async function runScript(
@@ -392,7 +391,6 @@
 						autofocus
 						detailed={false}
 						bind:isValid
-						bind:this={runForm}
 						runnable={script}
 						runAction={runScript}
 						bind:args

frontend/src/routes/(root)/(logged)/scripts/run/[...hash]/+page.svelte

@@ -1,5 +1,13 @@
 <script lang="ts">
+	import { goto } from '$app/navigation'
 	import { page } from '$app/stores'
+	import CenteredPage from '$lib/components/CenteredPage.svelte'
+	import { Alert, Badge, Button, Kbd, Skeleton } from '$lib/components/common'
+	import RunForm from '$lib/components/RunForm.svelte'
+	import SharedBadge from '$lib/components/SharedBadge.svelte'
+	import { JobService, ScriptService, type Script } from '$lib/gen'
+	import { inferArgs } from '$lib/infer'
+	import { userStore, workspaceStore } from '$lib/stores'
 	import {
 		canWrite,
 		defaultIfEmptyString,
@@ -9,15 +17,7 @@
 		sendUserToast,
 		truncateHash
 	} from '$lib/utils'
-	import { ScriptService, type Script, JobService } from '$lib/gen'
-	import { goto } from '$app/navigation'
-	import { userStore, workspaceStore } from '$lib/stores'
-	import { inferArgs } from '$lib/infer'
-	import CenteredPage from '$lib/components/CenteredPage.svelte'
-	import RunForm from '$lib/components/RunForm.svelte'
-	import { Alert, Badge, Button, Kbd, Skeleton } from '$lib/components/common'
-	import SharedBadge from '$lib/components/SharedBadge.svelte'
-	import { faEye, faPen, faPlay, faScroll } from '@fortawesome/free-solid-svg-icons'
+	import { faEye, faPen, faPlay } from '@fortawesome/free-solid-svg-icons'
 
 	$: hash = $page.params.hash
 	let script: Script | undefined

frontend/src/routes/(root)/(logged)/variables/+page.svelte

@@ -1,35 +1,34 @@
 <script lang="ts">
-	import { canWrite, sendUserToast, truncate } from '$lib/utils'
-	import { OauthService, VariableService } from '$lib/gen'
-	import type { ListableVariable, ContextualVariable } from '$lib/gen'
-	import Dropdown from '$lib/components/Dropdown.svelte'
-	import PageHeader from '$lib/components/PageHeader.svelte'
-	import TableSimple from '$lib/components/TableSimple.svelte'
-	import TableCustom from '$lib/components/TableCustom.svelte'
-	import ShareModal from '$lib/components/ShareModal.svelte'
-	import SharedBadge from '$lib/components/SharedBadge.svelte'
-	import VariableEditor from '$lib/components/VariableEditor.svelte'
-	import { userStore, workspaceStore } from '$lib/stores'
 	import CenteredPage from '$lib/components/CenteredPage.svelte'
-	import Icon from 'svelte-awesome'
-	import {
-		faPlus,
-		faCircle,
-		faEyeSlash,
-		faRefresh,
-		faChain,
-		faTrash,
-		faEdit,
-		faShare
-	} from '@fortawesome/free-solid-svg-icons'
-	import { Button, Tab, Tabs } from '$lib/components/common'
+	import { Alert, Badge, Button, Skeleton, Tab, Tabs } from '$lib/components/common'
 	import ConfirmationModal from '$lib/components/common/confirmationModal/ConfirmationModal.svelte'
-	import { Alert, Badge, Skeleton } from '$lib/components/common'
-	import Popover from '$lib/components/Popover.svelte'
-	import { Building, DollarSign, MoreVertical } from 'lucide-svelte'
-	import Tooltip from '$lib/components/Tooltip.svelte'
-	import SearchItems from '$lib/components/SearchItems.svelte'
+	import Dropdown from '$lib/components/Dropdown.svelte'
 	import ListFilters from '$lib/components/home/ListFilters.svelte'
+	import PageHeader from '$lib/components/PageHeader.svelte'
+	import Popover from '$lib/components/Popover.svelte'
+	import SearchItems from '$lib/components/SearchItems.svelte'
+	import SharedBadge from '$lib/components/SharedBadge.svelte'
+	import ShareModal from '$lib/components/ShareModal.svelte'
+	import TableCustom from '$lib/components/TableCustom.svelte'
+	import TableSimple from '$lib/components/TableSimple.svelte'
+	import Tooltip from '$lib/components/Tooltip.svelte'
+	import VariableEditor from '$lib/components/VariableEditor.svelte'
+	import type { ContextualVariable, ListableVariable } from '$lib/gen'
+	import { OauthService, VariableService } from '$lib/gen'
+	import { userStore, workspaceStore } from '$lib/stores'
+	import { canWrite, sendUserToast, truncate } from '$lib/utils'
+	import {
+		faChain,
+		faCircle,
+		faEdit,
+		faEyeSlash,
+		faPlus,
+		faRefresh,
+		faShare,
+		faTrash
+	} from '@fortawesome/free-solid-svg-icons'
+	import { Building, DollarSign } from 'lucide-svelte'
+	import Icon from 'svelte-awesome'
 
 	type ListableVariableW = ListableVariable & { canWrite: boolean }
 

frontend/src/routes/(root)/(logged)/workers/+page.svelte

@@ -4,7 +4,7 @@
 	import PageHeader from '$lib/components/PageHeader.svelte'
 	import TableCustom from '$lib/components/TableCustom.svelte'
 	import { WorkerService, type WorkerPing } from '$lib/gen'
-	import { displayDate, elapsedSinceSecs, groupBy, sendUserToast } from '$lib/utils'
+	import { displayDate, groupBy, sendUserToast } from '$lib/utils'
 	import { onDestroy, onMount } from 'svelte'
 
 	let workers: WorkerPing[] = []

frontend/src/routes/(root)/(logged)/workspace_settings/+page.svelte

@@ -1,37 +1,31 @@
 <script lang="ts">
-	import {
-		UserService,
-		type WorkspaceInvite,
-		WorkspaceService,
-		OauthService,
-		Script
-	} from '$lib/gen'
-	import type { User } from '$lib/gen'
-	import { sendUserToast, isCloudHosted, capitalize } from '$lib/utils'
-	import PageHeader from '$lib/components/PageHeader.svelte'
-	import {
-		superadmin,
-		usageStore,
-		userStore,
-		usersWorkspaceStore,
-		workspaceStore
-	} from '$lib/stores'
-	import CenteredPage from '$lib/components/CenteredPage.svelte'
-	import { faSlack } from '@fortawesome/free-brands-svg-icons'
-	import TableCustom from '$lib/components/TableCustom.svelte'
 	import { goto } from '$app/navigation'
-	import InviteUser from '$lib/components/InviteUser.svelte'
-	import ScriptPicker from '$lib/components/ScriptPicker.svelte'
-	import { Alert, Badge, Button, Skeleton, Tab, Tabs } from '$lib/components/common'
-	import Tooltip from '$lib/components/Tooltip.svelte'
-	import { faScroll, faBarsStaggered, faExternalLink } from '@fortawesome/free-solid-svg-icons'
-	import SearchItems from '$lib/components/SearchItems.svelte'
-	import Toggle from '$lib/components/Toggle.svelte'
-	import ToggleButtonGroup from '$lib/components/common/toggleButton/ToggleButtonGroup.svelte'
-	import ToggleButton from '$lib/components/common/toggleButton/ToggleButton.svelte'
-	import AddUser from '$lib/components/AddUser.svelte'
 	import { page } from '$app/stores'
+	import AddUser from '$lib/components/AddUser.svelte'
+	import CenteredPage from '$lib/components/CenteredPage.svelte'
+	import { Alert, Badge, Button, Skeleton, Tab, Tabs } from '$lib/components/common'
+	import ToggleButton from '$lib/components/common/toggleButton/ToggleButton.svelte'
+	import ToggleButtonGroup from '$lib/components/common/toggleButton/ToggleButtonGroup.svelte'
+	import InviteUser from '$lib/components/InviteUser.svelte'
+	import PageHeader from '$lib/components/PageHeader.svelte'
+	import ScriptPicker from '$lib/components/ScriptPicker.svelte'
+	import SearchItems from '$lib/components/SearchItems.svelte'
 	import Slider from '$lib/components/Slider.svelte'
+	import TableCustom from '$lib/components/TableCustom.svelte'
+	import Toggle from '$lib/components/Toggle.svelte'
+	import Tooltip from '$lib/components/Tooltip.svelte'
+	import type { User } from '$lib/gen'
+	import {
+		OauthService,
+		Script,
+		UserService,
+		WorkspaceService,
+		type WorkspaceInvite
+	} from '$lib/gen'
+	import { superadmin, userStore, usersWorkspaceStore, workspaceStore } from '$lib/stores'
+	import { capitalize, isCloudHosted, sendUserToast } from '$lib/utils'
+	import { faSlack } from '@fortawesome/free-brands-svg-icons'
+	import { faBarsStaggered, faExternalLink, faScroll } from '@fortawesome/free-solid-svg-icons'
 
 	let users: User[] | undefined = undefined
 	let invites: WorkspaceInvite[] = []
@@ -480,7 +474,7 @@
 									></div
 								>
 							{:else}
-								<div class="inline text-2xl font-bold ">Free plan</div>
+								<div class="inline text-2xl font-bold">Free plan</div>
 							{/if}
 
 							{#if plan}
@@ -553,7 +547,7 @@
 
 				<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
 					{#each Object.entries(plans) as [planTitle, planDesc]}
-						<div class="box p-4 text-sm  flex flex-col h-full overflow-hidden">
+						<div class="box p-4 text-sm flex flex-col h-full overflow-hidden">
 							<h2 class="mb-4">{planTitle}</h2>
 							<ul class="list-disc p-4">
 								{#each planDesc as item}

frontend/src/routes/approve/[workspace]/[job]/[resume]/[hmac]/+page.svelte

@@ -32,7 +32,7 @@
 			event.preventDefault()
 			timeout && clearInterval(timeout)
 			if (event.reason?.message) {
-				const { message, body, status } = event.reason
+				const { message, body } = event.reason
 
 				if (body) {
 					sendUserToast(`${body}`, true)

frontend/src/routes/public/[workspace]/[...secret]/+page.svelte

@@ -6,7 +6,7 @@
 
 	import { Alert, Skeleton } from '$lib/components/common'
 	import { WindmillIcon } from '$lib/components/icons'
-	import { AppService, AppWithLastVersion, GlobalUserInfo, UserService } from '$lib/gen'
+	import { AppService, AppWithLastVersion } from '$lib/gen'
 	import { userStore } from '$lib/stores'
 	import { twMerge } from 'tailwind-merge'
 
@@ -41,7 +41,7 @@
 	{@html github}
 </svelte:head>
 
-<div class="z-50 text-xs fixed bottom-1 right-2 ">
+<div class="z-50 text-xs fixed bottom-1 right-2">
 	<a href="https://windmill.dev" class="whitespace-nowrap text-gray-500 inline-flex items-center"
 		>Powered by &nbsp;<WindmillIcon />&nbsp;Windmill</a
 	>

frontend/tsconfig.json

@@ -6,7 +6,7 @@
 		"target": "esnext",
 		"preserveValueImports": true,
 		"outDir": "build",
-		// "noUnusedLocals": true,
+		"noUnusedLocals": true,
 		// "noUnusedParameters": true,
 
 		/**