feat(graphs): add adjacency matrix representation visualizer#15
Open
dcq-31 wants to merge 1 commit into
Open
Conversation
- Add an Adjacency Matrix entry to the Graphs category that animates building the N×N adjacency matrix of a directed graph, edge by edge, with the graph drawn beside the matrix. - Add the `adjacencyMatrix` concept sub-type (`AdjacencyMatrixState`) and an inline `AdjacencyMatrixViz` component reusing the existing highlight styles. - Place it at the top of the Graphs category so the representation is taught before the traversal algorithms that rely on it. - Add bilingual (en/es) descriptions and update the README catalogs.
|
@dcq-31 is attempting to deploy a commit to the midudev pro Team on Vercel. A member of the Team first needs to authorize it. |
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 Adjacency Matrix algorithm to existing Graphs category
Summary
This PR adds Adjacency Matrix to the existing Graphs category — not another traversal, but a graph representation primer. It builds the V×V adjacency matrix of a small directed graph and shows that building the matrix is O(V²), it costs O(V²) space, and edge lookup is O(1). It's visualized with the project's "composite concept" pattern: the directed graph is drawn beside its matrix, which fills one cell per edge as the algorithm scans the edge list. It's registered at the top of the Graphs category so the representation is taught before the traversal algorithms (BFS, DFS, Dijkstra, …) that rely on it.
Changes
src/lib/algorithms/graphs.ts—adjacencyMatrixconst withvisualization: 'concept', a local 5-node directed graph (A–E, 7 edges), and bilingualgenerateStepsvia thed()helper.src/lib/types.ts— newAdjacencyMatrixStateconcept sub-type (nodes,edges,matrix,directed,currentEdge,highlightCells) added to theConceptStateunion.src/components/ConceptVisualizer.tsx—adjacencyMatrixdispatch case plus an inlineAdjacencyMatrixViz(SVG directed graph with<marker>arrowheads + a labeled N×N matrix grid), reusing the existinghighlightStylescolors and anaria-labelsummary of the edges set.src/lib/algorithms/index.ts— import + registration at the top of the// Graphsblock (representation before traversal). The category is existing, so no new category entry is needed.src/i18n/translations.ts—algorithmDescriptions['adjacency-matrix']entries added for bothenandes. The Graphs / Grafos category label already exists.README.mdandREADME_ES.md— added to the Graphs / Grafos catalog (leading the list).Visualization
A–E, 7 edges with arrowheads) is drawn above an all-zero 5×5 matrix with node labels on the rows and columns.0— no edges recorded yet.u→v: the active edge turns white in the graph (its two endpoints highlight orange) and the matching cell(u, v)flips to1, highlighted white then settling green (#4ade80); the active code line andvariables(edge,matrix[u][v]) track each assignment.1s are green,0s are dim (#444). Because the graph is directed the matrix is asymmetric (matrix[u][v] ≠ matrix[v][u]), and the panel notes edge lookup is now O(1) and space is O(V²).