feat: enhance DatasetTypes component to include type information in schema handling

Author: Le-Caignec

src/components/DatasetTypes.tsx

@@ -1,7 +1,8 @@
 import { processSchemaPathsToTypes } from '@/modules/datasets/utils/datasetTypeUtils';
 
+
 interface DatasetTypesProps {
-  schemaPaths?: Array<{ path?: string | null }>;
+  schemaPaths?: Array<{ path?: string | null; type?: string | null }>;
   isLoading?: boolean;
   layout?: 'horizontal' | 'vertical';
   maxDisplay?: number;
@@ -56,14 +57,21 @@ export function DatasetTypes({
       className={`flex ${layout === 'vertical' ? 'flex-col' : 'flex-wrap'} gap-1 ${layout === 'vertical' ? 'max-w-40' : ''}`}
     >
       {typesToShow.map((type) => (
-        <span
+        <div
           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"
+          className="inline-block w-fit cursor-pointer rounded-lg border px-2 py-1 text-sm font-medium whitespace-nowrap transition-transform duration-200 hover:scale-105"
           style={type.style}
-          title={type.name}
+          title={type.type ? `${type.name} (${type.type})` : type.name}
         >
-          {type.name}
-        </span>
+          <div className="flex flex-col items-center gap-0.5">
+            <span>{type.name}</span>
+            {type.type && (
+              <span className="rounded bg-black/10 px-1 py-0.5 text-xs font-normal opacity-70">
+                {type.type}
+              </span>
+            )}
+          </div>
+        </div>
       ))}
       {showMoreCount && remainingCount > 0 && (
         <span

src/modules/datasets/dataset/protectedDataQuery.ts

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

src/modules/datasets/hooks/useDatasetsSchemas.ts

@@ -20,11 +20,11 @@ export function useDatasetsSchemas(datasetAddresses: string[], chainId: number)
         );
 
         // Transform data into a map for easy lookup
-        const schemasMap = new Map<string, Array<{ path?: string | null }>>();
+        const schemasMap = new Map<string, Array<{ path?: string | null; type?: string | null }>>();
 
         if (result?.protectedDatas) {
-          result.protectedDatas.forEach((protectedData: any) => {
-            if (protectedData.id) {
+          result.protectedDatas.forEach((protectedData) => {
+            if (protectedData?.id) {
               schemasMap.set(protectedData.id, protectedData.schema || []);
             }
           });
@@ -54,7 +54,7 @@ export function useDatasetsSchemas(datasetAddresses: string[], chainId: number)
         });
 
         const results = await Promise.allSettled(schemaPromises);
-        const schemasMap = new Map();
+        const schemasMap = new Map<string, Array<{ path?: string | null; type?: string | null }>>();
 
         results.forEach((result, index) => {
           if (result.status === 'fulfilled') {

src/modules/datasets/utils/datasetTypeUtils.ts

@@ -1,5 +1,6 @@
 export interface DatasetTypeInfo {
   name: string;
+  type?: string; // Data type like 'string', 'boolean', etc.
   style: {
     backgroundColor: string;
     borderColor: string;
@@ -12,45 +13,79 @@ export function hashString(str: string): number {
   let hash = 0;
   for (let i = 0; i < str.length; i++) {
     const char = str.charCodeAt(i);
-    hash = ((hash << 5) - hash) + char;
+    hash = (hash << 5) - hash + char;
     hash = hash & hash; // Convert to 32bit integer
   }
   return Math.abs(hash);
 }
 
 // Function to create a dynamic type for any path
-export function createDynamicType(path: string): DatasetTypeInfo {
+export function createDynamicType(
+  path: string,
+  type?: string
+): DatasetTypeInfo {
   const hash = hashString(path);
-  const hue = hash % 360;
-  
+
+  // Create a more varied hash by combining multiple factors
+  const pathLength = path.length;
+  const firstChar = path.charCodeAt(0);
+  const lastChar = path.charCodeAt(path.length - 1);
+  const complexHash =
+    (hash + pathLength * 17 + firstChar * 31 + lastChar * 13) % 360;
+
+  // Define distinct color palette with good separation
+  const distinctColors = [
+    20, // Orange-red
+    45, // Orange
+    70, // Yellow-orange
+    95, // Yellow-green
+    120, // Green
+    145, // Blue-green
+    170, // Cyan
+    195, // Light blue (but shifted to avoid dark blue)
+    280, // Purple
+    305, // Magenta
+    330, // Pink-red
+    350, // Red-orange
+  ];
+
+  // Use modulo to select from our distinct color palette
+  const colorIndex = complexHash % distinctColors.length;
+  const selectedHue = distinctColors[colorIndex];
+
+  // Add slight variation based on the original hash to avoid exact duplicates
+  const hueVariation = (hash % 20) - 10; // -10 to +10 degrees variation
+  const finalHue = (selectedHue + hueVariation + 360) % 360;
+
   // Convert path to a readable name (e.g., "targetPrivacyPassV2_prod" -> "Target Privacy Pass V2 Prod")
   const name = path
     .replace(/([A-Z])/g, ' $1') // Add space before capital letters
     .replace(/_/g, ' ') // Replace underscores with spaces
-    .replace(/^./, str => str.toUpperCase()) // Capitalize first letter
-    .replace(/\s+./g, str => str.toUpperCase()) // Capitalize first letter of each word
+    .replace(/^./, (str) => str.toUpperCase()) // Capitalize first letter
+    .replace(/\s+./g, (str) => str.toUpperCase()) // Capitalize first letter of each word
     .trim();
 
   return {
     name,
+    type,
     style: {
-      backgroundColor: `hsla(${hue}, 60%, 50%, 0.08)`,
-      borderColor: `hsla(${hue}, 60%, 50%, 0.2)`,
-      color: `hsl(${hue}, 60%, 40%)`
-    }
+      backgroundColor: `hsla(${finalHue}, 80%, 60%, 0.15)`,
+      borderColor: `hsla(${finalHue}, 80%, 60%, 0.4)`,
+      color: `hsl(${finalHue}, 80%, 65%)`,
+    },
   };
-}
-
-// Function to process schema paths into types
-export function processSchemaPathsToTypes(schemaPaths?: Array<{ path?: string | null }>): DatasetTypeInfo[] {
+} // Function to process schema paths into types
+export function processSchemaPathsToTypes(
+  schemaPaths?: Array<{ path?: string | null; type?: string | null }>
+): DatasetTypeInfo[] {
   if (!schemaPaths || schemaPaths.length === 0) {
     return [];
   }
 
   return schemaPaths
     .map((item) => {
       if (!item.path) return null;
-      return createDynamicType(item.path);
+      return createDynamicType(item.path, item.type || undefined);
     })
     .filter(Boolean) as DatasetTypeInfo[];
 }