feat(statistic): SJIP-1379 improve download tsv (Ferlab-Ste-Justine#617)

Author: AltefrohneGaelle

packages/ui/Release.md

@@ -1,3 +1,6 @@
+### 10.25.3 2025-06-17
+- feat: SJIP-1379 improve statistic download data 
+
 ### 10.25.2 2025-06-16
 - feat: SJIP-1378 entity statistics download optionnal
 

packages/ui/package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "@ferlab/ui",
-    "version": "10.25.2",
+    "version": "10.25.3",
     "description": "Core components for scientific research data portals",
     "publishConfig": {
         "access": "public"

packages/ui/package.json

@@ -31,7 +31,7 @@ type TResizableGridCard = Omit<TGridCard, 'title' | 'resizable'> & {
         height: number;
     };
     tsvSettings?: {
-        headers?: string[];
+        headers?: string[] | string[][];
         contentMap?: string[];
         data: any[];
     };
@@ -156,14 +156,26 @@ const ResizableGridCard = ({
             if (!tsvSettings) {
                 return;
             }
-            tsvSettings.data.forEach((datum) => {
-                let tsvContent = `${tsvSettings.headers?.join('\t') ?? DEFAULT_TSV_HEADERS.join('\t')}\n`;
+            tsvSettings.data.forEach((datum, index) => {
+                let tsvContent = '';
+                // Manage specific headers for multiple data
+                if (tsvSettings.headers && typeof tsvSettings.headers[0] === 'string') {
+                    tsvContent = `${tsvSettings.headers?.join('\t')}\n`;
+                } else if (tsvSettings.headers && Array.isArray(tsvSettings.headers[0])) {
+                    const headerRow = tsvSettings.headers[index] as string[];
+                    tsvContent = `${headerRow.join('\t')}\n`;
+                } else {
+                    tsvContent = `${DEFAULT_TSV_HEADERS.join('\t')}\n`;
+                }
+
                 const tsvDataMapping = tsvSettings.contentMap ?? DEFAULT_TSV_CONTENT_MAP;
 
                 datum.forEach((e: any) => {
-                    tsvDataMapping.forEach((key) => {
-                        if (e[key]) {
+                    tsvDataMapping.forEach((key, index) => {
+                        if (e[key] && index < tsvDataMapping.length - 1) {
                             tsvContent += `${e[key]}\t`;
+                        } else if (e[key] && index == tsvDataMapping.length - 1) {
+                            tsvContent += `${e[key]}`;
                         }
                     });
                     tsvContent += `\n`;

packages/ui/src/layout/ResizableGridLayout/ResizableGridCard/index.tsx

@@ -14,6 +14,17 @@ export const aggregationToChartData = (buckets: any[] = [], total?: number): any
     });
 };
 
+export const formatAggregationChartData = (data: any[]): any[] =>
+    data.map((d) => {
+        if (d.frequency) {
+            return {
+                ...d,
+                frequency: d.frequency.toFixed(2),
+            };
+        }
+        return d;
+    });
+
 export const treeNodeToChartData = (buckets: any[] = []): any[] =>
     buckets.map(({ exactTagCount, key, name }) => ({
         id: key,

packages/ui/src/layout/ResizableGridLayout/utils.ts

@@ -12,7 +12,11 @@ import Empty from '../../../components/Empty';
 import ResizableGridLayout, { serialize } from '../../../layout/ResizableGridLayout';
 import ResizableGridCard from '../../../layout/ResizableGridLayout/ResizableGridCard';
 import { TDownloadDictionary } from '../../../layout/ResizableGridLayout/ResizableGridCard/utils';
-import { mondoDefaultGridConfig, observedPhenotypeDefaultGridConfig } from '../../../layout/ResizableGridLayout/utils';
+import {
+    formatAggregationChartData,
+    mondoDefaultGridConfig,
+    observedPhenotypeDefaultGridConfig,
+} from '../../../layout/ResizableGridLayout/utils';
 import { truncateString } from '../../../utils/stringUtils';
 
 import entityTableStyles from '../EntityTable/index.module.css';
@@ -332,7 +336,7 @@ const getStatisticLayouts = ({ dictionary, statistic, withDownload = true }: get
                     tsvSettings={{
                         contentMap: ['label', 'value'],
                         data: [phenotypesData],
-                        headers: ['Value', 'Count'],
+                        headers: ['Phenotype (HPO)', 'Count'],
                     }}
                     {...resizableCardSettings}
                 />
@@ -430,7 +434,7 @@ const getStatisticLayouts = ({ dictionary, statistic, withDownload = true }: get
                     tsvSettings={{
                         contentMap: ['label', 'value'],
                         data: [mondoData],
-                        headers: ['Value', 'Count'],
+                        headers: ['Diagnosis (MONDO)', 'Count'],
                     }}
                     {...resizableCardSettings}
                 />
@@ -570,7 +574,17 @@ const getStatisticLayouts = ({ dictionary, statistic, withDownload = true }: get
                     }
                     theme="shade"
                     tsvSettings={{
-                        data: [statistic.demography.sex, statistic.demography.race, statistic.demography.ethnicity],
+                        contentMap: ['label', 'value', 'frequency'],
+                        data: [
+                            formatAggregationChartData(statistic.demography.sex),
+                            formatAggregationChartData(statistic.demography.race),
+                            formatAggregationChartData(statistic.demography.ethnicity),
+                        ],
+                        headers: [
+                            ['Sex', 'Count', 'Frequency'],
+                            ['Race', 'Count', 'Frequency'],
+                            ['Ethnicity', 'Count', 'Frequency'],
+                        ],
                     }}
                     {...resizableCardSettings}
                 />
@@ -640,7 +654,9 @@ const getStatisticLayouts = ({ dictionary, statistic, withDownload = true }: get
                     theme="shade"
                     titleTruncateThresholdWidth={100}
                     tsvSettings={{
-                        data: [downSyndromeStatusData],
+                        contentMap: ['label', 'value', 'frequency'],
+                        data: [formatAggregationChartData(downSyndromeStatusData)],
+                        headers: ['Down Syndrome Status', 'Count', 'Frequency'],
                     }}
                     {...resizableCardSettings}
                 />
@@ -710,7 +726,9 @@ const getStatisticLayouts = ({ dictionary, statistic, withDownload = true }: get
                     theme="shade"
                     titleTruncateThresholdWidth={100}
                     tsvSettings={{
-                        data: [sampleTypeData],
+                        contentMap: ['label', 'value', 'frequency'],
+                        data: [formatAggregationChartData(sampleTypeData)],
+                        headers: ['Sample Type', 'Count', 'Frequency'],
                     }}
                     {...resizableCardSettings}
                 />
@@ -780,7 +798,9 @@ const getStatisticLayouts = ({ dictionary, statistic, withDownload = true }: get
                     theme="shade"
                     titleTruncateThresholdWidth={100}
                     tsvSettings={{
-                        data: [sampleAvailabilityData],
+                        contentMap: ['label', 'value', 'frequency'],
+                        data: [formatAggregationChartData(sampleAvailabilityData)],
+                        headers: ['Sample Availability', 'Count', 'Frequency'],
                     }}
                     {...resizableCardSettings}
                 />
@@ -893,7 +913,9 @@ const getStatisticLayouts = ({ dictionary, statistic, withDownload = true }: get
                     }
                     theme="shade"
                     tsvSettings={{
-                        data: [dataCategoryData],
+                        contentMap: ['label', 'value', 'frequency'],
+                        data: [formatAggregationChartData(dataCategoryData)],
+                        headers: ['Data Category', 'Count', 'Frequency'],
                     }}
                     {...resizableCardSettings}
                 />
@@ -1006,7 +1028,9 @@ const getStatisticLayouts = ({ dictionary, statistic, withDownload = true }: get
                     }
                     theme="shade"
                     tsvSettings={{
-                        data: [dataTypeData],
+                        contentMap: ['label', 'value', 'frequency'],
+                        data: [formatAggregationChartData(dataTypeData)],
+                        headers: ['Data Type', 'Count', 'Frequency'],
                     }}
                     {...resizableCardSettings}
                 />