made it difficult to really modify and customize the UI. When it came time to give
things a fresh coat of paint we decided to build it using React for three main reasons:
Components. We'd be able to take advantage of the React ecosystem using
existing components to enhance the functionality of the application.
Easy Customization. When the user alters their screensize, or the size of
one of the panels it's easy to dynamically adjust and resize things on the fly.
Stability and a Strong Community. The React architecture of passing
information from the parent to child components mean things flow in only one-direction. This
vastly reduces the chance of strange corner cases. Beyond that, just being one of the bigger front-end frameworks
means there's a significant user base of people that are familiar with it, and capable of working
Integrating components to React immediately bought us a ton of added functionality. For starters,
using React Data Grid
we were able to provide column sorting, adjustable column sizes, and have our tables scale to fit
the entire size of the pane.
Material UI is a larger framework similar to something
like Bootstrap. It provides everything from ways to establish
layouts/grids, to implementations of things like menus and buttons. Moreover, it allows for some
pretty robust customization giving the option to go in and tweak styles to avoid everything
looking too cookie cutter.
We took full advantage of a lot of the tools offered by the package for everything from the
dialogs we display when the user saves, to the tabs on the right panel of the interface, and
the dropdowns/buttons on our menu bar.
React Select allows us to quickly swap the data set being displayed.
It also provides a pretty robust amount of control over the styling of the dropdown items, which allowed
use to use different colours to indicate user data and reports.
Providing a callback function whenever the selection is changed, it's simple to look-up
the requested data set, and update our 'state.'
Working with statistical data and graphs it's apparent that the screen can very quickly get very
crowded. As a result it was a priority to provide users with the ability to quickly increase their
screen real-estate. We used React Splitters to provide
a draggable vertical pane.
Going forward there's a lot of opportunity to build on our current
foundation. Users have often brought up cases like wanting to see two different
plots side-by-side for comparison, or even mobile support.
— Justin Singh / 2020-08-02