RubyGems - rigor-module-graph - Versions diffs - 0.1.2 → 0.1.3 - Mend

rigor-module-graph 0.1.2 → 0.1.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (13) hide show

checksums.yaml +4 -4
data/CHANGELOG.md +79 -1
data/README.md +49 -28
data/lib/rigor/module_graph/cli.rb +48 -4
data/lib/rigor/module_graph/templates/vendor/CHECKSUMS +59 -0
data/lib/rigor/module_graph/templates/vendor/cytoscape.min.js +31 -0
data/lib/rigor/module_graph/templates/viewer.css +63 -0
data/lib/rigor/module_graph/templates/viewer.html.erb +32 -0
data/lib/rigor/module_graph/templates/viewer.js +166 -0
data/lib/rigor/module_graph/version.rb +1 -1
data/lib/rigor/module_graph/viewer/html.rb +132 -0
data/lib/rigor-module-graph.rb +1 -0
metadata +9 -3

data/lib/rigor/module_graph/templates/viewer.css ADDED Viewed

@@ -0,0 +1,63 @@
+* { box-sizing: border-box; }
+html, body {
+  margin: 0;
+  padding: 0;
+  height: 100%;
+  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Hiragino Sans", "Yu Gothic", sans-serif;
+  color: #0f172a;
+}
+body { display: flex; flex-direction: column; }
+header {
+  padding: 0.5rem 1rem;
+  background: #f8fafc;
+  border-bottom: 1px solid #cbd5e1;
+  flex: 0 0 auto;
+}
+header h1 { margin: 0 0 0.25rem; font-size: 1rem; font-weight: 600; }
+header .subtitle { margin: 0 0 0.5rem; color: #64748b; font-size: 0.85rem; }
+#controls {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+  align-items: center;
+}
+fieldset {
+  margin: 0;
+  padding: 0.2rem 0.5rem;
+  border: 1px solid #cbd5e1;
+  border-radius: 3px;
+}
+fieldset legend { font-size: 0.7rem; color: #64748b; padding: 0 0.25rem; }
+fieldset label {
+  font-size: 0.8rem;
+  margin-right: 0.5rem;
+  cursor: pointer;
+  user-select: none;
+}
+fieldset label input { margin-right: 0.15rem; }
+#search {
+  padding: 0.25rem 0.5rem;
+  border: 1px solid #cbd5e1;
+  border-radius: 3px;
+  font-size: 0.85rem;
+  min-width: 14rem;
+}
+#fit {
+  padding: 0.25rem 0.6rem;
+  border: 1px solid #cbd5e1;
+  background: #fff;
+  border-radius: 3px;
+  font-size: 0.8rem;
+  cursor: pointer;
+}
+#counts {
+  color: #64748b;
+  font-size: 0.8rem;
+  margin-left: auto;
+  font-variant-numeric: tabular-nums;
+}
+main { flex: 1 1 auto; min-height: 0; }
+#cy { width: 100%; height: 100%; background: #fff; }

data/lib/rigor/module_graph/templates/viewer.html.erb ADDED Viewed

@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<%# CSP: only self + inline (we vetted the inline JS).  No
+    network fetches at view time — the vendored cytoscape and
+    our viewer.js are both inline below. -%>
+<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; img-src 'self' data:">
+<title><%= ERB::Util.html_escape(title) %></title>
+<style><%= css %></style>
+</head>
+<body>
+<header>
+  <h1><%= ERB::Util.html_escape(title) %></h1>
+  <% if subtitle %><p class="subtitle"><%= ERB::Util.html_escape(subtitle) %></p><% end %>
+  <div id="controls">
+    <fieldset id="filter-kind"><legend>kind</legend></fieldset>
+    <fieldset id="filter-confidence"><legend>confidence</legend></fieldset>
+    <input id="search" type="search" placeholder="search nodes...">
+    <button id="fit" type="button">fit</button>
+    <span id="counts"></span>
+  </div>
+</header>
+<main>
+  <div id="cy"></div>
+</main>
+<script type="application/json" id="rmg-data"><%= data_json %></script>
+<script><%= cytoscape %></script>
+<script><%= viewer %></script>
+</body>
+</html>

data/lib/rigor/module_graph/templates/viewer.js ADDED Viewed

@@ -0,0 +1,166 @@
+// Cytoscape viewer init. Reads the {nodes, edges, options}
+// payload that Viewer::Html emitted into the inline JSON tag,
+// then wires filter / search / click handlers.
+//
+// Kept short on purpose: total review surface for the
+// interactivity layer is this file plus the vendored
+// cytoscape.min.js (sha256-pinned). See docs/plan.md for the
+// supply-chain rationale.
+(function () {
+  "use strict";
+  const data = JSON.parse(document.getElementById("rmg-data").textContent);
+  const options = data.options || {};
+  const cy = cytoscape({
+    container: document.getElementById("cy"),
+    elements: { nodes: data.nodes, edges: data.edges },
+    style: [
+      { selector: "node",
+        style: {
+          "label": "data(name)",
+          "font-size": "10px",
+          "background-color": "#f8fafc",
+          "border-color": "#94a3b8",
+          "border-width": 1,
+          "shape": "round-rectangle",
+          "padding": "4px",
+          "text-valign": "center",
+          "text-halign": "center"
+        }
+      },
+      { selector: 'node[kind = "external"]',
+        style: { "background-color": "#e2e8f0", "color": "#64748b" }
+      },
+      { selector: "edge",
+        style: {
+          "width": 1,
+          "line-color": "#94a3b8",
+          "target-arrow-color": "#94a3b8",
+          "target-arrow-shape": "triangle",
+          "curve-style": "bezier",
+          "label": "data(kind)",
+          "font-size": "8px",
+          "color": "#64748b",
+          "text-rotation": "autorotate",
+          "text-background-color": "#fff",
+          "text-background-padding": "2px",
+          "text-background-opacity": 0.9
+        }
+      },
+      { selector: 'edge[kind = "inherits"]',
+        style: { "line-color": "#0f172a", "target-arrow-color": "#0f172a", "width": 2 }
+      },
+      { selector: 'edge[kind = "include"]',
+        style: { "line-color": "#1d4ed8", "target-arrow-color": "#1d4ed8" }
+      },
+      { selector: 'edge[kind = "prepend"]',
+        style: { "line-color": "#9333ea", "target-arrow-color": "#9333ea" }
+      },
+      { selector: 'edge[kind = "extend"]',
+        style: { "line-color": "#0f766e", "target-arrow-color": "#0f766e", "line-style": "dashed" }
+      },
+      { selector: 'edge[kind = "const_ref"]',
+        style: { "line-color": "#94a3b8", "target-arrow-color": "#94a3b8", "line-style": "dotted" }
+      },
+      { selector: 'edge[kind = "association"]',
+        style: { "line-color": "#0891b2", "target-arrow-color": "#0891b2" }
+      },
+      { selector: ".filtered-out", style: { "display": "none" } },
+      { selector: ".search-dim", style: { "opacity": 0.15 } }
+    ],
+    layout: { name: "cose", animate: false, nodeDimensionsIncludeLabels: true }
+  });
+  // Distinct kind / confidence values present in this dataset
+  // drive the checkbox fieldsets — never hard-coded.
+  function uniqValues(attr) {
+    return Array.from(new Set(data.edges.map(e => e.data[attr]))).sort();
+  }
+  function buildCheckboxes(fieldsetId, values) {
+    const fs = document.getElementById(fieldsetId);
+    values.forEach(v => {
+      const label = document.createElement("label");
+      const input = document.createElement("input");
+      input.type = "checkbox";
+      input.value = v;
+      input.checked = true;
+      input.addEventListener("change", applyFilters);
+      label.appendChild(input);
+      label.appendChild(document.createTextNode(" " + v));
+      fs.appendChild(label);
+    });
+  }
+  function selectedValues(fieldsetId) {
+    return new Set(
+      Array.from(document.querySelectorAll("#" + fieldsetId + " input:checked"))
+        .map(i => i.value)
+    );
+  }
+  function applyFilters() {
+    const okKinds = selectedValues("filter-kind");
+    const okConfs = selectedValues("filter-confidence");
+    cy.batch(() => {
+      cy.edges().forEach(e => {
+        const ok = okKinds.has(e.data("kind")) && okConfs.has(e.data("confidence"));
+        e.toggleClass("filtered-out", !ok);
+      });
+      cy.nodes().forEach(n => {
+        // Hide nodes with no visible incident edges so the graph
+        // doesn't carry orphaned constants the user can't relate
+        // to anything via the current filter.
+        const visibleEdges = n.connectedEdges(":not(.filtered-out)");
+        n.toggleClass("filtered-out", visibleEdges.length === 0);
+      });
+    });
+    updateCounts();
+  }
+  function applySearch() {
+    const q = document.getElementById("search").value.trim().toLowerCase();
+    cy.batch(() => {
+      if (q === "") {
+        cy.elements().removeClass("search-dim");
+        return;
+      }
+      cy.nodes().forEach(n => {
+        n.toggleClass("search-dim", !n.data("name").toLowerCase().includes(q));
+      });
+      cy.edges().forEach(e => {
+        const src = e.source().data("name").toLowerCase();
+        const tgt = e.target().data("name").toLowerCase();
+        e.toggleClass("search-dim", !(src.includes(q) || tgt.includes(q)));
+      });
+    });
+  }
+  function updateCounts() {
+    const nVisible = cy.nodes(":visible").length;
+    const eVisible = cy.edges(":visible").length;
+    document.getElementById("counts").textContent =
+      nVisible + " nodes, " + eVisible + " edges";
+  }
+  function handleNodeTap(evt) {
+    const n = evt.target;
+    const path = n.data("path");
+    if (!path) return;
+    const line = n.data("line");
+    const ref = line ? path + ":" + line : path;
+    if (options.open_with === "vscode") {
+      window.location.href = "vscode://file/" + ref;
+    } else if (navigator.clipboard && navigator.clipboard.writeText) {
+      navigator.clipboard.writeText(ref).catch(() => {});
+    }
+  }
+  buildCheckboxes("filter-kind", uniqValues("kind"));
+  buildCheckboxes("filter-confidence", uniqValues("confidence"));
+  document.getElementById("search").addEventListener("input", applySearch);
+  document.getElementById("fit").addEventListener("click", () => cy.fit());
+  cy.on("tap", "node", handleNodeTap);
+  updateCounts();
+})();

data/lib/rigor/module_graph/version.rb CHANGED Viewed

@@ -5,6 +5,6 @@ module Rigor
   # an overview and Rigor::ModuleGraph::CLI for the CLI surface.
   module ModuleGraph
     # The installed gem version.
-    VERSION = "0.1.2"
+    VERSION = "0.1.3"
   end
 end

data/lib/rigor/module_graph/viewer/html.rb ADDED Viewed

@@ -0,0 +1,132 @@
+# frozen_string_literal: true
+require "erb"
+require "json"
+module Rigor
+  module ModuleGraph
+    # Interactive viewer that replaces the static-Mermaid HTML
+    # for `view --output html`. The output is a self-contained
+    # HTML file: vendored `cytoscape.min.js` is inlined alongside
+    # our ~100-line init script and the node / edge dataset, so
+    # the artefact opens in any browser without a network round
+    # trip. See `docs/plan.md` "2D interactive viewer" for the
+    # supply-chain rationale.
+    module Viewer
+      module Html
+        module_function
+        TEMPLATE_DIR = File.expand_path("../templates", __dir__)
+        TEMPLATE_PATH = File.join(TEMPLATE_DIR, "viewer.html.erb")
+        CSS_PATH = File.join(TEMPLATE_DIR, "viewer.css")
+        VIEWER_JS_PATH = File.join(TEMPLATE_DIR, "viewer.js")
+        CYTOSCAPE_JS_PATH = File.join(TEMPLATE_DIR, "vendor", "cytoscape.min.js")
+        # Node kinds that map to top-level Cytoscape nodes.
+        # Method / attribute nodes are out of scope for the graph
+        # viewer (they belong to the class diagram, not the
+        # dependency graph).
+        CONSTANT_KINDS = %w[class module].freeze
+        # @param edges [Array<Edge>] dependency edges
+        # @param nodes [Array<Node>] node metadata (for click-through)
+        # @param title [String] page title
+        # @param subtitle [String, nil] optional subtitle line
+        # @param path_mode [:relative, :absolute, :none]
+        #   how `data.path` is reported to click handlers. `:none`
+        #   strips it entirely so HTML shared externally doesn't
+        #   leak filesystem layout.
+        # @param open_with [Symbol, nil] when `:vscode`, node click
+        #   opens `vscode://file/<path>:<line>` instead of writing
+        #   to clipboard.
+        # @return [String] complete HTML document
+        def render(edges:, nodes:, title:, subtitle: nil, path_mode: :relative, open_with: nil)
+          data = build_data(
+            edges: edges, nodes: nodes,
+            path_mode: path_mode, open_with: open_with
+          )
+          template = ERB.new(File.read(TEMPLATE_PATH), trim_mode: "-")
+          template.result_with_hash(
+            title: title,
+            subtitle: subtitle,
+            data_json: safe_json(data),
+            css: File.read(CSS_PATH),
+            cytoscape: File.read(CYTOSCAPE_JS_PATH),
+            viewer: File.read(VIEWER_JS_PATH)
+          )
+        end
+        # Builds the `{nodes:, edges:, options:}` payload the
+        # inline init JS reads from
+        # `<script type="application/json" id="rmg-data">`.
+        def build_data(edges:, nodes:, path_mode:, open_with:)
+          node_meta = {}
+          nodes.each do |node|
+            next unless CONSTANT_KINDS.include?(node.kind)
+            key = fully_qualified(node)
+            # First definition wins; class re-opens still resolve
+            # to one Cytoscape node, matching the dedup contract
+            # in `Edge#dedup_key`.
+            node_meta[key] ||= {
+              # Cytoscape resolves `edge.source` / `edge.target`
+              # against `node.data.id`, so the constant name has
+              # to be the id (not just a display field).
+              id: key,
+              name: key,
+              kind: node.kind,
+              path: path_for(node.path, path_mode),
+              line: node.line
+            }
+          end
+          # Every edge endpoint becomes a node, even when the
+          # constant has no definition in the analysed paths
+          # (e.g. `ApplicationRecord` from a Rails gem). These
+          # get the `external` kind so the styling can dim them.
+          edges.flat_map { |e| [e.from, e.to] }.uniq.each do |name|
+            node_meta[name] ||= { id: name, name: name, kind: "external" }
+          end
+          {
+            nodes: node_meta.values.map { |n| { data: n } },
+            edges: edges.each_with_index.map do |edge, i|
+              {
+                data: {
+                  id: "e#{i}",
+                  source: edge.from,
+                  target: edge.to,
+                  kind: edge.kind,
+                  confidence: edge.confidence
+                }
+              }
+            end,
+            options: { open_with: open_with&.to_s }
+          }
+        end
+        def fully_qualified(node)
+          owner = node.owner
+          owner && !owner.empty? ? "#{owner}::#{node.name}" : node.name
+        end
+        def path_for(path, mode)
+          return nil if path.nil? || mode == :none
+          case mode
+          when :absolute then File.expand_path(path)
+          when :relative then path
+          end
+        end
+        # JSON embedded in `<script>` must not contain `</` (would
+        # break out of the surrounding tag). `JSON.generate` does
+        # not escape it by default; rewriting the literal pair
+        # `</` → `<\/` is the standard safety pass.
+        def safe_json(value)
+          JSON.generate(value).gsub("</", "<\\/")
+        end
+      end
+    end
+  end
+end

data/lib/rigor-module-graph.rb CHANGED Viewed

@@ -30,4 +30,5 @@ require_relative "rigor/module_graph/packwerk_overlay"
 require_relative "rigor/module_graph/uml/class_diagram"
 require_relative "rigor/module_graph/html_view"
 require_relative "rigor/module_graph/status_reporter"
+require_relative "rigor/module_graph/viewer/html"
 require_relative "rigor/module_graph/plugin"

metadata CHANGED Viewed

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: rigor-module-graph
 version: !ruby/object:Gem::Version
-  version: 0.1.2
+  version: 0.1.3
 platform: ruby
 authors:
 - Nozomi Hijikata
@@ -71,9 +71,15 @@ files:
 - lib/rigor/module_graph/reachability.rb
 - lib/rigor/module_graph/stats.rb
 - lib/rigor/module_graph/status_reporter.rb
+- lib/rigor/module_graph/templates/vendor/CHECKSUMS
+- lib/rigor/module_graph/templates/vendor/cytoscape.min.js
 - lib/rigor/module_graph/templates/view.html.erb
+- lib/rigor/module_graph/templates/viewer.css
+- lib/rigor/module_graph/templates/viewer.html.erb
+- lib/rigor/module_graph/templates/viewer.js
 - lib/rigor/module_graph/uml/class_diagram.rb
 - lib/rigor/module_graph/version.rb
+- lib/rigor/module_graph/viewer/html.rb
 - lib/rigor/module_graph/visibility_map.rb
 - lib/rigor/module_graph/zeitwerk_resolver.rb
 licenses:
@@ -89,7 +95,7 @@ rdoc_options:
 - "--main"
 - README.md
 - "--markup"
-- rdoc
+- markdown
 require_paths:
 - lib
 required_ruby_version: !ruby/object:Gem::Requirement
@@ -106,7 +112,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 4.0.3
+rubygems_version: 4.0.10
 specification_version: 4
 summary: Class/module/constant dependency graph for Ruby projects, built on Rigor.
 test_files: []