Implement column order customization in OCL Mapper #2355
Description
Priority: 3
Quarter: Q2 2026
Bucket: CIEL Implementer
Overview
Implement column order customization in OCL Mapper to allow users to reorder, show/hide, resize, and save column preferences for the mapping grid.
User Story
As a mapper, I want to customize which columns are visible and their order so that I can focus on the information most relevant to my workflow and work more efficiently with my screen space.
Problem
Currently, the OCL Mapper grid has a fixed column layout:
- Cannot reorder columns
- Cannot hide/show columns
- Cannot resize columns
- All users see the same layout regardless of their needs
- Workflow-specific columns cannot be prioritized
Different mapping workflows require different information:
- Auto-match focused: Need confidence score, match status front and center
- Review focused: Need comments, approval status prominent
- Data entry focused: Need input term, mapped concept, minimal distractions
Acceptance Criteria
Column Management UI
- Add "Manage Columns" button in grid header
- Opens column management panel/modal showing:
- List of all available columns (with checkboxes)
- Current visibility status (shown/hidden)
- Current order (drag handles)
- Column width settings
- Reset to defaults button
Available Columns
- Core columns (always visible, cannot hide):
- Row number
- Input term
- Status indicator
- Optional columns (can show/hide):
- Mapped concept name
- Mapped concept code
- Confidence score
- Map type
- Auto-match status
- Assignment (who's working on it)
- Comments count
- Last modified
- Last modified by
- Approval status
- Validation warnings
- Source (for multi-source projects)
- Custom fields (project-specific)
Column Reordering
- Drag-and-drop columns in management panel to reorder
- Live preview of new order
- Apply changes and see updated grid immediately
- Alternative: Drag column headers directly in grid to reorder
Column Show/Hide
- Toggle checkboxes in management panel to show/hide columns
- Hidden columns don't take up space in grid
- Quick actions:
- "Show All" button
- "Hide All Optional" button
- "Reset to Defaults" button
- Minimum 3 columns must be visible (core columns)
Column Resizing
- Drag column borders to resize width
- Double-click column border to auto-fit to content
- Minimum column width: 60px
- Maximum column width: 500px
- "Reset Column Widths" option
Column Presets
- Provide built-in presets for common workflows:
- Auto-match Focus: Row #, Input Term, Mapped Concept, Confidence, Status
- Review Focus: Row #, Input Term, Mapped Concept, Comments, Approval Status, Last Modified
- Data Entry: Row #, Input Term, Mapped Concept, Map Type, Status
- Quality Check: Row #, Input Term, Mapped Concept, Validation Warnings, Confidence, Last Modified By
- Minimal: Row #, Input Term, Mapped Concept, Status (for small screens)
- One-click preset selection
- User can create custom presets:
- Save current configuration as preset
- Name the preset
- Delete custom presets
- Share presets with team (optional)
Persistence
- Save column configuration per user:
- Column order
- Column visibility
- Column widths
- Choice of save scope:
- This project only: Settings apply only to current project
- All projects: Settings apply globally to all projects
- Default for new projects: New projects start with these settings
- Settings persist across sessions (stored in user preferences)
Column Sorting
- Click column header to sort by that column
- Visual indicator of sort direction (↑ ↓)
- Multi-column sort (Shift+click to add secondary sort)
- Clear sort button
- Remember sort preference per column configuration
Responsive Design
- On smaller screens:
- Automatically hide less important columns
- Provide "More columns" dropdown to access hidden columns
- Maintain core columns visible
- Mobile view:
- Card-based layout instead of grid
- Column configuration determines which fields show in cards
- Swipe to see additional fields
Column Freezing (Optional)
- Pin columns to left side (frozen columns)
- Row number always frozen by default
- Can freeze Input Term or other columns
- Frozen columns stay visible when scrolling horizontally
- Visual indicator of frozen boundary
Export with Column Configuration
- When exporting data (CSV, Excel):
- Export only visible columns (in current order)
- Option to "Export all columns" regardless of visibility
- Preserve column order in export
Keyboard Shortcuts
-
Ctrl+Shift+C- Open column management -
Ctrl+0- Reset to default columns - Arrow keys in column management to reorder
- Space to toggle column visibility in management panel
Admin Controls (Optional)
- Project admins can:
- Set default column configuration for project
- Lock certain columns as required (cannot hide)
- Define project-specific custom columns
- Share recommended presets with team
Implementation Notes
- Use browser localStorage or API to store user preferences
- Column configuration should be lightweight (JSON object)
- Grid library (e.g., AG Grid, React Table) likely supports most features natively
- Consider virtualization for performance with many columns
- Column order should be applied before rendering (not post-render reordering)
- Custom columns require schema definition in project config
UI/UX Considerations
- Column management should be discoverable but not intrusive
- Drag-and-drop should feel smooth and natural
- Changes should apply immediately (no "Save" button needed, or auto-save)
- Preset selection should be quick (dropdown or tabs)
- Visual feedback during drag operations
- Column widths should be reasonable by default (smart defaults)
- Consider showing tooltips on column headers for clarity
Use Cases
Use Case 1: Auto-match Power User
- Mapper runs auto-match on 1,000 rows
- Hides "Assignment" and "Last Modified By" (not relevant for solo work)
- Shows "Confidence Score" front and center
- Widens "Mapped Concept" column to see full names
- Saves as "My Auto-match View" preset
Use Case 2: Quality Reviewer
- Reviewer only cares about rows needing attention
- Shows "Comments Count", "Validation Warnings", "Last Modified"
- Hides "Confidence Score" (not relevant for review)
- Orders columns: Row #, Input Term, Mapped Concept, Warnings, Comments
- Saves as "QA Review" preset
Use Case 3: Small Screen Mapper
- Working on laptop with limited screen space
- Uses "Minimal" preset
- Only shows: Row #, Input Term, Mapped Concept, Status
- Can expand to see full details when needed
- Fast workflow with minimal distractions
Use Case 4: Team Lead Dashboard
- Team lead needs to see who's working on what
- Shows "Assignment", "Last Modified By", "Status"
- Hides "Confidence Score" (not relevant for management view)
- Can quickly see team progress and bottlenecks
Examples
Example Column Management Panel:
Manage Columns
Visible Columns (drag to reorder):
☰ [x] Row Number (frozen)
☰ [x] Input Term
☰ [x] Mapped Concept
☰ [x] Confidence Score
☰ [x] Status
Hidden Columns:
☰ [ ] Map Type
☰ [ ] Assignment
☰ [ ] Comments Count
☰ [ ] Last Modified
☰ [ ] Approval Status
Presets: [Auto-match Focus ▼]
[Reset to Defaults] [Apply]
Example Grid Header (with customization):
Row # | Input Term | Confidence | Mapped Concept | Status
-----------------------------------------------------------------
001 | Diabetes mellitus | 95% | CIEL:116125 | ✅ Mapped
002 | High blood pressure | 88% | CIEL:116154 | ✅ Mapped
003 | Fever | 0% | - | ⭘ Unmapped
Labels
- Feature
- CIEL Implementer
- Mapper
- UX
- Priority: Low
Related Issues
- OCL Mapper grid/table functionality
- User preferences system
- Export functionality (Implement basic bulk actions in OCL Mapper #2342 might relate to bulk actions)
- Responsive design improvements