Skip to content

Commit 9975976

Browse files
maximyurchukmaximyurchuk
authored
Update webtreemap from arcadia (#5145)
1 parent 208706d commit 9975976

File tree

4 files changed

+297
-294
lines changed

4 files changed

+297
-294
lines changed

‎ydb/ci/build_bloat/html/bloat.css

Lines changed: 36 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -3,47 +3,55 @@
33
body {
44
font-family: sans-serif;
55
font-size: 0.8em;
6-
margin: 2ex 4ex;
6+
height: calc(100vh - 20px);
77
}
88

9-
h1 {
10-
font-weight: normal;
9+
.content {
10+
height: 100%;
11+
display: flex;
12+
flex-direction: column;
13+
gap: 1ex;
1114
}
1215

13-
#map {
16+
.header {
1417
width: 100%;
15-
height: 600px;
16-
17-
position: relative;
18-
cursor: pointer;
19-
-webkit-user-select: none;
18+
display: flex;
19+
flex-direction: row;
20+
flex-wrap: wrap;
21+
vertical-align: middle;
2022
}
2123

22-
legend {
23-
float: right;
24-
padding: 0;
24+
.header div {
25+
padding: 1ex 1em;
2526
}
2627

27-
legend div {
28-
display: inline-block;
29-
vertical-align: middle;
30-
position: static !important;
28+
.header legend {
29+
display: flex;
30+
flex-direction: row;
31+
gap: 1em;
32+
padding: 0;
3133
}
3234

33-
legend > div {
34-
width: 62px;
35-
height: 27px;
35+
.header .note {
36+
width: 100%;
37+
flex-basis: content;
38+
flex-grow: 1;
3639
}
3740

38-
legend > div > div {
39-
width: 50px;
40-
height: 15px;
41-
margin: 5px;
42-
text-align: center;
41+
.header .webtreemap-node {
42+
flex-basis: max-content;
43+
flex-grow: 0;
44+
position: relative;
45+
text-align: center;
4346
}
4447

45-
legend h2 {
46-
display: inline-block;
47-
font-weight: initial;
48-
vertical-align: middle;
48+
#map {
49+
flex-basis: 100%;
50+
51+
min-width: 300px;
52+
min-height: 300px;
53+
54+
position: relative;
55+
cursor: pointer;
56+
user-select: none;
4957
}

‎ydb/ci/build_bloat/html/index.html

Lines changed: 23 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,34 @@
11
<!DOCTYPE html>
22
<!-- Based on https://github.com/martine/webtreemap -->
33
<head>
4-
<title>binary size</title>
5-
<link rel="stylesheet" href="webtreemap.css">
6-
<link rel="stylesheet" href="bloat.css">
7-
<script src='webtreemap.js'></script>
4+
<title>Build bloat</title>
5+
<link rel="stylesheet" href="webtreemap.css">
6+
<link rel="stylesheet" href="bloat.css">
87
</head>
98

109
<body>
11-
<legend>
12-
<h2>Legend:</h2>
13-
<div class="webtreemap-node webtreemap-symbol-dir webtreemap-aggregate">
14-
<div class="webtreemap-node webtreemap-symbol-dir">
15-
Dir
10+
<div class="content">
11+
<div class="header">
12+
<div class="note">Click on a box to zoom in. Click on the outermost box to zoom out.</div>
13+
<legend>
14+
<div>Legend:</div>
15+
<div class="webtreemap-node webtreemap-type-dir">Dir</div>
16+
<div class="webtreemap-node webtreemap-type-cpp">Cpp</div>
17+
<div class="webtreemap-node webtreemap-type-h">Header</div>
18+
</legend>
1619
</div>
20+
<div id='map'></div>
1721
</div>
18-
<div class="webtreemap-node webtreemap-symbol-cpp webtreemap-aggregate">
19-
<div class="webtreemap-node webtreemap-symbol-cpp">
20-
Cpp
21-
</div>
22-
</div>
23-
<div class="webtreemap-node webtreemap-symbol-h webtreemap-aggregate">
24-
<div class="webtreemap-node webtreemap-symbol-h">
25-
Header
26-
</div>
27-
</div>
28-
</legend>
29-
30-
<h1>build time bloat</h1>
31-
<p>Click on a box to zoom in. Click on the outermost box to zoom out.</p>
32-
33-
<div id='map'></div>
3422

35-
<script src="bloat.json"></script>
36-
<script>
37-
var map = document.getElementById('map');
38-
appendTreemap(map, kTree);
39-
</script>
23+
<script src="bloat.json"></script>
24+
<script type="text/javascript" src='webtreemap.js'></script>
25+
<script type="text/javascript">
26+
var map = document.getElementById('map');
27+
var bloat = null;
4028

29+
renderTreemap(map, kTree);
30+
window.addEventListener("resize", (event) => {
31+
renderTreemap(map, kTree);
32+
});
33+
</script>
4134
</body>

‎ydb/ci/build_bloat/html/webtreemap.css

Lines changed: 12 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,49 +1,39 @@
1-
/* Based on https://github.com/martine/webtreemap */
2-
31
.webtreemap-node {
42
/* Required attributes. */
53
position: absolute;
64
overflow: hidden; /* To hide overlong captions. */
75
background: white; /* Nodes must be opaque for zIndex layering. */
8-
border: solid 1px black; /* Calculations assume 1px border. */
6+
border: solid 1px #555; /* Calculations assume 1px border. */
97

108
/* Optional: CSS animation. */
11-
-webkit-transition: top 0.3s,
12-
left 0.3s,
13-
width 0.3s,
14-
height 0.3s;
9+
transition: top 0.3s,
10+
left 0.3s,
11+
width 0.3s,
12+
height 0.3s;
1513
}
1614

1715
/* Optional: highlight nodes on mouseover. */
1816
.webtreemap-node:hover {
19-
background: #eee;
17+
background: #FFFFFF;
2018
}
2119

22-
/* Optional: Different background colors depending on symbol. */
23-
.webtreemap-symbol-h {
20+
/* Optional: Different background colors depending on type. */
21+
.webtreemap-type-h {
2422
background: #66C2A5;
2523
}
26-
.webtreemap-symbol-cpp {
24+
.webtreemap-type-cpp {
2725
background: #FC8D62;
2826
}
29-
.webtreemap-symbol-dir {
27+
.webtreemap-type-dir {
3028
background: #8DA0CB;
3129
}
32-
.webtreemap-symbol-dir.webtreemap-aggregate {
33-
background: #CBD5E8;
34-
}
35-
.webtreemap-symbol-cpp.webtreemap-aggregate {
36-
background: #FDCDAC;
37-
}
38-
.webtreemap-symbol-h.webtreemap-aggregate {
39-
background: #E6F5C9;
40-
}
4130

4231
#legend > * {
4332
border: solid 1px #444;
4433
}
4534

4635
/* Optional: Different borders depending on level. */
36+
/*
4737
.webtreemap-level0 {
4838
border: solid 1px #444;
4939
}
@@ -59,6 +49,7 @@
5949
.webtreemap-level4 {
6050
border: solid 1px #ccc;
6151
}
52+
*/
6253

6354
/* Optional: styling on node captions. */
6455
.webtreemap-caption {

0 commit comments

Comments
 (0)