fixing OntologySunburst.vue

Author: prakhyatox

src/components/Ontologies/OntologySunburst.vue

@@ -1,35 +1,20 @@
 <template>
   <div class="highcharts-wrapper">
-    <highcharts v-if="!loadingData" :options="sunburstOptions" />
+    <highcharts
+      v-if="!loadingData && isBrowser && modulesReady"
+      :options="sunburstOptions"
+    />
   </div>
 </template>
 
 <script>
+import { defineAsyncComponent } from "vue";
 import { mapActions, mapGetters, mapState } from "vuex";
 import { useTheme } from "vuetify";
-import Highcharts from "highcharts";
-import Sunburst from "highcharts/modules/sunburst";
-import Exporting from "highcharts/modules/exporting";
-import { defineAsyncComponent } from "vue"; //Implement Sunburst module for Highcharts
-
-//Implement Sunburst module for Highcharts
-// check if Sunburst is a function, if not try .default
-if (typeof Sunburst === "function") {
-  Sunburst(Highcharts);
-} else if (typeof Sunburst.default === "function") {
-  Sunburst.default(Highcharts);
-}
-
-if (typeof Exporting === "function") {
-  Exporting(Highcharts);
-} else if (typeof Exporting.default === "function") {
-  Exporting.default(Highcharts);
-}
 
 export default {
   name: "OntologySunburst",
   components: {
-    // Register highcharts asynchronously so it bypasses Server-Side Compilation checks safely
     highcharts: defineAsyncComponent(() =>
       import("highcharts-vue").then(
         (module) => module.Chart || module.default.Chart || module,
@@ -46,6 +31,8 @@ export default {
   },
   data() {
     return {
+      isBrowser: false,
+      modulesReady: false,
       options: {
         chart: {
           borderWidth: 0,
@@ -56,12 +43,8 @@ export default {
             fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
           },
         },
-        credits: {
-          enabled: false,
-        },
-        breadcrumbs: {
-          enabled: false,
-        },
+        credits: { enabled: false },
+        breadcrumbs: { enabled: false },
         title: {
           text: "Subject Browser",
           style: { color: "#DD7920", fontSize: "26px", fontWeight: 500 },
@@ -79,16 +62,16 @@ export default {
             colors: [
               "white",
               this.theme.computedThemes.value.fairSharingTheme.colors
-                .subject_topLevel_3, // here
+                .subject_topLevel_3,
               "white",
               "white",
               this.theme.computedThemes.value.fairSharingTheme.colors
-                .subject_topLevel_1, // here
+                .subject_topLevel_1,
               "white",
               "white",
               "white",
               this.theme.computedThemes.value.fairSharingTheme.colors
-                .subject_topLevel_2, // here
+                .subject_topLevel_2,
             ],
             type: "sunburst",
             allowDrillToNode: true,
@@ -116,11 +99,7 @@ export default {
                 },
                 levelSize: { value: 2.3 },
               },
-              {
-                level: 2,
-                colorByPoint: true,
-                levelSize: { value: 3 },
-              },
+              { level: 2, colorByPoint: true, levelSize: { value: 3 } },
               {
                 level: 3,
                 colorVariation: { key: "brightness", to: -0.5 },
@@ -136,27 +115,9 @@ export default {
                 colorVariation: { key: "brightness", to: 0.5 },
                 levelSize: { value: 2 },
               },
-              {
-                level: 6,
-                colorVariation: {
-                  key: "brightness",
-                  to: 0.2,
-                },
-              },
-              {
-                level: 7,
-                colorVariation: {
-                  key: "brightness",
-                  to: 0.5,
-                },
-              },
-              {
-                level: 8,
-                colorVariation: {
-                  key: "brightness",
-                  to: 0.5,
-                },
-              },
+              { level: 6, colorVariation: { key: "brightness", to: 0.2 } },
+              { level: 7, colorVariation: { key: "brightness", to: 0.5 } },
+              { level: 8, colorVariation: { key: "brightness", to: 0.5 } },
             ],
           },
         ],
@@ -174,18 +135,12 @@ export default {
         },
       },
       exporting: {
-        enabled: true, // explicit enable
+        enabled: true,
         sourceWidth: 1500,
         sourceHeight: 1600,
         scale: 1,
         filename: "FAIRsharing Subject Sunburst",
-        buttons: {
-          contextButton: {
-            // You can customize the menu symbol or position here if needed
-            // symbol: 'menu',
-            // align: 'right',
-          },
-        },
+        buttons: { contextButton: {} },
       },
       subjectsArrList: [],
       nodeClicked: "",
@@ -196,15 +151,13 @@ export default {
       const _client = this;
       let options = { ..._client.options };
       options.series[0].data = _client.sunburstData;
-      /* istanbul ignore next */
       options.series[0].point = {
         events: {
           click: function () {
             _client.processClickEvent(this);
           },
         },
       };
-      /* istanbul ignore next */
       options.tooltip.formatter = function () {
         return _client.getTooltip(this.point);
       };
@@ -217,33 +170,47 @@ export default {
       "flattenedTree",
     ]),
   },
-  mounted() {
-    this.flattenedOriginalTree(this.tree);
+  async mounted() {
+    if (typeof window !== "undefined") {
+      this.isBrowser = true;
+
+      // 1. Await module initialization
+      const { default: Highcharts } = await import("highcharts");
+      const { default: Sunburst } = await import("highcharts/modules/sunburst");
+      const { default: Exporting } = await import(
+        "highcharts/modules/exporting"
+      );
+
+      if (typeof Sunburst === "function") {
+        Sunburst(Highcharts);
+      } else if (Sunburst && typeof Sunburst.default === "function") {
+        Sunburst.default(Highcharts);
+      }
+
+      if (typeof Exporting === "function") {
+        Exporting(Highcharts);
+      } else if (Exporting && typeof Exporting.default === "function") {
+        Exporting.default(Highcharts);
+      }
+
+      // 2. FIX: Flip flag strictly AFTER modules attach to Highcharts
+      this.modulesReady = true;
+    }
+
+    if (this.tree) {
+      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) {
+      if (!tree || !Array.isArray(tree)) return;
       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.name !== "Subject") {
         if (node.descendants_count === 0) {
@@ -258,8 +225,6 @@ export default {
           }
         }
 
-        //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 {
@@ -270,30 +235,25 @@ export default {
             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] &&
             selectedSubject[0]["children"] &&
             selectedSubject[0]["children"].length
           ) {
             selectedSubject[0]["hasChildren"] = true;
             selectedSubject[0]["isSunburst"] = true;
           }
 
-          this.$emit("subjectNode", selectedSubject);
+          if (selectedSubject[0]) {
+            this.$emit("subjectNode", selectedSubject);
+          }
         }
       }
     },
-
-    /**
-     * Get ToolTip
-     * @param point
-     * @return {boolean|string}
-     */
     getTooltip(point) {
       return point.name === "Subjects"
         ? false