@abi-software/mapintegratedvuer 1.16.2 → 1.16.3-simulation.0

package/src/App.vue

@@ -1,38 +1,58 @@
 <template>
   <div id="app">
-    <link rel="stylesheet"
-      href="https://fonts.googleapis.com/css?family=Asap:400,400i,500,600,700&display=swap">
-      <div class="button-container">
-        <el-popover
-          placement="bottom"
-          trigger="click"
-          width=500
-          class="popover"
-          :teleported=false
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css?family=Asap:400,400i,500,600,700&display=swap"
+    />
+    <div class="button-container">
+      <el-popover
+        placement="bottom"
+        trigger="click"
+        width="500"
+        class="popover"
+        :teleported="false"
+      >
+        <div class="options-container">
+          <div class="row">
+            <el-button @click="saveSettings()" size="small"
+              >Save Settings</el-button
+            >
+            <el-button @click="restoreSettings()" size="small"
+              >Restore Settings</el-button
+            >
+            <el-button @click="getShareableURL()" size="small"
+              >Get Link</el-button
+            >
+          </div>
+          <div class="row">
+            <el-button @click="setRatFlatmap()" size="small"
+              >Set Rat Flatmap</el-button
+            >
+            <el-button @click="setMultiFlatmap()" size="small"
+              >Set MultiFlatmap</el-button
+            >
+            <el-button @click="setLegacyMultiFlatmap()" size="small"
+              >Set Legacy MultiFlatmap</el-button
+            >
+            <el-button @click="setScaffold()" size="small"
+              >Set To Scaffold</el-button
+            >
+            <el-button @click="setWholebody()" size="small"
+              >Set to Wholebody</el-button
+            >
+            <el-button @click="setFlatmap()" size="small"
+              >Set Flatmap</el-button
+            >
+            <el-button @click="setSearch()" size="small">Set Search</el-button>
+          </div>
+        </div>
+        <template #reference>
+          <el-button class="options-button" :icon="ElIconSetting"
+            >Options</el-button
           >
-            <div class="options-container">
-              <div class="row">
-                <el-button @click="saveSettings()" size="small">Save Settings</el-button>
-                <el-button @click="restoreSettings()" size="small">Restore Settings</el-button>
-                <el-button @click="getShareableURL()" size="small">Get Link</el-button>
-              </div>
-              <div class="row">
-                <el-button @click="setRatFlatmap()" size="small">Set Rat Flatmap</el-button>
-                <el-button @click="setMultiFlatmap()" size="small">Set MultiFlatmap</el-button>
-                <el-button @click="setLegacyMultiFlatmap()" size="small">Set Legacy MultiFlatmap</el-button>
-                <el-button @click="setScaffold()" size="small">Set To Scaffold</el-button>
-                <el-button @click="setWholebody()" size="small">Set to Wholebody</el-button>
-                <el-button @click="setFlatmap()" size="small">Set Flatmap</el-button>
-                <el-button @click="setSearch()" size="small">Set Search</el-button>
-              </div>
-            </div>
-            <template #reference>
-
-                <el-button class="options-button" :icon="ElIconSetting">Options</el-button>
-
-            </template>
-        </el-popover>
-      </div>
+        </template>
+      </el-popover>
+    </div>
     <div class="map-app">
       <MapContent
         v-if="routerIsReady"
@@ -43,7 +63,7 @@
         :shareLink="shareLink"
         :useHelpModeDialog="true"
         :connectivityInfoSidebar="true"
-        :allClosable="false"
+        :allClosable="true"
         :showGlobalSettings="true"
         :showOpenMapButton="true"
         @updateShareLinkRequested="updateUUID"
@@ -56,8 +76,8 @@
 
 <script>
 /* eslint-disable no-alert, no-console */
-import { shallowRef } from 'vue';
-import MapContent from './components/MapContent.vue';
+import { shallowRef } from 'vue'
+import MapContent from './components/MapContent.vue'
 import { Setting as ElIconSetting } from '@element-plus/icons-vue'
 import {
   ElButton as Button,
@@ -65,15 +85,17 @@ import {
   ElPopover as Popover,
   ElRow as Row,
   ElMessage as Message,
-} from 'element-plus';
-import 'element-plus/es/components/message/style/css';
+} from 'element-plus'
+import 'element-plus/es/components/message/style/css'
+import { useSimulationPlotStore } from './stores/simulationPlotStore'
 
 const getAnnotationId = (api, withAnnotation) => {
   return new Promise((resolve) => {
-    let anonymousAnnotations = JSON.parse(sessionStorage.getItem('anonymous-annotation')) || undefined;
+    let anonymousAnnotations =
+      JSON.parse(sessionStorage.getItem('anonymous-annotation')) || undefined
     if (withAnnotation && anonymousAnnotations) {
-      let maxRetry = 3;
-      const annotationUrl = api + '/annotation/getshareid';
+      let maxRetry = 3
+      const annotationUrl = api + '/annotation/getshareid'
       const getId = (attempt) => {
         fetch(annotationUrl, {
           method: 'POST',
@@ -81,34 +103,35 @@ const getAnnotationId = (api, withAnnotation) => {
             'Content-type': 'application/json',
           },
           body: JSON.stringify({ state: anonymousAnnotations }),
-        }).then((response) => {
-          if (response.ok) {
-            return response.json();
-          }
-          throw new Error('Unsuccessful attempt to get annotation id')
-        })
-        .then((data) => {
-          resolve(data.uuid);
-        })
-        .catch((error) => {
-          if (maxRetry > attempt) {
-            getId(attempt + 1);
-          } else {
-            resolve(undefined);
-          }
         })
+          .then((response) => {
+            if (response.ok) {
+              return response.json()
+            }
+            throw new Error('Unsuccessful attempt to get annotation id')
+          })
+          .then((data) => {
+            resolve(data.uuid)
+          })
+          .catch((error) => {
+            if (maxRetry > attempt) {
+              getId(attempt + 1)
+            } else {
+              resolve(undefined)
+            }
+          })
       }
-      getId(1);
+      getId(1)
     } else {
-      resolve(undefined);
+      resolve(undefined)
     }
-  });
+  })
 }
 
 const getAnnotationState = (api, annotationId) => {
   return new Promise((resolve) => {
-    let maxRetry = 3;
-    const annotationUrl = api + '/annotation/getstate';
+    let maxRetry = 3
+    const annotationUrl = api + '/annotation/getstate'
     const getState = (attempt) => {
       fetch(annotationUrl, {
         method: 'POST',
@@ -116,26 +139,29 @@ const getAnnotationState = (api, annotationId) => {
           'Content-type': 'application/json',
         },
         body: JSON.stringify({ uuid: annotationId }),
-      }).then((response) => {
-        if (response.ok) {
-          return response.json();
-        }
-        throw new Error('Unsuccessful attempt to get annotations');
-      })
-      .then((data) => {
-        resolve(data);
-      })
-      .catch((error) => {
-        console.log(`Unable to get annotation state: attempt ${attempt} of ${maxRetry}`);
-        if (maxRetry > attempt) {
-          getState(attempt + 1);
-        } else {
-          resolve(undefined);
-        }
       })
+        .then((response) => {
+          if (response.ok) {
+            return response.json()
+          }
+          throw new Error('Unsuccessful attempt to get annotations')
+        })
+        .then((data) => {
+          resolve(data)
+        })
+        .catch((error) => {
+          console.log(
+            `Unable to get annotation state: attempt ${attempt} of ${maxRetry}`
+          )
+          if (maxRetry > attempt) {
+            getState(attempt + 1)
+          } else {
+            resolve(undefined)
+          }
+        })
     }
-    getState(1);
-  });
+    getState(1)
+  })
 }
 
 export default {
@@ -147,26 +173,29 @@ export default {
     Row,
     MapContent,
   },
-  data: function() {
+  data: function () {
+    const simulationPlotStore = useSimulationPlotStore()
     return {
       uuid: undefined,
       state: undefined,
-      prefix: "/map",
+      prefix: '/map',
       api: import.meta.env.VITE_API_LOCATION,
-      discover_api: import.meta.env.PENNSIEVE_DISCOVER_API || 'https://api.pennsieve.io/discover',
+      discover_api:
+        import.meta.env.PENNSIEVE_DISCOVER_API ||
+        'https://api.pennsieve.io/discover',
       mapSettings: [],
-      startingMap: "AC",
+      startingMap: 'AC',
       ElIconSetting: shallowRef(ElIconSetting),
       routerIsReady: false,
+      simulationPlotStore,
     }
   },
   computed: {
-    shareLink: function() {
-      if (this.uuid)
-        return this.prefix +"#/?id=" + this.uuid;
-      return this.prefix;
+    shareLink: function () {
+      if (this.uuid) return this.prefix + '#/?id=' + this.uuid
+      return this.prefix
     },
-    options: function() {
+    options: function () {
       return {
         sparcApi: import.meta.env.VITE_API_LOCATION,
         algoliaIndex: import.meta.env.VITE_ALGOLIA_INDEX,
@@ -174,37 +203,36 @@ export default {
         algoliaId: import.meta.env.VITE_ALGOLIA_ID,
         pennsieveApi: import.meta.env.VITE_PENNSIEVE_API_LOCATION,
         flatmapAPI: this.$route.query.flatmapserver ? this.$route.query.flatmapserver : import.meta.env.VITE_FLATMAPAPI_LOCATION,
-        nlLinkPrefix: import.meta.env.VITE_NL_LINK_PREFIX,
         rootUrl: import.meta.env.VITE_ROOT_URL,
       }
-    }
+    },
   },
   methods: {
-    changeViewingMode: function(modeName) {
-      this.$refs.map.changeViewingMode(modeName);
+    changeViewingMode: function (modeName) {
+      this.$refs.map.changeViewingMode(modeName)
     },
-    saveSettings: function() {
-      const mapState = JSON.parse(JSON.stringify(this.$refs.map.getState()));
-      this.mapSettings.push(mapState);
+    saveSettings: function () {
+      const mapState = JSON.parse(JSON.stringify(this.$refs.map.getState()))
+      this.mapSettings.push(mapState)
       Message({
         message: `Settings saved successfully! There are ${this.mapSettings.length} saved setting(s).`,
         type: 'success',
         showClose: true,
         duration: 1200,
-      });
+      })
     },
-    restoreSettings: function() {
+    restoreSettings: function () {
       if (this.mapSettings.length > 0) {
-        this.$refs.map.$refs.flow.sidebarStateRestored = false; // reset sidebar state flag
-        this.$refs.map.$refs.flow._externalStateSet = false; // reset state flag
+        this.$refs.map.$refs.flow.sidebarStateRestored = false // reset sidebar state flag
+        this.$refs.map.$refs.flow._externalStateSet = false // reset state flag
         // this.$refs.map.setState(this.mapSettings.pop());
-        this.state = this.mapSettings.pop();
+        this.state = this.mapSettings.pop()
         Message({
           message: 'Settings restored successfully!',
           type: 'success',
           showClose: true,
           duration: 1200,
-        });
+        })
       } else {
         Message({
           message: 'There are no saved settings to restore.',
@@ -214,11 +242,11 @@ export default {
         })
       }
     },
-    updateUUID: function(withAnnotation) {
-      let url = this.api + 'map/getshareid';
-      let state = this.$refs.map.getState(false);
+    updateUUID: function (withAnnotation) {
+      let url = this.api + 'map/getshareid'
+      let state = this.$refs.map.getState(false)
 
-      const maxRetry = 3;
+      const maxRetry = 3
       const getShareLink = (attempt) => {
         fetch(url, {
           method: 'POST',
@@ -227,96 +255,83 @@ export default {
           },
           body: JSON.stringify({ state: state }),
         })
-        .then((response) => {
-          if (response.ok) {
-            return response.json()
-          }
-          throw new Error('Unsuccessful attempt to get shareid')
-        })
-        .then((data) => {
-          this.uuid = data.uuid
-        })
-        .catch((error) => {
-          console.log(`Unable to create permalink: attempt ${attempt} of ${maxRetry}`)
-          if (maxRetry > attempt) {
-            getShareLink(attempt + 1)
-          }
-        })
+          .then((response) => {
+            if (response.ok) {
+              return response.json()
+            }
+            throw new Error('Unsuccessful attempt to get shareid')
+          })
+          .then((data) => {
+            this.uuid = data.uuid
+          })
+          .catch((error) => {
+            console.log(
+              `Unable to create permalink: attempt ${attempt} of ${maxRetry}`
+            )
+            if (maxRetry > attempt) {
+              getShareLink(attempt + 1)
+            }
+          })
       }
       getAnnotationId(this.api, withAnnotation).then((annotationId) => {
         if (annotationId) {
-          state.annotationId = annotationId;
+          state.annotationId = annotationId
         }
         getShareLink(1)
-      });
-
+      })
     },
-    setFlatmap: function() {
-      this.$refs.map.setCurrentEntry(
-        {
-          type: "Flatmap",
-          resource: "FunctionalConnectivity",
-          label: "Functional"
-        }
-      );
+    setFlatmap: function () {
+      this.$refs.map.setCurrentEntry({
+        type: 'Flatmap',
+        resource: 'FunctionalConnectivity',
+        label: 'Functional',
+      })
     },
-    setLegacyMultiFlatmap: function() {
-      this.$refs.map.setCurrentEntry(
-        {
-          type: "MultiFlatmap",
-          taxo: "NCBITaxon:10114",
-          uuid: "01fedbf9-d783-509c-a10c-827941ab13da",
-        }
-      );
+    setLegacyMultiFlatmap: function () {
+      this.$refs.map.setCurrentEntry({
+        type: 'MultiFlatmap',
+        taxo: 'NCBITaxon:10114',
+        uuid: '01fedbf9-d783-509c-a10c-827941ab13da',
+      })
     },
-    setMultiFlatmap: function() {
-      this.$refs.map.setCurrentEntry(
-        {
-          type: "MultiFlatmap",
-          taxo: "NCBITaxon:9606",
-          biologicalSex: "PATO:0000384",
-          //organ: "heart"
-          organ: "UBERON:0018675"
-        }
-      );
+    setMultiFlatmap: function () {
+      this.$refs.map.setCurrentEntry({
+        type: 'MultiFlatmap',
+        taxo: 'NCBITaxon:9606',
+        biologicalSex: 'PATO:0000384',
+        //organ: "heart"
+        organ: 'UBERON:0018675',
+      })
     },
-    setRatFlatmap: function() {
-      this.$refs.map.setCurrentEntry(
-        {
-          type: "MultiFlatmap",
-          taxo: "NCBITaxon:10114"
-        }
-      );
+    setRatFlatmap: function () {
+      this.$refs.map.setCurrentEntry({
+        type: 'MultiFlatmap',
+        taxo: 'NCBITaxon:10114',
+      })
     },
-    setScaffold: function() {
-      this.$refs.map.setCurrentEntry(
-        {
-          type: "Scaffold",
-          label: "Colon",
-          url: `${this.api}/s3-resource/76/files/derivative/colonMouse_metadata.json?s3BucketName=prd-sparc-discover50-use1`,
-          viewUrl: "colonMouse_Layout1_view.json"
-        }
-      );
+    setScaffold: function () {
+      this.$refs.map.setCurrentEntry({
+        type: 'Scaffold',
+        label: 'Colon',
+        url: `${this.api}/s3-resource/76/files/derivative/colonMouse_metadata.json?s3BucketName=prd-sparc-discover50-use1`,
+        viewUrl: 'colonMouse_Layout1_view.json',
+      })
     },
-    setWholebody: function() {
-      this.$refs.map.setCurrentEntry(
-        {
-          type: "Scaffold",
-          label: "Human",
-          isBodyScaffold: true
-        }
-      );
+    setWholebody: function () {
+      this.$refs.map.setCurrentEntry({
+        type: 'Scaffold',
+        label: 'Human',
+        isBodyScaffold: true,
+      })
     },
-    setSearch: function() {
-      this.$refs.map.openSearch([], "10.26275/1uno-tynt");
+    setSearch: function () {
+      this.$refs.map.openSearch([], '10.26275/1uno-tynt')
     },
-    mapIsLoaded: function(map) {
-      console.log("map is loaded", map)
+    mapIsLoaded: function (map) {
       // map.changeViewingMode('Annotation')
     },
-    viewerIsReady: function() {
-      console.log("viewer is ready")
-      this.parseQuery();
+    viewerIsReady: function () {
+      this.parseQuery()
     },
     fetchDataFromApi: async function (url) {
       const response = await fetch(url, {
@@ -324,38 +339,43 @@ export default {
         headers: {
           'Content-Type': 'application/json',
         },
-      });
+      })
       if (!response.ok) {
-        throw new Error(`Error fetching data from API: ${response.statusText}`);
+        throw new Error(`Error fetching data from API: ${response.statusText}`)
       }
-      return await response.json();
+      return await response.json()
     },
     getDatasetInfo: async function (discoverApi, datasetId, datasetVersion) {
-      let url = `${discoverApi}/datasets/${datasetId}`;
+      let url = `${discoverApi}/datasets/${datasetId}`
       if (datasetVersion) {
-        url = `${discoverApi}/datasets/${datasetId}/versions/${datasetVersion}`;
+        url = `${discoverApi}/datasets/${datasetId}/versions/${datasetVersion}`
       }
-      return await this.fetchDataFromApi(url);
+      return await this.fetchDataFromApi(url)
     },
     checkFileExists: async function (path) {
-      const url = `${this.api}/exists/${path}`;
-      return await this.fetchDataFromApi(url);
+      const url = `${this.api}/exists/${path}`
+      return await this.fetchDataFromApi(url)
     },
-    extractS3BucketName: function(uri) {
+    extractS3BucketName: function (uri) {
       if (uri) {
-        const substring = uri.split("//")[1]
+        const substring = uri.split('//')[1]
         if (substring) {
-          return substring.split("/")[0]
+          return substring.split('/')[0]
         }
       }
-      return undefined;
+      return undefined
     },
-    getScaffoldEntry: async function(dataset_id, file_path, dataset_version, viewUrl) {
+    getScaffoldEntry: async function (
+      dataset_id,
+      file_path,
+      dataset_version,
+      viewUrl
+    ) {
       const datasetInfo = await this.getDatasetInfo(
         this.discover_api,
         dataset_id,
-        dataset_version,
-      );
+        dataset_version
+      )
       const s3Bucket = datasetInfo
         ? this.extractS3BucketName(datasetInfo.uri)
         : undefined
@@ -365,7 +385,7 @@ export default {
         if (s3Bucket) {
           path = path + `?s3BucketName=${s3Bucket}`
         }
-        const fileCheckResults = await this.checkFileExists(path);
+        const fileCheckResults = await this.checkFileExists(path)
 
         if (fileCheckResults?.exists) {
           return {
@@ -375,72 +395,77 @@ export default {
             viewUrl: viewUrl,
             dataset_id: dataset_id,
             dataset_version: dataset_version,
-          };
+          }
         }
       }
-      return null;
+      return null
     },
     waitForRouter: function () {
       this.$router.isReady().then(async () => {
-        this.routerIsReady = true;
-      });
+        this.routerIsReady = true
+      })
     },
     parseQuery: function () {
       this.$router.isReady().then(async () => {
-        this.uuid = this.$route.query.id;
-        const type = this.$route.query.type;
-        const taxo = this.$route.query.taxo || this.$route.query.taxon;
-        const anatomy = this.$route.query.anatomy || this.$route.query.uberonid;
-        const dataset_id = this.$route.query.dataset_id;
-        const dataset_version = this.$route.query.dataset_version;
-        const file_path = this.$route.query.file_path;
-        const viewUrl = this.$route.query.viewUrl;
+        this.uuid = this.$route.query.id
+        let type = this.$route.query.type
+        const taxo = this.$route.query.taxo || this.$route.query.taxon
+        const anatomy = this.$route.query.anatomy || this.$route.query.uberonid
+        const dataset_id = this.$route.query.dataset_id
+        const dataset_version = this.$route.query.dataset_version
+        const file_path = this.$route.query.file_path
+        const viewUrl = this.$route.query.viewUrl
 
         if (window) {
-          this.prefix = window.location.origin + window.location.pathname;
+          this.prefix = window.location.origin + window.location.pathname
         }
         if (this.uuid) {
-          let xmlhttp = new XMLHttpRequest();
-          let url = this.api + 'map/getstate';
-          xmlhttp.open('POST', url, true);
+          let xmlhttp = new XMLHttpRequest()
+          let url = this.api + 'map/getstate'
+          xmlhttp.open('POST', url, true)
           //Send the proper header information along with the request
-          xmlhttp.setRequestHeader('Content-type', 'application/json');
-          xmlhttp.onreadystatechange = () => {//Call a function when the state changes.
-              if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
-                let state = JSON.parse(xmlhttp.responseText);
-                console.log(state)
-                if (state?.state?.annotationId) {
-                  getAnnotationState(this.api, state.state.annotationId).
-                  then((data) => {
+          xmlhttp.setRequestHeader('Content-type', 'application/json')
+          xmlhttp.onreadystatechange = () => {
+            //Call a function when the state changes.
+            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
+              let state = JSON.parse(xmlhttp.responseText)
+              if (state?.state?.annotationId) {
+                getAnnotationState(this.api, state.state.annotationId).then(
+                  (data) => {
                     if (data) {
-                      sessionStorage.setItem('anonymous-annotation', JSON.stringify(data.state))
+                      sessionStorage.setItem(
+                        'anonymous-annotation',
+                        JSON.stringify(data.state)
+                      )
                     }
-                    this.state = state.state;
-                  });
-                } else {
-                  this.state = state.state;
-                }
+                    this.state = state.state
+                  }
+                )
+              } else {
+                this.state = state.state
               }
+            }
           }
-          xmlhttp.send(JSON.stringify({"uuid": this.uuid}));
+          xmlhttp.send(JSON.stringify({ uuid: this.uuid }))
         }
 
+        type = 'fc'
         if (type === 'ac') {
           // Load AC map with different species
-          this.startingMap = "AC";
+          this.startingMap = 'AC'
           this.$nextTick(() => {
             const currentEntry = {
-              type: "MultiFlatmap",
+              type: 'MultiFlatmap',
               taxo: taxo || '',
-            };
+            }
             if (anatomy) {
-              currentEntry.organ = anatomy;
+              currentEntry.organ = anatomy
             }
-            this.$refs.map.setCurrentEntry(currentEntry);
+            this.$refs.map.setCurrentEntry(currentEntry)
           })
         } else if (type === 'fc') {
           // Load FC map
-          this.startingMap = "FC";
+          this.startingMap = 'FC'
           this.$nextTick(() => {
             const currentEntry = {
               type: 'Flatmap',
@@ -448,21 +473,23 @@ export default {
               label: 'Functional',
             }
             if (this.$route.query.fid) {
-              currentEntry.resource = this.$route.query.fid;
+              currentEntry.resource = this.$route.query.fid
             }
-            this.$refs.map.setCurrentEntry(currentEntry);
+            console.log('// --- Debug: Current Entry is hardcoded --- //')
+            console.log('currentEntry', currentEntry)
+            console.log('e81e3f3a-ed2f-5610-99ae-e019deae614a')
+            currentEntry.resource = 'e81e3f3a-ed2f-5610-99ae-e019deae614a' // temp hardcode to test
+            this.$refs.map.setCurrentEntry(currentEntry)
           })
         } else if (type === 'wholebody') {
           // Load Wholebody scaffold
-          this.startingMap = "WholeBody";
+          this.startingMap = 'WholeBody'
           this.$nextTick(() => {
-            this.$refs.map.setCurrentEntry(
-              {
-                type: "Scaffold",
-                label: "Human",
-                isBodyScaffold: true
-              }
-            );
+            this.$refs.map.setCurrentEntry({
+              type: 'Scaffold',
+              label: 'Human',
+              isBodyScaffold: true,
+            })
           })
         } else if (type === 'scaffold' && dataset_id && file_path) {
           // Load scaffold from dataset
@@ -471,17 +498,21 @@ export default {
             dataset_id,
             file_path,
             dataset_version,
-            viewUrl,
-          );
+            viewUrl
+          )
           if (scaffoldEntry) {
-            this.$refs.map.setCurrentEntry(scaffoldEntry);
+            this.$refs.map.setCurrentEntry(scaffoldEntry)
           }
         }
       })
     },
   },
-  mounted: function() {
-    this.waitForRouter();
+  mounted: function () {
+    this.waitForRouter()
+    this.simulationPlotStore.initListeners()
+  },
+  beforeUnmount: function () {
+    this.simulationPlotStore.cleanupListeners()
   },
 }
 </script>
@@ -491,12 +522,12 @@ $button-container-size: 50px;
 $gap: 24px;
 
 #app {
-  height:100%;
+  height: 100%;
   width: 100%;
-  position:absolute;
-  font-family: "Asap",sans-serif;
+  position: absolute;
+  font-family: 'Asap', sans-serif;
   background-color: #f5f7fa;
-  --el-color-primary: #8300BF;
+  --el-color-primary: #8300bf;
   --el-color-primary-light-7: #dab3ec;
   --el-color-primary-light-8: #e6ccf2;
   --el-color-primary-light-9: #f3e6f9;
@@ -516,11 +547,11 @@ body {
   position: relative;
 }
 
-.popover{
-  top:10px;
-  right:50%;
-  position:absolute;
-  z-index:1000;
+.popover {
+  top: 10px;
+  right: 50%;
+  position: absolute;
+  z-index: 1000;
 }
 
 .row {
@@ -544,13 +575,12 @@ body {
   height: $button-container-size;
 }
 
-
-.options-container{
+.options-container {
   text-align: center;
 }
 
 .map-icon {
-  color: $app-primary-color!important;
+  color: $app-primary-color !important;
 }
 
 .el-message.is-closable {
@@ -559,7 +589,7 @@ body {
   --el-message-text-color: #{$app-primary-color};
 
   .el-message__content {
-    font-family: "Asap",sans-serif;
+    font-family: 'Asap', sans-serif;
     font-size: 12px;
   }
 }