@kwirthmagnify/kwirth-plugin-status 0.2.3 → 0.2.5

package/front.js

@@ -172,8 +172,13 @@
       return filas();
     }
   };
-  var StatusDiagram = ({ inventory, active }) => {
+  var VELOCIDAD_INICIAL = 20;
+  var StatusDiagram = ({ inventory, active, autoRefresh }) => {
     const theme = (0, import_material2.useTheme)();
+    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 = {
@@ -201,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,
@@ -286,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,
       {
@@ -309,7 +327,25 @@
       },
       "& .react-flow__controls-button:hover": { background: theme.palette.action.hover },
       "& .react-flow__controls-button svg": { fill: theme.palette.text.primary },
-      "& .react-flow__attribution": { display: "none" }
+      "& .react-flow__attribution": { display: "none" },
+      /*
+                          Con auto-refresco, la línea viva arranca a la velocidad de serie y va FRENANDO hasta
+                          pararse justo cuando llega la siguiente foto: lo que se ha visto moverse es lo que
+                          pasó en ese intervalo, y la línea no sigue diciendo "ahora" cuando el dato ya es viejo.
+                          En manual no hay intervalo que agotar, así que se queda la animación continua de serie.
+      
+                          El recorrido sale de la curva: con ease-out cuadrática la velocidad inicial es 2·D/T,
+                          así que D = VELOCIDAD_INICIAL·T/2 arranca igual que la de serie, sin tirón.
+                      */
+      ...autoRefresh > 0 ? {
+        [`@keyframes ${frenada}`]: {
+          from: { strokeDashoffset: VELOCIDAD_INICIAL * autoRefresh / 2 },
+          to: { strokeDashoffset: 0 }
+        },
+        "& .react-flow__edge.animated path": {
+          animation: `${frenada} ${autoRefresh}s cubic-bezier(0.5, 1, 0.89, 1) 1 forwards`
+        }
+      } : {}
     } }, /* @__PURE__ */ import_react2.default.createElement(
       import_react3.ReactFlow,
       {
@@ -480,7 +516,7 @@
       /* @__PURE__ */ import_react4.default.createElement(import_material3.MenuItem, { value: 15 }, "Every 15s"),
       /* @__PURE__ */ import_react4.default.createElement(import_material3.MenuItem, { value: 30 }, "Every 30s"),
       /* @__PURE__ */ import_react4.default.createElement(import_material3.MenuItem, { value: 60 }, "Every minute")
-    ), /* @__PURE__ */ import_react4.default.createElement(import_material3.Tooltip, { title: "Take a new snapshot" }, /* @__PURE__ */ import_react4.default.createElement(import_material3.IconButton, { size: "small", onClick: refresh }, /* @__PURE__ */ import_react4.default.createElement(import_icons.Refresh, { fontSize: "small" })))), /* @__PURE__ */ import_react4.default.createElement(import_material3.Typography, { variant: "caption", color: "text.secondary", sx: { mb: 1 } }, "Snapshot taken at ", new Date(inventory.takenAt).toLocaleTimeString(), data.autoRefresh ? ` \u2014 refreshing every ${data.autoRefresh}s while this tab is open` : " \u2014 it does not refresh on its own", ".", " ", "Delivered counts since each component started; the rate is measured against your previous snapshot."), /* @__PURE__ */ import_react4.default.createElement(import_material3.Box, { ref: boxRef, sx: { display: "flex", flexDirection: "column", overflowY: vista === "table" ? "auto" : "hidden", overflowX: "hidden", width: "100%", flexGrow: 1, height: `calc(100vh - ${boxTop}px - 35px)` } }, vista === "graph" && /* @__PURE__ */ import_react4.default.createElement(StatusDiagram, { inventory, active: activos }), vista === "table" && /* @__PURE__ */ import_react4.default.createElement(import_material3.Table, { size: "small", stickyHeader: true }, /* @__PURE__ */ import_react4.default.createElement(import_material3.TableHead, null, /* @__PURE__ */ import_react4.default.createElement(import_material3.TableRow, null, /* @__PURE__ */ import_react4.default.createElement(import_material3.TableCell, null, "Kind"), /* @__PURE__ */ import_react4.default.createElement(import_material3.TableCell, null, "Name"), /* @__PURE__ */ import_react4.default.createElement(import_material3.TableCell, null, "State"), /* @__PURE__ */ import_react4.default.createElement(import_material3.TableCell, { align: "right" }, "Consumers"), /* @__PURE__ */ import_react4.default.createElement(import_material3.TableCell, { align: "right" }, "Delivered"), /* @__PURE__ */ import_react4.default.createElement(import_material3.TableCell, null, "Why"))), /* @__PURE__ */ import_react4.default.createElement(import_material3.TableBody, null, componentes.map(fila)))), data.signals.length > 0 && /* @__PURE__ */ import_react4.default.createElement(import_material3.Box, { sx: { mt: 1 } }, data.signals.map((s, i) => /* @__PURE__ */ import_react4.default.createElement(import_material3.Typography, { key: i, variant: "caption", color: "error", display: "block" }, s))));
+    ), /* @__PURE__ */ import_react4.default.createElement(import_material3.Tooltip, { title: "Take a new snapshot" }, /* @__PURE__ */ import_react4.default.createElement(import_material3.IconButton, { size: "small", onClick: refresh }, /* @__PURE__ */ import_react4.default.createElement(import_icons.Refresh, { fontSize: "small" })))), /* @__PURE__ */ import_react4.default.createElement(import_material3.Typography, { variant: "caption", color: "text.secondary", sx: { mb: 1 } }, "Snapshot taken at ", new Date(inventory.takenAt).toLocaleTimeString(), data.autoRefresh ? ` \u2014 refreshing every ${data.autoRefresh}s while this tab is open` : " \u2014 it does not refresh on its own", ".", " ", "Delivered counts since each component started; the rate is measured against your previous snapshot."), /* @__PURE__ */ import_react4.default.createElement(import_material3.Box, { ref: boxRef, sx: { display: "flex", flexDirection: "column", overflowY: vista === "table" ? "auto" : "hidden", overflowX: "hidden", width: "100%", flexGrow: 1, height: `calc(100vh - ${boxTop}px - 35px)` } }, vista === "graph" && /* @__PURE__ */ import_react4.default.createElement(StatusDiagram, { inventory, active: activos, autoRefresh: data.autoRefresh }), vista === "table" && /* @__PURE__ */ import_react4.default.createElement(import_material3.Table, { size: "small", stickyHeader: true }, /* @__PURE__ */ import_react4.default.createElement(import_material3.TableHead, null, /* @__PURE__ */ import_react4.default.createElement(import_material3.TableRow, null, /* @__PURE__ */ import_react4.default.createElement(import_material3.TableCell, null, "Kind"), /* @__PURE__ */ import_react4.default.createElement(import_material3.TableCell, null, "Name"), /* @__PURE__ */ import_react4.default.createElement(import_material3.TableCell, null, "State"), /* @__PURE__ */ import_react4.default.createElement(import_material3.TableCell, { align: "right" }, "Consumers"), /* @__PURE__ */ import_react4.default.createElement(import_material3.TableCell, { align: "right" }, "Delivered"), /* @__PURE__ */ import_react4.default.createElement(import_material3.TableCell, null, "Why"))), /* @__PURE__ */ import_react4.default.createElement(import_material3.TableBody, null, componentes.map(fila)))), data.signals.length > 0 && /* @__PURE__ */ import_react4.default.createElement(import_material3.Box, { sx: { mt: 1 } }, data.signals.map((s, i) => /* @__PURE__ */ import_react4.default.createElement(import_material3.Typography, { key: i, variant: "caption", color: "error", display: "block" }, s))));
   };
 
   // src/front/StatusChannel.ts

package/package.json

@@ -4,7 +4,7 @@
   "id": "status",
   "name": "@kwirthmagnify/kwirth-plugin-status",
   "displayName": "Kwirth Status",
-  "version": "0.2.3",
+  "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,