@kwirthmagnify/kwirth-plugin-status 0.2.4 → 0.2.6

package/front.js

@@ -160,9 +160,25 @@
           */
           "elk.direction": "DOWN",
           "elk.spacing.nodeNode": "40",
-          "elk.layered.spacing.nodeNodeBetweenLayers": "110"
+          "elk.layered.spacing.nodeNodeBetweenLayers": "110",
+          /*
+              UN solo grafo, no uno por componente. De serie elk coloca cada componente conexo por
+              su cuenta y luego los apila: un par suelto como sugarless -> sugarless salia en su
+              propio bloque de dos filas, con su canal por ENCIMA de productores del bloque grande.
+          */
+          "elk.separateConnectedComponents": "false"
         },
-        children: nodos.map((n) => ({ id: n.id, width: 230, height: 56 })),
+        /*
+            Y la fila de cada nodo, fijada: productores en la primera capa, consumidores en la ultima.
+            Sin esto, un productor sin aristas (plugin:montag) es un nodo sin salidas y el layering
+            lo puede bajar con los consumidores.
+        */
+        children: nodos.map((n) => ({
+          id: n.id,
+          width: 230,
+          height: 56,
+          layoutOptions: { "elk.layered.layering.layerConstraint": n.data.esProductor ? "FIRST" : "LAST" }
+        })),
         edges: aristas.map((e) => ({ id: e.id, sources: [e.source], targets: [e.target] }))
       });
       const pos = {};
@@ -178,6 +194,7 @@
     const vueltas = import_react2.default.useRef({ inventario: inventory, n: 0 });
     if (vueltas.current.inventario !== inventory) vueltas.current = { inventario: inventory, n: vueltas.current.n + 1 };
     const frenada = `statusFrenada${vueltas.current.n % 2}`;
+    const nodosPintados = import_react2.default.useRef(/* @__PURE__ */ new Map());
     const [posiciones, setPosiciones] = import_react2.default.useState(void 0);
     const [seleccionado, setSeleccionado] = import_react2.default.useState(void 0);
     const colores = {
@@ -205,7 +222,12 @@
         ...productores.map((p) => ({
           id: p.id,
           position: { x: 0, y: 0 },
-          data: { label: p.displayName, esProductor: true, health: p.health, subscribers: p.subscribers, known: p.knownConsumers },
+          /*
+              SOLO lo que se pinta (o lo que usa el layout). Aquí llegaron a ir los suscriptores y la
+              salud sin que nadie los leyera, y como el nodo se rehace cuando cambia su data (ver
+              'colocados'), un contador que variaba entre fotos hacía parpadear nodos idénticos.
+          */
+          data: { label: p.displayName, esProductor: true },
           // Con el grafo en vertical, la arista tiene que salir por ABAJO y entrar por ARRIBA; si
           // no, React Flow las saca por los lados y los cables dan un rodeo absurdo.
           sourcePosition: import_react3.Position.Bottom,
@@ -246,15 +268,10 @@
         source: e.providerId,
         target: `channel:${e.channelId}`,
         /*
-                        QUIETA a propósito, aunque React Flow sepa animarlas.
-        
-                        Una línea en movimiento se lee como "por aquí está pasando algo ahora mismo", y eso no
-                        se sabe: lo único que dice esta arista es que la suscripción existe. Animarla sería el
-                        mismo error que poner un 0 donde no hay dato — parecería información y sería decoración.
-        
-                        Cuando los contadores de S4 midan caudal de verdad, el movimiento (o el grosor) podrá
-                        significar algo, y entonces se pone.
-                    */
+            Una línea en movimiento se lee como "por aquí está pasando algo ahora mismo", así que
+            solo se mueve cuando eso se ha MEDIDO (ver 'viva'). Quieta, lo único que dice es que la
+            suscripción existe. Cómo frena con auto-refresco está en el contenedor del ReactFlow.
+        */
         ...(() => {
           const tocaAlSeleccionado = Boolean(seleccionado) && (e.providerId === seleccionado || `channel:${e.channelId}` === seleccionado);
           const viva = active.has(e.providerId);
@@ -290,7 +307,15 @@
     if (!posiciones) {
       return /* @__PURE__ */ import_react2.default.createElement(import_material2.Box, { sx: { p: 3 } }, /* @__PURE__ */ import_react2.default.createElement(import_material2.Typography, { variant: "body2", color: "text.secondary" }, "Laying out the graph\u2026"));
     }
-    const colocados = nodos.map((n) => ({ ...n, position: posiciones[n.id] ?? { x: 0, y: 0 } }));
+    const colocados = nodos.map((n) => {
+      const position = posiciones[n.id] ?? { x: 0, y: 0 };
+      const firma = JSON.stringify([n.data, n.style, position]);
+      const previo = nodosPintados.current.get(n.id);
+      if (previo?.firma === firma) return previo.nodo;
+      const nodo = { ...n, position };
+      nodosPintados.current.set(n.id, { firma, nodo });
+      return nodo;
+    });
     return /* @__PURE__ */ import_react2.default.createElement(import_material2.Box, { sx: { height: "100%", display: "flex", flexDirection: "column", minHeight: 0 } }, /* @__PURE__ */ import_react2.default.createElement(import_material2.Stack, { direction: "row", spacing: 1, alignItems: "center", sx: { mb: 1 } }, /* @__PURE__ */ import_react2.default.createElement(import_material2.Typography, { variant: "caption", color: "text.secondary" }, "A line means ", /* @__PURE__ */ import_react2.default.createElement("b", null, "an active subscription"), ". A ", /* @__PURE__ */ import_react2.default.createElement("b", null, "moving line"), " means its producer is delivering right now \u2014 but not how much goes to each consumer: that is measured per component, not per line.", " ", "Click a node to highlight what it is connected to; click the background to clear.")), (anonimos > 0 || canalesSueltos > 0) && /* @__PURE__ */ import_react2.default.createElement(import_material2.Stack, { direction: "row", spacing: 1, sx: { mb: 1 } }, anonimos > 0 && /* @__PURE__ */ import_react2.default.createElement(
       import_material2.Chip,
       {

package/package.json

@@ -4,7 +4,7 @@
   "id": "status",
   "name": "@kwirthmagnify/kwirth-plugin-status",
   "displayName": "Kwirth Status",
-  "version": "0.2.4",
+  "version": "0.2.6",
   "description": "A look inside Kwirth: what is installed, how it is doing and who consumes what",
   "icon": "<svg viewBox='0 0 24 24'><g fill='none' stroke='currentColor' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='2.6' y='4.6' width='18.8' height='14.8' rx='2.2'/><path d='M6 12h2.6l1.5-3.4 2.6 6.8 1.5-3.4H18'/></g></svg>",
   "requiresRestart": false,