kaskd-lens 0.1.1 → 0.1.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: aff81474cc15f0e2c89a02c0097822b6daaf3cfea0e3df6c446388a3c7332169
-  data.tar.gz: f6067ff21b7aa44825633342c01452212021b8efb137464b85c8f084ebc49fe3
+  metadata.gz: 29883d384c097a6052f9f7bbb5e34dd190d588dc8e3df3068f82c11a00d95a18
+  data.tar.gz: 6312cebd9d94311407d1da27bc6f9f061ace3086f38e288a104c8ac388246696
 SHA512:
-  metadata.gz: 3db3478d3f26333df8a8e85fdf8ed28280efef21ad888356c2f44c79d8b4097ef65ba0abfde29ce94e5e3491d1c22236d39d7f551b5546eb973ff1374809c007
-  data.tar.gz: 90410f2fdddc51c375dcb2e9bbe0a171604578758d4ab056cb64a269e7b4c845e1761df9476356423afaf13f8732c523c0badd17ca027968aaac68fa62320fdc
+  metadata.gz: b60ef49e1cd1ad18f3be61f36cf1fda64b3688b389ca43f8e8bfcb602d7023ed7aad37e94a9380faee73fc723e6ebb205373c2fc416aff5be94e186c104f665e
+  data.tar.gz: 225e5254fda8afd4ee2ad71106324d38e451898ff119b67e88770443fb31605fa17c662c9518c6f25f1312346c3f9d162cfb41b7708f4f74209e9c3677a254e2

data/README.md

@@ -15,6 +15,7 @@ Generates a self-contained HTML page that visualizes the service dependency grap
 - **Export JSON** dependency report
 - **Navigation history** (back/forward)
 - **No external dependencies** — vis-network.js is vendored and inlined
+- **Focused mode** — pre-select a specific service and view its blast radius + affected test files in a dedicated Tests tab
 
 ## Installation
 
@@ -51,14 +52,60 @@ Kaskd::Lens.serve
 Kaskd::Lens.serve(root: "/path/to/project", port: 8080)
 ```
 
+### Focused mode — inspect a specific service
+
+Opens a report pre-selected on one service, with its full blast radius highlighted and a **Tests** tab listing every test file that exercises it or any service it affects.
+
+```ruby
+# Generate focused report and open in browser
+Kaskd::Lens.open_focus(class_name: "Payments::ProcessRefund")
+
+# Custom root / output path / BFS depth
+Kaskd::Lens.open_focus(
+  class_name: "Payments::ProcessRefund",
+  root:       "/path/to/project",
+  output:     "/tmp/focus-process-refund.html",
+  max_depth:  4
+)
+
+# Just generate the file without opening it
+path = Kaskd::Lens.focus(class_name: "Payments::ProcessRefund")
+# => "/path/to/project/kaskd-focus-payments-processrefund.html"
+```
+
+The focused report adds:
+
+- Header shows `Focus: Payments::ProcessRefund`
+- Green **tests** badge with the count of affected test files
+- **Tests** tab in the detail overlay, grouped by pack
+
+Inside a Rails app:
+
+```bash
+bundle exec rails runner \
+  "require 'kaskd-lens'; Kaskd::Lens.open_focus(class_name: 'Payments::ProcessRefund', root: Rails.root.to_s)"
+```
+
 ### Programmatic usage
 
 ```ruby
 require 'kaskd-lens'
 
 result = Kaskd.analyze(root: "/path/to/project")
-html   = Kaskd::Lens::HtmlReport.new(result).render
+
+# Standard report
+html = Kaskd::Lens::HtmlReport.new(result).render
 File.write("my-report.html", html)
+
+# Focused report (requires kaskd BlastRadius + TestFinder)
+blast = Kaskd::BlastRadius.new(result[:services]).compute("Payments::ProcessRefund", max_depth: 6)
+tests = Kaskd::TestFinder.new(root: "/path/to/project").find_for(
+  blast[:affected].map { |a| a[:class_name] } + ["Payments::ProcessRefund"],
+  result[:services]
+)
+focused = { class_name: "Payments::ProcessRefund", blast_radius: blast, tests: tests[:test_files] }
+html = Kaskd::Lens::HtmlReport.new(result, focused: focused).render
+File.write("focused.html", html)
 ```
 
 ## License

data/lib/kaskd/lens/html_report.rb

@@ -120,12 +120,10 @@ module Kaskd
                 <div class="tab" data-tab="info">
                   &#8505; Info
                 </div>
-                #{@focused ? '<div class="tab tab-tests" data-tab="tests">&#128221; Tests <span class="tab-count" id="tc-tests">0</span></div>' : ""}
               </div>
               <div class="tab-body active" id="tb-affected"></div>
               <div class="tab-body" id="tb-deps"></div>
               <div class="tab-body" id="tb-info"></div>
-              #{@focused ? '<div class="tab-body" id="tb-tests"></div>' : ""}
             </div>
             <button id="btn-toggle-detail" title="Toggle detail panel"><span class="arrow">&#9654;</span></button>
 
@@ -153,7 +151,10 @@ module Kaskd
 
               <!-- Graph -->
               <div class="graph-area">
+                #{@focused ? '<div id="view-switch"><button class="view-btn active" id="btn-view-graph">&#9906; Dependencies</button><button class="view-btn" id="btn-view-tests">&#128203; Tests</button></div>' : ""}
+
                 <div id="vis-graph"></div>
+                <div id="vis-tests-graph" style="display:none;width:100%;height:100%;"></div>
 
                 <div id="graph-empty">
                   <svg width="60" height="60" viewBox="0 0 60 60" fill="none" stroke="#4a6080" stroke-width="1.5">
@@ -845,6 +846,35 @@ module Kaskd
             border-color: #2da44e;
             color: #1a7f37;
           }
+          /* ── View switch (Graph / Tests) ─────────────────────────── */
+          #view-switch {
+            position: absolute;
+            top: 12px;
+            left: 50%;
+            transform: translateX(-50%);
+            z-index: 10;
+            display: flex;
+            background: var(--bg-card);
+            border: 1px solid var(--border);
+            border-radius: 8px;
+            overflow: hidden;
+          }
+          .view-btn {
+            background: none;
+            border: none;
+            color: var(--text-muted);
+            padding: 5px 14px;
+            font-size: 11px;
+            font-weight: 600;
+            cursor: pointer;
+            transition: background .15s, color .15s;
+            letter-spacing: .03em;
+          }
+          .view-btn:hover { background: var(--bg-hover); color: var(--text-base); }
+          .view-btn.active {
+            background: var(--accent);
+            color: #ffffff;
+          }
           .test-pack-group { margin-bottom: 14px; }
           .test-pack-label {
             font-size: 10px;
@@ -1076,9 +1106,6 @@ module Kaskd
               renderAffectedTab(affectedDist, affectedPrev, name);
               renderDepsTab(depsDist, depsPrev, name);
               renderInfoTab(svc);
-              if (FOCUSED && name === FOCUSED.class_name) {
-                renderTestsTab(FOCUSED.tests);
-              }
               showDetailOverlay(svc.class_name);
             }
 
@@ -1307,11 +1334,9 @@ module Kaskd
                 </div>`;
             }
 
-            function renderTestsTab(tests) {
-              var el = document.getElementById('tb-tests');
+            function renderTestsListTab(tests) {
+              var el = document.getElementById('tb-tests-list');
               if (!el) return;
-              var countEl = document.getElementById('tc-tests');
-              if (countEl) countEl.textContent = tests.length;
               if (!tests.length) {
                 el.innerHTML = '<div class="desc-info">No test files found.</div>';
                 return;
@@ -1336,12 +1361,166 @@ module Kaskd
                         '<div class="test-path">' + esc(t.path) + '</div>' +
                         (t.class_name ? '<div class="test-class">' + esc(t.class_name) + '</div>' : '') +
                       '</div>' +
-                      '</div>';
+                    '</div>';
                   }).join('') +
-                  '</div>';
+                '</div>';
               }).join('');
             }
 
+            // ── Pack color palette for test graph nodes ─────────────────────────────────
+            var PACK_COLORS = [
+              '#1f6feb','#2ea043','#a371f7','#f0883e','#58a6ff',
+              '#3fb950','#d2a8ff','#ffa657','#79c0ff','#56d364',
+            ];
+            var packColorMap = {};
+            var packColorIdx = 0;
+            function packColor(pack) {
+              if (!packColorMap[pack]) {
+                packColorMap[pack] = PACK_COLORS[packColorIdx % PACK_COLORS.length];
+                packColorIdx++;
+              }
+              return packColorMap[pack];
+            }
+
+            var testsNetwork = null;
+            var testsBuilt   = false;
+
+            function buildTestsGraph(focused) {
+              if (testsBuilt) return;
+              testsBuilt = true;
+
+              var tests = focused.tests;
+              var container = document.getElementById('vis-tests-graph');
+              if (!container) return;
+
+              if (!tests.length) {
+                container.innerHTML = '<div class="desc-info" style="padding:24px;text-align:center;color:var(--text-dim)">No test files found.</div>';
+                return;
+              }
+
+              var nodes = new vis.DataSet();
+              var edges = new vis.DataSet();
+
+              // Central service node
+              nodes.add({
+                id: '__svc__',
+                label: nodeLabel(focused.class_name),
+                title: focused.class_name,
+                shape: 'ellipse',
+                size: 28,
+                color: { background: '#f0f6fc', border: '#cdd9e5',
+                         highlight: { background: '#ffffff', border: '#e6edf3' } },
+                font: { color: '#0d1117', size: 12, bold: true,
+                        face: 'SF Mono, Fira Code, monospace' },
+                borderWidth: 2,
+              });
+
+              tests.forEach(function(t, i) {
+                var m = t.path.match(/^packs\/([^\/]+)\//);
+                var pack = m ? m[1] : 'app';
+                var color = packColor(pack);
+                var parts = t.path.split('/');
+                var fileName = parts[parts.length - 1];
+                var shortClass = t.class_name ? t.class_name.split('::').pop() : '';
+                var label = fileName + (shortClass ? '\n' + shortClass : '');
+
+                nodes.add({
+                  id: 'test_' + i,
+                  label: label,
+                  title: t.path + (t.class_name ? '\n' + t.class_name : ''),
+                  shape: 'box',
+                  color: {
+                    background: color + '22',
+                    border: color,
+                    highlight: { background: color + '55', border: color },
+                  },
+                  font: { color: '#e6edf3', size: 10,
+                          face: 'SF Mono, Fira Code, monospace' },
+                  borderWidth: 1,
+                });
+
+                edges.add({
+                  from: '__svc__',
+                  to: 'test_' + i,
+                  arrows: 'to',
+                  color: { color: color, opacity: 0.5 },
+                  width: 1,
+                  title: t.path,
+                });
+              });
+
+              if (testsNetwork) { testsNetwork.destroy(); testsNetwork = null; }
+
+              testsNetwork = new vis.Network(container, { nodes: nodes, edges: edges }, {
+                layout: { randomSeed: 42 },
+                physics: {
+                  enabled: true,
+                  repulsion: {
+                    centralGravity: 0.3,
+                    springLength: 130,
+                    springConstant: 0.04,
+                    nodeDistance: 170,
+                    damping: 0.09,
+                  },
+                  solver: 'repulsion',
+                  stabilization: { iterations: 250, fit: true },
+                },
+                interaction: { hover: true, tooltipDelay: 150, zoomView: true },
+                edges: { smooth: { type: 'continuous', roundness: 0.3 } },
+                nodes: { shadow: { enabled: true, size: 4, color: 'rgba(0,0,0,0.35)' } },
+              });
+
+              testsNetwork.once('stabilizationIterationsDone', function() {
+                testsNetwork.fit({ animation: { duration: 300, easingFunction: 'easeInOutQuad' } });
+              });
+            }
+
+            // ── View switch (Dependencies <-> Tests) ───────────────────────────────────
+            var currentView = 'graph'; // 'graph' | 'tests'
+
+            function switchView(view) {
+              if (view === currentView) return;
+              currentView = view;
+
+              var visGraph   = document.getElementById('vis-graph');
+              var visTests   = document.getElementById('vis-tests-graph');
+              var btnGraph   = document.getElementById('btn-view-graph');
+              var btnTests   = document.getElementById('btn-view-tests');
+              var depthCtrl  = document.getElementById('depth-ctrl');
+              var copyBtn    = document.getElementById('btn-copy-diagram');
+              var legendEl   = document.getElementById('legend');
+
+              if (view === 'tests') {
+                if (visGraph)  visGraph.style.display  = 'none';
+                if (visTests)  visTests.style.display  = 'block';
+                if (depthCtrl) depthCtrl.classList.remove('visible');
+                if (copyBtn)   copyBtn.classList.remove('visible');
+                if (legendEl)  legendEl.classList.remove('visible');
+                if (btnGraph)  btnGraph.classList.remove('active');
+                if (btnTests)  btnTests.classList.add('active');
+                if (FOCUSED) {
+                  buildTestsGraph(FOCUSED);
+                  setTimeout(function() {
+                    if (testsNetwork) {
+                      testsNetwork.redraw();
+                      testsNetwork.fit({ animation: { duration: 200, easingFunction: 'easeInOutQuad' } });
+                    }
+                  }, 30);
+                }
+              } else {
+                if (visGraph)  visGraph.style.display  = 'block';
+                if (visTests)  visTests.style.display  = 'none';
+                if (btnGraph)  btnGraph.classList.add('active');
+                if (btnTests)  btnTests.classList.remove('active');
+                // Restore depth/copy/legend visibility if a service is selected
+                if (selected) {
+                  if (depthCtrl) depthCtrl.classList.add('visible');
+                  if (copyBtn)   copyBtn.classList.add('visible');
+                  if (legendEl)  legendEl.classList.add('visible');
+                }
+              }
+            }
+
             // ── Helpers ────────────────────────────────────────────────────────────────
             function groupByDepth(distMap) {
               const g = {};
@@ -1624,6 +1803,12 @@ module Kaskd
             // Export
             document.getElementById('btn-export').addEventListener('click', exportJSON);
 
+            // View switch
+            var btnViewGraph = document.getElementById('btn-view-graph');
+            var btnViewTests = document.getElementById('btn-view-tests');
+            if (btnViewGraph) btnViewGraph.addEventListener('click', function() { switchView('graph'); });
+            if (btnViewTests) btnViewTests.addEventListener('click', function() { switchView('tests'); });
+
             // ── Init ───────────────────────────────────────────────────────────────────
             loadData();
           })();

data/lib/kaskd/lens/version.rb

@@ -2,6 +2,6 @@
 
 module Kaskd
   module Lens
-    VERSION = "0.1.1"
+    VERSION = "0.1.3"
   end
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: kaskd-lens
 version: !ruby/object:Gem::Version
-  version: 0.1.1
+  version: 0.1.3
 platform: ruby
 authors:
 - nildiert