diff --git a/apps/Info.html b/apps/Info.html
index 1605832ab..59e429272 100644
--- a/apps/Info.html
+++ b/apps/Info.html
@@ -167,9 +167,10 @@ <h3 class="text-center h3 mb-2" style="margin-top:8px;margin-bottom:10px;">Infor
 </div>
 
 <footer class="text-center text-white bg-dark p-3 mt-2">
-	<p class="p">Copyright © 2021 caMicroscope</p>
+	<p class="p" id="copy-right-text"></p>
 </footer>
 </div>
+<script src="../common/footer.js"></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/dev-workbench/workbench.html b/apps/dev-workbench/workbench.html
index 99bc341c9..055f74c95 100644
--- a/apps/dev-workbench/workbench.html
+++ b/apps/dev-workbench/workbench.html
@@ -121,6 +121,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 +240,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/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.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..b85a09112 100644
--- a/apps/landing/landing.html
+++ b/apps/landing/landing.html
@@ -57,7 +57,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>
diff --git a/apps/landing/main.css b/apps/landing/main.css
index 0fe5b3598..03c28a7fe 100644
--- a/apps/landing/main.css
+++ b/apps/landing/main.css
@@ -2429,6 +2429,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.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/port/export.html b/apps/port/export.html
index d79ecc75d..a1251944b 100644
--- a/apps/port/export.html
+++ b/apps/port/export.html
@@ -3,9 +3,10 @@
 <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/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.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..67346f5cc 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;
 }
 
 
diff --git a/apps/signup/signup.html b/apps/signup/signup.html
index 10243698a..bdaacd701 100644
--- a/apps/signup/signup.html
+++ b/apps/signup/signup.html
@@ -49,12 +49,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>
@@ -112,7 +112,7 @@ <h2 style="margin-top: -.5em;">User Signup</h2>
       <div class="text-center" 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>
+      <p class="p" id="copy-right-text"></p>
     </footer>
     <!-- popup -->
     <div id="popup-container"></div>
@@ -121,6 +121,8 @@ <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>
+
 
   </body>
 </html>
diff --git a/apps/table.css b/apps/table.css
index 4869b5583..96a9a81af 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;
   }
@@ -236,7 +236,18 @@ nav li:not(.active):hover{
   margin-bottom: 0;
 }
 
+
 .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..42025bfe2 100644
--- a/apps/table.html
+++ b/apps/table.html
@@ -132,23 +132,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>
@@ -217,7 +217,7 @@ <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>Click on the <b><i class="fas fa-arrow-right"></i></b> button to get a preview of the slide</li>
                                     <li>Finally <b>Finish Upload</b> to post the slide to caMicroscope</li>
                                 </ul>
                             </div>
@@ -334,11 +334,12 @@ <h5 class="modal-title" id="slideNameChangeModalLabel">Slide name change confirm
 
 
 <footer class="text-center text-white bg-dark p-3">
-	<p class="p">Copyright © 2021 caMicroscope</p>
+	<p class="p"id="copy-right-text"></p>
 </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 src="../common/footer.js"></script>
 </body>
 
 </html>
diff --git a/apps/viewer/init.js b/apps/viewer/init.js
index c948b229b..8a0c8643d 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)
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..d9562a3cb 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 = {
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