Expand Scan Areas List

server/src/configs/areas.example.json

@@ -34,7 +34,8 @@
         "stroke": "#352BFF",
         "stroke-width": 2.0,
         "fill": "#0651FF",
-        "hidden": false
+        "hidden": false,
+        "parent": "USA"
       }
     }
   ]

server/src/configs/custom-environment-variables.json

@@ -352,6 +352,10 @@
         "__name": "MAP_MISC_NO_SCAN_AREA_OVERLAY",
         "__format": "boolean"
       },
+      "scanAreaMenuHeight": {
+        "__name": "MAP_MISC_SCAN_AREA_MENU_HEIGHT",
+        "__format": "number"
+      },
       "permImageDir": "MAP_MISC_PERM_IMAGE_DIR",
       "permArrayImages": {
         "__name": "MAP_MISC_PERM_ARRAY_IMAGES",

server/src/configs/default.json

@@ -143,6 +143,7 @@
       "enableUserProfile": true,
       "enableQuestSetSelector": false,
       "noScanAreaOverlay": false,
+      "scanAreaMenuHeight": 400,
       "permImageDir": "images/perms",
       "permArrayImages": false,
       "clientTimeoutMinutes": 30,

server/src/configs/local.example.json

@@ -300,12 +300,27 @@
       "name": "New York",
       "lat": 40.7481666,
       "lon": -74.0174788,
-      "zoom": 15
+      "zoom": 15,
+      "color": "blue"
+    },
+    {
+      "name": "California",
+      "lat": 37.1931249,
+      "lon": -123.7961458,
+      "color": "orange",
+      "fillColor": "purple"
     },
     {
       "name": "San Francisco",
       "lat": 37.79539194255634,
-      "lon": -122.39333173075096
+      "lon": -122.39333173075096,
+      "parent": "California"
+    },
+    {
+      "name": "Houston",
+      "lat": 33.6145517,
+      "lon": -108.6038347,
+      "parent": "Texas"
     }
   ]
 }

server/src/graphql/mapTypes.js

@@ -52,6 +52,12 @@ module.exports = gql`
     features: [Feature]
   }
 
+  type ScanAreasMenu {
+    name: String
+    details: Feature
+    children: [Feature]
+  }
+
   type Search {
     id: ID
     name: String

server/src/graphql/resolvers.js

@@ -188,17 +188,23 @@ module.exports = {
         ? config.scanAreas[req.headers.host]
         : config.scanAreas.main
       if (perms?.scanAreas && scanAreas.features.length) {
-        try {
-          scanAreas.features = scanAreas.features
-            .filter((feature) => !feature.properties.hidden)
-            .sort((a, b) => (a.properties.name > b.properties.name ? 1 : -1))
-        } catch (e) {
-          console.warn('[WARN] Failed to sort scan areas', e.message)
-        }
         return [scanAreas]
       }
       return [{ features: [] }]
     },
+    scanAreasMenu: (_, args, { perms, version, req }) => {
+      if (args.version && args.version !== version)
+        throw new UserInputError('old_client')
+      if (!perms) throw new AuthenticationError('session_expired')
+
+      const scanAreas = config.scanAreasMenu[req.headers.host]
+        ? config.scanAreasMenu[req.headers.host]
+        : config.scanAreasMenu.main
+      if (perms?.scanAreas && scanAreas.length) {
+        return scanAreas
+      }
+      return []
+    },
     search: async (_, args, { Event, perms, version, Db }) => {
       if (args.version && args.version !== version)
         throw new UserInputError('old_client')

server/src/graphql/typeDefs.js

@@ -77,6 +77,7 @@ module.exports = gql`
       version: String
     ): [ScanCell]
     scanAreas(version: String): [ScanArea]
+    scanAreasMenu(version: String): [ScanAreasMenu]
     search(
       search: String
       category: String

server/src/routes/rootRouter.js

@@ -1,6 +1,5 @@
 /* eslint-disable no-console */
 const express = require('express')
-const { default: center } = require('@turf/center')
 
 const authRouter = require('./authRouter')
 const clientRouter = require('./clientRouter')
@@ -46,7 +45,7 @@ rootRouter.post('/clientError', (req) => {
 rootRouter.get('/area/:area/:zoom?', (req, res) => {
   const { area, zoom } = req.params
   try {
-    const { scanAreas, manualAreas } = config
+    const { scanAreas } = config
     const validScanAreas = scanAreas[req.headers.host]
       ? scanAreas[req.headers.host]
       : scanAreas.main
@@ -55,13 +54,7 @@ rootRouter.get('/area/:area/:zoom?', (req, res) => {
         (a) => a.properties.name.toLowerCase() === area.toLowerCase(),
       )
       if (foundArea) {
-        const [lon, lat] = center(foundArea).geometry.coordinates
-        return res.redirect(`/@/${lat}/${lon}/${zoom || 18}`)
-      }
-      if (manualAreas.length) {
-        const { lat, lon } = manualAreas.find(
-          (a) => a.name.toLowerCase() === area.toLowerCase(),
-        )
+        const [lat, lon] = foundArea.properties.center
         return res.redirect(`/@/${lat}/${lon}/${zoom || 18}`)
       }
       return res.redirect('/404')
@@ -166,7 +159,6 @@ rootRouter.get('/settings', async (req, res) => {
           react: {},
           leaflet: {},
         },
-        manualAreas: config.manualAreas || {},
         icons: { ...config.icons, styles: Event.uicons },
         scanner: {
           scannerType: config.scanner.backendConfig.platform,
@@ -199,7 +191,6 @@ rootRouter.get('/settings', async (req, res) => {
       // keys that are being sent to the frontend but are not options
       const ignoreKeys = [
         'map',
-        'manualAreas',
         'limit',
         'icons',
         'scanner',

server/src/services/api/fetchJson.js

@@ -1,6 +1,5 @@
 /* eslint-disable no-console */
 const fetch = require('node-fetch')
-const { AbortError } = require('node-fetch')
 
 module.exports = async function fetchJson(
   url,
@@ -21,9 +20,7 @@ module.exports = async function fetchJson(
     }
     return response.json()
   } catch (e) {
-    if (e instanceof AbortError) {
-      console.log('Request to', url, 'timed out and was aborted')
-    } else if (log) {
+    if (log) {
       console.warn(e)
     } else if (e instanceof Error) {
       console.warn(e.message, '\n', e.code, `\nUnable to fetch ${url}`)

server/src/services/config.js

@@ -4,14 +4,15 @@
 process.env.NODE_CONFIG_DIR = `${__dirname}/../configs`
 
 const fs = require('fs')
-const path = require('path')
+const { resolve } = require('path')
 const dotenv = require('dotenv')
+const { default: center } = require('@turf/center')
 
 dotenv.config()
 
 const config = require('config')
 
-if (!fs.existsSync(path.resolve(`${__dirname}/../configs/local.json`))) {
+if (!fs.existsSync(resolve(`${__dirname}/../configs/local.json`))) {
   // add database env variables from .env or docker-compose
   const {
     SCANNER_DB_HOST,
@@ -82,7 +83,7 @@ if (!fs.existsSync(path.resolve(`${__dirname}/../configs/local.json`))) {
     )
   }
 }
-if (fs.existsSync(path.resolve(`${__dirname}/../configs/config.json`))) {
+if (fs.existsSync(resolve(`${__dirname}/../configs/config.json`))) {
   console.log(
     '[CONFIG] Config v1 (config.json) found, it is fine to leave it but make sure you are using and updating local.json instead.',
   )
@@ -166,14 +167,49 @@ config.authMethods = [
 })
 
 // Load each areas.json
-const loadScanPolygons = (fileName) =>
-  fs.existsSync(path.resolve(`${__dirname}/../configs/${fileName}`))
-    ? require(`../configs/${fileName}`)
+const loadScanPolygons = (fileName) => {
+  const geojson = fs.existsSync(resolve(`${__dirname}/../configs/${fileName}`))
+    ? JSON.parse(fs.readFileSync(resolve(__dirname, `../configs/${fileName}`)))
     : { features: [] }
+  return {
+    ...geojson,
+    features: geojson.features
+      .filter((f) => !f.properties.hidden)
+      .map((f) => ({
+        ...f,
+        properties: {
+          ...f.properties,
+          center: center(f).geometry.coordinates.reverse(),
+        },
+      }))
+      .sort((a, b) => a.properties.name.localeCompare(b.properties.name)),
+  }
+}
 
 // Check if an areas.json exists
 config.scanAreas = {
-  main: loadScanPolygons(config.map.geoJsonFileName),
+  main: config.manualAreas.length
+    ? {
+        type: 'FeatureCollection',
+        features: config.manualAreas
+          .filter((area) => ['lat', 'lon', 'name'].every((k) => k in area))
+          .map((area) => {
+            const { lat, lon, ...rest } = area
+            return {
+              type: 'Feature',
+              properties: {
+                center: [lat, lon],
+                ...rest,
+              },
+              geometry: {
+                type: 'Polygon',
+                coordinates: [[[lon, lat]]],
+              },
+            }
+          })
+          .sort((a, b) => a.properties.name.localeCompare(b.properties.name)),
+      }
+    : loadScanPolygons(config.map.geoJsonFileName),
   ...Object.fromEntries(
     config.multiDomains.map((d) => [
       d.general?.geoJsonFileName ? d.domain : 'main',
@@ -184,6 +220,36 @@ config.scanAreas = {
   ),
 }
 
+config.scanAreasMenu = Object.fromEntries(
+  Object.entries(config.scanAreas).map(([domain, areas]) => {
+    const parents = { '': { children: [], name: '' } }
+    areas.features.forEach((feature) => {
+      if (feature.properties.parent) {
+        parents[feature.properties.parent] = {
+          name: feature.properties.parent,
+          details: areas.features.find(
+            (area) => area.properties.name === feature.properties.parent,
+          ),
+          children: [],
+        }
+      }
+    })
+    areas.features.forEach((feature) => {
+      if (feature.properties.parent) {
+        parents[feature.properties.parent].children.push(feature)
+      } else if (!parents[feature.properties.name]) {
+        parents[''].children.push(feature)
+      }
+    })
+    Object.values(parents).forEach(({ children }) => {
+      if (children.length % 2 === 1) {
+        children.push({ type: 'Feature', properties: { name: '' } })
+      }
+    })
+    return [domain, Object.values(parents)]
+  }),
+)
+
 config.api.pvp.leagueObj = Object.fromEntries(
   config.api.pvp.leagues.map((league) => [league.name, league.cp]),
 )
@@ -210,9 +276,4 @@ if (
   config.authentication.alwaysEnabledPerms = enabled
 }
 
-// Map manual areas
-config.manualAreas = Object.fromEntries(
-  config.manualAreas.map((area) => [area.name, area]),
-)
-
 module.exports = config

src/components/QueryData.jsx

@@ -132,8 +132,8 @@ export default function QueryData({
     }
   }
 
-  const renderedData = data || previousData || {}
-  return renderedData[category] ? (
+  const renderedData = data || previousData || { [category]: [] }
+  return (
     <>
       <Clustering
         key={sizeKey}
@@ -165,5 +165,5 @@ export default function QueryData({
         />
       )}
     </>
-  ) : null
+  )
 }