From bc58728b648fb557227666c5e34da08b0887cbc2 Mon Sep 17 00:00:00 2001
From: andrewwallacespeckle <andrew@speckle.systems>
Date: Wed, 27 Aug 2025 20:21:33 +0100
Subject: [PATCH] Style changes. Scrollbar improvments

---
 .../viewer/filters/LogicSelector.vue          |  26 +++-
 .../components/viewer/filters/Panel.vue       |  37 +++---
 .../filters/filter/string/Checkboxes.vue      |  65 ++++++++-
 .../filters/filter/string/SelectAll.vue       |   4 +-
 .../filters/filter/string/ValueItem.vue       |   2 +
 .../filters/property-selection/Panel.vue      |  44 ++++--
 .../components/viewer/layout/SidePanel.vue    |   7 +-
 .../lib/viewer/composables/filtering.ts       | 125 +++++++++++++-----
 .../lib/viewer/composables/setup.ts           |   4 +-
 .../lib/viewer/helpers/filters/types.ts       |   1 +
 10 files changed, 249 insertions(+), 66 deletions(-)

diff --git a/packages/frontend-2/components/viewer/filters/LogicSelector.vue b/packages/frontend-2/components/viewer/filters/LogicSelector.vue
index c72420c9b..f7ed0ee44 100644
--- a/packages/frontend-2/components/viewer/filters/LogicSelector.vue
+++ b/packages/frontend-2/components/viewer/filters/LogicSelector.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="px-3 pt-3">
+  <div class="px-3 py-2 flex items-center justify-between gap-3">
     <FormSelectBase
       name="filter-logic"
       label="Filter Logic"
@@ -21,19 +21,33 @@
         <span class="text-foreground text-body-2xs">{{ item.label }}</span>
       </template>
     </FormSelectBase>
+
+    <div class="flex items-center justify-end gap-1">
+      <Ghost class="h-4 w-4" />
+      <FormCheckbox
+        :model-value="ghostMode"
+        name="ghost-mode"
+        hide-label
+        size="sm"
+        @update:model-value="handleGhostModeChange"
+      />
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import { FilterLogic } from '~/lib/viewer/helpers/filters/types'
-import { FormSelectBase } from '@speckle/ui-components'
+import { FormSelectBase, FormCheckbox } from '@speckle/ui-components'
 import { useFilterUtilities } from '~~/lib/viewer/composables/filtering'
+import { Ghost } from 'lucide-vue-next'
+import type { Optional } from '@speckle/shared'
 
 defineProps<{
   modelValue: FilterLogic
 }>()
 
-const { setFilterLogicAndUpdate } = useFilterUtilities()
+const { setFilterLogicAndUpdate, setGhostModeAndUpdate, ghostMode } =
+  useFilterUtilities()
 
 const filterLogicOptions = ref([
   { value: FilterLogic.All, label: 'Match all rules' },
@@ -50,4 +64,10 @@ const handleLogicChange = (
     setFilterLogicAndUpdate(option.value)
   }
 }
+
+const handleGhostModeChange = (enabled: Optional<string | true> | string[]) => {
+  // Convert the checkbox value to boolean
+  const isEnabled = Array.isArray(enabled) ? enabled.length > 0 : !!enabled
+  setGhostModeAndUpdate(isEnabled)
+}
 </script>
diff --git a/packages/frontend-2/components/viewer/filters/Panel.vue b/packages/frontend-2/components/viewer/filters/Panel.vue
index 5b3a4a9be..f294c8f4e 100644
--- a/packages/frontend-2/components/viewer/filters/Panel.vue
+++ b/packages/frontend-2/components/viewer/filters/Panel.vue
@@ -1,5 +1,5 @@
 <template>
-  <ViewerLayoutSidePanel>
+  <ViewerLayoutSidePanel disable-scrollbar>
     <template #title>Filters</template>
     <template #actions>
       <div class="flex gap-x-0.5 items-center">
@@ -34,9 +34,9 @@
       <!-- Active Filters Section -->
       <div
         v-if="propertyFilters.length > 0"
-        class="flex-1 overflow-y-scroll simple-scrollbar"
+        class="flex-1 overflow-y-auto simple-scrollbar"
       >
-        <div class="flex flex-col gap-3 p-3">
+        <div class="flex flex-col gap-3 p-3 pt-0">
           <ViewerFiltersFilterCard
             v-for="filter in propertyFilters"
             :key="filter.id"
@@ -98,19 +98,26 @@ const relevantFilters = computed(() => {
 })
 
 const propertySelectOptions = computed((): PropertySelectOption[] => {
-  const allOptions: PropertySelectOption[] = relevantFilters.value.map((filter) => {
-    const pathParts = filter.key.split('.')
-    const propertyName = pathParts[pathParts.length - 1] // Last part (e.g., "name")
-    const parentPath = pathParts.slice(0, -1).join('.') // Everything except last part (e.g., "ab")
+  // Get keys of already added filters
+  const existingFilterKeys = new Set(
+    propertyFilters.value.map((f) => f.filter?.key).filter(Boolean)
+  )
 
-    return {
-      value: filter.key,
-      label: propertyName, // Clean property name for main display
-      parentPath, // Full path without the property name
-      type: filter.type,
-      hasParent: parentPath.length > 0
-    }
-  })
+  const allOptions: PropertySelectOption[] = relevantFilters.value
+    .filter((filter) => !existingFilterKeys.has(filter.key)) // Exclude already added filters
+    .map((filter) => {
+      const pathParts = filter.key.split('.')
+      const propertyName = pathParts[pathParts.length - 1] // Last part (e.g., "name")
+      const parentPath = pathParts.slice(0, -1).join('.') // Everything except last part (e.g., "ab")
+
+      return {
+        value: filter.key,
+        label: propertyName, // Clean property name for main display
+        parentPath, // Full path without the property name
+        type: filter.type,
+        hasParent: parentPath.length > 0
+      }
+    })
 
   // Sort: root properties first, then grouped by parent
   const sortedOptions = allOptions.sort((a, b) => {
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 2f01184e4..f4cf4db46 100644
--- a/packages/frontend-2/components/viewer/filters/filter/string/Checkboxes.vue
+++ b/packages/frontend-2/components/viewer/filters/filter/string/Checkboxes.vue
@@ -1,5 +1,32 @@
 <template>
   <div>
+    <div
+      v-if="shouldShowAppliedSection"
+      class="bg-highlight-1 rounded-md mx-2 my-1 p-1"
+    >
+      <div class="flex flex-wrap gap-1">
+        <span
+          v-for="value in displayedSelectedValues"
+          :key="value"
+          class="inline-flex items-center gap-1 px-2 py-0.5 bg-highlight-3 text-foreground text-body-3xs rounded"
+        >
+          {{ value }}
+          <button
+            class="text-foreground-2 hover:text-foreground"
+            @click="() => toggleValue(value)"
+          >
+            ×
+          </button>
+        </span>
+        <span
+          v-if="remainingCount > 0"
+          class="inline-flex items-center px-2 py-0.5 bg-highlight-3 text-foreground-2 text-body-3xs rounded"
+        >
+          and {{ remainingCount }} more
+        </span>
+      </div>
+    </div>
+
     <ViewerFiltersFilterStringSelectAll
       :selected-count="selectedCount"
       :total-count="filteredValues.length"
@@ -29,6 +56,11 @@
           :is-selected="isValueSelected(value)"
           :count="getValueCount(value)"
           :color="getValueColor(value)"
+          :is-default-selected="
+            isStringFilter(filter) &&
+            filter.isDefaultAllSelected &&
+            isValueSelected(value)
+          "
           @toggle="() => toggleValue(value)"
         />
       </div>
@@ -89,6 +121,8 @@ const selectAll = (selected: boolean) => {
     // Deselect all - set to empty array in one operation
     updateActiveFilterValues(props.filter.id, [])
   }
+
+  // Note: default state clearing is now handled in updateActiveFilterValues
 }
 
 // Get available values from the filter
@@ -111,6 +145,35 @@ const filteredValues = computed(() => {
   )
 })
 
+// Get selected values
+const selectedValues = computed(() => {
+  return props.filter.selectedValues || []
+})
+
+// Check if we should show the applied section (not when select all is active)
+const shouldShowAppliedSection = computed(() => {
+  return selectedValues.value.length > 0 && !isSelectAllActive.value
+})
+
+// Check if select all is active (when all available values are selected)
+const isSelectAllActive = computed(() => {
+  return (
+    selectedValues.value.length === availableValues.value.length &&
+    availableValues.value.length > 0
+  )
+})
+
+// Limit displayed values to 8 items
+const maxDisplayedItems = 5
+const displayedSelectedValues = computed(() => {
+  return selectedValues.value.slice(0, maxDisplayedItems)
+})
+
+// Count of remaining items not displayed
+const remainingCount = computed(() => {
+  return Math.max(0, selectedValues.value.length - maxDisplayedItems)
+})
+
 // Select all logic
 const selectedCount = computed(() => {
   return filteredValues.value.filter((value) => isValueSelected(value)).length
@@ -118,7 +181,7 @@ const selectedCount = computed(() => {
 
 // Virtual list setup
 const itemHeight = 28 // Height of each checkbox item in pixels
-const maxHeight = 144 // 36 * 4px (h-36 equivalent)
+const maxHeight = 210
 
 const containerHeight = computed(() => {
   const contentHeight = filteredValues.value.length * itemHeight
diff --git a/packages/frontend-2/components/viewer/filters/filter/string/SelectAll.vue b/packages/frontend-2/components/viewer/filters/filter/string/SelectAll.vue
index 1e92e5052..aca5e8d21 100644
--- a/packages/frontend-2/components/viewer/filters/filter/string/SelectAll.vue
+++ b/packages/frontend-2/components/viewer/filters/filter/string/SelectAll.vue
@@ -14,8 +14,8 @@
             : 'bg-foundation border-highlight-3 hover:border-foreground-2'
         ]"
       >
-        <Minus v-if="areAllValuesSelected" class="h-3 w-3" />
-        <Check v-else-if="areSomeValuesSelected" class="h-3 w-3" />
+        <Check v-if="areAllValuesSelected" class="h-3 w-3" />
+        <Minus v-else-if="areSomeValuesSelected" class="h-3 w-3" />
       </div>
       <span class="text-foreground ml-px">Select all</span>
       <div class="text-foreground-2 text-body-3xs ml-1">
diff --git a/packages/frontend-2/components/viewer/filters/filter/string/ValueItem.vue b/packages/frontend-2/components/viewer/filters/filter/string/ValueItem.vue
index efe6a0196..087702b2d 100644
--- a/packages/frontend-2/components/viewer/filters/filter/string/ValueItem.vue
+++ b/packages/frontend-2/components/viewer/filters/filter/string/ValueItem.vue
@@ -4,6 +4,7 @@
   <div class="px-1">
     <div
       class="flex items-center justify-between gap-2 text-body-3xs py-0.5 px-2 hover:bg-highlight-1 rounded cursor-pointer"
+      :class="{ 'opacity-50': isDefaultSelected }"
       @click="$emit('toggle')"
     >
       <div class="flex items-center min-w-0">
@@ -41,6 +42,7 @@ defineProps<{
   isSelected: boolean
   count: number
   color?: string | null
+  isDefaultSelected?: boolean
 }>()
 
 defineEmits<{
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 adefcdc82..eefb90259 100644
--- a/packages/frontend-2/components/viewer/filters/property-selection/Panel.vue
+++ b/packages/frontend-2/components/viewer/filters/property-selection/Panel.vue
@@ -19,13 +19,14 @@
           top: 0,
           left: 0,
           width: '100%',
-          height: `${itemHeight}px`,
-          transform: `translateY(${index * itemHeight}px)`
+          height: `${getItemHeight(property)}px`,
+          transform: `translateY(${getItemOffset(index)}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"
+            class="w-full h-full px-2 text-foreground rounded hover:bg-highlight-1 text-left flex items-center gap-2"
+            :class="!property.parentPath ? 'py-1.5' : 'py-1'"
             @click="$emit('selectProperty', property.value)"
           >
             <Hash v-if="property.type === 'number'" class="h-3 w-3" />
@@ -34,8 +35,11 @@
               <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
+                v-if="property.parentPath"
+                class="text-body-3xs text-foreground-2 truncate -mt-0.5"
+              >
+                {{ property.parentPath }}
               </div>
             </div>
           </button>
@@ -82,17 +86,39 @@ const filteredOptions = computed(() => {
   )
 })
 
-// Virtual list setup
-const itemHeight = 42
+// Virtual list setup with dynamic heights
+const smallItemHeight = 28 // Height for items without parent
+const largeItemHeight = 38 // Height for items with parent
 const maxHeight = 300 // Maximum height for the container
 
+// Helper function to get height for a specific property
+const getItemHeight = (property: PropertyOption) => {
+  return property.parentPath && property.parentPath !== '-'
+    ? largeItemHeight
+    : smallItemHeight
+}
+
+// Helper function to calculate offset for a specific index
+const getItemOffset = (index: number) => {
+  let offset = 0
+  for (let i = 0; i < index; i++) {
+    const property = filteredOptions.value[i]
+    if (property) {
+      offset += getItemHeight(property)
+    }
+  }
+  return offset
+}
+
 const containerHeight = computed(() => {
-  const contentHeight = filteredOptions.value.length * itemHeight
+  const contentHeight = filteredOptions.value.reduce((total, property) => {
+    return total + getItemHeight(property)
+  }, 0)
   return `${Math.min(contentHeight, maxHeight)}px`
 })
 
 const { list, containerProps } = useVirtualList(filteredOptions, {
-  itemHeight,
+  itemHeight: largeItemHeight, // Use larger height as base for virtual list calculations
   overscan: 5
 })
 </script>
diff --git a/packages/frontend-2/components/viewer/layout/SidePanel.vue b/packages/frontend-2/components/viewer/layout/SidePanel.vue
index cc77c1c73..bfdbf6cc1 100644
--- a/packages/frontend-2/components/viewer/layout/SidePanel.vue
+++ b/packages/frontend-2/components/viewer/layout/SidePanel.vue
@@ -1,5 +1,10 @@
 <template>
-  <div :class="['flex flex-col h-full', disableScrollbar ? '' : 'overflow-hidden']">
+  <div
+    :class="[
+      'flex flex-col h-full max-h-[calc(100dvh-5rem)]',
+      disableScrollbar ? '' : 'overflow-hidden'
+    ]"
+  >
     <div
       class="flex shrink-0 justify-between items-center border-b border-outline-3 h-10 pl-4 pr-2.5"
     >
diff --git a/packages/frontend-2/lib/viewer/composables/filtering.ts b/packages/frontend-2/lib/viewer/composables/filtering.ts
index 98b106c3e..03215fd6e 100644
--- a/packages/frontend-2/lib/viewer/composables/filtering.ts
+++ b/packages/frontend-2/lib/viewer/composables/filtering.ts
@@ -45,6 +45,7 @@ function createFilteringDataStore() {
   const dataSourcesMap: Ref<Record<string, DataSource>> = ref({})
   const dataSources = computed(() => Object.values(dataSourcesMap.value))
   const currentFilterLogic = ref<FilterLogic>(FilterLogic.All)
+  const ghostMode = ref<boolean>(true) // Default to ghosting enabled
   const dataSlices: Ref<DataSlice[]> = ref([])
 
   const extractNestedProperties = (
@@ -330,6 +331,10 @@ function createFilteringDataStore() {
     currentFilterLogic.value = logic
   }
 
+  const setGhostMode = (enabled: boolean) => {
+    ghostMode.value = enabled
+  }
+
   const updateViewer = (
     instance: Viewer,
     filters: {
@@ -340,32 +345,42 @@ function createFilteringDataStore() {
     const objectIds = getFinalObjectIds()
     const filteringExtension = instance.getExtension(FilteringExtension)
 
+    // Always clear existing filters first to prevent accumulation
+    filteringExtension.resetFilters()
+
+    // Check if there are any applied filters
+    const hasAppliedFilters = filters.propertyFilters.value.some(
+      (filter) => filter.isApplied
+    )
+
     if (objectIds.length > 0) {
-      // Clear existing property-filter isolation first to prevent accumulation
-      filteringExtension.resetFilters()
+      // Isolate the matching objects (ghost parameter controls transparency vs hiding)
+      filteringExtension.isolateObjects(
+        objectIds,
+        'property-filters',
+        true,
+        ghostMode.value
+      )
+    } else if (hasAppliedFilters) {
+      // When no objects match but filters are applied, isolate a fake object ID to ghost/hide everything
+      // This provides better visual feedback than completely hiding everything
+      filteringExtension.isolateObjects(
+        ['no-match-ghost-all'],
+        'property-filters',
+        true,
+        ghostMode.value
+      )
+    }
+    // If no applied filters and no objects match, do nothing - return to unfiltered state
 
-      filteringExtension.isolateObjects(objectIds, 'property-filters', true, true)
-    } else {
-      // Preserve color filter when clearing isolation
-      const currentColorFilterId = filters.activeColorFilterId.value
-      let activeColorFilter = null
-
-      if (currentColorFilterId) {
-        const activeFilter = filters.propertyFilters.value.find(
-          (f: FilterData) => f.id === currentColorFilterId
-        )
-        if (activeFilter?.filter) {
-          activeColorFilter = activeFilter.filter
-        }
-      }
-
-      // Reset all filters (including isolation)
-      filteringExtension.resetFilters()
-
-      // Restore color filter if it was active
-      if (activeColorFilter && currentColorFilterId) {
-        filteringExtension.setColorFilter(activeColorFilter)
-        filters.activeColorFilterId.value = currentColorFilterId
+    // Restore color filter if it was active
+    const currentColorFilterId = filters.activeColorFilterId.value
+    if (currentColorFilterId) {
+      const activeFilter = filters.propertyFilters.value.find(
+        (f: FilterData) => f.id === currentColorFilterId
+      )
+      if (activeFilter?.filter) {
+        filteringExtension.setColorFilter(activeFilter.filter)
       }
     }
   }
@@ -383,6 +398,8 @@ function createFilteringDataStore() {
     clearPropertyIndexCache,
     setFilterLogic,
     currentFilterLogic,
+    setGhostMode,
+    ghostMode,
     dataSlices
   }
 }
@@ -515,7 +532,7 @@ export function useFilterUtilities(
    * Creates a properly typed FilterData object from PropertyInfo
    */
   const createFilterData = (params: CreateFilterParams): FilterData => {
-    const { filter, id } = params
+    const { filter, id, availableValues } = params
 
     if (isNumericPropertyInfo(filter)) {
       return {
@@ -534,11 +551,12 @@ export function useFilterUtilities(
       return {
         id,
         isApplied: true,
-        selectedValues: [],
+        selectedValues: [...availableValues], // Select all values by default
         condition: StringFilterCondition.Is,
         type: FilterType.String,
         filter: filter as StringPropertyInfo,
-        numericRange: { min: 0, max: 100 } // Default range for consistency
+        numericRange: { min: 0, max: 100 }, // Default range for consistency
+        isDefaultAllSelected: true // Track that this is the initial "all selected" state
       } satisfies StringFilterData
     }
   }
@@ -607,6 +625,12 @@ export function useFilterUtilities(
     const filter = filters.propertyFilters.value.find((f) => f.id === filterId)
     if (filter) {
       filter.selectedValues = [...values]
+
+      // Clear the default all-selected state when user updates values
+      if (!isNumericFilter(filter) && filter.isDefaultAllSelected) {
+        filter.isDefaultAllSelected = false
+      }
+
       updateDataStoreSlices()
     }
   }
@@ -647,6 +671,11 @@ export function useFilterUtilities(
     updateDataStoreSlices()
   }
 
+  const setGhostModeAndUpdate = (enabled: boolean) => {
+    dataStore.setGhostMode(enabled)
+    updateDataStoreSlices()
+  }
+
   /**
    * Updates data store slices based on current filter state (optimized)
    */
@@ -681,7 +710,7 @@ export function useFilterUtilities(
         }
         dataStore.dataSlices.value.push(slice)
       }
-      // Handle string filters with selected values
+      // Handle string filters - only create slice if filter is enabled AND has selected values
       else if (
         !isNumericFilter(filter) &&
         filter.isApplied &&
@@ -722,14 +751,21 @@ export function useFilterUtilities(
       const index = filter.selectedValues.indexOf(value)
       const wasSelected = index > -1
 
-      if (wasSelected) {
-        filter.selectedValues.splice(index, 1)
+      // Special behavior for default all-selected state: first click selects only that item
+      if (!isNumericFilter(filter) && filter.isDefaultAllSelected) {
+        filter.selectedValues = [value] // Select only this item
+        filter.isDefaultAllSelected = false // Clear default state
       } else {
-        filter.selectedValues.push(value)
+        // Normal toggle behavior
+        if (wasSelected) {
+          filter.selectedValues.splice(index, 1)
+        } else {
+          filter.selectedValues.push(value)
+        }
       }
 
-      // Ensure filter is marked as applied when values are selected
-      filter.isApplied = filter.selectedValues.length > 0
+      // Don't change isApplied here - that's controlled by the visibility toggle
+      // isApplied represents whether the filter is enabled, not whether it has values
 
       updateDataStoreSlices()
     }
@@ -743,6 +779,23 @@ export function useFilterUtilities(
     return filter ? filter.selectedValues.includes(value) : false
   }
 
+  /**
+   * Checks if a filter has content (selected values or numeric range)
+   */
+  const filterHasContent = (filter: FilterData): boolean => {
+    if (isNumericFilter(filter)) {
+      // For numeric filters, check if range is different from default
+      const defaultMin = filter.filter.min
+      const defaultMax = filter.filter.max
+      return (
+        filter.numericRange.min !== defaultMin || filter.numericRange.max !== defaultMax
+      )
+    } else {
+      // For string filters, check if any values are selected
+      return filter.selectedValues.length > 0
+    }
+  }
+
   /**
    * Gets all currently applied filters
    */
@@ -1140,9 +1193,11 @@ export function useFilterUtilities(
     updateFilterCondition,
 
     setFilterLogicAndUpdate,
+    setGhostModeAndUpdate,
     updateDataStoreSlices,
     toggleActiveFilterValue,
     isActiveFilterValueSelected,
+    filterHasContent,
     getAppliedFilters,
     resetFilters,
     resetExplode,
@@ -1172,6 +1227,8 @@ export function useFilterUtilities(
     // Filter logic
     setFilterLogic: dataStore.setFilterLogic,
     currentFilterLogic: dataStore.currentFilterLogic,
-    getFinalObjectIds: dataStore.getFinalObjectIds
+    getFinalObjectIds: dataStore.getFinalObjectIds,
+    // Ghost mode
+    ghostMode: dataStore.ghostMode
   }
 }
diff --git a/packages/frontend-2/lib/viewer/composables/setup.ts b/packages/frontend-2/lib/viewer/composables/setup.ts
index 27d329eea..7bfbd99bb 100644
--- a/packages/frontend-2/lib/viewer/composables/setup.ts
+++ b/packages/frontend-2/lib/viewer/composables/setup.ts
@@ -1109,7 +1109,9 @@ function setupInterfaceState(
     if (hiddenObjectIds.value.length) return true
     if (
       propertyFilters.value.some(
-        (filter) => filter.selectedValues && filter.selectedValues.length > 0
+        (filter) =>
+          filter.isApplied ||
+          (filter.selectedValues && filter.selectedValues.length > 0)
       )
     )
       return true
diff --git a/packages/frontend-2/lib/viewer/helpers/filters/types.ts b/packages/frontend-2/lib/viewer/helpers/filters/types.ts
index 9428f37ad..ba6a800cb 100644
--- a/packages/frontend-2/lib/viewer/helpers/filters/types.ts
+++ b/packages/frontend-2/lib/viewer/helpers/filters/types.ts
@@ -77,6 +77,7 @@ export type NumericFilterData = BaseFilterData & {
 export type StringFilterData = BaseFilterData & {
   type: FilterType.String
   filter: StringPropertyInfo
+  isDefaultAllSelected?: boolean // Track initial "all selected" state
 }
 
 // Union type for all filter data