Merge pull request #369 from datalad/js

ENH: UI/UX
datalad · Oct 1, 2023 · 4f86716 · 4f86716
2 parents a75c06b + 498c278
commit 4f86716
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 8 deletions.
diff --git a/datalad_catalog/catalog/assets/app_component_dataset.js b/datalad_catalog/catalog/assets/app_component_dataset.js
@@ -109,9 +109,12 @@ const datasetView = () =>
               sorted_metadata_sources = dataset.metadata_sources.sources.sort(
                 (a, b) => b.source_time - a.source_time
               );
-              disp_dataset.last_updated = this.getDateFromUTCseconds(
-                sorted_metadata_sources[0].source_time
-              );
+              disp_dataset.last_updated = sorted_metadata_sources[0].source_time
+              if (disp_dataset.last_updated) {
+                disp_dataset.last_updated = this.getDateFromUTCseconds(
+                  disp_dataset.last_updated
+                );
+              }
               // ID, version and location
               disp_dataset.file_path =
                 "metadata/" +

diff --git a/datalad_catalog/catalog/assets/app_component_item.js b/datalad_catalog/catalog/assets/app_component_item.js
@@ -31,7 +31,11 @@ Vue.component('tree-item', function (resolve, reject) {
                 return this.item["name"];
               },
               byteText: function () {
-                return this.formatBytes(this.item["contentbytesize"]);
+                if (this.item["contentbytesize"]) {
+                  return this.formatBytes(this.item["contentbytesize"]);
+                } else {
+                  return ""
+                }
               },
               downloadURL: function () {
                 return this.getDownloadURL(this.item["url"]);

diff --git a/datalad_catalog/catalog/assets/style.css b/datalad_catalog/catalog/assets/style.css
@@ -51,10 +51,13 @@ a:hover {
 }
 
 .item {
-  cursor: pointer;
   font-family: Menlo, Consolas, monospace;
 }
 
+.showpointer {
+  cursor: pointer;
+}
+
 .bold {
   font-weight: bold;
 }

diff --git a/datalad_catalog/catalog/templates/dataset-template.html b/datalad_catalog/catalog/templates/dataset-template.html
@@ -24,7 +24,8 @@
         <!-- DATASET VERSION ETC -->
         <b-card-text>
           <strong>Version:</strong> {{selectedDataset.dataset_version.substring(0,7)}}&nbsp;
-          <strong>Last updated:</strong> {{displayData.last_updated}}&nbsp;
+          <strong>Last updated:</strong> <span v-if="displayData.last_updated">{{displayData.last_updated}}&nbsp;</span>
+          <span v-else><em>unknown</em></span>&nbsp;
           <strong>DOI:</strong> <span v-if="selectedDataset.doi"><a :href="selectedDataset.doi" target="_blank"> {{selectedDataset.doi.replace("https://doi.org/", "")}}</a></span>
           <span v-else><em>unknown</em></span>&nbsp;
           <strong>License:</strong> <span v-if="selectedDataset.license && selectedDataset.license.name"><a :href="selectedDataset.license.url" target="_blank"> {{selectedDataset.license.name}}</a></span>

diff --git a/datalad_catalog/catalog/templates/item-template.html b/datalad_catalog/catalog/templates/item-template.html
@@ -1,13 +1,19 @@
 <li>
-    <div :class="{bold: isFolder}" @click="toggle">
+    <div :class="{bold: isFolder, showpointer: isFolder}" @click="toggle">
         <!-- Open folder -->
         <span v-if="isFolder && isOpen"> <i class="far fa-folder-open"></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($event, item, item.id)">{{ displayText }}</a></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>
+        <span v-else> <i class="far fa-file-alt"></i>
+            <span v-if="downloadURL.includes('http')">
+                <a :href="downloadURL" :download="displayText">{{ displayText }}</a>
+            </span>
+            <span v-else>{{ displayText }}</span>
+            <span class="filesize">{{byteText}}</span>
+        </span>
     </div>
     <!-- Children of an open folder -->
     <ul v-show="isOpen" v-if="isFolder">