From 088d0f110d32ff991711a4e56f13519a308b4449 Mon Sep 17 00:00:00 2001
From: Whitney O'Meara <james.w.omeara@gmail.com>
Date: Thu, 12 Sep 2024 12:39:08 +0000
Subject: [PATCH] ran the formatter

---
 service/src/main/frontend/quasar.config.js    |   4 +-
 service/src/main/frontend/src/App.vue         |   6 +-
 .../src/components/AddContentPanel.vue        |   1 -
 .../frontend/src/components/BasemapItem.vue   | 125 ++++----
 .../frontend/src/components/BasemapsPanel.vue |  27 +-
 .../frontend/src/components/CardLoading.vue   |  49 ++-
 .../frontend/src/components/ConfigPanel.vue   |  19 +-
 .../frontend/src/components/ContentPanel.vue  |  47 ++-
 .../src/components/FieldTypeInput.vue         |   2 +-
 .../frontend/src/components/GeoIndexForm.vue  | 128 ++++++--
 .../main/frontend/src/components/GeoItem.vue  | 185 ++++++++++--
 .../main/frontend/src/components/GeoNav.vue   |   1 -
 .../src/components/GeoToolboxPanel.vue        |   2 -
 .../frontend/src/components/LeafletMap.vue    |  48 +--
 .../src/components/LookupQueryForm.vue        |  22 +-
 .../src/components/ManualGeometryForm.vue     |  19 +-
 .../src/components/ManualQueryForm.vue        |  30 +-
 .../main/frontend/src/components/models.ts    |   6 +-
 .../main/frontend/src/layouts/MainLayout.vue  |  18 +-
 .../src/main/frontend/src/pages/IndexPage.vue |  49 +--
 .../frontend/src/stores/basemaps-store.ts     |  23 +-
 .../main/frontend/src/stores/content-store.ts |  45 +--
 .../frontend/src/stores/feature-info-store.ts | 192 ++++++------
 .../frontend/src/stores/geo-features-store.ts | 282 +++++++++++-------
 .../frontend/src/stores/manual-query-store.ts |   2 +-
 .../frontend/src/stores/simple-map-store.ts   |   3 +-
 26 files changed, 847 insertions(+), 488 deletions(-)

diff --git a/service/src/main/frontend/quasar.config.js b/service/src/main/frontend/quasar.config.js
index 85c306b..7c603b3 100644
--- a/service/src/main/frontend/quasar.config.js
+++ b/service/src/main/frontend/quasar.config.js
@@ -103,9 +103,7 @@ module.exports = configure(function (ctx) {
       // directives: [],
 
       // Quasar plugins
-      plugins: [
-        'Notify'
-      ],
+      plugins: ['Notify'],
     },
 
     // animations: 'all', // --- includes all animations
diff --git a/service/src/main/frontend/src/App.vue b/service/src/main/frontend/src/App.vue
index 3f2e365..9ddc99c 100644
--- a/service/src/main/frontend/src/App.vue
+++ b/service/src/main/frontend/src/App.vue
@@ -6,7 +6,9 @@
 import { onMounted } from 'vue';
 
 onMounted(() => {
-  const basePath = process.env.BACKEND_BASE_PATH ? process.env.BACKEND_BASE_PATH : '/';
+  const basePath = process.env.BACKEND_BASE_PATH
+    ? process.env.BACKEND_BASE_PATH
+    : '/';
 
   const link = document.createElement('link');
   link.rel = 'stylesheet';
@@ -19,4 +21,4 @@ onMounted(() => {
   script.src = basePath + 'map/webjars/leaflet/1.8.0/leaflet.js';
   document.head.appendChild(script);
 });
-</script>
\ No newline at end of file
+</script>
diff --git a/service/src/main/frontend/src/components/AddContentPanel.vue b/service/src/main/frontend/src/components/AddContentPanel.vue
index f375bd3..d543c9c 100644
--- a/service/src/main/frontend/src/components/AddContentPanel.vue
+++ b/service/src/main/frontend/src/components/AddContentPanel.vue
@@ -65,4 +65,3 @@ defineProps<AddContentPanelProps>();
 
 const appState = appStateStore();
 </script>
-
diff --git a/service/src/main/frontend/src/components/BasemapItem.vue b/service/src/main/frontend/src/components/BasemapItem.vue
index c6bc5d7..02f2282 100644
--- a/service/src/main/frontend/src/components/BasemapItem.vue
+++ b/service/src/main/frontend/src/components/BasemapItem.vue
@@ -1,69 +1,80 @@
 <template>
-    <q-item class="q-pa-sm" clickable v-ripple @click="itemClick">
-        <q-item-section avatar dense>
-            <q-radio ref="radio" v-model="selection" :val="basemap.title" @click="enableBasemap" />
-        </q-item-section>
-        <q-item-section>
-            <q-item-label lines="1">
-                {{ displayLabel }}
-            </q-item-label>
-            <q-item-label caption lines="3">
-                <div v-html="caption" />
-            </q-item-label>
-        </q-item-section>
-        <q-item-section side>
-          <div style="width: 64px; height: 64px; overflow: hidden;">
-            <img :src="thumbnailUrl" />
-          </div>
-        </q-item-section>
-    </q-item>
-  </template>
-  
-  <script setup lang="ts">
-  import { ref, Ref } from 'vue';
-  import { basemapsStore, Basemap } from 'stores/basemaps-store'
-  import { simpleMapStore } from 'stores/simple-map-store'
-  import { QRadio } from 'quasar';
+  <q-item class="q-pa-sm" clickable v-ripple @click="itemClick">
+    <q-item-section avatar dense>
+      <q-radio
+        ref="radio"
+        v-model="selection"
+        :val="basemap.title"
+        @click="enableBasemap"
+      />
+    </q-item-section>
+    <q-item-section>
+      <q-item-label lines="1">
+        {{ displayLabel }}
+      </q-item-label>
+      <q-item-label caption lines="3">
+        <div v-html="caption" />
+      </q-item-label>
+    </q-item-section>
+    <q-item-section side>
+      <div style="width: 64px; height: 64px; overflow: hidden">
+        <img :src="thumbnailUrl" />
+      </div>
+    </q-item-section>
+  </q-item>
+</template>
 
-  interface BasemapItem {
-    basemap: Basemap;
-    selection: Ref<string>;
-  }
+<script setup lang="ts">
+import { ref, Ref } from 'vue';
+import { basemapsStore, Basemap } from 'stores/basemaps-store';
+import { simpleMapStore } from 'stores/simple-map-store';
+import { QRadio } from 'quasar';
 
-  const radio = ref<QRadio>();
+interface BasemapItem {
+  basemap: Basemap;
+  selection: Ref<string>;
+}
 
-  const leafletMap = simpleMapStore;
-  const basemaps = basemapsStore();
+const radio = ref<QRadio>();
 
-  const props = defineProps<BasemapItem>();
-  
-  const basemap = props.basemap;
-  const selection = props.selection;
+const leafletMap = simpleMapStore;
+const basemaps = basemapsStore();
 
-  const displayLabel = ref(props.basemap.title);
-  const caption = ref((props.basemap.tileLayer.getAttribution) ? props.basemap.tileLayer.getAttribution() : '');
+const props = defineProps<BasemapItem>();
 
-  const thumbnailUrl = createThumbnailUrl();
+const basemap = props.basemap;
+const selection = props.selection;
 
-  function createThumbnailUrl() {
-    let url = basemap.urlTemplate.replace('{x}', '18').replace('{y}', '24').replace('{z}', '6');
-    if (!url.endsWith('.png')) {
-      url += '.png';
-    }
-    return url;
-  }
+const displayLabel = ref(props.basemap.title);
+const caption = ref(
+  props.basemap.tileLayer.getAttribution
+    ? props.basemap.tileLayer.getAttribution()
+    : ''
+);
 
-  function itemClick() {
-    radio.value?.set();
-    enableBasemap();
-  }
+const thumbnailUrl = createThumbnailUrl();
 
-  function enableBasemap() {
-    // if we aren't currently selected then set the basemap, otherwise do nothing
-    if (basemaps.getBasemap.title != basemap.title) {
-      basemaps.setBasemap(basemap);
-      leafletMap.setBasemap(basemap);
-    }
+function createThumbnailUrl() {
+  let url = basemap.urlTemplate
+    .replace('{x}', '18')
+    .replace('{y}', '24')
+    .replace('{z}', '6');
+  if (!url.endsWith('.png')) {
+    url += '.png';
   }
+  return url;
+}
 
-</script>
\ No newline at end of file
+function itemClick() {
+  radio.value?.set();
+  enableBasemap();
+}
+
+function enableBasemap() {
+  // if we aren't currently selected then set the basemap, otherwise do nothing
+  if (basemaps.getBasemap.title != basemap.title) {
+    basemaps.setBasemap(basemap);
+    leafletMap.setBasemap(basemap);
+  }
+}
+</script>
diff --git a/service/src/main/frontend/src/components/BasemapsPanel.vue b/service/src/main/frontend/src/components/BasemapsPanel.vue
index b634420..d79e142 100644
--- a/service/src/main/frontend/src/components/BasemapsPanel.vue
+++ b/service/src/main/frontend/src/components/BasemapsPanel.vue
@@ -1,5 +1,14 @@
 <template>
-  <div style="height: 100%; width: 500px; max-width: 500px; background: white; display: flex; flex-direction: column">
+  <div
+    style="
+      height: 100%;
+      width: 500px;
+      max-width: 500px;
+      background: white;
+      display: flex;
+      flex-direction: column;
+    "
+  >
     <q-card square class="bg-secondary text-white q-px-md q-py-sm">
       <q-card-section horizontal>
         <div class="text-h6" style="flex-grow: 1">Basemaps</div>
@@ -12,13 +21,16 @@
         />
       </q-card-section>
     </q-card>
-    <q-scroll-area style="flex-grow: 1;" content-style="width: 500px; max-weidth: 500px;">
-      <q-list bordered separator style="width: 500px; max-width: 500px;">
+    <q-scroll-area
+      style="flex-grow: 1"
+      content-style="width: 500px; max-weidth: 500px;"
+    >
+      <q-list bordered separator style="width: 500px; max-width: 500px">
         <BasemapItem
-            v-for="basemap in basemaps.getBasemaps"
-            :key="basemap.title"
-            v-bind="{ basemap: basemap, selection: selectionRef() }"
-          />
+          v-for="basemap in basemaps.getBasemaps"
+          :key="basemap.title"
+          v-bind="{ basemap: basemap, selection: selectionRef() }"
+        />
       </q-list>
     </q-scroll-area>
   </div>
@@ -38,5 +50,4 @@ const selection = ref(basemaps.getBasemap.title);
 function selectionRef(): Ref<string> {
   return selection;
 }
-
 </script>
diff --git a/service/src/main/frontend/src/components/CardLoading.vue b/service/src/main/frontend/src/components/CardLoading.vue
index 4a9c8dd..8a946ff 100644
--- a/service/src/main/frontend/src/components/CardLoading.vue
+++ b/service/src/main/frontend/src/components/CardLoading.vue
@@ -1,19 +1,43 @@
 <template>
-  <q-card v-if="loadingState!=DONE" class="absolute-full column flex-center" style="background-color: transparent;">
+  <q-card
+    v-if="loadingState != DONE"
+    class="absolute-full column flex-center"
+    style="background-color: transparent"
+  >
     <!-- if loading, show the spinner -->
-    <q-spinner v-if="loadingState==LOADING" size="6em" color="secondary"/>
+    <q-spinner v-if="loadingState == LOADING" size="6em" color="secondary" />
 
     <!-- if success, show the success dialog -->
-    <q-icon v-if="loadingState==SUCCESS" name="check_circle" size="6em" color="green"/>
-    
+    <q-icon
+      v-if="loadingState == SUCCESS"
+      name="check_circle"
+      size="6em"
+      color="green"
+    />
+
     <!-- if failure, show the failure dialog -->
-    <q-icon v-if="loadingState==FAILURE" name="warning" size="6em" color="red"/>
-    
+    <q-icon
+      v-if="loadingState == FAILURE"
+      name="warning"
+      size="6em"
+      color="red"
+    />
+
     <!-- display the loading message -->
-    <p style="font-size:18px;">{{ loadingMessage }}</p>
+    <p style="font-size: 18px">{{ loadingMessage }}</p>
 
     <!-- if not loading, show the done button -->
-    <q-btn v-if="loadingState!=LOADING" label="Done" color="white" text-color="black" @click="loadingState=DONE; loadingMessage=''; $emit('doneClick');"/>
+    <q-btn
+      v-if="loadingState != LOADING"
+      label="Done"
+      color="white"
+      text-color="black"
+      @click="
+        loadingState = DONE;
+        loadingMessage = '';
+        $emit('doneClick');
+      "
+    />
   </q-card>
 </template>
 
@@ -29,7 +53,7 @@ export interface CardLoadingMethods {
 const LOADING = 'loading';
 const SUCCESS = 'success';
 const FAILURE = 'failure';
-const DONE = 'done'
+const DONE = 'done';
 
 const loadingState = ref<string>(DONE);
 const loadingMessage = ref<string>('');
@@ -40,7 +64,7 @@ const cardLoadingMethods: CardLoadingMethods = {
     loadingMessage.value = message;
   },
 
-  success(message: string){
+  success(message: string) {
     loadingState.value = SUCCESS;
     loadingMessage.value = message;
   },
@@ -48,12 +72,11 @@ const cardLoadingMethods: CardLoadingMethods = {
   failure(message: string) {
     loadingState.value = FAILURE;
     loadingMessage.value = message;
-  }
+  },
 };
 
 defineEmits(['doneClick']);
 defineExpose(cardLoadingMethods);
 </script>
 
-<style>
-</style>
\ No newline at end of file
+<style></style>
diff --git a/service/src/main/frontend/src/components/ConfigPanel.vue b/service/src/main/frontend/src/components/ConfigPanel.vue
index 24c30c3..09550ca 100644
--- a/service/src/main/frontend/src/components/ConfigPanel.vue
+++ b/service/src/main/frontend/src/components/ConfigPanel.vue
@@ -1,8 +1,18 @@
 <template>
-  <AddContentPanel v-if="appStateStore().getConfigPanelSelection === 'Add'" :supportedGeometries="supportedGeometries" />
-  <ContentPanel v-else-if="appStateStore().getConfigPanelSelection === 'Content'" />
-  <BasemapPanel v-else-if="appStateStore().getConfigPanelSelection === 'Basemaps'" />
-  <GeoToolboxPanel v-else-if="appStateStore().getConfigPanelSelection === 'Geo Toolbox'" :supportedGeometries="supportedGeometries" />
+  <AddContentPanel
+    v-if="appStateStore().getConfigPanelSelection === 'Add'"
+    :supportedGeometries="supportedGeometries"
+  />
+  <ContentPanel
+    v-else-if="appStateStore().getConfigPanelSelection === 'Content'"
+  />
+  <BasemapPanel
+    v-else-if="appStateStore().getConfigPanelSelection === 'Basemaps'"
+  />
+  <GeoToolboxPanel
+    v-else-if="appStateStore().getConfigPanelSelection === 'Geo Toolbox'"
+    :supportedGeometries="supportedGeometries"
+  />
 </template>
 
 <script setup lang="ts">
@@ -16,5 +26,4 @@ export interface ConfigPanelProps {
   supportedGeometries: string[];
 }
 defineProps<ConfigPanelProps>();
-
 </script>
diff --git a/service/src/main/frontend/src/components/ContentPanel.vue b/service/src/main/frontend/src/components/ContentPanel.vue
index c79c11d..d2ca863 100644
--- a/service/src/main/frontend/src/components/ContentPanel.vue
+++ b/service/src/main/frontend/src/components/ContentPanel.vue
@@ -1,5 +1,14 @@
 <template>
-  <div style="height: 100%; width: 500px; max-width: 500px; background: white; display: flex; flex-direction: column">
+  <div
+    style="
+      height: 100%;
+      width: 500px;
+      max-width: 500px;
+      background: white;
+      display: flex;
+      flex-direction: column;
+    "
+  >
     <q-card square class="bg-secondary text-white q-px-md q-py-sm">
       <q-card-section horizontal>
         <div class="text-h6" style="flex-grow: 1">Content</div>
@@ -14,20 +23,31 @@
     </q-card>
     <q-bar dark class="bg-primary text-white">
       <q-btn dense flat icon="home" @click="initContent" />
-      <q-btn v-if="content.getFeatureChain.length > 0" dense flat icon="arrow_back" @click="content.navigateBack" />
-      <GeoNav 
-          v-if="content.getFeatureChain.length > 0"
-          v-bind="content.getRootFeature"
-        />
+      <q-btn
+        v-if="content.getFeatureChain.length > 0"
+        dense
+        flat
+        icon="arrow_back"
+        @click="content.navigateBack"
+      />
+      <GeoNav
+        v-if="content.getFeatureChain.length > 0"
+        v-bind="content.getRootFeature"
+      />
     </q-bar>
-    <q-scroll-area style="flex-grow: 1;" content-style="width: 500px; max-weidth: 500px;">
-      <q-list bordered separator style="width: 500px; max-width: 500px;">
-        <q-item-label v-if="content.getFeatureChain.length > 1" header>{{ getLabel(content.getCurrentFeature) }}</q-item-label>
+    <q-scroll-area
+      style="flex-grow: 1"
+      content-style="width: 500px; max-weidth: 500px;"
+    >
+      <q-list bordered separator style="width: 500px; max-width: 500px">
+        <q-item-label v-if="content.getFeatureChain.length > 1" header>{{
+          getLabel(content.getCurrentFeature)
+        }}</q-item-label>
         <GeoItem
-            v-for="typedFeature in content.getContent"
-            :key="getLabel(typedFeature)"
-            v-bind="{feature: typedFeature}"
-          />
+          v-for="typedFeature in content.getContent"
+          :key="getLabel(typedFeature)"
+          v-bind="{ feature: typedFeature }"
+        />
       </q-list>
     </q-scroll-area>
   </div>
@@ -52,5 +72,4 @@ function initContent() {
 onMounted(() => {
   initContent();
 });
-
 </script>
diff --git a/service/src/main/frontend/src/components/FieldTypeInput.vue b/service/src/main/frontend/src/components/FieldTypeInput.vue
index 757cb11..49f8701 100644
--- a/service/src/main/frontend/src/components/FieldTypeInput.vue
+++ b/service/src/main/frontend/src/components/FieldTypeInput.vue
@@ -50,7 +50,7 @@ const fieldType = ref<FieldType>({
   field: '',
   type: {
     label: '',
-    value: ''
+    value: '',
   },
 });
 
diff --git a/service/src/main/frontend/src/components/GeoIndexForm.vue b/service/src/main/frontend/src/components/GeoIndexForm.vue
index c2ee06e..d56b05f 100644
--- a/service/src/main/frontend/src/components/GeoIndexForm.vue
+++ b/service/src/main/frontend/src/components/GeoIndexForm.vue
@@ -9,7 +9,11 @@
             @update:model-value="loadFile"
             style="display: none"
           />
-          <q-input v-model="geometry" :label='"Geometry (" + supportedGeometries.join("/") + ")"' spellcheck="false" >
+          <q-input
+            v-model="geometry"
+            :label="'Geometry (' + supportedGeometries.join('/') + ')'"
+            spellcheck="false"
+          >
             <template v-slot:append>
               <q-btn
                 dense
@@ -26,39 +30,94 @@
         </div>
       </q-form>
       <q-card-actions align="right" class="text-primary">
-        <q-btn flat label="Reset" @click="geometry = ''; clearDisplay()" />
+        <q-btn
+          flat
+          label="Reset"
+          @click="
+            geometry = '';
+            clearDisplay();
+          "
+        />
         <q-btn flat label="Load" @click="submitGeometry" />
       </q-card-actions>
       <q-separator inset />
       <div class="q-py-md">
         <div class="row q-pt-md">
-          <q-btn icon="content_copy" flat round size="8px" @click="copyWkt()" /><strong>Well-Known Text (WKT):</strong>
+          <q-btn
+            icon="content_copy"
+            flat
+            round
+            size="8px"
+            @click="copyWkt()"
+          /><strong>Well-Known Text (WKT):</strong>
         </div>
-        <q-scroll-area :content-style="contentStyle" :content-active-style="contentActiveStyle" style="height: 100px; max-width: 466px;">
-          <div class=q-pa-xs style="max-width: 466px;" >{{ wkt }}</div>
+        <q-scroll-area
+          :content-style="contentStyle"
+          :content-active-style="contentActiveStyle"
+          style="height: 100px; max-width: 466px"
+        >
+          <div class="q-pa-xs" style="max-width: 466px">{{ wkt }}</div>
         </q-scroll-area>
         <div class="row q-pt-md">
-          <q-btn icon="content_copy" flat round size="8px" @click="copyGeoPointIndex()" /><strong>Geo Point Index:</strong>
+          <q-btn
+            icon="content_copy"
+            flat
+            round
+            size="8px"
+            @click="copyGeoPointIndex()"
+          /><strong>Geo Point Index:</strong>
         </div>
-        <q-scroll-area :content-style="contentStyle" :content-active-style="contentActiveStyle" style="height: 25px; max-width: 466px;">
-          <div class=q-pa-xs>{{ geoPointIndex }}</div>
+        <q-scroll-area
+          :content-style="contentStyle"
+          :content-active-style="contentActiveStyle"
+          style="height: 25px; max-width: 466px"
+        >
+          <div class="q-pa-xs">{{ geoPointIndex }}</div>
         </q-scroll-area>
         <div class="row q-pt-md">
-          <q-btn icon="content_copy" flat round size="8px" @click="copyGeoWavePointIndex()" /><strong>GeoWave Point Index:</strong>
+          <q-btn
+            icon="content_copy"
+            flat
+            round
+            size="8px"
+            @click="copyGeoWavePointIndex()"
+          /><strong>GeoWave Point Index:</strong>
         </div>
-        <q-scroll-area :content-style="contentStyle" :content-active-style="contentActiveStyle" style="height: 25px; max-width: 466px;">
-          <div class=q-pa-xs>{{ geoWavePointIndex }}</div>
+        <q-scroll-area
+          :content-style="contentStyle"
+          :content-active-style="contentActiveStyle"
+          style="height: 25px; max-width: 466px"
+        >
+          <div class="q-pa-xs">{{ geoWavePointIndex }}</div>
         </q-scroll-area>
         <div class="row q-pt-md">
-          <q-btn icon="content_copy" flat round size="8px" @click="copyGeoWaveGeometryIndices()" /><strong>GeoWave Geometry Indices:</strong>
+          <q-btn
+            icon="content_copy"
+            flat
+            round
+            size="8px"
+            @click="copyGeoWaveGeometryIndices()"
+          /><strong>GeoWave Geometry Indices:</strong>
         </div>
-        <q-scroll-area :content-style="contentStyle" :content-active-style="contentActiveStyle" style="height: 100px; max-width: 466px;">
-          <div class=q-pa-xs>{{ geoWaveGeometryIndices }}</div>
+        <q-scroll-area
+          :content-style="contentStyle"
+          :content-active-style="contentActiveStyle"
+          style="height: 100px; max-width: 466px"
+        >
+          <div class="q-pa-xs">{{ geoWaveGeometryIndices }}</div>
         </q-scroll-area>
       </div>
     </q-card-section>
 
-    <CardLoading ref="cardLoading" @doneClick="cardOpacity=1.0; if (success) { geometry = ''; };" />
+    <CardLoading
+      ref="cardLoading"
+      @doneClick="
+        cardOpacity = 1.0;
+        if (success) {
+          geometry = '';
+        }
+      "
+    />
   </q-card>
   <q-dialog v-model="editDialog">
     <q-card style="min-width: 66%">
@@ -77,7 +136,14 @@
       </q-card-section>
 
       <q-card-actions align="right" class="text-primary">
-        <q-btn flat label="Reset" @click="editDialogText = ''; clearDisplay()" />
+        <q-btn
+          flat
+          label="Reset"
+          @click="
+            editDialogText = '';
+            clearDisplay();
+          "
+        />
         <q-btn flat label="Cancel" v-close-popup @click="editDialogText = ''" />
         <q-btn
           flat
@@ -100,7 +166,7 @@ import { api } from 'boot/axios';
 import { QFile } from 'quasar';
 import { ref } from 'vue';
 import CardLoading, { CardLoadingMethods } from 'components/CardLoading.vue';
-import { GeoIndices } from 'components/models'
+import { GeoIndices } from 'components/models';
 
 export interface GeoIndexFormProps {
   supportedGeometries: string[];
@@ -126,16 +192,16 @@ const geoWaveGeometryIndices = ref<string>('');
 
 const contentStyle = {
   backgroundColor: 'rgba(0,0,0,0.02)',
-  color: '#555'
+  color: '#555',
 };
 
 const contentActiveStyle = {
   backgroundColor: '#eee',
-  color: 'black'
+  color: 'black',
 };
 
 function clearDisplay() {
-  wkt.value = ''
+  wkt.value = '';
   geoPointIndex.value = '';
   geoWavePointIndex.value = '';
   geoWaveGeometryIndices.value = '';
@@ -195,7 +261,7 @@ function submitGeometry() {
 
       console.log(geoIndices);
 
-      if (geoIndices.wkt != undefined){
+      if (geoIndices.wkt != undefined) {
         wkt.value = geoIndices.wkt;
       }
       if (geoIndices.geoPointIndex != undefined) {
@@ -205,7 +271,8 @@ function submitGeometry() {
         geoWavePointIndex.value = geoIndices.geoWavePointIndex;
       }
       if (geoIndices.geoWaveGeometryIndex != undefined) {
-        geoWaveGeometryIndices.value = geoIndices.geoWaveGeometryIndex.join(', ');
+        geoWaveGeometryIndices.value =
+          geoIndices.geoWaveGeometryIndex.join(', ');
       }
     })
     .catch(() => {
@@ -213,26 +280,25 @@ function submitGeometry() {
     });
 }
 
-
 const $q = useQuasar();
 async function copyWkt() {
-    await navigator.clipboard.writeText(wkt.value);
-    $q.notify('Text Copied to Clipboard')
+  await navigator.clipboard.writeText(wkt.value);
+  $q.notify('Text Copied to Clipboard');
 }
 
 async function copyGeoPointIndex() {
-    await navigator.clipboard.writeText(geoPointIndex.value);
-    $q.notify('Text Copied to Clipboard')
+  await navigator.clipboard.writeText(geoPointIndex.value);
+  $q.notify('Text Copied to Clipboard');
 }
 
 async function copyGeoWavePointIndex() {
-    await navigator.clipboard.writeText(geoWavePointIndex.value);
-    $q.notify('Text Copied to Clipboard')
+  await navigator.clipboard.writeText(geoWavePointIndex.value);
+  $q.notify('Text Copied to Clipboard');
 }
 
 async function copyGeoWaveGeometryIndices() {
-    await navigator.clipboard.writeText(geoWaveGeometryIndices.value);
-    $q.notify('Text Copied to Clipboard')
+  await navigator.clipboard.writeText(geoWaveGeometryIndices.value);
+  $q.notify('Text Copied to Clipboard');
 }
 </script>
 
diff --git a/service/src/main/frontend/src/components/GeoItem.vue b/service/src/main/frontend/src/components/GeoItem.vue
index 064c6c7..51e3dc4 100644
--- a/service/src/main/frontend/src/components/GeoItem.vue
+++ b/service/src/main/frontend/src/components/GeoItem.vue
@@ -1,40 +1,126 @@
 <template>
   <q-item class="q-pa-sm">
-    <q-item-section v-if="showDrillDownButton()" avatar dense style="min-width: 40px; max-width: 40px;" class="q-pr-none">
-      <q-btn icon="chevron_right" flat dense size="18px" padding="none" @click="drillDown"/>
+    <q-item-section
+      v-if="showDrillDownButton()"
+      avatar
+      dense
+      style="min-width: 40px; max-width: 40px"
+      class="q-pr-none"
+    >
+      <q-btn
+        icon="chevron_right"
+        flat
+        dense
+        size="18px"
+        padding="none"
+        @click="drillDown"
+      />
     </q-item-section>
     <q-item-section>
       <q-item-label lines="1">
-        <span class="text-weight-medium" :style="[monospaceLabel ? {fontFamily: 'monospace'} : {}]">
-          <q-btn v-if="showLabelCopyButton" icon="content_copy" flat round size="8px" @click="copyLabel()" />
+        <span
+          class="text-weight-medium"
+          :style="[monospaceLabel ? { fontFamily: 'monospace' } : {}]"
+        >
+          <q-btn
+            v-if="showLabelCopyButton"
+            icon="content_copy"
+            flat
+            round
+            size="8px"
+            @click="copyLabel()"
+          />
           {{ displayLabel }}
-          <q-btn v-if="showEditLabelButton()" icon="edit" flat round dense size="8px">
-            <q-popup-proxy @keyup.enter="popupRef.hide()" ref="popupRef" @hide="updateLabel">
-              <q-input v-model="displayLabel" label="Label" dense outlined maxlength="20" />
+          <q-btn
+            v-if="showEditLabelButton()"
+            icon="edit"
+            flat
+            round
+            dense
+            size="8px"
+          >
+            <q-popup-proxy
+              @keyup.enter="popupRef.hide()"
+              ref="popupRef"
+              @hide="updateLabel"
+            >
+              <q-input
+                v-model="displayLabel"
+                label="Label"
+                dense
+                outlined
+                maxlength="20"
+              />
             </q-popup-proxy>
           </q-btn>
         </span>
-        <span v-if="showDisplayTypeName()" class="text-grey-8"> - {{ displayTypeName }}</span>
+        <span v-if="showDisplayTypeName()" class="text-grey-8">
+          - {{ displayTypeName }}</span
+        >
       </q-item-label>
-      <q-item-label caption lines="1" style="margin-top: 0px;">
-        <q-btn v-if="showCaptionCopyButton()" icon="content_copy" flat round size="8px" @click="copyCaption()" />
+      <q-item-label caption lines="1" style="margin-top: 0px">
+        <q-btn
+          v-if="showCaptionCopyButton()"
+          icon="content_copy"
+          flat
+          round
+          size="8px"
+          @click="copyCaption()"
+        />
         {{ caption }}
       </q-item-label>
     </q-item-section>
     <q-item-section side class="q-pl-xs">
       <div class="text-grey-8">
-        <q-btn class="gt-xs" size="14px" flat dense round icon="my_location" @click="zoomToBounds" />
-        <q-btn class="gt-xs" size="14px" flat dense round :color="isVisible ? 'primary' : 'gray'" :icon="isVisible ? 'visibility' : 'visibility_off'" @click="toggleVisibility" />
+        <q-btn
+          class="gt-xs"
+          size="14px"
+          flat
+          dense
+          round
+          icon="my_location"
+          @click="zoomToBounds"
+        />
+        <q-btn
+          class="gt-xs"
+          size="14px"
+          flat
+          dense
+          round
+          :color="isVisible ? 'primary' : 'gray'"
+          :icon="isVisible ? 'visibility' : 'visibility_off'"
+          @click="toggleVisibility"
+        />
         <q-btn class="gt-xs" size="14px" flat dense round>
-          <div :style="[ { 'height': '16px', 'width': '16px' }, layerColor != undefined ? {'background-color': layerColor} : {'background-image': 'linear-gradient(to bottom right, red,orange,yellow,green,blue,indigo,violet)'} ]" />
+          <div
+            :style="[
+              { height: '16px', width: '16px' },
+              layerColor != undefined
+                ? { 'background-color': layerColor }
+                : {
+                    'background-image':
+                      'linear-gradient(to bottom right, red,orange,yellow,green,blue,indigo,violet)',
+                  },
+            ]"
+          />
           <q-popup-proxy>
-            <q-color 
-            :model-value="layerColor" 
-            @change="val => { layerColor = val; setLayerColor(feature, layerColor as string) }" 
-            style="max-width: 250px"/>
+            <q-color
+              :model-value="layerColor"
+              @change="val => { layerColor = val; setLayerColor(feature, layerColor as string) }"
+              style="max-width: 250px"
+            />
           </q-popup-proxy>
         </q-btn>
-        <q-btn v-if="showDeleteButton()" class="gt-xs" size="14px" flat dense round icon="delete" @click="deleteFeatures" />
+        <q-btn
+          v-if="showDeleteButton()"
+          class="gt-xs"
+          size="14px"
+          flat
+          dense
+          round
+          icon="delete"
+          @click="deleteFeatures"
+        />
       </div>
     </q-item-section>
   </q-item>
@@ -44,9 +130,30 @@
 import { useQuasar } from 'quasar';
 import { ref } from 'vue';
 import { contentStore } from 'stores/content-store';
-import { GEO_QUERY_FEATURES, GEO_FEATURES, FEATURE, GEO_TERMS, getTypeName, getLabel, setLabel, geoFeaturesStore, getVisibleBounds, layersVisible, layersColor, setLayerColor, enableLayers, disableLayers, GEO_FUNCTION } from 'stores/geo-features-store'
-import { GeoFeatures, GeoQueryFeatures, GeoTerms, TypedFeature } from 'components/models'
-import { simpleMapStore } from 'stores/simple-map-store'
+import {
+  GEO_QUERY_FEATURES,
+  GEO_FEATURES,
+  FEATURE,
+  GEO_TERMS,
+  getTypeName,
+  getLabel,
+  setLabel,
+  geoFeaturesStore,
+  getVisibleBounds,
+  layersVisible,
+  layersColor,
+  setLayerColor,
+  enableLayers,
+  disableLayers,
+  GEO_FUNCTION,
+} from 'stores/geo-features-store';
+import {
+  GeoFeatures,
+  GeoQueryFeatures,
+  GeoTerms,
+  TypedFeature,
+} from 'components/models';
+import { simpleMapStore } from 'stores/simple-map-store';
 import { Feature } from 'geojson';
 
 interface GeoItem {
@@ -94,7 +201,7 @@ if (rawTypeName.value == GEO_QUERY_FEATURES) {
     displayLabel.value = geoFeatures.label;
   }
 } else if (rawTypeName.value == GEO_TERMS) {
-  const geoTerms = feature as GeoTerms
+  const geoTerms = feature as GeoTerms;
   const label = getLabel(feature);
   if (label != undefined) {
     displayLabel.value = label;
@@ -109,7 +216,12 @@ if (rawTypeName.value == GEO_QUERY_FEATURES) {
       caption.value = '' + simpleFeature.properties.fields.join(', ');
     } else if ('range' in simpleFeature.properties) {
       monospaceLabel.value = true;
-      displayLabel.value = '[' + simpleFeature.properties.range[0] + ', ' + simpleFeature.properties.range[1] + ']';
+      displayLabel.value =
+        '[' +
+        simpleFeature.properties.range[0] +
+        ', ' +
+        simpleFeature.properties.range[1] +
+        ']';
       caption.value = 'Fields: ' + simpleFeature.properties.fields.join(', ');
     } else {
       displayLabel.value = simpleFeature.properties.wkt;
@@ -125,11 +237,15 @@ if (rawTypeName.value == GEO_QUERY_FEATURES) {
 }
 
 function showDeleteButton(): boolean {
-  return rawTypeName.value == GEO_QUERY_FEATURES || rawTypeName.value == GEO_FEATURES;
+  return (
+    rawTypeName.value == GEO_QUERY_FEATURES || rawTypeName.value == GEO_FEATURES
+  );
 }
 
 function showDisplayTypeName(): boolean {
-  return rawTypeName.value == GEO_QUERY_FEATURES || rawTypeName.value == GEO_FEATURES;
+  return (
+    rawTypeName.value == GEO_QUERY_FEATURES || rawTypeName.value == GEO_FEATURES
+  );
 }
 
 function showDrillDownButton(): boolean {
@@ -137,11 +253,15 @@ function showDrillDownButton(): boolean {
 }
 
 function showCaptionCopyButton(): boolean {
-  return rawTypeName.value == GEO_QUERY_FEATURES || rawTypeName.value == GEO_FEATURES;
+  return (
+    rawTypeName.value == GEO_QUERY_FEATURES || rawTypeName.value == GEO_FEATURES
+  );
 }
 
 function showEditLabelButton(): boolean {
-  return rawTypeName.value == GEO_QUERY_FEATURES || rawTypeName.value == GEO_FEATURES;
+  return (
+    rawTypeName.value == GEO_QUERY_FEATURES || rawTypeName.value == GEO_FEATURES
+  );
 }
 
 function drillDown() {
@@ -180,13 +300,12 @@ function updateLabel() {
 
 const $q = useQuasar();
 async function copyCaption() {
-    await navigator.clipboard.writeText(caption.value);
-    $q.notify('Text Copied to Clipboard')
+  await navigator.clipboard.writeText(caption.value);
+  $q.notify('Text Copied to Clipboard');
 }
 
 async function copyLabel() {
-    await navigator.clipboard.writeText(displayLabel.value);
-    $q.notify('Text Copied to Clipboard')
+  await navigator.clipboard.writeText(displayLabel.value);
+  $q.notify('Text Copied to Clipboard');
 }
-
-</script>
\ No newline at end of file
+</script>
diff --git a/service/src/main/frontend/src/components/GeoNav.vue b/service/src/main/frontend/src/components/GeoNav.vue
index 9681cbc..581d602 100644
--- a/service/src/main/frontend/src/components/GeoNav.vue
+++ b/service/src/main/frontend/src/components/GeoNav.vue
@@ -6,5 +6,4 @@
 import { TypedFeature } from './models';
 
 const props = defineProps<TypedFeature>();
-
 </script>
diff --git a/service/src/main/frontend/src/components/GeoToolboxPanel.vue b/service/src/main/frontend/src/components/GeoToolboxPanel.vue
index a0cef96..be2c0b9 100644
--- a/service/src/main/frontend/src/components/GeoToolboxPanel.vue
+++ b/service/src/main/frontend/src/components/GeoToolboxPanel.vue
@@ -36,6 +36,4 @@ export interface GeoToolboxPanelProps {
   supportedGeometries: string[];
 }
 defineProps<GeoToolboxPanelProps>();
-
 </script>
-
diff --git a/service/src/main/frontend/src/components/LeafletMap.vue b/service/src/main/frontend/src/components/LeafletMap.vue
index 542e15e..61d9869 100644
--- a/service/src/main/frontend/src/components/LeafletMap.vue
+++ b/service/src/main/frontend/src/components/LeafletMap.vue
@@ -4,9 +4,9 @@
 
 <script setup lang="ts">
 import { onMounted } from 'vue';
-import { simpleMapStore } from 'stores/simple-map-store'
-import { basemapsStore } from 'stores/basemaps-store'
-import { addFeatureInfoPanel } from 'stores/feature-info-store'
+import { simpleMapStore } from 'stores/simple-map-store';
+import { basemapsStore } from 'stores/basemaps-store';
+import { addFeatureInfoPanel } from 'stores/feature-info-store';
 import { api } from 'boot/axios';
 
 // get Leaflet
@@ -32,14 +32,21 @@ const initMap = () => {
   api
     .get('/map/v1/crs')
     .then((response) => {
-
       const crs = response.data;
 
-      basemaps.initialize()
+      basemaps
+        .initialize()
         .then(() => {
           const bounds = L.latLngBounds(L.latLng(-90, -360), L.latLng(90, 360));
 
-          leafletMap.createMap(props.mapId, props.enableAttribution, props.enableZoomControl, bounds, 2, crs);
+          leafletMap.createMap(
+            props.mapId,
+            props.enableAttribution,
+            props.enableZoomControl,
+            bounds,
+            2,
+            crs
+          );
 
           leafletMap.setView([0, 0], 3);
 
@@ -59,7 +66,6 @@ const initMap = () => {
         .catch((reason) => {
           console.log('Unable to initialize basemaps. ', reason);
         });
-
     })
     .catch((reason) => {
       console.log('Something went wrong? ' + reason);
@@ -74,22 +80,22 @@ onMounted(() => {
 <style>
 /* style for the info box on the query geometry map */
 .info {
-    padding: 6px 8px;
-    font: 14px/16px Arial, Helvetica, sans-serif;
-    background: white;
-    background: rgba(255,255,255,0.8);
-    box-shadow: 0 0 15px rgba(0,0,0,0.2);
-    border-radius: 5px;
-    max-width: 33vw;
-    word-wrap: break-word;
+  padding: 6px 8px;
+  font: 14px/16px Arial, Helvetica, sans-serif;
+  background: white;
+  background: rgba(255, 255, 255, 0.8);
+  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
+  border-radius: 5px;
+  max-width: 33vw;
+  word-wrap: break-word;
 }
 
 .info h4 {
-    font-size: 14px;
-    font-weight: bold;
-    line-height: 16px;
-    text-align: center;
-    margin: 0 0 5px;
-    color: #777;
+  font-size: 14px;
+  font-weight: bold;
+  line-height: 16px;
+  text-align: center;
+  margin: 0 0 5px;
+  color: #777;
 }
 </style>
diff --git a/service/src/main/frontend/src/components/LookupQueryForm.vue b/service/src/main/frontend/src/components/LookupQueryForm.vue
index bb2cc68..3ec15b6 100644
--- a/service/src/main/frontend/src/components/LookupQueryForm.vue
+++ b/service/src/main/frontend/src/components/LookupQueryForm.vue
@@ -7,18 +7,18 @@
         </div>
       </q-form>
       <q-card-actions align="right" class="text-primary">
-        <q-btn
-          flat
-          label="Reset"
-          @click="
-            queryId = '';
-          "
-        />
+        <q-btn flat label="Reset" @click="queryId = ''" />
         <q-btn flat label="Load" @click="submitQuery" />
       </q-card-actions>
     </q-card-section>
 
-    <CardLoading ref="cardLoading" @doneClick="cardOpacity=1.0; queryId = (success) ? '' : queryId;" />
+    <CardLoading
+      ref="cardLoading"
+      @doneClick="
+        cardOpacity = 1.0;
+        queryId = success ? '' : queryId;
+      "
+    />
   </q-card>
 </template>
 
@@ -40,7 +40,8 @@ function submitQuery() {
   cardLoading.value?.loading('Loading geometry.  Please wait...');
   success.value = false;
 
-  geoQueryFeatures.loadGeoFeaturesForQueryId(queryId.value)
+  geoQueryFeatures
+    .loadGeoFeaturesForQueryId(queryId.value)
     .then(() => {
       success.value = true;
       cardLoading.value?.success('Geometry loaded successfully!');
@@ -51,5 +52,4 @@ function submitQuery() {
 }
 </script>
 
-<style>
-</style>
+<style></style>
diff --git a/service/src/main/frontend/src/components/ManualGeometryForm.vue b/service/src/main/frontend/src/components/ManualGeometryForm.vue
index fba97b8..8e569b6 100644
--- a/service/src/main/frontend/src/components/ManualGeometryForm.vue
+++ b/service/src/main/frontend/src/components/ManualGeometryForm.vue
@@ -9,7 +9,11 @@
             @update:model-value="loadFile"
             style="display: none"
           />
-          <q-input v-model="manualGeometryForm.geometry" :label='"Geometry (" + supportedGeometries.join("/") + ")"' spellcheck="false" >
+          <q-input
+            v-model="manualGeometryForm.geometry"
+            :label="'Geometry (' + supportedGeometries.join('/') + ')'"
+            spellcheck="false"
+          >
             <template v-slot:append>
               <q-btn
                 dense
@@ -127,7 +131,15 @@
       </q-card-actions>
     </q-card-section>
 
-    <CardLoading ref="cardLoading" @doneClick="cardOpacity=1.0; if (success) { manualGeometryForm.$reset(); };" />
+    <CardLoading
+      ref="cardLoading"
+      @doneClick="
+        cardOpacity = 1.0;
+        if (success) {
+          manualGeometryForm.$reset();
+        }
+      "
+    />
   </q-card>
   <q-dialog v-model="editDialog">
     <q-card style="min-width: 66%">
@@ -234,7 +246,8 @@ function submitGeometry() {
   cardLoading.value?.loading('Loading geometry.  Please wait...');
   success.value = false;
 
-  geoQueryFeatures.loadGeoFeaturesForGeometry(manualGeometryForm.$state)
+  geoQueryFeatures
+    .loadGeoFeaturesForGeometry(manualGeometryForm.$state)
     .then(() => {
       cardLoading.value?.success('Geometry loaded successfully!');
       success.value = true;
diff --git a/service/src/main/frontend/src/components/ManualQueryForm.vue b/service/src/main/frontend/src/components/ManualQueryForm.vue
index 1538db9..8a639a6 100644
--- a/service/src/main/frontend/src/components/ManualQueryForm.vue
+++ b/service/src/main/frontend/src/components/ManualQueryForm.vue
@@ -9,7 +9,11 @@
             @update:model-value="loadFile"
             style="display: none"
           />
-          <q-input v-model="manualQueryForm.query" label="Query (LUCENE/JEXL)" spellcheck="false" >
+          <q-input
+            v-model="manualQueryForm.query"
+            label="Query (LUCENE/JEXL)"
+            spellcheck="false"
+          >
             <template v-slot:append>
               <q-btn
                 dense
@@ -57,7 +61,7 @@
                   field: '',
                   type: {
                     label: '',
-                    value: ''
+                    value: '',
                   },
                 } as FieldType)
               "
@@ -78,7 +82,16 @@
       </q-card-actions>
     </q-card-section>
 
-    <CardLoading ref="cardLoading" @doneClick="cardOpacity=1.0; if (success) { manualQueryForm.$reset(); fieldNum = 0; };" />
+    <CardLoading
+      ref="cardLoading"
+      @doneClick="
+        cardOpacity = 1.0;
+        if (success) {
+          manualQueryForm.$reset();
+          fieldNum = 0;
+        }
+      "
+    />
   </q-card>
   <q-dialog v-model="editDialog">
     <q-card style="min-width: 66%">
@@ -198,11 +211,12 @@ function submitQuery() {
   cardLoading.value?.loading('Loading query.  Please wait...');
   success.value = false;
 
-  geoQueryFeatures.loadGeoFeaturesForQuery(
-    manualQueryForm.query,
-    getFieldTypeMap(),
-    manualQueryForm.expand
-  )
+  geoQueryFeatures
+    .loadGeoFeaturesForQuery(
+      manualQueryForm.query,
+      getFieldTypeMap(),
+      manualQueryForm.expand
+    )
     .then(() => {
       cardLoading.value?.success('Query loaded successfully!');
       success.value = true;
diff --git a/service/src/main/frontend/src/components/models.ts b/service/src/main/frontend/src/components/models.ts
index 399ebe3..3bd6fa6 100644
--- a/service/src/main/frontend/src/components/models.ts
+++ b/service/src/main/frontend/src/components/models.ts
@@ -13,7 +13,7 @@ export interface TypedFeature {
   id?: string;
 }
 
-export interface DelegateTypedFeature extends TypedFeature{
+export interface DelegateTypedFeature extends TypedFeature {
   delegate: boolean;
   feature: TypedFeature;
 }
@@ -102,8 +102,8 @@ export interface FieldType {
   id: number;
   field: string;
   type: {
-    label: string,
-    value: string
+    label: string;
+    value: string;
   };
 }
 
diff --git a/service/src/main/frontend/src/layouts/MainLayout.vue b/service/src/main/frontend/src/layouts/MainLayout.vue
index 01f556e..105a7c8 100644
--- a/service/src/main/frontend/src/layouts/MainLayout.vue
+++ b/service/src/main/frontend/src/layouts/MainLayout.vue
@@ -1,7 +1,9 @@
 <template>
   <q-layout view="hHh Lpr fFf" style="height: 100vh">
     <q-header elevated>
-      <div v-if="header?.enabled" :style="header?.style">{{ header?.message }}</div>
+      <div v-if="header?.enabled" :style="header?.style">
+        {{ header?.message }}
+      </div>
       <q-toolbar class="bg-grey-9 text-white">
         <q-btn
           flat
@@ -20,7 +22,7 @@
 
     <q-drawer
       v-model="drawer"
-      :width='225'
+      :width="225"
       show-if-above
       :mini="!drawer || mini"
       bordered
@@ -51,7 +53,9 @@
       <router-view />
     </q-page-container>
     <q-footer>
-      <div v-if="footer?.enabled" :style="footer?.style">{{ footer?.message }}</div>
+      <div v-if="footer?.enabled" :style="footer?.style">
+        {{ footer?.message }}
+      </div>
     </q-footer>
   </q-layout>
   <q-ajax-bar position="bottom" color="accent" size="10px" />
@@ -59,13 +63,11 @@
 
 <script setup lang="ts">
 import { ref } from 'vue';
-import MenuItem, {
-  MenuItemProps,
-} from 'components/MenuItem.vue';
+import MenuItem, { MenuItemProps } from 'components/MenuItem.vue';
 import { appStateStore } from 'stores/state-store';
 import { onMounted } from 'vue';
 import { api } from 'boot/axios';
-import { Banner } from 'components/models'
+import { Banner } from 'components/models';
 
 const appState = appStateStore();
 
@@ -167,5 +169,5 @@ onMounted(() => {
     .catch((reason) => {
       console.log('Something went wrong? ' + reason);
     });
-})
+});
 </script>
diff --git a/service/src/main/frontend/src/pages/IndexPage.vue b/service/src/main/frontend/src/pages/IndexPage.vue
index 46832de..204ca73 100644
--- a/service/src/main/frontend/src/pages/IndexPage.vue
+++ b/service/src/main/frontend/src/pages/IndexPage.vue
@@ -18,7 +18,7 @@
       v-if="appState.isConfigPanelEnabled"
       style="position: absolute; height: 100%; top: 0; left: 0; z-index: 1"
     >
-      <ConfigPanel :supportedGeometries="supportedGeometries"/>
+      <ConfigPanel :supportedGeometries="supportedGeometries" />
     </div>
   </q-page>
 </template>
@@ -28,15 +28,19 @@ import { onMounted, ref } from 'vue';
 import LeafletMap from 'components/LeafletMap.vue';
 import ConfigPanel from 'components/ConfigPanel.vue';
 import { appStateStore } from 'stores/state-store';
-import { enableLayers, geoFeaturesStore, getVisibleBounds } from 'stores/geo-features-store';
-import { GeoQueryFeatures } from 'components/models'
-import { useRoute } from 'vue-router'
-import { simpleMapStore } from 'stores/simple-map-store'
+import {
+  enableLayers,
+  geoFeaturesStore,
+  getVisibleBounds,
+} from 'stores/geo-features-store';
+import { GeoQueryFeatures } from 'components/models';
+import { useRoute } from 'vue-router';
+import { simpleMapStore } from 'stores/simple-map-store';
 import { api } from 'boot/axios';
 
 const appState = appStateStore();
 const leafletMap = simpleMapStore;
-const supportedGeometries = ref<string[]>();
+const supportedGeometries = ref<string[]>([]);
 
 onMounted(() => {
   const route = useRoute();
@@ -44,23 +48,26 @@ onMounted(() => {
 
   if (queryId != undefined) {
     const geoQueryFeatures = geoFeaturesStore();
-    geoQueryFeatures.loadGeoFeaturesForQueryId(queryId)
-    .then((id) => {
-      console.log('Successfully loaded query. ', queryId);
+    geoQueryFeatures
+      .loadGeoFeaturesForQueryId(queryId)
+      .then((id) => {
+        console.log('Successfully loaded query. ', queryId);
 
-      const geoFeatures = geoQueryFeatures.getGeoFeaturesById(id as string) as GeoQueryFeatures;
-      for (const geoFunction of geoFeatures.functions){
-        enableLayers(geoFunction);
-      }
+        const geoFeatures = geoQueryFeatures.getGeoFeaturesById(
+          id as string
+        ) as GeoQueryFeatures;
+        for (const geoFunction of geoFeatures.functions) {
+          enableLayers(geoFunction);
+        }
 
-      const bounds = getVisibleBounds(geoFeatures);
-      if (bounds != undefined) {
-        leafletMap.fitBounds(bounds);
-      }
-    })
-    .catch((reason) => {
-      console.log('Failed to load query. ', queryId, 'Reason: ', reason);
-    });
+        const bounds = getVisibleBounds(geoFeatures);
+        if (bounds != undefined) {
+          leafletMap.fitBounds(bounds);
+        }
+      })
+      .catch((reason) => {
+        console.log('Failed to load query. ', queryId, 'Reason: ', reason);
+      });
   }
 
   api
diff --git a/service/src/main/frontend/src/stores/basemaps-store.ts b/service/src/main/frontend/src/stores/basemaps-store.ts
index d47c3aa..b79baa9 100644
--- a/service/src/main/frontend/src/stores/basemaps-store.ts
+++ b/service/src/main/frontend/src/stores/basemaps-store.ts
@@ -15,7 +15,7 @@ export const basemapsStore = defineStore('basemaps', {
     },
     getBasemaps(): Basemap[] {
       return this.basemaps as Basemap[];
-    }
+    },
   },
   actions: {
     async initialize() {
@@ -25,12 +25,12 @@ export const basemapsStore = defineStore('basemaps', {
             .get('/map/v1/basemaps')
             .then((response) => {
               const basemapsConfig = response.data as {
-                title: string,
-                urlTemplate: string,
-                maxZoom?: number,
-                maxNativeZoom?: number,
-                attribution: string,
-                default?: boolean
+                title: string;
+                urlTemplate: string;
+                maxZoom?: number;
+                maxNativeZoom?: number;
+                attribution: string;
+                default?: boolean;
               }[];
 
               let defaultSet = false;
@@ -41,17 +41,16 @@ export const basemapsStore = defineStore('basemaps', {
                   tileLayer: L.tileLayer(basemapConfig.urlTemplate, {
                     maxZoom: basemapConfig.maxZoom,
                     maxNativeZoom: basemapConfig.maxNativeZoom,
-                    attribution: basemapConfig.attribution
+                    attribution: basemapConfig.attribution,
                   }),
-                  default: basemapConfig.default
-                } as Basemap
+                  default: basemapConfig.default,
+                } as Basemap;
 
                 this.basemaps.push(basemap);
                 if (!defaultSet) {
                   this.basemap = basemap;
                   defaultSet = true;
                 } else {
-                  
                 }
               }
               resolve(this.basemaps);
@@ -65,7 +64,7 @@ export const basemapsStore = defineStore('basemaps', {
     },
     setBasemap(basemap: Basemap) {
       this.basemap = basemap;
-    }
+    },
   },
 });
 
diff --git a/service/src/main/frontend/src/stores/content-store.ts b/service/src/main/frontend/src/stores/content-store.ts
index 44019d2..ef20b76 100644
--- a/service/src/main/frontend/src/stores/content-store.ts
+++ b/service/src/main/frontend/src/stores/content-store.ts
@@ -8,43 +8,44 @@ const geoFeatures = geoFeaturesStore();
 export const contentStore = defineStore('content', {
   state: () => ({
     // initialized: false,
-    content: [] as (TypedFeature|Feature)[],
-    featureChain: [] as (TypedFeature|Feature)[],
+    content: [] as (TypedFeature | Feature)[],
+    featureChain: [] as (TypedFeature | Feature)[],
   }),
   getters: {
     getContent: (state) => state.content,
     getFeatureChain: (state) => state.featureChain,
     getRootFeature: (state) => state.featureChain[0],
-    getCurrentFeature: (state) => state.featureChain[state.featureChain.length - 1],
+    getCurrentFeature: (state) =>
+      state.featureChain[state.featureChain.length - 1],
   },
   actions: {
     initialize() {
       this.content.length = 0;
-      this.featureChain.length = 0;        
+      this.featureChain.length = 0;
       for (const id in geoFeatures.geoQueryFeatures) {
-          const feature = geoFeatures.geoQueryFeatures[id];
-          this.content.push(feature);
+        const feature = geoFeatures.geoQueryFeatures[id];
+        this.content.push(feature);
       }
     },
-    updateContent(typedFeatures: (TypedFeature|Feature)[]) {
-        this.content = typedFeatures;
+    updateContent(typedFeatures: (TypedFeature | Feature)[]) {
+      this.content = typedFeatures;
     },
     navigateBack() {
       const newLength = this.featureChain.length - 1;
       if (newLength >= 0) {
-        this.featureChain.length = newLength; 
-      } 
-      
-      if (newLength > 0){
-        this.content = getChildren(this.featureChain[newLength-1]);
+        this.featureChain.length = newLength;
+      }
+
+      if (newLength > 0) {
+        this.content = getChildren(this.featureChain[newLength - 1]);
       } else {
         this.initialize();
       }
     },
-    setCurrentFeature(typedFeature: TypedFeature|Feature) {
+    setCurrentFeature(typedFeature: TypedFeature | Feature) {
       const index = this.featureChain.indexOf(typedFeature);
       if (index > 0) {
-        this.featureChain.length = index+1;
+        this.featureChain.length = index + 1;
       } else {
         this.featureChain.push(typedFeature);
       }
@@ -52,19 +53,21 @@ export const contentStore = defineStore('content', {
       // now update the content
       this.content = getChildren(typedFeature);
     },
-    deleteFeature(typedFeature: TypedFeature|Feature) {
+    deleteFeature(typedFeature: TypedFeature | Feature) {
       const index = this.content.indexOf(typedFeature);
-      if (index >= 0){
-        this.content.splice(index,1);
+      if (index >= 0) {
+        this.content.splice(index, 1);
       }
-    }
+    },
   },
 });
 
 const content = contentStore();
 geoFeatures.$subscribe((mutation, state) => {
-  if (content.getFeatureChain.length == 0 && content.getContent.length != Object.keys(state.geoQueryFeatures).length) {
+  if (
+    content.getFeatureChain.length == 0 &&
+    content.getContent.length != Object.keys(state.geoQueryFeatures).length
+  ) {
     content.initialize();
   }
 });
-
diff --git a/service/src/main/frontend/src/stores/feature-info-store.ts b/service/src/main/frontend/src/stores/feature-info-store.ts
index d736303..c6731f5 100644
--- a/service/src/main/frontend/src/stores/feature-info-store.ts
+++ b/service/src/main/frontend/src/stores/feature-info-store.ts
@@ -11,119 +11,115 @@ let layerClicked = false;
 const info = new L.Control() as L.Control & InfoPanel;
 
 interface InfoPanel {
-    _div: HTMLElementTagNameMap['div'];
-    update(props?: GeoJsonProperties): void;
+  _div: HTMLElementTagNameMap['div'];
+  update(props?: GeoJsonProperties): void;
 }
 
 export function addFeatureInfoPanel(leafletMapArg: SimpleMapStore) {
-    leafletMap = leafletMapArg;
-
-    // setup an info panel to display the feature info
-    info.onAdd = function () {
-        this._div = L.DomUtil.create('div', 'info');
-        L.DomEvent.disableClickPropagation(this._div);
-        this.update();
-        return this._div;
-    };
-
-    // used to update the contents of the info panel
-    info.update = function (props: GeoJsonProperties) {
-        this._div.innerHTML = '<h4>Geo Feature</h4>' +  (props ? props.label : 'Select a feature');
-    };
-
-    // general map click handler
-    (leafletMap.map as L.Map).on('click', function() {
-
-        // do nothing if layer clicked
-        if (!layerClicked) {
-            // deselect feature and reset style on all features
-            if (selected != undefined){
-                resetStyle(selected, selected?.properties?.layer);
-            }
-            selected = undefined;
-            info.update();
-        }
-        layerClicked = false;
-    })
-
-    leafletMap.addControl(info);
+  leafletMap = leafletMapArg;
+
+  // setup an info panel to display the feature info
+  info.onAdd = function () {
+    this._div = L.DomUtil.create('div', 'info');
+    L.DomEvent.disableClickPropagation(this._div);
+    this.update();
+    return this._div;
+  };
+
+  // used to update the contents of the info panel
+  info.update = function (props: GeoJsonProperties) {
+    this._div.innerHTML =
+      '<h4>Geo Feature</h4>' + (props ? props.label : 'Select a feature');
+  };
+
+  // general map click handler
+  (leafletMap.map as L.Map).on('click', function () {
+    // do nothing if layer clicked
+    if (!layerClicked) {
+      // deselect feature and reset style on all features
+      if (selected != undefined) {
+        resetStyle(selected, selected?.properties?.layer);
+      }
+      selected = undefined;
+      info.update();
+    }
+    layerClicked = false;
+  });
+
+  leafletMap.addControl(info);
 }
 
 export function onEachFeature(feature: Feature, layer: L.Layer) {
+  const geoJsonLayer = layer as L.GeoJSON;
+
+  // highlight the feature on mouseover
+  layer.on('mouseover', function () {
+    // display the query function for this feature
+    info.update(feature.properties);
+
+    // highlight the feature
+    highlightStyle(feature, geoJsonLayer);
+  });
+
+  // remove highlight on mouse out
+  layer.on('mouseout', function (e) {
+    // either clear the info panel, or set it back to the selected feature
+    if (selected) {
+      info.update(selected.properties);
+    } else {
+      info.update();
+    }
 
-    const geoJsonLayer = layer as L.GeoJSON;
-
-    // highlight the feature on mouseover
-    layer.on('mouseover', function() {
-
-        // display the query function for this feature
-        info.update(feature.properties);
-
-        // highlight the feature
-        highlightStyle(feature, geoJsonLayer);
-    });
-
-    // remove highlight on mouse out
-    layer.on('mouseout', function(e) {
-
-        // either clear the info panel, or set it back to the selected feature
-        if (selected) {
-            info.update(selected.properties);
-        } else {
-            info.update();
-        }
-
-        // clear the highlight unless this is the selected feature
-        if (selected !== e.target.feature) {
-            resetStyle(feature, geoJsonLayer);
-        };
-    });
-
-    // toggle highlight on selected feature
-    layer.on('click', function(e) {
+    // clear the highlight unless this is the selected feature
+    if (selected !== e.target.feature) {
+      resetStyle(feature, geoJsonLayer);
+    }
+  });
 
-        // used to determine whether click is on/off layer
-        layerClicked = true;
+  // toggle highlight on selected feature
+  layer.on('click', function (e) {
+    // used to determine whether click is on/off layer
+    layerClicked = true;
 
-        // reset style on selected feature
-        if (selected != undefined && selected.properties != undefined) {
-            resetStyle(selected, selected?.properties.layer);
-        }
+    // reset style on selected feature
+    if (selected != undefined && selected.properties != undefined) {
+      resetStyle(selected, selected?.properties.layer);
+    }
 
-        // add highlight to new selected feature, or unset
-        // selected feature if current feature was clicked
-        if (selected !== e.target.feature) {
-            selected = e.target.feature;
+    // add highlight to new selected feature, or unset
+    // selected feature if current feature was clicked
+    if (selected !== e.target.feature) {
+      selected = e.target.feature;
 
-            // highlight the selected feature
-            highlightStyle(feature, geoJsonLayer);
+      // highlight the selected feature
+      highlightStyle(feature, geoJsonLayer);
 
-            // display the selected feature's info
-            if (selected != undefined) {
-                info.update(selected.properties);
-            }
-        } else {
-            selected = undefined;
-        }
-    });
+      // display the selected feature's info
+      if (selected != undefined) {
+        info.update(selected.properties);
+      }
+    } else {
+      selected = undefined;
+    }
+  });
 }
 
 function resetStyle(feature: Feature, layer: L.GeoJSON) {
-    if (feature.properties != undefined) {
-        layer.setStyle({
-            color: feature.properties.color,
-            fillOpacity: 0.4,
-            weight: 2
-            });
-    }
+  if (feature.properties != undefined) {
+    layer.setStyle({
+      color: feature.properties.color,
+      fillOpacity: 0.4,
+      weight: 2,
+    });
+  }
 }
 
 function highlightStyle(feature: Feature, layer: L.GeoJSON) {
-    if (feature.properties != undefined) {
-        layer.setStyle({
-            color: feature.properties.color,
-            fillOpacity: 0.4,
-            weight: 5
-            });
-    }
-}
\ No newline at end of file
+  if (feature.properties != undefined) {
+    layer.setStyle({
+      color: feature.properties.color,
+      fillOpacity: 0.4,
+      weight: 5,
+    });
+  }
+}
diff --git a/service/src/main/frontend/src/stores/geo-features-store.ts b/service/src/main/frontend/src/stores/geo-features-store.ts
index 50ee704..f59ced5 100644
--- a/service/src/main/frontend/src/stores/geo-features-store.ts
+++ b/service/src/main/frontend/src/stores/geo-features-store.ts
@@ -1,7 +1,23 @@
 import { defineStore } from 'pinia';
-import { DelegateTypedFeature, Geo, GeoByField, GeoByTier, GeoFeatures, GeoFunction, GeoQueryFeatures, GeoTerms, ManualGeometryForm, TypedFeature } from 'src/components/models';
+import {
+  DelegateTypedFeature,
+  Geo,
+  GeoByField,
+  GeoByTier,
+  GeoFeatures,
+  GeoFunction,
+  GeoQueryFeatures,
+  GeoTerms,
+  ManualGeometryForm,
+  TypedFeature,
+} from 'src/components/models';
 import { api } from 'boot/axios';
-import { GeoJsonObject, FeatureCollection, Feature, GeoJsonProperties } from 'geojson';
+import {
+  GeoJsonObject,
+  FeatureCollection,
+  Feature,
+  GeoJsonProperties,
+} from 'geojson';
 import { simpleMapStore } from './simple-map-store';
 import { markRaw } from 'vue';
 import { onEachFeature } from './feature-info-store';
@@ -26,7 +42,6 @@ export const geoFeaturesStore = defineStore('geoQueryFeatures', {
       expand?: boolean
     ) {
       return new Promise((resolve, reject) => {
-
         let fieldTypesString = '';
         if (fieldTypes != null) {
           fieldTypes.forEach((value, key) => {
@@ -40,7 +55,7 @@ export const geoFeaturesStore = defineStore('geoQueryFeatures', {
         const formData = new FormData();
         formData.append('plan', query);
         formData.append('fieldTypes', fieldTypesString);
-        formData.append('expand', (expand || false).toString())
+        formData.append('expand', (expand || false).toString());
 
         api
           .post('/map/v1/getGeoFeaturesForQuery', formData, undefined)
@@ -59,7 +74,7 @@ export const geoFeaturesStore = defineStore('geoQueryFeatures', {
             geoQueryFeatures.query = query;
             assignTypesAndLabelsVisitor(geoQueryFeatures);
             createLayers(geoQueryFeatures);
-            for (const geoFunction of geoQueryFeatures.functions){
+            for (const geoFunction of geoQueryFeatures.functions) {
               enableLayers(geoFunction);
             }
 
@@ -70,12 +85,12 @@ export const geoFeaturesStore = defineStore('geoQueryFeatures', {
             console.log('Something went wrong? ' + reason);
             reject(reason);
           });
-      })
+      });
     },
     async loadGeoFeaturesForQueryId(queryId: string) {
       return new Promise((resolve, reject) => {
         const params: { queryId: string } = {
-          queryId: queryId
+          queryId: queryId,
         };
 
         api
@@ -97,7 +112,7 @@ export const geoFeaturesStore = defineStore('geoQueryFeatures', {
             geoQueryFeatures.queryId = queryId;
             assignTypesAndLabelsVisitor(geoQueryFeatures);
             createLayers(geoQueryFeatures);
-            for (const geoFunction of geoQueryFeatures.functions){
+            for (const geoFunction of geoQueryFeatures.functions) {
               enableLayers(geoFunction);
             }
 
@@ -108,29 +123,48 @@ export const geoFeaturesStore = defineStore('geoQueryFeatures', {
             console.log('Something went wrong? ' + reason);
             reject(reason);
           });
-      })
+      });
     },
     async loadGeoFeaturesForGeometry(geometryFormData: ManualGeometryForm) {
       return new Promise((resolve, reject) => {
         const formData = new FormData();
         formData.append('geometry', geometryFormData.geometry);
 
-        if (geometryFormData.createRanges){
-          formData.append('createRanges', geometryFormData.createRanges.toString());
+        if (geometryFormData.createRanges) {
+          formData.append(
+            'createRanges',
+            geometryFormData.createRanges.toString()
+          );
           formData.append('rangeType', geometryFormData.rangeType);
 
-          const rangeSettings = geometryFormData.rangeSettings[geometryFormData.rangeType];
-          formData.append('maxEnvelopes', rangeSettings.maxEnvelopes.toString());
-          formData.append('maxExpansion', rangeSettings.maxExpansion.toString());
+          const rangeSettings =
+            geometryFormData.rangeSettings[geometryFormData.rangeType];
+          formData.append(
+            'maxEnvelopes',
+            rangeSettings.maxEnvelopes.toString()
+          );
+          formData.append(
+            'maxExpansion',
+            rangeSettings.maxExpansion.toString()
+          );
 
           if (rangeSettings.optimizeRanges) {
-            formData.append('optimizeRanges', rangeSettings.optimizeRanges.toString());
-
-            if (rangeSettings.rangeSplitThreshold){
-              formData.append('rangeSplitThreshold', rangeSettings.rangeSplitThreshold.toString());
+            formData.append(
+              'optimizeRanges',
+              rangeSettings.optimizeRanges.toString()
+            );
+
+            if (rangeSettings.rangeSplitThreshold) {
+              formData.append(
+                'rangeSplitThreshold',
+                rangeSettings.rangeSplitThreshold.toString()
+              );
             }
             if (rangeSettings.maxRangeOverlap) {
-              formData.append('maxRangeOverlap', rangeSettings.maxRangeOverlap.toString());
+              formData.append(
+                'maxRangeOverlap',
+                rangeSettings.maxRangeOverlap.toString()
+              );
             }
           }
         }
@@ -144,7 +178,7 @@ export const geoFeaturesStore = defineStore('geoQueryFeatures', {
               i++;
             }
             id = id + i;
-            
+
             const geoFeatures = response.data as GeoFeatures;
             geoFeatures.id = id;
             geoFeatures.label = id;
@@ -152,7 +186,7 @@ export const geoFeaturesStore = defineStore('geoQueryFeatures', {
             assignTypesAndLabelsVisitor(geoFeatures);
             createLayers(geoFeatures);
             enableLayers(geoFeatures.geometry);
-      
+
             this.geoQueryFeatures[id] = geoFeatures;
             resolve(id);
           })
@@ -160,7 +194,7 @@ export const geoFeaturesStore = defineStore('geoQueryFeatures', {
             console.log('Something went wrong? ' + reason);
             reject(reason);
           });
-      })
+      });
     },
     deleteGeoFeatures(id: string) {
       const geoFeatures = this.geoQueryFeatures[id];
@@ -183,7 +217,7 @@ export const geoFeaturesStore = defineStore('geoQueryFeatures', {
         delete this.geoQueryFeatures[id];
         this.geoQueryFeatures[newId] = geoFeatures;
       }
-    }
+    },
   },
 });
 
@@ -204,10 +238,11 @@ export const GEO_FUNCTION_ARRAY = 'GeoFunctionArray';
 export const FEATURE = 'Feature';
 export const FEATURE_COLLECTION = 'FeatureCollection';
 
-
-export function getTypeName(feature: TypedFeature|Feature): string | undefined {
+export function getTypeName(
+  feature: TypedFeature | Feature
+): string | undefined {
   let typeName = '' as string | undefined;
-  if('typeName' in feature) {
+  if ('typeName' in feature) {
     typeName = (feature as TypedFeature).typeName;
   } else if ('type' in feature) {
     typeName = (feature as Feature).type;
@@ -239,7 +274,7 @@ export function setLabel(feature: TypedFeature | Feature, label: string) {
   }
 }
 
-export function getLayer(feature: TypedFeature|Feature): L.Layer | undefined {
+export function getLayer(feature: TypedFeature | Feature): L.Layer | undefined {
   let layer = undefined;
   if ('layer' in feature && feature.layer != undefined) {
     layer = feature.layer;
@@ -257,7 +292,7 @@ function geoByFieldTypedFeature(geoByField: GeoByField): TypedFeature {
     delegate: true,
     label: 'Geo By Field',
     typeName: GEO_BY_FIELD,
-    feature: geoByField
+    feature: geoByField,
   } as DelegateTypedFeature;
 }
 
@@ -266,7 +301,7 @@ function geoFunctionsTypedFeature(functions: GeoFunction[]): TypedFeature {
     delegate: true,
     label: 'Geo Functions',
     typeName: GEO_FUNCTION_ARRAY,
-    feature: functions
+    feature: functions,
   } as DelegateTypedFeature;
 }
 
@@ -275,14 +310,17 @@ function geoByTierTypedFeature(geoByTier: GeoByTier): TypedFeature {
     delegate: true,
     label: 'Geo By Tier',
     typeName: GEO_BY_TIER,
-    feature: geoByTier
+    feature: geoByTier,
   } as DelegateTypedFeature;
 }
 
-function visitChildren(feature: TypedFeature|Feature, visit: (feature: TypedFeature|Feature) => void) {
+function visitChildren(
+  feature: TypedFeature | Feature,
+  visit: (feature: TypedFeature | Feature) => void
+) {
   const typeName = getTypeName(feature);
-  
-  switch(typeName) {
+
+  switch (typeName) {
     case GEO_QUERY_FEATURES: {
       const geoQueryFeatures = feature as GeoQueryFeatures;
       if (geoQueryFeatures.geoByField != undefined) {
@@ -295,7 +333,8 @@ function visitChildren(feature: TypedFeature|Feature, visit: (feature: TypedFeat
     }
 
     case GEO_BY_FIELD: {
-      const geoByField = (feature as DelegateTypedFeature).feature as GeoByField;
+      const geoByField = (feature as DelegateTypedFeature)
+        .feature as GeoByField;
       for (const field in geoByField) {
         visit(geoByField[field]);
       }
@@ -303,12 +342,13 @@ function visitChildren(feature: TypedFeature|Feature, visit: (feature: TypedFeat
     }
 
     case GEO_TERMS: {
-      const geoTerms = (feature as GeoTerms);
+      const geoTerms = feature as GeoTerms;
       if (geoTerms.geo != undefined) {
         if (geoTerms.geo != undefined && geoTerms.geo.geoJson != undefined) {
           const geoJson = geoTerms.geo.geoJson as GeoJsonObject;
           if (geoJson.type == FEATURE_COLLECTION) {
-            for (const geoJsonFeature of (geoJson as FeatureCollection).features) {
+            for (const geoJsonFeature of (geoJson as FeatureCollection)
+              .features) {
               visit(geoJsonFeature);
             }
           } else if (geoJson.type == FEATURE) {
@@ -332,7 +372,8 @@ function visitChildren(feature: TypedFeature|Feature, visit: (feature: TypedFeat
     }
 
     case GEO_FUNCTION_ARRAY: {
-      const functions = (feature as DelegateTypedFeature).feature as GeoFunction[];
+      const functions = (feature as DelegateTypedFeature)
+        .feature as GeoFunction[];
       for (const geoFunction of functions) {
         visit(geoFunction);
       }
@@ -384,35 +425,44 @@ function visitChildren(feature: TypedFeature|Feature, visit: (feature: TypedFeat
   }
 }
 
-export function getChildren(feature: TypedFeature|Feature): (TypedFeature|Feature)[] {
+export function getChildren(
+  feature: TypedFeature | Feature
+): (TypedFeature | Feature)[] {
   const children = [] as (TypedFeature | Feature)[];
 
   const typeName = getTypeName(feature);
 
-  switch(typeName) {
+  switch (typeName) {
     case GEO_QUERY_FEATURES: {
-      const geoQueryFeatures = (feature as GeoQueryFeatures);
-      if (geoQueryFeatures.geoByField != undefined && Object.keys(geoQueryFeatures.geoByField).length > 0) {
+      const geoQueryFeatures = feature as GeoQueryFeatures;
+      if (
+        geoQueryFeatures.geoByField != undefined &&
+        Object.keys(geoQueryFeatures.geoByField).length > 0
+      ) {
         children.push({
           delegate: true,
           label: 'Geo By Field',
           typeName: GEO_BY_FIELD,
-          feature: (feature as GeoQueryFeatures).geoByField
+          feature: (feature as GeoQueryFeatures).geoByField,
         } as DelegateTypedFeature);
       }
-      if (geoQueryFeatures.functions!= undefined && geoQueryFeatures.functions.length > 0) {
+      if (
+        geoQueryFeatures.functions != undefined &&
+        geoQueryFeatures.functions.length > 0
+      ) {
         children.push({
           delegate: true,
           label: 'Geo Functions',
           typeName: GEO_FUNCTION_ARRAY,
-          feature: (feature as GeoQueryFeatures).functions
+          feature: (feature as GeoQueryFeatures).functions,
         } as DelegateTypedFeature);
       }
       break;
     }
 
     case GEO_BY_FIELD: {
-      const geoByField = (feature as DelegateTypedFeature).feature as GeoByField;
+      const geoByField = (feature as DelegateTypedFeature)
+        .feature as GeoByField;
       for (const field in geoByField) {
         children.push(geoByField[field]);
       }
@@ -420,12 +470,13 @@ export function getChildren(feature: TypedFeature|Feature): (TypedFeature|Featur
     }
 
     case GEO_TERMS: {
-      const geoTerms = (feature as GeoTerms);
+      const geoTerms = feature as GeoTerms;
       if (geoTerms.geo != undefined) {
         if (geoTerms.geo != undefined && geoTerms.geo.geoJson != undefined) {
           const geoJson = geoTerms.geo.geoJson as GeoJsonObject;
           if (geoJson.type == FEATURE_COLLECTION) {
-            for (const geoJsonFeature of (geoJson as FeatureCollection).features) {
+            for (const geoJsonFeature of (geoJson as FeatureCollection)
+              .features) {
               children.push(geoJsonFeature);
             }
           } else if (geoJson.type == FEATURE) {
@@ -439,7 +490,7 @@ export function getChildren(feature: TypedFeature|Feature): (TypedFeature|Featur
           delegate: true,
           label: 'Geo By Tier',
           typeName: GEO_BY_TIER,
-          feature: geoTerms.geoByTier
+          feature: geoTerms.geoByTier,
         } as DelegateTypedFeature);
       }
       break;
@@ -454,7 +505,8 @@ export function getChildren(feature: TypedFeature|Feature): (TypedFeature|Featur
     }
 
     case GEO_FUNCTION_ARRAY: {
-      const functions = (feature as DelegateTypedFeature).feature as GeoFunction[];
+      const functions = (feature as DelegateTypedFeature)
+        .feature as GeoFunction[];
       for (const geoFunction of functions) {
         children.push(geoFunction);
       }
@@ -502,10 +554,10 @@ export function getChildren(feature: TypedFeature|Feature): (TypedFeature|Featur
   return children;
 }
 
-function assignTypesAndLabelsVisitor(feature: TypedFeature|Feature) {
+function assignTypesAndLabelsVisitor(feature: TypedFeature | Feature) {
   const typeName = getTypeName(feature);
 
-  switch(typeName) {
+  switch (typeName) {
     case GEO_QUERY_FEATURES: {
       // geoByField and geoFunctions handles by visitChildren
       visitChildren(feature, assignTypesAndLabelsVisitor);
@@ -513,7 +565,8 @@ function assignTypesAndLabelsVisitor(feature: TypedFeature|Feature) {
     }
 
     case GEO_BY_FIELD: {
-      const geoByField = (feature as DelegateTypedFeature).feature as GeoByField;
+      const geoByField = (feature as DelegateTypedFeature)
+        .feature as GeoByField;
       for (const field in geoByField) {
         geoByField[field].label = field;
         geoByField[field].typeName = GEO_TERMS;
@@ -527,7 +580,8 @@ function assignTypesAndLabelsVisitor(feature: TypedFeature|Feature) {
       if (geoTerms.geo != undefined && geoTerms.geo.geoJson != undefined) {
         const geoJson = geoTerms.geo.geoJson as GeoJsonObject;
         if (geoJson.type == FEATURE_COLLECTION) {
-          for (const geoJsonFeature of (geoJson as FeatureCollection).features) {
+          for (const geoJsonFeature of (geoJson as FeatureCollection)
+            .features) {
             if (geoJsonFeature.properties != undefined) {
               geoJsonFeature.properties.label = geoJsonFeature.id;
             }
@@ -555,7 +609,8 @@ function assignTypesAndLabelsVisitor(feature: TypedFeature|Feature) {
     }
 
     case GEO_FUNCTION_ARRAY: {
-      for (const geoFunction of ((feature as DelegateTypedFeature).feature as GeoFunction[])) {
+      for (const geoFunction of (feature as DelegateTypedFeature)
+        .feature as GeoFunction[]) {
         geoFunction.label = geoFunction.function;
         geoFunction.typeName = GEO_FUNCTION;
       }
@@ -602,11 +657,11 @@ function assignTypesAndLabelsVisitor(feature: TypedFeature|Feature) {
       const geoFeatures = feature as GeoFeatures;
       if (geoFeatures.geometry != undefined) {
         geoFeatures.geometry.label = 'Geometry';
-        geoFeatures.geometry.typeName= GEO;
+        geoFeatures.geometry.typeName = GEO;
       }
       if (geoFeatures.queryRanges != undefined) {
         geoFeatures.queryRanges.label = 'Query Ranges';
-        geoFeatures.queryRanges.typeName= GEO_TERMS;
+        geoFeatures.queryRanges.typeName = GEO_TERMS;
       }
       visitChildren(feature, assignTypesAndLabelsVisitor);
       break;
@@ -623,23 +678,27 @@ function assignTypesAndLabelsVisitor(feature: TypedFeature|Feature) {
 }
 
 let visibleBounds: L.LatLngBounds | undefined;
-export function getVisibleBounds(feature: TypedFeature|Feature): L.LatLngBounds | undefined {
+export function getVisibleBounds(
+  feature: TypedFeature | Feature
+): L.LatLngBounds | undefined {
   visibleBounds = undefined;
   return getVisibleBoundsInternal(feature);
 }
 
-function getVisibleBoundsInternal(feature: TypedFeature|Feature): L.LatLngBounds | undefined {
+function getVisibleBoundsInternal(
+  feature: TypedFeature | Feature
+): L.LatLngBounds | undefined {
   const typeName = getTypeName(feature);
 
-  switch(typeName) {
+  switch (typeName) {
     case GEO_QUERY_FEATURES:
     case GEO_BY_FIELD:
-    case GEO_TERMS: 
-    case GEO_BY_TIER: 
-    case GEO_FUNCTION_ARRAY: 
-    case GEO: 
-    case GEO_FUNCTION: 
-    case GEO_FEATURES: 
+    case GEO_TERMS:
+    case GEO_BY_TIER:
+    case GEO_FUNCTION_ARRAY:
+    case GEO:
+    case GEO_FUNCTION:
+    case GEO_FEATURES:
     case FEATURE_COLLECTION:
       visitChildren(feature, getVisibleBoundsInternal);
       break;
@@ -654,7 +713,7 @@ function getVisibleBoundsInternal(feature: TypedFeature|Feature): L.LatLngBounds
       }
 
       if (layer != undefined && leafletMap.hasLayer(layer)) {
-        const bounds = layer.getBounds()
+        const bounds = layer.getBounds();
         if (visibleBounds == undefined) {
           visibleBounds = bounds;
         } else {
@@ -671,26 +730,29 @@ function getVisibleBoundsInternal(feature: TypedFeature|Feature): L.LatLngBounds
 }
 
 let addToMapGlobal = true;
-export function enableLayers(feature: TypedFeature|Feature, addToMap?: boolean) {
-  addToMapGlobal = (addToMap == undefined) ? true : addToMap;
+export function enableLayers(
+  feature: TypedFeature | Feature,
+  addToMap?: boolean
+) {
+  addToMapGlobal = addToMap == undefined ? true : addToMap;
 
   enableLayersInternal(feature);
 }
 
-export function createLayers(feature: TypedFeature|Feature) {
+export function createLayers(feature: TypedFeature | Feature) {
   enableLayers(feature, false);
 }
 
-function enableLayersInternal(feature: TypedFeature|Feature) {
+function enableLayersInternal(feature: TypedFeature | Feature) {
   const typeName = getTypeName(feature);
 
-  switch(typeName) {
+  switch (typeName) {
     case GEO_QUERY_FEATURES:
     case GEO_BY_FIELD:
-    case GEO_TERMS: 
-    case GEO_BY_TIER: 
-    case GEO_FUNCTION_ARRAY: 
-    case GEO_FEATURES: 
+    case GEO_TERMS:
+    case GEO_BY_TIER:
+    case GEO_FUNCTION_ARRAY:
+    case GEO_FEATURES:
     case FEATURE_COLLECTION:
     case GEO:
     case GEO_FUNCTION:
@@ -702,12 +764,14 @@ function enableLayersInternal(feature: TypedFeature|Feature) {
       const geoJsonFeature = feature as Feature;
       if (geoJsonFeature.properties != undefined) {
         if (geoJsonFeature.properties.layer == undefined) {
-          geoJsonFeature.properties.layer = markRaw(L.geoJSON(geoJsonFeature, {onEachFeature: onEachFeature}));
+          geoJsonFeature.properties.layer = markRaw(
+            L.geoJSON(geoJsonFeature, { onEachFeature: onEachFeature })
+          );
           geoJsonFeature.properties.color = '#1976d2';
           geoJsonFeature.properties.layer.setStyle({
             color: geoJsonFeature.properties.color,
             fillOpacity: 0.4,
-            weight: 2
+            weight: 2,
           });
         }
 
@@ -727,16 +791,16 @@ function enableLayersInternal(feature: TypedFeature|Feature) {
   }
 }
 
-export function disableLayers(feature: TypedFeature|Feature) {
+export function disableLayers(feature: TypedFeature | Feature) {
   const typeName = getTypeName(feature);
 
-  switch(typeName) {
+  switch (typeName) {
     case GEO_QUERY_FEATURES:
     case GEO_BY_FIELD:
-    case GEO_TERMS: 
-    case GEO_BY_TIER: 
-    case GEO_FUNCTION_ARRAY: 
-    case GEO_FEATURES: 
+    case GEO_TERMS:
+    case GEO_BY_TIER:
+    case GEO_FUNCTION_ARRAY:
+    case GEO_FEATURES:
     case FEATURE_COLLECTION:
     case GEO:
     case GEO_FUNCTION:
@@ -766,21 +830,21 @@ export function disableLayers(feature: TypedFeature|Feature) {
 }
 
 let isVisibleGlobal = false;
-export function layersVisible(feature: TypedFeature|Feature): boolean {
+export function layersVisible(feature: TypedFeature | Feature): boolean {
   isVisibleGlobal = false;
   return layersVisibleInternal(feature);
 }
 
-function layersVisibleInternal(feature: TypedFeature|Feature): boolean {
+function layersVisibleInternal(feature: TypedFeature | Feature): boolean {
   const typeName = getTypeName(feature);
 
-  switch(typeName) {
+  switch (typeName) {
     case GEO_QUERY_FEATURES:
     case GEO_BY_FIELD:
-    case GEO_TERMS: 
-    case GEO_BY_TIER: 
-    case GEO_FUNCTION_ARRAY: 
-    case GEO_FEATURES: 
+    case GEO_TERMS:
+    case GEO_BY_TIER:
+    case GEO_FUNCTION_ARRAY:
+    case GEO_FEATURES:
     case FEATURE_COLLECTION:
     case GEO:
     case GEO_FUNCTION:
@@ -811,27 +875,29 @@ function layersVisibleInternal(feature: TypedFeature|Feature): boolean {
 }
 
 let colors = [] as string[];
-export function layersColor(feature: TypedFeature|Feature): string | undefined {
+export function layersColor(
+  feature: TypedFeature | Feature
+): string | undefined {
   colors = [];
   layersColorInternal(feature);
 
   if (colors.length == 1) {
     return colors[0];
   }
-  
+
   return undefined;
 }
 
-function layersColorInternal(feature: TypedFeature|Feature) {
+function layersColorInternal(feature: TypedFeature | Feature) {
   const typeName = getTypeName(feature);
 
-  switch(typeName) {
+  switch (typeName) {
     case GEO_QUERY_FEATURES:
     case GEO_BY_FIELD:
-    case GEO_TERMS: 
-    case GEO_BY_TIER: 
-    case GEO_FUNCTION_ARRAY: 
-    case GEO_FEATURES: 
+    case GEO_TERMS:
+    case GEO_BY_TIER:
+    case GEO_FUNCTION_ARRAY:
+    case GEO_FEATURES:
     case FEATURE_COLLECTION:
     case GEO:
     case GEO_FUNCTION:
@@ -861,22 +927,22 @@ function layersColorInternal(feature: TypedFeature|Feature) {
   }
 }
 
-let selectedColor = ''
-export function setLayerColor(feature: TypedFeature|Feature, color: string) {
+let selectedColor = '';
+export function setLayerColor(feature: TypedFeature | Feature, color: string) {
   selectedColor = color;
   setLayerColorInternal(feature);
 }
 
-function setLayerColorInternal(feature: TypedFeature|Feature) {
+function setLayerColorInternal(feature: TypedFeature | Feature) {
   const typeName = getTypeName(feature);
 
-  switch(typeName) {
+  switch (typeName) {
     case GEO_QUERY_FEATURES:
     case GEO_BY_FIELD:
-    case GEO_TERMS: 
-    case GEO_BY_TIER: 
-    case GEO_FUNCTION_ARRAY: 
-    case GEO_FEATURES: 
+    case GEO_TERMS:
+    case GEO_BY_TIER:
+    case GEO_FUNCTION_ARRAY:
+    case GEO_FEATURES:
     case FEATURE_COLLECTION:
     case GEO:
     case GEO_FUNCTION:
@@ -895,8 +961,8 @@ function setLayerColorInternal(feature: TypedFeature|Feature) {
 
       if (layer != undefined) {
         layer.setStyle({
-          color: selectedColor
-        })
+          color: selectedColor,
+        });
       }
       break;
 
diff --git a/service/src/main/frontend/src/stores/manual-query-store.ts b/service/src/main/frontend/src/stores/manual-query-store.ts
index 78b5d64..12f74ff 100644
--- a/service/src/main/frontend/src/stores/manual-query-store.ts
+++ b/service/src/main/frontend/src/stores/manual-query-store.ts
@@ -7,7 +7,7 @@ export const manualQueryFormStore = (id: string) =>
       ({
         query: '',
         fieldTypes: [] as FieldType[],
-        expand: false
+        expand: false,
       } as ManualQueryForm),
     getters: {},
     actions: {},
diff --git a/service/src/main/frontend/src/stores/simple-map-store.ts b/service/src/main/frontend/src/stores/simple-map-store.ts
index 90c3041..9473552 100644
--- a/service/src/main/frontend/src/stores/simple-map-store.ts
+++ b/service/src/main/frontend/src/stores/simple-map-store.ts
@@ -16,9 +16,8 @@ export class SimpleMapStore {
     minZoom: number,
     crs: string
   ) {
-
     let CRS;
-    switch(crs) {
+    switch (crs) {
       case 'Earth':
         CRS = L.CRS.Earth;
         break;