From dfc057c925b4850b027f0a311f44551e2b2fdda9 Mon Sep 17 00:00:00 2001
From: TurtIeSocks <58572875+TurtIeSocks@users.noreply.github.com>
Date: Sun, 14 Mar 2021 15:08:21 -0400
Subject: [PATCH] Add S2 Scan Cells

- Ability to see S2 Scan Cells
- Changes hue based off of last scanned time
- Refactor Polygon/Polyline function
---
 client/src/components/MapTiles.jsx            | 14 ++++---
 client/src/components/s2Cell/Popup.jsx        | 11 ++++++
 client/src/components/s2Cell/S2Cell.jsx       | 39 +++++++++++++++++++
 client/src/components/s2Cell/marker.js        | 13 +++++++
 client/src/components/weather/Weather.jsx     |  7 ++--
 client/src/services/Query.js                  |  6 ++-
 client/src/services/data/s2Cell.js            | 14 +++++++
 .../{getPolygon.js => getPolyVector.js}       |  5 ++-
 client/src/services/getPolyline.js            | 18 ---------
 server/src/models/S2Cell.js                   |  9 +++++
 server/src/models/index.js                    |  4 +-
 server/src/schema/pokemon.js                  |  2 +-
 server/src/schema/s2Cell.js                   | 12 ++++++
 server/src/schema/schema.js                   | 15 ++++++-
 14 files changed, 136 insertions(+), 33 deletions(-)
 create mode 100644 client/src/components/s2Cell/Popup.jsx
 create mode 100644 client/src/components/s2Cell/S2Cell.jsx
 create mode 100644 client/src/components/s2Cell/marker.js
 create mode 100644 client/src/services/data/s2Cell.js
 rename client/src/services/{getPolygon.js => getPolyVector.js} (81%)
 delete mode 100644 client/src/services/getPolyline.js
 create mode 100644 server/src/models/S2Cell.js
 create mode 100644 server/src/schema/s2Cell.js

diff --git a/client/src/components/MapTiles.jsx b/client/src/components/MapTiles.jsx
index c79dc5d1b..66921d38f 100644
--- a/client/src/components/MapTiles.jsx
+++ b/client/src/components/MapTiles.jsx
@@ -8,16 +8,17 @@ import Nav from './layout/Nav.jsx'
 import Spawnpoint from './spawnpoints/Spawnpoint.jsx'
 import Portal from './portals/Portal.jsx'
 import Weather from './weather/Weather.jsx'
+import S2Cell from './s2Cell/S2Cell.jsx'
 
 const MapTiles = ({ map, settings }) => {
   const [bounds, setBounds] = useState({
-    _southWest: { 
-      lat: settings.map.startLat-0.025, 
-      lng: settings.map.startLon-0.025 
+    _southWest: {
+      lat: settings.map.startLat - 0.025,
+      lng: settings.map.startLon - 0.025
     },
-    _northEast: { 
-      lat: settings.map.startLat+0.025, 
-      lng: settings.map.startLon+0.025
+    _northEast: {
+      lat: settings.map.startLat + 0.025,
+      lng: settings.map.startLon + 0.025
     }
   })
   const [selected, setSelected] = useState({
@@ -59,6 +60,7 @@ const MapTiles = ({ map, settings }) => {
       {selected.pokestops && <Pokestop bounds={bounds} />}
       {selected.pokemon && <Pokemon bounds={bounds} />}
       {selected.portals && <Portal bounds={bounds} />}
+      {selected.s2Cells && <S2Cell bounds={bounds} />}
       {selected.spawnpoints && <Spawnpoint bounds={bounds} />}
       {selected.weather && <Weather bounds={bounds} />}
       <Nav
diff --git a/client/src/components/s2Cell/Popup.jsx b/client/src/components/s2Cell/Popup.jsx
new file mode 100644
index 000000000..9dada0bcc
--- /dev/null
+++ b/client/src/components/s2Cell/Popup.jsx
@@ -0,0 +1,11 @@
+import React from 'react'
+
+const S2CellPopup = ({ cell }) => {
+  return (
+    <>
+    {cell.id}
+    </>
+  )
+}
+
+export default S2CellPopup
\ No newline at end of file
diff --git a/client/src/components/s2Cell/S2Cell.jsx b/client/src/components/s2Cell/S2Cell.jsx
new file mode 100644
index 000000000..5bbbff9f8
--- /dev/null
+++ b/client/src/components/s2Cell/S2Cell.jsx
@@ -0,0 +1,39 @@
+import React from 'react'
+import { Popup, Polygon } from 'react-leaflet'
+
+import { useQuery } from '@apollo/client'
+import Query from '../../services/Query.js'
+
+import marker from './marker.js'
+import PopupContent from './Popup.jsx'
+import getPolyVector from '../../services/getPolyVector'
+
+const S2Cell = ({ bounds }) => {
+  const { loading, error, data } = useQuery(Query.getAllS2Cells(), {
+    variables: {
+      minLat: bounds._southWest.lat,
+      minLon: bounds._southWest.lng,
+      maxLat: bounds._northEast.lat,
+      maxLon: bounds._northEast.lng
+    }
+  })
+
+  return (
+    <>
+      {data && data.s2Cells.map(cell => {
+        return (
+          <Polygon
+            key={cell.id}
+            positions={getPolyVector(cell.id, 'polygon')}
+            pathOptions={marker(cell.updated)}>
+            <Popup position={[cell.latitude, cell.longitude]}>
+              <PopupContent cell={cell} />
+            </Popup>
+          </Polygon>
+        )
+      })}
+    </>
+  )
+}
+
+export default S2Cell
diff --git a/client/src/components/s2Cell/marker.js b/client/src/components/s2Cell/marker.js
new file mode 100644
index 000000000..15932fc04
--- /dev/null
+++ b/client/src/components/s2Cell/marker.js
@@ -0,0 +1,13 @@
+export default function (cellUpdated) {
+  const ago = (new Date()).getTime() - (cellUpdated * 1000)
+  const value = ago <= 150000 ? 0 : Math.min((ago - 150000) / 750000, 1)
+  const hue = ((1 - value) * 120).toString(10)
+
+  return {
+    fillColor: ['hsl(', hue, ',100%,50%)'].join(''),
+    color: 'black',
+    opacity: 0.75,
+    fillOpacity: 0.5,
+    weight: 0.5
+  }
+}
\ No newline at end of file
diff --git a/client/src/components/weather/Weather.jsx b/client/src/components/weather/Weather.jsx
index f3c45fa1c..cd8efb46a 100644
--- a/client/src/components/weather/Weather.jsx
+++ b/client/src/components/weather/Weather.jsx
@@ -1,13 +1,12 @@
 import React from 'react'
-import { Popup, Polygon, Polyline, Marker } from 'react-leaflet'
+import { Popup, Polyline, Marker } from 'react-leaflet'
 
 import { useQuery } from '@apollo/client'
 import Query from '../../services/Query.js'
 
 import marker from './marker.js'
 import PopupContent from './Popup.jsx'
-import getPolygon from '../../services/getPolygon.js'
-import getPolyline from '../../services/getPolyline.js' 
+import getPolyVector from '../../services/getPolyVector.js' 
 
 const Weather = ({ bounds }) => {
   const { loading, error, data } = useQuery(Query.getAllWeather(), {
@@ -25,7 +24,7 @@ const Weather = ({ bounds }) => {
         return (
           <Polyline
             key={cell.id}
-            positions={getPolyline(cell.id)}
+            positions={getPolyVector(cell.id, 'polyline')}
             pathOptions={{ color: 'green', opacity: 0.5 }}>
             <Marker icon={marker(cell)} position={[cell.latitude, cell.longitude]}>
               <Popup position={[cell.latitude, cell.longitude]}>
diff --git a/client/src/services/Query.js b/client/src/services/Query.js
index 52bae217b..aac1510ef 100644
--- a/client/src/services/Query.js
+++ b/client/src/services/Query.js
@@ -5,7 +5,7 @@ import { getAllPokemon } from './data/pokemon.js'
 import { getAllSpawnpoints } from './data/spawnpoint.js'
 import { getAllPortals } from './data/portal.js' 
 import { getAllWeather } from './data/weather.js'
-
+import { getAllS2Cells } from './data/s2Cell.js'
 class Query {
 
   static getAllDevices() {
@@ -28,6 +28,10 @@ class Query {
     return getAllPortals
   }
 
+  static getAllS2Cells() {
+    return getAllS2Cells
+  }
+
   static getAllSpawnpoints() {
     return getAllSpawnpoints
   }
diff --git a/client/src/services/data/s2Cell.js b/client/src/services/data/s2Cell.js
new file mode 100644
index 000000000..61d464a7a
--- /dev/null
+++ b/client/src/services/data/s2Cell.js
@@ -0,0 +1,14 @@
+import { gql } from '@apollo/client'
+
+const getAllS2Cells = gql`
+  query Data($minLat: Float!, $minLon: Float!, $maxLat: Float!, $maxLon: Float!) {
+    s2Cells(minLat: $minLat, minLon: $minLon, maxLat: $maxLat, maxLon: $maxLon) {
+      id
+      center_lat
+      center_lon
+      updated
+    }
+  }
+`
+
+export { getAllS2Cells }
\ No newline at end of file
diff --git a/client/src/services/getPolygon.js b/client/src/services/getPolyVector.js
similarity index 81%
rename from client/src/services/getPolygon.js
rename to client/src/services/getPolyVector.js
index 38b0a856f..a3c3f1770 100644
--- a/client/src/services/getPolygon.js
+++ b/client/src/services/getPolyVector.js
@@ -1,6 +1,6 @@
 import { S2LatLng, S2Cell, S2CellId, S2Point } from 'nodes2ts';
 
-export default function (s2cellId) {
+export default function (s2cellId, type) {
   const s2cell = new S2Cell(new S2CellId(BigInt(s2cellId).toString()))
   const polygon = []
   for (let i = 0; i <= 3; i++) {
@@ -12,6 +12,9 @@ export default function (s2cellId) {
       latLng.lngDegrees
     ])
   }
+  if (type === 'polyline') {
+    polygon.push(polygon[0])
+  }
 
   return polygon
 }
diff --git a/client/src/services/getPolyline.js b/client/src/services/getPolyline.js
deleted file mode 100644
index ee9f19005..000000000
--- a/client/src/services/getPolyline.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import { S2LatLng, S2Cell, S2CellId, S2Point } from 'nodes2ts';
-
-export default function (s2cellId) {
-  const s2cell = new S2Cell(new S2CellId(BigInt(s2cellId).toString()))
-  const polygon = []
-  for (let i = 0; i <= 3; i++) {
-    const coordinate = s2cell.getVertex(i)
-    const point = new S2Point(coordinate.x, coordinate.y, coordinate.z)
-    const latLng = S2LatLng.fromPoint(point)
-    polygon.push([
-      latLng.latDegrees,
-      latLng.lngDegrees
-    ])
-  }
-  polygon.push(polygon[0])
-
-  return polygon
-}
diff --git a/server/src/models/S2Cell.js b/server/src/models/S2Cell.js
new file mode 100644
index 000000000..51c71362d
--- /dev/null
+++ b/server/src/models/S2Cell.js
@@ -0,0 +1,9 @@
+import { Model } from 'objection'
+
+class S2Cell extends Model {
+  static get tableName() {
+    return 's2cell'
+  }
+}
+
+export default S2Cell
\ No newline at end of file
diff --git a/server/src/models/index.js b/server/src/models/index.js
index 913d3b449..9b7a6e8bd 100644
--- a/server/src/models/index.js
+++ b/server/src/models/index.js
@@ -2,7 +2,8 @@ import Device from './Device.js'
 import Gym from './Gym.js'
 import Pokestop from './Pokestop.js'
 import Pokemon from './Pokemon.js'
-import Portal from './Portal.js' 
+import Portal from './Portal.js'
+import S2Cell from './S2Cell.js'
 import Spawnpoint from './Spawnpoint.js'
 import Weather from './Weather.js' 
 
@@ -12,6 +13,7 @@ export {
   Pokestop,
   Pokemon,
   Portal,
+  S2Cell,
   Spawnpoint,
   Weather
 }
\ No newline at end of file
diff --git a/server/src/schema/pokemon.js b/server/src/schema/pokemon.js
index cde4c50f8..0a578cbb3 100644
--- a/server/src/schema/pokemon.js
+++ b/server/src/schema/pokemon.js
@@ -12,7 +12,7 @@ const PvpType = new GraphQLObjectType({
 })
 
 export default new GraphQLObjectType({
-  name: 'PokemonDetails',
+  name: 'Pokemon',
   fields: () => ({
     id: { type: GraphQLID },
     lat: { type: GraphQLFloat },
diff --git a/server/src/schema/s2Cell.js b/server/src/schema/s2Cell.js
new file mode 100644
index 000000000..57174aa6f
--- /dev/null
+++ b/server/src/schema/s2Cell.js
@@ -0,0 +1,12 @@
+import { GraphQLObjectType, GraphQLInt, GraphQLFloat, GraphQLString } from 'graphql'
+
+export default new GraphQLObjectType({
+  name: 'S2Cell',
+  fields: () => ({
+    id: { type: GraphQLString },
+    level: { type: GraphQLInt },
+    center_lat: { type: GraphQLFloat },
+    center_lon: { type: GraphQLFloat },
+    updated: { type: GraphQLInt }
+  })
+})
diff --git a/server/src/schema/schema.js b/server/src/schema/schema.js
index a8cd6b93f..31f4fc9fa 100644
--- a/server/src/schema/schema.js
+++ b/server/src/schema/schema.js
@@ -6,9 +6,10 @@ import GymType from './gym.js'
 import PokestopType from './pokestop.js'
 import PokemonType from './pokemon.js'
 import PortalType from './portals.js'
+import s2CellType from './s2Cell.js'
 import SpawnpointType from './spawnpoint.js'
 import WeatherType from './weather.js'
-import { Device, Gym, Pokemon, Pokestop, Portal, Spawnpoint, Weather } from '../models/index.js'
+import { Device, Gym, Pokemon, Pokestop, Portal, S2Cell, Spawnpoint, Weather } from '../models/index.js'
 
 const minMaxArgs = {
   minLat: { type: GraphQLFloat },
@@ -80,6 +81,18 @@ const RootQuery = new GraphQLObjectType({
           .andWhereBetween('lon', [args.minLon, args.maxLon])
       }
     },
+    s2Cells: {
+      type: new GraphQLList(s2CellType),
+      args: minMaxArgs,
+      async resolve(parent, args) {
+        return await S2Cell.query()
+          .select(['*', ref('id')
+            .castTo('CHAR')
+            .as('id')])
+          .whereBetween('center_lat', [args.minLat, args.maxLat])
+          .andWhereBetween('center_lon', [args.minLon, args.maxLon])
+      }
+    },
     spawnpoints: {
       type: new GraphQLList(SpawnpointType),
       args: minMaxArgs,