Publication Filter Implementation Suggestions

Current State

Your website currently shows all publications in the Research section
Ken’s original template has a “Show Selected” vs “Show All” toggle functionality that was removed

Observed Functionality from Ken’s Site

Two buttons: “Show Selected” and “Show All”
Default: Shows only selected publications
Uses CSS classes and JavaScript to hide/show papers
Publications marked with selected-paper class are highlighted

Implementation Options

Option 1: Multi-Tab Filter System (Recommended)

Pros: Organized by research area, easy to navigate, showcases research breadth Cons: More complex JavaScript, requires careful paper categorization

// Enhanced JavaScript functions for multi-tab filtering
function showTab(tabName) {
  // Hide all papers
  // Show papers with specific class (selected-paper, safety-paper, copyright-paper, etc.)
  // Update button styling
}

function toggleBibtex(id) {
  // Toggle bibtex display for individual papers
}

<!-- Add tab buttons above research table -->
<div class="research-tabs">
  <button id="selected-btn" onclick="showTab('selected')" class="active">Selected</button>
  <button id="all-btn" onclick="showTab('all')">All</button>
  <button id="safety-btn" onclick="showTab('safety')">Safety</button>
  <button id="copyright-btn" onclick="showTab('copyright')">Copyright</button>
  <button id="systems-btn" onclick="showTab('systems')">Systems</button>
</div>

Option 1b: Simple Toggle (Alternative)

Pros: Keep current format, easy to implement Cons: Less organized, doesn’t highlight research areas

<!-- Simple two-button toggle -->
<div class="research-toggle">
  <button id="selected-btn" onclick="togglePapers(true)">Show Selected</button>
  <button id="all-btn" onclick="togglePapers(false)">Show All</button>
</div>

Option 2: Dedicated Publications Page

Pros: Cleaner separation, more space, follows academic conventions Cons: Need to maintain two locations

Move detailed publications to /publications/ page
Keep short “selected” list on main page
Add navigation link to full publications

Option 3: Hybrid Approach (Best of Both)

Pros: Maximum flexibility, clean main page Cons: More complex to maintain

Main page: Show only 3-4 selected publications with “View All” link
Dedicated publications page: Full list with toggle functionality
Auto-sync between both pages

Implementation Details

Required Changes

CSS Classes: Add selected-paper and all-paper classes to research entries
JavaScript: Add toggle functions (can use Ken’s implementation as reference)
HTML Structure: Add toggle buttons and proper class assignments
Styling: Style buttons and transitions

Paper Categorization for Multi-Tab System

Selected (Top 4-5 papers):

Marin (2025) - Major open source contribution
Model Tracing for Copyright (2025) - Novel technical contribution
HELM Safety (2024) - Widely used benchmark
Self-Improving Robots (2023) - Published at top venue
Cross-Trajectory RL (2022) - ICLR publication

Safety Category:

HELM Safety (2024) - https://crfm.stanford.edu/2024/11/08/helm-safety.html
Safety Benchmarks (2024) - https://arxiv.org/abs/2404.12241
Safety Guardrails (2025) - https://arxiv.org/abs/2503.05731
Behavioral Specification (2024) - https://arxiv.org/abs/2509.02464

Copyright Category:

Model Tracing for Copyright (2025) - https://arxiv.org/abs/2502.12292
Understanding Copyright Elicitation (2025) - https://arxiv.org/abs/2505.12546

Systems/ML Category:

Marin (2025) - Open-weight language model
Self-Improving Robots (2023) - Robotics + RL systems
Cross-Trajectory RL (2022) - RL methodology

All: Shows everything regardless of category

Code Structure for Multi-Tab System

_pages/about.md:
- Add JavaScript function showTab(tabName)
- Add research-tabs div with multiple buttons
- Mark papers with multiple classes (e.g., "selected-paper safety-paper")

CSS Classes needed:
- .selected-paper, .safety-paper, .copyright-paper, .systems-paper
- .research-tabs button styling
- .active button state
- .hidden for papers not in current tab

JavaScript Implementation:
function showTab(tabName) {
  // Remove active class from all buttons
  // Add active class to clicked button
  // Hide all papers
  // Show papers matching tabName class
}

Sample Implementation

<!-- Each paper gets multiple classes -->
<tr class="selected-paper safety-paper">
  <!-- HELM Safety paper -->
</tr>

<tr class="selected-paper copyright-paper">
  <!-- Model Tracing paper -->
</tr>

<tr class="systems-paper">
  <!-- Marin paper -->
</tr>

Recommendation

Go with Option 1: Multi-Tab Filter System - this showcases the breadth of your research:

Advantages:

Organized by research area - visitors can focus on specific interests
Showcases research breadth - demonstrates you work across multiple AI safety domains
Professional presentation - common pattern on top researcher websites
Flexible categorization - papers can belong to multiple categories
Default “Selected” view - still highlights your best work first

Implementation Priority:

Start with “Selected” and “All” tabs working
Add “Safety” tab (you have 4 safety papers)
Add “Copyright” tab (2 papers)
Add “Systems” tab for implementation work

This approach positions you as a researcher with focused expertise in AI safety while also demonstrating technical breadth.

Ahmed Ahmed