Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Frontend maintenance #272

Merged
merged 4 commits into from
Apr 6, 2023
Merged

Frontend maintenance #272

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
f48da5e
update 404 page layout and info
jsheunis Apr 5, 2023
662812a
catch 404 and reroute when fetching missing dataset file
jsheunis Apr 5, 2023
f403ccc
improve UX of tab display upon dataset navigation - revert to origina…
jsheunis Apr 5, 2023
3f6b3a5
add spinners to subdtasets, files, and subdirectories when loading
jsheunis Apr 5, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 9 additions & 3 deletions datalad_catalog/catalog/assets/app_component_dataset.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
},
Expand Down Expand Up @@ -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;

Expand Down Expand Up @@ -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;
Expand Down
4 changes: 4 additions & 0 deletions datalad_catalog/catalog/assets/app_component_item.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ Vue.component('tree-item', function (resolve, reject) {
return {
isOpen: false,
files_ready: false,
spinner_on: null,
children: [],
};
},
Expand All @@ -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
Expand All @@ -58,6 +61,7 @@ Vue.component('tree-item', function (resolve, reject) {
})
);
this.files_ready = true;
this.spinner_on = false;
}
this.isOpen = !this.isOpen;
}
Expand Down
3 changes: 1 addition & 2 deletions datalad_catalog/catalog/assets/app_component_notfound.js
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

55 changes: 30 additions & 25 deletions datalad_catalog/catalog/templates/dataset-template.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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">
Expand Down
8 changes: 6 additions & 2 deletions datalad_catalog/catalog/templates/item-template.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
Expand Down