ghcr-manager-visualizer 1.0.3 → 1.0.4

package/README.md

@@ -27,6 +27,9 @@ Open the local URL printed by the command and select:
 
 Good search terms for tags in most scenarios are: `image`, `multiarch`, `keep`, or `delete`.
 
+For an overview of the test scenario graphs and cleanup cases, see
+[test-scenarios](https://github.com/ghcr-manager/ghcr-manager/blob/main/docs/test/scenarios.md).
+
 ## Install
 
 ```sh
@@ -90,6 +93,12 @@ This is the fastest way to inspect what changed between two scans of one package
 
 [![Visualizer Show Compare Mode](https://raw.githubusercontent.com/ghcr-manager/ghcr-manager/main/docs/images/visualizer/visualizer-show-compare-mode.png)](https://github.com/ghcr-manager/ghcr-manager/blob/main/docs/images/visualizer/visualizer-show-compare-mode.png)
 
+_Example compare view: red-bordered manifests are present in the older scan and removed in the newer one._
+
+[![Visualizer Show Compare Mode Tags](https://raw.githubusercontent.com/ghcr-manager/ghcr-manager/main/docs/images/visualizer/visualizer-show-compare-mode--tag-removed.png)](https://github.com/ghcr-manager/ghcr-manager/blob/main/docs/images/visualizer/visualizer-show-compare-mode--tag-removed.png)
+
+_Example compare view: tags with '(-)' were removed. Here the manifest with the other tag remained._
+
 ## Source Checkout
 
 From this repository checkout, you can run the visualizer without publishing:

package/dist/public/app.js

@@ -29,6 +29,8 @@ const elements = {
   detailArtifactType: document.querySelector("#detail-artifact-type"),
   detailSubject: document.querySelector("#detail-subject"),
   detailTags: document.querySelector("#detail-tags"),
+  toggleGrid: document.querySelector("#toggle-grid"),
+  graphGrid: document.querySelector("#graph-grid"),
   zoomIn: document.querySelector("#zoom-in"),
   zoomOut: document.querySelector("#zoom-out"),
   zoomFit: document.querySelector("#zoom-fit")
@@ -41,7 +43,8 @@ const state = {
   positionsByViewKey: new Map(),
   selectedDigest: null,
   selectedManifestDetails: null,
-  lookupSuggestionRequestId: 0
+  lookupSuggestionRequestId: 0,
+  gridVisible: false
 };
 
 const _ZOOM_STEP = 1.15;
@@ -174,6 +177,10 @@ elements.closeRawJson.addEventListener("click", () => {
   elements.rawJsonDialog.close();
 });
 
+elements.toggleGrid.addEventListener("click", () => {
+  setGridVisible(!state.gridVisible);
+});
+
 elements.zoomIn.addEventListener("click", () => {
   zoomBy(_ZOOM_STEP);
 });
@@ -191,6 +198,7 @@ cy.on("tap", "node", async (event) => {
 });
 
 await initializeSelectors();
+setGridVisible(false);
 
 async function loadGraphFromForm() {
   persistCurrentLayoutState();
@@ -522,6 +530,12 @@ function setStatus(message) {
   elements.status.textContent = message;
 }
 
+function setGridVisible(visible) {
+  state.gridVisible = visible;
+  elements.graphGrid.hidden = !visible;
+  elements.toggleGrid.setAttribute("aria-pressed", String(visible));
+}
+
 function replaceLookupSuggestions(values) {
   elements.lookupSuggestions.replaceChildren(...values.map((value) => buildOption(value, value)));
 }

package/dist/public/index.html

@@ -62,10 +62,12 @@
       </section>
       <section class="graph-panel">
         <div class="graph-toolbar" aria-label="Graph controls">
+          <button id="toggle-grid" type="button" title="Toggle screenshot grid" aria-pressed="false">Grid</button>
           <button id="zoom-in" type="button" title="Zoom in">+</button>
           <button id="zoom-out" type="button" title="Zoom out">-</button>
           <button id="zoom-fit" type="button" title="Fit graph">Fit</button>
         </div>
+        <div id="graph-grid" class="graph-grid" hidden aria-hidden="true"></div>
         <div id="graph"></div>
       </section>
       <aside class="details">

package/dist/public/styles.css

@@ -1,7 +1,6 @@
 body {
   margin: 0;
   font-family: "IBM Plex Sans", "Segoe UI", sans-serif;
-  background: linear-gradient(180deg, #edf2f0 0%, #dde7e2 100%);
   color: #112218;
 }
 
@@ -14,8 +13,6 @@ body {
 .controls,
 .details {
   padding: 1rem;
-  background: rgba(255, 255, 255, 0.78);
-  backdrop-filter: blur(8px);
   min-width: 0;
 }
 
@@ -40,6 +37,8 @@ body {
   top: 1rem;
   right: 1rem;
   display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
   gap: 0.5rem;
   z-index: 2;
 }
@@ -54,6 +53,29 @@ body {
 #graph {
   width: 100%;
   height: 100vh;
+  background: #ffffff;
+}
+
+.graph-grid {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  z-index: 1;
+  background-image:
+    linear-gradient(rgba(32, 64, 48, 0.08) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(32, 64, 48, 0.08) 1px, transparent 1px),
+    linear-gradient(rgba(32, 64, 48, 0.18) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(32, 64, 48, 0.18) 1px, transparent 1px);
+  background-position:
+    0 0,
+    0 0,
+    0 0,
+    0 0;
+  background-size:
+    24px 24px,
+    24px 24px,
+    120px 120px,
+    120px 120px;
 }
 
 form {

package/dist/src/index.d.ts

@@ -1,3 +1,4 @@
+#!/usr/bin/env node
 import { startVisualizerServer } from "./_server.js";
 export type { VisualizerServerHandle } from "./_server.js";
 export interface CliOptions {

package/dist/src/index.js

@@ -1,3 +1,4 @@
+#!/usr/bin/env node
 import { isAbsolute, resolve } from "node:path";
 import { startVisualizerServer } from "./_server.js";
 export async function main(args, startServer = startVisualizerServer) {

package/package.json

@@ -2,7 +2,7 @@
   "name": "ghcr-manager-visualizer",
   "description": "Inspect ghcr-manager SQLite scan databases in a local browser graph visualizer.",
   "homepage": "https://github.com/ghcr-manager/ghcr-manager#readme",
-  "version": "v1.0.3",
+  "version": "v1.0.4",
   "license": "MIT",
   "type": "module",
   "keywords": [