Visually differentiate active alarms in the Events Log view

[ethanjli]

Currently, the events log view shows all active alarms the same way as regular log events. This makes it almost impossible to identify the sequence of events leading up to an alarm, and to understand the context around active alarms. We should have change the visual presentation of active alarms to make them easy to see among regular log events. It would be a good idea to not rely solely on color to mark active alarms. For example, maybe each row corresponding to an active alarm, we could encapsulate the alarm label of the "Event" column in a red rounded rectangle - this would establish a visual link to the red rounded rectangle in the topbar, to communicate that that row corresponds to an active alarm.

[rohanpurohit]

@ethanjli can you try https://github.com/pez-globo/pufferfish-software/commit/9da2c4496f4e2b825a7861542fa5b6ad0a579875 and let me know if this is what you had in mind? and if it serves the purpose visually! I read the description again and it seems like I misunderstood and you meant only the label inside the box to be encapsulated?

updated branch hotfix/frontend-event-log-border with what I think you had in mind!

[ethanjli]

What I meant was that we should only add the encapsulation to active alarms. I was also envisioning using the exact shape of rounded rectangle currently used in the "Type" column, for the encapsulation in the "Event" column. However, your commit gives me an interesting idea which I like more: instead of changing anything in the "Event" column, we could just change the fill of the "Type" column. Here's my proposal: Right now the rounded rectangles in the "Type" column all have solid fill. Instead, we could all give them a transparent fill with a colored order (e.g. System log events have a orange border but transparent fill, Patient log events have a red border but transparent fill). When a log event is for an active alarm, we change the fill of the rounded rectangle to solid (e.g. when HR is too high, the "Patient" rounded rectangle has a solid red fill); when the alarm becomes inactive, we change the fill of the rounded rectangle back to transparent (e.g. when HR goes back into range, the "Patient" rounded rectangle has a transparent fill). If this is hard to describe in words, I can try to show what I mean on screen in today's meeting.