Add interactive labels to timeline, semantic, and map frames - #61
Merged
Conversation
Each frame tracks zoom via onViewStateChange and conditionally renders a TextLayer above the scatter layer: - SemanticFrame: labels appear for all nodes at zoom ≥ 3.5 (UMAP space); always visible for selected (red) and hovered (yellow) nodes - MapFrame: labels appear for all nodes at geo zoom ≥ 6 (city level); always visible for selected/hovered; TextLayer rendered below ScatterplotLayer so dots stay on top - TimelineFrame: labels appear when zoomed ≥ 3 stops in from the initial fit zoom (≈8× zoom-in); always visible for selected/hovered; uses monospace font to match the tick axis style All frames use a dark translucent background rect (background: true) on each label for legibility, and truncate text to 22-28 chars depending on the frame. https://claude.ai/code/session_01EefsLVhEiLxKsJzAbgC1CQ
✅ Deploy Preview for akb-suruleredotdev ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
…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
Ambient (non-selected) labels truncated more aggressively: - Semantic: 25 → 12 chars - Map: 28 → 14 chars - Timeline: 22 → 11 chars Selected/hovered nodes keep longer labels (20/22/20 chars) so focused nodes remain readable. https://claude.ai/code/session_01EefsLVhEiLxKsJzAbgC1CQ
- Ambient labels truncated to 8 chars; selected/hovered get 14 chars
- Labels no longer filter data by zoom — all points stay in the layer;
visibility is controlled by alpha in getColor/getBackgroundColor
(0 when hidden, full value when visible)
- transitions: { getColor: 250, getBackgroundColor: 250 } gives a smooth
250ms fade when labels appear/disappear on zoom or selection change
https://claude.ai/code/session_01EefsLVhEiLxKsJzAbgC1CQ
Previously maxLen was only applied to the node.text fallback path. Title and label properties (used by document-level nodes) returned the full raw string, so long book/document titles were never truncated. https://claude.ai/code/session_01EefsLVhEiLxKsJzAbgC1CQ
deriveLabel now accepts an optional nodesById map. When provided and the node has a parent_id, the label is formatted as: 'Parent titl… · chunk text…' (parent truncated to 10 chars, chunk to the requested maxLen) Canvas frames (Semantic, Map, Timeline) pass nodesById so chunk-level nodes carry document context in their canvas labels. Callers that don't pass nodesById (SummaryFrame, TextFrame, etc.) are unaffected. https://claude.ai/code/session_01EefsLVhEiLxKsJzAbgC1CQ
This reverts commit 7334b8d.
…ticks Grid-based spatial thinning prevents label overlap across Map, Semantic, and Timeline frames. PickMenu lets users disambiguate clicks on overlapping nodes. Timeline ticks now adapt granularity (years→months→days) to the visible viewport range. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Replaces static yearTicks with a step table (5000y down to 1 day) that picks the finest interval fitting a per-viewport-width tick budget. Axis markers now thin out at wide zoom and fill in as you zoom into narrower time ranges. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
pickVisibleLabels) prevents overlapping labels by spatial thinning; timeline uses viewport-aware 1D horizontal bucketingPickMenu) — clicking overlapping nodes on Map or Timeline shows a popup listing all nodes at that point, with click/shift-click to selectderiveLabelutility extracts readable labels from node properties (title → label → source → text → id fallback) with configurable truncationTest plan
🤖 Generated with Claude Code