Add grouped upper-air and ducting layer buttons to weather map

lib/microwaveprop_web/live/weather_map_live.ex

@@ -12,12 +12,24 @@ defmodule MicrowavepropWeb.WeatherMapLive do
   }
 
   @layers [
-    %{id: "refractivity_gradient", label: "Refractivity Gradient", unit: "N/km"},
+    # Surface
-    %{id: "bl_height", label: "Boundary Layer", unit: "m"},
+    %{id: "temperature", label: "Temperature", unit: "°C", group: "Surface"},
-    %{id: "dewpoint_depression", label: "Dewpoint Depression", unit: "°C"},
+    %{id: "dewpoint_depression", label: "Td Depression", unit: "°C", group: "Surface"},
-    %{id: "pwat", label: "Precipitable Water", unit: "mm"},
+    %{id: "surface_rh", label: "Humidity", unit: "%", group: "Surface"},
-    %{id: "temperature", label: "Temperature", unit: "°C"},
+    %{id: "pwat", label: "PWAT", unit: "mm", group: "Surface"},
-    %{id: "ducting", label: "Ducting Detected", unit: ""}
+    %{id: "surface_refractivity", label: "Refractivity", unit: "N", group: "Surface"},
+    %{id: "refractivity_gradient", label: "N-Gradient", unit: "N/km", group: "Surface"},
+    %{id: "bl_height", label: "BL Height", unit: "m", group: "Surface"},
+    # Upper Air
+    %{id: "temp_850mb", label: "T @ 850mb", unit: "°C", group: "Upper Air"},
+    %{id: "dewpoint_850mb", label: "Td @ 850mb", unit: "°C", group: "Upper Air"},
+    %{id: "lapse_rate", label: "Lapse Rate", unit: "°C/km", group: "Upper Air"},
+    %{id: "inversion_strength", label: "Inversion", unit: "°C", group: "Upper Air"},
+    %{id: "inversion_base_m", label: "Inv. Base", unit: "m", group: "Upper Air"},
+    # Ducting
+    %{id: "ducting", label: "Ducting", unit: "", group: "Ducting"},
+    %{id: "duct_base_m", label: "Duct Base", unit: "m", group: "Ducting"},
+    %{id: "duct_strength", label: "Duct Strength", unit: "M", group: "Ducting"}
   ]
 
   @impl true
@@ -79,6 +91,14 @@ defmodule MicrowavepropWeb.WeatherMapLive do
     {:noreply, socket}
   end
 
+  @group_order ["Surface", "Upper Air", "Ducting"]
+
+  defp group_layers(layers) do
+    layers
+    |> Enum.group_by(& &1.group)
+    |> Enum.sort_by(fn {group, _} -> Enum.find_index(@group_order, &(&1 == group)) || 99 end)
+  end
+
   @impl true
   def render(assigns) do
     ~H"""
@@ -121,19 +141,26 @@ defmodule MicrowavepropWeb.WeatherMapLive do
             </div>
           </div>
 
-          <%!-- Layer pill buttons --%>
+          <%!-- Layer pill buttons grouped --%>
-          <div class="flex flex-wrap gap-1">
+          <div class="flex flex-col gap-1.5">
-            <button
+            <div :for={{group, layers} <- group_layers(@layers)}>
-              :for={layer <- @layers}
+              <div class="text-[10px] font-semibold opacity-50 uppercase tracking-wider px-1 mb-0.5">
-              phx-click="select_layer"
+                {group}
-              phx-value-layer={layer.id}
+              </div>
-              class={[
+              <div class="flex flex-wrap gap-1">
-                "btn btn-xs rounded-full",
+                <button
-                if(@selected_layer == layer.id, do: "btn-primary", else: "btn-ghost")
+                  :for={layer <- layers}
-              ]}
+                  phx-click="select_layer"
-            >
+                  phx-value-layer={layer.id}
-              {layer.label}
+                  class={[
-            </button>
+                    "btn btn-xs rounded-full",
+                    if(@selected_layer == layer.id, do: "btn-primary", else: "btn-ghost")
+                  ]}
+                >
+                  {layer.label}
+                </button>
+              </div>
+            </div>
           </div>
 
           <%!-- Links --%>