TidyBlocks: TidyBlocks Meets React

TidyBlocks was originally developed as purely a JavaScript application, which 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:

  1. Components. We'd be able to take advantage of the React ecosystem using existing components to enhance the functionality of the application.

  2. 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.

  3. 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 with it.

A Few of the Components We Use

React Data Grid

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.

React Data Grid table

Material UI

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

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.

React Select Example

Providing a callback function whenever the selection is changed, it's simple to look-up the requested data set, and update our 'state.'

React Splitters

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.

React Splitter Example, wide right pane

What's Next?

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