feat: add InteractiveJsonViewer component and integrate it into DatasetDetails, enhance DatasetTypes with constrainWidth prop

Author: Le-Caignec

package-lock.json

@@ -39,6 +39,7 @@
     "@tanstack/react-router-devtools": "^1.116.0",
     "@tanstack/react-table": "^8.21.3",
     "@trivago/prettier-plugin-sort-imports": "^5.2.2",
+    "@uiw/react-json-view": "^2.0.0-alpha.33",
     "big.js": "^7.0.1",
     "buffer": "^6.0.3",
     "class-variance-authority": "^0.7.1",

package.json

@@ -7,6 +7,7 @@ interface DatasetTypesProps {
   layout?: 'horizontal' | 'vertical';
   maxDisplay?: number;
   showMoreCount?: boolean;
+  constrainWidth?: boolean; // Whether to constrain the width of each type card
 }
 
 export function DatasetTypes({
@@ -15,6 +16,7 @@ export function DatasetTypes({
   layout = 'horizontal',
   maxDisplay,
   showMoreCount = false,
+  constrainWidth = true, // Default to true for table views
 }: DatasetTypesProps) {
   const displayTypes = processSchemaPathsToTypes(schemaPaths);
 
@@ -59,14 +61,24 @@ export function DatasetTypes({
       {typesToShow.map((type) => (
         <div
           key={type.name}
-          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"
+          className={`inline-block w-fit cursor-pointer rounded-lg border px-2 py-1 text-sm font-medium transition-transform duration-200 hover:scale-105 ${
+            constrainWidth ? 'max-w-40' : ''
+          }`}
           style={type.style}
-          title={type.type ? `${type.name} (${type.type})` : type.name}
+          title={type.type ? `${type.name} (${type.type})\nFull path: ${type.fullPath}` : `${type.name}\nFull path: ${type.fullPath}`}
         >
           <div className="flex flex-col items-center gap-0.5">
-            <span>{type.name}</span>
+            <span
+              className={`w-full text-center ${constrainWidth ? 'truncate' : ''}`}
+            >
+              {type.name}
+            </span>
             {type.type && (
-              <span className="rounded bg-black/10 px-1 py-0.5 text-xs font-normal opacity-70">
+              <span
+                className={`w-full rounded bg-black/10 px-1 py-0.5 text-center text-xs font-normal opacity-70 ${
+                  constrainWidth ? 'truncate' : ''
+                }`}
+              >
                 {type.type}
               </span>
             )}

src/components/DatasetTypes.tsx

@@ -0,0 +1,76 @@
+import JsonView from '@uiw/react-json-view';
+
+interface JsonViewerProps {
+  schemaPaths?: Array<{ path?: string | null; type?: string | null }>;
+  className?: string;
+}
+
+interface JsonNode {
+  [key: string]: JsonNode | string;
+}
+
+function buildJsonStructure(
+  schemaPaths: Array<{ path?: string | null; type?: string | null }>
+): JsonNode {
+  const result: JsonNode = {};
+
+  schemaPaths.forEach(({ path, type }) => {
+    if (!path || !type) return;
+
+    const parts = path.split('.');
+    let current = result;
+
+    // Navigate through the path, creating nested objects
+    for (let i = 0; i < parts.length - 1; i++) {
+      const part = parts[i];
+      if (typeof current[part] !== 'object') {
+        current[part] = {};
+      }
+      current = current[part] as JsonNode;
+    }
+
+    // Set the final value with its type
+    const lastPart = parts[parts.length - 1];
+    current[lastPart] = type;
+  });
+
+  return result;
+}
+
+export function InteractiveJsonViewer({
+  schemaPaths,
+  className,
+}: JsonViewerProps) {
+  if (!schemaPaths || schemaPaths.length === 0) {
+    return (
+      <div className={`${className} text-muted-foreground text-sm`}>
+        No schema data available
+      </div>
+    );
+  }
+
+  const jsonStructure = buildJsonStructure(schemaPaths);
+
+  return (
+    <div className={`${className} max-h-96 overflow-y-auto`}>
+      <JsonView
+        value={jsonStructure}
+        displayDataTypes={false}
+        displayObjectSize={false}
+        enableClipboard={false}
+        collapsed={2} // Collapse after 2 levels for compact view
+        style={
+          {
+            backgroundColor: 'transparent',
+            fontFamily: "'Space Mono', monospace", // Use project's monospace font
+            color: 'rgb(229 231 235)', // text-gray-200 for better contrast
+            '--w-rjv-key-string': 'rgb(229 231 235)', // Override key color to light gray
+            '--w-rjv-type-string-color': 'rgb(251 146 60)', // Keep orange for values
+            '--w-rjv-type-boolean-color': 'rgb(34 197 94)', // Keep green for booleans
+            '--w-rjv-indent-width': '24px', // Increase indentation for nested keys
+          } as React.CSSProperties
+        }
+      />
+    </div>
+  );
+}

src/components/InteractiveJsonViewer.tsx

@@ -1,6 +1,7 @@
 import { DatasetQuery } from '@/graphql/graphql';
 import CopyButton from '@/components/CopyButton';
 import { DatasetTypes } from '@/components/DatasetTypes';
+import { InteractiveJsonViewer } from '@/components/InteractiveJsonViewer';
 import SmartLinkGroup from '@/components/SmartLinkGroup';
 import TransferEvent from '@/modules/events/TransferEvent';
 import { multiaddrHexToHuman } from '@/utils/format';
@@ -15,7 +16,10 @@ export function buildDatasetDetails({
   isSchemaLoading,
 }: {
   dataset: DatasetQuery['dataset'];
-  schemaPaths?: Array<{ path?: string | null }>;
+  schemaPaths?: Array<{
+    path?: string | null;
+    type?: string | null;
+  }>;
   isSchemaLoading?: boolean;
 }) {
   if (!dataset) {
@@ -51,8 +55,12 @@ export function buildDatasetDetails({
         schemaPaths={schemaPaths}
         isLoading={isSchemaLoading}
         layout="horizontal"
+        constrainWidth={false}
       />
     ),
+    'Data Structure': (
+      <InteractiveJsonViewer schemaPaths={schemaPaths} className="mt-2" />
+    ),
     ...(firstTimestamp && {
       Created: (
         <p>

src/modules/datasets/dataset/buildDatasetDetails.tsx

@@ -1,5 +1,6 @@
 export interface DatasetTypeInfo {
   name: string;
+  fullPath: string; // Full path for tooltip
   type?: string; // Data type like 'string', 'boolean', etc.
   style: {
     backgroundColor: string;
@@ -57,8 +58,12 @@ export function createDynamicType(
   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
+  // Extract only the last part of the path after the last dot
+  const pathParts = path.split('.');
+  const displayName = pathParts[pathParts.length - 1];
+
+  // Convert to readable name if needed (e.g., "accessToken" -> "Access Token")
+  const name = displayName
     .replace(/([A-Z])/g, ' $1') // Add space before capital letters
     .replace(/_/g, ' ') // Replace underscores with spaces
     .replace(/^./, (str) => str.toUpperCase()) // Capitalize first letter
@@ -67,6 +72,7 @@ export function createDynamicType(
 
   return {
     name,
+    fullPath: path,
     type,
     style: {
       backgroundColor: `hsla(${finalHue}, 80%, 60%, 0.15)`,