tcp_analysis_v1.4/attack-network.html at main · iDataVisualizationLab/tcp_analysis_v1.4 · 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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Network TimeArcs</title>
  <script src="https://d3js.org/d3.v7.min.js"></script>
  <link rel="stylesheet" href="shared.css">
  <link rel="stylesheet" href="attack-network.css">
  <link rel="preconnect" href="https://d3js.org" />
  <link rel="dns-prefetch" href="https://d3js.org" />
</head>
<body>
  <div class="sticky-header">
    <div class="secondary-controls">
      <div style="display:flex; align-items:center; gap:8px; padding:4px 8px; border:1px solid #dee2e6; border-radius:4px;">
        <label for="fileInput" style="font-size:12px; font-weight:600; white-space:nowrap;">CSV File(s):</label>
        <input id="fileInput" type="file" accept=".csv" multiple style="font-size:12px; cursor:pointer;" />
      </div>
      <fieldset style="border:1px solid #dee2e6; padding:4px 8px; border-radius:4px; display:flex; gap:8px; align-items:center;">
        <legend style="font-size:12px; padding:0 4px; font-weight:600;">Network Mode</legend>
        <label style="display:flex; align-items:center; gap:4px; font-size:12px; cursor:pointer;">
          <input type="radio" name="labelMode" value="timearcs" id="labelModeTimearcs">
          <span>Time Line View</span>
        </label>
        <label style="display:flex; align-items:center; gap:4px; font-size:12px; cursor:pointer;">
          <input type="radio" name="labelMode" value="force_layout" id="labelModeForceLayout" checked>
          <span>Network View</span>
        </label>
      </fieldset>
      <div style="display:flex; align-items:center; gap:8px; padding:4px 8px; border:1px solid #dee2e6; border-radius:4px;">
        <label for="compressionSlider" style="font-size:12px; font-weight:600; white-space:nowrap;">Zoom:</label>
        <input type="range" id="compressionSlider" min="1" max="10" step="0.5" value="3" style="width:100px; cursor:pointer;" />
        <span id="compressionValue" style="font-size:12px; min-width:24px; text-align:right;">3x</span>
      </div>
      <div id="bifocalRegionIndicator" style="display:none; font-size:11px; padding:4px 8px; background:#e7f3ff; border:1px solid #74c0fc; border-radius:4px; font-weight:600; color:#1971c2;">
        <span id="bifocalRegionText">Focus: 35% - 65%</span>
      </div>
      <div style="border-left: 2px solid #dee2e6; height: 30px; margin: 0 4px;"></div>
      <button id="clearBrush" class="cp-btn" title="Clear all selections">
        <span>✕ Clear Selections</span>
      </button>
      <div id="componentInfo" style="display:none; font-size:11px; padding:4px 8px; background:#e7f5ff; border:1px solid #74c0fc; border-radius:4px; margin-left:8px;">
        <span style="font-weight:600;">Components:</span>
        <span id="componentCount">0</span>
        <span style="opacity:0.7; margin-left:4px;">(<span id="componentIPCount">0</span> IPs)</span>
      </div>
      <div style="margin-left:auto; display:flex; align-items:center; gap:8px;">
        <div id="loadingProgress" style="display:none; width:200px; padding:4px 12px; border:1px solid #dee2e6; border-radius:4px; background:#fff;">
          <div style="font-size:10px; font-weight:600; margin-bottom:4px; color:#495057;">
            <span id="progressText">Loading...</span>
          </div>
          <div style="width:100%; height:6px; background:#e9ecef; border-radius:3px; overflow:hidden;">
            <div id="progressBar" style="width:0%; height:100%; background:#007bff; transition:width 0.2s;"></div>
          </div>
        </div>
        <div id="status" style="padding:4px 12px; border:1px solid #dee2e6; border-radius:4px; background:#f8f9fa; font-size:11px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">Waiting for data…</div>
        <button id="helpBtn" style="width:32px; height:32px; border-radius:50%; border:1px solid #dee2e6; background:#fff; cursor:help; font-size:14px; font-weight:600; transition: all 0.2s; display:flex; align-items:center; justify-content:center; padding:0;" title="⌨️ Arrow keys: move/resize focus region&#10;🖱️ Click &amp; drag: select arcs&#10;📊 Label Mode: toggle attack types&#10;📈 Compression: adjust magnification">
          ?
        </button>
      </div>
    </div>
    <svg id="axis-top"></svg>
    <svg id="bifocal-bar" width="1200" height="28" style="display:block;"></svg>
  </div>
  <main>
    <div id="chart-container">
      <svg id="chart" width="1200" height="600" aria-label="TimeArcs chart"></svg>
    </div>

    <!-- IP Communications Panel -->
    <div id="ip-communications-panel" style="margin-top: 16px; background: #fff; border: 1px solid #e9ecef; border-radius: 6px; overflow: hidden;">
      <div id="ip-comm-header" style="padding: 12px 16px; background: #f8f9fa; border-bottom: 1px solid #e9ecef; cursor: pointer; display: flex; justify-content: space-between; align-items: center;">
        <span style="font-weight: 600; font-size: 14px;">IP Communications</span>
        <div style="display: flex; align-items: center; gap: 8px;">
          <!-- <button id="exportIPList" style="padding: 4px 10px; border: 1px solid #dee2e6; border-radius: 4px; background: #007bff; color: #fff; cursor: pointer; font-size: 11px; font-weight: 600;" title="Export IP list to file">
            ⬇ Export List
          </button> -->
          <span id="ip-comm-toggle" style="font-size: 18px; transition: transform 0.2s;">▼</span>
        </div>
      </div>
      <div id="ip-comm-content" style="display: none; max-height: 500px; overflow-y: auto; padding: 12px 16px;">
        <div id="ip-comm-list" style="font-family: monospace; font-size: 12px; line-height: 1.6;"></div>
      </div>
    </div>
  </main>

  <!-- Floating Legend Panel -->
  <div id="legendPanel" class="legend-panel">
    <div class="legend-panel-header" id="legendPanelHeader">
      <span>Attack Types</span>
      <span id="legendCollapseIcon" style="font-size: 12px; transition: transform 0.2s;">▼</span>
    </div>
    <div class="legend-panel-body" id="legendPanelBody">
      <div class="legend" id="legend"></div>
    </div>
  </div>

  <div id="tooltip" class="tooltip"></div>
  <script type="module" src="./attack-network.js"></script>
  </body>
  </html>