Merge pull request #205 from bento-platform/feat/bento-concepts-help

feat: help text for Bento concepts in counts display
bento-platform · Oct 22, 2024 · 7e4d9d2 · 7e4d9d2
2 parents 312347f + 77d8a6d
commit 7e4d9d2
Show file tree

Hide file tree

Showing 6 changed files with 76 additions and 39 deletions.
diff --git a/src/js/components/Beacon/BeaconQueryUi.tsx b/src/js/components/Beacon/BeaconQueryUi.tsx
@@ -262,7 +262,7 @@ const BeaconQueryUi = () => {
             {hasVariants && (
               <Col xs={24} lg={12}>
                 <Card
-                  title={td('Variants')}
+                  title={td('entities.Variants')}
                   style={CARD_STYLE}
                   styles={CARD_STYLES}
                   extra={<SearchToolTip>{variantsInstructions}</SearchToolTip>}

diff --git a/src/js/components/Overview/Counts.tsx b/src/js/components/Overview/Counts.tsx
@@ -1,6 +1,6 @@
-import type { CSSProperties } from 'react';
-import { Typography, Card, Space, Statistic } from 'antd';
-import { TeamOutlined } from '@ant-design/icons';
+import { type CSSProperties, Fragment, type ReactNode } from 'react';
+import { Typography, Card, Space, Statistic, Popover } from 'antd';
+import { InfoCircleOutlined, TeamOutlined } from '@ant-design/icons';
 import { BiDna } from 'react-icons/bi';
 
 import ExpSvg from '../Util/ExpSvg';
@@ -15,24 +15,30 @@ const styles: Record<string, CSSProperties> = {
   },
 };
 
+const CountsHelp = ({ children }: { children: ReactNode }) => <div style={{ maxWidth: 360 }}>{children}</div>;
+
 const Counts = () => {
   const td = useTranslationDefault();
 
   const { counts, isFetchingData } = useAppSelector((state) => state.data);
 
+  // Break down help into multiple sentences inside an array to make translation a bit easier.
   const data = [
     {
       title: 'Individuals',
+      help: ['individual_help_1'],
       icon: <TeamOutlined />,
       count: counts.individuals,
     },
     {
       title: 'Biosamples',
+      help: ['biosample_help_1'],
       icon: <BiDna />,
       count: counts.biosamples,
     },
     {
       title: 'Experiments',
+      help: ['experiment_help_1', 'experiment_help_2'],
       icon: <ExpSvg />,
       count: counts.experiments,
     },
@@ -42,17 +48,38 @@ const Counts = () => {
     <>
       <Typography.Title level={3}>{td('Counts')}</Typography.Title>
       <Space direction="horizontal">
-        {data.map(({ title, icon, count }, i) => (
-          <Card key={i} style={{ ...styles.countCard, height: isFetchingData ? 138 : 114 }}>
-            <Statistic
-              title={td(title)}
-              value={count}
-              valueStyle={{ color: COUNTS_FILL }}
-              prefix={icon}
-              loading={isFetchingData}
-            />
-          </Card>
-        ))}
+        {data.map(({ title, help, icon, count }, i) => {
+          const titleTransl = td(`entities.${title}`);
+          return (
+            <Card key={i} style={{ ...styles.countCard, height: isFetchingData ? 138 : 114 }}>
+              <Statistic
+                title={
+                  <Space>
+                    {titleTransl}
+                    {help && (
+                      <Popover
+                        title={titleTransl}
+                        content={
+                          <CountsHelp>
+                            {help.map((h, i) => (
+                              <Fragment key={i}>{td(`entities.${h}`)} </Fragment>
+                            ))}
+                          </CountsHelp>
+                        }
+                      >
+                        <InfoCircleOutlined />
+                      </Popover>
+                    )}
+                  </Space>
+                }
+                value={count}
+                valueStyle={{ color: COUNTS_FILL }}
+                prefix={icon}
+                loading={isFetchingData}
+              />
+            </Card>
+          );
+        })}
       </Space>
     </>
   );

diff --git a/src/js/components/Search/SearchResultsPane.tsx b/src/js/components/Search/SearchResultsPane.tsx
@@ -35,7 +35,7 @@ const SearchResultsPane = ({
     () => [
       {
         dataIndex: 'id',
-        title: td('Individual'),
+        title: td('entities.Individual'),
         render: (id: string) => (
           <a href={`${PORTAL_URL}/data/explorer/individuals/${id}`} target="_blank" rel="noreferrer">
             {id}
@@ -83,20 +83,20 @@ const SearchResultsPane = ({
                 ].join(' ')}
               >
                 <Statistic
-                  title={td('Individuals')}
+                  title={td('entities.Individuals')}
                   value={hasInsufficientData ? td(message) : individualCount}
                   valueStyle={{ color: COUNTS_FILL }}
                   prefix={<TeamOutlined />}
                 />
               </div>
               <Statistic
-                title={td('Biosamples')}
+                title={td('entities.Biosamples')}
                 value={hasInsufficientData ? '----' : biosampleCount}
                 valueStyle={{ color: COUNTS_FILL }}
                 prefix={<BiDna />}
               />
               <Statistic
-                title={td('Experiments')}
+                title={td('entities.Experiments')}
                 value={hasInsufficientData ? '----' : experimentCount}
                 valueStyle={{ color: COUNTS_FILL }}
                 prefix={<ExpSvg />}
@@ -107,7 +107,7 @@ const SearchResultsPane = ({
             <>
               <Col xs={24} lg={10}>
                 <Typography.Title level={5} style={{ marginTop: 0 }}>
-                  {td('Biosamples')}
+                  {td('entities.Biosamples')}
                 </Typography.Title>
                 {!hasInsufficientData && biosampleChartData.length ? (
                   <PieChart data={biosampleChartData} height={PIE_CHART_HEIGHT} sort={true} dataMap={translateMap} />
@@ -117,7 +117,7 @@ const SearchResultsPane = ({
               </Col>
               <Col xs={24} lg={10}>
                 <Typography.Title level={5} style={{ marginTop: 0 }}>
-                  {td('Experiments')}
+                  {td('entities.Experiments')}
                 </Typography.Title>
                 {!hasInsufficientData && experimentChartData.length ? (
                   <PieChart data={experimentChartData} height={PIE_CHART_HEIGHT} sort={true} dataMap={translateMap} />

diff --git a/src/js/types/dataTypes.ts b/src/js/types/dataTypes.ts
@@ -3,15 +3,13 @@ export enum DataTypes {
   experiment = 'experiment',
   experiment_result = 'experiment_result',
   variant = 'variant',
-  readset = 'readset',
 }
 
 export const DataTypesLabels = {
-  [DataTypes.phenopacket]: 'Clinical Data',
-  [DataTypes.experiment]: 'Experiments',
-  [DataTypes.experiment_result]: 'Experiment Results',
-  [DataTypes.variant]: 'Variants',
-  [DataTypes.readset]: 'Readsets',
+  [DataTypes.phenopacket]: 'entities.Phenopackets',
+  [DataTypes.experiment]: 'entities.Experiments',
+  [DataTypes.experiment_result]: 'entities.Experiment Results',
+  [DataTypes.variant]: 'entities.Variants',
 };
 
 export const getDataTypeLabel = (dataTypeString: string): string => {

diff --git a/src/public/locales/en/default_translation_en.json b/src/public/locales/en/default_translation_en.json
@@ -5,12 +5,20 @@
   "Count": "Count",
   "Portal": "Portal",
   "missing": "missing",
-  "Individual": "Individual",
-  "Individuals": "Individuals",
+  "entities": {
+    "Phenopackets": "Clinical Data",
+    "Individual": "Individual",
+    "Individuals": "Individuals",
+    "individual_help_1": "Individuals represent a specific person / organism, and may have one or multiple associated biosamples, each with associated experiments.",
+    "Biosamples": "Biosamples",
+    "biosample_help_1": "Biosamples are usually biological material extracted from a specific individual.",
+    "Experiments": "Experiments",
+    "experiment_help_1": "Experiments are a process done to a specific sample, e.g., whole-genome sequencing.",
+    "experiment_help_2": "One lab experiment may result in multiple experiment records inside the portal, such as with multiplexed samples.",
+    "Variants": "Variants"
+  },
   "in": "in",
   "Get Data": "Get Data",
-  "Biosamples": "Biosamples",
-  "Experiments": "Experiments",
   "No Results": "No Results",
   "Privacy": "Privacy",
   "Licenses": "Licenses",
@@ -53,7 +61,6 @@
   "No Data": "No Data",
   "Counts": "Counts",
   "Search by genomic variants, clinical metadata or both.": "Search by genomic variants, clinical metadata or both.",
-  "Variants": "Variants",
   "Metadata": "Metadata",
   "Search Beacon": "Search Beacon",
   "Clear Form": "Clear Form",
@@ -88,7 +95,6 @@
   "\"Chromosome\", \"Variant start\" and \"Assembly ID\" are always required.": "\"Chromosome\", \"Variant start\" and \"Assembly ID\" are always required.",
   "Coordinates are one-based.": "Coordinates are one-based.",
   "Leave this form blank to search by metadata only.": "Leave this form blank to search by metadata only.",
-  "Clinical Data": "Clinical Data",
   "Not Available": "Not Available",
   "You have been signed out": "You have been signed out",
   "Please sign in to the research portal.": "Please sign in to the research portal.",

diff --git a/src/public/locales/fr/default_translation_fr.json b/src/public/locales/fr/default_translation_fr.json
@@ -5,12 +5,20 @@
   "Count": "Observations",
   "Portal": "Portail",
   "missing": "manquant(s)",
-  "Individual": "Participant",
-  "Individuals": "Participants",
+  "entities": {
+    "Phenopackets": "Données cliniques",
+    "Individual": "Participant",
+    "Individuals": "Participants",
+    "individual_help_1": "Les participants représentent une personne/un organisme spécifique et peuvent avoir un ou plusieurs échantillons biologiques associés, chacun avec des expériences associées.",
+    "Biosamples": "Échantillons biologiques",
+    "biosample_help_1": "Les échantillons biologiques sont généralement du matériel biologique extrait d’un participant spécifique.",
+    "Experiments": "Expériences",
+    "experiment_help_1": "Les expériences sont un processus effectué sur un échantillon spécifique, par exemple le séquençage du génome entier.",
+    "experiment_help_2": "Une expérience par un laboratoire peut donner lieu à plusieurs enregistrements d'expériences dans le portail, par exemple avec des échantillons multiplexés.",
+    "Variants": "Variants"
+  },
   "in": "en",
   "Get Data": "Obtenir",
-  "Biosamples": "Échantillons biologiques",
-  "Experiments": "Expériences",
   "No Results": "Aucun résultat",
   "Privacy": "Protection",
   "Licenses": "Licences",
@@ -53,7 +61,6 @@
   "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.",
-  "Variants": "Variants",
   "Metadata": "Métadonnées",
   "Search Beacon": "Recherche sur le Beacon",
   "Clear Form": "Effacer le formulaire",
@@ -88,7 +95,6 @@
   "\"Chromosome\", \"Variant start\" and \"Assembly ID\" are always required.": "\"Chromosome\", \"Début du variant\" et \"Assemblage génomique\" sont toujours requis.",
   "Coordinates are one-based.": "Les coordonnées sont en base un.",
   "Leave this form blank to search by metadata only.": "Laissez ce formulaire vide pour effectuer une recherche sur les métadonnées seulement.",
-  "Clinical Data": "Données cliniques",
   "Not Available": "Non disponsible",
   "You have been signed out": "Vous avez été déconnecté",
   "Please sign in to the research portal.": "Veuillez vous connecter au portail de recherche.",