jsPlumb Spike Learning

jsPlumb Spike

Overview:

The purpose of the spike is to determine the feasibility of utilizing jsPlumb to enable relationship modeling in Tempus.

Tasks:

• a branch was created tempus-elaboration-19 to hold the work
• a simple SPA folder was created under tempus/ui/src to hold the spike source code, including a simple index.html to display the spike (simpler than full tempus UI integration).
• The simple demo allows for the creation of arbitrary elements that are connectable, along with storable information for live saving / loading of relationships
• jsPlumb events were identified for creating modals for modifying relationships. An example would be onclick listeners for modifying an existing relationship or onconnect listeners for creating a newly connected relationship

Learning:

jsPlumb is a fully capable library that has mediocre documentation.

In general, the following became clear while developing:

• jsPlumb has good documentation, but it is poorly organized (similar to the plotly documentation). If you can find what you're looking for, the info is great, but it's hard to find.
• jsPlumb is really similar conceptually to jQuery, and would work well with it (or with angular.element). The general flow should be to dynamically create / edit DOM elements with jQuery then modify connectivity with jsPlumb. The whole time, event listeners should be added for clicking on elements / creating connections to popup an easy modal that allows the user to modify the clicked relationship / elements.
• This model also works well with an angular controller that manages saving new data from the UI and displaying saved data in the UI
• A new problem created by this implementation is how much freedom to give the user. More freedom = more complexity. I would recommend tending towards low freedom and high simplicity until we can validate our user assumptions.

Conclusion:

While the library is fully able to solve the problem of interactive relationship editing, it requires a ton of code to accomplish the UI we've envisioned. The question now is not regarding the feasibility of jsPlumb, but of the accuracy of our Personas and User Stories.

I think the best approach is working with a less flexible, simpler library to implement an MVP for user testing and iterate our way to jsPlumb if/when we decide it's the right way to go.

Here is a collection of viable alternatives to jsPlumb