From 982154ce22be6cf8ac7a36ed961ba9979f4af6af Mon Sep 17 00:00:00 2001 From: Joel Collins Date: Tue, 3 Nov 2020 15:40:28 +0000 Subject: [PATCH] Updated client to simplify capture data --- .../api/static/src/components/appContent.vue | 2 +- .../galleryComponents/captureCard.vue | 101 ++++++++++++------ .../galleryComponents/scanCard.vue | 83 ++++++-------- .../tabContentComponents/galleryContent.vue | 76 ++++++------- 4 files changed, 143 insertions(+), 119 deletions(-) diff --git a/openflexure_microscope/api/static/src/components/appContent.vue b/openflexure_microscope/api/static/src/components/appContent.vue index c2553cc1..7aaa32d0 100644 --- a/openflexure_microscope/api/static/src/components/appContent.vue +++ b/openflexure_microscope/api/static/src/components/appContent.vue @@ -360,7 +360,7 @@ export default { enterApp: function() { // Stuff to do once connected and all init modals are finished console.log("Entering main application"); - this.currentTab = "view"; + //this.currentTab = "view"; } } }; diff --git a/openflexure_microscope/api/static/src/components/tabContentComponents/galleryComponents/captureCard.vue b/openflexure_microscope/api/static/src/components/tabContentComponents/galleryComponents/captureCard.vue index 42730f07..7002fdc4 100644 --- a/openflexure_microscope/api/static/src/components/tabContentComponents/galleryComponents/captureCard.vue +++ b/openflexure_microscope/api/static/src/components/tabContentComponents/galleryComponents/captureCard.vue @@ -4,11 +4,11 @@ :class="{ 'uk-card-secondary': $store.state.globalSettings.darkMode }" >
- +
- {{ fileName }} + {{ name }}
@@ -34,7 +34,7 @@
- +
-

{{ fileName }}

-

Path: {{ captureState.path }}

-

Time: {{ captureState.metadata.image.acquisitionDate }}

-

ID: {{ captureState.metadata.image.id }}

-

Format: {{ captureState.metadata.image.format }}

+

{{ name }}

+

Path: {{ path }}

+

Time: {{ time }}

+

ID: {{ id }}

+

Format: {{ format }}

@@ -161,27 +161,54 @@ export default { }, props: { - captureState: { + id: { + type: String, + required: true + }, + name: { + type: String, + required: true + }, + time: { + type: String, + required: true + }, + path: { + type: String, + required: true + }, + format: { + type: String, + required: true + }, + links: { type: Object, required: true + }, + tags: { + type: Array, + required: false, + default: function() { + return []; + } + }, + annotations: { + type: Object, + required: false, + default: function() { + return {}; + } } }, data: function() { return { - tags: [], newTag: "", - annotations: {}, newAnnotations: {} }; }, computed: { - fileName: function() { - return this.captureState.name // If this.captureState.filename exists - ? this.captureState.name // Use this.captureState.filename - : this.captureState.metadata.filename; // Otherwise use old this.captureState.metadata.filename - }, tagModalID: function() { return this.makeModalName("tag-modal-"); }, @@ -195,29 +222,41 @@ export default { return "#" + this.metadataModalID; }, thumbURL: function() { - return `${this.captureState.links.download.href}?thumbnail=true`; + return `${this.links.download.href}?thumbnail=true`; }, imgURL: function() { - return this.captureState.links.download.href; + return this.links.download.href; }, tagsURL: function() { - return this.captureState.links.tags.href; + return this.links.tags.href; }, annotationsURL: function() { - return this.captureState.links.annotations.href; + return this.links.annotations.href; }, captureURL: function() { - return this.captureState.links.self.href; + return this.links.self.href; } }, - created: function() { - // Get initial metadata from prop - this.tags = this.captureState.metadata.image.tags; - this.annotations = this.captureState.metadata.annotations; - }, + created: function() {}, methods: { + getMetadata: function() { + // Send metadata request + console.log("Loading capture metadata..."); + axios + .get(this.captureURL) + .then(response => { + this.$emit("update:tags", response.data.metadata.image.tags); + this.$emit( + "update:annotations", + response.data.metadata.image.annotations + ); + }) + .catch(error => { + this.modalError(error); // Let mixin handle error + }); + }, handleTagSubmit: function(event) { if (this.newTag !== "") { this.newTagRequest(this.newTag); @@ -303,7 +342,8 @@ export default { axios .get(this.tagsURL) .then(response => { - this.tags = response.data; + // Pass the update tag array to the parent + this.$emit("update:tags", response.data); }) .catch(error => { this.modalError(error); // Let mixin handle error @@ -315,7 +355,8 @@ export default { axios .get(this.annotationsURL) .then(response => { - this.annotations = response.data; + // Pass the update annotation array to the parent + this.$emit("update:annotations", response.data); }) .catch(error => { this.modalError(error); // Let mixin handle error @@ -323,7 +364,7 @@ export default { }, makeModalName: function(prefix) { - return prefix + this.captureState.metadata.image.id; + return prefix + this.id; } } }; diff --git a/openflexure_microscope/api/static/src/components/tabContentComponents/galleryComponents/scanCard.vue b/openflexure_microscope/api/static/src/components/tabContentComponents/galleryComponents/scanCard.vue index 163f2861..9255143d 100644 --- a/openflexure_microscope/api/static/src/components/tabContentComponents/galleryComponents/scanCard.vue +++ b/openflexure_microscope/api/static/src/components/tabContentComponents/galleryComponents/scanCard.vue @@ -6,8 +6,8 @@
- {{ scanState.metadata.type || "Dataset" }}: - {{ scanState.metadata.image.name }} + {{ type }}: + {{ name }}
@@ -35,44 +35,19 @@
- -
-
- More... +
{{ tag }}
- -
-
- -

{{ scanState.metadata.image.name }}

-

Time: {{ scanState.metadata.image.acquisitionDate }}

-

ID: {{ scanState.metadata.image.id }}

- -
- -
-

- {{ key }}: {{ value }} -

-
-
-
@@ -84,25 +59,37 @@ export default { name: "ScanCard", props: { - scanState: { - type: Object, + id: { + type: String, required: true + }, + name: { + type: String, + required: true + }, + time: { + type: String, + required: true + }, + type: { + type: String, + required: false, + default: "Dataset" + }, + thumbnail: { + type: String, + required: true + }, + tags: { + type: Array, + required: false, + default: function() { + return []; + } } }, computed: { - tagModalID: function() { - return this.makeModalName("tag-modal-"); - }, - tagModalTarget: function() { - return "#" + this.tagModalID; - }, - metadataModalID: function() { - return this.makeModalName("metadata-modal-"); - }, - metadataModalTarget: function() { - return "#" + this.metadataModalID; - }, allURLs: function() { var urls = []; for (var capture of this.scanState.captures) { @@ -114,11 +101,7 @@ export default { methods: { onClick: function() { - this.$emit("selectFolder", this.scanState.metadata.image.id); - }, - - makeModalName: function(prefix) { - return prefix + this.scanState.metadata.image.id; + this.$emit("selectFolder", this.id); }, delAllConfirm: function() { diff --git a/openflexure_microscope/api/static/src/components/tabContentComponents/galleryContent.vue b/openflexure_microscope/api/static/src/components/tabContentComponents/galleryContent.vue index 5e4269cb..32d3de9d 100644 --- a/openflexure_microscope/api/static/src/components/tabContentComponents/galleryContent.vue +++ b/openflexure_microscope/api/static/src/components/tabContentComponents/galleryContent.vue @@ -91,20 +91,37 @@

SCAN - {{ allScans[galleryFolder].metadata.image.name }} + {{ allScans[galleryFolder].name }}

-
+
- +
@@ -164,7 +181,7 @@ export default { // Return an array of unique tags across all captures var tags = []; for (var capture of this.captures) { - for (var tag of capture.metadata.image.tags) { + for (var tag of capture.tags) { if (!tags.includes(tag)) { tags.push(tag); } @@ -178,7 +195,7 @@ export default { var captures = []; for (var capture of this.captures) { // Add to capture list if matched - if (!capture.metadata.dataset) { + if (!capture.dataset) { captures.push(capture); } } @@ -191,9 +208,7 @@ export default { var scans = {}; for (var capture of this.captures) { - var annotations = capture.metadata.image.annotations; - var tags = capture.metadata.image.tags; - var dataset = capture.metadata.dataset; + var dataset = capture.dataset; if (dataset) { var id = dataset["id"]; @@ -201,34 +216,22 @@ export default { // If this scan ID hasn't been seen before if (!(id in scans)) { scans[id] = {}; + scans[id].id = id; + scans[id].name = dataset.name; + scans[id].type = dataset.type; + // Use time of first found capture in dataset + scans[id].time = capture.time; scans[id].isScan = true; scans[id].captures = []; - scans[id].metadata = { - image: { - name: dataset.name, - acquisitionDate: dataset.acquisitionDate, - id: dataset.id, - tags: [], - annotations: {} - }, - type: dataset.type - }; + scans[id].tags = []; } - // Add the capture object to the scan scans[id].captures.push(capture); - // Add missing scan metadata, prioritising first capture - for (var key of Object.keys(annotations)) { - if (!(key in scans[id].metadata.image.annotations)) { - scans[id].metadata.image.annotations[key] = annotations[key]; - } - } - // Append missing tags - for (var tag of tags) { - if (!scans[id].metadata.image.tags.includes(tag)) { - scans[id].metadata.image.tags.push(tag); + for (var tag of capture.tags) { + if (!scans[id].tags.includes(tag)) { + scans[id].tags.push(tag); } } @@ -272,11 +275,11 @@ export default { if ("captures" in item) { for (var capture of item.captures) { // Get the ID of each capture in the set - captures[capture.metadata.image.id] = capture; + captures[capture.id] = capture; } } else { // If it's a single capture, get the ID of the capture - captures[item.metadata.image.id] = item; + captures[item.id] = item; } } @@ -360,7 +363,7 @@ export default { var includeCapture = false; // Filter by selected tags - var tags = capture.metadata.image.tags; + var tags = capture.tags; let checker = (arr, target) => target.every(v => arr.includes(v)); // True if all tags match includeCapture = checker(tags, filterTags); @@ -377,10 +380,8 @@ export default { sortCaptures: function(list) { // Sort a list of captures by metadata time function compare(a, b) { - if (a.metadata.image.acquisitionDate < b.metadata.image.acquisitionDate) - return -1; - if (a.metadata.image.acquisitionDate > b.metadata.image.acquisitionDate) - return 1; + if (a.time < b.time) return -1; + if (a.time > b.time) return 1; return 0; } @@ -397,7 +398,6 @@ export default { }, selectFolder: function(folderID) { - console.log(folderID); this.galleryFolder = folderID; } }