Merge pull request #499 from camicroscope/develop

For 3.9.0

.travis.yml

@@ -12,19 +12,14 @@ install:
     - npm install eslint-config-google
 
 stages:
-  - name: tests
   - name: lintjs
-  - name: linthtml
+  - name: tests
 
 before_script:
   - http-server -s & # start a Web server
-  - sleep 3 # give Web server some time to bind to sockets, etc
 
 jobs:
   include:
-    - stage: tests
-      name: Unit Tests
-      script: mocha test --recursive --exit
     - stage: lintjs
       name: "JS Code Style Check"
       script:
@@ -38,3 +33,6 @@ jobs:
         - ./node_modules/.bin/eslint apps/model/**/*.js --quiet
         - ./node_modules/.bin/eslint apps/segment/**/*.js --quiet
         - ./node_modules/.bin/eslint apps/viewer/*.js --quiet
+    - stage: tests
+      name: Unit Tests
+      script: mocha test --recursive --exit

HISTORY.md

@@ -23,9 +23,20 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 * **Version 1**
     * [1.0.x](#camicroscope-10)
 
-### caMicroscope [Unreleased](https://github.com/camicroscope/camicroscope/compare/v3.8.4...camicroscope:develop)
+### caMicroscope [Unreleased](https://github.com/camicroscope/camicroscope/compare/v3.9.0...camicroscope:develop)
 ###### TBD
-
+* 
+
+### caMicroscope [Unreleased](https://github.com/camicroscope/camicroscope/compare/v3.8.4...camicroscope:v3.9.0)
+###### 2021-03-04
+* Asynchronous Layer Manager
+* Auto convert png and jpg files via table load.
+* Undo Draw Button [#491](https://github.com/camicroscope/caMicroscope/pull/491)
+* Addition of screenshot feature to the viewer [#496](https://github.com/camicroscope/caMicroscope/pull/496)
+* Table Button Responsiveness [#477](https://github.com/camicroscope/caMicroscope/pull/477)
+* Improved Documentation [#478](https://github.com/camicroscope/caMicroscope/pull/478), [#488](https://github.com/camicroscope/caMicroscope/pull/488)
+* Tour, save state and resume [#487](https://github.com/camicroscope/caMicroscope/pull/487)
+* Toolbar Dependency Bugfix [#494](https://github.com/camicroscope/caMicroscope/pull/494)
 
 ### caMicroscope [3.8.4](https://github.com/camicroscope/camicroscope/compare/v3.8.3...camicroscope:v3.8.4)
 ###### 2021-01-25

README.md

@@ -5,12 +5,12 @@
 caMicroscope is a web-based biomedical image and data viewer, with a strong emphasis on cancer pathology WSI (Whole Slide Imaging).
 This guide has sections for different kinds of use of the platform. The [User Guide](#user-guide) covers the basics on how to use caMicroscope viewer. [nanoBorb](#nanoborb) covers nanoBorb, the version of caMicroscope designed as a standalone application for individual users without a server. [Hosted Setup](#hosted-setup) covers how to set up caMicroscope for multiple users on a server. [Developer Guide](#developer-guide) covers the broad strokes on how to add new functionality to caMicroscope.
 
-![View Slides](docs/View.gif)
-![Measure Features](docs/Measure.gif)
-![Annotate Areas of Interest](docs/Draw.gif)
-![Alternate Annotation Method](docs/Paint.gif)
-![Automatic Object Detection](docs/Segment.gif)
-![Test Classification Models](docs/Predict.gif)
+![View Slides](docs/img/View.gif)
+![Measure Features](docs/img/Measure.gif)
+![Annotate Areas of Interest](docs/img/Draw.gif)
+![Alternate Annotation Method](docs/img/Paint.gif)
+![Automatic Object Detection](docs/img/Segment.gif)
+![Test Classification Models](docs/img/Predict.gif)
 
 # User Guide
 
@@ -32,6 +32,7 @@ The toolbar is in the top-left of the main content window. Use the toolbar butto
 | ![](https://fonts.gstatic.com/s/i/materialicons/view_list/v4/24px.svg)      | Layer Manager      | Opens the Layers Manager panel, where you can select which layers to view. |
 | ![](https://fonts.gstatic.com/s/i/materialicons/home/v4/24px.svg)      | Home      | Return to the data table so that you can open another slide.|
 | ![](https://fonts.gstatic.com/s/i/materialicons/create/v4/24px.svg)      | Draw      |  Draw thin lines, thick lines, or polygons on the image. To maintain the integrity of measurements, avoid drawing shapes that overlap or intersect one another. |
+| ![](https://fonts.gstatic.com/s/i/materialicons/colorize/v4/24px.svg)      | Preset Labels      |  Use a preset annotation type immediately to quickly annotate a silde consistently. |
 | ![](https://fonts.gstatic.com/s/i/materialicons/search/v4/24px.svg)       | Magnifier      |The Magnifier works like a magnifying glass and allows you to see the slide at normal magnification (1.0), low magnification (0.5), or high magnification (2.0). Click a magnification level and place the bounding box on the area of the slide you want to magnify. |
 | ![](https://fonts.gstatic.com/s/i/materialicons/space_bar/v4/24px.svg)      | Measurement      | Drag this tool on the slide to learn the measurement in micrometers. |
 | ![](https://fonts.gstatic.com/s/i/materialicons/share/v4/24px.svg)      | Share View      |Opens a window with a URL to the current presentation state of the slide including the magnification level, layers that are currently open, and your position on the image.|
@@ -43,6 +44,7 @@ The toolbar is in the top-left of the main content window. Use the toolbar butto
 | ![](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/camera_enhance/v4/24px.svg)      | Slide Capture      | Click to take a screenshot of the slide and annotations on it. |
 | ![](https://fonts.gstatic.com/s/i/materialicons/help/v4/24px.svg)      | Tutorial      | Click to view a guided tour of the viewer tools. |
 
 
@@ -56,17 +58,6 @@ The toolbar is in the top-left of the main content window. Use the toolbar butto
 | Side-by-Side |  Ctrl + s |
 | Close all tools |  ESC   |
 
-
-# nanoBorb
-To use caMicroscope as a standalone application, see [nanoBorb](https://github.com/SBU-BMI/nanoBorb/releases).
-The [user guide screencast](https://drive.google.com/open?id=1HkkL5FqEIgi7fzqKijtUhWBPlplh_uHF) should explain the basics of nanoBorb.
-
-1. Download zip file.
-2. Unzip.
-3.
-    * For Windows, Run "nanoborb.exe" in the unzipped folder
-    * For MacOS, Move nanoBorb app to Applications folder and Double-click copied nanoBorb file to run.
-
 # Hosted Setup
 The full distribution repository for hosted caMicroscope is [here](https://github.com/camicroscope/Distro/).
 run with `docker-compose -f caMicroscope.yml up`
@@ -76,43 +67,27 @@ Use `docker-compose -f caMicroscope.yml build` to rebuild the services.
 
 Once everything is up, go to \<the host this is running on\>:4010/ to see the landing page.
 
+# Other Resources
+- **Slack:** <http://bit.ly/camicroscope>
+- **Discussion mailing list:** <https://groups.google.com/g/camicroscope>
+- **Sample Tensorflow Models:** <https://github.com/camicroscope/tfjs-models>
+
 # Developer Guide
 We are collecting feedback to write this section in more detail. Please add your suggestions [here](https://github.com/camicroscope/caMicroscope/issues/267).
 
-caMicroscope is open source software. Any involvement and contribution with the caMicroscope project is greatly appreciated. Feel free to get directly involved in any of the repositories in the caMicroscope organization.
+caMicroscope is open source software. Any involvement and contribution with the caMicroscope project is greatly appreciated. Feel free to get directly involved in any of the repositories in the caMicroscope organization. New developers may find the notes in [CONTRIBUTING](https://github.com/camicroscope/caMicroscope/blob/master/CONTRIBUTING.md) helpful to start contributing to caMicroscope.
 
 It is highly recommended to make any changes off of the develop branch of a repository, and, when ready, create a PR to the develop branch of the source repository. Before sending the PR, make sure that there are no linting errors by running ```npm install``` and then ```npm run lint```  to see the errors and ```npm run lint-fix``` to automatically fix the errors in the repository folder.
 
+Source code organization ie the file structure of caMicroscope can be found in [file structure](https://github.com/camicroscope/caMicroscope/blob/master/docs/file_structure.md)
+
 ## Fast Local Changes
 When using the hosted setup, you can have the distribution host the changes from your local. Follow these steps :
 - Clone this repository, the [Caracal repository](https://github.com/camicroscope/Caracal/) and [the distribution](https://github.com/camicroscope/Distro/) in the same parent directory
-- In this repo, `mv .nocache.htaccess .htaccess`
-- Replace the 'back' section of develop.yml in Distro repository with something like this:
-```
-  back:
-    build:
-      context: "../Caracal"
-      args:
-        viewer: "develop"
-    depends_on:
-      - "mongo"
-    ports:
-      - "4010:4010"
-    container_name: ca-back
-    volumes:
-      - ./config/login.html:/root/src/static/login.html
-      - ./jwt_keys/:/root/src/keys/
-      - ../caMicroscope:/root/src/camicroscope
-    environment:
-      JWK_URL: "https://www.googleapis.com/oauth2/v3/certs"
-      IIP_PATH: "http://ca-iip/fcgi-bin/iipsrv.fcgi"
-      MONGO_URI: "mongodb://ca-mongo"
-      DISABLE_SEC: "true"
-      ALLOW_PUBLIC: "true"
-```
+- Set the build to build your local changes instead of the hosted git versions by editing the ca-back container section of your develop.yml. Replace the build context section with the path to your caracal checkout ("../Caracal"), and add `- ../caMicroscope:/src/camicroscope` to the volumes.
 - Remove this line from 'Dockerfile' in Caracal repository :
 ```
-RUN if [ -z ${viewer} ]; then git clone https://github.com/camicroscope/camicroscope.git; else git clone https://github.com/camicroscope/camicroscope.git --branch=$viewer; fi
+RUN git clone https://github.com/${fork:-camicroscope}/camicroscope.git --branch=${viewer:-master}
 ```
 - In Distro repository, enter the following commands :
 ```

apps/heatmap/heatmap.html

@@ -151,6 +151,10 @@
 		<!-- <script src='./dataloaders.js'></script> -->
 		<script src='./init.js'></script>
 
+		<!-- Popper & tippy -->
+    <script src="https://unpkg.com/@popperjs/core@2"></script>
+    <script src="https://unpkg.com/tippy.js@6"></script>
+
 	</head>
 	<body>
         <!-- message-->

apps/labeling/labeling.html

@@ -81,6 +81,9 @@
 		<script type='text/javascript' src='../../common/dynamicLoadScript.js'></script>
 		<script type='text/javascript' src='./labeling.js'></script>
 
+		<!-- Popper & tippy -->
+    <script src="https://unpkg.com/@popperjs/core@2"></script>
+    <script src="https://unpkg.com/tippy.js@6"></script>
 	</head>
 	<body>
 		<!-- message-->

apps/loader/loader.js

@@ -159,22 +159,40 @@ function handleDownload(id) {
       });
 }
 
+function convertSlide(filename, destFilename) {
+  let convUrl = '../loader/slide/' + filename + '/pyramid/' + destFilename;
+  return fetch(convUrl, {'method': 'POST'}).then((response) => response.json());
+}
 
-function handleCheck(filename, reset, id) {
+function handleCheck(filename, reset, id, noRetry) {
   fetch(checkUrl + filename, {credentials: 'same-origin'}).then(
       (response) => response.json(), // if the response is a JSON object
   ).then(
       (success) => {
+        // errors aren't always non-success, so need to check here too
+        if (success.error) {
+          console.error(success.error);
+          throw success;
+        }
         success['ID'] = id;
         // Add the filename, to be able to fetch the thumbnail.
         success['preview'] = filename;
         changeStatus('CHECK', success, reset);
         $('#finish_btn').fadeOut(300);
         $('#filename0, #slidename0, #filter0').prop('disabled', true);
       }, // Handle the success response object
-  ).catch(
-      (error) => changeStatus('CHECK', error, reset), // Handle the error response object
-  );
+  ).catch((error)=>{
+    if (!(noRetry)) {
+      console.log('retrying with conversion');
+      let destFilename = filename.replace('.', '_') + '_conv.tif';
+      document.getElementById('filename'+0).value = destFilename;
+      convertSlide(filename, destFilename).then((x)=>handleCheck(destFilename, reset, id, true))
+          .catch((err)=>changeStatus('CHECK', error, reset));
+    } else {
+      console.info('not retrying');
+      changeStatus('CHECK', error, reset); // Handle the error response object
+    }
+  });
 }
 
 function handlePost(filename, slidename, filter, reset) {

apps/model/model.html

@@ -147,7 +147,10 @@
   <script type="text/javascript" src="//stuk.github.io/jszip-utils/dist/jszip-utils.js"></script>
   <script type="text/javascript" src="//stuk.github.io/jszip/vendor/FileSaver.js"></script>
   <script type='text/javascript' src='../../common/sizeof.compressed.js'></script>
-
+
+  <!-- Popper & tippy -->
+  <script src="https://unpkg.com/@popperjs/core@2"></script>
+  <script src="https://unpkg.com/tippy.js@6"></script>
   <!--
   <script src='../viewer/uicallbacks.js'></script>
   <script src='../viewer/dataloaders.js'></script>

apps/segment/segment.html

@@ -159,6 +159,10 @@
   <script type="text/javascript" src="//stuk.github.io/jszip-utils/dist/jszip-utils.js"></script>
   <script type="text/javascript" src="//stuk.github.io/jszip/vendor/FileSaver.js"></script>
   <script type='text/javascript' src='../../common/sizeof.compressed.js'></script>
+
+  <!-- Popper & tippy -->
+  <script src="https://unpkg.com/@popperjs/core@2"></script>
+  <script src="https://unpkg.com/tippy.js@6"></script>
 
   <!-- segment css -->
   <link rel="stylesheet" type='text/css' href='./segment.css'>