windmill-components 1.122.0 → 1.138.2

package/package/components/apps/components/display/AppFlowStatusComponent.svelte

@@ -52,7 +52,7 @@ let jobId;
 			{#if jobId}
 				<FlowStatusViewer workspaceId={workspace} {jobId} />
 			{:else}
-				<span class="text-gray-600 text-xs">No flow</span>
+				<span class="text-secondary text-xs">No flow</span>
 			{/if}
 		</div>
 	</div>

package/package/components/apps/components/display/AppJobIdFlowStatus.svelte

@@ -0,0 +1,64 @@
+<script>import { getContext } from 'svelte';
+import { twMerge } from 'tailwind-merge';
+import { initConfig, initOutput } from '../../editor/appUtils';
+import RunnableWrapper from '../helpers/RunnableWrapper.svelte';
+import { concatCustomCss } from '../../utils';
+import FlowStatusViewer from '../../../FlowStatusViewer.svelte';
+import { components } from '../../editor/component';
+import ResolveConfig from '../helpers/ResolveConfig.svelte';
+export let id;
+export let componentInput;
+export let initializing = false;
+export let customCss = undefined;
+export let render;
+export let configuration;
+const { app, worldStore, workspace } = getContext('AppViewerContext');
+let resolvedConfig = initConfig(components['jobidlogcomponent'].initialData.configuration, configuration);
+const outputs = initOutput($worldStore, id, {
+    result: undefined,
+    loading: false
+});
+initializing = false;
+$: css = concatCustomCss($app.css?.jobidflowstatuscomponent, customCss);
+$: jobId = resolvedConfig.jobId;
+</script>
+
+{#each Object.keys(components['jobidflowstatuscomponent'].initialData.configuration) as key (key)}
+	<ResolveConfig
+		{id}
+		{key}
+		bind:resolvedConfig={resolvedConfig[key]}
+		configuration={configuration[key]}
+	/>
+{/each}
+
+<RunnableWrapper {outputs} {render} {componentInput} {id}>
+	<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',
+				css?.header?.class
+			)}
+			style={css?.header?.style}
+		>
+			Flow Status
+		</div>
+		<div
+			style={twMerge(
+				$app.css?.['flowstatuscomponent']?.['container']?.style,
+				customCss?.container?.style
+			)}
+			class={twMerge(
+				'p-2 grow overflow-auto',
+				$app.css?.['flowstatuscomponent']?.['container']?.class,
+				customCss?.container?.class
+			)}
+		>
+			{#if jobId}
+				<FlowStatusViewer workspaceId={workspace} {jobId} />
+			{:else}
+				<span class="text-secondary text-xs">No flow</span>
+			{/if}
+		</div>
+	</div>
+</RunnableWrapper>

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

@@ -0,0 +1,23 @@
+import { SvelteComponentTyped } from "svelte";
+import type { AppInput } from '../../inputType';
+import type { ComponentCustomCSS, RichConfigurations } from '../../types';
+declare const __propDef: {
+    props: {
+        id: string;
+        componentInput: AppInput | undefined;
+        initializing?: boolean | undefined;
+        customCss?: ComponentCustomCSS<'jobidflowstatuscomponent'> | undefined;
+        render: boolean;
+        configuration: RichConfigurations;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type AppJobIdFlowStatusProps = typeof __propDef.props;
+export type AppJobIdFlowStatusEvents = typeof __propDef.events;
+export type AppJobIdFlowStatusSlots = typeof __propDef.slots;
+export default class AppJobIdFlowStatus extends SvelteComponentTyped<AppJobIdFlowStatusProps, AppJobIdFlowStatusEvents, AppJobIdFlowStatusSlots> {
+}
+export {};

package/package/components/apps/components/display/AppJobIdLogComponent.svelte

@@ -0,0 +1,72 @@
+<script>import { getContext } from 'svelte';
+import { twMerge } from 'tailwind-merge';
+import { initConfig, initOutput } from '../../editor/appUtils';
+import RunnableWrapper from '../helpers/RunnableWrapper.svelte';
+import { concatCustomCss } from '../../utils';
+import LogViewer from '../../../LogViewer.svelte';
+import TestJobLoader from '../../../TestJobLoader.svelte';
+import { components } from '../../editor/component';
+import ResolveConfig from '../helpers/ResolveConfig.svelte';
+export let id;
+export let componentInput;
+export let initializing = false;
+export let customCss = undefined;
+export let render;
+export let configuration;
+const { app, worldStore } = getContext('AppViewerContext');
+let resolvedConfig = initConfig(components['jobidlogcomponent'].initialData.configuration, configuration);
+const outputs = initOutput($worldStore, id, {
+    result: undefined,
+    loading: false,
+    jobId: undefined
+});
+initializing = false;
+$: css = concatCustomCss($app.css?.logcomponent, customCss);
+let testJobLoader = undefined;
+let testIsLoading = false;
+let testJob = undefined;
+$: if (resolvedConfig.jobId) {
+    testJobLoader?.watchJob(resolvedConfig?.['jobId']);
+}
+</script>
+
+{#each Object.keys(components['jobidlogcomponent'].initialData.configuration) as key (key)}
+	<ResolveConfig
+		{id}
+		{key}
+		bind:resolvedConfig={resolvedConfig[key]}
+		configuration={configuration[key]}
+	/>
+{/each}
+
+<TestJobLoader bind:this={testJobLoader} bind:isLoading={testIsLoading} bind:job={testJob} />
+
+<RunnableWrapper {outputs} {render} {componentInput} {id}>
+	<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',
+				css?.header?.class
+			)}
+			style={css?.header?.style}
+		>
+			Logs
+		</div>
+		<div
+			style={twMerge($app.css?.['logcomponent']?.['container']?.style, customCss?.container?.style)}
+			class={twMerge(
+				'p-2 grow overflow-auto',
+				$app.css?.['logcomponent']?.['container']?.class,
+				customCss?.container?.class
+			)}
+		>
+			<LogViewer
+				jobId={testJob?.id}
+				duration={testJob?.['duration_ms']}
+				mem={testJob?.['mem_peak']}
+				content={testJob?.logs}
+				isLoading={testIsLoading}
+			/>
+		</div>
+	</div>
+</RunnableWrapper>

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

@@ -0,0 +1,23 @@
+import { SvelteComponentTyped } from "svelte";
+import type { AppInput } from '../../inputType';
+import type { ComponentCustomCSS, RichConfigurations } from '../../types';
+declare const __propDef: {
+    props: {
+        id: string;
+        componentInput: AppInput | undefined;
+        initializing?: boolean | undefined;
+        customCss?: ComponentCustomCSS<'logcomponent'> | undefined;
+        render: boolean;
+        configuration: RichConfigurations;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type AppJobIdLogComponentProps = typeof __propDef.props;
+export type AppJobIdLogComponentEvents = typeof __propDef.events;
+export type AppJobIdLogComponentSlots = typeof __propDef.slots;
+export default class AppJobIdLogComponent extends SvelteComponentTyped<AppJobIdLogComponentProps, AppJobIdLogComponentEvents, AppJobIdLogComponentSlots> {
+}
+export {};

package/package/components/apps/components/display/AppMap.svelte

@@ -202,12 +202,10 @@ function handleSyncRegion() {
     width: 1.75rem;
     border-radius: 0.25rem;
     border-width: 1px;
-    --tw-border-opacity: 1;
-    border-color: rgb(209 213 219 / var(--tw-border-opacity));
     --tw-bg-opacity: 1;
-    background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+    background-color: rgb(var(--color-surface) / var(--tw-bg-opacity));
     --tw-text-opacity: 1;
-    color: rgb(55 65 81 / var(--tw-text-opacity));
+    color: rgb(var(--color-text-secondary) / var(--tw-text-opacity));
     --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
     --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
     box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
@@ -217,14 +215,10 @@ function handleSyncRegion() {
     align-items: center
 }
 	:global(.ol-control) :global(button:hover) {
-    --tw-border-opacity: 1;
-    border-color: rgb(107 114 128 / var(--tw-border-opacity));
     --tw-bg-opacity: 1;
-    background-color: rgb(243 244 246 / var(--tw-bg-opacity))
+    background-color: rgb(var(--color-surface-hover) / var(--tw-bg-opacity))
 }
 	:global(.ol-control) :global(button:focus) {
-    --tw-border-opacity: 1;
-    border-color: rgb(107 114 128 / var(--tw-border-opacity));
     --tw-bg-opacity: 1;
-    background-color: rgb(243 244 246 / var(--tw-bg-opacity))
+    background-color: rgb(var(--color-surface-hover) / var(--tw-bg-opacity))
 }</style>

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

@@ -188,9 +188,9 @@ $: css = concatCustomCss($app.css?.pdfcomponent, customCss);
 						? '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"
+						: '!justify-between'} overflow-x-auto bg-surface border mx-auto py-1"
 				>
-					<div class="flex justify-start items-center px-2 text-gray-600 text-sm">
+					<div class="flex justify-start items-center px-2 text-secondary text-sm">
 						<Button
 							on:click={() => zoom && (zoom -= 10)}
 							disabled={!doc}
@@ -242,7 +242,7 @@ $: css = concatCustomCss($app.css?.pdfcomponent, customCss);
 							<ZoomIn size={16} />
 						</Button>
 					</div>
-					<div class="center-center px-2 text-gray-600 text-sm">
+					<div class="center-center px-2 text-secondary text-sm">
 						<input
 							on:input={({ currentTarget }) => {
 								scrollToPage(currentTarget.valueAsNumber)
@@ -258,7 +258,7 @@ $: css = concatCustomCss($app.css?.pdfcomponent, customCss);
 							/ {pages.length}
 						</span>
 					</div>
-					<div class="flex justify-end items-center px-2 text-gray-600 text-sm">
+					<div class="flex justify-end items-center px-2 text-secondary text-sm">
 						<Button
 							on:click={downloadPdf}
 							disabled={!doc}
@@ -279,7 +279,7 @@ $: css = concatCustomCss($app.css?.pdfcomponent, customCss);
 			{:else}
 				<div
 					out:fade={{ duration: 200 }}
-					class="absolute inset-0 center-center flex-col text-center text-sm bg-white text-gray-600"
+					class="absolute inset-0 center-center flex-col text-center text-sm bg-surface text-secondary"
 				>
 					<Loader2 class="animate-spin mb-2" />
 					Loading PDF
@@ -304,7 +304,7 @@ $: css = concatCustomCss($app.css?.pdfcomponent, customCss);
 		{#if error}
 			<div
 				class="absolute inset-0 z-20 center-center
-		bg-gray-100 text-center text-gray-600 text-sm"
+		bg-gray-100 text-center text-secondary text-sm"
 			>
 				{error}
 			</div>

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

@@ -5,7 +5,6 @@ import { getContext } from 'svelte';
 import { twMerge } from 'tailwind-merge';
 import { copyToClipboard } from '../../../../utils';
 import Button from '../../../common/button/Button.svelte';
-import Popover from '../../../Popover.svelte';
 import { initConfig, initOutput } from '../../editor/appUtils';
 import { components } from '../../editor/component';
 import AlignWrapper from '../helpers/AlignWrapper.svelte';
@@ -56,7 +55,7 @@ function getComponent() {
 function getClasses() {
     switch (resolvedConfig.style) {
         case 'Caption':
-            return 'text-sm italic text-gray-500';
+            return 'text-sm italic text-tertiary';
         case 'Label':
             return 'font-semibold text-sm';
         default:
@@ -192,24 +191,25 @@ function autosize() {
 							)}
 						>
 							{String(result)}
-							{#if resolvedConfig.tooltip && 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>
+
+						{#if resolvedConfig.tooltip && resolvedConfig.tooltip != ''}
+							<Tooltip>{resolvedConfig.tooltip}</Tooltip>
+						{/if}
+						{#if resolvedConfig.copyButton && result}
+							<div class="flex">
+								<Button
+									title="Copy to clipboard"
+									variant="border"
+									size="xs"
+									color="light"
+									btnClasses="!p-1"
+									on:click={() => copyToClipboard(result)}
+								>
+									<Clipboard size={14} strokeWidth={2} />
+								</Button>
+							</div>
+						{/if}
 					</div>
 				{/if}
 			</AlignWrapper>

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

@@ -9,7 +9,7 @@ export let componentInput;
 export let configuration;
 export let initializing = undefined;
 export let render;
-const { worldStore } = getContext('AppViewerContext');
+const { worldStore, darkMode } = getContext('AppViewerContext');
 let resolvedConfig = initConfig(components['plotlycomponent'].initialData.configuration, configuration);
 const outputs = initOutput($worldStore, id, {
     result: undefined,
@@ -25,7 +25,11 @@ onMount(async () => {
 });
 let h = undefined;
 let w = undefined;
-$: Plotly && render && result && divEl && h && w && plot();
+let shouldeUpdate = 1;
+darkMode.subscribe(() => {
+    shouldeUpdate++;
+});
+$: Plotly && render && result && divEl && h && w && shouldeUpdate && plot();
 let error = '';
 function plot() {
     try {
@@ -33,7 +37,15 @@ function plot() {
             width: w,
             height: h,
             margin: { l: 50, r: 40, b: 40, t: 40, pad: 4 },
-            ...resolvedConfig.layout
+            ...resolvedConfig.layout,
+            paper_bgcolor: $darkMode ? '#2e3440' : '#fff',
+            plot_bgcolor: $darkMode ? '#2e3440' : '#fff',
+            xaxis: {
+                color: $darkMode ? '#f3f6f8' : '#000'
+            },
+            yaxis: {
+                color: $darkMode ? '#f3f6f8' : '#000'
+            }
         }, { responsive: true, displayModeBar: false });
         error = '';
     }
@@ -58,7 +70,7 @@ function plot() {
 		{#if error != ''}
 			<div class="flex flex-col h-full w-full overflow-auto">
 				<Alert title="Plotly error" type="error" size="xs" class="h-full w-full ">
-					<pre class="w-full bg-white p-2 rounded-md whitespace-pre-wrap">{error}</pre>
+					<pre class="w-full bg-surface p-2 rounded-md whitespace-pre-wrap">{error}</pre>
 				</Alert>
 			</div>
 		{/if}

package/package/components/apps/components/display/table/AppAggridTable.svelte

@@ -1,6 +1,7 @@
 <script>import 'ag-grid-community/styles/ag-grid.css';
 import 'ag-grid-community/styles/ag-theme-alpine.css';
-import AgGridSvelte from 'ag-grid-svelte/AgGridSvelte.svelte';
+import 'ag-grid-community/dist/styles/ag-theme-alpine-dark.css';
+import AgGridSvelte from 'ag-grid-svelte';
 import { isObject } from '../../../../../utils';
 import { getContext } from 'svelte';
 import RunnableWrapper from '../../helpers/RunnableWrapper.svelte';
@@ -8,6 +9,7 @@ import { initConfig, initOutput } from '../../../editor/appUtils';
 import { components } from '../../../editor/component';
 import Alert from '../../../../common/alert/Alert.svelte';
 import ResolveConfig from '../../helpers/ResolveConfig.svelte';
+import { deepEqual } from 'fast-equals';
 export let id;
 export let componentInput;
 export let configuration;
@@ -18,16 +20,12 @@ let value = Array.isArray(result)
     ? result.map((x, i) => ({ ...x, __index: i.toString() }))
     : [{ error: 'input was not an array' }];
 $: result && setValues();
-let timeout;
 async function setValues() {
-    timeout && clearTimeout(timeout);
-    timeout = setTimeout(() => {
-        value = Array.isArray(result)
-            ? result.map((x, i) => ({ ...x, __index: i.toString() }))
-            : [{ error: 'input was not an array' }];
-    }, 25);
+    value = Array.isArray(result)
+        ? result.map((x, i) => ({ ...x, __index: i.toString() }))
+        : [{ error: 'input was not an array' }];
 }
-const { worldStore, selectedComponent, componentControl } = getContext('AppViewerContext');
+const { worldStore, selectedComponent, componentControl, darkMode } = getContext('AppViewerContext');
 let resolvedConfig = initConfig(components['aggridcomponent'].initialData.configuration, configuration);
 let outputs = initOutput($worldStore, id, {
     selectedRowIndex: 0,
@@ -81,6 +79,10 @@ function onCellValueChanged(event) {
         outputs?.selectedRow?.set(data);
     }
 }
+let extraConfig = resolvedConfig.extraConfig;
+$: if (!deepEqual(extraConfig, resolvedConfig.extraConfig)) {
+    extraConfig = resolvedConfig.extraConfig;
+}
 </script>
 
 {#each Object.keys(components['aggridcomponent'].initialData.configuration) as key (key)}
@@ -96,7 +98,7 @@ function onCellValueChanged(event) {
 	{#if Array.isArray(value) && value.every(isObject)}
 		{#if Array.isArray(resolvedConfig.columnDefs) && resolvedConfig.columnDefs.every(isObject)}
 			<div
-				class="border border-gray-300 shadow-sm divide-y divide-gray-300 flex flex-col h-full"
+				class="border shadow-sm divide-y flex flex-col h-full"
 				bind:clientHeight
 				bind:clientWidth
 			>
@@ -107,9 +109,10 @@ function onCellValueChanged(event) {
 					style:height="{clientHeight}px"
 					style:width="{clientWidth}px"
 					class="ag-theme-alpine"
+					class:ag-theme-alpine-dark={$darkMode}
 				>
-					{#key resolvedConfig?.pagination}
-						{#key resolvedConfig?.extraConfig}
+					{#key extraConfig}
+						{#key resolvedConfig?.pagination}
 							<AgGridSvelte
 								rowData={value}
 								columnDefs={resolvedConfig?.columnDefs}
@@ -145,6 +148,7 @@ function onCellValueChanged(event) {
 								{...resolvedConfig.extraConfig}
 								onGridReady={(e) => {
 									outputs?.ready.set(true)
+									value = value
 									if (result && result.length > 0) {
 										e.api.getRowNode('0')?.setSelected(true)
 									}

package/package/components/apps/components/display/table/AppAggridTable.svelte.d.ts

@@ -1,6 +1,7 @@
 import { SvelteComponentTyped } from "svelte";
 import 'ag-grid-community/styles/ag-grid.css';
 import 'ag-grid-community/styles/ag-theme-alpine.css';
+import 'ag-grid-community/dist/styles/ag-theme-alpine-dark.css';
 import type { AppInput } from '../../../inputType';
 import type { RichConfigurations } from '../../../types';
 declare const __propDef: {