windmill-components 1.60.3 → 1.83.1

package/components/apps/components/display/AppPdf.svelte

@@ -0,0 +1,310 @@
+<script>import { getContext } from 'svelte';
+import { twMerge } from 'tailwind-merge';
+import { getDocument } from 'pdfjs-dist';
+import 'pdfjs-dist/build/pdf.worker.entry';
+import { concatCustomCss } from '../../utils';
+import InputValue from '../helpers/InputValue.svelte';
+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';
+export let id;
+export let configuration;
+export let customCss = undefined;
+export let render;
+const { app, mode, worldStore, selectedComponent } = getContext('AppViewerContext');
+const outputs = initOutput($worldStore, id, {
+    loading: false
+});
+let source = undefined;
+let wrapper = undefined;
+let error = undefined;
+let doc = undefined;
+let pages = [];
+let zoom = undefined;
+let controlsWidth = undefined;
+let controlsHeight = undefined;
+let pageNumber = 1;
+$: if (source == '') {
+    resetDoc();
+    error = 'Set the "Source" attribute of the PDF component';
+}
+$: zoom && handleZoom();
+$: wrapper && loadDocument(source);
+$: wideView = controlsWidth && controlsWidth > 450;
+async function resetDoc() {
+    await doc?.destroy();
+    doc = undefined;
+}
+function handleZoom() {
+    if (zoom && wrapper) {
+        try {
+            renderPdf(false);
+        }
+        catch (err) {
+            error = err?.message ?? (typeof err === 'string' ? err : 'Error loading PDF');
+        }
+    }
+}
+async function loadDocument(src) {
+    if (!src) {
+        return;
+    }
+    try {
+        outputs.loading.set(true);
+        await resetDoc();
+        doc = await getDocument(src).promise;
+        pageNumber = 1;
+        await renderPdf(false, false);
+        error = undefined;
+    }
+    catch (err) {
+        await resetDoc();
+        error = err?.message ?? (typeof err === 'string' ? err : 'Error loading PDF');
+        console.log(err);
+    }
+    outputs.loading.set(false);
+}
+async function renderPdf(scaleToViewport = true, resizing = false) {
+    if (!(doc && wrapper && zoom)) {
+        return;
+    }
+    const scrollPosition = wrapper.scrollTop / wrapper.scrollHeight;
+    if (!resizing) {
+        pages = [];
+    }
+    const nextPages = [];
+    const nextChildren = [];
+    const { width } = wrapper.getBoundingClientRect();
+    let scale = zoom / 100;
+    if (scaleToViewport) {
+        const firstViewport = (await doc.getPage(1)).getViewport({ scale: 1 });
+        // Rounded to the first integer that is a multiple of 10 and is less than the viewport width
+        zoom = Math.floor((width / firstViewport.width) * 10) * 10;
+        scale = zoom / 100;
+    }
+    for (let i = 0; i < doc.numPages; i++) {
+        const canvas = document.createElement('canvas');
+        const canvasContext = canvas.getContext('2d');
+        if (!canvasContext) {
+            console.warn('Could not get canvas context for PDF page ' + i);
+            continue;
+        }
+        const page = await doc.getPage(i + 1);
+        nextPages.push(page);
+        const viewport = page.getViewport({ scale });
+        canvas.height = viewport.height;
+        canvas.width = viewport.width;
+        canvas.classList.add('mx-auto', 'my-4', 'shadow-sm');
+        await page.render({ canvasContext, viewport }).promise;
+        nextChildren.push(canvas);
+    }
+    while (wrapper.firstChild) {
+        wrapper.removeChild(wrapper.firstChild);
+    }
+    pages = [...nextPages];
+    wrapper.append(...nextChildren);
+    wrapper.scrollTo({
+        top: scrollPosition * wrapper.scrollHeight
+    });
+}
+function scrollToPage(page) {
+    page = pageNumber = minMax(page, 1, pages.length);
+    const offset = wrapper?.children.item(page - 1)?.offsetTop;
+    if (!offset) {
+        return;
+    }
+    //                       controlsHeight + 2px border + half of the top margin
+    const padding = (controlsHeight ? controlsHeight + 2 : 0) + 8;
+    wrapper?.scrollTo({
+        top: offset - padding
+    });
+}
+const throttledScroll = throttle(onScroll, 400);
+function onScroll() {
+    if (!wrapper) {
+        return;
+    }
+    const THRESHOLD = 50;
+    let scrollPosition = wrapper.scrollTop + THRESHOLD + (controlsHeight ?? 0);
+    let page = 1;
+    for (let i = 0; i < pages.length; i++) {
+        const canvas = wrapper.children.item(i);
+        if (scrollPosition < (canvas?.offsetTop ?? wrapper.scrollHeight)) {
+            break;
+        }
+        page = i + 1;
+    }
+    pageNumber = page;
+}
+function syncZoomValue() {
+    const gridItem = findGridItem($app, id);
+    //@ts-ignore
+    if (gridItem && gridItem.data.configuration.zoom.value !== zoom) {
+        //@ts-ignore
+        gridItem.data.configuration.zoom.value = zoom;
+    }
+    $app = $app;
+}
+async function downloadPdf() {
+    if (!doc) {
+        return;
+    }
+    const data = await doc.saveDocument();
+    const url = URL.createObjectURL(new Blob([data.buffer]));
+    const link = document.createElement('a');
+    link.href = url;
+    link.download = 'document.pdf';
+    link.click();
+    URL.revokeObjectURL(url);
+}
+function minMax(value, min, max) {
+    if (value < min) {
+        return min;
+    }
+    else if (value > max) {
+        return max;
+    }
+    return value;
+}
+$: css = concatCustomCss($app.css?.pdfcomponent, customCss);
+</script>
+
+<InputValue {id} input={configuration.source} bind:value={source} />
+<InputValue {id} input={configuration.zoom} bind:value={zoom} />
+
+{#if render}
+	<div class="relative w-full h-full bg-gray-100">
+		{#if source && zoom}
+			{#if pages?.length}
+				<div
+					bind:clientWidth={controlsWidth}
+					bind:clientHeight={controlsHeight}
+					class="fixed flex {$mode !== 'preview'
+						? 'w-[calc(100%-2px)] top-[1px]'
+						: 'w-full top-0'} {wideView
+						? 'justify-center gap-14'
+						: '!justify-between'} overflow-x-auto bg-white border mx-auto py-1"
+				>
+					<div class="flex justify-start items-center px-2 text-gray-600 text-sm">
+						<Button
+							on:click={() => zoom && (zoom -= 10)}
+							disabled={!doc}
+							size="xs"
+							color="light"
+							variant="border"
+							title="Zoom out"
+							aria-label="Zoom out"
+							btnClasses="!rounded-r-none !px-2"
+						>
+							<ZoomOut size={16} />
+						</Button>
+						{#if wideView}
+							<Button
+								on:click={() => (zoom = 100)}
+								disabled={!doc}
+								size="xs"
+								color="light"
+								variant="border"
+								title="Reset zoom"
+								aria-label="Reset zoom"
+								btnClasses="!w-[50px] !font-medium !rounded-none !border-l-0 !px-1"
+							>
+								{zoom.toFixed(0)}%
+							</Button>
+						{/if}
+						<Button
+							on:click={() => renderPdf(true, true)}
+							disabled={!doc}
+							size="xs"
+							color="light"
+							variant="border"
+							title="Scale to viewport"
+							aria-label="Scale to viewport"
+							btnClasses="!rounded-none !border-l-0 !px-2"
+						>
+							<MoveHorizontal size={16} />
+						</Button>
+						<Button
+							on:click={() => zoom && (zoom += 10)}
+							disabled={!doc}
+							size="xs"
+							color="light"
+							variant="border"
+							title="Zoom in"
+							aria-label="Zoom in"
+							btnClasses="!rounded-l-none !px-2 !border-l-0"
+						>
+							<ZoomIn size={16} />
+						</Button>
+					</div>
+					<div class="center-center px-2 text-gray-600 text-sm">
+						<input
+							on:input={({ currentTarget }) => {
+								scrollToPage(currentTarget.valueAsNumber)
+							}}
+							min="1"
+							max={pages.length}
+							value={pageNumber}
+							disabled={!doc}
+							type="number"
+							class="!w-[45px] !px-1 !py-0"
+						/>
+						<span class="whitespace-nowrap pl-1">
+							/ {pages.length}
+						</span>
+					</div>
+					<div class="flex justify-end items-center px-2 text-gray-600 text-sm">
+						<Button
+							on:click={downloadPdf}
+							disabled={!doc}
+							size="xs"
+							color="light"
+							variant="border"
+							title="Download PDF"
+							aria-label="Download PDF"
+							btnClasses="!font-medium !px-2"
+						>
+							{#if wideView}
+								<span class="mr-1"> Download </span>
+							{/if}
+							<Download size={16} />
+						</Button>
+					</div>
+				</div>
+			{:else}
+				<div
+					out:fade={{ duration: 200 }}
+					class="absolute inset-0 center-center flex-col text-center text-sm bg-white text-gray-600"
+				>
+					<Loader2 class="animate-spin mb-2" />
+					Loading PDF
+				</div>
+			{/if}
+			<div
+				bind:this={wrapper}
+				on:scroll={throttledScroll}
+				class={twMerge('w-full h-full overflow-auto', css?.container?.class ?? '', 'bg-gray-100')}
+				style="padding-top: {controlsHeight ?? 0}px; {css?.container?.style ?? ''}"
+			/>
+		{/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 
+			hover:bg-indigo-500 focus:bg-indigo-500 duration-200 text-white text-2xs"
+				on:click={() => syncZoomValue()}
+			>
+				Sync zoom value
+			</button>
+		{/if}
+		{#if error}
+			<div
+				class="absolute inset-0 z-20 center-center 
+		bg-gray-100 text-center text-gray-600 text-sm"
+			>
+				{error}
+			</div>
+		{/if}
+	</div>
+{/if}

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

@@ -0,0 +1,21 @@
+import { SvelteComponentTyped } from "svelte";
+import 'pdfjs-dist/build/pdf.worker.entry';
+import type { ComponentCustomCSS, RichConfigurations } from '../../types';
+declare const __propDef: {
+    props: {
+        id: string;
+        configuration: RichConfigurations;
+        customCss?: ComponentCustomCSS<'pdfcomponent'> | undefined;
+        render: boolean;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type AppPdfProps = typeof __propDef.props;
+export type AppPdfEvents = typeof __propDef.events;
+export type AppPdfSlots = typeof __propDef.slots;
+export default class AppPdf extends SvelteComponentTyped<AppPdfProps, AppPdfEvents, AppPdfSlots> {
+}
+export {};

package/components/apps/components/{dataDisplay → display}/AppPieChart.svelte

@@ -2,10 +2,20 @@
 import { Chart as ChartJS, Title, Tooltip, Legend, LineElement, LinearScale, PointElement, CategoryScale, ArcElement } from 'chart.js';
 import RunnableWrapper from '../helpers/RunnableWrapper.svelte';
 import InputValue from '../helpers/InputValue.svelte';
+import { concatCustomCss } from '../../utils';
+import { getContext } from 'svelte';
+import { initOutput } from '../../editor/appUtils';
 export let id;
 export let componentInput;
 export let configuration;
-export const staticOutputs = ['loading', 'result'];
+export let initializing = undefined;
+export let customCss = undefined;
+export let render;
+const { app, worldStore } = getContext('AppViewerContext');
+const outputs = initOutput($worldStore, id, {
+    result: undefined,
+    loading: false
+});
 ChartJS.register(Title, Tooltip, Legend, LineElement, LinearScale, PointElement, CategoryScale, ArcElement);
 let result = undefined;
 let theme = 'theme1';
@@ -31,17 +41,20 @@ $: data = {
         }
     ]
 };
+$: css = concatCustomCss($app.css?.piechartcomponent, customCss);
 </script>
 
 <InputValue {id} input={configuration.theme} bind:value={theme} />
 <InputValue {id} input={configuration.doughnutStyle} bind:value={doughnut} />
 
-<RunnableWrapper flexWrap autoRefresh bind:componentInput {id} bind:result>
-	{#if result}
-		{#if doughnut}
-			<Doughnut {data} {options} />
-		{:else}
-			<Pie {data} {options} />
+<RunnableWrapper {outputs} {render} autoRefresh {componentInput} {id} bind:initializing bind:result>
+	<div class="w-full h-full {css?.container?.class ?? ''}" style={css?.container?.style ?? ''}>
+		{#if result}
+			{#if doughnut}
+				<Doughnut {data} {options} />
+			{:else}
+				<Pie {data} {options} />
+			{/if}
 		{/if}
-	{/if}
+	</div>
 </RunnableWrapper>

package/components/apps/components/{dataDisplay → display}/AppPieChart.svelte.d.ts

@@ -1,11 +1,14 @@
 import { SvelteComponentTyped } from "svelte";
 import type { AppInput } from '../../inputType';
+import type { ComponentCustomCSS, RichConfigurations } from '../../types';
 declare const __propDef: {
     props: {
         id: string;
         componentInput: AppInput | undefined;
-        configuration: Record<string, AppInput>;
-        staticOutputs?: string[] | undefined;
+        configuration: RichConfigurations;
+        initializing?: boolean | undefined;
+        customCss?: ComponentCustomCSS<'piechartcomponent'> | undefined;
+        render: boolean;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -16,6 +19,5 @@ export type AppPieChartProps = typeof __propDef.props;
 export type AppPieChartEvents = typeof __propDef.events;
 export type AppPieChartSlots = typeof __propDef.slots;
 export default class AppPieChart extends SvelteComponentTyped<AppPieChartProps, AppPieChartEvents, AppPieChartSlots> {
-    get staticOutputs(): string[];
 }
 export {};

package/components/apps/components/{dataDisplay → display}/AppScatterChart.svelte

@@ -3,12 +3,22 @@ import { Chart as ChartJS, Title, Tooltip, Legend, LineElement, LinearScale, Poi
 import RunnableWrapper from '../helpers/RunnableWrapper.svelte';
 import Scatter from 'svelte-chartjs/Scatter.svelte';
 import InputValue from '../helpers/InputValue.svelte';
+import { concatCustomCss } from '../../utils';
+import { getContext } from 'svelte';
+import { initOutput } from '../../editor/appUtils';
 export let id;
 export let componentInput;
 export let configuration;
+export let initializing = undefined;
+export let customCss = undefined;
+export let render;
 let zoomable = false;
 let pannable = false;
-export const staticOutputs = ['loading', 'result'];
+const { app, worldStore } = getContext('AppViewerContext');
+const outputs = initOutput($worldStore, id, {
+    result: undefined,
+    loading: false
+});
 ChartJS.register(Title, Tooltip, Legend, LineElement, LinearScale, PointElement, CategoryScale, BarElement, zoomPlugin);
 let result = undefined;
 $: options = {
@@ -34,13 +44,16 @@ $: options = {
 $: data = {
     datasets: result ?? []
 };
+$: css = concatCustomCss($app.css?.scatterchartcomponent, customCss);
 </script>
 
 <InputValue {id} input={configuration.zoomable} bind:value={zoomable} />
 <InputValue {id} input={configuration.pannable} bind:value={pannable} />
 
-<RunnableWrapper flexWrap autoRefresh bind:componentInput {id} bind:result>
-	{#if result}
-		<Scatter {data} {options} />
-	{/if}
+<RunnableWrapper {outputs} {render} autoRefresh {componentInput} {id} bind:initializing bind:result>
+	<div class="w-full h-full {css?.container?.class ?? ''}" style={css?.container?.style ?? ''}>
+		{#if result}
+			<Scatter {data} {options} />
+		{/if}
+	</div>
 </RunnableWrapper>

package/components/apps/components/{dataDisplay → display}/AppScatterChart.svelte.d.ts

@@ -1,11 +1,14 @@
 import { SvelteComponentTyped } from "svelte";
 import type { AppInput } from '../../inputType';
+import type { ComponentCustomCSS, RichConfigurations } from '../../types';
 declare const __propDef: {
     props: {
         id: string;
         componentInput: AppInput | undefined;
-        configuration: Record<string, AppInput>;
-        staticOutputs?: string[] | undefined;
+        configuration: RichConfigurations;
+        initializing?: boolean | undefined;
+        customCss?: ComponentCustomCSS<'scatterchartcomponent'> | undefined;
+        render: boolean;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -16,6 +19,5 @@ export type AppScatterChartProps = typeof __propDef.props;
 export type AppScatterChartEvents = typeof __propDef.events;
 export type AppScatterChartSlots = typeof __propDef.slots;
 export default class AppScatterChart extends SvelteComponentTyped<AppScatterChartProps, AppScatterChartEvents, AppScatterChartSlots> {
-    get staticOutputs(): string[];
 }
 export {};

package/components/apps/components/display/AppText.svelte

@@ -0,0 +1,131 @@
+<script>import { Clipboard } from 'lucide-svelte';
+import { copyToClipboard } from '../../../../utils';
+import Button from '../../../common/button/Button.svelte';
+import Popover from '../../../Popover.svelte';
+import AlignWrapper from '../helpers/AlignWrapper.svelte';
+import RunnableWrapper from '../helpers/RunnableWrapper.svelte';
+import { twMerge } from 'tailwind-merge';
+import { getContext } from 'svelte';
+import { initConfig, initOutput } from '../../editor/appUtils';
+import Tooltip from '../../../Tooltip.svelte';
+import { get } from 'svelte/store';
+import ResolveConfig from '../helpers/ResolveConfig.svelte';
+import { components } from '../../editor/component';
+import { isCodeInjection } from '../../../flows/utils';
+export let id;
+export let componentInput;
+export let horizontalAlignment = 'left';
+export let verticalAlignment = undefined;
+export let configuration;
+export let initializing = undefined;
+export let customCss = undefined;
+export let render;
+let resolvedConfig = initConfig(components['textcomponent'].initialData.configuration, configuration);
+const { app, worldStore, mode } = getContext('AppViewerContext');
+const editorcontext = getContext('AppEditorContext');
+let result = undefined;
+if (componentInput?.type == 'template' && !isCodeInjection(componentInput.eval)) {
+    result = componentInput.eval;
+    initializing = false;
+}
+const outputs = initOutput($worldStore, id, {
+    result,
+    loading: initializing
+});
+function getComponent() {
+    switch (resolvedConfig.style) {
+        case 'Title':
+            return 'h1';
+        case 'Subtitle':
+            return 'h3';
+        case 'Body':
+            return 'p';
+        case 'Caption':
+            return 'p';
+        case 'Label':
+            return 'label';
+        default:
+            return 'p';
+    }
+}
+function getClasses() {
+    switch (resolvedConfig.style) {
+        case 'Caption':
+            return 'text-sm italic text-gray-500';
+        case 'Label':
+            return 'font-semibold text-sm';
+        default:
+            return '';
+    }
+}
+let component = 'p';
+let classes = '';
+$: resolvedConfig.style && (component = getComponent());
+$: resolvedConfig.style && (classes = getClasses());
+</script>
+
+{#each Object.keys(components['textcomponent'].initialData.configuration) as key (key)}
+	<ResolveConfig
+		{id}
+		{key}
+		bind:resolvedConfig={resolvedConfig[key]}
+		configuration={configuration[key]}
+	/>
+{/each}
+
+<RunnableWrapper {outputs} {render} {componentInput} {id} bind:initializing bind:result>
+	<div class="h-full w-full overflow-hidden">
+		<AlignWrapper {horizontalAlignment} {verticalAlignment}>
+			{#if !result || result === ''}
+				<div class="text-gray-400 bg-gray-100 flex justify-center items-center h-full w-full">
+					No text
+				</div>
+			{:else}
+				<!-- svelte-ignore a11y-click-events-have-key-events -->
+				<div
+					class="flex flex-wrap gap-2 pb-0.5  {$mode === 'dnd' && componentInput?.type == 'template'
+						? 'cursor-text'
+						: ''}"
+					on:click={() => {
+						if ($mode === 'dnd' && componentInput?.type == 'template') {
+							let ontextfocus = editorcontext?.ontextfocus
+							if (ontextfocus) {
+								get(ontextfocus)?.()
+							}
+						}
+					}}
+				>
+					<svelte:element
+						this={component}
+						class={twMerge(
+							'whitespace-pre-wrap',
+							$app.css?.['textcomponent']?.['text']?.class,
+							customCss?.text?.class,
+							classes
+						)}
+						style={[$app.css?.['textcomponent']?.['text']?.style, customCss?.text?.style].join(';')}
+					>
+						{String(result)}
+						{#if resolvedConfig.tooltip != ''}
+							<Tooltip>{resolvedConfig.tooltip}</Tooltip>
+						{/if}
+						{#if resolvedConfig.copyButton && result}
+							<Popover notClickable>
+								<Button
+									variant="border"
+									size="xs"
+									color="dark"
+									btnClasses="!p-1"
+									on:click={() => copyToClipboard(result)}
+								>
+									<Clipboard size={14} strokeWidth={2} />
+								</Button>
+								<svelte:fragment slot="text">Copy to clipboard</svelte:fragment>
+							</Popover>
+						{/if}
+					</svelte:element>
+				</div>
+			{/if}
+		</AlignWrapper>
+	</div>
+</RunnableWrapper>

package/components/apps/components/{dataDisplay → display}/AppText.svelte.d.ts

@@ -1,13 +1,16 @@
 import { SvelteComponentTyped } from "svelte";
 import type { AppInput } from '../../inputType';
+import type { ComponentCustomCSS, RichConfigurations } from '../../types';
 declare const __propDef: {
     props: {
         id: string;
         componentInput: AppInput | undefined;
         horizontalAlignment?: 'left' | 'center' | 'right' | undefined;
         verticalAlignment?: 'top' | 'center' | 'bottom' | undefined;
-        configuration: Record<string, AppInput>;
-        staticOutputs?: string[] | undefined;
+        configuration: RichConfigurations;
+        initializing?: boolean | undefined;
+        customCss?: ComponentCustomCSS<'textcomponent'> | undefined;
+        render: boolean;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -18,6 +21,5 @@ export type AppTextProps = typeof __propDef.props;
 export type AppTextEvents = typeof __propDef.events;
 export type AppTextSlots = typeof __propDef.slots;
 export default class AppText extends SvelteComponentTyped<AppTextProps, AppTextEvents, AppTextSlots> {
-    get staticOutputs(): string[];
 }
 export {};

package/components/apps/components/{dataDisplay → display}/AppTimeseries.svelte

@@ -2,12 +2,22 @@
 import 'chartjs-adapter-date-fns';
 import { Chart as ChartJS, Title, Tooltip, Legend, LineElement, LinearScale, PointElement, CategoryScale, BarElement, TimeScale, LogarithmicScale } from 'chart.js';
 import RunnableWrapper from '../helpers/RunnableWrapper.svelte';
-import Scatter from 'svelte-chartjs/Scatter.svelte';
+import { Scatter } from 'svelte-chartjs';
 import InputValue from '../helpers/InputValue.svelte';
+import { getContext } from 'svelte';
+import { concatCustomCss } from '../../utils';
+import { initOutput } from '../../editor/appUtils';
 export let id;
 export let componentInput;
 export let configuration;
-export const staticOutputs = ['loading', 'result'];
+export let initializing = undefined;
+export let customCss = undefined;
+export let render;
+const { app, worldStore } = getContext('AppViewerContext');
+const outputs = initOutput($worldStore, id, {
+    result: undefined,
+    loading: false
+});
 let logarithmicScale = false;
 let zoomable = false;
 let pannable = false;
@@ -44,14 +54,17 @@ $: options = {
 $: data = {
     datasets: result ?? []
 };
+$: css = concatCustomCss($app.css?.timeseriescomponent, customCss);
 </script>
 
 <InputValue {id} input={configuration.logarithmicScale} bind:value={logarithmicScale} />
 <InputValue {id} input={configuration.zoomable} bind:value={zoomable} />
 <InputValue {id} input={configuration.pannable} bind:value={pannable} />
 
-<RunnableWrapper flexWrap autoRefresh bind:componentInput {id} bind:result>
-	{#if result}
-		<Scatter {data} {options} />
-	{/if}
+<RunnableWrapper {outputs} {render} autoRefresh {componentInput} {id} bind:initializing bind:result>
+	<div class="w-full h-full {css?.container?.class ?? ''}" style={css?.container?.style ?? ''}>
+		{#if result}
+			<Scatter {data} {options} />
+		{/if}
+	</div>
 </RunnableWrapper>