Download table data (#848)

Author: msmanoj

src/content/app/tools/blast/blast-download/submissionDownload.ts

@@ -100,7 +100,7 @@ const downloadBlastSubmission = async (
       csv = createCSVForGenomicBlast(job.data);
     } else if (blastedAgainst === 'cdna') {
       csv = createCSVForTranscriptBlast(job.data);
-    } else if (blastedAgainst === 'protein') {
+    } else if (blastedAgainst === 'pep') {
       csv = createCSVForProteinBlast(job.data);
     }
 

src/content/app/tools/blast/views/blast-submission-results/BlastSubmissionResults.tsx

@@ -124,9 +124,8 @@ const Main = () => {
         key={data.sequence.id}
         species={data.species}
         sequence={data.sequence}
-        preset={blastSubmission.submittedData.preset}
+        submission={blastSubmission}
         blastResults={data.blastResults}
-        parameters={blastSubmission.submittedData.parameters}
       />
     )
   );

src/content/app/tools/blast/views/blast-submission-results/components/blast-results-per-sequence/BlastResultsPerSequence.tsx

@@ -26,11 +26,10 @@ import SingleBlastJobResult from '../single-blast-job-result/SingleBlastJobResul
 import { parseBlastInput } from 'src/content/app/tools/blast/utils/blastInputParser';
 
 import type {
-  BlastSubmissionParameters,
-  BlastJobWithResults
+  BlastJobWithResults,
+  BlastSubmission
 } from 'src/content/app/tools/blast/state/blast-results/blastResultsSlice';
 import type { Species } from 'src/content/app/tools/blast/state/blast-form/blastFormSlice';
-import type { DatabaseType } from 'src/content/app/tools/blast/types/blastSettings';
 
 import styles from './BlastResultsPerSequence.scss';
 
@@ -40,13 +39,19 @@ type BlastResultsPerSequenceProps = {
     value: string;
   };
   species: Species[];
-  preset: string;
   blastResults: BlastJobWithResults[];
-  parameters: BlastSubmissionParameters;
+  submission: BlastSubmission;
 };
 
 const BlastResultsPerSequence = (props: BlastResultsPerSequenceProps) => {
-  const { sequence, species, blastResults, parameters } = props;
+  const {
+    sequence,
+    species,
+    blastResults,
+    submission: {
+      submittedData: { parameters, preset }
+    }
+  } = props;
   const parsedBlastSequence = parseBlastInput(sequence.value)[0];
   const { header: sequenceHeader, value: sequenceValue } = parsedBlastSequence;
   const sequenceHeaderLabel =
@@ -73,7 +78,7 @@ const BlastResultsPerSequence = (props: BlastResultsPerSequenceProps) => {
             <JobParameters
               sequenceValue={sequence.value}
               parameters={parameters}
-              preset={props.preset}
+              preset={preset}
             />
           )}
         </div>
@@ -103,7 +108,7 @@ const BlastResultsPerSequence = (props: BlastResultsPerSequenceProps) => {
               species={speciesInfo}
               jobResult={result}
               diagramWidth={plotwidth}
-              blastDatabase={parameters.database as DatabaseType}
+              submission={props.submission}
             />
           );
         })}

src/content/app/tools/blast/views/blast-submission-results/components/single-blast-job-result/SingleBlastJobResult.tsx

@@ -24,12 +24,22 @@ import ShowHide from 'src/shared/components/show-hide/ShowHide';
 import BlastHitsDiagram from 'src/content/app/tools/blast/components/blast-hits-diagram/BlastHitsDiagram';
 import BlastSequenceAlignment from 'src/content/app/tools/blast/components/blast-sequence-alignment/BlastSequenceAlignment';
 
+import {
+  createCSVForGenomicBlast,
+  createCSVForProteinBlast,
+  createCSVForTranscriptBlast
+} from 'src/content/app/tools/blast/blast-download/createBlastCSVTable';
+import { downloadTextAsFile } from 'src/shared/helpers/downloadAsFile';
+
 import type {
   BlastHit,
   BlastJobResult,
   HSP
 } from 'src/content/app/tools/blast/types/blastJob';
-import type { BlastJobWithResults } from 'src/content/app/tools/blast/state/blast-results/blastResultsSlice';
+import type {
+  BlastJobWithResults,
+  BlastSubmission
+} from 'src/content/app/tools/blast/state/blast-results/blastResultsSlice';
 import type { Species } from 'src/content/app/tools/blast/state/blast-form/blastFormSlice';
 import type { BlastSequenceAlignmentInput } from 'src/content/app/tools/blast/components/blast-sequence-alignment/blastSequenceAlignmentTypes';
 import type { DatabaseType } from 'src/content/app/tools/blast/types/blastSettings';
@@ -48,7 +58,7 @@ type SingleBlastJobResultProps = {
   jobResult: BlastJobWithResults;
   species: Species;
   diagramWidth: number;
-  blastDatabase: DatabaseType;
+  submission: BlastSubmission;
 };
 
 const hitsTableColumns: DataTableColumns = [
@@ -70,7 +80,12 @@ const hitsTableColumns: DataTableColumns = [
     title: 'Length',
     isSortable: true
   },
-  { width: '200px', columnId: 'view_alignment', isHideable: false },
+  {
+    width: '200px',
+    columnId: 'view_alignment',
+    isHideable: false,
+    isExportable: false
+  },
   {
     width: '100px',
     columnId: 'percentage_id',
@@ -153,12 +168,7 @@ const hitsTableColumns: DataTableColumns = [
 ];
 
 const SingleBlastJobResult = (props: SingleBlastJobResultProps) => {
-  const {
-    species: speciesInfo,
-    jobResult,
-    diagramWidth,
-    blastDatabase
-  } = props;
+  const { species: speciesInfo, jobResult, diagramWidth, submission } = props;
   const [isExpanded, setExpanded] = useState(false);
 
   const alignmentsCount = countAlignments(jobResult.data);
@@ -186,18 +196,21 @@ const SingleBlastJobResult = (props: SingleBlastJobResultProps) => {
       </div>
 
       {isExpanded && (
-        <HitsTable jobResult={jobResult} blastDatabase={blastDatabase} />
+        <HitsTable jobResult={jobResult} submission={submission} />
       )}
     </div>
   );
 };
 
 type HitsTableProps = {
   jobResult: SingleBlastJobResultProps['jobResult'];
-  blastDatabase: DatabaseType;
+  submission: BlastSubmission;
 };
 const HitsTable = (props: HitsTableProps) => {
-  const { jobResult, blastDatabase } = props;
+  const { jobResult, submission } = props;
+
+  const blastDatabase = submission.submittedData.parameters
+    .database as DatabaseType;
 
   const [tableState, setTableState] = useState<Partial<DataTableState>>({
     rowsPerPage: 100,
@@ -228,13 +241,12 @@ const HitsTable = (props: HitsTableProps) => {
           hitHsp.hsp_align_len,
           '', // view_alignment
           hitHsp.hsp_identity,
-          hitHsp.hsp_score,
-          <DynamicColumnContent
-            key={counter}
-            hit={hit}
-            blastDatabase={blastDatabase}
-            hitHsp={hitHsp}
-          />,
+          hitHsp.hsp_bit_score,
+          getDynamicColumnContent({
+            hit,
+            blastDatabase,
+            hitHsp
+          }),
           <span key={counter} className={styles.hitOrientation}>
             {hitHsp.hsp_hit_frame === '1' ? 'Forward' : 'Reverse'}
           </span>,
@@ -330,6 +342,19 @@ const HitsTable = (props: HitsTableProps) => {
     );
   };
 
+  const downloadHandler = async () => {
+    let csv = '';
+    if (blastDatabase === 'dna') {
+      csv = createCSVForGenomicBlast(jobResult.data);
+    } else if (blastDatabase === 'cdna') {
+      csv = createCSVForTranscriptBlast(jobResult.data);
+    } else if (blastDatabase === 'pep') {
+      csv = createCSVForProteinBlast(jobResult.data);
+    }
+
+    await downloadTextAsFile(csv, 'table.csv');
+  };
+
   return (
     <div className={styles.tableWrapper}>
       <DataTable
@@ -341,9 +366,10 @@ const HitsTable = (props: HitsTableProps) => {
         expandedContent={expandedContent}
         disabledActions={[
           TableAction.FILTERS,
-          TableAction.DOWNLOAD_ALL_DATA,
+          TableAction.FIND_IN_TABLE,
           TableAction.DOWNLOAD_SHOWN_DATA
         ]}
+        downloadHandler={downloadHandler}
       />
     </div>
   );
@@ -373,7 +399,7 @@ type DynamicColumnContentProps = {
   blastDatabase: DatabaseType;
 };
 
-const DynamicColumnContent = (props: DynamicColumnContentProps) => {
+const getDynamicColumnContent = (props: DynamicColumnContentProps) => {
   const { hit, blastDatabase, hitHsp } = props;
 
   if (blastDatabase !== 'dna') {

src/shared/components/data-table/DataTable.tsx

@@ -40,6 +40,8 @@ type TableContextType = DataTableState & {
   selectableColumnIndex: number;
   expandedContent: { [rowId: string]: ReactNode };
   disabledActions?: TableAction[];
+  downloadFileName?: string;
+  downloadHandler?: () => Promise<void>;
   rows: TableRows;
 };
 
@@ -48,14 +50,16 @@ export const TableContext = React.createContext(
 );
 
 export type TableProps = {
-  onStateChange?: (newState: DataTableState) => void;
+  state: Partial<DataTableState>;
   columns: DataTableColumns;
-  state?: Partial<DataTableState>;
   theme: TableTheme;
   selectableColumnIndex: number;
-  className?: string;
   expandedContent: { [rowId: string]: ReactNode };
   disabledActions?: TableAction[];
+  className?: string;
+  downloadFileName?: string;
+  downloadHandler?: () => Promise<void>;
+  onStateChange?: (newState: DataTableState) => void;
 };
 const DataTable = (props: TableProps) => {
   const initialDataTableState = {
@@ -96,7 +100,9 @@ const DataTable = (props: TableProps) => {
         theme: props.theme,
         selectableColumnIndex: props.selectableColumnIndex,
         expandedContent: props.expandedContent,
-        disabledActions: props.disabledActions
+        disabledActions: props.disabledActions,
+        downloadFileName: props.downloadFileName,
+        downloadHandler: props.downloadHandler
       }}
     >
       <div className={wrapperClasses}>

src/shared/components/data-table/components/table-controls/components/table-actions/TableActions.tsx

@@ -21,6 +21,7 @@ import { TableContext } from 'src/shared/components/data-table/DataTable';
 import RowVisibilityController from 'src/shared/components/data-table/components/main/components/table-row/components/row-visibility-controller/RowVisibilityController';
 import FindInTable from './components/find-in-table/FindInTable';
 import ShowHideColumns from './components/show-hide-columns/ShowHideColumns';
+import DownloadData from './components/download-data/DownloadData';
 
 import {
   type DataTableState,
@@ -54,7 +55,7 @@ const actionOptions = [
   },
   {
     value: TableAction.DOWNLOAD_ALL_DATA,
-    label: 'Download all data'
+    label: 'Download this table'
   },
   {
     value: TableAction.RESTORE_DEFAULTS,
@@ -144,6 +145,10 @@ const getActionComponent = (selectedAction: TableAction) => {
       return <ShowHideColumns />;
     case TableAction.SHOW_HIDE_ROWS:
       return <RowVisibilityController />;
+    case TableAction.DOWNLOAD_ALL_DATA:
+      return <DownloadData />;
+    case TableAction.DOWNLOAD_SHOWN_DATA:
+      return <DownloadData />;
     default:
       return null;
   }

src/shared/components/data-table/components/table-controls/components/table-actions/components/download-data/DownloadData.scss

@@ -0,0 +1,14 @@
+@import 'src/styles/common';
+
+.downloadData {
+  display: flex;
+  column-gap: 10px;
+  margin-left: 10px;
+  align-items: center;
+}
+
+.cancel {
+  color: $blue;
+  cursor: pointer;
+  margin-left: 10px;
+}