Sample Joint JS

This is a sample Joint JS project which gets data from REST API and using the Images in the local creates an interactable graph on the webpage

Input

Check out the SampleFromAPI.json file to get to know about the input coming from the API

Api data would be coming from AWS Backend in this scenario

Sample Run

Copy the whole Json provided in SampleFromAPI.json file and paste it on the fromjson.component.ts file Save and run it

Function to Create them

There are different types of formats which can be used in the Web Page through Joint JS and here i have used some basic ones like

1. Bordered Image
2. Link
3. Image

Temp.txt file holds the functions for creating the Images and other stuff which can be added on the Graph

Obtaining the Json of the Created Page

Commented out a piece of code which can be used to get the JSON rep of the created graph which can be used as deemed fit [ Scroll down till the end of the page for a Small Blue line and right click open it for the json file]

Future Work

1. Trying to open different Elements of the Web Page based on click of the elements represented on the Graph
2. Need to add a feature to reflect back to the Json in case some rearrangement is made on the Web Page ( As of now, Rearranging images on the webpage does not affect the Json Output)
3. Make the Website more interactive and useable
4. Try to Store the Images and Pass them through the API calls rather than using them from Local Storage.
5. Write a Medium Article explaining the steps involved in replicating this project from scratch.

Side Note

Added a small text file which i followed while installing JointJS.. It might or might not be the right way but so far it got the job done.. Installation.txt is the file which contains the steps i have followed to get this up and running

#Thank you! Hope to contribute more on this soon!!!