feat: add onSchemaSearch prop to TypeBadge and integrate schema search functionality in datasets

Author: ErwanDecoster

src/modules/datasets/dataset/buildDatasetDetails.tsx

@@ -15,20 +15,26 @@ export function buildDatasetDetails({
   dataset,
   schema,
   isSchemaLoading,
+  onSchemaSearch,
 }: {
   dataset: DatasetQuery['dataset'];
   schema?: NonNullable<
     NonNullable<DatasetSchemaQuery['protectedData']>['schema']
   >;
   isSchemaLoading: boolean;
+  onSchemaSearch?: (
+    schema: NonNullable<
+      NonNullable<DatasetSchemaQuery['protectedData']>['schema']
+    >
+  ) => void;
 }) {
   if (!dataset) {
     return {};
   }
 
   const firstTransfer =
     Array.isArray(dataset?.transfers) && dataset?.transfers[0];
-  const firstTimestamp = firstTransfer?.transaction?.timestamp;
+  const firstTimestamp = firstTransfer && firstTransfer.transaction?.timestamp;
 
   return {
     ...(dataset.address && {
@@ -56,6 +62,7 @@ export function buildDatasetDetails({
           maxVisible={Infinity}
           direction="horizontal"
           overflowHidden={false}
+          onSchemaSearch={onSchemaSearch}
         />
       ),
     }),

src/modules/datasets/dataset/schema/TypeBadge.tsx

@@ -20,6 +20,11 @@ export interface TypeBadgeProps {
   className?: string;
   overflowHidden?: boolean;
   enableTooltip?: boolean;
+  onSchemaSearch?: (
+    schema: NonNullable<
+      NonNullable<DatasetSchemaQuery['protectedData']>['schema']
+    >
+  ) => void;
 }
 
 const getBorderColor = (type: string) => {
@@ -61,7 +66,8 @@ const renderBadge = (
 );
 
 const renderTooltipContent = (
-  schemaPaths: { path: string; type: string }[]
+  schemaPaths: { path: string; type: string }[],
+  onSchemaSearch?: (schema: any) => void
 ) => (
   <div className="flex flex-col gap-1">
     {schemaPaths.map((schema) => (
@@ -76,6 +82,18 @@ const renderTooltipContent = (
         <span>: {schema.type}</span>
       </div>
     ))}
+    {onSchemaSearch && (
+      <button
+        className="text-xs hover:underline"
+        onClick={(event) => {
+          event.stopPropagation();
+          event.preventDefault();
+          onSchemaSearch(schemaPaths);
+        }}
+      >
+        Search schemas
+      </button>
+    )}
   </div>
 );
 
@@ -87,6 +105,7 @@ const TypeBadge: React.FC<TypeBadgeProps> = ({
   className,
   overflowHidden = true,
   enableTooltip = false,
+  onSchemaSearch,
 }) => {
   if (isLoading && schemaPaths && schemaPaths.length === 0) {
     return (
@@ -137,6 +156,18 @@ const TypeBadge: React.FC<TypeBadgeProps> = ({
       )}
     >
       {badges}
+      {!enableTooltip && onSchemaSearch && (
+        <button
+          className="text-xs hover:underline"
+          onClick={(event) => {
+            event.stopPropagation();
+            event.preventDefault();
+            onSchemaSearch(schemaPaths);
+          }}
+        >
+          Search schemas
+        </button>
+      )}
     </div>
   );
 
@@ -147,7 +178,7 @@ const TypeBadge: React.FC<TypeBadgeProps> = ({
       <Tooltip>
         <TooltipTrigger asChild>{content}</TooltipTrigger>
         <TooltipContent className="max-w-xs p-4">
-          {renderTooltipContent(safeSchemaPaths)}
+          {renderTooltipContent(safeSchemaPaths, onSchemaSearch)}
         </TooltipContent>
       </Tooltip>
     </TooltipProvider>

src/modules/datasets/datasetsTable/columns.tsx

@@ -9,7 +9,12 @@ type Dataset = DatasetsQuery['datasets'][number] & {
   schema?: Array<{ path?: string | null; type?: string | null }>;
   isSchemasLoading?: boolean;
 };
-export const columns: ColumnDef<Dataset>[] = [
+
+export const createColumns = (
+  onSchemaSearch?: (
+    schema: Array<{ path?: string | null; type?: string | null }>
+  ) => void
+): ColumnDef<Dataset>[] => [
   {
     accessorKey: 'datasetAddress',
     header: 'Dataset',
@@ -54,6 +59,7 @@ export const columns: ColumnDef<Dataset>[] = [
           isLoading={isSchemasLoading}
           schemaPaths={datasetSchema}
           enableTooltip={true}
+          onSchemaSearch={onSchemaSearch}
         />
       );
     },
@@ -97,3 +103,5 @@ export const columns: ColumnDef<Dataset>[] = [
     },
   },
 ];
+
+export const columns = createColumns();

src/routes/$chainSlug/_layout/dataset/$datasetAddress.tsx

@@ -2,7 +2,11 @@ import { TABLE_LENGTH, TABLE_REFETCH_INTERVAL } from '@/config';
 import { execute as dataprotectorExecute } from '@/graphql/dataprotector/execute';
 import { execute } from '@/graphql/poco/execute';
 import { useQuery } from '@tanstack/react-query';
-import { createFileRoute } from '@tanstack/react-router';
+import {
+  createFileRoute,
+  useNavigate,
+  useSearch,
+} from '@tanstack/react-router';
 import { LoaderCircle } from 'lucide-react';
 import DatasetIcon from '@/components/icons/DatasetIcon';
 import { BackButton } from '@/components/ui/BackButton';
@@ -13,10 +17,12 @@ import { DatasetDealsTable } from '@/modules/datasets/dataset/DatasetDealsTable'
 import { buildDatasetDetails } from '@/modules/datasets/dataset/buildDatasetDetails';
 import { datasetQuery } from '@/modules/datasets/dataset/datasetQuery';
 import { datasetSchemaQuery } from '@/modules/datasets/dataset/schema/datasetSchemaDpQuery';
+import { encodeSchemaFilters } from '@/modules/datasets/schemaFilters';
 import { SearcherBar } from '@/modules/search/SearcherBar';
 import useUserStore from '@/stores/useUser.store';
 import { NotFoundError } from '@/utils/NotFoundError';
 import { isValidAddress } from '@/utils/addressOrIdCheck';
+import { getChainFromId } from '@/utils/chain.utils';
 import { createPlaceholderDataFnForQueryKey } from '@/utils/createPlaceholderDataFnForQueryKey';
 
 export const Route = createFileRoute(
@@ -87,16 +93,30 @@ function useDatasetData(datasetAddress: string, chainId: number) {
 function DatasetsRoute() {
   const { chainId } = useUserStore();
   const { datasetAddress } = Route.useParams();
+  const navigate = useNavigate();
+  const search = useSearch({ strict: false });
+
   const { dataset, schema } = useDatasetData(
     (datasetAddress as string).toLowerCase(),
     chainId!
   );
 
+  const handleSchemaSearch = (schemaFilters: any) => {
+    const encoded = encodeSchemaFilters(schemaFilters);
+    navigate({
+      to: `/${getChainFromId(chainId)?.slug}/datasets`,
+      search: { ...search, schema: encoded },
+      replace: false,
+      resetScroll: true,
+    });
+  };
+
   const datasetDetails = dataset.data
     ? buildDatasetDetails({
         dataset: dataset.data,
         schema: schema.data,
         isSchemaLoading: schema.isLoading,
+        onSchemaSearch: handleSchemaSearch,
       })
     : undefined;
 

src/routes/$chainSlug/_layout/datasets.tsx

@@ -21,7 +21,7 @@ import { DatasetBreadcrumbsList } from '@/modules/datasets/DatasetBreadcrumbs';
 import { SchemaSearch } from '@/modules/datasets/SchemaSearch';
 import { schemaSearchPaginatedQuery } from '@/modules/datasets/dataset/schemaSearchPaginatedDpQuery';
 import { datasetsQuery } from '@/modules/datasets/datasetsQuery';
-import { columns } from '@/modules/datasets/datasetsTable/columns';
+import { createColumns } from '@/modules/datasets/datasetsTable/columns';
 import { useDatasetsSchemas } from '@/modules/datasets/hooks/useDatasetsSchemas';
 import {
   decodeSchemaFilters,
@@ -170,6 +170,19 @@ function DatasetsRoute() {
     });
   };
 
+  const handleSchemaSearch = (schemaFilters: any) => {
+    navigate({
+      search: { ...search, schema: encodeSchemaFilters(schemaFilters) },
+      replace: false,
+      resetScroll: true,
+    });
+    setCurrentPage(0);
+
+    if (!isSchemaSearchOpen) {
+      setIsSchemaSearchOpen(true);
+    }
+  };
+
   const { skip, nextSkip, nextNextSkip } = getPaginationSkips(
     currentPage,
     TABLE_LENGTH
@@ -243,6 +256,8 @@ function DatasetsRoute() {
         additionalPages: datasetsData.additionalPages,
       };
 
+  const columns = createColumns(handleSchemaSearch);
+
   return (
     <div className="mt-8 grid gap-6">
       <SearcherBar className="py-6" />