Skip to content

Commit

Permalink
template modified (erikbern#3)
Browse files Browse the repository at this point in the history
  • Loading branch information
@shanghaikid
shanghaikid authored Mar 2, 2020
1 parent eb6d651 commit 6a4c1c3
Show file tree
Hide file tree
Showing 4 changed files with 124 additions and 108 deletions.
7 changes: 5 additions & 2 deletions templates/chartjs.template
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
<div class="chart" id="s{{ xlabel }}{{ ylabel }}{{ label }}">
<h3>{{xlabel}}/{{ylabel}}</h3>
<div id="{{ xlabel }}{{ ylabel }}{{ label }}">
<canvas id="chart{{ xlabel }}{{ ylabel }}{{ label }}" width="800" height="600"></canvas>
<canvas id="chart{{ xlabel }}{{ ylabel }}{{ label }}" width="100%"></canvas>
<script>
var ctx = document.getElementById("chart{{ xlabel }}{{ ylabel }}{{ label }}");
var chart = new Chart(ctx, {
Expand All @@ -25,7 +26,7 @@
{% endfor %}
]},
options: {
responsive: false,
responsive: true,
title:{
display:true,
text: '{{ plot_label }}'
Expand Down Expand Up @@ -100,3 +101,5 @@
</pre>
</div>
{% endif %}
</div>

30 changes: 12 additions & 18 deletions templates/detail_page.html
View file
Original file line number Diff line number Diff line change
@@ -1,23 +1,17 @@
{% extends "general.html" %}

{% block content %}
<div class="container">
{% for item in plot_data.keys() %}
{% if item=="normal" %}
{% if batch %}
<h2>Plots for {{title}} in batch mode</h2>
{% else %}
<h2>Plots for {{title}}</h2>
{% endif %}
{% elif item=="scatter" and args.scatter %}
{% if batch %}
<h2>Scatterplots for {{title}} in batch mode</h2>
{% else %}
<h2>Scatterplots for {{title}}</h2>
{% endif %}
{% endif %}
{% for plot in plot_data[item] %}
<div class="container">
<h1>{{ title }} </h1>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Quick Links
</button>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton"></div>
</div>
{% for plot in plot_data["normal"] %}
{{ plot }}
{% endfor %}
<hr />
{{plot_data["scatter"][loop.index - 1]}}
{% endfor %}

{% endblock %}
125 changes: 69 additions & 56 deletions templates/general.html
View file
Original file line number Diff line number Diff line change
@@ -1,58 +1,71 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>{{ title }}</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Bootstrap -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<style>
body { padding-top: 50px; }
</style>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>

<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="index.html">ANN Benchmarks</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="index.html">Home</a></li>
</ul>
<ul class="nav navbar-nav">
<li class="active"><a href="index.html#datasets">Datasets</a></li>
</ul>
<ul class="nav navbar-nav">
<li class="active"><a href="index.html#algorithms">Algorithms</a></li>
</ul>
<ul class="nav navbar-nav">
<li class="active"><a href="index.html#contact">Contact</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>

{% block content %} {% endblock %}

<div id="contact">
<h2>Contact</h2>
<p>ANN-Benchmarks has been developed by Martin Aumueller ([email protected]), Erik Bernhardsson ([email protected]), and Alec Faitfull ([email protected]). Please use
<a href="https://github.com/erikbern/ann-benchmarks/">Github</a> to submit your implementation or improvements.</p>
</div>
</div>
</body>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>{{ title }}</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.js"></script>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<style>
body {
padding-top: 25px;
}
</style>

</head>
<body>
{% block content %} {% endblock %}
</div>
</body>
<style>
.container {
width: 100%;
position: relative;
padding-top: 40px;
}
.chart {
margin: 16px;
width: 100%;
}
.dropdown {
position: absolute;
right: 10px;
top: 10px;
}
.card {
width: 28rem;
margin-bottom: 2rem;
}
.algorithm.card {
width: 18rem;
margin-right: 2rem;
}
.algorithmResult {
display: flex;
}
</style>
<script type="text/javascript">
window.addEventListener('load', () => {
let canvas = [...document.querySelectorAll('.chart')];
let originIds = canvas.map(c => c.id.replace('s', ''));
canvas.forEach(c => {
c.id = c.id.replace(/\s/g, '')
});
let ids = canvas.map(c => c.id);
let menu = document.querySelector('.dropdown-menu');
ids.forEach((id, index) => {
const item = document.createElement('a');
item.className="dropdown-item";
item.href = `#${id}`;
item.innerHTML = originIds[index];
menu.appendChild(item);
})
});
</script>
</html>

70 changes: 38 additions & 32 deletions templates/summary.html
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
{% extends "general.html" %}
{% block content %}
<div class="container">

<h1>Info</h1>
<p>ANN-Benchmarks is a benchmarking environment for approximate nearest neighbor algorithms search. This website contains the current benchmarking results. Please visit <a href="http://github.com/erikbern/ann-benchmarks/">http://github.com/erikbern/ann-benchmarks/</a> to get an overview over evaluated data sets and algorithms. Make a pull request on <a href="http://github.com/erikbern/ann-benchmarks/">Github</a> to add your own code or improvements to the
benchmarking system.
Expand All @@ -18,43 +19,48 @@ <h2>Benchmarks for Batched Queries</h2>
{% else %}
<h2>Benchmarks for Single Queries</h2>
{% endif %}

<h2 id ="datasets">Results by Dataset</h2>
{% for distance_data in dataset_with_distances[type] %}
<h3>Distance: {{ distance_data.name }} </h3>
{% for entry in distance_data.entries %}
<a href="./{{label_func(entry.name, type == 'batch')}}.html">
<div class="row" id="{{entry.name}}">
<div class = "col-md-4 bg-success">
<h4>{{entry.desc}}</h4>
<div class="resultsContainer">
<div class="datasetsContainer">
<h2 id ="datasets">Results by Dataset</h2>
{% for distance_data in dataset_with_distances[type] %}
<h3>Distance: {{ distance_data.name }} </h3>
{% for entry in distance_data.entries %}
<div class="card">
<div class="card-body">
<h5 class="card-title">{{entry.name}}</h5>
<a href="./{{label_func(entry.name, type == 'batch')}}.html">
<img class="card-img-top" src="{{label_func(entry.name, type == 'batch')}}.png" />
</a>
<p class="card-text">{{entry.desc}}</p>
<a href="./{{label_func(entry.name, type == 'batch')}}.html" class="btn btn-primary">Detail</a>
</div>
</div>
<div class = "col-md-8">
<img class = "img-responsive" src="{{label_func(entry.name, type == 'batch')}}.png" />
{% endfor %}
{% endfor %}
</div>
<div class="algorithmsContainer">
<h2 id="algorithms">Results by Algorithm</h2>
<!-- <ul class="list-inline"><b>Algorithms:</b>
{% for algo in algorithms[type].keys() %}
<li><a href="#{{algo}}">{{algo}}</a></li>
{% endfor %}
</ul> -->
<div class="algorithmResult">
{% for algo in algorithms[type].keys()%}
<div class="algorithm card" >
<div class="card-body">
<h5 class="card-title">{{algo}}</h5>
<a href="./{{label_func(algo, type == 'batch')}}.html">
<img class="card-img-top" src="{{label_func(algo, type == 'batch')}}.png" />
</a>
<a href="./{{label_func(algo, type == 'batch')}}.html" class="btn btn-primary">Detail</a>
</div>
</div>
</a>
<hr />
{% endfor %}
{% endfor %}
<h2 id="algorithms">Results by Algorithm</h2>
<ul class="list-inline"><b>Algorithms:</b>
{% for algo in algorithms[type].keys() %}
<li><a href="#{{algo}}">{{algo}}</a></li>
{% endfor %}
</ul>
{% for algo in algorithms[type].keys()%}
<a href="./{{label_func(algo, type == 'batch')}}.html">
<div class="row" id="{{algo}}">
<div class = "col-md-4 bg-success">
<h4>{{algo}}</h4>
</div>
<div class = "col-md-8">
<img class = "img-responsive" src="{{label_func(algo, type == 'batch')}}.png" />
</div>
</div>
</a>
<hr />
{% endfor %}
</div>
</div>
{% endif %}
{% endfor %}
{% endblock %}

0 comments on commit 6a4c1c3

Please sign in to comment.