camicroscope · birm · Feb 4, 2025 · Mar 27, 2024 · Mar 29, 2024 · Mar 29, 2024
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>
 
@@ -38,9 +38,28 @@
 	<link rel="stylesheet" href="./table.css" />
   <link rel="stylesheet" href="./info.css" />
 	<link rel="shortcut icon" type="image/x-icon" href="/apps/landing/favicon.png">
+  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+
+<style>
+    .skip-to-content {
+        position: absolute;
+        top: -40px;
+        left: 0;
+        background: #212529;
+        color: white;
+        padding: 8px;
+        z-index: 100;
+        transition: top 0.3s;
+    }
+    .skip-to-content:focus {
+        top: 0;
+    }
+</style>
+
 </head>
 
 <body>
+	<a href="#main-content" class="skip-to-content">Skip to main content</a>
 	<div class="page-container">
 	<div>
 		<nav class="navbar navbar-expand-lg navbar-dark fixed-top bg-dark" style="position: sticky; margin-top: -4em;">
@@ -70,12 +89,13 @@
 			</div>
 		</nav>
 
-	<div class="header text-center text-white bg-info p-4">
+	<main id="main-content">	
+	<div class="header text-center text-white bg-dark p-4">
 		<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>
@@ -103,6 +123,7 @@ <h4 class="card-title text-center">Synopsis</h4><hr class="mt-0">
 							</div>
 						 </div>
 						</div>
+
 						<div class="alert alert-info" role="alert">
 
 							<h4 style="text-align:center">Annotations</h4><hr class="mt-0">
@@ -151,6 +172,8 @@ <h3 class="text-center h3 mb-2" style="margin-top:8px;margin-bottom:10px;">Infor
 	</div>
 </div>
 </div>
+</main>
+
 
 <!-- footer -->
 <footer id="footer-layout"></footer>
@@ -207,11 +230,37 @@ <h3 class="text-center h3 mb-2" style="margin-top:8px;margin-bottom:10px;">Infor
 	else{
 		heatdisp="<i class='fas fa-check'  style='color:green;'></i>"
 	}
-	var button = `<td>	<button class=\"btn btn-primary\" data-id='${allSlides.length}' onclick='openDetails(this)'>Details</button></td>`
-	var markup = "<tr><td>"+JSONdata.id+"</td><td>"+JSONdata.name+"</td><td>"+annodisp+"</td><td>"+heatdisp+"</td>"+button+"</tr>"
+	var button = `<td>	<button class=\"btn btn-primary btn-sm\" data-id='${allSlides.length}' onclick='openDetails(this)'>Details</button></td>`
+	const visualization_button  = `<td>
+                <button class="btn btn-success btn-sm" data-id='${JSONdata.id}' onclick='openView(this)'>VisualGraph</span></button>
+                </button></td>`
+	var markup = "<tr><td>"+JSONdata.id+"</td><td>"+JSONdata.name+"</td><td>"+annodisp+"</td><td>"+heatdisp+"</td><td>"+button+visualization_button+"</td></tr>"
 	table.append(markup);
 }
 
+function openView(e) {
+const oid = e.dataset.id;
+console.log(oid);
+  if (oid) {
+	window.location.href = `./visualization-dashboard.html?slideId=${sanitize(oid)}`;
+  } else {
+    alert('No Data Id');
+  }
+}
+
+function sanitize(string) {
+  string = string || '';
+  const map = {
+    '&': '&amp;',
+    '<': '&lt;',
+    '>': '&gt;',
+    '"': '&quot;',
+    '\'': '&#x27;',
+    '/': '&#x2F;',
+  };
+  const reg = /[&<>"'/]/ig;
+  return string.replace(reg, (match) => (map[match]));
+}
 function openDetails(tag){
 	document.getElementById('detail-dialog').style.display = 'block';
 	document.getElementById('detail-dialog').style.opacity = '1';
@@ -229,9 +278,9 @@ <h3 class="text-center h3 mb-2" style="margin-top:8px;margin-bottom:10px;">Infor
 	table.append(content);
 	addAnnotations(allSlides[count].annotations);
 	addHeatmaps(allSlides[count].heatmap);
-	console.log(allSlides[count]);
+	console.log(allSlides[count],count);
 }
-
+ 
 function addAnnotations(content){
 	if(content.length===0){
 		return;
@@ -441,7 +490,7 @@ <h3 class="text-center h3 mb-2" style="margin-top:8px;margin-bottom:10px;">Infor
 						addbody(JSONdata);
 					});
 				});
-						// console.log(JSONdata);
+					 // console.log(JSONdata);
 			}
 	});
 }

diff --git a/apps/batchloader/batchloader.html b/apps/batchloader/batchloader.html
@@ -6,7 +6,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta
       name="viewport"
-      content="width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
+      content="width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=2.0"
     />
     <link
       rel="stylesheet"

diff --git a/apps/common.css b/apps/common.css
@@ -12,12 +12,6 @@
   margin: 0;
 }
 
-#footer-layout hr {
-  border-bottom-color: #ffffff;
-  padding: 0;
-  margin: 0;
-}
-
 #footer-layout {
   color: whitesmoke;
   text-align: left;
@@ -29,17 +23,17 @@
   color: whitesmoke;
 }
 
-.company-name {
+.report-link a,
+.company-name a {
   color: #e5c1ea;
 }
 
-.company-name a {
+.report-link a:hover,
+.company-name a:hover {
   color: #e5c1ea;
+  text-decoration: none;
 }
 
-.company-name:hover {
-  color: #d5c1ea;
-}
 #footer-layout strong,
 #footer-layout b {
   color: #ffffff;

diff --git a/apps/dev-workbench/workbench.css b/apps/dev-workbench/workbench.css
@@ -67,3 +67,20 @@
     margin-left: 0 !important;
   }
 }
+.navbar .nav-item .options-button {
+  color: #000;
+  border: none;
+}
+
+.focus-visible:focus-visible {
+  outline: 3px solid #000;
+  outline-offset: 2px;
+  box-shadow: 0 0 0 5px rgb(23, 162, 184);
+}
+
+/* For browsers that don't support :focus-visible */
+.focus-visible:focus {
+  outline: 3px solid #000;
+  outline-offset: 2px;
+  box-shadow: 0 0 0 5px rgb(23, 162, 184);
+}
diff --git a/apps/dev-workbench/workbench.html b/apps/dev-workbench/workbench.html
@@ -60,14 +60,31 @@
     <script src="../../common/jszip.min.js"></script>
     <script src="../../common/FileSaver.min.js"></script>
     <script src="../../common/localforage.min.js"></script>
+
+    <style>
+    .skip-to-content {
+        position: absolute;
+        top: -40px;
+        left: 0;
+        background: #212529;
+        color: white;
+        padding: 8px;
+        z-index: 100;
+        transition: top 0.3s;
+    }
+    .skip-to-content:focus {
+        top: 0;
+    }
+    </style>
   </head>
   <body>
+    <a href="#main-content" class="skip-to-content">Skip to main content</a>
     <!--Navbar-->
     <nav
       class="navbar navbar-expand-lg navbar-dark flex-row px-2"
       style="background: rgb(33, 37, 41);"
     >
-      <div style="cursor: pointer;" id="goBack">
+      <div role="button" aria-label="Go back" style="cursor: pointer;" id="goBack" tabindex="0">
         <i data-feather="arrow-left" class="text-white"></i>
       </div>
 
@@ -87,13 +104,14 @@
 
           class="nav-item dropdown"
         >
-          <a
-            class="nav-link dropdown-toggle"
+          <button
+            class="nav-link dropdown-toggle options-button"
             id="navbarDropdownMenuLink"
             data-toggle="dropdown"
             aria-haspopup="true"
             aria-expanded="false"
-            >Options</a
+            aria-label="Options dropdown"
+            >Options</button
           >
           <div
             style="margin-left: -5em;"
@@ -105,20 +123,24 @@
               class="dropdown-item"
               href="#"
               style="display: none;"
-              ><i class="fas fa-file-export"></i>&nbsp;&nbsp;Export</a
+              tabindex="0"
+              role="menuitem"
+              ><i class="fas fa-file-export" aria-hidden="true"></i>&nbsp;&nbsp;Export</a
             >
             <a class="dropdown-item" href="#" onclick="importWork()"
-              ><i class="fas fa-file-import"></i>&nbsp;&nbsp;Import</a
+              tabindex="0" role="menuitem"><i class="fas fa-file-import"></i>&nbsp;&nbsp;Import</a
             >
-            <input type="file" id="importFile" />
+            <input type="file" id="importFile" tabindex="-1" />
             <a
               class="dropdown-item helpButton"
               href="#"
               data-toggle="modal"
               data-target="#helpModal"
               onClick="displayUserGuide()"
+              tabindex="0"
+              role="menuitem"
             >
-              <i class="fas fa-question-circle"></i>
+              <i class="fas fa-question-circle" aria-hidden="true"></i>
               &nbsp;&nbsp;Help/User Guide</a
             >
             </div>
@@ -129,6 +151,7 @@
     </nav>
     <!--/.Navbar-->
 
+    <main id="main-content">
     <div id="headbar">
       <br />
       <div id="headContent" style="font-size: xx-large;">
@@ -165,7 +188,8 @@
                       margin-bottom: -1em;
                     "
                     type="button"
-                    class="btn btn-primary"
+                    class="btn btn-primary focus-visible"
+                    aria-label="Select or create your dataset"
                   >
                     <i data-feather="chevron-right" class="text-white"></i>
                   </button>
@@ -258,7 +282,7 @@ <h4 class="card-title">Select your dataset</h4>
                    style="overflow: hidden;"
                    class="custom-file-label spriteInputLabel"
                    for="spriteInput"
-                   > Choose file
+                   >
                  </label>
                </div>
              </div>
@@ -346,7 +370,6 @@ <h5 class="modal-title" id="labelSelectModalTitle"></h5>
                       for="labelsInput"
                       style="overflow: hidden;"
                     >
-                      Choose
                     </label>
                   </div>
                 </div>
@@ -509,5 +532,7 @@ <h5 class="modal-title" id="helpModalTitle">Help - User Guide</h5>
     <script>
       feather.replace(); // for feather Icons
     </script>
+
+    </main>
   </body>
 </html>
diff --git a/apps/dev-workbench/workbench.js b/apps/dev-workbench/workbench.js
@@ -4,9 +4,25 @@ $(document).ready(function() {
   $('#stepper').show(400);
 });
 
-$('#goBack').click(function() {
-  window.history.back();
-});
+// Unified function for going back
+  function goBack(e) {
+    // Prevent default action for keyboard events
+    if (e && e.preventDefault) {
+      e.preventDefault();
+    }
+    window.history.back();
+  }
+
+// Click event for the back button
+  $('#goBack').on('click', goBack);
+
+  // Keydown event for the back button
+  $('#goBack').on('keydown', function(e) {
+    // Check for both Enter (13) and Space (32) key codes
+    if (e.keyCode === 13 || e.keyCode === 32) {
+      goBack(e);
+    }
+  });
 
 // initialize Step 1
 function dataSelect() {

diff --git a/apps/dicom-connect/table.html b/apps/dicom-connect/table.html
@@ -6,7 +6,7 @@
 	<meta charset='utf-8'>
 	<meta http-equiv='X-UA-Compatible' content='IE=edge'>
 	<meta name='viewport'
-		content='width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no'>
+		content='width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=2.0>
 	<!-- common -->
 	<link rel='stylesheet' type='text/css' media='all' href='../common.css'/>
 	<!-- Check If we're logged in ok, otherwise, log in for us -->

diff --git a/apps/heatmap/heatmap.html b/apps/heatmap/heatmap.html
@@ -5,7 +5,7 @@
 	<meta name="keywords" content="camicroscope, quip" />
     <meta charset='utf-8'>
     <meta http-equiv='X-UA-Compatible' content='IE=edge'>
-    <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no'>
+    <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=2.0>
 
     <title>caMicroscope</title>
 		<!-- google material icons css sheet -->

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;