Merge branch 'master' into fix/firebase-analytics

firebase.json

@@ -26,7 +26,7 @@
                     },
                     {
                         "key": "Permissions-Policy",
-                        "value": "geolocation=(self);"
+                        "value": "geolocation=(self)"
                     },
                     {
                         "key": "Referrer-Policy",

package.json

@@ -1,6 +1,6 @@
 {
     "name": "tavla",
-    "version": "5.7.0",
+    "version": "6.2.0",
     "description": "",
     "repository": {
         "type": "git",
@@ -59,6 +59,7 @@
         "copy-to-clipboard": "^3.3.1",
         "date-fns": "^2.23.0",
         "firebase": "^9.0.1",
+        "google-polyline": "^1.0.3",
         "graphql": "^15.6.0",
         "lodash.debounce": "^4.0.8",
         "lz-string": "^1.4.4",
@@ -84,6 +85,7 @@
         "@babel/plugin-proposal-class-properties": "^7.14.5",
         "@babel/preset-env": "^7.15.0",
         "@babel/preset-react": "^7.14.5",
+        "@types/google-polyline": "^1.0.0",
         "@types/lodash.debounce": "^4.0.6",
         "@types/lz-string": "^1.3.34",
         "@types/node": "^16.7.13",

src/components/Map/RealtimeVehicleTag/LineOverlay/index.tsx

@@ -0,0 +1,33 @@
+import React from 'react'
+import { CanvasOverlay } from 'react-map-gl'
+
+interface Props {
+    points: Array<[number, number]>
+    color: string
+}
+
+interface RedrawArgs {
+    width: number
+    height: number
+    ctx: CanvasRenderingContext2D
+    project: (point: [number, number]) => [number, number]
+}
+
+const LineOverlay = ({ points, color }: Props): JSX.Element | null => {
+    const redraw = ({ width, height, ctx, project }: RedrawArgs): void => {
+        ctx.clearRect(0, 0, width, height)
+        ctx.lineWidth = 4
+        ctx.strokeStyle = color
+        ctx.globalAlpha = 0.4
+        ctx.beginPath()
+        points.forEach((point) => {
+            const pixel = project([point[1], point[0]])
+            ctx.lineTo(pixel[0], pixel[1])
+        })
+        ctx.stroke()
+    }
+
+    return <CanvasOverlay redraw={redraw} />
+}
+
+export default LineOverlay

src/components/Map/RealtimeVehicleTag/index.tsx

@@ -14,15 +14,29 @@ import './styles.scss'
 
 interface Props {
     realtimeVehicle: RealtimeVehicle
+    setHoveredVehicle: (realtimeVehicle: RealtimeVehicle | null) => void
+    isHovered: boolean
 }
 
-const RealtimeVehicleTag = ({ realtimeVehicle }: Props): JSX.Element => (
+const RealtimeVehicleTag = ({
+    realtimeVehicle,
+    setHoveredVehicle,
+    isHovered,
+}: Props): JSX.Element => (
     <Tooltip
         placement="top"
         content={<TooltipContent realtimeVehicle={realtimeVehicle} />}
+        className={`map__realtime-vehicle-tag-tooltip ${
+            isHovered ? 'visible' : ''
+        }`}
+        disableHoverListener={true}
+        isOpen={true}
+        showCloseButton={false}
     >
         <div
             className="map__realtime-vehicle-tag-circle-outer"
+            onMouseEnter={() => setHoveredVehicle(realtimeVehicle)}
+            onMouseLeave={() => setHoveredVehicle(null)}
             style={
                 realtimeVehicle.active
                     ? { backgroundColor: 'white' }

src/components/Map/RealtimeVehicleTag/styles.scss

@@ -9,7 +9,7 @@
         justify-content: center;
         align-items: center;
         box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
-        transition: all 0.2s ease-in-out;
+        transition: all 0.1s ease-in-out;
         &:hover {
             transform: scale(1.5);
         }
@@ -24,4 +24,14 @@
         align-items: center;
         font-size: $font-sizes-medium;
     }
+    &-tooltip {
+        opacity: 0;
+        visibility: hidden;
+    }
+    &-tooltip.visible {
+        opacity: 1;
+        visibility: visible;
+        transition: opacity 0.1s ease-in;
+        margin-bottom: 0.5rem;
+    }
 }