feat: integrate dataset schemas into datasets preview and details, adding schema queries and TypeBadge component

Author: ErwanDecoster

src/modules/datasets/DatasetsPreviewTable.tsx

@@ -12,6 +12,7 @@ import { createPlaceholderDataFnForQueryKey } from '@/utils/createPlaceholderDat
 import { ErrorAlert } from '../ErrorAlert';
 import { datasetsQuery } from './datasetsQuery';
 import { columns } from './datasetsTable/columns';
+import { useDatasetsSchemas } from './hooks/useDatasetsSchemas';
 
 export function DatasetsPreviewTable({ className }: { className?: string }) {
   const { chainId } = useUserStore();
@@ -29,10 +30,20 @@ export function DatasetsPreviewTable({ className }: { className?: string }) {
     placeholderData: createPlaceholderDataFnForQueryKey(queryKey),
   });
 
+  const datasetsArray = datasets.data?.datasets ?? [];
+
+  const datasetAddresses = datasetsArray.map((dataset) => dataset.address);
+  const { schemasMap, isLoading: isSchemasLoading } = useDatasetsSchemas(
+    datasetAddresses,
+    chainId!
+  );
+
   const formattedData =
     datasets.data?.datasets.map((dataset) => ({
       ...dataset,
       destination: `/dataset/${dataset.address}`,
+      schema: schemasMap.get(dataset.address) || [],
+      isSchemasLoading,
     })) ?? [];
 
   return (

src/modules/datasets/dataset/buildDatasetDetails.tsx

@@ -1,4 +1,5 @@
-import { DatasetQuery } from '@/graphql/graphql';
+import { DatasetSchemaQuery } from '@/graphql/dataprotector/graphql';
+import { DatasetQuery } from '@/graphql/poco/graphql';
 import CopyButton from '@/components/CopyButton';
 import SmartLinkGroup from '@/components/SmartLinkGroup';
 import TransferEvent from '@/modules/events/TransferEvent';
@@ -7,15 +8,23 @@ import {
   formatDateCompact,
   formatElapsedTime,
 } from '@/utils/formatElapsedTime';
+import TypeBadge from './schema/TypeBadge';
 
 export function buildDatasetDetails({
   dataset,
+  schema,
+  isSchemaLoading,
 }: {
   dataset: DatasetQuery['dataset'];
+  schema?: NonNullable<
+    NonNullable<DatasetSchemaQuery['protectedData']>['schema']
+  >;
+  isSchemaLoading: boolean;
 }) {
   if (!dataset) {
     return {};
   }
+
   const firstTransfer =
     Array.isArray(dataset?.transfers) && dataset?.transfers[0];
   const firstTimestamp = firstTransfer?.transaction?.timestamp;
@@ -38,6 +47,17 @@ export function buildDatasetDetails({
         <SmartLinkGroup type={'address'} addressOrId={dataset.owner.address} />
       ),
     }),
+    ...(schema && {
+      Type: (
+        <TypeBadge
+          isLoading={isSchemaLoading}
+          schemaPaths={schema}
+          maxVisible={Infinity}
+          direction="horizontal"
+          overflowHidden={false}
+        />
+      ),
+    }),
     ...(firstTimestamp && {
       Created: (
         <p>

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

@@ -0,0 +1,108 @@
+import { DatasetSchemaQuery } from '@/graphql/dataprotector/graphql';
+import { cn } from '@/lib/utils';
+import React from 'react';
+import { pluralize } from '@/utils/pluralize';
+
+interface TypeBadgeProps {
+  schemaPaths?: NonNullable<
+    NonNullable<DatasetSchemaQuery['protectedData']>['schema']
+  >;
+  isLoading?: boolean;
+  maxVisible?: number;
+  direction?: 'vertical' | 'horizontal';
+  className?: string;
+  overflowHidden?: boolean;
+}
+
+const borderTypeColor = [
+  { keywords: ['string'], color: 'border-yellow-500 text-yellow-500' },
+  { keywords: ['video'], color: 'border-orange-300 text-orange-300' },
+  { keywords: ['bool'], color: 'border-blue-200 text-blue-200' },
+  { keywords: ['application'], color: 'border-blue-400 text-blue-400' },
+  { keywords: ['audio'], color: 'border-[#A0B1FE] text-[#A0B1FE]' },
+  { keywords: ['f64'], color: 'border-green-200 text-green-200' },
+  { keywords: ['i128'], color: 'border-purple-200 text-purple-200' },
+  { keywords: ['image'], color: 'border-[#F05FC5] text-[#F05FC5]' },
+  { keywords: ['number'], color: 'border-[#F693B8] text-[#F693B8]' },
+  { keywords: ['boolean'], color: 'border-purple-100 text-purple-100' },
+];
+
+const TypeBadge: React.FC<TypeBadgeProps> = ({
+  schemaPaths,
+  isLoading,
+  maxVisible = 2,
+  direction = 'vertical',
+  className,
+  overflowHidden = true,
+}) => {
+  if (isLoading && schemaPaths && schemaPaths.length === 0) {
+    return (
+      <span className="border-muted-foreground text-muted-foreground rounded-full border px-4 py-2 text-xs">
+        Loading...
+      </span>
+    );
+  }
+  if (!schemaPaths || schemaPaths.length === 0) {
+    return <span className="text-muted-foreground">No type</span>;
+  }
+  const visibleItems = schemaPaths.slice(0, maxVisible);
+  const hiddenCount = schemaPaths.length - visibleItems.length;
+
+  return (
+    <div
+      className={cn(
+        `flex`,
+        direction === 'vertical'
+          ? 'flex-col gap-1'
+          : 'flex-row flex-wrap gap-4',
+        className
+      )}
+    >
+      {visibleItems.map((schema, index) => {
+        const borderColor = borderTypeColor.find((color) =>
+          color.keywords.some((keyword) =>
+            schema.type?.toLowerCase().includes(keyword)
+          )
+        )?.color;
+        return (
+          <span
+            key={index}
+            className={cn(
+              'inline-flex w-fit rounded-full border px-4 py-2 text-xs',
+              borderColor,
+              overflowHidden && 'max-w-36'
+            )}
+            title={
+              overflowHidden ? `${schema.path}: ${schema.type}` : undefined
+            }
+          >
+            <span
+              className={cn(
+                'inline-block',
+                overflowHidden &&
+                  'max-w-18 truncate overflow-hidden text-ellipsis'
+              )}
+            >
+              {schema.path}
+            </span>
+            <span
+              className={cn(
+                'inline-block min-w-0 flex-1',
+                overflowHidden && 'truncate overflow-hidden text-ellipsis'
+              )}
+            >
+              : {schema.type}
+            </span>
+          </span>
+        );
+      })}
+      {hiddenCount > 0 && (
+        <span className="w-fit text-xs text-gray-500 hover:bg-gray-100">
+          +{pluralize(hiddenCount, 'other')}
+        </span>
+      )}
+    </div>
+  );
+};
+
+export default TypeBadge;

src/modules/datasets/dataset/schema/datasetSchemaDpQuery.ts

@@ -0,0 +1,12 @@
+import { graphql } from '@/graphql/dataprotector/gql';
+
+export const datasetSchemaQuery = graphql(`
+  query DatasetSchema($datasetAddress: ID!) {
+    protectedData(id: $datasetAddress) {
+      schema {
+        path
+        type
+      }
+    }
+  }
+`);

src/modules/datasets/dataset/schema/datasetsSchemaDpQuery.ts

@@ -0,0 +1,13 @@
+import { graphql } from '@/graphql/dataprotector/gql';
+
+export const datasetsSchemaQuery = graphql(`
+  query datasetsSchema($datasetIds: [Bytes!]!) {
+    protectedDatas(where: { id_in: $datasetIds }) {
+      id
+      schema {
+        path
+        type
+      }
+    }
+  }
+`);

src/modules/datasets/dataset/schemaSearchPaginatedDpQuery.ts

@@ -0,0 +1,49 @@
+import { graphql } from '@/graphql/dataprotector/gql';
+
+// Query pour la recherche par schéma avec pagination optimisée et filtrage côté serveur
+export const schemaSearchPaginatedQuery = graphql(`
+  query SchemaSearchPaginated(
+    $length: Int = 20
+    $skip: Int = 0
+    $nextSkip: Int = 20
+    $nextNextSkip: Int = 40
+    $requiredSchema: [String!]
+  ) {
+    protectedDatas(
+      where: { transactionHash_not: "0x", schema_contains: $requiredSchema }
+      skip: $skip
+      first: $length
+      orderBy: creationTimestamp
+      orderDirection: desc
+    ) {
+      id
+      name
+      creationTimestamp
+      owner {
+        id
+      }
+      schema {
+        path
+        type
+      }
+    }
+    protectedDatasHasNext: protectedDatas(
+      where: { transactionHash_not: "0x", schema_contains: $requiredSchema }
+      first: 1
+      skip: $nextSkip
+      orderBy: creationTimestamp
+      orderDirection: desc
+    ) {
+      id
+    }
+    protectedDatasHasNextNext: protectedDatas(
+      where: { transactionHash_not: "0x", schema_contains: $requiredSchema }
+      first: 1
+      skip: $nextNextSkip
+      orderBy: creationTimestamp
+      orderDirection: desc
+    ) {
+      id
+    }
+  }
+`);

src/modules/datasets/datasetsTable/TypeBadge.tsx

@@ -3,10 +3,12 @@ import { ColumnDef } from '@tanstack/react-table';
 import CopyButton from '@/components/CopyButton';
 import { formatElapsedTime } from '@/utils/formatElapsedTime';
 import { truncateAddress } from '@/utils/truncateAddress';
-import TypeBadge from './TypeBadge';
-
-type Dataset = DatasetsQuery['datasets'][number];
+import TypeBadge from '../dataset/schema/TypeBadge';
 
+type Dataset = DatasetsQuery['datasets'][number] & {
+  schema?: Array<{ path?: string | null; type?: string | null }>;
+  isSchemasLoading?: boolean;
+};
 export const columns: ColumnDef<Dataset>[] = [
   {
     accessorKey: 'datasetAddress',
@@ -42,17 +44,14 @@ export const columns: ColumnDef<Dataset>[] = [
     },
   },
   {
-    accessorKey: 'datasetName',
+    accessorKey: 'datasetSchema',
     header: 'Type',
     cell: ({ row }) => {
-      // const datasetType = row.original.type;
-      const datasetType = [
-        { name: 'Email', type: 'string' },
-        { name: 'Photo', type: 'image' },
-        { name: 'Agent IA', type: 'bool' },
-        { name: 'Credit score', type: 'f64' },
-      ]; // Temporary until TheGraph supports dataset type
-      return <TypeBadge datasetType={datasetType} />;
+      const datasetSchema = row.original.schema;
+      const isSchemasLoading = row.original.isSchemasLoading;
+      return (
+        <TypeBadge isLoading={isSchemasLoading} schemaPaths={datasetSchema} />
+      );
     },
   },
   {