diff --git a/app/scripts/components/common/catalog/catalog-content.tsx b/app/scripts/components/common/catalog/catalog-content.tsx index 29b17a316..88f1a8569 100644 --- a/app/scripts/components/common/catalog/catalog-content.tsx +++ b/app/scripts/components/common/catalog/catalog-content.tsx @@ -134,15 +134,6 @@ function CatalogContent({ // eslint-disable-next-line react-hooks/exhaustive-deps }, [selectedFilters]); - const getSelectedIdsWithParentData = (selectedIds) => { - return selectedIds.map((selectedId: string) => { - const parentData = findParentDataset(selectedId, datasets); - const exclusiveSource = parentData?.sourceExclusive; - const parentDataSourceValues = parentData?.taxonomy.filter((x) => x.name === 'Source')[0]?.values.map((value) => value.id); - return { id: selectedId, values: parentDataSourceValues, sourceExclusive: exclusiveSource?.toLowerCase() ?? '' }; - }); - }; - const filterRelevantIdsBasedOnExclusion = (selectedIdsWithParentData, exclusionSelected) => { if (exclusionSelected) { return selectedIdsWithParentData.filter((x) => x.values?.includes(x.sourceExclusive)).map((x) => x.id); @@ -152,8 +143,18 @@ function CatalogContent({ }; const onCardSelect = useCallback((id: string, currentDataset: DatasetData) => { + if (!setSelectedIds || selectedIds === undefined) return; + const getSelectedIdsWithParentData = (selectedIds) => { + return selectedIds.map((selectedId: string) => { + const parentData = findParentDataset(selectedId, datasets); + const exclusiveSource = parentData?.sourceExclusive; + const parentDataSourceValues = parentData?.taxonomy.filter((x) => x.name === 'Source')[0]?.values.map((value) => value.id); + return { id: selectedId, values: parentDataSourceValues, sourceExclusive: exclusiveSource?.toLowerCase() ?? '' }; + }); + }; + const exclusiveSource = currentDataset.sourceExclusive?.toLowerCase(); const sources = getTaxonomy(currentDataset, TAXONOMY_SOURCE)?.values; const sourceIds = sources?.map(source => source.id); @@ -163,14 +164,15 @@ function CatalogContent({ let selectedIdsWithParentData = getSelectedIdsWithParentData(newSelectedIds); // @NOTE: Check if the new exclusiveSource is selected. Filter out the old one. - if (exclusiveSource !== exclusiveSourceSelected) { - selectedIdsWithParentData = selectedIdsWithParentData.filter(d => d.sourceExclusive !== exclusiveSourceSelected) + let prevExclusiveSourceValue; + if (exclusiveSourceSelected) prevExclusiveSourceValue = exclusiveSourceSelected; + else if (selectedIdsWithParentData.length) prevExclusiveSourceValue = selectedIdsWithParentData.find(d => d.sourceExclusive)?.sourceExclusive; + if (exclusiveSource !== prevExclusiveSourceValue) { + selectedIdsWithParentData = selectedIdsWithParentData.filter(d => d.sourceExclusive !== prevExclusiveSourceValue); } const relevantIdsBasedOnExclusion = filterRelevantIdsBasedOnExclusion(selectedIdsWithParentData, exclusiveSource && sourceIds?.includes(exclusiveSource)); - let relevantIdsBasedOnPreviousExclusion - if (exclusiveSource && sourceIds?.includes(exclusiveSource)) { setExclusiveSourceSelected(exclusiveSource); } else { @@ -178,7 +180,7 @@ function CatalogContent({ } setSelectedIds(newSelectedIds.filter((id) => relevantIdsBasedOnExclusion.includes(id))); - }, [selectedIds, setSelectedIds]); + }, [selectedIds, setSelectedIds, exclusiveSourceSelected, datasets]); useEffect(() => { const updated = prepareDatasets(allDatasetsWithEnhancedLayers, { @@ -287,11 +289,11 @@ function CatalogContent({ } export default CatalogContent; - const WarningPill = styled(Pill)` margin-left: 8px; `; + export const ParentDatasetTitle = styled.h2<{size?: string}>` color: ${themeVal('color.primary')}; text-align: left;