New upcoming feature in 23.2.6: adding custom charts to the UI

Phew! It's been a fun couple of months. Glad to be back writing on our blog. First off: new inventory of Pioreactors is coming soon. Probably. 

To distract you, I want to write about a new feature in our next software release of Pioreactor, version 23.2.6. We've spent most of January fixing bugs that our early users have brought up, and now have some exciting additions for our next software release. 

Since there are so many use-cases for the Pioreactor, we didn't want to pigeon-hole the UI to only support a single use-case. By default, the UI works great for simple cultures: yeast, algae, or bacteria, with OD readings, maybe dosing, and maybe LEDs. But users are already extending the Pioreactor to do more: more pumps, and more sensors. This is great - we're ecstatic! But how can users adapt the UI to support their extensions?

For example, suppose a user wants to monitor the CO₂ levels of their incubator, or the vial's headspace. They've added a CO₂ sensor and installed our CO₂ sensor plugin. But they want to see CO₂ data on their Overview page in the UI. 

Well that's now possible. In our next release, we've added support for users to add their own charts to the Overview page. The charts will even display live data, if configured for it. 

Figure 1. A CO₂ chart, with live and historical data from a sensor, on the Pioreactor UI. The spike is when I exhaled onto the sensor.

Going one step further, plugins also have the ability to add charts to the UI when they are installed. In fact, the latest release of the CO2 sensor plugin will add a CO₂ sensor chart.  

When can we see this in action?!

Our next release, hopefully this week, will add support for adding custom charts to the UI. 

Technical bits

How is this done? The frontend doesn't store the list the charts, but instead asks the backend for a list of charts to display. The backend responds with a list of charts and associated metadata. The backend gets this data from stored YAML files on the RPi's filesystem. The directory of YAML files can be edited, added, or removed from. 

This is the same as how the jobs and automations are populated in the UI: the fronted asks for a list of jobs, and the backends reads from the filesystem to provide a list. For users, it's much easier to edit and iterate on the filesystem than the alternatives: adding custom JS (and compiling), or adding to a database.

For full instructions on how to add a chart to the UI, see our documentation here.