Skip to content

Add experiment selector folder tree support #233

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Dev-Lan merged 2 commits into from
Mar 10, 2026
Merged

Add experiment selector folder tree support #233

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
44eed68
Add experiment selector folder tree support
Luke-Schreiber Mar 3, 2026
2b67b62
Use q-tree not q-list
Luke-Schreiber Mar 10, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
239 changes: 211 additions & 28 deletions apps/client/src/components/globalSettings/DatasetSelector.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand All @@ -35,46 +42,153 @@ 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 '';
shortName = shortName.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 [];
return buildExperimentTree(list);
});

function selectExperiment(path: string) {
datasetSelectionTrrackedStore.currentExperimentFilename = path;
onSelectExperiment();
}

function onSelectExperiment() {
selectionStore.resetState();
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>
<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>
<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"
style="box-sizing: border-box"
/>
</template>
</q-select>
:dark="globalSettings.darkMode"
>
<q-tooltip>Refresh Experiment List</q-tooltip>
</q-btn>
</div>

<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>

<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'
: ''
"
size="18px"
class="q-mr-sm"
/>
<div
:class="{
'text-primary text-weight-bold':
prop.node.id === selectedNodeKey,
}"
class="ellipsis"
>
{{ prop.node.label }}
</div>
</div>
</template>
</q-tree>
</div>
</div>

<div
v-if="
Expand All @@ -84,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"
Expand All @@ -102,6 +221,7 @@ function onSelectExperiment() {
}
"
:dark="globalSettings.darkMode"
class="location-item"
><q-item-section>{{
location.name ?? location.id
}}</q-item-section></q-item
Expand All @@ -110,4 +230,67 @@ function onSelectExperiment() {
</div>
</template>

<style scoped lange="scss"></style>
<style scoped>
.experiment-selection-container {
display: flex;
flex-direction: column;
height: 100%;
max-height: 500px; /* Adjust as needed for the drawer */
}

.search-bar {
flex-shrink: 0;
}

.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);
}

.tree-scroll-container.dark-mode {
border-color: rgba(255, 255, 255, 0.12);
background: rgba(255, 255, 255, 0.05);
}

.location-list {
border-radius: 4px;
}

.location-item {
min-height: 32px;
font-size: 0.85rem;
}

.mt-1 {
margin-top: 4px;
}

.mt-3 {
margin-top: 12px;
}

:deep(.q-tree__node-header) {
padding: 4px 8px;
border-radius: 4px;
transition: background-color 0.2s;
}

:deep(.q-tree__node-header:hover) {
background-color: rgba(0, 0, 0, 0.05);
}

.dark-mode :deep(.q-tree__node-header:hover) {
background-color: rgba(255, 255, 255, 0.08);
}

/* Ensure long labels are truncated */
.ellipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
</style>
Loading
Loading