@kwirthmagnify/kwirth-plugin-status 0.2.4 → 0.2.5

package/front.js

@@ -178,6 +178,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 +206,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,
@@ -290,7 +296,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.5",
   "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,