Decide on the JavaScript framework for rendering and editing a mindmap

[koppor]

Required for https://github.com/SE761Team4/jabref/issues/25

As a developer, I would like to have a library which provides a basic mind map functionality, because I do not want to implement it from scratch.

Options:

• jsMind
  • Demo: https://hizzgdev.github.io/jsmind/
• Raphaël ( http://raphaeljs.com/ )in combination with the Dracula Graph Library( http://dracula.ameisenbar.de/ )
• MindMup MapJs
• http://thejit.org/
• p5js
• Eclipse Sprotty
• js mindmap
  • Demo at http://www.liamsullivan.co.uk/fyp/mindmap/
  • Bad, because not maintained since a decade
• See also https://stackoverflow.com/q/10232850/873282

Acceptance Criteria:

• Initial prototype implementing one option
• ADR listing the options and the decision

[koppor]

@isabellelucy Could you point me to the ADR created? I could not find it at https://github.com/SE761Team4/jabref/tree/jabmap/docs/adr.

[isabellelucy]

Considered design options and decision We looked in to a lot of different mind map libraries to find the one that could best integrate with JabMap. Started using mmp library but found the legacy code was too difficult to work with so ended up using react konva to implement the mind map

[koppor]

Thus, the other alternatives weren't tried out? Which is OK. Just add an ADR! 😅

[isabellelucy]

Sorry Oliver! I hope this ADR is more comprehensive:

Architectural decision

• We want to document the decisions we made regarding the library used for the mind mapping tool for JabRef (JabMap). Below is a description of the options we investigated, their pros and cons and the ultimate decision we made:

Blink mind

• Link
• Looked good but after initial test it did not fit with the look and feel we wanted and was unintuitive in terms of adding/deleting nodes
• Had no drag and drop functionality
• Too difficult to integrate with our pre-existing framework ( a lot of dependencies, code looked difficult to work with and slow start up)

React Mindmap

• Link
• UI looked good
• Unmaintained library
• Unable to set up remotely on computer so eliminated option

MMP Mindmap

• Mmp Mindmap
• Comprehensive library that had most features we needed including changing node name, colour and font
• Good UI that fit with the look and feel we wanted
• Deprecated library and dependence on SVG limited extensibility in terms of adding icons and editiable aspects we needed to implement. Also written in native javascript which no members of the team were familiar with

We started using this library (mmp) initially and realised after a week or so that the features we wanted to implement on top of this were to difficult to do. Due to time constraints we had to make a quick decision on what to do and decided to make the mindmap functionality from scratch using the below library:

React Konva

• Link
• Canvas components for React
• Allowed us to implement elements such drag and droppable components/ required functionality more easily than building on top of a pre-existing library
• More members of the team were familiar with the language