webui: comparative review of the potential libraries to use

[s-ff]

Opening this issue to keep track of the potential frameworks to be used in the webui.

I researched the most widely used options available and decided on 3 options. The criteriaon for my search were:

• Support for a treeview-like table similar to capa-explorer.
• Ease of use and wide adoption
• Ability to unit test
• Customizability

As of now, these are the candidates I think are good for our use case:

• Prime: Prime is a UI library that works with React, VueJS, and Angular frameworks. It ships with a treetable component that mimics Capa's hierarchical rule logic definition. Features include:
  • Global and per-column search
  • Conditional styling of tree nodes (e.g make rule titles bold)
  • Table pagination, scrolling, and per-column sorting
  • Event handlers (e.g., when a child node is clicked)
  • In-cell editing (e.g. edit a cell a value)
  • Stateful (i.e. we can store the rdoc in localStorage)
  • Mobile-friendly
  • Works with all 3 frameworks
  • TypeScript support
• Vuetify: A UI library for VueJS featuring a v-treeview component very similar to Prime. However, this treeview lacks table-like columns. Vuetify is mobile-friendly and supports TypeScript. I experimented with v-treeview (demo), but once it is wrap it wrapped in a table (for sorting purposes), the core functionality of the v-treeview like the search breaks.
• AG Gird: a framework-agnostic framework for large datasets
• jsTree: a small JQuery plugin for simple lightweight expandable tree lists, requires more hands-on customization. (support javascript only). I find the documentation of jsTree to be lacking details.

All of these projects are actively maintained, and are kept up to date with their frameworks. They also offer unit testing, tough I am not sure about jsTree

Recommendations

• PrimeReact/PrimeVue: Best overall choice if we want to use React, Vue, or Angular. The TreeTable component is rich in terms of functionality and closely matches our requirements. The additional UI components could be beneficial for future development (capa-rules) or features. imho, React is far more adopted than Vue, but Vue tends to be more easy to learn.
• AG Grid: good, but overkill for our use case, since we are not handling large datasets. On the other hand, it has a very diverse set of visualization charts.
• Vuetify: Another viable option for VueJS. However, additional work may be needed to achieve the desired table-like structure.
• jsTree: very limited in terms of features and customization and does not offer tabel columns for example.

[mr-tz]

Thanks for your research here! Per our discussion we're going with Vue.js / PrimeVue.