[Line Diagram][Map]: Show a tooltip with vehicle status when clicking on a vehicle marker on the map (#3569)

* Added popups to vehicle markers.  Reused vehicle_label from upcoming departures to obtain the info.

* Cleaned up code thanks to Josh's refactoring

* Added CSS class support to vehicle_label

* Add CSS class override support for crowding message as well

* Adjusted pattern to match more specifically

* Simplified call to vehicle_name and to_vehicle_marker (we didn't need the whole assigns).  Updated the map CSS so that only the default markers have a default fill, not every single SVG in the map.  This keeps the trip planner look on that page, but lets us use our other icons on the map without them being blue by default.

* Added white_bg? param to vehilce_label and the relevant children, so that <.crowding_icon> can have a white bg where necessary.

* Fix warning

Author: lvachon1

assets/css/map.css

@@ -3,13 +3,11 @@
   height: 100%;
 }
 
-.mbta-map svg {
-  fill: var(--colors-cobalt-30);
-}
-
 .mbta-map-pin {
   width: 4rem;
   height: 4rem;
+  fill: var(--colors-cobalt-30);
+
 }
 
 .mbta-map-point {

lib/dotcom/schedule_finder/trip_details.ex

@@ -253,6 +253,27 @@ defmodule Dotcom.ScheduleFinder.TripDetails do
     }
   end
 
+  defp vehicle_info(
+         %Vehicle{
+           crowding: crowding,
+           status: status,
+           stop_id: stop_id,
+           stop_sequence: stop_sequence,
+           trip_id: vehicle_trip_id
+         },
+         []
+       ) do
+    stop = @stops_repo.get(stop_id)
+
+    %VehicleInfo{
+      crowding: crowding,
+      status: status,
+      stop_id: stop.parent_id || stop.id,
+      stop_name: stop.name,
+      stop_sequence: stop_sequence
+    }
+  end
+
   defp vehicle_info(_, _),
     do: %VehicleInfo{status: :finishing_another_trip}
 

lib/dotcom_web/live/line_diagram_live.ex

@@ -129,7 +129,7 @@ defmodule DotcomWeb.LineDiagramLive do
      |> assign_new(:vehicle_icons, fn ->
        route_id
        |> @vehicles_repo.route(direction_id: direction_id)
-       |> Map.new(&{&1.id, to_vehicle_marker(&1)})
+       |> Map.new(&{&1.id, to_vehicle_marker(&1, route)})
      end)
      |> assign(:route_id, route_id)
      |> assign(:route, route)
@@ -190,22 +190,40 @@ defmodule DotcomWeb.LineDiagramLive do
 
   def assign_vehicle_icons(socket, "reset", vehicles) do
     vehicles
-    |> Map.new(&{&1.id, to_vehicle_marker(&1)})
+    |> Map.new(&{&1.id, to_vehicle_marker(&1, socket.assigns.route)})
     |> then(&assign(socket, :vehicle_icons, &1))
   end
 
   # add or update
   def assign_vehicle_icons(socket, _, vehicles) do
-    updated_vehicles = Map.new(vehicles, &{&1.id, to_vehicle_marker(&1)})
+    updated_vehicles =
+      Map.new(vehicles, &{&1.id, to_vehicle_marker(&1, socket.assigns.route)})
+
     update(socket, :vehicle_icons, &Map.merge(&1, updated_vehicles))
   end
 
-  defp to_vehicle_marker(vehicle) do
+  defp to_vehicle_marker(vehicle, route) do
+    %{stops: _, vehicle_info: vehicle_info} =
+      Dotcom.ScheduleFinder.TripDetails.trip_details(%{
+        predicted_schedules: [],
+        trip_vehicle: vehicle
+      })
+
+    popup =
+      DotcomWeb.Live.UpcomingDeparturesLive.vehicle_label(%{
+        route: route,
+        vehicle_info: vehicle_info,
+        classes: "text-white mr-2",
+        crowding_classes: "text-white",
+        white_bg?: true
+      })
+
     %{
       coordinates: [vehicle.longitude, vehicle.latitude],
       type: "icon-svg",
       name: "icon-vehicle-bordered-expanded",
-      class: "size-6",
+      class: "size-6 cursor-pointer",
+      popup: popup,
       rotation: vehicle.bearing || "0"
     }
   end

lib/dotcom_web/live/upcoming_departures_live.ex

@@ -499,10 +499,13 @@ defmodule DotcomWeb.Live.UpcomingDeparturesLive do
 
   attr :vehicle_info, Dotcom.ScheduleFinder.TripDetails.VehicleInfo, required: true
   attr :route, Routes.Route, required: true
+  attr :classes, :string, default: ""
+  attr :crowding_classes, :string, default: ""
+  attr :white_bg?, :boolean, default: false
 
-  defp vehicle_label(assigns) do
+  def vehicle_label(assigns) do
     ~H"""
-    <div class="font-normal text-charcoal-30 text-sm">
+    <div class={"font-normal text-charcoal-30 #{@classes} text-sm"}>
       <span :if={@vehicle_info.status != :in_transit} class="sr-only">
         {Routes.Route.vehicle_name(@route)}
       </span>
@@ -514,7 +517,9 @@ defmodule DotcomWeb.Live.UpcomingDeparturesLive do
     />
     <.vehicle_crowding
       crowding={crowding(@vehicle_info)}
+      classes={@crowding_classes}
       show_label?
+      white_bg?={@white_bg?}
     />
     """
   end
@@ -531,26 +536,42 @@ defmodule DotcomWeb.Live.UpcomingDeparturesLive do
 
   attr :crowding, :atom
   attr :show_label?, :boolean, default: false
+  attr :classes, :string, default: ""
+  attr :white_bg?, :boolean, default: false
 
   defp vehicle_crowding(%{show_label?: true} = assigns) do
     ~H"""
     <div :if={@crowding} class="flex gap-xs text-sm flex-nowrap items-center">
-      <.crowding_icon class="size-4" crowding={@crowding} aria-hidden />
-      <div class="font-normal text-charcoal-30">{crowding_message(@crowding)}</div>
+      <.crowding_icon class="size-4" crowding={@crowding} aria-hidden white_bg?={@white_bg?} />
+      <div class={"font-normal text-charcoal-30 #{@classes}"}>{crowding_message(@crowding)}</div>
     </div>
     """
   end
 
   defp vehicle_crowding(assigns) do
     ~H"""
-    <.crowding_icon :if={@crowding} crowding={@crowding} aria-label={crowding_message(@crowding)} />
+    <.crowding_icon
+      :if={@crowding}
+      crowding={@crowding}
+      aria-label={crowding_message(@crowding)}
+      white_bg?={@white_bg?}
+    />
     """
   end
 
   attr :class, :string, default: ""
   attr :crowding, :atom
+  attr :white_bg?, :boolean, default: false
   attr :rest, :global
 
+  defp crowding_icon(%{white_bg?: true} = assigns) do
+    ~H"""
+    <div class="bg-white p-1 pb-0 rounded-sm">
+      <.crowding_icon class={@class} crowding={@crowding} {@rest} />
+    </div>
+    """
+  end
+
   defp crowding_icon(assigns) do
     ~H"""
     <.icon