Skip to content

Commit 201ba54

Browse files
Liby99Liby99
committed
Adding visualization webpage
1 parent 698fb72 commit 201ba54

File tree

4 files changed

+1248
-0
lines changed

4 files changed

+1248
-0
lines changed

‎visualization/css/basic.css‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
.diff-file {
2+
margin-top: 10px;
3+
padding: 10px;
4+
}
5+
6+
.diff-file pre {
7+
line-height: 16px;
8+
width: 100%;
9+
}
10+
11+
.diff-file pre .line {
12+
line-height: 16px;
13+
margin: 0;
14+
padding: 0;
15+
}
16+
17+
.diff-file pre .line.remove {
18+
background-color: rgba(255, 0, 0, 0.2);
19+
}
20+
21+
.diff-file pre .line.add {
22+
background-color: rgba(0, 255, 0, 0.2);
23+
}
24+
25+
.code-flows {
26+
display: flex;
27+
flex-wrap: nowrap;
28+
width: 100%;
29+
overflow-x: auto;
30+
}
31+
32+
.code-flow {
33+
transition: all 0.1s;
34+
width: 480px;
35+
min-width: 480px;
36+
max-height: 480px;
37+
overflow-y: scroll;
38+
overflow-x: hidden;
39+
}
40+
41+
.code-flow + .code-flow {
42+
margin-left: 15px;
43+
}
44+
45+
.code-flow-item {
46+
padding: 2px 10px;
47+
border-bottom: 0;
48+
}
49+
50+
.code-flow-item:hover {
51+
background-color: rgba(0, 0, 0, 0.08);
52+
}

‎visualization/index.html‎

Lines changed: 139 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,139 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8" />
5+
6+
<!-- Vendor Stylesheets -->
7+
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
8+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
9+
10+
<!-- Vendor Scripts -->
11+
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
12+
<script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.4.1/papaparse.min.js"></script>
13+
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
14+
15+
<!-- OURS -->
16+
<link rel="stylesheet" href="css/basic.css" />
17+
</head>
18+
<body>
19+
20+
<!-- Sidebar -->
21+
<div id="sidebar" class="d-flex flex-column align-items-stretch flex-shrink-0 bg-white border-right" style="width: 380px; position: absolute; height: 100%; border-right: 1px solid rgba(0, 0, 0, 0.2);">
22+
<div id="sidebar-header" href="#" class="d-flex align-items-center justify-content-between flex-shrink-0 p-3 link-dark text-decoration-none border-bottom">
23+
<span class="fs-5 fw-semibold">CWE-Bench-Java</span>
24+
<div class="dropdown">
25+
<button class="btn btn-outline-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
26+
<i class="fa fa-bars"></i>
27+
</button>
28+
<ul class="dropdown-menu">
29+
<li><a id="sidebar-filter-all-button" class="dropdown-item" href="/codeql/strategies_v2/visualization/viewer.html">All</a></li>
30+
<li><a id="sidebar-filter-22-button" class="dropdown-item" href="/codeql/strategies_v2/visualization/viewer.html?cwe=22">CWE-022</a></li>
31+
<li><a id="sidebar-filter-78-button" class="dropdown-item" href="/codeql/strategies_v2/visualization/viewer.html?cwe=78">CWE-078</a></li>
32+
<li><a id="sidebar-filter-79-button" class="dropdown-item" href="/codeql/strategies_v2/visualization/viewer.html?cwe=79">CWE-079</a></li>
33+
<li><a id="sidebar-filter-94-button" class="dropdown-item" href="/codeql/strategies_v2/visualization/viewer.html?cwe=94">CWE-094</a></li>
34+
</ul>
35+
</div>
36+
</div>
37+
<div class="list-group list-group-flush border-bottom scrollarea" id="sidebar-cwe-list" style="overflow-y: scroll; height: calc(100% - 63px);"></div>
38+
</div>
39+
40+
<!-- Main content -->
41+
<main class="d-flex flex-column bg-body-tertiary align-items-stretch bg-white" style="margin-left: 380px; width: calc(100% - 380px); position: absolute; height: 100%; overflow-y: scroll; overflow-x: hidden;">
42+
<div class="container">
43+
44+
<!-- Top section in main -->
45+
<div class="mt-5 mb-3 p-3 bg-body border rounded shadow-sm">
46+
<div class="d-flex justify-content-between align-items-center border-bottom pb-2">
47+
<h5 class="mb-0">
48+
<a href="#" target="_blank" id="title-author"></a>
49+
/
50+
<a href="#" target="_blank" id="title-package"></a>
51+
/
52+
<a href="#" target="_blank" id="title-tag"></a>
53+
:
54+
<span id="title-cve-id"></span>
55+
<a href="#" target="_blank" id="title-nvd-link" style="text-decoration: none;">
56+
<span class="badge text-bg-primary" style="margin-left: 3px">NVD</span>
57+
</a>
58+
</h5>
59+
<button class="btn btn-sm btn-outline-primary" id="project-copy" onclick="navigator.clipboard.writeText($(this).attr('aria-data'))" aria-data="">
60+
Copy Project Identifier&nbsp;
61+
<i class="fa-regular fa-clipboard"></i>
62+
</button>
63+
</div>
64+
<div class="text-body-secondary pt-3 border-bottom">
65+
<p>
66+
<strong>Vulnerability Description:</strong>
67+
<span id="vulnerability-description"></span>
68+
</p>
69+
</div>
70+
<div class="text-body-secondary pt-3 border-bottom">
71+
<p>
72+
<strong>Fixing Commits:</strong>
73+
<span id="fixing-commits"></span>
74+
</p>
75+
</div>
76+
<div class="text-body-secondary pt-3">
77+
<p>
78+
<strong>Fixing Locations:</strong>
79+
<span id="fixing-locs"></span>
80+
</p>
81+
</div>
82+
</div>
83+
84+
<!-- Tabs in main -->
85+
<ul class="nav nav-tabs" id="result-tabs" role="tablist">
86+
<li class="nav-item active" role="presentation">
87+
<button class="nav-link" id="fix-tab" data-bs-toggle="tab" data-bs-target="#fix" type="button" role="tab" aria-controls="fix" aria-selected="true">Commits and Fixes</button>
88+
</li>
89+
</ul>
90+
<div class="my-3 p-3 bg-body rounded-bottom border border-top-0 shadow-sm" style="margin-top: 0!important;">
91+
<div class="tab-content" id="result-tab-contents">
92+
<div class="tab-pane fade show active" id="fix" role="tabpanel" aria-labelledby="fix-tab">
93+
<h6>Fixes for this CVE:</h6>
94+
<div id="fix-file-diffs"></div>
95+
</div>
96+
</div>
97+
</div>
98+
</div>
99+
</main>
100+
101+
<!-- Buttons -->
102+
<div class="position-fixed bottom-0 end-0 my-4 me-4 d-flex">
103+
<button class="d-inline-block btn btn-light border-primary text-primary border py-2 align-items-center" type="button">
104+
<span id="bd-theme-text" class="mr-1">Download&nbsp;</span>
105+
<i class="fa fa-download"></i>
106+
</button>
107+
<button class="d-inline-block btn btn-light border-primary text-primary border py-2 align-items-center ms-2" type="button">
108+
<span id="bd-theme-text" class="mr-1">Save&nbsp;</span>
109+
<i class="fa fa-floppy-disk"></i>
110+
</button>
111+
<button class="d-inline-block btn btn-light border-primary text-primary border py-2 align-items-center ms-2" type="button" onclick="$('main').animate({ scrollTop: 0 }, 'slow')">
112+
<span id="bd-theme-text" class="mr-1">Back to Top&nbsp;</span>
113+
<i class="fa fa-up-long"></i>
114+
</button>
115+
</div>
116+
<div class="position-fixed top-0 end-0 my-4 me-4 d-flex">
117+
<button class="d-inline-block btn btn-light border-primary text-primary border py-2 align-items-center" data-bs-toggle="modal" data-bs-target="#search-modal" type="button">
118+
<i class="fa-solid fa-magnifying-glass"></i>
119+
</button>
120+
</div>
121+
122+
<!-- Modals -->
123+
<div class="modal fade" id="search-modal" tabindex="-1" aria-labelledby="search-modal" aria-hidden="true">
124+
<div class="modal-dialog">
125+
<div class="modal-content">
126+
<div class="modal-body">
127+
<input type="text" class="form-control" id="search-input" placeholder="Search by CWE, CVE ID, project names..." />
128+
<div id="search-result-collapse" class="collapse pt-3 mt-3 border-top" style="max-height: 600px; overflow-y: scroll;">
129+
<div class="list-group rounded border-top border-bottom" id="search-result-list"></div>
130+
</div>
131+
</div>
132+
</div>
133+
</div>
134+
</div>
135+
136+
<script src="js/config.js"></script>
137+
<script src="js/basic.js"></script>
138+
</body>
139+
</html>

0 commit comments

Comments
 (0)