windmill-components 1.60.3 → 1.60.4

package/components/FolderEditor.svelte

@@ -115,7 +115,7 @@ let ownerKind = 'user';
 	{#if perms}
 		<TableCustom>
 			<tr slot="header-row">
-				<th>user</th>
+				<th>user/group</th>
 				<th />
 				<th />
 			</tr>

package/components/UserSettings.svelte

@@ -47,12 +47,13 @@ async function loadLoginType() {
 }
 async function createToken() {
     newToken = undefined;
-    let expirationISO;
+    let date;
     if (newTokenExpiration) {
-        expirationISO = new Date(newTokenExpiration);
+        date = new Date();
+        date.setDate(date.getDate() + newTokenExpiration);
     }
     newToken = await UserService.createToken({
-        requestBody: { label: newTokenLabel, expiration: expirationISO?.toISOString() }
+        requestBody: { label: newTokenLabel, expiration: date?.toISOString() }
     });
     listTokens();
     displayCreateToken = false;
@@ -75,7 +76,7 @@ async function deleteToken(tokenPrefix) {
 					Windmill {version}
 				</div>
 
-				<h2 class="border-b">User info</h2>
+				<h2 class="border-b mt-4">User info</h2>
 				<div class="">
 					{#if passwordError}
 						<div class="text-red-600 text-2xs grow">{passwordError}</div>
@@ -152,7 +153,7 @@ async function deleteToken(tokenPrefix) {
 								>{truncate(newToken ?? '', 10, '****')} <Icon data={faClipboard} />
 							</button>
 						</div>
-						<div class="pt-1 text-xs text-right">
+						<div class="pt-1 text-xs ml-2">
 							Make sure to copy your personal access token now. You won’t be able to see it again!
 						</div>
 					</div>
@@ -173,29 +174,17 @@ async function deleteToken(tokenPrefix) {
 							</div>
 							<div class="flex flex-col ">
 								<label for="expires"
-									>Expires on <span class="text-xs text-gray-500">(optional)</span>
+									>Expires In<span class="text-xs text-gray-500">(optional)</span>
 								</label>
-								<input
-									class="block md:w-1/2"
-									type="date"
-									id="expires"
-									name="expiration-date"
-									bind:value={newTokenExpiration}
-									min={getToday().getFullYear() +
-										'/' +
-										getToday().getMonth() +
-										'/' +
-										getToday().getDate()}
-									max={getToday().getFullYear() +
-										1 +
-										'/' +
-										getToday().getMonth() +
-										'/' +
-										getToday().getDate()}
-								/>
+								<select bind:value={newTokenExpiration}>
+									<option value={undefined}>No expiration</option>
+									<option value={7}>7d</option>
+									<option value={30}>30d</option>
+									<option value={90}>90d</option>
+								</select>
 							</div>
 							<div class="flex items-end">
-								<Button btnClasses="!mt-2" on:click={createToken}>Submit</Button>
+								<Button btnClasses="!mt-2" on:click={createToken}>New Token</Button>
 							</div>
 						</div>
 					</div>

package/components/apps/components/dataDisplay/AppHtml.svelte

@@ -2,8 +2,6 @@
 import RunnableWrapper from '../helpers/RunnableWrapper.svelte';
 export let id;
 export let componentInput;
-export let horizontalAlignment = 'left';
-export let verticalAlignment = undefined;
 export let configuration;
 export const staticOutputs = ['result', 'loading'];
 let result = undefined;
@@ -19,17 +17,15 @@ let w = undefined;
 	bind:clientHeight={h}
 	bind:clientWidth={w}
 >
-	<RunnableWrapper flexWrap bind:componentInput {id} bind:result>
-		<AlignWrapper {horizontalAlignment} {verticalAlignment}>
-			{#key result}
-				<iframe
-					frameborder="0"
-					style="height: {h}px; width: {w}px"
-					class="p-0"
-					title="sandbox"
-					srcdoc={result ? '<scr' + `ipt src="/tailwind.css"></script>` + result : 'No html'}
-				/>
-			{/key}
-		</AlignWrapper>
+	<RunnableWrapper autoRefresh flexWrap bind:componentInput {id} bind:result>
+		{#key result}
+			<iframe
+				frameborder="0"
+				style="height: {h}px; width: {w}px"
+				class="p-0"
+				title="sandbox"
+				srcdoc={result ? '<scr' + `ipt src="/tailwind.css"></script>` + result : 'No html'}
+			/>
+		{/key}
 	</RunnableWrapper>
 </div>

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

@@ -4,8 +4,6 @@ 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;
     };

package/components/apps/components/dataDisplay/VegaLiteHtml.svelte

@@ -1,10 +1,11 @@
-<script>import { onMount } from 'svelte';
+<script>import { Loader2 } from 'lucide-svelte';
+import { parse } from 'path';
+import { onMount } from 'svelte';
 import AlignWrapper from '../helpers/AlignWrapper.svelte';
+import InputValue from '../helpers/InputValue.svelte';
 import RunnableWrapper from '../helpers/RunnableWrapper.svelte';
 export let id;
 export let componentInput;
-export let horizontalAlignment = 'left';
-export let verticalAlignment = undefined;
 export let configuration;
 export const staticOutputs = ['result', 'loading'];
 let result = undefined;
@@ -12,17 +13,41 @@ let divEl = null;
 let vegaEmbed;
 onMount(async () => {
     if (divEl) {
+        //@ts-ignore
         await import('https://cdn.jsdelivr.net/npm/vega@5.22.1');
+        //@ts-ignore
         await import('https://cdn.jsdelivr.net/npm/vega-lite@5.6.0');
-        vegaEmbed = await import('https://cdn.jsdelivr.net/npm/vega-embed@6.21.0');
-        console.log(vegaEmbed);
-        vegaEmbed(divEl, result);
+        //@ts-ignore
+        await import('https://cdn.jsdelivr.net/npm/vega-embed@6.21.0');
+        vegaEmbed = window['vegaEmbed'];
     }
 });
+let h = undefined;
+let w = undefined;
+let canvas = false;
+$: vegaEmbed &&
+    result &&
+    divEl &&
+    h &&
+    w &&
+    vegaEmbed(divEl, { ...result, ...{ width: w - 100 } }, {
+        mode: 'vega-lite',
+        actions: false,
+        renderer: canvas ? 'canvas' : 'svg',
+        height: h - 75,
+        width: w - 75
+    });
 </script>
 
-<RunnableWrapper flexWrap bind:componentInput {id} bind:result>
-	<AlignWrapper {horizontalAlignment} {verticalAlignment}>
-		<div bind:this={divEl} />
-	</AlignWrapper>
-</RunnableWrapper>
+<InputValue {id} input={configuration.canvas} bind:value={canvas} />
+
+<div class="w-full h-full" bind:clientHeight={h} bind:clientWidth={w}>
+	<RunnableWrapper flexWrap bind:componentInput {id} bind:result>
+		{#if !vegaEmbed}
+			<div class="p-2">
+				<Loader2 class="animate-spin" />
+			</div>
+		{/if}
+		<div on:pointerdown bind:this={divEl} />
+	</RunnableWrapper>
+</div>

package/components/apps/components/dataDisplay/VegaLiteHtml.svelte.d.ts

@@ -4,12 +4,12 @@ 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;
     };
     events: {
+        pointerdown: PointerEvent;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};

package/components/apps/components/table/AppTable.svelte

@@ -1,4 +1,4 @@
-<script>import { getContext } from 'svelte';
+<script>import { getContext, onMount } from 'svelte';
 import InputValue from '../helpers/InputValue.svelte';
 import RunnableWrapper from '../helpers/RunnableWrapper.svelte';
 import { writable } from 'svelte/store';
@@ -29,13 +29,23 @@ const options = writable({
 });
 let table = createSvelteTable(options);
 const { worldStore, staticOutputs: staticOutputsStore } = getContext('AppEditorContext');
-let selectedRowIndex = 0;
+let selectedRowIndex = -1;
 function toggleRow(row, rowIndex) {
     if (selectedRowIndex !== rowIndex) {
         selectedRowIndex = rowIndex;
         outputs?.selectedRow.set(row.original);
     }
 }
+let mounted = false;
+onMount(() => {
+    mounted = true;
+});
+$: selectedRowIndex === -1 &&
+    Array.isArray(result) &&
+    result.length > 0 &&
+    // We need to wait until the component is mounted so the world is created
+    mounted &&
+    toggleRow({ original: result[0] }, 0);
 function setOptions(filteredResult) {
     if (!Array.isArray(result)) {
         return;

package/components/apps/editor/AppPreview.svelte

@@ -1,8 +1,12 @@
 <script>import { onMount, setContext } from 'svelte';
+import { fade } from 'svelte/transition';
+import { cubicOut } from 'svelte/easing';
 import { writable } from 'svelte/store';
 import { buildWorld } from '../rx';
 import GridEditor from './GridEditor.svelte';
 import { classNames } from '../../../utils';
+import Button from '../../common/button/Button.svelte';
+import { Unlock } from 'lucide-svelte';
 export let app;
 export let appPath;
 export let breakpoint;
@@ -12,6 +16,7 @@ export let workspace;
 export let isEditor;
 export let context;
 export let noBackend = false;
+export let isLocked = false;
 const appStore = writable(app);
 const worldStore = writable(undefined);
 const staticOutputs = writable({});
@@ -48,12 +53,29 @@ onMount(() => {
 });
 $: mounted && ($worldStore = buildWorld($staticOutputs, undefined, context));
 $: width = $breakpoint === 'sm' ? 'max-w-[640px]' : 'w-full ';
+$: lockedClasses = isLocked ? '!max-h-[400px] overflow-hidden pointer-events-none' : '';
 </script>
 
-<div class="h-full max-h-[calc(100%-41px)] overflow-auto w-full {app.fullscreen ? '' : 'max-w-6xl'} mx-auto">
-	{#if $appStore.grid}
-		<div class={classNames('mx-auto pb-4', width)}>
-			<GridEditor {policy} />
+<div class="relative">
+	<div class="{$$props.class} {lockedClasses} h-full max-h-[calc(100%-41px)] overflow-auto 
+	w-full {app.fullscreen ? '' : 'max-w-6xl'} mx-auto">
+		{#if $appStore.grid}
+			<div class={classNames('mx-auto pb-4', width)}>
+				<GridEditor {policy} />
+			</div>
+		{/if}
+	</div>
+	{#if isLocked}
+		<!-- svelte-ignore a11y-click-events-have-key-events -->
+		<div
+			transition:fade|local={{ duration: 200, easing: cubicOut }}
+			on:click={() => isLocked = false}
+			class="absolute inset-0 center-center bg-black/20 z-50 backdrop-blur-[1px] cursor-pointer"
+		>
+			<Button on:click={() => isLocked = false}>
+				Unlock preview
+				<Unlock size={18} class="ml-1" strokeWidth={2.5} />
+			</Button>
 		</div>
 	{/if}
 </div>

package/components/apps/editor/AppPreview.svelte.d.ts

@@ -4,6 +4,7 @@ import type { App, EditorBreakpoint } from '../types';
 import type { Policy } from '../../../gen';
 declare const __propDef: {
     props: {
+        [x: string]: any;
         app: App;
         appPath: string;
         breakpoint: Writable<EditorBreakpoint>;
@@ -13,6 +14,7 @@ declare const __propDef: {
         isEditor: boolean;
         context: Record<string, any>;
         noBackend?: boolean | undefined;
+        isLocked?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/apps/editor/ComponentEditor.svelte

@@ -17,6 +17,7 @@ import AppScatterChart from '../components/dataDisplay/AppScatterChart.svelte';
 import AppTimeseries from '../components/dataDisplay/AppTimeseries.svelte';
 import AppHtml from '../components/dataDisplay/AppHtml.svelte';
 import AppSliderInputs from '../components/numberInputs/AppSliderInputs.svelte';
+import VegaLiteHtml from '../components/dataDisplay/VegaLiteHtml.svelte';
 export let component;
 export let selected;
 export let locked = false;
@@ -74,6 +75,12 @@ const { staticOutputs, mode, connectingInput } = getContext('AppEditorContext');
 				bind:componentInput={component.componentInput}
 				bind:staticOutputs={$staticOutputs[component.id]}
 			/>
+		{:else if component.type === 'vegalitecomponent'}
+			<VegaLiteHtml
+				{...component}
+				bind:componentInput={component.componentInput}
+				bind:staticOutputs={$staticOutputs[component.id]}
+			/>
 		{:else if component.type === 'scatterchartcomponent'}
 			<AppScatterChart
 				{...component}

package/components/apps/editor/componentsPanel/ComponentList.svelte

@@ -29,7 +29,8 @@ function getRecommendedDimensionsByComponent(componentType, column) {
             'barchartcomponent',
             'piechartcomponent',
             'displaycomponent',
-            'scatterchartcomponent'
+            'scatterchartcomponent',
+            'vegalitecomponent'
         ],
         '3:10-6:10': ['tablecomponent']
     };

package/components/apps/editor/componentsPanel/data.js

@@ -232,6 +232,40 @@ const display = {
             configuration: {},
             card: false
         },
+        {
+            softWrap: false,
+            id: 'vegalitecomponent',
+            type: 'vegalitecomponent',
+            componentInput: {
+                type: 'static',
+                fieldType: 'object',
+                value: {
+                    data: {
+                        values: [
+                            { a: 'A', b: 28 },
+                            { a: 'B', b: 55 },
+                            { a: 'C', b: 43 },
+                            { a: 'D', b: 91 },
+                        ]
+                    },
+                    mark: 'bar',
+                    encoding: {
+                        x: { field: 'a', type: 'ordinal' },
+                        y: { field: 'b', type: 'quantitative' }
+                    }
+                }
+            },
+            configuration: {
+                canvas: {
+                    type: 'static',
+                    onlyStatic: true,
+                    fieldType: 'boolean',
+                    value: false,
+                    tooltip: "use the canvas renderer instead of the svg one for more interactive plots"
+                }
+            },
+            card: false
+        },
         {
             softWrap: true,
             horizontalAlignment: 'left',

package/components/apps/editorUtils.js

@@ -94,6 +94,45 @@ const DEFAULT_CODES = {
 <h1 class="absolute top-4 left-2 text-white">
 	Hello world
 </h1>'''`,
+    },
+    vegalitecomponent: {
+        deno: `
+			export async function main() {
+				return {
+					data: {
+					values: [
+						{ a: "A", b: 28 },
+						{ a: "B", b: 55 },
+						{ a: "C", b: 43 },
+						{ a: "D", b: 91 },
+					],
+					},
+					mark: "bar",
+					encoding: {
+						x: { field: "a", type: "ordinal" },
+						y: { field: "b", type: "quantitative" },
+					},
+				};
+			}			  
+`,
+        python3: `
+def main():
+	return {
+		"data": {
+		"values": [
+			{ "a": "A", "b": 28 },
+			{ "a": "B", "b": 55 },
+			{ "a": "C", "b": 43 },
+			{ "a": "D", "b": 91 },
+		],
+		},
+			"mark": "bar",
+		"encoding": {
+			"x": { "field": "a", "type": "ordinal" },
+			"y": { "field": "b", "type": "quantitative" },
+		},
+	}	
+`
     },
     piechartcomponent: {
         deno: `export async function main() {

package/components/apps/types.d.ts

@@ -14,6 +14,7 @@ export type DateInputComponent = BaseComponent<'dateinputcomponent'>;
 export type NumberInputComponent = BaseComponent<'numberinputcomponent'>;
 export type SliderComponent = BaseComponent<'slidercomponent'>;
 export type HtmlComponent = BaseComponent<'htmlcomponent'>;
+export type VegaLiteComponent = BaseComponent<'vegalitecomponent'>;
 export type TimeseriesComponent = BaseComponent<'timeseriescomponent'>;
 export type ButtonComponent = BaseComponent<'buttoncomponent'> & {
     recomputeIds: string[] | undefined;
@@ -56,7 +57,7 @@ export interface BaseAppComponent extends Partial<Aligned> {
      */
     softWrap?: boolean;
 }
-export type AppComponent = BaseAppComponent & (RunFormComponent | DisplayComponent | TextInputComponent | PasswordInputComponent | DateInputComponent | NumberInputComponent | SliderComponent | BarChartComponent | TimeseriesComponent | HtmlComponent | TableComponent | TextComponent | TableComponent | ButtonComponent | PieChartComponent | ScatterChartComponent | ImageComponent | InputComponent | SelectComponent | CheckboxComponent | RadioComponent | FormComponent);
+export type AppComponent = BaseAppComponent & (RunFormComponent | DisplayComponent | TextInputComponent | PasswordInputComponent | DateInputComponent | NumberInputComponent | SliderComponent | BarChartComponent | TimeseriesComponent | HtmlComponent | TableComponent | TextComponent | TableComponent | ButtonComponent | PieChartComponent | ScatterChartComponent | ImageComponent | InputComponent | SelectComponent | CheckboxComponent | RadioComponent | FormComponent | VegaLiteComponent);
 export type ComponentSet = {
     title: string;
     components: AppComponent[];

package/components/apps/utils.js

@@ -72,6 +72,10 @@ export const displayData = {
         name: 'Html',
         icon: Code2
     },
+    vegalitecomponent: {
+        name: 'Vega Lite',
+        icon: PieChart
+    },
     timeseriescomponent: {
         name: 'Timeseries',
         icon: GripHorizontal

package/components/flows/content/CapturePayload.svelte

@@ -106,11 +106,11 @@ async function getCaptureInput() {
 				Copy as flow inputs and test args
 			</Button>
 		</svelte:fragment>
-		<h3 class="my-2">Derived schema</h3>
+		<h3 class="my-2 mt-8">Derived schema</h3>
 		<div class="box p-2">
 			<SchemaViewer schema={jsonSchema} />
 		</div>
-		<h3 class="mt-2">Test args</h3>
-		<SchemaForm class="h-full pt-4" schema={$flowStore.schema} args={$previewArgs} />
+		<h3 class="mt-8">Test args</h3>
+		<SchemaForm class="pt-4" schema={$flowStore.schema} args={$previewArgs} />
 	</DrawerContent>
 </Drawer>

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "windmill-components",
-	"version": "1.60.3",
+	"version": "1.60.4",
 	"devDependencies": {
 		"@playwright/test": "^1.29.2",
 		"@sveltejs/adapter-static": "^1.0.0",