Skip to content

Commit bfceb10

Browse files
theotherjimmytheotherjimmy
committed
Implement zoomable html-flamegraph memap output
1 parent 75cb4d7 commit bfceb10

File tree

3 files changed

+198
-2
lines changed

3 files changed

+198
-2
lines changed

‎tools/build_api.py

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -605,6 +605,9 @@ def build_project(src_paths, build_path, target, toolchain_name,
605605
map_csv = join(build_path, name + "_map.csv")
606606
memap_instance.generate_output('csv-ci', stats_depth, map_csv)
607607

608+
map_html = join(build_path, name + "_map.html")
609+
memap_instance.generate_output('html', stats_depth, map_html)
610+
608611
resources.detect_duplicates(toolchain)
609612

610613
if report != None:

‎tools/memap.py

Lines changed: 79 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,16 @@
66
from abc import abstractmethod, ABCMeta
77
from sys import stdout, exit, argv
88
from os import sep
9-
from os.path import basename, dirname, join, relpath, commonprefix
9+
from os.path import (basename, dirname, join, relpath, abspath, commonprefix,
10+
splitext)
1011
import re
1112
import csv
1213
import json
1314
from argparse import ArgumentParser
1415
from copy import deepcopy
1516
from prettytable import PrettyTable
17+
from jinja2 import FileSystemLoader, StrictUndefined
18+
from jinja2.environment import Environment
1619

1720
from .utils import (argparse_filestring_type, argparse_lowercase_hyphen_type,
1821
argparse_uppercase_type)
@@ -477,6 +480,9 @@ def __init__(self):
477480
# Flash no associated with a module
478481
self.misc_flash_mem = 0
479482

483+
# Name of the toolchain, for better headings
484+
self.tc_name = None
485+
480486
def reduce_depth(self, depth):
481487
"""
482488
populates the short_modules attribute with a truncated module list
@@ -505,7 +511,7 @@ def reduce_depth(self, depth):
505511
self.short_modules[new_name].setdefault(section_idx, 0)
506512
self.short_modules[new_name][section_idx] += self.modules[module_name][section_idx]
507513

508-
export_formats = ["json", "csv-ci", "table"]
514+
export_formats = ["json", "csv-ci", "html", "table"]
509515

510516
def generate_output(self, export_format, depth, file_output=None):
511517
""" Generates summary of memory map data
@@ -531,6 +537,7 @@ def generate_output(self, export_format, depth, file_output=None):
531537
return False
532538

533539
to_call = {'json': self.generate_json,
540+
'html': self.generate_html,
534541
'csv-ci': self.generate_csv,
535542
'table': self.generate_table}[export_format]
536543
output = to_call(file_desc)
@@ -540,6 +547,75 @@ def generate_output(self, export_format, depth, file_output=None):
540547

541548
return output
542549

550+
@staticmethod
551+
def _move_up_tree(tree, next_module):
552+
tree.setdefault("children", [])
553+
for child in tree["children"]:
554+
if child["name"] == next_module:
555+
return child
556+
else:
557+
new_module = {"name": next_module}
558+
tree["children"].append(new_module)
559+
return new_module
560+
561+
def generate_html(self, file_desc):
562+
"""Generate a json file from a memory map for D3
563+
564+
Positional arguments:
565+
file_desc - the file to write out the final report to
566+
"""
567+
tree_text = {"name": ".text"}
568+
tree_bss = {"name": ".bss"}
569+
tree_data = {"name": ".data"}
570+
for name, dct in self.modules.items():
571+
if ".text" not in dct:
572+
continue
573+
cur_text = tree_text
574+
cur_bss = tree_bss
575+
cur_data = tree_data
576+
modules = name.split(sep)
577+
while True:
578+
cur_text.setdefault("value", 0)
579+
cur_data.setdefault("value", 0)
580+
cur_bss.setdefault("value", 0)
581+
try:
582+
cur_text["value"] += dct['.text']
583+
except KeyError:
584+
pass
585+
try:
586+
cur_bss["value"] += dct['.bss']
587+
except KeyError:
588+
pass
589+
try:
590+
cur_data["value"] += dct['.data']
591+
except KeyError:
592+
pass
593+
if not modules:
594+
break
595+
next_module = modules.pop(0)
596+
cur_text = self._move_up_tree(cur_text, next_module)
597+
cur_data = self._move_up_tree(cur_data, next_module)
598+
cur_bss = self._move_up_tree(cur_bss, next_module)
599+
600+
jinja_loader = FileSystemLoader(dirname(abspath(__file__)))
601+
jinja_environment = Environment(loader=jinja_loader,
602+
undefined=StrictUndefined)
603+
604+
template = jinja_environment.get_template("memap_flamegraph.html")
605+
name, _ = splitext(basename(file_desc.name))
606+
if name.endswith("_map"):
607+
name = name[:-4]
608+
if self.tc_name:
609+
name = "%s %s" % (name, self.tc_name)
610+
data = {
611+
"name": name,
612+
"text": json.dumps(tree_text),
613+
"data": json.dumps(tree_data),
614+
"bss": json.dumps(tree_bss),
615+
}
616+
file_desc.write(template.render(data))
617+
return None
618+
543619
def generate_json(self, file_desc):
544620
"""Generate a json file from a memory map
545621
@@ -655,6 +731,7 @@ def parse(self, mapfile, toolchain):
655731
mapfile - the file name of the memory map file
656732
toolchain - the toolchain used to create the file
657733
"""
734+
self.tc_name = toolchain.title()
658735
if toolchain in ("ARM", "ARM_STD", "ARM_MICRO", "ARMC6"):
659736
parser = _ArmccParser()
660737
elif toolchain == "GCC_ARM" or toolchain == "GCC_CR":

‎tools/memap_flamegraph.html

Lines changed: 116 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
7+
8+
<link rel="stylesheet" type="text/css"
9+
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
10+
integrity="sha256-916EbMg70RQy9LHiGkXzG8hSg9EdNy97GazNG/aiY1w="
11+
crossorigin="anonymous"
12+
/>
13+
<link rel="stylesheet" type="text/css"
14+
href="https://cdn.jsdelivr.net/gh/spiermar/[email protected]/dist/d3.flameGraph.min.css"
15+
integrity="sha256-w762vSe6WGrkVZ7gEOpnn2Y+FSmAGlX77jYj7nhuCyY="
16+
crossorigin="anonymous"
17+
/>
18+
19+
<style>
20+
/* Space out content a bit */
21+
body {
22+
padding-top: 20px;
23+
padding-bottom: 20px;
24+
}
25+
/* Custom page header */
26+
.header {
27+
padding-bottom: 20px;
28+
padding-right: 15px;
29+
padding-left: 15px;
30+
border-bottom: 1px solid #e5e5e5;
31+
}
32+
/* Make the masthead heading the same height as the navigation */
33+
.header h3 {
34+
margin-top: 0;
35+
margin-bottom: 0;
36+
line-height: 40px;
37+
}
38+
</style>
39+
40+
<title>{{name}} Memory Details</title>
41+
42+
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
43+
<!--[if lt IE 9]>
44+
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js" integrity="sha256-4OrICDjBYfKefEbVT7wETRLNFkuq4TJV5WLGvjqpGAk=" crossorigin="anonymous"></script>
45+
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js" integrity="sha256-g6iAfvZp+nDQ2TdTR/VVKJf3bGro4ub5fvWSWVRi2NE=" crossorigin="anonymous"></script>
46+
<![endif]-->
47+
</head>
48+
<body>
49+
<div class="container">
50+
<div class="header clearfix">
51+
<h3 class="text-muted">{{name}} Memory Details</h3>
52+
</div>
53+
<div id="chart-text">
54+
</div>
55+
<hr/>
56+
<div id="chart-data">
57+
</div>
58+
<hr/>
59+
<div id="chart-bss">
60+
</div>
61+
<hr/>
62+
</div>
63+
64+
<script type="text/javascript"
65+
src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.10.0/d3.min.js"
66+
integrity="sha256-r7j1FXNTvPzHR41+V71Jvej6fIq4v4Kzu5ee7J/RitM="
67+
crossorigin="anonymous">
68+
</script>
69+
<script type="text/javascript"
70+
src="https://cdnjs.cloudflare.com/ajax/libs/d3-tip/0.7.1/d3-tip.min.js"
71+
integrity="sha256-z0A2CQF8xxCKuOJsn4sJ5HBjxiHHRAfTX8hDF4RSN5s="
72+
crossorigin="anonymous">
73+
</script>
74+
<script type="text/javascript"
75+
src="https://cdn.jsdelivr.net/gh/spiermar/[email protected]/dist/d3.flameGraph.min.js"
76+
integrity="sha256-I1CkrWbmjv+GWjgbulJ4i0vbzdrDGfxqdye2qNlhG3Q="
77+
crossorigin="anonymous">
78+
</script>
79+
80+
<script type="text/javascript">
81+
var tip = d3.tip()
82+
.direction("s")
83+
.offset([8, 0])
84+
.attr('class', 'd3-flame-graph-tip')
85+
.html(function(d) { return "module: " + d.data.name + ", size in bytes: " + d.data.value; });
86+
var flameGraph_text = d3.flameGraph()
87+
.transitionDuration(250)
88+
.transitionEase(d3.easeCubic)
89+
.sort(true)
90+
.title("Code (ROM)")
91+
.tooltip(tip);
92+
var flameGraph_data = d3.flameGraph()
93+
.transitionDuration(250)
94+
.transitionEase(d3.easeCubic)
95+
.sort(true)
96+
.title("Non-zero initialized data (ROM + RAM)")
97+
.tooltip(tip);
98+
var flameGraph_bss = d3.flameGraph()
99+
.transitionDuration(250)
100+
.transitionEase(d3.easeCubic)
101+
.sort(true)
102+
.title("Zero initialized data (RAM)")
103+
.tooltip(tip);
104+
var text_elem = d3.select("#chart-text");
105+
flameGraph_text.width(text_elem.node().getBoundingClientRect().width);
106+
text_elem.datum({{text}}).call(flameGraph_text);
107+
var data_elem = d3.select("#chart-data");
108+
flameGraph_data.width(data_elem.node().getBoundingClientRect().width);
109+
data_elem.datum({{data}}).call(flameGraph_data);
110+
var bss_elem = d3.select("#chart-bss");
111+
flameGraph_bss.width(bss_elem.node().getBoundingClientRect().width);
112+
bss_elem.datum({{bss}}).call(flameGraph_bss);
113+
</script>
114+
</body>
115+
</html>
116+

0 commit comments

Comments
 (0)