zischwartz / diagram-exercise

Diagram UI Exercise

About

Given the time constraints, I opted to use the reactflow library which provides a lot of the basic display logic for flow charts, while being very extensible and expandable.

I also used jsdoc to include some lightweight documentation directly in the code, which is available as an html page here.

Development & Deployment

To install and run locally, clone down this repo and from this directory run:

yarn && yarn start

This will install all the dependencies and start up the dev server.

To build the project, the docs, and to deploy both via github pages, run:

yarn ship

Limitations & Caveats

• The way the onChange handler is attached to each element's data property is awkward, and would be worth refactoring.
• Because I ended up using reactflow, which contains it's own tests, and the time constraints, I did not write tests. Had I been able to, the propagateDown function would be high on the list.
• It doesn't deal with specific logic around which types of nodes can connect to which other types, currently any type is allowed to connect to any other type.
• There's no mechanism or UI to clear localStorage currently.