feat(transcriptomics): SJIP-984 add download data buttons

src/common/downloader.ts

@@ -23,7 +23,7 @@ export const getDefaultContentType = (responseType: string) => {
   }
 };
 
-const getBlobFromResponse = (res: AxiosResponse<any, any>, responseType = 'json') => {
+export const getBlobFromResponse = (res: AxiosResponse<any, any>, responseType = 'json') => {
   const contentType = res.headers['content-type'] || getDefaultContentType(responseType);
 
   switch (responseType) {

src/locales/en.ts

@@ -1518,6 +1518,8 @@ const en = {
         },
         footer: {
           download: 'Download data',
+          notification:
+            'Please wait while we generate your report. This process may take a few moments.',
         },
         about: {
           title: 'About this dataset',

src/services/api/index.tsx

@@ -1,9 +1,9 @@
-import axios, { AxiosError, AxiosRequestConfig, AxiosResponse } from 'axios';
 import keycloak from 'auth/keycloak-api/keycloak';
+import axios, { AxiosError, AxiosRequestConfig, AxiosResponse } from 'axios';
 
 const apiInstance = axios.create();
 
-interface ApiResponse<T> {
+export interface ApiResponse<T> {
   data: T | undefined;
   response: AxiosResponse;
   error: AxiosError | undefined;
@@ -24,8 +24,8 @@ apiInstance.interceptors.request.use((config) => {
   return config;
 });
 
-export const sendRequest = async <T,>(config: AxiosRequestConfig) => {
-  return apiInstance
+export const sendRequest = async <T,>(config: AxiosRequestConfig) =>
+  apiInstance
     .request<T>(config)
     .then(
       (response): ApiResponse<T> => ({
@@ -41,6 +41,5 @@ export const sendRequest = async <T,>(config: AxiosRequestConfig) => {
         error: err,
       }),
     );
-};
 
 export default apiInstance;

src/services/api/transcriptomics/index.ts

@@ -38,6 +38,20 @@ const fetchSampleGeneExp = (id: string) =>
     },
   });
 
+const fetchExportUrlDiffGeneExp = () =>
+  sendRequest<{ url: string }>({
+    method: 'GET',
+    url: `${ARRANGER_API}/transcriptomics/diffGeneExp/export`,
+    headers: headers(),
+  });
+
+const fetchExportUrlSampleGeneExp = () =>
+  sendRequest<{ url: string }>({
+    method: 'GET',
+    url: `${ARRANGER_API}/transcriptomics/sampleGeneExp/export`,
+    headers: headers(),
+  });
+
 const checkSampleIdsAndGene = (data: { ensembl_gene_id?: string; sample_ids: string[] }) =>
   sendRequest<ITranscriptomicsSampleGeneExp>({
     method: 'POST',
@@ -62,4 +76,6 @@ export const TranscriptomicsApi = {
   fetchDiffGeneExp,
   checkSampleIdsAndGene,
   checkGenesExist,
+  fetchExportUrlDiffGeneExp,
+  fetchExportUrlSampleGeneExp,
 };

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

@@ -0,0 +1,69 @@
+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 { BaseButtonProps } from 'antd/lib/button/button';
+import axios from 'axios';
+import saveAs from 'file-saver';
+
+import { getBlobFromResponse } from 'common/downloader';
+import { ApiResponse } from 'services/api';
+import { globalActions } from 'store/global';
+
+type TDownloadTranscriptomics = BaseButtonProps & {
+  handleUrl: () => Promise<ApiResponse<{ url: string }>>;
+  filename: string;
+  displayNotification?: boolean;
+};
+
+const DownloadTranscriptomics = ({
+  handleUrl,
+  filename,
+  displayNotification = false,
+  ...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();
+
+        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>
+  );
+};
+
+export default DownloadTranscriptomics;

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

@@ -8,6 +8,7 @@ import { SortDirection } from '@ferlab/ui/core/graphql/constants';
 import { Button } from 'antd';
 import { useBiospecimen } from 'graphql/biospecimens/actions';
 import { INDEXES } from 'graphql/constants';
+import DownloadTranscriptomics from 'views/Analytics/Transcriptomic/Footer/DownloadTranscriptomics';
 import SetsManagementDropdown from 'views/DataExploration/components/SetsManagementDropdown';
 import {
   BIOSPECIMENS_SAVED_SETS_FIELD,
@@ -18,6 +19,7 @@ import { DEFAULT_OFFSET } from 'views/Variants/utils/constants';
 
 import ExternalLinkIcon from 'components/Icons/ExternalLinkIcon';
 import { SetType } from 'services/api/savedSet/models';
+import { TranscriptomicsApi } from 'services/api/transcriptomics';
 import {
   TTranscriptomicsDatum,
   TTranscriptomicsSwarmPlotData,
@@ -100,10 +102,17 @@ const TranscriptomicFooter = ({
   return (
     <div className={styles.footer}>
       <div className={styles.gene}>
-        {/* <Button>{intl.get('screen.analytics.transcriptomic.footer.download')}</Button> */}
+        <DownloadTranscriptomics
+          filename="htp-dge-data"
+          handleUrl={TranscriptomicsApi.fetchExportUrlDiffGeneExp}
+        />
       </div>
       <div className={styles.sample}>
-        {/* <Button>{intl.get('screen.analytics.transcriptomic.footer.download')}</Button> */}
+        <DownloadTranscriptomics
+          filename="htp-rnaseq-data"
+          displayNotification
+          handleUrl={TranscriptomicsApi.fetchExportUrlSampleGeneExp}
+        />
         <SetsManagementDropdown
           idField={BIOSPECIMENS_SAVED_SETS_FIELD}
           key="setManagementDropdown"

src/views/DataExploration/components/SetsManagementDropdown/index.tsx

@@ -4,6 +4,7 @@ import {
   DownOutlined,
   ExperimentOutlined,
   FileTextOutlined,
+  FolderOutlined,
   InfoCircleOutlined,
   PlusOutlined,
   UserOutlined,
@@ -233,7 +234,11 @@ const SetsManagementDropdown = ({
               document.getElementById(`${type}-set-dropdown-container`) as HTMLElement
             }
           >
-            <Button className={'save-set-btn'} onClick={(e) => e.preventDefault()}>
+            <Button
+              className={'save-set-btn'}
+              icon={<FolderOutlined />}
+              onClick={(e) => e.preventDefault()}
+            >
               {intl.get('screen.dataExploration.setsManagementDropdown.saveSet', {
                 type: singularizeSetTypeIfNeeded(type),
               })}