Merge pull request #272 from datalad/frontend-maintenance

Frontend maintenance
datalad · Apr 6, 2023 · 377fffe · 377fffe
2 parents 573af3c + 3f6b3a5
commit 377fffe
Show file tree

Hide file tree

Showing 5 changed files with 50 additions and 32 deletions.
diff --git a/datalad_catalog/catalog/assets/app_component_dataset.js b/datalad_catalog/catalog/assets/app_component_dataset.js
@@ -421,6 +421,7 @@ const datasetView = () =>
             return this.tag_options_available.indexOf(tag) >= 0;
           },
           getFiles() {
+            this.files_ready = false;
             this.$root.selectedDataset.tree = this.$root.selectedDataset["children"];
             this.files_ready = true;
           },
@@ -456,9 +457,7 @@ const datasetView = () =>
           },
         },
         async beforeRouteUpdate(to, from, next) {
-          if (this.tabIndex != 1) {
-            this.tabIndex = 0;
-          }
+          this.tabIndex = 0;
           this.subdatasets_ready = false;
           this.dataset_ready = false;
 
@@ -549,6 +548,13 @@ const datasetView = () =>
           );
           var app = this.$root;
           response = await fetch(file);
+          // Reroute to 404 if the dataset file is not found
+          if (response.status == 404) {
+            router.push({
+              name: "404",
+            });
+            return;
+          }
           text = await response.text();
           app.selectedDataset = JSON.parse(text);
           this.dataset_ready = true;

diff --git a/datalad_catalog/catalog/assets/app_component_item.js b/datalad_catalog/catalog/assets/app_component_item.js
@@ -16,6 +16,7 @@ Vue.component('tree-item', function (resolve, reject) {
               return {
                 isOpen: false,
                 files_ready: false,
+                spinner_on: null,
                 children: [],
               };
             },
@@ -41,6 +42,8 @@ Vue.component('tree-item', function (resolve, reject) {
                 if (this.isFolder) {
                   tempIsOpen = !this.isOpen;
                   if (tempIsOpen && !this.item.hasOwnProperty("children")) {
+                    this.files_ready = false;
+                    this.spinner_on = true;
                     obj = await this.getChildren(this.item);
                     this.item.children = obj["children"];
                     // go through all children, set state to enabled
@@ -58,6 +61,7 @@ Vue.component('tree-item', function (resolve, reject) {
                       })
                     );
                     this.files_ready = true;
+                    this.spinner_on = false;
                   }
                   this.isOpen = !this.isOpen;
                 }

diff --git a/datalad_catalog/catalog/assets/app_component_notfound.js b/datalad_catalog/catalog/assets/app_component_notfound.js
diff --git a/datalad_catalog/catalog/templates/dataset-template.html b/datalad_catalog/catalog/templates/dataset-template.html
@@ -146,7 +146,12 @@ <h3>Cite dataset</h3>
             <template v-slot:title>
               <i class="fas fa-list-ol"></i> Subdatasets
             </template>
-            <span v-if="subdatasets_ready">
+            <span v-if="!subdatasets_ready">
+              <div class="d-flex justify-content-center mb-3">
+                <b-spinner label="Loading..."></b-spinner>
+              </div>
+            </span>
+            <span v-else>
               <span v-if="!sortedSubdatasets || !sortedSubdatasets.length"><em>There are no subdatasets listed for the current dataset</em></span>
               <span v-else>
                 <b-form>
@@ -240,35 +245,35 @@ <h5><a @click="selectDataset(ds)" class="newlink">{{ds.dirs_from_path.at(-1)}}</
             <template v-slot:title>
               <i class="far fa-folder"></i> Files
             </template>
-            <span v-if="!selectedDataset.tree || !selectedDataset.tree.length"><em>There are no files listed for the current dataset</em></span>
-            <span v-else>
-              <b-card no-body class="p-2">
-                <span v-if="files_ready">
+            <span v-if="files_ready">
+              <span v-if="!selectedDataset.tree || !selectedDataset.tree.length"><em>There are no files listed for the current dataset</em></span>
+              <span v-else>
+                <b-card no-body class="p-2">
                   <ul>
                     <tree-item class="item" v-for="item in selectedDataset.tree" :item="item"></tree-item>
                   </ul>
-                </span>
-                <span v-else>
-                  <div class="d-flex justify-content-center mb-3">
-                    <b-spinner label="Loading..."></b-spinner>
+                </b-card>
+              </span>
+              <b-modal id="modal-3" size="md"
+              header-bg-variant="light"
+              footer-bg-variant="light"
+              body-bg-variant="light"
+              body-text-variant="dark"
+              ok-only
+              >
+                <template #modal-header="{ close }">
+                  <div class="d-block text-center">
+                    <h3>Dataset not found</h3>
+                    <p class="my-4">The selected dataset is currently not available in the catalog.</p>
                   </div>
-                </span>
-              </b-card>
+                </template>
+              </b-modal>
+            </span>
+            <span v-else>
+              <div class="d-flex justify-content-center mb-3">
+                <b-spinner label="Loading..."></b-spinner>
+              </div>
             </span>
-            <b-modal id="modal-3" size="md"
-            header-bg-variant="light"
-            footer-bg-variant="light"
-            body-bg-variant="light"
-            body-text-variant="dark"
-            ok-only
-            >
-              <template #modal-header="{ close }">
-                <div class="d-block text-center">
-                  <h3>Dataset not found</h3>
-                  <p class="my-4">The selected dataset is currently not available in the catalog.</p>
-                </div>
-              </template>
-            </b-modal>
           </b-tab>
           <!-- PUBLICATIONS -->
           <span v-if="selectedDataset.publications && selectedDataset.publications.length">

diff --git a/datalad_catalog/catalog/templates/item-template.html b/datalad_catalog/catalog/templates/item-template.html
@@ -1,11 +1,15 @@
 <li>
     <div :class="{bold: isFolder}" @click="toggle">
+        <!-- Open folder -->
         <span v-if="isFolder && isOpen"> <i class="far fa-folder-open"></i> {{ displayText }}</span>
-        <span v-else-if="isFolder && !isOpen"> <i class="far fa-folder"></i> {{ displayText }}</span>
+        <!-- Closed folder -->
+        <span v-else-if="isFolder && !isOpen"> <i class="far fa-folder"></i> {{ displayText }} <span v-if="spinner_on"><b-spinner small label="Loading..."></b-spinner></span></span>
+        <!-- Dataset -->
         <span v-else-if="isDataset"><span v-if="item.state == 'disabled'" class="subdataset-disabled"> <i class="fas fa-database"></i> {{ displayText }}</span><span v-else> <i class="fas fa-database"></i> <a class="subdataset" @click="selectDataset(item, item.id)">{{ displayText }}</a></span></span>
-        <!-- <span v-else> <i class="far fa-file-alt"></i> {{ displayText }} <span v-show="downloadURL"><a class="xsm-dl-button" :href="downloadURL" :download="displayText"><i class="fa fa-cloud-download" aria-hidden="true"></i></a></span><span class="filesize"><i class="fa fa-eye" aria-hidden="true"></i>{{byteText}}</span> </span> -->
+        <!-- File -->
         <span v-else> <i class="far fa-file-alt"></i> {{ displayText }} <span class="filesize"><span v-show="downloadURL"><a class="xsm-dl-button" :href="downloadURL" :download="displayText"><i class="fas fa-cloud-download" aria-hidden="true"></i></a></span>{{byteText}}</span> </span>
     </div>
+    <!-- Children of an open folder -->
     <ul v-show="isOpen" v-if="isFolder">
         <tree-item class="item" v-for="(child, index) in item.children" :key="index" :index="index" :item="child"></tree-item>
     </ul>