windmill-components 1.86.0 → 1.89.0

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

@@ -1,224 +0,0 @@
-<script>import { getContext } from 'svelte';
-import { concatCustomCss } from '../../utils';
-import { InputValue } from '../helpers';
-import { twMerge } from 'tailwind-merge';
-import { Map, View, Feature } from 'ol';
-import { useGeographic } from 'ol/proj';
-import { OSM, Vector as VectorSource } from 'ol/source';
-import { Vector as VectorLayer, Tile as TileLayer } from 'ol/layer';
-import { Point } from 'ol/geom';
-import { defaults as defaultControls } from 'ol/control';
-import { findGridItem, initOutput } from '../../editor/appUtils';
-import InitializeComponent from '../helpers/InitializeComponent.svelte';
-const LAYER_NAME = {
-    MARKER: 'Marker'
-};
-export let id;
-export let configuration;
-export let customCss = undefined;
-export let render;
-const { app, worldStore, selectedComponent, connectingInput, focusedGrid, mode } = getContext('AppViewerContext');
-let outputs = initOutput($worldStore, id, {
-    mapRegion: {
-        topLeft: { lat: 0, lon: 0 },
-        bottomRight: { lat: 0, lon: 0 }
-    }
-});
-let map;
-let mapElement;
-let longitude = undefined;
-let latitude = undefined;
-let zoom = undefined;
-// If string, it's a JSON file read as text
-let markers = undefined;
-$: if (map && longitude && latitude) {
-    map.getView().setCenter([longitude, latitude]);
-}
-$: if (map && zoom) {
-    map.getView().setZoom(zoom);
-}
-$: if (map && markers) {
-    updateMarkers();
-}
-function selectComponent() {
-    if (!$connectingInput.opened) {
-        $selectedComponent = [id];
-        $focusedGrid = undefined;
-    }
-}
-function getLayersByName(name) {
-    return map
-        .getLayers()
-        .getArray()
-        .filter((l) => l.getProperties().name === LAYER_NAME[name]);
-}
-function getMarkerArray() {
-    let array = undefined;
-    if (typeof markers === 'string') {
-        try {
-            array = JSON.parse(markers);
-        }
-        catch (e) {
-            return undefined;
-        }
-    }
-    else {
-        array = markers;
-    }
-    return array?.filter((m) => !isNaN(+m.lat) && !isNaN(+m.lon));
-}
-function createMarkerLayers() {
-    const markerArray = getMarkerArray();
-    return markerArray?.map((m) => {
-        return new VectorLayer({
-            properties: {
-                name: LAYER_NAME.MARKER
-            },
-            source: new VectorSource({
-                features: [
-                    new Feature({
-                        geometry: new Point([+m.lon, +m.lat]),
-                        name: m.title
-                    })
-                ]
-            }),
-            style: {
-                'circle-radius': m.radius ?? 7,
-                'circle-fill-color': m.color ?? '#dc2626',
-                'circle-stroke-width': m.strokeWidth ?? 3,
-                'circle-stroke-color': m.strokeColor ?? '#fca5a5'
-            }
-        });
-    });
-}
-function updateMarkers() {
-    const layers = getLayersByName('MARKER');
-    if (layers?.length) {
-        layers.forEach((l) => map.removeLayer(l));
-    }
-    createMarkerLayers()?.forEach((l) => map.addLayer(l));
-}
-$: if (!map && mapElement) {
-    useGeographic();
-    map = new Map({
-        target: mapElement,
-        layers: [
-            new TileLayer({
-                source: new OSM()
-            }),
-            ...(createMarkerLayers() || [])
-        ],
-        view: new View({
-            center: [longitude ?? 0, latitude ?? 0],
-            zoom: zoom ?? 2
-        }),
-        controls: defaultControls({
-            attribution: false
-        })
-    });
-    updateRegionOutput();
-}
-$: css = concatCustomCss($app.css?.mapcomponent, customCss);
-function updateRegionOutput() {
-    if (map) {
-        let extent = map.getView().calculateExtent(map.getSize());
-        const [left, bottom, right, top] = extent;
-        if (outputs?.mapRegion) {
-            outputs.mapRegion.set({
-                topLeft: { lat: top, lon: left },
-                bottomRight: { lat: bottom, lon: right }
-            });
-        }
-    }
-}
-function handleSyncRegion() {
-    const gridItem = findGridItem($app, id);
-    if (!map || !gridItem) {
-        return;
-    }
-    const z = map.getView().getZoom();
-    updateRegionOutput();
-    if (z) {
-        //@ts-ignore
-        gridItem.data.configuration.zoom.value = z;
-    }
-    const center = map.getView().getCenter();
-    if (!center) {
-        return;
-    }
-    if (gridItem) {
-        //@ts-ignore
-        gridItem.data.configuration.longitude.value = center[0];
-        //@ts-ignore
-        gridItem.data.configuration.latitude.value = center[1];
-    }
-}
-</script>
-
-<InputValue {id} input={configuration.longitude} bind:value={longitude} />
-<InputValue {id} input={configuration.latitude} bind:value={latitude} />
-<InputValue {id} input={configuration.zoom} bind:value={zoom} />
-<InputValue {id} input={configuration.markers} bind:value={markers} />
-
-<InitializeComponent {id} />
-
-{#if render}
-	<div class="relative h-full w-full">
-		<div
-			on:pointerdown|stopPropagation={selectComponent}
-			bind:this={mapElement}
-			class={twMerge(`w-full h-full`, css?.map?.class ?? '')}
-			style={css?.map?.style ?? ''}
-		/>
-
-		{#if $mode !== 'preview'}
-			<div
-				class="absolute bottom-0 left-0 px-1 py-0.5 bg-indigo-500 text-white text-2xs"
-				on:pointerdown={handleSyncRegion}
-			>
-				Set region
-			</div>
-		{/if}
-	</div>
-{/if}
-
-<style global>
-	:global(.ol-overlaycontainer-stopevent) {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-end;
-    justify-content: flex-start
-}
-	:global(.ol-control) :global(button) {
-    margin-top: 0.25rem;
-    margin-right: 0.25rem;
-    height: 1.75rem;
-    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));
-    --tw-text-opacity: 1;
-    color: rgb(55 65 81 / 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);
-    transition-duration: 200ms;
-    display: flex;
-    justify-content: center;
-    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))
-}
-	: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))
-}</style>

package/components/apps/components/helpers/DebouncedInput.svelte

@@ -1,25 +0,0 @@
-<script>export let placeholder = 'Search...';
-// Using 'any' so 'type="number"' can be passed to the input
-// which should return a number
-export let value;
-export let debounceDelay = 500;
-let parentClass = undefined;
-export { parentClass as class };
-let timer;
-function debounce(event) {
-    clearTimeout(timer);
-    timer = setTimeout(() => {
-        const target = event.target;
-        value = target.value;
-    }, debounceDelay);
-}
-</script>
-
-<input
-	bind:value
-	{placeholder}
-	on:pointerdown|stopPropagation
-	on:keyup={debounce}
-	class={parentClass}
-	{...$$restProps}
-/>

package/components/apps/components/helpers/DebouncedInput.svelte.d.ts

@@ -1,22 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        placeholder?: string | undefined;
-        value: any;
-        debounceDelay?: number | undefined;
-        class?: string | undefined;
-    };
-    events: {
-        pointerdown: PointerEvent;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type DebouncedInputProps = typeof __propDef.props;
-export type DebouncedInputEvents = typeof __propDef.events;
-export type DebouncedInputSlots = typeof __propDef.slots;
-export default class DebouncedInput extends SvelteComponentTyped<DebouncedInputProps, DebouncedInputEvents, DebouncedInputSlots> {
-}
-export {};

package/components/apps/components/helpers/RunnableComponent.svelte

@@ -1,352 +0,0 @@
-<script>import Alert from '../../../common/alert/Alert.svelte';
-import LightweightSchemaForm from '../../../LightweightSchemaForm.svelte';
-import Popover from '../../../Popover.svelte';
-import TestJobLoader from '../../../TestJobLoader.svelte';
-import { AppService } from '../../../../gen';
-import { classNames, defaultIfEmptyString, emptySchema, sendUserToast } from '../../../../utils';
-import { deepEqual } from 'fast-equals';
-import { Bug } from 'lucide-svelte';
-import { createEventDispatcher, getContext, onDestroy } from 'svelte';
-import { computeGlobalContext, eval_like } from './eval';
-import InputValue from './InputValue.svelte';
-import RefreshButton from './RefreshButton.svelte';
-import { selectId } from '../../editor/appUtils';
-// Component props
-export let id;
-export let fields;
-export let runnable;
-export let transformer;
-export let extraQueryParams = {};
-export let autoRefresh = true;
-export let result = undefined;
-export let forceSchemaDisplay = false;
-export let wrapperClass = '';
-export let wrapperStyle = '';
-export let initializing = undefined;
-export let render;
-export let outputs;
-export let extraKey = '';
-export let recomputeOnInputChanged = true;
-export let loading = false;
-export let recomputableByRefreshButton = true;
-export let refreshOnStart = false;
-const { worldStore, runnableComponents, workspace, appPath, isEditor, jobs, noBackend, errorByComponent, mode, stateId, state, componentControl, initialized, selectedComponent, app, connectingInput } = getContext('AppViewerContext');
-const dispatch = createEventDispatcher();
-$runnableComponents[id] = {
-    autoRefresh: autoRefresh && recomputableByRefreshButton,
-    refreshOnStart,
-    cb: async (inlineScript) => {
-        await executeComponent(true, inlineScript);
-    }
-};
-if (!$initialized.initializedComponents.includes(id)) {
-    $initialized.initializedComponents = [...$initialized.initializedComponents, id];
-}
-onDestroy(() => {
-    $initialized.initializedComponents = $initialized.initializedComponents.filter((c) => c !== id);
-});
-$runnableComponents = $runnableComponents;
-let args = undefined;
-let testIsLoading = false;
-let runnableInputValues = {};
-let executeTimeout = undefined;
-$: outputs.loading?.set(loading);
-function setDebouncedExecute() {
-    executeTimeout && clearTimeout(executeTimeout);
-    executeTimeout = setTimeout(() => {
-        executeComponent(true);
-    }, 200);
-}
-function computeStaticValues() {
-    return Object.entries(fields ?? {})
-        .filter(([k, v]) => v.type == 'static')
-        .map(([name, field]) => {
-        return [name, field['value']];
-    });
-}
-let lazyStaticValues = computeStaticValues();
-let currentStaticValues = lazyStaticValues;
-$: fields && (currentStaticValues = computeStaticValues());
-$: if (!deepEqual(currentStaticValues, lazyStaticValues)) {
-    lazyStaticValues = currentStaticValues;
-    refreshIfAutoRefresh('static changed');
-}
-$: (runnableInputValues || extraQueryParams || args) &&
-    testJobLoader &&
-    refreshIfAutoRefresh('arg changed');
-$: refreshOn =
-    runnable && runnable.type === 'runnableByName' ? runnable.inlineScript?.refreshOn ?? [] : [];
-function refreshIfAutoRefresh(_src) {
-    const refreshEnabled = autoRefresh && ((recomputeOnInputChanged ?? true) || refreshOn?.length > 0);
-    if (refreshEnabled && $initialized.initialized) {
-        setDebouncedExecute();
-    }
-}
-// Test job internal state
-let testJob = undefined;
-let testJobLoader = undefined;
-let schemaStripped = autoRefresh || forceSchemaDisplay ? emptySchema() : undefined;
-$: (autoRefresh || forceSchemaDisplay) &&
-    Object.keys(fields ?? {}).length > 0 &&
-    (schemaStripped = stripSchema(fields, $stateId));
-function stripSchema(inputs, s) {
-    if (inputs === undefined) {
-        return emptySchema();
-    }
-    let schema = runnable?.type == 'runnableByName' ? runnable.inlineScript?.schema : runnable?.schema;
-    try {
-        schemaStripped = JSON.parse(JSON.stringify(schema));
-    }
-    catch (e) {
-        console.warn('Error loading schema');
-        return emptySchema();
-    }
-    // Remove hidden static inputs
-    Object.keys(inputs ?? {}).forEach((key) => {
-        const input = inputs[key];
-        if (input.type === 'static' && schemaStripped !== undefined) {
-            delete schemaStripped.properties[key];
-        }
-        if (input.type === 'connected' && schemaStripped !== undefined) {
-            delete schemaStripped.properties[key];
-        }
-    });
-    return schemaStripped;
-}
-function generateNextFrontendJobId() {
-    const prefix = 'Frontend: ';
-    let nextJobNumber = 1;
-    while ($jobs.find((j) => j.job === `${prefix}#${nextJobNumber}`)) {
-        nextJobNumber++;
-    }
-    return `${prefix}#${nextJobNumber}`;
-}
-async function executeComponent(noToast = false, inlineScriptOverride) {
-    console.debug('execute', id);
-    if (runnable?.type === 'runnableByName' && runnable.inlineScript?.language === 'frontend') {
-        loading = true;
-        try {
-            const r = await eval_like(runnable.inlineScript?.content, computeGlobalContext($worldStore, {}), false, $state, $mode == 'dnd', $componentControl, $worldStore, $runnableComponents);
-            await setResult(r);
-            $state = $state;
-        }
-        catch (e) {
-            sendUserToast('Error running frontend script: ' + e.message, true);
-            // Manually add a fake job to the job list to show the error
-            const job = generateNextFrontendJobId();
-            const error = e.body ?? e.message;
-            $errorByComponent[job] = {
-                error,
-                componentId: id
-            };
-            $jobs = [{ job, component: id, error }, ...$jobs];
-        }
-        loading = false;
-        return;
-    }
-    if (noBackend) {
-        if (!noToast) {
-            sendUserToast('This app is not connected to a windmill backend, it is a static preview');
-        }
-        return;
-    }
-    if (runnable?.type === 'runnableByName' && !runnable.inlineScript) {
-        return;
-    }
-    loading = true;
-    try {
-        let njob = await testJobLoader?.abstractRun(() => {
-            const nonStaticRunnableInputs = {};
-            const staticRunnableInputs = {};
-            Object.keys(fields ?? {}).forEach((k) => {
-                let field = fields[k];
-                if (field?.type == 'static' && fields[k]) {
-                    staticRunnableInputs[k] = field.value;
-                }
-                else if (field?.type == 'user') {
-                    nonStaticRunnableInputs[k] = args?.[k];
-                }
-                else {
-                    nonStaticRunnableInputs[k] = runnableInputValues[k];
-                }
-            });
-            const requestBody = {
-                args: nonStaticRunnableInputs,
-                force_viewer_static_fields: !isEditor ? undefined : staticRunnableInputs
-            };
-            if (runnable?.type === 'runnableByName') {
-                const { inlineScript } = inlineScriptOverride
-                    ? { inlineScript: inlineScriptOverride }
-                    : runnable;
-                if (inlineScript) {
-                    requestBody['raw_code'] = {
-                        content: inlineScript.content,
-                        language: inlineScript.language,
-                        path: inlineScript.path
-                    };
-                }
-            }
-            else if (runnable?.type === 'runnableByPath') {
-                const { path, runType } = runnable;
-                requestBody['path'] = runType !== 'hubscript' ? `${runType}/${path}` : `script/${path}`;
-            }
-            return AppService.executeComponent({
-                workspace,
-                path: defaultIfEmptyString(appPath, 'newapp'),
-                requestBody
-            });
-        });
-        if (njob) {
-            $jobs = [{ job: njob, component: id }, ...$jobs];
-        }
-    }
-    catch (e) {
-        setResult({ error: e.body ?? e.message });
-        loading = false;
-    }
-}
-export async function runComponent() {
-    try {
-        await executeComponent();
-    }
-    catch (e) {
-        setResult({ error: e.body ?? e.message });
-    }
-}
-let lastStartedAt = Date.now();
-function recordError(error) {
-    if (testJob) {
-        $errorByComponent[testJob.id] = {
-            error: error,
-            componentId: id
-        };
-    }
-}
-async function setResult(res) {
-    const hasRes = res !== undefined && res !== null;
-    if (transformer) {
-        $worldStore.newOutput(id, 'raw', res);
-        res = await eval_like(transformer.content, computeGlobalContext($worldStore, { result: res }), false, $state, $mode == 'dnd', $componentControl, $worldStore, $runnableComponents);
-        if (hasRes && res === undefined) {
-            res = {
-                error: {
-                    name: 'TransformerError',
-                    message: 'An error occured in the transformer',
-                    stack: 'Transformer returned undefined'
-                }
-            };
-        }
-    }
-    outputs.result?.set(res);
-    result = res;
-    if (res?.error) {
-        recordError(res.error);
-    }
-    else {
-        dispatch('success');
-    }
-    const previousJobId = Object.keys($errorByComponent).find((key) => $errorByComponent[key].componentId === id);
-    if (previousJobId && !result?.error) {
-        delete $errorByComponent[previousJobId];
-        $errorByComponent = $errorByComponent;
-    }
-}
-function handleInputClick(e) {
-    const event = e;
-    !$connectingInput.opened && selectId(event, id, selectedComponent, $app);
-}
-</script>
-
-{#each Object.entries(fields ?? {}) as [key, v] (key)}
-	{#if v.type != 'static' && v.type != 'user'}
-		<InputValue
-			key={key + extraKey}
-			{id}
-			input={fields[key]}
-			bind:value={runnableInputValues[key]}
-		/>
-	{/if}
-{/each}
-
-{#if runnable?.type == 'runnableByName' && runnable.inlineScript?.language == 'frontend'}
-	{#each runnable.inlineScript.refreshOn ?? [] as { id: tid, key } (`${tid}-${key}`)}
-		{@const fkey = `${tid}-${key}${extraKey}`}
-		<InputValue
-			{id}
-			key={fkey}
-			input={{ type: 'connected', connection: { componentId: tid, path: key }, fieldType: 'any' }}
-			bind:value={runnableInputValues[fkey]}
-		/>
-	{/each}
-{/if}
-
-<TestJobLoader
-	workspaceOverride={workspace}
-	on:done={(e) => {
-		if (testJob) {
-			const startedAt = new Date(testJob.started_at).getTime()
-			if (startedAt > lastStartedAt) {
-				lastStartedAt = startedAt
-				setResult(e.detail.result)
-			}
-		}
-		loading = false
-	}}
-	bind:isLoading={testIsLoading}
-	bind:job={testJob}
-	bind:this={testJobLoader}
-/>
-
-{#if render}
-	<div class="h-full flex relative flex-row flex-wrap {wrapperClass}" style={wrapperStyle}>
-		{#if (autoRefresh || forceSchemaDisplay) && schemaStripped && Object.keys(schemaStripped?.properties ?? {}).length > 0}
-			<div class="px-2 h-fit min-h-0">
-				<LightweightSchemaForm
-					schema={schemaStripped}
-					bind:args
-					on:inputClicked={handleInputClick}
-				/>
-			</div>
-		{/if}
-
-		{#if !runnable && autoRefresh}
-			<Alert type="warning" size="xs" class="mt-2 px-1" title="Missing runnable">
-				Please select a runnable
-			</Alert>
-		{:else if result?.error && $mode === 'preview'}
-			<div
-				title="Error"
-				class={classNames(
-					'text-red-500 px-1 text-2xs py-0.5 font-bold w-fit absolute border border-red-500 -bottom-2  shadow left-1/2 transform -translate-x-1/2 z-50 cursor-pointer',
-					'bg-red-100/80'
-				)}
-			>
-				<Popover notClickable placement="bottom" popupClass="!bg-white border w-96">
-					<Bug size={14} />
-					<span slot="text">
-						<div class="bg-white">
-							<Alert type="error" title="Error during execution">
-								<div class="flex flex-col gap-2">
-									An error occured, please contact the app author.
-									<span class="font-semibold">Job id: {testJob?.id}</span>
-								</div>
-							</Alert>
-						</div>
-					</span>
-				</Popover>
-			</div>
-			<div class="block grow w-full max-h-full border border-red-300 bg-red-50 relative">
-				<slot />
-			</div>
-		{:else}
-			<div class="block grow w-full max-h-full">
-				<slot />
-			</div>
-		{/if}
-		{#if !initializing && autoRefresh === true}
-			<div class="flex absolute top-1 right-1 z-50">
-				<RefreshButton {loading} componentId={id} />
-			</div>
-		{/if}
-	</div>
-{/if}