windmill-components 1.82.8 → 1.82.9

package/components/apps/components/display/AppDisplayComponent.svelte

@@ -19,28 +19,22 @@ const outputs = initOutput($worldStore, id, {
 </script>
 
 <RunnableWrapper {outputs} {render} {componentInput} {id} bind:initializing bind:result>
-	<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',
-				$app.css?.['displaycomponent']?.['header']?.class,
-				customCss?.header?.class
-			)}
-		>
-			Results
-		</div>
-		<div
-			style={twMerge(
-				$app.css?.['displaycomponent']?.['container']?.style,
-				customCss?.container?.style
-			)}
-			class={twMerge(
-				'p-2 grow',
-				$app.css?.['displaycomponent']?.['container']?.class,
-				customCss?.container?.class
-			)}
-		>
-			<DisplayResult {result} {requireHtmlApproval} />
-		</div>
+	<div
+		class={twMerge(
+			'w-full border-b px-2 text-xs p-1 font-semibold bg-gray-500 text-white rounded-t-sm',
+			$app.css?.['displaycomponent']?.['header']?.class,
+			customCss?.header?.class
+		)}
+	>
+		Results
+	</div>
+	<div
+		class={twMerge(
+			'p-2',
+			$app.css?.['displaycomponent']?.['container']?.class,
+			customCss?.container?.class
+		)}
+	>
+		<DisplayResult {result} {requireHtmlApproval} />
 	</div>
 </RunnableWrapper>

package/components/apps/components/display/AppHtml.svelte

@@ -7,7 +7,7 @@ export let componentInput;
 export let initializing = undefined;
 export let customCss = undefined;
 export let render;
-const { app, worldStore, selectedComponent } = getContext('AppViewerContext');
+const { app, worldStore } = getContext('AppViewerContext');
 const outputs = initOutput($worldStore, id, {
     result: undefined,
     loading: false
@@ -26,10 +26,6 @@ $: css = concatCustomCss($app.css?.htmlcomponent, customCss);
 	bind:clientHeight={h}
 	bind:clientWidth={w}
 >
-	<button
-		class="absolute bottom-0 left-0 text-xs border px-2 py-0.5 bg-white/80"
-		on:click={() => ($selectedComponent = [id])}>Select</button
-	>
 	<RunnableWrapper
 		{outputs}
 		{render}
@@ -50,7 +46,5 @@ $: css = concatCustomCss($app.css?.htmlcomponent, customCss);
 					: 'No html'}
 			/>
 		{/key}
-		<!-- svelte-ignore a11y-click-events-have-key-events -->
-		<div on:click|stopPropagation class="absolute top-0 h-full w-full" />
 	</RunnableWrapper>
 </div>

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

@@ -10,8 +10,6 @@ declare const __propDef: {
         render: boolean;
     };
     events: {
-        click: MouseEvent;
-    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};

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

@@ -1,15 +1,12 @@
 <script>import { getContext, onMount } from 'svelte';
-import { initConfig, initOutput } from '../../editor/appUtils';
-import { components } from '../../editor/component';
-import ResolveConfig from '../helpers/ResolveConfig.svelte';
+import { initOutput } from '../../editor/appUtils';
 import RunnableWrapper from '../helpers/RunnableWrapper.svelte';
 export let id;
 export let componentInput;
-export let configuration;
+// export let configuration: Record<string, AppInput>
 export let initializing = undefined;
 export let render;
 const { worldStore } = getContext('AppViewerContext');
-let resolvedConfig = initConfig(components['plotlycomponent'].initialData.configuration, configuration);
 const outputs = initOutput($worldStore, id, {
     result: undefined,
     loading: false
@@ -30,23 +27,9 @@ $: Plotly &&
     divEl &&
     h &&
     w &&
-    Plotly.newPlot(divEl, Array.isArray(result) ? result : [result], {
-        width: w,
-        height: h,
-        margin: { l: 50, r: 40, b: 40, t: 40, pad: 4 },
-        ...resolvedConfig.layout
-    }, { responsive: true, displayModeBar: false });
+    Plotly.newPlot(divEl, Array.isArray(result) ? result : [result], { width: w, height: h, margin: { l: 50, r: 40, b: 40, t: 40, pad: 4 } }, { responsive: true, displayModeBar: false });
 </script>
 
-{#each Object.keys(components['plotlycomponent'].initialData.configuration) as key (key)}
-	<ResolveConfig
-		{id}
-		{key}
-		bind:resolvedConfig={resolvedConfig[key]}
-		configuration={configuration[key]}
-	/>
-{/each}
-
 <div class="w-full h-full" bind:clientHeight={h} bind:clientWidth={w}>
 	<RunnableWrapper {outputs} {render} {componentInput} {id} bind:initializing bind:result>
 		<div on:pointerdown bind:this={divEl} />

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

@@ -1,11 +1,9 @@
 import { SvelteComponentTyped } from "svelte";
 import type { AppInput } from '../../inputType';
-import type { RichConfigurations } from '../../types';
 declare const __propDef: {
     props: {
         id: string;
         componentInput: AppInput | undefined;
-        configuration: RichConfigurations;
         initializing?: boolean | undefined;
         render: boolean;
     };

package/components/apps/components/inputs/AppMultiSelect.svelte

@@ -42,11 +42,7 @@ $: css = concatCustomCss($app.css?.selectcomponent, customCss);
 <InputValue {id} input={configuration.placeholder} bind:value={placeholder} />
 
 <AlignWrapper {render} {horizontalAlignment} {verticalAlignment}>
-	<div
-		class="app-select w-full"
-		style="height: 34px; overflow: auto;"
-		on:pointerdown|stopPropagation
-	>
+	<div class="app-select w-full" style="height: 34px" on:pointerdown|stopPropagation>
 		{#if !value || Array.isArray(value)}
 			<Select
 				--border-radius="0"

package/components/apps/components/layout/AppContainer.svelte

@@ -15,6 +15,7 @@ function onFocus() {
         subGridIndex: 0
     };
 }
+$: $selectedComponent?.includes(id) && onFocus();
 $: css = concatCustomCss($app.css?.containercomponent, customCss);
 </script>
 
@@ -29,7 +30,6 @@ $: css = concatCustomCss($app.css?.containercomponent, customCss);
 			containerHeight={componentContainerHeight}
 			on:focus={() => {
 				$selectedComponent = [id]
-				onFocus()
 			}}
 		/>
 	{/if}

package/components/apps/editor/AppEditor.svelte

@@ -27,8 +27,6 @@ import ItemPicker from '../../ItemPicker.svelte';
 import VariableEditor from '../../VariableEditor.svelte';
 import { SecondaryMenu } from './settingsPanel/secondaryMenu';
 import { Component, Paintbrush, Plus } from 'lucide-svelte';
-import { findGridItem, findGridItemParentGrid } from './appUtils';
-import { findItemsById } from '../svelte-grid/utils/matrix';
 export let app;
 export let path;
 export let initialMode = 'dnd';
@@ -79,8 +77,7 @@ setContext('AppViewerContext', {
     parentWidth: writable(0),
     state: writable({}),
     componentControl: writable({}),
-    hoverStore: writable(undefined),
-    allIdsInPath: writable([])
+    hoverStore: writable(undefined)
 });
 setContext('AppEditorContext', {
     history,
@@ -117,32 +114,6 @@ let befSelected = undefined;
 $: if ($selectedComponent?.[0] != befSelected) {
     befSelected = $selectedComponent?.[0];
     selectedTab = 'settings';
-    if (befSelected) {
-        if (!['ctx', 'state'].includes(befSelected) && !befSelected?.startsWith('bg_')) {
-            let item = findGridItem($appStore, befSelected);
-            if (item?.data.type === 'containercomponent') {
-                $focusedGrid = {
-                    parentComponentId: befSelected,
-                    subGridIndex: 0
-                };
-            }
-            else {
-                let subgrid = findGridItemParentGrid($appStore, befSelected);
-                if (subgrid) {
-                    try {
-                        $focusedGrid = {
-                            parentComponentId: subgrid.split('-')[0],
-                            subGridIndex: parseInt(subgrid.split('-')[1])
-                        };
-                    }
-                    catch { }
-                }
-                else {
-                    $focusedGrid = undefined;
-                }
-            }
-        }
-    }
 }
 let itemPicker = undefined;
 $: if ($pickVariableCallback) {
@@ -236,6 +207,7 @@ let variableEditor = undefined;
 								<Tab value="insert" size="xs">
 									<div class="m-1 center-center gap-1">
 										<Plus size={18} />
+										<span>Insert</span>
 									</div>
 								</Tab>
 								<Tab value="settings" size="xs">
@@ -247,6 +219,7 @@ let variableEditor = undefined;
 								<Tab value="css" size="xs">
 									<div class="m-1 center-center gap-1">
 										<Paintbrush size={18} />
+										<span>Styling</span>
 									</div>
 								</Tab>
 								<div slot="content" class="h-full overflow-y-auto">

package/components/apps/editor/AppPreview.svelte

@@ -10,8 +10,6 @@ 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;
@@ -30,7 +28,6 @@ const connectingInput = writable({
     input: undefined,
     hoveredComponent: undefined
 });
-const allIdsInPath = writable([]);
 const parentWidth = writable(0);
 setContext('AppViewerContext', {
     worldStore: buildWorld(context),
@@ -55,21 +52,13 @@ setContext('AppViewerContext', {
     parentWidth,
     state: writable({}),
     componentControl: writable({}),
-    hoverStore: writable(undefined),
-    allIdsInPath
+    hoverStore: writable(undefined)
 });
 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>
@@ -110,7 +99,7 @@ $: lockedClasses = isLocked ? '!max-h-[400px] overflow-hidden pointer-events-non
 		>
 			<div>
 				<GridViewer
-					allIdsInPath={$allIdsInPath}
+					onTopId={$selectedComponent?.[0]}
 					items={app.grid}
 					let:dataItem
 					rowHeight={36}

package/components/apps/editor/GridEditor.svelte

@@ -6,20 +6,12 @@ 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 { expandGriditem, findGridItem } from './appUtils';
 import Grid from '../svelte-grid/Grid.svelte';
 import { selectId } from '../utils';
-import { deepEqual } from 'fast-equals';
 export let policy;
-const { selectedComponent, app, mode, connectingInput, runnableComponents, summary, focusedGrid, parentWidth, breakpoint, allIdsInPath } = getContext('AppViewerContext');
+const { selectedComponent, app, mode, connectingInput, runnableComponents, summary, focusedGrid, parentWidth, breakpoint } = 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) {
         $app.grid = $app.grid.filter((gridComponent) => {
@@ -89,7 +81,6 @@ function selectComponent(e, id) {
 	>
 		<div class={!$focusedGrid && $mode !== 'preview' ? 'border-gray-400 border border-dashed' : ''}>
 			<Grid
-				allIdsInPath={$allIdsInPath}
 				selectedIds={$selectedComponent}
 				items={$app.grid}
 				on:redraw={(e) => {

package/components/apps/editor/GridViewer.svelte

@@ -8,7 +8,7 @@ export let rowHeight;
 export let cols;
 export let gap = [10, 10];
 export let throttleUpdate = 100;
-export let allIdsInPath = undefined;
+export let onTopId = undefined;
 export let containerWidth = undefined;
 export let parentWidth = undefined;
 let getComputedCols;
@@ -56,7 +56,7 @@ onMount(() => {
 <div class="svlt-grid-container" style="height: {containerHeight}px" bind:this={container}>
 	{#if xPerPx}
 		{#each items as item (item.id)}
-			{@const onTop = allIdsInPath?.includes(item.id)}
+			{@const onTop = item.id == onTopId}
 			{@const width =
 				Math.min(getComputedCols, item[getComputedCols] && item[getComputedCols].w) * xPerPx -
 				gapX * 2}

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

@@ -7,7 +7,7 @@ declare class __sveltets_Render<T> {
         cols: [number, number][];
         gap?: number[] | undefined;
         throttleUpdate?: number | undefined;
-        allIdsInPath?: string[] | undefined;
+        onTopId?: string | undefined;
         containerWidth?: number | undefined;
         parentWidth?: number | undefined;
     };

package/components/apps/editor/SubGridEditor.svelte

@@ -20,7 +20,7 @@ export let visible = true;
 export let id;
 export let shouldHighlight = true;
 const dispatch = createEventDispatcher();
-const { app, connectingInput, selectedComponent, focusedGrid, mode, parentWidth, breakpoint, allIdsInPath } = getContext('AppViewerContext');
+const { app, connectingInput, selectedComponent, focusedGrid, mode, parentWidth, breakpoint } = getContext('AppViewerContext');
 const editorContext = getContext('AppEditorContext');
 $: highlight = id === $focusedGrid?.parentComponentId && shouldHighlight;
 const onpointerdown = (e) => {
@@ -60,7 +60,6 @@ let container = undefined;
 		{#if $mode !== 'preview'}
 			<div class={highlight ? 'border-gray-400  border border-dashed min-h-full' : ''}>
 				<Grid
-					allIdsInPath={$allIdsInPath}
 					items={$app.subgrids?.[subGridId] ?? []}
 					on:redraw={(e) => {
 						push(editorContext?.history, $app)
@@ -131,7 +130,7 @@ let container = undefined;
 			</div>
 		{:else}
 			<GridViewer
-				allIdsInPath={$allIdsInPath}
+				onTopId={$selectedComponent?.[0]}
 				items={$app.subgrids?.[subGridId] ?? []}
 				let:dataItem
 				rowHeight={36}

package/components/apps/editor/appUtils.d.ts

@@ -3,7 +3,6 @@ import { components, type AppComponent, type BaseComponent } from './component';
 import type { Output, World } from '../rx';
 import type { FilledItem } from '../svelte-grid/types';
 import type { EvalAppInput, StaticAppInput } from '../inputType';
-export declare function dfs(grid: GridItem[], id: string, subgrids: Record<string, GridItem[]>): string[] | undefined;
 export declare function findGridItemParentGrid(app: App, id: string): string | undefined;
 export declare function allsubIds(app: App, parentId: string): string[];
 export declare function findGridItem(app: App, id: string): GridItem | undefined;

package/components/apps/editor/appUtils.js

@@ -3,25 +3,6 @@ import { ccomponents, components, getRecommendedDimensionsByComponent } from './
 import { gridColumns } from '../gridUtils';
 import { allItems } from '../utils';
 import gridHelp from '../svelte-grid/utils/helper';
-export function dfs(grid, id, subgrids) {
-    for (const item of grid) {
-        if (item.id === id) {
-            return [id];
-        }
-        else if (item.data.type == 'tablecomponent' && item.data.actionButtons.find((x) => x.id)) {
-            return [item.id, id];
-        }
-        else {
-            for (let i = 0; i < (item.data.numberOfSubgrids ?? 0); i++) {
-                const res = dfs(subgrids[`${item.id}-${i}`], id, subgrids);
-                if (res) {
-                    return [item.id, ...res];
-                }
-            }
-        }
-    }
-    return undefined;
-}
 function findGridItemById(root, subGrids, id) {
     for (const gridItem of allItems(root, subGrids)) {
         if (gridItem.id === id) {

package/components/apps/editor/component/Component.svelte

@@ -1,6 +1,8 @@
 <script>import { getContext } from 'svelte';
+import { Loader2 } from 'lucide-svelte';
 import { twMerge } from 'tailwind-merge';
 import ComponentHeader from '../ComponentHeader.svelte';
+import { ccomponents, components } from './components';
 import { AppBarChart, AppDisplayComponent, AppTable, AppText, AppButton, AppPieChart, AppSelect, AppCheckbox, AppTextInput, AppNumberInput, AppDateInput, AppForm, AppScatterChart, AppTimeseries, AppHtml, AppSliderInputs, AppFormButton, VegaLiteHtml, PlotlyHtml, AppRangeInput, AppTabs, AppIcon, AppCurrencyInput, AppDivider, AppFileInput, AppImage, AppContainer, AppAggridTable, AppDrawer, AppMap, AppSplitpanes, AppPdf } from '../../components';
 import AppMultiSelect from '../../components/inputs/AppMultiSelect.svelte';
 export let component;
@@ -59,6 +61,7 @@ $: hasError = componentWithErrors.includes(component.id);
 			'h-full bg-white/40 outline-1',
 			$hoverStore === component.id && $mode !== 'preview' ? 'outline outline-blue-600' : '',
 			selected && $mode !== 'preview' ? 'outline outline-indigo-600' : '',
+			ccomponents[component.type].softWrap || hasError ? '' : 'overflow-auto',
 			$mode != 'preview' ? 'cursor-pointer' : '',
 			'relative z-auto',
 			$app.css?.['app']?.['component']?.class,
@@ -112,7 +115,6 @@ $: hasError = componentWithErrors.includes(component.id);
 		{:else if component.type === 'plotlycomponent'}
 			<PlotlyHtml
 				id={component.id}
-				configuration={component.configuration}
 				bind:initializing
 				componentInput={component.componentInput}
 				{render}

package/components/apps/editor/component/Component.svelte.d.ts

@@ -1,5 +1,5 @@
 import { SvelteComponentTyped } from "svelte";
-import type { AppComponent } from './components';
+import { type AppComponent } from './components';
 declare const __propDef: {
     props: {
         component: AppComponent;