fixing behaviour of Sunburst with subject list

Author: prakhyatox

src/components/Ontologies/OntologySunburst.vue

@@ -18,6 +18,10 @@ if (typeof Sunburst === "function") {
 
 export default {
   name: "OntologySunburst",
+  props: {
+    itemClicked: { default: null, type: Object },
+  },
+  emits: ["subjectNode"],
   setup() {
     const theme = useTheme();
     return { theme };
@@ -142,6 +146,8 @@ export default {
           filename: "SRAO-Sunburst",
         },
       },
+      subjectsArrList: [],
+      nodeClicked: "",
     };
   },
   computed: {
@@ -163,29 +169,90 @@ export default {
       };
       return options;
     },
-    ...mapState("ontologyBrowser", ["sunburstData", "loadingData", "tree"]),
+    ...mapState("ontologyBrowser", [
+      "sunburstData",
+      "loadingData",
+      "tree",
+      "flattenedTree",
+    ]),
+  },
+  mounted() {
+    this.flattenedOriginalTree(this.tree);
   },
   methods: {
+    /**
+     * Recursively flattens a hierarchical tree structure into a single array of nodes.
+     * Each node is added to the `subjectsArrList` array. If a node has children,
+     * the method is called recursively on the children.
+     *
+     * @param {Array<Object>} tree - The hierarchical tree structure to be flattened. Each node may have a `children` property containing an array of child nodes.
+     * @return {void} This method does not return a value. It modifies the `subjectsArrList` array in place.
+     */
+    flattenedOriginalTree(tree) {
+      tree.forEach((item) => {
+        this.subjectsArrList.push(item);
+        if (item["children"] && item["children"].length) {
+          this.flattenedOriginalTree(item["children"]);
+        }
+      });
+    },
+
+    /**
+     * Handles click events on a node and performs routing or emits a selected subject node to the parent component.
+     *
+     * @param {Object} node - The node object that was clicked. This object contains properties such as `descendants_count`,`name`, `identifier`, and `ancestors` which are used in processing the click event.
+     * @return {void} This method does not return any value. It performs routing or emits an event based on the clicked node.
+     */
     processClickEvent(node) {
-      if (node.descendants_count === 0) {
-        let currentTerm = this.$route.query.term
-          ? decodeURIComponent(this.$route.query.term)
-          : null;
-        if (!currentTerm || currentTerm !== node.name) {
-          this.$router.push({
-            path: this.$route.path,
-            query: { term: encodeURIComponent(node.name) },
-          });
+      if (node.name !== "Subject") {
+        if (node.descendants_count === 0) {
+          let currentTerm = this.$route.query.term
+            ? decodeURIComponent(this.$route.query.term)
+            : null;
+          if (!currentTerm || currentTerm !== node.name) {
+            this.$router.push({
+              path: this.$route.path,
+              query: { term: encodeURIComponent(node.name) },
+            });
+          }
         }
-      } else {
-        if (node.name !== "Subject") {
-          let ancestors = this.getAncestors()(node.identifier);
-          if (node["innerArcLength"] === 0)
-            ancestors = ancestors.concat(node.id);
-          this.openTerms(ancestors);
+
+        //If the node is clicked for the first time emit node, if the same node is clicked second time while it is active this means that node was already open.
+        //Hence it's ancestor should be passed.
+        if (node["ancestors"] && !node["ancestors"].length) {
+          this.$emit("subjectNode", []);
+        } else {
+          if (this.nodeClicked !== node["identifier"]) {
+            this.nodeClicked = node["identifier"];
+          } else {
+            let nodeAncestor = node["ancestors"].pop();
+            this.nodeClicked = nodeAncestor;
+          }
+
+          //Filter the selected subject from the arrayList and emit to the parent component
+          let selectedSubject = this.subjectsArrList.filter(
+            (n) => n.identifier === this.nodeClicked,
+          );
+
+          //Adding key-value pair
+          if (
+            selectedSubject[0]["children"] &&
+            selectedSubject[0]["children"].length
+          ) {
+            selectedSubject[0]["hasChildren"] = true;
+            selectedSubject[0]["isSunburst"] = true;
+          }
+
+          this.$emit("subjectNode", selectedSubject);
         }
       }
     },
+
+    /**
+     * Get ToolTip
+     * @param point
+     * @return {boolean|string}
+     */
     getTooltip(point) {
       return point.name === "Subjects"
         ? false

src/components/Ontologies/TermDetails.vue

@@ -5,7 +5,7 @@
       <v-chip
         :class="`text-${color} border-${color} border border-solid border-opacity-100 mb-3 cursor-pointer bg-white`"
         variant="elevated"
-        @click="$router.push({ path: '/browse/subject' })"
+        @click="backToGraph()"
       >
         <v-icon :class="`text-${color}`"> fas fa-arrow-left</v-icon>
         <span :class="`text-${color} ml-3`"> GO BACK TO GRAPH </span>
@@ -157,6 +157,7 @@ export default {
   components: { Icon, StatusPills },
   mixins: [stringUtils],
   props: { selectedOntology: { required: true, type: String } },
+  emits: ["clearSelection"],
   data() {
     return {
       headers: [
@@ -215,7 +216,16 @@ export default {
       "getCurrentPage",
       "getAncestors",
     ]),
-    ...mapActions("ontologyBrowser", ["fetchNewPage", "changePerPage"]),
+    ...mapActions("ontologyBrowser", [
+      "fetchNewPage",
+      "changePerPage",
+      "openTerms",
+    ]),
+    backToGraph() {
+      this.$emit("clearSelection", true);
+      this.openTerms([]);
+      this.$router.push({ path: "/browse/subject" });
+    },
   },
 };
 </script>

src/store/ontologyBrowser.js

@@ -62,8 +62,7 @@ export const actions = {
     if (!term || state.activeTerms.includes(term.identifier)) {
       commit("resetActiveTerms");
       commit("resetSelectedTerm");
-    }
-    else {
+    } else {
       await dispatch("fetchRecords", term.name);
       commit("setActiveTerms", [term.identifier]);
       commit("setSelectedTerm", term);
@@ -153,21 +152,21 @@ export const mutations = {
 export const getters = {
   getAncestors:
     (state) =>
-      (value, field = "id") => {
-        let ancestors = [];
-        state.flattenedTree
-          .filter((obj) => obj["name"] === value["name"])
-          .forEach((node) => {
-            node.ancestors.forEach((ancestorID) => {
-              state.flattenedTree
-                .filter((obj) => obj.identifier === ancestorID)
-                .forEach((ancestor) => {
-                  ancestors.push(ancestor[field]);
-                });
-            });
+    (value, field = "id") => {
+      let ancestors = [];
+      state.flattenedTree
+        .filter((obj) => obj["name"] === value["name"])
+        .forEach((node) => {
+          node.ancestors.forEach((ancestorID) => {
+            state.flattenedTree
+              .filter((obj) => obj.identifier === ancestorID)
+              .forEach((ancestor) => {
+                ancestors.push(ancestor[field]);
+              });
           });
-        return [...new Set(ancestors)];
-      },
+        });
+      return [...new Set(ancestors)];
+    },
   getCurrentPage: (state) => {
     return state.pagination.page;
   },

src/views/Browsers/OntologyBrowser.vue

@@ -100,10 +100,11 @@
             <TermDetails
               v-if="records && selectedTerm"
               :selected-ontology="selectedOntology"
+              @clear-selection="noSelection"
             />
             <v-card v-else class="pa-0" flat>
               <v-card-text class="pa-0">
-                <OntologySunburst />
+                <OntologySunburst @subject-node="subjectNode" />
               </v-card-text>
             </v-card>
           </div>
@@ -153,6 +154,7 @@ export default {
       "pagination",
       "selectedTerm",
     ]),
+
     selectedOntology() {
       return this.$route.params.id;
     },
@@ -270,8 +272,7 @@ export default {
         });
 
         this.openTerms(Array.from(parentsToOpen));
-      }
-      else {
+      } else {
         await this.activateTerms();
       }
     },
@@ -284,7 +285,6 @@ export default {
         this.openTerms([]);
         return;
       }
-
       // CASE 2: Active Search
       const targetId = newTerm.identifier || newTerm;
       const strTargetId = String(targetId);
@@ -299,7 +299,14 @@ export default {
         path.forEach((id) => {
           // Add ID to open set ONLY if it is NOT the target itself
           // (We want the parents open, but the target closed)
-          if (String(id) !== strTargetId) {
+          if (
+            String(id) !== strTargetId &&
+            !Object.keys(newTerm).includes("isSunburst")
+          ) {
+            allIdsToOpen.add(String(id));
+          }
+          //Target is open because the selection is from Sunburst
+          else if (newTerm["isSunburst"]) {
             allIdsToOpen.add(String(id));
           }
         });
@@ -320,8 +327,7 @@ export default {
         if (index !== -1) {
           if (this.$refs.virtualScroll.scrollToIndex) {
             this.$refs.virtualScroll.scrollToIndex(index);
-          }
-          else {
+          } else {
             // Fallback: 50px is the estimated item height
             this.$refs.virtualScroll.$el.scrollTop = index * 50;
           }
@@ -344,11 +350,15 @@ export default {
       "openTerms",
       "leavePage",
     ]),
+
     /**
-     * Give the result of the term selected
-     * @param term
+     * Searches for a term and updates the route based on its presence in the active terms list.
+     *
+     * @param {Object} term - The term object to be searched.
+     * @param {string} term.identifier - The unique identifier of the term.
+     * @param {string} term.name - The name of the term to encode and include in the query parameters if not already active.
+     * @return {void} This method does not return a value.
      */
-
     searchTerm(term) {
       this.resetPagination();
       if (this.activeTerms.includes(term.identifier))
@@ -386,6 +396,15 @@ export default {
       return results;
     },
 
+    /**
+     * Toggles the open or closed state of a node in the hierarchy.
+     * Updates the list of currently opened nodes based on the given item's identifier.
+     *
+     * @param {Object} item - The node object to be toggled.
+     * @param {boolean} item.hasChildren - Indicates if the node has child items.
+     * @param {number|string} item.identifier - The unique identifier of the node.
+     * @return {void} This method does not return a value.
+     */
     toggleNode(item) {
       if (!item.hasChildren) return;
 
@@ -398,16 +417,22 @@ export default {
       if (isOpen) {
         // Close: Remove strict match
         newOpened = newOpened.filter((id) => String(id) !== strId);
-      }
-      else {
+      } else {
         // Open: Add original ID
         newOpened.push(item.identifier);
       }
-
+      newOpened = newOpened.map((item) =>
+        typeof item === "string" ? Number(item) : item,
+      );
       this.openTerms(newOpened);
     },
 
-    // Prune logic that supports multiple matches
+    /**
+     * Prune logic that supports multiple matches
+     * @param nodes
+     * @param targetId
+     * @return {*[]}
+     */
     pruneTreeWithChildren(nodes, targetId) {
       const filtered = [];
       const strTarget = String(targetId);
@@ -444,12 +469,35 @@ export default {
 
     /**
      * SAFE CHECK: Checks if a node is open regardless of ID type (String/Number)
+     * @param identifier
+     * @return {*|boolean}
      */
     isOpen(identifier) {
       if (!this.openedTerms) return false;
       // Convert everything to String for comparison
       return this.openedTerms.map(String).includes(String(identifier));
     },
+
+    /**
+     * Updates the search property with the first element of the provided value array
+     * and calls the toggleNode method with the same element.
+     * @param {Array} value - An array where the first element is used to update the search property and passed to the toggleNode method.
+     * @return {void}
+     */
+    subjectNode(value) {
+      if (value && value.length) {
+        this.search = value[0];
+        this.toggleNode(value[0]);
+      } else {
+        this.search = null;
+      }
+    },
+
+    noSelection(value) {
+      if (value) {
+        this.search = null;
+      }
+    },
   },
 };
 </script>
@@ -458,6 +506,7 @@ export default {
 .subject_color--border {
   border: 1px solid #e67e22 !important;
 }
+
 .domain_color--border {
   border: 1px solid #712727 !important;
 }
@@ -493,9 +542,11 @@ export default {
 .col {
   flex-basis: initial !important;
 }
+
 .cursor-pointer {
   cursor: pointer !important;
 }
+
 .hover-bg:hover {
   background-color: rgba(0, 0, 0, 0.04);
 }