windmill-components 1.82.12 → 1.83.0

package/common.d.ts

@@ -1,4 +1,4 @@
-import type { Script } from "./gen";
+import type { Script } from './gen';
 export type OwnerKind = 'group' | 'user' | 'folder';
 export type ActionKind = 'Create' | 'Update' | 'Delete' | 'Execute';
 export type SupportedLanguage = Script.language;
@@ -11,7 +11,7 @@ export interface SchemaProperty {
     contentEncoding?: 'base64' | 'binary';
     format?: string;
     items?: {
-        type?: 'string' | 'number' | 'bytes';
+        type?: 'string' | 'number' | 'bytes' | 'object';
         contentEncoding?: 'base64';
     };
     properties?: {

package/components/ArgInput.svelte

@@ -15,6 +15,9 @@ import Toggle from './Toggle.svelte';
 import Password from './Password.svelte';
 import NumberTypeNarrowing from './NumberTypeNarrowing.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';
 export let label = '';
 export let value;
 export let defaultValue = undefined;
@@ -68,7 +71,7 @@ $: {
 }
 export function evalValueToRaw() {
     if (value) {
-        rawValue = JSON.stringify(value, null, 4);
+        rawValue = JSON.stringify(value, null, 2);
     }
 }
 function fileChanged(e, cb) {
@@ -136,12 +139,13 @@ $: {
     }
 }
 $: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncoding);
+let redraw = 0;
 </script>
 
 <div class="flex flex-col w-full min-w-[250px]">
 	<div>
 		{#if displayHeader}
-			<FieldHeader {label} {required} {type} {contentEncoding} {format} {itemsType} />
+			<FieldHeader {label} {required} {type} {contentEncoding} {format} />
 		{/if}
 		{#if editableSchema}
 			<div class="p-2 my-1 text-xs border-solid border border-gray-400">
@@ -164,7 +168,7 @@ $: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncod
 								use:autosize
 								rows="1"
 								bind:value={description}
-								on:keydown|stopPropagation 
+								on:keydown|stopPropagation
 								placeholder="Field description"
 							/>
 							{#if type == 'string' && format != 'date-time'}
@@ -177,6 +181,7 @@ $: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncod
 								<select bind:value={itemsType}>
 									<option value={undefined}>No specific item type</option>
 									<option value={{ type: 'string' }}> Items are strings</option>
+									<option value={{ type: 'object' }}> Items are objects (JSON)</option>
 									<option value={{ type: 'number' }}>Items are numbers</option>
 									<option value={{ type: 'string', contentEncoding: 'base64' }}
 										>Items are bytes</option
@@ -222,7 +227,6 @@ $: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncod
 						bind:value
 						min={extra['min']}
 						max={extra['max']}
-						on:input={() => dispatch('input', { value, isRaw: true })}
 					/>
 				{/if}
 			{:else if inputCat == 'boolean'}
@@ -240,44 +244,46 @@ $: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncod
 					<span>&nbsp; Not set</span>
 				{/if}
 			{:else if inputCat == 'list'}
-				<div>
-					<div>
-						{#each value ?? [] as v, i}
-							<div class="flex flex-row max-w-md mt-1">
-								{#if itemsType?.type == 'number'}
-									<input autofocus={autofocus && i == 0} type="number" bind:value={v} />
-								{:else if itemsType?.type == 'string' && itemsType?.contentEncoding == 'base64'}
-									<input
-										autofocus={autofocus && i == 0}
-										type="file"
-										class="my-6"
-										on:change={(x) => fileChanged(x, (val) => (value[i] = val))}
-										multiple={false}
-									/>
-								{:else}
-									<input autofocus={autofocus && i == 0} type="text" bind:value={v} />
-								{/if}
-								<Button
-									variant="border"
-									color="red"
-									size="sm"
-									btnClasses="mx-6"
-									on:click={() => {
-										value = value.filter((el) => el != v)
-										if (value.length == 0) {
-											value = []
-										}
-									}}
-								>
-									<Icon data={faMinus} />
-								</Button>
-							</div>
-						{/each}
+				<div class="w-full">
+					<div class="w-full">
+						{#key redraw}
+							{#if Array.isArray(value)}
+								{#each value ?? [] as v, i}
+									<div class="flex max-w-md mt-1 w-full items-center">
+										{#if itemsType?.type == 'number'}
+											<input type="number" bind:value={v} />
+										{:else if itemsType?.type == 'string' && itemsType?.contentEncoding == 'base64'}
+											<input
+												type="file"
+												class="my-6"
+												on:change={(x) => fileChanged(x, (val) => (value[i] = val))}
+												multiple={false}
+											/>
+										{:else if itemsType?.type == 'object'}
+											<JsonEditor code={JSON.stringify(v, null, 2)} bind:value={v} />
+										{:else}
+											<input type="text" bind:value={v} />
+										{/if}
+										<button
+											transition:fade|local={{ duration: 100 }}
+											class="rounded-full p-1 bg-white/60 duration-200 hover:bg-gray-200"
+											aria-label="Clear"
+											on:click={() => {
+												value.splice(i, 1)
+												redraw += 1
+											}}
+										>
+											<X size={14} />
+										</button>
+									</div>
+								{/each}
+							{/if}
+						{/key}
 					</div>
 					<Button
 						variant="border"
-						color="blue"
-						size="sm"
+						color="dark"
+						size="xs"
 						btnClasses="mt-1"
 						on:click={() => {
 							if (value == undefined || !Array.isArray(value)) {
@@ -289,9 +295,6 @@ $: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncod
 						<Icon data={faPlus} class="mr-2" />
 						Add item
 					</Button>
-					<span class="ml-2">
-						{(value ?? []).length} item{(value ?? []).length > 1 ? 's' : ''}
-					</span>
 				</div>
 			{:else if inputCat == 'resource-object'}
 				<ObjectResourceInput {format} bind:value />
@@ -304,25 +307,16 @@ $: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncod
 							bind:args={value}
 						/>
 					</div>
+				{:else if disabled}
+					<textarea disabled />
 				{:else}
-					<textarea
-						bind:this={el}
+					<JsonEditor
+						bind:editor
 						on:focus={(e) => {
 							dispatch('focus')
 						}}
-						{autofocus}
-						{disabled}
-						use:autosize
-						on:keydown|stopPropagation 
-						style="max-height: {maxHeight}"
-						on:input={() => {
-							dispatch('input', { rawValue: value, isRaw: false })
-						}}
-						class="col-span-10 {valid
-							? ''
-							: 'border border-red-700 border-opacity-30 focus:border-red-700 focus:border-opacity-30 bg-red-100'}"
-						placeholder={defaultValue ? JSON.stringify(defaultValue, null, 4) : ''}
-						bind:value={rawValue}
+						code={rawValue}
+						bind:value
 					/>
 				{/if}
 			{:else if inputCat == 'enum'}
@@ -346,13 +340,9 @@ $: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncod
 						on:focus={(e) => {
 							dispatch('focus')
 						}}
-						on:blur={() => dispatch('blur')}
 						bind:this={editor}
 						lang={inputCat}
 						bind:code={value}
-						on:change={async () => {
-							dispatch('input', { rawValue: value, isRaw: false })
-						}}
 						autoHeight
 					/>
 				</div>
@@ -384,9 +374,8 @@ $: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncod
 								on:focus={(e) => {
 									dispatch('focus')
 								}}
-								on:blur={() => dispatch('blur')}
 								use:autosize
-								on:keydown|stopPropagation 
+								on:keydown|stopPropagation
 								type="text"
 								{disabled}
 								class="col-span-10 {valid
@@ -394,9 +383,6 @@ $: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncod
 									: 'border border-red-700 border-opacity-30 focus:border-red-700 focus:border-opacity-30 bg-red-100'}"
 								placeholder={defaultValue ?? ''}
 								bind:value
-								on:input={() => {
-									dispatch('input', { rawValue: value, isRaw: false })
-								}}
 							/>
 							{#if itemPicker}
 								<div class="ml-1 relative">

package/components/ArgInput.svelte.d.ts

@@ -20,7 +20,7 @@ declare const __propDef: {
         disabled?: boolean | undefined;
         editableSchema?: boolean | undefined;
         itemsType?: {
-            type?: "string" | "number" | "bytes" | undefined;
+            type?: "string" | "number" | "object" | "bytes" | undefined;
             contentEncoding?: "base64" | undefined;
         } | undefined;
         displayHeader?: boolean | undefined;
@@ -42,8 +42,6 @@ declare const __propDef: {
     events: {
         keydown: KeyboardEvent;
         focus: CustomEvent<any>;
-        input: CustomEvent<any>;
-        blur: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/components/DisplayResult.svelte

@@ -75,23 +75,6 @@ let payload = '';
 let jsonViewer;
 </script>
 
-<Portal>
-	<Drawer bind:this={jsonViewer} size="900px">
-		<DrawerContent title="Expanded Result" on:close={jsonViewer.closeDrawer}>
-			<svelte:fragment slot="actions">
-				<Button
-					on:click={() => copyToClipboard(JSON.stringify(result, null, 4))}
-					color="light"
-					size="xs"
-				>
-					<div class="flex gap-2 items-center">Copy to clipboard <ClipboardCopy /> </div>
-				</Button>
-			</svelte:fragment>
-			<Highlight language={json} code={JSON.stringify(result, null, 4).replace(/\\n/g, '\n')} />
-		</DrawerContent>
-	</Drawer>
-</Portal>
-
 <div class="inline-highlight">
 	{#if result != undefined}
 		{#if resultKind && resultKind != 'json'}
@@ -237,3 +220,20 @@ let jsonViewer;
 		<div class="text-gray-500 text-sm">No result: {JSON.stringify(result)}</div>
 	{/if}
 </div>
+
+<Portal>
+	<Drawer bind:this={jsonViewer} size="900px">
+		<DrawerContent title="Expanded Result" on:close={jsonViewer.closeDrawer}>
+			<svelte:fragment slot="actions">
+				<Button
+					on:click={() => copyToClipboard(JSON.stringify(result, null, 4))}
+					color="light"
+					size="xs"
+				>
+					<div class="flex gap-2 items-center">Copy to clipboard <ClipboardCopy /> </div>
+				</Button>
+			</svelte:fragment>
+			<Highlight language={json} code={JSON.stringify(result, null, 4).replace(/\\n/g, '\n')} />
+		</DrawerContent>
+	</Drawer>
+</Portal>

package/components/Editor.svelte

@@ -394,9 +394,6 @@ async function loadMonaco() {
             reloadWebsocket();
         }
     });
-    editor.onDidBlurEditorText(() => {
-        dispatch('blur');
-    });
     reloadWebsocket();
     return () => {
         try {

package/components/Editor.svelte.d.ts

@@ -30,7 +30,6 @@ declare const __propDef: {
     events: {
         change: CustomEvent<any>;
         focus: CustomEvent<any>;
-        blur: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/components/FieldHeader.svelte

@@ -4,7 +4,6 @@ export let format = '';
 export let contentEncoding = '';
 export let type = undefined;
 export let required = false;
-export let itemsType = undefined;
 </script>
 
 <div class="inline-flex flex-row items-center truncated">

package/components/FieldHeader.svelte.d.ts

@@ -6,10 +6,6 @@ declare const __propDef: {
         contentEncoding?: string | undefined;
         type?: string | undefined;
         required?: boolean | undefined;
-        itemsType?: {
-            type?: "string" | "number" | "bytes" | undefined;
-            contentEncoding?: "base64" | undefined;
-        } | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/FlowBuilder.svelte

@@ -114,6 +114,7 @@ async function saveFlow(leave) {
         goto(`/flows/get/${$flowStore.path}?workspace_id=${$workspaceStore}`);
     }
     else if (initialPath !== $flowStore.path) {
+        initialPath = $flowStore.path;
         goto(`/flows/edit/${$flowStore.path}?workspace_id=${$workspaceStore}`);
     }
 }

package/components/FlowStatusViewer.svelte

@@ -18,6 +18,7 @@ import SimpleEditor from './SimpleEditor.svelte';
 import { Loader2 } from 'lucide-svelte';
 const dispatch = createEventDispatcher();
 export let jobId;
+export let workspaceId = undefined;
 export let flowState = undefined;
 export let flowJobIds = undefined;
 export let job = undefined;
@@ -73,7 +74,7 @@ function updateInnerModules() {
         else if (mod.type === FlowStatusModule.type.WAITING_FOR_EXECUTOR &&
             localFlowModuleStates[mod.id ?? '']?.scheduled_for == undefined) {
             JobService.getJob({
-                workspace: $workspaceStore ?? '',
+                workspace: workspaceId ?? $workspaceStore ?? '',
                 id: mod.job ?? ''
             }).then((job) => {
                 localFlowModuleStates[mod.id ?? ''] = {
@@ -92,7 +93,7 @@ async function loadJobInProgress() {
     if (jobId != '00000000-0000-0000-0000-000000000000') {
         try {
             const newJob = await JobService.getJob({
-                workspace: $workspaceStore ?? '',
+                workspace: workspaceId ?? $workspaceStore ?? '',
                 id: jobId ?? ''
             });
             if (JSON.stringify(newJob) !== JSON.stringify(job)) {
@@ -124,7 +125,7 @@ onDestroy(() => {
     timeout && clearTimeout(timeout);
 });
 async function loadOwner(path) {
-    is_owner = await isOwner(path, $userStore, $workspaceStore);
+    is_owner = await isOwner(path, $userStore, workspaceId ?? $workspaceStore);
 }
 let selected = 'graph';
 let payload = '"a test payload in json"';
@@ -170,7 +171,7 @@ function isSuccess(arg) {
 											variant="border"
 											on:click={async () =>
 												await JobService.resumeSuspendedFlowAsOwner({
-													workspace: $workspaceStore ?? '',
+													workspace: workspaceId ?? $workspaceStore ?? '',
 													id: job?.id ?? '',
 													requestBody: JSON.parse(payload)
 												})}
@@ -268,6 +269,7 @@ function isSuccess(arg) {
 					</Button>
 					<div class="border p-6" class:hidden={forloop_selected != loopJobId}>
 						<svelte:self
+							{workspaceId}
 							bind:suspend_status
 							bind:retry_status
 							bind:flowState
@@ -342,6 +344,7 @@ function isSuccess(arg) {
 						<li class="w-full border border-gray-600 p-6 space-y-2 bg-blue-50/50">
 							{#if [FlowStatusModule.type.IN_PROGRESS, FlowStatusModule.type.SUCCESS, FlowStatusModule.type.FAILURE].includes(mod.type)}
 								<svelte:self
+									{workspaceId}
 									bind:suspend_status
 									bind:retry_status
 									bind:flowState

package/components/FlowStatusViewer.svelte.d.ts

@@ -5,6 +5,7 @@ import { type GraphModuleState } from './graph';
 declare const __propDef: {
     props: {
         jobId: string;
+        workspaceId?: string | undefined;
         flowState?: FlowState | undefined;
         flowJobIds?: {
             moduleId: string;

package/components/FlowViewer.svelte

@@ -52,7 +52,6 @@ function toAny(x) {
 									type={toAny(v)?.type}
 									contentEncoding={toAny(v)?.contentEncoding}
 									format={toAny(v)?.format}
-									itemsType={toAny(v)?.itemsType}
 								/><span class="ml-4 mt-2 text-xs"
 									>{toAny(v)?.default != undefined
 										? 'default: ' + JSON.stringify(toAny(v)?.default)

package/components/InputTransformForm.svelte

@@ -104,7 +104,6 @@ $: schema.properties[argName].default && setDefaultCode();
 				contentEncoding={schema.properties[argName].contentEncoding}
 				required={schema.required.includes(argName)}
 				type={schema.properties[argName].type}
-				itemsType={schema.properties[argName].items}
 			/>
 
 			{#if isStaticTemplate(inputCat)}

package/components/LightweightArgInput.svelte

@@ -122,7 +122,7 @@ $: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncod
 <div class="flex flex-col w-full min-w-[250px]">
 	<div>
 		{#if displayHeader}
-			<FieldHeader {label} {required} {type} {contentEncoding} {format} {itemsType} />
+			<FieldHeader {label} {required} {type} {contentEncoding} {format} />
 		{/if}
 
 		{#if description}
@@ -155,7 +155,6 @@ $: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncod
 						bind:value
 						min={extra['min']}
 						max={extra['max']}
-						on:input={() => dispatch('input', { value, isRaw: true })}
 					/>
 				{/if}
 			{:else if inputCat == 'boolean'}
@@ -242,9 +241,6 @@ $: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncod
 						}}
 						use:autosize
 						style="max-height: {maxHeight}"
-						on:input={() => {
-							dispatch('input', { rawValue: value, isRaw: false })
-						}}
 						class="col-span-10 {valid
 							? ''
 							: 'border border-red-700 border-opacity-30 focus:border-red-700 focus:border-opacity-30 bg-red-100'}"
@@ -289,7 +285,6 @@ $: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncod
 							on:focus={(e) => {
 								dispatch('focus')
 							}}
-							on:blur={() => dispatch('blur')}
 							use:autosize
 							type="text"
 							class="col-span-10 {valid
@@ -297,9 +292,6 @@ $: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncod
 								: 'border border-red-700 border-opacity-30 focus:border-red-700 focus:border-opacity-30 bg-red-100'}"
 							placeholder={defaultValue ?? ''}
 							bind:value
-							on:input={() => {
-								dispatch('input', { rawValue: value, isRaw: false })
-							}}
 						/>
 					</div>
 				</div>

package/components/LightweightArgInput.svelte.d.ts

@@ -15,7 +15,7 @@ declare const __propDef: {
         maxRows?: number | undefined;
         enum_?: string[] | undefined;
         itemsType?: {
-            type?: "string" | "number" | "bytes" | undefined;
+            type?: "string" | "number" | "object" | "bytes" | undefined;
             contentEncoding?: "base64" | undefined;
         } | undefined;
         displayHeader?: boolean | undefined;
@@ -28,8 +28,6 @@ declare const __propDef: {
     };
     events: {
         focus: CustomEvent<any>;
-        input: CustomEvent<any>;
-        blur: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/components/SimpleEditor.svelte

@@ -146,7 +146,6 @@ async function loadMonaco() {
     });
     editor.onDidBlurEditorText(() => {
         code = getCode();
-        dispatch('blur');
     });
     if (lang == 'javascript') {
         const stdLib = { content: libStdContent, filePath: 'es5.d.ts' };

package/components/SimpleEditor.svelte.d.ts

@@ -21,7 +21,6 @@ declare const __propDef: {
     events: {
         change: CustomEvent<any>;
         focus: CustomEvent<any>;
-        blur: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/components/TemplateEditor.svelte

@@ -495,7 +495,6 @@ async function loadMonaco() {
     });
     editor.onDidBlurEditorText(() => {
         code = getCode();
-        dispatch('blur');
     });
 }
 export function focus() {

package/components/apps/components/display/AppDisplayComponent.svelte

@@ -19,22 +19,28 @@ const outputs = initOutput($worldStore, id, {
 </script>
 
 <RunnableWrapper {outputs} {render} {componentInput} {id} bind:initializing bind:result>
-	<div
-		class={twMerge(
-			'w-full border-b px-2 text-xs p-1 font-semibold bg-gray-500 text-white rounded-t-sm',
-			$app.css?.['displaycomponent']?.['header']?.class,
-			customCss?.header?.class
-		)}
-	>
-		Results
-	</div>
-	<div
-		class={twMerge(
-			'p-2',
-			$app.css?.['displaycomponent']?.['container']?.class,
-			customCss?.container?.class
-		)}
-	>
-		<DisplayResult {result} {requireHtmlApproval} />
+	<div class="flex flex-col w-full h-full">
+		<div
+			class={twMerge(
+				'w-full border-b px-2 text-xs p-1 font-semibold bg-gray-500 text-white rounded-t-sm',
+				$app.css?.['displaycomponent']?.['header']?.class,
+				customCss?.header?.class
+			)}
+		>
+			Results
+		</div>
+		<div
+			style={twMerge(
+				$app.css?.['displaycomponent']?.['container']?.style,
+				customCss?.container?.style
+			)}
+			class={twMerge(
+				'p-2 grow',
+				$app.css?.['displaycomponent']?.['container']?.class,
+				customCss?.container?.class
+			)}
+		>
+			<DisplayResult {result} {requireHtmlApproval} />
+		</div>
 	</div>
 </RunnableWrapper>

package/components/apps/components/display/AppHtml.svelte

@@ -7,7 +7,7 @@ export let componentInput;
 export let initializing = undefined;
 export let customCss = undefined;
 export let render;
-const { app, worldStore } = getContext('AppViewerContext');
+const { app, worldStore, selectedComponent } = getContext('AppViewerContext');
 const outputs = initOutput($worldStore, id, {
     result: undefined,
     loading: false
@@ -26,6 +26,10 @@ $: css = concatCustomCss($app.css?.htmlcomponent, customCss);
 	bind:clientHeight={h}
 	bind:clientWidth={w}
 >
+	<button
+		class="absolute bottom-0 left-0 text-xs border px-2 py-0.5 bg-white/80"
+		on:click={() => ($selectedComponent = [id])}>Select</button
+	>
 	<RunnableWrapper
 		{outputs}
 		{render}
@@ -46,5 +50,7 @@ $: css = concatCustomCss($app.css?.htmlcomponent, customCss);
 					: 'No html'}
 			/>
 		{/key}
+		<!-- svelte-ignore a11y-click-events-have-key-events -->
+		<div on:click|stopPropagation class="absolute top-0 h-full w-full" />
 	</RunnableWrapper>
 </div>

package/components/apps/components/display/AppHtml.svelte.d.ts

@@ -10,6 +10,8 @@ declare const __propDef: {
         render: boolean;
     };
     events: {
+        click: MouseEvent;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};

package/components/apps/components/display/PlotlyHtml.svelte

@@ -1,12 +1,15 @@
 <script>import { getContext, onMount } from 'svelte';
-import { initOutput } from '../../editor/appUtils';
+import { initConfig, initOutput } from '../../editor/appUtils';
+import { components } from '../../editor/component';
+import ResolveConfig from '../helpers/ResolveConfig.svelte';
 import RunnableWrapper from '../helpers/RunnableWrapper.svelte';
 export let id;
 export let componentInput;
-// export let configuration: Record<string, AppInput>
+export let configuration;
 export let initializing = undefined;
 export let render;
 const { worldStore } = getContext('AppViewerContext');
+let resolvedConfig = initConfig(components['plotlycomponent'].initialData.configuration, configuration);
 const outputs = initOutput($worldStore, id, {
     result: undefined,
     loading: false
@@ -27,9 +30,23 @@ $: Plotly &&
     divEl &&
     h &&
     w &&
-    Plotly.newPlot(divEl, Array.isArray(result) ? result : [result], { width: w, height: h, margin: { l: 50, r: 40, b: 40, t: 40, pad: 4 } }, { responsive: true, displayModeBar: false });
+    Plotly.newPlot(divEl, Array.isArray(result) ? result : [result], {
+        width: w,
+        height: h,
+        margin: { l: 50, r: 40, b: 40, t: 40, pad: 4 },
+        ...resolvedConfig.layout
+    }, { responsive: true, displayModeBar: false });
 </script>
 
+{#each Object.keys(components['plotlycomponent'].initialData.configuration) as key (key)}
+	<ResolveConfig
+		{id}
+		{key}
+		bind:resolvedConfig={resolvedConfig[key]}
+		configuration={configuration[key]}
+	/>
+{/each}
+
 <div class="w-full h-full" bind:clientHeight={h} bind:clientWidth={w}>
 	<RunnableWrapper {outputs} {render} {componentInput} {id} bind:initializing bind:result>
 		<div on:pointerdown bind:this={divEl} />

package/components/apps/components/display/PlotlyHtml.svelte.d.ts

@@ -1,9 +1,11 @@
 import { SvelteComponentTyped } from "svelte";
 import type { AppInput } from '../../inputType';
+import type { RichConfigurations } from '../../types';
 declare const __propDef: {
     props: {
         id: string;
         componentInput: AppInput | undefined;
+        configuration: RichConfigurations;
         initializing?: boolean | undefined;
         render: boolean;
     };