# Designing a results viewer as a micro frontend **URL:** \ **Category:** Development\ **Tags:** micro-frontends\ **Created:** [August 13, 2020, 4:12pm UTC](https://talk.openmrs.org/t/designing-a-results-viewer-as-a-micro-frontend/29864 "2020-08-13T16:12:42Z")\ **Posts on this page:** 6\ **Page:** 1
**Author:** ![burke](https://talk.openmrs.org/user_avatar/talk.openmrs.org/burke/32/17_2.png) [@burke](https://talk.openmrs.org/u/burke)\ **Post date:** [August 13, 2020, 4:12pm UTC](https://talk.openmrs.org/t/designing-a-results-viewer-as-a-micro-frontend/29864/1 "2020-08-13T16:12:42Z")
We saw a proposed design for a results view concept for micro frontends on today’s [Squad Showcase](https://talk.openmrs.org/t/announcing-squad-showcases-a-monthly-show-and-tell/29568): [![](https://img.youtube.com/vi/48eRN34Tlgw/hqdefault.jpg "LabResults Short") ](https://www.youtube.com/watch?v=48eRN34Tlgw) While there are some nice ideas here (e.g., pinning a column while browsing tabular data), there are several issues as well (using only bold for abnormals, focused on numeric results, extra clicks & popups for graphs & detail, etc.). While I dumped some feedback into the [#mf-test-results-viewer](https://openmrs.slack.com/archives/C013Y0RGACX) channel on Slack, where it can fall into the void of never-to-be-seen-again Slack chat history, I thought it was worth some more design discussion, so I’m bringing here to our community forum (aka mailing list). At Regenstrief, I led an effort to create a tool called “Chart Search” that took an approach to results review combining two goals: 1. Let me “google” the patient’s chart 2. When a user selects a result, show them everything they might want/need to know about that result. We used Lucene to index the patients chart, which provided instant results, counts for matches by result type, and support for synonyms & context-highlighting within text. Our chart search windows comprised (1) search & filtering, (2) a list of results, and (3) a detail pane to show detail for the currently selected result. I’ll share some screen shots… Here’s the basic layout. When a battery (lab result with multiple components) is selected in the result list, the detail pane shows a table by default. Note abnormals use more than just bold/color to be more accessible, spark lines give a preview of a graph for each result. Clicking on any result in the table shows detail about that specific component. ![image](https://talk.openmrs.org/uploads/default/original/2X/4/4437cfe783db510eb7499553878b217a62111a83.png) Selecting an individual numeric result shows a graph _and_ a list of values in the detail pane. ![image](https://talk.openmrs.org/uploads/default/original/2X/d/d4d492c7bb1517084248391d467092f93ca3ce86.png) Results are not limited to labs or just numeric data. You are effectively googling the patient’s chart. ![image](https://talk.openmrs.org/uploads/default/original/2X/e/e9939ffd6685c2fcb424f9e1a1fa5de4c20c1e56.png) This example shows a search for “hemoglobin” with support for synonyms and context highlighting in text: ![image](https://talk.openmrs.org/uploads/default/original/2X/6/6bf71f32081eaf46af67a1bb876a37bbc7d9359f.png) You can quickly filter and know where the data are – e.g., in this example I know there are 28 labs, 3 admit/discharge notes, and no cardiology reports mentioning hemoglobin before I make any filter selections. I can randomly select multiple with checkboxes or instantly narrow to one by clicking on its name. I can also save my default set of filters. In a different version of Chart Search, we let you save specific filter settings as quick links. ![image](https://talk.openmrs.org/uploads/default/original/2X/2/2992db9717c95a26dbd902302711ead75a477db0.png) @k.joseph did a valiant effort of introducing a [Chart Search module](https://wiki.openmrs.org/x/eIA5B) for the Reference Application; however, we never got it refined enough to be useful for implementation for wide adoption. /cc @jdick @grace ---
**Author:** ![grace](https://talk.openmrs.org/user_avatar/talk.openmrs.org/grace/32/16942_2.png) [@grace](https://talk.openmrs.org/u/grace)\ **Post date:** [August 15, 2020, 1:35am UTC](https://talk.openmrs.org/t/designing-a-results-viewer-as-a-micro-frontend/29864/2 "2020-08-15T01:35:37Z")
FYI All: We will be having an open Test Results Design/Feedback session on this coming **Monday** August 17 at 9:30pm IST | 7pm Nairobi | 6pm Cape Town | 4pm UTC | 12pm Boston | 9am Seattle. [http://www.uberconference.com/openmrs](http://www.uberconference.com/openmrs) Ajay Brar is going to walk us through these designs and we’ll open things up for feedback and discussion. See you there! FYI @pradiptakundu @angshuonline @mksd @ddesimone @ball ---
**Author:** ![grace](https://talk.openmrs.org/user_avatar/talk.openmrs.org/grace/32/16942_2.png) [@grace](https://talk.openmrs.org/u/grace)\ **Post date:** [August 15, 2020, 1:41am UTC](https://talk.openmrs.org/t/designing-a-results-viewer-as-a-micro-frontend/29864/3 "2020-08-15T01:41:56Z")
Burke I’ll be really interested on Monday to talk more about the graph visualization. I love these visualizations and the movement to even paper visual representations of Vital Signs in the last few decades is a good reference point for how powerful a visual can be at showing trends/changes. I primarily worked with Meditech as a clinician, and to this day I was the only nurse I knew who used the graphing functionality - because others didn’t know about it, or it was a few clicks away which was too much added regular work. So two questions: 1. In the dataplot example above, does this pop-out automatically when you click that lab value type (Hgb A1c above)? Or did you have to click in a few places to get the chart to generate? 2. If it does require a few clicks, how often do you see clinicians using the graphing functionality? I think it would be really cool if our visualization tool was only 1 click away (e.g. by clicking on the A1C row I immediately see a chart, or maybe by clicking on a graph button next to the value label). One can also imagine this being very, very handy for patient education: “_Look_ at how your viral load has been trending!” ---
**Author:** ![burke](https://talk.openmrs.org/user_avatar/talk.openmrs.org/burke/32/17_2.png) [@burke](https://talk.openmrs.org/u/burke)\ **Post date:** [August 15, 2020, 4:14am UTC](https://talk.openmrs.org/t/designing-a-results-viewer-as-a-micro-frontend/29864/4 "2020-08-15T04:14:10Z")
> [@grace](#): > > In the dataplot example above, does this pop-out automatically when you click that lab value type (Hgb A1c above)? Or did you have to click in a few places to get the chart to generate? The detail pane (on the right) shows detail for whatever result is selected on the left. The first result is selected by default. If the result is a panel (multiple results together like a chemistry panel), graphs are shown as a small [sparkline](https://en.wikipedia.org/wiki/Sparkline) and you have to click it if you want to see that graph expanded to fill the detail pane. When you select a numeric result on the left, the graph is shown instantly in the detail pane without any additional clicks. ![chart-search](https://talk.openmrs.org/uploads/default/original/2X/7/70ead4b5bb5bd85f2a30bd4ac2ec0249f294bba8.gif) The idea of the detail pane is to take advantage of knowing the user is interested in the chosen result for the patient and show relevant information. A graph & table are low hanging fruit for numeric results, but could be enhanced with related results, meds, links to knowledge, etc. A handful of detail panes can serve most results (numeric, panels, text, images) and could adapted for context-specific views (e.g., based on user specialty). ---
**Author:** ![grace](https://talk.openmrs.org/user_avatar/talk.openmrs.org/grace/32/16942_2.png) [@grace](https://talk.openmrs.org/u/grace)\ **Post date:** [August 15, 2020, 3:10pm UTC](https://talk.openmrs.org/t/designing-a-results-viewer-as-a-micro-frontend/29864/5 "2020-08-15T15:10:36Z")
Wow that is a beautiful interaction! The way the line loads is quite nice. > The idea of the detail pane is to take advantage of knowing the user is interested in the chosen result for the patient and show relevant information. Yes! > could be enhanced with related results, meds, links to knowledge, etc. To link related results or meds - wouldn’t we need to integrate with some kind of DB that stores all the knowledge of how different things are connected? This seems like largely a knowledge/linking problem. ---
**Author:** ![burke](https://talk.openmrs.org/user_avatar/talk.openmrs.org/burke/32/17_2.png) [@burke](https://talk.openmrs.org/u/burke)\ **Post date:** [August 16, 2020, 7:05pm UTC](https://talk.openmrs.org/t/designing-a-results-viewer-as-a-micro-frontend/29864/6 "2020-08-16T19:05:42Z")
> [@grace](#): > > To link related results or meds - wouldn’t we need to integrate with some kind of DB that stores all the knowledge of how different things are connected? This seems like largely a knowledge/linking problem. Correct. The fun technical challenges in implementing chart search like this are implementing Apache Lucene (e.g., ElasticSearch) for instant search results with counts, context in text results, etc.; designing the UI such that loading of results & the detail pane content never blocks or delays user interaction with filters & search settings; and, designing simple & effective result & detail views of data that can handle reference ranges & abnormal flags across a variety of data types. But the _real_ magic (as you’ve identified) comes from having the necessary metadata to make it clinically relevant, including rich synonyms for searching, when data should be shown in a panel vs. individually, the sequence of components in panels, and the classification of content into useful & meaningful categories (as seen in the filter choices) including the ability to distinguish signal from noise in the data. For example, in the common use case of encounter forms in OpenMRS, it would probably be better to see these data sorted within panels rather than as individual results in a random order or interwoven with lab results.