Merge branch 'develop' into textOverflowreducer

camicroscope · Mar 31, 2024 · f6569e8 · f6569e8
2 parents 7b4c3e2 + 98cf624
commit f6569e8
Show file tree

Hide file tree

Showing 38 changed files with 5,729 additions and 354 deletions.
diff --git a/apps/Info.html b/apps/Info.html
@@ -1,12 +1,16 @@
 <!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'>
 
+	<meta name='viewport'
+		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">
 
@@ -19,6 +23,8 @@
 		integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" 
 		crossorigin="anonymous">
 	<link rel="stylesheet" href="../common/stacktable.css">
+	<!-- common styling -->
+	<link rel="stylesheet" href="./common.css">
 	<style>
 		html,
 		body {
@@ -59,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>
@@ -149,12 +152,15 @@ <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 tags -->
+
+    <!-- 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>

diff --git a/apps/common.css b/apps/common.css
@@ -1,7 +1,54 @@
 .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: #24a9f6;
+}
+
+.company-name a {
+  color: #24a9f6;
+  text-decoration: none;
+}
+
+.company-name:hover {
+  color: #4f5e66;
+  text-decoration: underline;
+}
+#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.html b/apps/dev-workbench/workbench.html
@@ -28,22 +28,22 @@
     />
     <!-- JQuery -->
     <script
-      type="text/javascript"
+
       src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"
     ></script>
     <!-- Bootstrap tooltips -->
     <script
-      type="text/javascript"
+
       src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.4/umd/popper.min.js"
     ></script>
     <!-- Bootstrap core JavaScript -->
     <script
-      type="text/javascript"
+
       src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"
     ></script>
     <!-- MDB core JavaScript -->
     <script
-      type="text/javascript"
+
       src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.19.0/js/mdb.min.js"
     ></script>
     <script src="https://unpkg.com/feather-icons"></script>
@@ -71,22 +71,16 @@
         <i data-feather="arrow-left" class="text-white"></i>
       </div>
 
-<<<<<<< HEAD
       <!-- Navbar brand --> 
 
       <div class="navbar-brand-div flex-grow-1">
-        <span style="cursor: default" class="navbar-brand " > Workbench</span>
+        <span style="cursor: default" class="navbar-brand"> Workbench</span>
 
       </div>
       <div>
 
 
       <ul class="navbar-nav mr-auto px-2">
-=======
-      <!-- Navbar brand -->
-      <span style="cursor: default;" class="navbar-brand"> Workbench</span>
-      <ul class="navbar-nav mr-auto">
->>>>>>> master
         <!-- Dropdown -->
         <li
 
@@ -121,6 +115,7 @@
               href="#"
               data-toggle="modal"
               data-target="#helpModal"
+              onClick="displayUserGuide()"
             >
               <i class="fas fa-question-circle"></i>
               &nbsp;&nbsp;Help/User Guide</a
@@ -239,74 +234,72 @@
         "
       >
         <!-- Cards -->
-        <div class="card" style="max-width: 20em; margin-left:2cm; auto;">
-          <!-- Card content -->
-          <div class="card-body">
-            <!-- Title -->
-            <h4 class="card-title">Select your dataset</h4>
-            <!-- Text -->
-            <p style="text-align: justify;" class="card-text">
-              Select the dataset (.zip) having three files; spritesheet
-              (data.jpg), a binary labels (labels.bin) and the classes
-              (labelnames.csv) from your local storage.
-            </p>
-            <div class="input-group">
-              <div class="custom-file">
-                <input
-                  type="file"
-                  id="spriteInput"
-                  accept=".zip"
-                  style="max-width: 98%;"
-                />
-                <label
-                  style="overflow: hidden;"
-                  class="custom-file-label spriteInputLabel"
-                  for="spriteInput"
-                  >Choose file
-                </label>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div style="height: 1em; margin-left:5cm; padding: 2em 0; font-size: large;">
-          <b> OR</b>
-        </div>
-        <div class="card" style="max-width: 20em; margin-left:2cm; auto;">
-          <!-- Card content -->
-          <div class="card-body">
-            <!-- Title -->
-            <h4 class="card-title">Create your own</h4>
-            <!-- Text -->
-            <p class="card-text" style="text-align: justify;">
-              Build your own spritesheet using labeling from the caMicroscope
-              instance or browsing your own dataset.
-            </p>
-            <!-- Buttons -->
-            <div style="text-align: center;">
-              <button
-                data-toggle="modal"
-                data-target="#labelsUploadModal"
-                style="border-radius: 5px; font-size: 0.9em;"
-                class="btn btn-primary px-2"
-                onclick="resetLabelsModal()"
-              >
-                caM Labels
-              </button>
-              <button
-                style="border-radius: 5px; font-size: 0.9em;"
-                class="btn btn-primary px-2"
-                data-toggle="modal"
-                data-target="#labelsUploadModal"
-                onclick="resetLabelsModal(true)"
-              >
-                Custom Data
-              </button>
-            </div>
-          </div>
-        </div>
-        <!-- Cards -->
-      </div>
-    </div>
+   <div class="container">
+     <div class="row ">
+       <div class="col-12 col-lg-5 ">
+         <div class="card" style="max-width: 20em; margin:auto;">
+           <div class="card-body">
+             <h4 class="card-title">Select your dataset</h4>
+             <p style="text-align: justify" class="card-text">
+               Select the dataset (.zip) having three files; spritesheet (data.jpg),
+               a binary labels (labels.bin) and the classes (labelnames.csv)
+               from your local storage.
+             </p>
+             <div class="input-group">
+               <div class="custom-file">
+                 <input
+                   type="file"
+                   id="spriteInput"
+                   accept=".zip"
+                   style="max-width: 98%;"
+                 />
+                 <label
+                   style="overflow: hidden;"
+                   class="custom-file-label spriteInputLabel"
+                   for="spriteInput"
+                   > Choose file
+                 </label>
+               </div>
+             </div>
+           </div>
+         </div>
+       </div>
+       <div class="col-12 col-lg-2 d-flex align-items-center justify-content-center">
+           <b>OR</b>
+       </div>
+       <div class="col-12 col-lg-5 ">
+         <div class="card" style="max-width: 20em; margin:auto;">
+           <div class="card-body">
+             <h4 class="card-title">Create your own</h4>
+             <p class="card-text" style="text-align: justify;">
+               Build your own spritesheet using labeling from the caMicroscope
+               instance or browsing your own dataset.
+             </p>
+             <div style="text-align: center;">
+               <button
+                 data-toggle="modal"
+                 data-target="#labelsUploadModal"
+                 style="border-radius: 5px; font-size: 0.9em;"
+                 class="btn btn-primary px-2"
+                 onclick="resetLabelsModal()"
+               >
+                 caM Labels
+               </button>
+               <button
+                 style="border-radius: 5px; font-size: 0.9em;"
+                 class="btn btn-primary px-2"
+                 data-toggle="modal"
+                 data-target="#labelsUploadModal"
+                 onclick="resetLabelsModal(true)"
+               >
+                 Custom Data
+               </button>
+             </div>
+           </div>
+         </div>
+       </div>
+     </div>
+   </div>
 
     <!-- Labels/customData Upload Modal -->
     <div

diff --git a/apps/dev-workbench/workbench.js b/apps/dev-workbench/workbench.js
@@ -494,14 +494,14 @@ function importWork() {
 }
 
 // getting markdown from readme.md and parsing/displaying it as user-guide
-$('.helpButton').click(function() {
+function displayUserGuide() {
   fetch('./readme.md').then((res) => res.blob()).then((blob) => {
     let f = new FileReader();
     f.onload = function(e) {
-      $('#helpModal .modal-body').html(marked(e.target.result));
+      $('#helpModal .modal-body').html(marked.marked(e.target.result));
       $('#helpModal .modal-body td, #helpModal .modal-body th')
           .css('border', '2px solid #dddddd').css('padding', '5px');
     };
     f.readAsText(blob);
   });
-});
+}
diff --git a/apps/heatmap/heatmap.html b/apps/heatmap/heatmap.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html  lang="en">
 
 <head>
 	<meta name="keywords" content="camicroscope, quip" />

diff --git a/apps/heatmap/init.js b/apps/heatmap/init.js
@@ -60,6 +60,10 @@ function initCore() {
 
   $CAMIC.loadImg(async function(e) {
     Loading.open(document.body, `Loading Data ...`);
+    $CAMIC.viewer.addHandler('open-failed', function(e) {
+      console.error(e.message, e);
+      redirect($D.pages.table, e.message, 5);
+    });
     // image loaded
     if (e.hasError) {
       $UI.message.addError(e.message);
@@ -355,7 +359,7 @@ function initUIcomponents() {
         value: 'bugs',
         type: 'btn',
         callback: ()=>{
-          window.open('https://goo.gl/forms/mgyhx4ADH0UuEQJ53', '_blank').focus();
+          window.open('https://github.com/camicroscope/caMicroscope/issues', '_blank').focus();
         },
       },
 

diff --git a/apps/labeling/labeling.html b/apps/labeling/labeling.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html  lang="en">
 
 <head>
 	<meta name="keywords" content="camicroscope, quip" />

diff --git a/apps/labeling/labeling.js b/apps/labeling/labeling.js
@@ -77,6 +77,10 @@ function initCore() {
         defaultText: `Slide: ${$D.params.data.name}`,
       });
     }
+    $CAMIC.viewer.addHandler('open-failed', function(e) {
+      console.error(e.message, e);
+      redirect($D.pages.table, e.message, 5);
+    });
   });
 
   $CAMIC.viewer.addHandler('open', function() {
@@ -146,7 +150,7 @@ function initCore() {
       value: 'bugs',
       type: 'btn',
       callback: ()=>{
-        window.open('https://goo.gl/forms/mgyhx4ADH0UuEQJ53', '_blank').focus();
+        window.open('https://github.com/camicroscope/caMicroscope/issues', '_blank').focus();
       },
     },
     ],