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"
/>
+