Merge branch 'develop' into color-contrast

camicroscope · Jul 25, 2024 · c73b1ac · c73b1ac
2 parents 2c9dcea + 87e0cbd
commit c73b1ac
Show file tree

Hide file tree

Showing 20 changed files with 512 additions and 73 deletions.
diff --git a/.github/workflows/axe-a11y-check.yml b/.github/workflows/axe-a11y-check.yml
@@ -24,8 +24,10 @@ jobs:
       - run: npm install -g http-server
       - run: npm run build --if-present
       - run: http-server -s &
+      - name: Install specific version of ChromeDriver
+        run: npm install -g chromedriver@125
       - name: Run axe
         run: |
           npm install -g @axe-core/cli
           sleep 90
-          axe http://127.0.0.1:8080 --exit
+          axe http://127.0.0.1:8080 --chromedriver-path $(npm root -g)/chromedriver/bin/chromedriver --exit
diff --git a/README.md b/README.md
@@ -46,7 +46,7 @@ The toolbar is in the top-left of the main content window. Use the toolbar butto
 | ![](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. |
-
+| ![](https://fonts.gstatic.com/s/i/materialicons/auto_graph/v4/24px.svg)      | Visualization   | Click to view visualizations of annotations. |
 
 ## Toolbar Shortcuts
 

diff --git a/apps/Info.html b/apps/Info.html
@@ -14,7 +14,7 @@
 	<!-- Font Awesome -->
     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
 
-	<title>CaMicroscope Data Table</title>
+	<title>caMicroscope - Information Dashboard</title>
 
 	<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"	integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"	crossorigin="anonymous"></script>
 
@@ -75,7 +75,7 @@ <h1 class="h1">caMicroscope</h1>
 		<p style="font-weight: bold; font-size: 14pt;">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>
+			<a href="./table.html">	<button style="border-color: white; border-radius: 5px 0 0 5px;" type="button" class="btn btn-secondary bg-dark 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>

diff --git a/apps/common.css b/apps/common.css
@@ -29,6 +29,10 @@
   color: whitesmoke;
 }
 
+.report-link {
+  color: #e5c1ea;
+}
+
 .company-name {
   color: #e5c1ea;
 }

diff --git a/apps/dev-workbench/workbench.html b/apps/dev-workbench/workbench.html
@@ -87,13 +87,13 @@
 
           class="nav-item dropdown"
         >
-          <a
+          <button
             class="nav-link dropdown-toggle"
             id="navbarDropdownMenuLink"
             data-toggle="dropdown"
             aria-haspopup="true"
             aria-expanded="false"
-            >Options</a
+            >Options</button
           >
           <div
             style="margin-left: -5em;"
@@ -166,6 +166,7 @@
                     "
                     type="button"
                     class="btn btn-primary"
+                    aria-label="Select or create your dataset"
                   >
                     <i data-feather="chevron-right" class="text-white"></i>
                   </button>

diff --git a/apps/info.css b/apps/info.css
@@ -18,7 +18,7 @@ footer{
 	background-color: #343a40 !important;
 }
 .bg-info {
-    background-color: #17a2b8!important;
+    background-color: #17a2b8 !important;
 }
 .page-container{
 	height:100vh;	

diff --git a/apps/landing/landing.html b/apps/landing/landing.html
@@ -1,7 +1,7 @@
 <html lang="en">
 <head>
 
-    <title>caMicroscope</title>
+    <title>caMicroscope - Home</title>
     <meta charset="utf-8" />
 
     <meta name="viewport" content="width=device-width, initial-scale=1" />
@@ -62,11 +62,9 @@
 
     <div class="inner">
 
-        <div role="heading">
-            <header class="major">
-                <h1>caMicroscope</h1>
-            </header>
-        </div>
+        <header class="major">
+            <h1>caMicroscope</h1>
+        </header>
 
         <!-- Content -->
 
@@ -81,17 +79,17 @@ <h1>caMicroscope</h1>
             <section class="post">
                 <a href="../table.html" class="image" aria-label="Visit Slides Page"><img src="./camic.jpg" alt=""/></a>
                 <div class="content">
-                    <h3>caMicroscope</h3>
+                    <h2>caMicroscope</h2>
                     <p>Use camicroscope to explore and mark slides uploaded. If this is a restricted access deployment, you will be prompted to log in here.</p>
-                    <a href="../table.html" class="button">More</a>
+                    <a href="../table.html" class="button" aria-label="Explore caMicroscope">More</a>
                 </div>
             </section>
             <section class="post">
                 <a target="_blank" href="https://camicroscope.github.io/docs/" class="image" aria-label="Visit Documentation Page"><img src="./code.jpg" alt=""/></a>
                 <div class="content">
-                    <h3>Documentation</h3>
+                    <h2>Documentation</h2>
                     <p>Read documentation for using and developing caMicroscope.</p>
-                    <a target="_blank" href="https://camicroscope.github.io/docs/" class="button">More</a>
+                    <a target="_blank" href="https://camicroscope.github.io/docs/" class="button" aria-label="Visit Documentation Page">More</a>
                 </div>
             </section>
         </div>

diff --git a/apps/signup/signup.js b/apps/signup/signup.js
@@ -14,7 +14,7 @@ function addUser(){
   if (email === '') {
     emailErr.textContent = 'Please enter your email';
   } else if (!(/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/.test(email))) {
-    emailErr.textContent = 'Please enter a valid email';
+    emailErr.textContent = 'Please enter a valid email address. For example: [email protected]';
   }
 
 
@@ -119,4 +119,4 @@ $(window).on('load', function() {
 function loginPage(){
   const url = "/login.html";
   window.location.href = url;
-}
+}
diff --git a/apps/table.html b/apps/table.html
@@ -25,7 +25,7 @@
 	<script src="./loader/loader.js"></script>
 	<script src="./loader/chunked_upload.js"></script>
 	<script src="https://apis.google.com/js/api.js"></script>
-	<title>CaMicroscope Data Table</title>
+	<title>caMicroscope - Slides Data Table</title>
 
 	<script src="https://code.jquery.com/jquery-3.4.1.min.js"
 		></script>
@@ -109,7 +109,7 @@ <h1 class="h1">caMicroscope</h1>
                     </div>
                     <div class="search-box float-left form-group d-md-inline-flex mb-4 mx-md-1">
                         <div class="w-sm-50 pl-md-2 pt-2">
-                        <select id='entries' class="select form-control">
+                        <select id='entries' class="select form-control" aria-labelledby="slides-per-page">
                             <option value="10" selected>10 slides/page</option>
                             <option value="20">20 slides/page</option>
                             <option value="40">40 slides/page</option>
@@ -132,7 +132,7 @@ <h1 class="h1">caMicroscope</h1>
             <div class="d-md-inline-flex" style="width:20%; margin-right: 30px;">
                 <div class="pl-md-2 pt-2">
                     <button type="button" data-bs-toggle="modal" data-bs-target="#dicom"
-                        class="btn btn2 btn-success float-right w-md-100" style="background-color: 1C5B5D; padding: 7px; margin-right: 5px;" onclick="setDicomParams();"> <i
+                        class="btn btn2 btn-success float-right w-md-100" style="background-color: #1C5B5D; padding: 7px; margin-right: 5px;" onclick="setDicomParams();"> <i
                             class="fas fa-server"></i>
                         <span class="ml-2">&nbsp;DICOM</span> </button>
                 </div>
@@ -210,12 +210,12 @@ <h5 class="modal-title" id="title-of-dialog">Upload New Slide</h5>
                             <div class="alert alert-info" role="alert">
 
                                 <h3>Steps for uploading.</h3>
-                                <ul>
+                                <ol>
                                     <li>Select the file you wish to upload. The <b>Token</b> field should be automatically populated .</li>
                                     <li>Enter the desired filename, including its extension, for the destination file.</li> 
-                                    <li>Click on the <b><i class="fas fa-arrow-right"></i></b> button to preview the slide.</li> 
+                                    <li>Click on the <b><i class="fas fa-arrow-right"></i>Preview Slide</b> button to preview the slide.</li> 
                                     <li>Click on <b>Finish Upload</b> to complete the process and post the slide to caMicroscope.</li> 
-                                </ul>
+                                </ol>
                             </div>
                             <div>
                                 <form id="upload-form">
@@ -262,7 +262,7 @@ <h3>Steps for uploading.</h3>
                                     </div>
                                     <div class="text-center" id="controlButtons">
                                         <button class="btn btn-primary" type="button" id="finish_btn" style="display: none;"
-                                            value="Finish Upload" onclick="validateForm(finishUpload)"><i class="fas fa-arrow-right"></i></button>
+                                            value="Finish Upload" onclick="validateForm(finishUpload)"><i class="fas fa-arrow-right"></i>Preview Slide</button>
                                         <button class="btn btn-success" type="button" id="post_btn" value="Post"
                                             onclick="validateForm(PostBtn)">Finish Upload</button>
                                     </div>

diff --git a/apps/table.js b/apps/table.js
@@ -315,28 +315,28 @@ function initialize() {
 
                   const btn = `<div id='open-delete'>
                 <button class="btn btn-primary btn-sm" data-id='${sanitize(rs[0])}' onclick='openView(this)'>Open</button>
-                <button type='button' class='btn btn-primary btn-sm DownloadButton' id='downloadBtn' data-id='${sanitize(rs[0])}' onclick='downloadSlide(this)'>
+                <button  aria-label="Download" type='button' class='btn btn-primary btn-sm DownloadButton' id='downloadBtn' data-id='${sanitize(rs[0])}' onclick='downloadSlide(this)'>
                 <i class='fas fa-download' ></i>
                 </button>
                 ${slideDeleteRequests[counter] && slideDeleteRequests[counter].slideDetails &&
                   slideDeleteRequests.find((o) => o.slideDetails.slideId === rs[0]) ?
                   `
                     ${slideDeleteRequests.find((o) => o.requestedBy === sanitize(getUserId())) ?
                     `
-                        <button type='button' class='btn btn-danger btn-sm DelButton' id='deleteBtn' data-id='${sanitize(rs[0])}' data-name='${sanitize(rs[1])}' onclick='deleteSld(this)' data-reqid='${slideDeleteRequests.find((o) => o.slideDetails.slideId === rs[0]) ? slideDeleteRequests.find((o) => o.slideDetails.slideId === rs[0])._id.$oid : ''}' data-filename='${sanitize(filename)}' data-toggle='modal'>
+                        <button aria-label="Delete"  type='button' class='btn btn-danger btn-sm DelButton' id='deleteBtn' data-id='${sanitize(rs[0])}' data-name='${sanitize(rs[1])}' onclick='deleteSld(this)' data-reqid='${slideDeleteRequests.find((o) => o.slideDetails.slideId === rs[0]) ? slideDeleteRequests.find((o) => o.slideDetails.slideId === rs[0])._id.$oid : ''}' data-filename='${sanitize(filename)}' data-toggle='modal'>
                           Cancel Delete Request <i class='fas fa-trash-alt' ></i>
                         </button>
                       ` :
                     `
-                        <button disabled type='button' class='btn btn-danger btn-sm tooltipCustom' id='deleteBtn'>
+                        <button aria-label="Delete"  disabled type='button' class='btn btn-danger btn-sm tooltipCustom' id='deleteBtn'>
                           <span class="tooltiptextCustom p-1">Delete requested by ${slideDeleteRequests.find((o) => o.slideDetails.slideId === rs[0]) ? slideDeleteRequests.find((o) => o.slideDetails.slideId === rs[0]).requestedBy : ''}</span>
                           Delete Requested <i class='fas fa-trash-alt' ></i>
                         </button>
                       `
                   }
                   ` :
                   `
-                    <button type='button' class='btn btn-danger btn-sm DelButton' id='deleteBtn' data-id='${sanitize(rs[0])}' data-name='${sanitize(rs[1])}' onclick='deleteSld(this)' data-filename='${sanitize(filename)}' data-toggle='modal'>
+                    <button aria-label="Delete" type='button' class='btn btn-danger btn-sm DelButton' id='deleteBtn' data-id='${sanitize(rs[0])}' data-name='${sanitize(rs[1])}' onclick='deleteSld(this)' data-filename='${sanitize(filename)}' data-toggle='modal'>
                       ${permissions.slide.delete == true ? '' : 'Request Deletion'} <i class='fas fa-trash-alt' ></i>
                     </button>
                   `

diff --git a/apps/viewer/dataloaders.js b/apps/viewer/dataloaders.js
@@ -97,15 +97,26 @@ function layersLoader() {
       console.error(error);
     });
   }
+
+  // visualization
+  function visualization() {
+    $CAMIC.store.findMark($D.params.slideId).then(function(layers) {
+      $D.visualizations = [...layers.map(covertToVisualization)];
+      visualizationLayerItems($D.visualizations);
+    }).catch(function(error) {
+      $UI.message.addError('Loading visualizations is Error');
+      console.error(error);
+    });
+  }
+
   var checkCoreIsReady = setInterval(function() {
-    if ($UI.layersViewer && $UI.layersViewerMinor) {
+    if ($UI.layersViewer && $UI.layersViewerMinor && $UI.visualizationViewer) {
       clearInterval(checkCoreIsReady);
       loadingHumanOverlayers();
       loadingRulerOverlayers();
       loadingHeatmapOverlayers();
       loadingComputerOverlayers();
+      visualization();
     }
   }, 500);
 }
-
-