netviz/index.html at main · ethp2p/netviz · GitHub

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
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>netviz</title>
<meta name="description" content="High-performance time-traveling visualizer for networking data. WebGL2/WebGPU.">
<meta property="og:type" content="website">
<meta property="og:title" content="netviz">
<meta property="og:description" content="High-performance time-traveling visualizer for networking data. WebGL2/WebGPU.">
<meta property="og:url" content="https://netviz.ethp2p.dev">
<meta property="og:image" content="https://netviz.ethp2p.dev/og.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="netviz network visualization showing 500 nodes with colored state indicators and edge connections">
<meta property="og:site_name" content="netviz">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="netviz">
<meta name="twitter:description" content="High-performance time-traveling visualizer for networking data. WebGL2/WebGPU.">
<meta name="twitter:image" content="https://netviz.ethp2p.dev/og.png">
<meta name="twitter:image:alt" content="netviz network visualization">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Ubuntu+Sans+Mono:wght@400..700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/src/style.css">
</head>
<body>
<div id="app">
  <!-- Toolbar -->
  <div id="toolbar">
    <label id="file-label" for="file-input">Load trace</label>
    <input type="file" id="file-input">
    <span id="file-name"></span>
    <div id="msg-picker" style="display:none">
      <span class="tb-label">segment</span>
      <select id="msg-select" disabled></select>
    </div>
    <div id="decoder-picker" style="display:none">
      <span class="tb-label">decoder</span>
      <button id="decoder-btn" class="tb-btn" title="Switch decoder"></button>
      <div id="decoder-dropdown" class="dd-dropdown">
        <div id="dd-bundled"></div>
        <div id="dd-user"></div>
        <div class="dd-divider"></div>
        <label id="dd-load-label" class="dd-action" for="dd-load-input">Load decoder (.js)</label>
        <input type="file" id="dd-load-input" accept=".js" style="display:none">
        <div id="dd-error"></div>
      </div>
    </div>
    <div class="tb-sep"></div>
    <div id="theme-picker">
      <span class="tb-label">theme</span>
      <button id="theme-btn" class="tb-btn" title="Switch theme">Stone</button>
      <div id="theme-dropdown" class="dd-dropdown"></div>
    </div>
    <a id="github-link" href="https://github.com/ethp2p/netviz" target="_blank" rel="noopener" title="View on GitHub">
      <svg width="18" height="18" viewBox="0 0 16 16" fill="currentColor"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0016 8c0-4.42-3.58-8-8-8z"/></svg>
      <span>ethp2p/netviz</span>
    </a>
  </div>

  <!-- Main area -->
  <div id="main">
    <!-- Stats panel -->
    <div id="stats-panel">
      <button class="mobile-close" id="mobile-stats-close" aria-label="Close">&times;</button>
      <h2>Statistics</h2>
    </div>

    <!-- Map -->
    <div id="map-container">
      <div id="mode-switcher">
        <button class="mode-tab active" data-mode="force">Force</button>
        <button class="mode-tab" data-mode="hops">Hops</button>
        <button class="mode-tab" data-mode="latency">Latency</button>
        <button class="mode-tab" data-mode="race">Race</button>
      </div>
      <canvas id="deck-canvas"></canvas>
      <canvas id="ring-canvas"></canvas>
      <div id="empty-state">
        <h1>netviz</h1>
        <p class="desktop-only">Load a trace file to begin</p>
        <p class="mobile-only">Tap below to load an example trace</p>
        <a id="load-example" href="#">Load an example</a>
        <p class="mobile-only mobile-hint">For full features, use a desktop browser</p>
      </div>
      <div id="load-progress" aria-live="polite">
        <div id="lp-title">Loading trace</div>
        <div id="lp-status"></div>
        <div id="lp-bar"><div id="lp-fill"></div></div>
      </div>
      <div id="node-legend">
        <button class="mobile-close" id="mobile-legend-close" aria-label="Close">&times;</button>
        <div class="nl-titlebar">
          <span class="nl-title">Legend</span>
          <button id="settings-btn" title="Graph settings">
            <svg width="12" height="12" viewBox="0 0 16 16" fill="currentColor"><path d="M7.07 0l-.59 2.12A5.97 5.97 0 004.6 3.26L2.53 2.35.93 5.12l1.78 1.24a6.1 6.1 0 000 3.28L.93 10.88l1.6 2.77 2.07-.91a5.97 5.97 0 001.88 1.14L7.07 16h3.2l.59-2.12a5.97 5.97 0 001.88-1.14l2.07.91 1.6-2.77-1.78-1.24a6.1 6.1 0 000-3.28l1.78-1.24-1.6-2.77-2.07.91a5.97 5.97 0 00-1.88-1.14L10.27 0H7.07zM8.67 5.33a2.67 2.67 0 110 5.34 2.67 2.67 0 010-5.34z"/></svg>
          </button>
        </div>
        <div id="legend-fills"></div>
        <div id="legend-rings"></div>
        <div id="settings-panel"></div>
      </div>
      <div id="tooltip"></div>
      <!-- Mobile drawer toggles -->
      <button id="mobile-stats-toggle" class="mobile-drawer-btn mobile-top" aria-label="Toggle stats">
        <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor"><path d="M2 3h12v1.5H2zm0 4h8v1.5H2zm0 4h10v1.5H2z"/></svg>
      </button>
      <div id="mobile-backdrop" class="mobile-backdrop"></div>
      <button id="mobile-legend-toggle" class="mobile-drawer-btn mobile-bottom" aria-label="Toggle legend">
        <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor"><circle cx="4" cy="4" r="2"/><circle cx="4" cy="8" r="2"/><circle cx="4" cy="12" r="2"/><rect x="8" y="3" width="6" height="2"/><rect x="8" y="7" width="6" height="2"/><rect x="8" y="11" width="6" height="2"/></svg>
      </button>
      <!-- Timeline (floating overlay) -->
      <div id="timeline-bar">
        <div id="tl-controls">
          <button class="tb-btn tb-icon-btn" id="btn-reset" disabled title="Reset to start">
            <svg width="12" height="12" viewBox="0 0 16 16" fill="currentColor"><rect x="1" y="1" width="4" height="14"/><polygon points="15,1 6,8 15,15"/></svg>
          </button>
          <button class="tb-btn tb-icon-btn" id="btn-play" disabled title="Play/Pause (Space)">
            <svg id="icon-play" width="12" height="12" viewBox="0 0 16 16" fill="currentColor"><polygon points="3,1 13,8 3,15"/></svg>
            <svg id="icon-pause" width="12" height="12" viewBox="0 0 16 16" fill="currentColor" style="display:none"><rect x="2" y="1" width="4" height="14"/><rect x="10" y="1" width="4" height="14"/></svg>
          </button>
        </div>
        <div id="tl-scrubber">
          <div id="tl-track-wrap">
            <input type="range" id="timeline" min="0" max="1000000" value="0" step="1" disabled>
            <div id="tl-markers"></div>
          </div>
        </div>
        <div id="tl-right">
          <div id="tl-time">
            <span id="tl-current">0.000ms</span>
            <span id="tl-total">0.000ms</span>
          </div>
          <div class="tl-sep"></div>
          <input type="text" id="speed-input" list="speed-presets" value="1x" disabled title="Playback speed">
          <datalist id="speed-presets">
            <option value="0.1x">
            <option value="0.25x">
            <option value="0.5x">
            <option value="1x">
            <option value="2x">
            <option value="5x">
          </datalist>
        </div>
      </div>
    </div>

    <!-- Event log -->
    <div id="event-log">
      <div id="event-log-header">
        <span>Event log</span>
        <span class="clear-filter" id="clear-filter">clear filter</span>
      </div>
      <div id="event-type-filter"></div>
      <div id="event-log-list"></div>
      <div id="country-dist"></div>
      <div id="bw-dist"></div>
    </div>
  </div>
</div>

<script type="module" src="/src/app.ts"></script>
</body>
</html>