Replace selection methods with config-driven highlighting and outlining#217
Open
Replace selection methods with config-driven highlighting and outlining#217
Conversation
📝 WalkthroughWalkthroughThis PR transitions from an imperative selection-based API to a configuration-driven highlighting model. Core changes include replacing point/link selection methods with stateless "find" query methods, introducing new config properties for highlighting and outline state, refactoring shader infrastructure to support multi-channel status textures, and updating hover detection to trigger config updates rather than direct mutations. Changes
Sequence DiagramsequenceDiagram
participant User
participant Graph as Graph (index.ts)
participant Hover as Hover Detection
participant Config as Config Update
participant Renderer as GPU Renderer
participant Store
User->>User: Move/Click Interaction
User->>Graph: Hover over Point
Graph->>Hover: findHoveredPoint()
Hover->>Renderer: Sample from hover FBO
Hover-->>Graph: Return { mouseover, mouseout }
Graph->>Graph: Collect callbacks (mouseout first, then mouseover)
Graph->>Config: setConfigPartial({ highlightedPointIndices })
Config->>Store: Update highlightedPointSet
Store->>Renderer: Trigger updatePointStatus()
Renderer->>Renderer: Regenerate multi-channel status texture
Graph->>Graph: Execute deferred onPointMouseOver callback
Graph-->>User: Callback fires with isHighlighted, isOutlined flags
User->>User: Click Point
User->>Graph: Click handler
Graph->>Graph: Compute getNeighboringPointIndices()
Graph->>Graph: Compute getConnectedLinkIndices()
Graph->>Config: setConfigPartial({ highlightedPointIndices, highlightedLinkIndices })
Config->>Store: Update highlighted point/link sets
Store->>Renderer: Trigger updatePointStatus() + updateLinkStatus()
Renderer->>Renderer: Regenerate status textures & render with highlighting
Renderer-->>User: Render updated visual state
Estimated code review effort🎯 4 (Complex) | ⏱️ ~75 minutes Possibly related PRs
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
There was a problem hiding this comment.
Actionable comments posted: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (2)
README.md (1)
34-50:⚠️ Potential issue | 🟡 MinorTypeScript quick-start snippet should avoid nullable/implicit types.
Line 37 (
querySelector) is nullable and needs validation before use. Line 49 has an implicit callback parameter type that should be explicitly annotated.✏️ Suggested doc fix
-const div = document.querySelector('div') +const div = document.querySelector('div') +if (!(div instanceof HTMLDivElement)) { + throw new Error('Expected a target <div> element') +} const config = { @@ - onClick: (pointIndex) => { console.log('Clicked point index: ', pointIndex) }, + onClick: (pointIndex: number | undefined) => { console.log('Clicked point index: ', pointIndex) },🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@README.md` around lines 34 - 50, The README snippet uses document.querySelector('div') which returns nullable; update the code that initializes and uses div (the variable from document.querySelector) to validate it before use (e.g., check for null and handle or throw) or obtain a non-null element safely so Graph is only instantiated when div is present; also explicitly annotate the onClick callback parameter in the config (the onClick function in the config object) with its type (e.g., pointIndex: number) instead of relying on an implicit any/implicit type.src/modules/Lines/draw-curve-line.vert (1)
187-199:⚠️ Potential issue | 🟠 MajorInclude focused width in the picking pass.
Line 187 only applies the fixed 5px hover padding during index-buffer rendering. If
focusedLinkWidthIncreaseis set above 5, the focused link renders wider than its hover/click geometry, so interacting with the visible stroke can miss.💡 Possible fix
if (renderMode > 0.0) { // Add 5 pixels padding for better hover detection linkWidthPx += 5.0 / transformationMatrix[0][0]; + if (focusedLinkIndex == linkIndex) { + linkWidthPx += focusedLinkWidthIncrease / transformationMatrix[0][0]; + } } else {🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/modules/Lines/draw-curve-line.vert` around lines 187 - 199, The picking-pass branch (renderMode > 0.0) only adds a fixed 5px padding to linkWidthPx, so focused links that use focusedLinkWidthIncrease can be visually wider than their pickable area; modify the renderMode > 0.0 block to also add the same focused and hovered width increases (dividing by transformationMatrix[0][0]) when hoveredLinkIndex == linkIndex and when focusedLinkIndex == linkIndex so linkWidthPx matches what's used in the visible pass (use the same symbols: renderMode, linkWidthPx, transformationMatrix, hoveredLinkIndex, focusedLinkIndex, hoveredLinkWidthIncrease, focusedLinkWidthIncrease, linkIndex).
🧹 Nitpick comments (3)
src/stories/shapes/image-example/index.ts (1)
199-201: Deduplicate highlighted points before applying config (optional).If
getNeighboringPointIndices()includes the clicked point, duplicates may be passed downstream unnecessarily.♻️ Suggested refinement
- const highlightedPointIndices = [pointIndex, ...neighboringPoints] + const highlightedPointIndices = [...new Set([pointIndex, ...neighboringPoints])] const highlightedLinkIndices = graph.getConnectedLinkIndices(highlightedPointIndices)🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/stories/shapes/image-example/index.ts` around lines 199 - 201, The highlightedPointIndices array may contain duplicates if getNeighboringPointIndices() returns the clicked point; before calling graph.getConnectedLinkIndices and graph.setConfigPartial, deduplicate the highlightedPointIndices (e.g., create a Set from [pointIndex, ...neighboringPoints] and convert back to an array) so graph.getConnectedLinkIndices(highlightedPointIndices) and graph.setConfigPartial({ highlightedPointIndices, highlightedLinkIndices }) receive unique point IDs; keep the same variable names highlightedPointIndices and highlightedLinkIndices so downstream calls remain unchanged.src/stories/clusters/polygon-selection/index.ts (1)
28-29: Guard polygon query until graph is ready.To avoid edge-case calls before initialization completes, add a readiness check before
findPointsInPolygon().🛡️ Suggested guard
const polygonSelection = new PolygonSelection(div, (polygonPoints) => { + if (!graph.isReady) return const indices = graph.findPointsInPolygon(polygonPoints) graph.setConfigPartial({ highlightedPointIndices: indices }) })🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/stories/clusters/polygon-selection/index.ts` around lines 28 - 29, Guard the polygon query so we don't call graph.findPointsInPolygon before the graph is initialized: before calling graph.findPointsInPolygon(polygonPoints) check a readiness flag or method on the graph (e.g., graph.isReady(), graph.ready, or graph.initialized) and only call findPointsInPolygon and then graph.setConfigPartial({ highlightedPointIndices: indices }) when that readiness check passes; if the graph isn't ready, either no-op or subscribe to the graph's ready event and run the same code then.src/modules/Points/find-hovered-point.vert (1)
71-72: Minor naming inconsistency for clarity.The local variable
greyoutStatussamples from texturepointStatus, which now contains both greyout (R) and outlined (G) channels. Consider renaming tostatusfor consistency withdraw-points.vert:- vec4 greyoutStatus = texture(pointStatus, (pointIndices + 0.5) / pointsTextureSize); - float isHighlighted = (greyoutStatus.r == 0.0) ? 1.0 : 0.0; + vec4 status = texture(pointStatus, (pointIndices + 0.5) / pointsTextureSize); + float isHighlighted = (status.r == 0.0) ? 1.0 : 0.0;🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/modules/Points/find-hovered-point.vert` around lines 71 - 72, Rename the local GLSL variable greyoutStatus to a more general name like status in the vertex shader so it reflects that pointStatus texture contains multiple channels (R=greyout, G=outlined) and to match naming in draw-points.vert; update the subsequent usage of isHighlighted (and any other references) to read from status instead of greyoutStatus while keeping the texture lookup using pointStatus and pointsTextureSize unchanged.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@src/index.ts`:
- Around line 941-949: findPointsInRect relies on GPU resources (searchFbo,
program/uniform setup) produced by Points.initPrograms() and
Points.updatePositions(), so calling graph.ready alone can return stale/empty
results; add a preparation step before using this.points.searchFbo to ensure
those GPU resources and pending updates are created/flushed (mirror the
preparation used in findPointsInPolygon). Concretely, add/Call a method like
this.points.prepareForSearch() (implement it to call/await
Points.initPrograms(), Points.updatePositions(), and flush any pending
render/update commands) at the start of findPointsInRect (and symmetrically in
findPointsInPolygon) so searchFbo and related uniforms are valid before
readPixels/extractIndicesFromPixels are invoked.
---
Outside diff comments:
In `@README.md`:
- Around line 34-50: The README snippet uses document.querySelector('div') which
returns nullable; update the code that initializes and uses div (the variable
from document.querySelector) to validate it before use (e.g., check for null and
handle or throw) or obtain a non-null element safely so Graph is only
instantiated when div is present; also explicitly annotate the onClick callback
parameter in the config (the onClick function in the config object) with its
type (e.g., pointIndex: number) instead of relying on an implicit any/implicit
type.
In `@src/modules/Lines/draw-curve-line.vert`:
- Around line 187-199: The picking-pass branch (renderMode > 0.0) only adds a
fixed 5px padding to linkWidthPx, so focused links that use
focusedLinkWidthIncrease can be visually wider than their pickable area; modify
the renderMode > 0.0 block to also add the same focused and hovered width
increases (dividing by transformationMatrix[0][0]) when hoveredLinkIndex ==
linkIndex and when focusedLinkIndex == linkIndex so linkWidthPx matches what's
used in the visible pass (use the same symbols: renderMode, linkWidthPx,
transformationMatrix, hoveredLinkIndex, focusedLinkIndex,
hoveredLinkWidthIncrease, focusedLinkWidthIncrease, linkIndex).
---
Nitpick comments:
In `@src/modules/Points/find-hovered-point.vert`:
- Around line 71-72: Rename the local GLSL variable greyoutStatus to a more
general name like status in the vertex shader so it reflects that pointStatus
texture contains multiple channels (R=greyout, G=outlined) and to match naming
in draw-points.vert; update the subsequent usage of isHighlighted (and any other
references) to read from status instead of greyoutStatus while keeping the
texture lookup using pointStatus and pointsTextureSize unchanged.
In `@src/stories/clusters/polygon-selection/index.ts`:
- Around line 28-29: Guard the polygon query so we don't call
graph.findPointsInPolygon before the graph is initialized: before calling
graph.findPointsInPolygon(polygonPoints) check a readiness flag or method on the
graph (e.g., graph.isReady(), graph.ready, or graph.initialized) and only call
findPointsInPolygon and then graph.setConfigPartial({ highlightedPointIndices:
indices }) when that readiness check passes; if the graph isn't ready, either
no-op or subscribe to the graph's ready event and run the same code then.
In `@src/stories/shapes/image-example/index.ts`:
- Around line 199-201: The highlightedPointIndices array may contain duplicates
if getNeighboringPointIndices() returns the clicked point; before calling
graph.getConnectedLinkIndices and graph.setConfigPartial, deduplicate the
highlightedPointIndices (e.g., create a Set from [pointIndex,
...neighboringPoints] and convert back to an array) so
graph.getConnectedLinkIndices(highlightedPointIndices) and
graph.setConfigPartial({ highlightedPointIndices, highlightedLinkIndices })
receive unique point IDs; keep the same variable names highlightedPointIndices
and highlightedLinkIndices so downstream calls remain unchanged.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 13995ac2-494d-473e-89a8-3731ccae4f60
📒 Files selected for processing (22)
README.mdmigration-notes.mdsrc/config.tssrc/helper.tssrc/index.tssrc/modules/GraphData/index.tssrc/modules/Lines/draw-curve-line.vertsrc/modules/Lines/index.tssrc/modules/Points/draw-highlighted.vertsrc/modules/Points/draw-points.fragsrc/modules/Points/draw-points.vertsrc/modules/Points/find-hovered-point.vertsrc/modules/Points/find-points-in-polygon.fragsrc/modules/Points/find-points-in-rect.fragsrc/modules/Points/index.tssrc/modules/Store/index.tssrc/stories/2. configuration.mdxsrc/stories/3. api-reference.mdxsrc/stories/beginners/basic-set-up/index.tssrc/stories/clusters/polygon-selection/index.tssrc/stories/shapes/image-example/index.tssrc/variables.ts
…g, outlining, and focusing Signed-off-by: Stukova Olya <stukova.o@gmail.com>
Signed-off-by: Stukova Olya <stukova.o@gmail.com>
c61f036 to
a08cbe6
Compare
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (1)
src/modules/Store/index.ts (1)
41-41: TypesearchAreaas a fixed 2-point tuple.This is currently inferred as
number[][], so malformed shapes can still compile and only fail deeper in the rect-search path. Pinning it to[[number, number], [number, number]]keeps the new search contract checked at compile time.♻️ Suggested change
- public searchArea = [[0, 0], [0, 0]] + public searchArea: [[number, number], [number, number]] = [[0, 0], [0, 0]]🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/modules/Store/index.ts` at line 41, The public field searchArea is currently inferred as number[][] allowing malformed shapes; change its declaration to have the fixed tuple type [[number, number], [number, number]] and keep the same initial value so the compiler enforces two 2-number points. Update the Store class's public searchArea declaration to use the explicit tuple type [[number, number], [number, number]] wherever it's declared and adjust any assignments/usages to satisfy that shape.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@src/modules/Lines/index.ts`:
- Around line 685-699: When link highlighting is cleared or there are no links,
release the old GPU texture to avoid pinned memory: in the branches handling
!linksNumber and highlightedLinkIndices === undefined (where linkStatusTexture
and ensureLinkStatusPlaceholder are referenced), call the texture
destructor/release on this.linkStatusTexture, set this.linkStatusTexture to
null/undefined, and set this.linkStatusTextureSize = 0; keep the existing
ensureLinkStatusPlaceholder behavior for creating a 1×1 placeholder when needed.
In `@src/modules/Points/index.ts`:
- Around line 1664-1668: findPointsInPolygon currently proceeds for 1- or
2-point inputs; add an early check at the top of the findPointsInPolygon method
to reject degenerate polygons by returning false when the polygon vertex count
is < 3 (i.e., inspect the polygon vertex array used by this method — e.g. the
polygon vertex buffer/array or the property that backs polygonPathTexture — and
if its length/vertexCount < 3 return false before any GPU resources or commands
are used). Ensure the check runs before referencing
this.findPointsInPolygonCommand, this.searchFbo, this.currentPositionTexture, or
this.polygonPathTexture so the GPU pass is never launched for invalid polygons.
---
Nitpick comments:
In `@src/modules/Store/index.ts`:
- Line 41: The public field searchArea is currently inferred as number[][]
allowing malformed shapes; change its declaration to have the fixed tuple type
[[number, number], [number, number]] and keep the same initial value so the
compiler enforces two 2-number points. Update the Store class's public
searchArea declaration to use the explicit tuple type [[number, number],
[number, number]] wherever it's declared and adjust any assignments/usages to
satisfy that shape.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 195e7150-d22c-43e3-b892-8603e2824121
📒 Files selected for processing (22)
README.mdmigration-notes.mdsrc/config.tssrc/helper.tssrc/index.tssrc/modules/GraphData/index.tssrc/modules/Lines/draw-curve-line.vertsrc/modules/Lines/index.tssrc/modules/Points/draw-highlighted.vertsrc/modules/Points/draw-points.fragsrc/modules/Points/draw-points.vertsrc/modules/Points/find-hovered-point.vertsrc/modules/Points/find-points-in-polygon.fragsrc/modules/Points/find-points-in-rect.fragsrc/modules/Points/index.tssrc/modules/Store/index.tssrc/stories/2. configuration.mdxsrc/stories/3. api-reference.mdxsrc/stories/beginners/basic-set-up/index.tssrc/stories/clusters/polygon-selection/index.tssrc/stories/shapes/image-example/index.tssrc/variables.ts
✅ Files skipped from review due to trivial changes (4)
- src/variables.ts
- src/modules/Points/find-points-in-polygon.frag
- README.md
- src/index.ts
🚧 Files skipped from review as they are similar to previous changes (10)
- src/stories/clusters/polygon-selection/index.ts
- src/helper.ts
- src/modules/Points/draw-highlighted.vert
- src/stories/shapes/image-example/index.ts
- src/modules/Points/find-points-in-rect.frag
- src/modules/Points/draw-points.frag
- src/modules/GraphData/index.ts
- src/stories/beginners/basic-set-up/index.ts
- migration-notes.md
- src/stories/2. configuration.mdx
… methods Signed-off-by: Stukova Olya <stukova.o@gmail.com>
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@src/modules/GraphData/index.ts`:
- Around line 387-399: In getConnectedPointIndices, validate that each supplied
linkIndex is an integer before using it to index this.links: for the
single-number and array cases reject or skip any non-integer (use
Number.isInteger(linkIndex) or equivalent) in addition to the existing range
check (linksNumber) so fractional values like 1.5 are ignored; keep the existing
checks for this.links undefined and the source/target extraction
(this.links[linkIndex * 2], this.links[linkIndex * 2 + 1]) intact and only
execute them for indices that pass both the integer and range guards.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: fa23d2e7-82a4-487d-9705-d940c2587e4b
📒 Files selected for processing (1)
src/modules/GraphData/index.ts
Signed-off-by: Stukova Olya <stukova.o@gmail.com>
…g, and focusing Signed-off-by: Stukova Olya <stukova.o@gmail.com>
There was a problem hiding this comment.
🧹 Nitpick comments (2)
src/index.ts (1)
968-970: Avoid warning on every incomplete polygon preview.
findPointsInPolygon()is a likely building block for interactive lasso/polygon selection, so callers may invoke it repeatedly while the path still has 1–2 vertices. Returning[]is already enough here; the warning will just spam the console.💡 Possible fix
- if (polygonPath.length < 3) { - console.warn('Polygon path requires at least 3 points to form a polygon.') - return [] - } + if (polygonPath.length < 3) return []🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/index.ts` around lines 968 - 970, The console.warn in findPointsInPolygon that triggers when polygonPath.length < 3 should be removed to avoid spamming during interactive lasso/polygon construction; simply return [] as is. Locate the check in findPointsInPolygon referencing polygonPath.length and delete the warning call (console.warn('Polygon path requires at least 3 points to form a polygon.')), leaving the early return intact so callers get an empty array without noisy logs.src/stories/beginners/explore-connections/index.ts (1)
165-173:graph.zoom(0.9)is likely temporary here.
render()still runs the init-fit path wheninitialZoomLevelis unset, so this zoom call is likely to be overwritten on first paint. If the goal is a looser initial fit, preferfitViewPadding; if the goal is a fixed starting scale, useinitialZoomLevelor disablefitViewOnInit.Based on learnings, Cosmos Graph initializes by fitting the view, which triggers an onZoom event on load.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/stories/beginners/explore-connections/index.ts` around lines 165 - 173, The explicit graph.zoom(0.9) call is being overwritten by Graph.render()'s init-fit behavior; instead, update the Graph construction/config (the config passed to new Graph(...)) to either set initialZoomLevel to fix the starting scale, set fitViewPadding to achieve a looser initial fit, or set fitViewOnInit:false to prevent the automatic fit — remove the temporary graph.zoom(0.9) line and adjust the config (initialZoomLevel, fitViewPadding, or fitViewOnInit) so the desired initial zoom is applied before/at render().
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In `@src/index.ts`:
- Around line 968-970: The console.warn in findPointsInPolygon that triggers
when polygonPath.length < 3 should be removed to avoid spamming during
interactive lasso/polygon construction; simply return [] as is. Locate the check
in findPointsInPolygon referencing polygonPath.length and delete the warning
call (console.warn('Polygon path requires at least 3 points to form a
polygon.')), leaving the early return intact so callers get an empty array
without noisy logs.
In `@src/stories/beginners/explore-connections/index.ts`:
- Around line 165-173: The explicit graph.zoom(0.9) call is being overwritten by
Graph.render()'s init-fit behavior; instead, update the Graph
construction/config (the config passed to new Graph(...)) to either set
initialZoomLevel to fix the starting scale, set fitViewPadding to achieve a
looser initial fit, or set fitViewOnInit:false to prevent the automatic fit —
remove the temporary graph.zoom(0.9) line and adjust the config
(initialZoomLevel, fitViewPadding, or fitViewOnInit) so the desired initial zoom
is applied before/at render().
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 384d26e8-1fbf-4a4e-bd40-127a7a68e123
📒 Files selected for processing (5)
src/index.tssrc/stories/beginners.stories.tssrc/stories/beginners/explore-connections/data-gen.tssrc/stories/beginners/explore-connections/index.tssrc/stories/beginners/explore-connections/style.css
✅ Files skipped from review due to trivial changes (1)
- src/stories/beginners/explore-connections/style.css
Signed-off-by: Stukova Olya <stukova.o@gmail.com>
Signed-off-by: Stukova Olya <stukova.o@gmail.com>
There was a problem hiding this comment.
🧹 Nitpick comments (1)
src/stories/beginners.stories.ts (1)
53-62: Minor inconsistency in sourceCode naming conventions.The
Actionsstory uses'data-gen'(line 59) without the.tsextension, whileExploreConnectionsuses'data-gen.ts'(line 169) with the extension. Other existing stories in this file also use.tsextensions (e.g.,'data.ts','config.ts').Consider aligning to the existing convention with
.tsextensions for consistency in the displayed source code tabs.✨ Suggested fix for consistency
export const Actions: Story = { ...createStory(actions), parameters: { sourceCode: [ { name: 'Story', code: actionsStoryRaw }, { name: 'style.css', code: actionsStoryCssRaw }, - { name: 'data-gen', code: actionsStoryDataGenRaw }, + { name: 'data-gen.ts', code: actionsStoryDataGenRaw }, ], }, }Also applies to: 163-173
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/stories/beginners.stories.ts` around lines 53 - 62, The sourceCode tab names are inconsistent: update the parameters.sourceCode entries for the Actions story (export const Actions) to use the '.ts' extension (change the 'data-gen' name to 'data-gen.ts') so it matches the convention used elsewhere (e.g., ExploreConnections and other stories); also make the same change for the other story block mentioned (the data-gen entry around ExploreConnections) by renaming its sourceCode name from 'data-gen' to 'data-gen.ts' to keep tab naming consistent across stories.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In `@src/stories/beginners.stories.ts`:
- Around line 53-62: The sourceCode tab names are inconsistent: update the
parameters.sourceCode entries for the Actions story (export const Actions) to
use the '.ts' extension (change the 'data-gen' name to 'data-gen.ts') so it
matches the convention used elsewhere (e.g., ExploreConnections and other
stories); also make the same change for the other story block mentioned (the
data-gen entry around ExploreConnections) by renaming its sourceCode name from
'data-gen' to 'data-gen.ts' to keep tab naming consistent across stories.
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 02db85fa-50c1-4ec2-8942-b145145efe13
📒 Files selected for processing (6)
README.mdsrc/stories/1. welcome.mdxsrc/stories/beginners.stories.tssrc/stories/beginners/actions/data-gen.tssrc/stories/beginners/actions/index.tssrc/stories/beginners/actions/style.css
✅ Files skipped from review due to trivial changes (1)
- src/stories/1. welcome.mdx
🚧 Files skipped from review as they are similar to previous changes (1)
- README.md
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
1 participant
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.
Replace the imperative selection API with config-driven properties for controlling point and link visual states. Point and link highlighting are now independent — greying out points does not automatically grey out links.
Key semantics:
[]activates highlighting with everything greyed out;undefinedclears highlighting entirely.Removed methods
selectPointByIndex()/selectPointsByIndices()setConfigPartial({ highlightedPointIndices })selectPointsInRect()findPointsInRect()+setConfigPartial({ highlightedPointIndices })selectPointsInPolygon()findPointsInPolygon()+setConfigPartial({ highlightedPointIndices })unselectPoints()setConfigPartial({ highlightedPointIndices: undefined, highlightedLinkIndices: undefined })getSelectedIndices()Renamed methods (signatures changed)
getAdjacentIndices(index)getNeighboringPointIndices(pointIndices)number | number[]getPointsInRect(selection)findPointsInRect(rect)number[]instead ofFloat32ArraygetPointsInPolygon(polygonPath)findPointsInPolygon(polygonPath)number[]instead ofFloat32ArrayNew config properties
highlightedPointIndicesnumber[] | undefinedundefinedoutlinedPointIndicesnumber[] | undefinedundefinedoutlinedPointRingColorstring | RGBA'white'highlightedLinkIndicesnumber[] | undefinedundefinedfocusedLinkIndexnumber | undefinedundefinedfocusedLinkWidthIncreasenumber5New methods
getConnectedLinkIndices(pointIndices)number[]getConnectedPointIndices(linkIndices)number[]Hover event ordering fix
Hover detection now uses a two-phase approach: state is updated first for both points and links, then callbacks fire in the correct order —
mouseoutalways fires beforemouseoverwhen transitioning between element types (e.g. link → point). Previously, moving from a link to a point would fireonPointMouseOverbeforeonLinkMouseOut.Callback changes
onPointMouseOverisSelected→isHighlighted; new 5th paramisOutlinedSummary by CodeRabbit
Release Notes
New Features
highlightedPointIndices,outlinedPointIndices,outlinedPointRingColor,highlightedLinkIndices,focusedLinkIndex,focusedLinkWidthIncrease.findPointsInRect(),findPointsInPolygon(),getNeighboringPointIndices(),getConnectedLinkIndices(),getConnectedPointIndices().Breaking Changes
selectPointByIndex(),selectPointsByIndices(),unselectPoints(),getSelectedIndices(),getPointsInRect(),selectPointsInRect(),getPointsInPolygon(),selectPointsInPolygon().onPointMouseOvercallback:isSelectedparameter replaced withisHighlightedandisOutlined.Documentation