feat: implement DatasetTypes component and integrate schema handling in DatasetsPreviewTable

Le-Caignec · Le-Caignec · commit 12b5b4a2bdbe · 2025-07-27T12:37:44.000+02:00
diff --git a/src/components/DatasetTypes.tsx b/src/components/DatasetTypes.tsx
@@ -0,0 +1,78 @@
+import { processSchemaPathsToTypes } from '@/modules/datasets/utils/datasetTypeUtils';
+
+interface DatasetTypesProps {
+  schemaPaths?: Array<{ path?: string | null }>;
+  isLoading?: boolean;
+  layout?: 'horizontal' | 'vertical';
+  maxDisplay?: number;
+  showMoreCount?: boolean;
+}
+
+export function DatasetTypes({
+  schemaPaths,
+  isLoading,
+  layout = 'horizontal',
+  maxDisplay,
+  showMoreCount = false,
+}: DatasetTypesProps) {
+  const displayTypes = processSchemaPathsToTypes(schemaPaths);
+
+  if (isLoading) {
+    const skeletonCount = 5;
+
+    return (
+      <div
+        className={`flex ${layout === 'vertical' ? 'flex-col' : 'flex-wrap'} gap-1`}
+      >
+        {Array.from({ length: skeletonCount }, (_, i) => (
+          <div
+            key={i}
+            className="bg-muted w-40 flex-shrink-0 animate-pulse rounded-lg border p-3"
+          >
+            <div className="flex-1">
+              <div className="bg-muted-foreground/20 mb-2 h-4 rounded"></div>
+              <div className="bg-muted-foreground/10 h-3 w-3/4 rounded"></div>
+            </div>
+          </div>
+        ))}
+      </div>
+    );
+  }
+
+  if (!schemaPaths || schemaPaths.length === 0 || displayTypes.length === 0) {
+    return <span className="text-muted-foreground text-sm">No type</span>;
+  }
+
+  const typesToShow = maxDisplay
+    ? displayTypes.slice(0, maxDisplay)
+    : displayTypes;
+  const remainingCount =
+    maxDisplay && displayTypes.length > maxDisplay
+      ? displayTypes.length - maxDisplay
+      : 0;
+
+  return (
+    <div
+      className={`flex ${layout === 'vertical' ? 'flex-col' : 'flex-wrap'} gap-1 ${layout === 'vertical' ? 'max-w-40' : ''}`}
+    >
+      {typesToShow.map((type) => (
+        <span
+          key={type.name}
+          className="inline-block w-fit cursor-pointer rounded-lg border px-3 py-2 text-sm font-medium whitespace-nowrap transition-transform duration-200 hover:scale-105"
+          style={type.style}
+          title={type.name}
+        >
+          {type.name}
+        </span>
+      ))}
+      {showMoreCount && remainingCount > 0 && (
+        <span
+          className="text-muted-foreground py-1 text-xs"
+          title={`+${remainingCount} more types`}
+        >
+          +{remainingCount} more
+        </span>
+      )}
+    </div>
+  );
+}
diff --git a/src/modules/datasets/DatasetsPreviewTable.tsx b/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,21 @@ export function DatasetsPreviewTable({ className }: { className?: string }) {
     placeholderData: createPlaceholderDataFnForQueryKey(queryKey),
   });
 
+  const datasetsArray = datasets.data?.datasets ?? [];
+  
+  // Get schema data for each dataset using optimized hook
+  const datasetAddresses = datasetsArray.map((dataset) => dataset.address);
+  const { schemasMap, isLoading: isSchemasLoading } = useDatasetsSchemas(
+    datasetAddresses,
+    chainId!
+  );
+
   const formattedData =
-    datasets.data?.datasets.map((dataset) => ({
+    datasetsArray.map((dataset) => ({
       ...dataset,
       destination: `/dataset/${dataset.address}`,
+      schemaPaths: schemasMap.get(dataset.address) || [],
+      isSchemaLoading: isSchemasLoading,
     })) ?? [];
 
   return (
@@ -60,12 +72,14 @@ export function DatasetsPreviewTable({ className }: { className?: string }) {
       {(datasets.isError || datasets.errorUpdateCount > 0) && !datasets.data ? (
         <ErrorAlert message="A error occurred during datasets loading." />
       ) : (
-        <DataTable
-          columns={columns}
-          data={formattedData}
-          tableLength={PREVIEW_TABLE_LENGTH}
-          isLoading={datasets.isLoading || datasets.isRefetching}
-        />
+        <div className="h-[400px] overflow-auto">
+          <DataTable
+            columns={columns}
+            data={formattedData}
+            tableLength={PREVIEW_TABLE_LENGTH}
+            isLoading={datasets.isLoading || datasets.isRefetching}
+          />
+        </div>
       )}
     </div>
   );
diff --git a/src/modules/datasets/dataset/DatasetTypes.tsx b/src/modules/datasets/dataset/DatasetTypes.tsx
diff --git a/src/modules/datasets/dataset/buildDatasetDetails.tsx b/src/modules/datasets/dataset/buildDatasetDetails.tsx
@@ -1,10 +1,13 @@
 import { DatasetQuery } from '@/graphql/graphql';
 import CopyButton from '@/components/CopyButton';
+import { DatasetTypes } from '@/components/DatasetTypes';
 import SmartLinkGroup from '@/components/SmartLinkGroup';
 import TransferEvent from '@/modules/events/TransferEvent';
 import { multiaddrHexToHuman } from '@/utils/format';
-import { formatDateCompact, formatElapsedTime } from '@/utils/formatElapsedTime';
-import { DatasetTypes } from './DatasetTypes';
+import {
+  formatDateCompact,
+  formatElapsedTime,
+} from '@/utils/formatElapsedTime';
 
 export function buildDatasetDetails({
   dataset,
@@ -44,7 +47,11 @@ export function buildDatasetDetails({
       ),
     }),
     Types: (
-      <DatasetTypes schemaPaths={schemaPaths} isLoading={isSchemaLoading} />
+      <DatasetTypes
+        schemaPaths={schemaPaths}
+        isLoading={isSchemaLoading}
+        layout="horizontal"
+      />
     ),
     ...(firstTimestamp && {
       Created: (
diff --git a/src/modules/datasets/dataset/protectedDataQuery.ts b/src/modules/datasets/dataset/protectedDataQuery.ts
@@ -8,4 +8,16 @@ export const datasetSchemaQuery = graphql(`
       }
     }
   }
-`); 
+`);
+
+// Query optimisée en string pour utiliser avec executeDataprotector
+export const optimizedProtectedDatasQueryString = graphql(`
+  query OptimizedProtectedDatasWithSchemas($datasetIds: [Bytes!]!) {
+    protectedDatas(where: { id_in: $datasetIds }) {
+      id
+      schema {
+        path
+      }
+    }
+  }
+`);
diff --git a/src/modules/datasets/datasetsTable/columns.tsx b/src/modules/datasets/datasetsTable/columns.tsx
@@ -1,10 +1,14 @@
 import { DatasetsQuery } from '@/graphql/graphql';
 import { ColumnDef } from '@tanstack/react-table';
 import CopyButton from '@/components/CopyButton';
+import { DatasetTypes } from '@/components/DatasetTypes';
 import { formatElapsedTime } from '@/utils/formatElapsedTime';
 import { truncateAddress } from '@/utils/truncateAddress';
 
-type Dataset = DatasetsQuery['datasets'][number];
+type Dataset = DatasetsQuery['datasets'][number] & {
+  schemaPaths?: Array<{ path?: string | null }>;
+  isSchemaLoading?: boolean;
+};
 
 export const columns: ColumnDef<Dataset>[] = [
   {
@@ -40,6 +44,23 @@ export const columns: ColumnDef<Dataset>[] = [
       );
     },
   },
+  {
+    accessorKey: 'type',
+    header: 'Type',
+    cell: ({ row }) => {
+      const schemaPaths = row.original.schemaPaths;
+      const isSchemaLoading = row.original.isSchemaLoading;
+      return (
+        <DatasetTypes
+          schemaPaths={schemaPaths}
+          isLoading={isSchemaLoading}
+          layout="vertical"
+          maxDisplay={3}
+          showMoreCount={true}
+        />
+      );
+    },
+  },
   {
     accessorKey: 'owner.address',
     header: 'Owner',
diff --git a/src/modules/datasets/hooks/useDatasetsSchemas.ts b/src/modules/datasets/hooks/useDatasetsSchemas.ts
@@ -0,0 +1,102 @@
+import { executeDataprotector } from '@/graphql/executeDataprotector';
+import { useQuery } from '@tanstack/react-query';
+import { createPlaceholderDataFnForQueryKey } from '@/utils/createPlaceholderDataFnForQueryKey';
+import { datasetSchemaQuery, optimizedProtectedDatasQueryString } from '@/modules/datasets/dataset/protectedDataQuery';
+
+export function useDatasetsSchemas(datasetAddresses: string[], chainId: number) {
+  const queryKey = [chainId, 'datasetsSchemas', datasetAddresses.sort()];
+  
+  const { data, isLoading, isError } = useQuery({
+    queryKey,
+    enabled: !!chainId && datasetAddresses.length > 0,
+    queryFn: async () => {
+      try {
+        // Utilisation directe d'executeDataprotector avec la query optimisée
+        // Plus efficace qu'un Promise.all de n requêtes individuelles
+        const result = await executeDataprotector(
+          optimizedProtectedDatasQueryString, 
+          chainId, 
+          { datasetIds: datasetAddresses }
+        );
+        
+        // Transform data into a map for easy lookup
+        const schemasMap = new Map<string, Array<{ path?: string | null }>>();
+        
+        if (result?.protectedDatas) {
+          result.protectedDatas.forEach((protectedData: any) => {
+            if (protectedData.id) {
+              schemasMap.set(protectedData.id, protectedData.schema || []);
+            }
+          });
+        }
+        
+        // Ensure all requested datasets have an entry (empty array if no schema)
+        datasetAddresses.forEach(address => {
+          if (!schemasMap.has(address)) {
+            schemasMap.set(address, []);
+          }
+        });
+        
+        return schemasMap;
+      } catch (error) {
+        console.warn('Failed to fetch schemas with optimized query, falling back to individual queries:', error);
+        
+        // Fallback: Use individual queries in parallel if the optimized query fails
+        const schemaPromises = datasetAddresses.map(async (address) => {
+          try {
+            const result = await executeDataprotector(datasetSchemaQuery, chainId, {
+              datasetAddress: address,
+            });
+            return { address, schema: result?.protectedData?.schema || [] };
+          } catch {
+            return { address, schema: [] };
+          }
+        });
+        
+        const results = await Promise.allSettled(schemaPromises);
+        const schemasMap = new Map();
+        
+        results.forEach((result, index) => {
+          if (result.status === 'fulfilled') {
+            schemasMap.set(datasetAddresses[index], result.value.schema);
+          } else {
+            schemasMap.set(datasetAddresses[index], []);
+          }
+        });
+        
+        return schemasMap;
+      }
+    },
+    placeholderData: createPlaceholderDataFnForQueryKey(queryKey),
+    // Cache longer since schemas rarely change
+    staleTime: 5 * 60 * 1000, // 5 minutes
+  });
+
+  return {
+    schemasMap: data || new Map(),
+    isLoading,
+    isError,
+  };
+}
+
+export function useDatasetSchema(datasetAddress: string, chainId: number) {
+  const queryKey = [chainId, 'datasetSchema', datasetAddress];
+  
+  const { data, isLoading, isError } = useQuery({
+    queryKey,
+    enabled: !!chainId && !!datasetAddress,
+    queryFn: async () => {
+      const result = await executeDataprotector(datasetSchemaQuery, chainId, {
+        datasetAddress,
+      });
+      return result;
+    },
+    placeholderData: createPlaceholderDataFnForQueryKey(queryKey),
+  });
+
+  return {
+    schema: data?.protectedData?.schema || [],
+    isLoading,
+    isError,
+  };
+}
diff --git a/src/routes/$chainSlug/_layout/datasets.tsx b/src/routes/$chainSlug/_layout/datasets.tsx

Original file line number	Diff line number	Diff line change
@@ -8,4 +8,16 @@ export const datasetSchemaQuery = graphql(`
`8`	`8`	`}`
`9`	`9`	`}`
`10`	`10`	`}`
`11`		-`);
	`11`	+`);
	`12`	`+`
	`13`	`+// Query optimisée en string pour utiliser avec executeDataprotector`
	`14`	+export const optimizedProtectedDatasQueryString = graphql(`
	`15`	`+ query OptimizedProtectedDatasWithSchemas($datasetIds: [Bytes!]!) {`
	`16`	`+ protectedDatas(where: { id_in: $datasetIds }) {`
	`17`	`+ id`
	`18`	`+ schema {`
	`19`	`+ path`
	`20`	`+ }`
	`21`	`+ }`
	`22`	`+ }`
	`23`	+`);