diff --git a/CHANGELOG-cat-854.md b/CHANGELOG-cat-854.md new file mode 100644 index 0000000000..653238e500 --- /dev/null +++ b/CHANGELOG-cat-854.md @@ -0,0 +1 @@ +- Improve readability of pipeline list in processed dataset sections. diff --git a/context/app/static/js/components/detailPage/ProcessedData/ProcessedData.tsx b/context/app/static/js/components/detailPage/ProcessedData/ProcessedData.tsx index 7f66fd1ef9..c4851cc524 100644 --- a/context/app/static/js/components/detailPage/ProcessedData/ProcessedData.tsx +++ b/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 ( {pipelines.join(', ')}} + addendum={{pipelineCountsText}} > 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 diff --git a/context/app/static/js/components/detailPage/ProcessedData/hooks.spec.ts b/context/app/static/js/components/detailPage/ProcessedData/hooks.spec.ts index 73044052ed..d934986388 100644 --- a/context/app/static/js/components/detailPage/ProcessedData/hooks.spec.ts +++ b/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'); +}); diff --git a/context/app/static/js/components/detailPage/ProcessedData/hooks.ts b/context/app/static/js/components/detailPage/ProcessedData/hooks.ts index d22bc6d739..17a20ac091 100644 --- a/context/app/static/js/components/detailPage/ProcessedData/hooks.ts +++ b/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) { return dataset.creation_action === 'Central Process'; @@ -37,3 +38,28 @@ export function useSortedSearchHits(datasets: ReturnType[]) { + const pipelines = datasets.map((dataset) => dataset.pipeline); + const pipelineCounts = pipelines.reduce( + (acc, pipeline) => { + acc[pipeline] = (acc[pipeline] || 0) + 1; + return acc; + }, + {} as Record, + ); + const pipelinesText = `Pipelines (${Object.keys(pipelineCounts).length})`; + const pipelineCountsText = generateCommaList( + Object.entries(pipelineCounts).map(([pipeline, count]) => (count > 1 ? `${pipeline} (${count})` : pipeline)), + ); + + return { + pipelinesText, + pipelineCountsText, + }; +}