bugpatrol 0.1.3 → 0.1.4

package/src/ui/graph-layout.js

@@ -1,7 +1,12 @@
 // Pure layout for the agent app map. Coordinates are SVG user units.
 export function layoutGraph(screens, edges, entryId) {
-  const w = 190, h = 150, xGap = 130, yGap = 55, pad = 45;
-  const xStep = w + xGap, yStep = h + yGap;
+  const w = 190,
+    h = 150,
+    xGap = 130,
+    yGap = 55,
+    pad = 45;
+  const xStep = w + xGap,
+    yStep = h + yGap;
   const ids = new Set(screens.map((screen) => screen.id));
   const virtual = new Set(screens.filter((screen) => screen.virtual).map((screen) => screen.id));
   const valid = edges.filter((edge) => ids.has(edge.from) && ids.has(edge.to) && edge.from !== edge.to);
@@ -27,10 +32,11 @@ export function layoutGraph(screens, edges, entryId) {
     seen.add(id);
     for (const current of queue) {
       members.push(current);
-      for (const next of neighbors.get(current)) if (!seen.has(next)) {
-        seen.add(next);
-        queue.push(next);
-      }
+      for (const next of neighbors.get(current))
+        if (!seen.has(next)) {
+          seen.add(next);
+          queue.push(next);
+        }
     }
     components.push(members.sort());
   }
@@ -43,10 +49,12 @@ export function layoutGraph(screens, edges, entryId) {
     if (memberSet.has(entryId)) {
       const queue = [entryId];
       reachedFromEntry.add(entryId);
-      for (const id of queue) for (const to of outgoing.get(id)) if (!reachedFromEntry.has(to)) {
-        reachedFromEntry.add(to);
-        queue.push(to);
-      }
+      for (const id of queue)
+        for (const to of outgoing.get(id))
+          if (!reachedFromEntry.has(to)) {
+            reachedFromEntry.add(to);
+            queue.push(to);
+          }
     }
     const roots = [
       ...(memberSet.has(entryId) ? [entryId] : []),
@@ -57,30 +65,42 @@ export function layoutGraph(screens, edges, entryId) {
     const visit = () => {
       for (let index = 0; index < queue.length; index++) {
         const id = queue[index];
-        for (const to of outgoing.get(id)) if (memberSet.has(to) && !layer.has(to)) {
-          layer.set(to, layer.get(id) + 1);
-          queue.push(to);
-        }
+        for (const to of outgoing.get(id))
+          if (memberSet.has(to) && !layer.has(to)) {
+            layer.set(to, layer.get(id) + 1);
+            queue.push(to);
+          }
       }
     };
     visit();
     // A directed cycle can have no zero-incoming root.
-    for (const id of members) if (!layer.has(id)) { layer.set(id, 0); queue.push(id); visit(); }
+    for (const id of members)
+      if (!layer.has(id)) {
+        layer.set(id, 0);
+        queue.push(id);
+        visit();
+      }
 
     const columns = Array.from({ length: Math.max(...layer.values()) + 1 }, () => []);
     for (const id of members) columns[layer.get(id)].push(id);
     const order = new Map();
-    columns.forEach((list) => list.forEach((id, index) => order.set(id, index)));
+    for (const list of columns) for (const [index, id] of list.entries()) order.set(id, index);
     const sweep = (column, neighbor) => {
       const list = columns[column];
       const center = (id) => {
-        const positions = valid.filter((edge) => edge.kind !== 'back' &&
-          ((edge.from === id && layer.get(edge.to) === neighbor) || (edge.to === id && layer.get(edge.from) === neighbor)))
-          .map((edge) => order.get(edge.from === id ? edge.to : edge.from)).filter((value) => value !== undefined);
+        const positions = valid
+          .filter(
+            (edge) =>
+              edge.kind !== 'back' &&
+              ((edge.from === id && layer.get(edge.to) === neighbor) ||
+                (edge.to === id && layer.get(edge.from) === neighbor)),
+          )
+          .map((edge) => order.get(edge.from === id ? edge.to : edge.from))
+          .filter((value) => value !== undefined);
         return positions.length ? positions.reduce((sum, value) => sum + value, 0) / positions.length : order.get(id);
       };
       list.sort((a, b) => center(a) - center(b) || a.localeCompare(b));
-      list.forEach((id, index) => order.set(id, index));
+      for (const [index, id] of list.entries()) order.set(id, index);
     };
     for (let pass = 0; pass < 4; pass++) {
       for (let col = 1; col < columns.length; col++) sweep(col, col - 1);
@@ -91,23 +111,31 @@ export function layoutGraph(screens, edges, entryId) {
     let xColumn = 0;
     for (const list of columns) {
       list.forEach((id, index) => {
-        const x = (xColumn + Math.floor(index / 10)) * xStep, y = (index % 10) * yStep;
-        nodes.push(virtual.has(id) ? { id, x: x + 35, y: y + 53, w: 120, h: 44 }
-          : { id, x, y, w, h });
+        const x = (xColumn + Math.floor(index / 10)) * xStep,
+          y = (index % 10) * yStep;
+        nodes.push(virtual.has(id) ? { id, x: x + 35, y: y + 53, w: 120, h: 44 } : { id, x, y, w, h });
       });
       xColumn += Math.ceil(list.length / 10);
     }
-    blocks.push({ nodes, width: xColumn * xStep - xGap,
-      height: Math.max(...nodes.map((node) => node.y + node.h)), isolated: false });
+    blocks.push({
+      nodes,
+      width: xColumn * xStep - xGap,
+      height: Math.max(...nodes.map((node) => node.y + node.h)),
+      isolated: false,
+    });
   }
 
   if (isolated.length) {
-    blocks.push({ nodes: isolated.map((id, index) => {
-      const x = Math.floor(index / 6) * xStep, y = 35 + (index % 6) * yStep;
-      return virtual.has(id) ? { id, x: x + 35, y: y + 53, w: 120, h: 44 } : { id, x, y, w, h };
-    }),
-    width: Math.ceil(isolated.length / 6) * xStep - xGap,
-    height: 35 + (Math.min(6, isolated.length) - 1) * yStep + h, isolated: true });
+    blocks.push({
+      nodes: isolated.map((id, index) => {
+        const x = Math.floor(index / 6) * xStep,
+          y = 35 + (index % 6) * yStep;
+        return virtual.has(id) ? { id, x: x + 35, y: y + 53, w: 120, h: 44 } : { id, x, y, w, h };
+      }),
+      width: Math.ceil(isolated.length / 6) * xStep - xGap,
+      height: 35 + (Math.min(6, isolated.length) - 1) * yStep + h,
+      isolated: true,
+    });
   }
 
   const gap = 100;
@@ -119,9 +147,13 @@ export function layoutGraph(screens, edges, entryId) {
       widths.add(width);
     }
   }
-  let targetWidth = 0, bestScore = Infinity;
+  let targetWidth = 0,
+    bestScore = Infinity;
   for (const width of widths) {
-    let rowWidth = 0, rowHeight = 0, usedWidth = 0, usedHeight = 0;
+    let rowWidth = 0,
+      rowHeight = 0,
+      usedWidth = 0,
+      usedHeight = 0;
     for (const block of blocks) {
       if (rowWidth && rowWidth + gap + block.width > width) {
         usedHeight += rowHeight + gap;
@@ -134,15 +166,30 @@ export function layoutGraph(screens, edges, entryId) {
     }
     const ratio = (usedWidth + pad * 2) / (usedHeight + rowHeight + pad * 2);
     const score = Math.abs(Math.log(ratio / 1.6));
-    if (score < bestScore) { bestScore = score; targetWidth = width; }
+    if (score < bestScore) {
+      bestScore = score;
+      targetWidth = width;
+    }
   }
   const nodes = [];
-  let x = pad, y = pad, rowHeight = 0, maxRight = 0, maxBottom = 0;
-  let unlinkedX = null, unlinkedY = null;
+  let x = pad,
+    y = pad,
+    rowHeight = 0,
+    maxRight = 0,
+    maxBottom = 0;
+  let unlinkedX = null,
+    unlinkedY = null;
   for (const block of blocks) {
-    if (x > pad && x - pad + block.width > targetWidth) { x = pad; y += rowHeight + gap; rowHeight = 0; }
+    if (x > pad && x - pad + block.width > targetWidth) {
+      x = pad;
+      y += rowHeight + gap;
+      rowHeight = 0;
+    }
     nodes.push(...block.nodes.map((node) => ({ ...node, x: node.x + x, y: node.y + y })));
-    if (block.isolated) { unlinkedX = x; unlinkedY = y; }
+    if (block.isolated) {
+      unlinkedX = x;
+      unlinkedY = y;
+    }
     maxRight = Math.max(maxRight, x + block.width);
     maxBottom = Math.max(maxBottom, y + block.height);
     rowHeight = Math.max(rowHeight, block.height);
@@ -151,16 +198,27 @@ export function layoutGraph(screens, edges, entryId) {
 
   const positions = new Map(nodes.map((node) => [node.id, node]));
   const paths = valid.map((edge, index) => {
-    const from = positions.get(edge.from), to = positions.get(edge.to);
+    const from = positions.get(edge.from),
+      to = positions.get(edge.to);
     if (to.x > from.x) {
-      const x1 = from.x + from.w, x2 = to.x, y1 = from.y + from.h / 2, y2 = to.y + to.h / 2;
+      const x1 = from.x + from.w,
+        x2 = to.x,
+        y1 = from.y + from.h / 2,
+        y2 = to.y + to.h / 2;
       const bend = Math.max(65, (x2 - x1) / 2);
       return { ...edge, path: `M ${x1} ${y1} C ${x1 + bend} ${y1}, ${x2 - bend} ${y2}, ${x2} ${y2}` };
     }
     const y = Math.min(from.y, to.y) - 25 - (index % 5) * 12;
-    const x1 = from.x + from.w / 2, x2 = to.x + to.w / 2;
+    const x1 = from.x + from.w / 2,
+      x2 = to.x + to.w / 2;
     return { ...edge, path: `M ${x1} ${from.y} C ${x1} ${y}, ${x2} ${y}, ${x2} ${to.y}` };
   });
-  return { nodes, edges: paths, width: Math.max(320, maxRight + pad),
-    height: Math.max(320, maxBottom + pad), unlinkedX, unlinkedY };
+  return {
+    nodes,
+    edges: paths,
+    width: Math.max(320, maxRight + pad),
+    height: Math.max(320, maxBottom + pad),
+    unlinkedX,
+    unlinkedY,
+  };
 }

package/src/ui/index.html

@@ -13,12 +13,12 @@
     <strong id="project-name">Bugpatrol</strong>
   </div>
   <nav class="tabs" id="tabs">
-    <button data-view="overview" class="active">Overview</button>
-    <button data-view="issues">Issues</button>
-    <button data-view="activity">Activity</button>
-    <button data-view="screens">Screens</button>
-    <button data-view="memory">Memory</button>
-    <button data-view="checks">Checks</button>
+    <button type="button" data-view="overview" class="active">Overview</button>
+    <button type="button" data-view="issues">Issues</button>
+    <button type="button" data-view="activity">Activity</button>
+    <button type="button" data-view="screens">Screens</button>
+    <button type="button" data-view="memory">Memory</button>
+    <button type="button" data-view="checks">Checks</button>
   </nav>
   <div class="status">
     <span id="live" class="live" title="Live connection to the local watcher">live</span>
@@ -30,7 +30,7 @@
 <main id="view"></main>
 
 <div id="lightbox" class="lightbox" hidden>
-  <button class="lightbox-close" aria-label="Close">&times;</button>
+  <button type="button" class="lightbox-close" aria-label="Close">&times;</button>
   <img id="lightbox-img" alt="">
   <p id="lightbox-caption"></p>
 </div>