diff --git a/packages/frontend-2/components/automate/viewer/panel/FunctionRunRowObjectResult.vue b/packages/frontend-2/components/automate/viewer/panel/FunctionRunRowObjectResult.vue index a4349e1b2..f7871f179 100644 --- a/packages/frontend-2/components/automate/viewer/panel/FunctionRunRowObjectResult.vue +++ b/packages/frontend-2/components/automate/viewer/panel/FunctionRunRowObjectResult.vue @@ -109,11 +109,6 @@ const isolateOrUnisolateObjects = () => { const metadataGradientIsSet = ref(false) -watch(filteringState, (newVal) => { - if (newVal?.activePropFilterKey !== props.functionId) - metadataGradientIsSet.value = false -}) - // NOTE: This is currently a hacky convention!!! const computedPropInfo = computed(() => { if (!hasMetadataGradient.value) return @@ -202,4 +197,16 @@ const iconAndColor = computed(() => { } } }) + +watch( + () => filters.propertyFilters.value, + (newFilters) => { + if (!props.functionId) return + const hasFilter = newFilters.some((f) => f.filter?.key === props.functionId) + if (!hasFilter && metadataGradientIsSet.value) { + metadataGradientIsSet.value = false + } + }, + { deep: true } +) diff --git a/packages/frontend-2/components/viewer/filters/Panel.vue b/packages/frontend-2/components/viewer/filters/Panel.vue index 81453ea67..34d5b8fd5 100644 --- a/packages/frontend-2/components/viewer/filters/Panel.vue +++ b/packages/frontend-2/components/viewer/filters/Panel.vue @@ -87,9 +87,11 @@ diff --git a/packages/frontend-2/components/viewer/filters/filter/string/Checkboxes.vue b/packages/frontend-2/components/viewer/filters/filter/string/Checkboxes.vue index 7bcf7c234..232cfc0af 100644 --- a/packages/frontend-2/components/viewer/filters/filter/string/Checkboxes.vue +++ b/packages/frontend-2/components/viewer/filters/filter/string/Checkboxes.vue @@ -50,6 +50,7 @@ const sortMode = defineModel('sortMode', { default: SortMode.Alphabetical }) +const previousLength = ref(0) const itemHeight = 28 const maxHeight = 240 @@ -65,8 +66,31 @@ const filteredValues = computed(() => { }) }) -const { list, containerProps, wrapperProps } = useVirtualList(filteredValues, { - itemHeight, - overscan: 5 -}) +const { list, containerProps, wrapperProps, scrollTo } = useVirtualList( + filteredValues, + { + itemHeight, + overscan: 10 + } +) + +// Scroll to newly added values +watch( + () => props.filter.selectedValues, + (newValues) => { + if (newValues.length > previousLength.value) { + // Find the newly added value + const newValue = newValues[newValues.length - 1] + const index = filteredValues.value.findIndex((v) => v === newValue) + if (index !== -1) { + nextTick(() => { + const scrollIndex = Math.max(0, index - 3) // Center-ish position + scrollTo(scrollIndex) + }) + } + } + previousLength.value = newValues.length + }, + { immediate: true } +) diff --git a/packages/frontend-2/components/viewer/filters/property-selection/Item.vue b/packages/frontend-2/components/viewer/filters/property-selection/Item.vue index 52959a6bf..1a16fbbd9 100644 --- a/packages/frontend-2/components/viewer/filters/property-selection/Item.vue +++ b/packages/frontend-2/components/viewer/filters/property-selection/Item.vue @@ -13,6 +13,10 @@ v-if="property.type === FilterType.Numeric" class="h-3 w-3 stroke-emerald-700 dark:stroke-emerald-500" /> +