From 27f78bbe01e9a7b8eec9eb7aa44715d3427f9110 Mon Sep 17 00:00:00 2001 From: Ruben Fiszel Date: Mon, 26 Feb 2024 12:44:53 +0100 Subject: [PATCH] fix: improve conditional wrapper and prevent more app errors --- .../layout/AppConditionalWrapper.svelte | 1 - .../apps/components/layout/AppStepper.svelte | 6 +- .../apps/editor/DecisionTreeDebug.svelte | 2 +- .../lib/components/apps/editor/appUtils.ts | 8 ++ .../editor/contextPanel/DebugPanel.svelte | 42 ++++++-- .../editor/settingsPanel/GridCondition.svelte | 102 ++++++++++-------- 6 files changed, 108 insertions(+), 53 deletions(-) diff --git a/frontend/src/lib/components/apps/components/layout/AppConditionalWrapper.svelte b/frontend/src/lib/components/apps/components/layout/AppConditionalWrapper.svelte index 1795f57de6..00a6fd52ba 100644 --- a/frontend/src/lib/components/apps/components/layout/AppConditionalWrapper.svelte +++ b/frontend/src/lib/components/apps/components/layout/AppConditionalWrapper.svelte @@ -24,7 +24,6 @@ }) function onFocus() { - console.log('onFocus', id, selectedConditionIndex) $focusedGrid = { parentComponentId: id, subGridIndex: selectedConditionIndex diff --git a/frontend/src/lib/components/apps/components/layout/AppStepper.svelte b/frontend/src/lib/components/apps/components/layout/AppStepper.svelte index 7a9c8e7a68..5ea577460c 100644 --- a/frontend/src/lib/components/apps/components/layout/AppStepper.svelte +++ b/frontend/src/lib/components/apps/components/layout/AppStepper.svelte @@ -202,7 +202,8 @@ color="light" variant="contained" disabled={selectedIndex === 0} - on:click={() => { + on:click={(e) => { + e.preventDefault() directionClicked = 'left' runStep(selectedIndex - 1) }} @@ -222,7 +223,8 @@ color="dark" variant="contained" disabled={lastStep} - on:click={() => { + on:click={(e) => { + e.preventDefault() directionClicked = 'right' runStep(selectedIndex + 1) }} diff --git a/frontend/src/lib/components/apps/editor/DecisionTreeDebug.svelte b/frontend/src/lib/components/apps/editor/DecisionTreeDebug.svelte index 42a45b53ac..ec4cdc47b3 100644 --- a/frontend/src/lib/components/apps/editor/DecisionTreeDebug.svelte +++ b/frontend/src/lib/components/apps/editor/DecisionTreeDebug.svelte @@ -15,7 +15,7 @@ getContext('AppViewerContext') const dispatch = createEventDispatcher() - let currentNodeId: string = '' + let currentNodeId: string = $worldStore.outputsById[id]?.currentNodeId?.peak() ?? 'a' $worldStore.outputsById[id]?.currentNodeId?.subscribe( { diff --git a/frontend/src/lib/components/apps/editor/appUtils.ts b/frontend/src/lib/components/apps/editor/appUtils.ts index 61a070db0c..ae72d338a5 100644 --- a/frontend/src/lib/components/apps/editor/appUtils.ts +++ b/frontend/src/lib/components/apps/editor/appUtils.ts @@ -368,6 +368,14 @@ export function insertNewGridItem( : 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] = [] } diff --git a/frontend/src/lib/components/apps/editor/contextPanel/DebugPanel.svelte b/frontend/src/lib/components/apps/editor/contextPanel/DebugPanel.svelte index a9e6c0e34b..820d68bb12 100644 --- a/frontend/src/lib/components/apps/editor/contextPanel/DebugPanel.svelte +++ b/frontend/src/lib/components/apps/editor/contextPanel/DebugPanel.svelte @@ -4,7 +4,7 @@ import type { AppViewerContext } from '../../types' import Section from '$lib/components/Section.svelte' import Badge from '$lib/components/common/badge/Badge.svelte' - import { findGridItem } from '../appUtils' + import { deleteGridItem, findGridItem, findGridItemParentGrid } from '../appUtils' import { pluralize } from '$lib/utils' import Button from '$lib/components/common/button/Button.svelte' import { Trash } from 'lucide-svelte' @@ -21,8 +21,13 @@ .map((x) => { const parentId = x.split('-')[0] const parent = findGridItem($app, parentId) - - if (parent === undefined) { + const subgrid = x.replace(`${parentId}-`, '') + if (subgrid == '-1') { + return { + subGridId: x, + error: 'Invalid subgrid index -1 ' + } + } else if (parent === undefined) { return { subGridId: x, error: 'Parent not found' @@ -57,7 +62,7 @@ There are {pluralize(unintitializedComponents.length, 'uninitialized component')} in the app. -
+
Component Id
Status
+
Action
{#each unintitializedComponents as c} + {@const item = findGridItem($app, c)} + {#if !item} +
Item {c} not found
+ {:else}
@@ -80,13 +91,32 @@
- {findGridItem($app, c)?.data?.type || 'Unknown'} + {item?.data?.type || 'Unknown'}
Uninitialized
+
+ + +
+ {/if} + {/each}
@@ -140,7 +170,7 @@ } }} > - Remove subgrid + Remove {/each} diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/GridCondition.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/GridCondition.svelte index e66ff3d003..c1926283e9 100644 --- a/frontend/src/lib/components/apps/editor/settingsPanel/GridCondition.svelte +++ b/frontend/src/lib/components/apps/editor/settingsPanel/GridCondition.svelte @@ -17,11 +17,16 @@ export let component: AppComponent let dragDisabled = true - let items = conditions.map((condition, index) => { + let items = conditions.slice(0, -1).map((condition, index) => { return { value: condition, id: generateRandomString(), originalIndex: index } }) - $: conditions = items.map((item) => item.value) + $: conditions = items.map((item) => item.value).concat([{ + type: 'evalv2', + expr: 'true', + fieldType: 'boolean', + connections: [] + }]) const { app, runnableComponents, componentControl } = getContext('AppViewerContext') @@ -83,6 +88,7 @@ delete $runnableComponents[key] } } + $runnableComponents = $runnableComponents for (let i = index; i < items.length - 1; i++) { $app!.subgrids![`${component.id}-${i}`] = $app!.subgrids![`${component.id}-${i + 1}`] @@ -91,14 +97,14 @@ // Remove the corresponding item from the items array const nitems = items.filter((item) => item.originalIndex !== index) - component.numberOfSubgrids = nitems.length + component.numberOfSubgrids = nitems.length + 1 // Update the originalIndex of the remaining items nitems.forEach((item, i) => { item.originalIndex = i }) items = nitems - delete $app!.subgrids![`${component.id}-${items.length}`] + delete $app!.subgrids![`${component.id}-${items.length + 1}`] $app = $app } @@ -111,6 +117,7 @@ $app.subgrids[`${component.id}-${numberOfConditions}`] = $app.subgrids[`${component.id}-${numberOfConditions - 1}`] + $app.subgrids[`${component.id}-${numberOfConditions - 1}`] = [] const newCondition: AppInputSpec<'boolean', boolean> = { @@ -143,54 +150,63 @@ use:dndzone={{ items: items, flipDurationMs: 200, - dropTargetStyle: {} + dropTargetStyle: {}, + dragDisabled }} on:consider={handleConsider} on:finalize={handleFinalize} > {#each items as item, index (item.id)} - {#if index < items.length - 1} - {@const condition = item.value} -
-
- + {@const condition = item.value} +
+
+ {#if dragDisabled} + + {:else} + 
{condition?.['expr']}
+ {/if} + +
+ +
+ + +
deleteSubgrid(index)}> +
-
- -
deleteSubgrid(index)}> - -
- - -
- -
+ + +
+
- {/if} +
+ {/each}