#49 feat: reemplazar cytoscape por vis-network con semantica de certeza en graficos de provenance

src/components/graph/CytoscapeChart.vue

@@ -1,75 +0,0 @@
-<template>
-  <div
-    ref="containerRef"
-    class="cytoscape-chart"
-    :style="{ height: `${height}px` }"
-  />
-</template>
-
-<script setup>
-  import { onBeforeUnmount, onMounted, ref, watch } from 'vue'
-  import cytoscape from 'cytoscape'
-
-  const props = defineProps({
-    elements: {
-      type: Array,
-      default: () => [],
-    },
-    styles: {
-      type: Array,
-      default: () => [],
-    },
-    layout: {
-      type: Object,
-      default: () => ({ name: 'preset' }),
-    },
-    height: {
-      type: Number,
-      default: 400,
-    },
-  })
-
-  const emit = defineEmits(['select'])
-
-  const containerRef = ref(null)
-  let cy = null
-
-  function runLayout () {
-    cy.layout(props.layout).run()
-  }
-
-  onMounted(() => {
-    cy = cytoscape({
-      container: containerRef.value,
-      elements: props.elements,
-      style: props.styles,
-      layout: props.layout,
-    })
-    cy.on('tap', 'node', event => {
-      emit('select', event.target.data())
-    })
-  })
-
-  watch(
-    () => props.elements,
-    elements => {
-      if (!cy) return
-      cy.elements().remove()
-      cy.add(elements)
-      runLayout()
-    },
-    { deep: true }
-  )
-
-  onBeforeUnmount(() => {
-    if (cy) cy.destroy()
-    cy = null
-  })
-</script>
-
-<style scoped>
-.cytoscape-chart {
-  width: 100%;
-  min-height: 200px;
-}
-</style>

src/components/graph/VisChart.vue

@@ -0,0 +1,127 @@
+<template>
+  <div
+    ref="containerRef"
+    class="vis-chart"
+    :style="{ height: `${height}px` }"
+  />
+</template>
+
+<script setup>
+  import { onBeforeUnmount, onMounted, ref, watch } from 'vue'
+  import { DataSet, Network } from 'vis-network/standalone'
+
+  const props = defineProps({
+    nodes: {
+      type: Array,
+      default: () => [],
+    },
+    edges: {
+      type: Array,
+      default: () => [],
+    },
+    height: {
+      type: Number,
+      default: 400,
+    },
+    options: {
+      type: Object,
+      default: () => ({}),
+    },
+  })
+
+  const emit = defineEmits(['select'])
+
+  const containerRef = ref(null)
+  let network = null
+  let nodesDataSet = null
+
+  const BASE_OPTIONS = {
+    autoResize: true,
+    interaction: {
+      hover: true,
+      tooltipDelay: 150,
+    },
+    physics: {
+      enabled: true,
+      stabilization: { enabled: true, iterations: 800 },
+      barnesHut: {
+        gravitationalConstant: -5000,
+        springLength: 140,
+        springConstant: 0.05,
+      },
+    },
+    nodes: {
+      shape: 'dot',
+      size: 24,
+      borderWidth: 2,
+      font: {
+        face: 'sans-serif',
+        size: 13,
+        color: '#263238',
+        strokeWidth: 4,
+        strokeColor: '#ffffff',
+      },
+    },
+    edges: {
+      smooth: { enabled: true, type: 'dynamic' },
+      arrows: { to: { enabled: true, scaleFactor: 0.6 } },
+      color: { color: '#b0bec5', highlight: '#546e7a', hover: '#90a4ae' },
+      width: 2,
+    },
+    layout: { improvedLayout: true },
+  }
+
+  function mergeOptions () {
+    return {
+      ...BASE_OPTIONS,
+      ...props.options,
+      nodes: { ...BASE_OPTIONS.nodes, ...(props.options.nodes || {}) },
+      edges: { ...BASE_OPTIONS.edges, ...(props.options.edges || {}) },
+      physics: { ...BASE_OPTIONS.physics, ...(props.options.physics || {}) },
+      interaction: { ...BASE_OPTIONS.interaction, ...(props.options.interaction || {}) },
+    }
+  }
+
+  function render (nodes, edges) {
+    nodesDataSet = new DataSet(nodes)
+    network.setData({ nodes: nodesDataSet, edges: new DataSet(edges) })
+  }
+
+  onMounted(() => {
+    network = new Network(containerRef.value, { nodes: [], edges: [] }, mergeOptions())
+    render(props.nodes, props.edges)
+
+    network.on('click', params => {
+      const id = params.nodes?.[0]
+      if (id === undefined) return
+      const node = nodesDataSet.get(id)
+      if (node) emit('select', node)
+    })
+
+    network.once('stabilizationIterationsDone', () => {
+      network.setOptions({ physics: { enabled: false } })
+      network.fit()
+    })
+  })
+
+  watch(
+    () => [props.nodes, props.edges],
+    ([nodes, edges]) => {
+      if (!network) return
+      render(nodes, edges)
+    },
+    { deep: true }
+  )
+
+  onBeforeUnmount(() => {
+    if (network) network.destroy()
+    network = null
+  })
+</script>
+
+<style scoped>
+.vis-chart {
+  width: 100%;
+  min-height: 200px;
+}
+</style>

src/components/provenance/ProductSupplierOrganizationChart.vue

@@ -10,13 +10,13 @@
       disponible próximamente.
     </v-alert>
 
-    <CytoscapeChart
+    <VisChart
       v-else
       data-test="supplier-org-chart"
-      :elements="elements"
+      :edges="visEdges"
       :height="height"
-      :layout="layout"
-      :styles="styles"
+      :nodes="visNodes"
+      :options="chartOptions"
       @select="onSelect"
     />
 
@@ -30,10 +30,10 @@
 
 <script setup>
   import { computed, ref } from 'vue'
-  import CytoscapeChart from '@/components/graph/CytoscapeChart.vue'
-  import { toCytoscapeElements } from '@/services/graph/graph-layout'
+  import VisChart from '@/components/graph/VisChart.vue'
   import ProvenanceDetailModal from './ProvenanceDetailModal.vue'
   import { buildSupplierOrganizationGraph, hasAnySupplier } from './provenance-graph'
+  import { chartOptions, toVisEdges, toVisNodes } from './provenance-vis'
 
   const props = defineProps({
     provenance: {
@@ -44,53 +44,16 @@
 
   const graph = computed(() => buildSupplierOrganizationGraph(props.provenance))
   const hasRelations = computed(() => hasAnySupplier(props.provenance))
-  const elements = computed(() => toCytoscapeElements(graph.value))
-  const height = computed(() => graph.value.height + 60)
+  const visNodes = computed(() => toVisNodes(graph.value.nodes))
+  const visEdges = computed(() => toVisEdges(graph.value.edges))
+  const height = computed(() => Math.max(280, Math.min(560, graph.value.nodes.length * 72)))
 
   const selected = ref(null)
   const modalVisible = ref(false)
 
-  const styles = [
-    {
-      selector: 'node',
-      style: {
-        'background-color': '#cfd8dc',
-        'border-color': '#90a4ae',
-        'border-width': 1,
-        color: '#263238',
-        'font-size': 12,
-        'font-family': 'sans-serif',
-        content: 'data(label)',
-        'text-valign': 'bottom',
-        'text-halign': 'center',
-        'text-wrap': 'wrap',
-        'text-max-width': 110,
-        shape: 'round-rectangle',
-        width: 120,
-        height: 40,
-        padding: 6,
-      },
-    },
-    { selector: 'node.product', style: { 'background-color': '#26a69a', 'border-color': '#00796b' } },
-    { selector: 'node.supplier', style: { 'background-color': '#42a5f5', 'border-color': '#1565c0' } },
-    { selector: 'node.organization', style: { 'background-color': '#ffb74d', 'border-color': '#e65100' } },
-    { selector: 'node.has-image', style: { 'background-image': 'data(image)', 'background-fit': 'cover', 'background-clip': 'none', 'text-background-color': '#ffffff', 'text-background-opacity': 0.85, 'text-background-padding': 2 } },
-    {
-      selector: 'edge',
-      style: {
-        'curve-style': 'bezier',
-        'target-arrow-shape': 'triangle',
-        'target-arrow-color': '#90a4ae',
-        'line-color': '#90a4ae',
-        width: 2,
-      },
-    },
-  ]
-
-  const layout = { name: 'preset' }
-
-  function onSelect (nodeData) {
-    selected.value = nodeData
+  function onSelect (node) {
+    if (!node || node.kind === 'junction') return
+    selected.value = node
     modalVisible.value = true
   }
 </script>

src/components/provenance/ProductTerritoryChart.vue

@@ -10,13 +10,13 @@
       disponible próximamente.
     </v-alert>
 
-    <CytoscapeChart
+    <VisChart
       v-else
       data-test="territory-chart"
-      :elements="elements"
+      :edges="visEdges"
       :height="height"
-      :layout="layout"
-      :styles="styles"
+      :nodes="visNodes"
+      :options="chartOptions"
       @select="onSelect"
     />
 
@@ -30,10 +30,10 @@
 
 <script setup>
   import { computed, ref } from 'vue'
-  import CytoscapeChart from '@/components/graph/CytoscapeChart.vue'
-  import { toCytoscapeElements } from '@/services/graph/graph-layout'
+  import VisChart from '@/components/graph/VisChart.vue'
   import ProvenanceDetailModal from './ProvenanceDetailModal.vue'
   import { buildTerritoryGraph, hasAnyTerritory } from './provenance-graph'
+  import { chartOptions, toVisEdges, toVisNodes } from './provenance-vis'
 
   const props = defineProps({
     provenance: {
@@ -44,55 +44,16 @@
 
   const graph = computed(() => buildTerritoryGraph(props.provenance))
   const hasRelations = computed(() => hasAnyTerritory(props.provenance))
-  const elements = computed(() => toCytoscapeElements(graph.value))
-  const height = computed(() => graph.value.height + 60)
+  const visNodes = computed(() => toVisNodes(graph.value.nodes))
+  const visEdges = computed(() => toVisEdges(graph.value.edges))
+  const height = computed(() => Math.max(280, Math.min(560, graph.value.nodes.length * 72)))
 
   const selected = ref(null)
   const modalVisible = ref(false)
 
-  const styles = [
-    {
-      selector: 'node',
-      style: {
-        'background-color': '#cfd8dc',
-        'border-color': '#90a4ae',
-        'border-width': 1,
-        color: '#263238',
-        'font-size': 12,
-        'font-family': 'sans-serif',
-        content: 'data(label)',
-        'text-valign': 'bottom',
-        'text-halign': 'center',
-        'text-wrap': 'wrap',
-        'text-max-width': 110,
-        shape: 'round-rectangle',
-        width: 120,
-        height: 40,
-        padding: 6,
-      },
-    },
-    { selector: 'node.product', style: { 'background-color': '#26a69a', 'border-color': '#00796b' } },
-    { selector: 'node.supplier', style: { 'background-color': '#42a5f5', 'border-color': '#1565c0' } },
-    { selector: 'node.municipality', style: { 'background-color': '#66bb6a', 'border-color': '#2e7d32' } },
-    { selector: 'node.department', style: { 'background-color': '#5c6bc0', 'border-color': '#283593' } },
-    { selector: 'node.country', style: { 'background-color': '#ab47bc', 'border-color': '#6a1b9a' } },
-    { selector: 'node.has-image', style: { 'background-image': 'data(image)', 'background-fit': 'cover', 'background-clip': 'none', 'text-background-color': '#ffffff', 'text-background-opacity': 0.85, 'text-background-padding': 2 } },
-    {
-      selector: 'edge',
-      style: {
-        'curve-style': 'bezier',
-        'target-arrow-shape': 'triangle',
-        'target-arrow-color': '#90a4ae',
-        'line-color': '#90a4ae',
-        width: 2,
-      },
-    },
-  ]
-
-  const layout = { name: 'preset' }
-
-  function onSelect (nodeData) {
-    selected.value = nodeData
+  function onSelect (node) {
+    if (!node || node.kind === 'junction') return
+    selected.value = node
     modalVisible.value = true
   }
 </script>

src/components/provenance/provenance-graph.js

@@ -2,14 +2,17 @@
  * Builders de grafos de provenance (específicos del dominio).
  *
  * Convierten el payload `product_provenance` del resumen de compra/pedido en
- * un grafo en capas usando el servicio genérico `services/graph/graph-layout`.
+ * un grafo con la semántica de certeza:
+ *   - Arista cierta (continua): el destino es inequívoco.
+ *   - Arista dudosa (discontinua): el destino es una posibilidad entre varias.
+ *   - Con varios proveedores para un producto se inserta un nodo de disyunción
+ *     (junction): sólida hasta él y discontinua hacia cada proveedor.
+ *
+ * El modelo devuelto es agnóstico de la herramienta de renderizado:
+ *   node: { id, kind, label, image, entity }
+ *   edge: { from, to, certain }
  */
 
-import { computeColumnLayout } from '@/services/graph/graph-layout'
-
-const SUPPLIER_ORG_COLUMNS = { product: 0, supplier: 1, organization: 2 }
-const TERRITORY_COLUMNS = { product: 0, supplier: 1, municipality: 2, department: 3, country: 4 }
-
 function makeCollector () {
   const nodes = []
   const edges = []
@@ -23,7 +26,7 @@ function makeCollector () {
         const node = {
           id,
           kind,
-          label: entity.name,
+          label: entity.name || '',
           image: entity.catalogue_images?.[0] || null,
           entity: { ...entity, kind },
         }
@@ -32,63 +35,89 @@ function makeCollector () {
       }
       return seen.get(id)
     },
-    addEdge (from, to) {
-      edges.push({ from, to })
+    addEdge (from, to, certain) {
+      edges.push({ from, to, certain: Boolean(certain) })
     },
   }
 }
 
-function layout (collector, columns) {
-  return computeColumnLayout(collector.nodes, collector.edges, {
-    columnOf: node => columns[node.kind] ?? 0,
-    columnWidth: 220,
-    rowHeight: 72,
-    padding: 24,
-  })
+function distinctValues (items) {
+  const seen = new Map()
+  for (const item of items) {
+    if (item && !seen.has(item.id)) seen.set(item.id, item)
+  }
+  return [...seen.values()]
+}
+
+function connectSuppliers (collector, product, relations) {
+  if (relations.length === 1) {
+    const supplier = collector.addNode('supplier', relations[0].supplier)
+    collector.addEdge(product.id, supplier.id, true)
+    return
+  }
+  const junction = collector.addNode('junction', { id: product.entity.id, name: '' })
+  collector.addEdge(product.id, junction.id, true)
+  for (const rel of relations) {
+    const supplier = collector.addNode('supplier', rel.supplier)
+    collector.addEdge(junction.id, supplier.id, false)
+  }
+}
+
+function isCertain (values) {
+  return values.length <= 1
 }
 
 export function buildSupplierOrganizationGraph (provenance) {
-  const g = makeCollector()
+  const collector = makeCollector()
   for (const entry of provenance || []) {
     if (!entry.product) continue
-    const product = g.addNode('product', entry.product)
-    for (const rel of entry.suppliers || []) {
-      if (!rel.supplier) continue
-      const supplier = g.addNode('supplier', rel.supplier)
-      g.addEdge(product.id, supplier.id)
-      if (rel.organization) {
-        const organization = g.addNode('organization', rel.organization)
-        g.addEdge(supplier.id, organization.id)
-      }
+    const product = collector.addNode('product', entry.product)
+    const relations = (entry.suppliers || []).filter(rel => rel.supplier)
+    if (relations.length === 0) continue
+    connectSuppliers(collector, product, relations)
+
+    const organizationCertain = isCertain(distinctValues(relations.map(rel => rel.organization)))
+    for (const rel of relations) {
+      if (!rel.organization) continue
+      const organization = collector.addNode('organization', rel.organization)
+      collector.addEdge(`supplier:${rel.supplier.id}`, organization.id, organizationCertain)
     }
   }
-  return layout(g, SUPPLIER_ORG_COLUMNS)
+  return { nodes: collector.nodes, edges: collector.edges }
 }
 
 export function buildTerritoryGraph (provenance) {
-  const g = makeCollector()
+  const collector = makeCollector()
   for (const entry of provenance || []) {
     if (!entry.product) continue
-    const product = g.addNode('product', entry.product)
-    for (const rel of entry.suppliers || []) {
-      if (!rel.supplier) continue
-      const supplier = g.addNode('supplier', rel.supplier)
-      g.addEdge(product.id, supplier.id)
-      if (rel.municipality) {
-        const municipality = g.addNode('municipality', rel.municipality)
-        g.addEdge(supplier.id, municipality.id)
-        if (rel.department) {
-          const department = g.addNode('department', rel.department)
-          g.addEdge(municipality.id, department.id)
-          if (rel.country) {
-            const country = g.addNode('country', rel.country)
-            g.addEdge(department.id, country.id)
-          }
-        }
-      }
+    const product = collector.addNode('product', entry.product)
+    const relations = (entry.suppliers || []).filter(rel => rel.supplier)
+    if (relations.length === 0) continue
+    connectSuppliers(collector, product, relations)
+
+    const municipalityCertain = isCertain(distinctValues(relations.map(rel => rel.municipality)))
+    const departmentCertain = isCertain(distinctValues(relations.map(rel => rel.department)))
+    const countryCertain = isCertain(distinctValues(relations.map(rel => rel.country)))
+
+    for (const rel of relations) {
+      if (!rel.municipality) continue
+      const municipality = collector.addNode('municipality', rel.municipality)
+      collector.addEdge(`supplier:${rel.supplier.id}`, municipality.id, municipalityCertain)
+    }
+    for (const rel of relations) {
+      if (!rel.municipality || !rel.department) continue
+      const municipality = collector.addNode('municipality', rel.municipality)
+      const department = collector.addNode('department', rel.department)
+      collector.addEdge(municipality.id, department.id, departmentCertain)
+    }
+    for (const rel of relations) {
+      if (!rel.department || !rel.country) continue
+      const department = collector.addNode('department', rel.department)
+      const country = collector.addNode('country', rel.country)
+      collector.addEdge(department.id, country.id, countryCertain)
     }
   }
-  return layout(g, TERRITORY_COLUMNS)
+  return { nodes: collector.nodes, edges: collector.edges }
 }
 
 export function hasAnySupplier (provenance) {

src/components/provenance/provenance-vis.js

@@ -0,0 +1,45 @@
+/**
+ * Adapta el modelo de grafo de provenance ({ id, kind, label, image, entity }
+ * y { from, to, certain }) al formato de vis-network, incluyendo la semántica
+ * de certeza: arista cierta = sólida, arista dudosa = discontinua.
+ */
+
+const COLORS = {
+  product: '#26a69a',
+  supplier: '#42a5f5',
+  organization: '#ffb74d',
+  municipality: '#66bb6a',
+  department: '#5c6bc0',
+  country: '#ab47bc',
+  junction: '#78909c',
+}
+
+export function toVisNodes (nodes) {
+  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: '' }
+    }
+    if (image) {
+      return { ...rest, image, shape: 'circularImage', borderWidth: 2 }
+    }
+    return { ...rest, shape: 'dot', color, borderWidth: 2 }
+  })
+}
+
+export function toVisEdges (edges) {
+  return edges.map(edge => ({
+    from: edge.from,
+    to: edge.to,
+    dashes: !edge.certain,
+  }))
+}
+
+export const chartOptions = {
+  nodes: { font: { size: 13, color: '#263238' } },
+  edges: { color: { color: '#546e7a' } },
+  physics: {
+    barnesHut: { gravitationalConstant: -4000, springLength: 120, springConstant: 0.02 },
+  },
+}

src/services/graph/graph-layout.js

@@ -1,76 +0,0 @@
-/**
- * Servicio genérico de grafos en capas (columnas).
- *
- * Provee un layout determinista por columnas (un tipo por columna) y un
- * adaptador al formato `elements` de cytoscape.js. No conoce el dominio
- * (provenance, organigrama, etc.), solo el modelo de grafo:
- *   node: { id, kind, label, image?, entity? }
- *   edge: { from, to }  (ids de los nodos)
- */
-
-const DEFAULTS = {
-  columnWidth: 220,
-  rowHeight: 64,
-  padding: 24,
-}
-
-function groupByColumn (nodes, columnOf) {
-  const columns = {}
-  for (const node of nodes) {
-    const column = columnOf(node) ?? 0
-    if (!columns[column]) columns[column] = []
-    columns[column].push(node)
-  }
-  return columns
-}
-
-export function computeColumnLayout (nodes, edges, options = {}) {
-  const { columnOf, columnWidth = DEFAULTS.columnWidth, rowHeight = DEFAULTS.rowHeight, padding = DEFAULTS.padding } = options
-  const columns = groupByColumn(nodes, columnOf)
-  const columnKeys = Object.keys(columns).map(Number)
-  const maxColumn = columnKeys.length > 0 ? Math.max(...columnKeys) : 0
-  const maxRows = columnKeys.length > 0 ? Math.max(...columnKeys.map(c => columns[c].length)) : 0
-
-  const positionedNodes = nodes.map(node => {
-    const column = columnOf(node) ?? 0
-    const index = columns[column].indexOf(node)
-    return {
-      ...node,
-      x: padding + column * columnWidth + columnWidth / 2,
-      y: padding + index * rowHeight + rowHeight / 2,
-    }
-  })
-
-  return {
-    nodes: positionedNodes,
-    edges,
-    width: padding * 2 + (maxColumn + 1) * columnWidth,
-    height: padding * 2 + maxRows * rowHeight,
-  }
-}
-
-export function toCytoscapeElements ({ nodes, edges }) {
-  return [
-    ...nodes.map(node => {
-      const classes = node.image ? [node.kind, 'has-image'] : [node.kind]
-      return {
-        data: {
-          id: node.id,
-          kind: node.kind,
-          label: node.label,
-          image: node.image || null,
-          entity: node.entity || null,
-        },
-        classes,
-        position: { x: node.x, y: node.y },
-      }
-    }),
-    ...edges.map(edge => ({
-      data: {
-        id: `edge:${edge.from}:${edge.to}`,
-        source: edge.from,
-        target: edge.to,
-      },
-    })),
-  ]
-}