feat: add interactive BoLD bisection visualization page#3144
Merged
Conversation
Add a new page under the BoLD section that replays real on-chain edge challenge events from Arbitrum Sepolia, visualizing how bisection works with an interactive D3 tree, event timeline, and node details panel. Includes pre-downloaded static data (no runtime RPC calls), playback controls, and light/dark theme support. Also fixes a pre-existing TS error in generate-doc-manifest.ts. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
…d reference Restructure sidebar as sticky container with proper panel nesting, fix heading sizes/margins to override Docusaurus defaults, add fixed-height split grid for Node Info / Event Timeline, fix MutualIds multi-item layout, and ensure sticky positioning works through all Docusaurus ancestor wrappers. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Bump heading and body font sizes slightly for better readability in Docusaurus context. Set SVG width to natural tree width so nodes maintain full size with horizontal scroll, and restrict tree canvas to horizontal-only scrolling. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Contributor
There was a problem hiding this comment.
Pull request overview
Adds a new BoLD documentation page with an interactive edge-challenge/bisection replay UI (D3 tree + timeline + node details) backed by static, pre-fetched on-chain event data, and fixes a TypeScript typing issue in the doc-manifest generator.
Changes:
- Introduces the Edge Challenge Flow interactive visualization components and styling.
- Adds a new BoLD doc page + sidebar entry that embeds the visualization.
- Adds a data-fetching script and updates dependencies (D3) + fixes TS casting in
generate-doc-manifest.ts.
Reviewed changes
Copilot reviewed 19 out of 21 changed files in this pull request and generated 6 comments.
Show a summary per file
| File | Description |
|---|---|
| src/css/partials/_edge-challenge-flow.scss | Styles/layout for the new visualization page (grid, sticky sidebar, tree styles, theming). |
| src/css/custom.scss | Wires the new visualization SCSS into the global build. |
| src/components/InteractiveDiagrams/index.tsx | Registers the new interactive diagram type to render EdgeChallengeFlow. |
| src/components/InteractiveDiagrams/Bold/EdgeChallengeFlow/useEdgeChallengeState.ts | Adds playback/state logic (timer, ranges, grouping, selection/collapse). |
| src/components/InteractiveDiagrams/Bold/EdgeChallengeFlow/types.ts | Defines event/data/state types used across the visualization. |
| src/components/InteractiveDiagrams/Bold/EdgeChallengeFlow/index.tsx | Re-exports the visualization entrypoint component. |
| src/components/InteractiveDiagrams/Bold/EdgeChallengeFlow/edgeChallengeLogic.ts | Core logic: range derivation, milestone computation, state application, tree building. |
| src/components/InteractiveDiagrams/Bold/EdgeChallengeFlow/constants.ts | UI constants: step list, speed options, default interval, Arbiscan URL. |
| src/components/InteractiveDiagrams/Bold/EdgeChallengeFlow/NodeDetailsPanel.tsx | Adds the node details UI (range/level/mutual ID/edges + copy links). |
| src/components/InteractiveDiagrams/Bold/EdgeChallengeFlow/FlowSteps.tsx | Adds top flow-step indicator UI. |
| src/components/InteractiveDiagrams/Bold/EdgeChallengeFlow/EventTimeline.tsx | Adds event timeline list + auto-scroll behavior. |
| src/components/InteractiveDiagrams/Bold/EdgeChallengeFlow/EdgeChallengeFlow.tsx | Page container that loads static JSON + composes controls/tree/sidebar panels. |
| src/components/InteractiveDiagrams/Bold/EdgeChallengeFlow/D3EdgeTree.tsx | Implements the interactive D3 tree visualization (zoom/pan, expand/collapse). |
| src/components/InteractiveDiagrams/Bold/EdgeChallengeFlow/ControlBar.tsx | Adds playback controls and speed selector UI. |
| sidebars.js | Adds the new “How bisection works” doc entry under BoLD. |
| scripts/generate-doc-manifest.ts | Fixes a TS type issue and reformats JSON header construction. |
| scripts/fetch-edge-challenge-data.mjs | Adds a script to fetch/decode Sepolia logs into static JSON. |
| package.json | Adds d3 (and its types) to support the visualization. |
| docs/how-arbitrum-works/bold/how-bold-bisection-works.mdx | New doc page with the embedded visualization component. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
…/arbitrum-docs into how-bisection-works
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
anegg0
reviewed
Mar 9, 2026
Co-authored-by: Gaël Blanchemain <anegg0@users.noreply.github.com>
anegg0
reviewed
Mar 9, 2026
…tTimeline.tsx Co-authored-by: Gaël Blanchemain <anegg0@users.noreply.github.com>
Co-authored-by: Gaël Blanchemain <anegg0@users.noreply.github.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
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.
Add a new page under the BoLD section that replays real on-chain edge challenge events from Arbitrum Sepolia, visualizing how bisection works with an interactive D3 tree, event timeline, and node details panel.
Includes pre-downloaded static data (no runtime RPC calls), playback controls, and light/dark theme support.
Also fixes a pre-existing TS error in generate-doc-manifest.ts.