windmill-components 1.339.2 → 1.352.0

package/package/components/NumberTypeNarrowing.svelte

@@ -1,5 +1,6 @@
 <script>import Label from './Label.svelte';
 import Toggle from './Toggle.svelte';
+import Tooltip from './Tooltip.svelte';
 import { selectOptions } from './apps/editor/component';
 export let min;
 export let max;
@@ -9,51 +10,77 @@ let minChecked = min != undefined;
 let maxChecked = max != undefined;
 </script>
 
-<div class="my-2" />
-
 <div class="flex flex-col gap-2">
-	<div class="flex gap-2">
-		<Toggle
-			bind:checked={minChecked}
-			on:change={(e) => {
-				if (e.detail) {
-					min = 0
-				} else {
-					min = undefined
-				}
-			}}
-			options={{ right: 'min' }}
-		/>
-		<input type="number" bind:value={min} disabled={!minChecked} />
+	<div class="grid grid-cols-2 gap-4">
+		<Label label="Min" class="w-full col-span-1">
+			<svelte:fragment slot="header">
+				<Tooltip light small>
+					Set a minimum value for the number. If both min and max are set, the input will render as
+					a range slider.
+				</Tooltip>
+			</svelte:fragment>
+			<svelte:fragment slot="action">
+				<Toggle
+					bind:checked={minChecked}
+					on:change={(e) => {
+						if (e.detail) {
+							min = 0
+						} else {
+							min = undefined
+						}
+					}}
+					options={{ right: 'Enabled' }}
+					size="xs"
+				/>
+			</svelte:fragment> <input type="number" bind:value={min} disabled={!minChecked} />
+		</Label>
+
+		<Label label="Max" class="w-full col-span-1 ">
+			<svelte:fragment slot="header">
+				<Tooltip light small>
+					Set a maximum value for the number. If both min and max are set, the input will render as
+					a range slider.
+				</Tooltip>
+			</svelte:fragment>
+			<svelte:fragment slot="action">
+				<Toggle
+					bind:checked={maxChecked}
+					on:change={(e) => {
+						if (e.detail) {
+							max = 42
+						} else {
+							max = undefined
+						}
+					}}
+					options={{ right: 'Enabled' }}
+					size="xs"
+				/>
+			</svelte:fragment>
+			<input type="number" bind:value={max} disabled={!maxChecked} />
+		</Label>
 	</div>
-	<div class="flex gap-2">
-		<Toggle
-			bind:checked={maxChecked}
-			on:change={(e) => {
-				if (e.detail) {
-					max = 42
-				} else {
-					max = undefined
-				}
-			}}
-			options={{ right: 'max' }}
-		/>
-		<input type="number" bind:value={max} disabled={!maxChecked} />
+	<div class="grid grid-cols-3 gap-4">
+		<Label label="Currency" class="w-full col-span-2">
+			<svelte:fragment slot="header">
+				<Tooltip light small>
+					Select a currency to display the number in. If a currency is selected, you can also select
+					a locale to format the number according to that locale.
+				</Tooltip>
+			</svelte:fragment>
+			<select bind:value={currency}>
+				<option value={undefined}> No currency </option>
+				{#each selectOptions.currencyOptions as c}
+					<option value={c}>{c}</option>
+				{/each}
+			</select>
+		</Label>
+		<Label label="Currency locale" class="w-full">
+			<select bind:value={currencyLocale} disabled={!currency}>
+				<option value={undefined}> No locale </option>
+				{#each selectOptions.localeOptions as c}
+					<option value={c}>{c}</option>
+				{/each}
+			</select>
+		</Label>
 	</div>
-	<Label label="Currency">
-		<select class="mt-1" bind:value={currency}>
-			<option value={undefined}> No currency </option>
-			{#each selectOptions.currencyOptions as c}
-				<option value={c}>{c}</option>
-			{/each}
-		</select>
-	</Label>
-	<Label label="Currency locale">
-		<select class="mt-1" bind:value={currencyLocale}>
-			<option value={undefined}> No locale </option>
-			{#each selectOptions.localeOptions as c}
-				<option value={c}>{c}</option>
-			{/each}
-		</select>
-	</Label>
 </div>

package/package/components/ObjectResourceInput.svelte

@@ -5,6 +5,7 @@ export let value;
 export let disablePortal = false;
 export let showSchemaExplorer = false;
 export let selectFirst = false;
+export let defaultValue;
 function isString(value) {
     return typeof value === 'string' || value instanceof String;
 }
@@ -40,6 +41,7 @@ $: value && valueToPath();
 				resourceToValue()
 			}}
 			bind:value={path}
+			initialValue={defaultValue}
 			resourceType={format.split('-').length > 1 ? format.substring('resource-'.length) : undefined}
 			{showSchemaExplorer}
 		/>

package/package/components/ObjectResourceInput.svelte.d.ts

@@ -6,6 +6,7 @@ declare const __propDef: {
         disablePortal?: boolean | undefined;
         showSchemaExplorer?: boolean | undefined;
         selectFirst?: boolean | undefined;
+        defaultValue: any;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package/components/ObjectTypeNarrowing.svelte

@@ -5,7 +5,6 @@ let resource = format?.startsWith('resource-')
     : undefined;
 </script>
 
-<div class="mt-2" />
 <ResourceTypePicker
 	on:click={(e) => {
 		resource = e.detail

package/package/components/ParqetCsvTableRenderer.svelte

@@ -0,0 +1,181 @@
+<script>import { GridApi, createGrid } from 'ag-grid-community';
+import 'ag-grid-community/styles/ag-grid.css';
+import 'ag-grid-community/styles/ag-theme-alpine.css';
+import { twMerge } from 'tailwind-merge';
+import DarkModeObserver from './DarkModeObserver.svelte';
+import { HelpersService } from '../gen';
+import { enterpriseLicense, workspaceStore } from '../stores';
+import { Download } from 'lucide-svelte';
+// import 'ag-grid-community/dist/styles/ag-theme-alpine-dark.css'
+let selectedRowIndex = -1;
+export let s3resource;
+export let storage;
+export let workspaceId;
+export let disable_download = false;
+let csvSeparatorChar = ',';
+let datasource = {
+    rowCount: 0,
+    getRows: async function (params) {
+        try {
+            const searchCol = params.filterModel ? Object.keys(params.filterModel)?.[0] : undefined;
+            const csv = s3resource.endsWith('.csv');
+            const requestBody = {
+                workspace: workspaceId ?? $workspaceStore,
+                path: s3resource,
+                offset: params.startRow,
+                limit: params.endRow - params.startRow,
+                sortCol: params.sortModel?.[0]?.colId,
+                sortDesc: params.sortModel?.[0]?.sort == 'desc',
+                searchCol: searchCol,
+                searchTerm: searchCol ? params.filterModel?.[searchCol]?.filter : undefined,
+                storage: storage,
+                csvSeparator: csv ? csvSeparatorChar : undefined
+            };
+            const res = (csv
+                ? await HelpersService.loadCsvPreview(requestBody)
+                : await HelpersService.loadParquetPreview(requestBody));
+            for (let i = 0; i < res.rows.length; i++) {
+                res.rows[i]['__index'] = i + params.startRow;
+                if (!$enterpriseLicense) {
+                    Object.keys(res.rows[i]).forEach((key) => {
+                        if (key != '__index') {
+                            res.rows[i][key] = 'Require EE';
+                        }
+                    });
+                }
+            }
+            params.successCallback(res.rows);
+        }
+        catch (e) {
+            console.error(e);
+            params.failCallback();
+        }
+    }
+};
+function toggleRow(row) {
+    if (row) {
+        let rowIndex = row.rowIndex;
+        let data = { ...row.data };
+        delete data['__index'];
+        if (selectedRowIndex !== rowIndex) {
+            selectedRowIndex = rowIndex;
+        }
+    }
+}
+function toggleRows(rows) {
+    toggleRow(rows[0]);
+}
+let eGui;
+$: eGui && mountGrid();
+let error = undefined;
+async function mountGrid() {
+    if (eGui) {
+        try {
+            const csv = s3resource.endsWith('.csv');
+            const res = csv
+                ? await HelpersService.loadCsvPreview({
+                    workspace: $workspaceStore,
+                    path: s3resource,
+                    limit: 0,
+                    storage: storage,
+                    csvSeparator: csvSeparatorChar
+                })
+                : await HelpersService.loadParquetPreview({
+                    workspace: $workspaceStore,
+                    path: s3resource,
+                    limit: 0,
+                    storage: storage
+                });
+            createGrid(eGui, {
+                rowModelType: 'infinite',
+                datasource,
+                // @ts-ignore
+                columnDefs: res.columns.map((c) => {
+                    return {
+                        field: c,
+                        sortable: true,
+                        filter: true,
+                        filterParams: {
+                            filterOptions: ['contains'],
+                            maxNumConditions: 1
+                        }
+                    };
+                }),
+                pagination: false,
+                // defaultColDef: {
+                // 	flex: 1
+                // },
+                suppressColumnMoveAnimation: true,
+                rowSelection: 'multiple',
+                rowMultiSelectWithClick: true,
+                suppressRowDeselection: true,
+                onSelectionChanged: (e) => {
+                    onSelectionChanged(e.api);
+                },
+                getRowId: (data) => {
+                    return data.data['__index'];
+                }
+            }, {});
+            error = undefined;
+        }
+        catch (e) {
+            error = e.body;
+            console.error(e);
+        }
+    }
+}
+function onSelectionChanged(api) {
+    const rows = api.getSelectedNodes();
+    if (rows != undefined) {
+        toggleRows(rows);
+    }
+}
+let darkMode = false;
+</script>
+
+<DarkModeObserver bind:darkMode />
+
+<div class={twMerge('mt-2  flex flex-col h-full min-h-[600px]')}>
+	{#if s3resource.endsWith('.csv')}
+		<div class="flex flex-row-reverse w-full">
+			<div class="flex items-baseline">
+				<label for="csvSeparatorChar" class="text-2xs text-secondary">Separator</label>
+
+				<div class="w-12 ml-2 mr-2">
+					<select class="h-8" bind:value={csvSeparatorChar} on:change={(e) => mountGrid()}>
+						<option value=",">,</option>
+						<option value=";">;</option>
+						<option value="\t">\t</option>
+						<option value="|">|</option>
+					</select>
+				</div>
+			</div>
+		</div>
+	{/if}
+	{#if !disable_download && !s3resource.endsWith('.csv')}
+		<a
+			target="_blank"
+			href="/api/w/{workspaceId}/job_helpers/download_s3_parquet_file_as_csv?file_key={s3resource}{storage
+				? `&storage=${storage}`
+				: ''}"
+			class="text-secondary w-full text-right underline text-2xs whitespace-nowrap"
+			><div class="flex flex-row-reverse gap-2 items-center"><Download size={12} /> CSV</div></a
+		>
+	{/if}
+
+	<div
+		class="ag-theme-alpine shadow-sm h-full"
+		class:ag-theme-alpine-dark={darkMode}
+		style="height: 600px;"
+	>
+		{#if error}
+			<div class="text-red-500">{error}</div>
+			<div>Try changing separator to fix it</div>
+		{/if}
+		<div bind:this={eGui} style="height:100%; " />
+	</div>
+</div>
+
+<!-- <div class="flex gap-1 absolute bottom-1 right-2 text-sm text-secondary"
+	>{firstRow}{'->'}{lastRow + 1} of {datasource?.rowCount} rows</div
+> -->

package/package/components/ParqetCsvTableRenderer.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponent } from "svelte";
+import 'ag-grid-community/styles/ag-grid.css';
+import 'ag-grid-community/styles/ag-theme-alpine.css';
+declare const __propDef: {
+    props: {
+        s3resource: string;
+        storage: string | undefined;
+        workspaceId: string | undefined;
+        disable_download?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ParqetCsvTableRendererProps = typeof __propDef.props;
+export type ParqetCsvTableRendererEvents = typeof __propDef.events;
+export type ParqetCsvTableRendererSlots = typeof __propDef.slots;
+export default class ParqetCsvTableRenderer extends SvelteComponent<ParqetCsvTableRendererProps, ParqetCsvTableRendererEvents, ParqetCsvTableRendererSlots> {
+}
+export {};

package/package/components/Path.svelte

@@ -249,8 +249,8 @@ let contentSearch;
 		}}
 	>
 		{#if !folderCreated}
-			<div class="flex flex-row">
-				<input class="mr-2" placeholder="New folder name" bind:value={newFolderName} />
+			<div class="flex flex-col gap-2">
+				<input placeholder="New folder name" bind:value={newFolderName} />
 				<Button size="md" startIcon={{ icon: Plus }} disabled={!newFolderName} on:click={addFolder}>
 					New&nbsp;folder
 				</Button>

package/package/components/PersistentScriptDrawer.svelte

@@ -1,7 +1,7 @@
 <script>import { JobService } from '../gen';
 import { Badge, Button, Drawer } from './common';
 import DrawerContent from './common/drawer/DrawerContent.svelte';
-import { createEventDispatcher } from 'svelte';
+import { createEventDispatcher, onDestroy } from 'svelte';
 import { workspaceStore } from '../stores';
 import { displayDate, sleep, sendUserToast } from '../utils';
 import TableCustom from './TableCustom.svelte';
@@ -44,7 +44,7 @@ async function loadQueuedJobsOnce() {
     // toggle queuedJobsLoading to false in 1 secs to let some time for the animation to play
     setTimeout(() => {
         queuedJobsLoading = false;
-    }, 1000 - (endStart - timeStart));
+    }, 3000 - (endStart - timeStart));
 }
 async function scaleToZero() {
     cancellingInProgress = true;
@@ -72,6 +72,9 @@ async function exit() {
     loadQueuedJobs = false;
     drawer.closeDrawer?.();
 }
+onDestroy(() => {
+    loadQueuedJobs = false;
+});
 </script>
 
 <Drawer
@@ -99,7 +102,7 @@ async function exit() {
 				variant="border"
 				on:click={loadQueuedJobsOnce}
 			>
-				<RefreshCw class={queuedJobsLoading ? 'animate-spin' : ''} size="xs" />Refresh
+				<RefreshCw class={queuedJobsLoading ? 'animate-spin' : ''} size={14} />
 			</Button>
 		</div>
 		<TableCustom>