Downloads: 1
Diff of
/front-end/ehr.html
[000000]
..
[1de6ed]
Switch to side-by-side view
--- a +++ b/front-end/ehr.html @@ -0,0 +1,443 @@ +<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> \ No newline at end of file