diff --git a/.git-blame-ignore-revs b/.git-blame-ignore-revs
index 559960be..05d7d1a4 100644
--- a/.git-blame-ignore-revs
+++ b/.git-blame-ignore-revs
@@ -4,3 +4,5 @@
 4db15705dbcb5c2b1be39e96990804cdf03fbf1b
 # Format with Prettier
 c5e40b27cd426c9665e28db54dc092d3997eb718
+# Apply automated ESLint fixes
+ea24a92f3c78faafc08d2de05d1b22745b41d1c3
diff --git a/web/eslint.config.ts b/web/eslint.config.ts
index 4ce4da23..30f99747 100644
--- a/web/eslint.config.ts
+++ b/web/eslint.config.ts
@@ -11,16 +11,23 @@ export default defineConfigWithVueTs(
     name: "app/files-to-lint",
     files: ["**/*.{vue,ts,mts,tsx}"],
   },
+
   globalIgnores(["**/dist/**", "**/dist-ssr/**", "**/coverage/**"]),
-  ...pluginVue.configs["flat/essential"],
+
+  ...pluginVue.configs["flat/recommended"],
   vueTsConfigs.recommended,
+
   {
     rules: {
       // allowModifiers: Vuetify uses dot notation for column slots (v-slot:item.columnName)
       "vue/valid-v-slot": ["error", { allowModifiers: true }],
       // `any` is used everywhere and will be difficult to eliminate
       "@typescript-eslint/no-explicit-any": "off",
+      // Temporary ignores until rules can be fixed
+      "vue/no-template-shadow": "off",
+      "vue/require-default-prop": "off",
     },
   },
+
   skipFormatting,
 );
diff --git a/web/src/App.vue b/web/src/App.vue
index d6d55909..f1207d42 100644
--- a/web/src/App.vue
+++ b/web/src/App.vue
@@ -62,9 +62,9 @@ watch(() => appStore.currentUser, onReady);
         <v-btn
           icon
           variant="flat"
-          @click.stop="appStore.currentError = undefined"
           class="pa-3"
           style="float: right"
+          @click.stop="appStore.currentError = undefined"
         >
           <v-icon>mdi-close</v-icon>
         </v-btn>
diff --git a/web/src/components/ControlsBar.vue b/web/src/components/ControlsBar.vue
index 6562e5ca..e693da5c 100644
--- a/web/src/components/ControlsBar.vue
+++ b/web/src/components/ControlsBar.vue
@@ -317,24 +317,24 @@ watch(newBasemapStyleJSON, debounce(createNewBasemapPreview, 1000));
       <v-menu activator="parent" :close-on-content-click="false" open-on-hover>
         <v-card style="max-height: 400px; overflow-y: auto">
           <v-list
+            ref="basemapList"
             :selected="[mapStore.currentBasemap]"
-            @update:selected="
-              (selected) => (mapStore.currentBasemap = selected[0])
-            "
             class="basemap-list"
-            ref="basemapList"
             density="compact"
             mandatory
+            @update:selected="
+              (selected) => (mapStore.currentBasemap = selected[0])
+            "
           >
             <v-list-subheader>Base Map Options</v-list-subheader>
             <v-list-item
               key="new"
               title="Create Custom Basemap"
-              @click="showBasemapCreation = true"
               class="px-2"
               style="color: rgb(var(--v-theme-primary))"
+              @click="showBasemapCreation = true"
             >
-              <template v-slot:prepend>
+              <template #prepend>
                 <v-icon icon="mdi-plus" class="pa-0" color="primary"></v-icon>
               </template>
             </v-list-item>
@@ -345,7 +345,7 @@ watch(newBasemapStyleJSON, debounce(createNewBasemapPreview, 1000));
               class="px-2"
             >
               {{ basemap.name }}
-              <template v-slot:prepend>
+              <template #prepend>
                 <v-icon
                   :icon="
                     basemap.id === mapStore.currentBasemap?.id
@@ -357,8 +357,8 @@ watch(newBasemapStyleJSON, debounce(createNewBasemapPreview, 1000));
                 ></v-icon>
                 <div
                   v-if="basemap.id !== undefined"
-                  class="basemap-preview"
                   :id="'basemap-preview-' + basemap.id"
+                  class="basemap-preview"
                 />
                 <div v-else style="width: 90px" />
               </template>
@@ -367,12 +367,12 @@ watch(newBasemapStyleJSON, debounce(createNewBasemapPreview, 1000));
         </v-card>
       </v-menu>
     </v-btn>
-    <v-btn class="control-btn" @click="fitMap" variant="flat">
+    <v-btn class="control-btn" variant="flat" @click="fitMap">
       <v-progress-circular v-if="loadingBounds" indeterminate />
       <v-icon
         v-else
-        icon="mdi-fit-to-page-outline"
         v-tooltip="'Fit Map to Visible Layers'"
+        icon="mdi-fit-to-page-outline"
       ></v-icon>
     </v-btn>
     <v-btn v-if="!isComparing" class="control-btn" variant="flat">
@@ -405,8 +405,8 @@ watch(newBasemapStyleJSON, debounce(createNewBasemapPreview, 1000));
       </v-menu>
     </v-btn>
     <v-btn
-      class="control-btn"
       v-if="projectStore.currentProject"
+      class="control-btn"
       variant="flat"
     >
       <v-icon icon="mdi-view-array" class="pb-1 pr-2"></v-icon>
@@ -441,26 +441,26 @@ watch(newBasemapStyleJSON, debounce(createNewBasemapPreview, 1000));
                 class="control-menu-row pa-1"
                 @click="projectStore.navigateToViewState(viewState)"
               >
-                <template v-slot:prepend>
+                <template #prepend>
                   <img :src="viewState.thumbnail" height="70px" />
                 </template>
-                <template v-slot:title>
+                <template #title>
                   <div style="width: 150px; text-wrap: wrap">
                     {{ viewState.name }}
                   </div>
                 </template>
-                <template v-slot:append>
+                <template #append>
                   <v-btn
                     v-if="userHasEditPermission"
-                    icon="mdi-delete"
                     v-tooltip="'Delete this view state'"
+                    icon="mdi-delete"
                     flat
                     variant="text"
                     @click.stop.prevent="viewStateToDelete = viewState"
                   ></v-btn>
                   <v-btn
-                    icon="mdi-share"
                     v-tooltip="'Copy shareable link'"
+                    icon="mdi-share"
                     flat
                     variant="text"
                     @click.stop.prevent="copyViewStateLink(viewState)"
@@ -580,7 +580,7 @@ watch(newBasemapStyleJSON, debounce(createNewBasemapPreview, 1000));
           ></div>
         </v-card-text>
         <v-card-actions style="text-align: right">
-          <v-btn @click="cancelBasemapCreate" variant="tonal"> Cancel </v-btn>
+          <v-btn variant="tonal" @click="cancelBasemapCreate"> Cancel </v-btn>
           <v-btn
             color="primary"
             :disabled="!newBasemapValid"
@@ -628,7 +628,7 @@ watch(newBasemapStyleJSON, debounce(createNewBasemapPreview, 1000));
           <div v-else>Loading thumbnail...</div>
         </v-card-text>
         <v-card-actions style="text-align: right">
-          <v-btn @click="cancelCreateViewState" variant="tonal"> Cancel </v-btn>
+          <v-btn variant="tonal" @click="cancelCreateViewState"> Cancel </v-btn>
           <v-btn
             color="primary"
             :disabled="!newViewStateValid || !newViewStateThumbnail"
@@ -658,7 +658,7 @@ watch(newBasemapStyleJSON, debounce(createNewBasemapPreview, 1000));
           }}"?
         </v-card-text>
         <v-card-actions style="text-align: right">
-          <v-btn @click="viewStateToDelete = undefined" variant="tonal">
+          <v-btn variant="tonal" @click="viewStateToDelete = undefined">
             Cancel
           </v-btn>
           <v-btn color="error" variant="tonal" @click="submitDeleteViewState()">
diff --git a/web/src/components/DatasetList.vue b/web/src/components/DatasetList.vue
index fae42e98..2c5825d7 100644
--- a/web/src/components/DatasetList.vue
+++ b/web/src/components/DatasetList.vue
@@ -63,7 +63,7 @@ watch(filteredDatasets, expandAllGroups);
       append-inner-icon="mdi-magnify"
       hide-details
     />
-    <v-expansion-panels v-model="showFilter" flat v-if="props.datasets?.length">
+    <v-expansion-panels v-if="props.datasets?.length" v-model="showFilter" flat>
       <v-expansion-panel value="true" class="mb-2 bg-transparent">
         <v-expansion-panel-title class="tag-filter-title">
           Filter by Tag
@@ -115,7 +115,7 @@ watch(filteredDatasets, expandAllGroups);
         v-else-if="projectStore.loadingDatasets"
         indeterminate
       ></v-progress-linear>
-      <v-card-text class="help-text" v-else>No available Datasets.</v-card-text>
+      <v-card-text v-else class="help-text">No available Datasets.</v-card-text>
     </v-card>
   </div>
 </template>
diff --git a/web/src/components/DetailView.vue b/web/src/components/DetailView.vue
index f1571b2e..3fa13e78 100644
--- a/web/src/components/DetailView.vue
+++ b/web/src/components/DetailView.vue
@@ -172,9 +172,9 @@ watch([showModal, currentDetails], fetchRelated);
 
 <template>
   <v-icon
+    v-tooltip="'View Details'"
     icon="mdi-dots-vertical"
     size="small"
-    v-tooltip="'View Details'"
     class="mx-1"
     @click.stop="showModal = true"
   ></v-icon>
@@ -188,8 +188,8 @@ watch([showModal, currentDetails], fetchRelated);
             style="max-width: 90%; margin: 4px 4em 0 0; align-items: center"
           >
             <v-icon
-              icon="mdi-arrow-left"
               v-if="stackPoppable"
+              icon="mdi-arrow-left"
               @click="popStack"
             />
             <v-icon
@@ -215,7 +215,7 @@ watch([showModal, currentDetails], fetchRelated);
               item-value="id"
               @click:select="({ id }) => addToStack(id as number)"
             >
-              <template v-slot:prepend="{ item }">
+              <template #prepend="{ item }">
                 <v-icon
                   v-if="item.prependIcon"
                   :icon="item.prependIcon"
@@ -225,10 +225,10 @@ watch([showModal, currentDetails], fetchRelated);
                   item.type.toUpperCase()
                 }}</span>
               </template>
-              <template v-slot:title="{ item }">
+              <template #title="{ item }">
                 <div v-if="item" v-tooltip="item.name">{{ item.name }}</div>
               </template>
-              <template v-slot:append="{ item }">
+              <template #append="{ item }">
                 <a v-if="item?.download" :href="item.download.url" download>
                   <v-icon
                     v-tooltip="
diff --git a/web/src/components/SliderNumericInput.vue b/web/src/components/SliderNumericInput.vue
index 2566a61d..864da5d1 100644
--- a/web/src/components/SliderNumericInput.vue
+++ b/web/src/components/SliderNumericInput.vue
@@ -74,7 +74,7 @@ function updateRange(lower: number, upper: number) {
     hide-details
     @update:model-value="(v: number) => updateValue(v)"
   >
-    <template v-slot:append>
+    <template #append>
       <v-number-input
         :model-value="props.model"
         :min="props.min"
@@ -83,7 +83,7 @@ function updateRange(lower: number, upper: number) {
         :precision="precision"
         :style="{ width: getInputWidth() }"
         variant="outlined"
-        controlVariant="stacked"
+        control-variant="stacked"
         hide-details
         @update:model-value="updateValue"
         @keydown.enter="blur()"
@@ -102,7 +102,7 @@ function updateRange(lower: number, upper: number) {
     hide-details
     @update:model-value="([lower, upper]) => updateRange(lower, upper)"
   >
-    <template v-slot:prepend>
+    <template #prepend>
       <v-number-input
         :model-value="props.rangeModel[0]"
         :min="props.min"
@@ -111,7 +111,7 @@ function updateRange(lower: number, upper: number) {
         :precision="precision"
         :style="{ width: getInputWidth() }"
         variant="outlined"
-        controlVariant="stacked"
+        control-variant="stacked"
         hide-details
         @update:model-value="
           (v) => {
@@ -121,7 +121,7 @@ function updateRange(lower: number, upper: number) {
         @keydown.enter="blur()"
       />
     </template>
-    <template v-slot:append>
+    <template #append>
       <v-number-input
         :model-value="props.rangeModel[1]"
         :min="props.rangeModel[0]"
@@ -130,7 +130,7 @@ function updateRange(lower: number, upper: number) {
         :precision="precision"
         :style="{ width: getInputWidth() }"
         variant="outlined"
-        controlVariant="stacked"
+        control-variant="stacked"
         hide-details
         @update:model-value="
           (v) => {
diff --git a/web/src/components/map/MapTooltip.vue b/web/src/components/map/MapTooltip.vue
index 5eec8993..a1fc469f 100644
--- a/web/src/components/map/MapTooltip.vue
+++ b/web/src/components/map/MapTooltip.vue
@@ -186,10 +186,10 @@ function toggleNodeHandler() {
       v-if="clickedFeature.feature.properties.node_id"
       block
       variant="outlined"
-      @click="toggleNodeHandler"
       :text="
         clickedFeatureIsDeactivatedNode ? 'Reactivate Node' : 'Deactivate Node'
       "
+      @click="toggleNodeHandler"
     />
   </div>
 
diff --git a/web/src/components/map/ToggleCompareMap.vue b/web/src/components/map/ToggleCompareMap.vue
index c53090cc..a797a7eb 100644
--- a/web/src/components/map/ToggleCompareMap.vue
+++ b/web/src/components/map/ToggleCompareMap.vue
@@ -298,6 +298,7 @@ onMounted(() => {
       layer-order="bottommost"
       :attribution-control="false"
       :preserve-drawing-buffer="true"
+      class="map"
       @panend="compareStore.updateMapStats($event)"
       @zoomend="compareStore.updateMapStats($event)"
       @pitchend="compareStore.updateMapStats($event)"
@@ -305,7 +306,6 @@ onMounted(() => {
       @sliderend="compareStore.updateSlider($event)"
       @map-ready-a="handleMapReady($event, 'A')"
       @map-ready-b="handleMapReady($event, 'B')"
-      class="map"
     />
 
     <div id="map-tooltip" ref="tooltip" class="tooltip pa-0">
diff --git a/web/src/components/projects/AccessControl.vue b/web/src/components/projects/AccessControl.vue
index 5d577dd5..6dd6d9ae 100644
--- a/web/src/components/projects/AccessControl.vue
+++ b/web/src/components/projects/AccessControl.vue
@@ -76,8 +76,8 @@ onMounted(() => {
       <v-list-subheader>
         Owner
         <v-icon
-          icon="mdi-information-outline"
           v-tooltip="'Permissions: Read, Write, Delete, Access Control'"
+          icon="mdi-information-outline"
         />
       </v-list-subheader>
       <v-list-item
@@ -89,7 +89,7 @@ onMounted(() => {
         "
         :subtitle="project.owner.email"
       >
-        <template v-slot:prepend>
+        <template #prepend>
           <v-btn
             flat
             icon
@@ -109,7 +109,7 @@ onMounted(() => {
             <v-icon v-else icon="mdi-account"></v-icon>
           </v-btn>
         </template>
-        <template v-slot:append>
+        <template #append>
           <v-icon
             v-if="permissions[project.id] === 'owner'"
             icon="mdi-pencil"
@@ -123,8 +123,8 @@ onMounted(() => {
       <v-list-subheader>
         Collaborators
         <v-icon
-          icon="mdi-information-outline"
           v-tooltip="'Permissions: Read & Write'"
+          icon="mdi-information-outline"
         />
       </v-list-subheader>
       <v-list-item
@@ -137,7 +137,7 @@ onMounted(() => {
         "
         :subtitle="collaborator.email"
       >
-        <template v-slot:prepend>
+        <template #prepend>
           <v-btn
             flat
             icon
@@ -154,7 +154,7 @@ onMounted(() => {
             </v-tooltip>
           </v-btn>
         </template>
-        <template v-slot:append>
+        <template #append>
           <v-icon
             v-if="permissions[project.id] === 'owner'"
             icon="mdi-trash-can"
@@ -170,8 +170,8 @@ onMounted(() => {
       <v-list-subheader>
         Followers
         <v-icon
-          icon="mdi-information-outline"
           v-tooltip="'Permissions: Read Only'"
+          icon="mdi-information-outline"
         />
       </v-list-subheader>
       <v-list-item
@@ -184,7 +184,7 @@ onMounted(() => {
         "
         :subtitle="follower.email"
       >
-        <template v-slot:prepend>
+        <template #prepend>
           <v-btn
             flat
             icon
@@ -201,7 +201,7 @@ onMounted(() => {
             </v-tooltip>
           </v-btn>
         </template>
-        <template v-slot:append>
+        <template #append>
           <v-icon
             v-if="permissions[project.id] === 'owner'"
             icon="mdi-trash-can"
@@ -272,7 +272,7 @@ onMounted(() => {
               }
             "
           >
-            <template v-slot:item="{ props, item }">
+            <template #item="{ props, item }">
               <v-list-item
                 v-bind="props"
                 :title="
@@ -293,8 +293,8 @@ onMounted(() => {
           <v-card-actions>
             <v-btn
               color="primary"
-              @click="savePermissions"
               :disabled="!selectedUsers.length"
+              @click="savePermissions"
             >
               Submit
             </v-btn>
@@ -323,8 +323,8 @@ onMounted(() => {
           <v-btn color="red" @click="savePermissions">Delete</v-btn>
           <v-btn
             color="primary"
-            @click="userToRemove = undefined"
             variant="tonal"
+            @click="userToRemove = undefined"
           >
             Cancel
           </v-btn>
diff --git a/web/src/components/projects/DatasetSelect.vue b/web/src/components/projects/DatasetSelect.vue
index f0076c05..c4771a88 100644
--- a/web/src/components/projects/DatasetSelect.vue
+++ b/web/src/components/projects/DatasetSelect.vue
@@ -65,7 +65,7 @@ function submitDelete() {
 
 <template>
   <DatasetList :datasets="datasetsWithLayers">
-    <template v-slot:list="{ data }">
+    <template #list="{ data }">
       <v-expansion-panels
         multiple
         variant="accordion"
@@ -147,16 +147,16 @@ function submitDelete() {
                 style="min-width: 75px; text-align: right"
               >
                 <v-icon
+                  v-tooltip="dataset.n_layers + ' layers'"
                   icon="mdi-layers"
                   size="small"
-                  v-tooltip="dataset.n_layers + ' layers'"
                   class="ml-2"
                 ></v-icon>
                 <span class="secondary-text">{{ dataset.n_layers }}</span>
                 <v-icon
+                  v-tooltip="dataset.description"
                   icon="mdi-information-outline"
                   size="small"
-                  v-tooltip="dataset.description"
                   class="mx-1"
                 ></v-icon>
                 <DetailView
@@ -225,8 +225,8 @@ function submitDelete() {
             <v-btn color="red" @click="submitDelete"> Delete </v-btn>
             <v-btn
               color="primary"
-              @click="datasetToDelete = undefined"
               variant="tonal"
+              @click="datasetToDelete = undefined"
             >
               Cancel
             </v-btn>
diff --git a/web/src/components/projects/DatasetUpload.vue b/web/src/components/projects/DatasetUpload.vue
index 8a76e326..0e5a27c7 100644
--- a/web/src/components/projects/DatasetUpload.vue
+++ b/web/src/components/projects/DatasetUpload.vue
@@ -203,9 +203,9 @@ watch(open, () => {
           Upload Dataset
 
           <v-icon
+            v-tooltip="'Warning: unsaved changes will be discarded'"
             icon="mdi-close"
             style="position: absolute; top: 10px; right: 5px"
-            v-tooltip="'Warning: unsaved changes will be discarded'"
             @mousedown="cancel"
           />
         </div>
@@ -214,9 +214,9 @@ watch(open, () => {
           style="flex-direction: column; row-gap: 10px"
         >
           <v-text-field
+            v-model="name"
             autofocus
             label="Dataset Name"
-            v-model="name"
             :rules="mandatoryRule"
             hide-details="auto"
           />
@@ -231,38 +231,38 @@ watch(open, () => {
             </div>
           </div>
           <v-text-field
-            label="Description"
             v-model="description"
+            label="Description"
             :rules="mandatoryRule"
             hide-details="auto"
           />
           <v-combobox
-            label="Category"
             v-model="category"
+            label="Category"
             :items="categories"
             :rules="mandatoryRule"
             hide-details="auto"
           >
-            <template v-slot:append-inner>
+            <template #append-inner>
               <v-icon
                 v-if="category && !categories.includes(category)"
+                v-tooltip="'You are creating a new category'"
                 icon="mdi-information-outline"
                 class="ml-2"
                 color="primary"
-                v-tooltip="'You are creating a new category'"
               />
             </template>
           </v-combobox>
           <v-combobox
-            label="Tags"
             v-model="tags"
+            label="Tags"
             :items="projectStore.availableDatasetTags"
             hide-details="auto"
             multiple
             chips
             closable-chips
           >
-            <template v-slot:append-inner>
+            <template #append-inner>
               <v-icon
                 v-if="
                   tags.length &&
@@ -270,10 +270,10 @@ watch(open, () => {
                     (t) => !projectStore.availableDatasetTags.includes(t),
                   )
                 "
+                v-tooltip="'You are creating a new tag'"
                 icon="mdi-information-outline"
                 class="ml-2"
                 color="primary"
-                v-tooltip="'You are creating a new tag'"
               />
             </template>
           </v-combobox>
@@ -314,18 +314,18 @@ watch(open, () => {
               >
                 <div v-if="focusedLayerId === layer.id">
                   <v-text-field
-                    label="Layer Name"
                     v-model="layer.name"
+                    label="Layer Name"
                     :rules="mandatoryRule"
                     hide-details="auto"
                   />
                   <v-icon
-                    icon="mdi-information-outline"
-                    color="primary"
-                    class="upload-info-icon"
                     v-tooltip="
                       'Upload multiple files to create a sequence of frames, or upload a single file to optionally split into frames.'
                     "
+                    icon="mdi-information-outline"
+                    color="primary"
+                    class="upload-info-icon"
                   />
                   <v-file-upload
                     v-model="layer.files"
@@ -347,10 +347,10 @@ watch(open, () => {
                       }
                     "
                   >
-                    <template v-slot:icon>
+                    <template #icon>
                       <v-icon size="xs" icon="mdi-upload" color="primary" />
                     </template>
-                    <template v-slot:title>
+                    <template #title>
                       <div style="font-weight: normal; font-size: medium">
                         Drag & drop file(s) or
                         <span
@@ -360,15 +360,15 @@ watch(open, () => {
                         >
                       </div>
                     </template>
-                    <template v-slot:item="{ props: itemProps }">
+                    <template #item="{ props: itemProps }">
                       <v-file-upload-item v-bind="itemProps" lines="one" nav>
-                        <template v-slot:prepend>
+                        <template #prepend>
                           <v-icon icon="mdi-file-outline" />
                         </template>
-                        <template v-slot:title="{ title }">
+                        <template #title="{ title }">
                           <div class="text-primary">{{ title }}</div>
                         </template>
-                        <template v-slot:clear="{ props: clearProps }">
+                        <template #clear="{ props: clearProps }">
                           <v-icon
                             color="error"
                             icon="mdi-close-circle"
@@ -420,12 +420,12 @@ watch(open, () => {
                         :rules="mandatoryRule"
                         hide-details="auto"
                       >
-                        <template v-slot:append>
+                        <template #append>
                           <v-icon
-                            icon="mdi-information-outline"
                             v-tooltip="
                               'Enter the name of an ordered feature property that corresponds to frame'
                             "
+                            icon="mdi-information-outline"
                             color="primary"
                           />
                         </template>
@@ -444,10 +444,10 @@ watch(open, () => {
                   {{ layer.name || "Layer " + (index + 1) }}
 
                   <div>
-                    <v-icon @click="focusedLayerId = layer.id" class="ml-2"
+                    <v-icon class="ml-2" @click="focusedLayerId = layer.id"
                       >mdi-pencil-outline</v-icon
                     >
-                    <v-icon @click="removeLayer(layer.id)" class="ml-2"
+                    <v-icon class="ml-2" @click="removeLayer(layer.id)"
                       >mdi-delete-outline</v-icon
                     >
                   </div>
diff --git a/web/src/components/projects/ProjectConfig.vue b/web/src/components/projects/ProjectConfig.vue
index 0e0e64f0..6b4a0d87 100644
--- a/web/src/components/projects/ProjectConfig.vue
+++ b/web/src/components/projects/ProjectConfig.vue
@@ -242,11 +242,11 @@ watch(
   <div>
     <div class="project-row my-5">
       <v-select
+        v-model="projectStore.currentProject"
         placeholder="Select a Project"
         no-data-text="No available projects."
         :items="projectStore.availableProjects"
         :autofocus="!projectStore.currentProject"
-        v-model="projectStore.currentProject"
         item-title="name"
         item-value="id"
         density="compact"
@@ -290,19 +290,19 @@ watch(
         To get started, create a project and add datasets to it.
       </v-card-text>
     </v-card>
-    <div class="project-row" v-if="projectStore.currentProject">
+    <div v-if="projectStore.currentProject" class="project-row">
       <span class="item-counts">
-        <v-icon icon="mdi-database-outline" v-tooltip="'Datasets'"></v-icon>
+        <v-icon v-tooltip="'Datasets'" icon="mdi-database-outline"></v-icon>
         {{ projectStore.currentProject.item_counts.datasets || 0 }}
         <v-icon
-          icon="mdi-border-none-variant"
           v-tooltip="'Regions'"
+          icon="mdi-border-none-variant"
           class="ml-3"
         ></v-icon>
         {{ projectStore.currentProject.item_counts.regions || 0 }}
-        <v-icon icon="mdi-poll" v-tooltip="'Charts'" class="ml-3"></v-icon>
+        <v-icon v-tooltip="'Charts'" icon="mdi-poll" class="ml-3"></v-icon>
         {{ projectStore.currentProject.item_counts.charts || 0 }}
-        <v-icon icon="mdi-earth" v-tooltip="'Analyses'" class="ml-3"></v-icon>
+        <v-icon v-tooltip="'Analyses'" icon="mdi-earth" class="ml-3"></v-icon>
         {{ projectStore.currentProject.item_counts.analyses || 0 }}
       </span>
       <v-menu
@@ -311,7 +311,7 @@ watch(
         open-delay="150"
         :close-on-content-click="false"
       >
-        <template v-slot:activator="{ props }">
+        <template #activator="{ props }">
           <v-icon
             v-bind="props"
             icon="mdi-map-marker-right"
@@ -392,7 +392,7 @@ watch(
               :active="project.id === selectedProject?.id"
               @click="() => selectProject(project)"
             >
-              <template v-slot:title="{ title }">
+              <template #title="{ title }">
                 <v-text-field
                   v-if="projectToEdit?.id === project.id"
                   v-model="newProjectName"
@@ -408,15 +408,15 @@ watch(
                 />
                 <span v-else>{{ title }}</span>
               </template>
-              <template v-slot:append>
+              <template #append>
                 <div
                   v-if="
                     ['owner', 'collaborator'].includes(permissions[project.id])
                   "
                 >
                   <v-icon
-                    icon="mdi-pencil"
                     v-if="!projectToEdit && !projectToDelete"
+                    icon="mdi-pencil"
                     @click.stop="projectToEdit = project"
                   />
                   <v-btn
@@ -432,8 +432,8 @@ watch(
                 </div>
                 <div v-if="['owner'].includes(permissions[project.id])">
                   <v-icon
-                    icon="mdi-trash-can"
                     v-if="!projectToEdit && !projectToDelete"
+                    icon="mdi-trash-can"
                     @click.stop="projectToDelete = project"
                   />
                 </div>
@@ -441,8 +441,8 @@ watch(
             </v-list-item>
           </v-list>
           <div
-            class="pa-2 d-flex"
             v-if="projectStore.projectConfigMode === 'new'"
+            class="pa-2 d-flex"
           >
             <v-text-field
               v-model="newProjectName"
@@ -473,8 +473,8 @@ watch(
           <v-btn
             v-if="selectedProject"
             class="options"
-            @click="loadSelectedProject"
             color="primary"
+            @click="loadSelectedProject"
           >
             Load Project
           </v-btn>
@@ -498,11 +498,11 @@ watch(
                 <div class="dataset-card">
                   <DatasetSelect
                     :datasets="projDatasets"
-                    :savingId="savingId"
+                    :saving-id="savingId"
                     :show-delete="false"
                     button-icon="mdi-close"
-                    @buttonClick="removeDatasetFromProject"
-                    @onDelete="refreshProjectDatasets"
+                    @button-click="removeDatasetFromProject"
+                    @on-delete="refreshProjectDatasets"
                   />
                 </div>
               </div>
@@ -511,21 +511,21 @@ watch(
                 <div class="d-flex">
                   <v-card-text>All Datasets</v-card-text>
                   <DatasetUpload
-                    :allDatasets="projectStore.allDatasets"
-                    :projectPermission="permissions[selectedProject.id]"
-                    @addToCurrentProject="addDatasetToProject"
+                    :all-datasets="projectStore.allDatasets"
+                    :project-permission="permissions[selectedProject.id]"
+                    @add-to-current-project="addDatasetToProject"
                     @uploaded="datasetUploaded"
                   />
                 </div>
                 <div class="dataset-card">
                   <DatasetSelect
                     :datasets="projectStore.allDatasets"
-                    :savingId="savingId"
-                    :addedIds="projDatasets?.map((d) => d.id)"
+                    :saving-id="savingId"
+                    :added-ids="projDatasets?.map((d) => d.id)"
                     :show-delete="true"
                     button-icon="mdi-plus"
-                    @buttonClick="addDatasetToProject"
-                    @onDelete="refreshProjectDatasets"
+                    @button-click="addDatasetToProject"
+                    @on-delete="refreshProjectDatasets"
                   />
                 </div>
               </div>
@@ -535,7 +535,7 @@ watch(
             <AccessControl
               :project="selectedProject"
               :permissions="permissions"
-              @updateSelectedProject="updateSelectedProject"
+              @update-selected-project="updateSelectedProject"
             />
           </div>
         </div>
@@ -560,8 +560,8 @@ watch(
             <v-btn color="red" @click="del">Delete</v-btn>
             <v-btn
               color="primary"
-              @click="projectToDelete = undefined"
               variant="tonal"
+              @click="projectToDelete = undefined"
             >
               Cancel
             </v-btn>
diff --git a/web/src/components/sidebars/AnalyticsPanel.vue b/web/src/components/sidebars/AnalyticsPanel.vue
index 7b00a30d..092840cf 100644
--- a/web/src/components/sidebars/AnalyticsPanel.vue
+++ b/web/src/components/sidebars/AnalyticsPanel.vue
@@ -285,7 +285,7 @@ watch(
         <v-card-title class="analysis-title">
           <span>{{ analysisStore.currentAnalysisType.name }}</span>
           <v-tooltip text="Close" location="bottom">
-            <template v-slot:activator="{ props }">
+            <template #activator="{ props }">
               <v-btn
                 v-bind="props"
                 icon="mdi-close"
@@ -317,7 +317,7 @@ watch(
 
         <v-window v-model="analysisStore.currentAnalysisTab">
           <v-window-item value="new">
-            <v-form class="pa-3" @submit.prevent ref="inputForm">
+            <v-form ref="inputForm" class="pa-3" @submit.prevent>
               <v-card-subtitle class="px-1">Select inputs</v-card-subtitle>
               <div
                 v-for="[key, value] in Object.entries(
@@ -371,16 +371,16 @@ watch(
                   hide-details="auto"
                   class="my-1"
                 >
-                  <template v-slot:item="{ props, item }">
+                  <template #item="{ props, item }">
                     <v-list-item
-                      v-bind="props"
                       v-tooltip="(item as any).name"
+                      v-bind="props"
                       style="max-width: 400px"
                     />
                   </template>
                 </v-select>
               </div>
-              <v-btn @click="run" style="width: 100%" variant="tonal">
+              <v-btn style="width: 100%" variant="tonal" @click="run">
                 Run Analysis
               </v-btn>
             </v-form>
@@ -466,14 +466,14 @@ watch(
                               </div>
                               <node-animation
                                 v-else-if="networkInput?.visible"
-                                :nodeFailures="
+                                :node-failures="
                                   key === 'failures' ? value : undefined
                                 "
-                                :nodeRecoveries="
+                                :node-recoveries="
                                   key === 'recoveries' ? value : undefined
                                 "
                                 :network="networkInput"
-                                :additionalAnimationLayers="
+                                :additional-animation-layers="
                                   additionalAnimationLayers
                                 "
                               />
@@ -514,18 +514,18 @@ watch(
                       <v-icon icon="mdi-check" color="success" />
                       Subscribed
                       <v-icon
-                        icon="mdi-information-outline"
                         v-tooltip="
                           'An email will be sent to you when the task is completed.'
                         "
+                        icon="mdi-information-outline"
                       />
                     </div>
                     <v-btn
                       v-else
-                      @click="subscribe"
                       v-tooltip="
                         'If subscribed, an email will be sent to you when the task is completed.'
                       "
+                      @click="subscribe"
                     >
                       Notify Me Once Completed
                     </v-btn>
@@ -543,11 +543,11 @@ watch(
           @click="analysisStore.currentAnalysisType = simType"
         >
           {{ simType.name }}
-          <template v-slot:append>
+          <template #append>
             <v-icon
+              v-tooltip="simType.description"
               icon="mdi-information-outline"
               size="small"
-              v-tooltip="simType.description"
             ></v-icon>
             <v-icon icon="mdi-earth" size="small" class="ml-2"></v-icon>
           </template>
diff --git a/web/src/components/sidebars/ChartsPanel.vue b/web/src/components/sidebars/ChartsPanel.vue
index 459b79fe..3443c06b 100644
--- a/web/src/components/sidebars/ChartsPanel.vue
+++ b/web/src/components/sidebars/ChartsPanel.vue
@@ -180,10 +180,10 @@ const downloadReady = computed(() => {
         <div style="position: absolute; right: 10px">
           <a ref="downloadButton">
             <v-icon
+              v-show="downloadReady"
               v-tooltip="'Download'"
               icon="mdi-download"
               variant="plain"
-              v-show="downloadReady"
             />
           </a>
           <v-icon
@@ -198,18 +198,18 @@ const downloadReady = computed(() => {
           Current X Axis Slice (From {{ maxX }} values)
           <div style="display: flex">
             <v-text-field
+              v-model.number="currentXRange"
               type="number"
               label="Number of values"
               density="compact"
-              v-model.number="currentXRange"
               :max="maxX"
               min="0"
             />
             <v-text-field
+              v-model.number="currentXStart"
               type="number"
               label="Starting from"
               density="compact"
-              v-model.number="currentXStart"
               :max="maxX"
               min="0"
             />
@@ -223,11 +223,11 @@ const downloadReady = computed(() => {
           @click="analysisStore.currentChart = chart"
         >
           {{ chart.name }}
-          <template v-slot:append>
+          <template #append>
             <v-icon
+              v-tooltip="chart.description"
               icon="mdi-information-outline"
               size="small"
-              v-tooltip="chart.description"
             ></v-icon>
             <v-icon icon="mdi-poll" size="small" class="ml-2"></v-icon>
             <DetailView :details="{ ...chart, type: 'chart' }" />
diff --git a/web/src/components/sidebars/ColormapEditor.vue b/web/src/components/sidebars/ColormapEditor.vue
index a0b6eb06..8ffc6ed5 100644
--- a/web/src/components/sidebars/ColormapEditor.vue
+++ b/web/src/components/sidebars/ColormapEditor.vue
@@ -254,8 +254,8 @@ onMounted(init);
 
     <v-card-text>
       <v-text-field
-        label="Name"
         v-model="name"
+        label="Name"
         autofocus
         :rules="[nameExistsRule]"
         @keydown.enter="submit"
@@ -272,7 +272,7 @@ onMounted(init);
           <ColormapPreview
             :colormap="currentColormap"
             :discrete="false"
-            :nColors="-1"
+            :n-colors="-1"
           />
         </div>
       </div>
@@ -283,7 +283,7 @@ onMounted(init);
           class="py-2 marker-row"
         >
           <v-menu :close-on-content-click="false" open-on-hover location="end">
-            <template v-slot:activator="{ props }">
+            <template #activator="{ props }">
               <div
                 v-bind="props"
                 class="color-square ma-0"
@@ -294,7 +294,7 @@ onMounted(init);
               <v-color-picker
                 v-model:model-value="marker.color"
                 mode="hex"
-                @update:modelValue="drawMarkers"
+                @update:model-value="drawMarkers"
               />
             </v-card>
           </v-menu>
@@ -306,9 +306,9 @@ onMounted(init);
             :precision="2"
             :style="{ width: '80px' }"
             variant="outlined"
-            controlVariant="stacked"
+            control-variant="stacked"
             hide-details
-            @update:modelValue="drawMarkers"
+            @update:model-value="drawMarkers"
           />
           <v-icon @click="removeMarker(index)">mdi-close</v-icon>
           <v-icon
@@ -337,8 +337,8 @@ onMounted(init);
       <v-btn
         class="primary-button"
         variant="tonal"
-        @click="submit"
         :disabled="!valid"
+        @click="submit"
       >
         <v-icon color="button-text" class="mr-1">mdi-plus-circle</v-icon>
         {{ props.edit ? "Save" : "Create" }} Colormap
diff --git a/web/src/components/sidebars/CompareLayerStyle.vue b/web/src/components/sidebars/CompareLayerStyle.vue
index d410f973..f21d0e53 100644
--- a/web/src/components/sidebars/CompareLayerStyle.vue
+++ b/web/src/components/sidebars/CompareLayerStyle.vue
@@ -227,8 +227,8 @@ const panels = ref(["A", "B"] as const);
       emit('setLayerActive', props.activeLayer !== props.layer)
     "
   >
-    <template v-slot:activator="{ props }">
-      <v-icon v-bind="props" icon="mdi-cog" v-tooltip="appliedStyleText" />
+    <template #activator="{ props }">
+      <v-icon v-tooltip="appliedStyleText" v-bind="props" icon="mdi-cog" />
     </template>
     <v-card
       v-if="currentStyleSpecs.A && currentStyleSpecs.B"
diff --git a/web/src/components/sidebars/DatasetsPanel.vue b/web/src/components/sidebars/DatasetsPanel.vue
index 4f19648c..32e2c68d 100644
--- a/web/src/components/sidebars/DatasetsPanel.vue
+++ b/web/src/components/sidebars/DatasetsPanel.vue
@@ -41,7 +41,7 @@ function toggleSelected(items: Layer[]) {
 
 <template>
   <DatasetList :datasets="datasetsWithLayers">
-    <template v-slot:list="{ data }">
+    <template #list="{ data }">
       <v-expansion-panels
         multiple
         flat
@@ -94,20 +94,20 @@ function toggleSelected(items: Layer[]) {
                   {{ dataset.name }}
                 </div>
                 <div
-                  style="min-width: 75px; text-align: right"
                   v-if="dataset.layers"
+                  style="min-width: 75px; text-align: right"
                 >
                   <v-icon
+                    v-tooltip="dataset.n_layers + ' layers'"
                     icon="mdi-layers-outline"
                     size="small"
-                    v-tooltip="dataset.n_layers + ' layers'"
                     class="ml-2"
                   ></v-icon>
                   <span class="secondary-text">{{ dataset.n_layers }}</span>
                   <v-icon
+                    v-tooltip="dataset.description"
                     icon="mdi-information-outline"
                     size="small"
-                    v-tooltip="dataset.description"
                     class="mx-1"
                   ></v-icon>
                 </div>
diff --git a/web/src/components/sidebars/FloatingPanel.vue b/web/src/components/sidebars/FloatingPanel.vue
index a0cc9794..a55f51ef 100644
--- a/web/src/components/sidebars/FloatingPanel.vue
+++ b/web/src/components/sidebars/FloatingPanel.vue
@@ -93,7 +93,7 @@ function panelUpdated() {
     :class="getPanelContainerClass()"
     :style="getPanelContainerStyle()"
   >
-    <div class="panel" :style="getPanelStyle()" ref="element">
+    <div ref="element" class="panel" :style="getPanelStyle()">
       <v-card class="fill-height">
         <div style="display: flex; align-items: center">
           <v-card-text class="pa-3" style="font-size: 18px">{{
@@ -117,7 +117,7 @@ function panelUpdated() {
               location="bottom"
               :close-on-content-click="true"
             >
-              <template v-slot:activator="{ props: menuProps }">
+              <template #activator="{ props: menuProps }">
                 <div
                   v-bind="menuProps"
                   style="position: relative; display: inline-block"
@@ -172,8 +172,8 @@ function panelUpdated() {
             />
 
             <v-icon
-              :icon="panel.collapsed ? 'mdi-chevron-down' : 'mdi-chevron-up'"
               v-tooltip="panel.collapsed ? 'Expand' : 'Collapse'"
+              :icon="panel.collapsed ? 'mdi-chevron-down' : 'mdi-chevron-up'"
               @mousedown="togglePanelCollapsed"
             ></v-icon>
             <v-icon
@@ -188,8 +188,8 @@ function panelUpdated() {
             ></v-icon>
             <v-icon
               v-if="panel.closeable"
-              icon="mdi-close"
               v-tooltip="'Close Panel'"
+              icon="mdi-close"
               @mousedown="closePanel"
             ></v-icon>
           </div>
@@ -211,8 +211,8 @@ function panelUpdated() {
       </v-card>
     </div>
     <div
-      class="draggable-divider"
       v-if="!panel.position && !props.bottom"
+      class="draggable-divider"
       @mousedown="
         (e) => {
           updatePanelElement();
diff --git a/web/src/components/sidebars/LayerStyle.vue b/web/src/components/sidebars/LayerStyle.vue
index c581714e..a97991a9 100644
--- a/web/src/components/sidebars/LayerStyle.vue
+++ b/web/src/components/sidebars/LayerStyle.vue
@@ -605,13 +605,13 @@ onMounted(resetCurrentStyle);
       emit('setLayerActive', props.activeLayer !== props.layer)
     "
   >
-    <template v-slot:activator="{ props }">
+    <template #activator="{ props }">
       <v-icon
-        v-bind="props"
-        icon="mdi-cog"
         v-tooltip="
           appliedStyleName ? 'Style: ' + appliedStyleName : 'Configure styling'
         "
+        v-bind="props"
+        icon="mdi-cog"
       />
     </template>
     <v-card
@@ -628,9 +628,9 @@ onMounted(resetCurrentStyle);
         <span class="secondary-text">(Layer: {{ layer.name }})</span>
 
         <v-icon
+          v-tooltip="'Warning: unsaved changes will be discarded'"
           icon="mdi-close"
           style="position: absolute; top: 10px; right: 5px"
-          v-tooltip="'Warning: unsaved changes will be discarded'"
           @click="cancel"
         />
       </div>
@@ -663,7 +663,7 @@ onMounted(resetCurrentStyle);
             :close-on-content-click="false"
             location="start"
           >
-            <template v-slot:activator="{ props }">
+            <template #activator="{ props }">
               <v-icon
                 v-bind="props"
                 :disabled="!currentLayerStyle.id"
@@ -817,8 +817,8 @@ onMounted(resetCurrentStyle);
                               ? 'mdi-eye-outline'
                               : 'mdi-eye-off-outline'
                           "
-                          @click="group.visible = !group.visible"
                           size="large"
+                          @click="group.visible = !group.visible"
                         />
                       </td>
                     </tr>
@@ -868,7 +868,7 @@ onMounted(resetCurrentStyle);
                             open-on-hover
                             location="end"
                           >
-                            <template v-slot:activator="{ props }">
+                            <template #activator="{ props }">
                               <div
                                 v-bind="props"
                                 class="color-square"
@@ -908,9 +908,9 @@ onMounted(resetCurrentStyle);
                             (v: Colormap) => setGroupColormap(group.name, v)
                           "
                         >
-                          <template v-slot:item="{ props, item }">
+                          <template #item="{ props, item }">
                             <v-list-item v-bind="props">
-                              <template v-slot:append>
+                              <template #append>
                                 <v-icon
                                   v-if="
                                     item.project &&
@@ -939,37 +939,37 @@ onMounted(resetCurrentStyle);
                                     :discrete="
                                       group.colormap?.discrete || false
                                     "
-                                    :nColors="group.colormap?.n_colors || -1"
+                                    :n-colors="group.colormap?.n_colors || -1"
                                   />
                                 </div>
                               </template>
                             </v-list-item>
                           </template>
-                          <template v-slot:selection="{ item }">
+                          <template #selection="{ item }">
                             <span
-                              class="pr-15"
                               v-if="getColormap(group.colormap)?.markers"
+                              class="pr-15"
                               >{{ item.name }}</span
                             >
                             <div
-                              style="width: 300px"
-                              class="ml-2"
                               v-if="
                                 group.colormap &&
                                 getColormap(group.colormap)?.markers
                               "
+                              style="width: 300px"
+                              class="ml-2"
                             >
                               <colormap-preview
                                 :colormap="item"
                                 :discrete="group.colormap.discrete || false"
-                                :nColors="group.colormap.n_colors || -1"
+                                :n-colors="group.colormap.n_colors || -1"
                               />
                             </div>
                             <span v-else class="secondary-text"
                               >Select Colormap</span
                             >
                           </template>
-                          <template v-slot:prepend-item>
+                          <template #prepend-item>
                             <v-list-item
                               v-if="
                                 ['owner', 'collaborator'].includes(
@@ -1076,7 +1076,7 @@ onMounted(resetCurrentStyle);
                       <td>
                         <SliderNumericInput
                           v-if="dataRange"
-                          :rangeModel="group.colormap?.range || dataRange"
+                          :range-model="group.colormap?.range || dataRange"
                           :min="dataRange[0]"
                           :max="dataRange[1]"
                           :disabled="
@@ -1103,6 +1103,9 @@ onMounted(resetCurrentStyle);
                           >Clamping</v-label
                         >
                         <v-icon
+                          v-tooltip="
+                            'When enabled, values outside the selected range will be clamped to the ends of the colormap. When disabled, those values will appear transparent.'
+                          "
                           icon="mdi-information-outline"
                           color="primary"
                           size="small"
@@ -1112,9 +1115,6 @@ onMounted(resetCurrentStyle);
                               ? 'ml-2'
                               : 'helper-text ml-2'
                           "
-                          v-tooltip="
-                            'When enabled, values outside the selected range will be clamped to the ends of the colormap. When disabled, those values will appear transparent.'
-                          "
                         />
                       </td>
                       <td>
@@ -1193,8 +1193,8 @@ onMounted(resetCurrentStyle);
                               ? 'mdi-eye-outline'
                               : 'mdi-eye-off-outline'
                           "
-                          @click="group.visible = !group.visible"
                           size="large"
+                          @click="group.visible = !group.visible"
                         />
                       </td>
                     </tr>
@@ -1216,14 +1216,14 @@ onMounted(resetCurrentStyle);
                           class="primary-control"
                           hide-details
                         >
-                          <template v-slot:label>
+                          <template #label>
                             <span> Prioritize feature color properties </span>
                             <v-icon
-                              icon="mdi-information-outline"
-                              class="ml-2"
                               v-tooltip="
                                 'When enabled, features with fill and stroke properties will use those colors. Features without those properties will use the specified color configuration.'
                               "
+                              icon="mdi-information-outline"
+                              class="ml-2"
                             />
                           </template>
                         </v-checkbox>
@@ -1261,7 +1261,7 @@ onMounted(resetCurrentStyle);
                             open-on-hover
                             location="end"
                           >
-                            <template v-slot:activator="{ props }">
+                            <template #activator="{ props }">
                               <div
                                 v-bind="props"
                                 class="color-square"
@@ -1312,12 +1312,12 @@ onMounted(resetCurrentStyle);
                               }
                             "
                           >
-                            <template v-slot:item="{ props, item }">
+                            <template #item="{ props, item }">
                               <v-list-item v-bind="props">
-                                <template v-slot:append>
+                                <template #append>
                                   <v-chip
-                                    size="small"
                                     v-if="(item as any).sample_label"
+                                    size="small"
                                     >{{ (item as any).sample_label }}</v-chip
                                   >
                                 </template>
@@ -1353,9 +1353,9 @@ onMounted(resetCurrentStyle);
                               (v: Colormap) => setGroupColormap(group.name, v)
                             "
                           >
-                            <template v-slot:item="{ props, item }">
+                            <template #item="{ props, item }">
                               <v-list-item v-bind="props">
-                                <template v-slot:append>
+                                <template #append>
                                   <v-icon
                                     v-if="
                                       item.project &&
@@ -1386,34 +1386,34 @@ onMounted(resetCurrentStyle);
                                       :discrete="
                                         group.colormap.discrete || false
                                       "
-                                      :nColors="group.colormap.n_colors || -1"
+                                      :n-colors="group.colormap.n_colors || -1"
                                     />
                                   </div>
                                 </template>
                               </v-list-item>
                             </template>
-                            <template v-slot:selection="{ item }">
+                            <template #selection="{ item }">
                               <span
-                                class="pr-15"
                                 v-if="getColormap(group.colormap)?.markers"
+                                class="pr-15"
                                 >{{ item.name }}</span
                               >
                               <div
+                                v-if="getColormap(group.colormap)?.markers"
                                 style="width: 300px"
                                 class="ml-2"
-                                v-if="getColormap(group.colormap)?.markers"
                               >
                                 <colormap-preview
                                   :colormap="item"
                                   :discrete="group.colormap.discrete || false"
-                                  :nColors="group.colormap.n_colors || -1"
+                                  :n-colors="group.colormap.n_colors || -1"
                                 />
                               </div>
                               <span v-else class="secondary-text"
                                 >Select Colormap</span
                               >
                             </template>
-                            <template v-slot:prepend-item>
+                            <template #prepend-item>
                               <v-list-item
                                 v-if="
                                   ['owner', 'collaborator'].includes(
@@ -1561,7 +1561,7 @@ onMounted(resetCurrentStyle);
                               :disabled="!group.visible"
                               location="end"
                             >
-                              <template v-slot:activator="{ props }">
+                              <template #activator="{ props }">
                                 <div
                                   v-bind="props"
                                   class="color-square"
@@ -1670,10 +1670,6 @@ onMounted(resetCurrentStyle);
                       <td>
                         <v-label>Size</v-label>
                         <v-icon
-                          icon="mdi-information-outline"
-                          color="primary"
-                          size="small"
-                          class="ml-2"
                           v-tooltip="
                             group.name === 'all'
                               ? 'Range: 1 to 10'
@@ -1681,6 +1677,10 @@ onMounted(resetCurrentStyle);
                                 ? 'Line thickness'
                                 : 'Point radius'
                           "
+                          icon="mdi-information-outline"
+                          color="primary"
+                          size="small"
+                          class="ml-2"
                         />
                       </td>
                       <td>
@@ -1706,15 +1706,15 @@ onMounted(resetCurrentStyle);
                           placeholder="Select property"
                           hide-details
                         >
-                          <template v-slot:item="{ props, item }">
+                          <template #item="{ props, item }">
                             <v-list-item
                               v-bind="props"
                               :disabled="!(item as any).range"
                             >
-                              <template v-slot:append>
+                              <template #append>
                                 <v-chip
-                                  size="small"
                                   v-if="(item as any).sample_label"
+                                  size="small"
                                   >{{ (item as any).sample_label }}</v-chip
                                 >
                               </template>
@@ -1730,20 +1730,20 @@ onMounted(resetCurrentStyle);
                         <v-label>Size Range</v-label>
                         <v-icon
                           v-if="group.name !== 'all'"
-                          icon="mdi-information-outline"
-                          color="primary"
-                          size="small"
-                          class="ml-2"
                           v-tooltip="
                             group.name === 'lines'
                               ? 'Line thickness'
                               : 'Point radius'
                           "
+                          icon="mdi-information-outline"
+                          color="primary"
+                          size="small"
+                          class="ml-2"
                         />
                       </td>
                       <td>
                         <SliderNumericInput
-                          :rangeModel="[
+                          :range-model="[
                             group.size_range.minimum,
                             group.size_range.maximum,
                           ]"
@@ -1818,13 +1818,13 @@ onMounted(resetCurrentStyle);
                         <v-label>
                           Zoom Scaling
                           <v-icon
+                            v-tooltip="
+                              'Size of features will change according to the current map zoom level, multiplied by a factor of the size value'
+                            "
                             icon="mdi-information-outline"
                             color="primary"
                             size="small"
                             class="ml-2"
-                            v-tooltip="
-                              'Size of features will change according to the current map zoom level, multiplied by a factor of the size value'
-                            "
                           />
                         </v-label>
                       </td>
@@ -1860,19 +1860,19 @@ onMounted(resetCurrentStyle);
                 <v-card-subtitle>
                   Filters ({{ currentStyleSpec.filters.length }})
                 </v-card-subtitle>
-                <v-btn color="primary" @click="addFilter" flat>
+                <v-btn color="primary" flat @click="addFilter">
                   <v-icon icon="mdi-plus" />
                   Add New Filter
                 </v-btn>
               </div>
               <v-card
                 v-for="filter in currentStyleSpec.filters"
+                :key="filter.id"
                 :class="
                   highlightFilterId === filter.id
                     ? 'filter-card highlight'
                     : 'filter-card'
                 "
-                :key="filter.id"
               >
                 <div
                   class="d-flex"
@@ -1891,12 +1891,12 @@ onMounted(resetCurrentStyle);
                     hide-details
                     @update:model-value="(v) => updateFilterBy(filter.id, v)"
                   >
-                    <template v-slot:item="{ props, item }">
+                    <template #item="{ props, item }">
                       <v-list-item v-bind="props">
-                        <template v-slot:append>
+                        <template #append>
                           <v-chip
-                            size="small"
                             v-if="(item as any).sample_label"
+                            size="small"
                             >{{ (item as any).sample_label }}</v-chip
                           >
                         </template>
@@ -1904,9 +1904,9 @@ onMounted(resetCurrentStyle);
                     </template>
                   </v-select>
                   <span
+                    v-else
                     :class="filter.apply ? '' : 'helper-text'"
                     style="white-space: wrap"
-                    v-else
                   >
                     {{ filter.filter_by }}
                     <span class="font-weight-bold">{{
@@ -1922,21 +1922,21 @@ onMounted(resetCurrentStyle);
                   <div>
                     <v-icon
                       v-if="focusedFilterId !== filter.id"
-                      @click="focusFilter(filter.id)"
                       class="ml-2"
+                      @click="focusFilter(filter.id)"
                       >mdi-pencil-outline</v-icon
                     >
-                    <v-icon @click="filter.apply = !filter.apply" class="ml-2">
+                    <v-icon class="ml-2" @click="filter.apply = !filter.apply">
                       {{ filter.apply ? "mdi-eye" : "mdi-eye-off" }}
                     </v-icon>
-                    <v-icon @click="removeFilter(filter.id)" class="ml-2"
+                    <v-icon class="ml-2" @click="removeFilter(filter.id)"
                       >mdi-delete-outline</v-icon
                     >
                   </div>
                 </div>
                 <table
-                  class="aligned-controls mt-2"
                   v-if="focusedFilterId === filter.id"
+                  class="aligned-controls mt-2"
                 >
                   <tbody :class="filter.apply ? '' : 'helper-text'">
                     <tr v-if="findVectorProperty(filter)?.range">
@@ -1975,7 +1975,7 @@ onMounted(resetCurrentStyle);
                           <SliderNumericInput
                             v-if="filter.range"
                             :disabled="!filter.apply"
-                            :rangeModel="filter.range"
+                            :range-model="filter.range"
                             :min="findVectorProperty(filter)!.range![0]"
                             :max="findVectorProperty(filter)!.range![1]"
                             @update="
@@ -2037,9 +2037,9 @@ onMounted(resetCurrentStyle);
 
       <v-card-actions class="my-1" style="float: right">
         <v-btn
+          v-tooltip="'Warning: unsaved changes will be discarded'"
           class="secondary-button"
           @click="cancel"
-          v-tooltip="'Warning: unsaved changes will be discarded'"
         >
           <v-icon color="primary" class="mr-1">mdi-close-circle</v-icon>
           Cancel
@@ -2096,8 +2096,8 @@ onMounted(resetCurrentStyle);
 
           <v-card-text>
             <v-text-field
-              label="Name"
               v-model="newName"
+              label="Name"
               autofocus
               :placeholder="
                 newNameMode === 'update' ? currentLayerStyle.name : ''
diff --git a/web/src/components/sidebars/LayersPanel.vue b/web/src/components/sidebars/LayersPanel.vue
index 0cc88d5c..981b2191 100644
--- a/web/src/components/sidebars/LayersPanel.vue
+++ b/web/src/components/sidebars/LayersPanel.vue
@@ -106,21 +106,21 @@ function setLayerActive(layer: Layer, active: boolean) {
       hide-details
     />
     <v-card class="panel-content-inner">
-      <div class="layers-header" v-if="filteredLayers?.length">
+      <div v-if="filteredLayers?.length" class="layers-header">
         <v-icon
           color="primary"
           icon="mdi-close"
           size="small"
-          @click="() => removeLayers(layerStore.selectedLayers)"
           class="secondary-button"
+          @click="() => removeLayers(layerStore.selectedLayers)"
         />
         <v-checkbox-btn
           v-if="!isComparing"
           :model-value="
             layerStore.selectedLayers.every((l: Layer) => l.visible)
           "
-          @click="setVisibility(layerStore.selectedLayers, !allLayersVisible)"
           style="display: inline"
+          @click="setVisibility(layerStore.selectedLayers, !allLayersVisible)"
         />
         <span v-if="isComparing">
           <v-checkbox-btn
@@ -130,8 +130,8 @@ function setLayerActive(layer: Layer, active: boolean) {
             :model-value="
               Object.values(visibilityCompareMap.A).every((v) => v === true)
             "
-            @update:model-value="compareStore.setAllVisibility('A', $event)"
             style="display: inline"
+            @update:model-value="compareStore.setAllVisibility('A', $event)"
           />
           <v-checkbox-btn
             v-tooltip="
@@ -140,8 +140,8 @@ function setLayerActive(layer: Layer, active: boolean) {
             :model-value="
               Object.values(visibilityCompareMap.B).every((v) => v === true)
             "
-            @update:model-value="compareStore.setAllVisibility('B', $event)"
             style="display: inline"
+            @update:model-value="compareStore.setAllVisibility('B', $event)"
           />
         </span>
       </div>
@@ -150,19 +150,19 @@ function setLayerActive(layer: Layer, active: boolean) {
           <template #item="{ element }">
             <div>
               <v-list-item class="layer" :active="activeLayer == element">
-                <template v-slot:prepend>
+                <template #prepend>
                   <v-icon
                     color="primary"
                     icon="mdi-close"
                     size="small"
-                    @click="() => removeLayers([element])"
                     class="secondary-button"
+                    @click="() => removeLayers([element])"
                   />
                   <v-checkbox-btn
                     v-if="!isComparing"
                     :model-value="element.visible"
-                    @click="() => setVisibility([element], !element.visible)"
                     style="display: inline"
+                    @click="() => setVisibility([element], !element.visible)"
                   />
                   <span v-if="isComparing">
                     <v-checkbox-btn
@@ -170,25 +170,25 @@ function setLayerActive(layer: Layer, active: boolean) {
                         `${orientation === 'vertical' ? 'Left' : 'Top'} Map Visibility`
                       "
                       :model-value="visibilityCompareMap.A[element.name]"
+                      style="display: inline"
                       @update:model-value="
                         compareStore.setVisibility('A', element.name, $event)
                       "
-                      style="display: inline"
                     />
                     <v-checkbox-btn
                       v-tooltip="
                         `${orientation === 'vertical' ? 'Right' : 'Bottom'} Map Visibility`
                       "
                       :model-value="visibilityCompareMap.B[element.name]"
+                      style="display: inline"
                       @update:model-value="
                         compareStore.setVisibility('B', element.name, $event)
                       "
-                      style="display: inline"
                     />
                   </span>
                 </template>
                 {{ element.name }}
-                <template v-slot:append>
+                <template #append>
                   <span
                     v-if="getLayerMaxFrames(element) > 1"
                     @click="element.hideFrameMenu = !element.hideFrameMenu"
@@ -203,14 +203,18 @@ function setLayerActive(layer: Layer, active: boolean) {
                   <LayerStyle
                     v-if="!isComparing"
                     :layer="element"
-                    :activeLayer="activeLayer"
-                    @setLayerActive="(v: boolean) => setLayerActive(element, v)"
+                    :active-layer="activeLayer"
+                    @set-layer-active="
+                      (v: boolean) => setLayerActive(element, v)
+                    "
                   />
                   <CompareLayerStyle
                     v-if="isComparing"
                     :layer="element"
-                    :activeLayer="activeLayer"
-                    @setLayerActive="(v: boolean) => setLayerActive(element, v)"
+                    :active-layer="activeLayer"
+                    @set-layer-active="
+                      (v: boolean) => setLayerActive(element, v)
+                    "
                   />
                   <span
                     class="v-icon material-symbols-outlined"
diff --git a/web/src/components/sidebars/LegendPanel.vue b/web/src/components/sidebars/LegendPanel.vue
index aac655c7..ce009d1a 100644
--- a/web/src/components/sidebars/LegendPanel.vue
+++ b/web/src/components/sidebars/LegendPanel.vue
@@ -125,8 +125,8 @@ function getColorPropsCoverage(layer: Layer) {
         <v-list-item v-for="layer in filteredLegend" :key="layer.id">
           <v-icon
             :icon="layer.visible ? 'mdi-eye-outline' : 'mdi-eye-off-outline'"
-            @click="setVisibility(layer, !layer.visible)"
             class=""
+            @click="setVisibility(layer, !layer.visible)"
           />
           {{ layer.name }}
           <div
@@ -158,7 +158,7 @@ function getColorPropsCoverage(layer: Layer) {
                   v-if="!colormap_preview.valueColors"
                   :colormap="colormap_preview.colormap"
                   :discrete="colormap_preview.discrete"
-                  :nColors="colormap_preview.nColors"
+                  :n-colors="colormap_preview.nColors"
                   :range="colormap_preview.range"
                 />
                 <v-expansion-panels v-else>
@@ -167,7 +167,7 @@ function getColorPropsCoverage(layer: Layer) {
                       <colormap-preview
                         :colormap="colormap_preview.colormap"
                         :discrete="colormap_preview.discrete"
-                        :nColors="colormap_preview.nColors"
+                        :n-colors="colormap_preview.nColors"
                         :range="colormap_preview.range"
                       />
                     </v-expansion-panel-title>
diff --git a/web/src/components/sidebars/NetworksPanel.vue b/web/src/components/sidebars/NetworksPanel.vue
index 967f18a0..d5675ac3 100644
--- a/web/src/components/sidebars/NetworksPanel.vue
+++ b/web/src/components/sidebars/NetworksPanel.vue
@@ -183,12 +183,12 @@ watch(
             <div>{{ networkStore.currentNetwork.name }}</div>
             <v-btn
               v-if="!isNetworkVisible()"
-              @click="showNetwork()"
               density="compact"
+              @click="showNetwork()"
             >
               Show
             </v-btn>
-            <v-btn @click="resetNetwork()" density="compact"> Reset </v-btn>
+            <v-btn density="compact" @click="resetNetwork()"> Reset </v-btn>
           </div>
           <v-btn
             v-tooltip="'Close'"
@@ -226,21 +226,21 @@ watch(
               @mouseover:row="(e: Event, data: any) => (hoverNode = data.item)"
               @mouseleave:row="() => (hoverNode = undefined)"
             >
-              <template v-slot:item.active="{ item }">
+              <template #item.active="{ item }">
                 <v-icon
                   :icon="item.active ? 'mdi-circle-outline' : 'mdi-close'"
                   :color="item.active ? 'green' : 'red'"
                 />
               </template>
-              <template v-slot:item.metadata="{ item }">
+              <template #item.metadata="{ item }">
                 <DetailView :details="{ ...item, type: 'networknode' }" />
               </template>
-              <template v-slot:bottom>
+              <template #bottom>
                 <v-infinite-scroll @load="loadNodes">
-                  <template v-slot:loading>
+                  <template #loading>
                     <v-progress-linear indeterminate />
                   </template>
-                  <template v-slot:empty />
+                  <template #empty />
                 </v-infinite-scroll>
               </template>
             </v-data-table>
@@ -257,21 +257,21 @@ watch(
               @mouseover:row="(e: Event, data: any) => (hoverEdge = data.item)"
               @mouseleave:row="() => (hoverEdge = undefined)"
             >
-              <template v-slot:item.active="{ item }">
+              <template #item.active="{ item }">
                 <v-icon
                   :icon="item.active ? 'mdi-circle-outline' : 'mdi-close'"
                   :color="item.active ? 'green' : 'red'"
                 />
               </template>
-              <template v-slot:item.metadata="{ item }">
+              <template #item.metadata="{ item }">
                 <DetailView :details="{ ...item, type: 'networkedge' }" />
               </template>
-              <template v-slot:bottom>
+              <template #bottom>
                 <v-infinite-scroll @load="loadEdges">
-                  <template v-slot:loading>
+                  <template #loading>
                     <v-progress-linear indeterminate />
                   </template>
-                  <template v-slot:empty />
+                  <template #empty />
                 </v-infinite-scroll>
               </template>
             </v-data-table>
@@ -286,7 +286,7 @@ watch(
             @click="networkStore.currentNetwork = network"
           >
             {{ network.name }}
-            <template v-slot:append>
+            <template #append>
               <v-icon
                 icon="mdi-transit-connection-variant"
                 size="small"
@@ -304,12 +304,12 @@ watch(
       <v-card-text v-else class="help-text">No available Networks.</v-card-text>
     </v-card>
     <v-btn
-      class="toggle-btn"
       v-if="
         networkStore.currentNetwork &&
         tab == 'nodes-tab' &&
         selectedNodes.length
       "
+      class="toggle-btn"
       @click="toggleSelected"
     >
       Toggle Selected
diff --git a/web/src/components/sidebars/NodeAnimation.vue b/web/src/components/sidebars/NodeAnimation.vue
index efd266db..6b8783c3 100644
--- a/web/src/components/sidebars/NodeAnimation.vue
+++ b/web/src/components/sidebars/NodeAnimation.vue
@@ -115,13 +115,13 @@ watch(currentTick, async () => {
       {{ currentTick + 1 }}
     </div>
     <div class="animation-row">
-      <v-btn @click="play" icon="mdi-play" variant="text" density="compact" />
-      <v-btn @click="pause" icon="mdi-pause" variant="text" density="compact" />
+      <v-btn icon="mdi-play" variant="text" density="compact" @click="play" />
+      <v-btn icon="mdi-pause" variant="text" density="compact" @click="pause" />
       <v-btn
-        @click="rewind"
         icon="mdi-rewind"
         variant="text"
         density="compact"
+        @click="rewind"
       />
     </div>
   </div>
diff --git a/web/src/components/sidebars/SideBars.vue b/web/src/components/sidebars/SideBars.vue
index 40b19a0e..1cd92f1c 100644
--- a/web/src/components/sidebars/SideBars.vue
+++ b/web/src/components/sidebars/SideBars.vue
@@ -90,9 +90,9 @@ function togglePanelVisibility(id: string) {
           </v-menu>
         </v-toolbar-title>
         <v-icon
+          v-tooltip="'Toggle Sidebar'"
           icon="mdi-dock-left"
           class="ml-5"
-          v-tooltip="'Toggle Sidebar'"
           @click="toggleSidebar('left')"
         ></v-icon>
       </v-toolbar>
@@ -102,8 +102,8 @@ function togglePanelVisibility(id: string) {
           v-for="(panel, index) in panelStore.panelArrangement.filter(
             (p) => p.dock == 'left',
           )"
-          :key="panel.id"
           :id="panel.id"
+          :key="panel.id"
           :bottom="
             index ==
             panelStore.panelArrangement.filter((p) => p.dock == 'left').length -
@@ -143,28 +143,28 @@ function togglePanelVisibility(id: string) {
         color="background"
       >
         <v-icon
+          v-tooltip="'Toggle Sidebar'"
           icon="mdi-dock-right"
           class="mr-5"
-          v-tooltip="'Toggle Sidebar'"
           @click="toggleSidebar('right')"
         ></v-icon>
         <div v-if="appStore.currentUser">
           {{ appStore.currentUser.first_name }}
 
           <v-menu :close-on-content-click="false">
-            <template v-slot:activator="{ props }">
+            <template #activator="{ props }">
               <v-icon v-bind="props" icon="mdi-cog" class="px-3"></v-icon>
             </template>
             <v-list>
               <v-list-item density="compact" @click="logout">
                 Logout
-                <template v-slot:append>
+                <template #append>
                   <v-icon icon="mdi-logout"></v-icon>
                 </template>
               </v-list-item>
               <v-list-item density="compact">
                 Dark Mode
-                <template v-slot:append>
+                <template #append>
                   <v-switch
                     :model-value="appStore.theme === 'dark'"
                     color="primary"
@@ -182,12 +182,12 @@ function togglePanelVisibility(id: string) {
       </v-toolbar>
       <div :style="{ height: '30px', 'text-align': 'right' }">
         <v-menu :close-on-content-click="false">
-          <template v-slot:activator="{ props }">
+          <template #activator="{ props }">
             <v-icon
+              v-tooltip="'Panel Visibility'"
               v-bind="props"
               icon="mdi-menu"
               class="mr-3 mt-1"
-              v-tooltip="'Panel Visibility'"
             ></v-icon>
           </template>
           <v-list>
@@ -211,8 +211,8 @@ function togglePanelVisibility(id: string) {
           v-for="(panel, index) in panelStore.panelArrangement.filter(
             (p) => p.dock == 'right',
           )"
-          :key="panel.id"
           :id="panel.id"
+          :key="panel.id"
           :bottom="
             index ==
             panelStore.panelArrangement.filter((p) => p.dock == 'right')