From 8c06e3c6b1ddb3cec011b16e05447c4e56fd76d9 Mon Sep 17 00:00:00 2001 From: Ken Guo Date: Thu, 23 Apr 2020 17:50:29 -0400 Subject: [PATCH 01/15] shrink tile size; update filters --- .../etc/html/health/assets/css/custom.css | 31 ++-- .../etc/html/health/index.html | 132 ++++++++++++------ 2 files changed, 106 insertions(+), 57 deletions(-) diff --git a/samples/PatientsMonitoringDemo/etc/html/health/assets/css/custom.css b/samples/PatientsMonitoringDemo/etc/html/health/assets/css/custom.css index 20143b5..6e35011 100644 --- a/samples/PatientsMonitoringDemo/etc/html/health/assets/css/custom.css +++ b/samples/PatientsMonitoringDemo/etc/html/health/assets/css/custom.css @@ -108,21 +108,24 @@ } .icon { - width: 80px; - height: auto; + width: 35px; + height: 35px; } .small-icon { - height: 20px; - width: 20px; + height: 10px; + width: 10px; } .patient-card { - border: 5px solid black; - border-radius: 10px; - width: auto; - text-align: center; - margin: 5px; + border: 2px solid black; + border-radius: 5px; + width: 5%; + height: 10%; + text-align: center; + margin-left: 0px; + margin-right: 0px; + float: left; } .patient-card.normal { @@ -134,14 +137,16 @@ } .alert-icon-row { - margin-top: 10px; - margin-bottom: 20px; + margin-top: 5px; + margin-bottom: 0px; } .bed-icon-row { - margin-bottom: 10px; + margin-bottom: 0px; } .patient-id-row { - font-weight: bold; + font-weight: bold; + font-size: 8px; + margin-top: -10%; } \ No newline at end of file diff --git a/samples/PatientsMonitoringDemo/etc/html/health/index.html b/samples/PatientsMonitoringDemo/etc/html/health/index.html index 61962d4..e4eb2ca 100644 --- a/samples/PatientsMonitoringDemo/etc/html/health/index.html +++ b/samples/PatientsMonitoringDemo/etc/html/health/index.html @@ -75,24 +75,29 @@
State

Healthy

Alert

+
Doctor
+

John

+

Jane

+

Jack

+

Jasmine


-
Activity Level
-

Active

-

Inactive

+
Ward
+

Emergency

+

ICU

+

Cardiology

+

Oncology


-
Demographic
-

Child

-

Youth

-

Adult

-

Senior

+
Floor
+

1

+

2

+

3

+

4


-
Care Level
-

Minimum

-

Moderate

-

Maximum

-

Intensive

+
Isolation
+

Isolated

+

Unisolated

-
+
@@ -188,9 +193,11 @@
Care Level
var ECGLEADI_CODE = "X100-8"; var RESP_CODE = "9279-1"; - var activeTags = ["active", "inactive"]; var ageTags = ["child", "youth", "adult", "senior"]; - var careTags = ["minimum", "moderate", "maximum", "intensive"]; + var doctorTags = ["jane", "jack", "john", "jasmine"]; + var wardTags = ["emergency", "icu", "cardiology", "oncology"]; + var floorTags = ["1", "2", "3", "4"]; + var isolationTags = ["isolated", "unisolated"]; var patientMap = {}; var patientTags = {}; @@ -207,9 +214,11 @@
Care Level
var patientId = sortedPatientIds[i]; var tags = []; - tags.push(activeTags[Math.floor(Math.random()*activeTags.length)]); // select active tag tags.push(ageTags[Math.floor(Math.random()*ageTags.length)]); // select age tag - tags.push(careTags[Math.floor(Math.random()*careTags.length)]); // select care tag + tags.push(doctorTags[Math.floor(Math.random()*doctorTags.length)]); // select doctor tag + tags.push(wardTags[Math.floor(Math.random()*wardTags.length)]); // select ward tag + tags.push(floorTags[Math.floor(Math.random()*floorTags.length)]); // select floor tag + tags.push(isolationTags[Math.floor(Math.random()*isolationTags.length)]); // select isolation tag patientTags[patientId] = tags; } @@ -240,9 +249,39 @@
Care Level
$.each($("input[name='care[]']:checked"), function() { values.push($(this).val()); }); return patientTags[patientId].filter(function(n) { return values.includes(n); }).length > 0; } + function doctorFilter(patientId) { + var values = []; + $.each($("input[name='doctor[]']:checked"), function() { values.push($(this).val()); }); + return patientTags[patientId].filter(function(n) { return values.includes(n); }).length > 0; + } + function wardFilter(patientId) { + var values = []; + $.each($("input[name='ward[]']:checked"), function() { values.push($(this).val()); }); + return patientTags[patientId].filter(function(n) { return values.includes(n); }).length > 0; + } + function floorFilter(patientId) { + var values = []; + $.each($("input[name='floor[]']:checked"), function() { values.push($(this).val()); }); + return patientTags[patientId].filter(function(n) { return values.includes(n); }).length > 0; + } + function isolationFilter(patientId) { + var values = []; + $.each($("input[name='floor[]']:checked"), function() { values.push($(this).val()); }); + return patientTags[patientId].filter(function(n) { return values.includes(n); }).length > 0; + } + + function getJobId(pathname) { + var components = pathname.split('/'); + for (let i = 0; i < components.length; i++) { + if (components[i] === "jobs") { + return components[i+1]; + } + } + } function doStatusUpdate() { - $.get("/health/Status/ports/input/0/tuples", function(data, status) { + var jobId = getJobId(window.location.pathname); + $.get("/streams/jobs/" + jobId + "/health/Status/ports/input/0/tuples", function(data, status) { if(data.length == 0) return; @@ -258,9 +297,10 @@
Care Level
sorted_keys = sorted_keys .filter(stateFilter) - .filter(activityFilter) - .filter(ageFilter) - .filter(careFilter); + .filter(doctorFilter) + .filter(wardFilter) + .filter(floorFilter) + .filter(isolationFilter) patients.innerHTML = ""; for(var i = 0; i < sorted_keys.length; i++) { @@ -271,10 +311,9 @@
Care Level
statusClass = "alrt"; var html = ""; - html += '
' + html += '
' html += '
' - html += '
' - html += '
' + html += '
' var decorations = {}; if(status.alert === true) { var msgs = status.messages; @@ -314,7 +353,6 @@
Care Level
} } /* html += '' */ - html += '
' html += '
' html += '
' html += '
' @@ -356,7 +394,7 @@
Care Level
}); var fig = plt.figure({title: waveformName, tools : "pan", plot_width : plotWidth, plot_height : plotHeight, toolbar_location : undefined}); - fig.y_range = Bokeh.Range1d(-1, 1); + fig.y_range = new Bokeh.Range1d({ start: -1, end: 2 }); fig.outline_line_width = 1; fig.outline_line_color = "black"; fig.ygrid.grid_line_color = "red"; @@ -381,9 +419,10 @@
Care Level
line.data_source.data = {x : [], y : []}; var lastWindow = -1; - var ts = 0; + var ts = 0; + var jobId = getJobId(window.location.pathname); var dataGetTimer = setInterval(function() { - $.get('/health/WaveformData/ports/input/0/tuples?partition=' + patientId + '&partition=' + waveformName, function(data, status) { + $.get('/streams/jobs/' + jobId + '/health/WaveformData/ports/input/0/tuples?partition=' + patientId + '&partition=' + waveformName, function(data, status) { for(var idx in data) { if(data[idx].windowCount === lastWindow) return; @@ -402,8 +441,8 @@
Care Level
var updateGraphTimer = setInterval(function() { var newData = dataQueue.shift(); - line.data_source.stream(newData, 100); - }, 100); + line.data_source.stream(newData, 200); + }, 10); timers.push(updateGraphTimer); return graphs[waveformName]; @@ -417,12 +456,13 @@
Care Level
var patientNums = [1, 4, 9, 12, 32, 44, 48, 55, 60, 70, 71, 72, 90, 98]; var sortedPatientIds = Object.keys(patientMap).sort(); - + var jobId = getJobId(window.location.pathname); + for(var idx in patientNums) { if (patientNums[idx] < sortedPatientIds.length) { var p = {patientId : sortedPatientIds[patientNums[idx]], isManipulationEnabled : manipulationEnabled}; - $.post('/health/Simulate/ports/output/0/inject', {jsonString : JSON.stringify(p)}); + $.post('/streams/jobs/' + jobId + '/health/Simulate/ports/output/0/inject', {jsonString : JSON.stringify(p)}); } else { @@ -434,7 +474,8 @@
Care Level
var timers = []; function updateVital(patientId, vitalType, elem) { - $.get('/health/VitalsData/ports/input/0/tuples?partition=' + patientId + '&partition=' + vitalType, function(data, status) { + var jobId = getJobId(window.location.pathname); + $.get('/streams/jobs/' + jobId + '/health/VitalsData/ports/input/0/tuples?partition=' + patientId + '&partition=' + vitalType, function(data, status) { if(data.length == 0) return; @@ -445,14 +486,15 @@
Care Level
} function updateABP(patientId) { - $.get('/health/VitalsData/ports/input/0/tuples?partition=' + patientId + '&partition=' + BPSYS_CODE, function(data, status) { + var jobId = getJobId(window.location.pathname); + $.get('/streams/jobs/' + jobId + '/health/VitalsData/ports/input/0/tuples?partition=' + patientId + '&partition=' + BPSYS_CODE, function(data, status) { if(data.length == 0) return; var obs = data[0]; var abpSysNumeral = numeral(obs.reading.value); - $.get('/health/VitalsData/ports/input/0/tuples?partition=' + patientId + '&partition=' + BPDIA_CODE, function(data, status) { + $.get('/streams/jobs/' + jobId + '/health/VitalsData/ports/input/0/tuples?partition=' + patientId + '&partition=' + BPDIA_CODE, function(data, status) { if(data.length == 0) return; @@ -553,17 +595,19 @@
Care Level
}) $('#checkAll').click(function() { - $.each($("input[name='state[]']"), function() { $(this).prop('checked', true); }); - $.each($("input[name='activity[]']"), function() { $(this).prop('checked', true); }); - $.each($("input[name='demographic[]']"), function() { $(this).prop('checked', true); }); - $.each($("input[name='care[]']"), function() { $(this).prop('checked', true); }); + $.each($("input[name='state[]']"), function() { $(this).prop('checked', true); }); + $.each($("input[name='doctor[]']"), function() { $(this).prop('checked', true); }); + $.each($("input[name='ward[]']"), function() { $(this).prop('checked', true); }); + $.each($("input[name='floor[]']"), function() { $(this).prop('checked', true); }); + $.each($("input[name='isolation[]']"), function() { $(this).prop('checked', true); }); }); $('#checkNone').click(function() { - $.each($("input[name='state[]']"), function() { $(this).prop('checked', false); }); - $.each($("input[name='activity[]']"), function() { $(this).prop('checked', false); }); - $.each($("input[name='demographic[]']"), function() { $(this).prop('checked', false); }); - $.each($("input[name='care[]']"), function() { $(this).prop('checked', false); }); + $.each($("input[name='state[]']"), function() { $(this).prop('checked', false); }); + $.each($("input[name='doctor[]']"), function() { $(this).prop('checked', false); }); + $.each($("input[name='ward[]']"), function() { $(this).prop('checked', false); }); + $.each($("input[name='floor[]']"), function() { $(this).prop('checked', false); }); + $.each($("input[name='isolation[]']"), function() { $(this).prop('checked', false); }); }); From a0f95a9d9f2efc245912c112ad8f38848459842f Mon Sep 17 00:00:00 2001 From: Ken Guo Date: Fri, 24 Apr 2020 16:08:34 -0400 Subject: [PATCH 02/15] styling; change how patients are rendered from all to only update --- .../etc/html/health/index.html | 1153 +++++++++-------- 1 file changed, 608 insertions(+), 545 deletions(-) diff --git a/samples/PatientsMonitoringDemo/etc/html/health/index.html b/samples/PatientsMonitoringDemo/etc/html/health/index.html index e4eb2ca..af6bc9c 100644 --- a/samples/PatientsMonitoringDemo/etc/html/health/index.html +++ b/samples/PatientsMonitoringDemo/etc/html/health/index.html @@ -1,5 +1,6 @@ + Streams HealthCare Visualization Demo @@ -8,608 +9,670 @@ - + + - + +
+
+
+

All | None +
+
+

State
+

Healthy

+

Alert

+
+
Doctor
+

John

+

Jane

+

Jack

+

Jasmine

+
+
Ward
+

Emergency +

+

ICU

+

Cardiology +

+

Oncology

+
+
Floor
+

1

+

2

+

3

+

4

+
+
Isolation
+

Isolated +

+

+ Unisolated

+
+
+
+
-
-
-
-
- -
-
-
-
-
- -
-
+
+
+ +