From 44eed683de3aae32cff6a2f9db310a4af4e97b07 Mon Sep 17 00:00:00 2001
From: Luke Schreiber <131496683+Luke-Schreiber@users.noreply.github.com>
Date: Tue, 3 Mar 2026 14:44:45 -0700
Subject: [PATCH 1/2] Add experiment selector folder tree support

---
 .../globalSettings/DatasetSelector.vue        | 409 +++++++++++++++++-
 apps/client/src/util/experimentTree.ts        | 146 +++++++
 2 files changed, 534 insertions(+), 21 deletions(-)
 create mode 100644 apps/client/src/util/experimentTree.ts

diff --git a/apps/client/src/components/globalSettings/DatasetSelector.vue b/apps/client/src/components/globalSettings/DatasetSelector.vue
index c3587427..f8e06cf9 100644
--- a/apps/client/src/components/globalSettings/DatasetSelector.vue
+++ b/apps/client/src/components/globalSettings/DatasetSelector.vue
@@ -9,6 +9,13 @@ import { useSelectionStore } from '@/stores/interactionStores/selectionStore';
 import { useMosaicSelectionStore } from '@/stores/dataStores/mosaicSelectionStore';
 import { useConditionSelectorStore } from '@/stores/componentStores/conditionSelectorStore';
 
+import {
+    buildExperimentTree,
+    type TreeNode,
+    type FolderNode,
+    type ExperimentNode,
+} from '@/util/experimentTree';
+
 const globalSettings = useGlobalSettings();
 const datasetSelectionStore = useDatasetSelectionStore();
 const datasetSelectionTrrackedStore = useDatasetSelectionTrrackedStore();
@@ -18,6 +25,8 @@ const selectionStore = useSelectionStore();
 const mosaicSelectionStore = useMosaicSelectionStore();
 const conditionSelectorStore = useConditionSelectorStore();
 
+const menuRef = ref<any>(null);
+
 watch(
     () => datasetSelectionStore.fetchingTabularData,
     () => {
@@ -40,8 +49,10 @@ const shortExpName = computed<string>(() => {
         return datasetSelectionStore.currentExperimentMetadata.name;
     }
     let shortName = datasetSelectionTrrackedStore.currentExperimentFilename;
-    if (shortName === null) return '';
-    shortName = shortName.split('.')[0];
+    if (shortName === null) return 'Select Experiment';
+    // Extract just the filename from path
+    const parts = shortName.split('/');
+    shortName = parts[parts.length - 1].split('.')[0];
     const maxChar = 24;
     if (shortName.length > maxChar) {
         shortName = shortName.slice(0, maxChar) + '...';
@@ -49,6 +60,18 @@ const shortExpName = computed<string>(() => {
     return shortName;
 });
 
+const treeOptions = computed<TreeNode[]>(() => {
+    const list = datasetSelectionStore.experimentFilenameList;
+    if (!list || list.length === 0) return [];
+    return buildExperimentTree(list);
+});
+
+function selectExperiment(path: string) {
+    datasetSelectionTrrackedStore.currentExperimentFilename = path;
+    onSelectExperiment();
+    menuRef.value?.hide();
+}
+
 function onSelectExperiment() {
     selectionStore.resetState();
     mosaicSelectionStore.resetState();
@@ -57,24 +80,232 @@ function onSelectExperiment() {
 </script>
 
 <template>
-    <q-select
-        label="Experiment"
-        v-model="datasetSelectionTrrackedStore.currentExperimentFilename"
-        :display-value="shortExpName"
-        :options="datasetSelectionStore.experimentFilenameList"
-        :dark="globalSettings.darkMode"
-        @update:model-value="onSelectExperiment"
-    >
-        <template v-slot:after>
-            <q-btn
-                flat
-                dense
-                icon="refresh"
-                @click="datasetSelectionStore.refreshFileNameList"
-                style="box-sizing: border-box"
-            />
-        </template>
-    </q-select>
+    <div class="dataset-selector-dropdown">
+        <q-btn
+            flat
+            no-caps
+            class="experiment-btn full-width"
+            :class="{ 'dark-mode': globalSettings.darkMode }"
+        >
+            <div class="experiment-btn-content">
+                <div class="experiment-btn-label">
+                    <span class="label-caption">Experiment</span>
+                    <span class="label-value">{{ shortExpName }}</span>
+                </div>
+                <q-icon name="arrow_drop_down" size="sm" />
+            </div>
+
+            <q-menu
+                ref="menuRef"
+                :dark="globalSettings.darkMode"
+                class="experiment-menu"
+                anchor="bottom left"
+                self="top left"
+                fit
+            >
+                <q-list
+                    :dark="globalSettings.darkMode"
+                    class="experiment-tree-list"
+                >
+                    <template
+                        v-for="node in treeOptions"
+                        :key="
+                            node.type === 'experiment'
+                                ? (node as ExperimentNode).path
+                                : (node as FolderNode).label
+                        "
+                    >
+                        <!-- Folder node -->
+                        <q-expansion-item
+                            v-if="node.type === 'folder'"
+                            :label="(node as FolderNode).label"
+                            icon="folder"
+                            :dark="globalSettings.darkMode"
+                            dense
+                            dense-toggle
+                            header-class="folder-header"
+                        >
+                            <!-- Recursive children via nested component -->
+                            <template
+                                v-for="child in (node as FolderNode).children"
+                                :key="
+                                    child.type === 'experiment'
+                                        ? (child as ExperimentNode).path
+                                        : (child as FolderNode).label
+                                "
+                            >
+                                <q-expansion-item
+                                    v-if="child.type === 'folder'"
+                                    :label="(child as FolderNode).label"
+                                    icon="folder"
+                                    :dark="globalSettings.darkMode"
+                                    dense
+                                    dense-toggle
+                                    header-class="folder-header nested-folder"
+                                >
+                                    <template
+                                        v-for="grandchild in (
+                                            child as FolderNode
+                                        ).children"
+                                        :key="
+                                            grandchild.type === 'experiment'
+                                                ? (
+                                                      grandchild as ExperimentNode
+                                                  ).path
+                                                : (grandchild as FolderNode)
+                                                      .label
+                                        "
+                                    >
+                                        <q-expansion-item
+                                            v-if="
+                                                grandchild.type === 'folder'
+                                            "
+                                            :label="
+                                                (grandchild as FolderNode).label
+                                            "
+                                            icon="folder"
+                                            :dark="globalSettings.darkMode"
+                                            dense
+                                            dense-toggle
+                                            header-class="folder-header nested-folder-deep"
+                                        >
+                                            <q-item
+                                                v-for="ggchild in (
+                                                    grandchild as FolderNode
+                                                ).children"
+                                                :key="
+                                                    ggchild.type ===
+                                                    'experiment'
+                                                        ? (
+                                                              ggchild as ExperimentNode
+                                                          ).path
+                                                        : (
+                                                              ggchild as FolderNode
+                                                          ).label
+                                                "
+                                                clickable
+                                                @click="
+                                                    selectExperiment(
+                                                        (
+                                                            ggchild as ExperimentNode
+                                                        ).path
+                                                    )
+                                                "
+                                                :active="
+                                                    datasetSelectionTrrackedStore.currentExperimentFilename ===
+                                                    (ggchild as ExperimentNode)
+                                                        .path
+                                                "
+                                                active-class="bg-primary text-white"
+                                                :dark="globalSettings.darkMode"
+                                                class="experiment-item nested-experiment-deep"
+                                            >
+                                                <q-item-section avatar>
+                                                    <q-icon
+                                                        name="science"
+                                                        size="xs"
+                                                    />
+                                                </q-item-section>
+                                                <q-item-section>{{
+                                                    ggchild.label
+                                                }}</q-item-section>
+                                            </q-item>
+                                        </q-expansion-item>
+
+                                        <q-item
+                                            v-else
+                                            clickable
+                                            @click="
+                                                selectExperiment(
+                                                    (
+                                                        grandchild as ExperimentNode
+                                                    ).path
+                                                )
+                                            "
+                                            :active="
+                                                datasetSelectionTrrackedStore.currentExperimentFilename ===
+                                                (grandchild as ExperimentNode)
+                                                    .path
+                                            "
+                                            active-class="bg-primary text-white"
+                                            :dark="globalSettings.darkMode"
+                                            class="experiment-item nested-experiment"
+                                        >
+                                            <q-item-section avatar>
+                                                <q-icon
+                                                    name="science"
+                                                    size="xs"
+                                                />
+                                            </q-item-section>
+                                            <q-item-section>{{
+                                                grandchild.label
+                                            }}</q-item-section>
+                                        </q-item>
+                                    </template>
+                                </q-expansion-item>
+
+                                <q-item
+                                    v-else
+                                    clickable
+                                    @click="
+                                        selectExperiment(
+                                            (child as ExperimentNode).path
+                                        )
+                                    "
+                                    :active="
+                                        datasetSelectionTrrackedStore.currentExperimentFilename ===
+                                        (child as ExperimentNode).path
+                                    "
+                                    active-class="bg-primary text-white"
+                                    :dark="globalSettings.darkMode"
+                                    class="experiment-item nested-experiment"
+                                >
+                                    <q-item-section avatar>
+                                        <q-icon name="science" size="xs" />
+                                    </q-item-section>
+                                    <q-item-section>{{
+                                        child.label
+                                    }}</q-item-section>
+                                </q-item>
+                            </template>
+                        </q-expansion-item>
+
+                        <!-- Experiment leaf node at root level -->
+                        <q-item
+                            v-else
+                            clickable
+                            @click="
+                                selectExperiment(
+                                    (node as ExperimentNode).path
+                                )
+                            "
+                            :active="
+                                datasetSelectionTrrackedStore.currentExperimentFilename ===
+                                (node as ExperimentNode).path
+                            "
+                            active-class="bg-primary text-white"
+                            :dark="globalSettings.darkMode"
+                            class="experiment-item"
+                        >
+                            <q-item-section avatar>
+                                <q-icon name="science" size="xs" />
+                            </q-item-section>
+                            <q-item-section>{{ node.label }}</q-item-section>
+                        </q-item>
+                    </template>
+                </q-list>
+            </q-menu>
+        </q-btn>
+
+        <q-btn
+            flat
+            dense
+            icon="refresh"
+            @click="datasetSelectionStore.refreshFileNameList"
+            style="box-sizing: border-box"
+            :dark="globalSettings.darkMode"
+        />
+    </div>
 
     <div
         v-if="
@@ -110,4 +341,140 @@ function onSelectExperiment() {
     </div>
 </template>
 
-<style scoped lange="scss"></style>
+<style scoped>
+.dataset-selector-dropdown {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+}
+
+.experiment-btn {
+    flex: 1;
+    text-align: left;
+    border: 1px solid rgba(0, 0, 0, 0.24);
+    border-radius: 4px;
+    padding: 4px 8px;
+    min-height: 40px;
+}
+
+.experiment-btn.dark-mode {
+    border-color: rgba(255, 255, 255, 0.28);
+}
+
+.experiment-btn-content {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+}
+
+.experiment-btn-label {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+}
+
+.label-caption {
+    font-size: 0.7rem;
+    opacity: 0.6;
+    line-height: 1;
+}
+
+.label-value {
+    font-size: 0.875rem;
+    line-height: 1.4;
+}
+
+.experiment-menu {
+    max-height: 400px;
+    min-width: 260px;
+}
+
+.experiment-tree-list {
+    padding: 0;
+}
+
+.experiment-item {
+    min-height: 32px;
+    padding-top: 2px;
+    padding-bottom: 2px;
+}
+
+:deep(.folder-header) {
+    min-height: 32px;
+    padding-top: 2px;
+    padding-bottom: 2px;
+    font-weight: 500;
+}
+
+/* Remove default padding since we use our own whitespace indent */
+:deep(.q-item) {
+    padding-left: 8px;
+}
+
+/* ── Tree-line indentation ── */
+
+/* Level 1: children of a top-level folder */
+:deep(.q-expansion-item > .q-expansion-item__container > .q-expansion-item__content > .q-list > .q-item),
+:deep(.q-expansion-item > .q-expansion-item__container > .q-expansion-item__content > .q-list > .q-expansion-item > .q-expansion-item__container > .q-item__section--side) {
+    /* handled individually below */
+}
+
+/* Generic indentation connector: vertical line from parent through children */
+:deep(.q-expansion-item .q-expansion-item__content) {
+    position: relative;
+    padding-left: 16px;
+}
+
+/* Vertical tree line running alongside children */
+:deep(.q-expansion-item .q-expansion-item__content::before) {
+    content: '';
+    position: absolute;
+    left: 17px;
+    top: 0;
+    bottom: 0;
+    width: 1px;
+    background-color: rgba(128, 128, 128, 0.35);
+}
+
+/* Branch connector for each child item (├── style) */
+:deep(.q-expansion-item .q-expansion-item__content > .q-list > .q-item),
+:deep(.q-expansion-item .q-expansion-item__content > .q-list > .q-expansion-item) {
+    position: relative;
+}
+
+:deep(.q-expansion-item .q-expansion-item__content > .q-list > .q-item::before),
+:deep(.q-expansion-item .q-expansion-item__content > .q-list > .q-expansion-item::before) {
+    content: '';
+    position: absolute;
+    left: -15px;
+    top: 50%;
+    width: 14px;
+    height: 1px;
+    background-color: rgba(128, 128, 128, 0.35);
+}
+
+/* Last child gets └── style: cut the vertical line at the branch point */
+:deep(.q-expansion-item .q-expansion-item__content > .q-list > .q-item:last-child::after),
+:deep(.q-expansion-item .q-expansion-item__content > .q-list > .q-expansion-item:last-child::after) {
+    content: '';
+    position: absolute;
+    left: -16px;
+    top: 50%;
+    bottom: 0;
+    width: 2px;
+    background-color: var(--tree-line-bg, white);
+}
+
+/* Cover the vertical line below the last child */
+:deep(.q-expansion-item .q-expansion-item__content > .q-list > :last-child) {
+    /* nothing extra needed, the ::after above covers it */
+}
+
+/* Dark mode tree line color adjustment */
+.dark-mode :deep(.q-expansion-item .q-expansion-item__content::before),
+.dark-mode :deep(.q-expansion-item .q-expansion-item__content > .q-list > .q-item::before),
+.dark-mode :deep(.q-expansion-item .q-expansion-item__content > .q-list > .q-expansion-item::before) {
+    background-color: rgba(200, 200, 200, 0.3);
+}
+</style>
diff --git a/apps/client/src/util/experimentTree.ts b/apps/client/src/util/experimentTree.ts
new file mode 100644
index 00000000..584064fc
--- /dev/null
+++ b/apps/client/src/util/experimentTree.ts
@@ -0,0 +1,146 @@
+/**
+ * Builds a hierarchical folder tree from a flat list of experiment file paths.
+ *
+ * Rules:
+ * - Only create a folder when it contains more than one experiment (directly or in sub-dirs).
+ * - Collapse intermediate directories that have no direct experiments and only one child
+ *   directory into a single folder label (e.g. "stuff/etc/etc2").
+ * - Experiments in a directory with only one file are promoted to the parent level.
+ */
+
+export type TreeNode = FolderNode | ExperimentNode;
+
+export interface FolderNode {
+  type: 'folder';
+  label: string;
+  children: TreeNode[];
+}
+
+export interface ExperimentNode {
+  type: 'experiment';
+  /** Display label (filename without .json) */
+  label: string;
+  /** Full path as it appears in aa_index.json, used to set currentExperimentFilename */
+  path: string;
+}
+
+// Internal raw tree used during construction
+interface RawDir {
+  experiments: { filename: string; path: string }[];
+  subdirs: Map<string, RawDir>;
+}
+
+function newRawDir(): RawDir {
+  return { experiments: [], subdirs: new Map() };
+}
+
+/**
+ * Count total experiments reachable from this raw directory (recursively).
+ */
+function countExperiments(dir: RawDir): number {
+  let count = dir.experiments.length;
+  for (const sub of dir.subdirs.values()) {
+    count += countExperiments(sub);
+  }
+  return count;
+}
+
+/**
+ * Convert a RawDir into TreeNode[], applying collapsing and pruning rules.
+ */
+function convertDir(dir: RawDir): TreeNode[] {
+  const result: TreeNode[] = [];
+
+  // Process sub-directories
+  for (const [name, subdir] of dir.subdirs.entries()) {
+    const totalInSubdir = countExperiments(subdir);
+
+    if (totalInSubdir <= 1) {
+      // Don't create a folder — promote experiments to this level
+      flattenExperiments(subdir, result);
+    } else {
+      // Collapse intermediate directories:
+      // If this subdir has no direct experiments and exactly one child subdir,
+      // merge them into a single label.
+      let collapsedLabel = name;
+      let current = subdir;
+      while (
+        current.experiments.length === 0 &&
+        current.subdirs.size === 1
+      ) {
+        const [childName, childDir] = current.subdirs.entries().next()
+          .value as [string, RawDir];
+        collapsedLabel += '/' + childName;
+        current = childDir;
+      }
+
+      result.push({
+        type: 'folder',
+        label: collapsedLabel,
+        children: convertDir(current),
+      });
+    }
+  }
+
+  // Add direct experiments
+  for (const exp of dir.experiments) {
+    result.push({
+      type: 'experiment',
+      label: exp.filename.replace(/\.json$/i, ''),
+      path: exp.path,
+    });
+  }
+
+  // Sort: folders first (alphabetically), then experiments (alphabetically)
+  result.sort((a, b) => {
+    if (a.type !== b.type) return a.type === 'folder' ? -1 : 1;
+    return a.label.localeCompare(b.label);
+  });
+
+  return result;
+}
+
+/**
+ * Recursively collect all experiments from a dir tree and push them flat into `out`.
+ */
+function flattenExperiments(dir: RawDir, out: TreeNode[]): void {
+  for (const exp of dir.experiments) {
+    out.push({
+      type: 'experiment',
+      label: exp.filename.replace(/\.json$/i, ''),
+      path: exp.path,
+    });
+  }
+  for (const sub of dir.subdirs.values()) {
+    flattenExperiments(sub, out);
+  }
+}
+
+/**
+ * Build a hierarchical tree of folders and experiments from a flat list of file paths.
+ *
+ * @param paths - Array of file path strings from aa_index.json experiments list
+ * @returns Array of TreeNode objects representing the folder hierarchy
+ */
+export function buildExperimentTree(paths: string[]): TreeNode[] {
+  const root = newRawDir();
+
+  for (const path of paths) {
+    const parts = path.split('/');
+    const filename = parts[parts.length - 1];
+    const dirParts = parts.slice(0, -1);
+
+    // Walk/create directory structure
+    let current = root;
+    for (const part of dirParts) {
+      if (!current.subdirs.has(part)) {
+        current.subdirs.set(part, newRawDir());
+      }
+      current = current.subdirs.get(part)!;
+    }
+
+    current.experiments.push({ filename, path });
+  }
+
+  return convertDir(root);
+}

From 2b67b626f6a79602d6c4ce6d33d13de9f1e3ddfd Mon Sep 17 00:00:00 2001
From: Luke Schreiber <131496683+Luke-Schreiber@users.noreply.github.com>
Date: Tue, 10 Mar 2026 12:38:23 -0600
Subject: [PATCH 2/2] Use q-tree not q-list

---
 .../globalSettings/DatasetSelector.vue        | 514 ++++++------------
 1 file changed, 165 insertions(+), 349 deletions(-)

diff --git a/apps/client/src/components/globalSettings/DatasetSelector.vue b/apps/client/src/components/globalSettings/DatasetSelector.vue
index f8e06cf9..2b7929b7 100644
--- a/apps/client/src/components/globalSettings/DatasetSelector.vue
+++ b/apps/client/src/components/globalSettings/DatasetSelector.vue
@@ -25,8 +25,6 @@ const selectionStore = useSelectionStore();
 const mosaicSelectionStore = useMosaicSelectionStore();
 const conditionSelectorStore = useConditionSelectorStore();
 
-const menuRef = ref<any>(null);
-
 watch(
     () => datasetSelectionStore.fetchingTabularData,
     () => {
@@ -44,22 +42,6 @@ function onClickLocation(location: any) {
     datasetSelectionStore.selectImagingLocation(location);
 }
 
-const shortExpName = computed<string>(() => {
-    if (datasetSelectionStore.currentExperimentMetadata?.name) {
-        return datasetSelectionStore.currentExperimentMetadata.name;
-    }
-    let shortName = datasetSelectionTrrackedStore.currentExperimentFilename;
-    if (shortName === null) return 'Select Experiment';
-    // Extract just the filename from path
-    const parts = shortName.split('/');
-    shortName = parts[parts.length - 1].split('.')[0];
-    const maxChar = 24;
-    if (shortName.length > maxChar) {
-        shortName = shortName.slice(0, maxChar) + '...';
-    }
-    return shortName;
-});
-
 const treeOptions = computed<TreeNode[]>(() => {
     const list = datasetSelectionStore.experimentFilenameList;
     if (!list || list.length === 0) return [];
@@ -69,7 +51,6 @@ const treeOptions = computed<TreeNode[]>(() => {
 function selectExperiment(path: string) {
     datasetSelectionTrrackedStore.currentExperimentFilename = path;
     onSelectExperiment();
-    menuRef.value?.hide();
 }
 
 function onSelectExperiment() {
@@ -77,234 +58,136 @@ function onSelectExperiment() {
     mosaicSelectionStore.resetState();
     conditionSelectorStore.resetState();
 }
+
+const filter = ref('');
+const selectedNodeKey = ref<string | null>(null);
+
+const mappedTreeNodes = computed(() => {
+    const mapNode = (node: TreeNode, parentPath = ''): any => {
+        const currentKey =
+            node.type === 'experiment'
+                ? (node as ExperimentNode).path
+                : `${parentPath}/${(node as FolderNode).label}`;
+        if (node.type === 'folder') {
+            return {
+                label: (node as FolderNode).label,
+                icon: 'folder',
+                children: (node as FolderNode).children.map((child) =>
+                    mapNode(child, currentKey)
+                ),
+                type: 'folder',
+                id: currentKey,
+            };
+        } else {
+            return {
+                label: (node as ExperimentNode).label,
+                icon: 'science',
+                path: (node as ExperimentNode).path,
+                type: 'experiment',
+                id: (node as ExperimentNode).path,
+            };
+        }
+    };
+    return treeOptions.value.map((node) => mapNode(node));
+});
+
+watch(
+    () => datasetSelectionTrrackedStore.currentExperimentFilename,
+    (newVal) => {
+        selectedNodeKey.value = newVal;
+    },
+    { immediate: true }
+);
+
+function onNodeSelected(target: string | null) {
+    if (!target) return;
+
+    // Find if the target is an experiment path
+    const isExperiment = (nodes: any[]): boolean => {
+        for (const node of nodes) {
+            if (node.type === 'experiment' && node.id === target) return true;
+            if (node.children && isExperiment(node.children)) return true;
+        }
+        return false;
+    };
+
+    if (isExperiment(mappedTreeNodes.value)) {
+        selectExperiment(target);
+    }
+}
 </script>
 
 <template>
-    <div class="dataset-selector-dropdown">
-        <q-btn
-            flat
-            no-caps
-            class="experiment-btn full-width"
-            :class="{ 'dark-mode': globalSettings.darkMode }"
-        >
-            <div class="experiment-btn-content">
-                <div class="experiment-btn-label">
-                    <span class="label-caption">Experiment</span>
-                    <span class="label-value">{{ shortExpName }}</span>
-                </div>
-                <q-icon name="arrow_drop_down" size="sm" />
-            </div>
-
-            <q-menu
-                ref="menuRef"
+    <div class="experiment-selection-container">
+        <div class="row items-center justify-between q-mb-sm">
+            <span class="text-subtitle2">Select Experiment</span>
+            <q-btn
+                flat
+                round
+                dense
+                icon="refresh"
+                size="sm"
+                @click="datasetSelectionStore.refreshFileNameList"
                 :dark="globalSettings.darkMode"
-                class="experiment-menu"
-                anchor="bottom left"
-                self="top left"
-                fit
             >
-                <q-list
-                    :dark="globalSettings.darkMode"
-                    class="experiment-tree-list"
-                >
-                    <template
-                        v-for="node in treeOptions"
-                        :key="
-                            node.type === 'experiment'
-                                ? (node as ExperimentNode).path
-                                : (node as FolderNode).label
-                        "
-                    >
-                        <!-- Folder node -->
-                        <q-expansion-item
-                            v-if="node.type === 'folder'"
-                            :label="(node as FolderNode).label"
-                            icon="folder"
-                            :dark="globalSettings.darkMode"
-                            dense
-                            dense-toggle
-                            header-class="folder-header"
-                        >
-                            <!-- Recursive children via nested component -->
-                            <template
-                                v-for="child in (node as FolderNode).children"
-                                :key="
-                                    child.type === 'experiment'
-                                        ? (child as ExperimentNode).path
-                                        : (child as FolderNode).label
-                                "
-                            >
-                                <q-expansion-item
-                                    v-if="child.type === 'folder'"
-                                    :label="(child as FolderNode).label"
-                                    icon="folder"
-                                    :dark="globalSettings.darkMode"
-                                    dense
-                                    dense-toggle
-                                    header-class="folder-header nested-folder"
-                                >
-                                    <template
-                                        v-for="grandchild in (
-                                            child as FolderNode
-                                        ).children"
-                                        :key="
-                                            grandchild.type === 'experiment'
-                                                ? (
-                                                      grandchild as ExperimentNode
-                                                  ).path
-                                                : (grandchild as FolderNode)
-                                                      .label
-                                        "
-                                    >
-                                        <q-expansion-item
-                                            v-if="
-                                                grandchild.type === 'folder'
-                                            "
-                                            :label="
-                                                (grandchild as FolderNode).label
-                                            "
-                                            icon="folder"
-                                            :dark="globalSettings.darkMode"
-                                            dense
-                                            dense-toggle
-                                            header-class="folder-header nested-folder-deep"
-                                        >
-                                            <q-item
-                                                v-for="ggchild in (
-                                                    grandchild as FolderNode
-                                                ).children"
-                                                :key="
-                                                    ggchild.type ===
-                                                    'experiment'
-                                                        ? (
-                                                              ggchild as ExperimentNode
-                                                          ).path
-                                                        : (
-                                                              ggchild as FolderNode
-                                                          ).label
-                                                "
-                                                clickable
-                                                @click="
-                                                    selectExperiment(
-                                                        (
-                                                            ggchild as ExperimentNode
-                                                        ).path
-                                                    )
-                                                "
-                                                :active="
-                                                    datasetSelectionTrrackedStore.currentExperimentFilename ===
-                                                    (ggchild as ExperimentNode)
-                                                        .path
-                                                "
-                                                active-class="bg-primary text-white"
-                                                :dark="globalSettings.darkMode"
-                                                class="experiment-item nested-experiment-deep"
-                                            >
-                                                <q-item-section avatar>
-                                                    <q-icon
-                                                        name="science"
-                                                        size="xs"
-                                                    />
-                                                </q-item-section>
-                                                <q-item-section>{{
-                                                    ggchild.label
-                                                }}</q-item-section>
-                                            </q-item>
-                                        </q-expansion-item>
+                <q-tooltip>Refresh Experiment List</q-tooltip>
+            </q-btn>
+        </div>
 
-                                        <q-item
-                                            v-else
-                                            clickable
-                                            @click="
-                                                selectExperiment(
-                                                    (
-                                                        grandchild as ExperimentNode
-                                                    ).path
-                                                )
-                                            "
-                                            :active="
-                                                datasetSelectionTrrackedStore.currentExperimentFilename ===
-                                                (grandchild as ExperimentNode)
-                                                    .path
-                                            "
-                                            active-class="bg-primary text-white"
-                                            :dark="globalSettings.darkMode"
-                                            class="experiment-item nested-experiment"
-                                        >
-                                            <q-item-section avatar>
-                                                <q-icon
-                                                    name="science"
-                                                    size="xs"
-                                                />
-                                            </q-item-section>
-                                            <q-item-section>{{
-                                                grandchild.label
-                                            }}</q-item-section>
-                                        </q-item>
-                                    </template>
-                                </q-expansion-item>
-
-                                <q-item
-                                    v-else
-                                    clickable
-                                    @click="
-                                        selectExperiment(
-                                            (child as ExperimentNode).path
-                                        )
-                                    "
-                                    :active="
-                                        datasetSelectionTrrackedStore.currentExperimentFilename ===
-                                        (child as ExperimentNode).path
-                                    "
-                                    active-class="bg-primary text-white"
-                                    :dark="globalSettings.darkMode"
-                                    class="experiment-item nested-experiment"
-                                >
-                                    <q-item-section avatar>
-                                        <q-icon name="science" size="xs" />
-                                    </q-item-section>
-                                    <q-item-section>{{
-                                        child.label
-                                    }}</q-item-section>
-                                </q-item>
-                            </template>
-                        </q-expansion-item>
+        <q-input
+            outlined
+            dense
+            v-model="filter"
+            placeholder="Search experiments..."
+            class="q-mb-md search-bar"
+            :dark="globalSettings.darkMode"
+            clearable
+        >
+            <template v-slot:append>
+                <q-icon name="search" />
+            </template>
+        </q-input>
 
-                        <!-- Experiment leaf node at root level -->
-                        <q-item
-                            v-else
-                            clickable
-                            @click="
-                                selectExperiment(
-                                    (node as ExperimentNode).path
-                                )
-                            "
-                            :active="
-                                datasetSelectionTrrackedStore.currentExperimentFilename ===
-                                (node as ExperimentNode).path
+        <div
+            class="tree-scroll-container"
+            :class="{ 'dark-mode': globalSettings.darkMode }"
+        >
+            <q-tree
+                :nodes="mappedTreeNodes"
+                node-key="id"
+                label-key="label"
+                :filter="filter"
+                dense
+                :dark="globalSettings.darkMode"
+                v-model:selected="selectedNodeKey"
+                @update:selected="onNodeSelected"
+                no-connectors
+            >
+                <template v-slot:default-header="prop">
+                    <div class="row items-center no-wrap">
+                        <q-icon
+                            :name="prop.node.icon"
+                            :color="
+                                prop.node.id === selectedNodeKey
+                                    ? 'primary'
+                                    : ''
                             "
-                            active-class="bg-primary text-white"
-                            :dark="globalSettings.darkMode"
-                            class="experiment-item"
+                            size="18px"
+                            class="q-mr-sm"
+                        />
+                        <div
+                            :class="{
+                                'text-primary text-weight-bold':
+                                    prop.node.id === selectedNodeKey,
+                            }"
+                            class="ellipsis"
                         >
-                            <q-item-section avatar>
-                                <q-icon name="science" size="xs" />
-                            </q-item-section>
-                            <q-item-section>{{ node.label }}</q-item-section>
-                        </q-item>
-                    </template>
-                </q-list>
-            </q-menu>
-        </q-btn>
-
-        <q-btn
-            flat
-            dense
-            icon="refresh"
-            @click="datasetSelectionStore.refreshFileNameList"
-            style="box-sizing: border-box"
-            :dark="globalSettings.darkMode"
-        />
+                            {{ prop.node.label }}
+                        </div>
+                    </div>
+                </template>
+            </q-tree>
+        </div>
     </div>
 
     <div
@@ -315,8 +198,13 @@ function onSelectExperiment() {
         "
         class="mt-3"
     >
-        <span>Imaging Locations</span>
-        <q-list bordered separator :dark="globalSettings.darkMode">
+        <span class="text-subtitle2">Imaging Locations</span>
+        <q-list
+            bordered
+            separator
+            :dark="globalSettings.darkMode"
+            class="location-list mt-1"
+        >
             <q-item
                 v-for="location in datasetSelectionStore
                     .currentExperimentMetadata?.locationMetadataList"
@@ -333,6 +221,7 @@ function onSelectExperiment() {
                     }
                 "
                 :dark="globalSettings.darkMode"
+                class="location-item"
                 ><q-item-section>{{
                     location.name ?? location.id
                 }}</q-item-section></q-item
@@ -342,139 +231,66 @@ function onSelectExperiment() {
 </template>
 
 <style scoped>
-.dataset-selector-dropdown {
-    display: flex;
-    align-items: center;
-    gap: 4px;
-}
-
-.experiment-btn {
-    flex: 1;
-    text-align: left;
-    border: 1px solid rgba(0, 0, 0, 0.24);
-    border-radius: 4px;
-    padding: 4px 8px;
-    min-height: 40px;
-}
-
-.experiment-btn.dark-mode {
-    border-color: rgba(255, 255, 255, 0.28);
-}
-
-.experiment-btn-content {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    width: 100%;
-}
-
-.experiment-btn-label {
+.experiment-selection-container {
     display: flex;
     flex-direction: column;
-    align-items: flex-start;
-}
-
-.label-caption {
-    font-size: 0.7rem;
-    opacity: 0.6;
-    line-height: 1;
+    height: 100%;
+    max-height: 500px; /* Adjust as needed for the drawer */
 }
 
-.label-value {
-    font-size: 0.875rem;
-    line-height: 1.4;
+.search-bar {
+    flex-shrink: 0;
 }
 
-.experiment-menu {
-    max-height: 400px;
-    min-width: 260px;
+.tree-scroll-container {
+    flex-grow: 1;
+    overflow-y: auto;
+    border: 1px solid rgba(0, 0, 0, 0.12);
+    border-radius: 4px;
+    padding: 8px;
+    background: rgba(0, 0, 0, 0.02);
 }
 
-.experiment-tree-list {
-    padding: 0;
+.tree-scroll-container.dark-mode {
+    border-color: rgba(255, 255, 255, 0.12);
+    background: rgba(255, 255, 255, 0.05);
 }
 
-.experiment-item {
-    min-height: 32px;
-    padding-top: 2px;
-    padding-bottom: 2px;
+.location-list {
+    border-radius: 4px;
 }
 
-:deep(.folder-header) {
+.location-item {
     min-height: 32px;
-    padding-top: 2px;
-    padding-bottom: 2px;
-    font-weight: 500;
+    font-size: 0.85rem;
 }
 
-/* Remove default padding since we use our own whitespace indent */
-:deep(.q-item) {
-    padding-left: 8px;
+.mt-1 {
+    margin-top: 4px;
 }
 
-/* ── Tree-line indentation ── */
-
-/* Level 1: children of a top-level folder */
-:deep(.q-expansion-item > .q-expansion-item__container > .q-expansion-item__content > .q-list > .q-item),
-:deep(.q-expansion-item > .q-expansion-item__container > .q-expansion-item__content > .q-list > .q-expansion-item > .q-expansion-item__container > .q-item__section--side) {
-    /* handled individually below */
+.mt-3 {
+    margin-top: 12px;
 }
 
-/* Generic indentation connector: vertical line from parent through children */
-:deep(.q-expansion-item .q-expansion-item__content) {
-    position: relative;
-    padding-left: 16px;
-}
-
-/* Vertical tree line running alongside children */
-:deep(.q-expansion-item .q-expansion-item__content::before) {
-    content: '';
-    position: absolute;
-    left: 17px;
-    top: 0;
-    bottom: 0;
-    width: 1px;
-    background-color: rgba(128, 128, 128, 0.35);
-}
-
-/* Branch connector for each child item (├── style) */
-:deep(.q-expansion-item .q-expansion-item__content > .q-list > .q-item),
-:deep(.q-expansion-item .q-expansion-item__content > .q-list > .q-expansion-item) {
-    position: relative;
-}
-
-:deep(.q-expansion-item .q-expansion-item__content > .q-list > .q-item::before),
-:deep(.q-expansion-item .q-expansion-item__content > .q-list > .q-expansion-item::before) {
-    content: '';
-    position: absolute;
-    left: -15px;
-    top: 50%;
-    width: 14px;
-    height: 1px;
-    background-color: rgba(128, 128, 128, 0.35);
+:deep(.q-tree__node-header) {
+    padding: 4px 8px;
+    border-radius: 4px;
+    transition: background-color 0.2s;
 }
 
-/* Last child gets └── style: cut the vertical line at the branch point */
-:deep(.q-expansion-item .q-expansion-item__content > .q-list > .q-item:last-child::after),
-:deep(.q-expansion-item .q-expansion-item__content > .q-list > .q-expansion-item:last-child::after) {
-    content: '';
-    position: absolute;
-    left: -16px;
-    top: 50%;
-    bottom: 0;
-    width: 2px;
-    background-color: var(--tree-line-bg, white);
+:deep(.q-tree__node-header:hover) {
+    background-color: rgba(0, 0, 0, 0.05);
 }
 
-/* Cover the vertical line below the last child */
-:deep(.q-expansion-item .q-expansion-item__content > .q-list > :last-child) {
-    /* nothing extra needed, the ::after above covers it */
+.dark-mode :deep(.q-tree__node-header:hover) {
+    background-color: rgba(255, 255, 255, 0.08);
 }
 
-/* Dark mode tree line color adjustment */
-.dark-mode :deep(.q-expansion-item .q-expansion-item__content::before),
-.dark-mode :deep(.q-expansion-item .q-expansion-item__content > .q-list > .q-item::before),
-.dark-mode :deep(.q-expansion-item .q-expansion-item__content > .q-list > .q-expansion-item::before) {
-    background-color: rgba(200, 200, 200, 0.3);
+/* Ensure long labels are truncated */
+.ellipsis {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
 }
 </style>