windmill-components 1.46.3 → 1.52.0

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

@@ -0,0 +1,21 @@
+import { SvelteComponentTyped } from "svelte";
+import type { InputsSpec } from '../../types';
+declare const __propDef: {
+    props: {
+        componentInputs: InputsSpec;
+        horizontalAlignment?: 'left' | 'center' | 'right' | undefined;
+        verticalAlignment?: 'top' | 'center' | 'bottom' | undefined;
+        staticOutputs?: string[] | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type AppTextProps = typeof __propDef.props;
+export type AppTextEvents = typeof __propDef.events;
+export type AppTextSlots = typeof __propDef.slots;
+export default class AppText extends SvelteComponentTyped<AppTextProps, AppTextEvents, AppTextSlots> {
+    get staticOutputs(): string[];
+}
+export {};

package/components/apps/components/helpers/AlignWrapper.svelte

@@ -0,0 +1,29 @@
+<script>import { classNames } from '../../../../utils';
+export let horizontalAlignment;
+export let verticalAlignment;
+function tailwindHorizontalAlignment(horizontalAlignment) {
+    switch (horizontalAlignment) {
+        case 'left':
+            return 'justify-start';
+        case 'center':
+            return 'justify-center';
+        case 'right':
+            return 'justify-end';
+    }
+}
+function tailwindVerticalAlignment(verticalAlignment) {
+    switch (verticalAlignment) {
+        case 'top':
+            return 'items-start';
+        case 'center':
+            return 'items-center';
+        case 'bottom':
+            return 'items-end';
+    }
+}
+$: classes = classNames('flex w-full h-full flex-col', tailwindHorizontalAlignment(horizontalAlignment), tailwindVerticalAlignment(verticalAlignment));
+</script>
+
+<div class={classes}>
+	<slot />
+</div>

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

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        horizontalAlignment: 'left' | 'center' | 'right' | undefined;
+        verticalAlignment: 'top' | 'center' | 'bottom' | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type AlignWrapperProps = typeof __propDef.props;
+export type AlignWrapperEvents = typeof __propDef.events;
+export type AlignWrapperSlots = typeof __propDef.slots;
+export default class AlignWrapper extends SvelteComponentTyped<AlignWrapperProps, AlignWrapperEvents, AlignWrapperSlots> {
+}
+export {};

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

@@ -0,0 +1,16 @@
+<script>export let placeholder = 'Search...';
+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 {placeholder} on:keyup={debounce} class={parentClass} />

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

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        placeholder?: string | undefined;
+        value: string;
+        debounceDelay?: number | undefined;
+        class?: string | undefined;
+    };
+    events: {
+        [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/InputValue.svelte

@@ -0,0 +1,37 @@
+<script>import { getContext } from 'svelte';
+import { accessPropertyByPath } from '../../utils';
+export let input;
+export let value;
+const { worldStore } = getContext('AppEditorContext');
+$: input && handleConnection();
+function handleConnection() {
+    if (input.type === 'output') {
+        $worldStore?.connect(input, onValueChange);
+    }
+    else if (input.type === 'static') {
+        setValue();
+    }
+    else {
+        value = undefined;
+    }
+}
+function setValue() {
+    if (input.type === 'static') {
+        value = input.value;
+    }
+}
+function onValueChange(newValue) {
+    if (input.type === 'output') {
+        if (input.name?.includes('.')) {
+            const path = input.name.split('.').slice(1).join('.');
+            value = accessPropertyByPath(newValue, path);
+        }
+        else {
+            value = newValue;
+        }
+    }
+    else {
+        // TODO: handle disconnect
+    }
+}
+</script>

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

@@ -0,0 +1,18 @@
+import { SvelteComponentTyped } from "svelte";
+import type { AppInputTransform } from '../../types';
+declare const __propDef: {
+    props: {
+        input: AppInputTransform;
+        value: string | number | boolean | Record<string | number, any> | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type InputValueProps = typeof __propDef.props;
+export type InputValueEvents = typeof __propDef.events;
+export type InputValueSlots = typeof __propDef.slots;
+export default class InputValue extends SvelteComponentTyped<InputValueProps, InputValueEvents, InputValueSlots> {
+}
+export {};

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

@@ -0,0 +1,182 @@
+<script>import { page } from '$app/stores';
+import Alert from '../../../common/alert/Alert.svelte';
+import Button from '../../../common/button/Button.svelte';
+import SchemaForm from '../../../SchemaForm.svelte';
+import TestJobLoader from '../../../TestJobLoader.svelte';
+import { AppService } from '../../../../gen';
+import { workspaceStore } from '../../../../stores';
+import { faRefresh } from '@fortawesome/free-solid-svg-icons';
+import { getContext } from 'svelte';
+import { loadSchema, schemaToInputsSpec } from '../../utils';
+import InputValue from './InputValue.svelte';
+// Component props
+export let id;
+export let inputs;
+export let path = undefined;
+export let runType = undefined;
+export let inlineScriptName = undefined;
+export let extraQueryParams = {};
+export let autoRefresh = true;
+export let result = undefined;
+const { app, worldStore } = getContext('AppEditorContext');
+let pagePath = $page.params.path;
+let args = {};
+let schema = undefined;
+let testIsLoading = false;
+let runnableInputValues = {};
+$: mergedArgs = { ...args, ...extraQueryParams, ...runnableInputValues };
+// TODO: Review
+function setStaticInputsToArgs() {
+    Object.entries(inputs).forEach(([key, value]) => {
+        if (value.type === 'static') {
+            args[key] = value.value;
+        }
+    });
+    args = args;
+}
+$: inputs && setStaticInputsToArgs();
+function argMergedArgsValid(mergedArgs) {
+    if (Object.keys(inputs).filter((k) => inputs[k].type !== 'user').length !==
+        Object.keys(runnableInputValues).length) {
+        return false;
+    }
+    const areAllArgsValid = Object.values(mergedArgs).every((arg) => arg !== undefined && arg !== null);
+    if (areAllArgsValid && autoRefresh) {
+        executeComponent();
+    }
+    return areAllArgsValid;
+}
+$: isValid = argMergedArgsValid(mergedArgs);
+// Test job internal state
+let testJob = undefined;
+let testJobLoader = undefined;
+$: outputs = $worldStore?.outputsById[id];
+async function loadSchemaFromTriggerable(workspace, path, runType) {
+    schema = await loadSchema(workspace, path, runType);
+}
+// Only loads the schema
+$: if ($workspaceStore && path && runType && !schema) {
+    // Remote schema needs to be loaded
+    loadSchemaFromTriggerable($workspaceStore, path, runType);
+}
+else if (inlineScriptName && $app.inlineScripts[inlineScriptName] && !schema) {
+    // Inline scripts directly provide the schema
+    schema = $app.inlineScripts[inlineScriptName].schema;
+}
+// When the schema is loaded, we need to update the inputs spec
+// in order to render the inputs the component panel
+$: if (schema && Object.keys(schema.properties).length !== Object.keys(inputs).length) {
+    let schemaWithoutExtraQueries = JSON.parse(JSON.stringify(schema));
+    // Remove extra query params from the schema, which are not directly configurable by the user
+    Object.keys(extraQueryParams).forEach((key) => {
+        delete schemaWithoutExtraQueries.properties[key];
+    });
+    inputs = schemaToInputsSpec(schemaWithoutExtraQueries);
+}
+let schemaStripped = undefined;
+function stripSchema(schema, inputs) {
+    schemaStripped = JSON.parse(JSON.stringify(schema));
+    // Remove hidden static inputs
+    Object.keys(inputs).forEach((key) => {
+        const input = inputs[key];
+        if (input.type === 'static' && !input.visible && schemaStripped !== undefined) {
+            delete schemaStripped.properties[key];
+        }
+        if (input.type === 'output' && schemaStripped !== undefined) {
+            delete schemaStripped.properties[key];
+        }
+    });
+    // Remove extra query params from schema
+    Object.keys(extraQueryParams).forEach((key) => {
+        if (schemaStripped !== undefined) {
+            delete schemaStripped.properties[key];
+        }
+    });
+}
+$: schema && inputs && stripSchema(schema, inputs);
+$: disabledArgs = Object.keys(inputs).reduce((disabledArgsAccumulator, inputName) => {
+    if (inputs[inputName].type === 'static') {
+        disabledArgsAccumulator = [...disabledArgsAccumulator, inputName];
+    }
+    return disabledArgsAccumulator;
+}, []);
+async function executeComponent() {
+    if (!schema) {
+        return;
+    }
+    outputs?.loading.set(true);
+    await testJobLoader?.abstractRun(() => {
+        const requestBody = {
+            args: mergedArgs,
+            force_viewer_static_fields: {}
+        };
+        if (inlineScriptName && $app.inlineScripts[inlineScriptName]) {
+            requestBody['raw_code'] = {
+                content: $app.inlineScripts[inlineScriptName].content,
+                language: $app.inlineScripts[inlineScriptName].language,
+                path: $app.inlineScripts[inlineScriptName].path
+            };
+        }
+        else if (path && runType) {
+            requestBody['path'] = `${runType}/${path}`;
+        }
+        return AppService.executeComponent({
+            workspace: $workspaceStore,
+            path: pagePath,
+            requestBody
+        });
+    });
+}
+export function runComponent() {
+    executeComponent();
+}
+</script>
+
+{#each Object.keys(inputs) as key}
+	<InputValue input={inputs[key]} bind:value={runnableInputValues[key]} />
+{/each}
+
+<TestJobLoader
+	on:done={() => {
+		if (testJob) {
+			outputs.result.set(testJob?.result)
+			outputs?.loading.set(false)
+
+			result = testJob?.result
+		}
+	}}
+	bind:isLoading={testIsLoading}
+	bind:job={testJob}
+	bind:this={testJobLoader}
+/>
+
+{#if schemaStripped !== undefined && autoRefresh}
+	<SchemaForm schema={schemaStripped} bind:args {isValid} {disabledArgs} shouldHideNoInputs />
+{/if}
+
+{#if inlineScriptName === undefined && path === undefined && runType === undefined && autoRefresh}
+	<Alert type="warning" size="xs" class="mt-2" title="Missing runnable">
+		Please select a runnable
+	</Alert>
+{:else if autoRefresh === true}
+	{#if isValid}
+		<div class="flex flex-row-reverse">
+			<Button
+				size="xs"
+				color="light"
+				variant="border"
+				on:click={() => executeComponent()}
+				disabled={!isValid}
+				startIcon={{ icon: faRefresh, classes: testIsLoading ? 'animate-spin' : '' }}
+				iconOnly
+			/>
+		</div>
+		<slot />
+	{:else}
+		<Alert type="warning" size="xs" class="mt-2" title="Missing inputs">
+			Please fill in all the inputs
+		</Alert>
+	{/if}
+{:else}
+	<slot />
+{/if}

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

@@ -0,0 +1,28 @@
+import { SvelteComponentTyped } from "svelte";
+import type { InputsSpec } from '../../types';
+declare const __propDef: {
+    props: {
+        id: string;
+        inputs: InputsSpec;
+        path?: string | undefined;
+        runType?: 'script' | 'flow' | undefined;
+        inlineScriptName?: string | undefined;
+        extraQueryParams?: Record<string, any> | undefined;
+        autoRefresh?: boolean | undefined;
+        result?: any;
+        runComponent?: (() => void) | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type RunnableComponentProps = typeof __propDef.props;
+export type RunnableComponentEvents = typeof __propDef.events;
+export type RunnableComponentSlots = typeof __propDef.slots;
+export default class RunnableComponent extends SvelteComponentTyped<RunnableComponentProps, RunnableComponentEvents, RunnableComponentSlots> {
+    get runComponent(): () => void;
+}
+export {};

package/components/apps/components/index.d.ts

@@ -0,0 +1,22 @@
+import { default as AppButton } from './buttons/AppButton.svelte';
+export { default as AppButton } from './buttons/AppButton.svelte';
+import { default as AppBarChart } from './dataDisplay/AppBarChart.svelte';
+export { default as AppBarChart } from './dataDisplay/AppBarChart.svelte';
+export { default as AppPieChart } from './dataDisplay/AppPieChart.svelte';
+export { default as AppTable } from './dataDisplay/AppTable.svelte';
+import { default as AppText } from './dataDisplay/AppText.svelte';
+export { default as AppText } from './dataDisplay/AppText.svelte';
+import { default as AppCheckbox } from './selectInputs/AppCheckbox.svelte';
+export { default as AppCheckbox } from './selectInputs/AppCheckbox.svelte';
+export { default as AlignWrapper } from './helpers/AlignWrapper.svelte';
+export { default as DebouncedInput } from './helpers/DebouncedInput.svelte';
+export { default as InputValue } from './helpers/InputValue.svelte';
+export { default as RunnableComponent } from './helpers/RunnableComponent.svelte';
+declare const textInputs: never[];
+declare const numberInputs: never[];
+declare const buttons: (typeof AppButton)[];
+declare const selectInputs: (typeof AppCheckbox)[];
+declare const dateTimeInputs: never[];
+declare const dataDisplay: (typeof AppBarChart | typeof AppText)[];
+declare const APP_COMPONENTS: (typeof AppBarChart | typeof AppText)[][];
+export { APP_COMPONENTS, textInputs, numberInputs, buttons, selectInputs, dateTimeInputs, dataDisplay };

package/components/apps/components/index.js

@@ -0,0 +1,42 @@
+import { default as AppButton } from './buttons/AppButton.svelte';
+export { default as AppButton } from './buttons/AppButton.svelte';
+import { default as AppBarChart } from './dataDisplay/AppBarChart.svelte';
+export { default as AppBarChart } from './dataDisplay/AppBarChart.svelte';
+import { default as AppPieChart } from './dataDisplay/AppPieChart.svelte';
+export { default as AppPieChart } from './dataDisplay/AppPieChart.svelte';
+import { default as AppTable } from './dataDisplay/AppTable.svelte';
+export { default as AppTable } from './dataDisplay/AppTable.svelte';
+import { default as AppText } from './dataDisplay/AppText.svelte';
+export { default as AppText } from './dataDisplay/AppText.svelte';
+import { default as AppCheckbox } from './selectInputs/AppCheckbox.svelte';
+export { default as AppCheckbox } from './selectInputs/AppCheckbox.svelte';
+export { default as AlignWrapper } from './helpers/AlignWrapper.svelte';
+export { default as DebouncedInput } from './helpers/DebouncedInput.svelte';
+export { default as InputValue } from './helpers/InputValue.svelte';
+export { default as RunnableComponent } from './helpers/RunnableComponent.svelte';
+// Component groups
+const textInputs = [];
+const numberInputs = [];
+const buttons = [
+    AppButton
+];
+const selectInputs = [
+    AppCheckbox
+];
+const dateTimeInputs = [];
+const dataDisplay = [
+    AppBarChart,
+    AppPieChart,
+    AppTable,
+    AppText
+];
+// Aggregated component groups for ease of import
+const APP_COMPONENTS = [
+    textInputs,
+    numberInputs,
+    buttons,
+    selectInputs,
+    dateTimeInputs,
+    dataDisplay
+];
+export { APP_COMPONENTS, textInputs, numberInputs, buttons, selectInputs, dateTimeInputs, dataDisplay };

package/components/apps/components/selectInputs/AppCheckbox.svelte

@@ -0,0 +1,26 @@
+<script>import Toggle from '../../../Toggle.svelte';
+import { getContext } from 'svelte';
+import AlignWrapper from '../helpers/AlignWrapper.svelte';
+import InputValue from '../helpers/InputValue.svelte';
+export let id;
+export let componentInputs;
+export let horizontalAlignment = undefined;
+export let verticalAlignment = undefined;
+const { worldStore } = getContext('AppEditorContext');
+export const staticOutputs = ['result'];
+let labelValue = 'Default label';
+let value = false;
+$: outputs = $worldStore?.outputsById[id];
+</script>
+
+<InputValue input={componentInputs.label} bind:value={labelValue} />
+
+<AlignWrapper {horizontalAlignment} {verticalAlignment}>
+	<Toggle
+		bind:value
+		options={{ right: labelValue }}
+		on:change={(e) => {
+			outputs.result.set(e.detail)
+		}}
+	/>
+</AlignWrapper>

package/components/apps/components/selectInputs/AppCheckbox.svelte.d.ts

@@ -0,0 +1,22 @@
+import { SvelteComponentTyped } from "svelte";
+import type { InputsSpec } from '../../types';
+declare const __propDef: {
+    props: {
+        id: string;
+        componentInputs: InputsSpec;
+        horizontalAlignment?: 'left' | 'center' | 'right' | undefined;
+        verticalAlignment?: 'top' | 'center' | 'bottom' | undefined;
+        staticOutputs?: string[] | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type AppCheckboxProps = typeof __propDef.props;
+export type AppCheckboxEvents = typeof __propDef.events;
+export type AppCheckboxSlots = typeof __propDef.slots;
+export default class AppCheckbox extends SvelteComponentTyped<AppCheckboxProps, AppCheckboxEvents, AppCheckboxSlots> {
+    get staticOutputs(): string[];
+}
+export {};

package/components/apps/editor/AppEditor.svelte

@@ -0,0 +1,105 @@
+<script>import SplitPanesWrapper from '../../splitPanes/SplitPanesWrapper.svelte';
+import { onMount, setContext } from 'svelte';
+import { Pane } from 'svelte-splitpanes';
+import { writable } from 'svelte/store';
+import { buildWorld } from '../rx';
+import AppEditorHeader from './AppEditorHeader.svelte';
+import GridEditor from './GridEditor.svelte';
+import Tabs from '../../common/tabs/Tabs.svelte';
+import TabContent from '../../common/tabs/TabContent.svelte';
+import { Tab } from '../../common';
+import ComponentList from './componentsPanel/ComponentList.svelte';
+import Icon from 'svelte-awesome';
+import { faPlus, faSliders } from '@fortawesome/free-solid-svg-icons';
+import ComponentPanel from './settingsPanel/ComponentPanel.svelte';
+import ContextPanel from './contextPanel/ContextPanel.svelte';
+import { classNames } from '../../../utils';
+export let app;
+export let path;
+export let initialMode = 'dnd';
+const appStore = writable(app);
+const worldStore = writable(undefined);
+const staticOutputs = writable({});
+const selectedComponent = writable(undefined);
+const mode = writable(initialMode);
+const breakpoint = writable('lg');
+const connectingInput = writable({
+    opened: false,
+    input: undefined
+});
+setContext('AppEditorContext', {
+    worldStore,
+    staticOutputs,
+    app: appStore,
+    selectedComponent,
+    mode,
+    connectingInput,
+    breakpoint
+});
+function clearSelectionOnPreview() {
+    if ($mode === 'preview') {
+        $selectedComponent = undefined;
+    }
+}
+let mounted = false;
+onMount(() => {
+    mounted = true;
+});
+$: mounted && ($worldStore = buildWorld($staticOutputs));
+$: $mode && $selectedComponent && clearSelectionOnPreview();
+$: selectedTab = $selectedComponent ? 'settings' : 'insert';
+$: previewing = $mode === 'preview';
+$: width = $breakpoint === 'sm' ? 'w-[640px]' : 'w-full ';
+</script>
+
+{#if initialMode !== 'preview'}
+	<AppEditorHeader bind:title={$appStore.title} bind:mode={$mode} bind:breakpoint={$breakpoint} />
+{/if}
+
+<SplitPanesWrapper class="max-w-full overflow-hidden">
+	<Pane size={previewing ? 0 : 20} minSize={previewing ? 0 : 20} maxSize={40}>
+		<ContextPanel appPath={path} />
+	</Pane>
+	<Pane size={previewing ? 100 : 60}>
+		<div class="p-4 bg-gray-100 h-full w-full">
+			{#if $appStore.grid}
+				<div class={classNames('mx-auto h-full', width)}>
+					<GridEditor />
+				</div>
+			{/if}
+		</div>
+	</Pane>
+	<Pane size={previewing ? 0 : 25} minSize={previewing ? 0 : 20} maxSize={40}>
+		<Tabs bind:selected={selectedTab}>
+			<Tab value="insert" size="xs">
+				<div class="m-1 flex flex-row gap-2">
+					<Icon data={faPlus} />
+					<span>Insert</span>
+				</div>
+			</Tab>
+			<Tab value="settings" size="xs">
+				<div class="m-1 flex flex-row gap-2">
+					<Icon data={faSliders} />
+					<span>Settings</span>
+				</div>
+			</Tab>
+			<svelte:fragment slot="content">
+				<TabContent value="settings">
+					{#if $selectedComponent !== undefined}
+						{#each $appStore.grid as gridItem (gridItem.id)}
+							{#if gridItem.data.id === $selectedComponent}
+								<ComponentPanel bind:component={gridItem.data} />
+							{/if}
+						{/each}
+					{/if}
+					{#if $selectedComponent === undefined}
+						<div class="p-4 text-sm">No component selected.</div>
+					{/if}
+				</TabContent>
+				<TabContent value="insert">
+					<ComponentList />
+				</TabContent>
+			</svelte:fragment>
+		</Tabs>
+	</Pane>
+</SplitPanesWrapper>

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

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+import type { App, EditorMode } from '../types';
+declare const __propDef: {
+    props: {
+        app: App;
+        path: string;
+        initialMode?: EditorMode | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type AppEditorProps = typeof __propDef.props;
+export type AppEditorEvents = typeof __propDef.events;
+export type AppEditorSlots = typeof __propDef.slots;
+export default class AppEditor extends SvelteComponentTyped<AppEditorProps, AppEditorEvents, AppEditorSlots> {
+}
+export {};