windmill-components 1.46.3 → 1.55.0

package/components/apps/editor/settingsPanel/ArrayStaticInputEditor.svelte.d.ts

@@ -0,0 +1,55 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        canHide?: boolean | undefined;
+        componentInput: (import("../../inputType").StaticInput<string[]> & {
+            fieldType: "array";
+            defaultValue: string[];
+            subFieldType?: "text" | undefined;
+        }) | (import("../../inputType").StaticInput<string[]> & {
+            fieldType: "array";
+            defaultValue: string[];
+            subFieldType?: "textarea" | undefined;
+        }) | (import("../../inputType").StaticInput<number[]> & {
+            fieldType: "array";
+            defaultValue: number[];
+            subFieldType?: "number" | undefined;
+        }) | (import("../../inputType").StaticInput<boolean[]> & {
+            fieldType: "array";
+            defaultValue: boolean[];
+            subFieldType?: "boolean" | undefined;
+        }) | (import("../../inputType").StaticInput<string[]> & {
+            fieldType: "array";
+            defaultValue: string[];
+            subFieldType?: "date" | undefined;
+        }) | (import("../../inputType").StaticInput<string[]> & {
+            fieldType: "array";
+            defaultValue: string[];
+            subFieldType?: "time" | undefined;
+        }) | (import("../../inputType").StaticInput<string[]> & {
+            fieldType: "array";
+            defaultValue: string[];
+            subFieldType?: "datetime" | undefined;
+        }) | (import("../../inputType").StaticInput<object[]> & {
+            fieldType: "array";
+            defaultValue: object[];
+            subFieldType?: "object" | undefined;
+        }) | (import("../../inputType").StaticInput<string[]> & {
+            fieldType: "array";
+            defaultValue: string[];
+            subFieldType?: "select" | undefined;
+        } & {
+            optionValuesKey: "buttonColorOptions" | "buttonSizeOptions" | "tableSearchOptions" | "chartThemeOptions";
+        });
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ArrayStaticInputEditorProps = typeof __propDef.props;
+export type ArrayStaticInputEditorEvents = typeof __propDef.events;
+export type ArrayStaticInputEditorSlots = typeof __propDef.slots;
+export default class ArrayStaticInputEditor extends SvelteComponentTyped<ArrayStaticInputEditorProps, ArrayStaticInputEditorEvents, ArrayStaticInputEditorSlots> {
+}
+export {};

package/components/apps/editor/settingsPanel/ComponentPanel.svelte

@@ -0,0 +1,221 @@
+<script>import { ToggleButton, ToggleButtonGroup } from '../../../common';
+import Button from '../../../common/button/Button.svelte';
+import { faArrowRight, faClose, faCode, faMinimize, faPen, faTrashAlt } from '@fortawesome/free-solid-svg-icons';
+import { AlignStartHorizontal, AlignStartVertical, AlignCenterHorizontal, AlignCenterVertical, AlignEndHorizontal, AlignEndVertical } from 'lucide-svelte';
+import { getContext } from 'svelte';
+import PanelSection from './common/PanelSection.svelte';
+import InputsSpecsEditor from './InputsSpecsEditor.svelte';
+import TableActions from './TableActions.svelte';
+import StaticInputEditor from './StaticInputEditor.svelte';
+import ConnectedInputEditor from './ConnectedInputEditor.svelte';
+import Badge from '../../../common/badge/Badge.svelte';
+import { capitalize } from '../../../../utils';
+import { fieldTypeToTsType } from '../../utils';
+import Recompute from './Recompute.svelte';
+import Alert from '../../../common/alert/Alert.svelte';
+import RunnableSelector from './mainInput/RunnableSelector.svelte';
+export let component;
+export let onDelete = undefined;
+const { app, staticOutputs, runnableComponents } = getContext('AppEditorContext');
+function removeGridElement() {
+    if (onDelete && component) {
+        delete $staticOutputs[component.id];
+        $staticOutputs = $staticOutputs;
+        delete $runnableComponents[component.id];
+        $runnableComponents = $runnableComponents;
+        onDelete();
+        // Delete static inputs
+    }
+    else {
+        if (component) {
+            $app.grid = $app.grid.filter((gridComponent) => gridComponent.data.id !== component?.id);
+            // Delete static inputs
+            delete $staticOutputs[component.id];
+            $staticOutputs = $staticOutputs;
+            delete $runnableComponents[component.id];
+            $runnableComponents = $runnableComponents;
+        }
+    }
+}
+</script>
+
+{#if component}
+	<div class="flex flex-col w-full divide-y">
+		{#if component.componentInput}
+			<PanelSection title="Main input">
+				<svelte:fragment slot="action">
+					<Badge color="blue">
+						{component.componentInput.fieldType === 'array' && component.componentInput.subFieldType
+							? `${capitalize(fieldTypeToTsType(component.componentInput.subFieldType))}[]`
+							: capitalize(fieldTypeToTsType(component.componentInput.fieldType))}
+					</Badge>
+				</svelte:fragment>
+				<div class="w-full">
+					<ToggleButtonGroup bind:selected={component.componentInput.type}>
+						<ToggleButton
+							position="left"
+							value="static"
+							startIcon={{ icon: faPen }}
+							size="xs"
+							disable={component.type === 'buttoncomponent'}
+						>
+							Static
+						</ToggleButton>
+						<ToggleButton
+							value="connected"
+							position="center"
+							startIcon={{ icon: faArrowRight }}
+							size="xs"
+						>
+							Connected
+						</ToggleButton>
+						<ToggleButton position="right" value="runnable" startIcon={{ icon: faCode }} size="xs">
+							Computed
+						</ToggleButton>
+					</ToggleButtonGroup>
+				</div>
+				<div class="flex flex-col w-full gap-2 my-2">
+					{#if component.componentInput.type === 'static'}
+						<StaticInputEditor bind:componentInput={component.componentInput} />
+					{:else if component.componentInput.type === 'connected' && component.componentInput !== undefined}
+						<ConnectedInputEditor bind:componentInput={component.componentInput} />
+					{:else if component && component.componentInput?.type === 'runnable' && component.componentInput.runnable}
+						<div class="flex justify-between w-full items-center">
+							<span class="text-xs">
+								{component.componentInput.runnable.type === 'runnableByName'
+									? component.componentInput.runnable.inlineScriptName
+									: component.componentInput.runnable.path}
+							</span>
+							<Button
+								size="xs"
+								color="red"
+								variant="border"
+								startIcon={{ icon: faClose }}
+								on:click={() => {
+									if (component?.componentInput?.type === 'runnable') {
+										component.componentInput.runnable = undefined
+										component.componentInput.fields = {}
+										component = component
+									}
+								}}
+							>
+								Clear
+							</Button>
+						</div>
+					{:else}
+						<RunnableSelector
+							inlineScripts={Object.keys($app.inlineScripts)}
+							bind:componentInput={component.componentInput}
+						/>
+					{/if}
+				</div>
+				{#if component.componentInput?.type === 'runnable' && Object.keys(component.componentInput.fields ?? {}).length > 0}
+					<div class="border w-full">
+						<PanelSection
+							title={`Runnable inputs (${
+								Object.keys(component.componentInput.fields ?? {}).length
+							})`}
+							smallPadding
+						>
+							{#if component.type === 'buttoncomponent'}
+								<Alert title="Button inputs" type="info" size="xs">
+									The runnable inputs of a button component are not settable by the user. They must
+									be defined statically or connected.
+								</Alert>
+							{/if}
+
+							<InputsSpecsEditor
+								bind:inputSpecs={component.componentInput.fields}
+								userInputEnabled={component.type !== 'buttoncomponent'}
+							/>
+						</PanelSection>
+					</div>
+				{/if}
+
+				{#if component.type === 'buttoncomponent'}
+					<div class="w-full">
+						<Alert size="xs" type="warning" title="Result output">
+							This input is not directly used by the component. It is piped to the component's
+							<code>result</code> output.
+						</Alert>
+					</div>
+				{/if}
+			</PanelSection>
+		{/if}
+
+		{#if Object.values(component.configuration).length > 0}
+			<PanelSection title={`Configuration (${Object.values(component.configuration).length})`}>
+				<InputsSpecsEditor bind:inputSpecs={component.configuration} userInputEnabled={false} />
+			</PanelSection>
+		{/if}
+
+		{#if component.type === 'tablecomponent' && Array.isArray(component.actionButtons)}
+			<TableActions bind:components={component.actionButtons} />
+		{/if}
+
+		{#if component.verticalAlignment !== undefined}
+			<PanelSection title="Alignment">
+				<svelte:fragment slot="action">
+					<Button
+						size="xs"
+						on:click={() => {
+							if (component) {
+								component.verticalAlignment = 'center'
+								component.horizontalAlignment = 'center'
+							}
+						}}
+						startIcon={{ icon: faMinimize }}
+					>
+						Center
+					</Button>
+				</svelte:fragment>
+				<div class="w-full text-xs font-semibold">Horizontal alignment</div>
+
+				<div class="w-full">
+					<ToggleButtonGroup bind:selected={component.horizontalAlignment}>
+						<ToggleButton position="left" value="left" size="xs">
+							<AlignStartVertical size={16} />
+						</ToggleButton>
+						<ToggleButton position="center" value="center" size="xs">
+							<AlignCenterVertical size={16} />
+						</ToggleButton>
+						<ToggleButton position="right" value="right" size="xs">
+							<AlignEndVertical size={16} />
+						</ToggleButton>
+					</ToggleButtonGroup>
+				</div>
+				{#if component.type !== 'formcomponent'}
+					<div class="w-full text-xs font-semibold">Vertical alignment</div>
+					<div class="w-full">
+						<ToggleButtonGroup bind:selected={component.verticalAlignment}>
+							<ToggleButton position="left" value="top" size="xs">
+								<AlignStartHorizontal size={16} />
+							</ToggleButton>
+							<ToggleButton position="center" value="center" size="xs">
+								<AlignCenterHorizontal size={16} />
+							</ToggleButton>
+							<ToggleButton position="right" value="bottom" size="xs">
+								<AlignEndHorizontal size={16} />
+							</ToggleButton>
+						</ToggleButtonGroup>
+					</div>
+				{/if}
+			</PanelSection>
+		{/if}
+		{#if component.type === 'buttoncomponent' || component.type === 'formcomponent'}
+			<Recompute bind:recomputeIds={component.recomputeIds} ownId={component.id} />
+		{/if}
+
+		<PanelSection title="Danger zone">
+			<Button
+				size="xs"
+				color="red"
+				variant="border"
+				startIcon={{ icon: faTrashAlt }}
+				on:click={removeGridElement}
+			>
+				Delete component: {component.id}
+			</Button>
+		</PanelSection>
+	</div>
+{/if}

package/components/apps/editor/settingsPanel/ComponentPanel.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponentTyped } from "svelte";
+import type { AppComponent } from '../../types';
+declare const __propDef: {
+    props: {
+        component: AppComponent | undefined;
+        onDelete?: (() => void) | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ComponentPanelProps = typeof __propDef.props;
+export type ComponentPanelEvents = typeof __propDef.events;
+export type ComponentPanelSlots = typeof __propDef.slots;
+export default class ComponentPanel extends SvelteComponentTyped<ComponentPanelProps, ComponentPanelEvents, ComponentPanelSlots> {
+}
+export {};

package/components/apps/editor/settingsPanel/ConnectedInputEditor.svelte

@@ -0,0 +1,70 @@
+<script>import { Badge, Button } from '../../../common';
+import { faArrowRight, faClose } from '@fortawesome/free-solid-svg-icons';
+import { getContext } from 'svelte';
+export let componentInput;
+const { connectingInput } = getContext('AppEditorContext');
+function applyConnection() {
+    if (!$connectingInput.opened &&
+        $connectingInput.input !== undefined &&
+        componentInput.type === 'connected' &&
+        !componentInput.connection) {
+        debugger;
+        componentInput.connection = $connectingInput.input.connection;
+        $connectingInput = {
+            opened: false,
+            input: undefined
+        };
+    }
+}
+$: $connectingInput && applyConnection();
+</script>
+
+{#if componentInput.type === 'connected'}
+	{#if componentInput.connection}
+		<div class="flex justify-between w-full">
+			<span class="text-xs">Status</span>
+			<Badge color="green">Connected</Badge>
+		</div>
+		<div class="flex justify-between w-full">
+			<span class="text-xs">Component</span>
+			<Badge color="indigo">{componentInput.connection.componentId}</Badge>
+		</div>
+		<div class="flex justify-between w-full">
+			<span class="text-xs">Path</span>
+			<Badge color="indigo">{componentInput.connection.path}</Badge>
+		</div>
+		<Button
+			size="xs"
+			startIcon={{ icon: faClose }}
+			color="red"
+			variant="border"
+			on:click={() => {
+				if (componentInput.type === 'connected') {
+					componentInput.connection = undefined
+				}
+			}}
+		>
+			Disconnect
+		</Button>
+	{:else}
+		<div class="flex justify-between w-full">
+			<span class="text-xs">Status</span>
+			<Badge color="yellow">Not connected</Badge>
+		</div>
+		<Button
+			size="xs"
+			endIcon={{ icon: faArrowRight }}
+			color="blue"
+			on:click={() => {
+				if (componentInput.type === 'connected') {
+					$connectingInput = {
+						opened: true,
+						input: undefined
+					}
+				}
+			}}
+		>
+			Connect
+		</Button>
+	{/if}
+{/if}

package/components/apps/editor/settingsPanel/ConnectedInputEditor.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponentTyped } from "svelte";
+import type { AppInput } from '../../inputType';
+declare const __propDef: {
+    props: {
+        componentInput: AppInput;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ConnectedInputEditorProps = typeof __propDef.props;
+export type ConnectedInputEditorEvents = typeof __propDef.events;
+export type ConnectedInputEditorSlots = typeof __propDef.slots;
+export default class ConnectedInputEditor extends SvelteComponentTyped<ConnectedInputEditorProps, ConnectedInputEditorEvents, ConnectedInputEditorSlots> {
+}
+export {};

package/components/apps/editor/settingsPanel/InputsSpecEditor.svelte

@@ -0,0 +1,11 @@
+<script>import ConnectedInputEditor from './ConnectedInputEditor.svelte';
+import StaticInputEditor from './StaticInputEditor.svelte';
+export let componentInput;
+export let canHide = false;
+</script>
+
+{#if componentInput.type === 'static'}
+	<StaticInputEditor bind:componentInput {canHide} />
+{:else if componentInput.type === 'connected'}
+	<ConnectedInputEditor bind:componentInput />
+{/if}

package/components/apps/editor/settingsPanel/InputsSpecEditor.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponentTyped } from "svelte";
+import type { ConnectedAppInput, StaticAppInput, UserAppInput } from '../../inputType';
+declare const __propDef: {
+    props: {
+        componentInput: StaticAppInput | ConnectedAppInput | UserAppInput;
+        canHide?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type InputsSpecEditorProps = typeof __propDef.props;
+export type InputsSpecEditorEvents = typeof __propDef.events;
+export type InputsSpecEditorSlots = typeof __propDef.slots;
+export default class InputsSpecEditor extends SvelteComponentTyped<InputsSpecEditorProps, InputsSpecEditorEvents, InputsSpecEditorSlots> {
+}
+export {};

package/components/apps/editor/settingsPanel/InputsSpecsEditor.svelte

@@ -0,0 +1,67 @@
+<script>import { Badge, ToggleButton, ToggleButtonGroup } from '../../../common';
+import { capitalize } from '../../../../utils';
+import { faArrowRight, faPen, faUser } from '@fortawesome/free-solid-svg-icons';
+import { fieldTypeToTsType } from '../../utils';
+import InputsSpecEditor from './InputsSpecEditor.svelte';
+export let inputSpecs;
+export let userInputEnabled = true;
+export let staticOnly = false;
+</script>
+
+{#if inputSpecs}
+	<div class="w-full flex flex-col gap-4">
+		{#each Object.keys(inputSpecs) as inputSpecKey, index (index)}
+			{@const input = inputSpecs[inputSpecKey]}
+			{#if true}
+				<div class="flex flex-col gap-2">
+					<div class="flex justify-between items-center">
+						<span class="text-xs font-semibold">{capitalize(inputSpecKey)}</span>
+
+						<div class="flex gap-2 items-center">
+							<Badge color="blue">
+								{input.fieldType === 'array' && input.subFieldType
+									? `${capitalize(fieldTypeToTsType(input.subFieldType))}[]`
+									: capitalize(fieldTypeToTsType(input.fieldType))}
+							</Badge>
+
+							<ToggleButtonGroup bind:selected={inputSpecs[inputSpecKey].type}>
+								<ToggleButton
+									position="left"
+									value="static"
+									startIcon={{ icon: faPen }}
+									size="xs"
+									iconOnly
+								/>
+								<ToggleButton
+									position={userInputEnabled ? 'center' : 'right'}
+									value="connected"
+									startIcon={{ icon: faArrowRight }}
+									size="xs"
+									iconOnly
+									disabled={staticOnly}
+								/>
+								{#if userInputEnabled}
+									<ToggleButton
+										position="right"
+										value="user"
+										startIcon={{ icon: faUser }}
+										size="xs"
+										iconOnly
+										disabled={staticOnly && !userInputEnabled}
+									/>
+								{/if}
+							</ToggleButtonGroup>
+						</div>
+					</div>
+
+					<InputsSpecEditor
+						bind:componentInput={inputSpecs[inputSpecKey]}
+						canHide={userInputEnabled}
+					/>
+				</div>
+			{/if}
+		{/each}
+	</div>
+{:else}
+	<div class="text-gray-500 text-sm">No inputs</div>
+{/if}

package/components/apps/editor/settingsPanel/InputsSpecsEditor.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+import type { ConnectedAppInput, StaticAppInput, UserAppInput } from '../../inputType';
+declare const __propDef: {
+    props: {
+        inputSpecs: Record<string, StaticAppInput | ConnectedAppInput | UserAppInput>;
+        userInputEnabled?: boolean | undefined;
+        staticOnly?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type InputsSpecsEditorProps = typeof __propDef.props;
+export type InputsSpecsEditorEvents = typeof __propDef.events;
+export type InputsSpecsEditorSlots = typeof __propDef.slots;
+export default class InputsSpecsEditor extends SvelteComponentTyped<InputsSpecsEditorProps, InputsSpecsEditorEvents, InputsSpecsEditorSlots> {
+}
+export {};

package/components/apps/editor/settingsPanel/PickFlow.svelte

@@ -0,0 +1,38 @@
+<script>import ItemPicker from '../../../ItemPicker.svelte';
+import { FlowService } from '../../../../gen';
+import { workspaceStore } from '../../../../stores';
+import { createEventDispatcher } from 'svelte';
+import Button from '../../../common/button/Button.svelte';
+import { Icon } from 'svelte-awesome';
+import { faBarsStaggered } from '@fortawesome/free-solid-svg-icons';
+let itemPicker;
+const dispatch = createEventDispatcher();
+async function loadItems() {
+    return await FlowService.listFlows({ workspace: $workspaceStore });
+}
+</script>
+
+<ItemPicker
+	bind:this={itemPicker}
+	pickCallback={(path, summary) => {
+		dispatch('pick', { path, summary })
+	}}
+	itemName="Flow"
+	extraField="summary"
+	{loadItems}
+/>
+
+<Button
+	on:click={() => itemPicker.openDrawer()}
+	btnClasses="w-24 truncate"
+	size="sm"
+	spacingSize="md"
+	variant="border"
+	color="light"
+>
+	<div class="flex justify-center flex-col items-center gap-2">
+		<Icon data={faBarsStaggered} scale={0.8} class="mr-1" />
+
+		<span class="text-xs">Flow</span>
+	</div>
+</Button>

package/components/apps/editor/settingsPanel/PickFlow.svelte.d.ts

@@ -0,0 +1,16 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        pick: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type PickFlowProps = typeof __propDef.props;
+export type PickFlowEvents = typeof __propDef.events;
+export type PickFlowSlots = typeof __propDef.slots;
+export default class PickFlow extends SvelteComponentTyped<PickFlowProps, PickFlowEvents, PickFlowSlots> {
+}
+export {};

package/components/apps/editor/settingsPanel/PickInlineScript.svelte

@@ -0,0 +1,38 @@
+<script>import ItemPicker from '../../../ItemPicker.svelte';
+import { createEventDispatcher } from 'svelte';
+import Button from '../../../common/button/Button.svelte';
+import { MousePointerClick } from 'lucide-svelte';
+export let scripts;
+let itemPicker;
+const dispatch = createEventDispatcher();
+async function loadItems() {
+    return scripts;
+}
+</script>
+
+<ItemPicker
+	bind:this={itemPicker}
+	pickCallback={(path, summary) => {
+		dispatch('pick', { path, summary })
+	}}
+	itemName={'Script'}
+	extraField="summary"
+	noItemMessage={`There are no inline scripts.<br>
+	Click '<span class="font-semibold">Add script</span>' on the left panel to create one.`}
+	{loadItems}
+/>
+
+<Button
+	on:click={() => itemPicker?.openDrawer()}
+	btnClasses="w-24 truncate"
+	size="sm"
+	spacingSize="md"
+	variant="border"
+	color="light"
+>
+	<div class="flex justify-center flex-col items-center gap-2">
+		<MousePointerClick size={18} />
+
+		<span class="text-xs">Pick</span>
+	</div>
+</Button>

package/components/apps/editor/settingsPanel/PickInlineScript.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        scripts: {
+            summary: string;
+        }[];
+    };
+    events: {
+        pick: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type PickInlineScriptProps = typeof __propDef.props;
+export type PickInlineScriptEvents = typeof __propDef.events;
+export type PickInlineScriptSlots = typeof __propDef.slots;
+export default class PickInlineScript extends SvelteComponentTyped<PickInlineScriptProps, PickInlineScriptEvents, PickInlineScriptSlots> {
+}
+export {};

package/components/apps/editor/settingsPanel/Recompute.svelte

@@ -0,0 +1,46 @@
+<script>import Badge from '../../../common/badge/Badge.svelte';
+import { getContext } from 'svelte';
+import PanelSection from './common/PanelSection.svelte';
+export let recomputeIds = undefined;
+export let ownId;
+const { runnableComponents } = getContext('AppEditorContext');
+function onChange(event, id) {
+    if (event.currentTarget.checked) {
+        recomputeIds = [...(recomputeIds ?? []), id];
+    }
+    else {
+        recomputeIds = recomputeIds?.filter((id) => id !== id);
+    }
+}
+</script>
+
+<PanelSection title="Recompute">
+	{#if Object.keys($runnableComponents ?? {}).length > 0}
+		<table class="divide-y divide-gray-300 border w-full">
+			<thead class="bg-gray-50">
+				<tr>
+					<th scope="col" class="px-2 py-2 text-left text-xs font-medium text-gray-500">
+						Component
+					</th>
+					<th scope="col" class="px-4 py-2 text-left text-xs font-medium text-gray-500">
+						Recompute
+					</th>
+				</tr>
+			</thead>
+			<tbody>
+				{#each Object.keys($runnableComponents ?? {}).filter((id) => id !== ownId) as id}
+					<tr>
+						<td class="whitespace-nowrap px-4 py-2 text-xs">
+							<Badge color="blue">{id}</Badge>
+						</td>
+						<td class="relative whitespace-nowrap px-4 py-2 ">
+							<input type="checkbox" on:change={(event) => onChange(event, id)} />
+						</td>
+					</tr>
+				{/each}
+			</tbody>
+		</table>
+	{:else}
+		<div class="text-xs">No components to recompute</div>
+	{/if}
+</PanelSection>