Resource reference visualization in clinFHIR

I was skyping with my colleague Viet Nguyen over the weekend about some improvements I was adding to clinFHIR – the resource viewer now generates a more ‘user friendly’ display for some of the resources (Encounter, Observation, Condition). I showed him what I had done, and asked him what else might be useful and he said:

This maybe pie in the sky – a network type diagram with different colored icons representing conditions, encounters, labs, etc. that allows the user to visualize the relationship between conditions and related resources. This is the type of “breaking out of the document paradigm” approach I’d like to pursue.

As it turns out, I’ve played a bit with that kind of functionality in the past using some javascript libraries, so I thought it might be worth having another look at. A bit of googling found this amazing library – vis.js, so I set to work!

To see the results, start up clinFHIR and select the updated Resource Builder. Once the app is displayed you need to select a patient server (ie where the patient data resides). The functionality should work with any server, but it’s good to have some data to work with, so there are a few options:

• Create them manually using the resource creator. Doable, but tedious
• Use clinFHIR sample creator. Click the ‘Select Patient’ link, then the ‘Add new Patient’ link and create a new patient with samples. The public HAPI STU-3 server is a good choice for this
• Use a server with a good range of sample data.

For this post I took the latter approach – using ‘MiHIN’ as the Patients provider. These guys are working on sample data which is going to be really important as we continue to exercise FHIR in real-world scenarios. (You may need to select ‘reset config’ from the gear menu to the upper right, then re-load the page to see this Server – sorry about this – I need to fix some caching issues).

Select a patient (I used Karen Florence Smith) and then click on the ‘Details’ link in the top navbar against her name to display the resource viewer.

The ‘resource viewer’ now has 3 tabs:

• Resource Explorer
• Resource References Graph
• Encounter timeline

Lets’s look at each of these.

The Resource explorer is the original viewer that displays the types of resource that a patient has, then a specific resource instance of that type and allows you to view the details of that resource in Json or Xml, download it and view the referenced resources. If you select a resource (an Encounter is a good one) you’ll see that there is a new tab labeled ‘References’ in the resource detail section.

Clicking on that tab will display a graphical rendition (technically a network or graph representation) of that resource with all the other resources that it references, plus the resources that reference it. Here’s a screen shot:

Now, this is the same information that was already displayed as text on the right side, but the picture is easier to understand – and to get your head around what we mean by resource references. You can drag the resources around if they aren’t clear and the others will move out of the way. Like the textual representation, clicking on any of the resources in the graph will put that resource ‘in focus’ – showing its references as well, thus allowing you to ‘surf’ the interrelationships between resources. Oh  and sorry about the colours – if any of you have a User Interface background, I’d appreciate help!

There’s also a ‘Display’ tab that will render a more user friendly display for some of the resources (currently Encounter, Observation & Condition). I intend to expand this to include other resources in the future. This image shows an encounter. Note that the display will not necessarily show all the data in the resource – use the Json or XML tabs to see the complete picture. (Right now, extensions aren’t displayed for example)

(By the way, we tend to use the word ‘Resource’ rather ambiguously – especially in the context of profiling. In this post, a ‘Resource’ is actually a resource instance – ie an actual set of data for a specific patient.)

The resource references graph will display a graph of all the resources for a patient, along with their references. The initial display is small if there are many resources – you can zoom the display (2 fingers vertically on my mac trackpad) and scroll (click and drag) – I’m not sure how that works on other computers – will update the post when I find out. Like the previous graph you can drag a resource around to make the display clearer.

Heres a screen dump:

Selecting a resource in the graph shows the Json representation to the right but doesn’t otherwise affect the display. By the way – note that the Patient resource is not shown in this graph – most resources will have a reference to the Patient, but including it completely skews the graph, so I took it out…

The last area where the library is (currently) used is in the 3^rd tab –the  Encounter timeline. This is different to the others as it is intended to represent a timeline of encounters (oddly enough) – and to filter those by condition. Here’s a screen shot:

As you see there are a number of components to the view.

The timeline itself is in the upper right of the screen. It is organized into rows by encounter class, and can be zoomed and scrolled like the other charts.

Below the timeline is the details of a selected encounter (selected by clicking on the encounter in the timeline – the yellow one in the example above). It shows:

• A graph of the references of the selected encounter (this is the same as you would see in the resource browser). Clicking on a resource will display the Json to the right
• The Json representation of the encounter
• The summary display (on a separate tab – not shown above)

To the left side is a list of all the patients Conditions, with a count of the number of encounters where that condition is referenced (as an ‘Encounter.indication’ reference). Selecting any of them will filter the timeline to show only the encounters referencing that condition.

There are a number of issues/enhancements to complete:

• Extensions are currently ignored in the display view and in the references
• Only a few of the resources have a detail view
• If you select resources in the graph in multiple succession too quickly, the app seems to hang for a while – I suspect there is an issue in the event handler that I need to look into
• The colour scheme is – well – basic. (One of my Orion colleagues called it a ‘Christmas’ display!) As mentioned above, if you know about colour – I’d love a better palette!