Merge pull request 'fix(places): phase-grouped tables, plain-English measures, styled links' (#118) from fix/place-page-presentation into fix/place-title-brand-doubling

Reviewed-on: #118

backend/app.py

@@ -209,12 +209,27 @@ def _place_url(place) -> str:
 
 
 def _place_sitemap_rows(kinds: tuple[str, ...]) -> list[str]:
-    return [
-        _url_element(BASE_URL + _place_url(p))
-        for p in sorted(get_place_registry().values(),
-                        key=lambda p: (p.kind, p.slug))
-        if p.kind in kinds
-    ]
+    """A <url> per place, plus a phase variant wherever that phase clears the
+    threshold on its own.
+
+    Phase is part of the query — "primary schools in beccles" — so each
+    variant is its own indexable page. Submitting only the bare place URL left
+    ~950 of them reachable by nothing: absent from every sitemap, and not
+    linked from the place page either.
+    """
+    rows: list[str] = []
+    for p in sorted(get_place_registry().values(), key=lambda p: (p.kind, p.slug)):
+        if p.kind not in kinds:
+            continue
+        rows.append(_url_element(BASE_URL + _place_url(p)))
+        # Outcodes carry no phase variants: nobody searches "primary schools
+        # in SW11", so the routes do not exist to submit.
+        if p.kind == "outcode":
+            continue
+        for phase in ("primary", "secondary"):
+            if p.publishes_phase(phase):
+                rows.append(_url_element(f"{BASE_URL}{_place_url(p)}/{phase}"))
+    return rows
 
 
 def build_sitemaps() -> dict[str, str]:
@@ -1216,7 +1231,11 @@ async def get_place(request: Request, kind: str, slug: str,
     return {
         "place": {"kind": place.kind, "slug": place.slug, "name": place.name,
                   "count": len(place.urns),
-                  "parent_authority": place.parent_authority},
+                  "parent_authority": place.parent_authority,
+                  # Only phases that clear the threshold, so the page links
+                  # variants that exist rather than 404s.
+                  "phases": [ph for ph in ("primary", "secondary")
+                             if place.publishes_phase(ph)]},
         "schools": clean_for_json(rows[cols]),
         "averages": averages,
     }

backend/places.py

@@ -14,7 +14,7 @@ from __future__ import annotations
 
 import logging
 import re
-from dataclasses import dataclass
+from dataclasses import dataclass, field
 
 logger = logging.getLogger(__name__)
 
@@ -30,6 +30,13 @@ class Place:
     name: str
     urns: tuple[int, ...]
     parent_authority: str | None    # authority NAME, for the 301 target
+    # URNs per phase, so the per-phase threshold can be applied without
+    # re-querying. A place with 30 primaries and 2 secondaries publishes a
+    # primary variant and no secondary one.
+    phase_urns: dict[str, tuple[int, ...]] = field(default_factory=dict)
+
+    def publishes_phase(self, phase: str) -> bool:
+        return len(self.phase_urns.get(phase, ())) >= MIN_SCHOOLS
 
     @property
     def key(self) -> str:
@@ -46,6 +53,24 @@ def _publishable_urns(df) -> set[int]:
     return set(df.loc[df[cols].notna().any(axis=1), "urn"].astype(int))
 
 
+def _phase_urns(group, publishable: set[int]) -> dict[str, tuple[int, ...]]:
+    """URNs per phase. All-through schools count toward both, matching the
+    PHASE_GROUPS mapping the search filters already use."""
+    from backend.app import PHASE_GROUPS
+
+    if "phase" not in group.columns:
+        return {}
+    lowered = group["phase"].fillna("").str.lower()
+    out: dict[str, tuple[int, ...]] = {}
+    for phase in ("primary", "secondary"):
+        wanted = PHASE_GROUPS.get(phase, set())
+        subset = group[lowered.isin(wanted)]
+        urns = tuple(sorted({int(u) for u in subset["urn"]} & publishable))
+        if urns:
+            out[phase] = urns
+    return out
+
+
 def _parent_authority(group) -> str | None:
     """The most common authority in a group — the useful 301 target.
 
@@ -79,6 +104,7 @@ def _group(df, column: str, kind: str, publishable: set[int]) -> dict[str, Place
         place = Place(
             kind=kind, slug=slug, name=name, urns=urns,
             parent_authority=_parent_authority(group) if kind == "town" else None,
+            phase_urns=_phase_urns(group, publishable),
         )
         out[place.key] = place
     return out
@@ -111,7 +137,8 @@ def _outcode_places(df, publishable: set[int]) -> dict[str, Place]:
         if len(urns) < MIN_SCHOOLS:
             continue
         place = Place(kind="outcode", slug=str(oc).lower(), name=str(oc),
-                      urns=urns, parent_authority=_parent_authority(group))
+                      urns=urns, parent_authority=_parent_authority(group),
+                      phase_urns=_phase_urns(group, publishable))
         out[place.key] = place
     return out
 
@@ -153,7 +180,8 @@ def _locality_places(df, publishable: set[int],
                 slug, ", ".join(outcodes), len(urns), MIN_SCHOOLS)
             continue
         place = Place(kind="locality", slug=slug, name=name, urns=urns,
-                      parent_authority=_parent_authority(group))
+                      parent_authority=_parent_authority(group),
+                      phase_urns=_phase_urns(group, publishable))
         out[place.key] = place
     return out
 

backend/tests/test_sitemap.py

@@ -268,3 +268,23 @@ def test_place_urls_carry_no_priority_or_changefreq(place_sitemaps):
     for name in ("places-1.xml", "outcodes-1.xml"):
         assert "<priority>" not in place_sitemaps[name]
         assert "<changefreq>" not in place_sitemaps[name]
+
+
+def test_phase_variants_are_submitted_where_the_phase_clears_the_threshold(place_sitemaps):
+    # "primary schools in beccles" is the query shape the baseline showed, so
+    # each variant is its own page and has to be submitted. Emitting only the
+    # bare place URL left ~950 of them reachable by nothing.
+    xml = place_sitemaps["places-1.xml"]
+    assert "<loc>https://www.schoolcompare.co.uk/schools/brentwood/primary</loc>" in xml
+
+
+def test_a_phase_below_its_own_threshold_is_not_submitted(place_sitemaps):
+    # The fixture is six primaries and no secondaries.
+    xml = place_sitemaps["places-1.xml"]
+    assert "/schools/brentwood/secondary" not in xml
+
+
+def test_outcodes_get_no_phase_variants(place_sitemaps):
+    # Nobody searches "primary schools in CM13"; the routes do not exist.
+    xml = place_sitemaps["outcodes-1.xml"]
+    assert "/primary" not in xml and "/secondary" not in xml

e2e/tests/journeys.spec.ts

@@ -1842,3 +1842,46 @@ test('a place page states the local average against England', async ({ page }) =
   await page.goto(`/schools/${place.slug}`);
   await expect(page.getByTestId('local-vs-england')).toContainText(/across England/i);
 });
+
+test('a place page links its phase variants, and they resolve', async ({ page }) => {
+  // "primary schools in beccles" is the query shape the baseline showed. The
+  // first cut submitted only the bare place URL and linked nothing, leaving
+  // ~950 variant pages reachable by nothing at all.
+  const res = await page.request.get('/api/places');
+  const { places } = await res.json();
+  const town = places.find((p: { kind: string }) => p.kind === 'town');
+  expect(town).toBeTruthy();
+
+  const detail = await (await page.request.get(`/api/places/town/${town.slug}`)).json();
+  test.skip(!(detail.place.phases ?? []).length, 'no phase clears the threshold here');
+
+  await page.goto(`/schools/${town.slug}`);
+  const phase = detail.place.phases[0];
+  const link = page.locator(`a[href="/schools/${town.slug}/${phase}"]`).first();
+  await expect(link).toBeVisible();
+
+  await link.click();
+  await expect(page.locator('h1')).toContainText(new RegExp(`${phase} schools in`, 'i'));
+});
+
+test('phase variants are submitted in the places sitemap', async ({ page }) => {
+  const xml = await (await page.request.get('/sitemaps/places-1.xml')).text();
+  expect(xml).toMatch(/\/schools\/[a-z0-9-]+\/primary</);
+});
+
+test('no page title repeats the brand', async ({ page }) => {
+  // The root layout appends '| schoolcompare' to a plain-string title. Any
+  // route whose title already carries the brand must opt out with
+  // `absolute`, or it ships '... | schoolcompare | schoolcompare' — which is
+  // how ~2,600 place pages first went out.
+  const res = await page.request.get('/api/places');
+  const { places } = await res.json();
+  const town = places.find((p: { kind: string }) => p.kind === 'town');
+
+  for (const path of ['/', '/rankings', '/admissions', `/schools/${town.slug}`]) {
+    await page.goto(path);
+    const title = await page.title();
+    const brands = (title.match(/schoolcompare/gi) ?? []).length;
+    expect(brands, `${path} repeats the brand: ${title}`).toBeLessThanOrEqual(1);
+  }
+});

nextjs-app/__tests__/app/placeMetadata.test.ts

@@ -14,7 +14,7 @@ jest.mock('@/lib/places', () => ({
 describe('place page metadata', () => {
   it('titles the page the way the place is searched', async () => {
     const m = await placeMeta({ params: Promise.resolve({ place: 'brentwood' }) });
-    expect(m.title).toMatch(/schools in brentwood/i);
+    expect((m.title as { absolute: string }).absolute).toMatch(/schools in brentwood/i);
   });
 
   it('canonicalises to its own path on the www host', async () => {
@@ -23,6 +23,18 @@ describe('place page metadata', () => {
       .toBe('https://www.schoolcompare.co.uk/schools/brentwood');
   });
 
+  it('opts out of the layout template, which would double the brand', () => {
+    // The root layout appends '| schoolcompare' to a plain string title, and
+    // these titles already carry it — every place page shipped reading
+    // '... | schoolcompare | schoolcompare' until this was made absolute.
+    return placeMeta({ params: Promise.resolve({ place: 'brentwood' }) })
+      .then((m) => {
+        expect(typeof m.title).toBe('object');
+        expect((m.title as { absolute: string }).absolute)
+          .not.toMatch(/schoolcompare.*schoolcompare/);
+      });
+  });
+
   it('an unknown place gets a not-found title rather than inventing one', async () => {
     const m = await placeMeta({ params: Promise.resolve({ place: 'atlantis' }) });
     expect(m.title).toMatch(/not found/i);

nextjs-app/__tests__/components/PlaceView.test.tsx

@@ -4,12 +4,12 @@ import type { PlaceDetail } from '@/lib/places';
 
 const detail: PlaceDetail = {
   place: { kind: 'town', slug: 'brentwood', name: 'Brentwood', count: 29,
-           parent_authority: 'Essex' },
+           parent_authority: 'Essex', phases: ['primary'] },
   schools: [
     { urn: 1, school_name: 'Alpha Primary', rwm_expected_pct: 82,
-      ofsted_grade: 1 } as never,
+      ofsted_grade: 1, phase: 'Primary' } as never,
     { urn: 2, school_name: 'Beta Primary', rwm_expected_pct: 44,
-      ofsted_grade: 3 } as never,
+      ofsted_grade: 3, phase: 'Primary' } as never,
   ],
   averages: { rwm_expected_pct: 63, attainment_8_score: null },
 };
@@ -91,3 +91,80 @@ describe('PlaceView structured data', () => {
     }
   });
 });
+
+describe('PlaceView phase variants', () => {
+  it('links the phase variants that exist', () => {
+    render(<PlaceView detail={detail} englandAverage={61} neighbours={[]} />);
+    expect(screen.getByRole('link', { name: /Primary schools in Brentwood/i }))
+      .toHaveAttribute('href', '/schools/brentwood/primary');
+  });
+
+  it('links no variant for a phase below its own threshold', () => {
+    render(<PlaceView detail={detail} englandAverage={61} neighbours={[]} />);
+    expect(screen.queryByRole('link', { name: /Secondary schools in Brentwood/i }))
+      .not.toBeInTheDocument();
+  });
+
+  it('does not link sideways from a variant page to itself', () => {
+    render(<PlaceView detail={detail} phase="primary" englandAverage={61}
+      neighbours={[]} />);
+    expect(screen.queryByRole('link', { name: /Primary schools in Brentwood/i }))
+      .not.toBeInTheDocument();
+  });
+});
+
+describe('PlaceView presentation', () => {
+  // /schools/brentwood shipped with 8 of 27 rows blank: an unphased page shows
+  // one primary-only measure for a list that also holds secondaries.
+  const mixed: PlaceDetail = {
+    place: { kind: 'town', slug: 'brentwood', name: 'Brentwood', count: 4,
+             parent_authority: 'Essex', phases: ['primary', 'secondary'] },
+    schools: [
+      { urn: 1, school_name: 'Alpha Primary', phase: 'Primary',
+        rwm_expected_pct: 82, attainment_8_score: null } as never,
+      { urn: 2, school_name: 'Beta High', phase: 'Secondary',
+        rwm_expected_pct: null, attainment_8_score: 47 } as never,
+    ],
+    averages: { rwm_expected_pct: 63, attainment_8_score: 45 },
+  };
+
+  it('gives each phase its own table rather than one column of blanks', () => {
+    render(<PlaceView detail={mixed} englandAverage={61} neighbours={[]} />);
+    expect(screen.getByRole('heading', { name: /^Primary schools/ })).toBeInTheDocument();
+    expect(screen.getByRole('heading', { name: /^Secondary schools/ })).toBeInTheDocument();
+    expect(screen.getByText('82%')).toBeInTheDocument();
+    expect(screen.getByText('47')).toBeInTheDocument();
+  });
+
+  it('names the measure in plain words, not jargon', () => {
+    // The first cut said "RWM expected", which appears nowhere else on the site.
+    render(<PlaceView detail={mixed} englandAverage={61} neighbours={[]} />);
+    expect(screen.getByText('Reading, writing & maths')).toBeInTheDocument();
+    expect(screen.getByText('Attainment 8')).toBeInTheDocument();
+    expect(screen.queryByText(/RWM expected/i)).not.toBeInTheDocument();
+  });
+
+  it('says a missing result is unpublished rather than showing a bare dash', () => {
+    const noResult: PlaceDetail = {
+      ...mixed,
+      schools: [{ urn: 3, school_name: 'New Primary', phase: 'Primary',
+                  rwm_expected_pct: null, attainment_8_score: null } as never],
+    };
+    render(<PlaceView detail={noResult} englandAverage={61} neighbours={[]} />);
+    expect(screen.getByText('Not published')).toBeInTheDocument();
+  });
+
+  it('styles school links to the site convention rather than browser default', () => {
+    const { container } = render(<PlaceView detail={mixed} englandAverage={61}
+      neighbours={[]} />);
+    const link = container.querySelector('a[href^="/school/"]');
+    expect(link?.className).toBeTruthy();
+  });
+
+  it('a phased page shows one table and no phase headings', () => {
+    render(<PlaceView detail={mixed} phase="primary" englandAverage={61}
+      neighbours={[]} />);
+    expect(screen.queryByRole('heading', { name: /^Secondary schools/ }))
+      .not.toBeInTheDocument();
+  });
+});

nextjs-app/app/schools/[place]/[phase]/page.tsx

@@ -37,7 +37,7 @@ export async function generateMetadata({ params }: Props): Promise<Metadata> {
   const word = phase === 'secondary' ? 'Secondary' : 'Primary';
   const { name } = detail.place;
   return {
-    title: `${word} Schools in ${name} — Ranked | schoolcompare`,
+    title: { absolute: `${word} Schools in ${name} — Ranked | schoolcompare` },
     description:
       `Every ${phase} school in ${name} ranked by results, with Ofsted grades and `
       + `the local average against England.`,

nextjs-app/app/schools/[place]/page.tsx

@@ -53,7 +53,10 @@ export async function generateMetadata({ params }: Props): Promise<Metadata> {
 
   const { name, count } = detail.place;
   return {
-    title: `Schools in ${name} — Compare ${count} Schools | schoolcompare`,
+    // absolute: the root layout's template appends '| schoolcompare' to a
+    // plain string, and this title already carries it. Without this every
+    // place title read '... | schoolcompare | schoolcompare'.
+    title: { absolute: `Schools in ${name} — Compare ${count} Schools | schoolcompare` },
     description:
       `Every school in ${name} ranked by SATs and GCSE results, with Ofsted grades, `
       + `the local average against England, and how close you had to live to get a place.`,

nextjs-app/app/schools/authority/[la]/page.tsx

@@ -43,7 +43,7 @@ export async function generateMetadata({ params }: Props): Promise<Metadata> {
 
   const { name, count } = detail.place;
   return {
-    title: `Schools in ${name} — Local Authority | schoolcompare`,
+    title: { absolute: `Schools in ${name} — Local Authority | schoolcompare` },
     description:
       `All ${count} schools in the ${name} local authority, ranked by SATs and GCSE `
       + `results, with Ofsted grades and the authority average against England.`,

nextjs-app/app/schools/near/[outcode]/page.tsx

@@ -38,7 +38,7 @@ export async function generateMetadata({ params }: Props): Promise<Metadata> {
 
   const { name, count } = detail.place;
   return {
-    title: `Schools near ${name} | schoolcompare`,
+    title: { absolute: `Schools near ${name} | schoolcompare` },
     description:
       `${count} schools in the ${name} postcode district, ranked by results, with `
       + `Ofsted grades and how close you had to live to get a place.`,

nextjs-app/components/places/PlaceView.module.css

@@ -1,4 +1,8 @@
-/* Tokens only — see globals.css. Matches RankingsView's conventions. */
+/* Tokens only — see globals.css. Follows RankingsView's conventions, and in
+   particular its link treatment: table links take --text-primary with no
+   underline and a brand-coloured hover, not the browser default. The first
+   cut used bare <Link> with no class at all, which rendered as default blue
+   underlined links and read as unstyled beside the rest of the site. */
 .container {
   width: 100%;
   min-width: 0;
@@ -24,6 +28,44 @@
   line-height: 1.6;
 }
 
+/* Links in running copy: brand colour, underline on hover only. */
+.inlineLink {
+  color: var(--brand);
+  text-decoration: none;
+  transition: color 0.2s ease;
+}
+
+.inlineLink:hover {
+  color: var(--brand-strong);
+  text-decoration: underline;
+}
+
+/* Phase variants are separate indexable pages, so the bare place page has to
+   link them — a sitemap entry alone leaves them with no internal path in. */
+.phaseLinks {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem 0.75rem;
+  margin: 0 0 1.25rem;
+}
+
+.phaseLink {
+  display: inline-block;
+  padding: 0.4rem 0.875rem;
+  border: 1px solid var(--border-strong);
+  border-radius: 999px;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--text-primary);
+  text-decoration: none;
+  transition: border-color 0.2s ease, color 0.2s ease;
+}
+
+.phaseLink:hover {
+  border-color: var(--brand);
+  color: var(--brand-strong);
+}
+
 /* The one number a list cannot give you, so it gets its own band. */
 .compare {
   background: var(--bg-secondary);
@@ -46,6 +88,30 @@
   color: var(--text-secondary);
 }
 
+.group {
+  margin-bottom: 2rem;
+}
+
+.groupHeading {
+  display: flex;
+  align-items: baseline;
+  gap: 0.625rem;
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: var(--text-primary);
+  font-family: var(--font-display);
+  margin: 0 0 0.75rem;
+}
+
+.groupCount {
+  font-size: 0.8125rem;
+  font-weight: 500;
+  color: var(--text-secondary);
+  background: var(--bg-secondary);
+  border-radius: 999px;
+  padding: 0.125rem 0.5rem;
+}
+
 /* Wide content scrolls in its own container so the page body never does. */
 .tableWrap {
   overflow-x: auto;
@@ -72,8 +138,6 @@
   color: var(--text-secondary);
   font-weight: 600;
   font-size: 0.8125rem;
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
 }
 
 .table tbody tr:last-child td {
@@ -86,6 +150,30 @@
   font-variant-numeric: tabular-nums;
 }
 
+/* The measure is spelled out; the tooltip carries the definition. */
+.metricHead {
+  text-decoration: none;
+  cursor: help;
+  border-bottom: 1px dotted var(--border-strong);
+}
+
+/* Table links: site convention is body colour, brand on hover. */
+.schoolLink {
+  color: var(--text-primary);
+  text-decoration: none;
+  transition: color 0.2s ease;
+}
+
+.schoolLink:hover {
+  color: var(--brand-strong);
+}
+
+/* "Not published" is a fact about the school, not an error. */
+.noData {
+  color: var(--text-muted);
+  font-size: 0.8125rem;
+}
+
 .neighbours {
   margin-top: 2rem;
 }

nextjs-app/components/places/PlaceView.tsx

@@ -12,6 +12,7 @@
 import Link from 'next/link';
 import type { PlaceDetail, PlaceSummary } from '@/lib/places';
 import { placeUrl, authoritySlug } from '@/lib/places';
+import type { School } from '@/lib/types';
 import { schoolUrl } from '@/lib/utils';
 import { absoluteUrl } from '@/lib/site';
 import styles from './PlaceView.module.css';
@@ -30,19 +31,101 @@ const OFSTED_LABELS: Array<[number, string]> = [
   [3, 'Requires improvement'], [4, 'Inadequate'],
 ];
 
+/**
+ * Column headings, taken from the site's own metric dictionary rather than
+ * invented here — see METRIC_DEFINITIONS in backend/schemas.py, surfaced at
+ * /api/metrics. The first cut said "RWM expected", which is jargon that
+ * appears nowhere else on the site.
+ */
+const METRICS = {
+  primary: {
+    key: 'rwm_expected_pct' as const,
+    heading: 'Reading, writing & maths',
+    hint: '% meeting the expected standard in reading, writing and maths',
+    unit: '%',
+  },
+  secondary: {
+    key: 'attainment_8_score' as const,
+    heading: 'Attainment 8',
+    hint: "Average grade across a pupil's best 8 GCSEs, including English and maths",
+    unit: '',
+  },
+};
+
+type PhaseKey = keyof typeof METRICS;
+
+/** All-through schools sit in both phases, matching the search filters. */
+function isPhase(school: School, phase: PhaseKey): boolean {
+  const p = (school.phase ?? '').toLowerCase();
+  if (p === 'all-through') return true;
+  return phase === 'secondary'
+    ? p.includes('secondary') || p === '16 plus'
+    : p.includes('primary') || p.includes('middle');
+}
+
+function SchoolTable({ schools, phase }: { schools: School[]; phase: PhaseKey }) {
+  const metric = METRICS[phase];
+  return (
+    <div className={styles.tableWrap}>
+      <table className={styles.table}>
+        <thead>
+          <tr>
+            <th scope="col">School</th>
+            <th scope="col">
+              <abbr className={styles.metricHead} title={metric.hint}>
+                {metric.heading}
+              </abbr>
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          {schools.map((s) => {
+            const value = s[metric.key];
+            return (
+              <tr key={s.urn}>
+                <td>
+                  <Link href={schoolUrl(s.urn, s.school_name)} className={styles.schoolLink}>
+                    {s.school_name}
+                  </Link>
+                </td>
+                <td className={styles.num}>
+                  {value == null
+                    ? <span className={styles.noData}>Not published</span>
+                    : `${Math.round(Number(value))}${metric.unit}`}
+                </td>
+              </tr>
+            );
+          })}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
 export function PlaceView({ detail, phase, englandAverage, neighbours }: Props) {
   const { place, schools, averages } = detail;
-  const metric = phase === 'secondary' ? 'attainment_8_score' : 'rwm_expected_pct';
-  const local = averages[metric];
+  const local = averages[METRICS[phase ?? 'primary'].key];
   const phaseWord = phase === 'secondary' ? 'Secondary schools'
     : phase === 'primary' ? 'Primary schools' : 'Schools';
   const graded = OFSTED_LABELS
     .map(([grade, label]) => [label, schools.filter((s) => s.ofsted_grade === grade).length] as const)
     .filter(([, n]) => n > 0);
 
-  // ItemList tells Google this page is a ranked set rather than prose;
-  // BreadcrumbList puts the place in a hierarchy. Capped at 20 because that
-  // is what the page shows above the fold and what the markup should mirror.
+  /*
+   * An unphased page holds both primaries and secondaries, and they are
+   * scored on different measures — a percentage and a 0-90 score. Showing one
+   * column for both left 30% of rows blank on /schools/brentwood and put two
+   * incomparable scales in one column when it did not.
+   *
+   * So the phases get a table each. A blank cell inside one now means the
+   * school genuinely has no published result, which is worth saying.
+   */
+  const groups: Array<[PhaseKey, School[]]> = phase
+    ? [[phase, schools]]
+    : (['primary', 'secondary'] as PhaseKey[])
+        .map((p) => [p, schools.filter((s) => isPhase(s, p))] as [PhaseKey, School[]])
+        .filter(([, list]) => list.length > 0);
+
   const jsonLd = {
     '@context': 'https://schema.org',
     '@graph': [
@@ -60,8 +143,7 @@ export function PlaceView({ detail, phase, englandAverage, neighbours }: Props)
       {
         '@type': 'BreadcrumbList',
         itemListElement: [
-          { '@type': 'ListItem', position: 1, name: 'Schools',
-            item: absoluteUrl('/') },
+          { '@type': 'ListItem', position: 1, name: 'Schools', item: absoluteUrl('/') },
           { '@type': 'ListItem', position: 2, name: place.name },
         ],
       },
@@ -74,6 +156,7 @@ export function PlaceView({ detail, phase, englandAverage, neighbours }: Props)
         type="application/ld+json"
         dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
       />
+
       <header className={styles.header}>
         <h1>{phaseWord} in {place.name}</h1>
         <p className={styles.summary}>
@@ -81,7 +164,8 @@ export function PlaceView({ detail, phase, englandAverage, neighbours }: Props)
           {place.parent_authority && (
             <>
               {' · '}
-              <Link href={`/schools/authority/${authoritySlug(place.parent_authority)}`}>
+              <Link href={`/schools/authority/${authoritySlug(place.parent_authority)}`}
+                className={styles.inlineLink}>
                 {place.parent_authority}
               </Link>
             </>
@@ -89,6 +173,16 @@ export function PlaceView({ detail, phase, englandAverage, neighbours }: Props)
         </p>
       </header>
 
+      {!phase && (place.phases ?? []).length > 0 && (
+        <nav className={styles.phaseLinks} aria-label="By phase">
+          {(place.phases ?? []).map((ph) => (
+            <Link key={ph} href={`/schools/${place.slug}/${ph}`} className={styles.phaseLink}>
+              {ph === 'secondary' ? 'Secondary schools' : 'Primary schools'} in {place.name}
+            </Link>
+          ))}
+        </nav>
+      )}
+
       {local != null && englandAverage != null && (
         <p className={styles.compare} data-testid="local-vs-england">
           {place.name} averages <strong>{Math.round(local)}</strong> against{' '}
@@ -104,28 +198,17 @@ export function PlaceView({ detail, phase, englandAverage, neighbours }: Props)
         </ul>
       )}
 
-      <div className={styles.tableWrap}>
-        <table className={styles.table}>
-          <thead>
-            <tr>
-              <th>School</th>
-              <th>{phase === 'secondary' ? 'Attainment 8' : 'RWM expected'}</th>
-            </tr>
-          </thead>
-          <tbody>
-            {schools.map((s) => (
-              <tr key={s.urn}>
-                <td>
-                  <Link href={schoolUrl(s.urn, s.school_name)}>{s.school_name}</Link>
-                </td>
-                <td className={styles.num}>
-                  {s[metric] == null ? '—' : Math.round(Number(s[metric]))}
-                </td>
-              </tr>
-            ))}
-          </tbody>
-        </table>
-      </div>
+      {groups.map(([p, list]) => (
+        <section key={p} className={styles.group}>
+          {groups.length > 1 && (
+            <h2 className={styles.groupHeading}>
+              {p === 'secondary' ? 'Secondary schools' : 'Primary schools'}
+              <span className={styles.groupCount}>{list.length}</span>
+            </h2>
+          )}
+          <SchoolTable schools={list} phase={p} />
+        </section>
+      ))}
 
       {neighbours.length > 0 && (
         <nav className={styles.neighbours} aria-label="Nearby places">
@@ -133,7 +216,7 @@ export function PlaceView({ detail, phase, englandAverage, neighbours }: Props)
           <ul>
             {neighbours.map((n) => (
               <li key={n.kind + n.slug}>
-                <Link href={placeUrl(n.kind, n.slug)}>{n.name}</Link>
+                <Link href={placeUrl(n.kind, n.slug)} className={styles.inlineLink}>{n.name}</Link>
               </li>
             ))}
           </ul>

nextjs-app/lib/places.ts

@@ -13,6 +13,9 @@ export interface PlaceSummary {
   slug: string;
   name: string;
   count: number;
+  /** Phases that clear the threshold on their own, so the page links
+   *  variants that exist rather than 404s. Absent on the registry listing. */
+  phases?: string[];
 }
 
 export interface PlaceDetail {