From c5f2ed3afb64be884fe25a0c2d92a47e2233ea3e Mon Sep 17 00:00:00 2001
From: andrewwallacespeckle <andrew@speckle.systems>
Date: Thu, 21 Aug 2025 16:18:27 +0100
Subject: [PATCH] Virtual list in property select

---
 .../components/viewer/controls/Left.vue       |  2 +-
 .../filters/property-selection/Panel.vue      | 75 +++++++++++++------
 2 files changed, 52 insertions(+), 25 deletions(-)

diff --git a/packages/frontend-2/components/viewer/controls/Left.vue b/packages/frontend-2/components/viewer/controls/Left.vue
index a3ec4c8cc..e78732376 100644
--- a/packages/frontend-2/components/viewer/controls/Left.vue
+++ b/packages/frontend-2/components/viewer/controls/Left.vue
@@ -154,7 +154,7 @@
     <!-- Panel Extension - Portal target for additional content -->
     <div
       id="panel-extension"
-      class="absolute max-h-96 h-full empty:hidden z-30 w-64 top-1.5 bg-foundation border border-outline-2 rounded-lg overflow-hidden"
+      class="absolute max-h-[calc(100dvh-4rem)] empty:hidden z-30 w-64 top-1.5 bg-foundation border border-outline-2 rounded-lg overflow-hidden"
       :style="`left: ${panelExtensionLeft}px`"
     >
       <PortalTarget name="panel-extension"></PortalTarget>
diff --git a/packages/frontend-2/components/viewer/filters/property-selection/Panel.vue b/packages/frontend-2/components/viewer/filters/property-selection/Panel.vue
index 33ac555be..9afeb9a81 100644
--- a/packages/frontend-2/components/viewer/filters/property-selection/Panel.vue
+++ b/packages/frontend-2/components/viewer/filters/property-selection/Panel.vue
@@ -6,37 +6,50 @@
       input-id="property-search"
     />
 
-    <div class="flex-1 overflow-y-auto overflow-x-hidden simple-scrollbar p-2">
-      <div class="flex flex-col">
-        <button
-          v-for="property in filteredOptions"
-          :key="property.value"
-          class="p-2 text-foreground rounded hover:bg-highlight-1 text-left flex items-center gap-2"
-          @click="$emit('selectProperty', property.value)"
-        >
-          <component
-            :is="getPropertyTypeDisplay(property.type).icon"
-            class="h-3 w-3 shrink-0"
-            :class="getPropertyTypeDisplay(property.type).classes"
-          />
-          <div class="min-w-0 flex-1">
-            <div class="text-body-2xs font-medium text-foreground truncate">
-              {{ property.label }}
+    <div
+      v-bind="containerProps"
+      class="relative simple-scrollbar"
+      :style="{ height: containerHeight }"
+    >
+      <div
+        v-for="{ data: property, index } in list"
+        :key="`${index}-${property.value}`"
+        :style="{
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          width: '100%',
+          height: `${itemHeight}px`,
+          transform: `translateY(${index * itemHeight}px)`
+        }"
+      >
+        <div class="px-1">
+          <button
+            class="w-full h-full py-1.5 px-2 text-foreground rounded hover:bg-highlight-1 text-left flex items-center gap-2"
+            @click="$emit('selectProperty', property.value)"
+          >
+            <component
+              :is="getPropertyTypeDisplay(property.type).icon"
+              class="h-3 w-3 shrink-0"
+              :class="getPropertyTypeDisplay(property.type).classes"
+            />
+            <div class="min-w-0 flex-1">
+              <div class="text-body-2xs font-medium text-foreground truncate">
+                {{ property.label }}
+              </div>
+              <div class="text-body-3xs text-foreground-2 truncate -mt-0.5">
+                {{ property.parentPath || '-' }}
+              </div>
             </div>
-            <div
-              v-if="property.parentPath"
-              class="text-body-3xs text-foreground-2 truncate -mt-1"
-            >
-              {{ property.parentPath }}
-            </div>
-          </div>
-        </button>
+          </button>
+        </div>
       </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
+import { useVirtualList } from '@vueuse/core'
 import { useFilterUtilities } from '~~/lib/viewer/composables/filtering'
 
 type PropertyOption = {
@@ -73,4 +86,18 @@ const filteredOptions = computed(() => {
       option.type.toLowerCase().includes(searchTerm)
   )
 })
+
+// Virtual list setup
+const itemHeight = 42
+const maxHeight = 300 // Maximum height for the container
+
+const containerHeight = computed(() => {
+  const contentHeight = filteredOptions.value.length * itemHeight
+  return `${Math.min(contentHeight, maxHeight)}px`
+})
+
+const { list, containerProps } = useVirtualList(filteredOptions, {
+  itemHeight,
+  overscan: 5
+})
 </script>