license tag filtering

Alessandro100 · Alessandro100 · commit 4d537e1214a8 · 2026-03-23T13:18:21.000-04:00
diff --git a/src/app/[locale]/feeds/components/FeedsScreen.tsx b/src/app/[locale]/feeds/components/FeedsScreen.tsx
@@ -58,6 +58,7 @@ export default function FeedsScreen(): React.ReactElement {
     features: selectedFeatures,
     gbfsVersions: selectedGbfsVersions,
     licenses: selectedLicenses,
+    licenseTags: selectedLicenseTags,
     hasTransitFeedsRedirect: hasTransitFeedsRedirectParam,
   } = derivedPageState;
 
@@ -95,6 +96,7 @@ export default function FeedsScreen(): React.ReactElement {
         features: selectedFeatures,
         gbfsVersions: selectedGbfsVersions,
         licenses: selectedLicenses,
+        licenseTags: selectedLicenseTags,
         utmSource,
         ...overrides,
       });
@@ -109,6 +111,7 @@ export default function FeedsScreen(): React.ReactElement {
       selectedFeatures,
       selectedGbfsVersions,
       selectedLicenses,
+      selectedLicenseTags,
       utmSource,
       router,
     ],
@@ -134,6 +137,7 @@ export default function FeedsScreen(): React.ReactElement {
       features: [],
       gbfsVersions: [],
       licenses: [],
+      licenseTags: [],
       isOfficial: false,
     });
   }
@@ -288,6 +292,7 @@ export default function FeedsScreen(): React.ReactElement {
                 selectedFeatures={selectedFeatures}
                 selectedGbfsVersions={selectedGbfsVersions}
                 selectedLicenses={selectedLicenses}
+                selectedLicenseTags={selectedLicenseTags}
                 setSelectedFeedTypes={(feedTypes) => {
                   navigate({ feedTypes: { ...feedTypes }, page: 1 });
                 }}
@@ -303,6 +308,9 @@ export default function FeedsScreen(): React.ReactElement {
                 setSelectedLicenses={(licenses) => {
                   navigate({ licenses, page: 1 });
                 }}
+                setSelectedLicenseTags={(licenseTags) => {
+                  navigate({ licenseTags, page: 1 });
+                }}
                 isOfficialTagFilterEnabled={isOfficialTagFilterEnabled}
                 areFeatureFiltersEnabled={areFeatureFiltersEnabled}
                 areGBFSFiltersEnabled={areGBFSFiltersEnabled}
@@ -417,9 +425,27 @@ export default function FeedsScreen(): React.ReactElement {
                   />
                 ))}
 
+                {selectedLicenseTags.map((licenseTag) => (
+                  <Chip
+                    color='primary'
+                    variant='outlined'
+                    size='small'
+                    label={licenseTag}
+                    key={licenseTag}
+                    onDelete={() => {
+                      navigate({
+                        licenseTags: selectedLicenseTags.filter(
+                          (lt) => lt !== licenseTag,
+                        ),
+                      });
+                    }}
+                  />
+                ))}
+
                 {(selectedFeatures.length > 0 ||
                   selectedGbfsVersions.length > 0 ||
                   selectedLicenses.length > 0 ||
+                  selectedLicenseTags.length > 0 ||
                   isOfficialFeedSearch ||
                   selectedFeedTypes.gtfs_rt ||
                   selectedFeedTypes.gtfs ||
@@ -553,6 +579,7 @@ export default function FeedsScreen(): React.ReactElement {
                             feedsData={feedsData}
                             selectedFeatures={selectedFeatures}
                             selectedGbfsVersions={selectedGbfsVersions}
+                            selectedLicenseTags={selectedLicenseTags}
                             isLoadingFeeds={isLoading || isValidating}
                           />
                         )}
diff --git a/src/app/[locale]/feeds/lib/useFeedsSearch.ts b/src/app/[locale]/feeds/lib/useFeedsSearch.ts
@@ -63,6 +63,7 @@ export function deriveSearchParams(searchParams: URLSearchParams): {
   features: string[];
   gbfsVersions: string[];
   licenses: string[];
+  licenseTags: string[];
   hasTransitFeedsRedirect: boolean;
 } {
   const feedTypes = getInitialSelectedFeedTypes(searchParams);
@@ -76,6 +77,8 @@ export function deriveSearchParams(searchParams: URLSearchParams): {
     gbfsVersions:
       searchParams.get('gbfs_versions')?.split(',').filter(Boolean) ?? [],
     licenses: searchParams.get('licenses')?.split(',').filter(Boolean) ?? [],
+    licenseTags:
+      searchParams.get('license_tags')?.split(',').filter(Boolean) ?? [],
     hasTransitFeedsRedirect: searchParams.get('utm_source') === 'transitfeeds',
   };
 }
@@ -116,6 +119,7 @@ function buildSwrKey(derived: ReturnType<typeof deriveSearchParams>): string {
     features,
     gbfsVersions,
     licenses,
+    licenseTags,
   } = derived;
   const flags = deriveFilterFlags(feedTypes);
   const cacheWindow = Math.floor(Date.now() / CACHE_TTL_MS);
@@ -138,6 +142,9 @@ function buildSwrKey(derived: ReturnType<typeof deriveSearchParams>): string {
   if (licenses.length > 0) {
     params.set('licenses', licenses.join(','));
   }
+  if (licenseTags.length > 0) {
+    params.set('license_tags', licenseTags.join(','));
+  }
   return `feeds-search?${params.toString()}`;
 }
 
@@ -156,6 +163,7 @@ async function feedsFetcher(
     features,
     gbfsVersions,
     licenses,
+    licenseTags,
   } = derivedSearchParams;
   const flags = deriveFilterFlags(feedTypes);
   const offset = (page - 1) * SEARCH_LIMIT;
@@ -175,6 +183,7 @@ async function feedsFetcher(
         ? gbfsVersions.join(',').replaceAll('v', '')
         : undefined,
       license_ids: licenses.length > 0 ? licenses.join(',') : undefined,
+      license_tags: licenseTags.length > 0 ? licenseTags.join(',') : undefined,
     },
   };
 
@@ -249,6 +258,7 @@ export function buildSearchUrl(
     features?: string[];
     gbfsVersions?: string[];
     licenses?: string[];
+    licenseTags?: string[];
     utmSource?: string | null;
   },
 ): string {
@@ -278,6 +288,9 @@ export function buildSearchUrl(
   if (filters.licenses != null && filters.licenses.length > 0) {
     params.set('licenses', filters.licenses.join(','));
   }
+  if (filters.licenseTags != null && filters.licenseTags.length > 0) {
+    params.set('license_tags', filters.licenseTags.join(','));
+  }
   if (filters.isOfficial === true) {
     params.set('official', 'true');
   }
diff --git a/src/app/screens/Feeds/AdvancedSearchTable.tsx b/src/app/screens/Feeds/AdvancedSearchTable.tsx
@@ -20,6 +20,7 @@ import * as React from 'react';
 import { FeedStatusIndicator } from '../../components/FeedStatus';
 import { useTranslations } from 'next-intl';
 import LockIcon from '@mui/icons-material/Lock';
+import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
 import GtfsRtEntities from './GtfsRtEntities';
 import { getEmojiFlag, type TCountryCode } from 'countries-list';
 import OfficialChip from '../../components/OfficialChip';
@@ -33,18 +34,28 @@ export interface AdvancedSearchTableProps {
   feedsData: AllFeedsType | undefined;
   selectedFeatures: string[] | undefined;
   selectedGbfsVersions: string[] | undefined;
+  selectedLicenseTags: string[] | undefined;
   isLoadingFeeds: boolean;
 }
 
 interface DetailsContainerProps {
   children: React.ReactNode;
   feedSearchItem: SearchFeedItem;
+  selectedLicenseTags: string[];
 }
 
 const DetailsContainer = ({
   children,
   feedSearchItem,
+  selectedLicenseTags,
 }: DetailsContainerProps): React.ReactElement => {
+  const licenseTags = feedSearchItem.source_info?.license_tags;
+  const licenseTagsTitle =
+    licenseTags != null && licenseTags.length > 0
+      ? licenseTags.join(', ')
+      : undefined;
+  const matchingTags =
+    licenseTags?.filter((tag) => selectedLicenseTags.includes(tag)) ?? [];
   return (
     <Box
       sx={{
@@ -55,20 +66,52 @@ const DetailsContainer = ({
       }}
     >
       <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 },
-          }}
+      <Box
+        sx={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: 0.5,
+          ml: { xs: 0, lg: 2 },
+          minWidth: { xs: '100%', lg: '100px' },
+          justifyContent: 'flex-end',
+          flexWrap: 'wrap',
+          pt: { xs: 1, lg: 0 },
+        }}
+      >
+        {matchingTags.map((tag) => (
+          <Chip
+            key={tag}
+            label={tag}
+            size='small'
+            color='primary'
+            variant='outlined'
+            sx={{ opacity: 0.8 }}
+          />
+        ))}
+        <Tooltip
+          title={licenseTagsTitle ?? ''}
+          placement='top-end'
+          disableTouchListener={licenseTagsTitle == null}
         >
-          {feedSearchItem.source_info?.license_id}
-        </Typography>
-      </Tooltip>
+          <Box
+            sx={{
+              display: 'flex',
+              alignItems: 'center',
+              gap: 0.5,
+            }}
+          >
+            {licenseTagsTitle != null && (
+              <InfoOutlinedIcon sx={{ fontSize: 14, opacity: 0.7 }} />
+            )}
+            <Typography
+              variant='caption'
+              sx={{ opacity: 0.7, textAlign: 'right' }}
+            >
+              {feedSearchItem.source_info?.license_id}
+            </Typography>
+          </Box>
+        </Tooltip>
+      </Box>
     </Box>
   );
 };
@@ -77,11 +120,15 @@ const renderGTFSDetails = (
   gtfsFeed: SearchFeedItem,
   selectedFeatures: string[],
   theme: Theme,
+  selectedLicenseTags: string[],
 ): React.ReactElement => {
   const feedFeatures =
     gtfsFeed?.latest_dataset?.validation_report?.features ?? [];
   return (
-    <DetailsContainer feedSearchItem={gtfsFeed}>
+    <DetailsContainer
+      feedSearchItem={gtfsFeed}
+      selectedLicenseTags={selectedLicenseTags}
+    >
       {gtfsFeed?.feed_name != null && (
         <Typography
           variant='body1'
@@ -123,9 +170,13 @@ const renderGTFSDetails = (
 
 const renderGTFSRTDetails = (
   gtfsRtFeed: SearchFeedItem,
+  selectedLicenseTags: string[],
 ): React.ReactElement => {
   return (
-    <DetailsContainer feedSearchItem={gtfsRtFeed}>
+    <DetailsContainer
+      feedSearchItem={gtfsRtFeed}
+      selectedLicenseTags={selectedLicenseTags}
+    >
       <GtfsRtEntities
         entities={gtfsRtFeed?.entity_types}
         includeName={true}
@@ -138,9 +189,13 @@ const renderGBFSDetails = (
   gbfsFeedSearchElement: SearchFeedItem,
   selectedGbfsVersions: string[],
   theme: Theme,
+  selectedLicenseTags: string[],
 ): React.ReactElement => {
   return (
-    <DetailsContainer feedSearchItem={gbfsFeedSearchElement}>
+    <DetailsContainer
+      feedSearchItem={gbfsFeedSearchElement}
+      selectedLicenseTags={selectedLicenseTags}
+    >
       {gbfsFeedSearchElement.versions?.map((version: string, index: number) => (
         <Chip
           label={'v' + version}
@@ -164,6 +219,7 @@ export default function AdvancedSearchTable({
   feedsData,
   selectedFeatures,
   selectedGbfsVersions,
+  selectedLicenseTags,
   isLoadingFeeds,
 }: AdvancedSearchTableProps): React.ReactElement {
   const t = useTranslations('feeds');
@@ -390,18 +446,28 @@ export default function AdvancedSearchTable({
                         : {}
                     }
                   >
-                    {renderGTFSDetails(feed, selectedFeatures ?? [], theme)}
+                    {renderGTFSDetails(
+                      feed,
+                      selectedFeatures ?? [],
+                      theme,
+                      selectedLicenseTags ?? [],
+                    )}
                   </Box>
                 )}
                 {feed.data_type === 'gtfs_rt' && (
                   <Box sx={descriptionDividerStyle}>
-                    {renderGTFSRTDetails(feed)}
+                    {renderGTFSRTDetails(feed, selectedLicenseTags ?? [])}
                   </Box>
                 )}
 
                 {feed.data_type === 'gbfs' && (
                   <Box sx={hasGbfsVersions ? descriptionDividerStyle : {}}>
-                    {renderGBFSDetails(feed, selectedGbfsVersions ?? [], theme)}
+                    {renderGBFSDetails(
+                      feed,
+                      selectedGbfsVersions ?? [],
+                      theme,
+                      selectedLicenseTags ?? [],
+                    )}
                   </Box>
                 )}
               </Box>
diff --git a/src/app/screens/Feeds/SearchFilters.tsx b/src/app/screens/Feeds/SearchFilters.tsx
