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;