Fix - VueUiMolecule - Fix rendering issues when config updates dynamically

Author: graphieros

src/atoms/RecursiveCircles.vue

@@ -49,7 +49,7 @@
 </template>
 
 <script setup>
-import { toRef } from 'vue';
+import { ref, watch } from 'vue';
 
 const props = defineProps({
     color: {
@@ -62,39 +62,39 @@ const props = defineProps({
     },
     hoveredUid: {
         type: String,
-        default: null
+        default: null,
     },
     linkColor: {
         type: String,
         default: '#CCCCCC',
     },
     stroke: {
         type: String,
-        default: "#FFFFFF"
+        default: '#FFFFFF',
     },
     strokeHovered: {
         type: String,
-        default: '#000000'
+        default: '#000000',
     },
 });
 
-const emit = defineEmits(["click", 'hover']);
+const emit = defineEmits(['click', 'hover']);
 
 function click(node) {
-    emit('click', node)
+    emit('click', node);
 }
 
 function hover(node) {
-    emit('hover', node)
+    emit('hover', node);
 }
 
-const nodes = toRef(props, 'dataset');
+const nodes = ref([]);
 
-nodes.value.forEach((node) => {
-    if (node.nodes && node.nodes.length > 0) {
-        node.nodes.forEach((childNode) => {
-            childNode.ancestor = node;
-        });
-    }
-});
+watch(
+    () => props.dataset,
+    (newDataset) => {
+        nodes.value = newDataset || [];
+    },
+    { immediate: true }
+);
 </script>

src/atoms/RecursiveLabels.vue

@@ -1,34 +1,25 @@
 <template>
-    <template v-for="(node, i) in dataset">
+    <template v-for="(node, i) in nodes" :key="`level_${i}`">
         <template v-if="node.polygonPath && node.polygonPath.coordinates">
             <template v-for="(coordinate, index) in node.polygonPath.coordinates" :key="`node_${i}_${index}`">
-                <text
-                    data-cy="recursive-label"
-                    :x="coordinate.x" 
-                    :y="coordinate.y + node.circleRadius *2" 
-                    :fill="color"
-                    :font-size="node.circleRadius"
-                    text-anchor="middle"
-                    style="opacity:0.8; pointer-events: none;"
-                >
+                <text data-cy="recursive-label" :x="coordinate.x" :y="coordinate.y + node.circleRadius * 2"
+                    :fill="color" :font-size="node.circleRadius" text-anchor="middle"
+                    style="opacity: 0.8; pointer-events: none;">
                     {{ node.name }}
                 </text>
             </template>
+
             <template v-if="node.nodes && node.nodes.length > 0">
-                <RecursiveLabels 
-                    :dataset="node.nodes" 
-                    :color="color" 
-                    :hoveredUid="hoveredUid"
-                />
+                <RecursiveLabels :dataset="node.nodes" :color="color" :hoveredUid="hoveredUid" />
             </template>
         </template>
     </template>
 </template>
 
 <script setup>
-import { toRef } from 'vue';
+import { ref, watch } from 'vue';
 
-const emit = defineEmits(["zoom", 'hover']);
+const emit = defineEmits(['zoom', 'hover']);
 
 const props = defineProps({
     color: {
@@ -41,17 +32,17 @@ const props = defineProps({
     },
     hoveredUid: {
         type: String,
-        default: null
+        default: null,
     },
 });
 
-const nodes = toRef(props, 'dataset');
+const nodes = ref([]);
 
-nodes.value.forEach((node) => {
-    if (node.nodes && node.nodes.length > 0) {
-        node.nodes.forEach((childNode) => {
-            childNode.ancestor = node;
-        });
-    }
-});
+watch(
+    () => props.dataset,
+    (newDataset) => {
+        nodes.value = newDataset || [];
+    },
+    { immediate: true }
+);
 </script>

src/atoms/RecursiveLinks.vue

@@ -1,7 +1,10 @@
 <template>
-  <template v-for="(node, i) in dataset">
+  <template v-for="(node, i) in nodes" :key="`level_${i}`">
     <template v-if="node.polygonPath && node.polygonPath.coordinates">
-      <template v-for="(coordinate, index) in node.polygonPath.coordinates" :key="`node_${i}_${index}`">
+      <template
+        v-for="(coordinate, index) in node.polygonPath.coordinates"
+        :key="`node_${i}_${index}`"
+      >
         <template v-if="node.ancestor && node.ancestor.polygonPath">
           <line
             data-cy="recursive-link-wrapper"
@@ -25,17 +28,22 @@
       </template>
     </template>
   </template>
-  <template v-for="node in dataset">
+  
+  <template v-for="node in nodes" :key="`children_${node.uid || node.name}`">
     <template v-if="node.polygonPath && node.polygonPath.coordinates">
       <template v-if="node.nodes && node.nodes.length > 0">
-        <RecursiveLinks :dataset="node.nodes" :color="color" :backgroundColor="backgroundColor"/>
+        <RecursiveLinks
+          :dataset="node.nodes"
+          :color="color"
+          :backgroundColor="backgroundColor"
+        />
       </template>
     </template>
   </template>
 </template>
 
 <script setup>
-import { toRef } from 'vue';
+import { ref, watch } from 'vue';
 
 const props = defineProps({
   dataset: {
@@ -48,18 +56,29 @@ const props = defineProps({
   },
   backgroundColor: {
     type: String,
-    default: '#FFFFFF'
-  }
+    default: '#FFFFFF',
+  },
 });
 
-const nodes = toRef(props, 'dataset');
+const nodes = ref([]);
+
+watch(
+  () => props.dataset,
+  (newDataset) => {
+    const data = newDataset || [];
 
-nodes.value.forEach((node) => {
-  if (node.nodes && node.nodes.length > 0) {
-    node.nodes.forEach((childNode) => {
-      childNode.ancestor = node;
+    data.forEach((node) => {
+      if (node.nodes && node.nodes.length > 0) {
+        node.nodes.forEach((childNode) => {
+          if (childNode.ancestor !== node) {
+            childNode.ancestor = node;
+          }
+        });
+      }
     });
-  }
-});
-</script>
 
+    nodes.value = data;
+  },
+  { immediate: true }
+);
+</script>