🔧 Episode Sorting Fix

❌ Issue Identified

Problem: Episode column sorting was not working correctly - it was sorting by episode ID instead of episode name.

Root Cause: The column was using accessorKey: 'episode_id' which sorts numerically by ID, but displays episode names in the cell.

🔍 Technical Analysis

The issue was a mismatch between what's displayed and what's sorted:

❌ Before (Broken)

accessorKey: 'episode_id' // Sorts by: 1, 2, 3, 4... // Displays: "Episode A", "Episode B", "Episode C"...

Problem:

  • Sorting by numeric ID (1, 2, 3)
  • Displaying episode names ("Episode A", "Episode B")
  • Sort order doesn't match visual order

✅ After (Fixed)

accessorFn: (row) => { const episode = meta.episodes.find((e) => e.id === row.episode_id) return episode ? episode.name : `Episode ${row.episode_id}` } // Sorts by: "Episode A", "Episode B", "Episode C"... // Displays: "Episode A", "Episode B", "Episode C"...

Solution:

  • Using accessorFn to extract episode name
  • Sorting alphabetically by episode name
  • Sort order matches visual display

📊 Example Scenario

Consider shots from these episodes:

Episodes: - ID: 1, Name: "Episode C - The Final Battle" - ID: 2, Name: "Episode A - The Beginning" - ID: 3, Name: "Episode B - The Journey" Shots: - Shot_001 (Episode ID: 1) → "Episode C - The Final Battle" - Shot_002 (Episode ID: 2) → "Episode A - The Beginning" - Shot_003 (Episode ID: 3) → "Episode B - The Journey"

Before Fix (sorting by ID): Shot_001, Shot_002, Shot_003

After Fix (sorting by name): Shot_002, Shot_003, Shot_001

Now the visual order matches alphabetical episode names!

🔧 TanStack Table accessorFn

The fix uses TanStack Table's accessorFn instead of accessorKey:

// accessorKey - uses a simple property path accessorKey: 'episode_id' // Gets row.episode_id // accessorFn - uses a custom function to extract the sort value accessorFn: (row) => { const episode = meta.episodes.find((e) => e.id === row.episode_id) return episode ? episode.name : `Episode ${row.episode_id}` }

This allows us to sort by the computed episode name while still accessing the episode_id from the data.

✅ Fix Applied

Updated frontend/src/components/shot/columns.ts - Episode column:

🧪 Testing Instructions

To verify the episode sorting fix works correctly:

  1. Navigate to Shot Table: Go to any project's shots page with multiple episodes
  2. Check Episode Names: Ensure you have shots from episodes with different names (not just "Episode 1", "Episode 2")
  3. Test Episode Sort: Click on the "Episode" column header
  4. Verify Ascending: First click should sort episodes alphabetically A→Z by episode name
  5. Verify Descending: Second click should sort episodes reverse alphabetically Z→A by episode name
  6. Check Visual Order: The displayed episode names should be in alphabetical order, not numeric ID order
  7. Test with Mixed Names: Works best with episodes like "Episode A - Intro", "Episode C - Finale", "Episode B - Middle"

🎯 Expected Behavior

After the fix, clicking the Episode column header should:

1. No Sort (↕) → Original data order 2. Ascending (↑) → Episodes sorted A-Z by name: "Episode A", "Episode B", "Episode C" 3. Descending (↓) → Episodes sorted Z-A by name: "Episode C", "Episode B", "Episode A" 4. Back to No Sort (↕) → Original data order

Note: The sort is now based on episode names, not episode IDs, so the visual order will match the alphabetical order of episode names.

🔄 Related Improvements

This fix also ensures:

✅ Fix Summary

Changed: accessorKey: 'episode_id' → accessorFn: (row) => episode.name

Result: Episode column now sorts by episode name instead of episode ID

Impact: Episode sorting now works as expected and matches visual display

Status: Ready for testing