Create tabs on benchmakrs page with benchmakrs for each tab

_includes/head.html

@@ -7,6 +7,7 @@
   <!-- google fonts -->
   <link defer async href="https://fonts.googleapis.com/css?family=Fira+Sans|Sen:800&display=swap" rel="stylesheet">
   <!-- stylesheet -->
+  <link defer async rel="stylesheet" href="{{ "/assets/tabs.css" | relative_url }}">
   <link defer async rel="stylesheet" href="{{ "/assets/style.css" | relative_url }}">
   <link defer async rel="stylesheet" href="{{ "/assets/media.css" | relative_url }}">
   <link defer async rel="stylesheet" href="{{ "/assets/github.css" | relative_url }}">

_layouts/benchmarks.html

@@ -22,12 +22,55 @@
         {{ content }}
     </div>
 
+    <!-- TODO clean up this code a bit -->
+
+    {% assign folders = "" | split: ", " %}
     {% for image in site.static_files %}
-    {% if image.path contains 'benchmarks' %}
-    <figure>
-        <img src="{{ site.baseurl }}{{ image.path }}" alt="image" width="30%" />
-        <figcaption>{{ image.name }}</figcaption>
-    </figure>
+    {% if image.path contains 'criterion/' %}
+    {% assign imagepath = image.path | split: "/" %}
+    {% for subpath in imagepath %}
+    {% if forloop.index0 == 3 %}
+    {% assign folders = folders | append: pathName %}
+    {% endif %}
+    {% endfor %}
     {% endif %}
     {% endfor %}
+    {% assign folders = folders | uniq %}
+
+    <!-- {% assign folders = "" | split: ", " %}
+    {% for folder in site.static_files %}
+    {% if folder.path contains 'criterion/' %}
+    {% assign temp = folder.path | split: 'criterion/' %}
+    {% assign pathName = temp[1] | split: '/' | first %}
+    {% assign pathName = pathName | split: ", " %}
+    {% assign folders = folders | concat: pathName %}
+    {% endif %}
+    {% endfor%}
+    {% assign folders = folders | uniq %} -->
+
+    <!-- TODO check if the folders list is empty, if so, display corresponding message -->
+    <!-- TODO add text that explains the violin plots -->
+
+    <ul class="tab" data-tab="benchmarks">
+        {% for folder in folders %}
+        <li {% if forloop.index==1 %} class="active" {% endif %}>
+            <a href="">{{ folder }}</a>
+        </li>
+        {% endfor%}
+    </ul>
+    <ul class="tab-content" id="benchmarks">
+        {% for folder in folders %}
+        <li {% if forloop.index==1 %} class="active" {% endif %}>
+            <br>
+            {% for image in site.static_files %}
+            {% if image.path contains folder %}
+            <figure>
+                <img src="{{ site.baseurl }}{{ image.path }}" alt="image" width="50%" />
+                <figcaption>{{ image.name }}</figcaption>
+            </figure>
+            {% endif %}
+            {% endfor%}
+        </li>
+        {% endfor%}
+    </ul>
 </div>

_layouts/default.html

@@ -15,6 +15,7 @@
 
     {%- include footer.html -%}
 
+  <script src="{{ "/assets/js/tabs.js" | relative_url }}"></script>
   </body>
 
 </html>

assets/js/tabs.js

@@ -0,0 +1,43 @@
+const removeActiveClasses = function (ulElement) {
+    const lis = ulElement.querySelectorAll('li');
+    Array.prototype.forEach.call(lis, function(li) {
+        li.classList.remove('active');
+    });
+  }
+
+  const getChildPosition = function (element) {
+        var parent = element.parentNode;
+        var i = 0;
+        for (var i = 0; i < parent.children.length; i++) {
+            if (parent.children[i] === element) {
+                return i;
+            }
+        }
+
+        throw new Error('No parent found');
+    }
+
+window.addEventListener('load', function () {
+    const tabLinks = document.querySelectorAll('ul.tab li a');
+
+    Array.prototype.forEach.call(tabLinks, function(link) {
+      link.addEventListener('click', function (event) {
+        event.preventDefault();
+
+        liTab = link.parentNode;
+        ulTab = liTab.parentNode;
+        position = getChildPosition(liTab);
+        if (liTab.className.includes('active')) {
+          return;
+        }
+
+        removeActiveClasses(ulTab);
+        tabContentId = ulTab.getAttribute('data-tab');
+        tabContentElement = document.getElementById(tabContentId);
+        removeActiveClasses(tabContentElement);
+
+        tabContentElement.querySelectorAll('li')[position].classList.add('active');
+        liTab.classList.add('active');
+      }, false);
+    });
+});

assets/tabs.css

@@ -0,0 +1,48 @@
+.tab {
+    display: flex;
+    flex-wrap: wrap;
+    margin-left: -20px;
+    padding: 0;
+    list-style: none;
+    position: relative;
+}
+
+.tab > * {
+    flex: none;
+    padding-left: 20px;
+    position: relative;
+}
+
+.tab > * > a {
+    display: block;
+    text-align: center;
+    padding: 9px 20px;
+    color: #999;
+    border-bottom: 2px solid transparent;
+    border-bottom-color: transparent;
+    font-size: 12px;
+    text-transform: uppercase;
+    transition: color .1s ease-in-out;
+    line-height: 20px;
+}
+
+.tab > .active > a {
+    color:#222;
+    border-color: #1e87f0;
+}
+
+.tab li a {
+    text-decoration: none;
+        cursor: pointer;
+}
+
+.tab-content{
+    padding: 0;
+}
+
+.tab-content li {
+    display: none;
+}
+.tab-content li.active {
+    display: initial;
+}