prototype: Within reach tab (78-93 band dive-in)

app.py

@@ -62,6 +62,7 @@ import clap_embed
 import howitworks
 import livematch
 import lookup as lookupmod
+import reachview
 import render
 import savedview
 import store
@@ -1262,6 +1263,75 @@ with gr.Blocks(title="marathonmvp — live matcher") as demo:
                                   outputs=[saved_out, saved_nonce],
                                   api_visibility="private", **LANE)
 
+        # PROTOTYPE. The dive-in layer for the 78–93 band of one saved
+        # analysis: everything it draws lives in `reachview.py`, and the tab
+        # is two pickers and two blocks of HTML. Kept whole in one place so
+        # that dropping the idea is dropping this block and one import.
+        with gr.Tab("Within reach", id="reach"):
+
+            def reach_open(passphrase, aid):
+                """A saved analysis's band. At most ten Deezer lookups."""
+                blank = gr.update(choices=[], value=None, visible=False)
+                if not _ok(passphrase):
+                    return (_notice(NEED_PASS if PASSPHRASE else NO_SECRET),
+                            blank, "")
+                if not aid:
+                    return "", blank, ""
+                res = store.result(aid)
+                if not res:
+                    return (_notice("That analysis could not be read back."),
+                            blank, "")
+                label = (store.meta(aid) or {}).get("label") or aid
+                picks = reachview.market_choices(res)
+                return (reachview.render_band(res, label),
+                        gr.update(choices=picks, value=None,
+                                  visible=bool(picks)), "")
+
+            def reach_market(passphrase, aid, iso):
+                """One market of that band, with its own players. Three
+                lookups, paid only when a reader asks for them."""
+                if not _ok(passphrase) or not aid or not iso:
+                    return ""
+                res = store.result(aid)
+                if not res:
+                    return _notice("That analysis could not be read back.")
+                r = (res.get("regions") or {}).get(iso) or {}
+                ids, _ = reachview.preview_ids(
+                    [(iso, m.get("deezer_id"))
+                     for m in (r.get("top") or [])[:reachview.
+                                                   MARKET_PREVIEW_CAP]],
+                    reachview.MARKET_PREVIEW_CAP)
+                previews = render.deezer_previews(ids) if ids else {}
+                return reachview.market_card(res, iso, previews)
+
+            gr.HTML(reachview.opening())
+
+            @gr.render(inputs=[pw], show_progress="hidden")
+            def reach_body(passphrase):
+                if not _ok(passphrase):
+                    gr.HTML(_notice(NEED_PASS if PASSPHRASE else NO_SECRET))
+                    return
+                try:
+                    rows = _rows()
+                except store.StoreUnavailable as exc:
+                    print(f"[store] index unreadable: {exc}", flush=True)
+                    gr.HTML(savedview.unreachable())
+                    return
+                reach_pick = gr.Dropdown(
+                    choices=reachview.saved_choices(rows), value=None,
+                    label="Which track", interactive=True)
+                reach_out = gr.HTML(elem_id="reachout")
+                reach_one_pick = gr.Dropdown(
+                    choices=[], value=None, visible=False, interactive=True,
+                    label="Open one of these markets in full")
+                reach_one = gr.HTML(elem_id="reachone")
+                reach_pick.change(
+                    reach_open, inputs=[pw, reach_pick],
+                    outputs=[reach_out, reach_one_pick, reach_one], **PRIV)
+                reach_one_pick.change(
+                    reach_market, inputs=[pw, reach_pick, reach_one_pick],
+                    outputs=[reach_one], **PRIV)
+
         with gr.Tab("How it works", id="how"):
             gr.HTML(howitworks.render(CORPUS))
 

reachview.py

@@ -0,0 +1,544 @@
+"""Within reach — the way into the 78–93 band of one saved analysis.
+
+**Prototype.** Kalam asked for a dive-in layer and said he may keep it or
+drop it, so it is a module of its own with a tab of its own: nothing in
+`render.py`, `savedview.py`, `worldmap.py` or `store.py` is touched by it,
+and deleting this file plus its tab removes it completely.
+
+What it is for. A saved report shows the eight closest markets and paints
+the rest of the world orange on the map with no way in. Orange is the
+derive band — 78 to 93 — the markets where a different cut, edit or version
+is what would close the gap. On a real reading that is dozens of markets,
+and the report gives the reader no way to see any of them. This is that way
+in.
+
+Three rules it inherits from every other surface, and one of its own:
+
+* the cut-offs are quoted wherever a number sits near one, because 89% means
+  nothing without the 93 line beside it;
+* every percentage carries the denominator it was measured over, so
+  "closest record" is read against how much of that chart could be measured;
+* a market the track already charts in is named as our own release and never
+  given a percentage, and a flat reading is said to be flat and stopped
+  there;
+* and the band itself is not a verdict. It is defined as *not close enough
+  to act on from numbers alone* — so every line here is a candidate for
+  somebody's ears, not a finding.
+
+Deezer. The 30-second players are the expensive part: one lookup per
+distinct record. The opening view asks for at most `PREVIEW_CAP` of them and
+says on screen how many it got; one market opened by itself asks for at most
+`MARKET_PREVIEW_CAP`. `render.deezer_previews` does the work — its keeping,
+its throttling and its record of what came back empty are shared with the
+rest of the app, so this view costs the quota nothing the report would not
+have cost anyway.
+"""
+
+from __future__ import annotations
+
+import livematch
+import render
+import worldmap
+
+ESC = render.ESC
+
+# Inside the band, the split between "a near miss" and "a longer bridge".
+# It is not a cut-off the app decides anything on — both halves are the same
+# derive band — it is where the list stops being worth a player each.
+NEAR_LINE = 0.88
+# How many near misses get a card. Ten is the shortlist a person can listen
+# through in one sitting; the rest are one line each, and any of them opens
+# in full from the picker below.
+NEAR_CAP = 10
+# Distinct records looked up on the opening view, and on one market opened
+# by itself.
+PREVIEW_CAP = 10
+MARKET_PREVIEW_CAP = 3
+
+PROTOTYPE = "Prototype — this view may change or go away."
+
+
+# --------------------------------------------------------------------------
+# reading the stored result
+
+
+def in_band(res: dict) -> list[tuple[str, dict]]:
+    """Every market in the derive band, strongest first.
+
+    The band is read off the same numbers `livematch.band` reads, so a market
+    that is orange on the report's map is a market on this list. A market at
+    or above the same-recording line is the track meeting its own chart entry
+    and is never in the band — it is above it — but it is excluded by name
+    rather than by arithmetic, so a change to either line cannot quietly let
+    one through.
+    """
+    regions = res.get("regions") or {}
+    rows = [(iso, r) for iso, r in regions.items()
+            if isinstance(r, dict)
+            and float(r.get("best") or 0) < worldmap.SAME_RECORDING
+            and livematch.band(float(r.get("best") or 0)) == "derive"]
+    rows.sort(key=lambda kv: -float(kv[1].get("best") or 0))
+    return rows
+
+
+def self_markets(res: dict) -> list[tuple[str, dict]]:
+    """Markets where the reading is the record meeting its own chart entry."""
+    regions = res.get("regions") or {}
+    rows = [(iso, r) for iso, r in regions.items()
+            if isinstance(r, dict)
+            and float(r.get("best") or 0) >= worldmap.SAME_RECORDING]
+    rows.sort(key=lambda kv: -float(kv[1].get("best") or 0))
+    return rows
+
+
+def _name(iso: str, r: dict) -> str:
+    return worldmap.market_name(iso, r.get("name"))
+
+
+def _plural(n: int, unit: str) -> str:
+    """"1 market", "5 markets". A count that reads "1 markets" tells the
+    reader the page cannot count — the same rule `render._plural` follows."""
+    return f'{n} {unit if n == 1 else unit + "s"}'
+
+
+def _nearest(r: dict) -> dict | None:
+    top = r.get("top") or []
+    return top[0] if top else None
+
+
+def _record(m: dict | None) -> str:
+    if not m:
+        return ""
+    return f'{m.get("artist") or "—"} — {m.get("title") or "—"}'
+
+
+def saved_choices(rows: list[dict]) -> list[tuple[str, str]]:
+    """The picker's list: what a reader would call the track, and its id."""
+    out = []
+    for r in rows:
+        artist = (r.get("artist") or "").strip()
+        title = (r.get("title") or "").strip()
+        name = f"{artist} — {title}" if artist and title else (
+            r.get("label") or r.get("id") or "")
+        week = str(r.get("corpus_week") or "")
+        out.append((f"{name} · week {week}" if week else name, r.get("id")))
+    return out
+
+
+def market_choices(res: dict) -> list[tuple[str, str]]:
+    """Every market in the band, for the one-at-a-time picker."""
+    return [(f'{_name(iso, r)} · {livematch.pct(float(r["best"]))}', iso)
+            for iso, r in in_band(res)]
+
+
+def preview_ids(pairs: list[tuple[str, int | None]], cap: int
+                ) -> tuple[list[int], set]:
+    """The distinct records to look up, and which markets that covers.
+
+    Deduped by record rather than by market: one record can be the nearest
+    thing charting in four countries, and looking it up four times would
+    spend four of the ten on one player.
+    """
+    ids: list[int] = []
+    seen: dict = {}
+    covered: set = set()
+    for iso, did in pairs:
+        if not did:
+            continue
+        if did in seen:
+            covered.add(iso)
+            continue
+        if len(ids) >= cap:
+            continue
+        seen[did] = True
+        ids.append(int(did))
+        covered.add(iso)
+    return ids, covered
+
+
+# --------------------------------------------------------------------------
+# the one fact that separates a market, where there is one to state
+
+
+def _genre_form(res: dict) -> str | None:
+    f = ((res.get("tags") or {}).get("fields") or {}).get("main_genre") or {}
+    return f.get("form")
+
+
+def _sharing(band: list[tuple[str, dict]], iso: str) -> list[str]:
+    """Every market in the band whose nearest record is this market's, in
+    band order and including this one.
+
+    On the real YO YO reading one record — Ozuna, Omar Courtz — "ZIZI" — is
+    the nearest thing charting in five of the ten closest markets. Five cards
+    each saying "the same record carries another market" is the same sentence
+    five times; the fact is that five markets are one conversation, and it is
+    worth saying once, where the record first appears.
+    """
+    mine = _nearest(dict(band).get(iso) or {})
+    if not mine:
+        return []
+    key = (mine.get("artist"), mine.get("title"))
+    out = []
+    for other, r in band:
+        top = _nearest(r)
+        if top and (top.get("artist"), top.get("title")) == key:
+            out.append(other)
+    return out
+
+
+def _names(band: list[tuple[str, dict]], isos: list[str]) -> str:
+    by = dict(band)
+    named = [_name(i, by[i]) for i in isos if i in by]
+    if len(named) <= 3:
+        return (named[0] if len(named) == 1
+                else ", ".join(named[:-1]) + " and " + named[-1])
+    return ", ".join(named[:3]) + f" and {len(named) - 3} more"
+
+
+def separator(res: dict, band: list[tuple[str, dict]], iso: str) -> str:
+    """One measurable thing to say about this market, beyond its number.
+
+    Everything printed here comes from what is written down: which other
+    markets rest on the same record, and the labels iTunes or Deezer gave it.
+    There is no tempo and no vocal reading kept against a charting record, so
+    a tempo gap or a voice difference is not a comparison this app can make,
+    and it says nothing rather than estimating one.
+    """
+    shared = _sharing(band, iso)
+    if len(shared) > 1 and shared[0] != iso:
+        first = _names(band, shared[:1])
+        return f'Same record as {first} above.'
+    if len(shared) > 1:
+        return (f'This record is also the nearest thing charting in '
+                f'{ESC(_names(band, shared[1:]))} — {len(shared)} markets in '
+                f'this band on one record, so one different version could '
+                f'answer all of them.')
+    r = dict(band).get(iso) or {}
+    top = _nearest(r) or {}
+    labels = [g for g in (top.get("genres") or []) if g]
+    mine = _genre_form(res)
+    if labels and mine:
+        if {g.lower() for g in labels} & {mine.lower()}:
+            return (f'That record carries the same label this track\'s genre '
+                    f'form does: {ESC(mine)}.')
+        return (f'That record is labelled {ESC(", ".join(labels))}; this '
+                f'track\'s genre form reads {ESC(mine)}.')
+    if labels:
+        # The label is the useful half and it is printed; what is missing is
+        # the other side of the comparison, and that is said rather than
+        # filled in from the words the neighbouring records happen to carry.
+        return (f'That record is labelled {ESC(", ".join(labels))}. This '
+                f'analysis carries no genre of its own, so there is nothing '
+                f'to line it up against.')
+    if "genres" in top:
+        return ('That record carries no label at iTunes or Deezer, so there '
+                'is nothing to compare it on beyond the sound.')
+    return ''
+
+
+# --------------------------------------------------------------------------
+# the blocks
+
+
+def opening() -> str:
+    """What sits above the picker: the prototype line and one sentence."""
+    return (render.CSS + '<div class="ml">'
+            f'<div class="kicker">{ESC(PROTOTYPE)}</div>'
+            '<div class="hdr">Within reach</div>'
+            '<div class="sub">The markets a different cut, edit or version '
+            'could bridge to — the ones a report paints orange and gives you '
+            'no way into. Choose a track you have already analysed.</div>'
+            '</div>')
+
+
+def flat(res: dict, label: str) -> str:
+    """A track that reads level everywhere has no shortlist here."""
+    f = worldmap.field(res)
+    n = f["n"]
+    return (render.CSS + '<div class="ml">'
+            f'<div class="hdr">{ESC(label)}</div>'
+            '<div class="card flat">'
+            f'<div class="lab">nothing to dive into</div>'
+            f'<p class="why"><b>This track reads level across all {n} markets '
+            f'measured.</b> The strongest of them sits '
+            f'{livematch.pct(f["hi"])} and the middle of them '
+            f'{livematch.pct(f["median"])}, which is too close together to '
+            f'call one market nearer than another. So the 78–93 band here is '
+            f'not a shortlist — it is most of the world at the same distance, '
+            f'and picking ten of them would be picking at random. The saved '
+            f'report says the same thing at the top of it.</p>'
+            '</div></div>')
+
+
+def _self_line(res: dict) -> str:
+    rows = self_markets(res)
+    if not rows:
+        return ''
+    names = ", ".join(_name(iso, r) for iso, r in rows)
+    return (f'<div class="note"><p class="why"><b>Already charting in '
+            f'{ESC(names)}.</b> That is our own release meeting its own chart '
+            f'entry, so no percentage is read there and those markets are not '
+            f'in the band below.</p></div>')
+
+
+def _line_note(best: float) -> str:
+    """"89% — four below the 93 line that reads as a direct fit." """
+    p = livematch.whole_pct(float(best))
+    if float(best) >= NEAR_LINE:
+        return (f'{p}% — {93 - p} below the 93 line that reads as a direct '
+                f'fit, and above the 78 line the band starts at.')
+    if p == 78:
+        return (f'{p}% — exactly on the 78 line the band starts at, '
+                f'{93 - p} below the 93 line that reads as a direct fit.')
+    return (f'{p}% — {p - 78} above the 78 line the band starts at, '
+            f'{93 - p} below the 93 line that reads as a direct fit.')
+
+
+def _rank(m: dict | None) -> str:
+    return f'#{int(m["rank"])}' if m and m.get("rank") else ''
+
+
+def near_card(res: dict, band: list[tuple[str, dict]], iso: str, r: dict,
+              previews: dict) -> str:
+    """One near miss, with the nearest charting record playable if we have it.
+    """
+    top = _nearest(r)
+    url = previews.get((top or {}).get("deezer_id"))
+    out = [f'<div class="card derive" id="market-{ESC(iso)}">',
+           f'<div class="mkt"><span class="name">{ESC(_name(iso, r))}</span>'
+           f'<span class="iso">{ESC(iso)}</span>{render.chip("derive")}</div>',
+           '<div class="sim"><div class="simtop"><div>'
+           f'<div class="simpct" style="color:var(--derive)">'
+           f'{livematch.whole_pct(r["best"])}<small>%</small></div>']
+    if top:
+        out.append(f'<div class="simto">{ESC(_record(top))}</div>')
+    out.append(f'</div><div class="simcaption">{render.CAPTION["derive"]}'
+               f'</div></div>')
+    out.append(render._scale(float(r["best"]) * 100, "derive") + '</div>')
+    out.append(f'<div class="den">{_line_note(r["best"])} '
+               f'{render._pool_line(r)}.</div>')
+    if top:
+        # One record, once. The number above is its number, so repeating the
+        # title in a row under it would print the same record twice on a card
+        # that only shows one.
+        rank = _rank(top)
+        out.append(f'<div class="den">That record is'
+                   + (f' at {ESC(rank)} there this week.' if rank
+                      else ' on the chart there this week.') + '</div>')
+        if url:
+            out.append('<div class="player">'
+                       '<span class="plab">NEAREST RECORD</span>'
+                       f'<audio controls preload="none" src="{ESC(url)}">'
+                       '</audio></div>')
+        else:
+            out.append('<div class="den">No 30-second preview came back for '
+                       'that record, so there is nothing to play here.</div>')
+    sep = separator(res, band, iso)
+    if sep:
+        out.append(f'<div class="den">{sep}</div>')
+    out.append('</div>')
+    return "".join(out)
+
+
+def bridge_row(iso: str, r: dict) -> str:
+    """One longer bridge: a line, no player."""
+    top = _nearest(r)
+    bits = [f'<div class="nrow" id="market-{ESC(iso)}"><div class="ntop">'
+            f'<span class="pct" style="color:var(--derive)">'
+            f'{livematch.pct(r["best"])}</span>'
+            f'<span class="lbl">{ESC(_name(iso, r))}</span></div>']
+    line = []
+    if top:
+        rank = _rank(top)
+        line.append(f'nearest there: {ESC(_record(top))}'
+                    + (f' · {ESC(rank)}' if rank else ''))
+    line.append(f'{int(r.get("matched") or 0)} of the '
+                f'{int(r.get("pool") or 0)} sounds charting there measured')
+    bits.append(f'<div class="nwhere">{" · ".join(line)}</div></div>')
+    return "".join(bits)
+
+
+def band_map(res: dict, band: list[tuple[str, dict]]) -> str:
+    """The world with only the band markets coloured.
+
+    Built by handing `worldmap.svg` a reading that carries the band and
+    nothing else: every other country falls through to the map's uncoloured
+    tone, which is exactly "fade everything, colour the band". The map is not
+    re-drawn or re-coloured here — it is the same picture the report draws,
+    given a smaller reading.
+    """
+    if not band:
+        return ''
+    isos = [iso for iso, _ in band]
+    return worldmap.svg({"regions": {iso: r for iso, r in band}}, linked=isos)
+
+
+def market_card(res: dict, iso: str, previews: dict) -> str:
+    """One market, in full, with its closest three records playable.
+
+    This is the on-demand half: the opening view spends ten lookups on ten
+    markets, and a reader who wants everything about one market pays three
+    more for that one.
+    """
+    band = in_band(res)
+    r = dict(band).get(iso)
+    if not r:
+        regions = res.get("regions") or {}
+        if iso in regions:
+            return (render.CSS + '<div class="ml"><div class="card flat">'
+                    f'<div class="den">{ESC(_name(iso, regions[iso]))} is not '
+                    f'in the 78–93 band for this track, so there is nothing '
+                    f'to open here.</div></div></div>')
+        return ''
+    top = (r.get("top") or [])[:3]
+    out = [render.CSS, '<div class="ml">',
+           f'<div class="lab">one market in full</div>',
+           f'<div class="card derive" id="one-{ESC(iso)}">',
+           f'<div class="mkt"><span class="name">{ESC(_name(iso, r))}</span>'
+           f'<span class="iso">{ESC(iso)}</span>{render.chip("derive")}</div>',
+           '<div class="sim"><div class="simtop"><div>'
+           f'<div class="simpct" style="color:var(--derive)">'
+           f'{livematch.whole_pct(r["best"])}<small>%</small></div>']
+    if top:
+        out.append(f'<div class="simto">{ESC(_record(top[0]))}</div>')
+    out.append(f'</div><div class="simcaption">{render.CAPTION["derive"]}'
+               f'</div></div>')
+    out.append(render._scale(float(r["best"]) * 100, "derive") + '</div>')
+    out.append(f'<div class="den">{_line_note(r["best"])} '
+               f'{render._pool_line(r)}. Closest '
+               f'{"three" if len(top) >= 3 else len(top)}:</div>')
+    for m in top:
+        url = previews.get(m.get("deezer_id"))
+        player = (f'<audio controls preload="none" src="{ESC(url)}"></audio>'
+                  if url else '')
+        out.append(
+            f'<div class="row"><span class="pct" '
+            f'style="color:var(--{livematch.band(m["similarity"])})">'
+            f'{livematch.pct(m["similarity"])}</span>'
+            f'<span class="lbl">{ESC(_record(m))}</span>'
+            f'<span class="rk">{ESC(_rank(m))}</span>{player}</div>')
+    sep = separator(res, band, iso)
+    if sep:
+        out.append(f'<div class="den">{sep}</div>')
+    out.append('<div class="den">Nothing here is a verdict. This market is in '
+               'the band because it is not close enough to act on from the '
+               'numbers alone — what decides it is hearing the two records '
+               'next to each other.</div>')
+    out.append('</div></div>')
+    return "".join(out)
+
+
+# --------------------------------------------------------------------------
+# the whole view
+
+
+def render_band(res: dict, label: str) -> str:
+    """The tab body for one saved analysis.
+
+    Costs at most `PREVIEW_CAP` Deezer lookups, deduped by record, and says
+    on screen how many players it got and why the rest have none.
+    """
+    if worldmap.field(res)["flat"]:
+        return flat(res, label)
+
+    band = in_band(res)
+    measured = len(res.get("regions") or {})
+    if not band:
+        return (render.CSS + '<div class="ml">'
+                f'<div class="hdr">{ESC(label)}</div>'
+                + _self_line(res) +
+                f'<div class="card flat"><div class="den">No market sits in '
+                f'the 78–93 band for this track this week, out of '
+                f'{_plural(measured, "market")} measured. The saved report '
+                f'has where it does sit.</div>'
+                '</div></div>')
+
+    # Near misses get a card each, capped at ten. Anything above 88 that the
+    # cap pushed out is not silently downgraded: it drops into the list below
+    # and that list says so, because a market reading 91% under a heading
+    # marked 78–88 would be the page mis-stating its own number.
+    near = [(iso, r) for iso, r in band if float(r["best"]) >= NEAR_LINE]
+    spill = near[NEAR_CAP:]
+    near = near[:NEAR_CAP]
+    picked = {iso for iso, _ in near}
+    rest = [(iso, r) for iso, r in band if iso not in picked]
+
+    ids, _covered = preview_ids(
+        [(iso, (_nearest(r) or {}).get("deezer_id")) for iso, r in near],
+        PREVIEW_CAP)
+    previews = render.deezer_previews(ids) if ids else {}
+    played = sum(1 for iso, r in near
+                 if previews.get((_nearest(r) or {}).get("deezer_id")))
+
+    out = [render.CSS, '<div class="ml">',
+           f'<div class="hdr">{ESC(label)}</div>',
+           f'<div class="sub"><b>{len(band)} '
+           f'{"market sits" if len(band) == 1 else "markets sit"} in the '
+           f'78–93 band for this track</b> — close enough that a different '
+           f'version could bridge the gap. Nobody has listened for you; this '
+           f'is the shortlist worth an ear.</div>',
+           f'<div class="den">{len(band)} of '
+           f'{_plural(measured, "market")} measured this '
+           f'week. Nothing here is a verdict: the band is defined as not '
+           f'close enough to act on from the numbers alone.</div>',
+           _self_line(res)]
+
+    # -- near misses -------------------------------------------------------
+    if near:
+        out.append('<h2><span>Near misses</span>'
+                   f'<span class="tag">{len(near)} of {len(band)} · 88–93'
+                   '</span></h2>')
+        out.append(f'<div class="sub">The closest end of the band. Players on '
+                   f'the {played} nearest; the rest are listed without audio, '
+                   f'and any market opens in full further down.</div>')
+        for iso, r in near:
+            out.append(near_card(res, band, iso, r, previews))
+        out.append('<div class="den">The charting records are held as sound '
+                   'and as the labels iTunes or Deezer gave them — no tempo '
+                   'and no vocal reading is kept against a chart entry — so '
+                   'the line under each market compares what is written down '
+                   'and stops there.</div>')
+    else:
+        out.append('<h2><span>Near misses</span>'
+                   '<span class="tag">none</span></h2>')
+        out.append(f'<div class="sub">No market in this band reads 88 or '
+                   f'above, so there is no closest end to lead with. All '
+                   f'{len(band)} of them are listed below, and any of them '
+                   f'opens in full with its players.</div>')
+
+    # -- longer bridges ----------------------------------------------------
+    if rest:
+        lo = livematch.whole_pct(min(float(r["best"]) for _, r in rest))
+        hi = livematch.whole_pct(max(float(r["best"]) for _, r in rest))
+        out.append('<h2><span>Longer bridges</span>'
+                   f'<span class="tag">{_plural(len(rest), "market")} · '
+                   f'{lo}–{hi}</span>'
+                   '</h2>')
+        line = ('Same band, further out: a bigger change to the record before '
+                'it reads as a fit. No players here — open one below to hear '
+                'it.')
+        if spill:
+            line = (f'The first {len(spill)} of these read 88 or above — the '
+                    f'same near-miss range as the cards above, which stop at '
+                    f'{NEAR_CAP} markets. Below those, a bigger change to the '
+                    f'record before it reads as a fit. No players here — open '
+                    f'one below to hear it.')
+        out.append(f'<div class="sub">{line}</div>')
+        out.append('<div class="card flat">')
+        for iso, r in rest:
+            out.append(bridge_row(iso, r))
+        out.append('</div>')
+
+    # -- the band on the map, under the lists it belongs to -----------------
+    picture = band_map(res, band)
+    if picture:
+        out.append('<h2><span>The band on the map</span></h2>')
+        out.append('<div class="card flat">' + picture
+                   + '<div class="den">Only the markets in the band are '
+                     'coloured. Everything else is left blank — including the '
+                     'markets the track reads closest in, which the saved '
+                     'report has.</div></div>')
+
+    out.append('</div>')
+    return "".join(out)