Feat: License filtering in search

external_types/DatabaseCatalogAPI.yaml

@@ -338,6 +338,7 @@ paths:
         - $ref: "#/components/parameters/version_query_param"
         - $ref: "#/components/parameters/search_text_query_param"
         - $ref: "#/components/parameters/feature"
+        - $ref: "#/components/parameters/license_ids_query_param"
       security:
         - Authentication: []
       responses:
@@ -1793,6 +1794,15 @@ components:
         type: string
         example: 2.3
 
+    license_ids_query_param:
+      name: license_ids
+      in: query
+      description: Comma separated list of license IDs to filter by.
+      required: False
+      schema:
+        type: string
+        example: CC-BY-4.0,CC0-1.0
+
   securitySchemes:
     Authentication:
       $ref: "./BearerTokenSchema.yaml#/components/securitySchemes/Authentication"

src/app/screens/Feeds/AdvancedSearchTable.tsx

@@ -31,6 +31,43 @@ export interface AdvancedSearchTableProps {
   selectedGbfsVersions: string[] | undefined;
 }
 
+interface DetailsContainerProps {
+  children: React.ReactNode;
+  feedSearchItem: SearchFeedItem;
+}
+
+const DetailsContainer = ({
+  children,
+  feedSearchItem,
+}: DetailsContainerProps): React.ReactElement => {
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'end',
+        flexWrap: { xs: 'wrap', lg: 'nowrap' },
+      }}
+    >
+      <Box sx={{ width: 'calc(100% - 100px' }}>{children}</Box>
+      <Tooltip title={'Feed License'} placement={'top-end'}>
+        <Typography
+          variant='caption'
+          sx={{
+            opacity: 0.7,
+            ml: { xs: 0, lg: 2 },
+            minWidth: { xs: '100%', lg: '100px' },
+            textAlign: 'right',
+            pt: { xs: 1, lg: 0 },
+          }}
+        >
+          {feedSearchItem.source_info?.license_id}
+        </Typography>
+      </Tooltip>
+    </Box>
+  );
+};
+
 const renderGTFSDetails = (
   gtfsFeed: SearchFeedItem,
   selectedFeatures: string[],
@@ -39,7 +76,7 @@ const renderGTFSDetails = (
   const feedFeatures =
     gtfsFeed?.latest_dataset?.validation_report?.features ?? [];
   return (
-    <>
+    <DetailsContainer feedSearchItem={gtfsFeed}>
       {gtfsFeed?.feed_name != null && (
         <Typography
           variant='body1'
@@ -75,18 +112,20 @@ const renderGTFSDetails = (
           },
         )}
       </Box>
-    </>
+    </DetailsContainer>
   );
 };
 
 const renderGTFSRTDetails = (
   gtfsRtFeed: SearchFeedItem,
 ): React.ReactElement => {
   return (
-    <GtfsRtEntities
-      entities={gtfsRtFeed?.entity_types}
-      includeName={true}
-    ></GtfsRtEntities>
+    <DetailsContainer feedSearchItem={gtfsRtFeed}>
+      <GtfsRtEntities
+        entities={gtfsRtFeed?.entity_types}
+        includeName={true}
+      ></GtfsRtEntities>
+    </DetailsContainer>
   );
 };
 
@@ -96,7 +135,7 @@ const renderGBFSDetails = (
 ): React.ReactElement => {
   const theme = useTheme();
   return (
-    <Box>
+    <DetailsContainer feedSearchItem={gbfsFeedSearchElement}>
       {gbfsFeedSearchElement.versions?.map((version: string, index: number) => (
         <Chip
           label={'v' + version}
@@ -112,7 +151,7 @@ const renderGBFSDetails = (
           }}
         />
       ))}
-    </Box>
+    </DetailsContainer>
   );
 };
 

src/app/screens/Feeds/SearchFilters.tsx

@@ -27,10 +27,12 @@ interface SearchFiltersProps {
   isOfficialFeedSearch: boolean;
   selectedFeatures: string[];
   selectedGbfsVersions: string[];
+  selectedLicenses: string[];
   setSelectedFeedTypes: (selectedFeedTypes: Record<string, boolean>) => void;
   setIsOfficialFeedSearch: (isOfficialFeedSearch: boolean) => void;
   setSelectedFeatures: (selectedFeatures: string[]) => void;
   setSelectedGbfsVerions: (selectedVersions: string[]) => void;
+  setSelectedLicenses: (selectedLicenses: string[]) => void;
   isOfficialTagFilterEnabled: boolean;
   areFeatureFiltersEnabled: boolean;
   areGBFSFiltersEnabled: boolean;
@@ -41,10 +43,12 @@ export function SearchFilters({
   isOfficialFeedSearch,
   selectedFeatures,
   selectedGbfsVersions,
+  selectedLicenses,
   setSelectedFeedTypes,
   setIsOfficialFeedSearch,
   setSelectedFeatures,
   setSelectedGbfsVerions,
+  setSelectedLicenses,
   isOfficialTagFilterEnabled,
   areFeatureFiltersEnabled,
   areGBFSFiltersEnabled,
@@ -61,6 +65,7 @@ export function SearchFilters({
     features: areFeatureFiltersEnabled,
     tags: isOfficialTagFilterEnabled,
     gbfsVersions: true,
+    licenses: true,
   });
   const [featureCheckboxData, setFeatureCheckboxData] = useState<
     CheckboxStructure[]
@@ -279,6 +284,75 @@ export function SearchFilters({
           ></NestedCheckboxList>
         </AccordionDetails>
       </Accordion>
+
+      <Accordion
+        disableGutters
+        variant={'outlined'}
+        sx={{
+          border: 0,
+          '&::before': {
+            display: 'none',
+          },
+        }}
+        expanded={expandedCategories.licenses}
+        onChange={() => {
+          setExpandedCategories({
+            ...expandedCategories,
+            licenses: !expandedCategories.licenses,
+          });
+        }}
+      >
+        <AccordionSummary
+          expandIcon={<ExpandMoreIcon />}
+          aria-controls='panel-licenses-content'
+          sx={{
+            px: 0,
+          }}
+        >
+          <SearchHeader variant='h6'>Licenses</SearchHeader>
+        </AccordionSummary>
+        <AccordionDetails sx={{ p: 0, m: 0, border: 0 }}>
+          <NestedCheckboxList
+            debounceTime={500}
+            checkboxData={[
+              {
+                title: 'CC-BY-4.0',
+                checked: selectedLicenses.includes('CC-BY-4.0'),
+                type: 'checkbox',
+              },
+              {
+                title: 'etalab-2.0',
+                checked: selectedLicenses.includes('etalab-2.0'),
+                type: 'checkbox',
+              },
+              {
+                title: 'CC0-1.0',
+                checked: selectedLicenses.includes('CC0-1.0'),
+                type: 'checkbox',
+              },
+              {
+                title: 'ODbL-1.0',
+                checked: selectedLicenses.includes('ODbL-1.0'),
+                type: 'checkbox',
+              },
+              {
+                title: 'OGL-UK-3.0',
+                checked: selectedLicenses.includes('OGL-UK-3.0'),
+                type: 'checkbox',
+              },
+            ]}
+            onCheckboxChange={(checkboxData) => {
+              const selectedLicenseIds: string[] = [];
+              checkboxData.forEach((checkbox) => {
+                if (checkbox.checked) {
+                  selectedLicenseIds.push(checkbox.title);
+                }
+              });
+              setSelectedLicenses([...selectedLicenseIds]);
+            }}
+          ></NestedCheckboxList>
+        </AccordionDetails>
+      </Accordion>
     </>
   );
 }

src/app/screens/Feeds/index.tsx

@@ -69,6 +69,9 @@ export default function Feed(): React.ReactElement {
   const [selectGbfsVersions, setSelectGbfsVersions] = useState<string[]>(
     searchParams.get('gbfs_versions')?.split(',') ?? [],
   );
+  const [selectedLicenses, setSelectedLicenses] = useState<string[]>(
+    searchParams.get('licenses')?.split(',') ?? [],
+  );
   const [activePagination, setActivePagination] = useState(
     searchParams.get('o') !== null ? Number(searchParams.get('o')) : 1,
   );
@@ -130,6 +133,10 @@ export default function Feed(): React.ReactElement {
             version: areGBFSFiltersEnabled
               ? selectGbfsVersions.join(',').replaceAll('v', '')
               : undefined,
+            license_ids:
+              selectedLicenses.length > 0
+                ? selectedLicenses.join(',')
+                : undefined,
           },
         },
       }),
@@ -143,6 +150,7 @@ export default function Feed(): React.ReactElement {
     isOfficialFeedSearch,
     selectedFeatures,
     selectGbfsVersions,
+    selectedLicenses,
   ]);
 
   useEffect(() => {
@@ -169,6 +177,9 @@ export default function Feed(): React.ReactElement {
     if (selectGbfsVersions.length > 0) {
       newSearchParams.set('gbfs_versions', selectGbfsVersions.join(','));
     }
+    if (selectedLicenses.length > 0) {
+      newSearchParams.set('licenses', selectedLicenses.join(','));
+    }
     if (isOfficialFeedSearch) {
       newSearchParams.set('official', 'true');
     }
@@ -187,6 +198,7 @@ export default function Feed(): React.ReactElement {
     selectedFeedTypes,
     selectedFeatures,
     selectGbfsVersions,
+    selectedLicenses,
     isOfficialFeedSearch,
   ]);
 
@@ -214,6 +226,11 @@ export default function Feed(): React.ReactElement {
       setSelectGbfsVersions([...newGbfsVersions]);
     }
 
+    const newLicenses = searchParams.get('licenses')?.split(',') ?? [];
+    if (newLicenses.join(',') !== selectedLicenses.join(',')) {
+      setSelectedLicenses([...newLicenses]);
+    }
+
     const newSearchOfficial = Boolean(searchParams.get('official')) ?? false;
     if (newSearchOfficial !== isOfficialFeedSearch) {
       setIsOfficialFeedSearch(newSearchOfficial);
@@ -265,6 +282,7 @@ export default function Feed(): React.ReactElement {
     });
     setSelectedFeatures([]);
     setSelectGbfsVersions([]);
+    setSelectedLicenses([]);
     setIsOfficialFeedSearch(false);
   }
 
@@ -400,6 +418,7 @@ export default function Feed(): React.ReactElement {
                 isOfficialFeedSearch={isOfficialFeedSearch}
                 selectedFeatures={selectedFeatures}
                 selectedGbfsVersions={selectGbfsVersions}
+                selectedLicenses={selectedLicenses}
                 setSelectedFeedTypes={(feedTypes) => {
                   setActivePagination(1);
                   setSelectedFeedTypes({ ...feedTypes });
@@ -416,6 +435,10 @@ export default function Feed(): React.ReactElement {
                   setSelectGbfsVersions(versions);
                   setActivePagination(1);
                 }}
+                setSelectedLicenses={(licenses) => {
+                  setActivePagination(1);
+                  setSelectedLicenses(licenses);
+                }}
                 isOfficialTagFilterEnabled={isOfficialTagFilterEnabled}
                 areFeatureFiltersEnabled={areFeatureFiltersEnabled}
                 areGBFSFiltersEnabled={areGBFSFiltersEnabled}
@@ -515,8 +538,24 @@ export default function Feed(): React.ReactElement {
                     />
                   ))}
 
+                {selectedLicenses.map((license) => (
+                  <Chip
+                    color='primary'
+                    variant='outlined'
+                    size='small'
+                    label={license}
+                    key={license}
+                    onDelete={() => {
+                      setSelectedLicenses([
+                        ...selectedLicenses.filter((sl) => sl !== license),
+                      ]);
+                    }}
+                  />
+                ))}
+
                 {(selectedFeatures.length > 0 ||
                   selectGbfsVersions.length > 0 ||
+                  selectedLicenses.length > 0 ||
                   isOfficialFeedSearch ||
                   selectedFeedTypes.gtfs_rt ||
                   selectedFeedTypes.gtfs ||