User Story:
As a: User

I want: to visualize depth-first-search on a graph

So that: I can observe the behavior of DFS algorithm

User Story:
As a: user

I want: to start off with a default graph to use for simulation

So that: I can spent less time on creating the environment for simulation

Describe the bug
There's a bug with the function connectNodes() in class ForceSimulationGraph.

To Reproduce
Steps to reproduce the behavior:
modify the update function in class ForceSimulationGraph (line 123 from self.connectNodes(self.link.source,self.link.target); to self.connectNodes(0,2);)

Expected behavior
node0 is connected to node2

Screenshots

Additional context
nope

Describe the issue or proposal here:

I want to modify the UI of the graph page

Screenshot/mock-up:

User Story:
As a: developer

I want: a graph model for visualization with ability to modify traverse the graph

So that: I can build simulation models for search algorithms

I want to add the following features to the graph algorithm set

• Minimum spanning tree

The following module/function/system need to be tested:

Let's think how we can test this module.

Might be tricky since part of the module interfaces with D3 library and there's graphical parts to it.

User Story:
As a: user

I want: to simulate the following sorting algorithms

• insertion sort
• binary insertion sort

So that: I can learn how these algorithms work and differ from each other

User Story:
As a: user

I want: to see what is happening inside BFS and DFS search

So that: I can understand how data structure works differently for different algorithms

User Story:
As a: user

I want: be able to delete nodes and edges in the graph

So that: I can remove unwanted parts of the graph

The following module/function/system need to be tested:

We cannot test anything that depends on D3 since we are using HTTPS imports. This caused some core visualization modules to go untested. We need to find a way to unit test these core modules

User Story:
As a: User

I want: to visualize breadth-first-search on a graph

So that: I can observe the behavior of BFS algorithm

Describe the issue or proposal here:

I want to reorganize the index page. The model is this.

Screenshot/mock-up:

Will finish Mar 14, 2023

In algorithm descriptions, please include time and/or space complexities

User Story:
As a: developer/product manager

I want: to know the test coverage of my product

So that: I can identify potential areas of weakness in the system

User Story:
As a: developer

I want: to automatically deploy the website with latest changes.

So that: I can see the changes live in action

User Story:
As a: user

I want: the graph model to support edge weights

So that: I can study the impact of edge weights on algorithm behavior

User Story:
As a: user

I want: simulate network flow algorithm

So that: I can understand how it works

Describe the bug
More than one link can be formed between two nodes in the log pannel.

To Reproduce
Steps to reproduce the behavior:
just draw a line between two nodes for 2 times.

Expected behavior
Only one link can be formed between two nodes. svg_graph class will check if a link already exists before creating a new one.

Gonna finish in about an hour.

Native JS does not offer pseudo RNG.

We may want to have pseudo RNG so it is available when we want to generate deterministic random tests and random simulation environments.

Main criteria for the RNG:

• near uniform distribution
• high performance, assuming RNG will be called many times

User Story:
As a: user

I want: to return to the last state when I accidentally click to create a circle

So that: I don't need to start again

User Story:
As a: user/developer

I want: to have a text panel where I can see status reports of the simulation and diagnostic information (as developer)

So that: I can see additional information about the current and past state of the simulation

The following module/function/system need to be tested:

Dijkstra's

User Story:
As a: user

I want: to navigate between subpages within 1 click of a button

So that: I can switch between simulations faster

User Story:
As a: user

I want: simulate Dijkstra's algorithm

So that: I can understand how it works

Add the following APIs for labeling in array visualizer allowing developers to add labels to describe their visualization:

• Title label
• Left end label
• right end label
• legend labels

The following module/function/system need to be tested:

unit testing needed for A*

support quick sort simulation

User Story:
As a: Developer

I want: to have my unit tests run automatically on code check-in

So that: I can observe that no bugs were introduced by my commits

Context diagram should include Bootstrap as it is used to create responsive UI

Describe the issue or proposal here:

Please propose a design for the main page UI

Screenshot/mock-up:

User Story:
Who:
What:
Why:

User Story:
As a: algorithm developer

I want: use a grid graph as the simulation setting with well defined coordinate system

So that: I can easily define heuristic function based on Manhattan distance or Euclidean distance. Otherwise, it is difficult to define heuristic functions on a generic graph.

User Story:
As a: developer

I want: to setup regression testing for the UI

So that: I can ensure my new changes work as expected and does not alter existing functionality unexpectedly

• graph algorithm: best first search
• graph algorithm:
• sorting: merge sort
• sorting: quick sort
• tree: 大小堆

For each algorithm simulation, we should include short descriptions on:

• What is the algorithm
• Instructions on how to use the simulation
• What to expect? E.g. a legend, meaning of colors
• Time/space complexities

Should do this for:

• BFS
• DFS
• A*
• Dijkstra's
• sort algorithms

The following module/function/system need to be tested:

GridGraph.js

User Story:
As a: developer

I want: a visualization model for array data structure

So that: I can use this model to show additional information for algorithms that uses array internally

Describe the issue or proposal here:

BFS and DFS are very similar algorithms, their UI should be consistent as well

• Maybe its easier to do layouts if UI elements are described in HTML instead of generated dynamically in JavaScript
  • e.g. SVG, log panel
  • also helps to reduce amount of code
• Try to make UI look nice, for example but not necessarily limited to:
  • centering the elements
  • Compact input text fields instead of a long input field
  • Show boundary for SVG so user knows where the interactive region ends
  • something other than a white background? it looks kind of bland

Screenshot/mock-up:

User Story:
As a: User

I want: to visualize A* search on a graph

So that: I can observe the behavior of A* algorithm

Describe the issue or proposal here:

please make a link to https://jxr98.github.io/AlgoVisualizer/html/sort.html in the home page.

Screenshot/mock-up:

User Story:
As a: user

I want: control the speed of the sorting simulation

So that: I can slow down the simulation to study it in detail or speed it up to get the results faster

User Story:
As a developer,

I want to know how much the test coverage is

So that I know what percent of code still needs unit testing.

I want to know more about:

How the software system is organized.
Which modules are designed.
Which modules are 3rd party.

User Story:
As a: User

I want: to visualize best first search on a graph

So that: I can observe its behavior