feat(web): better search with full zone name (#7318)

* feat(web): better search with full zone name * feat(web): empty state and leave according at bottom on search
electricitymaps · Oct 14, 2024 · 5e480d5 · 5e480d5
1 parent 8289815
commit 5e480d5
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 16 deletions.
diff --git a/web/src/features/panels/ranking-panel/RankingPanel.tsx b/web/src/features/panels/ranking-panel/RankingPanel.tsx
@@ -6,7 +6,7 @@ import { useAtomValue } from 'jotai';
 import { ReactElement, useCallback, useState } from 'react';
 import { Helmet } from 'react-helmet-async';
 import { useTranslation } from 'react-i18next';
-import { metaTitleSuffix, Mode } from 'utils/constants';
+import { metaTitleSuffix } from 'utils/constants';
 import {
   isConsumptionAtom,
   selectedDatetimeStringAtom,
@@ -50,28 +50,37 @@ export default function RankingPanel(): ReactElement {
     (zone) =>
       zone.countryName?.toLowerCase().includes(searchTerm) ||
       zone.zoneName?.toLowerCase().includes(searchTerm) ||
-      zone.zoneId.toLowerCase().includes(searchTerm)
+      zone.zoneId.toLowerCase().includes(searchTerm) ||
+      zone.fullZoneName?.toLowerCase().includes(searchTerm)
   );
 
   return (
-    <div className="flex max-h-[calc(100vh-236px)] flex-col py-3 pl-4 pr-1 ">
+    <div className="flex h-[calc(100vh-236px)] w-full flex-col py-3 pl-4 pr-1">
       <Helmet prioritizeSeoTags>
         <title>{t('misc.maintitle') + metaTitleSuffix}</title>
         <link rel="canonical" href={canonicalUrl} />
       </Helmet>
-      <div className="pb-5">
-        <h1>{t('ranking-panel.title')}</h1>
-        <h2 className="text-sm">{t('ranking-panel.subtitle')}</h2>
+
+      <div className="flex flex-grow flex-col overflow-hidden ">
+        <div className="pb-5">
+          <h1>{t('ranking-panel.title')}</h1>
+          <h2 className="text-sm">{t('ranking-panel.subtitle')}</h2>
+        </div>
+
+        <SearchBar
+          placeholder={t('ranking-panel.search')}
+          searchHandler={inputHandler}
+          value={searchTerm}
+        />
+
+        <div className="flex-grow overflow-y-auto">
+          {filteredList.length === 0 && <div>{t('ranking-panel.no-results')}</div>}
+          <VirtualizedZoneList data={filteredList} />
+          {/* TODO: Revise the margin here once the scrollbars are fixed */}
+        </div>
       </div>
 
-      <SearchBar
-        placeholder={t('ranking-panel.search')}
-        searchHandler={inputHandler}
-        value={searchTerm}
-      />
-      <VirtualizedZoneList data={filteredList} />
-      {/* TODO: Revise the margin here once the scrollbars are fixed */}
-      <div className="my-2 pr-3">
+      <div className="mt-auto py-2 pr-3">
         <RankingPanelAccordion />
         <HorizontalDivider />
         <SocialIconRow />

diff --git a/web/src/features/panels/ranking-panel/ZoneList.tsx b/web/src/features/panels/ranking-panel/ZoneList.tsx
@@ -16,6 +16,7 @@ export interface ZoneRowType {
   co2intensity?: number | null;
   countryName?: string;
   zoneName?: string;
+  fullZoneName?: string;
 }
 
 function ZoneRow({ zoneId, color, ranking, countryName, zoneName }: ZoneRowType) {

diff --git a/web/src/features/panels/ranking-panel/__snapshots__/getRankingPanelData.test.ts.snap b/web/src/features/panels/ranking-panel/__snapshots__/getRankingPanelData.test.ts.snap
@@ -6,6 +6,7 @@ exports[`getRankedState > sorts the zones by carbon intensity in ascending order
     "co2intensity": 5,
     "color": "color",
     "countryName": "",
+    "fullZoneName": "",
     "ranking": 1,
     "zoneId": "zone2",
     "zoneName": "",
@@ -14,6 +15,7 @@ exports[`getRankedState > sorts the zones by carbon intensity in ascending order
     "co2intensity": 10,
     "color": "color",
     "countryName": "",
+    "fullZoneName": "",
     "ranking": 2,
     "zoneId": "zone1",
     "zoneName": "",
@@ -22,6 +24,7 @@ exports[`getRankedState > sorts the zones by carbon intensity in ascending order
     "co2intensity": 15,
     "color": "color",
     "countryName": "",
+    "fullZoneName": "",
     "ranking": 3,
     "zoneId": "zone4",
     "zoneName": "",
@@ -30,6 +33,7 @@ exports[`getRankedState > sorts the zones by carbon intensity in ascending order
     "co2intensity": 25,
     "color": "color",
     "countryName": "",
+    "fullZoneName": "",
     "ranking": 4,
     "zoneId": "zone6",
     "zoneName": "",
@@ -38,6 +42,7 @@ exports[`getRankedState > sorts the zones by carbon intensity in ascending order
     "co2intensity": 25,
     "color": "color",
     "countryName": "",
+    "fullZoneName": "",
     "ranking": 5,
     "zoneId": "zone8",
     "zoneName": "",
@@ -51,6 +56,7 @@ exports[`getRankedState > sorts the zones by carbon intensity in descending orde
     "co2intensity": 25,
     "color": "color",
     "countryName": "",
+    "fullZoneName": "",
     "ranking": 1,
     "zoneId": "zone6",
     "zoneName": "",
@@ -59,6 +65,7 @@ exports[`getRankedState > sorts the zones by carbon intensity in descending orde
     "co2intensity": 25,
     "color": "color",
     "countryName": "",
+    "fullZoneName": "",
     "ranking": 2,
     "zoneId": "zone8",
     "zoneName": "",
@@ -67,6 +74,7 @@ exports[`getRankedState > sorts the zones by carbon intensity in descending orde
     "co2intensity": 15,
     "color": "color",
     "countryName": "",
+    "fullZoneName": "",
     "ranking": 3,
     "zoneId": "zone4",
     "zoneName": "",
@@ -75,6 +83,7 @@ exports[`getRankedState > sorts the zones by carbon intensity in descending orde
     "co2intensity": 10,
     "color": "color",
     "countryName": "",
+    "fullZoneName": "",
     "ranking": 4,
     "zoneId": "zone1",
     "zoneName": "",
@@ -83,6 +92,7 @@ exports[`getRankedState > sorts the zones by carbon intensity in descending orde
     "co2intensity": 5,
     "color": "color",
     "countryName": "",
+    "fullZoneName": "",
     "ranking": 5,
     "zoneId": "zone2",
     "zoneName": "",

diff --git a/web/src/features/panels/ranking-panel/getRankingPanelData.ts b/web/src/features/panels/ranking-panel/getRankingPanelData.ts
@@ -1,4 +1,4 @@
-import { getCountryName, getZoneName } from 'translation/translation';
+import { getCountryName, getFullZoneName, getZoneName } from 'translation/translation';
 import type { GridState, StateZoneData, ZoneKey } from 'types';
 import { SpatialAggregate } from 'utils/constants';
 import { getCarbonIntensity } from 'utils/helpers';
@@ -76,6 +76,7 @@ export const getRankedState = (
       co2intensity,
       countryName: getCountryName(key),
       zoneName: getZoneName(key),
+      fullZoneName: getFullZoneName(key),
       ranking: ranking,
     });
     ranking++; // Increment the ranking for the next zone.

diff --git a/web/src/locales/en.json b/web/src/locales/en.json
@@ -12,7 +12,8 @@
   "ranking-panel": {
     "title": "Climate Impact by Area",
     "subtitle": "Ranked by carbon intensity of electricity consumed (gCO₂eq/kWh)",
-    "search": "Search areas"
+    "search": "Search areas",
+    "no-results": "No results found for this search 🌍"
   },
   "button": {
     "reddit": "Join r/electricitymaps",