camicroscope · birm · May 2, 2024 · Oct 20, 2023 · Oct 25, 2023 · Dec 6, 2023
diff --git a/.github/workflows/axe-a11y-check.yml b/.github/workflows/axe-a11y-check.yml
@@ -0,0 +1,31 @@
+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: Run axe
+        run: |
+          npm install -g @axe-core/cli
+          sleep 90
+          axe http://127.0.0.1:8080 --exit
diff --git a/.github/workflows/test.yml b/.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
diff --git a/HISTORY.md b/HISTORY.md
diff --git a/apps/Info.html b/apps/Info.html
@@ -1,40 +1,30 @@
 <!DOCTYPE html>
-<html>
+<html  lang="en">
 
 <head>
 	<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, 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='../css/style.css'/> -->
 	<!-- Check If we're logged in ok, otherwise, log in for us -->
 	<!-- Font Awesome -->
     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
 
-	<script src='../common/authChecker.js'></script>
-	<script>
-		__auth_check(1)
-	</script>
-
-	<script src='../core/Store.js'></script>
-	<script src='../common/util.js'></script>
-	<script src='../common/ajv.js'></script>
-	<script src='../components/loading/loading.js'></script>
-	<script src="./loader/loader.js"></script>
-	<script src="./loader/chunked_upload.js"></script>
 	<title>CaMicroscope Data Table</title>
 
-	<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
-		integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
-		crossorigin="anonymous"></script>
+	<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"	integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"	crossorigin="anonymous"></script>
 
 	<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" 
 		rel="stylesheet" 
 		integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" 
 		crossorigin="anonymous">
 	<link rel="stylesheet" href="../common/stacktable.css">
+	<!-- common styling -->
+	<link rel="stylesheet" href="./common.css">
 	<style>
 		html,
 		body {
@@ -55,7 +45,7 @@
 	<div>
 		<nav class="navbar navbar-expand-lg navbar-dark fixed-top bg-dark" style="position: sticky; margin-top: -4em;">
 			<div class="container-fluid">
-				<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+				<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation" style="width: 100%;">
 					<span class="navbar-toggler-icon"></span>
 					</button>
 					<div class="collapse navbar-collapse" id="navbarSupportedContent" >
@@ -75,17 +65,14 @@
 							<li class="nav-item link" style="font-family: sans-serif;">
 								<a class="nav-link" href="./signup/signup.html"> <i class="fas fa-user-plus"></i> Signup</a>
 							</li>
-							<li class="nav-item link" style="font-family: sans-serif;">
-								<a class="nav-link" target="_blank" href="https://docs.google.com/forms/d/e/1FAIpQLScL91LxrpAZjU88GBZP9gmcdgdf8__uNUwhws2lzU6Lr4qNwA/viewform"> <i class="fas fa-comment"></i> Feedback</a>
-							</li>
 						</ul>
 					</div>
 			</div>
 		</nav>
 
 	<div class="header text-center text-white bg-info p-4">
 		<h1 class="h1">caMicroscope</h1>
-		<p>Digital pathology image viewer with support for human/machine generated annotations and markups.</p>
+		<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>
@@ -107,21 +94,24 @@ <h4 class="modal-title" id="title-of-dialog">Slide Information Details</h4>
 			<div class="modal-body">
 				<div>
 					<div id="content">
-						<div class="alert alert-info" role="alert">
-
-							<h4 style="text-align:center">Synopsis</h4><hr style="margin-top:0px;">
-							<table id="detailtable">
-							</table>
+						<div class="card alert alert-info" role="alert">
+						 <div class="card-body">
+							<h4 class="card-title text-center">Synopsis</h4><hr class="mt-0">
+							<div class="table-responsive">
+								<table id="detailtable">
+								</table>
+							</div>
+						 </div>
 						</div>
 						<div class="alert alert-info" role="alert">
 
-							<h4 style="text-align:center">Annotations</h4><hr style="margin-top:0px;">
+							<h4 style="text-align:center">Annotations</h4><hr class="mt-0">
 							<table id="annotationtable">
 							</table>
 						</div>
 						<div class="alert alert-info" role="alert">
 
-							<h4 style="text-align:center">Heatmaps</h4><hr style="margin-top:0px;">
+							<h4 style="text-align:center">Heatmaps</h4><hr class="mt-0">
 							<table id="heatmaptable">
 							</table>
 						</div>
@@ -153,10 +143,6 @@ <h3 class="text-center h3 mb-2" style="margin-top:8px;margin-bottom:10px;">Infor
 		<input id="search-table" type="text" class="form-control" placeholder="Search">
 	</div>
 
-
-
-
-
   <div class="table-responsive" id="summary">
     <table class="table table-striped">
 			<thead id="infothead"></thead>
@@ -166,11 +152,29 @@ <h3 class="text-center h3 mb-2" style="margin-top:8px;margin-bottom:10px;">Infor
 </div>
 </div>
 
-<footer class="text-center text-white bg-dark p-3 mt-2">
-	<p class="p">Copyright © 2021 caMicroscope</p>
-</footer>
+
+<!-- footer -->
+<footer id="footer-layout"></footer>
 </div>
+
+
+    <!-- script to call a footer(layout footer in the common > utils folder) function -->
+<script> insertFooterLayout(); </script>
+
 <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>
+
+<script src='../common/authChecker.js'></script>
+
+<script>
+		__auth_check(1)
+</script>
+
+<script src='../core/Store.js'></script>
+<script src='../common/util.js'></script>
+<script src='../common/ajv.js'></script>
+<script src='../components/loading/loading.js'></script>
+<script src="./loader/loader.js"></script>
+<script src="./loader/chunked_upload.js"></script>
 </body>
 <script>
 

diff --git a/apps/common.css b/apps/common.css
@@ -1,7 +1,52 @@
 .text-in-line {
-	margin: 0 auto;
-	white-space: nowrap;
-	overflow: hidden;
-	text-overflow: ellipsis;
+  margin: 0 auto;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
+/* layout footer styles */
+#footer-layout hr {
+  border-bottom-color: #ffffff;
+  padding: 0;
+  margin: 0;
+}
+
+#footer-layout hr {
+  border-bottom-color: #ffffff;
+  padding: 0;
+  margin: 0;
+}
+
+#footer-layout {
+  color: whitesmoke;
+  text-align: left;
+  padding: 2.5em 4.5em;
+  background-color: #343a40;
+}
+
+#footer-layout p {
+  color: whitesmoke;
+}
+
+.company-name {
+  color: #e5c1ea;
+}
+
+.company-name a {
+  color: #e5c1ea;
+}
+
+.company-name:hover {
+  color: #d5c1ea;
+}
+#footer-layout strong,
+#footer-layout b {
+  color: #ffffff;
+}
+
+@media (max-width: 768px) {
+  #footer-layout {
+    padding: 2em 2.5em;
+  }
+}
diff --git a/apps/dev-workbench/workbench.css b/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,30 @@
   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;
+  }
+}