@kwirthmagnify/kwirth-plugin-status 0.2.2 → 0.2.4

package/front.js

@@ -97,6 +97,10 @@
   var StatusIcon = (props) => /* @__PURE__ */ import_react.default.createElement(import_material.SvgIcon, { ...props, viewBox: "0 0 24 24" }, /* @__PURE__ */ import_react.default.createElement("g", { fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ import_react.default.createElement("rect", { x: "2.6", y: "4.6", width: "18.8", height: "14.8", rx: "2.2" }), /* @__PURE__ */ import_react.default.createElement("path", { d: "M6 12h2.6l1.5-3.4 2.6 6.8 1.5-3.4H18" })));
 
   // src/front/StatusData.ts
+  var countUnbrokeredConsumers = (components) => components.reduce((n, c) => {
+    if (c.subscribers === void 0 || c.knownConsumers === void 0) return n;
+    return n + Math.max(0, c.subscribers - c.knownConsumers);
+  }, 0);
   var StatusData = class {
     constructor() {
       this.view = "table";
@@ -168,8 +172,12 @@
       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 [posiciones, setPosiciones] = import_react2.default.useState(void 0);
     const [seleccionado, setSeleccionado] = import_react2.default.useState(void 0);
     const colores = {
@@ -275,17 +283,14 @@
         vigente = false;
       };
     }, [firmaGrafo]);
+    const anonimos = countUnbrokeredConsumers(inventory.components);
     if (inventory.edges.length === 0) {
-      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" }, "Nothing is subscribed to anything right now, so there is no graph to draw."));
+      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" }, anonimos > 0 ? `There is consumption right now \u2014 ${anonimos} subscriber${anonimos > 1 ? "s" : ""} \u2014 but no graph to draw: they subscribed straight to the provider instead of going through the core, so nobody knows who they are. The table still shows how much each producer is delivering.` : "Nothing is subscribed to anything right now, so there is no graph to draw."));
     }
     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 anonimos = inventory.components.reduce((n, c) => {
-      if (c.subscribers === void 0 || c.knownConsumers === void 0) return n;
-      return n + Math.max(0, c.subscribers - c.knownConsumers);
-    }, 0);
     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,
       {
@@ -308,7 +313,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,
       {
@@ -479,7 +502,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.2",
+  "version": "0.2.4",
   "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,