Hacktoberfest 2026: the issues maintainers tagged for October, open and beginner-friendly. Browse Hacktoberfest issues

PR A: Rendering foundation for the new visualizations

Open
  • Is something wrong?
#352 0 comments 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 1 day

Nobody has claimed this yet.

Assessment

Difficulty
5/5
Estimated time
Over a week
Newbie friendliness
25/100
Issue type
Feature
Clarity
Mostly clear
Activity status
Active
Tech stack
d3, javascript, react, redux
Domain
accessibility, frontend

Research direction

Read #351 for the broader visualization scope, then inspect StandardGraphSvgReact.js and the Solve section’s solver flow. The issue also depends on ReduxISU/Redux#656 for passing the chosen solver to the visualization request. Done means completing the listed rendering, layout, controls, and accessibility requirements, with #353, #368, and #369 unblocked.

Written by the indexing model from the issue text.

Description

enhancement

Part of #351. One PR containing:

  • React-owned SVG components with D3 used only for math (d3-force, d3-zoom, d3-shape); no d3.select on the page and no global #id lookups (today StandardGraphSvgReact.js uses d3.selectAll("#id…") and a hard-coded #highlightGadgets checkbox).
  • One table mapping state names to styles, from the theme tokens, light and dark. Use the shared state names: Background, ElementHighlight, Solution, Rejected, Untraveled, Covered, Blocked (False is still under review).
  • Layout rules: diagram + side panel side by side from 1,200 px; stacked below that with the stepper first and the key folded behind a "Key" toggle; on phones (≤700 px) the diagram keeps min-width: 560px in its own sideways-scrolling box with a hint; no diagram max-height on short screens; 44 px touch targets and 16 px input text on touch screens; "Tap" instead of "Hover" on touch devices.
  • Request format=frames (ReduxISU/Redux#656) and pick the renderer by the returned type. For a type with no new renderer yet, fall back to the existing renderer on the old flat-list response, so each picture type can switch over on its own (see ReduxISU/Redux#655).
  • Step controls driving frames[]; pass the Solve section's chosen solver to the visualize request (needs ReduxISU/Redux#656).
  • Accessibility: role="img" with a label per diagram, focusable nodes with aria-labels, visible focus, reduced motion respected.

Blocks: #353, #368, #369.

Dominant language
JavaScript
Stars
3
Forks
18
Avg merge
1d 3h
Merged PRs (30d)
35

Getting set up

Open in Codespaces

Starts the project's dev container in your browser, under your own GitHub account.

  • Ships a Dockerfile or Docker Compose file
  • Has a pull request template
  • No contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from ReduxISU/Redux_GUI

All issues in ReduxISU/Redux_GUI

Similar issues

More JavaScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.