Added state for hideShips to appContext + settings

src/components/navbar.tsx

@@ -5,12 +5,11 @@ import HamburgerSVG from '../svgs/hamburgerSVG'
 import CloseSVG from '../svgs/closeSVG'
 
 export default function Navbar() {
-  const { myClockSpeed, setMyClockSpeed, myDateTimeRef } = useAppContext()
+  const { myClockSpeed, setMyClockSpeed, myDateTimeRef, hideShips, setHideShips } = useAppContext()
   const [opened, setOpened] = useState<boolean>(false)
   const [localClock, setLocalClock] = useState<Date>(myDateTimeRef.current)
   const [localSpeed, setLocalSpeed] = useState<string>(myClockSpeed.toString())
   const convertedMyDateTime = `${localClock.getFullYear()}-${(localClock.getMonth() + 1).toString().padStart(2, '0')}-${localClock.getDate().toString().padStart(2, '0')}T${localClock.getHours().toString().padStart(2, '0')}:${localClock.getMinutes().toString().padStart(2, '0')}`
-
   useEffect(() => {
     function updateLocalClock() {
       setLocalClock(myDateTimeRef.current)
@@ -54,7 +53,7 @@ export default function Navbar() {
           id="settings-container"
           className="absolute left-[101%] top-0 bg-gray-700 opacity-90 text-white flex flex-col gap-4 p-4 min-w-96 rounded-lg shadow-lg"
         >
-          <h2 className="text-lg font-bold">Simulation settings</h2>
+          <h2 className="text-lg font-bold">Settings</h2>
           <div className="flex flex-row justify-between gap-4">
             <label className="font-medium whitespace-nowrap" htmlFor="my-speed">
               Simulated Speed
@@ -80,6 +79,19 @@ export default function Navbar() {
               value={convertedMyDateTime}
             />
           </div>
+          <div className="flex flex-row justify-between items-center gap-4">
+            <span className="font-medium whitespace-nowrap">Hide vessels when showing path</span>
+            <label className="relative inline-flex items-center cursor-pointer">
+              <input
+                type="checkbox"
+                value=""
+                onChange={(e) => setHideShips(e.target.checked)}
+                className="sr-only peer"
+                checked={hideShips}
+              />
+              <div className="w-9 h-5 bg-gray-600 hover:bg-gray-500 peer-focus:outline-0 peer-focus:ring-transparent rounded-full peer transition-all ease-in-out duration-500 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-blue-700 hover:peer-checked:bg-blue-600"></div>
+            </label>
+          </div>
         </div>
       )}
       <button id="menu-icon" title="Show/hide simulation settings" className="" onClick={() => setOpened(!opened)}>

src/components/pathOverlay.tsx

@@ -10,6 +10,7 @@ interface IPathOverlayProps {
   path: ILocation[]
   idx: number
 }
+
 export default function PathOverlay({ path, idx }: IPathOverlayProps) {
   const [graphicOptions] = useState<IGraphicOptions[]>([])
   const [pixiContainer] = useState(new PIXI.Container())

src/components/selectionAreaOverlay.tsx

@@ -6,7 +6,11 @@ import GraphicOverlayHandler from '../implementations/GraphicOverlayHandler'
 import { IGraphicOptions } from '../models/graphicOptions'
 import L from 'leaflet'
 
-export default function SelectionAreaOverlay({ selectionArea }: { selectionArea: ISelectionArea }) {
+interface ISelectionAreaOverlayProps {
+  selectionArea: ISelectionArea
+}
+
+export default function SelectionAreaOverlay({ selectionArea }: ISelectionAreaOverlayProps) {
   const [graphicOptions] = useState<IGraphicOptions[]>([])
   const [pixiContainer] = useState(new PIXI.Container())
   const [overlay] = useState(new GraphicOverlayHandler(pixiContainer, graphicOptions))

src/components/vesselDetailsBox.tsx

@@ -7,11 +7,17 @@ import CloseSVG from '../svgs/closeSVG'
 
 export default function VesselDetailsBox() {
   const { clientHandler, myDateTimeRef } = useAppContext()
-  const { selectedVesselmmsi, setSelectedVesselmmsi, selectedVesselPath, setSelectedVesselPath } = useVesselGuiContext()
+  const {
+    selectedVesselmmsi,
+    setSelectedVesselmmsi,
+    selectedVesselPath,
+    setSelectedVesselPath,
+    pathIsShown,
+    setPathIsShown,
+  } = useVesselGuiContext()
   const [vesselDetails, setVesselDetails] = useState<IDetailedVessel | undefined>(undefined)
   const [loading, setLoading] = useState(true)
   const [pathDuration, setPathDuration] = useState<number>(1)
-  const [pathIsShown, setPathIsShown] = useState<boolean>(false)
   const [isCollapsed, setIsCollapsed] = useState<boolean>(false)
 
   // Fetch vessel details on selected vessel change

src/components/vesselMarkerOverlay.tsx

@@ -10,13 +10,12 @@ import SpriteMarkerOverlayHandler from '../implementations/SpriteMarkerOverlayHa
 import { useMap } from 'react-leaflet'
 import { useAppContext } from '../contexts/appcontext'
 
-export default function VesselMarkerOverlay({
-  simpleVessels,
-  monitoredVessels,
-}: {
+interface IVesselMarkerOverlayProps {
   simpleVessels: ISimpleVessel[]
   monitoredVessels: IMonitoredVessel[]
-}) {
+}
+
+export default function VesselMarkerOverlay({ simpleVessels, monitoredVessels }: IVesselMarkerOverlayProps) {
   const { selectedVesselmmsi, setSelectedVesselmmsi } = useVesselGuiContext()
   const [markerOptions] = useState<ISpriteMarkerOptions[]>([])
   const [pixiContainer] = useState(new PIXI.Container())
@@ -54,7 +53,12 @@ export default function VesselMarkerOverlay({
 
   // Update markers
   useEffect(() => {
-    if (arrowTexture === null || selectedArrowTexture === null || circleTexture === null || selectedCircleTexture === null) {
+    if (
+      arrowTexture === null ||
+      selectedArrowTexture === null ||
+      circleTexture === null ||
+      selectedCircleTexture === null
+    ) {
       return
     }
 
@@ -69,7 +73,15 @@ export default function VesselMarkerOverlay({
           )
 
         markerOptions.push(
-          displayVesselToSpriteMarkerOption(vessel, arrowTexture, selectedArrowTexture, circleTexture, selectedCircleTexture, selectedVesselmmsi === vessel.simpleVessel.mmsi, onClick)
+          displayVesselToSpriteMarkerOption(
+            vessel,
+            arrowTexture,
+            selectedArrowTexture,
+            circleTexture,
+            selectedCircleTexture,
+            selectedVesselmmsi === vessel.simpleVessel.mmsi,
+            onClick
+          )
         )
       }
     })
@@ -91,7 +103,7 @@ export default function VesselMarkerOverlay({
     pixiContainer,
     setSelectedVesselmmsi,
     simpleVessels,
-    selectedVesselmmsi
+    selectedVesselmmsi,
   ])
 
   return null
@@ -123,7 +135,7 @@ function displayVesselToSpriteMarkerOption(
   circleTexture: PIXI.Texture,
   selectedCircleTexture: PIXI.Texture,
   isSelected: boolean,
-  onClick: () => void,
+  onClick: () => void
 ): ISpriteMarkerOptions {
   const { simpleVessel, monitoredInfo } = vessel
 

src/contexts/appcontext.tsx

@@ -7,6 +7,8 @@ interface IAppContext {
   myDateTimeRef: React.MutableRefObject<Date>
   myClockSpeed: number
   setMyClockSpeed: React.Dispatch<React.SetStateAction<number>>
+  hideShips: boolean
+  setHideShips: React.Dispatch<React.SetStateAction<boolean>>
   clientHandler: IClientHandler
 }
 
@@ -22,6 +24,7 @@ export const useAppContext = () => {
 
 export const AppContextProvider = ({ children }: { children: React.ReactNode }) => {
   const [myClockSpeed, setMyClockSpeed] = useState<number>(100)
+  const [hideShips, setHideShips] = useState<boolean>(true)
   const myDateTimeRef = useRef(new Date(1725844950 * 1000)) // Initialize ref with current time
 
   const grpcWeb = new GrpcWebImpl('http://localhost:8080', {})
@@ -40,7 +43,9 @@ export const AppContextProvider = ({ children }: { children: React.ReactNode })
   }, [myClockSpeed]) // Re-run the effect if myClockSpeed changes
 
   return (
-    <AppContext.Provider value={{ myClockSpeed, setMyClockSpeed, clientHandler, myDateTimeRef }}>
+    <AppContext.Provider
+      value={{ myClockSpeed, setMyClockSpeed, hideShips, setHideShips, clientHandler, myDateTimeRef }}
+    >
       {children}
     </AppContext.Provider>
   )

src/contexts/vesselGuiContext.tsx

@@ -23,6 +23,8 @@ interface IVesselGuiContext {
   setSelectedVesselmmsi: React.Dispatch<React.SetStateAction<number | undefined>>
   selectedVesselPath: ILocation[]
   setSelectedVesselPath: React.Dispatch<React.SetStateAction<ILocation[]>>
+  pathIsShown: boolean
+  setPathIsShown: React.Dispatch<React.SetStateAction<boolean>>
 }
 
 const VesselGuiContext = createContext<IVesselGuiContext | undefined>(undefined)
@@ -45,6 +47,7 @@ export const VesselGuiContextProvider = ({ children }: { children: React.ReactNo
   const [selectionArea, setSelectionArea] = useState<ISelectionArea>({ points: [] })
   const [selectedVesselmmsi, setSelectedVesselmmsi] = useState<number | undefined>()
   const [selectedVesselPath, setSelectedVesselPath] = useState<ILocation[]>([])
+  const [pathIsShown, setPathIsShown] = useState<boolean>(false)
 
   return (
     <VesselGuiContext.Provider
@@ -63,6 +66,8 @@ export const VesselGuiContextProvider = ({ children }: { children: React.ReactNo
         setSelectedVesselmmsi,
         selectedVesselPath,
         setSelectedVesselPath,
+        pathIsShown,
+        setPathIsShown,
       }}
     >
       {children}