Fix timeline close

src/components/pathOverlay.tsx

@@ -74,7 +74,7 @@ function pathToGraphic(path: ILocation[]): IGraphicOptions {
     })
     graphic.clear()
 
-    graphic.lineStyle(1 / scale, 0x5858ff, 1)
+    graphic.lineStyle(1 / scale, 0x005cc8, 1)
     graphic.moveTo(projectedCords[0].x, projectedCords[0].y)
     for (let i = 1; i < projectedCords.length; i++) {
       graphic.lineTo(projectedCords[i].x, projectedCords[i].y)
@@ -97,7 +97,7 @@ function vesselToGraphic(
     const sprite: PIXI.Sprite = new PIXI.Sprite(location.heading ? arrowTexture : circleTexture)
     sprite.anchor.set(0.5, 0.5)
     sprite.rotation = Math.PI / 2 + (location.heading ? (location.heading * Math.PI) / 180 : 0)
-    sprite.tint = 0x5858ff
+    sprite.tint = 0x005cc8
     sprite.x = projectedCords.x
     sprite.y = projectedCords.y
     sprite.width = 20 / scale

src/components/timeline.tsx

@@ -1,5 +1,6 @@
 import { useEffect } from 'react'
 import { useVesselGuiContext } from '../contexts/vesselGuiContext'
+import CloseSVG from '../svgs/closeSVG'
 interface ITimelineProps {
   timestamps: Date[]
   onChange(index: number): void
@@ -8,7 +9,7 @@ interface ITimelineProps {
 }
 
 export default function Timeline({ timestamps, onChange, timelineVal, setTimelineVal }: ITimelineProps) {
-  const { setSelectedVesselPath, selectedVesselmmsi, selectedVesselPath } = useVesselGuiContext()
+  const { setSelectedVesselPath, selectedVesselmmsi, selectedVesselPath, setPathIsShown } = useVesselGuiContext()
   function handleChange(val: string) {
     try {
       const intVal: number = parseInt(val)
@@ -21,6 +22,7 @@ export default function Timeline({ timestamps, onChange, timelineVal, setTimelin
 
   function closePath() {
     setSelectedVesselPath([])
+    setPathIsShown(false)
   }
 
   useEffect(() => {
@@ -32,16 +34,16 @@ export default function Timeline({ timestamps, onChange, timelineVal, setTimelin
   }, [selectedVesselmmsi, setSelectedVesselPath, setTimelineVal])
 
   return selectedVesselPath.length !== 0 ? (
-    <div className="bg-gray-700 text-white rounded-xl mx-4 px-4 py-2 shadow max-w-[700px] w-full">
+    <div className="bg-gray-700 text-white rounded-xl px-4 py-2 shadow max-w-[700px] w-full">
       <div className="w-full flex items-center relative">
         <p className="absolute left-1/2 transform -translate-x-1/2 font-bold text-center">
           Timestamp:{' '}
           {timelineVal && timestamps[timelineVal]
             ? timestamps[timelineVal].toISOString().replace('T', ' ').replace('Z', '').slice(0, 19)
             : 'unknown'}
         </p>
-        <button onClick={closePath} className="ml-auto blue-badge">
-          Close
+        <button title="Hide path" onClick={closePath} className="ml-auto -mr-2">
+          <CloseSVG />
         </button>
       </div>
       <input

src/components/vesselMarkerOverlay.tsx

@@ -71,7 +71,6 @@ export default function VesselMarkerOverlay({ simpleVessels, monitoredVessels }:
           setSelectedVesselmmsi((selectedVesselmmsi) =>
             selectedVesselmmsi === vessel.simpleVessel.mmsi ? undefined : vessel.simpleVessel.mmsi
           )
-
         markerOptions.push(
           displayVesselToSpriteMarkerOption(
             vessel,
@@ -80,7 +79,8 @@ export default function VesselMarkerOverlay({ simpleVessels, monitoredVessels }:
             circleTexture,
             selectedCircleTexture,
             selectedVesselmmsi === vessel.simpleVessel.mmsi,
-            onClick
+            onClick,
+            () => overlay.redraw()
           )
         )
       }
@@ -139,7 +139,8 @@ function displayVesselToSpriteMarkerOption(
   circleTexture: PIXI.Texture,
   selectedCircleTexture: PIXI.Texture,
   isSelected: boolean,
-  onClick: () => void
+  onClick: () => void,
+  redraw: () => void
 ): ISpriteMarkerOptions {
   const { simpleVessel, monitoredInfo } = vessel
 
@@ -165,6 +166,14 @@ function displayVesselToSpriteMarkerOption(
   sprite.eventMode = 'dynamic'
   sprite.cursor = 'pointer'
   sprite.on('click', onClick)
+  sprite.on('mouseover', () => {
+    sprite.alpha = monitoredInfo ? 1 : 0.7
+    redraw()
+  })
+  sprite.on('mouseout', () => {
+    sprite.alpha = monitoredInfo ? 1 : 0.3
+    redraw()
+  })
 
   const size = isSelected ? 20 : 13
   const position: L.LatLngTuple = [simpleVessel.location.point.lat, simpleVessel.location.point.lon]