Libraries Modernisation: Directory Dataset Picker

client/src/components/Form/Elements/FormDrilldown/FormDrilldown.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { BAlert, BFormCheckbox } from "bootstrap-vue";
 import { computed, type ComputedRef } from "vue";
 
 import { findDescendants, flattenValues, getAllValues, type Option, type Value } from "./utilities";
@@ -11,10 +12,12 @@ const props = withDefaults(
         value?: Value;
         options: Array<Option>;
         multiple: boolean;
+        showIcons?: boolean;
     }>(),
     {
         value: null,
         multiple: true,
+        showIcons: false,
     }
 );
 
@@ -91,20 +94,27 @@ function setElementValues(oldArray: string[], newArray: string[], value: string)
 </script>
 
 <template>
-    <div v-if="hasOptions">
-        <b-form-checkbox
-            v-if="multiple"
-            v-localize
-            :checked="selectAllChecked"
-            :indeterminate="selectAllIndeterminate"
-            class="d-inline select-all-checkbox"
-            @change="onSelectAll">
-            Select / Deselect All
-        </b-form-checkbox>
-        <FormDrilldownList
-            :multiple="multiple"
-            :current-value="currentValue"
-            :options="options"
-            :handle-click="handleClick" />
+    <div>
+        <div v-if="hasOptions">
+            <BFormCheckbox
+                v-if="multiple"
+                v-localize
+                :checked="selectAllChecked"
+                :indeterminate="selectAllIndeterminate"
+                class="d-inline select-all-checkbox"
+                @change="onSelectAll">
+                Select / Deselect All
+            </BFormCheckbox>
+
+            <FormDrilldownList
+                :show-icons="showIcons"
+                :multiple="multiple"
+                :current-value="currentValue"
+                :options="options"
+                :handle-click="handleClick" />
+        </div>
+        <div v-else>
+            <BAlert show variant="info" class="mt-2"> No options available. </BAlert>
+        </div>
     </div>
 </template>

client/src/components/Form/Elements/FormDrilldown/FormDrilldownList.vue

@@ -7,6 +7,7 @@ defineProps<{
     currentValue: string[];
     handleClick: Function;
     multiple: boolean;
+    showIcons?: boolean;
     options: Array<Option>;
 }>();
 </script>
@@ -15,6 +16,7 @@ defineProps<{
     <div class="ui-drilldown">
         <div v-for="option in options" :key="option.name" class="descendant-lines">
             <FormDrilldownOption
+                :show-icons="showIcons"
                 :current-value="currentValue"
                 :handle-click="handleClick"
                 :multiple="multiple"

client/src/components/Form/Elements/FormDrilldown/FormDrilldownOption.vue

@@ -1,17 +1,27 @@
 <script setup lang="ts">
+import { faCaretDown, faCaretRight, faFile, faFolder, type IconDefinition } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { BFormCheckbox, BFormRadio } from "bootstrap-vue";
 import { computed, type ComputedRef, onMounted, ref } from "vue";
 
 import { getAllValues, type Option } from "./utilities";
 
 import FormDrilldownList from "./FormDrilldownList.vue";
 
-const props = defineProps<{
+interface Props {
     currentValue: string[];
     option: Option;
     handleClick: Function;
     multiple: boolean;
-}>();
+    showIcons?: boolean;
+    leafIcon?: IconDefinition;
+    branchIcon?: IconDefinition;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    leafIcon: () => faFile,
+    branchIcon: () => faFolder,
+});
 
 const showChildren = ref(false);
 
@@ -43,6 +53,11 @@ function toggleInitialization(): void {
         }
     }
 }
+
+function getOptionIcon(option: Option) {
+    return option.leaf ? props.leafIcon : props.branchIcon;
+}
+
 onMounted(() => {
     toggleInitialization();
 });
@@ -51,22 +66,26 @@ onMounted(() => {
 <template>
     <div>
         <b-button v-if="hasOptions" variant="link" class="btn p-0" @click="toggleChildren">
-            <i v-if="showChildren" class="fa fa-caret-down align-checkbox" />
-            <i v-else class="fa fa-caret-right align-checkbox" />
+            <FontAwesomeIcon v-if="showChildren" :icon="faCaretDown" class="align-checkbox" />
+            <FontAwesomeIcon v-else :icon="faCaretRight" class="align-checkbox" />
         </b-button>
         <span v-if="!hasOptions" class="align-indent"></span>
         <component
             :is="isComponent"
+            :id="`drilldown-option-${option.name}`"
             class="drilldown-option d-inline"
             value="true"
+            :disabled="option.disabled"
             :checked="isChecked"
             @change="handleClick(option.value, $event)">
+            <FontAwesomeIcon v-if="props.showIcons" :icon="getOptionIcon(option)" />
             {{ option.name }}
         </component>
         <FormDrilldownList
             v-if="hasOptions"
             v-show="showChildren"
             class="indent"
+            :show-icons="props.showIcons"
             :current-value="currentValue"
             :multiple="multiple"
             :options="option.options"

client/src/components/Form/Elements/FormDrilldown/utilities.ts

@@ -1,6 +1,9 @@
 export interface Option {
     name: string;
     value: string;
+    leaf?: boolean;
+    fullPath?: string;
+    disabled?: boolean;
     options: Array<Option>;
 }
 

client/src/components/History/CurrentHistory/HistoryOperations/SelectionOperations.vue

@@ -99,7 +99,7 @@
                     collection-name="Database/Builds"
                     :loading="loadingDbKeys"
                     :items="dbkeys"
-                    :current-item-id="selectedDbKey"
+                    :current-item="selectedDbKey"
                     @update:selected-item="onSelectedDbKey" />
             </DbKeyProvider>
         </b-modal>
@@ -116,7 +116,7 @@
                     collection-name="Data Types"
                     :loading="loadingDatatypes"
                     :items="datatypes"
-                    :current-item-id="selectedDatatype"
+                    :current-item="selectedDatatype"
                     @update:selected-item="onSelectedDatatype" />
             </DatatypesProvider>
         </b-modal>
@@ -186,8 +186,8 @@ export default {
     },
     data: function () {
         return {
-            selectedDbKey: "?",
-            selectedDatatype: "auto",
+            selectedDbKey: { id: "?", text: "unspecified (?)" },
+            selectedDatatype: { id: "auto", text: "Auto-detect" },
             selectedTags: [],
         };
     },
@@ -307,12 +307,12 @@ export default {
             this.runOnSelection(purgeSelectedContent);
         },
         changeDbkeyOfSelected() {
-            this.runOnSelection(changeDbkeyOfSelectedContent, { dbkey: this.selectedDbKey });
-            this.selectedDbKey = "?";
+            this.runOnSelection(changeDbkeyOfSelectedContent, { dbkey: this.selectedDbKey.id });
+            this.selectedDbKey = { id: "?" };
         },
         changeDatatypeOfSelected() {
-            this.runOnSelection(changeDatatypeOfSelectedContent, { datatype: this.selectedDatatype });
-            this.selectedDatatype = "auto";
+            this.runOnSelection(changeDatatypeOfSelectedContent, { datatype: this.selectedDatatype.id });
+            this.selectedDatatype = { id: "auto", text: "Auto-detect" };
         },
         addTagsToSelected() {
             this.runOnSelection(addTagsToSelectedContent, { tags: this.selectedTags });
@@ -354,10 +354,10 @@ export default {
             this.$emit("operation-error", { errorMessage, result });
         },
         onSelectedDbKey(dbkey) {
-            this.selectedDbKey = dbkey.id;
+            this.selectedDbKey = dbkey;
         },
         onSelectedDatatype(datatype) {
-            this.selectedDatatype = datatype.id;
+            this.selectedDatatype = datatype;
         },
 
         // collection creation, fires up a modal

client/src/components/Libraries/LibraryFolder/LibraryFolderDataset/LibraryDataset.vue

@@ -83,7 +83,7 @@
                             collection-name="Data Types"
                             :loading="loadingDatatypes"
                             :items="datatypes"
-                            :current-item-id="dataset.file_ext"
+                            :current-item="datatypes?.find((datatype) => datatype.id === dataset.file_ext)"
                             @update:selected-item="onSelectedDatatype" />
                     </DatatypesProvider>
                     <DbKeyProvider
@@ -93,7 +93,7 @@
                             collection-name="Database/Builds"
                             :loading="loadingDbKeys"
                             :items="dbkeys"
-                            :current-item-id="dataset.genome_build"
+                            :current-item="dbkeys?.find((dbkey) => dbkey.id === dataset.genome_build)"
                             @update:selected-item="onSelectedDbKey" />
                     </DbKeyProvider>
                     <b-form-input