From 37e48c65400192cce1de0afed48dfc3e191bf749 Mon Sep 17 00:00:00 2001
From: Kartik Pradeepan <kartikspradeepan@gmail.com>
Date: Sat, 29 Mar 2025 09:43:47 -0400
Subject: [PATCH] Add starter template for use cases and fix sidebar links to
 function in local

---
 .../benchmarks/components/left-sidebar.html   | 19 ++--
 .../benchmarks/tutorials/tutorial.html        |  2 +
 .../tutorials/use-cases/use-cases.html        | 96 +++++++++++++++++++
 benchmarks/urls.py                            |  3 +
 .../css/components/left-sidebar.sass          | 11 ++-
 5 files changed, 120 insertions(+), 11 deletions(-)
 create mode 100644 benchmarks/templates/benchmarks/tutorials/use-cases/use-cases.html

diff --git a/benchmarks/templates/benchmarks/components/left-sidebar.html b/benchmarks/templates/benchmarks/components/left-sidebar.html
index d31121c45..b587fe76c 100644
--- a/benchmarks/templates/benchmarks/components/left-sidebar.html
+++ b/benchmarks/templates/benchmarks/components/left-sidebar.html
@@ -29,21 +29,24 @@
     </a>
     <div class="dropdown-content">
         <div class="nested-dropdown">
-            <a href="https://www.brain-score.org/tutorials/models">Models</a>
+            <a href="http{% if request.is_secure %}s{% endif %}://{{ request.get_host }}/tutorials/models">Models</a>
             <div class="nested-dropdown-content">
-                <a href="https://www.brain-score.org/tutorials/models/quickstart">Quickstart</a>
-                <a href="https://www.brain-score.org/tutorials/models/deepdive_1">Deep Dive 1</a>
-                <a href="https://www.brain-score.org/tutorials/models/deepdive_2">Deep Dive 2</a>
-                <a href="https://www.brain-score.org/tutorials/models/deepdive_3">Deep Dive 3</a>
+                <a href="http{% if request.is_secure %}s{% endif %}://{{ request.get_host }}/tutorials/models/quickstart">Quickstart</a>
+                <a href="http{% if request.is_secure %}s{% endif %}://{{ request.get_host }}/tutorials/models/deepdive_1">Deep Dive 1</a>
+                <a href="http{% if request.is_secure %}s{% endif %}://{{ request.get_host }}/tutorials/models/deepdive_2">Deep Dive 2</a>
+                <a href="http{% if request.is_secure %}s{% endif %}://{{ request.get_host }}/tutorials/models/deepdive_3">Deep Dive 3</a>
             </div>
         </div>
         <div class="nested-dropdown">
-            <a href="https://www.brain-score.org/tutorials/benchmarks">Benchmarks</a>
+            <a href="http{% if request.is_secure %}s{% endif %}://{{ request.get_host }}/tutorials/benchmarks">Benchmarks</a>
             <div class="nested-dropdown-content">
-                <a href="https://www.brain-score.org/tutorials/benchmarks/package_data">Package Data</a>
-                <a href="https://www.brain-score.org/tutorials/benchmarks/create_benchmark">Create Benchmark</a>
+                <a href="http{% if request.is_secure %}s{% endif %}://{{ request.get_host }}/tutorials/benchmarks/package_data">Package Data</a>
+                <a href="http{% if request.is_secure %}s{% endif %}://{{ request.get_host }}/tutorials/benchmarks/create_benchmark">Create Benchmark</a>
             </div>
         </div>
+        <div class="nested-dropdown">
+            <a href="http{% if request.is_secure %}s{% endif %}://{{ request.get_host }}/tutorials/use-cases/use-cases">Use Cases</a>
+        </div>
     </div>
 </div>
 
diff --git a/benchmarks/templates/benchmarks/tutorials/tutorial.html b/benchmarks/templates/benchmarks/tutorials/tutorial.html
index aa4fc7d60..a3d19da6a 100644
--- a/benchmarks/templates/benchmarks/tutorials/tutorial.html
+++ b/benchmarks/templates/benchmarks/tutorials/tutorial.html
@@ -34,6 +34,8 @@ <h3 class="benefits_heading is-size-3-mobile">Welcome!</h3>
             </p>
             <a href="http{% if request.is_secure %}s{% endif %}://{{ request.get_host }}/tutorials/models"><button class="button button-primary tutorial">Models</button></a>
             <a href="http{% if request.is_secure %}s{% endif %}://{{ request.get_host }}/tutorials/benchmarks"><button class="button button-primary tutorial">Benchmarks</button></a>
+            <a href="http{% if request.is_secure %}s{% endif %}://{{ request.get_host }}/tutorials/use-cases/use-cases"><button class="button button-primary tutorial">Use Cases</button></a>
+
         </div>
     </div>
 </div>
diff --git a/benchmarks/templates/benchmarks/tutorials/use-cases/use-cases.html b/benchmarks/templates/benchmarks/tutorials/use-cases/use-cases.html
new file mode 100644
index 000000000..28ed9171b
--- /dev/null
+++ b/benchmarks/templates/benchmarks/tutorials/use-cases/use-cases.html
@@ -0,0 +1,96 @@
+{% extends "benchmarks/components/app-view.html" %}
+{% load static %}
+
+{% block banner %}
+    <h1>Use Cases</h1>
+    <p> 
+        Below you will find a curated set of examples notebooks demonstrating typical Brain-Score use cases,
+        available as Jupyter Notebooks. To ensure they are always up to date, the notebooks are maintained 
+        in our <a href="https://github.com/brain-score/vision/examples">vision</a> repository. Each link
+        below will take you directly to the latest version on GitHub.
+    </p>
+{% endblock %}
+
+
+
+{% block info_section %}
+  {% include "benchmarks/tutorials/tutorial-info-section.html" %}
+{% endblock %}
+
+
+{% block content %}
+<div class="box leaderboard-table-component">
+    <h3 class="benefits_heading is-size-3-mobile">Scoring Models</h3>
+    <p class="benefits_info is-size-5-mobile shorter">
+        Score models locally on public benchmarks.
+    </p>
+    <button class="button">
+        <a href="test_link" target="_blank">
+            <i class="fas fa-file-alt"></i> View Notebook on GitHub
+        </a>
+    </button>
+</div>
+
+<div class="box leaderboard-table-component">
+    <h3 class="benefits_heading is-size-3-mobile">Perform Region-Layer Mapping</h3>
+    <p class="benefits_info is-size-5-mobile shorter">
+        Region-Layer Mapping is a fundamental step in converting a BaseModel into a Brain-Score model.
+        Here, `get_layers`are benchmarked against `STANDARD_REGION_BENCHMARKS` and subsequently
+        committed to a specific region.
+    </p>
+    <button class="button">
+        <a href="test_link" target="_blank">
+            <i class="fas fa-file-alt"></i> View Notebook on GitHub
+        </a>
+    </button>
+</div>
+
+<div class="box leaderboard-table-component">
+    <h3 class="benefits_heading is-size-3-mobile">Explore Neural Benchmarks</h3>
+    <p class="benefits_info is-size-5-mobile shorter">
+
+    </p>
+    <button class="button">
+        <a href="test_link" target="_blank">
+            <i class="fas fa-file-alt"></i> View Notebook on GitHub
+        </a>
+    </button>
+</div>
+
+<div class="box leaderboard-table-component">
+    <h3 class="benefits_heading is-size-3-mobile">Explore Behavioral Benchmarks</h3>
+    <p class="benefits_info is-size-5-mobile shorter">
+
+    </p>
+    <button class="button">
+        <a href="test_link" target="_blank">
+            <i class="fas fa-file-alt"></i> View Notebook on GitHub
+        </a>
+    </button>
+</div>
+
+<div class="box leaderboard-table-component">
+    <h3 class="benefits_heading is-size-3-mobile">Creating Neural Benchmarks</h3>
+    <p class="benefits_info is-size-5-mobile shorter">
+
+    </p>
+    <button class="button">
+        <a href="test_link" target="_blank">
+            <i class="fas fa-file-alt"></i> View Notebook on GitHub
+        </a>
+    </button>
+</div>
+
+<div class="box leaderboard-table-component">
+    <h3 class="benefits_heading is-size-3-mobile">Creating Behavioral Benchmarks</h3>
+    <p class="benefits_info is-size-5-mobile shorter">
+
+    </p>
+    <button class="button">
+        <a href="test_link" target="_blank">
+            <i class="fas fa-file-alt"></i> View Notebook on GitHub
+        </a>
+    </button>
+</div>
+
+{% endblock %}
\ No newline at end of file
diff --git a/benchmarks/urls.py b/benchmarks/urls.py
index 19917eb5d..36613432d 100644
--- a/benchmarks/urls.py
+++ b/benchmarks/urls.py
@@ -66,6 +66,9 @@
     path('tutorials/benchmarks/create_benchmark',
          user.Tutorials.as_view(plugin="benchmarks", tutorial_type="create_benchmark"),
          name='benchmark-create-benchmark'),
+    # - use case tutorials
+    path('tutorials/use-cases/use-cases', user.Tutorials.as_view(tutorial_type="use-cases/use-cases"), name='use-case-tutorial'),
+
     # - brain model explanation
     path('brain_model', brain_model.view, name='brain-model'),
 
diff --git a/static/benchmarks/css/components/left-sidebar.sass b/static/benchmarks/css/components/left-sidebar.sass
index 41623308a..9e8c8c8fc 100644
--- a/static/benchmarks/css/components/left-sidebar.sass
+++ b/static/benchmarks/css/components/left-sidebar.sass
@@ -6,6 +6,7 @@
   left: 0
   padding-right: 0
   background: $brainscore_gray4
+  z-index: 9998
 
   a
     display: block
@@ -51,8 +52,9 @@
   background-color: white
   min-width: 160px
   box-shadow: 0px 8px 16px rgba(0,0,0,0.2)
-  z-index: 1
-  transform: translateX(67px)
+  z-index: 9999
+  left: 67px
+  top: 100%
 
 // Dropdown links styling
 .dropdown-content a
@@ -60,6 +62,7 @@
   padding: 12px 16px
   text-decoration: none
   display: block
+  z-index: 9999
 
 .dropdown:hover > .dropdown-content
   display: block
@@ -81,10 +84,12 @@
   background-color: white
   width: 180px
   box-shadow: 0px 8px 16px rgba(0,0,0,0.2)
-  z-index: 1
+  z-index: 10000
+
 
 .nested-dropdown-content a
   font-size: 0.9em
+  z-index: 10000
 
 // Show nested dropdown on hover
 .nested-dropdown:hover .nested-dropdown-content