Fix width of reason column of monitoring menu

src/__tests__/StreamManager.test.ts

@@ -18,9 +18,9 @@ beforeEach(() => {
     getSimpleVessles: jest
       .fn()
       .mockResolvedValue([
-        { mmsi: 123456, location: { point: { lon: 1, lat: 2 }, timestamp: new Date(), heading: 45 } },
+        { mmsi: 123456789, location: { point: { lon: 1, lat: 2 }, timestamp: new Date(), heading: 45 } },
       ]),
-    getMonitoredVessels: jest.fn().mockResolvedValue([{ mmsi: 123456, trustworthiness: 0.9, reason: 'Test' }]),
+    getMonitoredVessels: jest.fn().mockResolvedValue([{ mmsi: 123456789, trustworthiness: 0.9, reason: 'Test' }]),
   } as unknown as jest.Mocked<IClientHandler>
 
   setAllVessels = jest.fn()

src/components/monitoringMenu.tsx

@@ -29,11 +29,10 @@ export default function MonitoringMenu({ monitoredVessels, zoomToVessel }: IMoni
       </div>
       {!isCollapsed && (
         <>
-          <div id="title-row" className="px-2 pr-6 py-2 grid grid-cols-4 gap-4 font-medium">
-            <p className="text-left">MMSI</p>
-            <p className="text-right">Trust</p>
-            <p className="text-left">Reason</p>
-            <p className="text-center">Find vessel</p>
+          <div id="title-row" className="px-2 pr-6 py-2 flex flex-row gap-4 font-medium">
+            <p className="w-20">MMSI</p>
+            <p className="w-12">Trust</p>
+            <p className="w-[200px]">Reason</p>
           </div>
           <div id="rows-container" className="max-h-[50vh] overflow-y-auto divide-y rounded-md">
             {sortedMonitoredVessels.map((vessel, index) => (

src/components/monitoringMenuRow.tsx

@@ -19,29 +19,46 @@ export default function MonitoringMenuRow({ monitoredVessel, zoomToCallback }: I
     }
   }
 
+  function convertToReasons(reason: string | undefined): string[] {
+    const separator = ' | '
+    if (reason === undefined || reason.length === 0) {
+      return []
+    }
+    return reason.split(separator)
+  }
+
   function handleClick(e: React.MouseEvent<HTMLButtonElement>) {
     e.stopPropagation()
     setSelectedVesselmmsi(monitoredVessel.mmsi)
     zoomToCallback(monitoredVessel)
   }
+
   return (
     <div
-      className={`${selectedVesselmmsi === monitoredVessel.mmsi && 'font-bold'} grid grid-cols-4 gap-4 items-center hover:cursor-pointer text-sm`}
+      className={`${selectedVesselmmsi === monitoredVessel.mmsi && 'font-bold'} flex flex-row gap-4 items-center hover:cursor-pointer text-sm`}
       onClick={handleRowSelect}
     >
-      <p className="text-left font-mono">{monitoredVessel.mmsi}</p>
-      <p className="text-right font-mono">{(Math.round(monitoredVessel.trustworthiness * 1000) / 10).toFixed(2)}%</p>
-      <p title={monitoredVessel.reason} className="text-left truncate">
-        {monitoredVessel.reason}
-      </p>
+      <p className="font-mono w-20">{monitoredVessel.mmsi}</p>
+      <p className="font-mono w-12">{(Math.round(monitoredVessel.trustworthiness * 1000) / 10).toFixed(2)}%</p>
+      {selectedVesselmmsi === monitoredVessel.mmsi ? (
+        <div className="truncate w-[200px] flex flex-row gap-1 flex-wrap">
+          {convertToReasons(monitoredVessel.reason).map((reason, index) => (
+            <span key={index} className="block bg-white bg-opacity-10 rounded-md px-2 py-1 font-normal text-sm">
+              {reason}
+            </span>
+          ))}
+        </div>
+      ) : (
+        <p title={monitoredVessel.reason} className="w-[200px] truncate">
+          {monitoredVessel.reason}
+        </p>
+      )}
 
-      {selectedVesselmmsi === monitoredVessel.mmsi && (
+      {selectedVesselmmsi === monitoredVessel.mmsi ? (
         <button className="blue-badge" onClick={handleClick}>
           Zoom
         </button>
-      )}
-
-      {selectedVesselmmsi !== monitoredVessel.mmsi && (
+      ) : (
         <div className="grey-badge text-center hover:cursor-default">Zoom</div>
       )}
     </div>

src/components/navbar.tsx

@@ -5,7 +5,17 @@ import HamburgerSVG from '../svgs/hamburgerSVG'
 import CloseSVG from '../svgs/closeSVG'
 
 export default function Navbar() {
-  const { myClockSpeed, setMyClockSpeed, myDateTimeRef, hideVessels, setHideVessels } = useAppContext()
+  const {
+    myClockSpeed,
+    setMyClockSpeed,
+    myDateTimeRef,
+    hideVessels,
+    setHideVessels,
+    showBaseStations,
+    setShowBaseStations,
+    showAtoNs,
+    setShowAtoNs,
+  } = useAppContext()
   const [opened, setOpened] = useState<boolean>(false)
   const [localClock, setLocalClock] = useState<Date>(myDateTimeRef.current)
   const [localSpeed, setLocalSpeed] = useState<string>(myClockSpeed.toString())
@@ -92,6 +102,36 @@ export default function Navbar() {
               <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>
+
+          <hr className="my-3 border-2 border-gray-600 rounded-md" />
+
+          <h2 className="text-lg font-bold">Filtering</h2>
+          <div className="flex flex-row justify-between items-center gap-4">
+            <span className="font-medium whitespace-nowrap">Show base stations</span>
+            <label className="relative inline-flex items-center cursor-pointer">
+              <input
+                type="checkbox"
+                value=""
+                onChange={(e) => setShowBaseStations(e.target.checked)}
+                className="sr-only peer"
+                checked={showBaseStations}
+              />
+              <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 className="flex flex-row justify-between items-center gap-4">
+            <span className="font-medium whitespace-nowrap">Show AtoN (navigational aids)</span>
+            <label className="relative inline-flex items-center cursor-pointer">
+              <input
+                type="checkbox"
+                value=""
+                onChange={(e) => setShowAtoNs(e.target.checked)}
+                className="sr-only peer"
+                checked={showAtoNs}
+              />
+              <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/contexts/appcontext.tsx

@@ -9,6 +9,10 @@ interface IAppContext {
   setMyClockSpeed: React.Dispatch<React.SetStateAction<number>>
   hideVessels: boolean
   setHideVessels: React.Dispatch<React.SetStateAction<boolean>>
+  showBaseStations: boolean
+  setShowBaseStations: React.Dispatch<React.SetStateAction<boolean>>
+  showAtoNs: boolean
+  setShowAtoNs: React.Dispatch<React.SetStateAction<boolean>>
   clientHandler: IClientHandler
 }
 
@@ -25,6 +29,8 @@ export const useAppContext = () => {
 export const AppContextProvider = ({ children }: { children: React.ReactNode }) => {
   const [myClockSpeed, setMyClockSpeed] = useState<number>(100)
   const [hideVessels, setHideVessels] = useState<boolean>(true)
+  const [showBaseStations, setShowBaseStations] = useState<boolean>(false)
+  const [showAtoNs, setShowAtoNs] = useState<boolean>(false)
   const myDateTimeRef = useRef(new Date(1725874950 * 1000)) // Initialize ref with current time
 
   const grpcWeb = new GrpcWebImpl('http://localhost:8080', {})
@@ -44,7 +50,18 @@ export const AppContextProvider = ({ children }: { children: React.ReactNode })
 
   return (
     <AppContext.Provider
-      value={{ myClockSpeed, setMyClockSpeed, hideVessels, setHideVessels, clientHandler, myDateTimeRef }}
+      value={{
+        myClockSpeed,
+        setMyClockSpeed,
+        hideVessels,
+        setHideVessels,
+        showBaseStations,
+        setShowBaseStations,
+        showAtoNs,
+        setShowAtoNs,
+        clientHandler,
+        myDateTimeRef,
+      }}
     >
       {children}
     </AppContext.Provider>

src/implementations/StreamManager.ts

@@ -26,7 +26,6 @@ export default class StreamManager implements IStreamManager {
     const simpleVessels = await this.clientHandler.getSimpleVessles({
       timestamp: Math.round(this.myDateTimeRef.current!.getTime() / 1000),
     })
-
     this.setAllVessels(simpleVessels)
   }
 

src/pages/vesselMapPage.tsx

@@ -21,11 +21,13 @@ export default function VesselMapPage() {
   const [monitoredVessels, setMonitoredVessels] = useState<IMonitoredVessel[]>([])
   const [map, setMap] = useState<L.Map | null>(null)
   const { selectedVesselmmsi, selectedVesselPath, selectionArea, setSelectionArea } = useVesselGuiContext()
-  const { clientHandler, myDateTimeRef } = useAppContext()
+  const { clientHandler, myDateTimeRef, showAtoNs, showBaseStations } = useAppContext()
   const [timelineVal, setTimelineVal] = useState<number>(0)
 
   // Use a ref to store the StreamManager instance
-  const streamManagerRef = useRef(new StreamManager(clientHandler, setAllVessels, setMonitoredVessels, myDateTimeRef))
+  const streamManagerRef = useRef(
+    new StreamManager(clientHandler, setAllVessels, setMonitoredVessels, myDateTimeRef) //, showAtoNs, showBaseStations)
+  )
   const streamStarted = useRef(false)
 
   useEffect(() => {
@@ -57,6 +59,21 @@ export default function VesselMapPage() {
     setTimelineVal(index)
   }
 
+  function filterVessels<T extends ISimpleVessel | IMonitoredVessel>(vessels: T[]): T[] {
+    // Reference: https://en.wikipedia.org/wiki/Maritime_Mobile_Service_Identity
+
+    // Filter out base stations
+    if (!showBaseStations) {
+      vessels = vessels.filter((v) => v.mmsi.toString().length === 9)
+    }
+
+    // Filter out AtoNs (aids to navigation)
+    if (!showAtoNs) {
+      vessels = vessels.filter((v) => !v.mmsi.toString().startsWith('9'))
+    }
+    return vessels
+  }
+
   return (
     <div className="relative h-screen">
       <div className="absolute z-20 w-[350px] flex flex-col top-5 left-5 gap-3">
@@ -73,7 +90,7 @@ export default function VesselMapPage() {
 
       <div id="monitoring-menu-container" className="absolute min-w-[25vw] max-h-[75vh] top-5 right-5 z-10">
         {monitoredVessels.length !== 0 && (
-          <MonitoringMenu monitoredVessels={monitoredVessels} zoomToVessel={zoomToVessel} />
+          <MonitoringMenu monitoredVessels={filterVessels(monitoredVessels)} zoomToVessel={zoomToVessel} />
         )}
       </div>
 
@@ -84,7 +101,10 @@ export default function VesselMapPage() {
             <>
               <PathOverlay path={selectedVesselPath} idx={timelineVal} />
               <SelectionAreaOverlay selectionArea={selectionArea} />
-              <VesselMarkerOverlay simpleVessels={allVessels} monitoredVessels={monitoredVessels} />
+              <VesselMarkerOverlay
+                simpleVessels={filterVessels(allVessels)}
+                monitoredVessels={filterVessels(monitoredVessels)}
+              />
             </>
           }
         />