7. Terra UI: a slider, a map, and ten years of earthquakes

import terra_ui_components
from terra_ui_components import TerraBaseWidget, TerraDateRangeSlider

_TERRA_VERSION = "0.0.178"
_EAGER_LOADER = f"""
if (!document.head.querySelector('link[data-terra-css]')) {{
    const css = document.createElement('link');
    css.rel = 'stylesheet';
    css.href = 'https://cdn.jsdelivr.net/npm/@nasa-terra/components@{_TERRA_VERSION}/cdn/themes/horizon.css';
    css.dataset.terraCss = '1';
    document.head.appendChild(css);
}}
const __terraBundle = (window.__terraBundle = window.__terraBundle
    || import('https://cdn.jsdelivr.net/npm/@nasa-terra/components@{_TERRA_VERSION}/cdn/terra-ui-components.js'));
await __terraBundle;
"""

_AUTOLOADER = TerraBaseWidget.get_autoloader()
_patched = []
for _name in dir(terra_ui_components):
    _cls = getattr(terra_ui_components, _name)
    if isinstance(_cls, type) and issubclass(_cls, TerraBaseWidget) and _cls is not TerraBaseWidget:
        if isinstance(_cls._esm, str) and _cls._esm.startswith(_AUTOLOADER):
            _cls._esm = _EAGER_LOADER + _cls._esm[len(_AUTOLOADER):]
            _patched.append(_name)
print(f"Patched {len(_patched)} Terra UI widget classes for eager loading.")

# TerraDateRangeSlider's wrapper has a placeholder `terra-date-range-change`
# listener whose body is entirely commented out, so user drags don't sync
# back to Python and Python observers never fire. Replace it with a real
# implementation that pushes startDate/endDate from the component back to
# the model. Tracked for upstream PR in docs/upstream-terra-ui-data-flow.md.
_dr_anchor = (
    "component.addEventListener('terra-date-range-change', (e) => {\n"
    "            // Placeholder for event handling, you'll need to provide your own functionality here\n"
    "            // model.set('terra-date-range-change_triggered', true)\n"
    "            // model.save_changes()\n"
    "        })"
)
_dr_patched = (
    "component.addEventListener('terra-date-range-change', (e) => {\n"
    "            const start = e?.detail?.startDate ?? component.startDate;\n"
    "            const end = e?.detail?.endDate ?? component.endDate;\n"
    "            if (start !== undefined && start !== null) model.set('startDate', start);\n"
    "            if (end !== undefined && end !== null) model.set('endDate', end);\n"
    "            model.save_changes();\n"
    "        })"
)
assert TerraDateRangeSlider._esm.count(_dr_anchor) == 1, "TerraDateRangeSlider placeholder anchor not found"
TerraDateRangeSlider._esm = TerraDateRangeSlider._esm.replace(_dr_anchor, _dr_patched, 1)
print("Patched TerraDateRangeSlider to sync startDate/endDate back to Python on user drag.")

from terra_ui_components import TerraInput

TerraInput(attr="placeholder='Type here…' label='Smoke test'")

import urllib.request
import urllib.parse
import json
import datetime as dt
import pandas as pd

end = dt.datetime.now(dt.UTC).date()
start = end - dt.timedelta(days=365 * 10)
params = {
    "format": "geojson",
    "starttime": start.isoformat(),
    "endtime": end.isoformat(),
    "minmagnitude": 5.0,
    "orderby": "time",
}
USGS_URL = "https://earthquake.usgs.gov/fdsnws/event/1/query?" + urllib.parse.urlencode(params)
with urllib.request.urlopen(USGS_URL) as r:
    raw = json.load(r)

rows = []
for f in raw["features"]:
    p = f["properties"]
    if p.get("mag") is None:
        continue
    rows.append({
        "time": dt.datetime.fromtimestamp(p["time"] / 1000, dt.UTC).replace(tzinfo=None),
        "mag": p["mag"],
        "magType": p.get("magType") or "",
        "depth_km": f["geometry"]["coordinates"][2],
        "lon": f["geometry"]["coordinates"][0],
        "lat": f["geometry"]["coordinates"][1],
        "place": p.get("place") or "",
        "felt": p.get("felt") or 0,
        "tsunami": p.get("tsunami") or 0,
        "sig": p.get("sig") or 0,
        "url": p.get("url") or "",
    })

eq_df = pd.DataFrame(rows).sort_values("time").reset_index(drop=True)
print(f"{len(eq_df)} events from {eq_df.time.min():%Y-%m-%d} to {eq_df.time.max():%Y-%m-%d}, mag {eq_df.mag.min()}–{eq_df.mag.max()}")
eq_df.head()

import sys
import pathlib
sys.path.insert(0, str(pathlib.Path().absolute().parent))

from terra_ui_components import TerraDateRangeSlider
import lonboard
from lonboard import ScatterplotLayer
from lonboard.layer_extension import DataFilterExtension
import geopandas as gpd
import numpy as np
from matplotlib import colormaps
from shapely.geometry import Point
from IPython.display import display

from widgets.date_range_filter_binder import DateRangeFilterBinder
from widgets.eq_dashboard import EqDashboard

gdf = gpd.GeoDataFrame(
    eq_df,
    geometry=[Point(xy) for xy in zip(eq_df.lon, eq_df.lat)],
    crs="EPSG:4326",
)

# Per-point timestamp in seconds-since-epoch. Use datetime64[s] cast so we
# get seconds regardless of the column's stored resolution (modern pandas
# uses datetime64[us] by default, so a naive .astype('int64') // 10**9 is
# off by 1000×). Seconds (~1.78e9) are well within float32's exact-integer
# range — DataFilterExtension compares as float32 in the shader.
filter_values = (
    eq_df.time.astype("datetime64[s]").astype("int64").to_numpy().astype(np.float64)
)
min_ts = float(filter_values.min())
max_ts = float(filter_values.max()) + 86400  # +1 day so the "all" view includes the last day

# Depth bands — four discrete buckets, ranges chosen to match common
# seismology vocabulary (shallow / intermediate / deep crustal / very deep
# slab). Edges are inclusive on the lower bound.
depth_band_edges = np.array([0.0, 50.0, 100.0, 300.0, 800.0])
depth_band_labels = ["Shallow", "Intermediate", "Deep", "Very deep"]

# np.digitize with the interior edges gives a 0-indexed band per row.
depth_clipped = np.clip(eq_df.depth_km.to_numpy(), 0.0, 800.0 - 1e-6)
depth_band = np.digitize(depth_clipped, depth_band_edges[1:-1]).astype(np.uint8)

# One colour per band, sampled from inferno_r at each band's geometric-mean
# depth on a log scale (matches the previous continuous ramp's intent: hot
# at the surface, dark at depth). band_colors is (N_bands, 4) uint8.
_centers_km = np.sqrt(
    np.maximum(depth_band_edges[:-1], 1.0) * depth_band_edges[1:]
)
_centers_norm = np.log10(np.clip(_centers_km, 1.0, 700.0)) / np.log10(700.0)
band_colors = (colormaps["inferno_r"](_centers_norm) * 255).astype(np.uint8)
band_colors[:, 3] = 200

# Per-row fill colour by lookup — one of N_bands distinct values.
fill_rgba = band_colors[depth_band]

layer = ScatterplotLayer.from_geopandas(
    gdf,
    get_radius=eq_df.mag.astype(float).to_numpy() ** 2 * 1500.0,
    radius_units="meters",
    radius_min_pixels=2,
    radius_max_pixels=20,
    get_fill_color=fill_rgba,
    extensions=[DataFilterExtension(filter_size=1, category_size=1)],
    get_filter_value=filter_values,
    filter_range=(min_ts, max_ts),
    get_filter_category=depth_band,
    filter_categories=[0, 1, 2, 3],
)
m = lonboard.Map(layer, show_tooltip=True)

slider = TerraDateRangeSlider(
    minDate=eq_df.time.min().strftime("%Y-%m-%d"),
    maxDate=eq_df.time.max().strftime("%Y-%m-%d"),
    startDate=eq_df.time.min().strftime("%Y-%m-%d"),
    endDate=eq_df.time.max().strftime("%Y-%m-%d"),
)

binder = DateRangeFilterBinder(slider=slider, layer=layer)

panel = EqDashboard(
    layer=layer,
    mag=eq_df.mag.astype(np.float32).to_numpy().tobytes(),
    depth_km=eq_df.depth_km.astype(np.float32).to_numpy().tobytes(),
    depth_band=depth_band.tobytes(),
    tsunami=eq_df.tsunami.astype(np.uint8).to_numpy().tobytes(),
    filter_value=filter_values.tobytes(),
    n_total=int(len(eq_df)),
    bands=[
        {
            "index": int(i),
            "label": depth_band_labels[i],
            "color": band_colors[i].tolist(),
            "min_km": float(depth_band_edges[i]),
            "max_km": float(depth_band_edges[i + 1]),
        }
        for i in range(len(depth_band_labels))
    ],
)

# Emit each widget as its own cell output so the static-export plugin
# treats them as independent anywidget nodes (a VBox would only export the
# first descendant).
display(slider)
display(m)
display(panel)
display(binder)