add explanation of formatVsDatatypeVsExtension

Co-authored-by: Dannon <[email protected]> and consolidate required formats indicator for create collection and upload files to collection in `CollectionCreatorShowExtensions`
galaxyproject · Jan 22, 2025 · 150b0ea · 150b0ea
1 parent ba71756
commit 150b0ea
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 17 deletions.
diff --git a/client/src/components/Collections/common/CollectionCreator.vue b/client/src/components/Collections/common/CollectionCreator.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { faPlus, faUpload } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { BAlert, BTab, BTabs } from "bootstrap-vue";
+import { BTab, BTabs } from "bootstrap-vue";
 import { storeToRefs } from "pinia";
 import { computed, ref, watch } from "vue";
 
@@ -11,15 +11,13 @@ import { AUTO_EXTENSION, getUploadDatatypes } from "@/components/Upload/utils";
 import { useConfig } from "@/composables/config";
 import { useUserStore } from "@/stores/userStore";
 import localize from "@/utils/localization";
-import { orList } from "@/utils/strings";
 
 import CollectionCreatorFooterButtons from "./CollectionCreatorFooterButtons.vue";
 import CollectionCreatorHelpHeader from "./CollectionCreatorHelpHeader.vue";
 import CollectionCreatorNoItemsMessage from "./CollectionCreatorNoItemsMessage.vue";
 import CollectionCreatorShowExtensions from "./CollectionCreatorShowExtensions.vue";
 import CollectionCreatorSourceOptions from "./CollectionCreatorSourceOptions.vue";
 import CollectionNameInput from "./CollectionNameInput.vue";
-import HelpText from "@/components/Help/HelpText.vue";
 import DefaultBox from "@/components/Upload/DefaultBox.vue";
 
 const Tabs = {
@@ -250,14 +248,7 @@ watch(
                     @uploaded="addUploadedFiles"
                     @dismiss="currentTab = Tabs.create">
                     <template v-slot:footer>
-                        <div class="d-flex align-items-center justify-content-between mt-2">
-                            <BAlert v-if="extensions?.length" class="w-100 py-0" variant="secondary" show>
-                                <HelpText
-                                    uri="galaxy.collections.collectionBuilder.requiredUploadExtensions"
-                                    :text="localize('Required format(s): ')" />
-                                <strong>{{ orList(extensions) }}</strong>
-                            </BAlert>
-                        </div>
+                        <CollectionCreatorShowExtensions :extensions="extensions" upload />
                     </template>
                     <template v-slot:emit-btn-txt>
                         <FontAwesomeIcon :icon="faPlus" fixed-width />

diff --git a/client/src/components/Collections/common/CollectionCreatorShowExtensions.vue b/client/src/components/Collections/common/CollectionCreatorShowExtensions.vue
@@ -8,18 +8,32 @@ import HelpText from "@/components/Help/HelpText.vue";
 
 interface Props {
     extensions?: string[];
+    upload?: boolean;
 }
 
 defineProps<Props>();
 </script>
 
 <template>
-    <div class="d-flex align-items-center justify-content-between">
-        <BAlert v-if="extensions?.length" class="w-100 py-0" variant="secondary" show>
-            <HelpText
-                uri="galaxy.collections.collectionBuilder.filteredExtensions"
-                :text="localize('Filtered format(s): ')" />
-            <strong>{{ orList(extensions) }}</strong>
+    <div class="d-flex align-items-center justify-content-between mt-2">
+        <BAlert
+            v-if="extensions?.length"
+            class="w-100 py-0 d-flex justify-content-between flex-gapx-1"
+            variant="secondary"
+            show>
+            <div>
+                <HelpText
+                    :uri="`galaxy.collections.collectionBuilder.${
+                        upload ? 'requiredUploadExtensions' : 'filteredExtensions'
+                    }`"
+                    :text="localize(`${upload ? 'Required' : 'Filtered'} format(s):`)" />
+                <strong>{{ orList(extensions) }}</strong>
+            </div>
+            <strong>
+                <i>
+                    <HelpText uri="galaxy.datasets.formatVsDatatypeVsExtension" :text="localize('format?')" />
+                </i>
+            </strong>
         </BAlert>
     </div>
 </template>
diff --git a/client/src/components/Help/terms.yml b/client/src/components/Help/terms.yml
@@ -156,3 +156,19 @@ galaxy:
       to pass to the ``galaxy-upload`` command.
     ruleBased: |
       Galaxy can bulk import lists & tables of URLs into datasets or collections using reproducible rules.
+  
+  datasets:
+    formatVsDatatypeVsExtension: |
+      In Galaxy, the terms "datatype," "format," and "extension" are used to describe the nature of a dataset,
+      each with specific meanings.
+      
+      The ``datatype`` defines how a dataset is interpreted, validated, and processed, such as "fastqsanger", "bam",
+      or "vcf". Each datatype corresponds to a Python class that specifies how Galaxy should handle the file.
+      
+      The ``format`` is the user-facing label for the dataset's datatype, appearing in the Galaxy user interface
+      to indicate the structure and content expectations of the dataset.
+      
+      The ``extension`` is a string associated with each datatype, stored in Galaxy’s database to identify the
+      dataset’s datatype. This extension can match a file’s actual disk suffix (e.g., ".vcf") but may also be more
+      specialized (e.g., "fastqsanger"). Understanding these distinctions ensures that datasets are processed
+      correctly within Galaxy, maintaining the integrity and reproducibility of analyses.