windmill-components 1.60.4 → 1.83.1

package/components/apps/editor/AppPreview.svelte

@@ -1,12 +1,17 @@
-<script>import { onMount, setContext } from 'svelte';
-import { fade } from 'svelte/transition';
-import { cubicOut } from 'svelte/easing';
+<script>import { setContext } from 'svelte';
 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';
+import RecomputeAllComponents from './RecomputeAllComponents.svelte';
+import GridViewer from './GridViewer.svelte';
+import { Component } from './component';
+import { twMerge } from 'tailwind-merge';
+import { columnConfiguration } from '../gridUtils';
+import { HiddenComponent } from '../components';
+import { deepEqual } from 'fast-equals';
+import { dfs } from './appUtils';
 export let app;
 export let appPath;
 export let breakpoint;
@@ -18,8 +23,6 @@ export let context;
 export let noBackend = false;
 export let isLocked = false;
 const appStore = writable(app);
-const worldStore = writable(undefined);
-const staticOutputs = writable({});
 const selectedComponent = writable(undefined);
 const mode = writable('preview');
 const connectingInput = writable({
@@ -27,55 +30,130 @@ const connectingInput = writable({
     input: undefined,
     hoveredComponent: undefined
 });
-const runnableComponents = writable({});
-setContext('AppEditorContext', {
-    worldStore,
-    staticOutputs,
-    lazyGrid: writable(app.grid),
+const allIdsInPath = writable([]);
+const parentWidth = writable(0);
+setContext('AppViewerContext', {
+    worldStore: buildWorld(context),
     app: appStore,
     summary: writable(summary),
     selectedComponent,
     mode,
     connectingInput,
     breakpoint,
-    runnableComponents,
+    runnableComponents: writable({}),
     appPath,
     workspace,
     onchange: undefined,
     isEditor,
     jobs: writable([]),
     staticExporter: writable({}),
-    noBackend
+    noBackend,
+    errorByComponent: writable({}),
+    openDebugRun: writable(undefined),
+    focusedGrid: writable(undefined),
+    stateId: writable(0),
+    parentWidth,
+    state: writable({}),
+    componentControl: writable({}),
+    hoverStore: writable(undefined),
+    allIdsInPath
 });
-let mounted = false;
-onMount(() => {
-    mounted = true;
-});
-$: mounted && ($worldStore = buildWorld($staticOutputs, undefined, context));
+let ncontext = context;
+function hashchange(e) {
+    ncontext.hash = e.newURL.split('#')[1];
+    ncontext = ncontext;
+}
+let previousSelectedIds = undefined;
+$: if (!deepEqual(previousSelectedIds, $selectedComponent)) {
+    previousSelectedIds = $selectedComponent;
+    $allIdsInPath = ($selectedComponent ?? [])
+        .flatMap((id) => dfs(app.grid, id, app.subgrids ?? {}))
+        .filter((x) => x != undefined);
+}
 $: width = $breakpoint === 'sm' ? 'max-w-[640px]' : 'w-full ';
 $: lockedClasses = isLocked ? '!max-h-[400px] overflow-hidden pointer-events-none' : '';
 </script>
 
+<svelte:window on:hashchange={hashchange} />
+
+<div id="app-editor-top-level-drawer" />
+
 <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">
+	<div
+		class="{$$props.class} {lockedClasses} h-full 
+	w-full {app.fullscreen ? '' : 'max-w-6xl'} mx-auto"
+	>
 		{#if $appStore.grid}
-			<div class={classNames('mx-auto pb-4', width)}>
-				<GridEditor {policy} />
+			<div
+				class={classNames(
+					'mx-auto',
+					width,
+					$appStore?.norefreshbar ? 'invisible h-0 overflow-hidden' : ''
+				)}
+			>
+				<div
+					class="w-full sticky z-[1001] top-0 flex justify-between border-b bg-gray-50 px-4 py-1 items-center gap-4"
+				>
+					<h2 class="truncate">{summary}</h2>
+					<RecomputeAllComponents />
+					<div class="text-2xs text-gray-600">
+						{policy.on_behalf_of ? `on behalf of ${policy.on_behalf_of_email}` : ''}
+					</div>
+				</div>
 			</div>
 		{/if}
+
+		<div
+			style={app.css?.['app']?.['grid']?.style}
+			class={twMerge('px-4 pt-4 pb-2 overflow-visible', app.css?.['app']?.['grid']?.class ?? '')}
+			bind:clientWidth={$parentWidth}
+		>
+			<div>
+				<GridViewer
+					allIdsInPath={$allIdsInPath}
+					items={app.grid}
+					let:dataItem
+					rowHeight={36}
+					cols={columnConfiguration}
+					gap={[4, 2]}
+				>
+					<!-- svelte-ignore a11y-click-events-have-key-events -->
+					<div
+						class={'h-full w-full center-center'}
+						on:pointerdown={() => ($selectedComponent = [dataItem.id])}
+					>
+						<Component render={true} component={dataItem.data} selected={false} locked={true} />
+					</div>
+				</GridViewer>
+			</div>
+		</div>
 	</div>
+
 	{#if isLocked}
 		<!-- svelte-ignore a11y-click-events-have-key-events -->
 		<div
-			transition:fade|local={{ duration: 200, easing: cubicOut }}
-			on:click={() => isLocked = false}
+			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}>
+			<Button on:click={() => (isLocked = false)}>
 				Unlock preview
 				<Unlock size={18} class="ml-1" strokeWidth={2.5} />
 			</Button>
 		</div>
 	{/if}
 </div>
+
+{#if app.hiddenInlineScripts}
+	{#each app.hiddenInlineScripts as script, index}
+		{#if script}
+			<HiddenComponent
+				id={`bg_${index}`}
+				inlineScript={script.inlineScript}
+				name={script.name}
+				fields={script.fields}
+				doNotRecomputeOnInputChanged={script.doNotRecomputeOnInputChanged ?? false}
+				recomputableByRefreshButton={script.autoRefresh ?? false}
+			/>
+		{/if}
+	{/each}
+{/if}

package/components/apps/editor/ComponentHeader.svelte

@@ -1,54 +1,110 @@
 <script>import { classNames } from '../../../utils';
-import { Anchor, Move } from 'lucide-svelte';
-import { createEventDispatcher } from 'svelte';
+import { Anchor, Bug, Expand, Move } from 'lucide-svelte';
+import { createEventDispatcher, getContext } from 'svelte';
+import Popover from '../../Popover.svelte';
+import { Alert, Button } from '../../common';
+import { twMerge } from 'tailwind-merge';
+import { getErrorFromLatestResult } from './appUtils';
 export let component;
 export let selected;
 export let locked = false;
-export let pointerdown = false;
 export let hover = false;
+export let shouldHideActions = false;
 const dispatch = createEventDispatcher();
+const { errorByComponent, openDebugRun, jobs, connectingInput } = getContext('AppViewerContext');
+$: error = getErrorFromLatestResult(component.id, $errorByComponent, $jobs);
+function openDebugRuns() {
+    if ($openDebugRun) {
+        $openDebugRun(component.id);
+    }
+}
 </script>
 
-<span
-	title={`Id: ${component.id}`}
-	class={classNames(
-		'px-2 text-2xs font-bold w-fit absolute shadow  -top-1 -left-2 border z-50',
-		selected
-			? 'bg-indigo-500/90 border-blue-500 text-white'
-			: 'bg-gray-200/90 border-gray-300  text-gray-500'
-	)}
-	style="padding-top: 1px; padding-bottom: 1px;"
->
-	{component.id}
-</span>
-
-{#if pointerdown || selected || hover}
-	<button
-		title="Position locking"
-		class={classNames(
-			'text-gray-800 px-1 text-2xs py-0.5 font-bold w-fit shadow border border-gray-300 absolute  -top-1  right-[2.5rem] z-50 cursor-pointer',
-			' hover:bg-gray-300',
-			selected ? 'bg-gray-200/80' : 'bg-gray-200/80'
+{#if selected || hover}
+	<span
+		on:mousedown|stopPropagation|capture
+		draggable="false"
+		title={`Id: ${component.id}`}
+		class={twMerge(
+			'px-2 text-2xs font-semibold w-fit absolute shadow -top-[9px] -left-[8px] border rounded-sm z-50 cursor-move',
+			selected
+				? 'bg-indigo-500/90 border-indigo-600 text-white'
+				: $connectingInput.opened
+				? 'bg-red-500/90 border-red-600 text-white'
+				: 'bg-blue-500/90 border-blue-600 text-white'
 		)}
-		on:click={() => dispatch('lock')}
 	>
-		{#if locked}
-			<Anchor aria-label="Unlock position" size={14} class="text-orange-500" />
-		{:else}
-			<Anchor aria-label="Lock position" size={14} />
-		{/if}
-	</button>
+		{component.id}
+	</span>
 {/if}
 
-{#if selected || hover}
+{#if selected && !shouldHideActions}
+	<div class="top-[-9px] -right-[8px] flex flex-row absolute gap-1.5 z-50">
+		<button
+			title="Expand"
+			class={classNames(
+				'px-1 text-2xs py-0.5 font-bold w-fit border cursor-pointer rounded-sm',
+				'bg-indigo-100 text-indigo-600 border-indigo-500 hover:bg-indigo-200 hover:text-indigo-800'
+			)}
+			on:click={() => dispatch('expand')}
+			on:pointerdown|stopPropagation
+		>
+			<Expand aria-label="Expand position" size={14} />
+		</button>
+		<button
+			title="Lock Position"
+			class={classNames(
+				'px-1 text-2xs py-0.5 font-bold w-fit border  rounded-sm cursor-pointer',
+				'bg-indigo-100 text-indigo-600 border-indigo-500 hover:bg-indigo-200 hover:text-indigo-800'
+			)}
+			on:click={() => dispatch('lock')}
+			on:pointerdown|stopPropagation
+		>
+			{#if locked}
+				<Anchor aria-label="Unlock position" size={14} class="text-orange-500" />
+			{:else}
+				<Anchor aria-label="Lock position" size={14} />
+			{/if}
+		</button>
+		<span
+			draggable="false"
+			title="Move"
+			on:mousedown|stopPropagation|capture
+			class={classNames(
+				'px-1 text-2xs py-0.5 font-bold w-fit border cursor-move rounded-sm',
+				'bg-indigo-100 text-indigo-600 border-indigo-500 hover:bg-indigo-200 hover:text-indigo-800'
+			)}
+		>
+			<Move size={14} />
+		</span>
+	</div>
+{/if}
+
+{#if error}
+	{@const json = JSON.parse(JSON.stringify(error))}
 	<span
-		title="Move"
-		on:mousedown|stopPropagation|capture
+		title="Error"
 		class={classNames(
-			'text-gray-600 px-1 text-2xs py-0.5 font-bold rounded-t-sm w-fit absolute border border-gray-300 -top-1 shadow right-[4.5rem] z-50 cursor-move',
-			'bg-gray-200/80'
+			'text-red-500 px-1 text-2xs py-0.5 font-bold w-fit absolute border border-red-500 -bottom-1  shadow left-1/2 transform -translate-x-1/2 z-50 cursor-pointer',
+			'bg-red-100/80'
 		)}
 	>
-		<Move size={14} />
+		<Popover notClickable placement="bottom" popupClass="!bg-white border w-96">
+			<Bug size={14} />
+			<span slot="text">
+				<div class="bg-white">
+					<Alert type="error" title={`${json?.name}: ${json?.message}`}>
+						<div class="flex flex-col gap-2">
+							<div>
+								<pre class=" whitespace-pre-wrap text-gray-900 bg-white border w-full p-4 text-xs">
+									{json?.stack ?? ''}	
+								</pre>
+							</div>
+							<Button color="red" variant="border" on:click={openDebugRuns}>Open Debug Runs</Button>
+						</div>
+					</Alert>
+				</div>
+			</span>
+		</Popover>
 	</span>
 {/if}

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

@@ -1,15 +1,17 @@
 import { SvelteComponentTyped } from "svelte";
-import type { AppComponent } from '../types';
+import type { AppComponent } from './component';
 declare const __propDef: {
     props: {
         component: AppComponent;
         selected: boolean;
         locked?: boolean | undefined;
-        pointerdown?: boolean | undefined;
         hover?: boolean | undefined;
+        shouldHideActions?: boolean | undefined;
     };
     events: {
         mousedown: MouseEvent;
+        pointerdown: PointerEvent;
+        expand: CustomEvent<any>;
         lock: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;

package/components/apps/editor/ConnectionInstructions.svelte

@@ -0,0 +1,29 @@
+<script>import { Alert, Button } from '../../common';
+import { getContext } from 'svelte';
+import { secondaryMenu } from './settingsPanel/secondaryMenu';
+const { connectingInput } = getContext('AppViewerContext');
+function stopConnecting() {
+    $connectingInput.opened = false;
+    $connectingInput.input = undefined;
+    secondaryMenu.close();
+}
+</script>
+
+<Alert title="Connecting" type="info">
+	<div class="flex gap-2 flex-col">
+		Click on the output of the component you want to connect to on the left panel.
+		<div class="my-2">
+			<ol class="list-disc flex gap-2 flex-col">
+				<li>
+					You can also navigate your app in a viewer mode: You won't be able to fire any events.
+				</li>
+				<li> Clicking on a component will open the component's output on the left. </li>
+			</ol>
+		</div>
+		<div>
+			<Button color="blue" variant="border" size="xs" on:click={stopConnecting}>
+				Stop connecting
+			</Button>
+		</div>
+	</div>
+</Alert>

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

@@ -0,0 +1,14 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ConnectionInstructionsProps = typeof __propDef.props;
+export type ConnectionInstructionsEvents = typeof __propDef.events;
+export type ConnectionInstructionsSlots = typeof __propDef.slots;
+export default class ConnectionInstructions extends SvelteComponentTyped<ConnectionInstructionsProps, ConnectionInstructionsEvents, ConnectionInstructionsSlots> {
+}
+export {};

package/components/apps/editor/GridEditor.svelte

@@ -1,20 +1,24 @@
 <script>import { getContext } from 'svelte';
-import Grid from 'svelte-grid';
-import ComponentEditor from './ComponentEditor.svelte';
-import { classNames } from '../../../utils';
-import { columnConfiguration, disableDrag, enableDrag, isFixed, toggleFixed } from '../gridUtils';
+import { columnConfiguration, isFixed, toggleFixed } from '../gridUtils';
+import { twMerge } from 'tailwind-merge';
 import RecomputeAllComponents from './RecomputeAllComponents.svelte';
+import HiddenComponent from '../components/helpers/HiddenComponent.svelte';
+import Component from './component/Component.svelte';
+import { push } from '../../../history';
+import { dfs, expandGriditem, findGridItem } from './appUtils';
+import Grid from '../svelte-grid/Grid.svelte';
+import { deepEqual } from 'fast-equals';
+import ComponentWrapper from './component/ComponentWrapper.svelte';
+import { classNames } from '../../../utils';
 export let policy;
-const { selectedComponent, app, mode, connectingInput, staticOutputs, runnableComponents, lazyGrid, summary } = getContext('AppEditorContext');
-// The drag is disabled when the user is connecting an input
-$: setAllDrags($mode === 'preview' || $connectingInput.opened);
-function setAllDrags(enable) {
-    if (enable) {
-        $app.grid.map((gridItem) => disableDrag(gridItem));
-    }
-    else {
-        $app.grid.map((gridItem) => enableDrag(gridItem));
-    }
+const { selectedComponent, app, mode, connectingInput, runnableComponents, summary, focusedGrid, parentWidth, breakpoint, allIdsInPath } = getContext('AppViewerContext');
+const { history } = getContext('AppEditorContext');
+let previousSelectedIds = undefined;
+$: if (!deepEqual(previousSelectedIds, $selectedComponent)) {
+    previousSelectedIds = $selectedComponent;
+    $allIdsInPath = ($selectedComponent ?? [])
+        .flatMap((id) => dfs($app.grid, id, $app.subgrids ?? {}))
+        .filter((x) => x != undefined);
 }
 function removeGridElement(component) {
     if (component) {
@@ -36,120 +40,113 @@ function removeGridElement(component) {
             }
             return gridComponent.data.id !== component?.id;
         });
-        // Delete static inputs
-        delete $staticOutputs[component.id];
-        $staticOutputs = $staticOutputs;
         delete $runnableComponents[component.id];
         $runnableComponents = $runnableComponents;
         $selectedComponent = undefined;
     }
 }
-function selectComponent(id) {
-    if (!$connectingInput.opened) {
-        $selectedComponent = id;
-    }
-}
-$: $app.grid && recomputeLazyGrid();
-let intervalId = undefined;
-function recomputeLazyGrid() {
-    {
-        if (intervalId) {
-            clearTimeout(intervalId);
-        }
-        intervalId = setTimeout(() => {
-            lazyGrid.set($app.grid);
-            intervalId = undefined;
-        }, 100);
-    }
-}
-let pointerdown = false;
-const onpointerdown = () => {
-    pointerdown = true;
-};
-const onpointerup = () => {
-    pointerdown = false;
-};
 </script>
 
-<div class="pb-2 relative z-20">
+<div class="relative w-full z-20 overflow-visible">
 	<div
-		class="w-full flex justify-between border-b {$connectingInput?.opened
+		class="w-full sticky top-0 flex justify-between border-b {$connectingInput?.opened
 			? ''
-			: 'bg-gray-50 '}px-4 py-2 items-center gap-4"
+			: 'bg-gray-50 '} px-4 py-1 items-center gap-4"
+		style="z-index: 1000;"
 	>
 		<h2 class="truncate">{$summary}</h2>
 		{#if !$connectingInput.opened}
 			<RecomputeAllComponents />
 		{/if}
-		<div class="text-2xs text-gray-600"
-			>{policy.on_behalf_of ? `on behalf of ${policy.on_behalf_of_email}` : ''}</div
-		>
+		<div class="flex text-2xs text-gray-600 gap-1 items-center">
+			<div class="py-2 pr-2  text-gray-600 flex gap-2 items-center">
+				Hide bar on view
+				<input class="windmillapp" type="checkbox" bind:checked={$app.norefreshbar} />
+			</div>
+			<div>
+				{policy.on_behalf_of ? `on behalf of ${policy.on_behalf_of_email}` : ''}
+			</div>
+		</div>
 	</div>
+
+	<!-- svelte-ignore a11y-click-events-have-key-events -->
 	<div
-		class="px-4 pt-4 {$connectingInput?.opened ? '' : ''}"
-		on:pointerdown={onpointerdown}
-		on:pointerleave={onpointerup}
-		on:pointerup={onpointerup}
+		style={$app.css?.['app']?.['grid']?.style}
+		class={twMerge('px-4 pt-4 pb-2 overflow-visible', $app.css?.['app']?.['grid']?.class ?? '')}
+		on:pointerdown={() => {
+			$selectedComponent = undefined
+			$focusedGrid = undefined
+		}}
+		bind:clientWidth={$parentWidth}
 	>
-		<Grid
-			bind:items={$app.grid}
-			let:dataItem
-			rowHeight={36}
-			cols={columnConfiguration}
-			fastStart={true}
-			gap={[4, 2]}
-		>
-			{#each $lazyGrid as gridComponent (gridComponent.id)}
-				{#if gridComponent.data.id === dataItem.data.id}
-					<!-- svelte-ignore a11y-click-events-have-key-events -->
-					{#if $connectingInput.opened}
-						{#if $connectingInput.opened}
-							<div
-								on:pointerenter={() => ($connectingInput.hoveredComponent = gridComponent.data.id)}
-								on:pointerleave={() => ($connectingInput.hoveredComponent = undefined)}
-								class="absolute  w-full h-full bg-black border-2 bg-opacity-25 z-20 flex justify-center items-center"
-							/>
-						{/if}
-						<div
-							style="transform: translate(-50%, -50%);"
-							class="absolute w-fit justify-center bg-indigo-500/90 left-[50%] top-[50%] z-50 px-6 rounded border text-white py-2 text-5xl center-center"
-							>{dataItem.data.id}</div
-						>
-					{/if}
-					<!-- svelte-ignore a11y-click-events-have-key-events -->
-					<div
-						on:pointerdown={() => {
-							selectComponent(dataItem.data.id)
+		<div class={!$focusedGrid && $mode !== 'preview' ? 'border-gray-400 border border-dashed' : ''}>
+			<Grid
+				allIdsInPath={$allIdsInPath}
+				selectedIds={$selectedComponent}
+				items={$app.grid}
+				on:redraw={(e) => {
+					push(history, $app)
+					$app.grid = e.detail
+				}}
+				let:dataItem
+				rowHeight={36}
+				cols={columnConfiguration}
+				fastStart={true}
+				gap={[4, 2]}
+			>
+				<ComponentWrapper
+					id={dataItem.id}
+					type={dataItem.data.type}
+					class={classNames(
+						'h-full w-full center-center',
+						Boolean($selectedComponent?.includes(dataItem.id)) ? 'active-grid-item' : ''
+					)}
+				>
+					<Component
+						render={true}
+						component={dataItem.data}
+						selected={Boolean($selectedComponent?.includes(dataItem.id))}
+						locked={isFixed(dataItem)}
+						on:delete={() => removeGridElement(dataItem.data)}
+						on:lock={() => {
+							const gridItem = findGridItem($app, dataItem.id)
+							if (gridItem) {
+								toggleFixed(gridItem)
+							}
+							$app = $app
 						}}
-						class={classNames(
-							'h-full w-full flex justify-center align-center items-center',
-							gridComponent.data.card ? 'border border-gray-100' : ''
-						)}
-					>
-						<ComponentEditor
-							{pointerdown}
-							bind:component={gridComponent.data}
-							selected={$selectedComponent === dataItem.data.id}
-							locked={isFixed(gridComponent)}
-							on:delete={() => removeGridElement(gridComponent.data)}
-							on:lock={() => {
-								let fComponent = $app.grid.find((c) => c.id === gridComponent.id)
-								if (fComponent) {
-									fComponent = toggleFixed(fComponent)
-								}
-							}}
-						/>
-					</div>
-				{/if}
-			{/each}
-		</Grid>
+						on:expand={() => {
+							push(history, $app)
+							$selectedComponent = [dataItem.id]
+							expandGriditem($app.grid, dataItem.id, $breakpoint)
+							$app = $app
+						}}
+					/>
+				</ComponentWrapper>
+			</Grid>
+		</div>
 	</div>
 </div>
 
-<style>
+{#if $app.hiddenInlineScripts}
+	{#each $app.hiddenInlineScripts as script, index}
+		{#if script}
+			<HiddenComponent
+				id={`bg_${index}`}
+				inlineScript={script.inlineScript}
+				name={script.name}
+				fields={script.fields}
+				doNotRecomputeOnInputChanged={script.doNotRecomputeOnInputChanged ?? false}
+				recomputableByRefreshButton={script.autoRefresh ?? false}
+			/>
+		{/if}
+	{/each}
+{/if}
+
+<style global>
 	:global(.svlt-grid-shadow) {
 		/* Back shadow */
-		background: rgb(147 197 253) !important;
+		background: #93c4fdd0 !important;
 	}
 	:global(.svlt-grid-active) {
 		opacity: 1 !important;