Merge pull request #306 from VariantEffect/estelle/addUrnInExperiment…

…Dropdown Include the URN in the Experiment dropdown when creating score sets
VariantEffect · Oct 22, 2024 · 4f898b2 · 4f898b2
2 parents 80ca380 + cff0793
commit 4f898b2
Showing 1 changed file with 15 additions and 5 deletions.
diff --git a/src/components/screens/ScoreSetCreator.vue b/src/components/screens/ScoreSetCreator.vue
@@ -96,14 +96,24 @@
                       <div v-else style="position: relative;">
                         <span class="p-float-label">
                           <Dropdown
+                            ref="experimentInput"
                             v-model="experiment"
                             :id="$scopedId('input-experiment')"
+                            filter optionLabel="title"
                             :options="editableExperiments"
-                            optionLabel="title"
-                            optionValue=""
-                            style="width: 50%"
-                            @change="populateExperimentMetadata"
-                          />
+                            :virtualScrollerOptions="{ itemSize: 50 }"
+                            @option-select="populateExperimentMetadata"
+                            style="width: 100%;"
+                          >
+                            <template #option="slotProps">
+                              {{slotProps.option.urn}}: {{slotProps.option.title}}
+                            </template>
+                            <template #empty>
+                              <div style="padding: 10px; text-align:center;">
+                                No experiments found.
+                              </div>
+                            </template>
+                          </Dropdown>
                           <label :for="$scopedId('input-experiment')">Experiment</label>
                         </span>
                         <span v-if="validationErrors.experiment" class="mave-field-error">{{ validationErrors.experiment }}</span>