From 3fcffec88946f7b57aeb8b518e976a59289ef452 Mon Sep 17 00:00:00 2001
From: David Lougheed <david.lougheed@gmail.com>
Date: Mon, 25 Nov 2024 17:06:51 -0500
Subject: [PATCH 01/17] feat: search count help text
 https://redmine.c3g-app.sd4h.ca/issues/2412

---
 src/js/components/Overview/Counts.tsx         | 50 +++++++------------
 .../components/Search/SearchResultsCounts.tsx |  8 +--
 .../components/Util/CountsTitleWithHelp.tsx   | 35 +++++++++++++
 src/js/types/entities.ts                      |  1 +
 4 files changed, 58 insertions(+), 36 deletions(-)
 create mode 100644 src/js/components/Util/CountsTitleWithHelp.tsx
 create mode 100644 src/js/types/entities.ts

diff --git a/src/js/components/Overview/Counts.tsx b/src/js/components/Overview/Counts.tsx
index 16c29b1c..3ac2789b 100644
--- a/src/js/components/Overview/Counts.tsx
+++ b/src/js/components/Overview/Counts.tsx
@@ -1,13 +1,14 @@
-import { type CSSProperties, type ReactNode } from 'react';
-import { Card, Popover, Space, Statistic, Typography } from 'antd';
-import { ExperimentOutlined, InfoCircleOutlined, TeamOutlined } from '@ant-design/icons';
+import type { CSSProperties, ReactNode } from 'react';
+import { Card, Space, Statistic, Typography } from 'antd';
+import { ExperimentOutlined, TeamOutlined } from '@ant-design/icons';
 import { BiDna } from 'react-icons/bi';
 
-import { T_PLURAL_COUNT } from '@/constants/i18n';
+import CountsTitleWithHelp from '@/components/Util/CountsTitleWithHelp';
 import { BOX_SHADOW, COUNTS_FILL } from '@/constants/overviewConstants';
 import { NO_RESULTS_DASHES } from '@/constants/searchConstants';
 import { useAppSelector, useTranslationFn } from '@/hooks';
 import { useCanSeeUncensoredCounts } from '@/hooks/censorship';
+import type { BentoEntity } from '@/types/entities';
 
 const styles: Record<string, CSSProperties> = {
   countCard: {
@@ -17,7 +18,7 @@ const styles: Record<string, CSSProperties> = {
   },
 };
 
-const CountsHelp = ({ children }: { children: ReactNode }) => <div style={{ maxWidth: 360 }}>{children}</div>;
+type CountEntry = { entity: BentoEntity; icon: ReactNode; count: number };
 
 const Counts = () => {
   const t = useTranslationFn();
@@ -27,7 +28,7 @@ const Counts = () => {
   const uncensoredCounts = useCanSeeUncensoredCounts();
 
   // Break down help into multiple sentences inside an array to make translation a bit easier.
-  const data = [
+  const data: CountEntry[] = [
     {
       entity: 'individual',
       icon: <TeamOutlined />,
@@ -49,32 +50,17 @@ const Counts = () => {
     <>
       <Typography.Title level={3}>{t('Counts')}</Typography.Title>
       <Space wrap>
-        {data.map(({ entity, icon, count }, i) => {
-          const title = t(`entities.${entity}`, T_PLURAL_COUNT);
-          return (
-            <Card key={i} style={{ ...styles.countCard, height: isFetchingData ? 138 : 114 }}>
-              <Statistic
-                title={
-                  <Space>
-                    {title}
-                    {
-                      <Popover
-                        title={title}
-                        content={<CountsHelp>{t(`entities.${entity}_help`, { joinArrays: ' ' })}</CountsHelp>}
-                      >
-                        <InfoCircleOutlined />
-                      </Popover>
-                    }
-                  </Space>
-                }
-                value={count || (uncensoredCounts ? count : NO_RESULTS_DASHES)}
-                valueStyle={{ color: COUNTS_FILL }}
-                prefix={icon}
-                loading={isFetchingData}
-              />
-            </Card>
-          );
-        })}
+        {data.map(({ entity, icon, count }, i) => (
+          <Card key={i} style={{ ...styles.countCard, height: isFetchingData ? 138 : 114 }}>
+            <Statistic
+              title={<CountsTitleWithHelp entity={entity} />}
+              value={count || (uncensoredCounts ? count : NO_RESULTS_DASHES)}
+              valueStyle={{ color: COUNTS_FILL }}
+              prefix={icon}
+              loading={isFetchingData}
+            />
+          </Card>
+        ))}
       </Space>
     </>
   );
diff --git a/src/js/components/Search/SearchResultsCounts.tsx b/src/js/components/Search/SearchResultsCounts.tsx
index f3547673..78279b32 100644
--- a/src/js/components/Search/SearchResultsCounts.tsx
+++ b/src/js/components/Search/SearchResultsCounts.tsx
@@ -3,7 +3,7 @@ import { Skeleton, Space, Statistic } from 'antd';
 import { ExperimentOutlined, TeamOutlined } from '@ant-design/icons';
 import { BiDna } from 'react-icons/bi';
 
-import { T_PLURAL_COUNT } from '@/constants/i18n';
+import CountsTitleWithHelp from '@/components/Util/CountsTitleWithHelp';
 import { COUNTS_FILL } from '@/constants/overviewConstants';
 import { NO_RESULTS_DASHES } from '@/constants/searchConstants';
 import { useTranslationFn } from '@/hooks';
@@ -59,7 +59,7 @@ const SearchResultsCounts = ({
             ].join(' ')}
           >
             <Statistic
-              title={t('entities.individual', T_PLURAL_COUNT)}
+              title={<CountsTitleWithHelp entity="individual" />}
               value={
                 hasInsufficientData
                   ? t(message ?? '')
@@ -72,14 +72,14 @@ const SearchResultsCounts = ({
             />
           </div>
           <Statistic
-            title={t('entities.biosample', T_PLURAL_COUNT)}
+            title={<CountsTitleWithHelp entity="biosample" />}
             value={hasInsufficientData || (!uncensoredCounts && !biosampleCount) ? NO_RESULTS_DASHES : biosampleCount}
             valueStyle={STAT_STYLE}
             // Slight fixup for alignment of non-Antd icon:
             prefix={<BiDna style={{ marginTop: 6, verticalAlign: 'top' }} />}
           />
           <Statistic
-            title={t('entities.experiment', T_PLURAL_COUNT)}
+            title={<CountsTitleWithHelp entity="experiment" />}
             value={hasInsufficientData || (!uncensoredCounts && !experimentCount) ? NO_RESULTS_DASHES : experimentCount}
             valueStyle={STAT_STYLE}
             prefix={<ExperimentOutlined />}
diff --git a/src/js/components/Util/CountsTitleWithHelp.tsx b/src/js/components/Util/CountsTitleWithHelp.tsx
new file mode 100644
index 00000000..54f1a341
--- /dev/null
+++ b/src/js/components/Util/CountsTitleWithHelp.tsx
@@ -0,0 +1,35 @@
+import type { ReactNode } from 'react';
+import { Popover, Space } from 'antd';
+import { InfoCircleOutlined } from '@ant-design/icons';
+
+import { T_PLURAL_COUNT } from '@/constants/i18n';
+import { useTranslationFn } from '@/hooks';
+import type { BentoEntity } from '@/types/entities';
+
+const CountsHelpPopoverText = ({ children }: { children: ReactNode }) => (
+  <div style={{ maxWidth: 360 }}>{children}</div>
+);
+
+const CountsTitleWithHelp = ({ entity }: CountsHelpProps) => {
+  const t = useTranslationFn();
+
+  const title = t(`entities.${entity}`, T_PLURAL_COUNT);
+
+  return (
+    <Space>
+      {title}
+      <Popover
+        title={title}
+        content={<CountsHelpPopoverText>{t(`entities.${entity}_help`, { joinArrays: ' ' })}</CountsHelpPopoverText>}
+      >
+        <InfoCircleOutlined />
+      </Popover>
+    </Space>
+  );
+};
+
+type CountsHelpProps = {
+  entity: BentoEntity;
+};
+
+export default CountsTitleWithHelp;
diff --git a/src/js/types/entities.ts b/src/js/types/entities.ts
new file mode 100644
index 00000000..3404ab22
--- /dev/null
+++ b/src/js/types/entities.ts
@@ -0,0 +1 @@
+export type BentoEntity = 'phenopacket' | 'individual' | 'biosample' | 'experiment' | 'variant';

From ce383732099682c39420e2cdf14cd179e7e65538 Mon Sep 17 00:00:00 2001
From: David Lougheed <david.lougheed@gmail.com>
Date: Tue, 26 Nov 2024 10:56:20 -0500
Subject: [PATCH 02/17] fix: missing beacon network configuration + docs for
 env vars

---
 README.md             | 15 ++++++++++++++-
 create_config_prod.js |  1 +
 src/public/config.js  |  1 +
 3 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index dcd0c252..d18aef91 100755
--- a/README.md
+++ b/README.md
@@ -8,6 +8,19 @@ it directly.
 ## Prerequisites:
 - Node Package Manager
 
-## Translations in dev mode
+## Development
+
+### Adding a new environment configuration variable
+
+Any new environment configuration variable must be registered in several places:
+
+* [`./create_config_prod.js`](./create_config_prod.js): mapping the environment variable to a config object entry for 
+  production
+* [`./webpack.config.js`](./webpack.config.js): setting a default value for Webpack building
+* [`./src/public/config.js`](./src/public/config.js): creating the shape of the global config object
+* [`./src/js/config.ts`](./src/js/config.ts): loading from the global config object (production) or from the environment 
+  via Webpack (development)
+
+### Translations in dev mode
 Add your English to French translations in `dist/public/locales/fr/translation_fr.json` for them to appear on the
 website.
diff --git a/create_config_prod.js b/create_config_prod.js
index 57fdf8e8..c24b95f1 100644
--- a/create_config_prod.js
+++ b/create_config_prod.js
@@ -6,6 +6,7 @@ const siteConfig = {
   TRANSLATED: parseBoolean(process.env.BENTO_PUBLIC_TRANSLATED),
   BEACON_URL: process.env.BEACON_URL || null,
   BEACON_UI_ENABLED: parseBoolean(process.env.BENTO_BEACON_UI_ENABLED),
+  BEACON_NETWORK_ENABLED: parseBoolean(process.env.BENTO_BEACON_NETWORK_ENABLED),
 
   // Authentication
   PUBLIC_URL: process.env.BENTO_PUBLIC_URL || null,
diff --git a/src/public/config.js b/src/public/config.js
index 8e98a7ef..779177de 100644
--- a/src/public/config.js
+++ b/src/public/config.js
@@ -7,6 +7,7 @@ BENTO_PUBLIC_CONFIG = {
   TRANSLATED: null,
   BEACON_URL: null,
   BEACON_UI_ENABLED: null,
+  BEACON_NETWORK_ENABLED: null,
   // Authentication
   PUBLIC_URL: null,
   CLIENT_ID: null,

From 6244248990960c6ae55dd47745e55ceb08545dc1 Mon Sep 17 00:00:00 2001
From: David Lougheed <david.lougheed@gmail.com>
Date: Tue, 26 Nov 2024 10:59:12 -0500
Subject: [PATCH 03/17] docs: improve env var notes

---
 README.md | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/README.md b/README.md
index d18aef91..fee95e8d 100755
--- a/README.md
+++ b/README.md
@@ -12,14 +12,16 @@ it directly.
 
 ### Adding a new environment configuration variable
 
-Any new environment configuration variable must be registered in several places:
+Any new environment / configuration variable must be registered in several places:
 
-* [`./create_config_prod.js`](./create_config_prod.js): mapping the environment variable to a config object entry for 
-  production
-* [`./webpack.config.js`](./webpack.config.js): setting a default value for Webpack building
-* [`./src/public/config.js`](./src/public/config.js): creating the shape of the global config object
-* [`./src/js/config.ts`](./src/js/config.ts): loading from the global config object (production) or from the environment 
-  via Webpack (development)
+1. [`./create_config_prod.js`](./create_config_prod.js): mapping the environment variable to a config object entry for 
+   production.
+2. [`./webpack.config.js`](./webpack.config.js): setting a default value for the environment variable; used in Webpack development 
+   builds.
+3. [`./src/public/config.js`](./src/public/config.js): creating the shape of the global config object (using the config object entry key, 
+   mapped to in 1.)
+4. [`./src/js/config.ts`](./src/js/config.ts): loading from the global config object (production) via key or from the 
+   environment variable directly, through Webpack replacement (development).
 
 ### Translations in dev mode
 Add your English to French translations in `dist/public/locales/fr/translation_fr.json` for them to appear on the

From 8340358180908f989d2881bca247dee44333fe4d Mon Sep 17 00:00:00 2001
From: David Lougheed <david.lougheed@gmail.com>
Date: Tue, 26 Nov 2024 11:15:08 -0500
Subject: [PATCH 04/17] chore: bump version to 0.22.0

---
 package-lock.json | 4 ++--
 package.json      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 41e12cfc..9f8d24b4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "bento_public",
-  "version": "0.21.0",
+  "version": "0.22.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "bento_public",
-      "version": "0.21.0",
+      "version": "0.22.0",
       "license": "LGPL-3.0-only",
       "dependencies": {
         "@ant-design/icons": "^5.5.1",
diff --git a/package.json b/package.json
index 22abb4a3..f2b75108 100755
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "bento_public",
-  "version": "0.21.0",
+  "version": "0.22.0",
   "description": "A publicly accessible portal for clinical datasets, where users are able to see high-level statistics of the data available through predefined variables of interest and search the data using limited variables at a time. This portal allows users to gain a generic understanding of the data available (secure and firewalled) without the need to access it directly. Initially, this portal facilitates the search in English language only, but the French language will be added at a later time.",
   "main": "index.js",
   "scripts": {

From 08b182b1526e7fde989c7c5390f144d40fb814c9 Mon Sep 17 00:00:00 2001
From: David Lougheed <david.lougheed@gmail.com>
Date: Tue, 26 Nov 2024 14:54:30 -0500
Subject: [PATCH 05/17] chore: address confusing UX for network
 chromosome/assembly

---
 src/js/components/Beacon/BeaconCommon/VariantsForm.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/js/components/Beacon/BeaconCommon/VariantsForm.tsx b/src/js/components/Beacon/BeaconCommon/VariantsForm.tsx
index 4a05a14d..3184d81d 100644
--- a/src/js/components/Beacon/BeaconCommon/VariantsForm.tsx
+++ b/src/js/components/Beacon/BeaconCommon/VariantsForm.tsx
@@ -92,7 +92,7 @@ const VariantsForm = ({ isNetworkQuery, beaconAssemblyIds }: VariantsFormProps)
   const formFields = {
     referenceName: {
       name: 'Chromosome',
-      placeholder: !currentAssemblyID ? t('beacon.select_asm') : '',
+      placeholder: !isNetworkQuery && !currentAssemblyID ? t('beacon.select_asm') : '',
       initialValue: '',
     },
     start: {
@@ -130,7 +130,7 @@ const VariantsForm = ({ isNetworkQuery, beaconAssemblyIds }: VariantsFormProps)
         <Col span={8}>
           <VariantInput
             field={formFields.referenceName}
-            disabled={variantsError || !currentAssemblyID}
+            disabled={variantsError || (!isNetworkQuery && !currentAssemblyID)}
             mode={assemblySelect ? { type: 'select', options: availableContigs } : { type: 'input' }}
           />
         </Col>

From bed806a282dc39cfb095c4217c1541ebabff5f90 Mon Sep 17 00:00:00 2001
From: David Lougheed <david.lougheed@gmail.com>
Date: Tue, 26 Nov 2024 14:59:14 -0500
Subject: [PATCH 06/17] chore(network): don't re-show help indicator for every
 node

---
 .../components/Search/SearchResultsCounts.tsx |  6 +++---
 .../components/Util/CountsTitleWithHelp.tsx   | 19 ++++++++++++-------
 2 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/src/js/components/Search/SearchResultsCounts.tsx b/src/js/components/Search/SearchResultsCounts.tsx
index 78279b32..a5e55e2a 100644
--- a/src/js/components/Search/SearchResultsCounts.tsx
+++ b/src/js/components/Search/SearchResultsCounts.tsx
@@ -59,7 +59,7 @@ const SearchResultsCounts = ({
             ].join(' ')}
           >
             <Statistic
-              title={<CountsTitleWithHelp entity="individual" />}
+              title={<CountsTitleWithHelp entity="individual" showHelp={!isBeaconNetwork} />}
               value={
                 hasInsufficientData
                   ? t(message ?? '')
@@ -72,14 +72,14 @@ const SearchResultsCounts = ({
             />
           </div>
           <Statistic
-            title={<CountsTitleWithHelp entity="biosample" />}
+            title={<CountsTitleWithHelp entity="biosample" showHelp={!isBeaconNetwork} />}
             value={hasInsufficientData || (!uncensoredCounts && !biosampleCount) ? NO_RESULTS_DASHES : biosampleCount}
             valueStyle={STAT_STYLE}
             // Slight fixup for alignment of non-Antd icon:
             prefix={<BiDna style={{ marginTop: 6, verticalAlign: 'top' }} />}
           />
           <Statistic
-            title={<CountsTitleWithHelp entity="experiment" />}
+            title={<CountsTitleWithHelp entity="experiment" showHelp={!isBeaconNetwork} />}
             value={hasInsufficientData || (!uncensoredCounts && !experimentCount) ? NO_RESULTS_DASHES : experimentCount}
             valueStyle={STAT_STYLE}
             prefix={<ExperimentOutlined />}
diff --git a/src/js/components/Util/CountsTitleWithHelp.tsx b/src/js/components/Util/CountsTitleWithHelp.tsx
index 54f1a341..e617be9c 100644
--- a/src/js/components/Util/CountsTitleWithHelp.tsx
+++ b/src/js/components/Util/CountsTitleWithHelp.tsx
@@ -10,26 +10,31 @@ const CountsHelpPopoverText = ({ children }: { children: ReactNode }) => (
   <div style={{ maxWidth: 360 }}>{children}</div>
 );
 
-const CountsTitleWithHelp = ({ entity }: CountsHelpProps) => {
+const CountsTitleWithHelp = ({ entity, showHelp }: CountsHelpProps) => {
   const t = useTranslationFn();
 
+  showHelp = showHelp ?? true; // If undefined, we should show help by default.
+
   const title = t(`entities.${entity}`, T_PLURAL_COUNT);
 
   return (
     <Space>
       {title}
-      <Popover
-        title={title}
-        content={<CountsHelpPopoverText>{t(`entities.${entity}_help`, { joinArrays: ' ' })}</CountsHelpPopoverText>}
-      >
-        <InfoCircleOutlined />
-      </Popover>
+      {showHelp && (
+        <Popover
+          title={title}
+          content={<CountsHelpPopoverText>{t(`entities.${entity}_help`, { joinArrays: ' ' })}</CountsHelpPopoverText>}
+        >
+          <InfoCircleOutlined />
+        </Popover>
+      )}
     </Space>
   );
 };
 
 type CountsHelpProps = {
   entity: BentoEntity;
+  showHelp?: boolean;
 };
 
 export default CountsTitleWithHelp;

From 688e7496fc1892942f8b7783b0e353a718f4a0f3 Mon Sep 17 00:00:00 2001
From: David Lougheed <david.lougheed@gmail.com>
Date: Tue, 26 Nov 2024 15:14:56 -0500
Subject: [PATCH 07/17] chore(beacon): don't clear chrom if availableContigs
 stays blank

---
 .../Beacon/BeaconCommon/VariantsForm.tsx      | 31 ++++++++++++-------
 1 file changed, 19 insertions(+), 12 deletions(-)

diff --git a/src/js/components/Beacon/BeaconCommon/VariantsForm.tsx b/src/js/components/Beacon/BeaconCommon/VariantsForm.tsx
index 3184d81d..fad72f65 100644
--- a/src/js/components/Beacon/BeaconCommon/VariantsForm.tsx
+++ b/src/js/components/Beacon/BeaconCommon/VariantsForm.tsx
@@ -1,4 +1,4 @@
-import { type CSSProperties, useEffect, useMemo } from 'react';
+import { type CSSProperties, useEffect, useState } from 'react';
 
 import { Col, Form, Row } from 'antd';
 import type { DefaultOptionType } from 'antd/es/select/index';
@@ -70,17 +70,24 @@ const VariantsForm = ({ isNetworkQuery, beaconAssemblyIds }: VariantsFormProps)
   const form = Form.useFormInstance();
   const currentAssemblyID = Form.useWatch('Assembly ID', form);
 
-  // Right now, we cannot figure out the contig options for the network, so we fall back to a normal input box.
-  const availableContigs = useMemo<ContigOptionType[]>(
-    () =>
-      !isNetworkQuery && currentAssemblyID && genomesByID[currentAssemblyID]
-        ? genomesByID[currentAssemblyID].contigs
-            .map(contigToOption)
-            .sort(contigOptionSort)
-            .filter(filterOutHumanLikeExtraContigs)
-        : [],
-    [isNetworkQuery, currentAssemblyID, genomesByID]
-  );
+  const [availableContigs, setAvailableContigs] = useState<ContigOptionType[]>([]);
+
+  useEffect(() => {
+    // Right now, we cannot figure out the contig options for the network, so we fall back to a normal input box.
+    if (!isNetworkQuery && currentAssemblyID && genomesByID[currentAssemblyID]) {
+      setAvailableContigs(
+        genomesByID[currentAssemblyID].contigs
+          .map(contigToOption)
+          .sort(contigOptionSort)
+          .filter(filterOutHumanLikeExtraContigs)
+      );
+    } else {
+      // Keep existing memory address for existing empty array if availableContigs was already empty, to avoid
+      // re-render/clearing effect.
+      setAvailableContigs((ac) => (ac.length ? [] : ac));
+    }
+  }, [isNetworkQuery, currentAssemblyID, genomesByID]);
+
   const assemblySelect = !!availableContigs.length;
 
   useEffect(() => {

From b3f9eceafc4ad1dd3b753bd56226a457464c0f2b Mon Sep 17 00:00:00 2001
From: David Lougheed <david.lougheed@gmail.com>
Date: Wed, 27 Nov 2024 17:01:08 -0500
Subject: [PATCH 08/17] refact(overview): use hook for calculating chart
 clickability

---
 src/js/components/Overview/ChartCard.tsx      |  6 ++---
 .../Overview/OverviewDisplayData.tsx          | 13 +++++++++--
 .../components/Overview/OverviewSection.tsx   | 12 ++++++++--
 src/js/components/Overview/PublicOverview.tsx | 13 +++++------
 src/js/features/data/data.store.ts            | 22 +------------------
 src/js/features/data/hooks.ts                 | 14 ++++++++++++
 .../features/data/makeGetDataRequest.thunk.ts |  1 -
 src/js/types/data.ts                          |  1 -
 8 files changed, 45 insertions(+), 37 deletions(-)
 create mode 100644 src/js/features/data/hooks.ts

diff --git a/src/js/components/Overview/ChartCard.tsx b/src/js/components/Overview/ChartCard.tsx
index d2c3a4c3..939bd521 100644
--- a/src/js/components/Overview/ChartCard.tsx
+++ b/src/js/components/Overview/ChartCard.tsx
@@ -12,7 +12,7 @@ import SmallChartCardTitle from '@/components/Util/SmallChartCardTitle';
 const CARD_STYLE: CSSProperties = { height: '415px', borderRadius: '11px', ...BOX_SHADOW };
 const ROW_EMPTY_STYLE: CSSProperties = { height: `${CHART_HEIGHT}px` };
 
-const ChartCard = memo(({ section, chart, onRemoveChart }: ChartCardProps) => {
+const ChartCard = memo(({ section, chart, onRemoveChart, searchable }: ChartCardProps) => {
   const t = useTranslationFn();
   const containerRef = useRef<HTMLDivElement>(null);
   const width = useElementWidth(containerRef, chart.width);
@@ -21,7 +21,6 @@ const ChartCard = memo(({ section, chart, onRemoveChart }: ChartCardProps) => {
     data,
     field: { id, description, title, config },
     chartConfig,
-    isSearchable,
   } = chart;
 
   const extraOptionsData = [
@@ -59,7 +58,7 @@ const ChartCard = memo(({ section, chart, onRemoveChart }: ChartCardProps) => {
             units={config?.units || ''}
             id={id}
             key={id}
-            isClickable={isSearchable}
+            isClickable={!!searchable}
           />
         ) : (
           <Row style={ROW_EMPTY_STYLE} justify="center" align="middle">
@@ -77,6 +76,7 @@ export interface ChartCardProps {
   section: string;
   chart: ChartDataField;
   onRemoveChart: (arg: { section: string; id: string }) => void;
+  searchable?: boolean;
 }
 
 export default ChartCard;
diff --git a/src/js/components/Overview/OverviewDisplayData.tsx b/src/js/components/Overview/OverviewDisplayData.tsx
index c0f735ac..f9c72370 100644
--- a/src/js/components/Overview/OverviewDisplayData.tsx
+++ b/src/js/components/Overview/OverviewDisplayData.tsx
@@ -11,7 +11,7 @@ import ChartCard from './ChartCard';
 
 import type { ChartDataField } from '@/types/data';
 
-const OverviewDisplayData = ({ section, allCharts }: OverviewDisplayDataProps) => {
+const OverviewDisplayData = ({ section, allCharts, searchableFields }: OverviewDisplayDataProps) => {
   const dispatch = useAppDispatch();
   const isSmallScreen = useSmallScreen();
 
@@ -31,7 +31,15 @@ const OverviewDisplayData = ({ section, allCharts }: OverviewDisplayDataProps) =
   );
 
   const renderItem = (chart: ChartDataField) => {
-    return <ChartCard key={chart.id} chart={chart} section={section} onRemoveChart={onRemoveChart} />;
+    return (
+      <ChartCard
+        key={chart.id}
+        chart={chart}
+        section={section}
+        onRemoveChart={onRemoveChart}
+        searchable={searchableFields.has(chart.id)}
+      />
+    );
   };
 
   if (isSmallScreen) {
@@ -48,6 +56,7 @@ const OverviewDisplayData = ({ section, allCharts }: OverviewDisplayDataProps) =
 export interface OverviewDisplayDataProps {
   section: string;
   allCharts: ChartDataField[];
+  searchableFields: Set<string>;
 }
 
 export default OverviewDisplayData;
diff --git a/src/js/components/Overview/OverviewSection.tsx b/src/js/components/Overview/OverviewSection.tsx
index b930c3d4..ee3d72dc 100644
--- a/src/js/components/Overview/OverviewSection.tsx
+++ b/src/js/components/Overview/OverviewSection.tsx
@@ -4,13 +4,21 @@ import OverviewDisplayData from './OverviewDisplayData';
 import { useTranslationFn } from '@/hooks';
 import type { ChartDataField } from '@/types/data';
 
-const OverviewSection = ({ title, chartData }: { title: string; chartData: ChartDataField[] }) => {
+const OverviewSection = ({
+  title,
+  chartData,
+  searchableFields,
+}: {
+  title: string;
+  chartData: ChartDataField[];
+  searchableFields: Set<string>;
+}) => {
   const t = useTranslationFn();
 
   return (
     <Space direction="vertical" size={0} style={{ width: '100%' }}>
       <Typography.Title level={3}>{t(title)}</Typography.Title>
-      <OverviewDisplayData section={title} allCharts={chartData} />
+      <OverviewDisplayData section={title} allCharts={chartData} searchableFields={searchableFields} />
     </Space>
   );
 };
diff --git a/src/js/components/Overview/PublicOverview.tsx b/src/js/components/Overview/PublicOverview.tsx
index 1c6f71e2..30611cf5 100644
--- a/src/js/components/Overview/PublicOverview.tsx
+++ b/src/js/components/Overview/PublicOverview.tsx
@@ -15,6 +15,7 @@ import Loader from '@/components/Loader';
 import Dataset from '@/components/Provenance/Dataset';
 
 import { useAppSelector } from '@/hooks';
+import { useSearchableFields } from '@/features/data/hooks';
 import { useSelectedProject, useSelectedScope } from '@/features/metadata/hooks';
 import { useTranslation } from 'react-i18next';
 import { RequestStatus } from '@/types/requests';
@@ -28,11 +29,7 @@ const PublicOverview = () => {
   const [drawerVisible, setDrawerVisible] = useState(false);
   const [aboutContent, setAboutContent] = useState('');
 
-  const {
-    isFetchingData: isFetchingOverviewData,
-    isContentPopulated,
-    sections,
-  } = useAppSelector((state) => state.data);
+  const { isFetchingData: isFetchingOverviewData, sections } = useAppSelector((state) => state.data);
   const { status: aboutStatus, about } = useAppSelector((state) => state.content);
 
   const selectedProject = useSelectedProject();
@@ -59,7 +56,9 @@ const PublicOverview = () => {
     saveToLocalStorage(sections);
   }, [sections]);
 
-  return !isContentPopulated || isFetchingOverviewData ? (
+  const searchableFields = useSearchableFields();
+
+  return isFetchingOverviewData ? (
     <Loader />
   ) : (
     <>
@@ -94,7 +93,7 @@ const PublicOverview = () => {
         <Col flex={1}>
           {displayedSections.map(({ sectionTitle, charts }, i) => (
             <div key={i} className="overview">
-              <OverviewSection title={sectionTitle} chartData={charts} />
+              <OverviewSection title={sectionTitle} chartData={charts} searchableFields={searchableFields} />
             </div>
           ))}
           <LastIngestionInfo />
diff --git a/src/js/features/data/data.store.ts b/src/js/features/data/data.store.ts
index 6c3dcc82..a7c1fec1 100644
--- a/src/js/features/data/data.store.ts
+++ b/src/js/features/data/data.store.ts
@@ -1,23 +1,12 @@
 import type { PayloadAction } from '@reduxjs/toolkit';
-import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
+import { createSlice } from '@reduxjs/toolkit';
 
 import { makeGetDataRequestThunk } from './makeGetDataRequest.thunk';
 import type { Sections } from '@/types/data';
 import type { Counts } from '@/types/overviewResponse';
-import type { QueryState } from '@/features/search/query.store';
-
-export const populateClickable = createAsyncThunk<string[], void, { state: { query: QueryState } }>(
-  'data/populateClickable',
-  async (_, { getState }) => {
-    return getState()
-      .query.querySections.flatMap((section) => section.fields)
-      .map((field) => field.id);
-  }
-);
 
 interface DataState {
   isFetchingData: boolean;
-  isContentPopulated: boolean;
   defaultLayout: Sections;
   sections: Sections;
   counts: Counts;
@@ -25,7 +14,6 @@ interface DataState {
 
 const initialState: DataState = {
   isFetchingData: true,
-  isContentPopulated: false,
   defaultLayout: [],
   sections: [],
   counts: {
@@ -101,14 +89,6 @@ const data = createSlice({
       })
       .addCase(makeGetDataRequestThunk.rejected, (state) => {
         state.isFetchingData = false;
-      })
-      .addCase(populateClickable.fulfilled, (state, { payload }) => {
-        state.sections.forEach((section) => {
-          section.charts.forEach((chart) => {
-            chart.isSearchable = payload.includes(chart.id);
-          });
-        });
-        state.isContentPopulated = true;
       });
   },
 });
diff --git a/src/js/features/data/hooks.ts b/src/js/features/data/hooks.ts
new file mode 100644
index 00000000..e35346dc
--- /dev/null
+++ b/src/js/features/data/hooks.ts
@@ -0,0 +1,14 @@
+import { useMemo } from 'react';
+import { useSearchQuery } from '@/features/search/hooks';
+
+export const useSearchableFields = () => {
+  /**
+   * Hook which calculates a set of searchable fields (which share IDs with charts), which can be used, for example, to
+   * choose whether to add a click event to a chart for the field.
+   */
+  const { querySections } = useSearchQuery();
+  return useMemo(
+    () => new Set(querySections.flatMap((section) => section.fields).map((field) => field.id)),
+    [querySections]
+  );
+};
diff --git a/src/js/features/data/makeGetDataRequest.thunk.ts b/src/js/features/data/makeGetDataRequest.thunk.ts
index 583e78a8..6c5d7374 100644
--- a/src/js/features/data/makeGetDataRequest.thunk.ts
+++ b/src/js/features/data/makeGetDataRequest.thunk.ts
@@ -40,7 +40,6 @@ export const makeGetDataRequestThunk = createAsyncThunk<
       // Initial display state
       isDisplayed: i < MAX_CHARTS,
       width: chart.width ?? DEFAULT_CHART_WIDTH, // initial configured width; users can change it from here
-      isSearchable: false,
     };
   };
 
diff --git a/src/js/types/data.ts b/src/js/types/data.ts
index 4099a2ef..b41f53eb 100644
--- a/src/js/types/data.ts
+++ b/src/js/types/data.ts
@@ -23,7 +23,6 @@ export interface ChartDataField {
   // display options:
   isDisplayed: boolean; // whether the chart is currently displayed (state data)
   width: number; // current width (state data); initial data taken from chart config
-  isSearchable: boolean; // whether the field is searchable
 }
 
 export interface ChartData {

From 5d0d598e76ad8e89aa012d146c0f0407e23f253f Mon Sep 17 00:00:00 2001
From: David Lougheed <david.lougheed@gmail.com>
Date: Thu, 28 Nov 2024 10:39:07 -0500
Subject: [PATCH 09/17] rm old references to populateClickable action

---
 src/js/components/BentoAppRouter.tsx | 10 +++-------
 1 file changed, 3 insertions(+), 7 deletions(-)

diff --git a/src/js/components/BentoAppRouter.tsx b/src/js/components/BentoAppRouter.tsx
index c2545bb5..6665a077 100644
--- a/src/js/components/BentoAppRouter.tsx
+++ b/src/js/components/BentoAppRouter.tsx
@@ -5,7 +5,7 @@ import { useAppDispatch } from '@/hooks';
 
 import { makeGetConfigRequest, makeGetServiceInfoRequest } from '@/features/config/config.store';
 import { makeGetAboutRequest } from '@/features/content/content.store';
-import { makeGetDataRequestThunk, populateClickable } from '@/features/data/data.store';
+import { makeGetDataRequestThunk } from '@/features/data/data.store';
 import { makeGetKatsuPublic, makeGetSearchFields } from '@/features/search/query.store';
 import { getBeaconConfig } from '@/features/beacon/beacon.store';
 import { getBeaconNetworkConfig } from '@/features/beacon/network.store';
@@ -92,12 +92,8 @@ const BentoAppRouter = () => {
     }
 
     dispatch(makeGetAboutRequest());
-    // The "Populate clickable" action needs both chart sections and search fields to be available.
-    // TODO: this is not a very good pattern. It would be better to have a memoized way of determining click-ability at
-    //  render time.
-    Promise.all([dispatch(makeGetDataRequestThunk()), dispatch(makeGetSearchFields())]).then(() =>
-      dispatch(populateClickable())
-    );
+    dispatch(makeGetDataRequestThunk());
+    dispatch(makeGetSearchFields());
     dispatch(makeGetKatsuPublic());
     dispatch(fetchKatsuData());
   }, [dispatch, isAuthenticated, selectedScope]);

From 3b0c087a2c67160f5fbd8ebce389f952e79d4fc1 Mon Sep 17 00:00:00 2001
From: David Lougheed <david.lougheed@gmail.com>
Date: Thu, 28 Nov 2024 10:48:13 -0500
Subject: [PATCH 10/17] refact: move to RequestStatus for overview data

---
 src/js/components/BentoAppRouter.tsx                  |  3 ++-
 src/js/components/Overview/Counts.tsx                 |  9 ++++++---
 .../components/Overview/Drawer/ManageChartsDrawer.tsx |  2 +-
 src/js/components/Overview/PublicOverview.tsx         |  9 +++++----
 src/js/constants/requests.ts                          |  3 +++
 src/js/features/data/data.store.ts                    | 11 ++++++-----
 6 files changed, 23 insertions(+), 14 deletions(-)
 create mode 100644 src/js/constants/requests.ts

diff --git a/src/js/components/BentoAppRouter.tsx b/src/js/components/BentoAppRouter.tsx
index 6665a077..8a2e313d 100644
--- a/src/js/components/BentoAppRouter.tsx
+++ b/src/js/components/BentoAppRouter.tsx
@@ -18,6 +18,7 @@ import { getGenomes } from '@/features/reference/reference.store';
 import Loader from '@/components/Loader';
 import DefaultLayout from '@/components/Util/DefaultLayout';
 import { BEACON_NETWORK_ENABLED } from '@/config';
+import { WAITING_STATES } from '@/constants/requests';
 import { RequestStatus } from '@/types/requests';
 import { BentoRoute } from '@/types/routes';
 import { scopeEqual, validProjectDataset } from '@/utils/router';
@@ -35,7 +36,7 @@ const ScopedRoute = () => {
   const { selectedScope, projects, projectsStatus } = useMetadata();
 
   useEffect(() => {
-    if ([RequestStatus.Idle, RequestStatus.Pending].includes(projectsStatus)) return; // Wait for projects to load first
+    if (WAITING_STATES.includes(projectsStatus)) return; // Wait for projects to load first
 
     // Update selectedScope based on URL parameters
     const valid = validProjectDataset(projects, { project: projectId, dataset: datasetId });
diff --git a/src/js/components/Overview/Counts.tsx b/src/js/components/Overview/Counts.tsx
index 3ac2789b..425da8bf 100644
--- a/src/js/components/Overview/Counts.tsx
+++ b/src/js/components/Overview/Counts.tsx
@@ -5,6 +5,7 @@ import { BiDna } from 'react-icons/bi';
 
 import CountsTitleWithHelp from '@/components/Util/CountsTitleWithHelp';
 import { BOX_SHADOW, COUNTS_FILL } from '@/constants/overviewConstants';
+import { WAITING_STATES } from '@/constants/requests';
 import { NO_RESULTS_DASHES } from '@/constants/searchConstants';
 import { useAppSelector, useTranslationFn } from '@/hooks';
 import { useCanSeeUncensoredCounts } from '@/hooks/censorship';
@@ -23,7 +24,7 @@ type CountEntry = { entity: BentoEntity; icon: ReactNode; count: number };
 const Counts = () => {
   const t = useTranslationFn();
 
-  const { counts, isFetchingData } = useAppSelector((state) => state.data);
+  const { counts, status } = useAppSelector((state) => state.data);
 
   const uncensoredCounts = useCanSeeUncensoredCounts();
 
@@ -46,18 +47,20 @@ const Counts = () => {
     },
   ];
 
+  const waitingForData = WAITING_STATES.includes(status);
+
   return (
     <>
       <Typography.Title level={3}>{t('Counts')}</Typography.Title>
       <Space wrap>
         {data.map(({ entity, icon, count }, i) => (
-          <Card key={i} style={{ ...styles.countCard, height: isFetchingData ? 138 : 114 }}>
+          <Card key={i} style={{ ...styles.countCard, height: waitingForData ? 138 : 114 }}>
             <Statistic
               title={<CountsTitleWithHelp entity={entity} />}
               value={count || (uncensoredCounts ? count : NO_RESULTS_DASHES)}
               valueStyle={{ color: COUNTS_FILL }}
               prefix={icon}
-              loading={isFetchingData}
+              loading={waitingForData}
             />
           </Card>
         ))}
diff --git a/src/js/components/Overview/Drawer/ManageChartsDrawer.tsx b/src/js/components/Overview/Drawer/ManageChartsDrawer.tsx
index 3711aef4..f50f2854 100644
--- a/src/js/components/Overview/Drawer/ManageChartsDrawer.tsx
+++ b/src/js/components/Overview/Drawer/ManageChartsDrawer.tsx
@@ -13,7 +13,7 @@ const ManageChartsDrawer = ({ onManageDrawerClose, manageDrawerVisible }: Manage
 
   const dispatch = useAppDispatch();
 
-  const sections = useAppSelector((state) => state.data.sections);
+  const { sections } = useAppSelector((state) => state.data);
 
   return (
     <Drawer
diff --git a/src/js/components/Overview/PublicOverview.tsx b/src/js/components/Overview/PublicOverview.tsx
index 30611cf5..2c2bfcf2 100644
--- a/src/js/components/Overview/PublicOverview.tsx
+++ b/src/js/components/Overview/PublicOverview.tsx
@@ -6,6 +6,7 @@ import { convertSequenceAndDisplayData, saveValue } from '@/utils/localStorage';
 import type { Sections } from '@/types/data';
 
 import { BOX_SHADOW, LOCALSTORAGE_CHARTS_KEY } from '@/constants/overviewConstants';
+import { WAITING_STATES } from '@/constants/requests';
 
 import OverviewSection from './OverviewSection';
 import ManageChartsDrawer from './Drawer/ManageChartsDrawer';
@@ -29,7 +30,7 @@ const PublicOverview = () => {
   const [drawerVisible, setDrawerVisible] = useState(false);
   const [aboutContent, setAboutContent] = useState('');
 
-  const { isFetchingData: isFetchingOverviewData, sections } = useAppSelector((state) => state.data);
+  const { status: overviewDataStatus, sections } = useAppSelector((state) => state.data);
   const { status: aboutStatus, about } = useAppSelector((state) => state.content);
 
   const selectedProject = useSelectedProject();
@@ -37,9 +38,9 @@ const PublicOverview = () => {
 
   useEffect(() => {
     // Save sections to localStorage when they change
-    if (isFetchingOverviewData) return;
+    if (overviewDataStatus != RequestStatus.Fulfilled) return;
     saveToLocalStorage(sections);
-  }, [isFetchingOverviewData, sections]);
+  }, [overviewDataStatus, sections]);
 
   useEffect(() => {
     const activeLanguage = i18n.language;
@@ -58,7 +59,7 @@ const PublicOverview = () => {
 
   const searchableFields = useSearchableFields();
 
-  return isFetchingOverviewData ? (
+  return WAITING_STATES.includes(overviewDataStatus) ? (
     <Loader />
   ) : (
     <>
diff --git a/src/js/constants/requests.ts b/src/js/constants/requests.ts
new file mode 100644
index 00000000..aedca9b5
--- /dev/null
+++ b/src/js/constants/requests.ts
@@ -0,0 +1,3 @@
+import { RequestStatus } from '@/types/requests';
+
+export const WAITING_STATES = [RequestStatus.Idle, RequestStatus.Pending];
diff --git a/src/js/features/data/data.store.ts b/src/js/features/data/data.store.ts
index a7c1fec1..4b285949 100644
--- a/src/js/features/data/data.store.ts
+++ b/src/js/features/data/data.store.ts
@@ -4,16 +4,17 @@ import { createSlice } from '@reduxjs/toolkit';
 import { makeGetDataRequestThunk } from './makeGetDataRequest.thunk';
 import type { Sections } from '@/types/data';
 import type { Counts } from '@/types/overviewResponse';
+import { RequestStatus } from '@/types/requests';
 
 interface DataState {
-  isFetchingData: boolean;
+  status: RequestStatus;
   defaultLayout: Sections;
   sections: Sections;
   counts: Counts;
 }
 
 const initialState: DataState = {
-  isFetchingData: true,
+  status: RequestStatus.Idle,
   defaultLayout: [],
   sections: [],
   counts: {
@@ -79,16 +80,16 @@ const data = createSlice({
   extraReducers: (builder) => {
     builder
       .addCase(makeGetDataRequestThunk.pending, (state) => {
-        state.isFetchingData = true;
+        state.status = RequestStatus.Pending;
       })
       .addCase(makeGetDataRequestThunk.fulfilled, (state, { payload }) => {
         state.sections = payload.sectionData;
         state.defaultLayout = payload.defaultData;
         state.counts = payload.counts;
-        state.isFetchingData = false;
+        state.status = RequestStatus.Fulfilled;
       })
       .addCase(makeGetDataRequestThunk.rejected, (state) => {
-        state.isFetchingData = false;
+        state.status = RequestStatus.Rejected;
       });
   },
 });

From 41dfda5f54fa368e82a3186b22b4a47f7b59091c Mon Sep 17 00:00:00 2001
From: David Lougheed <david.lougheed@gmail.com>
Date: Fri, 6 Dec 2024 13:31:06 -0500
Subject: [PATCH 11/17] i18n: missing translations for chart management

---
 .../Overview/Drawer/ManageChartsDrawer.tsx           | 12 ++++++++----
 src/js/components/Overview/PublicOverview.tsx        |  4 ++--
 src/public/locales/en/default_translation_en.json    |  3 +++
 src/public/locales/fr/default_translation_fr.json    |  3 +++
 4 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/src/js/components/Overview/Drawer/ManageChartsDrawer.tsx b/src/js/components/Overview/Drawer/ManageChartsDrawer.tsx
index f50f2854..370b0772 100644
--- a/src/js/components/Overview/Drawer/ManageChartsDrawer.tsx
+++ b/src/js/components/Overview/Drawer/ManageChartsDrawer.tsx
@@ -6,6 +6,7 @@ import ChartTree from './ChartTree';
 
 import type { ChartDataField } from '@/types/data';
 import { useAppSelector, useAppDispatch, useTranslationFn } from '@/hooks';
+import { useSmallScreen } from '@/hooks/useResponsiveContext';
 import { hideAllSectionCharts, setAllDisplayedCharts, resetLayout } from '@/features/data/data.store';
 
 const ManageChartsDrawer = ({ onManageDrawerClose, manageDrawerVisible }: ManageChartsDrawerProps) => {
@@ -13,6 +14,8 @@ const ManageChartsDrawer = ({ onManageDrawerClose, manageDrawerVisible }: Manage
 
   const dispatch = useAppDispatch();
 
+  const isSmallScreen = useSmallScreen();
+
   const { sections } = useAppSelector((state) => state.data);
 
   return (
@@ -21,6 +24,7 @@ const ManageChartsDrawer = ({ onManageDrawerClose, manageDrawerVisible }: Manage
       placement="right"
       onClose={onManageDrawerClose}
       open={manageDrawerVisible}
+      width={isSmallScreen ? '100vw' : 400}
       extra={
         <Space>
           <Button
@@ -29,7 +33,7 @@ const ManageChartsDrawer = ({ onManageDrawerClose, manageDrawerVisible }: Manage
               dispatch(setAllDisplayedCharts({}));
             }}
           >
-            Show All
+            {t('Show All')}
           </Button>
           <Button
             size="small"
@@ -37,7 +41,7 @@ const ManageChartsDrawer = ({ onManageDrawerClose, manageDrawerVisible }: Manage
               dispatch(resetLayout());
             }}
           >
-            Reset
+            {t('Reset')}
           </Button>
         </Space>
       }
@@ -55,7 +59,7 @@ const ManageChartsDrawer = ({ onManageDrawerClose, manageDrawerVisible }: Manage
                   dispatch(setAllDisplayedCharts({ section: sectionTitle }));
                 }}
               >
-                Show All
+                {t('Show All')}
               </Button>
               <Button
                 size="small"
@@ -63,7 +67,7 @@ const ManageChartsDrawer = ({ onManageDrawerClose, manageDrawerVisible }: Manage
                   dispatch(hideAllSectionCharts({ section: sectionTitle }));
                 }}
               >
-                Hide All
+                {t('Hide All')}
               </Button>
             </Space>
           </Flex>
diff --git a/src/js/components/Overview/PublicOverview.tsx b/src/js/components/Overview/PublicOverview.tsx
index 2c2bfcf2..1add9750 100644
--- a/src/js/components/Overview/PublicOverview.tsx
+++ b/src/js/components/Overview/PublicOverview.tsx
@@ -25,7 +25,7 @@ const ABOUT_CARD_STYLE = { width: '100%', maxWidth: '1390px', borderRadius: '11p
 const MANAGE_CHARTS_BUTTON_STYLE = { right: '5em', bottom: '1.5em', transform: 'scale(125%)' };
 
 const PublicOverview = () => {
-  const { i18n } = useTranslation();
+  const { i18n, t } = useTranslation();
 
   const [drawerVisible, setDrawerVisible] = useState(false);
   const [aboutContent, setAboutContent] = useState('');
@@ -105,7 +105,7 @@ const PublicOverview = () => {
       <FloatButton
         type="primary"
         icon={<AppstoreAddOutlined rotate={270} />}
-        tooltip="Manage Charts"
+        tooltip={t('Manage Charts')}
         style={MANAGE_CHARTS_BUTTON_STYLE}
         onClick={onManageChartsOpen}
       />
diff --git a/src/public/locales/en/default_translation_en.json b/src/public/locales/en/default_translation_en.json
index 9582a7d1..21d14d27 100644
--- a/src/public/locales/en/default_translation_en.json
+++ b/src/public/locales/en/default_translation_en.json
@@ -64,6 +64,9 @@
   "Download DATS File": "Download DATS File",
   "Charts": "Charts",
   "Manage Charts": "Manage Charts",
+  "Show All": "Show All",
+  "Reset": "Reset",
+  "Hide All": "Hide All",
   "Remove this chart": "Remove this chart",
   "Width": "Width",
   "Insufficient data available.": "Insufficient data available.",
diff --git a/src/public/locales/fr/default_translation_fr.json b/src/public/locales/fr/default_translation_fr.json
index a82f046a..8a280036 100644
--- a/src/public/locales/fr/default_translation_fr.json
+++ b/src/public/locales/fr/default_translation_fr.json
@@ -64,6 +64,9 @@
   "Download DATS File": "Télécharcher le fichier DATS",
   "Charts": "Tableaux",
   "Manage Charts": "Gestion des tableaux",
+  "Show All": "Aff. tous",
+  "Reset": "Réinit.",
+  "Hide All": "Cacher tous",
   "Remove this chart": "Supprimer ce tableau",
   "Width": "Largeur",
   "Insufficient data available.": "Pas suffisamment de données.",

From ac57386702705011cd305811f43dd2b6a0e8ded4 Mon Sep 17 00:00:00 2001
From: David Lougheed <david.lougheed@gmail.com>
Date: Fri, 6 Dec 2024 13:36:24 -0500
Subject: [PATCH 12/17] lint: comment charts drawer width logic

---
 src/js/components/Overview/Drawer/ManageChartsDrawer.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/js/components/Overview/Drawer/ManageChartsDrawer.tsx b/src/js/components/Overview/Drawer/ManageChartsDrawer.tsx
index 370b0772..c2720c3b 100644
--- a/src/js/components/Overview/Drawer/ManageChartsDrawer.tsx
+++ b/src/js/components/Overview/Drawer/ManageChartsDrawer.tsx
@@ -24,6 +24,8 @@ const ManageChartsDrawer = ({ onManageDrawerClose, manageDrawerVisible }: Manage
       placement="right"
       onClose={onManageDrawerClose}
       open={manageDrawerVisible}
+      // If we're on a small device, make the drawer full-screen width instead of a fixed width.
+      // The default value for Ant Design is 372.
       width={isSmallScreen ? '100vw' : 400}
       extra={
         <Space>

From 2b1c42a82f7babe1c7d102ae77573e382586cf71 Mon Sep 17 00:00:00 2001
From: David Lougheed <david.lougheed@gmail.com>
Date: Fri, 6 Dec 2024 13:38:50 -0500
Subject: [PATCH 13/17] style: wider chart drawer + alt show transl

---
 src/js/components/Overview/Drawer/ManageChartsDrawer.tsx | 2 +-
 src/public/locales/fr/default_translation_fr.json        | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/js/components/Overview/Drawer/ManageChartsDrawer.tsx b/src/js/components/Overview/Drawer/ManageChartsDrawer.tsx
index c2720c3b..f1034704 100644
--- a/src/js/components/Overview/Drawer/ManageChartsDrawer.tsx
+++ b/src/js/components/Overview/Drawer/ManageChartsDrawer.tsx
@@ -26,7 +26,7 @@ const ManageChartsDrawer = ({ onManageDrawerClose, manageDrawerVisible }: Manage
       open={manageDrawerVisible}
       // If we're on a small device, make the drawer full-screen width instead of a fixed width.
       // The default value for Ant Design is 372.
-      width={isSmallScreen ? '100vw' : 400}
+      width={isSmallScreen ? '100vw' : 420}
       extra={
         <Space>
           <Button
diff --git a/src/public/locales/fr/default_translation_fr.json b/src/public/locales/fr/default_translation_fr.json
index 8a280036..a500263b 100644
--- a/src/public/locales/fr/default_translation_fr.json
+++ b/src/public/locales/fr/default_translation_fr.json
@@ -64,7 +64,7 @@
   "Download DATS File": "Télécharcher le fichier DATS",
   "Charts": "Tableaux",
   "Manage Charts": "Gestion des tableaux",
-  "Show All": "Aff. tous",
+  "Show All": "Montrer tous",
   "Reset": "Réinit.",
   "Hide All": "Cacher tous",
   "Remove this chart": "Supprimer ce tableau",

From 5b82fe001014d8a9eb4ec4cf2fc82b87725374d4 Mon Sep 17 00:00:00 2001
From: David Lougheed <david.lougheed@gmail.com>
Date: Fri, 6 Dec 2024 14:03:07 -0500
Subject: [PATCH 14/17] i18n: add missing beacon network translations

---
 src/js/components/Beacon/BeaconCommon/Filters.tsx               | 2 +-
 src/js/components/Beacon/BeaconNetwork/NetworkSearchResults.tsx | 2 +-
 src/public/locales/en/default_translation_en.json               | 2 ++
 src/public/locales/fr/default_translation_fr.json               | 2 ++
 4 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/js/components/Beacon/BeaconCommon/Filters.tsx b/src/js/components/Beacon/BeaconCommon/Filters.tsx
index 0b83fd29..60435834 100644
--- a/src/js/components/Beacon/BeaconCommon/Filters.tsx
+++ b/src/js/components/Beacon/BeaconCommon/Filters.tsx
@@ -16,7 +16,7 @@ const NetworkFilterToggle = () => {
   const { isQuerySectionsUnion } = useBeaconNetwork();
 
   return (
-    <Tooltip title="Choose all search filters across the network, or only those common to all beacons.">
+    <Tooltip title={t('beacon.network_filter_toggle_help')}>
       <div style={{ display: 'flex', alignItems: 'center' }}>
         <Switch
           onChange={() => dispatch(toggleQuerySectionsUnionOrIntersection())}
diff --git a/src/js/components/Beacon/BeaconNetwork/NetworkSearchResults.tsx b/src/js/components/Beacon/BeaconNetwork/NetworkSearchResults.tsx
index 5fe994ca..a8a01cdd 100644
--- a/src/js/components/Beacon/BeaconNetwork/NetworkSearchResults.tsx
+++ b/src/js/components/Beacon/BeaconNetwork/NetworkSearchResults.tsx
@@ -43,7 +43,7 @@ const NetworkSearchResults = () => {
   // currently not possible to have both a network error and results, but this may change in the future
   const resultsExtra = (
     <Space>
-      {hasBeaconNetworkError && <Tag color="red">Network Error</Tag>}
+      {hasBeaconNetworkError && <Tag color="red">{t('beacon.network_error')}</Tag>}
       {!noResponsesYet && isFetchingAtLeastOneResponse && (
         <Spin size="small" indicator={<Loading3QuartersOutlined spin={true} />} />
       )}
diff --git a/src/public/locales/en/default_translation_en.json b/src/public/locales/en/default_translation_en.json
index 21d14d27..dbc7865d 100644
--- a/src/public/locales/en/default_translation_en.json
+++ b/src/public/locales/en/default_translation_en.json
@@ -113,8 +113,10 @@
     "beacon_error": "Beacon Error",
     "results_from": "Results from",
     "network_search_results": "Network Search Results",
+    "network_error": "Network Error",
     "show_all_filters": "show all filters",
     "common_filters_only": "common filters only",
+    "network_filter_toggle_help": "Choose all search filters across the network, or only those common to all beacons.",
     "home_page": "Home Page",
     "select_asm": "Select an assembly",
     "variants_form_error": "Variants form should include a chromosome and either an end position or both reference and alternate bases",
diff --git a/src/public/locales/fr/default_translation_fr.json b/src/public/locales/fr/default_translation_fr.json
index a500263b..fc6cc70a 100644
--- a/src/public/locales/fr/default_translation_fr.json
+++ b/src/public/locales/fr/default_translation_fr.json
@@ -113,8 +113,10 @@
     "beacon_error": "Erreur de Beacon",
     "results_from": "Résultats de",
     "network_search_results": "Résultats de la recherche sur le réseau",
+    "network_error": "Erreur de réseau",
     "show_all_filters": "afficher tous les filtres",
     "common_filters_only": "filtres communs uniquement",
+    "network_filter_toggle_help": "Choisissez tous les filtres de recherche du réseau ou seulement ceux qui sont communs à tous les Beacons.",
     "home_page": "Page d'accueil",
     "select_asm": "Sélectionner un assemblage génomique",
     "variants_form_error": "Le formulaire de recherche de variants doit inclure un chromosome et soit la position de fin, ou les bases de référence et les bases alternatives.",

From df6d81391dec1d6cd26ed416e6bf905da14e0c1d Mon Sep 17 00:00:00 2001
From: David Lougheed <david.lougheed@gmail.com>
Date: Fri, 6 Dec 2024 14:15:32 -0500
Subject: [PATCH 15/17] i18n: footer translation

---
 src/js/components/SiteFooter.tsx                  | 12 ++++++------
 src/public/locales/en/default_translation_en.json | 10 ++++++++--
 src/public/locales/fr/default_translation_fr.json | 10 ++++++++--
 3 files changed, 22 insertions(+), 10 deletions(-)

diff --git a/src/js/components/SiteFooter.tsx b/src/js/components/SiteFooter.tsx
index 791ba6a5..b80e3424 100644
--- a/src/js/components/SiteFooter.tsx
+++ b/src/js/components/SiteFooter.tsx
@@ -14,7 +14,7 @@ const SiteFooter = () => {
         <Space size={8} direction="vertical" align="center">
           <div>
             <Title level={5} type="secondary" style={{ marginBottom: '0' }}>
-              {t('Powered by')}
+              {t('footer.powered_by')}
             </Title>
             <Link href="https://bento-platform.github.io" target="_blank">
               <img style={{ height: '36px' }} src={bentoLogo} alt="Bento" />
@@ -22,19 +22,19 @@ const SiteFooter = () => {
           </div>
           <div>
             <Text type="secondary">
-              Copyright &copy; 2019-2024 the{' '}
+              {t('footer.copyright')} 2019-2024{' '}
               <Link href="https://computationalgenomics.ca" target="_blank">
-                Canadian Centre for Computational Genomics
+                {t('footer.c3g')}
               </Link>
               .
             </Text>
             <br />
             <Text type="secondary">
-              Bento is licensed under the{' '}
+              {t('footer.licensed_under') + ' '}
               <Link href="https://github.com/bento-platform/bento_public/blob/main/LICENSE" target="_blank">
                 LGPLv3
               </Link>
-              . The source code is available on{' '}
+              . {t('footer.source_available') + ' '}
               <Link href="https://github.com/bento-platform" target="_blank">
                 Github
               </Link>
@@ -43,7 +43,7 @@ const SiteFooter = () => {
           </div>
           <div>
             <Link href="/public/terms.html" target="_blank">
-              {t('Terms of Use')}
+              {t('footer.terms_of_use')}
             </Link>
           </div>
         </Space>
diff --git a/src/public/locales/en/default_translation_en.json b/src/public/locales/en/default_translation_en.json
index dbc7865d..a0e45d65 100644
--- a/src/public/locales/en/default_translation_en.json
+++ b/src/public/locales/en/default_translation_en.json
@@ -70,8 +70,6 @@
   "Remove this chart": "Remove this chart",
   "Width": "Width",
   "Insufficient data available.": "Insufficient data available.",
-  "Powered by": "Powered by",
-  "Terms of Use": "Terms of Use",
   "No Data": "No Data",
   "Counts": "Counts",
   "Search by genomic variants, clinical metadata or both.": "Search by genomic variants, clinical metadata or both.",
@@ -134,5 +132,13 @@
       "Coordinates are one-based.",
       "Leave this form blank to search by metadata only."
     ]
+  },
+  "footer": {
+    "powered_by": "Powered by",
+    "copyright": "Copyright ©",
+    "c3g": "the Canadian Centre for Computational Genomics",
+    "licensed_under": "Bento is licensed under the",
+    "source_available": "The source code is available on",
+    "terms_of_use": "Terms of Use"
   }
 }
diff --git a/src/public/locales/fr/default_translation_fr.json b/src/public/locales/fr/default_translation_fr.json
index fc6cc70a..adde0dda 100644
--- a/src/public/locales/fr/default_translation_fr.json
+++ b/src/public/locales/fr/default_translation_fr.json
@@ -70,8 +70,6 @@
   "Remove this chart": "Supprimer ce tableau",
   "Width": "Largeur",
   "Insufficient data available.": "Pas suffisamment de données.",
-  "Powered by": "Propulsé par",
-  "Terms of Use": "Conditions d'utilisation (en anglais)",
   "No Data": "Pas de données",
   "Counts": "Totaux",
   "Search by genomic variants, clinical metadata or both.": "Recherche par variant génomique, métadonnées cliniques ou les deux.",
@@ -134,5 +132,13 @@
       "Les coordonnées sont en base un.",
       "Laissez ce formulaire vide pour effectuer une recherche sur les métadonnées seulement."
     ]
+  },
+  "footer": {
+    "powered_by": "Propulsé par",
+    "copyright": "©",
+    "c3g": "le Centre canadien de génomique computationnelle",
+    "licensed_under": "Bento est sous licence",
+    "source_available": "Le code source est disponible sur",
+    "terms_of_use": "Conditions d'utilisation (en anglais)"
   }
 }

From 9d1bf8cda443bacd4f582ede9ee634c756e0327d Mon Sep 17 00:00:00 2001
From: David Lougheed <david.lougheed@gmail.com>
Date: Fri, 6 Dec 2024 14:25:04 -0500
Subject: [PATCH 16/17] i18n: translate chart units + choropleth count

---
 src/js/components/Overview/Chart.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/js/components/Overview/Chart.tsx b/src/js/components/Overview/Chart.tsx
index 91b471a9..172300ae 100644
--- a/src/js/components/Overview/Chart.tsx
+++ b/src/js/components/Overview/Chart.tsx
@@ -39,6 +39,7 @@ const Chart = memo(({ chartConfig, data, units, id, isClickable }: ChartProps) =
   };
 
   const { chart_type: type } = chartConfig;
+  units = t(units); // Units can be a word, like "years". Make sure this word gets translated.
 
   switch (type) {
     case CHART_TYPE_BAR:
@@ -101,7 +102,7 @@ const Chart = memo(({ chartConfig, data, units, id, isClickable }: ChartProps) =
           }}
           renderPopupBody={(_f, d) => (
             <>
-              Count: {(d ?? 0).toString()} {units}
+              {t('Count') + ':'} {(d ?? 0).toString()} {units}
             </>
           )}
         />

From f93e436153c6e5eb469e266310ccd0b32e48a843 Mon Sep 17 00:00:00 2001
From: David Lougheed <david.lougheed@gmail.com>
Date: Wed, 11 Dec 2024 16:04:52 -0500
Subject: [PATCH 17/17] chore: support new lightbg logo

---
 .../{branding_color.png => branding.lightbg.png}    | Bin
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename src/public/assets/{branding_color.png => branding.lightbg.png} (100%)

diff --git a/src/public/assets/branding_color.png b/src/public/assets/branding.lightbg.png
similarity index 100%
rename from src/public/assets/branding_color.png
rename to src/public/assets/branding.lightbg.png