m-a-y-a-n-k / algolens

A project for visualising Data structures and Algorithms

• 👋 Hi, I’m @m-a-y-a-n-k
• 👀 I’m interested in Software Development
• 🌱 I’m currently learning how to build a sleak UX
• 💞️ I’m looking to collaborate on some fun projects
• 📫 How to reach me [email protected]

algolens's Issues

Algorithm : K-Means

I know this is done when-

1. The user is given a 2D canvas on the page.
2. The user can create data points on the canvas.
3. The user chooses seed points as mean. If the user skips this step, allocate random seed points on the canvas as initial means
4. K-means algorithm is run on the canvas data points on the given seed means.
5. Output clusters are shown in different colors and calculated means are connected to data points within the same cluster by colored lines
6. The user has an option to clear canvas.

Data Structure and Algorithms : Graph

A route shall be created for a Graph data structure which will have an implementation of a dynamic graph created by the user by specifying nodes and links. The use of the npm package graph-data-structure is advised.

Following operations will be allowed on the page to the user

1. Create a new node in the graph.
2. Create a new link in the graph.
3. Link could be directed or undirected and weighted or unweighted.
4. The graph will be stored as an adjacency list along with weights.
5. Users can remove an existing node or link from the graph.
6. Users can update a particular graph node data or edge weight.

Algorithms supported ( in future on different routes each )

7. Check if the graph is cyclic.
8. Check if the graph is connected.
9. Check if an input graph is a subgraph of another graph.
10. Merge two graphs into one single graph by adding up common edge weights.
11. Check if the graph is a generic tree rooted at some arbitrary node.
12. Traverse a graph using BFS or DFS.
13. Find all paths between two nodes of a graph.
14. Find the shortest paths using Djikstra's algorithm between any two nodes.
15. Remove cycles in a graph.
16. Find connected components in a graph.
17. Find a minimum spanning tree of a graph using Prim's and Kruskal's algorithms.
18. Check if the graph is bipartite.
19. Color a graph using n different colors available.
20. Check if two graphs are identical.
21. Reverse a directed graph.
22. Topological Sorting on a graph.

• There will be a separate route for algorithms to be covered later in the Graph Algorithms section.
• More algorithms can be added as well.

File Bug Report

It is expected that after completion of this issue, a user shall be able to file a bug report to our platform for a bug encountered by user on any site page indicating bug details.

1. The user will get a popup on click of a button "REPORT BUG" present in the global footer on every page.

2. In the popup the user will be shown a form with fields below and two buttons for Submit and Close
   a. Description (Mandatory)
   b. URL (Mandatory)
   c. Screenshot (Not mandatory)
   d. Reporter Email (Mandatory)

3. A dynamic Bot detection script (captcha inside popup form) should be applied on page to block multiple requests to the system by a bot on opening the popup and same script should be removed from page as popup is closed

4. On successful form submit , an email is sent to the email accounts of developers available in the project so far and a do not reply success email template with logged details of the bug is sent to the reporter email account from a single email account.

Data Structure : Binary Tree

The developer needs to create a Data Structure implementation for Binary Tree (preferably in Material UI) for which he needs to do the follows-

1. Write a high level recursive component that renders a binary tree on the page which root node has a data object structure
   data = null
   or
   data = {
   value : Primitive Value (String),
   id : Unique String of minimum 16 and maximum 24 characters,
   // example id : ( LLR ) for Left Left Right child of root
   // example id : ( ) for Root
   color: Unique color (RGB) of the node which does not resemble white or black or any closest color,
   left : null or Nested JSON for left child (same structure as data above),
   right: null or Nested JSON for right child (same structure as data above),
   radius: Radius of the node in pixels,
   highlight: true or false,
   // whether to highlight the node or not , change node color to black when true use color property when false
   }

2. UI of every node -
   A node will be circle of fixed radius minimum 16px in which there will be id and value as text ,example -> ( id: LL , value: 'GO' ) in white color and background color of node will be determined by color property in its JSON structure.
   The radius of the node will be determined by its radius property (minimum 16px) and will be higher for nodes at lesser depth.There will be links made by arrows to left and right child nodes as well. Arrow links will be black in color.

3. User has an option to insert a new node in the tree as left or right child based on drop down selection and also specifying parent id as a string of Ls and Rs. User cannot create more than 24 level binary tree. No such drop down or parent string is required for the root element. Root should be simply inserted by asking value only

4. User can delete a node and its children sub-trees at once by specifying the id as a string of Ls and Rs

5. User can look for a node the tree . Show the path by highlighting nodes one by one on the id string of Ls and Rs supplied.

6. User can search for a value by traversing the tree . Choose traversal type in drop down and traverse one by one by changing alpha ( transparency ) of current node for 1 second until node having supplied value is found and stop at that node only highlighting it.Given traversal types -
   a. Level-Order
   b. Post-Order
   c. Pre-Order
   d. In-Order

View Pseudocode

In this, we are targeting the follows-

1. Every data structure and algorithm visited on the site has view pseudocode </> icon.

2. On click of that icon, a popup window appears in which the algorithm or data structure pseudocode will be made available in formatted text like

{{ pseudocode }}

3. At time t-zero first line is highlighted in accent green. As time progresses next lines would be highlighted one by one after every 1 second.
   Statements in pseudocode are using text-wrap wrap formatting so there can be a case that a statement exceeds more than one line. The entire statement is highlighted at once in accent green

4. The popup window is closed on click of a cross button or press of escape key or click of outside popup area

Material UI or SCSS

This issue requires developers to -

1. Identify the standard UI framework in this project.
2. Enhance UI using agreed framework
3. Migrate old code base from other UI libraries to agreed UI framework and delete the former UI dependencies using npm so that package.json is clean.
4. Check performance score of page and see if some better UI framework can be considered

Landing Page

We need a landing page (Dashboard) which meets the following criterion -

1. Responsive Web Design ( Desktop + Mobile )
2. Autosuggestion search component for filtering out Data Structure and Algorithm names known by the platform.
3. Selecting an option in the auto-suggestion list and clicking on the Go button would take us to the route where that option's actual Algorithm/Data Structure playground page is situated.
4. Wrapping all code in react-router and handling routing requests by dynamic lazy loading from the frontend itself.
5. Global Header and Footer:
   -> Header has the logo and navigation options to Dashboard, About, Contact, Donate, Forum page links highlighting the currently active link.
   -> Footer has a standard copyright logo and text with the current year and starting year mentioned and Go to Top button

Data Structure : Matrices

This story is supposed to be considered complete when a site page is created for the data structure Matrix that is accessible in autocomplete search box at site header and allows following operations to the user -

1. Create an n x m 2d matrix of generic data type objects.
2. The addition of two or more compatible matrices is supported. (Nested Loop)
3. Multiplication of more than one compatible matrices is supported. (By Fast D&C and Slow
   Three Loops methods)
4. The exponentiation of a matrix is supported (By D&C).
5. Scalar Multiplication of a single matrix is supported. (Nested Loop)
6. The Transpose operation can be applied to the matrix. (Using extra space)
7. The type of matrix can be identified (Wikipedia to know various types)
8. The determinant of the matrix can be calculated. (Recursive approach)
9. The Inverse of the matrix can be calculated if invertible.
10. The trace of a matrix can be calculated.
11. A system of linear equations can be solved by matrix method if possible.

• The working of all the above operations would be shown step by step.

Lightbox (Modal)

The developer needs to build a modal / popup / light-box that is extensible and plug and play and can be used on any page any number of times in the project as per demand.

1. The modal is not empty and content HTML is supplied to it as data and content is dynamically added / removed / modified throughout the life cycle of modal

2. The modal opens up on an event triggered by user and closes when either one of the following takes place
   a. The user clicks on close icon on top right of popup
   b. The user pressed Escape key on keyboard
   c. The user clicks on the back layer (dark-grey transparent alpha 50%) which is present outside the popup region

3. The modal is written as a React Component either using Material UI or vanilla JavaScript. No other libraries / frameworks should be used

4. There is an option to provide Accept and Reject buttons that show at the bottom of popup. Text and functionality of the two buttons is also provided as data to the popup component on invoking

5. Callback functions to perform on Open and Close events of modal are defined as data to the component at the time of invoking / initializing

Home UI design

Git Best Practices

I know this issue is closed when we have curated a list of best practices related to version control which are a must to be followed by all developers working on this project.
You can comment on your opinion below.
We will combine all the inputs we get and finalize a master list that will be accessible to all developers in this project.
The best practices thus finalized are meant to be strictly followed under any condition and merge requests failing that will not be accepted in the release codebase.

Project Structure

Suggest the right project structure and implement it such that it is scalable based on the increasing complexity of the project.