#49 feat: graficos de provenance en columnas por nivel y aristas deduplicadas

src/components/provenance/provenance-vis.js

@@ -14,17 +14,49 @@ const COLORS = {
   junction: '#78909c',
 }
 
+const PRODUCT_SPACING = 110
+const COLUMN_X = {
+  product: -240,
+  junction: -120,
+  supplier: 0,
+  organization: 240,
+  municipality: 240,
+  department: 480,
+}
+
 export function toVisNodes (nodes) {
+  const products = nodes.filter(node => node.kind === 'product')
+  const productY = new Map()
+  products.forEach((node, index) => {
+    productY.set(node.entity.id, (index - (products.length - 1) / 2) * PRODUCT_SPACING)
+  })
   return nodes.map(node => {
     const color = COLORS[node.kind] || '#cfd8dc'
     const { image, ...rest } = node
     if (node.kind === 'junction') {
-      return { ...rest, shape: 'dot', color, size: 10, label: '' }
+      return {
+        ...rest,
+        shape: 'dot',
+        color,
+        size: 10,
+        label: '',
+        x: COLUMN_X.junction,
+        y: productY.get(node.entity.id),
+        fixed: { x: true, y: true },
+      }
     }
-    if (image) {
-      return { ...rest, image, shape: 'circularImage', borderWidth: 2 }
+    const base = image
+      ? { ...rest, image, shape: 'circularImage', borderWidth: 2 }
+      : { ...rest, shape: 'dot', color, borderWidth: 2 }
+    if (node.kind === 'product') {
+      return {
+        ...base,
+        x: COLUMN_X.product,
+        y: productY.get(node.entity.id),
+        fixed: { x: true, y: true },
+      }
     }
-    return { ...rest, shape: 'dot', color, borderWidth: 2 }
+    return { ...base, x: COLUMN_X[node.kind], fixed: { x: true, y: false } }
   })
 }