windmill-components 1.269.4 → 1.291.4

package/package/components/apps/components/inputs/AppDateTimeInput.svelte.d.ts

@@ -0,0 +1,22 @@
+import { SvelteComponent } from "svelte";
+import type { ComponentCustomCSS, VerticalAlignment, RichConfigurations } from '../../types';
+declare const __propDef: {
+    props: {
+        id: string;
+        configuration: RichConfigurations;
+        inputType: 'date';
+        verticalAlignment?: VerticalAlignment | undefined;
+        customCss?: ComponentCustomCSS<'datetimeinputcomponent'> | undefined;
+        render: boolean;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type AppDateTimeInputProps = typeof __propDef.props;
+export type AppDateTimeInputEvents = typeof __propDef.events;
+export type AppDateTimeInputSlots = typeof __propDef.slots;
+export default class AppDateTimeInput extends SvelteComponent<AppDateTimeInputProps, AppDateTimeInputEvents, AppDateTimeInputSlots> {
+}
+export {};

package/package/components/apps/components/inputs/AppSelect.svelte

@@ -23,6 +23,7 @@ export let recomputeIds = undefined;
 export let noInitialize = false;
 export let controls = undefined;
 export let noDefault = false;
+export let onSelect = undefined;
 const { app, worldStore, connectingInput, selectedComponent, runnableComponents, componentControl, darkMode } = getContext('AppViewerContext');
 const iterContext = getContext('ListWrapperContext');
 const listInputs = getContext('ListInputs');
@@ -84,6 +85,9 @@ function onChange(e) {
     }
     preclickAction?.();
     setValue(e.detail?.['value']);
+    if (onSelect) {
+        onSelect.forEach((id) => $runnableComponents?.[id]?.cb?.forEach((f) => f()));
+    }
 }
 function setValue(nvalue) {
     let result = undefined;
@@ -184,6 +188,7 @@ let filterText = '';
 						: SELECT_INPUT_DEFAULT_STYLE.containerStyles) +
 					css?.input?.style}
 				{value}
+				class={css?.input?.class}
 				placeholder={resolvedConfig.placeholder}
 				disabled={resolvedConfig.disabled}
 				on:focus={() => {

package/package/components/apps/components/inputs/AppSelect.svelte.d.ts

@@ -16,6 +16,7 @@ declare const __propDef: {
             right: () => boolean | string;
         } | undefined;
         noDefault?: boolean | undefined;
+        onSelect?: string[] | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package/components/apps/components/inputs/AppTimeInput.svelte

@@ -0,0 +1,103 @@
+<script>import { getContext } from 'svelte';
+import { twMerge } from 'tailwind-merge';
+import { initConfig, initOutput } from '../../editor/appUtils';
+import { initCss } from '../../utils';
+import AlignWrapper from '../helpers/AlignWrapper.svelte';
+import InitializeComponent from '../helpers/InitializeComponent.svelte';
+import { components } from '../../editor/component';
+import ResolveConfig from '../helpers/ResolveConfig.svelte';
+import ResolveStyle from '../helpers/ResolveStyle.svelte';
+export let id;
+export let configuration;
+export let verticalAlignment = undefined;
+export let customCss = undefined;
+export let render;
+const { app, worldStore, selectedComponent, componentControl } = getContext('AppViewerContext');
+let resolvedConfig = initConfig(components['timeinputcomponent'].initialData.configuration, configuration);
+let value = undefined;
+$componentControl[id] = {
+    setValue(nvalue) {
+        value = nvalue;
+    }
+};
+let outputs = initOutput($worldStore, id, {
+    result: undefined,
+    validity: true
+});
+$: !value && handleDefault(resolvedConfig.defaultValue);
+function convertToMinutes(time) {
+    const [hours, minutes] = time.split(':').map(Number);
+    return hours * 60 + minutes;
+}
+$: {
+    if (value) {
+        if (!resolvedConfig['24hFormat']) {
+            let time = value.split(':');
+            let hours = parseInt(time[0]);
+            let minutes = time[1];
+            let ampm = hours >= 12 ? 'pm' : 'am';
+            hours = hours % 12;
+            hours = hours ? hours : 12;
+            outputs?.result.set(hours + ':' + minutes + ' ' + ampm);
+        }
+        else {
+            outputs?.result.set(value);
+        }
+        let currentValueInMinutes = convertToMinutes(value);
+        let isValid = true;
+        if (resolvedConfig.minTime) {
+            const minTimeInMinutes = convertToMinutes(resolvedConfig.minTime);
+            if (currentValueInMinutes < minTimeInMinutes) {
+                isValid = false;
+            }
+        }
+        if (resolvedConfig.maxTime) {
+            const maxTimeInMinutes = convertToMinutes(resolvedConfig.maxTime);
+            if (currentValueInMinutes > maxTimeInMinutes) {
+                isValid = false;
+            }
+        }
+        // At the end, set the validity
+        outputs?.validity.set(isValid);
+    }
+}
+function handleDefault(defaultValue) {
+    value = defaultValue;
+}
+let css = initCss($app.css?.timeinputcomponent, customCss);
+</script>
+
+{#each Object.keys(components['timeinputcomponent'].initialData.configuration) as key (key)}
+	<ResolveConfig
+		{id}
+		{key}
+		bind:resolvedConfig={resolvedConfig[key]}
+		configuration={configuration[key]}
+	/>
+{/each}
+
+{#each Object.keys(css ?? {}) as key (key)}
+	<ResolveStyle
+		{id}
+		{customCss}
+		{key}
+		bind:css={css[key]}
+		componentStyle={$app.css?.timeinputcomponent}
+	/>
+{/each}
+
+<InitializeComponent {id} />
+
+<AlignWrapper {render} {verticalAlignment}>
+	<input
+		on:focus={() => ($selectedComponent = [id])}
+		on:pointerdown|stopPropagation={() => ($selectedComponent = [id])}
+		type="time"
+		bind:value
+		min={resolvedConfig.minTime}
+		max={resolvedConfig.maxTime}
+		placeholder="Type..."
+		class={twMerge('windmillapp w-full py-1.5 text-sm px-2', css?.input?.class)}
+		style={css?.input?.style ?? ''}
+	/>
+</AlignWrapper>

package/package/components/apps/components/inputs/AppTimeInput.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponent } from "svelte";
+import type { ComponentCustomCSS, RichConfigurations } from '../../types';
+declare const __propDef: {
+    props: {
+        id: string;
+        configuration: RichConfigurations;
+        verticalAlignment?: 'top' | 'center' | 'bottom' | undefined;
+        customCss?: ComponentCustomCSS<'timeinputcomponent'> | undefined;
+        render: boolean;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type AppTimeInputProps = typeof __propDef.props;
+export type AppTimeInputEvents = typeof __propDef.events;
+export type AppTimeInputSlots = typeof __propDef.slots;
+export default class AppTimeInput extends SvelteComponent<AppTimeInputProps, AppTimeInputEvents, AppTimeInputSlots> {
+}
+export {};

package/package/components/apps/components/layout/AppConditionalWrapper.svelte

@@ -17,7 +17,6 @@ const outputs = initOutput($worldStore, id, {
     selectedTabIndex: 0
 });
 function onFocus() {
-    console.log('onFocus', id, selectedConditionIndex);
     $focusedGrid = {
         parentComponentId: id,
         subGridIndex: selectedConditionIndex

package/package/components/apps/components/layout/AppDecisionTree.svelte

@@ -110,6 +110,18 @@ $: if ($selectedComponent?.[0] === id && !$focusedGrid) {
         subGridIndex: nodes.findIndex((node) => node.id === currentNodeId)
     };
 }
+function updateDebuggingComponents() {
+    const nodeIds = nodes.map((node) => node.id).sort();
+    const debuggingComponentsIds = Object.keys($debuggingComponents).sort();
+    if (JSON.stringify(nodeIds) !== JSON.stringify(debuggingComponentsIds)) {
+        debuggingComponentsIds.forEach((id) => {
+            if (!nodeIds.includes(id)) {
+                delete $debuggingComponents[id];
+            }
+        });
+    }
+}
+$: nodes && $debuggingComponents && updateDebuggingComponents();
 </script>
 
 {#if Object.keys(resolvedConditions).length === nodes.length}

package/package/components/apps/components/layout/AppStepper.svelte

@@ -175,7 +175,8 @@ let directionClicked = undefined;
 						color="light"
 						variant="contained"
 						disabled={selectedIndex === 0}
-						on:click={() => {
+						on:click={(e) => {
+							e.preventDefault()
 							directionClicked = 'left'
 							runStep(selectedIndex - 1)
 						}}
@@ -195,7 +196,8 @@ let directionClicked = undefined;
 						color="dark"
 						variant="contained"
 						disabled={lastStep}
-						on:click={() => {
+						on:click={(e) => {
+							e.preventDefault()
 							directionClicked = 'right'
 							runStep(selectedIndex + 1)
 						}}

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

@@ -10,7 +10,7 @@ import { Button, Tab } from '../../common';
 import TabContent from '../../common/tabs/TabContent.svelte';
 import Tabs from '../../common/tabs/Tabs.svelte';
 import { userStore, workspaceStore } from '../../../stores';
-import { classNames, encodeState } from '../../../utils';
+import { classNames, encodeState, sendUserToast } from '../../../utils';
 import AppPreview from './AppPreview.svelte';
 import ComponentList from './componentsPanel/ComponentList.svelte';
 import ContextPanel from './contextPanel/ContextPanel.svelte';
@@ -69,13 +69,14 @@ let context = {
 const darkMode = writable(document.documentElement.classList.contains('dark'));
 const worldStore = buildWorld(context);
 const previewTheme = writable(undefined);
+const initialized = writable({ initialized: false, initializedComponents: [] });
 $secondaryMenuRightStore.isOpen = false;
 $secondaryMenuLeftStore.isOpen = false;
 setContext('AppViewerContext', {
     worldStore,
     app: appStore,
     summary: summaryStore,
-    initialized: writable({ initialized: false, initializedComponents: [] }),
+    initialized: initialized,
     selectedComponent,
     mode,
     connectingInput,
@@ -348,6 +349,18 @@ function parseScroll() {
 let mounted = false;
 onMount(() => {
     mounted = true;
+    setTimeout(() => {
+        if ($initialized?.initialized === false) {
+            sendUserToast('App is not yet initialized, please check the Troubleshoot Panel for more information', true, [
+                {
+                    label: 'Open Troubleshoot Panel',
+                    callback: () => {
+                        appEditorHeader?.openTroubleshootPanel();
+                    }
+                }
+            ]);
+        }
+    }, 10000);
     parseScroll();
 });
 $: setGridPanelSize($componentActive);
@@ -447,7 +460,7 @@ let runnableJobEnterTimeout = undefined;
 									style={$appStore.css?.['app']?.['viewer']?.style}
 								>
 									<div class="absolute bottom-2 left-2 z-50 border bg-surface">
-										<div class="flex flex-row gap-2 text-xs items-center p-0.5">
+										<div class="flex flex-row gap-2 text-xs items-center h-8 px-1">
 											<Button
 												color="light"
 												size="xs2"
@@ -458,7 +471,9 @@ let runnableJobEnterTimeout = undefined;
 											>
 												<Minus size={14} />
 											</Button>
-											{$scale}%
+											<div class="w-8 flex justify-center text-2xs h-full items-center">
+												{$scale}%
+											</div>
 											<Button
 												color="light"
 												size="xs2"

package/package/components/apps/editor/AppEditorHeader.svelte

@@ -1,6 +1,6 @@
-<script>import { beforeNavigate, goto } from '$app/navigation';
+<script>import { goto } from '$app/navigation';
 import { page } from '$app/stores';
-import { Alert, Badge, Drawer, DrawerContent, Kbd, Tab, Tabs, UndoRedo } from '../../common';
+import { Alert, Badge, Drawer, DrawerContent, Tab, Tabs, UndoRedo } from '../../common';
 import Button from '../../common/button/Button.svelte';
 import DisplayResult from '../../DisplayResult.svelte';
 import FlowProgressBar from '../../flows/FlowProgressBar.svelte';
@@ -38,7 +38,13 @@ import AppTimeline from './AppTimeline.svelte';
 import { cloneDeep } from 'lodash';
 import AppReportsDrawer from './AppReportsDrawer.svelte';
 import HighlightCode from '../../HighlightCode.svelte';
-import { getCountPostgresql, createPostgresInput, createPostgresInsert, createUpdatePostgresInput, getPrimaryKeys } from '../components/display/dbtable/utils';
+import { getPrimaryKeys } from '../components/display/dbtable/utils';
+import DebugPanel from './contextPanel/DebugPanel.svelte';
+import { getCountInput } from '../components/display/dbtable/queries/count';
+import { getSelectInput } from '../components/display/dbtable/queries/select';
+import { getInsertInput } from '../components/display/dbtable/queries/insert';
+import { getUpdateInput } from '../components/display/dbtable/queries/update';
+import { getDeleteInput } from '../components/display/dbtable/queries/delete';
 async function hash(message) {
     try {
         const msgUint8 = new TextEncoder().encode(message); // encode as (utf-8) Uint8Array
@@ -81,6 +87,7 @@ let draftDrawerOpen = false;
 let saveDrawerOpen = false;
 let inputsDrawerOpen = fromHub;
 let historyBrowserDrawerOpen = false;
+let debugAppDrawerOpen = false;
 let deploymentMsg = undefined;
 function closeSaveDrawer() {
     saveDrawerOpen = false;
@@ -111,34 +118,38 @@ async function computeTriggerables() {
         if (c.type === 'dbexplorercomponent') {
             let nr = [];
             let config = c.configuration;
-            let pg = config?.type?.configuration?.postgresql;
-            if (pg) {
+            const dbType = config?.type?.selected;
+            let pg = config?.type?.configuration?.[dbType];
+            if (pg && dbType) {
                 const { table, resource } = pg;
                 const tableValue = table.value;
                 const resourceValue = resource.value;
                 const columnDefs = c.configuration.columnDefs.value;
                 const whereClause = c.configuration.whereClause.value;
-                console.log(columnDefs);
                 if (tableValue && resourceValue && columnDefs) {
                     r.push({
-                        input: createPostgresInput(resourceValue, tableValue, columnDefs, whereClause),
+                        input: getSelectInput(resourceValue, tableValue, columnDefs, whereClause, dbType),
                         id: x.id
                     });
                     r.push({
-                        input: getCountPostgresql(resourceValue, tableValue),
+                        input: getCountInput(resourceValue, tableValue, dbType, columnDefs, whereClause),
                         id: x.id + '_count'
                     });
                     r.push({
-                        input: createPostgresInsert(tableValue, columnDefs, resourceValue),
+                        input: getInsertInput(tableValue, columnDefs, resourceValue, dbType),
                         id: x.id + '_insert'
                     });
                     let primaryColumns = getPrimaryKeys(columnDefs);
                     let columns = columnDefs?.filter((x) => primaryColumns.includes(x.field));
+                    r.push({
+                        input: getDeleteInput(resourceValue, tableValue, columns, dbType),
+                        id: x.id + '_delete'
+                    });
                     columnDefs
                         .filter((col) => col.editable || config.allEditable.value)
                         .forEach((column) => {
                         r.push({
-                            input: createUpdatePostgresInput(resourceValue, tableValue, column, columns),
+                            input: getUpdateInput(resourceValue, tableValue, column, columns, dbType),
                             id: x.id + '_update'
                         });
                     });
@@ -158,12 +169,13 @@ async function computeTriggerables() {
         .concat(Object.values($app.hiddenInlineScripts ?? {}).map(async (v, i) => {
         return await processRunnable(BG_PREFIX + i, v, v.fields);
     }))));
+    console.log('allTriggers', allTriggers);
     policy.triggerables = Object.fromEntries(allTriggers.filter(Boolean));
 }
 async function processRunnable(id, runnable, fields) {
     const staticInputs = collectStaticFields(fields);
     if (runnable?.type == 'runnableByName') {
-        console.log(runnable.inlineScript?.content);
+        console.log('processRunnable:content', runnable.inlineScript?.content);
         let hex = await hash(runnable.inlineScript?.content);
         console.log('hex', hex, id);
         return [`${id}:rawscript/${hex}`, staticInputs];
@@ -549,6 +561,14 @@ let moreItems = [
             });
         },
         disabled: !savedApp
+    },
+    // App debug menu
+    {
+        displayName: 'Troubleshoot panel',
+        icon: Bug,
+        action: () => {
+            debugAppDrawerOpen = true;
+        }
     }
 ];
 let appEditorTutorial = undefined;
@@ -557,6 +577,9 @@ export function toggleTutorial() {
 }
 let rightColumnSelect = 'timeline';
 let appReportingDrawerOpen = false;
+export function openTroubleshootPanel() {
+    debugAppDrawerOpen = true;
+}
 </script>
 
 <svelte:window on:keydown={onKeyDown} />
@@ -564,8 +587,6 @@ let appReportingDrawerOpen = false;
 <TestJobLoader bind:this={testJobLoader} bind:isLoading={testIsLoading} bind:job />
 
 <UnsavedConfirmationModal
-	gotoUrl={goto}
-	{beforeNavigate}
 	{diffDrawer}
 	savedValue={savedApp}
 	modifiedValue={{
@@ -811,6 +832,12 @@ let appReportingDrawerOpen = false;
 	</DrawerContent>
 </Drawer>
 
+<Drawer bind:open={debugAppDrawerOpen} size="800px">
+	<DrawerContent title="Troubleshoot Panel" on:close={() => (debugAppDrawerOpen = false)}>
+		<DebugPanel />
+	</DrawerContent>
+</Drawer>
+
 <Drawer bind:open={$jobsDrawerOpen} size="900px" --zIndex={1003}>
 	<DrawerContent
 		noPadding
@@ -1181,8 +1208,9 @@ let appReportingDrawerOpen = false;
 			on:click={() => saveDraft()}
 			size="xs"
 			disabled={$page.params.path !== undefined && !savedApp}
+			shortCut={{ key: 'S' }}
 		>
-			Draft&nbsp;<Kbd small>Ctrl</Kbd><Kbd small>S</Kbd>
+			Draft
 		</Button>
 		<Button
 			loading={loading.save}

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

@@ -17,6 +17,7 @@ declare const __propDef: {
         } | undefined;
         version?: number | undefined;
         toggleTutorial?: (() => void) | undefined;
+        openTroubleshootPanel?: (() => void) | undefined;
     };
     events: {
         keydown: KeyboardEvent;
@@ -31,5 +32,6 @@ export type AppEditorHeaderEvents = typeof __propDef.events;
 export type AppEditorHeaderSlots = typeof __propDef.slots;
 export default class AppEditorHeader extends SvelteComponent<AppEditorHeaderProps, AppEditorHeaderEvents, AppEditorHeaderSlots> {
     get toggleTutorial(): () => void;
+    get openTroubleshootPanel(): () => void;
 }
 export {};

package/package/components/apps/editor/AppTimeline.svelte

@@ -91,14 +91,14 @@ onDestroy(() => {
 <div class="divide-y">
 	<div class="flex flex-row-reverse mb-2 items-center text-sm text-secondary px-2">
 		<div class="flex gap-4 items-center">
-			<div class="flex gap-2 items-center">
+			<div class="flex gap-2 items-center text-xs">
 				<div>Waiting for executor</div>
-				<div class="h-4 w-4 bg-gray-500" />
+				<div class="h-4 w-4 bg-gray-300 dark:bg-gray-600 rounded" />
 			</div>
 
-			<div class="flex gap-2 items-center">
+			<div class="flex gap-2 items-center text-xs">
 				<div>Execution</div>
-				<div class="h-4 w-4 bg-blue-500/90" />
+				<div class="h-4 w-4 bg-blue-500/90 rounded" />
 			</div>
 		</div>
 	</div>

package/package/components/apps/editor/DecisionTreeDebug.svelte

@@ -8,7 +8,7 @@ export let nodes = [];
 export let id;
 const { componentControl, debuggingComponents, worldStore } = getContext('AppViewerContext');
 const dispatch = createEventDispatcher();
-let currentNodeId = '';
+let currentNodeId = $worldStore.outputsById[id]?.currentNodeId?.peak() ?? 'a';
 $worldStore.outputsById[id]?.currentNodeId?.subscribe({
     id: id,
     next: (value) => {

package/package/components/apps/editor/DeploymentHistory.svelte

@@ -158,7 +158,7 @@ loadVersions();
 						<div class="flex p-1 gap-2">
 							<Button
 								size="xs"
-								on:click={() => window.open(`/apps/add?template_id=${selectedVersion}`)}
+								on:click={() => window.open(`/apps/add?template_id=${selectedVersion?.version}`)}
 							>
 								Restore as fork
 							</Button>

package/package/components/apps/editor/GridEditorMenu.svelte

@@ -23,7 +23,7 @@ $: componentSettings = $selectedComponent?.map((sc) => findComponentSettings($ap
 					componentCallbacks?.handleCut(new KeyboardEvent('keydown'))
 				},
 				icon: Scissors,
-				shortcut: `${getModifierKey()} + X`,
+				shortcut: `${getModifierKey()}X`,
 				disabled: $movingcomponents?.includes($selectedComponent?.[0] ?? '')
 			},
 			{
@@ -32,7 +32,7 @@ $: componentSettings = $selectedComponent?.map((sc) => findComponentSettings($ap
 					componentCallbacks?.handleCopy(new KeyboardEvent('keydown'))
 				},
 				icon: Copy,
-				shortcut: `${getModifierKey()} + C`
+				shortcut: `${getModifierKey()}C`
 			},
 
 			{
@@ -41,7 +41,7 @@ $: componentSettings = $selectedComponent?.map((sc) => findComponentSettings($ap
 					deleteComponent?.removeGridElement()
 				},
 				icon: Trash,
-				shortcut: `${getModifierKey()} + Del`,
+				shortcut: `Del`,
 				color: 'red'
 			}
 		]

package/package/components/apps/editor/RecomputeAllComponents.svelte

@@ -139,7 +139,7 @@ let items = [
 				>
 					<div
 						class={classNames(
-							'!text-tertiary text-left px-4 py-2 gap-2 cursor-pointer hover:bg-gray-100 !text-xs font-semibold'
+							'!text-tertiary text-left px-4 py-2 gap-2 cursor-pointer hover:bg-surface-hover !text-xs font-semibold'
 						)}
 					>
 						{#if index === 0}

package/package/components/apps/editor/SettingsPanel.svelte

@@ -108,6 +108,8 @@ const dispatch = createEventDispatcher();
 							shouldCapitalize={false}
 							bind:inputSpecs={hiddenInlineScript.script.fields}
 							userInputEnabled={false}
+							recomputeOnInputChanged={hiddenInlineScript.script.recomputeOnInputChanged}
+							showOnDemandOnlyToggle
 						/>
 					{/key}
 				</PanelSection>

package/package/components/apps/editor/TabsDebug.svelte

@@ -49,7 +49,7 @@ let selected = null;
 				>
 					<div
 						class={classNames(
-							'!text-tertiary text-left px-4 py-2 gap-2 cursor-pointer hover:bg-gray-100 !text-xs font-semibold'
+							'!text-tertiary text-left px-4 py-2 gap-2 cursor-pointer hover:bg-surface-hover !text-xs font-semibold'
 						)}
 					>
 						{#if index === tabs.length - 1}
@@ -69,7 +69,7 @@ let selected = null;
 			>
 				<div
 					class={classNames(
-						'!text-red-600 text-left px-4 py-2 gap-2 cursor-pointer hover:bg-gray-100 !text-xs font-semibold'
+						'!text-red-600 dark:!text-red-400 text-left px-4 py-2 gap-2 cursor-pointer hover:bg-surface-hover !text-xs font-semibold'
 					)}
 				>
 					{`Reset debug mode`}

package/package/components/apps/editor/appUtils.js

@@ -277,6 +277,14 @@ export function insertNewGridItem(app, builddata, focusedGrid, columns, keepId)
         ? `${focusedGrid?.parentComponentId}-${focusedGrid?.subGridIndex ?? 0}`
         : undefined;
     if (key && app.subgrids[key] === undefined) {
+        let parent = findGridItemById(app.grid, app.subgrids, key)?.data;
+        let subgrids = parent?.numberOfSubgrids;
+        if (subgrids === undefined) {
+            throw Error(`Invalid subgrid selected, the parent has no subgrids: ${key}, parent: ${JSON.stringify(parent)}`);
+        }
+        if (focusedGrid?.subGridIndex && (focusedGrid?.subGridIndex < 0 || focusedGrid?.subGridIndex >= subgrids)) {
+            throw Error(`Invalid subgrid selected: ${key}, max subgrids: ${subgrids}`);
+        }
         // If ever the subgrid is undefined, we want to make sure it is defined
         app.subgrids[key] = [];
     }

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

@@ -33,6 +33,8 @@ import AppDbExplorer from '../../components/display/dbtable/AppDbExplorer.svelte
 import AppS3FileInput from '../../components/inputs/AppS3FileInput.svelte';
 import AppAlert from '../../components/display/AppAlert.svelte';
 import AppDateSliderInput from '../../components/inputs/AppDateSliderInput.svelte';
+import AppTimeInput from '../../components/inputs/AppTimeInput.svelte';
+import AppDateTimeInput from '../../components/inputs/AppDateTimeInput.svelte';
 export let component;
 export let selected;
 export let locked = false;
@@ -356,6 +358,7 @@ function mouseOut() {
 				verticalAlignment={component.verticalAlignment}
 				configuration={component.configuration}
 				customCss={component.customCss}
+				onSelect={component.onSelect}
 				{render}
 			/>
 		{:else if component.type === 'multiselectcomponent'}
@@ -396,6 +399,7 @@ function mouseOut() {
 				configuration={component.configuration}
 				customCss={component.customCss}
 				recomputeIds={component.recomputeIds}
+				onToggle={component.onToggle}
 				{render}
 			/>
 		{:else if component.type === 'textinputcomponent'}
@@ -447,6 +451,23 @@ function mouseOut() {
 				customCss={component.customCss}
 				{render}
 			/>
+		{:else if component.type === 'timeinputcomponent'}
+			<AppTimeInput
+				verticalAlignment={component.verticalAlignment}
+				configuration={component.configuration}
+				id={component.id}
+				customCss={component.customCss}
+				{render}
+			/>
+		{:else if component.type === 'datetimeinputcomponent'}
+			<AppDateTimeInput
+				verticalAlignment={component.verticalAlignment}
+				configuration={component.configuration}
+				inputType="date"
+				id={component.id}
+				customCss={component.customCss}
+				{render}
+			/>
 		{:else if component.type === 'numberinputcomponent'}
 			<AppNumberInput
 				verticalAlignment={component.verticalAlignment}