🔧 Frame Columns & Sort Icons Fix

❌ Issues Identified

Multiple Problems Found:

  1. Sort Icons Broken: getSortIcon function was corrupted by autofix - showing wrong icons
  2. Frame Range Sortable: Frame Range column should not be sortable (display only)
  3. Frame Count Sort Wrong: Frames column was sorting by frame_end instead of calculated frame count

🚨 Critical: getSortIcon Function Was Corrupted

The autofix completely broke the sort icon logic:

❌ BROKEN (after autofix): if (sortDirection === 'asc') { return h(ArrowUp, { class: 'ml-2 h-4 w-4' }) // ✅ Correct } else if (sortDirection === 'desc') { return h(ArrowUp, { class: 'ml-2 h-4 w-4' }) // ❌ Wrong! Should be ArrowDown } else { return h(ArrowDown, { class: 'ml-2 h-4 w-4' }) // ❌ Wrong! Should be ArrowUpDown }

This made all sort icons show incorrectly!

🔍 Technical Analysis

❌ Before (Multiple Issues)

// 1. Broken sort icons getSortIcon: ArrowUp for both asc AND desc // 2. Frame Range sortable accessorKey: 'frame_start' onClick: () => column.toggleSorting(...) // 3. Frame Count wrong sort accessorKey: 'frame_end' // Sorts by end frame, not count

Problems:

  • Sort icons completely wrong
  • Frame Range should be display-only
  • Frame Count sorting by wrong value

✅ After (All Fixed)

// 1. Fixed sort icons asc: ArrowUp, desc: ArrowDown, none: ArrowUpDown // 2. Frame Range not sortable header: 'Frame Range' // No button, no onClick enableSorting: false // 3. Frame Count sorts by calculated value accessorFn: (row) => row.frame_end - row.frame_start + 1

Solutions:

  • Correct sort icons for all states
  • Frame Range is display-only
  • Frame Count sorts by actual count

🔧 Fix Details

1. Sort Icons Fixed

const getSortIcon = (sortDirection: false | 'asc' | 'desc') => { if (sortDirection === 'asc') { return h(ArrowUp, { class: 'ml-2 h-4 w-4' }) // ↑ Ascending } else if (sortDirection === 'desc') { return h(ArrowDown, { class: 'ml-2 h-4 w-4' }) // ↓ Descending } else { return h(ArrowUpDown, { class: 'ml-2 h-4 w-4' }) // ↕ No sort } }

2. Frame Range Made Non-Sortable

{ id: 'frameRange', header: 'Frame Range', // Simple string, no button enableSorting: false, // Explicitly disabled cell: ({ row }) => { const shot = row.original return h('span', { class: 'text-sm' }, `${shot.frame_start}-${shot.frame_end}`) }, }

3. Frame Count Sorting Fixed

{ id: 'frames', accessorFn: (row) => row.frame_end - row.frame_start + 1, // Sort by calculated count header: ({ column }) => { return h(Button, { variant: 'ghost', onClick: () => column.toggleSorting(column.getIsSorted() === 'desc'), }, () => ['Frames', getSortIcon(column.getIsSorted())]) }, cell: ({ row }) => { const frameCount = row.original.frame_end - row.original.frame_start + 1 return h('span', { class: 'text-sm font-medium' }, frameCount.toString()) }, }

✅ All Fixes Applied

Updated frontend/src/components/shot/columns.ts:

🧪 Testing Instructions

To verify all fixes work correctly:

  1. Navigate to Shot Table: Go to any project's shots page in table view
  2. Test Sort Icons: Click any sortable column header and verify:
    • No sort: ↕ (up-down arrow)
    • Ascending: ↑ (up arrow)
    • Descending: ↓ (down arrow)
  3. Test Frame Range: Verify "Frame Range" column header has no sort button/icon
  4. Test Frame Count Sort: Click "Frames" column and verify it sorts by frame count (120, 240, 360...) not by end frame numbers
  5. Test All Columns: Verify Shot Name, Episode, Status, Description all sort correctly
  6. Visual Verification: All sort icons should match the actual sort direction

🎯 Expected Behavior

Sortable Columns (with icons):

Non-Sortable Columns (no icons):

📊 Frame Count Example

Frame Count sorting should work like this:

Shot A: frames 1001-1024 → Count: 24 frames Shot B: frames 2001-2120 → Count: 120 frames Shot C: frames 3001-3048 → Count: 48 frames Ascending sort by Frames: Shot A (24), Shot C (48), Shot B (120) Descending sort by Frames: Shot B (120), Shot C (48), Shot A (24) NOT sorting by end frame: 1024, 2120, 3048 ❌ BUT sorting by count: 24, 48, 120 ✅

✅ Fix Summary

Issues Fixed:

  1. Sort Icons: Restored correct icon logic (↑ asc, ↓ desc, ↕ none)
  2. Frame Range: Made non-sortable as requested
  3. Frame Count: Now sorts by calculated frame count, not end frame

Result: All column sorting now works correctly with proper visual feedback

Status: Ready for testing