@kwirthmagnify/kwirth-plugin-status 0.2.6 → 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,38 +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",
-          /*
-              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"
-        },
-        /*
-            Y la fila de cada nodo, fijada: productores en la primera capa, consumidores en la ultima.
-            Sin esto, un productor sin aristas (plugin:montag) es un nodo sin salidas y el layering
-            lo puede bajar con los consumidores.
-        */
-        children: nodos.map((n) => ({
-          id: n.id,
-          width: 230,
-          height: 56,
-          layoutOptions: { "elk.layered.layering.layerConstraint": n.data.esProductor ? "FIRST" : "LAST" }
-        })),
-        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();
@@ -206,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);
         }
@@ -264,16 +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),
         /*
             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;
@@ -286,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.6",
+  "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,