code-ranker-viewer 1.0.0-alpha.5

Code Ranker HTML viewer: self-contained interactive report with embedded snapshots.
Documentation 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>code-ranker report</title>
<link rel="stylesheet" href="./index.css">
<script src="./graphviz.umd.js"></script>
<script src="./snarkdown.umd.js"></script>
<script src="./data.js"></script>
</head>
<body>

<header>
  <div class="header-row">
    <span class="header-brand">CODE RANKER</span>
    <span class="header-title" id="title"></span>
    <div class="header-meta">
      <!-- Each snapshot control shows its branch + commit. Click the body → show
           that side on the map; click the ⚙ gear → details + upload/remove actions. -->
      <div class="snap-group" data-snap="baseline" title="Click to view the baseline on the map">
        <span class="meta-info" id="meta-baseline-info"><code id="meta-baseline-name"></code><span class="mc" id="meta-baseline-commit"></span></span>
        <button class="snap-edit" type="button" title="Snapshot details &amp; actions">⚙</button>
      </div>
      <button class="meta-mode" id="meta-mode" type="button">toggle</button>
      <div class="snap-group" data-snap="current" title="Click to view the current snapshot on the map">
        <span class="meta-info" id="meta-current-info"><code id="meta-current-name"></code><span class="mc" id="meta-current-commit"></span></span>
        <button class="snap-edit" type="button" title="Snapshot details &amp; actions">⚙</button>
      </div>
      <span class="custom-indicator" id="custom-indicator"></span>
    </div>
  </div>
  <input type="file" id="input-baseline" accept=".json,.html" style="display:none">
  <input type="file" id="input-current"  accept=".json,.html" style="display:none">
</header>

<main>

<!-- ── Files view (the single graph level) ───────────────────────────────── -->
<section class="view active" data-view="files">
  <div class="frame-wrap">
    <div class="svg-frame" id="frame-files"></div>
    <div class="loading-indicator" id="loading-files">Loading…</div>
    <!-- Focus breadcrumb trail — populated by renderBreadcrumb() in map-interactions.js. -->
    <div class="drill-breadcrumb" id="drill-breadcrumb-files" style="display:none"></div>
    <!-- Relative "dig" (level-of-detail) control: − dig out (collapse the deepest
         crates into folders) / + dig in (descend into folders within crates).
         Top-left next to the map; shown in the overview, hidden while drilled. -->
    <div class="dig-lod" id="dig-lod-files">
      <div class="dig-lod-col">
        <button class="dig-lod-btn" type="button" data-lod="out" title="Dig out — collapse the deepest crates into folders">−</button>
        <span class="dig-lod-count" data-count="out"></span>
      </div>
      <div class="dig-lod-col">
        <span class="dig-lod-val">crate</span>
        <span class="dig-lod-count" data-count="cur"></span>
      </div>
      <div class="dig-lod-col">
        <button class="dig-lod-btn" type="button" data-lod="in" title="Dig in — descend into folders within crates">+</button>
        <span class="dig-lod-count" data-count="in"></span>
      </div>
    </div>
    <div class="size-controls">
      <div class="size-row" data-row="metric">
        <button class="size-mode-btn active" data-size="dot"  title="Default box mode">■</button>
        <button class="size-mode-btn"        data-size="loc"  title="Size ∝ source lines of code">SLOC</button>
        <button class="size-mode-btn"        data-size="hk"   title="Size ∝ Henry–Kafura">HK</button>
      </div>
      <div class="size-row" data-row="filter">
        <button class="size-mode-btn" data-filter="cycle" title="Show only nodes in dependency cycles (+ their connections)">cycle</button>
      </div>
    </div>
    <div class="zoom-controls">
      <button class="zoom-btn" data-zoom="fullscreen" title="Fullscreen">⛶</button>
      <button class="zoom-btn" data-zoom="in">+</button>
      <button class="zoom-btn" data-zoom="fit">fit</button>
      <button class="zoom-btn" data-zoom="out">−</button>
    </div>
    <!-- Keyboard-shortcut legend; key labels are filled per-platform in JS. -->
    <div class="kbd-hints" id="kbd-hints"></div>
  </div>
</section>

<!-- ── Summary ───────────────────────────────────────────────────────────── -->
<section class="summary collapsed">
  <div class="node-table-header" id="summary-header">
    <span id="summary-title">Diff summary</span>
  </div>
  <div class="node-table-body">
    <div class="node-table-container" id="summary-container">
      <table class="node-table summary-table">
        <thead id="summary-thead"></thead>
        <tbody id="summary-tbody"></tbody>
      </table>
    </div>
  </div>
</section>

</main>

<div id="tt" class="tt" hidden></div>

<script src="./schema.js"></script>
<script src="./grouping.js"></script>
<script src="./diff.js"></script>
<script src="./layout.js"></script>
<script src="./utils.js"></script>
<script src="./tooltip.js"></script>
<script src="./modal.js"></script>
<script src="./panzoom.js"></script>
<script src="./source-links.js"></script>
<script src="./node-popup.js"></script>
<script src="./modal-content.js"></script>
<script src="./map-interactions.js"></script>
<script src="./map-render.js"></script>
<script src="./ui.js"></script>
<script src="./summary.js"></script>
<script src="./export-popup.js"></script>
<script src="./node-table.js"></script>
<script src="./nav.js"></script>
<script src="./view-state.js"></script>
<script src="./snap-controls.js"></script>
<script src="./app.js"></script>
</body>
</html>