feat: search count help text

https://redmine.c3g-app.sd4h.ca/issues/2412
bento-platform · Nov 25, 2024 · 3fcffec · 3fcffec
1 parent 68bb886
commit 3fcffec
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 36 deletions.
diff --git 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
@@ -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
@@ -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
@@ -0,0 +1 @@
+export type BentoEntity = 'phenopacket' | 'individual' | 'biosample' | 'experiment' | 'variant';
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export type BentoEntity = 'phenopacket' \| 'individual' \| 'biosample' \| 'experiment' \| 'variant';