NickAkhmetov/CAT-854 Deduplicate pipelines list in processed data sec…

…tion (#3563)

CHANGELOG-cat-854.md

@@ -0,0 +1 @@
+- Improve readability of pipeline list in processed dataset sections.

context/app/static/js/components/detailPage/ProcessedData/ProcessedData.tsx

@@ -6,15 +6,16 @@ import { sectionIconMap } from 'js/shared-styles/icons/sectionIconMap';
 import ProcessedDataset from './ProcessedDataset';
 import { SectionDescription } from './ProcessedDataset/SectionDescription';
 import HelperPanel from './HelperPanel';
-import { useSortedSearchHits } from './hooks';
+import { usePipelineCountsInfo, useSortedSearchHits } from './hooks';
 import CollapsibleDetailPageSection from '../DetailPageSection/CollapsibleDetailPageSection';
 
 function ProcessedDataSection() {
   const processedDatasets = useProcessedDatasets();
   const sortedSearchHits = useSortedSearchHits(processedDatasets.searchHits);
 
-  const pipelines = processedDatasets?.searchHits.map((dataset) => dataset._source.pipeline);
-  const pipelinesText = `Pipelines (${pipelines.length})`;
+  const { pipelinesText, pipelineCountsText } = usePipelineCountsInfo(
+    processedDatasets.searchHits.map((dataset) => dataset._source),
+  );
 
   return (
     <CollapsibleDetailPageSection
@@ -24,7 +25,7 @@ function ProcessedDataSection() {
       icon={sectionIconMap['processed-data']}
     >
       <SectionDescription
-        addendum={<LabelledSectionText label={pipelinesText}>{pipelines.join(', ')}</LabelledSectionText>}
+        addendum={<LabelledSectionText label={pipelinesText}>{pipelineCountsText}</LabelledSectionText>}
       >
         This section lists analyses generated based on this dataset. These analyses are represented as processed
         datasets and are either generated by HuBMAP using uniform processing pipelines or by an external processing

context/app/static/js/components/detailPage/ProcessedData/hooks.spec.ts

@@ -1,6 +1,6 @@
 import { CreationAction } from 'js/components/types';
 import { renderHook } from 'test-utils/functions';
-import { useSortedSearchHits, createdByCentralProcess, datasetIsPublished } from './hooks';
+import { useSortedSearchHits, createdByCentralProcess, datasetIsPublished, usePipelineCountsInfo } from './hooks';
 
 const testDatasets: {
   _id: string;
@@ -93,3 +93,9 @@ it('checks if dataset is published', () => {
   expect(datasetIsPublished(testDatasets[1]._source)).toBe(true);
   expect(datasetIsPublished(testDatasets[2]._source)).toBe(true);
 });
+
+it('counts pipelines and their occurrences', () => {
+  const { pipelinesText, pipelineCountsText } = usePipelineCountsInfo(testDatasets.map((dataset) => dataset._source));
+  expect(pipelinesText).toBe('Pipelines (2)');
+  expect(pipelineCountsText).toBe('Cytokit + SPRM (2) and Segmentation Mask');
+});

context/app/static/js/components/detailPage/ProcessedData/hooks.ts

@@ -1,5 +1,6 @@
 import { useMemo } from 'react';
 import { ProcessedDatasetInfo, useProcessedDatasets } from 'js/pages/Dataset/hooks';
+import { generateCommaList } from 'js/helpers/functions';
 
 export function createdByCentralProcess(dataset: Pick<ProcessedDatasetInfo, 'creation_action'>) {
   return dataset.creation_action === 'Central Process';
@@ -37,3 +38,28 @@ export function useSortedSearchHits(datasets: ReturnType<typeof useProcessedData
   }, [datasets]);
   return sortedSearchHits;
 }
+
+/**
+ * Formats the processed datasets' pipelines and their counts for presentation.
+ * @param datasets The processed datasets to count the pipelines of.
+ * @returns Text for the pipelines label, and additional text for each pipeline and its count.
+ */
+export function usePipelineCountsInfo(datasets: Pick<ProcessedDatasetInfo, 'pipeline'>[]) {
+  const pipelines = datasets.map((dataset) => dataset.pipeline);
+  const pipelineCounts = pipelines.reduce(
+    (acc, pipeline) => {
+      acc[pipeline] = (acc[pipeline] || 0) + 1;
+      return acc;
+    },
+    {} as Record<string, number>,
+  );
+  const pipelinesText = `Pipelines (${Object.keys(pipelineCounts).length})`;
+  const pipelineCountsText = generateCommaList(
+    Object.entries(pipelineCounts).map(([pipeline, count]) => (count > 1 ? `${pipeline} (${count})` : pipeline)),
+  );
+
+  return {
+    pipelinesText,
+    pipelineCountsText,
+  };
+}