Merge pull request #414 from camicroscope/develop

For 3.7.6

HISTORY.md

@@ -22,9 +22,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
     * [1.0.x](#camicroscope-10)
 
 ### caMicroscope [Unreleased](https://github.com/camicroscope/camicroscope/compare/v3.7.5...camicroscope:develop)
-*
+###### TBD
+* TBD
 
 ### caMicroscope [3.7.5](https://github.com/camicroscope/camicroscope/compare/v3.7.4...camicroscope:v3.7.5)
+###### 2020-05-29
 * Safer HTML in table ([#401](https://github.com/camicroscope/caMicroscope/pull/401))
 
 

README.md

@@ -41,6 +41,7 @@ The toolbar is in the top-left of the main content window. Use the toolbar butto
 | ![](https://fonts.gstatic.com/s/i/materialicons/timeline/v6/24px.svg)      | Segment      | This tool allows you to display, count, and export nuclear segmentations on the image. Clicking this tool opens the following custom toolbar. |
 | ![](https://fonts.gstatic.com/s/i/materialicons/aspect_ratio/v4/24px.svg)      | Model      | Show results from a pre-trained tensorflow compatible model on a ROI of the slide. |
 | ![](https://fonts.gstatic.com/s/i/materialicons/get_app/v4/24px.svg)      | Download Slide      | Download the slide image to your system |
+| ![](https://fonts.gstatic.com/s/i/materialicons/playlist_add_check/v8/24px.svg)      | Mark Reviewed      | Use to signify the completion of review of a slide. |
 | ![](https://fonts.gstatic.com/s/i/materialicons/bug_report/v4/24px.svg)      | Bug Report      | Report a bug or give feedback. |
 | ![](https://fonts.gstatic.com/s/i/materialicons/help/v4/24px.svg)      | Tutorial      | Click to view a guided tour of the viewer tools. |
 

apps/Info.html

@@ -60,12 +60,9 @@
 				<li class="nav-item link">
 					<a class="nav-link" href="landing/landing.html"> <i class="fas fa-home"></i> Home</a>
 				</li>
-				<li class="nav-item link">
+				<li class="nav-item link active">
 					<a class="nav-link" href="table.html"> <i class="fas fa-list-ul"></i> Slides</a>
 				</li>
-        <li class="nav-item active link">
-          <a class="nav-link" href="Info.html"> <i class="fas fa-info-circle"></i> Info</a>
-        </li>
 			</ul>
 			<ul class="navbar-nav">
 				<li class="nav-item link" style="font-family: sans-serif;">
@@ -81,8 +78,15 @@
 	<div class="header text-center text-white bg-info p-4">
 		<h1 class="h1">caMicroscope</h1>
 		<p>Digital pathology image viewer with support for human/machine generated annotations and markups.</p>
+		<div style="align-content: center;">
+			<div class="btn-group" role="group">
+			<a href="./table.html">	<button style="border-color: white; border-radius: 5px 0 0 5px;" type="button" class="btn btn-secondary bg-info text-light" title="Slides Table"><i class="fas fa-list-alt"></i>  Slides</button> </a>
+			<button type="button" style="border-color: white;" class="btn btn-secondary bg-white text-dark" title="Information Dashboard"> <i class="fas fa-info-circle"></i> Info</button>
+			</div>
+		</div>
 	</div>
 
+
 	<div class="modal fade" id="detail-dialog" tabindex="-1" role="dialog"
 	aria-labelledby="title-of-dialog" aria-hidden="true" data-backdrop="static" data-keyboard="false" >
 	<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-lg" role="document" style="margin-top:8vh;">
@@ -137,6 +141,7 @@ <h3 class="text-center h3 mb-2" style="margin-top:8px;margin-bottom:10px;">Infor
 	<div class="row mb-2 ml-1" id="filters-check">
 	</div>
 	<div class="form-group has-search">
+
 		<span class="fa fa-search form-control-feedback"></span>
 		<input id="search-table" type="text" class="form-control" placeholder="Search">
 	</div>

apps/landing/landing.html

@@ -50,9 +50,6 @@
             <li class="nav-item  link" style="font-family: sans-serif;">
                 <a class="nav-link" href="../table.html"> <i class="fas fa-list-ul"></i>  Slides</a>
             </li>
-            <li class="nav-item link">
-                <a class="nav-link" href="../Info.html"> <i class="fas fa-info-circle"></i> Info</a>
-            </li>
         </ul>
         <ul class="navbar-nav">
             <li class="nav-item link" style="font-family: sans-serif;">

apps/signup/signup.html

@@ -35,6 +35,7 @@
 
 
   </head>
+  <script src="../../core/Store.js"></script>
   <script src="./signup.js"></script>
 
   <body>
@@ -119,7 +120,6 @@ <h2 style="margin-top: -.5em;">User Signup</h2>
 
 
     <script src="../../common/util.js"></script>
-    <script src="../../core/Store.js"></script>
 
   </body>
 </html>

apps/signup/signup.js

@@ -1,7 +1,7 @@
 var userSignupUrl = "../../data/User/post";
 var protoTokenUrl = "../../auth/Token/proto";
 var permissions;
-const store = new Store('../data/');
+const store = new Store('../../data/');
 
 function addUser(){
   var email = document.getElementById("mail").value
@@ -17,7 +17,7 @@ function addUser(){
     userType = "Editor"
   }
 
-  getUserPermissions(getUserType())
+  store.getUserPermissions(getUserType())
     .then(response => response.text())
     .then((data) => {
     return (data ? JSON.parse(data) : null);

apps/table.html

@@ -68,9 +68,6 @@
 				<li class="nav-item active link">
 					<a class="nav-link" href="table.html"> <i class="fas fa-list-ul"></i> Slides</a>
 				</li>
-				<li class="nav-item link">
-					<a class="nav-link" href="Info.html"> <i class="fas fa-info-circle"></i> Info</a>
-				</li>
 				<!-- Notification Bell -->
 				<li class="nav-item dropdown" id="notifBell">
 					<a class="nav-link mt-1" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
@@ -136,6 +133,13 @@ <h5>Notifications</h5>
 	<div class="header text-center text-white bg-info p-4">
 		<h1 class="h1">caMicroscope</h1>
 		<p>Digital pathology image viewer with support for human/machine generated annotations and markups.</p>
+		<div style="align-content: center;">
+			<div style="align-content: center;">
+				<div class="btn-group" role="group">
+				<button type="button" style="border-color: white;" class="btn btn-secondary bg-white text-dark" title="Slides Table"><i class="fas fa-list-alt"></i>  Slides</button>
+				<a href="./Info.html">	<button style="border-color: white; border-radius: 0 5px 5px 0;" type="button" class="btn btn-secondary bg-info text-light" title="Information Dashboard"><i class="fas fa-info-circle"></i>  Info</button> </a></div>
+			</div>
+		</div>
 	</div>
 
 	<div class='p-2 bg-light' style="flex-grow: 1;">
@@ -244,13 +248,18 @@ <h3>Steps for uploading.</h3>
 		<div class="container">
 
 			<div>
+
+				<div class="" >
+					<h3 class="text-center h3 mb-0" >Available Slides</h3>
+					<div class="search-box float-left form-group form-inline" style="margin-top: 1em;">
+				</div>
 				<div class="">
-					<h3 class="text-center h3 mb-0">Available Slides</h3>
 					<div class="row mt-2" id="filters-heading">
 					</div>
 					<div class="row mb-2 ml-1" id="filters-check" >
 					</div>
 					<div class="search-box float-left form-group form-inline">
+
 						<select id='entries' class="select form-control mr-2">
 							<option value="10" selected>10 slides/page</option>
 							<option value="20">20 slides/page</option>

apps/table.js

@@ -1,5 +1,5 @@
 function sanitize(string) {
-  string = string || ''
+  string = string || '';
   const map = {
     '&': '&',
     '<': '&lt;',
@@ -97,6 +97,9 @@ const HeadMapping = [{
 }, {
   title: 'MPP',
   field: 'mpp',
+}, {
+  title: 'Review',
+  field: 'review',
 }];
 var totaltablepages;
 var selectedpage;
@@ -249,7 +252,9 @@ function initialize() {
                   const filename = d.location.split('/')[d.location.split('/').length - 1];
                   keys.forEach((key, i) => {
                     if (i == 0) rs.push(d['_id']['$oid']);
-                    else if (!d[key]) rs.push('');
+                    else if (key=='review') {
+                      rs.push(d[key]=='true'?`<label style="color:green;">✓</label>`:``);
+                    } else if (!d[key]) rs.push('');
                     else rs.push(d[key]);
                   });
                   if (slideDeleteRequests['counter']) {

apps/viewer/init.js

@@ -841,6 +841,18 @@ async function initUIcomponents() {
       window.open('https://goo.gl/forms/mgyhx4ADH0UuEQJ53', '_blank').focus();
     },
   });
+  // -- view btn START -- //
+  if (!($D.params.data.hasOwnProperty('review') && $D.params.data['review']=='true')) {
+    console.log('create check');
+    subToolsOpt.push({
+      name: 'review',
+      icon: 'playlist_add_check',
+      title: 'has reviewed',
+      type: 'btn',
+      value: 'review',
+      callback: updateSlideView,
+    });
+  }
   subToolsOpt.push({
     name: 'tutorial',
     icon: 'help',
@@ -1180,3 +1192,15 @@ function redirect(url, text = '', sec = 5) {
     timer--;
   }, 1000);
 }
+
+function updateSlideView() {
+  if (!confirm(`Do you want to mark this slide as reviewed?`)) return;
+  Loading.open(document.body, 'changing review status ...');
+  $CAMIC.store.updateSlideReview($D.params.slideId, 'true').then(function(e) {
+    if (e.status==200) {
+      $UI.toolbar.getSubTool('review').style.display = 'none';
+    }
+  }).finally(function() {
+    Loading.close();
+  });
+}

core/Store.js

@@ -96,12 +96,12 @@ class Store {
    * @return {promise} - promise which resolves with data
    **/
   findMark(slide, name, footprint, source, x0, x1, y0, y1) {
-    const suffix = 'Mark/find';
+    const suffix = 'Mark/spatial';
     const url = this.base + suffix;
     const query = {};
     let bySlideId;
     if (slide) {
-      query.slide = slide;
+      query['provenance.image.slide'] = slide;
     }
     if (name) {
       query['provenance.analysis.execution_id'] = name;
@@ -629,7 +629,7 @@ class Store {
     const suffix = 'Configuration/find';
     const url = this.base + suffix;
     const query = {
-      'name': name,
+      'config_name': name,
     };
 
     return fetch(url + '?' + objToParamStr(query), {
@@ -778,6 +778,25 @@ class Store {
     });
   }
 
+  // Update slide review status
+  updateSlideReview(id, newStatus) {
+    const suffix = 'Slide/update';
+    const url = this.base + suffix;
+    console.log(id+ '   '+ newStatus);
+    const query = {
+      '_id': id,
+    };
+    const update = {
+      'review': newStatus,
+    };
+    return fetch(url + '?' + objToParamStr(query), {
+      method: 'POST',
+      credentials: 'include',
+      mode: 'cors',
+      body: JSON.stringify(update),
+    });
+  }
+
   /**
    * request creation of user
    * @param {object} email - the requested user email