"use client"; import { useState, useEffect } from "react"; import { motion, AnimatePresence } from "framer-motion"; import { ChevronDown, ChevronRight, Download, File, Folder, Search, Share, X, FolderOpen, Star, Tag, List, LayoutGrid, FolderTree, Filter, SlidersHorizontal, ArrowUpDown, Home, } from "lucide-react"; // Types for our data interface TreeNode { id: string; name: string; type: "folder" | "file"; size?: number; modified?: string; children?: TreeNode[]; metadata?: Record; permissions?: string[]; owner?: string; shared?: boolean; favorite?: boolean; tags?: string[]; } const HierarchicalDataExplorer = () => { const [data, setData] = useState([]); const [expandedNodes, setExpandedNodes] = useState>( {}, ); const [searchTerm, setSearchTerm] = useState(""); const [selectedNode, setSelectedNode] = useState(null); const [isNodeDetailsOpen, setIsNodeDetailsOpen] = useState(false); const [isDarkMode, setIsDarkMode] = useState(false); const [sortBy, setSortBy] = useState<"name" | "type" | "size" | "modified">( "name", ); const [sortDirection, setSortDirection] = useState<"asc" | "desc">("asc"); const [viewMode, setViewMode] = useState<"tree" | "list" | "grid">("tree"); const [breadcrumbs, setBreadcrumbs] = useState([]); const [currentFolder, setCurrentFolder] = useState(null); const [hoveredNode, setHoveredNode] = useState(null); // Check if system prefers dark mode useEffect(() => { if (typeof window !== "undefined") { const isDark = window.matchMedia("(prefers-color-scheme: dark)").matches; setIsDarkMode(isDark); if (isDark) { document.documentElement.classList.add("dark"); } } }, []); // Toggle dark mode const toggleDarkMode = () => { setIsDarkMode(!isDarkMode); document.documentElement.classList.toggle("dark"); }; // Initialize sample data useEffect(() => { const sampleData: TreeNode[] = [ { id: "folder-1", name: "Documents", type: "folder", modified: "2023-06-15", owner: "Alex Johnson", permissions: ["read", "write", "delete"], children: [ { id: "folder-1-1", name: "Work", type: "folder", modified: "2023-06-10", owner: "Alex Johnson", permissions: ["read", "write", "delete"], children: [ { id: "file-1-1-1", name: "Project Proposal.docx", type: "file", size: 2500000, modified: "2023-06-08", owner: "Alex Johnson", permissions: ["read", "write"], metadata: { type: "Word Document", pages: 15, author: "Alex Johnson", }, tags: ["work", "proposal", "important"], }, { id: "file-1-1-2", name: "Budget.xlsx", type: "file", size: 1800000, modified: "2023-06-05", owner: "Alex Johnson", permissions: ["read", "write"], metadata: { type: "Excel Spreadsheet", sheets: 5, author: "Alex Johnson", }, tags: ["work", "finance"], favorite: true, }, ], }, { id: "folder-1-2", name: "Personal", type: "folder", modified: "2023-06-12", owner: "Alex Johnson", permissions: ["read", "write", "delete"], children: [ { id: "file-1-2-1", name: "Resume.pdf", type: "file", size: 500000, modified: "2023-05-20", owner: "Alex Johnson", permissions: ["read", "write", "delete"], metadata: { type: "PDF Document", pages: 2, author: "Alex Johnson", }, tags: ["personal", "job"], }, { id: "file-1-2-2", name: "Tax Return.pdf", type: "file", size: 3500000, modified: "2023-04-15", owner: "Alex Johnson", permissions: ["read", "write", "delete"], metadata: { type: "PDF Document", pages: 25, author: "Tax Service", }, tags: ["personal", "finance", "important"], favorite: true, }, ], }, ], }, { id: "folder-2", name: "Photos", type: "folder", modified: "2023-06-18", owner: "Alex Johnson", permissions: ["read", "write", "delete"], children: [ { id: "folder-2-1", name: "Vacation", type: "folder", modified: "2023-06-18", owner: "Alex Johnson", permissions: ["read", "write", "delete"], children: [ { id: "file-2-1-1", name: "Beach.jpg", type: "file", size: 4500000, modified: "2023-06-18", owner: "Alex Johnson", permissions: ["read", "write", "delete"], metadata: { type: "JPEG Image", dimensions: "3840x2160", camera: "iPhone 13 Pro", }, tags: ["vacation", "beach", "summer"], favorite: true, }, { id: "file-2-1-2", name: "Mountains.jpg", type: "file", size: 5200000, modified: "2023-06-17", owner: "Alex Johnson", permissions: ["read", "write", "delete"], metadata: { type: "JPEG Image", dimensions: "3840x2160", camera: "iPhone 13 Pro", }, tags: ["vacation", "mountains", "hiking"], }, ], }, { id: "folder-2-2", name: "Family", type: "folder", modified: "2023-05-30", owner: "Alex Johnson", permissions: ["read", "write", "delete"], children: [ { id: "file-2-2-1", name: "Birthday Party.jpg", type: "file", size: 3800000, modified: "2023-05-30", owner: "Alex Johnson", permissions: ["read", "write", "delete"], metadata: { type: "JPEG Image", dimensions: "3840x2160", camera: "Canon EOS R5", }, tags: ["family", "birthday", "party"], shared: true, }, ], }, ], }, { id: "folder-3", name: "Projects", type: "folder", modified: "2023-06-20", owner: "Alex Johnson", permissions: ["read", "write", "delete"], children: [ { id: "folder-3-1", name: "Website Redesign", type: "folder", modified: "2023-06-20", owner: "Alex Johnson", permissions: ["read", "write", "delete"], children: [ { id: "file-3-1-1", name: "Homepage Mockup.psd", type: "file", size: 25000000, modified: "2023-06-20", owner: "Alex Johnson", permissions: ["read", "write", "delete"], metadata: { type: "Photoshop Document", dimensions: "1920x1080", author: "Sarah Chen", }, tags: ["design", "website", "mockup"], shared: true, }, { id: "file-3-1-2", name: "Color Palette.ai", type: "file", size: 1200000, modified: "2023-06-19", owner: "Alex Johnson", permissions: ["read", "write", "delete"], metadata: { type: "Illustrator Document", author: "Sarah Chen", }, tags: ["design", "colors"], }, ], }, { id: "folder-3-2", name: "Mobile App", type: "folder", modified: "2023-06-15", owner: "Alex Johnson", permissions: ["read", "write", "delete"], children: [ { id: "file-3-2-1", name: "App Wireframes.sketch", type: "file", size: 18000000, modified: "2023-06-15", owner: "Alex Johnson", permissions: ["read", "write", "delete"], metadata: { type: "Sketch Document", artboards: 12, author: "Sarah Chen", }, tags: ["design", "mobile", "wireframes"], favorite: true, }, { id: "file-3-2-2", name: "User Flow.pdf", type: "file", size: 2800000, modified: "2023-06-14", owner: "Alex Johnson", permissions: ["read", "write", "delete"], metadata: { type: "PDF Document", pages: 5, author: "Miguel Rodriguez", }, tags: ["design", "ux", "user flow"], shared: true, }, ], }, ], }, ]; setData(sampleData); // Initialize expanded state for all nodes const initialExpandedState: Record = {}; const traverseNodes = (nodes: TreeNode[]) => { nodes.forEach((node) => { initialExpandedState[node.id] = false; if (node.children) { traverseNodes(node.children); } }); }; traverseNodes(sampleData); setExpandedNodes(initialExpandedState); }, []); // Toggle node expansion const toggleNodeExpansion = (nodeId: string) => { setExpandedNodes((prev) => ({ ...prev, [nodeId]: !prev[nodeId], })); }; // Format file size const formatFileSize = (bytes?: number) => { if (bytes === undefined) return ""; const units = ["B", "KB", "MB", "GB", "TB"]; let size = bytes; let unitIndex = 0; while (size >= 1024 && unitIndex < units.length - 1) { size /= 1024; unitIndex++; } return `${size.toFixed(1)} ${units[unitIndex]}`; }; // Format date const formatDate = (dateString?: string) => { if (!dateString) return ""; const date = new Date(dateString); return date.toLocaleDateString(undefined, { year: "numeric", month: "short", day: "numeric", }); }; // Search nodes const searchNodes = (nodes: TreeNode[], term: string): TreeNode[] => { return nodes .filter((node) => { const matchesName = node.name .toLowerCase() .includes(term.toLowerCase()); let childMatches: TreeNode[] = []; if (node.children) { childMatches = searchNodes(node.children, term); } if (childMatches.length > 0) { return true; } return matchesName; }) .map((node) => { if (node.children) { return { ...node, children: searchNodes(node.children, term), }; } return node; }); }; // Get filtered and sorted nodes const getFilteredAndSortedNodes = () => { let filteredNodes = [...data]; // Apply search filter if (searchTerm) { filteredNodes = searchNodes(filteredNodes, searchTerm); } // Apply sorting const sortNodes = (nodes: TreeNode[]): TreeNode[] => { return [...nodes] .sort((a, b) => { let aValue: any; let bValue: any; switch (sortBy) { case "name": aValue = a.name.toLowerCase(); bValue = b.name.toLowerCase(); break; case "type": aValue = a.type; bValue = b.type; break; case "size": aValue = a.size || 0; bValue = b.size || 0; break; case "modified": aValue = a.modified ? new Date(a.modified).getTime() : 0; bValue = b.modified ? new Date(b.modified).getTime() : 0; break; default: aValue = a.name.toLowerCase(); bValue = b.name.toLowerCase(); } if (sortDirection === "asc") { return aValue > bValue ? 1 : aValue < bValue ? -1 : 0; } else { return aValue < bValue ? 1 : aValue > bValue ? -1 : 0; } }) .map((node) => { if (node.children) { return { ...node, children: sortNodes(node.children), }; } return node; }); }; return sortNodes(filteredNodes); }; // Get current view nodes const getCurrentViewNodes = () => { if (viewMode === "tree" || !currentFolder) { return getFilteredAndSortedNodes(); } return currentFolder.children || []; }; // Navigate to folder const navigateToFolder = (node: TreeNode) => { if (node.type !== "folder") return; setCurrentFolder(node); // Update breadcrumbs const newBreadcrumbs = [...breadcrumbs, node]; setBreadcrumbs(newBreadcrumbs); }; // Navigate to breadcrumb const navigateToBreadcrumb = (index: number) => { if (index === -1) { setCurrentFolder(null); setBreadcrumbs([]); return; } const newBreadcrumbs = breadcrumbs.slice(0, index + 1); setBreadcrumbs(newBreadcrumbs); setCurrentFolder(newBreadcrumbs[newBreadcrumbs.length - 1]); }; // Get file icon color based on extension const getFileIconColor = (fileName: string) => { const extension = fileName.split(".").pop()?.toLowerCase(); switch (extension) { case "pdf": return "text-rose-500 dark:text-rose-400"; case "doc": case "docx": return "text-blue-500 dark:text-blue-400"; case "xls": case "xlsx": return "text-emerald-500 dark:text-emerald-400"; case "ppt": case "pptx": return "text-orange-500 dark:text-orange-400"; case "jpg": case "jpeg": case "png": case "gif": return "text-purple-500 dark:text-purple-400"; case "psd": case "ai": case "sketch": return "text-indigo-500 dark:text-indigo-400"; default: return "text-gray-500 dark:text-gray-400"; } }; // Render tree node const renderTreeNode = (node: TreeNode, level = 0) => { const isExpanded = expandedNodes[node.id]; const isHovered = hoveredNode === node.id; return (

setSelectedNode(node)} onDoubleClick={() => { if (node.type === "folder") { toggleNodeExpansion(node.id); } else { setIsNodeDetailsOpen(true); } }} onMouseEnter={() => setHoveredNode(node.id)} onMouseLeave={() => setHoveredNode(null)} >

{node.type === "folder" ? ( isExpanded ? ( ) : ( ) ) : ( )}

{node.name}

{node.favorite && } {node.shared && ( )} {node.type === "file" && (

{formatFileSize(node.size)}

)}

{formatDate(node.modified)}

{isExpanded && node.children && ( {node.children.map((childNode) => renderTreeNode(childNode, level + 1), )} )}

); }; // Render list view const renderListView = (nodes: TreeNode[]) => { return (

{nodes.map((node) => ( setSelectedNode(node)} onDoubleClick={() => { if (node.type === "folder") { navigateToFolder(node); } else { setIsNodeDetailsOpen(true); } }} > ))}

{ if (sortBy === "name") { setSortDirection(sortDirection === "asc" ? "desc" : "asc"); } else { setSortBy("name"); setSortDirection("asc"); } }} > Name {sortBy === "name" && ( )}	{ if (sortBy === "type") { setSortDirection(sortDirection === "asc" ? "desc" : "asc"); } else { setSortBy("type"); setSortDirection("asc"); } }} > Type {sortBy === "type" && ( )}	{ if (sortBy === "size") { setSortDirection(sortDirection === "asc" ? "desc" : "asc"); } else { setSortBy("size"); setSortDirection("asc"); } }} > Size {sortBy === "size" && ( )}	{ if (sortBy === "modified") { setSortDirection(sortDirection === "asc" ? "desc" : "asc"); } else { setSortBy("modified"); setSortDirection("asc"); } }} > Modified {sortBy === "modified" && ( )}	Owner
{node.type === "folder" ? ( ) : ( )} {node.name} {node.favorite && ( )} {node.shared && ( )}	{node.type === "file" ? node.name.split(".").pop()?.toUpperCase() \|\| "FILE" : "Folder"}	{node.type === "file" ? formatFileSize(node.size) : "--"}	{formatDate(node.modified)}	{node.owner \|\| "--"}

); }; // Render grid view const renderGridView = (nodes: TreeNode[]) => { return (

{nodes.map((node) => ( setSelectedNode(node)} onDoubleClick={() => { if (node.type === "folder") { navigateToFolder(node); } else { setIsNodeDetailsOpen(true); } }} >

{node.type === "folder" ? ( ) : ( )}

{node.name}

{node.favorite && ( )} {node.shared && ( )}

{node.type === "file" ? formatFileSize(node.size) : "Folder"}

{formatDate(node.modified)}

{node.tags && node.tags.length > 0 && (

{node.tags.slice(0, 2).map((tag) => ( {tag} ))} {node.tags.length > 2 && ( +{node.tags.length - 2} )}

)}

))}

); }; return (

{/* Header */}

Data Explorer

Browse and manage your hierarchical data

{/* Search and Filters */}

setSearchTerm(e.target.value)} />

{/* Breadcrumbs */} {(viewMode !== "tree" || searchTerm) && (

{breadcrumbs.map((crumb, index) => (

))}

)} {/* Content */}

{viewMode === "tree" && !searchTerm && (

{getCurrentViewNodes().map((node) => renderTreeNode(node))}

)} {viewMode === "list" && renderListView(getCurrentViewNodes())} {viewMode === "grid" && renderGridView(getCurrentViewNodes())} {searchTerm && getCurrentViewNodes().length === 0 && (

No results found

Try adjusting your search term

)}

{/* Node Details Modal */} {isNodeDetailsOpen && selectedNode && (

{selectedNode.type === "folder" ? "Folder" : "File"} Details

{selectedNode.type === "folder" ? ( ) : ( )}

{selectedNode.name}

{selectedNode.favorite && ( )} {selectedNode.shared && ( )}

{selectedNode.type === "file" ? `${formatFileSize(selectedNode.size)} • Last modified ${formatDate(selectedNode.modified)}` : `Folder • Last modified ${formatDate(selectedNode.modified)}`}

General Information

Type {selectedNode.type === "file" ? selectedNode.name .split(".") .pop() ?.toUpperCase() || "File" : "Folder"}

Owner {selectedNode.owner || "--"}

Last Modified {formatDate(selectedNode.modified)}

{selectedNode.type === "file" && (

Size {formatFileSize(selectedNode.size)}

)}

Permissions

{selectedNode.permissions?.map((permission) => (

{permission}

))} {(!selectedNode.permissions || selectedNode.permissions.length === 0) && (

No permissions specified

)}

{selectedNode.type === "file" && selectedNode.metadata && (

Metadata

{Object.entries(selectedNode.metadata).map( ([key, value]) => (

{key} {value}

), )}

Hierarchical Data Explorer

Simple Datatable

Data visualization Profile

Hierarchical Data Explorer

Simple Datatable

Data visualization Profile