Repository navigation
Expand file tree
/
Copy pathip_bar_diagram.html
More file actions
159 lines (158 loc) · 8.9 KB
/
Copy pathip_bar_diagram.html
File metadata and controls
159 lines (158 loc) · 8.9 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<title>TCP Analysis</title>
<script src="https://d3js.org/d3.v7.min.js"></script>
<link rel="stylesheet" href="ip_bar_diagram.css">
</head>
<body>
<div id="main-layout">
<div id="chart-column">
<div id="chart-container">
<div id="chart"></div>
<div id="loadingMessage"></div>
</div>
<!-- Zoom controls overlay (outside scrollable area) -->
<div id="zoomControlsOverlay">
<div id="zoomIndicator">
<div id="zoomTimeRange">-</div>
<div id="zoomResolution"></div>
</div>
<div id="zoomButtonsGroup">
<button id="zoomInBtn" title="Zoom in">+</button>
<button id="zoomOutBtn" title="Zoom out">−</button>
</div>
</div>
<!-- Bottom overlay: main chart timeline axis + size/flag legends -->
<div id="chart-bottom-overlay">
<svg id="chart-bottom-overlay-svg"></svg>
</div>
<div id="overview-container" style="display: none;">
<div style="text-align: center; margin-bottom: 5px; color: #6c757d; font-size: 12px; font-weight: bold;">
Timeline Overview - Drag to Navigate
</div>
<div id="overview-chart"></div>
</div>
</div>
</div><!-- end #main-layout -->
<aside id="control-panel">
<div id="control-panel-drag-handle">
<span class="control-panel-title">Controls</span>
<span id="control-panel-collapse-icon">▼</span>
</div>
<div class="controls">
<div class="control-group">
<label>IP Addresses</label>
<div id="ipSelector" style="border: 1px solid #dee2e6; padding: 10px; background: white; border-radius: 4px;">
<div style="margin-bottom: 10px;">
<input type="text" id="ipSearch" placeholder="Search IP addresses..." style="width: 100%; padding: 5px; margin-bottom: 10px; border: 1px solid #ced4da; border-radius: 3px;">
<button id="selectAllIPs" style="margin-right: 10px;">Select All</button>
<button id="clearAllIPs">Clear All</button>
</div>
<div id="ipCheckboxes" style="max-height: 200px; overflow-y: auto;"></div>
</div>
</div>
<div class="control-group">
<label>TCP Flags</label>
<div id="flagStats" style="min-width: 200px; border: 1px solid #dee2e6; padding: 10px; background: white; border-radius: 4px; font-size: 12px;">
<div style="color: #666;">No data loaded</div>
</div>
<label style="margin-top:4px;">Packet Count</label>
<div id="sizeLegend" style="border: 1px solid #dee2e6; padding: 8px; background: white; border-radius: 4px; font-size: 12px;">
<div style="color: #666;">No data loaded</div>
</div>
</div>
<div class="control-group collapsible collapsed">
<label class="collapsible-header"><span>IP Statistics</span><span class="collapse-icon">▼</span></label>
<div class="collapsible-body">
<div id="ipStats" style="min-width: 250px; max-height: 200px; overflow-y: auto; border: 1px solid #dee2e6; padding: 10px; background: white; border-radius: 4px; font-size: 12px;">
<div style="color: #666;">Select IPs to view statistics</div>
</div>
</div>
</div>
<div class="control-group collapsible collapsed">
<label class="collapsible-header"><span>TCP Flow Visualization</span><span class="collapse-icon">▼</span></label>
<div class="collapsible-body">
<div style="border: 1px solid #dee2e6; padding: 10px; background: white; border-radius: 4px; font-size: 12px;">
<label style="display: flex; align-items: center; margin-bottom: 5px;">
<input type="checkbox" id="showTcpFlows" style="margin-right: 8px;" checked>
Show TCP Flow Packets
</label>
<label style="display: flex; align-items: center; margin-bottom: 5px;">
<input type="checkbox" id="showEstablishment" style="margin-right: 8px;" checked>
Show Establishment Phase
</label>
<label style="display: flex; align-items: center; margin-bottom: 5px;">
<input type="checkbox" id="showDataTransfer" style="margin-right: 8px;" checked>
Show Data Transfer Phase
</label>
<label style="display: flex; align-items: center; margin-bottom: 5px;">
<input type="checkbox" id="showClosing" style="margin-right: 8px;" checked>
Show Closing Phase
</label>
<div id="tcpFlowStats" style="color: #666; font-size: 11px; margin-top: 10px;">
No TCP flows detected
</div>
</div>
</div>
</div>
<div class="control-group collapsible collapsed">
<label class="collapsible-header"><span>Ground Truth Events</span><span class="collapse-icon">▼</span></label>
<div class="collapsible-body">
<div style="border: 1px solid #dee2e6; padding: 10px; background: white; border-radius: 4px; font-size: 12px;">
<label style="display: flex; align-items: center; margin-bottom: 5px;">
<input type="checkbox" id="showGroundTruth" style="margin-right: 8px;">
Show Ground Truth Event Boxes
</label>
<div id="groundTruthStats" style="color: #666; font-size: 11px; margin-top: 5px;">
Loading ground truth data...
</div>
</div>
</div>
</div>
<div class="control-group collapsible collapsed">
<label class="collapsible-header"><span>View Mode</span><span class="collapse-icon">▼</span></label>
<div class="collapsible-body">
<div style="border: 1px solid #dee2e6; padding: 10px; background: white; border-radius: 4px; font-size: 12px;">
<div style="margin-bottom: 10px;">
<label style="display:flex; align-items:center; gap:8px; cursor:pointer; margin-bottom: 5px;">
<input type="radio" id="renderModeCircles" name="renderMode" value="circles" checked>
<span>Arc View (Circles)</span>
</label>
<label style="display:flex; align-items:center; gap:8px; cursor:pointer;">
<input type="radio" id="renderModeBars" name="renderMode" value="bars">
<span>Stacked Bars View</span>
</label>
</div>
</div>
</div>
</div>
<button id="resetView">Reset View</button>
</div>
</aside>
<div id="tooltip" class="tooltip" style="display: none;"></div>
<!-- Flow List Modal -->
<div id="flowListModalOverlay" class="modal-overlay" role="dialog" aria-modal="true" aria-labelledby="flowListModalTitle">
<div class="modal" id="flowListModal">
<div class="modal-header">
<h3 id="flowListModalTitle">Flows</h3>
<div id="flowListModalCount" style="margin-left:auto; color:#6c757d; font-size:12px;"></div>
</div>
<div class="modal-body">
<div style="margin-bottom:8px; display:flex; gap:8px; align-items:center;">
<input type="text" id="flowListModalSearch" placeholder="Search flows..." style="flex:1; padding:6px; border:1px solid #ced4da; border-radius:4px;">
<button id="flowListModalSelectAll" class="modal-primary-btn" title="Select all flows in this list">Select All</button>
<button id="flowListModalClearAll" class="modal-close-btn" title="Clear selection for this list">Clear All</button>
</div>
<div id="flowListModalList" style="max-height:60vh; overflow:auto; border:1px solid #e9ecef; border-radius:6px; padding:6px; background:#fff;"></div>
</div>
<div class="modal-actions">
<button id="flowListModalClose" class="modal-close-btn">Close</button>
</div>
</div>
</div>
<script type="module" src="./viewer_loader.js"></script>
</body>
</html>