diff --git a/apps/Info.html b/apps/Info.html
index 1605832ab..b614a48cc 100644
--- a/apps/Info.html
+++ b/apps/Info.html
@@ -1,12 +1,12 @@
 <!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 -->
@@ -35,6 +35,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 {
@@ -75,9 +77,6 @@
 							<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>
@@ -85,7 +84,7 @@
 
 	<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>
@@ -166,10 +165,13 @@ <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/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>
 </body>
 <script>
diff --git a/apps/common.css b/apps/common.css
index 2f1ffdb7a..51595599e 100644
--- 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
index 99bc341c9..828362f2a 100644
--- 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
index f10d162ed..2a408cd2c 100644
--- 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
index 1047da64b..43dd0ae1c 100644
--- 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
index 3298967ee..ea25a642c 100644
--- 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
index 1e8298122..55a3ba597 100644
--- 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
index 67ef30f6a..50899f0bc 100644
--- 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();
       },
     },
     ],
diff --git a/apps/landing/landing.html b/apps/landing/landing.html
index e442429ca..9b7e64f7f 100644
--- a/apps/landing/landing.html
+++ b/apps/landing/landing.html
@@ -8,31 +8,20 @@
         integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0"
         crossorigin="anonymous">
     <link rel="stylesheet" href="./main.css" />
+    <!-- common styling -->
+	<link rel='stylesheet' type='text/css' media='all' href='../common.css'/>
     <link rel="shortcut icon" type="image/x-icon" href="favicon.png">
 
 </head>
 <body>
-
-
-
-<!-- Header -->
-
-<!-- <header id="header" >
-    <nav id= "nav" class="navbar navbar-expand-md navbar-dark fixed-top bg-dark" style="position: sticky;">
-        <button style="display:none;" class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
-			<span class="navbar-toggler-icon"></span>
-		</button>
-       <ul>
-            <li><a href="landing.html" class="link" style="color: white;">Home</a></li>
-            <li><a href="../table.html"  class="link">Slides</a></li>
-            <li style="float: right;"><a href="/apps/signup/signup.html"  class="link">Signup</a></li>
-            <li style="float: right;"><a target="_blank" href="https://docs.google.com/forms/d/e/1FAIpQLScL91LxrpAZjU88GBZP9gmcdgdf8__uNUwhws2lzU6Lr4qNwA/viewform"  class="link">Feedback</a></li>
-
-        </ul>
-
-    </nav>
-
-</header> -->
+  
+<!-- loading animation -->
+<div class="main-site">
+    <!-- adding css -->
+    <div class="main-content" role="main" id="mainContent">
+        <div class="loader loader-black loader-5"></div>
+    </div>
+</div>
 
 <nav class="navbar navbar-expand-lg navbar-dark fixed-top bg-dark" style="position: sticky; margin-top: -4em;">
     <div class="container-fluid">
@@ -57,7 +46,7 @@
                         <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>
+                        <a class="nav-link" target="_blank" href="https://github.com/camicroscope/caMicroscope/issues"> <i class="fas fa-comment"></i> Feedback</a>
                     </li>
                 </ul>
             </div>
@@ -81,13 +70,13 @@ <h2>caMicroscope</h2>
 
         <div class="content">
             <p>caMicroscope is a tool to view, annotate, and analyze biomedical images.</p>
-            <a href="#" class="image fit"><img src="./banner1.jpg" alt="" /></a>
+            <a href="#" class="image fit" aria-label="Reload Home Page"><img src="./banner1.jpg" alt="" /></a>
 
         </div>
 
         <div class="posts" style="margin-top: 5em;">
             <section class="post">
-                <a href="../table.html" class="image"><img src="./camic.jpg" alt=""/></a>
+                <a href="../table.html" class="image" aria-label="Visit Slides Page"><img src="./camic.jpg" alt=""/></a>
                 <div class="content">
                     <h3>caMicroscope</h3>
                     <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>
@@ -95,7 +84,7 @@ <h3>caMicroscope</h3>
                 </div>
             </section>
             <section class="post">
-                <a target="_blank" href="https://camicroscope.github.io/docs/" class="image"><img src="./code.jpg" alt=""/></a>
+                <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>
                     <p>Read documentation for using and developing caMicroscope.</p>
@@ -109,32 +98,21 @@ <h3>Documentation</h3>
 
 
 <!-- Footer -->
-
-<footer id="footer">
-
-    <div class="content">
-
-        <div class="inner">
-
-
-
-            <section class="about" style="margin-left:0cm">
-
-                U24 CA18092401A1, <b>Tools to Analyze Morphology and Spatially Mapped Molecular Data</b>
-            </section>
-
-
-        </div>
-
-    </div>
-
-</footer>
+<footer id="footer-layout"></footer>
 
 
 
 
 
 <!-- Scripts -->
+<!-- loading animation script -->
+<script>
+    var loader= document.querySelector('.loader');
+    window.addEventListener('load', function() {
+        loader.style.display = 'none';
+    });
+</script>
+
 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>
 <script src="./jquery.min.js"></script>
 
@@ -145,9 +123,10 @@ <h3>Documentation</h3>
 <script src="./skel.min.js"></script>
 
 <script src="./util.js"></script>
+<script src="../../common/util.js"></script>
 
-
-
+    <!-- script to call a footer(layout footer in the common > utils folder) function -->
+<script> insertFooterLayout(); </script>
 </body>
 
 
diff --git a/apps/landing/main.css b/apps/landing/main.css
index 0fe5b3598..6473e3267 100644
--- a/apps/landing/main.css
+++ b/apps/landing/main.css
@@ -9,6 +9,45 @@
 
 /* Reset */
 
+/* addind loader animation */
+.loader {
+    width: 50px;
+    height: 50px;
+    border-radius: 50%;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+}
+.loader,
+.loader:before,
+.loader:after {
+    animation: 1s infinite ease-in-out;
+}
+.loader:before,
+.loader:after {
+    width: 100%; 
+    height: 100%;
+    border-radius: 50%;
+    position: absolute;
+    top: 0;
+    left: 0;
+}
+
+.loader-black { background-color: #9b3c8b; }
+
+/* Loader 5 */
+
+.loader-5 {
+    animation: loader5 1s infinite linear;
+}
+
+    @keyframes loader5 {
+        0% {   transform: rotate(0deg); border-radius: 50%; }
+        50% {  transform: rotate(90deg); border-radius: 0%; }
+        100% { transform: rotate(180deg); border-radius: 50%; }
+    }
+
 
 	html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
 		margin: 0;
@@ -2429,6 +2468,12 @@
 			display: -webkit-flex;
 			display: -ms-flex;
 			display: flex;
+			transition: background-color 0.3s ease, transform 0.3s ease;
+		}
+
+		.posts .post:hover {
+			background-color: #f0f0f0; 
+			transform: translateY(-10px); 
 		}
 
 			.posts .post .image {
diff --git a/apps/mini/dataloaders.js b/apps/mini/dataloaders.js
new file mode 100644
index 000000000..de65438f5
--- /dev/null
+++ b/apps/mini/dataloaders.js
@@ -0,0 +1,111 @@
+
+
+function FormTempaltesLoader() {
+  function loadingFormTemplates() {
+    $CAMIC.store.findTemplate()
+    //
+        .then(function(temps) {
+          // get templates data
+          $D.templates = temps;
+        })
+    //
+        .catch(function(error) {
+          // templates schema
+
+          console.error(error);
+        })
+    //
+        .finally(function() {
+          if ($D.templates) {
+            // load UI
+          } else {
+            // set message
+            $UI.message.addError('Loading Templates is Error');
+          }
+        });
+  }
+
+  var checkCoreIsReady = setInterval(function() {
+    if ($CAMIC) {
+      clearInterval(checkCoreIsReady);
+      // load data
+      loadingFormTemplates();
+    }
+  }, 500);
+}
+
+function layersLoader() {
+  // human
+  function loadingHumanOverlayers() {
+    $CAMIC.store.findMarkTypes($D.params.slideId, 'human').then(function(layers) {
+      // convert part not nesscary
+      $D.humanlayers = [...layers.map(covertToHumanLayer)];
+
+      // add data and create ui item
+      addHumanLayerItems();
+    }).catch(function(error) {
+      // overlayers schema
+      $UI.message.addError('Loading Human Layers is Error');
+      console.error(error);
+    });
+  }
+  // ruler
+  function loadingRulerOverlayers() {
+    $CAMIC.store.findMarkTypes($D.params.slideId, 'ruler').then(function(layers) {
+      // convert part not nesscary
+      $D.rulerlayers = [...layers.map(covertToRulerLayer)];
+
+      // add data and create ui item
+      addRulerLayerItems();
+    }).catch(function(error) {
+      // overlayers schema
+      $UI.message.addError('Loading Ruler Layers is Error');
+      console.error(error);
+    });
+  }
+  // heatmap
+  function loadingHeatmapOverlayers() {
+    $CAMIC.store.findHeatmapType($D.params.slideId).then(function(layers) {
+      $D.heatmaplayers = [];
+      // convert and load heatmap layer
+      for (let i = 0; i < layers.length; i++) {
+        const item = layers[i].provenance.analysis;
+        $D.heatmaplayers.push({id: item.execution_id,
+          name: item.execution_id,
+          typeId: 'heatmap',
+          typeName: 'heatmap',
+        });
+      }
+      // add data and create ui item
+      addHeatmapLayerItems();
+    }).catch(function(error) {
+      // overlayers schema
+      $UI.message.addError('Loading heatmap Overlayers is Error');
+      console.error(error);
+    });
+  }
+
+  // segmentation
+  function loadingComputerOverlayers() {
+    $CAMIC.store.findMarkTypes($D.params.slideId, 'computer').then(function(layers) {
+      // convert part not nesscary
+      $D.computerlayers=[...layers.map(covertToCumputerLayer)];
+      // add data and create ui item
+      addComputerLayerItems();
+    }).catch(function(error) {
+      $UI.message.addError('Loading Computer Layers is Error');
+      console.error(error);
+    });
+  }
+  var checkCoreIsReady = setInterval(function() {
+    if ($UI.layersViewer && $UI.layersViewerMinor) {
+      clearInterval(checkCoreIsReady);
+      loadingHumanOverlayers();
+      loadingRulerOverlayers();
+      loadingHeatmapOverlayers();
+      loadingComputerOverlayers();
+    }
+  }, 500);
+}
+
+
diff --git a/apps/mini/init.js b/apps/mini/init.js
new file mode 100644
index 000000000..7dbd46172
--- /dev/null
+++ b/apps/mini/init.js
@@ -0,0 +1,959 @@
+// CAMIC is an instance of camicroscope core
+// $CAMIC in there
+let $CAMIC = null;
+let tracker;
+let $minorCAMIC = null;
+// for all instances of UI components
+const $UI = new Map();
+
+const $D = {
+  pages: {
+    home: '../table.html',
+    table: '../table.html',
+  },
+  params: null, // parameter from url - slide Id and status in it (object).
+  overlayers: null, // array for each layers
+  templates: null, // json schema for prue-form
+  segments: [],
+};
+
+window.addEventListener('keydown', (e) => {
+  if (!$CAMIC || !$CAMIC.viewer) return;
+  const key = e.key;
+  // escape key to close all operations
+  if ('escape' == key.toLocaleLowerCase()) {
+    magnifierOff();
+    measurementOff();
+    annotationOff();
+    presetLabelOff();
+  }
+
+  // open annotation (ctrl + a)
+  if (e.ctrlKey && 'a' == key.toLocaleLowerCase() && $CAMIC.viewer.canvasDrawInstance) {
+    const li = $UI.toolbar.getSubTool('annotation');
+    eventFire(li, 'click');
+    return;
+  }
+  // open magnifier (ctrl + m)
+  if (e.ctrlKey && 'm' == key.toLocaleLowerCase() && $UI.spyglass) {
+    const li = $UI.toolbar.getSubTool('magnifier');
+    const chk = li.querySelector('input[type=checkbox]');
+    chk.checked = !chk.checked;
+    eventFire(chk, 'change');
+    return;
+  }
+  // open measurement (ctrl + r)
+  if (e.ctrlKey && 'r' == key.toLocaleLowerCase() && $CAMIC.viewer.measureInstance) {
+    e.preventDefault();
+    const li = $UI.toolbar.getSubTool('measurement');
+    const chk = li.querySelector('input[type=checkbox]');
+    chk.checked = !chk.checked;
+    eventFire(chk, 'change');
+    return;
+  }
+  // open side-by-side (ctrl + s)
+  if (e.ctrlKey && 's' == key.toLocaleLowerCase()) {
+    e.preventDefault();
+    const li = $UI.toolbar.getSubTool('sbsviewer');
+    const chk = li.querySelector('input[type=checkbox]');
+    chk.checked = !chk.checked;
+    eventFire(chk, 'click');
+    return;
+  }
+  // open side-by-side (ctrl + l)
+  if (e.ctrlKey && 'l' == key.toLocaleLowerCase()) {
+    e.preventDefault();
+    const li = $UI.toolbar.getSubTool('preset_label');
+    const chk = li.querySelector('input[type=checkbox]');
+    chk.checked = !chk.checked;
+    eventFire(chk, 'click');
+    return;
+  }
+
+  // shortcuts for preset labels
+  if ($D.labels &&
+    $D.labels.configuration &&
+    Array.isArray($D.labels.configuration) &&
+    $D.labels.configuration.length > 0 &&
+    e.ctrlKey) {
+    e.key;
+    const elt = $UI.labelsViewer.allLabels.find((l)=>l.dataset.key&&l.dataset.key.toLowerCase()==e.key.toLowerCase());
+    if (elt) {
+      $UI.toolbar
+          .getSubTool('preset_label')
+          .querySelector('input[type=checkbox]').checked = true;
+      $UI.labelsViewer.selectLabel(elt);
+    }
+  }
+});
+
+// initialize viewer page
+function initialize() {
+  var checkPackageIsReady = setInterval(function() {
+    if (IsPackageLoading) {
+      clearInterval(checkPackageIsReady);
+      // create a viewer and set up
+      initCore();
+
+      // loading the form template data
+      FormTempaltesLoader();
+
+      // loading the overlayers data
+      layersLoader();
+    }
+  }, 100);
+}
+
+// setting core functionalities
+function initCore() {
+  // start initial
+
+  // create the message queue
+  $UI.message = new MessageQueue({position: 'bottom-left'});
+
+  // zoom info and mmp
+  const opt = {
+    draw: {
+      // extend context menu btn group
+      btns: [
+        {
+          // annotation
+          type: 'btn',
+          title: 'Annotation',
+          class: 'material-icons',
+          text: 'description',
+          callback: saveAnnotation,
+        },
+        {
+          // analytics
+          type: 'btn',
+          title: 'Analytics',
+          class: 'material-icons',
+          text: 'settings_backup_restore',
+          callback: saveAnalytics,
+        },
+      ],
+    },
+  };
+  // set states if exist
+  if ($D.params.states) {
+    opt.states = $D.params.states;
+  }
+  // pathdb home directly
+  if ($D.params.mode == 'pathdb') {
+    $D.pages.home = '../../../';
+    $D.pages.table = '../../../';
+  }
+
+  try {
+    const slideQuery = {};
+    slideQuery.id = $D.params.slideId;
+    slideQuery.name = $D.params.slide;
+    slideQuery.location = $D.params.location;
+    opt.addRulerCallback = onAddRuler;
+    opt.deleteRulerCallback = onDeleteRuler;
+    $CAMIC = new CaMic('main_viewer', slideQuery, opt);
+  } catch (error) {
+    Loading.close();
+    $UI.message.addError('Core Initialization Failed');
+    console.error(error);
+    return;
+  }
+
+  $CAMIC.loadImg(function(e) {
+    $CAMIC.viewer.addHandler('open-failed', function(e){
+      console.error(e.message, e)
+      redirect($D.pages.table, e.message, 5);
+    })
+    // image loaded
+    if (e.hasError) {
+      // if this is a retry, assume normal behavior (one retry per slide)
+      if ($D.params.retry) {
+        $UI.message.addError(e.message);
+        // can't reach Slide and return to home page
+        if (e.isServiceError) redirect($D.pages.table, e.message, 1);
+      } else {
+        // If this is our first attempt, try one more time.
+        let params = new URLSearchParams(window.location.search);
+        params.set('retry', '1');
+        window.location.search = params.toString();
+      }
+    } else {
+      $D.params.data = e;
+      // popup panel
+      $CAMIC.viewer.addHandler('canvas-lay-click', function(e) {
+        if (!e.data) {
+          $UI.annotPopup.close();
+          return;
+        }
+        // for support QUIP 2.0
+        const data = Array.isArray(e.data) ? e.data[e.data.selected] : e.data;
+
+        const type = data.provenance.analysis.source;
+        let body;
+        let attributes;
+        let warning = null;
+        switch (type) {
+          case 'human':
+            let area;
+            let circumference;
+            if (data.geometries) {
+              if (
+                (data.selected != null || data.selected != undefined) &&
+                data.geometries.features[data.selected] &&
+                data.geometries.features[data.selected].properties.area
+              ) {
+                area = `${Math.round(
+                    data.geometries.features[data.selected].properties.area,
+                )} μm²`;
+              }
+              if (
+                (data.selected != null || data.selected != undefined) &&
+                data.geometries.features[data.selected] &&
+                data.geometries.features[data.selected].properties.circumference
+              ) {
+                circumference = `${Math.round(
+                    data.geometries.features[data.selected].properties
+                        .circumference,
+                )} μm`;
+              }
+            } // othereise, don't try to calculate area and circumference
+            // human
+
+            attributes = data.properties.annotations;
+            if (area) attributes.area = area;
+            if (circumference) attributes.circumference = circumference;
+            body = convertHumanAnnotationToPopupBody(attributes);
+            if (
+              data.geometries &&
+              data.geometries.features[data.selected].properties.isIntersect
+            ) {
+              warning = `<div style='color:red;text-align: center;font-size:12px;'>Inaccurate Area and Circumference</div>`;
+            }
+            if (
+              data.geometries &&
+              data.geometries.features[data.selected].properties.nommp
+            ) {
+              warning = `<div style='color:red;text-align: center;font-size:12px;'>This slide has no mpp</div>`;
+            }
+
+            $UI.annotPopup.showFooter();
+            break;
+          case 'computer':
+            // handle data.provenance.analysis.computation = `segmentation`
+            attributes = data.properties.scalar_features[0].nv;
+            body = {type: 'map', data: attributes};
+            $UI.annotPopup.hideFooter();
+            break;
+          default:
+            return;
+            // statements_def
+            break;
+        }
+
+        $UI.annotPopup.data = {
+          id: data.provenance.analysis.execution_id,
+          oid: data._id.$oid,
+          annotation: attributes,
+          selected: e.data.selected,
+        };
+        const getCateName = () => {
+          const items = $UI.layersViewer.setting.categoricalData.human.items;
+          var dataType = null;
+          for (const key in items) {
+            if ({}.hasOwnProperty.call(items, key)) {
+              dataType = key;
+              if (items.hasOwnProperty(key)&&
+                  Array.isArray(items[key].items)&&
+                  items[key].items.some((i)=>i.item.id == $UI.annotPopup.data.id)) break;
+            }
+          }
+          return dataType;
+        };
+
+
+        $UI.annotPopup.dataType = null;
+        $UI.annotPopup.dataType = data.provenance && data.provenance.analysis &&
+                                  data.provenance.analysis.source && data.provenance.analysis.source=='human'?
+        getCateName($UI.annotPopup.data.id):null;
+
+        $UI.annotPopup.setTitle(`id:${data.provenance.analysis.execution_id}`);
+        $UI.annotPopup.setBody(body);
+        if (warning) $UI.annotPopup.body.innerHTML += warning;
+
+        $UI.annotPopup.open(e.position);
+      });
+
+      // create the message bar TODO for reading slide Info TODO
+      $UI.slideInfos = new CaMessage({
+        /* opts that need to think of*/
+        id: 'cames',
+        defaultText: `Slide: ${$D.params.data.name}`,
+      });
+
+      // spyglass
+      $UI.spyglass = new Spyglass({
+        targetViewer: $CAMIC.viewer,
+        imgsrc: $D.params.data.url,
+      });
+    }
+  });
+
+  $CAMIC.viewer.addHandler('open', function() {
+    $CAMIC.viewer.canvasDrawInstance.addHandler('start-drawing', startDrawing);
+    $CAMIC.viewer.canvasDrawInstance.addHandler('stop-drawing', stopDrawing);
+    // init UI -- some of them need to wait data loader to load data
+    // because UI components need data to initialize
+    initUIcomponents();
+    // action tracker start
+    tracker = new Tracker($CAMIC, $D.params.data._id.$oid, getUserId());
+    tracker.start();
+  });
+}
+
+// initialize all UI components
+async function initUIcomponents() {
+  /* create UI components */
+  $UI.downloadSelectionModal = new ModalBox({
+    id: 'downloadSelectionModal',
+    hasHeader: true,
+    headerText: 'Download Selection',
+    hasFooter: true,
+  });
+  const header = $UI.downloadSelectionModal.elt.querySelector('.modalbox-header');
+  header.querySelector('span.close').style.display = 'None';
+  const footer = $UI.downloadSelectionModal.elt.querySelector('.modalbox-footer');
+  const cancelBtn = document.createElement('button');
+  cancelBtn.classList.add('btn');
+  cancelBtn.classList.add('btn-sm');
+  cancelBtn.classList.add('btn-secondary');
+  cancelBtn.textContent = 'Cancel';
+  const downloadBtn = document.createElement('button');
+  downloadBtn.classList.add('btn');
+  downloadBtn.classList.add('btn-sm');
+  downloadBtn.classList.add('btn-info');
+  downloadBtn.textContent = 'Download';
+  footer.innerHTML = '';
+  footer.classList.add('footer');
+  footer.appendChild(cancelBtn);
+  footer.appendChild(downloadBtn);
+
+  cancelBtn.addEventListener('click', hideDownloadSelection);
+  downloadBtn.addEventListener('click', downloadSelection);
+
+
+  $UI.modalbox = new ModalBox({
+    id: 'modalbox',
+    hasHeader: true,
+    headerText: 'HeatMap List',
+    hasFooter: false,
+  });
+
+  const subToolsOpt = [];
+  // home
+  if (ImgloaderMode == 'iip') {
+    subToolsOpt.push({
+      name: 'home',
+      icon: 'home', // material icons' name
+      title: 'Home',
+      type: 'btn', // btn/check/dropdown
+      value: 'home',
+      callback: goHome,
+    });
+  }
+
+  // magnifier
+  subToolsOpt.push({
+    name: 'magnifier',
+    icon: 'search',
+    title: 'Magnifier',
+    type: 'dropdown',
+    value: 'magn',
+    dropdownList: [
+      {
+        value: 0.5,
+        title: '0.5',
+        checked: true,
+      },
+      {
+        value: 1,
+        title: '1.0',
+      },
+      {
+        value: 2,
+        title: '2.0',
+      },
+    ],
+    callback: toggleMagnifier,
+  });
+  // measurement tool
+  if ($CAMIC.viewer.measureInstance) {
+    subToolsOpt.push({
+      name: 'measurement',
+      icon: 'straighten',
+      title: 'Measurement',
+      type: 'dropdown',
+      value: 'measure',
+      dropdownList: [
+        {
+          value: 'straight',
+          title: 'straight',
+          icon: 'straighten',
+          checked: true,
+        },
+        {
+          value: 'coordinate',
+          title: 'coordinate',
+          icon: 'square_foot',
+        },
+      ],
+      callback: toggleMeasurement,
+    });
+  }
+  // enhance
+  subToolsOpt.push({
+    name: 'Enhance',
+    icon: 'invert_colors',
+    title: 'Enhance',
+    type: 'dropdown',
+    value: 'Enhance',
+    dropdownList: [
+      {
+        value: 'Histogram Eq',
+        title: 'Histogram Equalization',
+        icon: 'leaderboard',
+        checked: true,
+      },
+      {
+        value: 'Edge',
+        title: 'Edge',
+        icon: 'show_chart',
+      },
+      {
+        value: 'Sharpen',
+        title: 'Sharpen',
+        icon: 'change_history',
+      },
+      {
+        value: 'Custom',
+        title: 'Custom',
+        icon: 'api',
+      },
+    ],
+    callback: enhance,
+  });
+  // share
+
+  subToolsOpt.push({
+    name: 'share',
+    icon: 'share',
+    title: 'Share View',
+    type: 'btn',
+    value: 'share',
+    callback: shareURL,
+  });
+
+  // screenshot
+  subToolsOpt.push({
+    name: 'slideCapture',
+    icon: 'camera_enhance',
+    title: 'Download View as Image',
+    type: 'btn',
+    value: 'slCap',
+    callback: captureSlide,
+  });
+
+  // Additional Links handler
+  function additionalLinksHandler(url, openInNewTab, appendSlide) {
+    if (appendSlide === true) {
+      url = url + '?slide=' + $D.params.slideId;
+      url = url + '&state=' + StatesHelper.encodeStates(StatesHelper.getCurrentStates());
+    }
+    if (openInNewTab === true) {
+      window.open(url, '_blank').focus();
+    } else {
+      window.location.href = url;
+    }
+  }
+  var additionalLinksConfig = await $CAMIC.store.getConfigByName('additional_links')
+      .then((list)=>list.length==0?null:list[0]);
+  if (additionalLinksConfig&&additionalLinksConfig.configuration&&Array.isArray(additionalLinksConfig.configuration)) {
+    additionalLinksConfig.configuration.forEach((link)=>{
+      var openInNewTab = link.openInNewTab === false ? false : true;
+      var appendSlide = link.appendSlide === true ? true : false;
+      var url = link.url;
+      subToolsOpt.push({
+        name: link.displayName,
+        icon: link.icon ? link.icon : 'link',
+        title: link.displayName,
+        value: link.displayName,
+        type: 'btn',
+        callback: function() {
+          additionalLinksHandler(url, openInNewTab, appendSlide);
+        },
+      });
+    });
+  }
+
+  // create the tool bar
+  $UI.toolbar = new CaToolbar({
+    /* opts that need to think of*/
+    id: 'ca_tools',
+    zIndex: 601,
+    mainToolsCallback: mainMenuChange,
+    subTools: subToolsOpt,
+  });
+
+  // create two side menus for tools
+  $UI.appsSideMenu = new SideMenu({
+    id: 'side_apps',
+    width: 300,
+    // , isOpen:true
+    callback: toggleSideMenu,
+  });
+
+  $UI.layersSideMenu = new SideMenu({
+    id: 'side_layers',
+    width: 250,
+    contentPadding: 5,
+    // , isOpen:true
+    callback: toggleSideMenu,
+  });
+
+  const loading = `<div class="cover" style="z-index: 500;"><div class="block"><span>loading layers...</span><div class="bar"></div></div></div>`;
+  $UI.layersSideMenu.addContent(loading);
+  // TODO add layer viewer
+
+
+  /* annotation popup */
+  $UI.annotPopup = new PopupPanel({
+    footer: [
+      // { // edit
+      //   title:'Edit',
+      //   class:'material-icons',
+      //   text:'notes',
+      //   callback:annoEdit
+      // },
+    ],
+  });
+
+  // TODO -- labels //
+  $UI.labelsSideMenu = new SideMenu({
+    id: 'labels_layers',
+    width: 180,
+    contentPadding: 5,
+  });
+  var labelsTitle = document.createElement('div');
+  labelsTitle.classList.add('item_head');
+  labelsTitle.textContent = 'Label Manager';
+
+  $UI.labelsSideMenu.addContent(labelsTitle);
+
+  $D.labels = await $CAMIC.store.getConfigByName('preset_label').then((list)=>list.length==0?null:list[0]);
+
+
+  // onAdd()
+  // onRemove(labels)
+  // onUpdate(labels)
+  // onSelected()
+  $UI.labelsViewer = new LabelsViewer({
+    id: 'labelmanager',
+    data: $D.labels?$D.labels.configuration:[],
+    onAdd: addPresetLabelsHandler,
+    onEdit: editPresetLabelsHandler,
+    onRemove: removePresetLabelsHandler,
+    onSelected: selectedPresetLabelsHandler,
+  },
+  );
+  $UI.labelsViewer.elt.parentNode.removeChild($UI.labelsViewer.elt);
+  $UI.labelsSideMenu.addContent($UI.labelsViewer.elt);
+
+  // == end -- //
+
+  var checkOverlaysDataReady = setInterval(function() {
+    if (
+      $D.params.data &&
+      $CAMIC &&
+      $CAMIC.viewer &&
+      $CAMIC.viewer.omanager
+    ) {
+      clearInterval(checkOverlaysDataReady);
+      // for segmentation
+      $CAMIC.viewer.createSegment({
+        store: $CAMIC.store,
+        slide: $D.params.data.slide,
+        data: [],
+      });
+
+      // create control
+
+      // TODO move to add layers
+      // create main layer viewer items with states
+      // const mainViewerData = $D.overlayers.map((d) => {
+      //   const isShow =
+      //     $D.params.states &&
+      //     $D.params.states.l &&
+      //     $D.params.states.l.includes(d.id) ?
+      //       true :
+      //       false;
+      //   return {item: d, isShow: isShow};
+      // });
+
+
+      // TODO move to add layers
+      // create monir layer viewer items
+      // const minorViewerData = $D.overlayers.map((d) => {
+      //   return {item: d, isShow: false};
+      // });
+
+      // create UI and set data
+      $UI.layersViewer = createLayerViewer(
+          'overlayers',
+          null,
+          callback.bind('main'),
+          rootCallback.bind('main'),
+      );
+      // create UI and set data - minor
+      $UI.layersViewerMinor = createLayerViewer(
+          'overlayersMinor',
+          null,
+          callback.bind('minor'),
+          rootCallback.bind('minor'),
+      );
+
+      // TODO move to add layers
+      // if ($D.params.states && $D.params.states.l) {
+      //   $D.params.states.l.forEach((id) =>
+      //     loadAnnotationById($CAMIC, $UI.layersViewer.getDataItemById(id), null),
+      //   );
+      // }
+
+      $UI.layersList = new CollapsibleList({
+        id: 'layerslist',
+        list: [
+          {
+            id: 'left',
+            title: 'Left Viewer',
+            content: 'No Template Loaded', // $UI.annotOptPanel.elt
+            // isExpand:true
+          },
+          {
+            id: 'right',
+            title: 'Right Viewer',
+            content: 'No Template Loaded', // $UI.algOptPanel.elt,
+          },
+        ],
+        changeCallBack: function(e) {
+          // console.log(e);
+        },
+      });
+      $UI.layersSideMenu.clearContent();
+      // add to layers side menu
+      const title = document.createElement('div');
+      title.classList.add('item_head');
+      title.textContent = 'Layers Manager';
+
+      $UI.layersSideMenu.addContent(title);
+
+      // loading status
+      $UI.loadStatus = document.createElement('div');
+      $UI.loadStatus.style.display = 'none';
+      $UI.loadStatus.classList.add('load-status');
+      $UI.loadStatus.innerHTML = `<div class="material-icons loading">cached</div><div class="text">Loading</div>`;
+      $UI.layersSideMenu.addContent($UI.loadStatus);
+
+      // zoom locker control
+      $UI.lockerPanel = document.createElement('div');
+      $UI.lockerPanel.classList.add('lock_panel');
+      $UI.lockerPanel.style.display = 'none';
+      $UI.lockerPanel.innerHTML = `<label>Zoom Lock<input type="checkbox" checked></label>`;
+      $UI.lockerPanel
+          .querySelector('input[type=checkbox]')
+          .addEventListener('change', (e) => {
+            isLock = !isLock;
+            if (isLock) {
+              $minorCAMIC.viewer.viewport.zoomTo(
+                  $CAMIC.viewer.viewport.getZoom(true),
+                  $CAMIC.viewer.viewport.getCenter(true),
+                  true,
+              );
+              $CAMIC.viewer.controls.bottomright.style.display = 'none';
+            } else {
+              $CAMIC.viewer.controls.bottomright.style.display = '';
+            }
+          });
+
+      $UI.layersSideMenu.addContent($UI.lockerPanel);
+
+      $UI.layersList.clearContent('left');
+      $UI.layersList.addContent('left', $UI.layersViewer.elt);
+      $UI.layersList.clearContent('right');
+      $UI.layersList.addContent('right', $UI.layersViewerMinor.elt);
+
+      $UI.layersList.elt.parentNode.removeChild($UI.layersList.elt);
+      closeMinorControlPanel();
+      $UI.layersSideMenu.addContent($UI.layersList.elt);
+    }
+  }, 300);
+
+  var checkTemplateSchemasDataReady = setInterval(function() {
+    if ($D.templates) {
+      clearInterval(checkTemplateSchemasDataReady);
+      const annotRegex = new RegExp('annotation', 'gi');
+      const annotSchemas = $D.templates.filter((item) =>
+        item.id.match(annotRegex),
+      );
+      /* annotation control */
+      $UI.annotOptPanel = new OperationPanel({
+        // id:
+        // element:
+        formSchemas: annotSchemas,
+        resetCallback: resetCallback,
+        action: {
+          title: 'Save',
+          callback: annoCallback,
+        },
+      });
+
+      const title = document.createElement('div');
+      title.classList.add('item_head');
+      title.textContent = 'Annotation';
+      $UI.appsSideMenu.addContent(title);
+      $UI.annotOptPanel.elt.classList.add('item_body');
+      $UI.appsSideMenu.addContent($UI.annotOptPanel.elt);
+    }
+  }, 300);
+}
+function createLayerViewer(id, viewerData, callback, rootCallback) {
+  const layersViewer = new LayersViewer({
+    id: id,
+    data: viewerData,
+    removeCallback: removeCallback,
+    locationCallback: locationCallback,
+    callback: callback,
+    rootCallback: rootCallback,
+
+  });
+  layersViewer.elt.parentNode.removeChild(layersViewer.elt);
+  return layersViewer;
+}
+
+// create lay panel for side-by-side control
+function createLayPanelControl() {
+  $UI.layCtrlbar = document.createElement('div');
+  $UI.layCtrlbar.style = `
+  display:none;
+  margin: .2rem;
+  background-color: #365f9c;
+  cursor: default;
+  padding: .5rem;
+  width: 100%;
+  border: none;
+  text-align: left;
+  outline: none;
+  font-size: 1.2rem;`;
+
+  createRadios();
+  $UI.layersSideMenu.addContent($UI.layCtrlbar);
+  // control
+  const radios = $UI.layCtrlbar.querySelectorAll('input[name=ctrlPane]');
+  radios.forEach((r) => {
+    r.addEventListener('change', function(e) {
+      const val = e.target.value;
+      switch (val) {
+        case 'main':
+          $UI.layersViewer.elt.style.display = 'flex';
+          $UI.layersViewerMinor.elt.style.display = 'none';
+          break;
+        case 'minor':
+          $UI.layersViewer.elt.style.display = 'none';
+          $UI.layersViewerMinor.elt.style.display = 'flex';
+          break;
+        default:
+          // statements_def
+          break;
+      }
+    });
+  });
+}
+
+function createRadios() {
+  const temp = `
+  <input id="_3ojv6szi7" name="ctrlPane" type="radio" value="main" checked>
+  <label for="_3ojv6szi7">Main(left)</label>
+  <input id="_3ojv6szi8" name="ctrlPane" type="radio" value="minor">
+  <label for="_3ojv6szi8">Minor(right)</label>
+  `;
+  $UI.layCtrlbar.innerHTML = temp;
+}
+
+function redirect(url, text = '', sec = 5) {
+  let timer = sec;
+  if (!timer) {
+    window.location.href = url;
+  }
+  setInterval(function() {
+    if (!timer) {
+      window.location.href = url;
+    }
+    if (Loading.instance && Loading.instance.parentNode) {
+      Loading.text.textContent = `${text} ${timer}s.`;
+    } else {
+      Loading.open(document.body, `${text} ${timer}s.`);
+    }
+    // Hint Message for clients that page is going to redirect to Flex table in 5s
+    timer--;
+  }, 1000);
+}
+
+function updateSlideView() {
+  if (!confirm(`Do you want to mark this slide as reviewed?`)) return;
+  Loading.open(document.body, 'changing review status ...');
+  $CAMIC.store.updateSlideReview($D.params.slideId, 'true').then(function(e) {
+    if (e.status==200) {
+      $UI.toolbar.getSubTool('review').style.display = 'none';
+    }
+  }).finally(function() {
+    Loading.close();
+  });
+}
+
+
+function addHumanLayerItems() {
+  const mainViewerItems = {
+    'other': {
+      item: {
+        id: 'other',
+        name: 'other',
+      },
+      items: [],
+    },
+  };
+
+  $D.humanlayers.reduce((items, d)=> {
+    const isShow =
+      $D.params.states &&
+      $D.params.states.l &&
+      $D.params.states.l.includes(d.id) ?
+        true:
+        false;
+    if (d.label&&d.label.id&&d.label.name) { // preset  label
+      const {id, name} = d.label;
+      if (!items[id]) {
+        items[id] = {
+          item: {
+            id: id,
+            name: name,
+          },
+          items: [],
+        };
+      }
+      items[id].items.push({item: d, isShow});
+    } else { // other
+      items['other'].items.push({item: d, isShow});
+    }
+    return items;
+  }, mainViewerItems);
+
+  $UI.layersViewer.addHumanItems(mainViewerItems);
+
+  // minor viewer minorViewer
+  const minorViewerItems = {
+    'other': {
+      item: {
+        id: 'other',
+        name: 'other',
+      },
+      items: [],
+    },
+  };
+  $D.humanlayers.reduce((items, d)=> {
+    const isShow =
+      $D.params.states &&
+      $D.params.states.l &&
+      $D.params.states.l.includes(d.id) ?
+        true:
+        false;
+    if (d.label&&d.label.id&&d.label.name) {
+
+    }
+    if (d.label&&d.label.id&&d.label.name) { // preset  label
+      const {id, name} = d.label;
+      if (!items[id]) {
+        items[id] = {
+          item: {
+            id: id,
+            name: name,
+          },
+          items: [],
+        };
+      }
+      items[id].items.push({item: d, isShow});
+    } else { // other
+      items['other'].items.push({item: d, isShow});
+    }
+    return items;
+  }, minorViewerItems);
+
+  $UI.layersViewerMinor.addHumanItems(minorViewerItems);
+}
+function openLoadStatus(text) {
+  const txt = $UI.loadStatus.querySelector('.text');
+  txt.textContent = `Loading ${text}`;
+  $UI.loadStatus.style.display = null;
+}
+function closeLoadStatus() {
+  $UI.loadStatus.style.display = 'none';
+}
+function addRulerLayerItems(data) {
+  const mainViewerData = $D.rulerlayers.map((d) => {
+    return {item: d, isShow: false};
+  });
+  // create monir layer viewer items
+  const minorViewerData = $D.rulerlayers.map((d) => {
+    return {item: d, isShow: false};
+  });
+  $UI.layersViewer.addItems(mainViewerData, 'ruler');
+  $UI.layersViewerMinor.addItems(minorViewerData, 'ruler');
+}
+
+function addComputerLayerItems(data) {
+  const mainViewerData = $D.computerlayers.map((d) => {
+    return {item: d, isShow: false};
+  });
+  // create monir layer viewer items
+  const minorViewerData = $D.computerlayers.map((d) => {
+    return {item: d, isShow: false};
+  });
+  $UI.layersViewer.addItems(mainViewerData, 'segmentation');
+  $UI.layersViewerMinor.addItems(minorViewerData, 'segmentation');
+}
+
+function addHeatmapLayerItems(data) {
+  const mainViewerData = $D.heatmaplayers.map((d) => {
+    return {item: d, isShow: false};
+  });
+  // create monir layer viewer items
+  const minorViewerData = $D.heatmaplayers.map((d) => {
+    return {item: d, isShow: false};
+  });
+  $UI.layersViewer.addItems(mainViewerData, 'heatmap');
+  $UI.layersViewerMinor.addItems(minorViewerData, 'heatmap');
+}
+
+// const mainViewerData = $D.overlayers.map((d) => {
+//   const isShow =
+//     $D.params.states &&
+//     $D.params.states.l &&
+//     $D.params.states.l.includes(d.id) ?
+//       true :
+//       false;
+//   return {item: d, isShow: isShow};
+// });
+
+
+// TODO move to add layers
+// create monir layer viewer items
+// const minorViewerData = $D.overlayers.map((d) => {
+//   return {item: d, isShow: false};
+// });
diff --git a/apps/mini/layersViewer.js b/apps/mini/layersViewer.js
new file mode 100644
index 000000000..5d94b57a3
--- /dev/null
+++ b/apps/mini/layersViewer.js
@@ -0,0 +1,1068 @@
+// proposal:
+// test:
+// constructor
+// setData
+// callback
+// style:
+// expand/collapse if click on a node
+// search bar is workeds
+
+/**
+ * CaMicroscope Layers Viewer. A component that shows all layers by the different categories.
+ * @constructor
+ * @param {Object} options
+ *        All required and optional settings for instantiating a new instance of a Layer Manager.
+ * @param {String} options.id
+ *        Id of the element to append the Layer Manager's container element to.
+ * @param {Object[]} options.data
+ *        the data set of the layers.
+ * @param {String} options.data.id
+ *        layer's id
+ * @param {String} options.data.name
+ *        layer's name
+ * @param {String} options.data.typeId
+ *        layer's type id
+ * @param {String} options.data.typeName
+ *        layer's type name
+ *
+ */
+function LayersViewer(options) {
+    this.className = 'LayersViewer';
+    this.setting = {
+      // id: doc element
+      // data: layers dataset
+      // categoricalData
+      isSortableView: false,
+    };
+    this.defaultType = ['human', 'ruler', 'segmentation', 'heatmap'];
+  
+    /**
+     * @property {Object} _v_model
+     *        View Model for the layers manager
+     * @property {Object} _v_model.types
+     *        data set group by types
+     * @property {String} _v_model.types.name
+     *        type name
+     * @property {Array} _v_model.types.data[]
+     *        what layers in this type of layers
+     */
+  
+    this.viewRadios; // name:
+    this.searchBar; // input and btn
+  
+    this.categoricalView;
+    // this.sortableView;
+    // this.sortable;
+  
+    // setting dataset
+    extend(this.setting, options);
+    this.elt = document.getElementById(this.setting.id);
+    if (!this.elt) {
+      console.error(`${this.className}: No Main Elements...`);
+      return;
+    }
+    this.elt.classList.add('layer_viewer');
+  
+    // sort data
+    // this.setting.data.sort(LayersViewer.compare);
+    // give index
+    // convert og data to categorical data
+    this.setting.categoricalData = {
+      heatmap: {
+        item: {id: 'heatmap', name: 'heatmap'},
+        items: [],
+      },
+      segmentation: {
+        item: {id: 'segmentation', name: 'segmentation'},
+        items: [],
+      },
+      ruler: {
+        item: {id: 'ruler', name: 'ruler'},
+        items: [],
+      },
+      human: {
+        item: {id: 'human', name: 'human'},
+        items: [],
+      },
+    };
+    // this.__covertData();
+    this.__initUI();
+  }
+  
+  LayersViewer.prototype.toggleAllItems = function(
+      isShow = false,
+      fresh = true,
+  ) {
+    this.setting.data.forEach((d) => (d.isShow = isShow));
+    if (fresh) this.update();
+  };
+  
+  LayersViewer.prototype.addHumanItem = function(
+      item,
+      type,
+      parent,
+      isShow = true,
+  ) {
+    if (!this.defaultType.includes(type)) {
+      console.warn('Error Type !!!');
+      return;
+    }
+  
+    var cate = this.setting.categoricalData[type].items[parent];
+    if (!cate) {
+      // no parent node
+      const newCate = {};
+      if (item.label) {
+        newCate[item.label.id] = {
+          item: {
+            id: item.label.id,
+            name: item.label.name,
+          },
+          items: [],
+        };
+        this.setting.categoricalData[type].items[parent] = newCate;
+        this.addHumanItems(newCate);
+        cate = this.setting.categoricalData[type].items[parent];
+      } else {
+        console.error('Layersviewer.addHumanItem has error');
+      }
+    }
+  
+    const data = {item, isShow};
+    // add Data
+    cate.items.push(data);
+  
+    // add item on UI
+    data.elt = document.createElement('li');
+    data.elt.dataset.id = data.item.id;
+    data.elt.dataset.title = data.item.label ?
+      `${data.item.name}${data.item.id}` :
+      `${data.item.name}`;
+    data.elt.innerHTML = `<div class="material-icons md-24 location" title="Location" style="display:${
+      isShow ? '' : 'none'
+    };">room</div>
+    <label for="cate.${data.item.id}">
+      <div>${
+        data.item.label ? `${data.item.name}${data.item.id}` : `${data.item.name}`
+  }</div>
+    </label>
+    <input type="checkbox" data-id="${
+    data.item.id
+  }" data-root="human" data-parent="${cate.item.id}" id="cate.${
+    data.item.id
+  }" data-type="leaf" ${isShow ? 'checked' : ''}>`;
+  
+    // event: show/hidden layers for each annotation
+    const chk = data.elt.querySelector('input[type=checkbox][data-type=leaf]');
+    chk.addEventListener('change', this.__change.bind(this));
+    //
+    const removeDiv = data.elt.querySelector('div.material-icons.remove');
+    removeDiv.addEventListener('click', () => {
+      this.setting.removeCallback.call(this, data, cate.item.id);
+    });
+    const locationDiv = data.elt.querySelector('div.material-icons.location');
+    locationDiv.addEventListener('click', () => {
+      this.setting.locationCallback.call(this, data);
+    });
+  
+    cate.children.insertBefore(data.elt, cate.children.firstChild);
+    // update num
+    cate.num.textContent = cate.items.length;
+    cate.elt.style.display = 'flex';
+  
+    // total human anotation nums
+    var humanNum = 0;
+    const obj = this.setting.categoricalData[type].items;
+    for (const key in obj) {
+      if (Object.prototype.hasOwnProperty.call(obj, key)) {
+        humanNum += obj[key].items.length;
+      }
+    }
+    this.setting.categoricalData[type].num.textContent = humanNum;
+  };
+  
+  LayersViewer.prototype.addItem = function(
+      item,
+      type,
+      isShow = true,
+      fresh = true,
+  ) {
+    if (!this.defaultType.includes(type)) {
+      console.warn('Error Type !!!');
+      return;
+    }
+    const cate = this.setting.categoricalData[type];
+    const items = cate.items;
+    const data = {item, isShow};
+    // add Data
+    items.push(data);
+  
+    // add item on UI
+    data.elt = LayersViewer.createCategoricalItem.call(this, data);
+    const chk = data.elt.querySelector('input[type=checkbox]');
+    // add show/hidden event on check box
+    chk.addEventListener('change', this.__change.bind(this)),
+    // cate.children.appendChild(data.elt)
+    cate.children.insertBefore(data.elt, cate.children.firstChild);
+  
+    // update num
+    cate.num.textContent = cate.items.length;
+  };
+  
+  LayersViewer.prototype.removeItemById = function(
+      id,
+      type,
+      parent,
+      fresh = true,
+  ) {
+    if (!this.defaultType.includes(type)) {
+      console.warn('Error Type !!!');
+      return;
+    }
+  
+    const cate =
+      type == 'human' ?
+        this.setting.categoricalData[type].items[parent] :
+        this.setting.categoricalData[type];
+    const items = cate.items;
+    const index = items.findIndex((d) => d.item.id == id);
+    if (index == -1) return;
+    const li = items[index].elt;
+    // ui remove
+    li.parentNode.removeChild(li);
+    // data remove
+    items.splice(index, 1);
+    // change num
+    cate.num.textContent = items.length;
+    if (type == 'human') {
+      if (cate.items.length == 0) cate.elt.style.display = 'none';
+      var humanNum = 0;
+      const obj = this.setting.categoricalData[type].items;
+      for (const key in obj) {
+        if (Object.prototype.hasOwnProperty.call(obj, key)) {
+          humanNum += obj[key].items.length;
+        }
+      }
+      this.setting.categoricalData[type].num.textContent = humanNum;
+    }
+  };
+  
+  LayersViewer.prototype.getDataItemById = function(id, type, parent) {
+    if (!this.defaultType.includes(type)) {
+      console.warn('Error Type !!!');
+      return;
+    }
+  
+    const cate =
+      type == 'human' ?
+        this.setting.categoricalData[type].items[parent] :
+        this.setting.categoricalData[type];
+    const items = cate.items;
+    return items.find((d) => d.item.id == id);
+  };
+  
+  LayersViewer.prototype.onEnd = function(e) {
+    if (e.newIndex === e.oldIndex) return;
+    const data = this.setting.data;
+  
+    // move data from old index position to new index position
+    LayersViewer.moveArray(data, e.oldIndex, e.newIndex);
+    // refresh UI
+    const sort = data.map((item) => item.id);
+    this.sortable.sort(sort);
+    // callback functions
+    if (this.setting.sortChange) this.setting.sortChange.call(null, sort);
+  };
+  LayersViewer.prototype.moveLayer = function(id, direction = 'up') {
+    const data = this.setting.data;
+    // find layer index
+    const oldIndex = data.findIndex((item) => item.id === id);
+  
+    const newIndex = direction === 'up' ? oldIndex - 1 : oldIndex + 1;
+  
+    if (newIndex < 0 || newIndex >= data.length) {
+      console.warn('move: Out Of Index');
+      return;
+    }
+    // move data from old index position to new index position
+    LayersViewer.moveArray(data, oldIndex, newIndex);
+  
+    // refresh UI
+    const sort = data.map((item) => item.id);
+    this.sortable.sort(sort);
+    // callback function
+    if (this.setting.sortChange) this.setting.sortChange.call(null, sort);
+  };
+  
+  // move
+  LayersViewer.moveArray = function(array, oldIndex, newIndex) {
+    if (newIndex >= array.length) {
+      let dist = newIndex - array.length + 1;
+      while (dist--) {
+        array.push(undefined);
+      }
+    }
+    array.splice(newIndex, 0, array.splice(oldIndex, 1)[0]);
+    return array; // for testing
+  };
+  
+  // for sorting
+  LayersViewer.compare = function(a, b) {
+    if (a.index && b.index) return a.index > b.index;
+    if (a.index) return 1;
+    if (b.index) return 1;
+    return a.name > b.name;
+  };
+  
+  /**
+   * [__clearUI description]
+   * @return {[type]} [description]
+   */
+  LayersViewer.prototype.__clearUI = function() {
+    empty(this.elt);
+    this.searchBar = null;
+    this.viewRadios = null;
+    this.categoricalView = null;
+    this.sortableView = null;
+    this.sortable = null;
+  };
+  /*
+      refresh UI
+  */
+  LayersViewer.prototype.__initUI = function() {
+    empty(this.elt); // clear all elements
+    this.__clearUI();
+  
+    /* create search bar area START */
+    const ctrlObj = LayersViewer.createControlBar();
+    // this.viewRadios = ctrlObj.viewRadios;  // view switch
+    this.searchBar = ctrlObj.searchBar; // searchbar
+    this.elt.appendChild(ctrlObj.view);
+  
+    /* create search bar area END */
+    const checkDiv = document.createElement('div');
+    checkDiv.classList.add('checklist');
+    checkDiv.style.display = 'none';
+    checkDiv.innerHTML = `<label><input type='checkbox' value='Point' checked/>  Point</label>
+    <label><input type='checkbox' value='LineString' checked/>  Brush</label>
+    <label><input type='checkbox' value='Polygon' checked/>  Polygon</label>`;
+    this.elt.appendChild(checkDiv);
+    this.searchList = checkDiv;
+    [...this.searchList.querySelectorAll('input[type=checkbox]')].forEach((chk) =>
+      chk.addEventListener('change', (e) => {
+        this.__search(this.searchBar.text.value);
+      }),
+    );
+    /* categorical view START*/
+    // create categorical view div
+    const cateViewDiv = document.createElement('div');
+    cateViewDiv.classList.add('layers_list');
+  
+    // create categorical view content
+    const objCategories = LayersViewer.createCategoricalView.call(
+        this,
+        this.setting.categoricalData,
+    );
+    cateViewDiv.appendChild(objCategories.view);
+  
+    this.elt.appendChild(cateViewDiv);
+    this.categoricalView = cateViewDiv;
+    /* categorical view END*/
+  
+    /* sortable view START */
+    // create sortable view div
+    // let sort_view_div = document.createElement('div');
+    // sort_view_div.classList.add('sort_list');
+    // sort_view_div.style.display = 'none';
+  
+    // create sortable view content
+    // const objSortable = LayersViewer.createSortableView(this.setting.data);
+    // this.sortable = objSortable.sortable;
+    // this.sortable.option('onEnd', this.onEnd.bind(this))
+  
+    // add the content into the div
+    // sort_view_div.appendChild(objSortable.view);
+    // this.elt.appendChild(sort_view_div);
+    // this.sortableView = sort_view_div;
+    /* sortable view END */
+  
+    // add search event
+    this.searchBar.btn.addEventListener('click', this.__search.bind(this));
+    //
+    this.searchBar.text.addEventListener('change', this.__search.bind(this));
+    this.searchBar.text.addEventListener('keyup', this.__search.bind(this));
+  
+    // add event for all checkbox
+    const checkboxes = this.elt.querySelectorAll('input[type=checkbox]');
+    checkboxes.forEach((chk) =>
+      chk.addEventListener('change', this.__change.bind(this)),
+    );
+    // expand and collapse control for categorical view
+    const cateItems = this.setting.categoricalData;
+    for (const key in cateItems) {
+      if (cateItems.hasOwnProperty(key)) {
+        cateItems[key].elt.firstChild.addEventListener(
+            'click',
+            this.__switch.bind(this),
+        );
+      }
+    }
+  
+    // moveup
+    // const ups = this.sortableView.querySelectorAll('.moveup');
+    // ups.forEach( up => up.addEventListener('click',function(e){
+    //    const _id = e.target.parentNode.dataset.id;
+    //    this.moveLayer(_id,'up');
+    // }.bind(this)));
+  
+    // movedown
+    // const downs = this.sortableView.querySelectorAll('.movedown');
+    // downs.forEach( downs => downs.addEventListener('click',function(e){
+    //    const _id = e.target.parentNode.dataset.id;
+    //    this.moveLayer(_id,'down');
+    // }.bind(this)));
+  
+    // initialize checkbox
+    // if(this.setting.isSortableView){
+    //    this.viewModeSwitch('sort');
+    // }else{
+    //    this.viewModeSwitch('category');
+    // }
+  };
+  
+  // click on view radio btn which changes the view mode
+  LayersViewer.prototype.__radioClick = function() {
+    const mode = this.elt.querySelector(
+        `input[type=radio][name=${this.viewRadios.name}]:checked`,
+    ).value;
+    this.viewModeSwitch(mode);
+    if (mode === 'sort') {
+      this.setting.isSortableView = true;
+    } else {
+      this.setting.isSortableView = false;
+    }
+  };
+  
+  // switch layers view mode - sortable or categorical
+  LayersViewer.prototype.viewModeSwitch = function(
+      mode = 'category', /* category/sort */
+  ) {
+    // display two views
+    this.sortableView.style.display = 'none';
+    this.categoricalView.style.display = 'none';
+  
+    switch (mode) {
+      case 'category':
+        // open category view and checked cate radio btn
+        this.viewRadios.list[0].elt.checked = true;
+        this.categoricalView.style.display = 'block';
+        break;
+      case 'sort':
+        // open sortable view and checked sort radio btn
+        this.viewRadios.list[1].elt.checked = true;
+        this.sortableView.style.display = 'block';
+        break;
+      default:
+        // statements_def
+        break;
+    }
+  };
+  
+  /* For Categorical View functions START */
+  LayersViewer.createCategoricalView = function(data) {
+    const ul = document.createElement('ul');
+    for (const typeId in data) {
+      if (data.hasOwnProperty(typeId)) {
+        // create root li
+        const typeData = data[typeId]; // typeData = {id:typeId,name:typeName,items:[{item:,isShow:}]}
+        typeData.elt = LayersViewer.createCategoricalItem.call(
+            this,
+            typeData,
+            'root',
+        );
+        typeData.num = typeData.elt.querySelector('div.num');
+        ul.appendChild(typeData.elt); // create li root
+  
+        const children = document.createElement('ul');
+        children.style.display = 'none';
+        // add leaf
+        // typeData.items.forEach(
+        //     function(item) {
+        //       item.elt = LayersViewer.createCategoricalItem.call(this, item);
+        //       children.appendChild(item.elt); // create li leaf
+        //     }.bind(this),
+        // );
+        //
+        ul.appendChild(children);
+        typeData.children = children;
+      }
+    }
+    return {view: ul};
+  };
+  
+  LayersViewer.prototype.addHumanItems = function(data) {
+    const human = this.setting.categoricalData['human'];
+    // human.items = data;
+  
+    const ul = document.createElement('ul');
+    var num = 0;
+    for (const [id, cate] of Object.entries(data)) {
+      human.items[id] = cate;
+      const name = cate.item.name;
+      const li = document.createElement('li');
+      li.dataset.id = id;
+      li.style.display = cate.items.length ? null : 'none';
+      num += cate.items.length;
+      // create
+      li.innerHTML = `<div class="material-icons">keyboard_arrow_right</div>
+        <label for="cate.${id}" style="font-weight: bold;">
+          <div>${titleCase(name)}</div>
+          <div class="num">${cate.items.length}</div>
+        </label>
+        <input type="checkbox" data-id="${id}" data-name="${name}" data-root="human" data-type="root">`;
+  
+      const allChk = li.querySelector('input[type=checkbox][data-type=root]');
+      allChk.addEventListener('change', this.__change.bind(this));
+      const children = document.createElement('ul');
+      children.style.display = 'none';
+  
+      cate.items.forEach((data) => {
+        data.elt = document.createElement('li');
+        data.elt.dataset.id = data.item.id;
+        data.elt.dataset.title = data.item.label ?
+          `${data.item.name}${data.item.id}` :
+          `${data.item.name}`;
+        data.elt.innerHTML = `<div class="material-icons md-24 location" title="Location" style="display: none;">room</div>
+          <label for="cate.${data.item.id}">
+            <div>${
+              data.item.label ?
+                `${data.item.name}${data.item.id}` :
+                `${data.item.name}`
+  }</div>
+          </label>
+          <input type="checkbox" data-id="${
+    data.item.id
+  }" data-root="human" data-parent="${cate.item.id}" id="cate.${
+    data.item.id
+  }" data-type="leaf">`;
+        children.appendChild(data.elt);
+  
+        // event: show/hidden layers for each annotation
+        const chk = data.elt.querySelector(
+            'input[type=checkbox][data-type=leaf]',
+        );
+        chk.addEventListener('change', this.__change.bind(this));
+        //
+        const locationDiv = data.elt.querySelector('div.material-icons.location');
+        locationDiv.addEventListener('click', () => {
+          this.setting.locationCallback.call(this, data);
+        });
+      });
+  
+      cate.elt = li;
+      cate.num = li.querySelector('div.num');
+      cate.children = children;
+      human.children.appendChild(li);
+      human.children.appendChild(cate.children);
+  
+      // event for cate
+  
+      // add change on reaf checkbox
+      // expand/collapse
+      cate.elt.firstChild.addEventListener('click', this.__switch.bind(this));
+      //
+    }
+  
+    // show up arrow icon
+    const arrowIcon = human.elt.querySelector('div.material-icons');
+    arrowIcon.style.display = null;
+    // remove loading icon
+    const loadingIcon = human.elt.querySelector('div.loading-icon');
+    // const chk = human.elt.querySelector("input[type=checkbox]");
+    // chk.style.display = "";
+    human.num.textContent = num;
+    if (loadingIcon) loadingIcon.parentNode.removeChild(loadingIcon);
+  };
+  
+  LayersViewer.prototype.addItems = function(data, type) {
+    const typeData = this.setting.categoricalData[type];
+  
+    // show up arrow icon
+    const arrowIcon = typeData.elt.querySelector('div.material-icons');
+    arrowIcon.style.display = null;
+    // remove loading icon
+    const loadingIcon = typeData.elt.querySelector('div.loading-icon');
+    if (loadingIcon) loadingIcon.parentNode.removeChild(loadingIcon);
+  
+    if (type == 'human' || type == 'ruler') {
+      this.toggleSearchPanel();
+      const chk = typeData.elt.querySelector('input[type=checkbox]');
+      chk.style.display = '';
+    }
+  
+    // create ui item
+    data.forEach((item) => {
+      item.elt = LayersViewer.createCategoricalItem.call(this, item);
+      const chk = item.elt.querySelector('input[type=checkbox]');
+      // add show/hidden event on check box
+      chk.addEventListener('change', this.__change.bind(this)),
+      typeData.children.appendChild(item.elt);
+    });
+  
+    typeData.items = [...typeData.items, ...data];
+    typeData.num.textContent = typeData.items.length;
+  };
+  
+  LayersViewer.createCategoricalItem = function(data, type) {
+    const item = data.item;
+    const id = `cate.${item.id}`;
+    // create li
+    const li = document.createElement('li');
+    li.dataset.id = item.id;
+    // data?
+  
+    // label
+    const label = document.createElement('label');
+    label.htmlFor = id;
+  
+    // div
+    const text = document.createElement('div');
+    text.textContent = type == 'root' ? titleCase(item.name) : item.name;
+  
+    label.appendChild(text);
+  
+    // checkbox
+    const chk = document.createElement('input');
+    chk.type = 'checkbox';
+  
+    chk.dataset.id = item.id;
+  
+    if (type === 'root') {
+      const ic = document.createElement('div');
+      ic.classList.add('material-icons');
+      ic.textContent = 'keyboard_arrow_right';
+      ic.style.display = 'none';
+      label.style.fontWeight = 'bold';
+      chk.dataset.type = 'root';
+      chk.style.display = 'none';
+      li.appendChild(ic);
+      const loadingIcon = document.createElement('div');
+      loadingIcon.classList.add('loading-icon');
+      label.prepend(loadingIcon);
+      const num = document.createElement('div');
+      num.classList.add('num');
+      label.append(num);
+    } else {
+      chk.id = id;
+      chk.dataset.cate = item.typeId;
+      chk.dataset.type = 'leaf';
+      chk.checked = data.isShow;
+      li.title = item.name;
+    }
+  
+    if (item.typeName && (item.typeName == 'human' || item.typeName == 'ruler')) {
+      // remove and relocation
+      const removeDiv = document.createElement('div');
+      removeDiv.classList.add('material-icons');
+      removeDiv.classList.add('md-24');
+      removeDiv.textContent = 'clear';
+      removeDiv.title = 'Remove';
+      const locationDiv = document.createElement('div');
+      locationDiv.style.display = data.isShow ? 'block' : 'none';
+      // bind event location_searching
+      locationDiv.classList.add('material-icons');
+      locationDiv.classList.add('md-24');
+      locationDiv.classList.add('location');
+      locationDiv.textContent = 'room';
+      locationDiv.title = 'Location';
+  
+      //
+      removeDiv.addEventListener('click', () => {
+        this.setting.removeCallback.call(this, data);
+      });
+      locationDiv.addEventListener('click', () => {
+        this.setting.locationCallback.call(this, data);
+      });
+  
+      //
+      li.appendChild(locationDiv);
+      li.appendChild(label);
+      li.appendChild(removeDiv);
+    } else {
+      li.appendChild(label);
+    }
+  
+    // chk.dataset.name = item.name;
+  
+    li.appendChild(chk);
+    return li;
+  };
+  /* For Categorical View functions END */
+  
+  /* For Sortable View functions START */
+  LayersViewer.createSortableView = function(list) {
+    const sortableList = document.createElement('ul');
+    for (let i = 0; i < list.length; i++) {
+      const item = list[i];
+      const elt = LayersViewer.createSortableItem(item);
+      item.sortItem = elt;
+      sortableList.appendChild(elt);
+    }
+  
+    // sortable options
+    const options = {
+      group: 'share',
+      animation: 100,
+      dataIdAttr: 'data-id',
+    };
+  
+    //
+    const sortable = Sortable.create(sortableList, options);
+    return {sortable: sortable, view: sortableList};
+  };
+  
+  // create sortable item for sortable view
+  LayersViewer.createSortableItem = function(item) {
+    const id = `sort.${item.id}`;
+  
+    // create li
+    const li = document.createElement('li');
+    li.dataset.id = item.id;
+    // data?
+  
+    // label
+    const label = document.createElement('label');
+    label.htmlFor = id;
+  
+    // div
+    const text = document.createElement('div');
+    text.textContent = item.name;
+    label.appendChild(text);
+  
+    // div moveup
+    const upIcon = document.createElement('div');
+    upIcon.classList.add('material-icons');
+    upIcon.classList.add('moveup');
+    upIcon.textContent = 'arrow_drop_up';
+  
+    // div movedown
+    const downIcon = document.createElement('div');
+    downIcon.classList.add('material-icons');
+    downIcon.classList.add('movedown');
+    downIcon.textContent = 'arrow_drop_down';
+  
+    // checkbox
+    const chk = document.createElement('input');
+    chk.type = 'checkbox';
+    chk.id = id;
+    chk.checked = item.isShow;
+    chk.dataset.id = item.id;
+    chk.dataset.type = 'leaf';
+    li.appendChild(label);
+    li.appendChild(upIcon);
+    li.appendChild(downIcon);
+    li.appendChild(chk);
+    return li;
+  };
+  /* For Sortable View functions END */
+  LayersViewer.prototype.toggleSearchPanel = function(isShow = true) {
+    if (isShow) {
+      this.searchBar.elt.style.display = null;
+      this.searchList.style.display = null;
+    } else {
+      this.searchBar.elt.style.display = 'none';
+      this.searchList.style.display = 'none';
+    }
+  };
+  /* For control area functions START */
+  LayersViewer.createControlBar = function() {
+    const view = document.createElement('div');
+    view.style.display = 'none';
+    view.classList.add('searchbar');
+  
+    // create view radios name
+    const _name = randomId();
+  
+    /* create cate btn START */
+    const cateId = randomId();
+    const cateBtn = document.createElement('div');
+    cateBtn.style.display = 'none';
+    // cate radio
+    const cateRadio = document.createElement('input');
+    cateRadio.id = cateId;
+    cateRadio.type = 'radio';
+    cateRadio.name = _name;
+    cateRadio.value = 'category';
+  
+    // cate label
+    const cateLabel = document.createElement('label');
+    cateLabel.htmlFor = cateId;
+    cateLabel.classList.add('material-icons');
+    cateLabel.textContent = 'category';
+  
+    cateBtn.appendChild(cateRadio);
+    cateBtn.appendChild(cateLabel);
+  
+    // add into view
+    view.appendChild(cateBtn);
+    /* create cate btn END */
+  
+    /* create cate btn START */
+    const sortId = randomId();
+    const sortBtn = document.createElement('div');
+    sortBtn.style.display = 'none';
+    const sortRadio = document.createElement('input');
+    sortRadio.id = sortId;
+    sortRadio.type = 'radio';
+    sortRadio.name = _name;
+    sortRadio.value = 'sort';
+  
+    const sortLabel = document.createElement('label');
+    sortLabel.htmlFor = sortId;
+    sortLabel.classList.add('material-icons');
+    sortLabel.textContent = 'sort';
+  
+    sortBtn.appendChild(sortRadio);
+    sortBtn.appendChild(sortLabel);
+  
+    // add into view
+    view.appendChild(sortBtn);
+    /* create sort btn END */
+  
+    /* create search bar START */
+    // text input
+    const searchInput = document.createElement('input');
+    searchInput.type = 'text';
+    searchInput.placeholder = 'Search By Name/Creator';
+  
+    // search btn
+    const searchBtn = document.createElement('div');
+    searchBtn.classList.add('material-icons');
+    searchBtn.textContent = 'find_in_page';
+  
+    // add input and btn into ciew
+    view.appendChild(searchInput);
+    view.appendChild(searchBtn);
+    /* create search bar END */
+  
+    /* create check all START */
+    const chkAll = document.createElement('input');
+    chkAll.style.display = 'none';
+    chkAll.type = 'checkbox';
+    chkAll.id = 'all';
+    chkAll.dataset.type = 'all';
+    view.appendChild(chkAll);
+    /* create check all END */
+  
+    // return obj for switch layer views
+    const viewRadios = {};
+    viewRadios.name = _name;
+    viewRadios.list = [
+      {
+        id: cateId,
+        elt: cateRadio, // categorical view radio btn
+      },
+      {
+        id: sortId,
+        elt: sortRadio, // sortable view radio btn
+      },
+    ];
+  
+    // return obj for search bar
+    const searchBar = {};
+    searchBar.elt = view;
+    searchBar.text = searchInput;
+    searchBar.btn = searchBtn;
+  
+    // return obj for check all
+  
+    return {
+      view: view,
+      viewRadios: viewRadios, // view switch
+      searchBar: searchBar, // searchbar
+      checkAll: chkAll, // check all
+    };
+  };
+  
+  /* For control area functions END */
+  /**
+   * Set data model and automatically refresh UI.
+   * @param {Object[]} data
+   *        the data set of the layers.
+   * @param {String} data.id
+   *        layer's id
+   * @param {String} data.name
+   *        layer's name
+   * @param {String} data.typeId
+   *        layer's type id
+   * @param {String} data.typeName
+   *        layer's type name
+   *
+   */
+  LayersViewer.prototype.setData = function(data) {
+    this.setting.data = data;
+    this.update();
+  };
+  /**
+   * @private
+   * update the UI according to the data model
+   */
+  LayersViewer.prototype.update = function() {
+    // this.setting.data = data;
+    // this.__covertData();
+    this.__refreshUI();
+  };
+  
+  /**
+   * @private
+   * search event
+   * @param  {[type]} e [description]
+   */
+  LayersViewer.prototype.__search = function(e) {
+    // show all li with leaf class
+    const human = [];
+    for (const [key, data] of Object.entries(
+        this.setting.categoricalData['human'].items,
+    )) {
+      human.push(...data.items);
+    }
+  
+    const ruler = this.setting.categoricalData['ruler'].items;
+    const heatmap = this.setting.categoricalData['heatmap'].items;
+    const segmentation = this.setting.categoricalData['segmentation'].items;
+    const list = [...human, ...ruler, ...heatmap, ...segmentation];
+  
+    list.forEach((data) => {
+      data.elt.style.display = 'flex';
+    });
+  
+    const pattern = this.searchBar.text.value;
+  
+    const regex = new RegExp(pattern, 'gi');
+    const checkedType = [
+      ...this.searchList.querySelectorAll('input:checked'),
+    ].map((elt) => elt.value);
+    list
+        .filter((d) => d.item.typeName == 'human' || d.item.typeName == 'ruler')
+        .forEach((data) => {
+          if (
+            !data.item.name.match(regex) &&
+          !(data.item.creator && data.item.creator.match(regex))
+          ) {
+            data.elt.style.display = 'none';
+          }
+          if (
+            data.item.typeName == 'human' &&
+          !checkedType.includes(data.item.shape)
+          ) {
+            data.elt.style.display = 'none';
+          }
+        });
+  };
+  
+  /*
+      convert og/raw data to categorical model/data
+  */
+  // LayersViewer.prototype.__covertData = function() {
+  //   if (!this.setting.data) {
+  //     console.warn(`${this.className}: No Raw Data`);
+  //     // return;
+  //   }
+  //   this.setting.categoricalData = this.setting.data.reduce(function(model, d) {
+  //     const item = d.item;
+  //     if (!model[item.typeId]) {
+  //       model[item.typeId] = {
+  //         item: {id: item.typeId, name: item.typeName},
+  //         items: [],
+  //       };
+  //     }
+  //     model[item.typeId].items.push(d);
+  //     return model;
+  //   }, {});
+  // };
+  
+  // expand or collapse layer list
+  LayersViewer.prototype.__switch = function(e) {
+    const nextElt = e.target.parentNode.nextElementSibling;
+    if (nextElt.style.display == 'none') {
+      nextElt.style.display = null;
+      e.target.innerHTML = 'keyboard_arrow_down';
+    } else {
+      nextElt.style.display = 'none';
+      e.target.innerHTML = 'keyboard_arrow_right';
+    }
+  };
+  
+  //
+  LayersViewer.prototype.__change = function(e) {
+    // confirm TODO
+    const dataset = e.target.dataset;
+    const id = dataset.id;
+    const type = dataset.type;
+    const name = dataset.name;
+    const checked = e.target.checked;
+  
+    switch (type) {
+      case 'root':
+        var items;
+        var root;
+        if (dataset.root == 'human') {
+          root = dataset.root;
+          items = this.setting.categoricalData['human'].items[dataset.id].items;
+        } else {
+          root = id;
+          items = this.setting.categoricalData[id].items;
+        }
+  
+        items.forEach((d) => {
+          if (d.elt.style.display == 'none') return;
+          d.isShow = checked;
+          d.elt.lastChild.checked = checked;
+          if (checked) {
+            d.elt.firstChild.style.display = '';
+          } else {
+            d.elt.firstChild.style.display = 'none';
+          }
+        });
+        this.setting.rootCallback.call(null, {
+          root,
+          parent: id,
+          parentName: name,
+          items,
+        });
+        break;
+      case 'leaf':
+        var data;
+        if (dataset.parent && dataset.root == 'human') {
+          // human annotation
+          data = this.setting.categoricalData['human'].items[
+              dataset.parent
+          ].items.find((d) => d.item.id == id);
+        } else {
+          const cate = dataset.cate;
+          data = this.setting.categoricalData[cate].items.find(
+              (d) => d.item.id == id,
+          );
+        }
+        if (!data) return;
+        data.isShow = checked;
+        data.elt.lastChild.checked = checked;
+  
+        const location = e.target.parentElement.querySelector('div.location');
+        if (location && checked) {
+          location.style.display = 'block';
+        } else if (location && !checked) {
+          location.style.display = 'none';
+        }
+  
+        this.setting.callback.call(null, [data]);
+        break;
+      default:
+    }
+  };
+  
+  // TODO
+  LayersViewer.prototype.add = function() {};
+  // TODO
+  LayersViewer.prototype.remove = function() {};
+  
\ No newline at end of file
diff --git a/apps/mini/tut.js b/apps/mini/tut.js
new file mode 100644
index 000000000..8e135ad9c
--- /dev/null
+++ b/apps/mini/tut.js
@@ -0,0 +1,147 @@
+var tour = new Tour({
+  name: 'Tour',
+  steps: [{
+    element: 'label[title=\'Applications\']',
+    title: 'Annotations',
+    content: 'Opens the Annotation panel,'+
+    ' where you can select which annotation set to view,'+
+    ' name that annotation set, add optional notes about'+
+    ' the annotation set, save the annotation set, and reset the panel to its original state.',
+    placement: 'auto bottom',
+    smartPlacement: true,
+  },
+  {
+    element: 'label[title=\'Layers\']',
+    title: 'Layer Manager',
+    content: 'Opens the Layers Manager panel,'+
+    ' where you can select which layers to view.',
+    placement: 'auto bottom',
+    smartPlacement: true,
+  },
+  {
+    element: 'i[title=\'Home\']',
+    title: 'Home',
+    content: 'Return to the data table so that'+
+    ' you can open another slide.',
+    placement: 'auto bottom',
+    smartPlacement: true,
+  },
+  {
+    element: 'label[title=\'Draw\']',
+    title: 'Draw',
+    content: 'Draw thin lines, thick lines, or polygons on the image.'+
+    ' Annotations can also be computer aided using the Smart-pen tool. Draw them, stretch them, remove them.'+
+    ' To maintain the integrity of measurements, avoid drawing shapes that overlap or intersect one another.',
+    placement: 'auto bottom',
+    smartPlacement: true,
+  },
+  {
+    element: 'label[title=\'Magnifier\']',
+    title: 'Magnifier',
+    content: 'The Magnifier works like a magnifying glass and allows'+
+    ' you to see the slide at normal magnification (1.0), low magnification (0.5),'+
+    ' or high magnification (2.0). Click a magnification level and place the'+
+    ' bounding box on the area of the slide you want to magnify.',
+    placement: 'auto bottom',
+    smartPlacement: true,
+  },
+  {
+    element: 'label[title=\'Measurement\']',
+    title: 'Measurement',
+    content: 'Drag this tool on the slide to learn the measurement in micrometers.',
+    placement: 'auto bottom',
+    smartPlacement: true,
+  },
+  {
+    element: 'i[title=\'Share View\']',
+    title: 'Share View',
+    content: 'Opens a window with a URL to the current presentation state of the'+
+    ' slide including the magnification level, layers that are currently open, and your position on the image.',
+    placement: 'auto bottom',
+    smartPlacement: true,
+  },
+  {
+    element: 'label[title=\'Side By Side Viewer\']',
+    title: 'Side By Side Viewer',
+    content: 'Shows the Layer Manager panel, the left and right'+
+    ' layers, and inset window. For the right and left layer, select which layer you want to view.',
+    placement: 'auto bottom',
+    smartPlacement: true,
+  },
+  {
+    element: 'i[title=\'Heat Map\']',
+    title: 'Heat Map',
+    content: 'For a slide with heatmap data, opens the choices of heatmaps available,'+
+    ' as well as ways of displaying the heatmaps.'+
+    ' The gradient shows all of the values on the selected spectrum for the field you selected.'+
+    ' Contains a heatmap edit pen function.',
+    placement: 'auto bottom',
+    smartPlacement: true,
+  },
+  {
+    element: 'i[title=\'Labeling\']',
+    title: 'Labeling',
+    content: 'Use this tool to draw a circle or rectangle around a tumor region,'+
+    ' measure an area on the slide, and download labels.'+
+    ' The Labeling tool has its own toolbar with tools in the following order from left to right:'+
+    ' return to the previous slide, place a square on the slide, place a circle on the slide,'+
+    ' measure an area, and download labels.'+
+    ' Click the left arrow at the far right of the toolbar to hide it,'+
+    ' then click the right arrow to show it.',
+    placement: 'auto bottom',
+    smartPlacement: true,
+  },
+  {
+    element: 'i[title=\'Segment\']',
+    title: 'Segment',
+    content: 'This tool allows you to display, count, and export nuclear segmentations on the image.'+
+    ' Clicking this tool opens the following custom toolbar.',
+    placement: 'auto bottom',
+    smartPlacement: true,
+  },
+  {
+    element: 'i[title=\'Predict\']',
+    title: 'Model',
+    content: 'Show results from a pre-trained tensorflow compatible model on a ROI of the slide.',
+    placement: 'auto bottom',
+    smartPlacement: true,
+  },
+  {
+    element: 'i[title=\'Download Slide\']',
+    title: 'Download Slide',
+    content:
+        'Download the slide image to your system',
+    placement: 'auto bottom',
+    smartPlacement: true,
+  },
+  {
+    element: 'i[title=\'Slide Capture\']',
+    title: 'Slide Capture',
+    content: 'Take Screenshot of the slide.',
+    placement: 'auto bottom',
+    smartPlacement: true,
+  },
+  {
+    element: 'i[title=\'Tutorial\']',
+    title: 'Tutorial',
+    content: 'Click here to start viewer Tour.',
+    placement: 'auto bottom',
+    smartPlacement: true,
+  }],
+  template: '<div class=\'popover tour\'><div class=\'arrow\' style=\'border-bottom-color:rgb(54, 95, 156);\'>'+
+  '</div><h3 class=\'popover-title\' '+
+  'style=\'color:white;background:rgb(54, 95, 156);font-family: sans-serif;text-align: center;\'>'+
+  '</h3><div class=\'popover-content\' style=\'color: black;font-family: sans-serif;text-align: justify;\'>'+
+  '</div><div class=\'popover-navigation\' style=\'display:flex\'>'+
+  '<div style=\'margin:auto;\'><button class=\'btn btn-default\' data-role=\'prev\'>'+
+  '« Prev</button><span data-role=\'separator\'>|</span>'+
+  '<button class=\'btn btn-default\' data-role=\'next\'>Next »</button></div>'+
+  '</div><div style=\'width:100%;display: flex;margin-bottom: 5px;\'>'+
+  '<button class=\'btn btn-default\' data-role=\'end\' style=\'margin:auto;\'>End tour</button></div></div>',
+  backdrop: true,
+  // resets tour always to resume always from the beginning
+  onEnd: function reset() {
+    window.localStorage.setItem('Tour_current_step', 0);
+  },
+});
+tour.init();
diff --git a/apps/mini/uicallbacks.js b/apps/mini/uicallbacks.js
new file mode 100644
index 000000000..e24265d19
--- /dev/null
+++ b/apps/mini/uicallbacks.js
@@ -0,0 +1,2405 @@
+/*
+UI and Core callback and hook
+all functions help the UI and Core part together that makes workflows.
+*/
+
+// UI callback functions list
+
+/**
+ * Toggles side-by-side viewer
+ * @param {Object} opt
+ */
+function toggleViewerMode(opt) {
+  if (opt.checked) {
+    // turn off preset label
+    toolsOff();
+
+    // turn off magnifier
+    // magnifierOff();
+    // turn off measurement
+    // measurementOff();
+
+    // open layers menu
+    $UI.toolbar._mainTools[1].querySelector(
+        'input[type=checkbox]',
+    ).checked = true;
+    $UI.layersSideMenu.open();
+
+    // close apps menu
+    $UI.toolbar._mainTools[0].querySelector(
+        'input[type=checkbox]',
+    ).checked = false;
+    $UI.appsSideMenu.close();
+
+    openMinorControlPanel();
+    openSecondaryViewer();
+  } else {
+    $UI.appsSideMenu.close();
+    $UI.layersSideMenu.close();
+    closeMinorControlPanel();
+    closeSecondaryViewer();
+  }
+}
+
+/**
+ * Finds the slide for minor-viewer in side-by-side viewer
+ * @param {Object} size object with height and width
+ */
+function multSelectorAction(size) {
+  // hidden main viewer's bottom right control and get navigator
+  $CAMIC.viewer.controls.bottomright.style.display = 'none';
+  $UI.lockerPanel.style.display = '';
+  $UI.lockerPanel.querySelector('input[type=checkbox]').checked = true;
+  isLock = true;
+  // open new instance camic
+  try {
+    const slideQuery = {};
+    slideQuery.id = $D.params.slideId;
+    slideQuery.name = $D.params.slide;
+    slideQuery.location = $D.params.location;
+    $minorCAMIC = new CaMic('minor_viewer', slideQuery, {
+      // osd options
+      // mouseNavEnabled:false,
+      // panVertical:false,
+      // panHorizontal:false,
+      // showNavigator:false,
+      // customized options
+      // hasZoomControl:false,
+      hasDrawLayer: false,
+      addRulerCallback: onAddRuler,
+      deleteRulerCallback: onDeleteRuler,
+      // hasLayerManager:false,
+      // hasScalebar:false,
+      // states options
+      navigatorHeight: size.height,
+      navigatorWidth: size.width,
+      states: {
+        x: $CAMIC.viewer.viewport.getCenter().x,
+        y:
+          $CAMIC.viewer.viewport.getCenter().y *
+          $CAMIC.viewer.imagingHelper.imgAspectRatio,
+        z: $CAMIC.viewer.viewport.getZoom(),
+      },
+    });
+
+    // synchornic zoom and move
+    // coordinated Viewer - zoom
+    $CAMIC.viewer.addHandler('zoom', synchornicView1, {type: 'zoom'});
+
+    // coordinated Viewer - pan
+    $CAMIC.viewer.addHandler('pan', synchornicView1, {type: 'pan'});
+
+    // loading image
+    $minorCAMIC.loadImg(function(e) {
+      // image loaded
+      if (e.hasError) {
+        $UI.message.addError(e.message);
+      }
+    });
+    $minorCAMIC.viewer.addOnceHandler('tile-drawing', function() {
+      $minorCAMIC.viewer.addHandler('zoom', synchornicView2, {type: 'zoom'});
+      $minorCAMIC.viewer.addHandler('pan', synchornicView2, {type: 'pan'});
+      // create segment display
+      $minorCAMIC.viewer.createSegment({
+        store: $minorCAMIC.store,
+        slide: $D.params.data.name,
+        data: [],
+      });
+    });
+  } catch (error) {
+    Loading.close();
+    console.error(error);
+    $UI.message.addError('Core Initialization Failed');
+    return;
+  }
+}
+
+var active1 = false;
+var active2 = false;
+var isLock = true;
+function synchornicView1(data) {
+  if (active2) return;
+  active1 = true;
+  switch (data.userData.type) {
+    case 'zoom':
+      if (isLock) {
+        $minorCAMIC.viewer.viewport.zoomTo(data.zoom, data.refPoint);
+      } else {
+        $minorCAMIC.viewer.viewport.panTo(
+            $CAMIC.viewer.viewport.getCenter(true),
+        );
+      }
+      break;
+    case 'pan':
+      $minorCAMIC.viewer.viewport.panTo(data.center);
+      break;
+    default:
+      $minorCAMIC.viewer.viewport.zoomTo($CAMIC.viewer.viewport.getZoom());
+      $minorCAMIC.viewer.viewport.panTo($CAMIC.viewer.viewport.getCenter());
+      break;
+  }
+  active1 = false;
+}
+
+function synchornicView2(data) {
+  if (active1) return;
+  active2 = true;
+  switch (data.userData.type) {
+    case 'zoom':
+      if (isLock) {
+        $CAMIC.viewer.viewport.zoomTo(data.zoom, data.refPoint);
+      } else {
+        $CAMIC.viewer.viewport.panTo(
+            $minorCAMIC.viewer.viewport.getCenter(true),
+        );
+      }
+      break;
+    case 'pan':
+      $CAMIC.viewer.viewport.panTo(data.center);
+      break;
+    default:
+      $CAMIC.viewer.viewport.zoomTo($minorCAMIC.viewer.viewport.getZoom());
+      $CAMIC.viewer.viewport.panTo($minorCAMIC.viewer.viewport.getCenter());
+      break;
+  }
+
+  active2 = false;
+}
+
+/**
+ * Opens the side-by-side secondary viewer
+ */
+function openSecondaryViewer() {
+  // ui changed
+  const main = document.getElementById('main_viewer');
+  const minor = document.getElementById('minor_viewer');
+  main.classList.remove('main');
+  main.classList.add('left');
+
+  minor.classList.remove('none');
+  // minor.classList.add('display');
+  minor.classList.add('right');
+
+  const navSize = {
+    height: $CAMIC.viewer.controls.bottomright.querySelector('.navigator').style
+        .height,
+    width: $CAMIC.viewer.controls.bottomright.querySelector('.navigator').style
+        .width,
+  };
+  setTimeout(function() {
+    multSelectorAction(navSize);
+  }, 100);
+}
+
+/**
+ * Closes the side-by-side secondary viewer
+ */
+function closeSecondaryViewer() {
+  // ui changed
+  const main = document.getElementById('main_viewer');
+  const minor = document.getElementById('minor_viewer');
+  main.classList.add('main');
+  main.classList.remove('left');
+  minor.classList.add('none');
+  minor.classList.remove('right');
+  $CAMIC.viewer.controls.bottomright.style.display = '';
+  $UI.lockerPanel.style.display = 'none';
+
+  const li = $UI.toolbar.getSubTool('sbsviewer');
+  li.querySelector('input[type="checkbox"]').checked = false;
+  Loading.close();
+
+  // destory
+  if ($minorCAMIC) {
+    // remove handler
+    $CAMIC.viewer.removeHandler('zoom', synchornicView1);
+    $CAMIC.viewer.removeHandler('pan', synchornicView1);
+
+    // destroy object
+    $minorCAMIC.destroy();
+    $minorCAMIC = null;
+  }
+
+  // hide on layersViewer TODO
+  $UI.layersViewerMinor.toggleAllItems();
+  $UI.layersViewerMinor.setting.data.forEach((d) => delete d.layer);
+}
+
+/**
+ * side menu toggle callback, called from layerManager and annotation side menu
+ * @param {Object} opt
+ */
+function toggleSideMenu(opt) {
+  if (!opt.isOpen) {
+    const id = opt.target.id.split('_')[1];
+    $UI.toolbar.changeMainToolStatus(id, false);
+  }
+}
+
+/**
+ * side menu toggle callback, called from layerManager and annotation side menu
+ * @param {Object} opt
+ */
+
+/**
+ * Home callback for redirecting to table page
+ * @param {Object} data
+ */
+async function goHome(data) {
+  let homeLinksConfig = await $CAMIC.store.getConfigByName("custom_home");
+  if (homeLinksConfig){
+    homeLinks = homeLinksConfig[0].configuration[0]
+    if($D.params.data.study in homeLinks){
+      redirect(homeLinks[$D.params.data.study], `Study Home Page`, 0);
+    } else {
+      redirect($D.pages.home, `Default Home Page`, 0);
+    }
+  } else {
+    redirect($D.pages.home, `Home Page`, 0);
+  }
+}
+
+// --- Annotation Tool ---//
+// pen draw callback
+const label = document.createElement('div');
+label.style.transformOrigin = 'center';
+label.style.height = 0;
+label.style.width = 0;
+
+function draw(e) {
+  if (!$CAMIC.viewer.canvasDrawInstance) {
+    alert('Draw Doesn\'t Initialize');
+    return;
+  }
+  const state = +e.state;
+  const canvasDraw = $CAMIC.viewer.canvasDrawInstance;
+  const target = this.srcElement || this.target || this.eventSource.canvas;
+  if (state) {
+    // on
+
+    // off magnifier
+    // magnifierOff();
+    // off measurement
+    // measurementOff();
+
+    // turn off annotaiton
+    if (state==1) {
+      // show pop-up message to user
+      $UI.message.add('<i class="small material-icons">info</i>For More Options, Right Click Anywhere On The Image', 4000);
+    }
+    if ($CAMIC.status == 'normal') {
+      annotationOn.call(this, state, target);
+      return;
+    }
+    toolsOff();
+    var checkAllToolsOff = setInterval(
+        function() {
+          if ($CAMIC && $CAMIC.status == null) {
+          // all tool has turn off
+            clearInterval(checkAllToolsOff);
+            annotationOn.call(this, state, target);
+          }
+        }.bind(this),
+        100,
+    );
+  } else {
+    // off
+    annotationOff();
+  }
+}
+
+/**
+ * utility function for switching off given tool
+ */
+function toolsOff() {
+  switch ($CAMIC.status) {
+    case 'magnifier':
+      magnifierOff();
+      break;
+    case 'measure':
+      measurementOff();
+      break;
+    case 'normal':
+      annotationOff();
+      break;
+    case 'label':
+      presetLabelOff();
+      break;
+    case 'download_selection':
+      downloadSelectionOff();
+      break;
+  }
+}
+
+function annotationOn(state, target) {
+  if (!$CAMIC.viewer.canvasDrawInstance) return;
+  const canvasDraw = $CAMIC.viewer.canvasDrawInstance;
+  const li = $UI.toolbar.getSubTool('annotation');
+  const {style, model} = $CAMIC.drawContextmenu.getStyle();
+
+  canvasDraw.drawMode = model;
+  canvasDraw.style.color = style.color;
+
+  li.appendChild(label);
+  switch (state) {
+    case 1:
+      spen.menu(65, 0.2);
+      spen.undo.onclick=()=>canvasDraw.__align_undo();
+      // open menu
+      $UI.annotOptPanel._action_.style.display = '';
+      label.style.transform = 'translateY(-12px) translateX(18px)';
+      label.textContent = '1';
+      label.style.color = '';
+      break;
+    case 2:
+      $UI.annotOptPanel._action_.style.display = '';
+      label.style.transform =
+        ' rotate(-90deg) translateX(2px) translateY(13px)';
+      label.textContent = '8';
+      label.style.color = 'white';
+      break;
+    default:
+      // statements_def
+      break;
+  }
+
+  canvasDraw.drawOn();
+  $CAMIC.drawContextmenu.on();
+  $CAMIC.drawContextmenu.open({
+    x: this.clientX,
+    y: this.clientY,
+    target: target,
+  });
+  $CAMIC.status = 'normal';
+  // close layers menu
+  $UI.layersSideMenu.close();
+  // open annotation menu
+  $UI.appsSideMenu.open();
+  // -- START QUIP550 -- //
+  // $UI.appsList.triggerContent('annotation','open');
+  // -- END QUIP550 -- //
+  const input = $UI.annotOptPanel._form_.querySelector('#name');
+  input.focus();
+  input.select();
+}
+
+function annotationOff() {
+  if (!$CAMIC.viewer.canvasDrawInstance) return;
+  const canvasDraw = $CAMIC.viewer.canvasDrawInstance;
+
+  if (
+    canvasDraw._draws_data_.length &&
+    confirm(`Do You Want To Save Annotation Before You Leave?`)
+  ) {
+    saveAnnotation();
+  } else {
+    spen.close();
+    // close menu
+    canvasDraw.clear();
+    canvasDraw.drawOff();
+    $CAMIC.drawContextmenu.off();
+    $UI.appsSideMenu.close();
+    toggleOffDrawBtns();
+    $CAMIC.status = null;
+  }
+}
+
+function toggleOffDrawBtns() {
+  const li = $UI.toolbar.getSubTool('annotation');
+  const lab = li.querySelector('label');
+  const state = +lab.dataset.state;
+  lab.classList.remove(`s${state}`);
+  lab.dataset.state = 0;
+  lab.classList.add(`s0`);
+  if (label.parentNode) li.removeChild(label);
+}
+
+
+function brushOn(d) {
+  if (!$CAMIC.viewer.canvasDrawInstance) return;
+  const bctrl = document.getElementById('bctrl');
+  bctrl.style.display = 'block';
+
+  const canvasDraw = $CAMIC.viewer.canvasDrawInstance;
+  canvasDraw.drawMode = d.mode;
+  canvasDraw.size = [parseInt(d.size), parseInt(d.size)];
+  canvasDraw.style.color = d.color;
+  canvasDraw.brushType = d.type;
+  canvasDraw.drawOn();
+  $CAMIC.status = 'brush';
+
+  $UI.toolbar.getSubTool('brush').querySelector('label').style.color = d.color;
+  //   //close layers menu
+  //   $UI.layersSideMenu.close();
+}
+
+
+// --- Measurement Tool ---//
+/**
+ * Callback measurement tool to toggle measurement tool
+ * @param {Object} data
+ */
+function toggleMeasurement(data) {
+  if (!$CAMIC.viewer.measureInstance) {
+    console.warn('No Measurement Tool');
+    return;
+  }
+  // $UI.message.add(`Measument Tool ${data.checked?'ON':'OFF'}`);
+  if (data.checked) {
+    // trun off the main menu
+    $UI.layersSideMenu.close();
+    if ($CAMIC.status == 'measure') {
+      $CAMIC.viewer.measureInstance.mode = data.status;
+      measurementOn();
+      return;
+    }
+    // turn off annotation
+    toolsOff();
+    var checkAllToolsOff = setInterval(function() {
+      if ($CAMIC && $CAMIC.status == null) {
+        // all tool has turn off
+        clearInterval(checkAllToolsOff);
+        $CAMIC.viewer.measureInstance.mode = data.status;
+        measurementOn();
+      }
+    }, 100);
+    // turn off magnifier
+    // magnifierOff();
+  } else {
+    measurementOff();
+  }
+}
+
+/**
+ * switches download Selection tool on, called from toggleMeasurement
+ */
+function downloadSelectionOn() {
+  if (!$CAMIC.viewer.canvasDrawInstance) return;
+  $CAMIC.viewer.canvasDrawInstance.drawOn();
+  getDrawOption();
+  $CAMIC.viewer.canvasDrawInstance.drawMode = 'rect';
+  $CAMIC.viewer.canvasDrawInstance.style.color = '#000';
+  const li = $UI.toolbar.getSubTool('download_selection');
+  li.querySelector('input[type=checkbox]').checked = true;
+  $CAMIC.status = 'download_selection';
+}
+
+/**
+ * switches downloadSelection tool off, called from toggleMeasurement
+ */
+function downloadSelectionOff() {
+  if (!$CAMIC.viewer.canvasDrawInstance) return;
+  $CAMIC.viewer.canvasDrawInstance.drawOff();
+  $CAMIC.viewer.canvasDrawInstance.clear();
+  setDrawOption();
+  const li = $UI.toolbar.getSubTool('download_selection');
+  li.querySelector('input[type=checkbox]').checked = false;
+  $CAMIC.status = null;
+}
+
+/**
+ * switches measuring tool on, called from toggleMeasurement
+ */
+function measurementOn() {
+  if (!$CAMIC.viewer.measureInstance) return;
+  $CAMIC.viewer.measureInstance.on();
+  const li = $UI.toolbar.getSubTool('measurement');
+  li.querySelector('input[type=checkbox]').checked = true;
+  const value = li.querySelector('.drop_down input[type=radio]:checked').value;
+  if (value=='straight') {
+    li.querySelector('label').textContent = 'straighten';
+  } else if (value=='coordinate') {
+    li.querySelector('label').textContent = 'square_foot';
+  }
+  $CAMIC.status = 'measure';
+}
+
+/**
+ * switches measuring tool off, called from toggleMeasurement
+ */
+function measurementOff() {
+  if (!$CAMIC.viewer.measureInstance) return;
+  $CAMIC.viewer.measureInstance.off();
+  const li = $UI.toolbar.getSubTool('measurement');
+  li.querySelector('input[type=checkbox]').checked = false;
+  $CAMIC.status = null;
+}
+
+// --- Magnifier tool ---//
+/**
+ * Callback magnifier tool to toggle measurement tool
+ * @param {Object} data
+ */
+function toggleMagnifier(data) {
+  if (data.checked) {
+    if ($CAMIC.status == 'magnifier') {
+      // all tool has turn off
+      clearInterval(checkAllToolsOff);
+      magnifierOn(+data.status, this.clientX, this.clientY);
+      // turn off the main menu
+      $UI.layersSideMenu.close();
+      $UI.appsSideMenu.close();
+      return;
+    }
+    // annotation off
+    toolsOff();
+    var checkAllToolsOff = setInterval(
+        function() {
+          if ($CAMIC && $CAMIC.status == null) {
+          // all tool has turn off
+            clearInterval(checkAllToolsOff);
+            magnifierOn(+data.status, this.clientX, this.clientY);
+            // trun off the main menu
+            $UI.layersSideMenu.close();
+            $UI.appsSideMenu.close();
+          }
+        }.bind(this),
+        100,
+    );
+    // measurement off
+    // measurementOff();
+  } else {
+    magnifierOff();
+  }
+}
+
+/**
+ * switches magnifier tool on, called from toggleMagnifier
+ */
+function magnifierOn(factor = 1, x = 0, y = 0) {
+  if (!$UI.spyglass) return;
+  $UI.spyglass.factor = factor;
+  $UI.spyglass.open(x, y);
+  const li = $UI.toolbar.getSubTool('magnifier');
+  li.querySelector('input[type=checkbox]').checked = true;
+  $CAMIC.status = 'magnifier';
+}
+
+/**
+ * switches magnifier tool off, called from toggleMagnifier
+ */
+function magnifierOff() {
+  if (!$UI.spyglass) return;
+  $UI.spyglass.close();
+  const li = $UI.toolbar.getSubTool('magnifier');
+  li.querySelector('input[type=checkbox]').checked = false;
+  $CAMIC.status = null;
+}
+
+// image download
+function imageDownload() {
+  var downloadURL = '../../loader/getSlide/';
+  var store = new Store('../../data/');
+  var id=$D.params.slideId;
+  var fileName = '';
+  store
+      .getSlide(id)
+      .then((response) => {
+        if (response[0]) {
+          if (response[0]['filepath']) {
+            return response[0]['filepath'];
+          }
+          let location = response[0]['location'];
+          return location.substring(
+              location.lastIndexOf('/') + 1,
+              location.length,
+          );
+        } else {
+          throw new Error('Slide not found');
+        }
+      })
+      .then((fileName) => {
+        fetch(downloadURL + fileName, {
+          credentials: 'same-origin',
+          method: 'GET',
+        })
+            .then((response) => {
+              if (response.status == 404) {
+                throw response;
+              } else {
+                return response.blob();
+              }
+            })
+            .then((blob) => {
+              var url = window.URL.createObjectURL(blob);
+              var a = document.createElement('a');
+              a.href = url;
+              a.download = fileName;
+              document.body.appendChild(a);
+              a.click();
+              a.remove(); // afterwards we remove the element again
+              window.URL.revokeObjectURL(blob);
+            })
+            .catch((error) => {
+              console.log(error);
+              alert('Error! Can\'t download file.');
+            });
+      })
+      .catch((error) => {
+        console.log(error);
+      });
+}
+
+/**
+ * share url callback
+ * @param {Object} data
+ */
+function shareURL(data) {
+  const URL = StatesHelper.getCurrentStatesURL(true);
+  window.prompt('Share this link', URL);
+}
+
+/**
+ * main menu changed callback, toggles Layer Manager side app
+ * @param {Object} data
+ */
+function mainMenuChange(data) {
+  if (data.apps) {
+    $UI.appsSideMenu.open();
+  } else {
+    $UI.appsSideMenu.close();
+  }
+
+  if (data.layers) {
+    $UI.layersSideMenu.open();
+  } else {
+    $UI.layersSideMenu.close();
+  }
+
+  if (data.labels) {
+    $UI.labelsSideMenu.open();
+  } else {
+    presetLabelOff();
+  }
+}
+
+function convertHumanAnnotationToPopupBody(notes) {
+  const rs = {type: 'map', data: []};
+  for (let field in notes) {
+    if (notes.hasOwnProperty(field)) {
+      const val = notes[field];
+      field = field
+          .split('_')
+          .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+          .join(' ');
+      rs.data.push({key: field, value: val});
+    }
+  }
+  return rs;
+}
+
+/**
+ * Deletes the annotation with given data
+ * called from removeCallback
+ * @param {Object} data
+ */
+function annoDelete(data, parentType) {
+  alert("Deleting is not allowed")
+}
+
+/**
+ * Callback for deleting annotation
+ * @param {Object} data
+ */
+function deleteCallback(data, parentType) {
+  // remove overlay
+  $D.humanlayers.splice(data.index, 1);
+  // update layer manager
+  $UI.layersViewer.removeItemById(data.id, 'human', parentType);
+  $UI.layersViewerMinor.removeItemById(data.id, 'human', parentType);
+
+  $CAMIC.viewer.omanager.removeOverlay(data.id);
+  if ($minorCAMIC && $minorCAMIC.viewer) {
+    $minorCAMIC.viewer.omanager.removeOverlay(data.id);
+  }
+  // update layers Viewer
+  // $UI.layersViewer.update();
+  // close popup panel
+  $UI.annotPopup.close();
+}
+
+// for support QUIP2.0 Data model - delete callback
+function deleteCallbackOld(data, parentType) {
+  const layer = $D.humanlayers[data.index];
+  // for support QUIP2.0
+  const idx = layer.data.findIndex((d) => d._id.$oid === data.oid);
+  if (idx == -1) return;
+  layer.data.splice(idx, 1);
+
+  // update layer manager
+  $UI.layersViewer.removeItemById(data.id, 'human', parentType);
+  $UI.layersViewerMinor.removeItemById(data.id, 'human', parentType);
+
+  // delete entire layer if there is no data.
+  if (layer.data.length == 0) {
+    $D.humanlayers.splice(data.index, 1);
+    $CAMIC.viewer.omanager.removeOverlay(data.id);
+    if ($minorCAMIC && $minorCAMIC.viewer) {
+      $minorCAMIC.viewer.omanager.removeOverlay(data.id);
+    }
+  }
+
+  $CAMIC.viewer.omanager.updateView();
+  // update layers Viewer
+  // $UI.layersViewer.update();
+  // close popup panel
+  $UI.annotPopup.close();
+}
+
+function sortChange(sort) {
+  $CAMIC.layersManager.sort(sort);
+}
+
+function resetCallback(data) {
+  if ($CAMIC.viewer.canvasDrawInstance._path_index === 0) return;
+  if (confirm(`Do You Want To Clear Markups?`)) {
+    $CAMIC.viewer.canvasDrawInstance.clear();
+  }
+}
+
+function convertToNormalized(points, size, viewer) {
+  const height = Math.round(viewer.imagingHelper.imgHeight);
+  const width = Math.round(viewer.imagingHelper.imgWidth);
+  // convert
+  const normalizedPoints = points.map((p) => [p[0] / width, p[1] / height]);
+  const normalizedSize = [size[0] / width, size[0] / height];
+
+  return {
+    points: normalizedPoints,
+    bound: getBounds(normalizedPoints),
+    size: normalizedSize,
+  };
+}
+
+function convertGeometries(features, data) {
+  const {points, bound, size} = convertToNormalized(
+      features,
+      data.size,
+      $CAMIC.viewer,
+  );
+
+  return {
+    type: 'FeatureCollection',
+    features: [
+      {
+        type: 'Feature',
+        properties: {
+          style: {
+            color: data.color,
+            lineJoin: 'round',
+            lineCap: 'round',
+            isFill: true,
+          },
+          size: size,
+        },
+        geometry: {
+          type: 'LineString',
+          coordinates: [points],
+        },
+        bound: {
+          type: 'Polygon',
+          coordinates: [bound],
+        },
+      },
+    ],
+  };
+}
+
+/**
+ * Callback for saving annotations
+ * called from saveAnnotation
+ * @param {Object} data
+ */
+function annoCallback(data) {
+  spen.close();
+  console.log('save not permitted');
+}
+
+function saveAnnotCallback() {
+  /* reset as default */
+  // clear draw data and UI
+  $CAMIC.viewer.canvasDrawInstance.drawOff();
+  $CAMIC.drawContextmenu.off();
+  toggleOffDrawBtns();
+  $CAMIC.viewer.canvasDrawInstance.clear();
+  // uncheck pen draw icon and checkbox
+  // $UI.toolbar._subTools[1].querySelector('[type=checkbox]').checked = false;
+  // clear form
+  $UI.annotOptPanel.clear();
+
+  // close app side
+  $UI.toolbar._mainTools[0].querySelector('[type=checkbox]').checked = false;
+  $UI.appsSideMenu.close();
+  // -- START QUIP550 -- //
+  // $UI.appsList.triggerContent('annotation','close');
+  // -- END QUIP550 -- //
+  // open layer side
+  $UI.toolbar._mainTools[1].querySelector('[type=checkbox]').checked = true;
+  $UI.layersSideMenu.open();
+  // $UI.layersViewer.update();
+  $CAMIC.status = null;
+}
+function algoCallback(data) {
+  console.log(data);
+}
+
+/**
+ * overlayer manager callback function for show or hide
+ * @param {Object} data
+ */
+const heatmapDefaultColor = '#1034a6';
+
+const drawOptionRecord = {};
+function getDrawOption() {
+  drawOptionRecord.drawMode = $CAMIC.viewer.canvasDrawInstance.drawMode;
+  drawOptionRecord.color = $CAMIC.viewer.canvasDrawInstance.style.color;
+}
+function setDrawOption() {
+  $CAMIC.viewer.canvasDrawInstance.drawMode = drawOptionRecord.drawMode || 'free';
+  $CAMIC.viewer.canvasDrawInstance.style.color = drawOptionRecord.color || '#7cfc00';
+}
+
+function toggleDownloadSelection(data) {
+  // const canvasDraw = $CAMIC.viewer.canvasDrawInstance;
+
+  // if(e.checked) {
+  //   downloadSelectionOn();
+  // } else {
+  //   downloadSelectionOff();
+  // }
+  if (!$CAMIC.viewer.canvasDrawInstance) {
+    console.warn('No Draw Tool');
+    return;
+  }
+  if (data.checked) {
+    // trun off the main menu
+    $UI.layersSideMenu.close();
+    if ($CAMIC.status == 'download_selection') {
+      downloadSelectionOn();
+      return;
+    }
+    // turn off download SelectionOn
+    toolsOff();
+    var checkAllToolsOff = setInterval(function() {
+      if ($CAMIC && $CAMIC.status == null) {
+        // all tool has turn off
+        clearInterval(checkAllToolsOff);
+        downloadSelectionOn();
+      }
+    }, 100);
+    // turn off magnifier
+    // magnifierOff();
+  } else {
+    downloadSelectionOff();
+  }
+}
+
+
+async function callback(data) {
+  const viewerName = this.toString();
+  let camic = null;
+  switch (viewerName) {
+    case 'main':
+      camic = $CAMIC;
+      break;
+    case 'minor':
+      camic = $minorCAMIC;
+      break;
+    default:
+      break;
+  }
+
+  // return;
+  data.forEach(function(d) {
+    const item = d.item;
+    if (item.typeName == 'ruler') {
+      if (!item.data) {
+        loadRulerById(camic, d, null);
+      } else {
+        if (!d.layer) {
+          const [xmin, ymin] = item.data.geometries.features[0].geometry.coordinates[0][0];
+          const [xmax, ymax] = item.data.geometries.features[0].geometry.coordinates[0][2];
+          // create lay and update view
+          d.layer = camic.viewer.measureInstance.addRuler({
+            id: item.id,
+            mode: item.data.properties.mode,
+            rect: {
+              x: xmin,
+              y: ymin,
+              width: xmax-xmin,
+              height: ymax-ymin,
+            },
+            innerHTML: item.data.properties.innerHTML,
+            isShow: d.isShow,
+          });
+        }
+        if (d.isShow) d.layer.element.style.display ='';
+        else d.layer.element.style.display ='none';
+      }
+
+      return;
+    }
+
+    if (item.typeName == 'segmentation') {
+      if (d.isShow) {
+        // add
+        camic.viewer.segment.addSegmentId(item.id);
+      } else {
+        // remove
+        camic.viewer.segment.removeSegmentId(item.id);
+      }
+      return;
+    }
+    if (item.typeName == 'heatmap') {
+      if (
+        $D.heatMapData &&
+        $D.heatMapData.provenance.analysis.execution_id == item.id &&
+        camic.viewer.heatmap
+      ) {
+        // show or hide heatmap
+        if (d.isShow) {
+          camic.viewer.heatmap.on();
+        } else {
+          camic.viewer.heatmap.off();
+        }
+      } else if (
+        $D.heatMapData &&
+        $D.heatMapData.provenance.analysis.execution_id == item.id
+      ) {
+        const opt = {
+          opacity: 0.65, // inputs[2].value,
+          coverOpacity: 0.001,
+          data: $D.heatMapData.data,
+          // editedData:$D.editedDataClusters,
+          mode: 'binal',
+          size: $D.heatMapData.provenance.analysis.size,
+          fields: $D.heatMapData.provenance.analysis.fields,
+          color: heatmapDefaultColor, // inputs[3].value
+        };
+
+        if ($D.heatMapData.provenance.analysis.setting) {
+          opt.mode = $D.heatMapData.provenance.analysis.setting.mode;
+          if ($D.heatMapData.provenance.analysis.setting.field) {
+            opt.currentFieldName =
+              $D.heatMapData.provenance.analysis.setting.field;
+          }
+        }
+        camic.viewer.createHeatmap(opt);
+        if ($D.heatMapData.provenance.analysis.setting &&
+          $D.heatMapData.provenance.analysis.setting.mode=='binal') {
+          camic.viewer.heatmap.setColor($D.heatMapData.provenance.analysis.setting.colors[0]);
+        }
+        if ($D.heatMapData.provenance.analysis.setting &&
+          $D.heatMapData.provenance.analysis.setting.mode=='gradient') {
+          camic.viewer.heatmap.setColors($D.heatMapData.provenance.analysis.setting.colors);
+        }
+      } else {
+        Loading.open(document.body, 'Loading Heatmap Data...');
+        // load heatmap
+        camic.store
+            .getHeatmap($D.params.slideId, item.id)
+            .then(function(data) {
+              if (Array.isArray(data) && data.length > 0) {
+                $D.heatMapData = data[0];
+                const opt = {
+                  opacity: 0.65, // inputs[2].value,
+                  coverOpacity: 0.001,
+                  data: $D.heatMapData.data,
+                  mode: 'binal',
+                  // editedData:$D.editedDataClusters,
+                  size: $D.heatMapData.provenance.analysis.size,
+                  fields: $D.heatMapData.provenance.analysis.fields,
+                  color: heatmapDefaultColor, // inputs[3].value
+                };
+
+                if ($D.heatMapData.provenance.analysis.setting) {
+                  opt.mode = $D.heatMapData.provenance.analysis.setting.mode;
+                  if ($D.heatMapData.provenance.analysis.setting.field) {
+                    opt.currentFieldName =
+                    $D.heatMapData.provenance.analysis.setting.field;
+                  }
+                }
+                camic.viewer.createHeatmap(opt);
+                if ($D.heatMapData.provenance.analysis.setting &&
+                  $D.heatMapData.provenance.analysis.setting.mode=='binal') {
+                  camic.viewer.heatmap.setColor($D.heatMapData.provenance.analysis.setting.colors[0]);
+                }
+                if ($D.heatMapData.provenance.analysis.setting &&
+                  $D.heatMapData.provenance.analysis.setting.mode=='gradient') {
+                  camic.viewer.heatmap.setColors($D.heatMapData.provenance.analysis.setting.colors);
+                }
+              }
+            })
+            .catch(function(error) {
+            // heatmap schema
+              console.error(error);
+            })
+            .finally(function() {
+              Loading.close();
+              if (!$D.heatMapData) {
+                $UI.message.addError('Loading Heatmap Data Is Error');
+              }
+            });
+      }
+
+      // rest other check box
+      const cates =
+        viewerName == 'main' ?
+          $UI.layersViewer.setting.categoricalData :
+          $UI.layersViewerMinor.setting.categoricalData;
+      if (d.isShow) {
+        for (const key in cates) {
+          if (cates.hasOwnProperty(key)) {
+            cate = cates[key];
+            if (cate.item.name == 'heatmap') {
+              cate.items.forEach((i) => {
+                if (d !== i && i.isShow) {
+                  i.elt.querySelector('input[type=checkbox]').checked = false;
+                  i.isShow = false;
+                }
+              });
+            }
+          }
+        }
+      }
+      return;
+    }
+
+    if (!item.data) {
+      // load annotation layer data
+      loadAnnotationById(camic, d, null);
+    } else {
+      if (!d.layer) d.layer = camic.viewer.omanager.addOverlay(item);
+      // remove popup if segment is hidden
+      if ($UI.annotPopup.data && !d.isShow && $UI.annotPopup.data.id===d.item.id) $UI.annotPopup.close();
+      d.layer.isShow = d.isShow;
+      camic.viewer.omanager.updateView();
+    }
+  });
+}
+function minorCallback(data) {
+  console.log(data);
+}
+
+function openMinorControlPanel() {
+  $UI.layersList.displayContent('left', true, 'head');
+  $UI.layersList.triggerContent('left', 'close');
+  $UI.layersList.displayContent('right', true);
+  $UI.layersList.triggerContent('right', 'open');
+}
+
+function closeMinorControlPanel() {
+  $UI.layersList.displayContent('left', false, 'head');
+  $UI.layersList.triggerContent('left', 'open');
+  $UI.layersList.displayContent('right', false);
+  $UI.layersList.triggerContent('right', 'close');
+}
+
+function loadRulerById(camic, rulerData, callback) {
+  const {item, elt} = rulerData;
+  $CAMIC.store
+      .getMarkByIds([item.id], $D.params.slideId, null, item.typeId)
+      .then((data) => {
+        // response error
+        if (data.error) {
+          const errorMessage = `${data.text}: ${data.url}`;
+          console.error(errorMessage);
+          $UI.message.addError(errorMessage, 4000);
+          // delete item form layview
+          removeElement($D.rulerlayers, item.id);
+          $UI.layersViewer.removeItemById(item.id, 'ruler');
+          $UI.layersViewerMinor.removeItemById(item.id, 'ruler');
+          return;
+        }
+
+        // no data found
+        // if(data.length < 1){
+        if (!data[0]) {
+          console.warn(`Ruler: ${item.name}(${item.id}) doesn't exist.`);
+          $UI.message.addWarning(
+              `Ruler: ${item.name}(${item.id}) doesn't exist.`,
+              4000,
+          );
+          // delete item form layview
+          removeElement($D.rulerlayers, item.id);
+          $UI.layersViewer.removeItemById(item.id, 'ruler');
+          $UI.layersViewerMinor.removeItemById(item.id, 'ruler');
+          return;
+        }
+
+        item.data = data[0];
+        if (data[0].provenance&&
+          data[0].provenance.analysis&&
+          data[0].provenance.analysis.coordinate&&
+          data[0].provenance.analysis.coordinate == 'image') {
+          data[0].geometries = ImageFeaturesToVieweportFeatures(
+              camic.viewer,
+              data[0].geometries,
+          );
+        }
+
+        item.data.properties.innerHTML = item.data.properties.innerHTML.split('&lt;').join('<');
+        item.data.properties.innerHTML = item.data.properties.innerHTML.split('&gt;').join('>');
+        item.data.properties.innerHTML = item.data.properties.innerHTML.split('&nbsp;').join(' ');
+        let [xmin, ymin] = item.data.geometries.features[0].geometry.coordinates[0][0];
+        let [xmax, ymax] = item.data.geometries.features[0].geometry.coordinates[0][2];
+
+        // create lay and update view
+        rulerData.layer = camic.viewer.measureInstance.addRuler({
+          id: item.id,
+          mode: item.data.properties.mode,
+          rect: {
+            x: xmin,
+            y: ymin,
+            width: xmax-xmin,
+            height: ymax-ymin,
+          },
+          innerHTML: item.data.properties.innerHTML,
+          isShow: rulerData.isShow,
+        });
+      })
+      .catch((e) => {
+        console.error(e);
+      })
+      .finally(() => {
+        Loading.close();
+      });
+}
+function loadAnnotationById(camic, layerData, parentType, callback) {
+  layerData.item.loading = true;
+  const item = layerData.item;
+
+  Loading.open(document.body, 'Loading Layers...');
+
+  $CAMIC.store
+      .getMarkByIds([item.id], $D.params.slideId, null, item.typeId)
+      .then((data) => {
+        delete item.loading;
+
+        // response error
+        if (data.error) {
+          const errorMessage = `${data.text}: ${data.url}`;
+          console.error(errorMessage);
+          $UI.message.addError(errorMessage, 4000);
+          // delete item form layview
+          removeElement($D.humanlayers, item.id);
+          $UI.layersViewer.removeItemById(item.id, 'human', parentType);
+          $UI.layersViewerMinor.removeItemById(item.id, 'human', parentType);
+          return;
+        }
+
+        // no data found
+        // if(data.length < 1){
+        if (!data[0]) {
+          console.warn(`Annotation: ${item.name}(${item.id}) doesn't exist.`);
+          $UI.message.addWarning(
+              `Annotation: ${item.name}(${item.id}) doesn't exist.`,
+              4000,
+          );
+          // delete item form layview
+          removeElement($D.humanlayers, item.id);
+          $UI.layersViewer.removeItemById(item.id, 'human', parentType);
+          $UI.layersViewerMinor.removeItemById(item.id, 'human', parentType);
+          return;
+        }
+        // for support quip 2.0 data model
+        if (data[0].geometry) {
+        // twist them
+          var image = camic.viewer.world.getItemAt(0);
+          var imgWidth = image.source.dimensions.x;
+          var imgHeight = image.source.dimensions.y;
+          item.data = data.map((d) => {
+            d.geometry.coordinates[0] = d.geometry.coordinates[0].map((point) => {
+              return [
+                Math.round(point[0] * imgWidth),
+                Math.round(point[1] * imgHeight),
+              ];
+            });
+            d.properties = {};
+            d.properties.style = {
+              color: '#000080',
+              lineCap: 'round',
+              lineJoin: 'round',
+              isFill: false,
+            };
+            return {
+              _id: d._id,
+              provenance: d.provenance,
+              properties: d.properties,
+              geometry: d.geometry,
+            };
+          });
+          // if(item) data[0].isShow = item.isShow;
+          item.render = oldAnnoRender;
+          item.clickable = false;
+          item.hoverable = false;
+        } else {
+          if (data[0].provenance &&
+            data[0].provenance.analysis&&
+            (data[0].provenance.analysis.coordinate == undefined||
+              data[0].provenance.analysis.coordinate == 'normalized')) {
+            data[0].geometries = VieweportFeaturesToImageFeatures(
+                camic.viewer,
+                data[0].geometries,
+            );
+          }
+
+          if (data[0].provenance.analysis.isGrid) {
+            const width = $CAMIC.viewer.imagingHelper.imgWidth;
+            const height = $CAMIC.viewer.imagingHelper.imgHeight;
+
+            const feature = data[0].geometries.features[0];
+            const size = feature.properties.size;
+            // const points = feature.geometry.coordinates[0];
+            // const bounds = feature.bound.coordinates[0];
+            feature.properties.size = [
+              Math.round(size[0] * width),
+              Math.round(size[1] * height),
+            ];
+          // feature.geometry.coordinates[0] = points.map(p => [
+          //   Math.round(p[0] * width),
+          //   Math.round(p[1] * height)
+          // ]);
+          // feature.bound.coordinates[0] = bounds.map(p => [
+          //   Math.round(p[0] * width),
+          //   Math.round(p[1] * height)
+          // ]);
+          // item.data = data[0];
+          // item.render = annoBrushRender;
+          } else {
+          // data[0].geometries = VieweportFeaturesToImageFeatures(
+          //   camic.viewer,
+          //   data[0].geometries
+          // );
+          // item.data = data[0];
+          // item.render = annoRender;
+          }
+
+          item.data = data[0];
+          item.render = annoRender;
+        }
+
+        // create lay and update view
+        if (layerData.isShow) {
+          layerData.layer = camic.viewer.omanager.addOverlay(item);
+          camic.viewer.omanager.updateView();
+        }
+
+        if (callback) callback.call(layerData);
+      })
+      .catch((e) => {
+        console.error(e);
+      })
+      .finally(() => {
+        Loading.close();
+      });
+}
+
+/**
+ * Deletes annotation from layer manager view
+ * @param {Object} layerData
+ */
+function removeCallback(layerData, parentType) {
+  item = layerData.item;
+  if (item.typeName == 'ruler') {
+    deleteRulerHandler(item.id);
+    return;
+  }
+  if (item.typeName !== 'human') return;
+  if (!item.data) {
+    // load layer data
+    loadAnnotationById($CAMIC, layerData, parentType, function() {
+      annoDelete({
+        id: layerData.item.id,
+        oid: layerData.item.data._id.$oid,
+        annotation: layerData.item.data.properties.annotation,
+      }, parentType);
+    });
+  } else {
+    annoDelete({
+      id: layerData.item.id,
+      oid: layerData.item.data._id.$oid,
+      annotation: layerData.item.data.properties.annotation,
+    }, parentType);
+  }
+}
+
+/**
+ * Callback for locating annotation on image
+ * @param {Object} layerData
+ */
+function locationCallback(layerData) {
+  let isImageViewer = true;
+  const item = layerData.item;
+  if ((item.typeName !== 'human'&&item.typeName !== 'ruler') || item.data == null) return;
+  if (item.typeName == 'ruler') isImageViewer = false;
+
+  // loaction annotation 2.0
+  if (Array.isArray(item.data)) {
+    let maxx = 0;
+    let maxy = 0;
+    let minx = Number.POSITIVE_INFINITY;
+    let miny = Number.POSITIVE_INFINITY;
+    item.data.forEach((d)=>{
+      d.geometry.coordinates[0].forEach(([x, y])=>{
+        maxx = Math.max(maxx, x);
+        maxy = Math.max(maxy, y);
+        minx = Math.min(minx, x);
+        miny = Math.min(miny, y);
+      });
+    });
+    const bound = [
+      [minx, miny],
+      [maxx, miny],
+      [maxx, maxy],
+      [minx, maxy],
+      [minx, miny],
+    ];
+    locateAnnotation(bound, isImageViewer);
+    return;
+  }
+  //  locate annotation 3.0
+  if (item.data.geometries.features[0].geometry.type == 'Point') {
+    const bound = item.data.geometries.features[0].bound.coordinates;
+    const center = $CAMIC.viewer.viewport.imageToViewportCoordinates(
+        bound[0],
+        bound[1],
+    );
+    $CAMIC.viewer.viewport.panTo(center);
+  } else {
+    const bound = [...item.data.geometries.features[0].bound.coordinates[0]];
+    if (item.data.provenance&&item.data.provenance.analysis&&item.data.provenance.analysis.isGrid) {
+      bound[2] = [bound[2][0] +
+        item.data.geometries.features[0].properties.size[0], bound[2][1] +
+        item.data.geometries.features[0].properties.size[1]];
+    }
+    locateAnnotation(bound, isImageViewer);
+  }
+}
+
+/**
+ * Locates annotation on the image
+ * called from locationCallback
+ * @param {Object} bound
+ */
+function locateAnnotation(bound, isImageViewer) {
+  // if(){
+
+  // }
+  const [minx, miny] = bound[0];
+  const [maxx, maxy] = bound[2];
+  const rectangle = isImageViewer?
+  $CAMIC.viewer.viewport.imageToViewportRectangle(
+      minx,
+      miny,
+      maxx - minx,
+      maxy - miny,
+  ):new OpenSeadragon.Rect(
+      minx,
+      miny,
+      maxx - minx,
+      maxy - miny,
+  );
+  const center = rectangle.getCenter();
+  $CAMIC.viewer.viewport.fitBounds(rectangle);
+
+  setTimeout(() => {
+    const max = $CAMIC.viewer.cazoomctrlInstance.getMaxImageZoom($CAMIC.viewer);
+    const current = $CAMIC.viewer.viewport.viewportToImageZoom(
+        $CAMIC.viewer.viewport.getZoom(),
+    );
+    if (current > max) {
+      $CAMIC.viewer.viewport.zoomTo(
+          $CAMIC.viewer.viewport.imageToViewportZoom(max),
+          center,
+      );
+    }
+  }, 50);
+}
+
+/*
+    collapsible list
+    1. Annotation
+    2. Analytics
+*/
+function getCurrentItem(data) {
+  console.log(data);
+}
+// some fake events callback for demo
+
+function annotationSave() {
+  $UI.message.add('Annotation Saved');
+}
+function algoRun() {
+  $UI.message.add('Algo is running...');
+}
+
+/**
+ * Saves annotation after drawing is stopped
+ */
+function saveAnnotation() {
+  annoCallback.call(null, {
+    id:
+      $UI.annotOptPanel.setting.formSchemas[$UI.annotOptPanel._select_.value]
+          .id,
+    data: $UI.annotOptPanel._form_.value,
+  });
+}
+
+function saveAnalytics() {
+  console.log('saveAnalytics');
+}
+function startDrawing(e) {
+  //
+  if (
+    $UI.toolbar.getSubTool('download_selection') &&
+    $UI.toolbar.getSubTool('download_selection').querySelector('input[type=checkbox]')
+        .checked
+  ) {
+    console.log('start download_selection');
+    return;
+  }
+
+  if (
+    $UI.toolbar.getSubTool('preset_label') &&
+    $UI.toolbar.getSubTool('preset_label').querySelector('input[type=checkbox]')
+        .checked
+  ) {
+    //     ||
+    //   $UI.toolbar.getSubTool("brush").querySelector("input[type=checkbox]")
+    //     .checked
+    // )
+    $CAMIC.viewer.canvasDrawInstance.stop = false;
+  } else {
+    $CAMIC.viewer.canvasDrawInstance.stop = !$UI.annotOptPanel._form_.isValid();
+  }
+  //   $CAMIC.viewer.canvasDrawInstance.stop = $UI.toolbar
+  //     .getSubTool("preset_label")
+  //     .querySelector("input[type=checkbox]").checked
+  //     ? false
+  //     : !$UI.annotOptPanel._form_.isValid();
+  return;
+}
+function downloadSelection() {
+  const chks = $UI.downloadSelectionModal.body.querySelectorAll('input[type=checkbox][name=downloadSelection]:checked');
+  if (!chks.length) {
+    alert('Please Check Annotation to Download.');
+    return;
+  }
+  //
+  const execIds = [];
+  chks.forEach((chk)=>execIds.push(chk.dataset.id));
+  // get annotation by
+  const bbox = $CAMIC.viewer.canvasDrawInstance._draws_data_[0].bound.coordinates[0];
+  const height = $CAMIC.viewer.imagingHelper.imgHeight;
+  const width = $CAMIC.viewer.imagingHelper.imgWidth;
+  const x0 = bbox[0][0]/width;
+  const y0 = bbox[0][1]/height;
+  const x1 = bbox[2][0]/width;
+  const y1 = bbox[2][1]/height;
+  //
+  $CAMIC.store.getMarkByIds(execIds, $D.params.slideId, null, 'computer', null, x0, x1, y0, y1).then((data)=>{
+    const element = document.createElement('a');
+    const blob = new Blob([JSON.stringify(data)], {type: 'application/json'});
+    const uri = URL.createObjectURL(blob);
+    element.setAttribute('href', uri);
+    element.setAttribute('download', `${$D.params.data.name}_${new Date().toISOString()}.json`);
+    element.style.display = 'none';
+    document.body.appendChild(element);
+    element.click();
+    document.body.removeChild(element);
+    hideDownloadSelection();
+  });
+}
+
+function showDownloadSelection() {
+  // get selection area
+  const height = $CAMIC.viewer.imagingHelper.imgHeight;
+  const width = $CAMIC.viewer.imagingHelper.imgWidth;
+  // get annotation by
+  const bbox = $CAMIC.viewer.canvasDrawInstance._draws_data_[0].bound.coordinates[0];
+  const x0 = bbox[0][0]/width;
+  const y0 = bbox[0][1]/height;
+  const x1 = bbox[2][0]/width;
+  const y1 = bbox[2][1]/height;
+  // show up loading
+  $UI.downloadSelectionModal.body.innerHTML = 'Loading ...';
+  $CAMIC.store.markSegmentationCount($D.params.slideId, x0, x1, y0, y1).then((data)=>{
+    if (data&&Array.isArray(data)&&data.length) {
+      createSegmentTable(data);
+    } else {
+      $UI.downloadSelectionModal.body.innerHTML = 'No Data loaded ...';
+    }
+  });
+  $UI.downloadSelectionModal.open();
+}
+function createSegmentTable(data) {
+  $UI.downloadSelectionModal.body.innerHTML = '';
+  $UI.downloadSelectionModal.body.innerHTML = `<table style="width:100%;color:#154081;">
+<thead>
+  <tr>
+    <th>Name</th>
+    <th>Count</th>
+    <th>Download</th>
+  </tr>
+</thead>
+<tbody>
+  ${data.sort((a, b)=> b._id - a._id).map((d)=>`<tr>
+    <td style="text-align:center;">Segmentation / ${d._id}</td>
+    <td style="text-align:center;">${d.count}</td>
+    <td style="text-align:center;"><input data-id=${d._id} name='downloadSelection' type='checkbox' checked></td>
+  </tr>`).join('')}
+</tbody>
+</table>`;
+}
+function hideDownloadSelection() {
+  downloadSelectionOff();
+  $UI.downloadSelectionModal.close();
+}
+
+function stopDrawing(e) {
+  if (
+    $UI.toolbar.getSubTool('download_selection') &&
+    $UI.toolbar.getSubTool('download_selection').querySelector('input[type=checkbox]')
+        .checked
+  ) {
+    //
+    showDownloadSelection();
+    return;
+  }
+
+  // preset label annotation
+  if (
+    $UI.toolbar.getSubTool('preset_label') &&
+    $UI.toolbar.getSubTool('preset_label').querySelector('input[type=checkbox]').checked
+  ) {
+    // save preset label
+    savePresetLabel();
+  } else {
+    // annotation
+    const li = $UI.toolbar.getSubTool('annotation');
+    const state = +li.querySelector('label').dataset.state;
+    if (
+      state === 1 &&
+      $CAMIC.viewer.canvasDrawInstance._draws_data_.length > 0
+    ) {
+      $CAMIC.viewer.canvasDrawInstance.isOn = false;
+    }
+  }
+}
+
+function openHeatmap() {
+  switch (ImgloaderMode) {
+    case 'iip':
+      // hosted
+      hostedHeatmap();
+      break;
+    case 'imgbox':
+      // nano borb
+      imgboxHeatmap();
+      break;
+    default:
+      // statements_def
+      break;
+  }
+}
+function hostedHeatmap() {
+  const slide = $D.params.slideId;
+  const slideName = $D.params.data.name;
+  $CAMIC.store
+      .findHeatmapType(slide)
+  //
+      .then(function(list) {
+        if (typeof list === 'undefined') {
+          list = [];
+        }
+        // get heatmap data
+        if (!list.length) {
+          // No heatmap data
+          $UI.message.addWarning(`<i class="small material-icons">info</i> ${slideName} Has No Heatmap Data.`);
+          return;
+        }
+        createHeatMapList(list);
+      })
+  //
+      .catch(function(error) {
+        console.error(error);
+      })
+  //
+      .finally(function() {
+        if ($D.templates) {
+        // load UI
+        } else {
+        // set message
+          $UI.message.addError('HeatmapList');
+        }
+      });
+}
+
+function imgboxHeatmap() {
+  let slide = $D.params.id;
+  slide = decodeURIComponent(slide);
+  // create file input
+  var element = document.createElement('input');
+  element.setAttribute('type', 'file');
+  element.style.display = 'none';
+  document.body.appendChild(element);
+
+  element.onchange = function(event) {
+    var input = event.target;
+    var reader = new FileReader();
+    reader.onload = function() {
+      var text = reader.result;
+      try {
+        const data = JSON.parse(text);
+
+        var valid = $VALIDATION.heatmap(data);
+        if (!valid) {
+          alert($VALIDATION.heatmap.errors);
+          return;
+        }
+
+        $CAMIC.store.clearHeatmaps();
+
+        data.provenance.image.slide = slide;
+        const execId = data.provenance.analysis.execution_id;
+        Loading.open(document.body, 'Loading Heatmap...');
+        $CAMIC.store
+            .addHeatmap(data)
+            .then((rs) => {
+              window.location.href = `../heatmap/heatmap.html${window.location.search}&execId=${execId}`;
+            })
+            .catch((e) => {
+              $UI.message.addError(e);
+              console.error(e);
+            })
+            .finally(() => {
+              Loading.close();
+            });
+      } catch (e) {
+        console.error(e);
+        Loading.close();
+      }
+    };
+    reader.readAsText(input.files[0]);
+  };
+  element.click();
+  document.body.removeChild(element);
+}
+
+function createHeatMapList(list) {
+  empty($UI.modalbox.body);
+  $UI.modalbox.setHeaderText('HeatMap List');
+  list.forEach((data) => {
+    const execId = data.provenance.analysis.execution_id;
+    const a = document.createElement('a');
+    const params = getUrlVars();
+    a.href = params.mode ?
+      `../heatmap/heatmap.html?slideId=${$D.params.slideId}&execId=${execId}&mode=pathdb` :
+      `../heatmap/heatmap.html?slideId=${$D.params.slideId}&execId=${execId}`;
+    a.textContent = execId;
+    $UI.modalbox.body.appendChild(a);
+    $UI.modalbox.body.appendChild(document.createElement('br'));
+  });
+  $UI.modalbox.open();
+}
+
+
+async function addPresetLabelsHandler(label) {
+  const rs = await $CAMIC.store.addPresetLabels(label).then((d)=>d.result);
+
+  if (rs.ok&&rs.nModified > 0) {
+    $UI.labelsViewer.addLabel(label);
+    $UI.message.add(`Label "${label.type}" Has been Added`);
+  } else {
+    $UI.message.addError('Creating The New Label Has Failed');
+  }
+  $UI.labelsViewer.__switch('view');
+}
+
+async function editPresetLabelsHandler(oldElt, newLabel) {
+  Loading.open($UI.labelsViewer.elt, 'Saving Label ...');
+
+  const rs = await $CAMIC.store.updatePresetLabels(oldElt.dataset.id, newLabel).then((d)=>d.result);
+
+  if (rs.ok) {
+    // update
+    const rs1 = await $CAMIC.store.updateMarksLabel(newLabel.id, newLabel.type).then((d)=>d.result);
+    if (rs1.ok) {
+      // update UI
+      updateMarksLabel(newLabel.id, newLabel.type, $UI.layersViewer);
+      updateMarksLabel(newLabel.id, newLabel.type, $UI.layersViewerMinor);
+
+      //
+      $UI.labelsViewer.setLabels(oldElt, newLabel);
+      $UI.message.add(`Label "${newLabel.type}" Has been Updated`);
+      if (oldElt.classList.contains('selected')) drawLabel({value: 'prelabels', checked: true});
+    } else {
+      $UI.message.addError(`Updating The Marks' Label Has Failed`);
+    }
+  } else {
+    $UI.message.addError('Updating The Label Has Failed');
+  }
+  Loading.close();
+  $UI.labelsViewer.__switch('view');
+}
+function updateMarksLabel(id, name, layersViewer) {
+  const cate = layersViewer.setting.categoricalData.human.items[id];
+  if (cate) {
+    cate.item.name = name;
+    cate.elt.querySelector('label > div').textContent = name;
+    cate.elt.querySelector('input[type=checkbox]').dataset.name = name;
+    cate.items.forEach((e)=>{
+      e.item.name = name;
+      e.item.label.name = name;
+      const newName = `${name}${e.elt.dataset.id}`;
+      e.elt.dataset.title = newName;
+      e.elt.querySelector('label > div').textContent = newName;
+
+      if (e.item.data) {
+        e.item.data.provenance.analysis.name = name;
+        e.item.data.properties.annotations.name = name;
+        e.item.data.properties.annotations.notes = name;
+      }
+    });
+  }
+}
+async function removePresetLabelsHandler(elt, label) {
+  const rs = await $CAMIC.store.removePresetLabels(label.id).then((d)=>d.result);
+  if (rs.ok&&rs.nModified > 0) {
+    $UI.message.add(`Label "${label.type}" Has been removed`);
+    $UI.labelsViewer.removeLabel(label.id);
+  } else {
+    $UI.message.addError(`Deleting The '${label.type}' Label Has Failed`);
+  }
+}
+
+function selectedPresetLabelsHandler(label) {
+  drawLabel({value: 'prelabels', checked: true});
+}
+
+function drawLabel(e) {
+  if (!$CAMIC.viewer.canvasDrawInstance) {
+    alert('Draw Doesn\'t Initialize');
+    return;
+  }
+  const labels = $UI.labelsViewer.getSelectedLabels();
+  if (e.checked) {
+    if ($CAMIC.status == 'label') {
+      presetLabelOn.call(this, labels);
+      return;
+    }
+    // turn off annotation
+    toolsOff();
+
+    var checkAllToolsOff = setInterval(
+        function() {
+          if ($CAMIC && $CAMIC.status == null) {
+          // all tool has turn off
+            clearInterval(checkAllToolsOff);
+            presetLabelOn.call(this, labels);
+          }
+        }.bind(this),
+        100,
+    );
+  } else {
+    // off preset label
+    presetLabelOff();
+  }
+}
+
+function presetLabelOn(label) {
+  if (!$CAMIC.viewer.canvasDrawInstance) return;
+  // open labels viewer
+  mainMenuChange({apps: false, layers: false, labels: true});
+  const canvasDraw = $CAMIC.viewer.canvasDrawInstance;
+  if (!label) {
+    $UI.message.addWarning('No Label Exist. Please Add A Label');
+    $UI.toolbar.getSubTool('preset_label').querySelector('label').style.color = '';
+    canvasDraw.clear();
+    canvasDraw.drawOff();
+    return;
+  }
+
+  spen.menu(65, 0.2);
+  // open menu
+  canvasDraw.drawMode = label.mode;
+  if (label.mode == 'grid') {
+    canvasDraw.size = [parseInt(label.size), parseInt(label.size)];
+  }
+  canvasDraw.style.color = label.color;
+  canvasDraw.drawOn();
+  $CAMIC.status = 'label';
+  $UI.toolbar.getSubTool('preset_label').querySelector('label').style.color =
+    label.color;
+}
+
+function presetLabelOff() {
+  if (!$CAMIC.viewer.canvasDrawInstance) return;
+  const canvasDraw = $CAMIC.viewer.canvasDrawInstance;
+  spen.close();
+  // close spen
+  if (
+    canvasDraw._draws_data_.length &&
+    confirm(`Do You Want To Save Annotation Label Before You Leave?`)
+  ) {
+    savePresetLabel();
+  } else {
+    canvasDraw.clear();
+    canvasDraw.drawOff();
+    $UI.appsSideMenu.close();
+    $UI.labelsSideMenu.close();
+    $CAMIC.status = null;
+  }
+}
+
+function savePresetLabel() {
+  if ($CAMIC.viewer.canvasDrawInstance._path_index === 0) {
+    // toast
+    $UI.message.addWarning('<i class="small material-icons">info</i>'+
+      'No Markup On Annotation. Try Holding And Dragging.', 4000);
+    return;
+  }
+  const data = $UI.labelsViewer.getSelectedLabels();
+  if (!data) {
+    $UI.message.addWarning('No Label Selected. Please select One.', 4000);
+    return;
+  }
+  const execId = randomId();
+  const labelId = data.id;
+  const labelName = data.type;
+  // const parent = data.type;
+  const noteData = {
+    id: execId,
+    labelId: labelId,
+    name: labelName,
+    notes: data.type,
+  };
+  const feature = $CAMIC.viewer.canvasDrawInstance.getImageFeatureCollection()
+      .features[0];
+  let annotJson;
+  if (feature.properties.size) {
+    // brush
+    const values = getGrids(
+        feature.geometry.coordinates[0],
+        feature.properties.size,
+    );
+    const set = new Set();
+    values.map((i) => i.toString()).forEach((v) => set.add(v));
+    const points = Array.from(set).map((d) => d.split(','));
+    annotJson = {
+      creator: getUserId(),
+      created_date: new Date(),
+      provenance: {
+        image: {
+          slide: $D.params.slideId,
+        },
+        analysis: {
+          source: 'human',
+          execution_id: execId, // randomId
+          name: labelName, // labelName
+          labelId: labelId,
+          type: 'label',
+          isGrid: true,
+        },
+      },
+      properties: {
+        annotations: noteData,
+      },
+      geometries: convertGeometries(points, {
+        note: data.type,
+        size: feature.properties.size,
+        color: feature.properties.style.color,
+      }),
+    };
+  } else {
+    // point / polygon / stringLine
+    annotJson = {
+      creator: getUserId(),
+      created_date: new Date(),
+      provenance: {
+        image: {
+          slide: $D.params.slideId,
+        },
+        analysis: {
+          source: 'human',
+          execution_id: execId, // randomId
+          name: labelName, // labelName
+          labelId: labelId,
+          type: 'label',
+        },
+      },
+      properties: {
+        annotations: noteData,
+      },
+      geometries: ImageFeaturesToVieweportFeatures(
+          $CAMIC.viewer,
+          $CAMIC.viewer.canvasDrawInstance.getImageFeatureCollection(),
+      ),
+    };
+  }
+
+  $CAMIC.store
+      .addMark(annotJson)
+      .then((data) => {
+      // server error
+        if (data.error) {
+          $UI.message.addError(`${data.text}:${data.url}`);
+          Loading.close();
+          return;
+        }
+
+        // no data added
+        if (data.count < 1) {
+          Loading.close();
+          $UI.message.addWarning(`Annotation Save Failed`);
+          return;
+        }
+        const __data = data.ops[0];
+        // create layer data
+        const newItem = {
+          id: execId,
+          name: noteData.name,
+          typeId: 'human',
+          typeName: 'human',
+          creator: getUserId(),
+          shape: annotJson.geometries.features[0].geometry.type,
+          isGrid: annotJson.provenance.analysis.isGrid? true: false,
+          label: {
+            id: annotJson.provenance.analysis.labelId,
+            name: annotJson.provenance.analysis.name,
+          },
+          data: null,
+        };
+        $D.humanlayers.push(newItem);
+        $UI.layersViewer.addHumanItem(newItem, 'human', labelId);
+        $UI.layersViewerMinor.addHumanItem(
+            newItem,
+            'human',
+            labelId,
+            $minorCAMIC && $minorCAMIC.viewer ? true : false,
+        );
+
+        __data._id = {$oid: __data._id};
+        addAnnotation(
+            execId,
+            __data,
+            'human',
+            labelId,
+        );
+      })
+      .catch((e) => {
+        Loading.close();
+        console.log('save failed', e);
+      })
+      .finally(() => {
+        $UI.message.addSmall(`Added The '${noteData.name}' Annotation.`);
+      });
+}
+
+function addAnnotation(id, data, type, parent) {
+  const layerData = $UI.layersViewer.getDataItemById(id, type, parent);
+  const layerDataMinor = $UI.layersViewerMinor.getDataItemById(id, type, parent);
+  const item = layerData.item;
+  data.geometries = VieweportFeaturesToImageFeatures(
+      $CAMIC.viewer,
+      data.geometries,
+  );
+  if (data.provenance.analysis.isGrid) {
+    const width = $CAMIC.viewer.imagingHelper.imgWidth;
+    const height = $CAMIC.viewer.imagingHelper.imgHeight;
+
+    const feature = data.geometries.features[0];
+    const size = feature.properties.size;
+    feature.properties.size = [
+      Math.round(size[0] * width),
+      Math.round(size[1] * height),
+    ];
+  }
+  item.data = data;
+  item.render = annoRender;
+  // create lay and update view
+  if (layerData.isShow) {
+    layerData.layer = $CAMIC.viewer.omanager.addOverlay(item);
+    $CAMIC.viewer.omanager.updateView();
+  }
+  if ($minorCAMIC && $minorCAMIC.viewer && layerDataMinor.isShow) {
+    layerDataMinor.layer = $minorCAMIC.viewer.omanager.addOverlay(item);
+    $minorCAMIC.viewer.omanager.updateView();
+  }
+
+  $CAMIC.drawContextmenu.off();
+  $CAMIC.viewer.canvasDrawInstance.clear();
+  // close app side
+  $UI.toolbar._mainTools[0].querySelector('[type=checkbox]').checked = false;
+  $UI.appsSideMenu.close();
+  // $UI.layersViewer.update();
+  // $UI.layersViewerMinor.update();
+}
+
+function onDeleteRuler(ruler) {
+  const id = ruler.element.dataset.id;
+  deleteRulerHandler(id);
+}
+
+function deleteRulerHandler(execId) {
+  alert("deletion not allowed")
+}
+
+
+function onAddRuler(ruler) {
+  const {x, y, width, height} = ruler.getBounds($CAMIC.viewer.viewport);
+  const execId = 'ruler' + randomId();
+  ruler.element.dataset.id = execId;
+  let innerHTML = ruler.element.innerHTML;
+  innerHTML = innerHTML.split('<').join('&lt;');
+  innerHTML = innerHTML.split('>').join('&gt;');
+  innerHTML = innerHTML.split(' ').join('&nbsp;');
+  let rulerJson = {
+    creator: getUserId(),
+    created_date: new Date(),
+    provenance: {
+      image: {
+        slide: $D.params.slideId,
+      },
+      analysis: {
+        source: 'ruler',
+        execution_id: execId,
+        name: execId,
+        type: 'ruler',
+      },
+    },
+    properties: {
+      annotations: {
+        name: execId,
+        notes: 'ruler',
+      },
+      mode: ruler.element.dataset.mode,
+      innerHTML: innerHTML,
+    },
+    geometries: {
+      type: 'FeatureCollection',
+      features: [
+        {
+          type: 'Feature',
+          geometry: {
+            type: 'Polygon',
+            coordinates: [
+              [
+                [
+                  x,
+                  y,
+                ],
+                [
+                  x + width,
+                  y,
+                ],
+                [
+                  x + width,
+                  y + height,
+                ],
+                [
+                  x,
+                  y + height,
+                ],
+                [
+                  x,
+                  y,
+                ],
+              ],
+            ],
+          },
+          bound: {
+            type: 'Polygon',
+            coordinates: [
+              [
+                [
+                  x,
+                  y,
+                ],
+                [
+                  x + width,
+                  y,
+                ],
+                [
+                  x + width,
+                  y + height,
+                ],
+                [
+                  x,
+                  y + height,
+                ],
+                [
+                  x,
+                  y,
+                ],
+              ],
+            ],
+          },
+        },
+      ],
+    },
+
+  };
+
+  console.log("rulers are not saved persistently")
+}
+
+async function rootCallback({root, parent, parentName, items}) {
+  // start a message
+  openLoadStatus(`${root==parent?root:`${root} - ${parentName}`}`);
+  //
+  const viewerName = this.toString();
+  let camic = null;
+  switch (viewerName) {
+    case 'main':
+      camic = $CAMIC;
+      break;
+    case 'minor':
+      camic = $minorCAMIC;
+      break;
+    default:
+      break;
+  }
+
+  parent = parent=='other'?null:parent;
+  // human other
+  var data;
+  // const ids = items.filter(d => d.item.id);
+  const ids = items.reduce(function(rs, d) {
+    if (!d.item.data) rs.push(d.item.id);
+    return rs;
+  }, []);
+  // loading
+  if (ids.length) {
+    // mult rulers
+    try {
+      data = await $CAMIC.store.getMarkByIds(ids, $D.params.slideId, (root=='human'&&parent!==null)?parentName:parent, root);
+
+      if (data.error) { // error
+        closeLoadStatus();
+        const errorMessage = `${data.text}: ${data.url}`;
+        console.error(errorMessage);
+        $UI.message.addError(errorMessage, 4000);
+        return;
+      }
+      // covert the ruler data
+      if (root == 'ruler') {
+        data.forEach((d) => {
+          if (d.provenance&&
+            d.provenance.analysis&&
+            d.provenance.analysis.coordinate&&
+            d.provenance.analysis.coordinate == 'image') {
+            d.geometries = ImageFeaturesToVieweportFeatures(camic.viewer, d.geometries);
+          }
+
+          d.properties.innerHTML = d.properties.innerHTML.split('&lt;').join('<');
+          d.properties.innerHTML = d.properties.innerHTML.split('&gt;').join('>');
+          d.properties.innerHTML = d.properties.innerHTML.split('&nbsp;').join(' ');
+        });
+      } else {
+        // covert the human data
+        data.forEach((d)=>{
+          // for support quip 2.0 data model
+          if (d.geometry) {
+            var image = camic.viewer.world.getItemAt(0);
+            var imgWidth = image.source.dimensions.x;
+            var imgHeight = image.source.dimensions.y;
+
+            // convert coordinates
+            d.geometry.coordinates[0] = d.geometry.coordinates[0].map((point) => {
+              return [
+                Math.round(point[0] * imgWidth),
+                Math.round(point[1] * imgHeight),
+              ];
+            });
+            // set default color
+            d.properties = {};
+            d.properties.style = {
+              color: '#000080',
+              lineCap: 'round',
+              lineJoin: 'round',
+              isFill: false,
+            };
+          } else {
+            // conver coordinate if is `normalized`
+            if (d.provenance &&
+              d.provenance.analysis&&
+              (d.provenance.analysis.coordinate == undefined||
+                d.provenance.analysis.coordinate == 'normalized')) {
+              d.geometries = VieweportFeaturesToImageFeatures( camic.viewer, d.geometries );
+            }
+            // if annotaion is brush then covert the size's coordinates
+            if (d.provenance.analysis.isGrid) {
+              const width = camic.viewer.imagingHelper.imgWidth;
+              const height = camic.viewer.imagingHelper.imgHeight;
+
+              const feature = d.geometries.features[0];
+              const size = feature.properties.size;
+              feature.properties.size = [
+                Math.round(size[0] * width),
+                Math.round(size[1] * height),
+              ];
+            }
+          }
+        });
+      }
+
+      // add to layer
+    } catch (error) {
+      closeLoadStatus();
+      // finish loaded
+      console.error('loading human annotations error', error);
+      $UI.message.addError('loading human annotations error', 4000);
+      return;
+    }
+  }
+
+  if (root == 'ruler') {
+    items.forEach((rulerData) => {
+      const item = rulerData.item;
+      // if no data then find and add to layer
+      if (!item.data) {
+      // TODO change to things else
+        const d = data.find( (d) => d.provenance.analysis.execution_id==item.id);
+        item.data = d;
+        let [xmin, ymin] = d.geometries.features[0].geometry.coordinates[0][0];
+        let [xmax, ymax] = d.geometries.features[0].geometry.coordinates[0][2];
+        // create lay and update view
+        rulerData.layer = camic.viewer.measureInstance.addRuler({
+          id: item.id,
+          mode: d.properties.mode,
+          rect: {
+            x: xmin,
+            y: ymin,
+            width: xmax-xmin,
+            height: ymax-ymin,
+          },
+          innerHTML: item.data.properties.innerHTML,
+          isShow: rulerData.isShow,
+        });
+      }
+      if (rulerData.isShow) rulerData.layer.element.style.display ='';
+      else rulerData.layer.element.style.display ='none';
+    });
+  }
+
+  if (root == 'human') {
+    items.forEach((HumanData) => {
+      const item = HumanData.item;
+
+      if (!item.data) {
+        const d = data.filter( (d) => d.provenance.analysis.execution_id==item.id);
+        item.data = d[0].geometry?d:d[0];
+        if (Array.isArray(item.data)&&item.data[0].geometry) { // 2.0
+          item.render = oldAnnoRender;
+          item.clickable = false;
+          item.hoverable = false;
+        } else {
+          item.render = annoRender;
+        }
+        // HumanData.layer = camic.viewer.omanager.addOverlay(item);
+      }
+      if (!HumanData.layer) HumanData.layer = camic.viewer.omanager.addOverlay(item);
+      HumanData.layer.isShow = HumanData.isShow;
+    });
+
+    camic.viewer.omanager.updateView();
+  }
+  closeLoadStatus();
+}
+
+/* Enhance Tool */
+function enhance(e) {
+  document.querySelector('[title="Enhance"]').previousSibling.checked = true;
+  if (!setEnhance) {
+    // $UI.message.add('<i class="small material-icons">info</i>On Movement, enhance would be undone', 2000);
+    $CAMIC.viewer.addHandler('zoom', unenhance);
+    $CAMIC.viewer.addHandler('pan', unenhance);
+    setEnhance = true;
+  }
+  // Canvas information
+  const canvas = $CAMIC.viewer.canvas.firstChild;
+  const context = canvas.getContext('2d');
+  let width = canvas.width; let height = canvas.height;
+  var img = context.getImageData(0, 0, width, height);
+  var data = img.data;
+
+  if (e.status == 'Histogram Eq') {
+    context.putImageData(clahe(img, 64, 0.015), 0, 0);
+  } else if (e.status == 'Edge') {
+    context.putImageData(edgedetect_sobel(img, 80), 0, 0);
+  } else if (e.status == 'Sharpen') {
+    var filter = [[-1, -1, -1], [-1, 14, -1], [-1, -1, -1]];
+    context.putImageData(applyfilter(img, filter), 0, 0);
+  } else if (e.status == 'Custom') {
+    var input = prompt('Enter the 2D Kernel: Eg : [[1, 0], [0, 1]]'); var f=0;
+    // JSON Parse test
+    try {
+      var filter = JSON.parse(input); var sz = filter[0].length;
+    } catch (e) {
+      alert('Invalid Kernel : ' + input);
+      return;
+    }
+    // 2D array check
+    for (var r=0; r<filter.length; r++) {
+      if (!Array.isArray(filter[r]) || filter[r].length!=sz || sz==0) f=1;
+      else {
+        for (var c = 0; c<filter[r].length; c++) {
+          if (Array.isArray(filter[r][c]))f=1;
+        }
+      }
+    }
+    if (f) {
+      alert('Invalid Kernel : ' + input);
+      return;
+    }
+    // Apply
+    context.putImageData(applyfilter(img, filter), 0, 0);
+  }
+}
+var setEnhance = false;
+function unenhance() {
+  setEnhance = false;
+  $CAMIC.viewer.removeHandler('zoom', unenhance);
+  $CAMIC.viewer.removeHandler('pan', unenhance);
+  document.querySelector('[title="Enhance"]').previousSibling.checked = false;
+}
+
+/* Slide Capture Tool */
+
+async function captureSlide() {
+  const canvas = await captureScreen($CAMIC);
+  // save as jpeg
+  downloadSlideCapture(canvas);
+  toolsOff();
+  $UI.layersSideMenu.close();
+}
+
+function downloadSlideCapture(combiningCanvas) {
+  const imageData = combiningCanvas.toDataURL('image/jpeg');
+  const downloadLink = document.createElement('a');
+  var imgFileName = prompt('Enter filename', 'slideCaptureShot');
+  if (imgFileName == null) {
+    ;
+  } else {
+    if (imgFileName === '') {
+      imgFileName = 'slideCapture';
+    }
+    imgFileName += '.jpeg';
+    downloadLink.download = imgFileName;
+    downloadLink.href = imageData;
+    downloadLink.click();
+  }
+}
+
+/* call back list END */
+/* --  -- */
+/* -- for render anno_data to canavs -- */
+function annoRender(ctx, data) {
+  DrawHelper.draw(ctx, data.geometries.features);
+}
+function oldAnnoRender(ctx, data) {
+  DrawHelper.draw(ctx, data);
+}
+/* --  -- */
diff --git a/apps/mini/viewer.html b/apps/mini/viewer.html
new file mode 100644
index 000000000..dfac92d47
--- /dev/null
+++ b/apps/mini/viewer.html
@@ -0,0 +1,470 @@
+<!DOCTYPE html>
+<html>
+  <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, user-scalable=no"
+    />
+    <!-- Check If we're logged in ok, otherwise, log in for us -->
+    <!-- REMOVE JQUERY AND AJAX AFTER MODERNIZING DICOM PACKAGE-->
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
+    <!-- Thank you -->
+    <script src="../../common/authChecker.js"></script>
+    <script>
+      __auth_check(2);
+    </script>
+    <title>caMicroscope</title>
+    <!-- google material icons css sheet -->
+    <link href="https://fonts.googleapis.com/css2?family=Material+Icons"
+      rel="stylesheet">
+    <!-- common css START -->
+    <link
+      rel="stylesheet"
+      type="text/css"
+      media="all"
+      href="../../css/style.css"
+    />
+    <!-- color picker css -->
+    <link
+      rel="stylesheet"
+      type="text/css"
+      media="all"
+      href="../../common/colorpicker/color-picker.css"
+    />
+    <!-- add pure-form css -->
+    <link
+      rel="stylesheet"
+      type="text/css"
+      media="all"
+      href="../../common/pureform/pure-form.css"
+    />
+    <!-- common css END -->
+
+    <!-- UI components css START -->
+    <!-- message display bar css -->
+    <link
+      rel="stylesheet"
+      type="text/css"
+      media="all"
+      href="../../components/camessage/camessage.css"
+    />
+    <!-- toolbar css -->
+    <link
+      rel="stylesheet"
+      type="text/css"
+      media="all"
+      href="../../components/toolbar/toolbar.css"
+    />
+    <!-- side menu css -->
+    <link
+      rel="stylesheet"
+      type="text/css"
+      media="all"
+      href="../../components/sidemenu/sidemenu.css"
+    />
+    <!-- layers controller css -->
+    <link
+      rel="stylesheet"
+      type="text/css"
+      media="all"
+      href="../../components/layersviewer/layersviewer.css"
+    />
+    <!-- labels controller css -->
+    <link
+      rel="stylesheet"
+      type="text/css"
+      media="all"
+      href="../../components/labelsviewer/labelsviewer.css"
+    />
+    <!-- collapsible list css -->
+    <link
+      rel="stylesheet"
+      type="text/css"
+      media="all"
+      href="../../components/collapsiblelist/collapsiblelist.css"
+    />
+    <!-- operation panel css -->
+    <link
+      rel="stylesheet"
+      type="text/css"
+      media="all"
+      href="../../components/operationpanel/operationpanel.css"
+    />
+    <!-- mult selector css -->
+    <link
+      rel="stylesheet"
+      type="text/css"
+      media="all"
+      href="../../components/multselector/multselector.css"
+    />
+    <!-- stylecontextmenu css -->
+    <link
+      rel="stylesheet"
+      type="text/css"
+      media="all"
+      href="../../components/simplecontextmenu/simplecontextmenu.css"
+    />
+    <!-- message queue css -->
+    <link
+      rel="stylesheet"
+      type="text/css"
+      media="all"
+      href="../../components/messagequeue/messagequeue.css"
+    />
+    <!-- loading cover css -->
+    <link
+      rel="stylesheet"
+      type="text/css"
+      media="all"
+      href="../../components/loading/loading.css"
+    />
+    <!-- popup panel css -->
+    <link
+      rel="stylesheet"
+      type="text/css"
+      media="all"
+      href="../../components/popuppanel/popuppanel.css"
+    />
+    <!-- add spyglass css -->
+    <link
+      rel="stylesheet"
+      type="text/css"
+      media="all"
+      href="../../components/spyglass/spyglass.css"
+    />
+    <!-- add modalbox css -->
+    <link
+      rel="stylesheet"
+      type="text/css"
+      media="all"
+      href="../../components/modalbox/modalbox.css"
+    />
+    <!-- UI components css END -->
+
+    <!-- osd & core css START -->
+    <!-- zoom control css -->
+    <link
+      rel="stylesheet"
+      type="text/css"
+      media="all"
+      href="../../core/extension/openseadragon-zoom-control/openseadragon-zoom-control.css"
+    />
+    <!-- mesurement tool css -->
+    <link
+      rel="stylesheet"
+      type="text/css"
+      media="all"
+      href="../../core/extension/openseadragon-measurement-tool/openseadragon-measurement-tool.css"
+    />
+    <!-- osd & core css END -->
+
+    <!-- popup css -->
+    <link
+      rel="stylesheet"
+      type="text/css"
+      media="all"
+      href="../../css/popup.css"
+    />
+    <link href="../../common/bootstrap-tour-standalone/bootstrap-tour-standalone.min.css" rel="stylesheet">
+    <!-- tippy theme -->
+    <link rel="stylesheet" href="https://unpkg.com/tippy.js@6/themes/light-border.css" />
+
+    <!--  common js START -->
+    <!-- Smartpen -->
+    <script type="text/javascript" src="../../common/enhance.js"></script>
+    <script type="text/javascript" src="../../common/smartpen/autoalign.js"></script>
+    <link rel="stylesheet" type="text/css" media="all" href="../../common/smartpen/autoalign.css"/>
+    <!-- Smartpen end -->
+
+    <!-- util.js -->
+    <script type="text/javascript" src="../../common/util.js"></script>
+    <script type="text/javascript" src="../../common/DrawHelper.js"></script>
+    <script type="text/javascript" src="../../common/simplify.js"></script>
+    <script type="text/javascript" src="../../common/paths.js"></script>
+    <script type="text/javascript" src="../../common/touchMe.js"></script>
+
+    <!-- add pure-form script -->
+    <script
+      type="text/javascript"
+      src="../../common/pureform/document-register-element.js"
+    ></script>
+    <script
+      type="text/javascript"
+      src="../../common/pureform/pure-form.js"
+    ></script>
+    <!-- color picker js -->
+    <script
+      type="text/javascript"
+      src="../../common/colorpicker/color-picker.js"
+    ></script>
+    <!-- sortable js -->
+    <script
+      type="text/javascript"
+      src="../../common/sortable/Sortable.js"
+    ></script>
+    <!-- AJV json validator engine -->
+    <script type="text/javascript" src="../../common/ajv.js"></script>
+    <!-- IDB helper -->
+    <script type="text/javascript" src="../../common/idb.js"></script>
+
+    <!--  common js END -->
+
+    <!--  components js START -->
+    <!-- message display js -->
+    <script
+      type="text/javascript"
+      src="../../components/camessage/camessage.js"
+    ></script>
+    <!-- toolbar js -->
+    <script
+      type="text/javascript"
+      src="../../components/toolbar/toolbar.js"
+    ></script>
+    <!-- sidemenu js -->
+    <script
+      type="text/javascript"
+      src="../../components/sidemenu/sidemenu.js"
+    ></script>
+    <!-- collapsible list js -->
+    <script
+      type="text/javascript"
+      src="../../components/collapsiblelist/collapsiblelist.js"
+    ></script>
+    <!-- layers controller js, custom for mini viewer -->
+    <script
+      type="text/javascript"
+      src="./layersViewer.js"
+    ></script>
+    <!-- labels controller js -->
+    <script
+      type="text/javascript"
+      src="../../components/labelsviewer/labelsviewer.js"
+    ></script>
+    <!-- operation panel js -->
+    <script
+      type="text/javascript"
+      src="../../components/operationpanel/operationpanel.js"
+    ></script>
+    <!-- loading cover js -->
+    <script
+      type="text/javascript"
+      src="../../components/loading/loading.js"
+    ></script>
+    <!-- stylecontextmenu js -->
+    <script
+      type="text/javascript"
+      src="../../components/simplecontextmenu/simplecontextmenu.js"
+    ></script>
+    <!-- popup panel js -->
+    <script
+      type="text/javascript"
+      src="../../components/popuppanel/popuppanel.js"
+    ></script>
+    <!-- message queue js -->
+    <script
+      type="text/javascript"
+      src="../../components/messagequeue/messagequeue.js"
+    ></script>
+    <!-- mult selector js -->
+    <script
+      type="text/javascript"
+      src="../../components/multselector/multselector.js"
+    ></script>
+    <!-- spyglass -->
+    <script
+      type="text/javascript"
+      src="../../components/spyglass/spyglass.js"
+    ></script>
+    <!-- modalbox -->
+    <script
+      type="text/javascript"
+      src="../../components/modalbox/modalbox.js"
+    ></script>
+    <!--  components js END -->
+
+    <!-- osd & core js START -->
+    <script
+      type="text/javascript"
+      src="../../core/openseadragon/openseadragon.js"
+    ></script>
+    <script
+      type="text/javascript"
+      src="../../core/openseadragon-imaginghelper.min.js"
+    ></script>
+    <script
+      type="text/javascript"
+      src="../../core/openseadragon-scalebar.js"
+    ></script>
+    <script
+      type="text/javascript"
+      src="../../core/openseadragonzoomlevels.js"
+    ></script>
+
+    <!-- core (package/ext) libs -->
+    <script type="text/javascript" src="../../core/StatesHelper.js"></script>
+
+    <script type="text/javascript" src="../../core/Validation.js"></script>
+    <script type="text/javascript" src="../../core/Store.js"></script>
+    <script type="text/javascript" src="../../core/CaMic.js"></script>
+
+    <script
+      type="text/javascript"
+      src="../../core/extension/openseadragon-canvas-draw-overlay.js"
+    ></script>
+    <script
+      type="text/javascript"
+      src="../../core/extension/openseadragon-overlays-manage.js"
+    ></script>
+    <script
+      type="text/javascript"
+      src="../../core/extension/openseadragon-measurement-tool/openseadragon-measurement-tool.js"
+    ></script>
+    <script
+      type="text/javascript"
+      src="../../core/extension/openseadragon-zoom-control/openseadragon-zoom-control.js"
+    ></script>
+    <script
+      type="text/javascript"
+      src="../../core/extension/osd-heatmap-overlay.js"
+    ></script>
+    <script
+      type="text/javascript"
+      src="../../core/extension/osd-segment-overlay.js"
+    ></script>
+
+    <!-- business js -->
+    <!-- <script src="../../dist/packages.js"></script> -->
+    <script type='text/javascript' src='../../common/PathdbMods.js'></script>
+    <script type='text/javascript' src='../../common/LocalStore.js'></script>
+    <script type='text/javascript' src='../../common/NanoBorbMods.js'></script>
+    <script
+      type="text/javascript"
+      src="../../common/dynamicLoadScript.js"
+    ></script>
+    <script src="./uicallbacks.js"></script>
+    <script src="./dataloaders.js"></script>
+    <script src="./init.js"></script>
+    <script src="../../common/bootstrap-tour-standalone/bootstrap-tour-standalone.min.js"></script>
+    <script src="./tut.js"></script>
+    <script src="../../common/html2canvas.min.js"></script>
+  </head>
+  <body>
+    <!-- message-->
+    <div id="cames" style="z-index:600"></div>
+
+    <!-- toolbar -->
+    <div id="ca_tools"></div>
+    <div id="modalbox"></div>
+    <div id="downloadSelectionModal"></div>
+    <!-- main viewer -->
+    <div id="main_viewer" class="main"></div>
+    <div id="minor_viewer" class="none"></div>
+
+    <!-- zoom control -->
+    <div id="zctrl"></div>
+
+    <!-- <div id="bctrl" style="z-index:600;">
+      <button class="reset" style="float: left;">Clear</button
+      ><button class="action" style="float: right;">Save</button>
+    </div> -->
+    <!-- side menu for apps-->
+    <div id="side_apps" style="z-index:600"></div>
+
+    <!-- side menu for layers -->
+    <div id="side_layers" style="z-index:600"></div>
+
+    <!-- side menu for labels -->
+    <div id="labels_layers" style="z-index:600"></div>
+
+    <!-- collapsible list - annotation and analytics -->
+    <div id="collapsiblelist" style="z-index:600"></div>
+    <!-- collapsible list - main/minor (right/left) layers -->
+    <div id="layerslist" style="z-index:600"></div>
+    <!-- overlayer manager -->
+    <div id="overlayers" style="z-index:600"></div>
+
+    <div id="overlayersMinor" style="z-index:600"></div>
+
+    <!-- labels manager -->
+    <div id="labelmanager" style="z-index:600"></div>
+    <!-- Popper & tippy -->
+    <script src="https://unpkg.com/@popperjs/core@2"></script>
+    <script src="https://unpkg.com/tippy.js@6"></script>
+
+  </body>
+
+  <script type="text/javascript">
+    if (detectIE()) {
+      createWarningText(
+        'You are using an <strong>IE/Edge</strong> browser that may be lead to erratic behavior on caMicroscope. Please switch to <a href="https://www.google.com/chrome/">Chrome</a>, <a href="https://www.mozilla.org/en-US/firefox/new/">Firefox</a> or <a href="https://www.apple.com/safari/">Safari</a> browser to improve your experience.'
+      );
+    }
+    //Loading.open(document.body, 'CaMicroscope is initializing...');
+    // get slide id from url
+    $D.params = getUrlVars();
+
+    if ($D.params.mode == 'pathdb') {
+      $D.pages.home = '../../../';
+      $D.pages.table = '../../../';
+    }
+
+    // load if we have at least one slide query element
+    if ($D.params && $D.params.slideId) {
+      // normal initialization starts
+      document.addEventListener("DOMContentLoaded", initialize);
+    } else if (
+      $D.params &&
+      ($D.params.slide ||
+        $D.params.specimen ||
+        $D.params.study ||
+        $D.params.location ||
+        $D.params.collection
+      )
+    ) {
+      let STORE = new Store('../../data/');
+      STORE.findSlide(
+        $D.params.slide,
+        $D.params.specimen,
+        $D.params.study,
+        $D.params.location,
+        null,
+        $D.params.collection
+      )
+        .then(x => {
+          let offset = parseInt($D.params.offset, 10) || 0;
+          if (x.length == 0 || offset >= x.length) {
+            redirect($D.pages.table, "No Slide Found. Redirecting To Table.");
+          } else {
+            newParams = $D.params;
+            delete newParams.data;
+            delete newParams.slide;
+            delete newParams.location;
+            delete newParams.offset;
+            newParams.slideId = x[offset]["_id"]["$oid"];
+            newUrl =
+              window.location.href.split("?")[0] +
+              "?" +
+              objToParamStr(newParams);
+            window.location.href = newUrl;
+          }
+        })
+        .catch(e => {
+          console.warn(e);
+          redirect($D.pages.table, "Redirecting to Table.");
+        });
+      // find the associated slideID
+      // open viewer with that slideID
+    } else {
+      redirect($D.pages.table, "Slide is undefined. Redirecting to Table.");
+    }
+
+    // get states parameters
+    if ($D.params.states) {
+      $D.params.states = StatesHelper.decodeStates($D.params.states);
+    }
+
+  </script>
+</html>
diff --git a/apps/model/model.html b/apps/model/model.html
index c8c541785..4d3b6821a 100644
--- a/apps/model/model.html
+++ b/apps/model/model.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html  lang="en">
 
 <head>
   <meta name="keywords" content="camicroscope, quip"/>
@@ -64,97 +64,97 @@
      __auth_check(2)
    </script>
   <!-- tensorflow.js -->
-  <script type='text/javascript' src='../../common/tf.min.js'></script>
+  <script  src='../../common/tf.min.js'></script>
   <!-- tfjs visulisation -->
-  <script type='text/javascript' src='../../common/tfjs-vis.min.js'></script>
+  <script  src='../../common/tfjs-vis.min.js'></script>
    <!--  common js START -->
    <!-- util.js -->
-  <script type='text/javascript' src='../../common/util.js'></script>
-  <script type='text/javascript' src='../../common/DrawHelper.js'></script>
-  <script type='text/javascript' src='../../common/simplify.js'></script>
-  <script type='text/javascript' src='../../common/paths.js'></script>
+  <script  src='../../common/util.js'></script>
+  <script  src='../../common/DrawHelper.js'></script>
+  <script  src='../../common/simplify.js'></script>
+  <script  src='../../common/paths.js'></script>
   <!-- add pure-form script -->
-  <script type='text/javascript' src='../../common/pureform/document-register-element.js'></script>
-  <script type='text/javascript' src='../../common/pureform/pure-form.js'></script>
+  <script  src='../../common/pureform/document-register-element.js'></script>
+  <script src='../../common/pureform/pure-form.js'></script>
   <!-- color picker js -->
-  <script type='text/javascript' src='../../common/colorpicker/color-picker.js'></script>
+  <script  src='../../common/colorpicker/color-picker.js'></script>
   <!-- sortable js -->
-  <script type='text/javascript' src='../../common/sortable/Sortable.js'></script>
+  <script  src='../../common/sortable/Sortable.js'></script>
   <!-- AJV json validator engine -->
-  <script type='text/javascript' src='../../common/ajv.js'></script>
+  <script  src='../../common/ajv.js'></script>
   <!-- IDB helper -->
-  <script type='text/javascript' src='../../common/idb.js'></script>
+  <script  src='../../common/idb.js'></script>
   <!--  common js END -->
 
   <!--  components js START -->
   <!-- message display js -->
-  <script type='text/javascript' src='../../components/camessage/camessage.js'></script>
+  <script  src='../../components/camessage/camessage.js'></script>
   <!-- toolbar js -->
-  <script type='text/javascript' src='../../components/toolbar/toolbar.js'></script>
+  <script  src='../../components/toolbar/toolbar.js'></script>
   <!-- sidemenu js -->
-  <script type='text/javascript' src='../../components/sidemenu/sidemenu.js'></script>
+  <script src='../../components/sidemenu/sidemenu.js'></script>
     <!-- collapsible list js -->
-    <script type='text/javascript' src='../../components/collapsiblelist/collapsiblelist.js'></script>
+    <script  src='../../components/collapsiblelist/collapsiblelist.js'></script>
   <!-- layers controller js -->
-  <script type='text/javascript' src='../../components/layersviewer/layersviewer.js'></script>
+  <script  src='../../components/layersviewer/layersviewer.js'></script>
   <!-- operation panel js -->
-  <script type='text/javascript' src='../../components/operationpanel/operationpanel.js'></script>
+  <script  src='../../components/operationpanel/operationpanel.js'></script>
   <!-- loading cover js -->
-  <script type='text/javascript' src='../../components/loading/loading.js'></script>
+  <script  src='../../components/loading/loading.js'></script>
   <!-- stylecontextmenu js -->
-  <script type='text/javascript' src='../../components/simplecontextmenu/simplecontextmenu.js'></script>
+  <script  src='../../components/simplecontextmenu/simplecontextmenu.js'></script>
   <!-- popup panel js -->
-  <script type='text/javascript' src='../../components/popuppanel/popuppanel.js'></script>
+  <script  src='../../components/popuppanel/popuppanel.js'></script>
   <!-- message queue js -->
-  <script type='text/javascript' src='../../components/messagequeue/messagequeue.js'></script>
+  <script  src='../../components/messagequeue/messagequeue.js'></script>
   <!-- mult selector js -->
-  <script type='text/javascript' src='../../components/multselector/multselector.js'></script>
+  <script  src='../../components/multselector/multselector.js'></script>
   <!-- spyglass -->
-  <script type='text/javascript' src='../../components/spyglass/spyglass.js'></script>
+  <script src='../../components/spyglass/spyglass.js'></script>
   <!-- script type='text/javascript' src='modelpanel/slider.js'></script -->
-  <script type='text/javascript' src='./modelpanel/modelpanel.js'></script>
+  <script  src='./modelpanel/modelpanel.js'></script>
   <!-- modal box -->
-  <script type="text/javascript" src="../../components/modalbox/modalbox.js"></script>
+  <script src="../../components/modalbox/modalbox.js"></script>
   <!--  components js END -->
 
 
   <!-- osd & core js START -->
-  <script type='text/javascript' src='../../core/openseadragon/openseadragon.js' ></script>
-  <script type='text/javascript' src='../../core/openseadragon-imaginghelper.min.js'></script>
-  <script type='text/javascript' src='../../core/openseadragon-scalebar.js'></script>
-  <script type='text/javascript' src='../../core/openseadragonzoomlevels.js'></script>
+  <script  src='../../core/openseadragon/openseadragon.js' ></script>
+  <script  src='../../core/openseadragon-imaginghelper.min.js'></script>
+  <script  src='../../core/openseadragon-scalebar.js'></script>
+  <script  src='../../core/openseadragonzoomlevels.js'></script>
 
   <!-- core (package/ext) libs -->
-  <script type='text/javascript' src='../../core/StatesHelper.js'></script>
-  <script type='text/javascript' src='../../core/Validation.js'></script>
-  <script type='text/javascript' src='../../core/Store.js'></script>
-  <script type='text/javascript' src='../../core/CaMic.js'></script>
+  <script  src='../../core/StatesHelper.js'></script>
+  <script  src='../../core/Validation.js'></script>
+  <script  src='../../core/Store.js'></script>
+  <script  src='../../core/CaMic.js'></script>
 
-  <script type='text/javascript' src='../../core/extension/openseadragon-canvas-draw-overlay.js'></script>
-  <script type='text/javascript' src='../../core/extension/openseadragon-overlays-manage.js'></script>
-  <script type='text/javascript' src='../../core/extension/openseadragon-measurement-tool/openseadragon-measurement-tool.js'></script>
-  <script type='text/javascript' src='../../core/extension/openseadragon-zoom-control/openseadragon-zoom-control.js'></script>
+  <script  src='../../core/extension/openseadragon-canvas-draw-overlay.js'></script>
+  <script  src='../../core/extension/openseadragon-overlays-manage.js'></script>
+  <script  src='../../core/extension/openseadragon-measurement-tool/openseadragon-measurement-tool.js'></script>
+  <script  src='../../core/extension/openseadragon-zoom-control/openseadragon-zoom-control.js'></script>
 
 
   <!-- business js -->
-  <script type='text/javascript' src='../../common/PathdbMods.js'></script>
-  <script type='text/javascript' src='../../common/LocalStore.js'></script>
-  <script type='text/javascript' src='../../common/NanoBorbMods.js'></script>
-  <script type='text/javascript' src='../../common/dynamicLoadScript.js'></script>
+  <script src='../../common/PathdbMods.js'></script>
+  <script  src='../../common/LocalStore.js'></script>
+  <script src='../../common/NanoBorbMods.js'></script>
+  <script  src='../../common/dynamicLoadScript.js'></script>
   <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
   <!-- <script src="../../dist/imgbox_package.js"></script> -->
-  <script type="text/javascript" src="//stuk.github.io/jszip/dist/jszip.js"></script>
-  <script type="text/javascript" src="//stuk.github.io/jszip-utils/dist/jszip-utils.js"></script>
-  <script type="text/javascript" src="//stuk.github.io/jszip/vendor/FileSaver.js"></script>
-  <script type='text/javascript' src='../../common/sizeof.compressed.js'></script>
+  <script  src="//stuk.github.io/jszip/dist/jszip.js"></script>
+  <script  src="//stuk.github.io/jszip-utils/dist/jszip-utils.js"></script>
+  <script  src="//stuk.github.io/jszip/vendor/FileSaver.js"></script>
+  <script  src='../../common/sizeof.compressed.js'></script>
 
   <!-- Popper & tippy -->
   <script src="https://unpkg.com/@popperjs/core@2"></script>
   <script src="https://unpkg.com/tippy.js@6"></script>
 
   <!-- Smartpen -->
-  <script type="text/javascript" src="../../common/enhance.js"></script>
-  <script type="text/javascript" src="../../common/smartpen/autoalign.js"></script>
+  <script  src="../../common/enhance.js"></script>
+  <script  src="../../common/smartpen/autoalign.js"></script>
   <link rel="stylesheet" type="text/css" media="all" href="../../common/smartpen/autoalign.css"/>
   <!-- Smartpen end -->
 
@@ -180,11 +180,10 @@
 <div id="chngClass"></div> <!-- modal box to change class list -->
 <div id="popup-container"></div>
 <div id="snackbar"></div>
-</body>
 
 <script src='model.js'></script>
 
-<script type="text/javascript">
+<script >
     if(detectIE()){
       createWarningText('You are using an <strong>IE/Edge</strong> browser that may be lead to erratic behavior on caMicroscope. Please switch to <a href="https://www.google.com/chrome/">Chrome</a>, <a href="https://www.mozilla.org/en-US/firefox/new/">Firefox</a> or <a href="https://www.apple.com/safari/">Safari</a> browser to improve your experience.');
     }
@@ -228,4 +227,7 @@
     if($D.params.states)
       $D.params.states = StatesHelper.decodeStates($D.params.states);
 </script>
+</body>
+
+
 </html>
diff --git a/apps/model/model.js b/apps/model/model.js
index 58584a0b2..ad35d55e7 100644
--- a/apps/model/model.js
+++ b/apps/model/model.js
@@ -353,7 +353,7 @@ async 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();
         },
       },
       {
@@ -404,6 +404,10 @@ function initCore() {
     } else {
       $D.params.data = e;
     }
+    $CAMIC.viewer.addHandler('open-failed', function(e) {
+      console.error(e.message, e);
+      redirect($D.pages.table, e.message, 5);
+    });
   });
 
   $CAMIC.store.getSlide($D.params.slideId).then((response) => {
diff --git a/apps/multi/multi.html b/apps/multi/multi.html
index 70c27e734..36420e8ff 100644
--- a/apps/multi/multi.html
+++ b/apps/multi/multi.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html  lang="en">
 <head>
   <script type="text/javascript" src="../../core/openseadragon/openseadragon.js"></script>
   <script src="../../core/Store.js"></script>
diff --git a/apps/port/export.html b/apps/port/export.html
index d79ecc75d..cda842b7f 100644
--- a/apps/port/export.html
+++ b/apps/port/export.html
@@ -1,11 +1,12 @@
 <!DOCTYPE html>
-<html>
+<html  lang="en">
 <head>
   <script src="../../core/Store.js"></script>
   <title>Export Results [caMicroscope]</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
   <style>
-    #exportTitle{
+    .export--header{
       background-color: #17a2b8 !important;
       color: white;
     }
@@ -27,13 +28,23 @@
 </head>
 <body>
 
-  <h1 class="text-center py-5" id="exportTitle">Export Results</h1>
+  <!-- header -->
+  <div class="text-center export--header">
+    <div>
+      <h1 class="text-center py-2 m-0">Export Results</h1>
+      <p class="text-sm">Uncertain about the slide to export? Obtain its ID.</p>
+    </div>
+    <div>
+      <a href="javascript:history.back()" class="btn btn-primary mx-3 btn-sm my-2">Go Back</a>
+    </div>
+  </div>
+
   <div class="form text-center my-5">
   <label for="slide_id">Slide Ids (exact matches, comma delimited):</label>
-  <input type="text" class="mx-1" id="slide_id" name="slide_id">
-  <button id="populate_btn" onclick="populateList()" type="button" class="btn btn-primary mx-3">Get List of Results</button>
-
+  <input type="text" class="mx-1 mt-2" id="slide_id" name="slide_id">
+  <button id="populate_btn" onclick="populateList()" type="button" class="btn btn-primary mx-3 mt-2">Get List of Results</button>
   </div>
+
   <div class="result text-center">
     <h3>Select Results</h3>
     <div id="output"></div>
diff --git a/apps/port/import.html b/apps/port/import.html
index 8e3d89f56..1f26d7a31 100644
--- a/apps/port/import.html
+++ b/apps/port/import.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html  lang="en">
 
 <head>
   <script src="../../core/Store.js"></script>
diff --git a/apps/redir.html b/apps/redir.html
index f0f5b9d5b..3c121d4da 100644
--- a/apps/redir.html
+++ b/apps/redir.html
@@ -1,4 +1,4 @@
-<html>
+<html  lang="en">
 <script src='../common/util.js'></script>
 <script src='../core/Store.js'></script>
 <script src='../common/PathdbMods.js'></script>
diff --git a/apps/segment/segment.css b/apps/segment/segment.css
index 63031bf5a..111a345b3 100644
--- a/apps/segment/segment.css
+++ b/apps/segment/segment.css
@@ -28,7 +28,7 @@ input:focus:invalid {
 }
 
 .error{
-    color: yellow;
+    color: red;
 }
 
 .switch {
diff --git a/apps/segment/segment.html b/apps/segment/segment.html
index d151c635c..b6debc055 100644
--- a/apps/segment/segment.html
+++ b/apps/segment/segment.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html  lang="en">
 
 <head>
   <meta name="keywords" content="camicroscope, quip"/>
diff --git a/apps/segment/segment.js b/apps/segment/segment.js
index e164cbb06..46c92240f 100644
--- a/apps/segment/segment.js
+++ b/apps/segment/segment.js
@@ -313,7 +313,7 @@ async 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();
         },
       },
       {
@@ -371,6 +371,10 @@ function initCore() {
     } else {
       $D.params.data = e;
     }
+    $CAMIC.viewer.addHandler('open-failed', function(e) {
+      console.error(e.message, e);
+      redirect($D.pages.table, e.message, 5);
+    });
   });
 
   $CAMIC.viewer.addOnceHandler('open', function(e) {
diff --git a/apps/signup/signup.css b/apps/signup/signup.css
index 40d071bfb..2ee121828 100644
--- a/apps/signup/signup.css
+++ b/apps/signup/signup.css
@@ -98,6 +98,7 @@ body {
 nav li{
 	transition: background 0.5s; 
 	border-radius: 3px;
+	margin-left: 15px;
 }
 
 
@@ -115,8 +116,20 @@ nav li:not(.active):hover a{
 }
 
 .text-center{
+	font-weight: bold;
+	font-size: 14pt;
+	color: black;
 	cursor: pointer;
 }
+#info{
+	color: black;
+}
+#sub{
+	font-weight:bold;
+	font-size: 14pt;
+	background-color: #17a2b8;
+
+}
 
 @media screen and (max-width:736px) {
 	.signup-form {
diff --git a/apps/signup/signup.html b/apps/signup/signup.html
index 10243698a..ab7ddf4ff 100644
--- a/apps/signup/signup.html
+++ b/apps/signup/signup.html
@@ -1,11 +1,11 @@
 <!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.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 - User Signup</title>
 
     <link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
@@ -16,6 +16,9 @@
     integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0"
     crossorigin="anonymous">
 
+  <!-- common stylings-->
+	<link rel='stylesheet' type='text/css' media='all' href='../common.css'/>
+
     <link rel='stylesheet' type='text/css' media='all' href='../../css/normalize.css'/>
     <link rel='stylesheet' type='text/css' media='all' href='signup.css'/>
     <link rel='stylesheet' type='text/css' media='all' href='../../css/popup.css'/>
@@ -30,8 +33,6 @@
 
 
   </head>
-  <script src="../../core/Store.js"></script>
-  <script src="./signup.js"></script>
 
   <body>
 
@@ -49,12 +50,12 @@
                           <a class="nav-link" href="../table.html"> <i class="fas fa-list-ul"></i>  Slides</a>
                       </li>
                   </ul>
-                  <ul class="navbar-nav ms-auto">
+                  <ul class="navbar-nav ms-auto gap-1">
                       <li class="nav-item link active" style="font-family: sans-serif;">
                           <a class="nav-link" href="./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>
+                          <a class="nav-link" target="_blank" href="https://github.com/camicroscope/caMicroscope/issues"> <i class="fas fa-comment"></i> Feedback</a>
                       </li>
                   </ul>
               </div>
@@ -97,23 +98,25 @@ <h2 style="margin-top: -.5em;">User Signup</h2>
         </select>
 
         <br> <br>
-        <div class="form-group">
+
+        <div class="form-group text-center">
           <button type="submit" id="sub" class="btn btn-primary btn-block btn-lg sub-btn" onclick="addUser()" disabled>
             Please wait ...
           </button>
+          <div class="text-center" onclick="loginPage()" style="margin-top: 0.5em;">Already have an account? </div>
         </div>
         <!-- <p class="small text-center">This form is only useful to Admin users. If you reach this page, it's likely that you tried to log into this instance but lack
           access. Email the administrator if you want to be added.</p> -->
-        <p class="small text-center">
+        <p id="info" class="small text-center;">
           Non-admin users have to submit a request ticket to admins to get their approval to signup new users.
           If you are an Admin, you can directly signup users.
         </p>
       </form>
-      <div class="text-center" onclick="loginPage()">Already have an account? </div>
+      <div class="text-center text-primary" onclick="loginPage()">Already have an account? </div>
+
     </div>
-    <footer class="text-center text-white bg-dark p-3">
-      <p class="p">Copyright © 2021 caMicroscope</p>
-    </footer>
+   
+    <footer id="footer-layout"></footer>
     <!-- popup -->
     <div id="popup-container"></div>
 
@@ -121,6 +124,13 @@ <h2 style="margin-top: -.5em;">User Signup</h2>
             integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" 
             crossorigin="anonymous"></script>
     <script src="../../common/util.js"></script>
+    <script src="../../common/footer.js"></script>
+
+  <script src="../../core/Store.js"></script>
+  <script src="./signup.js"></script>
+
+    <!-- script to call a footer(layout footer in the common > utils folder) function -->
+  <script> insertFooterLayout();</script>
 
   </body>
 </html>
diff --git a/apps/table.css b/apps/table.css
index 7653bb41e..d11cd8d75 100644
--- a/apps/table.css
+++ b/apps/table.css
@@ -87,8 +87,8 @@ nav li:not(.active):hover a {
   color: black !important;
 }
 
-nav li:not(.active):hover{
-	background: white;
+nav li:not(.active):hover {
+  background: white;
 }
 
 .overall {
@@ -100,11 +100,11 @@ nav li:not(.active):hover{
   padding: 0 4px;
 }
 
-.btn2{
-	display: flex;
-	align-items: center;
+.btn2 {
+  display: flex;
+  align-items: center;
 }
-@media screen and (min-width: 480px){
+@media screen and (min-width: 480px) {
   .reload {
     display: block;
   }
@@ -235,3 +235,29 @@ nav li:not(.active):hover{
 .p {
   margin-bottom: 0;
 }
+
+.table {
+  border-collapse: separate;
+  border-spacing: 0; /* Adjust the value to control the spacing between cells */
+}
+
+td {
+  text-align: center; /* or left, right, justify, etc. */
+=======
+
+.d-md-inline-flex{
+  display: flex;
+  justify-content: space-between;
+}
+
+.close {
+  background-color: transparent;
+  border: none;
+}
+
+.close > span {
+  line-height: 1;
+  font-size: 24px;
+
+}
+
diff --git a/apps/table.html b/apps/table.html
index 0ad2b8cb1..8ac3b819d 100644
--- a/apps/table.html
+++ b/apps/table.html
@@ -1,12 +1,12 @@
 <!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='./common.css'/>
 	<!-- Check If we're logged in ok, otherwise, log in for us -->
@@ -24,7 +24,7 @@
 	<script src='../components/loading/loading.js'></script>
 	<script src="./loader/loader.js"></script>
 	<script src="./loader/chunked_upload.js"></script>
-	<script type="text/javascript" src="https://apis.google.com/js/api.js"></script>
+	<script src="https://apis.google.com/js/api.js"></script>
 	<title>CaMicroscope Data Table</title>
 
 	<script src="https://code.jquery.com/jquery-3.4.1.min.js"
@@ -70,9 +70,6 @@
 						<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>
@@ -80,12 +77,12 @@
 
 	<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. View, Edit, and Manage Your Slides Here.</p>
 		<div style="align-content: center;">
 			<div style="align-content: center;">
 				<div class="btn-group" role="group">
-				<button type="button" style="border-color: white;" class="btn btn-secondary bg-white text-dark" title="Slides Table"><i class="fas fa-list-alt"></i>  Slides</button>
-				<a href="./Info.html">	<button style="border-color: white; border-radius: 0 5px 5px 0;" type="button" class="btn btn-secondary bg-info text-light" title="Information Dashboard"><i class="fas fa-info-circle"></i>  Info</button> </a></div>
+				<button type="button" style="border-color: white;" class="btn btn-secondary bg-white text-dark  margin-right: 10px; " title="Slides Table"><i class="fas fa-list-alt"></i>  Slides</button>
+				<a href="./Info.html">	<button style="border-color: white; border-radius: 0 5px 5px 0; margin-left: 10px;" type="button" class="btn btn-secondary bg-info text-light" title="Information Dashboard"><i class="fas fa-info-circle"></i>  Info</button> </a></div>
 			</div>
 		</div>
 	</div>
@@ -132,23 +129,23 @@ <h1 class="h1">caMicroscope</h1>
                 </div>
             </div>
             </div>
-
-            <div class="d-md-inline-flex" style="width:20%;">
+            
+            <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: cadetblue; padding: 7px;" onclick="setDicomParams();"> <i
+                        class="btn btn2 btn-success float-right w-md-100" style="background-color: cadetblue; padding: 7px; margin-right: 5px;" onclick="setDicomParams();"> <i
                             class="fas fa-server"></i>
-                        <span class="">DICOM</span> </button>
+                        <span class="ml-2">&nbsp;DICOM</span> </button>
                 </div>
                 <div class="pl-md-2 pt-2">
-                    <button type="button" class="btn btn2 btn-success float-right w-md-100" style="padding: 7px;"
+                    <button type="button" class="btn btn2 btn-success float-right w-md-100" style="padding: 7px; margin-right: 5px;"
                         onclick="(()=>{location.reload();return false;})()"> <i class="fas fa-sync-alt"></i>
                         <span class="reload">Reload</span> </button>
                 </div>
                 <div>
 			    <div id="slideUploadButton" class="btn-group float-right pl-md-2 pt-2">
-				    <button type="button" class="btn btn-primary " data-bs-toggle="modal"
-			data-bs-target="#upload-dialog" onclick="hidePostButton(); hideCheckButton(); resetUploadForm();" > <i class="fas fa-upload"></i> Upload</button>
+				    <button type="button" class="btn btn-primary d-flex align-items-center" data-bs-toggle="modal"
+			data-bs-target="#upload-dialog" onclick="hidePostButton(); hideCheckButton(); resetUploadForm();" > <i class="fas fa-upload"></i> <span class="">&nbsp;Upload</span></button>
 				    <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
 				    <span class="sr-only">Toggle Dropdown</span>
 				    </button>
@@ -176,10 +173,10 @@ <h5 class="modal-title" id="title-of-dialog-dicom">DICOM Server</h5>
                         </button>
                     </div>
                     <div class="modal-body">
-                        <table class="table table-borderless" cellpadding="5" style="margin-top: 1em" cellspacing="0">
+                        <table class="table table-borderless"  style="margin-top: 1em; padding: 5px;">
                             <tbody>
                                 <tr id="dicomServerRow">
-                                    <td align="right"><b>Server</b></td>
+                                    <td ><b>Server</b></td>
                                     <td><input type="text" class="form-control" disabled=""
                                             name="token" id="dicomServer"></td>
                                 </tr>
@@ -215,10 +212,10 @@ <h5 class="modal-title" id="title-of-dialog">Upload New Slide</h5>
 
                                 <h3>Steps for uploading.</h3>
                                 <ul>
-                                    <li>Select the file as Input. The <b>Token</b> field should be filled automatically, and start uploading.</li>
-                                    <li> Provide the destination filename with extension.</li>
-                                    <li>Click on the <b><i class="fas fa-arrow-right"></i></b> button to get check a preview of the slide  </li>
-                                    <li>Finally <b>Finish Upload</b> to post the slide to caMicroscope</li>
+                                    <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 <b>Finish Upload</b> to complete the process and post the slide to caMicroscope.</li> 
                                 </ul>
                             </div>
                             <div>
@@ -247,16 +244,16 @@ <h3>Steps for uploading.</h3>
                                             </td>
                                         </tr>
                                         <tr id="filenameRow">
-                                            <td align="right"><b>Filename</b></td>
+                                            <td><b>Filename</b></td>
                                         </tr>
                                         <tr id="tokenRow">
-                                            <td align="right"><b>Token</b></td>
+                                            <td ><b>Token</b></td>
                                         </tr>
                                         <tr id="slidenameRow">
-                                            <td align="right"><b>Slidename</b></td>
+                                            <td ><b>Slidename</b></td>
                                         </tr>
                                         <tr id="filterRow">
-                                            <td align="right"><b>Filter (leave blank for public)</b></td>
+                                            <td><b>Filter (leave blank for public)</b></td>
                                         </tr>
                                     </table>
                                     <div id="upload-progress-div" style="display: none; align-content: center;">
@@ -332,13 +329,13 @@ <h5 class="modal-title" id="slideNameChangeModalLabel">Slide name change confirm
 
 </div>
 
-
-<footer class="text-center text-white bg-dark p-3">
-	<p class="p">Copyright © 2021 caMicroscope</p>
-</footer>
+<!-- footer -->
+<footer id="footer-layout"></footer>
 
 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>
 <script src="./table.js"></script>
+    <!-- script to call a footer(layout footer in the common > utils folder) function -->
+<script> insertFooterLayout();</script>
 </body>
 
 </html>
diff --git a/apps/user/user.css b/apps/user/user.css
index b19c0ac44..9cf98df66 100644
--- a/apps/user/user.css
+++ b/apps/user/user.css
@@ -27,3 +27,8 @@ table.dataTable.order-column.stripe tbody tr.even.selected > .sorting_1 {
   background-color: #007bff;
   opacity: 0.5; 
 }*/
+
+
+#table {
+  width: 100%;
+}
diff --git a/apps/user/user.html b/apps/user/user.html
index fbd28ec2e..484d71f6c 100644
--- a/apps/user/user.html
+++ b/apps/user/user.html
@@ -43,7 +43,7 @@
       </div>
     </div>
     <div class="container-fluid p-4">
-      <table id="table" class="display" width="100%"></table>
+      <table id="table" class="display"></table>
     </div>
     <!-- Delete Modal -->
     <div
@@ -111,7 +111,7 @@ <h6 class="modal-title" id="del-label">
                   type="text"
                   class="form-control"
                   id="col-email"
-                  aria-describedby="col-email-tip"
+                    
                   placeholder="Enter A Email"
                 />
                 <div class="invalid-feedback">
@@ -154,24 +154,25 @@ <h6 class="modal-title" id="del-label">
         </div>
       </div>
     </div>
+
+    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
+    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
+    <script
+      src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
+      integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
+      crossorigin="anonymous"
+    ></script>
+    <script
+      src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
+      integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
+      crossorigin="anonymous"
+    ></script>
+    <script
+
+      src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.js"
+    ></script>
+    <script src="./user.js"></script>
   </body>
 
-  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
-  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
-  <script
-    src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
-    integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
-    crossorigin="anonymous"
-  ></script>
-  <script
-    src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
-    integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
-    crossorigin="anonymous"
-  ></script>
-  <script
-    type="text/javascript"
-    charset="utf8"
-    src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.js"
-  ></script>
-  <script src="./user.js"></script>
+  
 </html>
diff --git a/apps/viewer/init.js b/apps/viewer/init.js
index c948b229b..94f89c2b0 100644
--- a/apps/viewer/init.js
+++ b/apps/viewer/init.js
@@ -195,6 +195,10 @@ function initCore() {
   }
 
   $CAMIC.loadImg(function(e) {
+    $CAMIC.viewer.addHandler('open-failed', function(e) {
+      console.error(e.message, e);
+      redirect($D.pages.table, e.message, 5);
+    });
     // image loaded
     if (e.hasError) {
       // if this is a retry, assume normal behavior (one retry per slide)
@@ -253,6 +257,13 @@ function initCore() {
             attributes = data.properties.annotations;
             if (area) attributes.area = area;
             if (circumference) attributes.circumference = circumference;
+
+            const states = StatesHelper.getCurrentStates(isImageCoordinate = true);
+            if (!states) return;
+            attributes.X = states.x;
+            attributes.Y = states.y;
+            attributes.zoom = states.z;
+
             body = convertHumanAnnotationToPopupBody(attributes);
             if (
               data.geometries &&
diff --git a/apps/viewer/viewer.html b/apps/viewer/viewer.html
index 522ab8cd5..72b3fa822 100644
--- a/apps/viewer/viewer.html
+++ b/apps/viewer/viewer.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html  lang="en">
   <head>
     <meta name="keywords" content="camicroscope, quip" />
     <meta charset="utf-8" />
diff --git a/common/PathdbMods.js b/common/PathdbMods.js
index ee59ad32c..6e93c4786 100644
--- a/common/PathdbMods.js
+++ b/common/PathdbMods.js
@@ -57,14 +57,12 @@ async function PathDbMods() {
       throw "no iip path in pathdb data"
     }
     // identifier fields for display name
-    var subject_id = ""
     var image_id = ""
-    var study_id = ""
     if(data.field_subject_id && data.field_subject_id.length >= 1){
-      subject_id = data.field_subject_id[0].value
+      x.specimen = data.field_subject_id[0].value
     }
     if(data.clinicaltrialsubjectid && data.clinicaltrialsubjectid.length >= 1){
-      subject_id = data.clinicaltrialsubjectid[0].value
+      x.specimen = data.clinicaltrialsubjectid[0].value
     }
     if(data.field_image_id && data.field_image_id.length >=1){
       image_id = data.field_image_id[0].value
@@ -73,14 +71,14 @@ async function PathDbMods() {
       image_id = data.imageid[0].value
     }
     if(data.field_study_id && data.field_study_id.length >=1){
-      study_id = data.field_study_id[0].value
+      x.study = data.field_study_id[0].value
     }
     if(data.studyid && data.studyid.length >=1){
-      study_id = data.studyid[0].value
+      x.study = data.studyid[0].value
     }
     // if we have the triple, add it
-    if (subject_id && image_id && study_id){
-      x.name = study_id + ' | ' + subject_id + ' | ' + image_id;
+    if (x.specimen && image_id && x.study){
+      x.name = x.study + ' | ' + x.specimen + ' | ' + image_id;
     }
     return x
   }
diff --git a/common/footer.js b/common/footer.js
new file mode 100644
index 000000000..bf88171cd
--- /dev/null
+++ b/common/footer.js
@@ -0,0 +1 @@
+$('#copy-right-text').html(`Copyright © ${new Date().getFullYear()} caMicroscope`)
\ No newline at end of file
diff --git a/common/util.js b/common/util.js
index 30cc6473a..c695c5af0 100644
--- a/common/util.js
+++ b/common/util.js
@@ -343,6 +343,34 @@ function clickInsideElement(e, className) {
   return false;
 }
 
+
+function getUrlVars() {
+  var vars = {};
+  window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(
+      m,
+      key,
+      value,
+  ) {
+    vars[key.toLowerCase()] = value;
+  });
+
+  var state = Object.assign({}, vars); // Copy the initial state from vars
+
+  return new Proxy({}, {
+    get: function(target, prop) {
+      return state[prop.toLowerCase()];
+    },
+    set: function(target, prop, value) {
+      state[prop.toLowerCase()] = value;
+      return true;
+    },
+    deleteProperty: function(target, prop) {
+      delete state[prop.toLowerCase()];
+      return true;
+    }
+  });
+}
+/**
 function getUrlVars() {
   var vars = {};
   var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(
@@ -354,6 +382,7 @@ function getUrlVars() {
   });
   return vars;
 }
+*/
 
 function ImageFeaturesToVieweportFeatures(viewer, geometries) {
   const rs = {
@@ -1013,6 +1042,11 @@ class Tracker {
     this.__period = period;
     this.__userId = userId;
     this.__slide = slide;
+    this.__viewId = this.generateViewId();
+  }
+
+  generateViewId() {
+    return crypto.randomUUID();
   }
   start() {
     if (!this.__time) {
@@ -1035,6 +1069,7 @@ class Tracker {
     );
 
     this.__camic.store.addLog({
+      viewId: this.__viewId,
       slide: this.__slide,
       user: this.__userId,
       x: Math.round(x),
@@ -1347,3 +1382,17 @@ async function captureScreen(camic, {
 
   return canvas;
 }
+
+// footer content layout
+const currentYear = new Date().getFullYear();
+
+const footerContent = `
+  <p>U24 CA18092401A1, <b>Tools to Analyze Morphology and Spatially Mapped Molecular Data</b></p>
+  <p id='contact'>Spot a Bug? <a href='https://github.com/camicroscope/caMicroscope/issues' target='_blank'>Report it!</a></p>
+  <hr />
+  <p class='copyright'>Copyright &copy; ${currentYear} <span class='company-name'><a href="https://camicroscope.org/" target='_blank'>caMicroscope</a></span></p>
+`;
+
+function insertFooterLayout() {
+  document.getElementById('footer-layout').innerHTML = footerContent;
+}
diff --git a/components/toolbar/toolbar.css b/components/toolbar/toolbar.css
index bbb93c0b4..4ab131a40 100644
--- a/components/toolbar/toolbar.css
+++ b/components/toolbar/toolbar.css
@@ -71,7 +71,7 @@ ul.drop_down {
 }
 
 ul.tools > li:hover ul.drop_down {
-  flex-direction: column;
+  flex-direction: row; /* Consumes less space */
   display: flex;
   width: fit-content;
   width: -moz-fit-content;
diff --git a/components/toolbar/toolbar.js b/components/toolbar/toolbar.js
index a50a6876d..b0b69a891 100644
--- a/components/toolbar/toolbar.js
+++ b/components/toolbar/toolbar.js
@@ -155,12 +155,11 @@ CaToolbar.prototype.__createBtn = function(options) {
   btn.classList.add('md-24');
   btn.textContent = options.icon;
   if (options.title) {
-    btn.title = options.title;
     tippy(btn, {
       content: options.title,
-      placement: 'right',
-      delay: 300,
-      theme: 'light-border',
+      placement: 'bottom',
+      delay: 200,
+      theme: 'dark',
     });
   }
   li.appendChild(btn);
@@ -214,12 +213,11 @@ CaToolbar.prototype.__createCheck = function(options) {
   icon.textContent = options.icon;
   icon.htmlFor = id;
   if (options.title) {
-    icon.title = options.title;
     tippy(icon, {
       content: options.title,
-      placement: 'right',
+      placement: 'bottom',
       delay: 300,
-      theme: 'light-border',
+      theme: 'dark',
     });
   }
   li.appendChild(icon);
@@ -291,12 +289,11 @@ CaToolbar.prototype.__createRadio = function(options) {
 
   icon.htmlFor = id;
   if (options.title) {
-    icon.title = options.title;
     tippy(icon, {
       content: options.title,
-      placement: 'right',
+      placement: 'bottom',
       delay: 300,
-      theme: 'light-border',
+      theme: 'dark',
     });
   }
 
@@ -337,12 +334,11 @@ CaToolbar.prototype.__createMultiStateBtns = function(options) {
   icon.dataset.state = 0;
   icon.textContent = options.icon;
   if (options.title) {
-    icon.title = options.title;
     tippy(icon, {
       content: options.title,
-      placement: 'right',
+      placement: 'bottom',
       delay: 300,
-      theme: 'light-border',
+      theme: 'dark',
     });
   }
   li.appendChild(icon);
@@ -390,12 +386,11 @@ CaToolbar.prototype.__createMultiDropDown = function(options) {
   icon.textContent = options.icon;
   icon.htmlFor = id;
   if (options.title) {
-    icon.title = options.title;
     tippy(icon, {
       content: options.title,
-      placement: 'right',
+      placement: 'bottom',
       delay: 300,
-      theme: 'light-border',
+      theme: 'dark',
     });
   }
   li.appendChild(icon);
@@ -518,12 +513,11 @@ CaToolbar.prototype.__createDropDown = function(options) {
   icon.textContent = options.icon;
   icon.htmlFor = id;
   if (options.title) {
-    icon.title = options.title;
     tippy(icon, {
       content: options.title,
-      placement: 'right',
+      placement: 'left-start',
       delay: 300,
-      theme: 'light-border',
+      theme: 'dark',
     });
   }
   li.appendChild(icon);
diff --git a/core/CaMic.js b/core/CaMic.js
index b9cf3daf5..55d3a5e5b 100644
--- a/core/CaMic.js
+++ b/core/CaMic.js
@@ -196,10 +196,14 @@ class CaMic {
     this.slideId = data['_id']['$oid'];
 
     this.slideName = data['name'];
+    // encode special characters but not dir slashes
+    let loc = data['location'];
+    loc = encodeURIComponent(loc);
+    loc = loc.replaceAll('%2F', '/');
     // insert token if present
-    let iipSrvUrl = '../../img/IIP/raw/?DeepZoom='+ data['location'] + '.dzi';
+    let iipSrvUrl = '../../img/IIP/raw/?DeepZoom='+ loc + '.dzi';
     if (getCookie('token')) {
-      iipSrvUrl = '../../img/IIP/raw/?token=' + getCookie('token') + '&DeepZoom='+ data['location'] + '.dzi';
+      iipSrvUrl = '../../img/IIP/raw/?token=' + getCookie('token') + '&DeepZoom='+ loc + '.dzi';
     }
     this.viewer.open(iipSrvUrl);
     // set mpp
diff --git a/index.html b/index.html
index 3d29d9f3e..f0de0d86a 100644
--- a/index.html
+++ b/index.html
@@ -1,3 +1,3 @@
-<html>
+<html  lang="en">
     <meta http-equiv="refresh" content="0; URL='apps/landing/landing.html'" />
 </html>
