venvis / assignment-graph-ui

A very basic cytoscape based graph ready to be used to experiment.

To run the script , clone the forked repo and navigate to the following directory :

git clone [email protected]:venvis/assignment-graph-ui.git
npm install 
cd assignment-graph-ui
cd src
npm start

Once started , it will automatically open localhost:3000 and this should be how index.tsx looks like. In case any error occurs due to headless reading on the page , refreshing the page will make it go away and the code will work fine

Click on any node to see it's information : Name , Id , Indegree , Outdegree on the right hand side for Requirement 1

While clicking on the nodes , every other node it is connected to and the neighbouring lines and arrows are also highlighted : Requirement 2

To change the name , into another , I have set the content of the h3 to be editable , so it can directly be changed . Requirement 3 . It is Case friendly and must be written in all CAPS like all nodes . For example:

Change name by removing the "Enter name to be changed" and edit into name accordingly and click on the change button.

For Requirement 4 , start searching by typing directly in the search field and automatically all nodes not related and their edges start disappearing , showing only related nodes from the search bar.Not CASE friendly. For Example :

In this example , RFC5 is filtered out and all other nodes and their edges/lines disappear

To run all requirements including 1,2,3 and 4 , it's necessary to click on a node first to initiate step 1 for all other steps to work since all the necessary code is under the cy.on('tap') method