From 316a80303392c6d7034c9df8be0314b707ad49a3 Mon Sep 17 00:00:00 2001
From: andrewwallacespeckle <andrew@speckle.systems>
Date: Thu, 14 Aug 2025 15:49:55 +0100
Subject: [PATCH 1/3] feat(fe): Filter by selection WIP

---
 .../viewer/selection/KeyValuePair.vue         | 126 ++++++++++++++++++
 .../components/viewer/selection/Object.vue    |  81 +----------
 2 files changed, 129 insertions(+), 78 deletions(-)
 create mode 100644 packages/frontend-2/components/viewer/selection/KeyValuePair.vue

diff --git a/packages/frontend-2/components/viewer/selection/KeyValuePair.vue b/packages/frontend-2/components/viewer/selection/KeyValuePair.vue
new file mode 100644
index 000000000..8a2a0bd45
--- /dev/null
+++ b/packages/frontend-2/components/viewer/selection/KeyValuePair.vue
@@ -0,0 +1,126 @@
+<template>
+  <div class="flex w-full">
+    <div
+      :class="`grid grid-cols-3 w-full pl-2 h-5 items-center ${
+        kvp.value === null || kvp.value === undefined ? 'text-foreground-2' : ''
+      }`"
+    >
+      <div
+        class="col-span-1 truncate text-body-3xs mr-2 font-medium text-foreground-2"
+        :title="(kvp.key as string)"
+      >
+        {{ kvp.key }}
+      </div>
+      <div
+        class="group col-span-2 pl-1 truncate text-body-3xs flex gap-1 items-center text-foreground"
+        :title="(kvp.value as string)"
+      >
+        <div class="flex gap-1 items-center w-full">
+          <!-- NOTE: can't do kvp.value || 'null' because 0 || 'null' = 'null' -->
+          <template v-if="isUrlString(kvp.value)">
+            <a
+              :href="kvp.value as string"
+              target="_blank"
+              rel="noopener"
+              class="truncate border-b border-outline-3 hover:border-outline-5"
+              :class="kvp.value === null ? '' : 'group-hover:max-w-[calc(100%-1rem)]'"
+            >
+              {{ kvp.value }}
+            </a>
+          </template>
+          <template v-else>
+            <span
+              class="truncate"
+              :class="kvp.value === null ? '' : 'group-hover:max-w-[calc(100%-1rem)]'"
+            >
+              {{ kvp.value === null ? 'null' : kvp.value }}
+            </span>
+          </template>
+          <span v-if="kvp.units" class="truncate opacity-70">
+            {{ kvp.units }}
+          </span>
+          <LayoutMenu
+            v-model:open="showActionsMenu"
+            :items="actionsItems"
+            mount-menu-on-body
+            @click.stop.prevent
+            @chosen="onActionChosen"
+          >
+            <button
+              :class="isCopyable(kvp) ? 'cursor-pointer' : 'cursor-default'"
+              class="opacity-0 group-hover:opacity-100 hover:bg-highlight-1 rounded h-4 w-4 flex items-center justify-center"
+              @click="showActionsMenu = !showActionsMenu"
+            >
+              <Ellipsis class="h-3 w-3" />
+            </button>
+          </LayoutMenu>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { VALID_HTTP_URL } from '~~/lib/common/helpers/validation'
+import { LayoutMenu, type LayoutMenuItem } from '@speckle/ui-components'
+import { Ellipsis } from 'lucide-vue-next'
+
+const props = defineProps<{
+  kvp: Record<string, unknown> & { key: string; value: unknown; units?: string }
+}>()
+
+const showActionsMenu = ref(false)
+
+const isUrlString = (v: unknown) => typeof v === 'string' && VALID_HTTP_URL.test(v)
+
+const isCopyable = (kvp: Record<string, unknown>) => {
+  return kvp.value !== null && kvp.value !== undefined && typeof kvp.value !== 'object'
+}
+
+const handleCopy = async (kvp: Record<string, unknown>) => {
+  const { copy } = useClipboard()
+  if (isCopyable(kvp)) {
+    const keyName = kvp.key as string
+    await copy(kvp.value as string, {
+      successMessage: `${keyName} copied to clipboard`,
+      failureMessage: `Failed to copy ${keyName} to clipboard`
+    })
+  }
+}
+
+const actionsItems = computed<LayoutMenuItem[][]>(() => {
+  const items: LayoutMenuItem[][] = []
+
+  // Only show copy option if the value is copyable
+  if (isCopyable(props.kvp)) {
+    items.push([
+      {
+        title: 'Copy value',
+        id: 'copy-value'
+      }
+    ])
+  }
+
+  items.push([
+    {
+      title: 'Filter by value',
+      id: 'filter-by-value'
+    }
+  ])
+
+  return items
+})
+
+const onActionChosen = (params: { item: LayoutMenuItem }) => {
+  const { item } = params
+
+  switch (item.id) {
+    case 'copy-value':
+      handleCopy(props.kvp)
+      break
+    case 'filter-by-value':
+      // TODO: Implement filter by value functionality
+      break
+  }
+}
+</script>
diff --git a/packages/frontend-2/components/viewer/selection/Object.vue b/packages/frontend-2/components/viewer/selection/Object.vue
index 21cb9d6de..ef7c2115b 100644
--- a/packages/frontend-2/components/viewer/selection/Object.vue
+++ b/packages/frontend-2/components/viewer/selection/Object.vue
@@ -30,69 +30,14 @@
     </div>
     <div v-if="unfold" class="space-y-1 pl-0 py-1 pr-2">
       <!-- key value pair display -->
-      <div
+      <ViewerSelectionKeyValuePair
         v-for="(kvp, index) in [
           ...categorisedValuePairs.primitives,
           ...categorisedValuePairs.nulls
         ]"
         :key="index"
-        class="flex w-full"
-      >
-        <div
-          :class="`grid grid-cols-3 w-full pl-2 py-0.5 ${
-            kvp.value === null || kvp.value === undefined ? 'text-foreground-2' : ''
-          }`"
-        >
-          <div
-            class="col-span-1 truncate text-body-3xs mr-2 font-medium text-foreground-2"
-            :title="(kvp.key as string)"
-          >
-            {{ kvp.key }}
-          </div>
-          <div
-            class="group col-span-2 pl-1 truncate text-body-3xs flex gap-1 items-center text-foreground"
-            :title="(kvp.value as string)"
-          >
-            <div class="flex gap-1 items-center w-full">
-              <!-- NOTE: can't do kvp.value || 'null' because 0 || 'null' = 'null' -->
-              <template v-if="isUrlString(kvp.value)">
-                <a
-                  :href="kvp.value as string"
-                  target="_blank"
-                  rel="noopener"
-                  class="truncate border-b border-outline-3 hover:border-outline-5"
-                  :class="
-                    kvp.value === null ? '' : 'group-hover:max-w-[calc(100%-1rem)]'
-                  "
-                >
-                  {{ kvp.value }}
-                </a>
-              </template>
-              <template v-else>
-                <span
-                  class="truncate"
-                  :class="
-                    kvp.value === null ? '' : 'group-hover:max-w-[calc(100%-1rem)]'
-                  "
-                >
-                  {{ kvp.value === null ? 'null' : kvp.value }}
-                </span>
-              </template>
-              <span v-if="kvp.units" class="truncate opacity-70">
-                {{ kvp.units }}
-              </span>
-              <button
-                v-if="isCopyable(kvp)"
-                :class="isCopyable(kvp) ? 'cursor-pointer' : 'cursor-default'"
-                class="opacity-0 group-hover:opacity-100 w-4"
-                @click="handleCopy(kvp)"
-              >
-                <ClipboardDocumentIcon class="h-3 w-3" />
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
+        :kvp="kvp"
+      />
       <div
         v-for="(kvp, index) in categorisedValuePairs.objects"
         :key="index"
@@ -148,12 +93,10 @@
   </div>
 </template>
 <script setup lang="ts">
-import { ClipboardDocumentIcon } from '@heroicons/vue/24/outline'
 import type { SpeckleObject } from '~~/lib/viewer/helpers/sceneExplorer'
 import { getHeaderAndSubheaderForSpeckleObject } from '~~/lib/object-sidebar/helpers'
 import { useInjectedViewerState } from '~~/lib/viewer/composables/setup'
 import { useHighlightedObjectsUtilities } from '~/lib/viewer/composables/ui'
-import { VALID_HTTP_URL } from '~~/lib/common/helpers/validation'
 
 const {
   ui: {
@@ -174,7 +117,6 @@ const props = withDefaults(
 )
 
 const { highlightObjects, unhighlightObjects } = useHighlightedObjectsUtilities()
-
 const unfold = ref(props.unfold)
 const autoUnfoldKeys = ['properties', 'Instance Parameters']
 
@@ -241,23 +183,6 @@ const headerAndSubheader = computed(() => {
   return getHeaderAndSubheaderForSpeckleObject(props.object)
 })
 
-const isUrlString = (v: unknown) => typeof v === 'string' && VALID_HTTP_URL.test(v)
-
-const isCopyable = (kvp: Record<string, unknown>) => {
-  return kvp.value !== null && kvp.value !== undefined && typeof kvp.value !== 'object'
-}
-
-const handleCopy = async (kvp: Record<string, unknown>) => {
-  const { copy } = useClipboard()
-  if (isCopyable(kvp)) {
-    const keyName = kvp.key as string
-    await copy(kvp.value as string, {
-      successMessage: `${keyName} copied to clipboard`,
-      failureMessage: `Failed to copy ${keyName} to clipboard`
-    })
-  }
-}
-
 const ignoredProps = [
   '__closure',
   'displayMesh',

From b7ee83ba5e9aee9bd9602d25162155648f0ee641 Mon Sep 17 00:00:00 2001
From: andrewwallacespeckle <andrew@speckle.systems>
Date: Fri, 15 Aug 2025 11:13:47 +0100
Subject: [PATCH 2/3] feat(fe): filter by property

---
 .../components/viewer/controls/Left.vue       | 13 ++-
 .../components/viewer/filters/Panel.vue       | 53 +----------
 .../viewer/selection/KeyValuePair.vue         | 66 +++++++++----
 .../frontend-2/lib/viewer/composables/ui.ts   | 93 ++++++++++++++++++-
 4 files changed, 155 insertions(+), 70 deletions(-)

diff --git a/packages/frontend-2/components/viewer/controls/Left.vue b/packages/frontend-2/components/viewer/controls/Left.vue
index 95173e6a5..03ffc2769 100644
--- a/packages/frontend-2/components/viewer/controls/Left.vue
+++ b/packages/frontend-2/components/viewer/controls/Left.vue
@@ -243,7 +243,7 @@ const isTablet = breakpoints.smaller('lg')
 const { getTooltipProps } = useSmartTooltipDelay()
 const isSavedViewsEnabled = useAreSavedViewsEnabled()
 const { $intercom } = useNuxtApp()
-const { hasActiveFilters } = useFilterUtilities()
+const { hasActiveFilters, filters } = useFilterUtilities()
 
 const activePanel = ref<ActivePanel>('none')
 const modelsSubView = ref<ModelsSubView>(ModelsSubView.Main)
@@ -339,6 +339,17 @@ watch(isSmallerOrEqualSm, (newVal) => {
   activePanel.value = newVal ? 'none' : 'models'
 })
 
+// Auto-open filters panel when a new filter is applied from elsewhere
+watch(
+  () => filters.propertyFilter.isApplied.value && filters.propertyFilter.filter.value,
+  (newFilterApplied, oldFilterApplied) => {
+    // Only trigger if we're going from no filter to having a filter (not when changing filters or removing)
+    if (newFilterApplied && !oldFilterApplied) {
+      activePanel.value = 'filters'
+    }
+  }
+)
+
 defineExpose({
   forceClosePanel,
   forceClosePanels: forceClosePanel
diff --git a/packages/frontend-2/components/viewer/filters/Panel.vue b/packages/frontend-2/components/viewer/filters/Panel.vue
index e0d0ad3fb..27c56074c 100644
--- a/packages/frontend-2/components/viewer/filters/Panel.vue
+++ b/packages/frontend-2/components/viewer/filters/Panel.vue
@@ -116,64 +116,19 @@ const {
   removePropertyFilter,
   applyPropertyFilter,
   unApplyPropertyFilter,
-  filters: { propertyFilter }
+  filters: { propertyFilter },
+  getRelevantFilters,
+  isRevitProperty
 } = useFilterUtilities()
 
 const {
   metadata: { availableFilters: allFilters }
 } = useInjectedViewer()
 
-const revitPropertyRegex = /^parameters\./
-// Note: we've split this regex check in two to not clash with navis properties. This makes generally makes dim very sad, as we're layering hacks.
-// Navis object properties come under `properties`, same as revit ones - as such we can't assume they're the same. Here we're targeting revit's
-// specific two subcategories of `properties`.
-const revitPropertyRegexDui3000InstanceProps = /^properties\.Instance/ // note this is partially valid for civil3d, or dim should test against it
-const revitPropertyRegexDui3000TypeProps = /^properties\.Type/ // note this is partially valid for civil3d, or dim should test against it
-
 const showAllFilters = ref(false)
 
-const isRevitProperty = (key: string): boolean => {
-  return (
-    revitPropertyRegex.test(key) ||
-    revitPropertyRegexDui3000InstanceProps.test(key) ||
-    revitPropertyRegexDui3000TypeProps.test(key)
-  )
-}
-
 const relevantFilters = computed(() => {
-  return (allFilters.value || []).filter((f: PropertyInfo) => {
-    if (
-      f.key.endsWith('.units') ||
-      f.key.endsWith('.speckle_type') ||
-      f.key.includes('.parameters.') ||
-      // f.key.includes('level.') ||
-      f.key.includes('renderMaterial') ||
-      f.key.includes('.domain') ||
-      f.key.includes('plane.') ||
-      f.key.includes('baseLine') ||
-      f.key.includes('referenceLine') ||
-      f.key.includes('end.') ||
-      f.key.includes('start.') ||
-      f.key.includes('endPoint.') ||
-      f.key.includes('midPoint.') ||
-      f.key.includes('startPoint.') ||
-      f.key.includes('startPoint.') ||
-      f.key.includes('.materialName') ||
-      f.key.includes('.materialClass') ||
-      f.key.includes('.materialCategory') ||
-      f.key.includes('displayStyle') ||
-      f.key.includes('displayValue') ||
-      f.key.includes('displayMesh')
-    ) {
-      return false
-    }
-    // handle revit params: the actual one single value we're interested is in paramters.HOST_BLA BLA_.value, the rest are not needed
-    if (isRevitProperty(f.key)) {
-      if (f.key.endsWith('.value')) return true
-      else return false
-    }
-    return true
-  })
+  return getRelevantFilters(allFilters.value)
 })
 
 const speckleTypeFilter = computed(() =>
diff --git a/packages/frontend-2/components/viewer/selection/KeyValuePair.vue b/packages/frontend-2/components/viewer/selection/KeyValuePair.vue
index 8a2a0bd45..9863446f8 100644
--- a/packages/frontend-2/components/viewer/selection/KeyValuePair.vue
+++ b/packages/frontend-2/components/viewer/selection/KeyValuePair.vue
@@ -64,6 +64,9 @@
 import { VALID_HTTP_URL } from '~~/lib/common/helpers/validation'
 import { LayoutMenu, type LayoutMenuItem } from '@speckle/ui-components'
 import { Ellipsis } from 'lucide-vue-next'
+import { useFilterUtilities } from '~~/lib/viewer/composables/ui'
+import { useInjectedViewer } from '~~/lib/viewer/composables/setup'
+import type { PropertyInfo } from '@speckle/viewer'
 
 const props = defineProps<{
   kvp: Record<string, unknown> & { key: string; value: unknown; units?: string }
@@ -71,12 +74,32 @@ const props = defineProps<{
 
 const showActionsMenu = ref(false)
 
+const { setPropertyFilter, applyPropertyFilter, isPropertyFilterable } =
+  useFilterUtilities()
+const {
+  metadata: { availableFilters }
+} = useInjectedViewer()
+
 const isUrlString = (v: unknown) => typeof v === 'string' && VALID_HTTP_URL.test(v)
 
 const isCopyable = (kvp: Record<string, unknown>) => {
   return kvp.value !== null && kvp.value !== undefined && typeof kvp.value !== 'object'
 }
 
+const isFilterable = (kvp: Record<string, unknown>) => {
+  const key = kvp.key as string
+  return isPropertyFilterable(key, availableFilters.value)
+}
+
+const handleFilterByProperty = (kvp: Record<string, unknown>) => {
+  const key = kvp.key as string
+  const filter = availableFilters.value?.find((f: PropertyInfo) => f.key === key)
+  if (filter) {
+    setPropertyFilter(filter)
+    applyPropertyFilter()
+  }
+}
+
 const handleCopy = async (kvp: Record<string, unknown>) => {
   const { copy } = useClipboard()
   if (isCopyable(kvp)) {
@@ -89,37 +112,42 @@ const handleCopy = async (kvp: Record<string, unknown>) => {
 }
 
 const actionsItems = computed<LayoutMenuItem[][]>(() => {
-  const items: LayoutMenuItem[][] = []
-
-  // Only show copy option if the value is copyable
-  if (isCopyable(props.kvp)) {
-    items.push([
+  return [
+    [
       {
         title: 'Copy value',
-        id: 'copy-value'
+        id: 'copy-value',
+        disabled: !isCopyable(props.kvp),
+        disabledTooltip: isCopyable(props.kvp)
+          ? undefined
+          : 'Cannot copy objects, arrays, or null values'
       }
-    ])
-  }
-
-  items.push([
-    {
-      title: 'Filter by value',
-      id: 'filter-by-value'
-    }
-  ])
-
-  return items
+    ],
+    [
+      {
+        title: 'Filter by property',
+        id: 'filter-by-property',
+        disabled: !isFilterable(props.kvp),
+        disabledTooltip: isFilterable(props.kvp)
+          ? undefined
+          : 'This property is not available for filtering'
+      }
+    ]
+  ]
 })
 
 const onActionChosen = (params: { item: LayoutMenuItem }) => {
   const { item } = params
 
+  // Don't execute if item is disabled
+  if (item.disabled) return
+
   switch (item.id) {
     case 'copy-value':
       handleCopy(props.kvp)
       break
-    case 'filter-by-value':
-      // TODO: Implement filter by value functionality
+    case 'filter-by-property':
+      handleFilterByProperty(props.kvp)
       break
   }
 }
diff --git a/packages/frontend-2/lib/viewer/composables/ui.ts b/packages/frontend-2/lib/viewer/composables/ui.ts
index 8c9f352e4..43515d6d6 100644
--- a/packages/frontend-2/lib/viewer/composables/ui.ts
+++ b/packages/frontend-2/lib/viewer/composables/ui.ts
@@ -259,6 +259,93 @@ export function useFilterUtilities(
     return !!filters.propertyFilter.filter.value
   })
 
+  // Regex patterns for identifying Revit properties
+  const revitPropertyRegex = /^parameters\./
+  // Note: we've split this regex check in two to not clash with navis properties. This makes generally makes dim very sad, as we're layering hacks.
+  // Navis object properties come under `properties`, same as revit ones - as such we can't assume they're the same. Here we're targeting revit's
+  // specific two subcategories of `properties`.
+  const revitPropertyRegexDui3000InstanceProps = /^properties\.Instance/ // note this is partially valid for civil3d, or dim should test against it
+  const revitPropertyRegexDui3000TypeProps = /^properties\.Type/ // note this is partially valid for civil3d, or dim should test against it
+
+  /**
+   * Determines if a property key represents a Revit property
+   */
+  const isRevitProperty = (key: string): boolean => {
+    return (
+      revitPropertyRegex.test(key) ||
+      revitPropertyRegexDui3000InstanceProps.test(key) ||
+      revitPropertyRegexDui3000TypeProps.test(key)
+    )
+  }
+
+  /**
+   * Determines if a property should be excluded from filtering based on its key
+   */
+  const shouldExcludeFromFiltering = (key: string): boolean => {
+    if (
+      key.endsWith('.units') ||
+      key.endsWith('.speckle_type') ||
+      key.includes('.parameters.') ||
+      // key.includes('level.') ||
+      key.includes('renderMaterial') ||
+      key.includes('.domain') ||
+      key.includes('plane.') ||
+      key.includes('baseLine') ||
+      key.includes('referenceLine') ||
+      key.includes('end.') ||
+      key.includes('start.') ||
+      key.includes('endPoint.') ||
+      key.includes('midPoint.') ||
+      key.includes('startPoint.') ||
+      key.includes('.materialName') ||
+      key.includes('.materialClass') ||
+      key.includes('.materialCategory') ||
+      key.includes('displayStyle') ||
+      key.includes('displayValue') ||
+      key.includes('displayMesh')
+    ) {
+      return true
+    }
+
+    // handle revit params: the actual one single value we're interested is in parameters.HOST_BLA BLA_.value, the rest are not needed
+    if (isRevitProperty(key)) {
+      if (key.endsWith('.value')) return false
+      else return true
+    }
+
+    return false
+  }
+
+  /**
+   * Filters the available filters to only include relevant ones for the filter UI
+   */
+  const getRelevantFilters = (
+    allFilters: PropertyInfo[] | null | undefined
+  ): PropertyInfo[] => {
+    return (allFilters || []).filter((f: PropertyInfo) => {
+      return !shouldExcludeFromFiltering(f.key)
+    })
+  }
+
+  /**
+   * Determines if a property key should be filterable
+   * (exists in available filters and is not excluded)
+   */
+  const isPropertyFilterable = (
+    key: string,
+    availableFilters: PropertyInfo[] | null | undefined
+  ): boolean => {
+    const availableFilterKeys = availableFilters?.map((f: PropertyInfo) => f.key) || []
+
+    // First check if it's in available filters
+    if (!availableFilterKeys.includes(key)) {
+      return false
+    }
+
+    // Then check if it should be excluded
+    return !shouldExcludeFromFiltering(key)
+  }
+
   return {
     isolateObjects,
     unIsolateObjects,
@@ -272,7 +359,11 @@ export function useFilterUtilities(
     resetFilters,
     resetExplode,
     waitForAvailableFilter,
-    hasActiveFilters
+    hasActiveFilters,
+    isRevitProperty,
+    shouldExcludeFromFiltering,
+    getRelevantFilters,
+    isPropertyFilterable
   }
 }
 

From d47fb2128a66951eec311c0784d0a3c39677e86c Mon Sep 17 00:00:00 2001
From: andrewwallacespeckle <andrew@speckle.systems>
Date: Fri, 15 Aug 2025 11:23:15 +0100
Subject: [PATCH 3/3] Keep menu active on open

---
 .../frontend-2/components/viewer/selection/KeyValuePair.vue   | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/frontend-2/components/viewer/selection/KeyValuePair.vue b/packages/frontend-2/components/viewer/selection/KeyValuePair.vue
index 9863446f8..46eee36e4 100644
--- a/packages/frontend-2/components/viewer/selection/KeyValuePair.vue
+++ b/packages/frontend-2/components/viewer/selection/KeyValuePair.vue
@@ -47,8 +47,8 @@
             @chosen="onActionChosen"
           >
             <button
-              :class="isCopyable(kvp) ? 'cursor-pointer' : 'cursor-default'"
-              class="opacity-0 group-hover:opacity-100 hover:bg-highlight-1 rounded h-4 w-4 flex items-center justify-center"
+              class="group-hover:opacity-100 hover:bg-highlight-1 rounded h-4 w-4 flex items-center justify-center"
+              :class="showActionsMenu ? 'bg-highlight-1 opacity-100' : 'opacity-0'"
               @click="showActionsMenu = !showActionsMenu"
             >
               <Ellipsis class="h-3 w-3" />