Merge pull request #2 from DevelopmentFinanceObservatory/sync/website/6533af2ae872ced7c72a5d661db87ce073a1ffa4

Sync dfo-website@6533af2ae872

Author: jm-rivera

src/components/molecules/DataPrompt/DataPrompt.tsx

@@ -122,7 +122,7 @@ const DataPrompt = ({
                 />
             </form>
             <span className={styles.rule} aria-hidden="true" />
-            {suggestions && (
+            {suggestions && suggestions.length > 0 && (
                 <TryChips
                     examples={suggestions}
                     onPick={submit}

src/components/organisms/DataSearch/DataSearch.tsx

@@ -29,6 +29,7 @@ import { revealIndex, useReveal } from '@/hooks/useReveal';
 import {
     catalogueChips,
     catalogueTiles,
+    roundedCount,
     STARTING_POINT_QUERY,
     type SearchCatalogue,
 } from '@/lib/search/catalogue';
@@ -842,8 +843,10 @@ const DataSearch = ({ catalogue }: { catalogue: SearchCatalogue | null }) => {
                                 <h2 className={styles.buildTitle}>Build a Dataset</h2>
                                 <p className={styles.buildText}>
                                     Describe the data you need, tune the parameters, and export a
-                                    structured dataset drawn from 40,000+ indicators in the DFO
-                                    knowledge graph.
+                                    structured dataset drawn from{' '}
+                                    {catalogue &&
+                                        `${roundedCount(catalogue.counts.indicators)} indicators in `}
+                                    the DFO knowledge graph.
                                 </p>
                             </div>
                             {tiles.length > 0 && <StatTiles stats={tiles} />}

src/components/organisms/DownloadDataset/DownloadDataset.tsx

@@ -11,10 +11,16 @@ import DataPrompt from '@/components/molecules/DataPrompt/DataPrompt';
 import SectionHeading from '@/components/molecules/SectionHeading/SectionHeading';
 import StatTiles from '@/components/molecules/StatTiles/StatTiles';
 import { revealIndex, useReveal } from '@/hooks/useReveal';
-import { catalogueChips, catalogueTiles, type SearchCatalogue } from '@/lib/search/catalogue';
+import {
+    catalogueChips,
+    catalogueTiles,
+    roundedCount,
+    type SearchCatalogue,
+} from '@/lib/search/catalogue';
 
 // `catalogue` is the search catalogue the homepage loaded on the server, or
-// null: its examples are the chips, its counts the tiles.
+// null: its examples are the chips, its counts the tiles and the indicator
+// figure in the description.
 const DownloadDataset = ({ catalogue }: { catalogue: SearchCatalogue | null }) => {
     const router = useRouter();
     const sectionRef = useReveal<HTMLElement>();
@@ -46,7 +52,10 @@ const DownloadDataset = ({ catalogue }: { catalogue: SearchCatalogue | null }) =
                 <div className={styles.aside} data-reveal-group="trigger">
                     <p className={styles.description} data-reveal="text" style={revealIndex(0)}>
                         Describe the data you need, tune your parameters, and export a clean
-                        structured dataset from over 40,000 indicators with more to come.
+                        structured dataset
+                        {catalogue &&
+                            ` from ${roundedCount(catalogue.counts.indicators)} indicators`}
+                        .
                     </p>
                     <Button
                         variant="dark"

src/lib/search/catalogue.ts

@@ -29,10 +29,13 @@ export type AidCounts = {
     years: { first: number; last: number } | null;
 };
 
-/** What DFO holds as a whole. */
+/** What DFO holds as a whole. `indicators` counts the StatVars search can
+ *  serve and `datasets` the source datasets behind them. */
 export type CatalogueCounts = {
     publishers: number;
     countries: number;
+    indicators: number;
+    datasets: number;
     aid: AidCounts;
 };
 
@@ -59,8 +62,9 @@ export type PlaceCatalogue = {
     examples: CatalogueExample[];
 };
 
-/** The first idle chip. It shows the starting point from the catalogue the
- *  page already holds, with no search call. */
+/** The starting point's own question. Asked as a search, it shows the
+ *  starting point from the catalogue the page already holds, with no search
+ *  call. */
 export const STARTING_POINT_QUERY = 'What data do you have?';
 
 /** How many examples a declined out_of_scope answer offers. */
@@ -83,7 +87,14 @@ const isExample = (value: unknown): value is CatalogueExample => {
 
 type CatalogueBody = {
     catalogue_version?: unknown;
-    counts?: { publishers?: unknown; countries?: unknown; variables?: unknown; aid?: unknown };
+    counts?: {
+        publishers?: unknown;
+        countries?: unknown;
+        indicators?: unknown;
+        datasets?: unknown;
+        variables?: unknown;
+        aid?: unknown;
+    };
     examples?: unknown;
 };
 
@@ -141,14 +152,23 @@ const parseBody = (body: unknown, scoped: 'countries' | 'variables') => {
 /** The whole catalogue read off the wire, or null when the body is not one. */
 export function parseCatalogue(body: unknown): SearchCatalogue | null {
     const read = parseBody(body, 'countries');
+    const counts = (body as CatalogueBody | null)?.counts;
 
-    return (
-        read && {
-            catalogue_version: read.catalogue_version,
-            counts: { publishers: read.publishers, countries: read.scoped, aid: read.aid },
-            examples: read.examples,
-        }
-    );
+    if (!read || !isCount(counts?.indicators) || !isCount(counts.datasets)) {
+        return null;
+    }
+
+    return {
+        catalogue_version: read.catalogue_version,
+        counts: {
+            publishers: read.publishers,
+            countries: read.scoped,
+            indicators: counts.indicators,
+            datasets: counts.datasets,
+            aid: read.aid,
+        },
+        examples: read.examples,
+    };
 }
 
 /** One country's catalogue read off the wire, or null when the body is not
@@ -165,13 +185,30 @@ export function parsePlaceCatalogue(body: unknown): PlaceCatalogue | null {
     );
 }
 
-/** The idle prompt's chips: the starting point, then every example. */
+/** The idle prompt's chips: every example. */
 export function catalogueChips(catalogue: SearchCatalogue | null): string[] {
-    return [STARTING_POINT_QUERY, ...(catalogue?.examples ?? []).map((example) => example.text)];
+    return (catalogue?.examples ?? []).map((example) => example.text);
 }
 
 const formatCount = (value: number): string => value.toLocaleString('en-GB');
 
+// `en` writes millions as `1M`, where `en-GB` writes `1m`.
+const compactFormat = new Intl.NumberFormat('en', { notation: 'compact' });
+
+/** A count of 1,000 or more floored to one significant figure in compact
+ *  form, with a `+` when the floor drops part of it: 112,866 reads `100K+`,
+ *  100,000 reads `100K`. A smaller count reads exactly. */
+export function roundedCount(count: number): string {
+    if (count < 1000) {
+        return formatCount(count);
+    }
+
+    const magnitude = 10 ** Math.floor(Math.log10(count));
+    const floored = Math.floor(count / magnitude) * magnitude;
+
+    return `${compactFormat.format(floored)}${floored < count ? '+' : ''}`;
+}
+
 const publisherCount = (publishers: number): string =>
     `${formatCount(publishers)} ${publishers === 1 ? 'publisher' : 'publishers'}`;
 
@@ -213,7 +250,7 @@ export function declinedExamples(
     return (placed.length > 0 ? placed : (catalogue?.examples ?? [])).slice(0, count);
 }
 
-/** The stat tiles on /data and the homepage: publishers and countries, or
+/** The stat tiles on /data and the homepage: indicators and datasets, or
  *  none without a catalogue. */
 export function catalogueTiles(
     catalogue: SearchCatalogue | null,
@@ -223,7 +260,7 @@ export function catalogueTiles(
     }
 
     return [
-        { value: formatCount(catalogue.counts.publishers), label: 'Publishers' },
-        { value: formatCount(catalogue.counts.countries), label: 'Countries' },
+        { value: roundedCount(catalogue.counts.indicators), label: 'Indicators' },
+        { value: formatCount(catalogue.counts.datasets), label: 'Datasets' },
     ];
 }

src/lib/search/test/catalogue.test.ts

@@ -8,8 +8,8 @@ import {
     parseCatalogue,
     parsePlaceCatalogue,
     placeScopeLine,
+    roundedCount,
     scopeLine,
-    STARTING_POINT_QUERY,
     type CatalogueExample,
     type PlaceCatalogue,
     type SearchCatalogue,
@@ -32,6 +32,8 @@ const catalogue = (examples: CatalogueExample[]): SearchCatalogue => ({
     counts: {
         publishers: 40,
         countries: 205,
+        indicators: 112866,
+        datasets: 90,
         aid: { donors: 169, recipients: 205, years: { first: 1973, last: 2024 } },
     },
     examples,
@@ -99,18 +101,27 @@ test('parseCatalogue refuses a body without numeric counts', () => {
     assert.equal(parseCatalogue({ ...whole, examples: undefined }), null);
 });
 
-test('catalogueChips puts the starting point first, then every example', () => {
+test('parseCatalogue refuses a whole body missing indicators or datasets', () => {
+    for (const field of ['indicators', 'datasets'] as const) {
+        const counts = Object.fromEntries(
+            Object.entries(wholeCatalogueBody.counts).filter(([key]) => key !== field),
+        );
+
+        assert.equal(parseCatalogue({ ...wholeCatalogueBody, counts }), null, field);
+    }
+});
+
+test('catalogueChips offers every example', () => {
     assert.deepEqual(catalogueChips(whole), [
-        STARTING_POINT_QUERY,
         'Health aid to Ethiopia',
         'Humanitarian aid from Germany',
         'Debt service paid by Ghana',
         'Population of Kenya',
     ]);
 });
 
-test('catalogueChips offers the starting point alone without a catalogue', () => {
-    assert.deepEqual(catalogueChips(null), [STARTING_POINT_QUERY]);
+test('catalogueChips offers no chips without a catalogue', () => {
+    assert.deepEqual(catalogueChips(null), []);
 });
 
 test('scopeLine counts publishers and countries for the whole catalogue', () => {
@@ -164,10 +175,27 @@ test('declinedExamples falls back to the first three of the whole catalogue', ()
     assert.deepEqual(declinedExamples(null, null), []);
 });
 
-test('catalogueTiles shows publishers and countries, or nothing without a catalogue', () => {
+test('catalogueTiles shows indicators and datasets, or nothing without a catalogue', () => {
     assert.deepEqual(catalogueTiles(whole), [
-        { value: '40', label: 'Publishers' },
-        { value: '205', label: 'Countries' },
+        { value: '100K+', label: 'Indicators' },
+        { value: '90', label: 'Datasets' },
     ]);
     assert.deepEqual(catalogueTiles(null), []);
 });
+
+for (const [count, shown] of [
+    [0, '0'],
+    [999, '999'],
+    [1000, '1K'],
+    [1234, '1K+'],
+    [100000, '100K'],
+    [112866, '100K+'],
+    [250000, '200K+'],
+    [999999, '900K+'],
+    [1000000, '1M'],
+    [1234567, '1M+'],
+] as const) {
+    test(`roundedCount shows ${count} as ${shown}`, () => {
+        assert.equal(roundedCount(count), shown);
+    });
+}

src/lib/search/test/fixtures/catalogue-bodies.ts

@@ -1,8 +1,8 @@
 /**
  * `GET /api/search/catalogue` bodies, written to the API's `CatalogueResponse`
  * model (dfo-apis `src/search/catalogue/response.py`) and checked against it
- * by scripts/check-search-fixtures.ts. The whole catalogue counts countries;
- * one country's counts variables in their place, and either may carry
+ * by scripts/check-search-fixtures.ts. The whole catalogue counts countries,
+ * indicators and datasets; one country's counts variables in their place, and either may carry
  * `aid.years: null` when the build holds no CRS rows.
  */
 
@@ -14,6 +14,8 @@ export const wholeCatalogueBody = {
     counts: {
         publishers: 40,
         countries: 205,
+        indicators: 112866,
+        datasets: 90,
         aid: { donors: 169, recipients: 205, years: { first: 1973, last: 2024 } },
     },
     examples: [