Downloads: 1
Diff of
/front-end/ehr.html
[000000]
..
[1de6ed]
Switch to unified view
| a | b/front-end/ehr.html | ||
|---|---|---|---|
| 1 | <html lang="en" class="focus-outline-visible"> |
||
| 2 | |||
| 3 | <head> |
||
| 4 | <title>EHR Information Extractor</title> |
||
| 5 | <meta charset="utf-8"> |
||
| 6 | <meta name="viewport" content="width=device-width, initial-scale=1"> |
||
| 7 | <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"> |
||
| 8 | <link href="https://fonts.googleapis.com/css?family=Catamaran" rel="stylesheet"> |
||
| 9 | <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> |
||
| 10 | <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> |
||
| 11 | <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script> |
||
| 12 | <script src="spin.js"></script> |
||
| 13 | <script src="ladda.js"></script> |
||
| 14 | <link rel="stylesheet" href="ladda-themeless.min.css"> |
||
| 15 | <style> |
||
| 16 | #taggedEhr span { |
||
| 17 | position: relative; |
||
| 18 | border-bottom: 1px dotted black; |
||
| 19 | color: black; |
||
| 20 | } |
||
| 21 | |||
| 22 | #taggedEhr span span { |
||
| 23 | visibility: hidden; |
||
| 24 | width: auto; |
||
| 25 | color: black; |
||
| 26 | border-bottom: 0; |
||
| 27 | font-weight: bold; |
||
| 28 | font-family: Catamaran; |
||
| 29 | text-align: center; |
||
| 30 | border-radius: 5px; |
||
| 31 | padding: 5px 5px 5px 5px; |
||
| 32 | |||
| 33 | /* Position the tooltip */ |
||
| 34 | position: absolute; |
||
| 35 | z-index: 1; |
||
| 36 | bottom: 125%; |
||
| 37 | left: 0%; |
||
| 38 | } |
||
| 39 | |||
| 40 | #taggedEhr span:hover span { |
||
| 41 | visibility: visible; |
||
| 42 | } |
||
| 43 | |||
| 44 | @media (min-width: 768px) { |
||
| 45 | #sidebar { |
||
| 46 | position: fixed; |
||
| 47 | padding-top: 70px; |
||
| 48 | bottom: 0; |
||
| 49 | border-right: #cdcdcd medium solid; |
||
| 50 | } |
||
| 51 | } |
||
| 52 | |||
| 53 | body { |
||
| 54 | padding-top: 70px; |
||
| 55 | overflow: auto; |
||
| 56 | } |
||
| 57 | |||
| 58 | .vertical-center { |
||
| 59 | padding: 200px 0; |
||
| 60 | text-align: center; |
||
| 61 | } |
||
| 62 | |||
| 63 | table.center { |
||
| 64 | margin-left:auto; |
||
| 65 | margin-right:auto; |
||
| 66 | } |
||
| 67 | |||
| 68 | .my-custom-scrollbar { |
||
| 69 | position: relative; |
||
| 70 | width: auto; |
||
| 71 | height: 400px; |
||
| 72 | overflow: auto; |
||
| 73 | } |
||
| 74 | |||
| 75 | .table-wrapper-scroll-y { |
||
| 76 | display: block; |
||
| 77 | } |
||
| 78 | |||
| 79 | * { |
||
| 80 | scrollbar-width: thin; |
||
| 81 | scrollbar-color: lightgray white; |
||
| 82 | } |
||
| 83 | *::-webkit-scrollbar { |
||
| 84 | width: 12px; |
||
| 85 | } |
||
| 86 | *::-webkit-scrollbar-track { |
||
| 87 | background: white; |
||
| 88 | } |
||
| 89 | *::-webkit-scrollbar-thumb { |
||
| 90 | background-color: lightgray; |
||
| 91 | border-radius: 20px; |
||
| 92 | border: 3px solid white; |
||
| 93 | } |
||
| 94 | |||
| 95 | #relationTable { |
||
| 96 | padding-left: 15px; |
||
| 97 | } |
||
| 98 | |||
| 99 | /* The Modal (background) */ |
||
| 100 | .modal { |
||
| 101 | display: none; /* Hidden by default */ |
||
| 102 | position: fixed; /* Stay in place */ |
||
| 103 | z-index: 1; /* Sit on top */ |
||
| 104 | padding-top: 100px; /* Location of the box */ |
||
| 105 | left: 0; |
||
| 106 | top: 0; |
||
| 107 | width: 100%; /* Full width */ |
||
| 108 | height: 100%; /* Full height */ |
||
| 109 | overflow: auto; /* Enable scroll if needed */ |
||
| 110 | background-color: rgb(0,0,0); /* Fallback color */ |
||
| 111 | background-color: rgba(0,0,0,0.9); /* Black w/ opacity */ |
||
| 112 | } |
||
| 113 | |||
| 114 | /* Modal Content (image) */ |
||
| 115 | .modal-content { |
||
| 116 | margin: auto; |
||
| 117 | display: block; |
||
| 118 | width: 80%; |
||
| 119 | max-width: 700px; |
||
| 120 | } |
||
| 121 | |||
| 122 | /* Caption of Modal Image */ |
||
| 123 | #caption { |
||
| 124 | margin: auto; |
||
| 125 | display: block; |
||
| 126 | width: 80%; |
||
| 127 | max-width: 700px; |
||
| 128 | text-align: center; |
||
| 129 | color: #ccc; |
||
| 130 | padding: 10px 0; |
||
| 131 | height: 150px; |
||
| 132 | } |
||
| 133 | |||
| 134 | /* Add Animation */ |
||
| 135 | .modal-content, #caption { |
||
| 136 | -webkit-animation-name: zoom; |
||
| 137 | -webkit-animation-duration: 0.6s; |
||
| 138 | animation-name: zoom; |
||
| 139 | animation-duration: 0.6s; |
||
| 140 | } |
||
| 141 | |||
| 142 | @-webkit-keyframes zoom { |
||
| 143 | from {-webkit-transform:scale(0)} |
||
| 144 | to {-webkit-transform:scale(1)} |
||
| 145 | } |
||
| 146 | |||
| 147 | @keyframes zoom { |
||
| 148 | from {transform:scale(0)} |
||
| 149 | to {transform:scale(1)} |
||
| 150 | } |
||
| 151 | |||
| 152 | /* The Close Button */ |
||
| 153 | .close { |
||
| 154 | position: absolute; |
||
| 155 | top: 15px; |
||
| 156 | right: 35px; |
||
| 157 | color: #f1f1f1; |
||
| 158 | font-size: 40px; |
||
| 159 | font-weight: bold; |
||
| 160 | transition: 0.3s; |
||
| 161 | } |
||
| 162 | |||
| 163 | .close:hover, |
||
| 164 | .close:focus { |
||
| 165 | color: #bbb; |
||
| 166 | text-decoration: none; |
||
| 167 | cursor: pointer; |
||
| 168 | } |
||
| 169 | |||
| 170 | /* 100% Image Width on Smaller Screens */ |
||
| 171 | @media only screen and (max-width: 700px){ |
||
| 172 | .modal-content { |
||
| 173 | width: 100%; |
||
| 174 | } |
||
| 175 | } |
||
| 176 | |||
| 177 | .custom-control { |
||
| 178 | padding-top: calc(.375rem + 1px); |
||
| 179 | padding-bottom: calc(.375rem + 1px); |
||
| 180 | } |
||
| 181 | |||
| 182 | </style> |
||
| 183 | </head> |
||
| 184 | |||
| 185 | <body> |
||
| 186 | |||
| 187 | <nav class="navbar navbar-light bg-light justify-content-center fixed-top" id="navigationBar"> |
||
| 188 | <a class="navbar-brand" href="#"> |
||
| 189 | EHR Information Extractor |
||
| 190 | </a> |
||
| 191 | </nav> |
||
| 192 | |||
| 193 | <div class="container" role="main"> |
||
| 194 | <div class="row"> |
||
| 195 | <div class="col-md-6" style="border-right: 1px solid; padding-top: 20px;"> |
||
| 196 | <form method="POST"> |
||
| 197 | |||
| 198 | <div class="form-group row"> |
||
| 199 | <label for="ner-model" class="col-sm-3 col-form-label">NER Model</label> |
||
| 200 | <div class="col-sm-6"> |
||
| 201 | <select class="form-control" id="ner-model"> |
||
| 202 | <option value="biobert">BioBERT</option> |
||
| 203 | <option value="bilstm">BiLSTM + CRF</option> |
||
| 204 | </select> |
||
| 205 | </div> |
||
| 206 | </div> |
||
| 207 | |||
| 208 | <div class="form-group row"> |
||
| 209 | <label for="ehrFile" class="col-sm-3 col-form-label">Upload EHR</label> |
||
| 210 | <div class="col-sm-6"> |
||
| 211 | <input type="file" class="form-control-file" id="ehrFile"> |
||
| 212 | </div> |
||
| 213 | </div> |
||
| 214 | |||
| 215 | <div class="form-group row" style="font-weight: bold;"> |
||
| 216 | <label class="col-sm-3 col-form-label">OR</label> |
||
| 217 | </div> |
||
| 218 | |||
| 219 | <div class="form-group row"> |
||
| 220 | <label for="ehrText" class="col-sm-8 col-form-label">Paste it here</label> |
||
| 221 | <div class="custom-control custom-switch float-right col-sm-4"> |
||
| 222 | <input type="checkbox" class="custom-control-input" id="sampleRecord"> |
||
| 223 | <label class="custom-control-label" for="sampleRecord">Sample EHR</label> |
||
| 224 | </div> |
||
| 225 | </div> |
||
| 226 | <textarea class="form-control col-sm-11" rows="10" id="ehrText" name="ehrText" |
||
| 227 | spellcheck="false"></textarea> |
||
| 228 | <br> |
||
| 229 | |||
| 230 | <div class="form-group row"> |
||
| 231 | <div class="col-sm-10"> |
||
| 232 | <button type="button" class="btn btn-primary ladda-button" id="subBtn" |
||
| 233 | data-style="expand-right">Submit</button> |
||
| 234 | </div> |
||
| 235 | </div> |
||
| 236 | |||
| 237 | </form> |
||
| 238 | <p class="d-none" id="errorText"></p> |
||
| 239 | </div> |
||
| 240 | |||
| 241 | <div class="col-md-6 " id=""> |
||
| 242 | <ul class="nav nav-tabs d-none" role="tablist" id="output-tabs"> |
||
| 243 | |||
| 244 | <li class="nav-item"> |
||
| 245 | <a class="nav-link active" id="ner-tab" data-toggle="tab" href="#ner" |
||
| 246 | aria-controls="ner" role="tab" aria-selected="true"> |
||
| 247 | <i class="bx bx-user align-middle"></i> |
||
| 248 | <span class="align-middle">Tagged EHR</span> |
||
| 249 | </a> |
||
| 250 | </li> |
||
| 251 | <li class="nav-item current"> |
||
| 252 | <a class="nav-link" id="re-table-tab" data-toggle="tab" href="#re-table" aria-controls="re-table" |
||
| 253 | role="tab" aria-selected="false"> |
||
| 254 | <i class="bx bx-message-square align-middle"></i> |
||
| 255 | <span class="align-middle">Relation Table</span> |
||
| 256 | </a> |
||
| 257 | </li> |
||
| 258 | <li class="nav-item"> |
||
| 259 | <a class="nav-link" id="re-graph" href="#" aria-selected="false"> |
||
| 260 | <i class="bx bx-message-square align-middle"></i> |
||
| 261 | <span class="align-middle">Knowledge Graph</span> |
||
| 262 | </a> |
||
| 263 | </li> |
||
| 264 | |||
| 265 | </ul> |
||
| 266 | |||
| 267 | <div class="tab-content"> |
||
| 268 | |||
| 269 | <div class="tab-pane active" id="ner" aria-labelledby="ner-tab" role="tabpanel"> |
||
| 270 | <h3 class="text-center d-none" id="nerTitle" style="padding-top: 20px; padding-bottom: 20px;"> |
||
| 271 | Tagged EHR |
||
| 272 | </h3> |
||
| 273 | |||
| 274 | <div id="taggedEhr" class="d-none table-wrapper-scroll-y my-custom-scrollbar"> |
||
| 275 | </div> |
||
| 276 | |||
| 277 | <div id="ner-waiting-text" class="vertical-center offset-sm-3"> |
||
| 278 | Waiting for an EHR record! |
||
| 279 | </div> |
||
| 280 | |||
| 281 | </div> |
||
| 282 | |||
| 283 | <div class="tab-pane" id="re-table" aria-labelledby="re-table-tab" role="tabpanel"> |
||
| 284 | |||
| 285 | <div id="re-waiting-text" class="vertical-center offset-sm-3"> |
||
| 286 | Waiting for an RE table! |
||
| 287 | </div> |
||
| 288 | |||
| 289 | <h3 class="text-center d-none" id="reTitle" style="padding-top: 20px; padding-bottom: 20px;"> |
||
| 290 | Relations |
||
| 291 | </h3> |
||
| 292 | |||
| 293 | <div id="relationTable" class="d-none table-wrapper-scroll-y my-custom-scrollbar"> |
||
| 294 | </div> |
||
| 295 | |||
| 296 | </div> |
||
| 297 | |||
| 298 | <div class="d-none" id="graph-img"> |
||
| 299 | </div> |
||
| 300 | |||
| 301 | <div id="graphModal" class="modal"> |
||
| 302 | <span class="close" id="graph-close-btn">×</span> |
||
| 303 | <img class="modal-content" id="img01"> |
||
| 304 | <div id="caption"></div> |
||
| 305 | </div> |
||
| 306 | |||
| 307 | </div> |
||
| 308 | |||
| 309 | <br> |
||
| 310 | |||
| 311 | </div> |
||
| 312 | </div> |
||
| 313 | </div> |
||
| 314 | |||
| 315 | <script> |
||
| 316 | $(document).ready(function () { |
||
| 317 | |||
| 318 | // Read file contents and set to text area |
||
| 319 | $('#ehrFile').change(function () { |
||
| 320 | var fileReader = new FileReader(); |
||
| 321 | fileReader.onload = function () { |
||
| 322 | var data = fileReader.result; |
||
| 323 | $("#ehrText").val(data); |
||
| 324 | }; |
||
| 325 | fileReader.readAsText($(this).prop('files')[0]); |
||
| 326 | |||
| 327 | }); |
||
| 328 | |||
| 329 | // Read sample EHR |
||
| 330 | $("#sampleRecord").change(function () { |
||
| 331 | // If checked |
||
| 332 | if (this.checked) { |
||
| 333 | var settings = { |
||
| 334 | "url": "http://34.105.27.31:8000/sample/", |
||
| 335 | "method": "GET", |
||
| 336 | "headers": { |
||
| 337 | "Content-Type": "application/json" |
||
| 338 | }, |
||
| 339 | }; |
||
| 340 | |||
| 341 | $.ajax(settings).done(function (response) { |
||
| 342 | let data = response.data; |
||
| 343 | $("#ehrText").val(data); |
||
| 344 | }); |
||
| 345 | |||
| 346 | } else { |
||
| 347 | $("#ehrText").val(""); |
||
| 348 | } |
||
| 349 | }); |
||
| 350 | |||
| 351 | // Open Knowledge graph image |
||
| 352 | $("#re-graph").on("click", function(e) { |
||
| 353 | let knlg_graph = $("#knowledge-graph").attr("src"); |
||
| 354 | |||
| 355 | $("#graphModal").css("display", "block"); |
||
| 356 | $("#img01").attr("src", knlg_graph); |
||
| 357 | $("#caption").html("Knowledge Graph"); |
||
| 358 | $("#navigationBar").removeClass("fixed-top"); |
||
| 359 | }); |
||
| 360 | |||
| 361 | // Close Knowledge graph image |
||
| 362 | $("#graph-close-btn").on("click", function(e) { |
||
| 363 | $("#graphModal").css("display", "none"); |
||
| 364 | $("#navigationBar").addClass("fixed-top"); |
||
| 365 | }); |
||
| 366 | |||
| 367 | // Print NER results on submit button click |
||
| 368 | $("#subBtn").on("click", function (e) { |
||
| 369 | var laddaBtn = e.currentTarget; |
||
| 370 | var l = Ladda.create(laddaBtn); |
||
| 371 | l.start(); |
||
| 372 | |||
| 373 | var settings = { |
||
| 374 | "url": "http://34.105.27.31:8000/", |
||
| 375 | "method": "POST", |
||
| 376 | "headers": { |
||
| 377 | "Content-Type": "application/json" |
||
| 378 | }, |
||
| 379 | "data": JSON.stringify({ |
||
| 380 | "ehr_text": $("#ehrText").val(), |
||
| 381 | "model_choice": $("#ner-model option:selected").val() |
||
| 382 | }), |
||
| 383 | }; |
||
| 384 | |||
| 385 | //POST request to API |
||
| 386 | $.ajax(settings).done(function (response) { |
||
| 387 | |||
| 388 | let taggedHtml = response.tagged_text; |
||
| 389 | let reTable = response.re_table; |
||
| 390 | let graph = response.graph; |
||
| 391 | |||
| 392 | if (taggedHtml == '' || !taggedHtml) { |
||
| 393 | let str = |
||
| 394 | `<span class="text-danger">We're sorry some error occurred while trying to get the answer.</span></br>` |
||
| 395 | $("#errorText").html(str); |
||
| 396 | $("#errorText").removeClass("d-none"); |
||
| 397 | } else { |
||
| 398 | $("#nerTitle").removeClass("d-none"); |
||
| 399 | $("#reTitle").removeClass("d-none"); |
||
| 400 | $("#taggedEhr").removeClass("d-none"); |
||
| 401 | $("#relationTable").removeClass("d-none"); |
||
| 402 | $("#output-tabs").removeClass("d-none"); |
||
| 403 | |||
| 404 | $("#ner-waiting-text").addClass("d-none"); |
||
| 405 | $("#re-waiting-text").addClass("d-none"); |
||
| 406 | |||
| 407 | $("#knowledge-graph").attr("src", ""); |
||
| 408 | $("#img01").attr("src", ""); |
||
| 409 | |||
| 410 | $("#taggedEhr").html(taggedHtml); |
||
| 411 | $("#relationTable").html(reTable); |
||
| 412 | $("#graph-img").html(graph); |
||
| 413 | } |
||
| 414 | |||
| 415 | l.stop(); |
||
| 416 | }); |
||
| 417 | }); |
||
| 418 | |||
| 419 | |||
| 420 | $(document).on("mouseenter", "#taggedEhr span", function() { |
||
| 421 | var relGroup = $(this).attr("class").split(' '); |
||
| 422 | for (grp of relGroup){ |
||
| 423 | try { |
||
| 424 | $("." + grp).css("border", "2px solid red"); |
||
| 425 | } catch (e) {} |
||
| 426 | } |
||
| 427 | }); |
||
| 428 | |||
| 429 | $(document).on("mouseleave", "#taggedEhr span", function() { |
||
| 430 | var relGroup = $(this).attr("class").split(' '); |
||
| 431 | for (grp of relGroup){ |
||
| 432 | try { |
||
| 433 | $("." + grp).css("border", ""); |
||
| 434 | $("." + grp).css("border-bottom", "1px dotted black"); |
||
| 435 | } catch (e) {} |
||
| 436 | } |
||
| 437 | }); |
||
| 438 | }); |
||
| 439 | </script> |
||
| 440 | |||
| 441 | </body> |
||
| 442 | |||
| 443 | </html> |