Skip to content

Commit

Permalink
Improve website structure and style (#55)
Browse files Browse the repository at this point in the history 
* Change special characters to HTML entities

* Add default CSS styles

* Add top nav on benchmark page

* Improve base CSS styles

* Changed main font family to Fira
* Added default header sizes
* Added main navigation bar
* Removed table borders
* Added table stripes
* Right-aligned stddev/delta in tables for easier reading

* Left align table headers by default

* Only show anchor link on hover

* Make benchmark pages have consistent tables

* Add collapsibles
  • Loading branch information
@camchenry @anp
camchenry authored and anp committed Oct 15, 2018
1 parent aa011a0 commit de6e060
Show file tree
Hide file tree
Showing 3 changed files with 222 additions and 52 deletions.
164 changes: 163 additions & 1 deletion templates/base.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,165 @@

<head>
<title>lolbench - {% block title %}{{ title }}{% endblock %}</title>
{% block head %}{% endblock %}
{% block head %}
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Fira+Mono|Fira+Sans:400,700" rel="stylesheet">
<link href="https://unpkg.com/houdinijs@9.4.2/dist/css/houdini.min.css" rel="stylesheet">

{% block style %}
<style>
/* HTML tags */
body {
font-family: "Fira Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-size: 16px;
line-height: 1.25;
}

a {
text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: 400;
}
h1 {
font-size: 2.5rem;
}
h2 {
font-size: 1.875rem;
}
h3 {
font-size: 1.5rem;
}
h4 {
font-size: 1.25rem;
}
h5 {
font-size: 1.1rem;
}
h6 {
font-size: 1rem;
}

#content {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 10px;
position: relative;
}

/* Nav */
.nav {
padding: 0.5rem 0;
border-bottom: 2px solid #ccc;
margin-bottom: 1rem;
}
.nav-brand {
font-size: 1.875rem;
font-weight: 900;
margin: 0;
}

.nav-menu {
display: flex;
list-style: none;
padding-left: 0;
align-items: center;
margin: 0;
}
.nav-item {
flex: 0 auto;
padding: 1.25rem 1rem;
}
.nav-item:first-child {
padding-left: 0;
}
.nav-item:last-child {
padding-right: 0;
}

.home-link:visited {
color: inherit;
}

.benchmark-name {
font-size: 2.5rem;
word-break: break-word;
}

/* Links */
.anchor {
color: inherit;
}
.anchor-header:hover .anchor:hover::before {
position: absolute;
left: -55px;
content: '\2002\00a7\2002';
}
:target {
background: #FDFFD3;
}

/* Collapsibles */
.collapse-toggle {
position: absolute;
left: -23px;
color: #999;
}
.collapse-toggle:active,
.collapse-toggle:hover,
.collapse-toggle:visited {
color: inherit;
}

/* Tables */
.table {
width: 100%;
max-width: 100%;
margin-bottom: 1rem;
font-family: "Fira Mono", "SF Mono", "Consolas", monospace;
border-collapse: collapse;
}
.table tr {
border-bottom: 1px solid #ccc;
}
.table th,
.table td {
text-align: left;
padding: 5px;
}
.table tbody tr:nth-of-type(2n) {
background-color: rgba(0, 0, 0, 0.05);
}

.bench-headers .bench-delta,
.bench-headers .bench-stddev {
text-align: center;
max-width: 10rem;
}

.bench-row .bench-delta,
.bench-row .bench-stddev {
text-align: right;
width: 5.5rem;
}

.negative-result {
background-color: #ffb3b3;
}
.positive-result {
background-color: #b3ffc6;
}

</style>
{% endblock %}
{% endblock %}
</head>

<body>
Expand All @@ -12,6 +170,10 @@
</div>

{% block scripts %}
<script src="https://unpkg.com/houdinijs@9.4.2/dist/js/houdini.min.js" type="text/javascript"></script>
<script>
houdini.init();
</script>
{% endblock %}
</body>

Expand Down
50 changes: 28 additions & 22 deletions templates/benchmark.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,47 +2,53 @@

{% block title %}{{name}}{% endblock %}

{% block head %}
<style>
</style>
{% endblock %}

{% block content %}
<h1><a href="../index.html">lolbench</a></h1>
<h2>benchmark name: {{name}}</h2>
<nav class="nav">
<ul class="nav-menu">
<li class="nav-item"><h1 class="nav-brand"><a class="home-link" href="../index.html">lolbench</a></h1></li>
</ul>
</nav>
<h1 class="benchmark-name">{{ name }}</h1>

{% for metric in self.metrics_with_anomaly_indices() %}
<a id="{{ metric }}"></a>
<h3><a href="#{{ metric }}">*</a> {{ metric }} / iteration</h3>
<h2 class="anchor-header" id="{{ metric }}">
<a class="anchor" href="#{{ metric }}">{{ metric }} / iteration</a>
</h2>

<div id="{{ metric }}-chart" style="width: 100%; height: 600px"></div>
<div id="{{ metric }}-chart" style="width: 100%; height: auto"></div>

<h4>potential anomalies</h4>
<table border="1">
<thead>
<h3>potential anomalies</h3>
<table class="table table-striped bench-table">
<thead class="bench-headers">
<tr>
<th>toolchain</th>
<th>delta</th>
<th class="bench-delta">% &Delta;</th>
<th class="bench-stddev">&sigma; &Delta;</th>
</tr>
</thead>
<tbody>
{% for timing in anomalous_timings %}
<tr>
<tr class="bench-row";>
<td>{{ timing.0 }}</td>
<td>{{ timing.1.index[metric] }}</td>
<td class="bench-delta {% if (timing.1.index[metric]).percent_delta_from_mean.is_sign_negative() -%} positive-result
{% else %} negative-result {%- endif %}">{{ (timing.1.index[metric]).percent_delta_from_mean.raw()|float_fmt }}</td>
<td class="bench-stddev {% if (timing.1.index[metric]).stddev_from_mean.is_sign_negative() -%} positive-result
{% else %} negative-result {%- endif %}">{{ (timing.1.index[metric]).stddev_from_mean.raw()|float_fmt }}</td>
</tr>
{% endfor %}
</tbody>
</table>
{% endfor %}

<a id="branch-predict-ratio"></a>
<h3><a href="#branch-predict-ratio">*</a> overall branch predict ratio</h3>
<div id="branch-predict-ratio-chart" style="width: 100%; height: 600px"></div>
<h2 class="anchor-header" id="branch-predict-ratio">
<a class="anchor" href="#branch-predict-ratio">overall branch predict ratio</a>
</h2>
<div id="branch-predict-ratio-chart" style="width: 100%; height: auto"></div>

<a id="cache-ratio"></a>
<h3><a href="#cache-ratio">*</a> overall cache hit ratio</h3>
<div id="cache-ratio-chart" style="width: 100%; height: 600px"></div>
<h2 class="anchor-header" id="cache-ratio">
<a class="anchor" href="#cache-ratio">overall cache hit ratio</a>
</h2>
<div id="cache-ratio-chart" style="width: 100%; height: auto"></div>

<script src="https://cdn.jsdelivr.net/npm/highcharts@6/highcharts.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/highcharts@6/highcharts-more.min.js"></script>
Expand Down
60 changes: 31 additions & 29 deletions templates/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,16 +2,14 @@

{% block title %}home{% endblock %}

{% block head %}
<style>
</style>
{% endblock %}

{% block content %}
<h1>lolbench home</h1>

<b><a href="#recent-changes">potentially anomalous results</a> | <a href="#all-benchmarks">all
benchmarks</a></b>
<nav class="nav">
<ul class="nav-menu">
<li class="nav-item"><h1 class="nav-brand">lolbench</h1></li>
<li class="nav-item"><a href="#recent-changes">potentially anomalous results</a></li>
<li class="nav-item"><a href="#all-benchmarks">all benchmarks</a></li>
</ul>
</nav>

<h2>about</h2>

Expand Down Expand Up @@ -43,32 +41,36 @@ <h2><a id="recent-changes" />potentially anomalous results</h2>
</p>

{% for anomaly in analysis.anomalous_timings %}
<a id="{{ anomaly.0 }}"></a>
<h3><a href="#{{ anomaly.0 }}">*</a> {{ anomaly.0 }}</h3>
<h3 class="anchor-header" id={{ anomaly.0 }}>
<a href="#contents-{{ anomaly.0 }}" data-collapse class="collapse-toggle">[<span class="collapse-text-show">+</span><span class="collapse-text-hide">-</span>]</a>
<a class="anchor" href="#{{ anomaly.0 }}">{{ anomaly.0 }}</a>
</h3>

<table border="1">
<thead>
<th>benchmark</th>
<th>% Δ</th>
<th>σ Δ</th>
</thead>
<div class="collapse" id="contents-{{ anomaly.0 }}">
<table class="table table-striped bench-table">
<thead class="bench-headers">
<th>benchmark</th>
<th class="bench-delta">% &Delta;</th>
<th class="bench-stddev">&sigma; &Delta;</th>
</thead>

{% for noteworthy in anomaly.1 %}
<tr>
<td>{{ noteworthy.benchmark_for_linking().link()|safe }}</td>
<td {% if noteworthy.index.nanoseconds.stddev_from_mean.is_sign_negative() -%} bgcolor="#b3ffc6"
{% else %} bgcolor="#ffb3b3" {%- endif %}>{{ noteworthy.index.nanoseconds.percent_delta_from_mean.raw()|float_fmt }}
%</td>
<td {% if noteworthy.index.nanoseconds.stddev_from_mean.is_sign_negative() -%} bgcolor="#b3ffc6"
{% else %} bgcolor="#ffb3b3" {%- endif %}>{{ noteworthy.index.nanoseconds.stddev_from_mean.raw()|float_fmt }}</td>
</tr>
{% endfor %}
</table>
{% for noteworthy in anomaly.1 %}
<tr class="bench-row">
<td>{{ noteworthy.benchmark_for_linking().link()|safe }}</td>
<td class="bench-delta {% if noteworthy.index.nanoseconds.stddev_from_mean.is_sign_negative() -%} positive-result
{% else %} negative-result {%- endif %}">{{ noteworthy.index.nanoseconds.percent_delta_from_mean.raw()|float_fmt }}
%</td>
<td class="bench-stddev {% if noteworthy.index.nanoseconds.stddev_from_mean.is_sign_negative() -%} positive-result
{% else %} negative-result {%- endif %}">{{ noteworthy.index.nanoseconds.stddev_from_mean.raw()|float_fmt }}</td>
</tr>
{% endfor %}
</table>
</div>
{% endfor %}

<h2><a id="all-benchmarks" />all benchmarks</h2>

<table border="1">
<table class="table">
<tbody>
{% for benchmark in benchmarks %}
<tr>
Expand Down

0 comments on commit de6e060

Please sign in to comment.