Graph Algorithms#7
Merged
Merged
Conversation
New /graph route built on React Flow: a hand-positioned starter graph that users can edit with keyboard controls (N add node, E add edge, S/F set start/finish, Del delete, drag to move) and run BFS or DFS over. - Pure planners (bfsActions/dfsActions) return a flat action log; the page is a generic executor applying each step with a delay - Directed/undirected toggle; finish node stops the run and highlights the start->finish path - Floating edges (no handles) with a big mid-edge arrow showing travel direction, for both directed and undirected graphs - Added home card linking to /graph
Add a Data Structures section covering the Linked List and interactive Graph Traversal visualizers, refresh the README segment list, and note both additions in the timeline.
…Ford) New /shortest-path route reusing the /graph editor with weighted edges and per-node distance labels. - Pure planners (dijkstraActions / bellmanFordActions) emit the action log; Bellman-Ford runs V-1 passes plus a detection pass that flags a negative cycle. Dijkstra warns on negative edges. - Inline-editable edge weights (click a weight to type a new value), wired through a new EdgeWeightContext. - Additive enhancements to the shared graph components: distance badge on the node, weight label + relax/negcycle edge states on the edge; /graph BFS/DFS is unchanged. - Weight label anchors to the stable edge orientation so it doesn't jump sides during traversal. - Added home card linking to /shortest-path.
Pull the shared React Flow editor + action-log executor out of the two graph pages so future graph visualizers can reuse it: - use-graph-editor: hook owning graph state, the keyboard editor, and an algorithm-agnostic executor (run(actions) / getContext()); a `weighted` option gates edge weights + inline editing. - graph-canvas: React Flow canvas + mode/status overlays + EdgeWeightContext. - graph-menu: shared configurable sidebar. - graph-node / floating-edge: moved here from app/graph. - graph.js toFlow unified (weight optional); shortestPath.js reuses it.
Rewrite the page as thin config (useGraphEditor + GraphCanvas + GraphMenu) and remove its per-page menu; BFS/DFS dispatch is the only page-specific logic left.
Rewrite as thin config (useGraphEditor with weighted + GraphCanvas + GraphMenu) and remove its per-page menu; Dijkstra/Bellman-Ford dispatch is the only page-specific logic left.
- Move weightedAdjacency/edgeList into graph.js as core helpers (shortestPath.js re-exports them; its imports are unchanged). - floating-edge: draw the mid-edge travel arrow only when a direction is set (travelTo), so undirected uses get no arrow; add a 'reject' edge color. - graph-menu: add a hideDirected prop to omit the Directed toggle.
New /mst route on the weighted graph workspace (undirected, hideDirected menu). kruskalActions uses Union-Find — edges accept green in weight order, cycle edges fade, running total in the status line; primActions grows the tree from the S start node. Both report a not-connected forest. Added the home card and a real shortest-path thumbnail.
- Selection highlight: clicked node gets a sky-blue ring (stacked outside the start/finish ring); clicked edge turns sky-blue and thicker. - Modal keyboard editing: N add-node, E add-edge (chain through clicked nodes), D delete — all persistent until Esc. On a selected node: S/F/Del; on a selected edge: X reverse (directed) / Del. Disabled React Flow's built-in delete key so deletion goes through one path. - On-canvas command bar is now context-sensitive: shows the available options for the current mode or the selected node/edge. - Menu controls rendered as <kbd> keycaps; per-element actions collapsed to a single "click a Node / Edge for options" pointer to the command bar. - Shared Key component (kbd.jsx).
Add the Shortest Path (Dijkstra / Bellman-Ford) and Minimum Spanning Tree (Kruskal / Prim) visualizers to the segment lists and algorithm breakdown; group the interactive graph visualizers in the About page.
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.
This PR adds a new interface for creating interactive edge and node based graph.
Using the interface it also adds 3 new segment