feat(statistics): SJIP-1378 render optional download actions (Ferlab-Ste-Justine#616)

Author: AltefrohneGaelle

packages/ui/Release.md

@@ -1,3 +1,6 @@
+### 10.25.2 2025-06-16
+- feat: SJIP-1378 entity statistics download optionnal
+
 ### 10.25.1 2025-06-11
 - fix: SJIP-1370 increase legend width for demographic chart
 

packages/ui/package-lock.json

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

packages/ui/package.json

@@ -1,28 +1,29 @@
 .resizableCard {
-  height: 100%;
-  width: 100%;
+    height: 100%;
+    width: 100%;
 }
 .resizableCard .cardHeader {
-  font-size: 12px;
+    font-size: 12px;
+    min-height: 24px;
 }
 .resizableCard .extra {
-  display: flex;
-  padding-right: 8px;
+    display: flex;
+    padding-right: 8px;
 }
 .resizableCard .extra .dropdownMenu :global(.ant-btn-compact-first-item) {
-  display: none;
+    display: none;
 }
 .resizableCard .extra .dropdownMenu :global(.ant-btn-compact-last-item) {
-  width: 20px;
+    width: 20px;
 }
 .resizableCard .extra .dropdownMenu :global(.ant-btn-text) {
-  color: var(--chart-title-color) !important;
+    color: var(--chart-title-color) !important;
 }
 .resizableCard .extra .button {
-  width: 20px;
-  color: var(--chart-title-color) !important;
+    width: 20px;
+    color: var(--chart-title-color) !important;
 }
 
 .modalContentWrapper {
-  position: relative;
+    position: relative;
 }

packages/ui/src/layout/ResizableGridLayout/ResizableGridCard/index.module.css

@@ -140,6 +140,7 @@ export interface IEntityStatistics {
     header: string;
     statistic: TStatistic;
     dictionary: TEntityStatisticsDictionary;
+    withDownload?: boolean;
 }
 
 const resizableCardCommonsSettings = {
@@ -151,6 +152,15 @@ const resizableCardCommonsSettings = {
     },
     withHandle: false,
 };
+const resizableCardCommonsWithoutDownloadSettings = {
+    closeHandle: false,
+    downloadSettings: {
+        png: false,
+        svg: false,
+        tsv: false,
+    },
+    withHandle: false,
+};
 
 const pieChartCommonsSettings = {
     margin: {
@@ -222,7 +232,9 @@ const applyFilter = ({ data, filter }: TStatisticBarChart | TStatisticPieChart,
 
 const LEGEND_ITEM_HEIGHT = 18;
 
-const getStatisticLayouts = (statistic: TStatistic, dictionary: TEntityStatisticsDictionary) => {
+type getStatisticLayouts = { statistic: TStatistic; dictionary: TEntityStatisticsDictionary; withDownload?: boolean };
+
+const getStatisticLayouts = ({ dictionary, statistic, withDownload = true }: getStatisticLayouts) => {
     const phenotypesData = applyFilter(statistic.phenotype, 'label');
     const mondoData = applyFilter(statistic.mondo, 'label');
     const downSyndromeStatusData = applyFilter(statistic.downSyndromeStatus);
@@ -231,6 +243,10 @@ const getStatisticLayouts = (statistic: TStatistic, dictionary: TEntityStatistic
     const dataCategoryData = applyFilter(statistic.dataCategory);
     const dataTypeData = applyFilter(statistic.dataType);
 
+    const resizableCardSettings = withDownload
+        ? resizableCardCommonsSettings
+        : resizableCardCommonsWithoutDownloadSettings;
+
     return [
         // Phenotypes (HPO) (Vertical Bar Chart)
         {
@@ -318,7 +334,7 @@ const getStatisticLayouts = (statistic: TStatistic, dictionary: TEntityStatistic
                         data: [phenotypesData],
                         headers: ['Value', 'Count'],
                     }}
-                    {...resizableCardCommonsSettings}
+                    {...resizableCardSettings}
                 />
             ),
             id: 'phenotypes',
@@ -416,7 +432,7 @@ const getStatisticLayouts = (statistic: TStatistic, dictionary: TEntityStatistic
                         data: [mondoData],
                         headers: ['Value', 'Count'],
                     }}
-                    {...resizableCardCommonsSettings}
+                    {...resizableCardSettings}
                 />
             ),
             id: 'mondo',
@@ -556,7 +572,7 @@ const getStatisticLayouts = (statistic: TStatistic, dictionary: TEntityStatistic
                     tsvSettings={{
                         data: [statistic.demography.sex, statistic.demography.race, statistic.demography.ethnicity],
                     }}
-                    {...resizableCardCommonsSettings}
+                    {...resizableCardSettings}
                 />
             ),
             id: 'demography',
@@ -626,7 +642,7 @@ const getStatisticLayouts = (statistic: TStatistic, dictionary: TEntityStatistic
                     tsvSettings={{
                         data: [downSyndromeStatusData],
                     }}
-                    {...resizableCardCommonsSettings}
+                    {...resizableCardSettings}
                 />
             ),
             id: 'down_syndrome',
@@ -696,7 +712,7 @@ const getStatisticLayouts = (statistic: TStatistic, dictionary: TEntityStatistic
                     tsvSettings={{
                         data: [sampleTypeData],
                     }}
-                    {...resizableCardCommonsSettings}
+                    {...resizableCardSettings}
                 />
             ),
             id: 'sample_type',
@@ -766,7 +782,7 @@ const getStatisticLayouts = (statistic: TStatistic, dictionary: TEntityStatistic
                     tsvSettings={{
                         data: [sampleAvailabilityData],
                     }}
-                    {...resizableCardCommonsSettings}
+                    {...resizableCardSettings}
                 />
             ),
             id: 'sample_availability',
@@ -879,7 +895,7 @@ const getStatisticLayouts = (statistic: TStatistic, dictionary: TEntityStatistic
                     tsvSettings={{
                         data: [dataCategoryData],
                     }}
-                    {...resizableCardCommonsSettings}
+                    {...resizableCardSettings}
                 />
             ),
             id: 'data-category',
@@ -992,7 +1008,7 @@ const getStatisticLayouts = (statistic: TStatistic, dictionary: TEntityStatistic
                     tsvSettings={{
                         data: [dataTypeData],
                     }}
-                    {...resizableCardCommonsSettings}
+                    {...resizableCardSettings}
                 />
             ),
             id: 'data-type',
@@ -1038,8 +1054,9 @@ const EntityStatistics = ({
     statistic,
     title,
     titleExtra,
+    withDownload = true,
 }: IEntityStatistics): React.ReactElement => {
-    const defaultLayouts = getStatisticLayouts(statistic, dictionary);
+    const defaultLayouts = getStatisticLayouts({ dictionary, statistic, withDownload });
     const layouts = serialize(defaultLayouts);
 
     return (