Create your own interactive medical chart with Dash in Python

Using tabs and sharing data between callbacks in Dash

Clicking four times to find a patient, then three times to see vital signs and then five times to prescribe a drug. Even Hitler seems to be frustrated of working with these kinds of electronic health records (EHRs):

The dissatisfaction has been studied in the past by a Finnish research group and made public in their publication “Usability problems do not heal by themselves.” The group studied around 3000 physicians in 2010 and 2014 and compared their opinions based on a set of usability statements. The survey showed that satisfaction with technical features had not improved in four years and they concluded that:

“The results do not show notable improvements in physician’s ratings for their EHRs between the years 2010 and 2014 in Finland. Instead, the results indicate the existence of serious problems and deficiencies which considerably hinder the efficiency of EHR use and physician’s routine work.”

There are positive movements in the open-source community towards a free and more clearly structured EHR. Open-source examples in the programming language PHP are:

But let’s do an experiment and see if we can make a better graphical interface for an EHR than the one of EPIC for ourselves. We start with the layout for a graphical user interface in Google spreadsheets. Mine looks something like this:

To keep a visual overview of the most important stuff in this graphical user interface, we need to subdivide the purple (functions) and yellow (vital signs) regions into tabs. The explanation of tab callbacks can be found in this link:
https://dash.plotly.com/dash-core-components/tabs

PURPLE REGION

The code of the link above can be copied and pasted and connected to different functions. I have made separate posts on some of the functions in the purple region:

YELLOW REGION

In the yellow region of the vital signs, we have to connect the tab content to a specific patient data output. This is going to be a little bit more complicated than the example on the Dash website. We have to apply the principle of sharing data between callbacks. For more detailed information on this see: https://dash.plotly.com/sharing-data-between-callbacks. To share data between callbacks you have to store it in a sort of non-visual html.Div:

As you can see in the workflow we have to convert the data into a JSON object. This is so because we can’t share pandas dataframes between callbacks. We perform the conversion into a list of JSON objects in the following way:

The intermediate-value output on the top in the callback decorator is a reference to a html.Div that stores the list of JSON objects.

Now we can use the two inputs (1 the JSON-object stored in the intermediate value html.Div and 2 the click on a specific tab) as input for the tabs with graphs in our medical chart layout. The structure of the backbone of the callbacks looks like this. Remember that the list of JSON objects is a product of the patient search and is already loaded in the application if there was a search for a patient:

I am not going to bother you with a long list of code on this. If you’re interested in it, the code to achieve this backbone workflow and a working version of the primitive EHR can be found in the Jupyter notebook on my Github. A snapshot of the resulting application can be found below.

If you have any comments or questions about the Jupyter notebook or you want to have access or a demonstration of the fully functional medical dashboard in Dash, just send me a message.

MD and PhD. Let’s bring health and tech together.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store