add filters to publications list

Author: carlinds

_includes/head/custom.html

@@ -23,4 +23,5 @@
 </script>
 <script src="{{ '/assets/js/distillpub/template.v2.js' | relative_url }}"></script>
 <script src="{{ '/assets/js/distillpub/transforms.v2.js' | relative_url }}"></script>
-<script src="{{ '/assets/js/distillpub/overrides.js' | relative_url }}"></script>
+<script src="{{ '/assets/js/distillpub/overrides.js' | relative_url }}"></script>
+<script src="{{ '/assets/js/publications-filters.js' | relative_url }}"></script>

_includes/publications_list.html

@@ -1,10 +1,80 @@
 <!--Get all the publications on the page-->
 {% assign publications = site.publications | sort: 'date' | reverse %}
 
+{%- comment -%}
+Build filter option lists (venue, year, topic) from the publications collection.
+{%- endcomment -%}
+
+{%- assign venues = site.publications | map: 'venue' | uniq | sort -%}
+
+{%- assign years_string = '' -%}
+{%- assign topics_string = '' -%}
+{%- for publication in site.publications -%}
+  {%- assign pub_year = publication.date | date: '%Y' -%}
+  {%- unless years_string contains pub_year -%}
+    {%- assign years_string = years_string | append: pub_year | append: '|' -%}
+  {%- endunless -%}
+
+  {%- if publication.topics -%}
+    {%- for topic in publication.topics -%}
+      {%- unless topics_string contains topic -%}
+        {%- assign topics_string = topics_string | append: topic | append: '|' -%}
+      {%- endunless -%}
+    {%- endfor -%}
+  {%- endif -%}
+{%- endfor -%}
+
+{%- assign years = years_string | split: '|' | sort | reverse -%}
+{%- assign topics = topics_string | split: '|' | sort -%}
+
+<!--Filters-->
+<div class="publications__filters">
+  <div class="publications__filters-group">
+    <label for="pub-filter-topic">Topic</label>
+    <select id="pub-filter-topic" class="publications__filter-select">
+      <option value="">All topics</option>
+      {%- for topic in topics -%}
+        {%- if topic and topic != '' -%}
+          <option value="{{ topic }}">{{ topic }}</option>
+        {%- endif -%}
+      {%- endfor -%}
+    </select>
+  </div>
+
+  <div class="publications__filters-group">
+    <label for="pub-filter-year">Year</label>
+    <select id="pub-filter-year" class="publications__filter-select">
+      <option value="">All years</option>
+      {%- for year in years -%}
+        {%- if year and year != '' -%}
+          <option value="{{ year }}">{{ year }}</option>
+        {%- endif -%}
+      {%- endfor -%}
+    </select>
+  </div>
+
+  <div class="publications__filters-group">
+    <label for="pub-filter-venue">Venue</label>
+    <select id="pub-filter-venue" class="publications__filter-select">
+      <option value="">All venues</option>
+      {%- for venue_key in venues -%}
+        {%- if venue_key and venue_key != '' -%}
+          <option value="{{ venue_key }}">{{ venue_key }}</option>
+        {%- endif -%}
+      {%- endfor -%}
+    </select>
+  </div>
+</div>
+
 <!--List all publications-->
-<ul class="publications__list">
+<ul class="publications__list" id="publications-list">
     {% for publication in publications %}
-    <li>
+    <li
+      class="publications__item"
+      data-venue="{{ publication.venue }}"
+      data-year="{{ publication.date | date: '%Y' }}"
+      data-topics="{% if publication.topics %}{{ publication.topics | join: ',' }}{% endif %}"
+    >
         <a class="pub-title" href="{{ publication.url | relative_url }}">{{ publication.title }}</a>
         <br>
         <span class="pub-authors">
@@ -25,10 +95,20 @@
             {% endif %}
             {% endfor %}
         </span>
+        {% if publication.topics %}
+        <br>
+        <span class="pub-topics">
+            {{ publication.topics | join: ', ' }}
+        </span>
+        {% endif %}
         <br>
         <span class="pub-venue">
             {% assign venue = site.data.venues[publication.venue] %}
-            {{ venue.name }}
+            {% if venue %}
+                {{ venue.name }}
+            {% else %}
+                {{ publication.venue }}
+            {% endif %}
         </span>
     </li>
     {% endfor %}

_publications/closing-real2sim-gap/closing_real2sim_gap.md

@@ -15,6 +15,10 @@ date: 2024-03-26 00:00:00 +00:00
 arxiv: https://arxiv.org/abs/2403.16092
 n_equal_contrib: 2
 thumbnail-img: front_figure.png
+topics:
+  - Neural rendering
+  - Simulation
+  - Perception
 ---
 
 # Core idea

_publications/gasp/gasp.md

@@ -19,6 +19,9 @@ date: 2025-03-14 00:00:00 +00:00
 arxiv: https://arxiv.org/abs/2503.15672
 n_equal_contrib: 2
 thumbnail-img: thumbnail.gif
+topics:
+  - Self-supervised learning
+  - Perception
 ---
 <div style="text-align: center; margin-bottom: 1em;">
 <h1>TLDR</h1>

_publications/neurad/neurad.md

@@ -15,6 +15,9 @@ date: 2023-11-26 00:00:00 +00:00
 arxiv: https://arxiv.org/abs/2311.15260
 n_equal_contrib: 3
 thumbnail-video: laneshift_compressed.mp4
+topics:
+  - Neural rendering
+  - Simulation
 ---
 
 <div style="display: flex; align-items: center; justify-content: center;">

_publications/neuro-ncap/neuro-ncap.md

@@ -16,6 +16,10 @@ date: 2024-04-12 00:00:00 +00:00
 arxiv: https://arxiv.org/abs/2404.07762
 n_equal_contrib: 2
 thumbnail-video: assets/videos/stationary-103-compressed-run1.mp4
+topics:
+  - Neural rendering
+  - Simulation
+  - End-to-end
 ---
 
 

_publications/splatad/splatad.md

@@ -14,6 +14,9 @@ date: 2024-11-30 00:00:00 +00:00
 arxiv: https://arxiv.org/abs/2411.16816
 n_equal_contrib: 2
 thumbnail-img: thumbnail.gif
+topics:
+  - Neural rendering
+  - Simulation
 ---
 <div style="display: flex; justify-content: space-around; margin-bottom: 1em; margin-top: 0.5em; width=100%">
 <figure class="figure__background">

_publications/voxel-mae/voxel-mae.md

@@ -15,6 +15,8 @@ n_equal_contrib: 1
 code:
 arxiv: https://arxiv.org/abs/2207.00531
 thumbnail-img: thumbnail.png
+topics:
+  - Self-supervised learning
 ---
 
 # Abstract

_sass/publications_list.scss

@@ -1,7 +1,35 @@
+.publications__filters {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.75rem;
+    margin-bottom: 1.5rem;
+
+    .publications__filters-group {
+        display: flex;
+        flex-direction: column;
+        min-width: 140px;
+
+        label {
+            font-size: 0.7rem;
+            font-weight: 600;
+            margin-bottom: 0.25rem;
+            color: $muted-text-color;
+        }
+
+        .publications__filter-select {
+            font-size: 0.7rem;
+            padding: 0.25rem 0.4rem;
+            border-radius: 4px;
+            border: 1px solid $border-color;
+            background-color: $background-color;
+            color: $text-color;
+        }
+    }
+}
+
 .publications__list {
     list-style-type: none;
 
-
     li {
         margin-bottom: 1.5rem;
         padding-bottom: 1.5rem;
@@ -26,6 +54,12 @@
             margin-bottom: 0.5rem;
         }
 
+        .pub-topics {
+            font-size: 0.65rem;
+            color: $muted-text-color;
+            margin-bottom: 0.5rem;
+        }
+
         .pub-venue {
             font-size: 0.65rem;
             color: $muted-text-color;

assets/js/publications-filters.js

@@ -0,0 +1,59 @@
+document.addEventListener("DOMContentLoaded", function () {
+  var venueSelect = document.getElementById("pub-filter-venue");
+  var yearSelect = document.getElementById("pub-filter-year");
+  var topicSelect = document.getElementById("pub-filter-topic");
+  var list = document.getElementById("publications-list");
+
+  if (!list || !venueSelect || !yearSelect || !topicSelect) {
+    return;
+  }
+
+  var items = Array.prototype.slice.call(
+    list.querySelectorAll(".publications__item")
+  );
+
+  function matchesFilter(item, venue, year, topic) {
+    var itemVenue = item.getAttribute("data-venue") || "";
+    var itemYear = item.getAttribute("data-year") || "";
+    var itemTopics = (item.getAttribute("data-topics") || "").split(",");
+
+    if (venue && itemVenue !== venue) {
+      return false;
+    }
+
+    if (year && itemYear !== year) {
+      return false;
+    }
+
+    if (topic) {
+      var hasTopic = itemTopics.some(function (t) {
+        return t && t.trim() === topic;
+      });
+      if (!hasTopic) {
+        return false;
+      }
+    }
+
+    return true;
+  }
+
+  function applyFilters() {
+    var selectedVenue = venueSelect.value;
+    var selectedYear = yearSelect.value;
+    var selectedTopic = topicSelect.value;
+
+    items.forEach(function (item) {
+      if (matchesFilter(item, selectedVenue, selectedYear, selectedTopic)) {
+        item.style.display = "";
+      } else {
+        item.style.display = "none";
+      }
+    });
+  }
+
+  venueSelect.addEventListener("change", applyFilters);
+  yearSelect.addEventListener("change", applyFilters);
+  topicSelect.addEventListener("change", applyFilters);
+});
+
+