Hotfix for sourceExclusive, filtername display (#1161)

- `sourceExclusive` had a bug that it did not factor in if the
sourceExlusive value was changed or not. This PR handles the fix for it
- The filter was not showing the selected filter's name. This PR also
has the fix for it.

I made this branch protected  -
FYI the branch is named as v5.7.2 but we end up cutting v5.7.3 out of
this branch. sorry for the confusion

app/scripts/components/common/browse-controls/index.tsx

@@ -93,7 +93,7 @@ function BrowseControls(props: BrowseControlsProps) {
  key={name}
  prefix={name}
  items={[optionAll].concat(values)}
- currentId={(taxonomies[name] as string[] | null)?.length ? taxonomies[name][0] as string : 'all'}
+ currentId={(taxonomies[name]? taxonomies[name] as unknown as string : 'all')}
  onChange={(v) => {
  onAction(FilterActions.TAXONOMY, { key: name, value: v });
  }}
@@ -141,7 +141,6 @@ interface DropdownOptionsProps {
 
 function DropdownOptions(props: DropdownOptionsProps) {
  const { size, items, currentId, onChange, prefix } = props;
-
  const currentItem = items.find((d) => d.id === currentId);
 
  return (

app/scripts/components/common/catalog/catalog-content.tsx

@@ -138,15 +138,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);
@@ -156,26 +147,44 @@ 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);
 
  const newSelectedIds = selectedIds.includes(id) ? selectedIds.filter((i) => i !== id) : [...selectedIds, id];
 
- const selectedIdsWithParentData = getSelectedIdsWithParentData(newSelectedIds);
+ let selectedIdsWithParentData = getSelectedIdsWithParentData(newSelectedIds);
+
+ // @NOTE: Check if the new exclusiveSource is selected. Filter out the old one.
+ 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));
 
  if (exclusiveSource && sourceIds?.includes(exclusiveSource)) {
  setExclusiveSourceSelected(exclusiveSource);
  } else {
  setExclusiveSourceSelected(null);
  }
 
- const relevantIdsBasedOnExclusion = filterRelevantIdsBasedOnExclusion(selectedIdsWithParentData, exclusiveSource && sourceIds?.includes(exclusiveSource));
-
  setSelectedIds(newSelectedIds.filter((id) => relevantIdsBasedOnExclusion.includes(id)));
- }, [selectedIds, setSelectedIds]);
+ }, [selectedIds, setSelectedIds, exclusiveSourceSelected, datasets]);
 
  useEffect(() => {
  const updated = prepareDatasets(allDatasetsWithEnhancedLayers, {
@@ -292,11 +301,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;