Merge pull request #794 from include-dcc/fix/SJIP-1124-tooltips

fix(transcriptomics): SJIP-1124 add tooltip

Author: lflangis

src/locales/en.ts

@@ -1531,6 +1531,8 @@ const en = {
           download: 'Download data',
           notification:
             'Please wait while we generate your report. This process may take a few moments.',
+          diffGeneTooltip: 'Download differential gene expression across all genes',
+          sampleTooltip: 'Download gene expression data across all genes',
         },
         about: {
           title: 'About this dataset',

src/views/Analytics/Transcriptomic/Footer/DownloadTranscriptomics/index.module.css

@@ -0,0 +1,3 @@
+.overlayTooltip {
+  max-width: 400px;
+}

src/views/Analytics/Transcriptomic/Footer/DownloadTranscriptomics/index.tsx

@@ -2,7 +2,7 @@ import { useState } from 'react';
 import intl from 'react-intl-universal';
 import { useDispatch } from 'react-redux';
 import { DownloadOutlined } from '@ant-design/icons';
-import { Button } from 'antd';
+import { Button, Tooltip } from 'antd';
 import { BaseButtonProps } from 'antd/lib/button/button';
 import axios from 'axios';
 import saveAs from 'file-saver';
@@ -11,58 +11,68 @@ import { getBlobFromResponse } from 'common/downloader';
 import { ApiResponse } from 'services/api';
 import { globalActions } from 'store/global';
 
+import styles from './index.module.css';
+
 type TDownloadTranscriptomics = BaseButtonProps & {
   handleUrl: () => Promise<ApiResponse<{ url: string }>>;
   filename: string;
   displayNotification?: boolean;
+  tooltip: string;
 };
 
 const DownloadTranscriptomics = ({
   handleUrl,
   filename,
   displayNotification = false,
+  tooltip,
   ...props
 }: TDownloadTranscriptomics) => {
   const [loading, setLoading] = useState<boolean>(false);
   const dispatch = useDispatch();
   return (
-    <Button
-      loading={loading}
-      icon={<DownloadOutlined />}
-      onClick={async () => {
-        setLoading(true);
-        const response = await handleUrl();
+    <Tooltip
+      title={tooltip}
+      overlayClassName={styles.overlayTooltip}
+      overlayInnerStyle={{ textAlign: 'center' }}
+    >
+      <Button
+        loading={loading}
+        icon={<DownloadOutlined />}
+        onClick={async () => {
+          setLoading(true);
+          const response = await handleUrl();
 
-        if (displayNotification) {
-          dispatch(
-            globalActions.displayMessage({
-              type: 'loading',
-              key: filename,
-              content: intl.get('screen.analytics.transcriptomic.footer.notification'),
-              duration: 0,
-            }),
-          );
-        }
+          if (displayNotification) {
+            dispatch(
+              globalActions.displayMessage({
+                type: 'loading',
+                key: filename,
+                content: intl.get('screen.analytics.transcriptomic.footer.notification'),
+                duration: 0,
+              }),
+            );
+          }
 
-        await axios({
-          url: response.data?.url ?? '',
-          method: 'GET',
-          responseType: 'blob',
-          headers: {
-            'Content-Type': 'application/json',
-            Accept: '*/*',
-          },
-        }).then((response) => {
-          const blob = getBlobFromResponse(response, 'blob');
-          saveAs(blob, filename);
-          setLoading(false);
-          dispatch(globalActions.destroyMessages([filename]));
-        });
-      }}
-      {...props}
-    >
-      {intl.get('screen.analytics.transcriptomic.footer.download')}
-    </Button>
+          await axios({
+            url: response.data?.url ?? '',
+            method: 'GET',
+            responseType: 'blob',
+            headers: {
+              'Content-Type': 'application/json',
+              Accept: '*/*',
+            },
+          }).then((response) => {
+            const blob = getBlobFromResponse(response, 'blob');
+            saveAs(blob, filename);
+            setLoading(false);
+            dispatch(globalActions.destroyMessages([filename]));
+          });
+        }}
+        {...props}
+      >
+        {intl.get('screen.analytics.transcriptomic.footer.download')}
+      </Button>
+    </Tooltip>
   );
 };
 

src/views/Analytics/Transcriptomic/Footer/index.tsx

@@ -105,13 +105,15 @@ const TranscriptomicFooter = ({
     <div className={styles.footer}>
       <div className={styles.gene}>
         <DownloadTranscriptomics
+          tooltip={intl.get('screen.analytics.transcriptomic.footer.diffGeneTooltip')}
           filename="htp-dge-data"
           handleUrl={TranscriptomicsApi.fetchExportUrlDiffGeneExp}
           disabled={loading}
         />
       </div>
       <div className={styles.sample}>
         <DownloadTranscriptomics
+          tooltip={intl.get('screen.analytics.transcriptomic.footer.sampleTooltip')}
           filename="htp-rnaseq-data"
           displayNotification
           handleUrl={TranscriptomicsApi.fetchExportUrlSampleGeneExp}