Merge branch 'develop' into ft/user-registration-validation

.github/workflows/axe-a11y-check.yml

@@ -0,0 +1,33 @@
+name: axe
+on:
+  push:
+    branches:
+      - master
+      - develop
+  pull_request:
+    branches:
+      - master
+      - develop
+jobs:
+  axe:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [20.x]
+    steps:
+      - uses: actions/checkout@v2
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v1
+        with:
+          node-version: ${{ matrix.node-version }}
+      - run: npm install
+      - 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 --chromedriver-path $(npm root -g)/chromedriver/bin/chromedriver --exit

.github/workflows/stale_issues.yml

@@ -0,0 +1,17 @@
+name: 'Stale Issues and PRs'
+on:
+  schedule:
+    - cron: '30 1 * * *'
+
+jobs:
+  stale:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/stale@v9
+        with:
+          stale-issue-message: 'This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.'
+          stale-pr-message: 'This PR is stale because it has been open 45 days with no activity.'
+          close-issue-message: 'This issue was closed because it has been stalled for 5 days with no activity.'
+          days-before-stale: 30
+          days-before-close: 5
+          days-before-pr-close: -1

.github/workflows/test.yml

@@ -0,0 +1,31 @@
+
+
+name: Run Tests
+
+on:
+  pull_request:
+    branches:
+      - master
+      - develop
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v2
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: '16.x'  
+
+      - name: Install dependencies and ESLint
+        run: |
+          npm install
+          npm install eslint eslint-config-google
+
+      - name: Run Jest tests and linting
+        run: |
+          npm run lint && npm test

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
 

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,7 +172,7 @@ <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>
@@ -209,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';
@@ -231,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;
@@ -443,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);
 			}
 	});
 }

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"

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,19 +23,17 @@
   color: whitesmoke;
 }
 
-.company-name {
-  color: #24a9f6;
+.report-link a,
+.company-name a {
+  color: #e5c1ea;
 }
 
-.company-name a {
-  color: #24a9f6;
+.report-link a:hover,
+.company-name a:hover {
+  color: #e5c1ea;
   text-decoration: none;
 }
 
-.company-name:hover {
-  color: #4f5e66;
-  text-decoration: underline;
-}
 #footer-layout strong,
 #footer-layout b {
   color: #ffffff;

apps/dev-workbench/workbench.css

@@ -22,7 +22,7 @@
   display: flex;
   flex-direction: row;
 }
-.navbar-brand{
+.navbar-brand {
   margin-right: 10rem !important;
 }
 /* All display none */
@@ -40,22 +40,47 @@
   display: none;
 }
 
-
-#goBack{
+#goBack {
   display: flex;
   margin: 0 1rem;
 }
 @media only screen and (max-width: 551px) {
   nav {
     flex-direction: column;
   }
-  
+
   nav ul {
     flex-direction: column;
   }
-  
+
   nav ul li {
     margin: 10px 0;
   }
 }
 
+.dropdown-menu {
+  margin-left: -5em !important;
+}
+
+@media (max-width: 425px) {
+  .dropdown-menu {
+    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);
+}