Sfairchild/leaderboard score graph

.gitignore

@@ -0,0 +1,11 @@
+.sass-cache/
+__pycache__
+brain_score.web.egg-info/
+build/
+db.sqlite3
+dist/
+django.log
+node_modules/
+static/admin/
+static/CACHE/
+venv

README.md

@@ -1,11 +1,46 @@
 [![Build Status](https://travis-ci.com/brain-score/brain-score.web.svg?branch=master)](https://travis-ci.com/brain-score/brain-score.web)
 
 ## Setup
-Install dependencies: `pip install .`
+
+Ensure you are using `[email protected]`
+
+Create and activate a virtual environment
+
+```
+python3 -m venv <env_name>
+source <env_name>/bin/activate
+```
+
+Install dependencies:
+
+```
+python3 -m pip install --upgrade pip
+pip3 install -r requirements.txt
+```
 
 Install node dependencies: `npm install --no-optional`
 
-Run server: `python manage.py runserver &`
+Run server in dev: `DEBUG=True python manage.py runserver &`
+
+
+### Setup Errors - troubleshooting
+
+Error installing sass with pip:
+
+```
+ERROR: Failed building wheel for sass
+```
+
+Install `cython` and try again
+
+```
+pip3 install cython
+pip3 install -r requirements.txt
+```
+
+Error installing `psycopg2` Error: pg_config executable not found. - Install postgresql `brew install postgresql`
+
+Error running the server  - `/bin/sh: command not found: sass` - `npm install -g sass`
 
 
 ## Update data

benchmarks/templates/benchmarks/base.html

@@ -23,37 +23,48 @@
     </script>
 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:400,600,300,800,700,400italic" />
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" />
 
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
     {% compress css %}
-    <link type="text/x-sass" rel="stylesheet" href="{% static "/benchmarks/css/main.sass" %}" charset="utf-8">
+    <link type="text/x-sass" rel="stylesheet" href="{% static "/benchmarks/css/main.sass" %}?{% now "U" %}" charset="utf-8">
     {% endcompress %}
 
     {# libraries #}
-    <script defer src="https://code.jquery.com/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
+    <script defer src="https://kit.fontawesome.com/2180d98b9d.js" crossorigin="anonymous"></script>
+    <script defer src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
     <script defer src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
     <script defer src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>
+    <script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>
+    <script defer src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.0/chart.umd.js" integrity="sha512-6HrPqAvK+lZElIZ4mZ64fyxIBTsaX5zAFZg2V/2WT+iKPrFzTzvx6QAsLW2OaLwobhMYBog/+bvmIEEGXi0p1w==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
 
     {# data #}
     <script type="text/javascript">
         comparison_data = {{ comparison_data|safe }};
     </script>
+    <script type="text/javascript">
+        score_accuracy_chart = {{ graph_data|safe }};
+    </script>
 
     {# own sources #}
     {% compress js %}
     <script defer src="{% static "/benchmarks/js/navbar.js" %}" type="text/javascript" charset="utf-8"></script>
     <script defer src="{% static "/benchmarks/js/scrolling-active.js" %}" charset="utf-8"></script>
     <script defer src="{% static "/benchmarks/js/jquery.tablesorter.min.js" %}" type="text/javascript" charset="utf-8"></script>
     <script defer src="{% static "/benchmarks/js/table.js" %}" type="text/javascript" charset="utf-8"></script>
+    <script defer src="{% static "/benchmarks/js/score-accuracy-graph.js" %}" type="text/javascript" charset="utf-8"></script>
     <script defer src="{% static "/benchmarks/js/compare.js" %}" charset="utf-8"></script>
     <script defer src="{% static "/benchmarks/js/table-expansion.js" %}"></script>
     <script defer src="{% static "/benchmarks/js/table-public.js" %}"></script>
     <script defer src="{% static "/benchmarks/js/collapsible.js" %}"></script>
     <script defer src="{% static "/benchmarks/js/tab.js" %}"></script>
     <script defer src="{% static "/benchmarks/js/tab-competition.js" %}"></script>
+    <script defer src="{% static "/benchmarks/js/password_effect.js" %}"></script>
     {% endcompress %}
 
     <script type="application/ld+json">
@@ -90,47 +101,13 @@
 
     <title>{{title}}</title>
 </head>
-<body class="page-main">
-
-{% block navbar %}
-<nav class="navbar is-fixed-top is-transparent" role="navigation" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
-<div class="container">
-    <div class="navbar-brand">
-        <a href="{{url}}" class="navbar-item">
-            <img src="{{logo_url}}" />
-        </a>
-
-        <a role="button" class="navbar-burger" data-target="navMenu" aria-label="menu" aria-expanded="false">
-            <span aria-hidden="true"></span>
-            <span aria-hidden="true"></span>
-            <span aria-hidden="true"></span>
-        </a>
-    </div>
-    <div id="navMenu" class="navbar-menu">
-        <div class="navbar-end">
-            <a class="navbar-item" href="http://{{ request.get_host }}/{{ domain }}/#leaderboard">Leaderboard</a>
-            <a class="navbar-item" href="http://{{ request.get_host }}/{{ domain }}/#about">About</a>
-            <a class="navbar-item" href="http://{{ request.get_host }}/{{ domain }}/#compare">Compare</a>
-            <a class="navbar-item" href="http://{{ request.get_host }}/{{ domain }}/#participate">Participate</a>
-        </div>
-    </div>
-</div>
-</nav>
-{% endblock %}
-
-
-<main class="content">
-{% block content %}{% endblock %}
-</main>
-
-<footer>
-    <br />
-    <div class="content has-text-centered">
-        <p><a href="https://github.com/brain-score">Brain-Score team</a></p>
-    </div>
-</footer>
 
+<body>
+    <main>
+        {% block main %}{% endblock %}
+    </main>
 </body>
+
 </html>
 
 {% endwith %}

benchmarks/templates/benchmarks/central_profile.html

@@ -1,6 +1,6 @@
 {% extends 'benchmarks/base.html' %}
 {% load static %}
-{% block content %}
+{% block main %}
 
     {% if user %}
         <section id="profile" class="container center">
@@ -45,4 +45,4 @@ <h1>{{ user.email }}</h1>
 
     {% else %}
     {% endif %}
-{% endblock %}
+{% endblock %}

benchmarks/templates/benchmarks/competition.html

@@ -2,7 +2,7 @@
 {% load static %}
 
 {# site navigation #}
-{% block navbar %}
+{% block main %}
     <nav class="navbar is-fixed-top is-transparent" role="navigation"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
         <div class="container">
@@ -31,9 +31,6 @@
             </div>
         </div>
     </nav>
-{% endblock %}
-
-{% block content %}
     <section class="hero competition-hero">
         <div class="hero-body container">
             <p class="title">

benchmarks/templates/benchmarks/components/app-view.html

@@ -0,0 +1,36 @@
+{% extends "benchmarks/base.html" %}
+
+{% load static %}
+
+{% block main %}
+<div class="left-sidebar">
+  {% include "benchmarks/components/left-sidebar.html" %}
+</div>
+
+<div class="content-container">
+  <div class="social-icons">
+    <a href="https://github.com/brain-score" target="_blank" rel="noopener noreferrer">
+      <i class="fa-brands fa-square-github"></i>
+    </a>
+    <a href="https://twitter.com/brain_score" target="_blank" rel="noopener noreferrer">
+      <i class="fa-brands fa-square-twitter"></i>
+    </a>
+  </div>
+  <div class="banner box gradient">
+    {% block banner %}
+    <h1>Welcome to Brain-Score!</h1>
+    <p>Navigate our dashboard to view key submission data.</p>
+    {% endblock %}
+  </div>
+
+  <div class="columns main-content">
+    <div class="column is-three-quarters">
+      {% block content %}{% endblock %}
+    </div>
+
+    <div class="info-section column">
+      {% block info_section %}{% endblock %}
+    </div>
+  </div>
+</div>
+{% endblock %}

benchmarks/templates/benchmarks/components/left-sidebar.html

@@ -0,0 +1,18 @@
+{% load static %}
+<a class="brainscore-logo" href="http{% if request.is_secure %}s{% endif %}://{{ request.get_host }}/2023"><img src="{% static "/benchmarks/img/b-w_logo.png" %}" alt="Brain-Score Logo"></a>
+<a class="selected" href="http{% if request.is_secure %}s{% endif %}://{{ request.get_host }}/{{ domain }}/">
+	<img src="{% static "/benchmarks/img/leaderboard_icon.png" %}" alt="Brain-Score Logo">
+	<span>Leaderboard</span>
+</a>
+<a href="http{% if request.is_secure %}s{% endif %}://{{ request.get_host }}/{{ domain }}/#compare">
+	<img src="{% static "/benchmarks/img/compare_icon.png" %}" alt="Brain-Score Logo">
+	<span>Compare</span>
+</a>
+<a href="http{% if request.is_secure %}s{% endif %}://{{ request.get_host }}/tutorial ">
+	<img src="{% static "/benchmarks/img/tutorial_icon.png" %}" alt="Brain-Score Logo">
+	<span>Tutorials</span>
+</a>
+<a href="http{% if request.is_secure %}s{% endif %}://{{ request.get_host }}/profile/{{ domain }}">
+	<img src="{% static "/benchmarks/img/profile_icon.png" %}" alt="Brain-Score Logo">
+	<span>Profile</span>
+</a>

benchmarks/templates/benchmarks/index.html

@@ -1,6 +1,6 @@
 {% extends "benchmarks/base.html" %}
 
-{% block content %}
+{% block main %}
 
     <section id="leaderboard" class="container tablecenter is-centered">
         {% include "benchmarks/table.html" %}

benchmarks/templates/benchmarks/invalid_zip.html

@@ -1,6 +1,6 @@
 {% extends 'benchmarks/base.html' %}
 
-{% block content %}
+{% block main %}
     <section id="success" class="container center">
 
         <article class="message">