@kwirthmagnify/kwirth-plugin-status 0.2.3 → 0.2.4

package/front.js

@@ -172,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 = {
@@ -309,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,
       {
@@ -480,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.3",
+  "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,