fix: viewer and update dependencies

ui/build.go

@@ -72,6 +72,8 @@ func main() {
 		os.Exit(0)
 	}
 
+	run("npx", "browserslist@latest", "--update-db")
+
 	// install npm dependencies
 	run("npm", "install")
 	// build app

ui/package.json

@@ -8,35 +8,36 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
-    "axios": "^0.21.1",
-    "core-js": "^3.16.0",
+    "axios": "^1.3.4",
+    "core-js": "^3.29.1",
     "mapbox-gl": "~1.11.0",
-    "vue": "^2.6.14"
+    "vue": "^2.7.14"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "^4.5.13",
-    "@vue/cli-plugin-eslint": "^4.5.13",
-    "@vue/cli-service": "^4.5.13",
-    "babel-eslint": "~10.0.3",
-    "eslint": "^6.8.0",
-    "eslint-config-prettier": "^6.15.0",
-    "eslint-plugin-prettier": "^3.4.0",
-    "eslint-plugin-vue": "6.2.2",
-    "prettier": "^2.3.2",
-    "vue-template-compiler": "^2.6.14"
+    "@babel/core": "^7.21.3",
+    "@babel/eslint-parser": "^7.21.3",
+    "@vue/cli-plugin-babel": "^5.0.8",
+    "@vue/cli-plugin-eslint": "^5.0.8",
+    "@vue/cli-service": "^5.0.8",
+    "eslint": "^8.36.0",
+    "eslint-config-prettier": "^8.8.0",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-vue": "9.9.0",
+    "prettier": "^2.8.6",
+    "vue-template-compiler": "^2.7.14"
   },
   "eslintConfig": {
     "root": true,
     "env": {
       "node": true
     },
     "extends": [
-      "plugin:vue/essential",
+      "plugin:vue/vue3-recommended",
       "plugin:prettier/recommended",
       "eslint:recommended"
     ],
     "parserOptions": {
-      "parser": "babel-eslint"
+      "parser": "@babel/eslint-parser"
     },
     "rules": {}
   },

ui/src/App.vue

@@ -1,16 +1,18 @@
 <template>
   <div id="app">
-    <Mapbox v-if="capabilities && activeMap" />
-    <Header v-if="capabilities" v-bind:capabilities="capabilities" />
-    <LeftNav v-if="capabilities" v-bind:capabilities="capabilities" />
+    <ViewerMapbox v-if="capabilities && activeMap" />
+
+    <ViewerHeader v-if="capabilities" :capabilities="capabilities" />
+
+    <LeftNav v-if="capabilities" :capabilities="capabilities" />
   </div>
 </template>
 
 <script>
 import "mapbox-gl/dist/mapbox-gl.css";
-import Header from "./components/Header.vue";
+import ViewerHeader from "./components/ViewerHeader.vue";
 import LeftNav from "./components/LeftNav/LeftNav.vue";
-import Mapbox from "./components/Mapbox.vue";
+import ViewerMapbox from "./components/ViewerMapbox.vue";
 import { store, mutations } from "./globals/store";
 
 const axios = require("axios");
@@ -25,9 +27,12 @@ if (process.env.NODE_ENV != "production") {
 export default {
   name: "TegolaViewer",
   components: {
-    Header,
+    ViewerHeader,
     LeftNav,
-    Mapbox
+    ViewerMapbox
+  },
+  data: function () {
+    return {};
   },
   computed: {
     activeMap() {
@@ -37,23 +42,6 @@ export default {
       return store.capabilities;
     }
   },
-  methods: {
-    // compareMaps compares two map objects for the sake of sorting alphabetically
-    compareMaps(a, b) {
-      // ignore character casing
-      const mapA = a.name.toLowerCase();
-      const mapB = b.name.toLowerCase();
-
-      let comparison = 0;
-      if (mapA > mapB) {
-        comparison = 1;
-      } else if (mapA < mapB) {
-        comparison = -1;
-      }
-
-      return comparison;
-    }
-  },
   created: function () {
     const me = this;
 
@@ -82,8 +70,22 @@ export default {
         console.log(error);
       });
   },
-  data: function () {
-    return {};
+  methods: {
+    // compareMaps compares two map objects for the sake of sorting alphabetically
+    compareMaps(a, b) {
+      // ignore character casing
+      const mapA = a.name.toLowerCase();
+      const mapB = b.name.toLowerCase();
+
+      let comparison = 0;
+      if (mapA > mapB) {
+        comparison = 1;
+      } else if (mapA < mapB) {
+        comparison = -1;
+      }
+
+      return comparison;
+    }
   }
 };
 </script>

ui/src/components/LeftNav/LeftNav.vue

@@ -20,30 +20,26 @@
       </svg>
     </div>
     <h2>
-      <span v-on:click="showAllMaps">Maps</span>
+      <span @click="showAllMaps">Maps</span>
       <span v-if="activeMap">/ {{ activeMap.name }}</span>
     </h2>
     <div class="container">
-      <ul id="maps-list" v-if="!activeMap">
-        <MapRow
-          v-for="map in capabilities.maps"
-          v-bind:key="map.name"
-          v-bind:map="map"
-        />
+      <ul v-if="!activeMap" id="maps-list">
+        <MapRow v-for="map in capabilities.maps" :key="map.name" :map="map" />
       </ul>
-      <ul id="map-layers-list" v-if="activeMap && mapIsReady">
+      <ul v-if="activeMap && mapIsReady" id="map-layers-list">
         <MapLayerRow
           v-for="layer in activeMap.layers"
-          v-bind:key="layer.name"
-          v-bind:layer="layer"
+          :key="layer.name"
+          :layer="layer"
         />
       </ul>
     </div>
-    <div id="left-nav-footer" v-if="activeMap">
+    <div v-if="activeMap" id="left-nav-footer">
       <div
         class="btn"
-        v-on:click="toggleFeatureInspector"
-        v-bind:class="{ active: inspectorIsActive }"
+        :class="{ active: inspectorIsActive }"
+        @click="toggleFeatureInspector"
       >
         <span class="dot"></span>Inspect Features
       </div>

ui/src/components/LeftNav/MapLayerRow.vue

@@ -1,8 +1,8 @@
 <template>
-  <li v-on:click="toggleLayerVisibility(layer.name)">
+  <li @click="toggleLayerVisibility(layer.name)">
     <div
       class="layer-color"
-      v-bind:style="{
+      :style="{
         'background-color': getLayerColor(layer.name),
         visibility: visibility
       }"
@@ -22,16 +22,16 @@ export default {
   props: {
     layer: Object
   },
-  computed: {
-    zoomRange() {
-      return "z" + this.layer.minzoom + "-" + this.layer.maxzoom;
-    }
-  },
   data() {
     return {
       visibility: "visible"
     };
   },
+  computed: {
+    zoomRange() {
+      return "z" + this.layer.minzoom + "-" + this.layer.maxzoom;
+    }
+  },
   methods: {
     // toggleLayerVisibility will toggle a layers visibility between on and off
     toggleLayerVisibility(layerName) {

ui/src/components/LeftNav/MapRow.vue

@@ -1,5 +1,5 @@
 <template>
-  <li v-on:click.self="setActiveMap(map)">
+  <li @click.self="setActiveMap(map)">
     {{ map.name }}<img class="arrow" src="@/assets/svg/arrow.svg" />
   </li>
 </template>

ui/src/components/Header.vue → ui/src/components/ViewerHeader.vue

@@ -6,7 +6,7 @@
 
 <script>
 export default {
-  name: "Header",
+  name: "ViewerHeader",
   props: {
     capabilities: Object
   },
@@ -17,6 +17,7 @@ export default {
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
+
 <style scoped>
 #header {
   width: 100%;

ui/src/components/Mapbox.vue → ui/src/components/ViewerMapbox.vue

@@ -9,7 +9,7 @@ import ToggleTileBoundariesControl from "./MapboxControls";
 import mapboxgl from "mapbox-gl";
 
 export default {
-  name: "Mapbox",
+  name: "ViewerMapbox",
   mounted() {
     // build the style url
     let url = store.apiRoot + "maps/" + store.activeMap.name + "/style.json";
@@ -43,6 +43,7 @@ export default {
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
+
 <style scoped>
 #map {
   position: absolute;