From 480d8ed2d0ea78bb75e051a58f4a4838e3821c66 Mon Sep 17 00:00:00 2001
From: Anne Haley <anne.haley@kitware.com>
Date: Tue, 7 Jul 2026 12:43:12 -0400
Subject: [PATCH 1/2] Add sidebar filters menu

---
 templates/index.html       |   6 +-
 templates/macros.html      |  28 +++-
 templates/package.html     |   4 +-
 templates/sidebar.html     |  31 +++-
 templates/static/script.js | 331 ++++++++++++++++++++++++++++++++-----
 templates/static/style.css |   7 +
 6 files changed, 358 insertions(+), 49 deletions(-)
diff --git a/templates/index.html b/templates/index.html
index f23c903..391211c 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -27,12 +27,12 @@
 </head>
 
 <body>
-    {% from 'macros.html' import menu_icon, search_icon, mini_search_icon, builds_icon, packages_icon, releases_icon, left_arrow_icon, right_chevron_icon, down_chevron_icon, tag_icon, copy_icon, copy_command_button, install_icon, close_icon, plus_icon, cols_icon, eye_icon, eye_off_icon %}
+    {% from 'macros.html' import menu_icon, search_icon, mini_search_icon, builds_icon, packages_icon, releases_icon, left_arrow_icon, right_chevron_icon, down_chevron_icon, tag_icon, copy_icon, copy_command_button, install_icon, close_icon, plus_icon, cols_icon, eye_icon, eye_off_icon, filters_icon, box_checked, box_unchecked %}
     {% include "sidebar.html" %}
     {% include "install_dialog.html" %}
 
     <!-- Main content -->
-    <div class="container" id="content-container" onclick="setColumnsMenuVisible(false); setBadgeOptionsMenuVisible(false)">
+    <div class="container" id="content-container" onclick="closeAllMenus()">
         <div id="loading-content" class="py-8 pb-24">
             <h1 style="width: 100%; text-align: center;">Loading...</h1>
         </div>
@@ -59,6 +59,8 @@ <h1>Package not found.</h1>
         {{ tag_icon() }}
         {{ eye_icon() }}
         {{ eye_off_icon() }}
+        {{ box_checked() }}
+        {{ box_unchecked() }}
     </div>
 </body>
 
diff --git a/templates/macros.html b/templates/macros.html
index d7017e8..087c636 100644
--- a/templates/macros.html
+++ b/templates/macros.html
@@ -14,7 +14,7 @@
 {% endmacro %}
 
 {% macro mini_search_icon() %}
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-search h-3.5 w-3.5 text-muted-foreground" aria-hidden="true">
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-search lucide-search-mini absolute left-2.5 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-muted-foreground" aria-hidden="true">
     <path d="m21 21-4.34-4.34"></path>
     <circle cx="11" cy="11" r="8"></circle>
 </svg>
@@ -139,4 +139,30 @@
     <path d="M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143"></path>
     <path d="m2 2 20 20"></path>
 </svg>
+{% endmacro %}
+
+{% macro filters_icon() %}
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-sliders-horizontal h-3.5 w-3.5" aria-hidden="true">
+    <path d="M10 5H3"></path>
+    <path d="M12 19H3"></path>
+    <path d="M14 3v4"></path>
+    <path d="M16 17v4"></path>
+    <path d="M21 12h-9"></path>
+    <path d="M21 19h-5"></path>
+    <path d="M21 5h-7"></path>
+    <path d="M8 10v4"></path>
+    <path d="M8 12H3"></path>
+</svg>
+{% endmacro %}
+
+{% macro box_checked() %}
+<span class="checkbox checkbox-checked grid h-3.5 w-3.5 shrink-0 place-content-center rounded border border-primary bg-primary text-primary-foreground">
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check h-2.5 w-2.5" aria-hidden="true">
+    <path d="M20 6 9 17l-5-5"></path>
+</svg>
+</span>
+{% endmacro %}
+
+{% macro box_unchecked() %}
+<span class="checkbox checkbox-unchecked grid h-3.5 w-3.5 shrink-0 place-content-center rounded border border-input bg-background"></span>
 {% endmacro %}
\ No newline at end of file
diff --git a/templates/package.html b/templates/package.html
index 936bacb..8bcaa7e 100644
--- a/templates/package.html
+++ b/templates/package.html
@@ -23,9 +23,9 @@ <h1 class="text-2xl font-semibold tracking-tight package-name"></h1>
                 Add filter
             </button>
             <div id="badge-options-menu" class="hidden absolute left-0 top-full z-20 mt-1 w-80 overflow-hidden rounded-md border border-border bg-surface-elevated shadow-lg">
-                <div class="flex items-center gap-2 border-b border-border px-2 py-1.5">
+                <div class="relative flex items-center gap-2 border-b border-border px-2 py-1.5">
                     {{ mini_search_icon() }}
-                    <input id="badge-options-filter" type="search" oninput="filterBadgeOptions()" placeholder="Filter attributes..." class="flex-1 bg-transparent text-sm outline-none placeholder:text-muted-foreground">
+                    <input id="badge-options-filter" type="search" oninput="filterBadgeOptions()" placeholder="Filter attributes..." class="flex-1 bg-transparent text-sm outline-none placeholder:text-muted-foreground" style="padding-left: 18px">
                 </div>
                 <div class="max-h-72 overflow-auto">
                     <div id="badge-options-list" class="pb-1"></div>
diff --git a/templates/sidebar.html b/templates/sidebar.html
index 1e213e6..3f71716 100644
--- a/templates/sidebar.html
+++ b/templates/sidebar.html
@@ -1,4 +1,4 @@
-<div id="mobile-toolbar" class="block">
+<div id="mobile-toolbar" class="block" onclick="closeAllMenus()">
     <header class="flex h-12 shrink-0 items-center justify-left border-b border-border bg-surface-elevated px-4">
         <button class="w-7" onclick="setSidebarOpen(true)">{{ menu_icon() }}</button>
         <button class="flex items-center gap-2 rounded text-left hover:opacity-80" title="Home" onclick="navigateToHome()">
@@ -13,7 +13,7 @@
     </header>
     <button id="sidebar-shadow" aria-label="Close navigation" class="fixed inset-0 z-10 bg-black/40" onclick="setSidebarOpen(false)"></button>
 </div>
-<div id="sidebar" class="bg-surface">
+<div id="sidebar" class="bg-surface" onclick="closeAllMenus()">
     <header class="flex h-12 shrink-0 items-center justify-left border-b border-border bg-surface-elevated px-4">
         <button class="flex items-center gap-2 rounded text-left hover:opacity-80" title="Home" onclick="navigateToHome()">
             <img src="{{ base_path }}/static/spack-logo.svg" class="max-h-full w-7" />
@@ -26,9 +26,19 @@
         </button>
     </header>
     <div class="px-3 pt-3">
-        <div class="relative">
-            {{ search_icon() }}
-            <input id="sidebar-search" type="search" oninput="filterSidebar(event)" placeholder="Search by package name" class="w-full rounded-md border border-input bg-background py-1.5 pl-8 pr-7 text-sm outline-none focus:ring-2 focus:ring-ring">
+        <div class="flex gap-1">
+            <div class="relative flex-1">
+                {{ search_icon() }}
+                <input id="sidebar-search" type="search" oninput="filterSidebar(event)" placeholder="Search package name" class="w-full rounded-md border border-input bg-background py-1.5 pl-8 pr-7 text-sm outline-none focus:ring-2 focus:ring-ring">
+            </div>
+            <button id="filters-menu-button" onclick="event.stopPropagation(); setFiltersMenuVisible(true)" type="button" title="Filters" class="relative inline-flex shrink-0 items-center gap-1 rounded-md border border-input bg-background px-2 text-xs text-muted-foreground hover:bg-accent hover:text-foreground" aria-haspopup="dialog" aria-expanded="false" data-state="closed">
+                {{ filters_icon() }}
+                <span>Filters</span>
+                <span id="filters-count" class="hidden ml-0.5 rounded-full bg-primary px-1.5 text-[10px] font-semibold text-primary-foreground tabular-nums"></span>
+            </button>
+        </div>
+        <div id="filters-list" onclick="event.stopPropagation()" class="hidden mt-2 flex flex-wrap gap-1">
+            <button onclick="clearAllSidebarFilters()" type="button" class="rounded px-1.5 py-0.5 text-[10px] text-muted-foreground hover:bg-accent hover:text-foreground" style="order: 1">Clear all</button>
         </div>
         <div id="sidebar-tabs" class="mt-2 flex gap-1 rounded-md bg-muted p-0.5 text-xs">
             <button id="all-packages-tab" onclick="selectSidebarTab('all-packages')" class="flex flex-1 items-center justify-center gap-1 rounded px-2 py-1 transition-colors text-muted-foreground hover:text-foreground tab active">
@@ -70,5 +80,14 @@
             </div>
         </div>
     </div>
-    <div id="sidebar-resize"></div>
+    <div id="sidebar-resize" onclick="event.stopPropagation()"></div>
+    <div id="filters-menu" onclick="event.stopPropagation()" class="hidden z-50 rounded-md border bg-popover text-popover-foreground shadow-md outline-none">
+        <div class="flex max-h-[420px] flex-col">
+            <div class="flex items-center justify-between border-b border-border px-3 py-2">
+                <div class="text-xs font-medium">Filter by</div>
+            </div>
+            <div id="filters-menu-content" class="flex-1 overflow-y-auto p-1">Loading...</div>
+        </div>
+    </div>
+</div>
 </div>
\ No newline at end of file
diff --git a/templates/static/script.js b/templates/static/script.js
index 193f41f..13dc6e2 100644
--- a/templates/static/script.js
+++ b/templates/static/script.js
@@ -1,10 +1,12 @@
 let basePath = undefined;
 let packageData = undefined;
 let specData = undefined;
+let packageAttrValueSpecs = undefined;
 let packageName = undefined;
 let currentSpecs = undefined;
 let sidebarMinWidth = 250;
 let sidebarMaxWidth = 800;
+let sidebarFilters = {}
 let badgeOptions = {};
 let badgeFilters = {
     version: [],
@@ -71,6 +73,10 @@ function applyRoute(params) {
             }
         }
     }
+    if (packageData && specData && !packageAttrValueSpecs) {
+        computePackageAttrValueSpecs();
+        populateFiltersMenu();
+    }
     applySidebarHighlights();
     showContent(contentToShow);
 }
@@ -118,6 +124,28 @@ function matchString(match, string) {
     }
 }
 
+function computePackageAttrValueSpecs() {
+    packageAttrValueSpecs = {};
+    for (const pName in packageData) {
+        packageAttrValueSpecs[pName] = {};
+        for (const specHash of packageData[pName].specs) {
+            for (const key in specData[specHash]) {
+                if (!packageAttrValueSpecs[pName][key]) packageAttrValueSpecs[pName][key] = {};
+                let values = specData[specHash][key];
+                if (Array.isArray(values)) {
+                    values = values.map((v) => v.label ? v.label : v)
+                } else {
+                    values = [values]
+                }
+                for (val of values) {
+                    if (!packageAttrValueSpecs[pName][key][val]) packageAttrValueSpecs[pName][key][val] = new Set();
+                    packageAttrValueSpecs[pName][key][val].add(specHash);
+                }
+            }
+        }
+    }
+}
+
 function copyCommand(e) {
     const target = e.currentTarget;
     const codeContent = $(target).parent().parent().find('code').text();
@@ -149,6 +177,72 @@ function setupHomepage() {
     }
 }
 
+function getUniqueAttributeValues(specs) {
+    if (!specs) return;
+    const uniqueValues = {};
+    for (const column in badgeFilters) {
+        uniqueValues[column] = [];
+        const pluralColumn = pluralColumns[column] || column;
+        for (const spec of specs) {
+            const value = spec[pluralColumn];
+            if (Array.isArray(value)) {
+                for (const v of value) {
+                    if (!uniqueValues[column].includes(v)) {
+                        uniqueValues[column].push(v)
+                    }
+                }
+            } else {
+                if (!uniqueValues[column].includes(value)) {
+                    uniqueValues[column].push(value)
+                }
+            }
+        }
+    }
+    return uniqueValues;
+}
+
+function closeAllMenus() {
+    setColumnsMenuVisible(false);
+    setBadgeOptionsMenuVisible(false);
+    setFiltersMenuVisible(false);
+}
+
+function toggleChevron(container, open = undefined) {
+    const currentChevronQuery = $(container).find('svg.lucide-chevron');
+    const currentChevron = currentChevronQuery.get(0);
+    const parent = currentChevronQuery.parent().get(0);
+    if (open === undefined) {
+        open = currentChevron.classList.contains('lucide-chevron-right');
+    }
+    if (open) {
+        const downChevronIcon = document.getElementsByClassName('lucide-chevron-down')[0].cloneNode(true);
+        parent.replaceChild(downChevronIcon, currentChevron);
+        return true;
+    } else {
+        const rightChevronIcon = document.getElementsByClassName('lucide-chevron-right')[0].cloneNode(true);
+        parent.replaceChild(rightChevronIcon, currentChevron);
+        return false;
+    }
+}
+
+function toggleCheckbox(container, checked = undefined) {
+    const currentCheckboxQuery = $(container).find('span.checkbox');
+    const currentCheckbox = currentCheckboxQuery.get(0);
+    const parent = currentCheckboxQuery.parent().get(0);
+    if (checked === undefined) {
+        checked = currentCheckbox.classList.contains('checkbox-unchecked');
+    }
+    if (checked) {
+        const checkedIcon = document.getElementsByClassName('checkbox-checked')[0].cloneNode(true);
+        parent.replaceChild(checkedIcon, currentCheckbox);
+        return true;
+    } else {
+        const uncheckedIcon = document.getElementsByClassName('checkbox-unchecked')[0].cloneNode(true);
+        parent.replaceChild(uncheckedIcon, currentCheckbox);
+        return false;
+    }
+}
+
 // Sidebar
 function setupSidebarResize() {
     const resizer = document.getElementById('sidebar-resize');
@@ -210,10 +304,30 @@ function filterSidebar() {
     let resultsFound = false;
     const search = document.getElementById('sidebar-search');
     let filterString = search.value;
-    const emphasisString = filterString.replace('$', '')
+    const emphasisString = filterString.replace('$', '');
     Array.from(document.getElementsByClassName('sidebar-item')).forEach((item) => {
-        const match = matchString(filterString, item.package);
-        const label = item.children[0];
+        let match = matchString(filterString, item.package);
+        const [label, specCount] = item.children;
+        const totalFilters = Object.values(sidebarFilters).reduce((sum, list) => sum + list.length, 0);
+        if (totalFilters && packageAttrValueSpecs && packageAttrValueSpecs[item.package]) {
+            const attrValueSpecs = packageAttrValueSpecs[item.package];
+            let matchingSpecs = undefined;
+            let matchComplete = true;
+            for (const key in sidebarFilters) {
+                const valueSpecs = attrValueSpecs[key] || attrValueSpecs[key + 's'];
+                for (value of sidebarFilters[key]) {
+                    matchComplete &= !!valueSpecs[value];
+                    if (valueSpecs[value]) {
+                        if (!matchingSpecs) matchingSpecs = new Set(valueSpecs[value]);
+                        else matchingSpecs = matchingSpecs.intersection(valueSpecs[value]);
+                    }
+                }
+            }
+            match &= matchComplete && matchingSpecs && matchingSpecs.size > 0;
+            specCount.innerHTML = matchComplete && matchingSpecs ? matchingSpecs.size : 0
+        } else {
+            specCount.innerHTML = packageData[item.package].specs.length;
+        }
         if (match) {
             resultsFound = true;
             item.classList.remove('hidden');
@@ -226,7 +340,7 @@ function filterSidebar() {
     Array.from(document.getElementsByClassName('sidebar-group')).forEach((group) => {
         const childContainer = $(group).find('ul').get(0);
         const childCounter = $(group).find('.child-counter').get(0);
-        const matchedChildren = Array.from(childContainer.children).filter((child) => matchString(filterString, child.package));
+        const matchedChildren = Array.from(childContainer.children).filter((child) => !child.classList.contains('hidden'));
         childCounter.innerHTML = matchedChildren.length.toLocaleString();
         if (matchedChildren.length && (showDevs || !group.release.includes('develop'))) {
             group.classList.remove('hidden');
@@ -294,8 +408,14 @@ function createSidebarItem(pkg, releaseName) {
     item.appendChild(numSpecsLabel);
     item.onclick = (e) => {
         e.stopPropagation();
+        closeAllMenus();
         let newUrl = basePath + `?package=${pkg.uid}`;
         if (releaseName) newUrl += `&release=${releaseName}`;
+        for (const key in sidebarFilters) {
+            for (const value of sidebarFilters[key]) {
+                newUrl += `&${key}=${value}`;
+            }
+        }
         window.history.pushState(null, '', newUrl);
     }
     item.package = pkg.uid;
@@ -339,16 +459,10 @@ function createSidebarGroup(groupName) {
 }
 
 function setSidebarGroupOpen(group, open) {
-    const currentChevronQuery = $(group).find('svg.lucide-chevron');
-    const currentChevron = currentChevronQuery.get(0);
-    const parent = currentChevronQuery.parent().get(0);
+    open = toggleChevron(group, open);
     if (open) {
-        const downChevronIcon = document.getElementsByClassName('lucide-chevron-down')[0].cloneNode(true);
-        parent.replaceChild(downChevronIcon, currentChevron);
         group.classList.remove('collapsed');
     } else {
-        const rightChevronIcon = document.getElementsByClassName('lucide-chevron-right')[0].cloneNode(true);
-        parent.replaceChild(rightChevronIcon, currentChevron);
         group.classList.add('collapsed');
     }
 }
@@ -367,6 +481,171 @@ function toggleShowDevs() {
     filterSidebar();
 }
 
+function setFiltersMenuVisible(visible) {
+    const menu = document.getElementById('filters-menu');
+    if (visible) {
+        menu.classList.remove('hidden');
+    } else {
+        menu.classList.add('hidden');
+    }
+}
+
+function setFiltersMenuGroupOpen(group, open = undefined) {
+    open = toggleChevron(group, open);
+    const items = $(group).find('.group-items').get(0);
+    if (open) {
+        Array.from(document.getElementsByClassName('filter-group')).filter(
+            (g) => g.key !== group.key
+        ).forEach((g) => setFiltersMenuGroupOpen(g, false));
+        items.classList.remove('hidden');
+    } else {
+        items.classList.add('hidden');
+    }
+}
+
+function searchFilterGroup(e, groupList) {
+    for (const child of groupList.children) {
+        if (child.searchContent.toLowerCase().includes(e.target.value.toLowerCase())) {
+            child.classList.remove('hidden');
+        } else {
+            child.classList.add('hidden');
+        }
+    }
+}
+
+function toggleSidebarFilter(key, value, button) {
+    const checked = toggleCheckbox(button);
+    const filtersList = document.getElementById('filters-list');
+    const filterId = `${key}-${value}`.replaceAll('.', '-').replaceAll('+', '-').replaceAll('~', '-').replaceAll('_', '-');
+    if (!sidebarFilters[key]) sidebarFilters[key] = [];
+    if (checked) {
+        button.classList.add('checked');
+        sidebarFilters[key].push(value);
+        const filterChip = document.createElement('span');
+        filterChip.id = filterId;
+        filterChip.classList.add('inline-flex', 'max-w-full', 'items-center', 'gap-1', 'rounded', 'border', 'border-primary/30', 'bg-primary/10', 'px-1.5', 'py-0.5', 'text-[10px]', 'text-foreground');
+        const filterChipKey = document.createElement('span');
+        filterChipKey.classList.add('uppercase', 'tracking-wider', 'text-muted-foreground');
+        filterChipKey.innerHTML = key;
+        filterChip.appendChild(filterChipKey);
+        const filterChipValue = document.createElement('span');
+        filterChipValue.classList.add('truncate', 'font-mono');
+        filterChipValue.innerHTML = value;
+        filterChip.appendChild(filterChipValue);
+        const filterChipCloseButton = document.createElement('button');
+        filterChipCloseButton.classList.add('ml-0.5', 'rounded');
+        filterChipCloseButton.innerHTML = 'X';
+        filterChip.appendChild(filterChipCloseButton);
+        filterChip.onclick = () => {
+            toggleSidebarFilter(key, value, button)
+        };
+        filterChip.title = 'Remove filter';
+        filtersList.appendChild(filterChip);
+    } else {
+        button.classList.remove('checked');
+        sidebarFilters[key] = sidebarFilters[key].filter((v) => v !== value);
+        const filterChip = $(filtersList).find(`#${filterId}`).get(0);
+        filtersList.removeChild(filterChip);
+    }
+    sidebarFiltersUpdated();
+}
+
+function clearAllSidebarFilters() {
+    sidebarFilters = {};
+    const menuContent = document.getElementById('filters-menu-content');
+    $(menuContent).find('button.checked').each((index, button) => { toggleCheckbox(button) });
+    const filtersList = document.getElementById('filters-list');
+    filtersList.replaceChildren(filtersList.children[0]);
+    sidebarFiltersUpdated();
+}
+
+function sidebarFiltersUpdated() {
+    const totalFilters = Object.values(sidebarFilters).reduce((sum, list) => sum + list.length, 0);
+    const menuButton = document.getElementById('filters-menu-button');
+    const filtersList = document.getElementById('filters-list');
+    const filtersCount = document.getElementById('filters-count');
+    filtersCount.innerHTML = totalFilters;
+    if (totalFilters > 0) {
+        menuButton.classList.remove('border-input', 'bg-background', 'text-muted-foreground');
+        menuButton.classList.add('border-primary/50', 'bg-primary/5', 'text-foreground');
+        filtersList.classList.remove('hidden');
+        filtersCount.classList.remove('hidden');
+    } else {
+        menuButton.classList.add('border-input', 'bg-background', 'text-muted-foreground');
+        menuButton.classList.remove('border-primary/50', 'bg-primary/5', 'text-foreground');
+        filtersList.classList.add('hidden');
+        filtersCount.classList.add('hidden');
+    }
+    filterSidebar();
+}
+
+function populateFiltersMenu() {
+    const uniqueValues = getUniqueAttributeValues(Object.values(specData));
+    const content = document.getElementById('filters-menu-content');
+    content.innerHTML = '';
+    for (const key in uniqueValues) {
+        // Exclude release from filters menu; "by release" tab should be used instead
+        if (key !== 'release') {
+            const keyGroup = document.createElement('div');
+            keyGroup.classList.add('rounded', 'filter-group');
+            keyGroup.key = key;
+            const keyButton = document.createElement('button');
+            keyButton.classList.add('flex', 'w-full', 'items-center', 'gap-1.5', 'rounded', 'px-2', 'py-1.5', 'text-left', 'text-sm', 'hover:bg-accent');
+            const rightChevronIcon = document.getElementsByClassName('lucide-chevron-right')[0].cloneNode(true);
+            keyButton.appendChild(rightChevronIcon);
+            const keyLabel = document.createElement('span');
+            keyLabel.classList.add('flex-1');
+            keyLabel.innerHTML = key[0].toLocaleUpperCase() + key.slice(1);
+            keyButton.appendChild(keyLabel);
+            const countLabel = document.createElement('span');
+            countLabel.classList.add('text-[10px]', 'text-muted-foreground', 'tabular-nums');
+            countLabel.innerHTML = uniqueValues[key].length;
+            keyButton.appendChild(countLabel);
+            keyGroup.appendChild(keyButton);
+            keyButton.onclick = () => setFiltersMenuGroupOpen(keyGroup);
+            const groupItems = document.createElement('div');
+            groupItems.classList.add('hidden', 'group-items', 'mb-1', 'border-l', 'border-border', 'pl-1');
+            groupItems.style.marginLeft = '14px';
+            const groupItemsList = document.createElement('ul');
+            groupItemsList.classList.add('overflow-y-auto');
+            groupItemsList.style.maxHeight = '250px';
+            if (uniqueValues[key].length > 10) {
+                // Only add a search box if more than 10 values exist
+                const searchContainer = document.createElement('div');
+                searchContainer.classList.add('relative', 'my-1', 'mr-1');
+                const searchIcon = document.getElementsByClassName('lucide-search-mini')[0].cloneNode(true);
+                searchContainer.appendChild(searchIcon);
+                const searchInput = document.createElement('input');
+                searchInput.type = 'search';
+                searchInput.placeholder = 'Search ' + key;
+                searchInput.classList.add('w-full', 'rounded', 'border', 'border-input', 'bg-background', 'py-1', 'text-xs', 'outline-none', 'focus:ring-1', 'focus:ring-ring');
+                searchInput.style.paddingLeft = '24px';
+                searchInput.oninput = (e) => searchFilterGroup(e, groupItemsList);
+                searchContainer.appendChild(searchInput);
+                groupItems.appendChild(searchContainer);
+            }
+            for (const value of uniqueValues[key].toSorted()) {
+                const item = document.createElement('li');
+                const itemButton = document.createElement('button');
+                itemButton.classList.add('flex', 'w-full', 'items-center', 'gap-2', 'rounded', 'px-1.5', 'py-1', 'text-left', 'text-xs', 'hover:bg-accent');
+                itemButton.onclick = () => toggleSidebarFilter(key, value, itemButton);
+                const itemCheckbox = document.getElementsByClassName('checkbox-unchecked')[0].cloneNode(true);
+                itemButton.appendChild(itemCheckbox);
+                const itemLabel = document.createElement('span');
+                itemLabel.classList.add('truncate', 'font-mono');
+                itemLabel.innerHTML = value;
+                itemButton.appendChild(itemLabel);
+                item.appendChild(itemButton);
+                item.searchContent = value;
+                groupItemsList.appendChild(item);
+            }
+            groupItems.appendChild(groupItemsList);
+            keyGroup.appendChild(groupItems)
+            content.appendChild(keyGroup);
+        }
+    }
+}
+
 // Install Dialog
 function toggleInstallDialogShown(hash) {
     const dialog = document.getElementById('install-dialog');
@@ -392,16 +671,10 @@ function toggleInstallDialogShown(hash) {
 function toggleInstallDialogExpandedSection() {
     const expansionButton = document.getElementById('install-dialog-expansion-button');
     const expansionContent = document.getElementById('install-dialog-expansion-content');
-    const currentChevronQuery = $(expansionButton).find('svg.lucide-chevron');
-    const currentChevron = currentChevronQuery.get(0);
-    const parent = currentChevronQuery.parent().get(0);
-    if (expansionContent.classList.contains('hidden')) {
-        const downChevronIcon = document.getElementsByClassName('lucide-chevron-down')[0].cloneNode(true);
-        parent.replaceChild(downChevronIcon, currentChevron);
+    const open = toggleChevron(expansionButton);
+    if (open) {
         expansionContent.classList.remove('hidden');
     } else {
-        const rightChevronIcon = document.getElementsByClassName('lucide-chevron-right')[0].cloneNode(true);
-        parent.replaceChild(rightChevronIcon, currentChevron);
         expansionContent.classList.add('hidden');
     }
 }
@@ -453,25 +726,7 @@ function createFilterBadge(key, value, remove) {
 }
 
 function updateBadgeOptions() {
-    badgeOptions = {};
-    for (const column in badgeFilters) {
-        badgeOptions[column] = [];
-        const pluralColumn = pluralColumns[column] || column;
-        for (const spec of currentSpecs) {
-            const value = spec[pluralColumn];
-            if (Array.isArray(value)) {
-                for (const v of value) {
-                    if (!badgeOptions[column].includes(v)) {
-                        badgeOptions[column].push(v)
-                    }
-                }
-            } else {
-                if (!badgeOptions[column].includes(value)) {
-                    badgeOptions[column].push(value)
-                }
-            }
-        }
-    }
+    badgeOptions = getUniqueAttributeValues(currentSpecs);
     const container = document.getElementById('badge-options-list');
     container.innerHTML = '';
     for (const key in badgeOptions) {
diff --git a/templates/static/style.css b/templates/static/style.css
index 7a97ed1..d9096df 100644
--- a/templates/static/style.css
+++ b/templates/static/style.css
@@ -190,6 +190,13 @@ input:checked+.slider:before {
   animation: button-pop var(--animation-btn, 0.25s) ease-out;
 }
 
+#filters-menu {
+  position: absolute;
+  width: 250px;
+  right: -250px;
+  top: 60px;
+}
+
 /* Tables */
 .table {
   text-indent: 0;

From 57e1da9671a6cacb73269274d6ca7117a38cb852 Mon Sep 17 00:00:00 2001
From: Anne Haley <anne.haley@kitware.com>
Date: Thu, 9 Jul 2026 16:12:59 -0400
Subject: [PATCH 2/2] Increase width of filters menu

---
 templates/static/style.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/templates/static/style.css b/templates/static/style.css
index d9096df..6fc8d53 100644
--- a/templates/static/style.css
+++ b/templates/static/style.css
@@ -192,8 +192,8 @@ input:checked+.slider:before {
 
 #filters-menu {
   position: absolute;
-  width: 250px;
-  right: -250px;
+  width: 350px;
+  right: -350px;
   top: 60px;
 }
 
