feat: add expandable functionality to JSON tree nodes for better data visualization

src/components/json-tree-node/index.tsx

@@ -1,4 +1,4 @@
-import { useMemo } from "react"
+import { useMemo, useState } from "react"
 import jp, { PathComponent } from "jsonpath"
 import _ from "lodash"
 
@@ -6,11 +6,13 @@ export interface JsonTreeNodeProps {
   data: unknown
   path: PathComponent[]
   matchedPaths: string[]
+  defaultExpanded?: boolean
 }
 
-export default function JsonTreeNode({ data, path, matchedPaths }: JsonTreeNodeProps) {
+export default function JsonTreeNode({ data, path, matchedPaths, defaultExpanded = true }: JsonTreeNodeProps) {
   const currentPathString = useMemo(() => jp.stringify(path), [path])
   const isMatched = matchedPaths.includes(currentPathString)
+  const [expanded, setExpanded] = useState(defaultExpanded)
 
   const highlightClass = isMatched ? "bg-yellow-200 ring-2 ring-yellow-400 rounded-sm" : ""
 
@@ -20,7 +22,17 @@ export default function JsonTreeNode({ data, path, matchedPaths }: JsonTreeNodeP
 
     return (
       <div className="ml-6 border-l border-slate-200 pl-3 transition-all">
-        <span className="text-slate-500">{isArray ? "[" : "{"}</span>
+        <span
+          className="text-slate-500 cursor-pointer select-none hover:text-slate-700"
+          onClick={() => setExpanded(!expanded)}
+        >
+          <span className="inline-block w-4 text-xs">{expanded ? "▼" : "▶"}</span>
+          {isArray ? "[" : "{"}
+          {!expanded && <span className="text-slate-400">…{entries.length} items</span>}
+          {!expanded && <span>{isArray ? "]" : "}"}</span>}
+        </span>
+        {expanded && (
+          <>
             {entries.map(([key, value], index) => {
               const nextPath = [...path, isArray ? Number(key) : key]
 
@@ -33,6 +45,8 @@ export default function JsonTreeNode({ data, path, matchedPaths }: JsonTreeNodeP
               )
             })}
             <span className="text-slate-500">{isArray ? "]" : "}"}</span>
+          </>
+        )}
       </div>
     )
   }