Skip to content

Add a line-thickness slider for Graph, Code, and other link views - #93

Merged
braedonsaunders merged 3 commits into
mainfrom
cursor/line-thickness-slider-dcc9
Aug 28, 2026
Merged

Add a line-thickness slider for Graph, Code, and other link views#93
braedonsaunders merged 3 commits into
mainfrom
cursor/line-thickness-slider-dcc9

Conversation

@braedonsaunders

@braedonsaunders braedonsaunders commented Aug 27, 2026

Copy link
Copy Markdown
Owner

Follow-up to the Code canvas work in #82 / #88. On 2026-08-21 eorroe asked for a top-left slider that sets line thickness for all views. Braedon deferred that (and 3D moving links) with "can wait." This PR ships the thickness slider only.

What this PR does

Adds a Thickness slider to the existing top-left Layout / settings panel (the gear next to zoom). Range is 1-6. Default is 1, which matches the current Graph/Code edge width so nothing changes until you move it.

The same value scales edges in every view that draws links:

  • Graph and Code (shared SVG edges, including card-to-card Code links)
  • 3D Graph
  • Tree (dendrogram), Flow (sankey), Cluster (disjoint), and Bundle

The gear and Thickness control are now reachable in each of those views. Graph / 3D Graph / Code keep the existing zoom and layout sliders. Tree / Flow / Cluster / Bundle get the gear plus Thickness only.

Moving the slider updates Graph/Code/3D stroke width in place. It does not restart the force layout.

Persistence

Code-view Expand All / Wrap Text were never stored. This adds a small localStorage prefs object at codeflow-ui-prefs and writes lineThickness there. Reload keeps the last choice. Invalid or missing values fall back to 1.

Storage access is acquired inside resolveUiPrefsStorage / readUiPrefs / persistUiPrefs. App render and slider changes never touch window.localStorage at the call site. If the property throws SecurityError (sandboxed iframe, blocked storage), the app stays up at thickness 1 and the slider still works for the session.

Out of scope

Not in this PR, as requested:

  • 3D moving links on active files
  • Mini map
  • Zoom-out color blocks
  • Root-file-count gate

Still one HTML file. No extra pages or Node runtime for the browser app.

How to verify

  1. Analyze a repo, open Graph, click the gear in the top-left canvas toolbar.
  2. Move Thickness. Edges should get thicker or thinner immediately. Default 1 should look like today's lines.
  3. Switch to Code, 3D Graph, Tree, Flow, Cluster, or Bundle. Each of those views should show the gear. Thickness should follow the same setting.
  4. Reload. The slider should restore the last value.

Tests

  • Local npm test: 174 pass / 0 fail
  • Includes a case where window.localStorage throws SecurityError and render/prefs still default to 1
  • Includes vizUsesLineThickness coverage for Tree / Flow / Cluster / Bundle

Please review and merge when ready. No Codex review ping.

Open in Web Open in Cursor 

Follow-up to the Code canvas work in #82/#88. eorroe asked for a
top-left slider that sets edge thickness across Graph, Code, and the
other link-drawing views. Default stays 1 so current lines look the
same. The value lives in localStorage under codeflow-ui-prefs.

Co-authored-by: Braedon Saunders <braedonsaunders@users.noreply.github.com>
@vercel

vercel Bot commented Aug 27, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
codeflow Ready Ready Preview Aug 28, 2026 12:20pm

Request Review

@braedonsaunders
braedonsaunders marked this pull request as ready for review August 27, 2026 22:09

@chatgpt-codex-connector chatgpt-codex-connector Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 8f2adb65d6

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

Comment thread index.html Outdated
Accessing window.localStorage at the App useState and persist
call sites threw SecurityError before readUiPrefs/writeUiPrefs
could catch it. Resolve storage inside the helpers, keep the
in-session thickness default at 1 when storage is blocked, and
cover the throwing-getter case in tests.

Co-authored-by: Braedon Saunders <braedonsaunders@users.noreply.github.com>
@braedonsaunders

Copy link
Copy Markdown
Owner Author

@codex review

@chatgpt-codex-connector chatgpt-codex-connector Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 5349d6786c

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

Comment thread index.html
Those views already honor lineThickness but the gear and settings
panel were limited to Graph, 3D Graph, and Code. The toolbar now
follows vizUsesLineThickness. Extra layout sliders stay hidden on
the views that do not use them.

Co-authored-by: Braedon Saunders <braedonsaunders@users.noreply.github.com>
@braedonsaunders

Copy link
Copy Markdown
Owner Author

@codex review

@chatgpt-codex-connector

Copy link
Copy Markdown

Codex Review: Didn't find any major issues. Can't wait for the next one!

Reviewed commit: 7840f36926

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

@braedonsaunders
braedonsaunders merged commit bae40ad into main Aug 28, 2026
5 checks passed
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