Serve /contacts/map payload via HTTP endpoint, parallel hydrate
- Add ContactMapController serving /api/contacts/map with pre-gzipped JSON from Microwaveprop.Cache. Browsers handle Content-Encoding: gzip natively; payload drops from 5.7 MB raw to 1.5 MB on the wire (73%). Cache TTL 10 min, invalidated on contact insert alongside the other contact-map cache keys. - Move contact map payload out of the LiveView's initial HTML entirely. Shell renders with the filter chrome (count + band list); the hook fetches contacts from the HTTP endpoint in parallel with map init. This also avoids Phoenix.Socket's 64 KB frame limit (push_event would have required chunked transfer or a global frame size bump). - Parallelize ContactLive.Show hydrate: five independent DB loads (weather, solar, hrrr_path, terrain, iemre) now run concurrently via Task.async + Task.await_many. Total latency drops from sum(each) to max(each), cutting contact show hydrate time roughly 5x.
This commit is contained in:
parent
01b2a48a93
commit
578b4ede86
6 changed files with 117 additions and 17 deletions
|
|
@ -51,7 +51,11 @@ function bandColor(band: number): string {
|
|||
|
||||
export const ContactsMap = {
|
||||
mounted(this: ContactsMapHook) {
|
||||
this.allContacts = JSON.parse(this.el.dataset.contacts!)
|
||||
// Contacts payload (~5 MB) comes from a standalone HTTP endpoint that
|
||||
// serves pre-gzipped JSON. This keeps it out of the initial HTML and
|
||||
// lets the browser cache it independently of the LiveView.
|
||||
const fetchUrl = this.el.dataset.fetchUrl || "/api/contacts/map"
|
||||
this.allContacts = []
|
||||
this.callsignFilter = ""
|
||||
this.enabledBands = new Set()
|
||||
this.lineLayer = L.layerGroup()
|
||||
|
|
@ -66,6 +70,23 @@ export const ContactsMap = {
|
|||
|
||||
// Defer map init until container has dimensions
|
||||
requestAnimationFrame(() => this.initMap())
|
||||
|
||||
// Fetch contacts in parallel with map init. Once both are done,
|
||||
// `rebuildMap()` draws everything. Starts earlier than a LiveView
|
||||
// push_event because the HTTP request doesn't wait for the socket
|
||||
// handshake.
|
||||
// No explicit Accept header — the :browser pipeline's `plug :accepts`
|
||||
// only whitelists "html", so setting accept: application/json triggers
|
||||
// a 406. The default `*/*` matches fine and we still parse the body
|
||||
// as JSON ourselves.
|
||||
fetch(fetchUrl)
|
||||
.then(resp => resp.json())
|
||||
.then(contacts => {
|
||||
this.allContacts = contacts
|
||||
for (const c of contacts) this.enabledBands.add(c[4])
|
||||
if (this.map) this.rebuildMap()
|
||||
})
|
||||
.catch(err => console.error("Failed to load contacts:", err))
|
||||
},
|
||||
|
||||
initMap(this: ContactsMapHook) {
|
||||
|
|
@ -85,10 +106,11 @@ export const ContactsMap = {
|
|||
this.lineLayer.addTo(this.map)
|
||||
this.dotLayer.addTo(this.map)
|
||||
|
||||
// Enable all bands initially
|
||||
for (const c of this.allContacts) this.enabledBands.add(c[4])
|
||||
|
||||
this.rebuildMap()
|
||||
// If contacts arrived before the map was ready, draw them now.
|
||||
if (this.allContacts.length > 0) {
|
||||
for (const c of this.allContacts) this.enabledBands.add(c[4])
|
||||
this.rebuildMap()
|
||||
}
|
||||
},
|
||||
|
||||
rebuildMap(this: ContactsMapHook) {
|
||||
|
|
|
|||
|
|
@ -538,6 +538,7 @@ defmodule Microwaveprop.Radio do
|
|||
with {:ok, _} <- result do
|
||||
Cache.invalidate(@count_cache_key)
|
||||
Cache.invalidate(@map_payload_cache_key)
|
||||
Cache.invalidate({MicrowavepropWeb.ContactMapController, :gzipped_payload})
|
||||
end
|
||||
|
||||
result
|
||||
|
|
|
|||
53
lib/microwaveprop_web/controllers/contact_map_controller.ex
Normal file
53
lib/microwaveprop_web/controllers/contact_map_controller.ex
Normal file
|
|
@ -0,0 +1,53 @@
|
|||
defmodule MicrowavepropWeb.ContactMapController do
|
||||
@moduledoc """
|
||||
Serves the contact map JSON payload as a standalone HTTP endpoint. Keeps
|
||||
the ~5 MB blob out of the `/contacts/map` LiveView's initial HTML response
|
||||
and lets the browser's native `Content-Encoding: gzip` handling do the
|
||||
compression. The payload itself is served from `Microwaveprop.Cache` via
|
||||
`Radio.contact_map_payload/0`.
|
||||
"""
|
||||
use MicrowavepropWeb, :controller
|
||||
|
||||
alias Microwaveprop.Cache
|
||||
alias Microwaveprop.Radio
|
||||
|
||||
@cache_key {__MODULE__, :gzipped_payload}
|
||||
@cache_ttl_ms 10 * 60 * 1_000
|
||||
|
||||
@spec show(Plug.Conn.t(), map()) :: Plug.Conn.t()
|
||||
def show(conn, _params) do
|
||||
{body, encoding} = gzipped_or_plain_body(conn)
|
||||
|
||||
conn
|
||||
|> put_resp_content_type("application/json")
|
||||
|> maybe_put_encoding(encoding)
|
||||
|> put_resp_header("cache-control", "public, max-age=60")
|
||||
|> send_resp(200, body)
|
||||
end
|
||||
|
||||
defp gzipped_or_plain_body(conn) do
|
||||
if accepts_gzip?(conn) do
|
||||
{gzipped_payload(), :gzip}
|
||||
else
|
||||
%{json: iodata} = Radio.contact_map_payload()
|
||||
{IO.iodata_to_binary(iodata), :identity}
|
||||
end
|
||||
end
|
||||
|
||||
defp gzipped_payload do
|
||||
Cache.fetch_or_store(@cache_key, @cache_ttl_ms, fn ->
|
||||
%{json: iodata} = Radio.contact_map_payload()
|
||||
:zlib.gzip(IO.iodata_to_binary(iodata))
|
||||
end)
|
||||
end
|
||||
|
||||
defp accepts_gzip?(conn) do
|
||||
case get_req_header(conn, "accept-encoding") do
|
||||
[value | _] -> String.contains?(value, "gzip")
|
||||
_ -> false
|
||||
end
|
||||
end
|
||||
|
||||
defp maybe_put_encoding(conn, :gzip), do: put_resp_header(conn, "content-encoding", "gzip")
|
||||
defp maybe_put_encoding(conn, :identity), do: conn
|
||||
end
|
||||
|
|
@ -229,18 +229,22 @@ defmodule MicrowavepropWeb.ContactLive.Show do
|
|||
def handle_info({:hydrate, can_enqueue}, socket) do
|
||||
contact = socket.assigns.contact
|
||||
|
||||
weather = load_weather(contact)
|
||||
solar = if can_enqueue, do: maybe_enqueue_solar(contact), else: load_solar(contact)
|
||||
hrrr_path = Weather.hrrr_profiles_for_path(contact)
|
||||
# Five independent DB loads run in parallel — total latency drops from
|
||||
# sum(each) to max(each). The heaviest is `hrrr_profiles_for_path`
|
||||
# against the 42M-row partitioned table.
|
||||
%{
|
||||
weather: weather,
|
||||
solar: solar,
|
||||
hrrr_path: hrrr_path,
|
||||
terrain: terrain,
|
||||
iemre: iemre
|
||||
} = parallel_hydrate(contact, can_enqueue)
|
||||
|
||||
hrrr = List.first(hrrr_path)
|
||||
|
||||
{hrrr, contact} =
|
||||
if can_enqueue, do: maybe_enqueue_hrrr(hrrr, contact), else: {hrrr, contact}
|
||||
|
||||
terrain = Terrain.get_terrain_profile(contact.id)
|
||||
{hrrr, contact} = if can_enqueue, do: maybe_enqueue_hrrr(hrrr, contact), else: {hrrr, contact}
|
||||
contact = if can_enqueue, do: maybe_enqueue_terrain(terrain, contact), else: contact
|
||||
contact = if can_enqueue, do: maybe_enqueue_weather(weather, contact), else: contact
|
||||
iemre = load_iemre(contact)
|
||||
|
||||
elevation_profile = compute_elevation_profile(contact, hrrr_path, weather.soundings)
|
||||
|
||||
propagation_analysis =
|
||||
|
|
@ -397,6 +401,21 @@ defmodule MicrowavepropWeb.ContactLive.Show do
|
|||
defp sounding_sort_key("lifted_index"), do: &(&1.lifted_index || 0)
|
||||
defp sounding_sort_key(_), do: fn s -> s.station.name || s.station.station_code end
|
||||
|
||||
defp parallel_hydrate(contact, can_enqueue) do
|
||||
tasks = %{
|
||||
weather: Task.async(fn -> load_weather(contact) end),
|
||||
solar:
|
||||
Task.async(fn ->
|
||||
if can_enqueue, do: maybe_enqueue_solar(contact), else: load_solar(contact)
|
||||
end),
|
||||
hrrr_path: Task.async(fn -> Weather.hrrr_profiles_for_path(contact) end),
|
||||
terrain: Task.async(fn -> Terrain.get_terrain_profile(contact.id) end),
|
||||
iemre: Task.async(fn -> load_iemre(contact) end)
|
||||
}
|
||||
|
||||
Map.new(tasks, fn {key, task} -> {key, Task.await(task, 30_000)} end)
|
||||
end
|
||||
|
||||
defp load_iemre(contact) do
|
||||
case Weather.iemre_for_contact(contact) do
|
||||
%{hourly: hourly} = obs when is_list(hourly) and hourly != [] ->
|
||||
|
|
|
|||
|
|
@ -21,12 +21,16 @@ defmodule MicrowavepropWeb.ContactMapLive do
|
|||
|
||||
@impl true
|
||||
def mount(_params, _session, socket) do
|
||||
%{json: json, count: count, bands: bands} = Radio.contact_map_payload()
|
||||
# Shell renders immediately with filter chrome (count + bands list). The
|
||||
# JS hook fetches the ~5 MB contacts payload from `/api/contacts/map`
|
||||
# after mount, which streams it as pre-gzipped bytes via the browser's
|
||||
# native `Content-Encoding: gzip` handling. This gets the heavy payload
|
||||
# off the initial HTML entirely.
|
||||
%{count: count, bands: bands} = Radio.contact_map_payload()
|
||||
|
||||
{:ok,
|
||||
assign(socket,
|
||||
page_title: "Contact Map",
|
||||
contacts_json: IO.iodata_to_binary(json),
|
||||
contact_count: count,
|
||||
all_bands: bands,
|
||||
enabled_bands: MapSet.new(bands),
|
||||
|
|
@ -91,8 +95,8 @@ defmodule MicrowavepropWeb.ContactMapLive do
|
|||
id="contacts-map"
|
||||
phx-hook="ContactsMap"
|
||||
phx-update="ignore"
|
||||
data-fetch-url="/api/contacts/map"
|
||||
class="absolute inset-0 z-0"
|
||||
data-contacts={@contacts_json}
|
||||
>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -66,6 +66,7 @@ defmodule MicrowavepropWeb.Router do
|
|||
pipe_through :browser
|
||||
|
||||
get "/", PageController, :home
|
||||
get "/api/contacts/map", ContactMapController, :show
|
||||
|
||||
live_session :public, on_mount: [{MicrowavepropWeb.UserAuth, :default}] do
|
||||
live "/submit", SubmitLive
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue