<html lang="en" class="focus-outline-visible">
<head>
<title>EHR Information Extractor</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Catamaran" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<script src="spin.js"></script>
<script src="ladda.js"></script>
<link rel="stylesheet" href="ladda-themeless.min.css">
<style>
#taggedEhr span {
position: relative;
border-bottom: 1px dotted black;
color: black;
}
#taggedEhr span span {
visibility: hidden;
width: auto;
color: black;
border-bottom: 0;
font-weight: bold;
font-family: Catamaran;
text-align: center;
border-radius: 5px;
padding: 5px 5px 5px 5px;
/* Position the tooltip */
position: absolute;
z-index: 1;
bottom: 125%;
left: 0%;
}
#taggedEhr span:hover span {
visibility: visible;
}
@media (min-width: 768px) {
#sidebar {
position: fixed;
padding-top: 70px;
bottom: 0;
border-right: #cdcdcd medium solid;
}
}
body {
padding-top: 70px;
overflow: auto;
}
.vertical-center {
padding: 200px 0;
text-align: center;
}
table.center {
margin-left:auto;
margin-right:auto;
}
.my-custom-scrollbar {
position: relative;
width: auto;
height: 400px;
overflow: auto;
}
.table-wrapper-scroll-y {
display: block;
}
* {
scrollbar-width: thin;
scrollbar-color: lightgray white;
}
*::-webkit-scrollbar {
width: 12px;
}
*::-webkit-scrollbar-track {
background: white;
}
*::-webkit-scrollbar-thumb {
background-color: lightgray;
border-radius: 20px;
border: 3px solid white;
}
#relationTable {
padding-left: 15px;
}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}
/* Modal Content (image) */
.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
}
/* Caption of Modal Image */
#caption {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
}
/* Add Animation */
.modal-content, #caption {
-webkit-animation-name: zoom;
-webkit-animation-duration: 0.6s;
animation-name: zoom;
animation-duration: 0.6s;
}
@-webkit-keyframes zoom {
from {-webkit-transform:scale(0)}
to {-webkit-transform:scale(1)}
}
@keyframes zoom {
from {transform:scale(0)}
to {transform:scale(1)}
}
/* The Close Button */
.close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
.modal-content {
width: 100%;
}
}
.custom-control {
padding-top: calc(.375rem + 1px);
padding-bottom: calc(.375rem + 1px);
}
</style>
</head>
<body>
<nav class="navbar navbar-light bg-light justify-content-center fixed-top" id="navigationBar">
<a class="navbar-brand" href="#">
EHR Information Extractor
</a>
</nav>
<div class="container" role="main">
<div class="row">
<div class="col-md-6" style="border-right: 1px solid; padding-top: 20px;">
<form method="POST">
<div class="form-group row">
<label for="ner-model" class="col-sm-3 col-form-label">NER Model</label>
<div class="col-sm-6">
<select class="form-control" id="ner-model">
<option value="biobert">BioBERT</option>
<option value="bilstm">BiLSTM + CRF</option>
</select>
</div>
</div>
<div class="form-group row">
<label for="ehrFile" class="col-sm-3 col-form-label">Upload EHR</label>
<div class="col-sm-6">
<input type="file" class="form-control-file" id="ehrFile">
</div>
</div>
<div class="form-group row" style="font-weight: bold;">
<label class="col-sm-3 col-form-label">OR</label>
</div>
<div class="form-group row">
<label for="ehrText" class="col-sm-8 col-form-label">Paste it here</label>
<div class="custom-control custom-switch float-right col-sm-4">
<input type="checkbox" class="custom-control-input" id="sampleRecord">
<label class="custom-control-label" for="sampleRecord">Sample EHR</label>
</div>
</div>
<textarea class="form-control col-sm-11" rows="10" id="ehrText" name="ehrText"
spellcheck="false"></textarea>
<br>
<div class="form-group row">
<div class="col-sm-10">
<button type="button" class="btn btn-primary ladda-button" id="subBtn"
data-style="expand-right">Submit</button>
</div>
</div>
</form>
<p class="d-none" id="errorText"></p>
</div>
<div class="col-md-6 " id="">
<ul class="nav nav-tabs d-none" role="tablist" id="output-tabs">
<li class="nav-item">
<a class="nav-link active" id="ner-tab" data-toggle="tab" href="#ner"
aria-controls="ner" role="tab" aria-selected="true">
<i class="bx bx-user align-middle"></i>
<span class="align-middle">Tagged EHR</span>
</a>
</li>
<li class="nav-item current">
<a class="nav-link" id="re-table-tab" data-toggle="tab" href="#re-table" aria-controls="re-table"
role="tab" aria-selected="false">
<i class="bx bx-message-square align-middle"></i>
<span class="align-middle">Relation Table</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" id="re-graph" href="#" aria-selected="false">
<i class="bx bx-message-square align-middle"></i>
<span class="align-middle">Knowledge Graph</span>
</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="ner" aria-labelledby="ner-tab" role="tabpanel">
<h3 class="text-center d-none" id="nerTitle" style="padding-top: 20px; padding-bottom: 20px;">
Tagged EHR
</h3>
<div id="taggedEhr" class="d-none table-wrapper-scroll-y my-custom-scrollbar">
</div>
<div id="ner-waiting-text" class="vertical-center offset-sm-3">
Waiting for an EHR record!
</div>
</div>
<div class="tab-pane" id="re-table" aria-labelledby="re-table-tab" role="tabpanel">
<div id="re-waiting-text" class="vertical-center offset-sm-3">
Waiting for an RE table!
</div>
<h3 class="text-center d-none" id="reTitle" style="padding-top: 20px; padding-bottom: 20px;">
Relations
</h3>
<div id="relationTable" class="d-none table-wrapper-scroll-y my-custom-scrollbar">
</div>
</div>
<div class="d-none" id="graph-img">
</div>
<div id="graphModal" class="modal">
<span class="close" id="graph-close-btn">×</span>
<img class="modal-content" id="img01">
<div id="caption"></div>
</div>
</div>
<br>
</div>
</div>
</div>
<script>
$(document).ready(function () {
// Read file contents and set to text area
$('#ehrFile').change(function () {
var fileReader = new FileReader();
fileReader.onload = function () {
var data = fileReader.result;
$("#ehrText").val(data);
};
fileReader.readAsText($(this).prop('files')[0]);
});
// Read sample EHR
$("#sampleRecord").change(function () {
// If checked
if (this.checked) {
var settings = {
"url": "http://34.105.27.31:8000/sample/",
"method": "GET",
"headers": {
"Content-Type": "application/json"
},
};
$.ajax(settings).done(function (response) {
let data = response.data;
$("#ehrText").val(data);
});
} else {
$("#ehrText").val("");
}
});
// Open Knowledge graph image
$("#re-graph").on("click", function(e) {
let knlg_graph = $("#knowledge-graph").attr("src");
$("#graphModal").css("display", "block");
$("#img01").attr("src", knlg_graph);
$("#caption").html("Knowledge Graph");
$("#navigationBar").removeClass("fixed-top");
});
// Close Knowledge graph image
$("#graph-close-btn").on("click", function(e) {
$("#graphModal").css("display", "none");
$("#navigationBar").addClass("fixed-top");
});
// Print NER results on submit button click
$("#subBtn").on("click", function (e) {
var laddaBtn = e.currentTarget;
var l = Ladda.create(laddaBtn);
l.start();
var settings = {
"url": "http://34.105.27.31:8000/",
"method": "POST",
"headers": {
"Content-Type": "application/json"
},
"data": JSON.stringify({
"ehr_text": $("#ehrText").val(),
"model_choice": $("#ner-model option:selected").val()
}),
};
//POST request to API
$.ajax(settings).done(function (response) {
let taggedHtml = response.tagged_text;
let reTable = response.re_table;
let graph = response.graph;
if (taggedHtml == '' || !taggedHtml) {
let str =
`<span class="text-danger">We're sorry some error occurred while trying to get the answer.</span></br>`
$("#errorText").html(str);
$("#errorText").removeClass("d-none");
} else {
$("#nerTitle").removeClass("d-none");
$("#reTitle").removeClass("d-none");
$("#taggedEhr").removeClass("d-none");
$("#relationTable").removeClass("d-none");
$("#output-tabs").removeClass("d-none");
$("#ner-waiting-text").addClass("d-none");
$("#re-waiting-text").addClass("d-none");
$("#knowledge-graph").attr("src", "");
$("#img01").attr("src", "");
$("#taggedEhr").html(taggedHtml);
$("#relationTable").html(reTable);
$("#graph-img").html(graph);
}
l.stop();
});
});
$(document).on("mouseenter", "#taggedEhr span", function() {
var relGroup = $(this).attr("class").split(' ');
for (grp of relGroup){
try {
$("." + grp).css("border", "2px solid red");
} catch (e) {}
}
});
$(document).on("mouseleave", "#taggedEhr span", function() {
var relGroup = $(this).attr("class").split(' ');
for (grp of relGroup){
try {
$("." + grp).css("border", "");
$("." + grp).css("border-bottom", "1px dotted black");
} catch (e) {}
}
});
});
</script>
</body>
</html>
