From 7d45820c39203ccf30c5c71047000404c7423944 Mon Sep 17 00:00:00 2001
From: inportb <inportb@gmail.com>
Date: Tue, 16 May 2023 03:45:40 -0400
Subject: [PATCH] Unified report viewer with filter

---
 htdocs/App.vue                 |   5 -
 htdocs/RoutePatientReports.vue | 426 ++++++++++++++++++++++++++-------
 htdocs/ViewReport.vue          |  65 -----
 3 files changed, 343 insertions(+), 153 deletions(-)
 delete mode 100644 htdocs/ViewReport.vue

diff --git a/htdocs/App.vue b/htdocs/App.vue
index 7fc1d04..969fc9a 100644
--- a/htdocs/App.vue
+++ b/htdocs/App.vue
@@ -66,11 +66,6 @@
 							{ path: 'visits', component: RoutePatientVisits },
 							{ path: 'orders', component: RoutePatientOrders },
 							{ path: 'reports', component: RoutePatientReports },
-							{ path: 'reports/bloodbank', component: RoutePatientReports, props: { report_name: 'Blood Bank' } },
-							{ path: 'reports/microbiology', component: RoutePatientReports, props: { report_name: 'Microbiology' } },
-							{ path: 'reports/pathology', component: RoutePatientReports, props: { report_name: 'Pathology' } },
-							{ path: 'reports/radiology', component: RoutePatientReports, props: { report_name: 'Radiology' } },
-							{ path: 'reports/notes', component: RoutePatientReports, props: { report_name: 'Notes' } },
 							{ path: 'document', component: RoutePatientDocuments },
 							{ path: 'document/:tiu_da', component: RoutePatientDocuments },
 						] },
diff --git a/htdocs/RoutePatientReports.vue b/htdocs/RoutePatientReports.vue
index 1f9bb93..f1afd19 100644
--- a/htdocs/RoutePatientReports.vue
+++ b/htdocs/RoutePatientReports.vue
@@ -1,145 +1,405 @@
 <template>
-	<Subtitle :value="selection ? selection.name : 'Reports'" />
+	<Subtitle value="Reports" />
 	<Subtitle :value="patient_info.name" />
-	<div class="card mb-3 shadow">
-		<ul class="card-header nav nav-pills nav-fill">
-			<li v-for="report in reports" class="nav-item" @click="selection = report">
-				<router-link class="nav-link" :to="'/patient/' + patient_dfn + '/reports/' + report.name.toLowerCase().replace(/\s+/g, '') + (sensitive ? '?viewsensitive' : '')">{{report.name}}</router-link>
-			</li>
-		</ul>
+	<div class="filter card mb-3 shadow" :class="{ 'list-wide': !selection }">
 		<ul class="list-group list-group-flush">
-			<li class="list-group-item d-flex justify-content-around align-items-center">
-				<DateRangePicker range="2Y" direction="-1" v-model:date="date_end" v-model:date_end="date_begin" />
-				<div class="limit input-group">
-					<span class="input-group-text">Limit</span>
-					<input type="number" step="1" class="form-control" v-model="limit" />
+			<li class="list-group-item">
+				<div class="input-group">
+					<span class="input-group-text">🔎</span>
+					<input type="text" class="form-control" placeholder="Filter" v-model="x_query" />
+					<button v-if="x_query" class="btn btn-outline-secondary" @click="x_query = ''">❌</button>
 				</div>
 			</li>
-			<li v-if="(selection) && (resultset) && (resultset.length)" class="list-group-item"><ViewReport :resultset="resultset" :table="selection.table" :detail="selection.detail" /></li>
+			<li class="list-group-item d-flex justify-content-between align-items-center">
+				<div class="btn-group">
+					<button v-for="report in reports" class="btn" :class="{ 'btn-primary': report.enabled, 'btn-outline-primary': !report.enabled }" @click="toggle(report)">{{report.name}}</button>
+				</div>
+				<button class="btn" :class="{ 'btn-success': unify, 'btn-outline-success': !unify }" @click="unify = !unify">Unify</button>
+				<DateRangePicker range="1M" direction="-1" v-model:date="date_end" v-model:date_end="date_begin" />
+			</li>
 		</ul>
-		<div v-if="(selection) && (resultset) && (resultset.length)" class="card-footer">{{resultset.length}} record{{resultset.length == 1 ? '' : 's'}} loaded<template v-if="resultset.length == limit"> (may be truncated)</template></div>
+	</div>
+	<div v-if="resultset.length > 0" class="row">
+		<div class="selector col-12" :class="{ 'col-xl-4': selection }">
+			<div class="card mb-3 shadow">
+				<div class="card-header"><template v-if="resultset.length > 0"><template v-if="resultset.length > rs_filtered.length">{{rs_filtered.length}} of </template>{{resultset.length}}</template><template v-else-if="is_loading">Loading</template><template v-else>No</template> record{{resultset.length == 1 ? '' : 's'}}</div>
+				<ul class="scroller list-group list-group-flush" :class="{ 'list-skinny': selection }" ref="scroller">
+					<li v-for="item in rs_filtered" :key="item" class="record list-group-item" :class="{ 'active': (selection) && (selection.id == item.id) }" @click="selection = item"><span class="badge emblem" :class="[item.emblem]" /> <span class="datetime date">{{datestring(item.time)}}</span> <span class="datetime time">{{timestring(item.time)}}</span> • <span class="title"><span v-for="title in item.title">{{title}}</span></span><template v-if="item.snippets"><div v-for="snippet in item.snippets" class="snippet" v-html="snippet" /></template></li>
+					<li class="bottom list-group-item" ref="bottom" />
+				</ul>
+			</div>
+		</div>
+		<div v-if="selection" class="col-12 col-xl-8">
+			<div class="card mb-3 shadow">
+				<div class="card-header d-flex justify-content-between align-items-center">
+					<span>{{selection.title.join(' - ')}}</span>
+					<span class="close" @click="selection = null">❌</span>
+				</div>
+				<div class="detail card-body" v-html="selection.highlight || selection.detail" />
+			</div>
+		</div>
 	</div>
 </template>
 
+<style>
+	ul.scroller span.highlight, div.detail span.highlight {
+		background-color: #ff0;
+	}
+	li.record.active span.highlight {
+		color: #000;
+	}
+</style>
+
 <style scoped>
-	.router-link-exact-active {
+	div.filter.list-wide {
+		position: sticky;
+		top: 3.65rem;
+		z-index: 2;
+	}
+	div.selector {
+		position: sticky;
+		top: 1.15rem;
+		z-index: 1;
+	}
+	ul.scroller.list-skinny {
+		max-height: 25vh;
+		overflow-y: auto;
+	}
+	li.record {
+		cursor: default;
+		border-top: 1px solid #dee2e6;
+		padding: 0.25rem 0.75rem;
+	}
+	li.record:nth-child(even) {
+		background-color: rgba(0, 0, 0, 0.05);
+	}
+	li.record.active {
 		color: #fff;
 		background-color: #0d6efd;
 	}
-	div.limit {
-		width: 20rem;
+	li.bottom {
+		padding: 0;
 	}
-	div.card-footer {
-		text-align: center;
+	span.badge.emblem:empty {
+		display: inline-block;
+		font-family: monospace;
+	}
+	span.badge.emblem-notes {
+		background-color: var(--bs-purple);
+	}
+	span.badge.emblem-notes::after {
+		content: 'N';
+	}
+	span.badge.emblem-labs {
+		background-color: var(--bs-pink);
+	}
+	span.badge.emblem-labs::after {
+		content: 'L';
+	}
+	span.badge.emblem-microbiology {
+		background-color: var(--bs-orange);
+	}
+	span.badge.emblem-microbiology::after {
+		content: 'M';
+	}
+	span.badge.emblem-bloodbank {
+		background-color: var(--bs-red);
+	}
+	span.badge.emblem-bloodbank::after {
+		content: 'B';
+	}
+	span.badge.emblem-pathology {
+		background-color: var(--bs-yellow);
+	}
+	span.badge.emblem-pathology::after {
+		content: 'P';
+	}
+	span.badge.emblem-radiology {
+		background-color: var(--bs-green);
+	}
+	span.badge.emblem-radiology::after {
+		content: 'R';
+	}
+	span.datetime, span.title span:first-child {
+		font-weight: bold;
+	}
+	span.title span:not(:first-child)::before {
+		content: ' - ';
+	}
+	ul.scroller.list-skinny span.datetime.time {
+		display: none;
+	}
+	div.snippet {
+		overflow: hidden;
+		white-space: nowrap;
+		text-overflow: ellipsis;
+	}
+	span.close {
+		cursor: default;
+	}
+	div.detail {
+		font-family: monospace;
+		white-space: pre-wrap;
+	}
+	@media (min-width: 1200px) {
+		div.selector {
+			position: static;
+		}
+		ul.scroller.list-skinny {
+			max-height: 75vh;
+		}
+		div.detail {
+			max-height: 75vh;
+			overflow-y: auto;
+		}
 	}
 </style>
 
 <script>
-	import { debounce, strftime_vista } from './util.mjs';
+	import { uniq, debounce, strftime_vista } from './util.mjs';
 
 	import Subtitle from './Subtitle.vue';
 	import DateRangePicker from './DateRangePicker.vue';
-	import ViewReport from './ViewReport.vue';
+
+	const SZ_WINDOW = 100;
+	const SZ_RANGE = 40000;
 
 	const reports = [
 		{
-			name: 'Blood Bank',
-			rpt_id: '2:BLOOD BANK REPORT~;;0',
-			detail: null,
-			table: []
+			name: 'Notes',
+			rpt_id: 'OR_PN:PROGRESS NOTES~TIUPRG;ORDV04;15;',
+			map(x) {
+				var time = new Date(x[3]);
+				return {
+					time,
+					id: 'OR_PN:' + time.getTime() + ':' + x[2],
+					emblem: 'emblem-notes',
+					title: [x[4], x[5], '#' + x[2]],
+					detail: escape_html(x[6])
+				};
+			},
+			enabled: true
+		},
+		{
+			name: 'Labs',
+			rpt_id: 'OR_OV_R:LAB OVERVIEW (COLLECTED SPECIMENS)~OV;ORDV02C;32;',
+			map(x) {
+				var time = new Date(x[2]);
+				return {
+					time,
+					id: 'OR_OV_R:' + time.getTime() + ':' + x[12],
+					emblem: 'emblem-labs',
+					title: [x[3], x[6], x[8], x[10], '#' + x[12]],
+					detail: escape_html(x[15])
+				};
+			}
 		},
 		{
 			name: 'Microbiology',
 			rpt_id: 'OR_MIC:MICROBIOLOGY~MI;ORDV05;38;',
-			detail: 7,
-			table: [
-				{ subscript: 2, title: 'Collection Date/Time' },
-				{ subscript: 3, title: 'Test Name' },
-				{ subscript: 4, title: 'Sample' },
-				{ subscript: 5, title: 'Specimen' },
-				{ subscript: 6, title: 'Accession #' },
-				{ subscript: 8, title: '[+]' },
-			]
+			map(x) {
+				var time = new Date(x[2]);
+				return {
+					time,
+					id: 'OR_MIC:' + time.getTime() + ':' + x[6],
+					emblem: 'emblem-microbiology',
+					title: [x[3], x[4], x[5], '#' + x[6]],
+					detail: escape_html(x[7])
+				};
+			}
+		},
+		{
+			name: 'Blood Bank',
+			rpt_id: '2:BLOOD BANK REPORT~;;0',
+			singleton: true,
+			map(x) {
+				var time = new Date();
+				return {
+					time,
+					id: 'BB',
+					emblem: 'emblem-bloodbank',
+					title: ['BLOOD BANK'],
+					detail: escape_html(x)
+				};
+			}
 		},
 		{
 			name: 'Pathology',
 			rpt_id: 'OR_APR:ANATOMIC PATHOLOGY~SP;ORDV02A;0;',
-			detail: 5,
-			table: [
-				{ subscript: 2, title: 'Collection Date/Time' },
-				{ subscript: 3, title: 'Specimen' },
-				{ subscript: 4, title: 'Accession #' },
-				{ subscript: 6, title: '[+]' },
-				//{ subscript: 7, title: '#7' },
-				//{ subscript: 8, title: '#8' },
-			]
+			map(x) {
+				var time = new Date(x[2]);
+				return {
+					time,
+					id: 'OR_APR:' + time.getTime() + ':' + x[4],
+					emblem: 'emblem-pathology',
+					title: [x[3], '#' + x[4]],
+					detail: escape_html(x[5])
+				};
+			}
 		},
 		{
 			name: 'Radiology',
 			rpt_id: 'OR_R18:IMAGING~RIM;ORDV08;0;',
-			detail: 6,
-			table: [
-				{ subscript: 2, title: 'Procedure Date/Time' },
-				{ subscript: 3, title: 'Procedure Name' },
-				{ subscript: 4, title: 'Report Status' },
-				{ subscript: 5, title: 'Case #' },
-				{ subscript: 7, title: '[+]' },
-				//{ subscript: 8, title: '#8' },
-				//{ subscript: 9, title: '#9' },
-			]
-		},
-		{
-			name: 'Notes',
-			rpt_id: 'OR_PN:PROGRESS NOTES~TIUPRG;ORDV04;15;',
-			detail: 6,
-			table: [
-				{ subscript: 3, title: 'Record Date/Time' },
-				{ subscript: 4, title: 'Type' },
-				{ subscript: 5, title: 'Author' },
-				{ subscript: 7, title: '[+]' },
-				//{ subscript: 8, title: '#8' },
-			]
+			map(x) {
+				var time = new Date(x[2]);
+				return {
+					time,
+					id: 'OR_R18:' + time.getTime() + ':' + x[9],
+					emblem: 'emblem-radiology',
+					title: [x[3], x[4], x[5], '#' + x[9]],
+					detail: escape_html(x[6])
+				};
+			}
 		},
 	];
 
+	const escape_div = document.createElement('div');
+	function escape_html(s) {
+		escape_div.textContent = s;
+		return escape_div.innerHTML;
+	}
+
+	function snippets(text, regex, replacement) {
+		var res = [], context = new RegExp('(?:\\S+\\s+){0,3}\\S*(' + regex.source + ')\\S*(?:\\s+\\S+){0,3}', regex.flags), match;
+		if(context.global) while((match = context.exec(text)) !== null) res.push(match[0].replace(regex, replacement).replace(/\s+/g, ' ').replace(/([\W_])\1{2,}/g, '$1$1'));
+		else if((match = context.exec(text)) !== null) res.push(match[0].replace(regex, replacement).replace(/\s+/g, ' ').replace(/([\W_])\1{2,}/g, '$1$1'));
+		return uniq(res);
+	}
+
 	export default {
 		components: {
-			Subtitle, DateRangePicker, ViewReport
+			Subtitle, DateRangePicker
 		},
 		props: {
 			client: Object,
 			sensitive: Boolean,
 			patient_dfn: String,
-			patient_info: Object,
-			report_name: String
+			patient_info: Object
 		},
 		data() {
 			var now = new Date();
 			return {
-				date_begin: now,
+				dfn: null,
+				is_loading: false,
 				date_end: now,
-				limit: 100,
+				date_begin: now,
+				query: '',
+				x_query: '',
+				unify: false,
 				reports,
-				selection: null,
-				resultset: []
+				resultsets: {},
+				selection: null
 			};
 		},
+		computed: {
+			resultset() {
+				return this.reports.map((x, i) => x.enabled ? this.resultsets[i] : null).filter(x => x).reduce((acc, val) => (Array.prototype.push.apply(acc, val), acc), []).sort((a, b) => b.time - a.time);
+			},
+			rs_filtered() {
+				var query = this.query.replace(/^\s+|\s+$/g, '');
+				if(query.length > 0) {
+					if(query.startsWith('"')) {
+						query = query.substring(1, query.length - ((query.length > 1) && (query.endsWith('"')) ? 1 : 0));
+						if(query.length > 0) {
+							query = new RegExp(query.replace(/\s+/g, ' ').split(' ').map(x => x.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')).join('\\s*'), 'gims');
+							return this.resultset.filter(x => (x.detail) && (query.test(x.detail))).map(x => Object.assign({ snippets: snippets(x.detail, query, '<span class="highlight">$&</span>'), highlight: x.detail.replace(query, '<span class="highlight">$&</span>') }, x));
+						}
+					} else if(query.startsWith('/')) {
+						if(query.length > 1) {
+							var m = /^\/(.*)\/([a-z]*)$/.exec(query);
+							query = m ? new RegExp(m[1], m[2]) : new RegExp(query.substring(1), 'gims');
+							return this.resultset.filter(x => (x.detail) && (query.test(x.detail))).map(x => Object.assign({ snippets: snippets(x.detail, query, '<span class="highlight">$&</span>'), highlight: x.detail.replace(query, '<span class="highlight">$&</span>') }, x));
+						}
+					} else {
+						query = new RegExp(query.replace(/\s+/g, ' ').split(' ').map(x => '\\b' + x.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')).join('\\S*(?:\\s+\\S+){0,5}\\s+'), 'gims');
+						return this.resultset.filter(x => (x.detail) && (query.test(x.detail))).map(x => Object.assign({ snippets: snippets(x.detail, query, '<span class="highlight">$&</span>'), highlight: x.detail.replace(query, '<span class="highlight">$&</span>') }, x));
+					}
+				}
+				return this.resultset;
+			}
+		},
 		watch: {
-			$route: {
-				async handler(value) {
-					await this.$nextTick();
-					this.selection = this.report_name ? reports.find(x => x.name == this.report_name) : null;
-				}, immediate: true
+			rs_filtered(value) {
+				if((value) && (this.selection)) {
+					var id = this.selection.id;
+					for(var i = 0; i < value.length; ++i) if(value[i].id == id) return this.selection = value[i];
+					this.selection = null;
+				}
+			}
+		},
+		methods: {
+			strftime_vista,
+			datestring(date) {
+				return date.toLocaleDateString('sv-SE');
+			},
+			timestring(date) {
+				return date.toLocaleTimeString('en-GB').substring(0, 5);
+			},
+			toggle(report) {
+				if(report.enabled) report.enabled = false;
+				else if(this.unify) report.enabled = true;
+				else {
+					var reports = this.reports;
+					for(var i = reports.length - 1; i >= 0; --i) reports[i].enabled = false;
+					report.enabled = true;
+				}
+			},
+			async load_more() {
+				try {
+					this.is_loading = true;
+					if((this.client) && (this.patient_dfn)) {
+						if(this.dfn != this.patient_dfn) {
+							this.dfn = this.patient_dfn;
+							this.resultsets = {};
+						}
+						var dfn = this.patient_dfn, resultsets = this.resultsets, resultset, reports = this.reports, report, alpha = strftime_vista(this.date_begin).toFixed(4), omega = strftime_vista(this.date_end).toFixed(4);
+						for(var i = 0; i < reports.length; ++i) if(((report = reports[i]).enabled) && (!((resultset = resultsets[i]) && (alpha == resultset.alpha) && (omega == resultset.omega)))) {
+							var data = [], batch, idmap = {}, omega0 = omega;
+							do {
+								batch = await this.client.ORWRP_REPORT_TEXT(dfn, report.rpt_id + (report.rpt_id.endsWith(';') ? SZ_WINDOW : ''), '', SZ_RANGE, '', alpha, omega0);
+								if(report.singleton) data = [report.map(batch[0].join('\n'))];
+								else if((batch = batch.map(item => {
+									var res = [], line, brk, sub;
+									for(var i = 0; i < item.length; ++i) {
+										brk = (line = item[i]).indexOf('^');
+										if(brk >= 0) {
+											if(res[sub = line.substring(0, brk)]) res[sub].push(line.substring(brk + 1));
+											else res[sub] = [line.substring(brk + 1)];
+										}
+									}
+									for(var k in res) if(res[k]) res[k] = res[k].join('\n');
+									res = report.map(res);
+									return idmap[res.id] ? console.warn('Duplicate record', res) : res;
+								}).filter(x => x)).length > 0) {
+									Array.prototype.push.apply(data, batch.sort((a, b) => b.time - a.time));
+									batch.map(x => x.id).reduce((acc, val) => (acc[val] = true, acc), idmap);
+									omega0 = strftime_vista(data[data.length - 1].time);
+								};
+							} while(batch.length >= SZ_WINDOW);
+							data.alpha = alpha;
+							data.omega = omega;
+							resultsets[i] = data;
+						}
+					} else {
+						this.dfn = null;
+						this.resultsets = {};
+					}
+				} catch(ex) {
+					console.warn(ex);
+				} finally {
+					this.is_loading = false;
+				}
 			}
 		},
 		created() {
 			this.$watch(
-				() => (this.client, this.patient_dfn, this.selection, this.date_begin, this.date_end, this.limit, {}),
-				debounce(async () => {
-					var limit = Math.floor(Math.abs(this.limit));
-					this.resultset = [];
-					if((this.client) && (this.patient_dfn) && (this.selection)) this.resultset = await this.client.ORWRP_REPORT_TEXT(this.patient_dfn, this.selection.rpt_id + (this.selection.rpt_id.endsWith(';') ? Math.round(this.limit) : ''), '', Math.round(this.limit), '', strftime_vista(this.date_begin), strftime_vista(this.date_end));
-				}, 500),
+				() => (this.client, this.patient_dfn, this.reports.map(x => x.enabled), this.date_begin, this.date_end, {}),
+				debounce(() => this.load_more(), 500),
+				{ immediate: true }
+			);
+			this.$watch(
+				() => this.x_query,
+				debounce(value => this.query = value, 500),
 				{ immediate: true }
 			);
 		}
diff --git a/htdocs/ViewReport.vue b/htdocs/ViewReport.vue
deleted file mode 100644
index c09fff2..0000000
--- a/htdocs/ViewReport.vue
+++ /dev/null
@@ -1,65 +0,0 @@
-<template>
-	<div v-if="(resultset) && (resultset.length == 1) && (!resultset[0][0].startsWith('1^'))" class="detail">{{resultset[0].join('\r\n')}}</div>
-	<div v-else-if="(resultset_calculated) && (resultset_calculated.length)" class="accordion">
-		<div v-for="item in resultset_calculated" class="accordion-item" :key="item">
-			<h2 class="accordion-header">
-				<button type="button" class="accordion-button report-row" :class="{ collapsed: !show[item.hash] }" @click="show[item.hash] = !show[item.hash]">
-					<span v-for="entry in table" class="report-col">{{item[entry.subscript]}}</span>
-				</button>
-			</h2>
-			<div class="accordion-collapse collapse" :class="{ show: show[item.hash] }">
-				<div class="detail accordion-body">{{item[detail]}}</div>
-			</div>
-		</div>
-	</div>
-</template>
-
-<style scoped>
-	.report-row {
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-	}
-	.report-col {
-		flex: 1;
-	}
-	.detail {
-		font-family: monospace;
-		white-space: pre-wrap;
-	}
-</style>
-
-<script>
-	import { strHashJenkins } from './util.mjs';
-
-	export default {
-		props: {
-			client: Object,
-			resultset: Array,
-			table: Array,
-			detail: Number
-		},
-		data() {
-			return {
-				show: {}
-			};
-		},
-		computed: {
-			resultset_calculated() {
-				return this.resultset ? this.resultset.map(item => {
-					var res = [], line, brk, sub;
-					for(var i = 0; i < item.length; ++i) {
-						brk = (line = item[i]).indexOf('^');
-						if(brk >= 0) {
-							if(res[sub = line.substring(0, brk)]) res[sub].push(line.substring(brk + 1));
-							else res[sub] = [line.substring(brk + 1)];
-						}
-					}
-					for(var k in res) if(res[k]) res[k] = res[k].join('\r\n');
-					res.hash = strHashJenkins(item.join(''));
-					return res;
-				}) : [];
-			}
-		}
-	};
-</script>