• Website: https://redux.portneuf.cose.isu.edu/
• Backend Repository: Redux Backend

• About Redux Frontend
• Prerequisites
• Local Development Setup
• Code Overview
• Adding to the Codebase
• Deployment
• Branching Strategy
• Definition of Done
• Contributors
• Additional Resources

• Interactive problem visualization using React and D3.js
• Real-time problem reduction visualization
• Solution and certificate verification interface
• Gadget highlighting for reduction mappings
• SVG-based rendering for mathematical structures

• Node.js (with npm)
• Redux Backend (must be running)

git clone https://github.com/ReduxISU/Redux_GUI.git
cd Redux_GUI

npm install

1. Clone the Redux API repository
2. Launch the Redux API using dotnet run
3. The API will be available at http://127.0.0.1:27000/

npm run dev

• components/Visualization/svgs/Visualizations.js - Maps problem names to visualization components
• components/Visualization/svgs/ReducedVisualizations.js - Maps reduction names to visualization components
• components/Visualization/svgs/ - Contains all SVG-generating React components

• components/pageblocks/ - Major components that make up the main interface
• pages/index.js - Main page that implements all components

• components/widgets/ - Reusable React components used throughout the application

• New major components → Add to components/pageblocks/ folder, then implement in pages/index.js
• New visualizations → Add to components/Visualization/svgs/ folder
• New widgets → Add to components/widgets/ folder

• Must be a React component function
• Must return an SVG element
• Should take only a URL for an API call as a parameter

• The API URL should return information specific to your visualization
• Follow the style of existing visualizations
• Reuse methods for similar visualizations wherever possible
• Ensure the visualization works for both solved and unsolved problem instances

• Open components/Visualization/svgs/Visualizations.js
• Add your component to the map with the problem name as the key

• Open components/Visualization/svgs/ReducedVisualizations.js
• Add your component to the map with the reduction name as the key

const visualizationMap = {
  "My Problem Name": (props) => <MyProblemVisualization {...props} />,
  // ... other visualizations
};

1. Created in the components/pageblocks/ folder
2. Implemented in the pages/index.js file

npm install
npm run build
npm start

• Install all dependencies
• Build a production-optimized version
• Start a production server on port 3000

npm run build
docker build -t reduxgui .
docker run -it --rm -p 3000:3000 --name reduxgui reduxgui

• Branch name: ReduxAPI_GUI
• Additions should only be made through merging from the develop branch
• Requires code review before merging

• Branch name: develop
• Most code additions are made directly here
• Relatively few merge conflicts

1. Make changes on the develop branch (or create a feature branch from develop)
2. Create a pull request to merge into develop
3. Assign a reviewer for code review
4. Reviewer completes the pull request after approval
5. Periodically merge develop into ReduxAPI_GUI for production deployment

• Visualization function is a React component that returns an SVG
• Component takes an API call URL as a parameter

• API endpoint specific to the visualization is functional
• Both solved and unsolved variations have working endpoints
• Endpoints are documented correctly in the backend

• Solution highlighting is functional for general problem visualization
• Gadget highlighting is functional for reduction visualizations
• Works for all relevant reduction types

• React component is added to the correct visualization map
• Component follows the style of existing visualizations
• Reuses methods from similar visualizations where applicable

• Redux Backend Repository
• Redux Backend API Documentation
• Wikipedia: What is NP-Complete?
• Karp's 21 NP-Complete Problems

• Framework: Next.js (React)
• Visualization: D3.js, SVG
• Styling: CSS/Styled Components
• API Communication: REST API calls to Redux Backend

• Backend API: Redux
• Quantum Solver: quantumsolver

• Issues: Use GitHub Issues for bug reports and feature requests
• Discord: Join our community
• Weekly Meetings: Thursdays at 11:20 AM MT via Zoom

License