Review Status Workflow and Indicators

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/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

@@ -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