Add codes comment and remove unused styles.

src/components/MapContent.vue

@@ -93,14 +93,20 @@ export default {
       return this.$refs.flow.getState();
     },
     /**
-     * Provide a away to set the current view, this is currently limited
-     * to setting scaffold or the multiflatmap.
+     * Provide a way to set the current view, this is currently limited
+     * to setting view for scaffold or the multiflatmap.
      * In the case of the multiflatmap, it will not create a new entry and
      * instead change the current entry by setting the state.
      */
     setCurrentEntry: function(state) {
       if (state && state.type) {
         if (state.type === "Scaffold" && state.url) {
+          //State for scaffold containing the following items:
+          //  label - Setting the name of the dialog
+          //  region - Which region/group currently focusing on
+          //  resource - the url to metadata
+          //  state - state to restore (viewport)
+          //  viewUrl - relative path of the view file to metadata 
           const newView = {
             type: state.type,
             label: state.label,
@@ -111,6 +117,14 @@ export default {
           };
           this.$refs.flow.createNewEntry(newView);
         } else if (state.type === "MultiFlatmap") {
+          //State for scaffold containing the following items:
+          //  label - Setting the name of the dialog
+          //  taxo - taxo of species to set
+          //  biologicalSex - biological sex to be displayed (PATO)
+          //  organ - Target organ, flatmap will conduct a local search 
+          //          using this
+
+          //Look for the key in the available species array
           const key = findSpeciesKey(state);
           if (key) {
             const currentState = this.getState();
@@ -124,6 +138,8 @@ export default {
                     entry.state.state = { searchTerm: state.organ};
                   currentState.activeDockedId = entry.id;
                   this.$refs.flow.setState(currentState);
+                  //Do not create a new entry, instead set the multiflatmap viewer
+                  //to the primary slot
                   this.$refs.flow.setIdToPrimarySlot(entry.id);
                   break;
                 }

src/components/scripts/utilities.js

@@ -1,3 +1,6 @@
+/*
+ * Initial state for the split flow
+ */
 const initialState = () => {
   return {
     mainTabName: "Flatmap",
@@ -29,6 +32,9 @@ const capitalise = term =>  {
   return term;
 };
 
+/*
+ * Provide a list of available species for the flatmap
+ */
 const availableSpecies = () => {
   return {
     "Human Female":{taxo: "NCBITaxon:9606", biologicalSex: "PATO:0000383", iconClass:"mapicon-icon_human", displayWarning:true},
@@ -40,6 +46,9 @@ const availableSpecies = () => {
   }
 }
 
+/*
+ * Look for the key in availableSpecies with the provided condition
+ */
 const findSpeciesKey = condition => {
   if (condition) {
     const list = availableSpecies();

src/components/viewers/MultiFlatmap.vue

@@ -260,82 +260,6 @@ export default {
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped lang="scss">
 @import "~element-ui/packages/theme-chalk/src/button";
-::v-deep .region-popup {
-  .mapboxgl-popup-tip {
-    display: none;
-  }
-  .mapboxgl-popup-content {
-    border-radius: 4px;
-    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-    pointer-events: none;
-    display: none;
-    background: #fff;
-    font-family: "Asap",sans-serif;
-    font-size: 12pt;
-    color: $app-primary-color;
-    border: 1px solid $app-primary-color;
-    padding-left: 6px;
-    padding-right: 6px;
-    padding-top: 6px;
-    padding-bottom: 6px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    &::after,
-    &::before {
-      content: "";
-      display: block;
-      position: absolute;
-      width: 0;
-      height: 0;
-      border-style: solid;
-      flex-shrink: 0;
-    }
-    .mapboxgl-popup-close-button {
-      display: none;
-    }
-  }
-  &.mapboxgl-popup-anchor-bottom {
-    .mapboxgl-popup-content {
-      margin-bottom: 12px;
-      &::after,
-      &::before {
-        top: 100%;
-        border-width: 12px;
-      }
-      /* this border color controlls the color of the triangle (what looks like the fill of the triangle) */
-      &::after {
-        margin-top: -1px;
-        border-color: rgb(255, 255, 255) transparent transparent transparent;
-      }
-      /* this border color controlls the outside, thin border */
-      &::before {
-        margin: 0 auto;
-        border-color: $app-primary-color transparent transparent transparent;
-      }
-    }
-  }
-  &.mapboxgl-popup-anchor-top {
-    .mapboxgl-popup-content {
-      margin-top: 18px;
-      &::after,
-      &::before {
-        top: calc(-100% + 6px);
-        border-width: 12px;
-      }
-      /* this border color controlls the color of the triangle (what looks like the fill of the triangle) */
-      &::after {
-        margin-top: 1px;
-        border-color: transparent transparent rgb(255, 255, 255) transparent;
-      }
-      &::before {
-        margin: 0 auto;
-        border-color: transparent transparent $app-primary-color transparent;
-      }
-    }
-  }
-}
-
 </style>
 
 <style src="@/../assets/mapicon-species-style.css">