@kwirthmagnify/kwirth-plugin-status 0.2.5 → 0.2.7

package/back.js

@@ -41,10 +41,19 @@ var require_kwirth_common_back = __commonJS({
 var index_exports = {};
 __export(index_exports, {
   StatusChannel: () => StatusChannel,
-  default: () => index_default
+  default: () => index_default,
+  toStatusEdges: () => toStatusEdges
 });
 module.exports = __toCommonJS(index_exports);
 var import_kwirth_common_back = __toESM(require_kwirth_common_back(), 1);
+var toStatusEdges = (subscriptions) => {
+  const edges = [];
+  for (const s of subscriptions) {
+    const consumerId = s.consumerId ?? s.channelId;
+    if (consumerId) edges.push({ providerId: s.providerId, consumerId, since: s.since });
+  }
+  return edges;
+};
 var statsOf = (p) => {
   if (!p.getStats) return void 0;
   try {
@@ -257,7 +266,7 @@ var StatusChannel = class {
     this.subscriptionsOf = () => {
       if (!this.clusterInfo.getSubscriptions) return [];
       try {
-        return this.clusterInfo.getSubscriptions() ?? [];
+        return toStatusEdges(this.clusterInfo.getSubscriptions() ?? []);
       } catch {
         return [];
       }
@@ -300,5 +309,6 @@ var StatusChannel = class {
 var index_default = StatusChannel;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  StatusChannel
+  StatusChannel,
+  toStatusEdges
 });

package/front.js

@@ -96,6 +96,9 @@
   var import_material = __toESM(require_material(), 1);
   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/common/StatusTypes.ts
+  var PROVIDER_CONSUMER_PREFIX = "provider:";
+
   // src/front/StatusData.ts
   var countUnbrokeredConsumers = (components) => components.reduce((n, c) => {
     if (c.subscribers === void 0 || c.knownConsumers === void 0) return n;
@@ -122,6 +125,56 @@
   var import_react2 = __toESM(require_react(), 1);
   var import_material2 = __toESM(require_material(), 1);
   var import_react3 = __toESM(require_react2(), 1);
+
+  // src/front/StatusGraph.ts
+  var CHANNEL_NODE_PREFIX = "channel:";
+  var isProviderConsumer = (consumerId) => consumerId.startsWith(PROVIDER_CONSUMER_PREFIX);
+  var consumerNodeId = (consumerId) => isProviderConsumer(consumerId) ? consumerId.slice(PROVIDER_CONSUMER_PREFIX.length) : `${CHANNEL_NODE_PREFIX}${consumerId}`;
+  var channelsOf = (edges) => [...new Set(edges.filter((e) => !isProviderConsumer(e.consumerId)).map((e) => e.consumerId))];
+  var layerOf = (nodeId, targets) => {
+    if (nodeId.startsWith(CHANNEL_NODE_PREFIX)) return "LAST" /* LAST */;
+    return targets.has(nodeId) ? void 0 : "FIRST" /* FIRST */;
+  };
+  var elkGraphOf = (nodeIds, lines) => {
+    const targets = new Set(lines.map((l) => l.target));
+    return {
+      id: "root",
+      layoutOptions: {
+        "elk.algorithm": "layered",
+        /*
+            De arriba abajo: los productores en la capa de arriba y los consumidores debajo.
+            Se lee como un diagrama de flujo —el dato cae— y aprovecha el ancho de la pantalla,
+            que es donde sobra sitio cuando hay muchos nodos.
+        */
+        "elk.direction": "DOWN",
+        "elk.spacing.nodeNode": "40",
+        "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"
+      },
+      /*
+          The layer of each node (see layerOf): channels at the bottom, producers that consume nothing
+          at the top, and a provider that consumes another provider left free, so elk puts it below
+          what it reads and every line goes down.
+      */
+      children: nodeIds.map((id) => {
+        const layer = layerOf(id, targets);
+        return {
+          id,
+          width: 230,
+          height: 56,
+          ...layer ? { layoutOptions: { "elk.layered.layering.layerConstraint": layer } } : {}
+        };
+      }),
+      edges: lines.map((l) => ({ id: l.id, sources: [l.source], targets: [l.target] }))
+    };
+  };
+
+  // src/front/StatusDiagram.tsx
   var COLOR = {
     ["active" /* ACTIVE */]: "#2e7d32",
     ["idle" /* IDLE */]: "#616161",
@@ -132,16 +185,24 @@
     ["unknown" /* UNKNOWN */]: "#616161"
   };
   var colocar = async (nodos, aristas) => {
+    const destinos = new Set(aristas.map((a) => a.target));
     const filas = () => {
       const pos = {};
-      const productores = nodos.filter((n) => n.data.esProductor);
-      const consumidores = nodos.filter((n) => !n.data.esProductor);
-      productores.forEach((n, i) => {
-        pos[n.id] = { x: i * 260, y: 0 };
-      });
-      consumidores.forEach((n, i) => {
-        pos[n.id] = { x: i * 260, y: 220 };
-      });
+      const fila = (n) => {
+        switch (layerOf(n.id, destinos)) {
+          case "FIRST" /* FIRST */:
+            return 0;
+          case "LAST" /* LAST */:
+            return 2;
+          default:
+            return 1;
+        }
+      };
+      for (const f of [0, 1, 2]) {
+        nodos.filter((n) => fila(n) === f).forEach((n, i) => {
+          pos[n.id] = { x: i * 260, y: f * 220 };
+        });
+      }
       return pos;
     };
     const loadElk = window.__kwirth__?.loadElk;
@@ -149,22 +210,7 @@
     try {
       const ELK = await loadElk();
       const elk = new ELK();
-      const g = await elk.layout({
-        id: "root",
-        layoutOptions: {
-          "elk.algorithm": "layered",
-          /*
-              De arriba abajo: los productores en la capa de arriba y los consumidores debajo.
-              Se lee como un diagrama de flujo —el dato cae— y aprovecha el ancho de la pantalla,
-              que es donde sobra sitio cuando hay muchos nodos.
-          */
-          "elk.direction": "DOWN",
-          "elk.spacing.nodeNode": "40",
-          "elk.layered.spacing.nodeNodeBetweenLayers": "110"
-        },
-        children: nodos.map((n) => ({ id: n.id, width: 230, height: 56 })),
-        edges: aristas.map((e) => ({ id: e.id, sources: [e.source], targets: [e.target] }))
-      });
+      const g = await elk.layout(elkGraphOf(nodos.map((n) => n.id), aristas));
       const pos = {};
       for (const c of g.children ?? []) pos[c.id] = { x: c.x, y: c.y };
       return Object.keys(pos).length === nodos.length ? pos : filas();
@@ -190,13 +236,13 @@
     const { nodos, aristas, canalesSueltos } = import_react2.default.useMemo(() => {
       const productores = inventory.components.filter((c) => c.kind === "provider" /* PROVIDER */ || c.kind === "pluvider" /* PLUVIDER */);
       const idsProductores = new Set(productores.map((p) => p.id));
-      const canales = [...new Set(inventory.edges.map((e) => e.channelId))];
+      const canales = channelsOf(inventory.edges);
       const vecinos = /* @__PURE__ */ new Set();
       if (seleccionado) {
         vecinos.add(seleccionado);
         for (const e of inventory.edges) {
           const origen = e.providerId;
-          const destino = `channel:${e.channelId}`;
+          const destino = consumerNodeId(e.consumerId);
           if (origen === seleccionado) vecinos.add(destino);
           if (destino === seleccionado) vecinos.add(origen);
         }
@@ -248,21 +294,16 @@
         }))
       ];
       const aristas2 = inventory.edges.map((e) => ({
-        id: `${e.providerId}->${e.channelId}`,
+        id: `${e.providerId}->${e.consumerId}`,
         source: e.providerId,
-        target: `channel:${e.channelId}`,
+        target: consumerNodeId(e.consumerId),
         /*
-                        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 tocaAlSeleccionado = Boolean(seleccionado) && (e.providerId === seleccionado || consumerNodeId(e.consumerId) === seleccionado);
           const viva = active.has(e.providerId);
           const color = tocaAlSeleccionado ? "#7fd8b0" : viva ? "#5fc79a" : "#4a8";
           const ancho = tocaAlSeleccionado ? 3 : viva ? 2 : 1;
@@ -275,7 +316,7 @@
             markerEnd: { type: import_react3.MarkerType.ArrowClosed, color, width: punta, height: punta }
           };
         })()
-      })).filter((e) => idsProductores.has(e.source));
+      })).filter((e) => idsProductores.has(e.source) && (e.target.startsWith(CHANNEL_NODE_PREFIX) || idsProductores.has(e.target)));
       const canalesSueltos2 = inventory.edges.length - aristas2.length;
       return { nodos: nodos2, aristas: aristas2, canalesSueltos: canalesSueltos2 };
     }, [inventory, active, seleccionado, colores.fondoNodo, colores.fondoCanal, colores.texto, colores.bordeCanal]);

package/package.json

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