diff --git a/src/components/AnnotationSelector.vue b/src/components/AnnotationSelector.vue index ec75a6c..054293d 100644 --- a/src/components/AnnotationSelector.vue +++ b/src/components/AnnotationSelector.vue @@ -229,17 +229,15 @@ export default { */ computeSelectedAnnotations(newVal, selectedCategories) { let sc = new Set(selectedCategories.map(sc => getCategoryId(sc))); - let selectedAnnotations = newVal + return newVal // exclude annotations from selected categories .filter(a => !sc.has(a.split(SEPARATOR, 2)[0])) - .map(a => this.annotationById[a]); - selectedAnnotations.forEach(a => { - if (!a) { - console.warn('Term is not selectable'); - } + .map(a => this.annotationById[a] || { + classUri: a.split(SEPARATOR, 2)[0], + className: "", + termUri: a.split(SEPARATOR, 2)[1], + termName: "" }); - - return selectedAnnotations.filter(a => a) }, /** * Selected categories. diff --git a/src/components/DatasetPreview.vue b/src/components/DatasetPreview.vue index 72ef8a7..bb80152 100644 --- a/src/components/DatasetPreview.vue +++ b/src/components/DatasetPreview.vue @@ -2,20 +2,15 @@

{{ dataset.name }}

@@ -51,6 +46,7 @@ export default { selectedAnnotations: Array, availableAnnotations: Array }, + events: ["annotation-selected", "annotation-unselected"], data() { return { includedTerms: [] @@ -126,13 +122,20 @@ export default { * @param term * @returns {boolean} */ - isClickable(term) { - return this.availableAnnotationIds.has(this.getId(term)) - && !this.selectedCategoryIds.has(getCategoryId(term)) - && !this.selectedAnnotationIds.has(this.getId(term)); + isSelectable(term) { + return !this.selectedCategoryIds.has(getCategoryId(term)) && !this.selectedAnnotationIds.has(this.getId(term)); + }, + isUnselectable(term) { + return this.selectedAnnotationIds.has(this.getId(term)); }, handleChipClick(term) { - this.$emit("chip-clicked", term); + if (this.isSelectable(term)) { + this.$emit("annotation-selected", term); + } else if (this.isUnselectable(term)) { + this.$emit("annotation-unselected", term); + } else { + console.warn(`Term ${term} cannot be unselected.`, term); + } }, getChipColor(objectClass) { return this.chipColorMap[objectClass] || "orange"; @@ -144,7 +147,19 @@ export default { updateTerms() { this.includedTerms = []; this.getTerms().then(terms => { - this.includedTerms = terms.sort((a, b) => OBJECT_CLASS_PRIORITY[a.objectClass] - OBJECT_CLASS_PRIORITY[b.objectClass]); + // we don't display the same term from different object classes + let seenIds = new Set(); + this.includedTerms = terms + .sort((a, b) => OBJECT_CLASS_PRIORITY[a.objectClass] - OBJECT_CLASS_PRIORITY[b.objectClass]) + .filter(term => { + let id = this.getId(term); + if (seenIds.has(id)) { + console.log("Skipped already seen term"); + return true; + } + seenIds.add(id); + return true; + }); }); } }, diff --git a/src/views/Browser.vue b/src/views/Browser.vue index 050eb1d..42ac645 100644 --- a/src/views/Browser.vue +++ b/src/views/Browser.vue @@ -70,7 +70,8 @@ :selected-categories="searchSettings.categories" :selected-annotations="searchSettings.annotations" :available-annotations="datasetsAnnotations" - @chip-clicked="handleChipClicked"> + @annotation-selected="selectTerm" + @annotation-unselected="unselectTerm"/>