Skip to content

Improve selection UI with individual item removal and shift-click filtering - #60

Merged
Korede-TA merged 1 commit into
mainfrom
claude/kb-viz-interaction-improvements
Jun 22, 2026
Merged

Improve selection UI with individual item removal and shift-click filtering#60
Korede-TA merged 1 commit into
mainfrom
claude/kb-viz-interaction-improvements

Conversation

@Korede-TA

Copy link
Copy Markdown
Contributor

Summary

Enhanced the selection interface in SummaryFrame with better UX controls and improved timeline filtering behavior. Users can now remove individual items from selection, see helpful hints, and use shift+click to add to selections during timeline filtering.

Key Changes

SummaryFrame.tsx:

  • Added a "clear all" button in the selection header that appears when items are selected
  • Added inline hint text "shift+click to add" when selection is empty
  • Added individual remove buttons (×) next to each selected item in the list view
  • Updated SelectionSummary component to accept an onClearAll callback and display a "clear all ×" button when showing 8+ items
  • Adjusted label truncation from 50 to 45 characters to accommodate the new remove button

TimelineFrame.tsx:

  • Added useRef import to track shift key state during brush interactions
  • Introduced brushShiftRef to capture whether shift was held when drag started
  • Modified onDragStart to detect and store shift key state from the mouse event
  • Updated onDragEnd to conditionally call either addToSelection() (when shift held) or boxSelect() (normal behavior) based on the stored shift state
  • Removed outdated comment about 30-day threshold

Implementation Details

  • The shift-key detection happens at drag start to ensure consistent behavior throughout the drag operation
  • Individual item removal uses the existing toggle() method from the selection store
  • All new buttons follow existing style patterns using S.navBtn and muted text colors for secondary actions

https://claude.ai/code/session_01EefsLVhEiLxKsJzAbgC1CQ

TimelineFrame:
- Shift+drag brush now calls addToSelection() instead of boxSelect(),
  so brushing a date range while holding shift adds to the existing set

SummaryFrame:
- Add × button per selection item to remove it via toggle()
- Add "clear all" button next to the selection count heading
- Large-selection (>8) chip summary also gets a "clear all ×" button
- Hint text "shift+click to add" shown in the heading when nothing is selected

Shift+click single-node additive select was already wired in all canvas
frames (Semantic, Map, Timeline) and box-select shift-add was already
wired in SemanticFrame — no changes needed there.

https://claude.ai/code/session_01EefsLVhEiLxKsJzAbgC1CQ
@netlify

netlify Bot commented Jun 22, 2026

Copy link
Copy Markdown

Deploy Preview for akb-suruleredotdev ready!

Name Link
🔨 Latest commit e54c253
🔍 Latest deploy log https://app.netlify.com/projects/akb-suruleredotdev/deploys/6a38ac1818d79c00080f924a
😎 Deploy Preview https://deploy-preview-60--akb-suruleredotdev.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@Korede-TA
Korede-TA merged commit c600f14 into main Jun 22, 2026
6 checks passed
Korede-TA pushed a commit that referenced this pull request Jun 24, 2026
…lict

Keep both zoom tracking (node labels) and brushShiftRef (shift-additive
brush select from PR #60) in TimelineFrame state declarations.

https://claude.ai/code/session_01EefsLVhEiLxKsJzAbgC1CQ
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants