fix: improve prop filtering on flow prop picker

frontend/src/lib/components/flows/previousResults.ts

@@ -283,11 +283,8 @@ export function filterNestedObject(obj: any, nestedKeys: string[]) {
 		if (nestedKeys[0] === '') {
 			return obj
 		}
-		const regexes = buildPrefixRegex(Object.keys(obj))
-		const matches = regexes.filter(({ regex }) => regex.test(nestedKeys[0]))
-		return Object.fromEntries(
-			Object.entries(obj).filter(([key]) => matches.some(({ word }) => word === key))
-		)
+
+		return Object.fromEntries(Object.entries(obj).filter(([key]) => key.startsWith(nestedKeys[0])))
 	}
 	const [key, ...rest] = nestedKeys
 	if (obj && typeof obj === 'object' && key in obj) {

frontend/src/lib/components/propertyPicker/PropPicker.svelte

@@ -2,7 +2,7 @@
 	import { ResourceService, VariableService } from '$lib/gen'
 	import { workspaceStore } from '$lib/stores'
 	import { getContext } from 'svelte'
-	import { Button } from '../common'
+	import { Badge, Button } from '../common'
 	import type { PropPickerWrapperContext } from '../flows/propPicker/PropPickerWrapper.svelte'
 
 	import ObjectViewer from './ObjectViewer.svelte'
@@ -44,8 +44,8 @@
 	const { pickablePropertiesFiltered } = getContext<PropPickerContext>('PropPickerContext')
 	$: $pickablePropertiesFiltered = pickableProperties
 
-	let flowInputsFiltered = pickableProperties.flow_input
-	let resultByIdFiltered = pickableProperties.priorIds
+	let flowInputsFiltered: any = pickableProperties.flow_input
+	let resultByIdFiltered: any = pickableProperties.priorIds
 
 	let timeout: NodeJS.Timeout
 	function onSearch(search: string) {
@@ -90,18 +90,23 @@
 		)
 	}
 
+	let filteringFlowInputsOrResult = ''
 	async function filterPickableProperties() {
-		if (!filterActive) {
+		if (!$propPickerConfig || !filterActive) {
+			flowInputsFiltered = pickableProperties.flow_input
+			resultByIdFiltered = pickableProperties.priorIds
+			filteringFlowInputsOrResult = ''
 			return
 		}
 
 		if (!$inputMatches?.some((match) => match.word === 'flow_input')) {
-			flowInputsFiltered = []
+			flowInputsFiltered = {}
 		}
 		if (!$inputMatches?.some((match) => match.word === 'results')) {
-			resultByIdFiltered = []
+			resultByIdFiltered = {}
 		}
 		if ($inputMatches?.length == 1) {
+			filteringFlowInputsOrResult = $inputMatches[0].value
 			if ($inputMatches[0].word === 'flow_input') {
 				flowInputsFiltered = pickableProperties.flow_input
 				let [, ...nestedKeys] = $inputMatches[0].value.split('.')
@@ -117,12 +122,14 @@
 					resultByIdFiltered = filtered
 				}
 			}
+		} else {
+			filteringFlowInputsOrResult = ''
 		}
 
-		if ($pickablePropertiesFiltered) {
-			resultByIdFiltered && ($pickablePropertiesFiltered.priorIds = resultByIdFiltered)
-			flowInputsFiltered && ($pickablePropertiesFiltered.flow_input = flowInputsFiltered)
-		}
+		// if ($pickablePropertiesFiltered) {
+		// 	resultByIdFiltered && ($pickablePropertiesFiltered.priorIds = resultByIdFiltered)
+		// 	flowInputsFiltered && ($pickablePropertiesFiltered.flow_input = flowInputsFiltered)
+		// }
 	}
 
 	async function updateCollapsable() {
@@ -189,10 +196,18 @@
 		<ClearableInput bind:value={search} placeholder="Search prop..." />
 	</div>
 	<div
-		class="overflow-y-auto px-2 pt-2 grow"
+		class="overflow-y-auto px-2 pt-2 grow relative"
 		class:bg-surface-secondary={!$propPickerConfig && !alwaysOn}
 	>
-		{#if flowInputsFiltered && (Object.keys(flowInputsFiltered).length > 0 || !filterActive)}
+		<!-- <pre class="text-2xs w-full"
+			>{JSON.stringify({ pickableProperties, resultByIdFiltered }, null, 2)}</pre
+		> -->
+		{#if filteringFlowInputsOrResult}
+			<div class="absolute bottom-0 right-0">
+				<Badge small>filter: {filteringFlowInputsOrResult}</Badge>
+			</div>
+		{/if}
+		{#if flowInputsFiltered && (Object.keys(flowInputsFiltered ?? {}).length > 0 || !filterActive)}
 			<div class="flex justify-between items-center space-x-1">
 				<span class="font-normal text-sm text-secondary">Flow Input</span>
 				<div class="flex space-x-2 items-center" />
@@ -252,7 +267,7 @@
 			{/if}
 		{:else}
 			{@const json = Object.fromEntries(
-				Object.entries(resultByIdFiltered).filter(([k, v]) => k == previousId)
+				Object.entries(resultByIdFiltered ?? {}).filter(([k, v]) => k == previousId)
 			)}
 			{#if previousId && Object.keys(json).length > 0}
 				<span class="font-normal text-sm text-secondary">Previous Result</span>
@@ -261,7 +276,7 @@
 						{allowCopy}
 						pureViewer={!$propPickerConfig}
 						json={Object.fromEntries(
-							Object.entries(resultByIdFiltered).filter(([k, v]) => k == previousId)
+							Object.entries(resultByIdFiltered ?? {}).filter(([k, v]) => k == previousId)
 						)}
 						prefix="results"
 						on:select
@@ -297,7 +312,7 @@
 						/>
 					</div>
 				{/if}
-				{#if Object.keys(resultByIdFiltered).length > 0}
+				{#if Object.keys(resultByIdFiltered ?? {}).length > 0}
 					<div class="overflow-y-auto pb-2">
 						<span class="font-normal text-sm text-secondary">All Results</span>