Spaces:

awacke1
/

Interactive-Treemap-File-Visualizer

Running

App Files Files Community

awacke1 commited on 11 days ago

Commit

5d74c00

verified ·

1 Parent(s): 7fa4ce0

Update index.html.v2

Browse files

Files changed (1) hide show

index.html.v2 +375 -900

index.html.v2 CHANGED Viewed

@@ -3,992 +3,467 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Squarified Treemap Explorer</title>
     <style>
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
         body {
-            font-family: 'Arial', sans-serif;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            min-height: 100vh;
-            padding: 20px;
-        }
-        .container {
-            max-width: 1400px;
-            margin: 0 auto;
-            background: white;
-            border-radius: 15px;
-            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
-            overflow: hidden;
-        }
-        .header {
-            background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
-            color: white;
-            padding: 30px;
             text-align: center;
-        }
-        .header h1 {
-            font-size: 2.5em;
-            margin-bottom: 10px;
-            text-shadow: 0 2px 4px rgba(0,0,0,0.3);
-        }
-        .header p {
-            opacity: 0.9;
-            font-size: 1.1em;
-        }
-        .controls {
-            padding: 30px;
-            background: #f8f9fa;
-            border-bottom: 1px solid #e9ecef;
-        }
-        .file-input-wrapper {
             display: flex;
             flex-direction: column;
             align-items: center;
-            gap: 15px;
         }
-        .file-input {
-            display: none;
         }
-        .file-input-button {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
             color: white;
-            padding: 15px 30px;
-            border: none;
-            border-radius: 50px;
-            font-size: 1.1em;
             cursor: pointer;
-            transition: transform 0.2s, box-shadow 0.2s;
-            box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
-            position: relative;
-            overflow: hidden;
         }
-        .file-input-button:hover {
             transform: translateY(-2px);
-            box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
         }
-        .demo-button {
-            background: linear-gradient(135deg, #00b894 0%, #00a085 100%);
-            margin-left: 15px;
         }
-        .button-group {
-            display: flex;
-            flex-wrap: wrap;
-            gap: 15px;
-            justify-content: center;
-        }
-        .stats {
-            display: flex;
-            justify-content: center;
-            gap: 30px;
-            margin-top: 20px;
-            flex-wrap: wrap;
-        }
-        .stat-item {
-            background: white;
-            padding: 15px 25px;
-            border-radius: 10px;
-            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
-            text-align: center;
         }
-        .stat-number {
-            font-size: 1.5em;
-            font-weight: bold;
-            color: #667eea;
         }
-        .stat-label {
-            color: #666;
-            font-size: 0.9em;
         }
-        .visualization-area {
-            padding: 30px;
-            min-height: 600px;
         }
-        .treemap-container {
-            margin-bottom: 40px;
-            border-radius: 10px;
             overflow: hidden;
-            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
         }
-        .treemap-header {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
             color: white;
-            padding: 15px 20px;
-            font-weight: bold;
-            font-size: 1.1em;
         }
-        .treemap {
-            position: relative;
-            background: #f8f9fa;
-            min-height: 400px;
-            border: 1px solid #e9ecef;
         }
-        .treemap-node {
-            position: absolute;
-            border: 1px solid #fff;
             cursor: pointer;
-            transition: all 0.3s ease;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 12px;
-            font-weight: 500;
-            color: #333;
-            overflow: hidden;
-        }
-        .treemap-node:hover {
-            border-color: #667eea;
-            border-width: 2px;
-            transform: scale(1.02);
-            z-index: 100;
-            box-shadow: 0 5px 15px rgba(0,0,0,0.3);
-        }
-        .treemap-node.file {
-            color: white;
         }
-        .treemap-node.folder {
-            background: linear-gradient(135deg, #fd79a8 0%, #e84393 100%);
             color: white;
         }
-        /* File type specific colors */
-        .treemap-node.file-image {
-            background: linear-gradient(135deg, #00cec9 0%, #00b894 100%);
-        }
-        .treemap-node.file-video {
-            background: linear-gradient(135deg, #e17055 0%, #d63031 100%);
-        }
-        .treemap-node.file-audio {
-            background: linear-gradient(135deg, #a29bfe 0%, #6c5ce7 100%);
-        }
-        .treemap-node.file-document {
-            background: linear-gradient(135deg, #fdcb6e 0%, #e17055 100%);
-        }
-        .treemap-node.file-office {
-            background: linear-gradient(135deg, #00b894 0%, #00a085 100%);
-        }
-        .treemap-node.file-code {
-            background: linear-gradient(135deg, #81ecec 0%, #00cec9 100%);
-        }
-        .legend {
-            display: flex;
             justify-content: center;
-            flex-wrap: wrap;
-            gap: 15px;
-            margin-top: 20px;
-            padding: 20px;
-            background: white;
-            border-radius: 10px;
-            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
         }
-        .legend-item {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            font-size: 0.9em;
         }
-        .legend-color {
-            width: 16px;
-            height: 16px;
-            border-radius: 3px;
-            border: 1px solid rgba(0,0,0,0.1);
         }
-        .legend-color.folder { background: linear-gradient(135deg, #fd79a8 0%, #e84393 100%); }
-        .legend-color.image { background: linear-gradient(135deg, #00cec9 0%, #00b894 100%); }
-        .legend-color.video { background: linear-gradient(135deg, #e17055 0%, #d63031 100%); }
-        .legend-color.audio { background: linear-gradient(135deg, #a29bfe 0%, #6c5ce7 100%); }
-        .legend-color.document { background: linear-gradient(135deg, #fdcb6e 0%, #e17055 100%); }
-        .legend-color.office { background: linear-gradient(135deg, #00b894 0%, #00a085 100%); }
-        .legend-color.code { background: linear-gradient(135deg, #81ecec 0%, #00cec9 100%); }
-        .legend-color.other { background: linear-gradient(135deg, #74b9ff 0%, #0984e3 100%); }
-        .tooltip {
-            position: absolute;
-            background: rgba(0, 0, 0, 0.9);
-            color: white;
-            padding: 10px 15px;
             border-radius: 5px;
-            font-size: 12px;
-            pointer-events: none;
-            z-index: 1000;
-            opacity: 0;
-            transition: opacity 0.3s;
-            max-width: 250px;
-            line-height: 1.4;
-        }
-        .tooltip.visible {
-            opacity: 1;
-        }
-        .loading {
-            text-align: center;
-            padding: 60px;
-            color: #666;
-        }
-        .loading-spinner {
-            width: 50px;
-            height: 50px;
-            border: 3px solid #f3f3f3;
-            border-top: 3px solid #667eea;
-            border-radius: 50%;
-            animation: spin 1s linear infinite;
-            margin: 0 auto 20px;
         }
-        @keyframes spin {
-            0% { transform: rotate(0deg); }
-            100% { transform: rotate(360deg); }
         }
-        .breadcrumb {
-            padding: 10px 20px;
-            background: #e9ecef;
-            font-size: 14px;
-            color: #666;
         }
-        @media (max-width: 768px) {
-            .header h1 {
-                font-size: 1.8em;
-            }
-            .stats {
-                gap: 15px;
-            }
-            .stat-item {
-                padding: 10px 15px;
-                font-size: 0.9em;
-            }
-            .visualization-area {
-                padding: 15px;
-            }
-        }
     </style>
 </head>
 <body>
-    <div class="container">
-        <div class="header">
-            <h1>🗂️ Squarified Treemap Explorer</h1>
-            <p>Visualize hierarchical file structures using advanced treemap algorithms</p>
-        </div>
-        <div class="controls">
-            <div class="file-input-wrapper">
-                <input type="file" id="folderInput" class="file-input" webkitdirectory multiple>
-                <div class="button-group">
-                    <button class="file-input-button" onclick="selectFolder()">
-                        📁 Select Folder to Explore
-                    </button>
-                    <button class="file-input-button demo-button" onclick="generateDemoData()">
-                        🎮 Try Demo Data
-                    </button>
-                </div>
-                <div class="stats" id="stats" style="display: none;">
-                    <div class="stat-item">
-                        <div class="stat-number" id="totalFiles">0</div>
-                        <div class="stat-label">Files</div>
-                    </div>
-                    <div class="stat-item">
-                        <div class="stat-number" id="totalFolders">0</div>
-                        <div class="stat-label">Folders</div>
-                    </div>
-                    <div class="stat-item">
-                        <div class="stat-number" id="totalSize">0 MB</div>
-                        <div class="stat-label">Total Size</div>
-                    </div>
-                    <div class="stat-item">
-                        <div class="stat-number" id="maxDepth">0</div>
-                        <div class="stat-label">Max Depth</div>
-                    </div>
-                </div>
-                <div class="legend" id="legend" style="display: none;">
-                    <div class="legend-item">
-                        <div class="legend-color folder"></div>
-                        <span>📁 Folders</span>
-                    </div>
-                    <div class="legend-item">
-                        <div class="legend-color image"></div>
-                        <span>🖼️ Images</span>
-                    </div>
-                    <div class="legend-item">
-                        <div class="legend-color video"></div>
-                        <span>🎥 Video</span>
-                    </div>
-                    <div class="legend-item">
-                        <div class="legend-color audio"></div>
-                        <span>🎵 Audio</span>
-                    </div>
-                    <div class="legend-item">
-                        <div class="legend-color document"></div>
-                        <span>📄 Documents</span>
-                    </div>
-                    <div class="legend-item">
-                        <div class="legend-color office"></div>
-                        <span>📊 Office</span>
-                    </div>
-                    <div class="legend-item">
-                        <div class="legend-color code"></div>
-                        <span>💻 Code</span>
-                    </div>
-                    <div class="legend-item">
-                        <div class="legend-color other"></div>
-                        <span>📦 Other</span>
-                    </div>
-                </div>
-            </div>
-        </div>
-        <div class="visualization-area" id="visualizationArea">
-            <div style="text-align: center; padding: 60px; color: #999;">
-                <h3>🎯 Ready to Explore</h3>
-                <p>Select a folder above to visualize its structure, or try the demo data to see how it works!</p>
-            </div>
-        </div>
-    </div>
-    <div class="tooltip" id="tooltip"></div>
-    <script>
-        class SquarifiedTreemapExplorer {
-            constructor() {
-                this.tooltip = document.getElementById('tooltip');
-                this.visualizationArea = document.getElementById('visualizationArea');
-                this.folderInput = document.getElementById('folderInput');
-                this.fileData = null;
-                this.setupEventListeners();
-            }
-            setupEventListeners() {
-                document.addEventListener('mousemove', (e) => {
-                    this.tooltip.style.left = e.pageX + 10 + 'px';
-                    this.tooltip.style.top = e.pageY + 10 + 'px';
-                });
-                // Listen for file input changes
-                this.folderInput.addEventListener('change', (e) => {
-                    if (e.target.files.length > 0) {
-                        this.processFiles(e.target.files);
-                    }
-                });
-            }
-            async selectFolder() {
-                try {
-                    // Try modern File System Access API first
-                    if ('showDirectoryPicker' in window && window.location.protocol === 'https:') {
-                        const directoryHandle = await window.showDirectoryPicker();
-                        await this.processDirectory(directoryHandle);
-                    } else {
-                        // Fall back to file input
-                        this.folderInput.click();
-                    }
-                } catch (error) {
-                    if (error.name !== 'AbortError') {
-                        console.log('File System Access API not available, using fallback');
-                        this.folderInput.click();
-                    }
-                }
-            }
-            async processFiles(files) {
-                this.showLoading();
-                try {
-                    const fileTree = this.buildFileTreeFromFiles(files);
-                    this.fileData = fileTree;
-                    this.updateStats(fileTree);
-                    this.generateTreemaps(fileTree);
-                } catch (error) {
-                    console.error('Error processing files:', error);
-                    this.showError('Error processing file structure.');
                 }
             }
-            buildFileTreeFromFiles(files) {
-                const root = {
-                    name: 'Selected Folder',
-                    path: '',
-                    type: 'directory',
-                    size: 0,
-                    children: []
-                };
-                const pathMap = new Map();
-                pathMap.set('', root);
-                // Sort files by path to ensure directories are created before their contents
-                const sortedFiles = Array.from(files).sort((a, b) => a.webkitRelativePath.localeCompare(b.webkitRelativePath));
-                for (const file of sortedFiles) {
                     const pathParts = file.webkitRelativePath.split('/');
                     let currentPath = '';
-                    // Create directory structure
-                    for (let i = 0; i < pathParts.length - 1; i++) {
-                        const parentPath = currentPath;
-                        currentPath = currentPath ? `${currentPath}/${pathParts[i]}` : pathParts[i];
-                        if (!pathMap.has(currentPath)) {
-                            const dirNode = {
-                                name: pathParts[i],
-                                path: currentPath,
-                                type: 'directory',
-                                size: 0,
-                                children: []
-                            };
-                            pathMap.set(currentPath, dirNode);
-                            pathMap.get(parentPath).children.push(dirNode);
-                        }
-                    }
-                    // Add file
-                    const fileName = pathParts[pathParts.length - 1];
-                    const filePath = file.webkitRelativePath;
-                    const parentPath = pathParts.slice(0, -1).join('/');
-                    const fileNode = {
-                        name: fileName,
-                        path: filePath,
-                        type: 'file',
-                        size: file.size,
-                        lastModified: file.lastModified
-                    };
-                    pathMap.get(parentPath).children.push(fileNode);
-                }
-                // Calculate directory sizes and sort children
-                this.calculateDirectorySizes(root);
-                this.sortChildrenBySize(root);
-                return root;
-            }
-            calculateDirectorySizes(node) {
-                if (node.type === 'file') {
-                    return node.size;
-                }
-                let totalSize = 0;
-                for (const child of node.children || []) {
-                    totalSize += this.calculateDirectorySizes(child);
-                }
-                node.size = totalSize;
-                return totalSize;
-            }
-            sortChildrenBySize(node) {
-                if (node.children) {
-                    node.children.sort((a, b) => b.size - a.size);
-                    node.children.forEach(child => this.sortChildrenBySize(child));
-                }
-            }
-            generateDemoData() {
-                const demoData = {
-                    name: 'Demo Project',
-                    path: '',
-                    type: 'directory',
-                    size: 78650000,
-                    children: [
-                        {
-                            name: 'src',
-                            path: 'src',
-                            type: 'directory',
-                            size: 28500000,
-                            children: [
-                                { name: 'main.js', path: 'src/main.js', type: 'file', size: 15200000 },
-                                { name: 'utils.py', path: 'src/utils.py', type: 'file', size: 8500000 },
-                                { name: 'config.json', path: 'src/config.json', type: 'file', size: 3200000 },
-                                { name: 'index.html', path: 'src/index.html', type: 'file', size: 1600000 }
-                            ]
-                        },
-                        {
-                            name: 'assets',
-                            path: 'assets',
-                            type: 'directory',
-                            size: 25800000,
-                            children: [
-                                { name: 'hero-video.mp4', path: 'assets/hero-video.mp4', type: 'file', size: 12400000 },
-                                { name: 'logo.png', path: 'assets/logo.png', type: 'file', size: 5600000 },
-                                { name: 'background.jpg', path: 'assets/background.jpg', type: 'file', size: 4200000 },
-                                { name: 'theme-song.mp3', path: 'assets/theme-song.mp3', type: 'file', size: 3600000 }
-                            ]
-                        },
-                        {
-                            name: 'docs',
-                            path: 'docs',
-                            type: 'directory',
-                            size: 8900000,
-                            children: [
-                                { name: 'manual.pdf', path: 'docs/manual.pdf', type: 'file', size: 5200000 },
-                                { name: 'README.md', path: 'docs/README.md', type: 'file', size: 1800000 },
-                                { name: 'API.txt', path: 'docs/API.txt', type: 'file', size: 1200000 },
-                                { name: 'CHANGELOG.md', path: 'docs/CHANGELOG.md', type: 'file', size: 700000 }
-                            ]
-                        },
-                        {
-                            name: 'data',
-                            path: 'data',
-                            type: 'directory',
-                            size: 11200000,
-                            children: [
-                                { name: 'report.xlsx', path: 'data/report.xlsx', type: 'file', size: 6800000 },
-                                { name: 'presentation.pptx', path: 'data/presentation.pptx', type: 'file', size: 4400000 }
-                            ]
-                        },
-                        {
-                            name: 'tests',
-                            path: 'tests',
-                            type: 'directory',
-                            size: 1320000,
-                            children: [
-                                { name: 'main.test.js', path: 'tests/main.test.js', type: 'file', size: 680000 },
-                                { name: 'utils.test.py', path: 'tests/utils.test.py', type: 'file', size: 440000 },
-                                { name: 'config.test.json', path: 'tests/config.test.json', type: 'file', size: 200000 }
-                            ]
-                        },
-                        { name: 'package.json', path: 'package.json', type: 'file', size: 180000 },
-                        { name: 'webpack.config.js', path: 'webpack.config.js', type: 'file', size: 120000 },
-                        { name: 'archive.zip', path: 'archive.zip', type: 'file', size: 2630000 }
-                    ]
-                };
-                this.fileData = demoData;
-                this.updateStats(demoData);
-                this.generateTreemaps(demoData);
-            }
-            async processDirectory(directoryHandle) {
-                this.showLoading();
-                try {
-                    const fileTree = await this.buildFileTree(directoryHandle);
-                    this.fileData = fileTree;
-                    this.updateStats(fileTree);
-                    this.generateTreemaps(fileTree);
-                } catch (error) {
-                    console.error('Error processing directory:', error);
-                    this.showError('Error processing directory structure.');
-                }
-            }
-            async buildFileTree(directoryHandle, path = '') {
-                const node = {
-                    name: directoryHandle.name || 'Root',
-                    path: path,
-                    type: 'directory',
-                    size: 0,
-                    children: []
-                };
-                for await (const [name, handle] of directoryHandle.entries()) {
-                    try {
-                        const childPath = path ? `${path}/${name}` : name;
-                        if (handle.kind === 'file') {
-                            const file = await handle.getFile();
-                            node.children.push({
-                                name: name,
-                                path: childPath,
-                                type: 'file',
-                                size: file.size,
-                                lastModified: file.lastModified
-                            });
-                            node.size += file.size;
-                        } else if (handle.kind === 'directory') {
-                            const subDir = await this.buildFileTree(handle, childPath);
-                            node.children.push(subDir);
-                            node.size += subDir.size;
                         }
-                    } catch (error) {
-                        console.warn(`Skipping ${name}:`, error);
                     }
                 }
-                // Sort children by size (descending) for better treemap layout
-                node.children.sort((a, b) => b.size - a.size);
-                return node;
-            }
-            updateStats(fileTree) {
-                const stats = this.calculateStats(fileTree);
-                document.getElementById('totalFiles').textContent = stats.files.toLocaleString();
-                document.getElementById('totalFolders').textContent = stats.folders.toLocaleString();
-                document.getElementById('totalSize').textContent = this.formatFileSize(stats.size);
-                document.getElementById('maxDepth').textContent = stats.depth;
-                document.getElementById('stats').style.display = 'flex';
-                document.getElementById('legend').style.display = 'flex';
             }
-            getFileTypeCategory(filename) {
-                if (!filename || filename.indexOf('.') === -1) return 'other';
-                const extension = filename.toLowerCase().split('.').pop();
-                const categories = {
-                    image: ['jpg', 'jpeg', 'png', 'webp', 'gif', 'bmp', 'ico'],
-                    video: ['mp4', 'avi', 'mov', 'mkv', 'wmv', 'flv', 'webm'],
-                    audio: ['mp3', 'wav', 'flac', 'aac', 'ogg', 'm4a'],
-                    document: ['pdf', 'md', 'txt', 'rtf', 'doc', 'docx'],
-                    office: ['xlsx', 'xls', 'pptx', 'ppt', 'csv'],
-                    code: ['html', 'htm', 'css', 'js', 'ts', 'py', 'java', 'cpp', 'c', 'php', 'rb', 'go', 'rs', 'swift', 'kt', 'json', 'xml', 'yml', 'yaml', 'svg']
-                };
-                for (const [category, extensions] of Object.entries(categories)) {
-                    if (extensions.includes(extension)) {
-                        return category;
-                    }
-                }
-                return 'other';
-            }
-            calculateStats(node, depth = 0) {
-                let stats = {
-                    files: node.type === 'file' ? 1 : 0,
-                    folders: node.type === 'directory' ? 1 : 0,
-                    size: node.size || 0,
-                    depth: depth
-                };
-                if (node.children) {
-                    for (const child of node.children) {
-                        const childStats = this.calculateStats(child, depth + 1);
-                        stats.files += childStats.files;
-                        stats.folders += childStats.folders;
-                        stats.size += childStats.size;
-                        stats.depth = Math.max(stats.depth, childStats.depth);
-                    }
-                }
-                return stats;
-            }
-            generateTreemaps(fileTree) {
-                this.visualizationArea.innerHTML = '';
-                // Create main treemap
-                this.createTreemapContainer(fileTree, 'Root Directory', 0);
-                // Create treemaps for major subdirectories
-                if (fileTree.children) {
-                    const majorFolders = fileTree.children
-                        .filter(child => child.type === 'directory' && child.children && child.children.length > 0)
-                        .slice(0, 5); // Show top 5 subdirectories
-                    majorFolders.forEach((folder, index) => {
-                        this.createTreemapContainer(folder, folder.name, index + 1);
                     });
-                }
-            }
-            createTreemapContainer(data, title, level) {
-                const container = document.createElement('div');
-                container.className = 'treemap-container';
-                const header = document.createElement('div');
-                header.className = 'treemap-header';
-                header.textContent = `${title} (${this.formatFileSize(data.size)})`;
-                const breadcrumb = document.createElement('div');
-                breadcrumb.className = 'breadcrumb';
-                breadcrumb.textContent = data.path || '/';
-                const treemap = document.createElement('div');
-                treemap.className = 'treemap';
-                treemap.style.height = level === 0 ? '500px' : '400px';
-                container.appendChild(header);
-                container.appendChild(breadcrumb);
-                container.appendChild(treemap);
-                this.visualizationArea.appendChild(container);
-                // Generate squarified treemap layout
-                this.renderSquarifiedTreemap(treemap, data);
-            }
-            renderSquarifiedTreemap(container, data) {
-                if (!data.children || data.children.length === 0) return;
-                const rect = container.getBoundingClientRect();
-                const width = rect.width || 800;
-                const height = rect.height || 400;
-                const totalSize = data.size;
-                const children = data.children.filter(child => child.size > 0);
-                if (children.length === 0) return;
-                // Scale areas to fit container
-                const scaledChildren = children.map(child => ({
-                    ...child,
-                    scaledSize: (child.size / totalSize) * (width * height)
-                }));
-                const layout = this.squarify(scaledChildren, [], width, { x: 0, y: 0, width, height });
-                this.renderLayout(container, layout);
             }
-            squarify(children, row, w, container) {
-                if (children.length === 0) {
-                    if (row.length > 0) {
-                        return this.layoutRow(row, container);
-                    }
-                    return [];
                 }
-                const c = children[0];
-                const newRow = [...row, c];
-                if (row.length === 0 || this.worst(newRow, w) <= this.worst(row, w)) {
-                    return this.squarify(children.slice(1), newRow, w, container);
-                } else {
-                    const rowLayout = this.layoutRow(row, container);
-                    const remaining = this.shrinkContainer(container, row, w);
-                    const restLayout = this.squarify(children, [], this.getShortSide(remaining), remaining);
-                    return [...rowLayout, ...restLayout];
                 }
-            }
-            worst(row, w) {
-                if (row.length === 0) return Infinity;
-                const areas = row.map(r => r.scaledSize);
-                const sum = areas.reduce((a, b) => a + b, 0);
-                const max = Math.max(...areas);
-                const min = Math.min(...areas);
-                const term1 = (w * w * max) / (sum * sum);
-                const term2 = (sum * sum) / (w * w * min);
-                return Math.max(term1, term2);
-            }
-            layoutRow(row, container) {
-                if (row.length === 0) return [];
-                const sum = row.reduce((acc, r) => acc + r.scaledSize, 0);
-                const isVertical = container.width >= container.height;
-                let layouts = [];
-                let offset = 0;
-                for (const item of row) {
-                    let rect;
-                    if (isVertical) {
-                        const height = container.height;
-                        const width = (item.scaledSize / sum) * (sum / height);
-                        rect = {
-                            x: container.x + offset,
-                            y: container.y,
-                            width: width,
-                            height: height,
-                            data: item
-                        };
-                        offset += width;
-                    } else {
-                        const width = container.width;
-                        const height = (item.scaledSize / sum) * (sum / width);
-                        rect = {
-                            x: container.x,
-                            y: container.y + offset,
-                            width: width,
-                            height: height,
-                            data: item
-                        };
-                        offset += height;
                     }
-                    layouts.push(rect);
                 }
-                return layouts;
-            }
-            shrinkContainer(container, row, w) {
-                const sum = row.reduce((acc, r) => acc + r.scaledSize, 0);
-                const isVertical = container.width >= container.height;
-                if (isVertical) {
-                    const usedWidth = sum / container.height;
-                    return {
-                        x: container.x + usedWidth,
-                        y: container.y,
-                        width: container.width - usedWidth,
-                        height: container.height
-                    };
-                } else {
-                    const usedHeight = sum / container.width;
-                    return {
-                        x: container.x,
-                        y: container.y + usedHeight,
-                        width: container.width,
-                        height: container.height - usedHeight
-                    };
                 }
-            }
-            getShortSide(container) {
-                return Math.min(container.width, container.height);
-            }
-            renderLayout(container, layout) {
-                container.innerHTML = '';
-                layout.forEach(rect => {
-                    const element = document.createElement('div');
-                    let cssClass = `treemap-node ${rect.data.type}`;
-                    // Add file type specific class for files
-                    if (rect.data.type === 'file') {
-                        const fileType = this.getFileTypeCategory(rect.data.name);
-                        cssClass = `treemap-node file-${fileType}`;
-                    }
-                    element.className = cssClass;
-                    element.style.left = `${rect.x}px`;
-                    element.style.top = `${rect.y}px`;
-                    element.style.width = `${rect.width}px`;
-                    element.style.height = `${rect.height}px`;
-                    // Show name only if rectangle is large enough
-                    if (rect.width > 60 && rect.height > 20) {
-                        element.textContent = rect.data.name;
-                    }
-                    this.addTooltip(element, rect.data);
-                    container.appendChild(element);
-                });
-            }
-            addTooltip(element, data) {
-                element.addEventListener('mouseenter', () => {
-                    const tooltipContent = this.createTooltipContent(data);
-                    this.tooltip.innerHTML = tooltipContent;
-                    this.tooltip.classList.add('visible');
-                });
-                element.addEventListener('mouseleave', () => {
-                    this.tooltip.classList.remove('visible');
-                });
-            }
-            createTooltipContent(data) {
-                let content = `<strong>${data.name}</strong><br>`;
-                content += `Type: ${data.type}`;
-                if (data.type === 'file') {
-                    const fileType = this.getFileTypeCategory(data.name);
-                    const typeLabels = {
-                        image: '🖼️ Image',
-                        video: '🎥 Video',
-                        audio: '🎵 Audio',
-                        document: '📄 Document',
-                        office: '📊 Office',
-                        code: '💻 Code',
-                        other: '📦 Other'
-                    };
-                    content += ` (${typeLabels[fileType]})`;
-                }
-                content += `<br>Size: ${this.formatFileSize(data.size)}<br>`;
-                content += `Path: ${data.path}<br>`;
-                if (data.type === 'file' && data.lastModified) {
-                    content += `Modified: ${new Date(data.lastModified).toLocaleDateString()}<br>`;
-                }
-                if (data.children) {
-                    content += `Items: ${data.children.length}`;
-                }
-                return content;
-            }
-            formatFileSize(bytes) {
-                if (bytes === 0) return '0 B';
                 const k = 1024;
-                const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
                 const i = Math.floor(Math.log(bytes) / Math.log(k));
-                return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
-            }
-            showLoading() {
-                this.visualizationArea.innerHTML = `
-                    <div class="loading">
-                        <div class="loading-spinner"></div>
-                        <h3>📊 Processing Directory Structure</h3>
-                        <p>Analyzing files and building treemap visualization...</p>
-                    </div>
-                `;
-            }
-            showError(message) {
-                this.visualizationArea.innerHTML = `
-                    <div style="text-align: center; padding: 60px; color: #e74c3c;">
-                        <h3>❌ Error</h3>
-                        <p>${message}</p>
-                    </div>
-                `;
             }
-        }
-        // Initialize the application
-        const app = new SquarifiedTreemapExplorer();
-        // Global functions for button clicks
-        function selectFolder() {
-            app.selectFolder();
-        }
-        function generateDemoData() {
-            app.generateDemoData();
-        }
     </script>
 </body>
-</html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Squarified Treemap - Folder Explorer</title>
     <style>
+        /*
+This space solves for Treemap visualization of the file space produced by folders, directories, paths, files, and properties of files and directories such as their accumulated size, create date, modified date, file type, words mentioned in filename, groups that are emergent on multivariate file spaces with omni modality.
+Papers that represent ideas implemented:
+Inspiration:
+A heuristic extending the Squarified treemapping algorithm. abstract: https://arxiv.org/abs/1609.00754
+A heuristic extending the Squarified treemapping algorithm. pdf: https://arxiv.org/pdf/1609.00754
+Squarified Treemaps: https://vanwijk.win.tue.nl/stm.pdf
+Treemaps with Bounded Aspect Ratio: https://arxiv.org/abs/1012.1749 https://arxiv.org/pdf/1012.1749
+Interactive Visualisation of Hierarchical Quantitative Data: an Evaluation https://www.arxiv.org/abs/1908.01277v1 https://www.arxiv.org/pdf/1908.01277v1
+https://en.wikipedia.org/wiki/Treemapping
+A Novel Algorithm for Real-time Procedural Generation of Building Floor Plans https://ar5iv.labs.arxiv.org/html/1211.5842
+Fat Polygonal Partitions with Applications to Visualization and Embeddings https://arxiv.org/abs/1009.1866 https://arxiv.org/pdf/1009.1866
+Tiling heuristics and evaluation metrics for treemaps with a target node aspect ratio: https://www.diva-portal.org/smash/get/diva2:1129639/FULLTEXT01.pdf
+        */
+        /* General Styling */
         body {
+            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+            margin: 0;
+            padding: 2rem;
+            background-color: #f4f4f9;
+            color: #333;
             text-align: center;
             display: flex;
             flex-direction: column;
             align-items: center;
+            justify-content: flex-start;
+            min-height: 100vh;
         }
+        h1 {
+            color: #2c3e50;
+        }
+        p {
+            color: #555;
+            margin-bottom: 2rem;
+            max-width: 600px;
         }
+        /* Input Button Styling */
+        .folder-picker-label {
+            display: inline-block;
+            padding: 12px 24px;
+            background-color: #3498db;
             color: white;
+            border-radius: 8px;
             cursor: pointer;
+            font-weight: bold;
+            transition: background-color 0.3s ease, transform 0.2s ease;
         }
+        .folder-picker-label:hover {
+            background-color: #2980b9;
             transform: translateY(-2px);
         }
+        #folder-picker {
+            display: none; /* Hide the default file input */
         }
+        /* Treemap Container */
+        #treemap-container {
+            position: relative;
+            width: 90vw;
+            max-width: 1200px;
+            height: 75vh;
+            margin: 2rem auto;
+            border: 1px solid #ccc;
+            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+            background-color: #fff;
+            border-radius: 8px;
+            overflow: hidden; /* Ensures nodes don't spill out */
+        }
+        /* Styling for node groups (both leaves and internal directories) */
+        .node-group {
+            position: absolute;
+            box-sizing: border-box;
+            overflow: hidden;
         }
+        /* Styling for internal nodes (directories) to give them a frame */
+        .internal {
+            border: 1px solid #aaa;
         }
+        /* Styling for leaf nodes (files) */
+        .leaf {
+            background-clip: padding-box;
+            box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.8);
+            transition: filter 0.2s ease-in-out;
+            display: flex; /* Use flexbox for alignment of label */
+            align-items: flex-start; /* Align text to top */
+            justify-content: flex-start; /* Align text to left */
         }
+        .leaf:hover {
+            filter: brightness(1.15);
+            z-index: 10;
         }
+        /* Directory labels (now as links) */
+        .node-label {
+            display: block;
+            padding: 2px 5px;
+            color: #fff;
+            background-color: rgba(0,0,0,0.4);
+            font-size: 12px;
+            font-weight: bold;
+            white-space: nowrap;
             overflow: hidden;
+            text-overflow: ellipsis;
+            text-decoration: none;
+            cursor: pointer;
         }
+        .node-label:hover {
+            background-color: rgba(0,0,0,0.6);
+        }
+        /* File labels */
+        .leaf-label {
+            padding: 3px;
+            color: rgba(255, 255, 255, 0.95);
+            text-shadow: 1px 1px 2px rgba(0,0,0,0.7);
+            text-align: left;
+            font-size: 11px; /* Smaller font */
+            white-space: normal; /* Allow wrapping */
+            word-break: break-word; /* Break long words */
+            pointer-events: none; /* Make sure label doesn't block mouse events on parent */
+        }
+        /* Tooltip for Hover-overs */
+        #tooltip {
+            position: fixed; /* Use fixed to position relative to viewport */
+            background-color: rgba(0, 0, 0, 0.85);
             color: white;
+            padding: 8px 12px;
+            border-radius: 4px;
+            pointer-events: none; /* Allows mouse events to pass through to elements below */
+            opacity: 0;
+            transition: opacity 0.2s;
+            font-size: 14px;
+            z-index: 1001;
+            transform: translate(15px, 10px); /* Offset from cursor */
         }
+        /* Custom Context Menu */
+        #context-menu {
+            position: fixed;
+            display: none;
+            background-color: #ecf0f1;
+            border: 1px solid #bdc3c7;
+            box-shadow: 0 2px 10px rgba(0,0,0,0.2);
+            border-radius: 5px;
+            padding: 5px 0;
+            z-index: 1000;
         }
+        #context-menu button {
+            display: block;
+            width: 100%;
+            padding: 8px 20px;
+            border: none;
+            background: none;
+            text-align: left;
             cursor: pointer;
+            font-size: 14px;
         }
+        #context-menu button:hover {
+            background-color: #3498db;
             color: white;
         }
+        /* Modal for confirmation */
+        .modal-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: rgba(0,0,0,0.5);
+            display: none;
+            align-items: center;
             justify-content: center;
+            z-index: 2000;
         }
+        .modal-content {
+            background: white;
+            padding: 20px;
+            border-radius: 8px;
+            text-align: center;
+            box-shadow: 0 5px 15px rgba(0,0,0,0.3);
         }
+        .modal-content p {
+            margin-bottom: 20px;
         }
+        .modal-content button {
+            padding: 10px 20px;
+            border: none;
             border-radius: 5px;
+            cursor: pointer;
+            margin: 0 10px;
         }
+        #modal-confirm {
+            background-color: #e74c3c;
+            color: white;
         }
+        #modal-cancel {
+            background-color: #bdc3c7;
         }
     </style>
 </head>
 <body>
+    <h1>Squarified Treemap Folder Explorer 🗺️</h1>
+    <p>Select a folder to visualize its contents. Hover over files or directories for info. Right-click on a file for options.</p>
+    <label for="folder-picker" class="folder-picker-label">Choose a Folder</label>
+    <input type="file" id="folder-picker" webkitdirectory directory multiple />
+    <div id="treemap-container"></div>
+    <div id="tooltip"></div>
+    <!-- Custom Context Menu Structure -->
+    <div id="context-menu">
+        <button id="menu-copy-path">Copy Path</button>
+        <button id="menu-delete">Delete from View</button>
+    </div>
+    <!-- Modal Structure -->
+    <div id="delete-modal" class="modal-overlay">
+        <div class="modal-content">
+            <p>This will only remove the item from the visualization.<br>It <strong>will not</strong> be deleted from your computer. Do you want to continue?</p>
+            <button id="modal-confirm">Yes, Remove</button>
+            <button id="modal-cancel">Cancel</button>
+        </div>
+    </div>
+    <!-- D3.js Library for data visualization -->
+    <script src="https://d3js.org/d3.v7.min.js"></script>
+    <!-- JS App Logic -->
+    <script>
+        document.addEventListener('DOMContentLoaded', () => {
+            const folderPicker = document.getElementById('folder-picker');
+            const treemapContainer = document.getElementById('treemap-container');
+            const tooltip = document.getElementById('tooltip');
+            const contextMenu = document.getElementById('context-menu');
+            const deleteModal = document.getElementById('delete-modal');
+            let currentFileTree = null; // To store the current data structure for modification
+            let nodeToDelete = null; // To store the node targeted for deletion
+            /**
+             * Processes the selected files and initiates the treemap rendering.
+             */
+            function handleFileSelect(event) {
+                const files = event.target.files;
+                if (files.length === 0) {
+                    treemapContainer.innerHTML = '<p style="padding: 2rem;">No files selected or folder is empty.</p>';
+                    return;
                 }
+                currentFileTree = buildFileTree(files);
+                renderTreemap(currentFileTree);
             }
+            /**
+             * Builds a hierarchical tree structure from a flat FileList.
+             * This version adds a 'path' property to directories as well.
+             */
+            function buildFileTree(files) {
+                const root = { name: "root", path: "", children: [] }; // FIX: Added path property to root
+                for (const file of files) {
+                    if (file.size === 0) continue;
                     const pathParts = file.webkitRelativePath.split('/');
+                    let currentNode = root;
                     let currentPath = '';
+                    for (let i = 0; i < pathParts.length; i++) {
+                        const part = pathParts[i];
+                        // Reconstruct path at each level
+                        currentPath = currentPath ? `${currentPath}/${part}` : part;
+                        if (i === pathParts.length - 1) { // It's a file
+                            currentNode.children.push({ name: part, value: file.size, path: currentPath });
+                        } else { // It's a directory
+                            let dirNode = currentNode.children.find(child => child.name === part && child.children);
+                            if (!dirNode) {
+                                dirNode = { name: part, children: [], path: currentPath };
+                                currentNode.children.push(dirNode);
+                            }
+                            currentNode = dirNode;
                         }
                     }
                 }
+                return root;
             }
+            /**
+             * Renders the squarified treemap using D3.js.
+             */
+            function renderTreemap(data) {
+                treemapContainer.innerHTML = '';
+                const width = treemapContainer.clientWidth;
+                const height = treemapContainer.clientHeight;
+                const root = d3.hierarchy(data).sum(d => d.value).sort((a, b) => b.value - a.value);
+                const treemapLayout = d3.treemap()
+                    .size([width, height])
+                    .paddingInner(1)
+                    .paddingOuter(3)
+                    .paddingTop(20)
+                    .tile(d3.treemapSquarify);
+                treemapLayout(root);
+                const color = d3.scaleOrdinal(d3.schemeCategory10);
+                const node = d3.select('#treemap-container')
+                    .selectAll('div')
+                    .data(root.descendants())
+                    .join('div')
+                    .attr('class', d => `node-group ${d.children ? 'internal' : 'leaf'}`)
+                    .style('left', d => `${d.x0}px`)
+                    .style('top', d => `${d.y0}px`)
+                    .style('width', d => `${d.x1 - d.x0}px`)
+                    .style('height', d => `${d.y1 - d.y0}px`);
+                // --- Handle Leaves (Files) ---
+                const leaves = node.filter(d => !d.children);
+                leaves.style('background-color', d => {
+                        let ancestor = d;
+                        while (ancestor.depth > 1) { ancestor = ancestor.parent; }
+                        return color(ancestor.data.name);
+                    })
+                    .on('contextmenu', (event, d) => {
+                        event.preventDefault();
+                        event.stopPropagation(); // Stop event from bubbling to parent context menus
+                        nodeToDelete = d;
+                        contextMenu.style.display = 'block';
+                        contextMenu.style.left = `${event.clientX}px`;
+                        contextMenu.style.top = `${event.clientY}px`;
                     });
+                // Add labels to the leaf nodes
+                leaves.append('div')
+                    .attr('class', 'leaf-label')
+                    .text(d => d.data.name);
+                // Attach hover listeners to leaves
+                leaves.on('mouseenter', (event, d) => {
+                        tooltip.style.opacity = 1; // FIX: Use direct style property
+                        tooltip.innerHTML = `
+                            <strong>File:</strong> ${d.data.name}<br>
+                            <strong>Path:</strong> ${d.data.path}<br>
+                            <strong>Size:</strong> ${formatBytes(d.value)}
+                        `;
+                    })
+                    .on('mousemove', (event) => {
+                        tooltip.style.left = `${event.clientX}px`; // FIX: Use direct style property
+                        tooltip.style.top = `${event.clientY}px`; // FIX: Use direct style property
+                    })
+                    .on('mouseleave', () => {
+                        tooltip.style.opacity = 0; // FIX: Use direct style property
+                    });
+                // --- Handle Directories ---
+                const directories = node.filter(d => d.children);
+                // Add labels to parent nodes (directories) as clickable links
+                directories.append('a')
+                    .attr('class', 'node-label')
+                    .attr('href', d => `file:///${d.data.path ? d.data.path.replace(/\//g, '\\') : ''}`) // FIX: Check if path exists
+                    .on('click', event => event.preventDefault()) // Prevent default left-click behavior
+                    .text(d => d.data.name);
+                // Attach hover listeners to directories
+                directories.on('mouseenter', (event, d) => {
+                        tooltip.style.opacity = 1; // FIX: Use direct style property
+                        tooltip.innerHTML = `
+                            <strong>Directory:</strong> ${d.data.path}<br>
+                            <strong>Total Size:</strong> ${formatBytes(d.value)}
+                        `;
+                    })
+                    .on('mousemove', (event) => {
+                        tooltip.style.left = `${event.clientX}px`; // FIX: Use direct style property
+                        tooltip.style.top = `${event.clientY}px`; // FIX: Use direct style property
+                    })
+                    .on('mouseleave', () => {
+                        tooltip.style.opacity = 0; // FIX: Use direct style property
+                    });
             }
+            // --- Event Listeners ---
+            folderPicker.addEventListener('change', handleFileSelect);
+            // Hide context menu on any click
+            window.addEventListener('click', () => {
+                contextMenu.style.display = 'none';
+            });
+            // Context menu actions
+            document.getElementById('menu-copy-path').addEventListener('click', () => {
+                if (nodeToDelete && navigator.clipboard) {
+                    navigator.clipboard.writeText(nodeToDelete.data.path).catch(err => console.error('Failed to copy path: ', err));
                 }
+            });
+            document.getElementById('menu-delete').addEventListener('click', () => {
+                if (nodeToDelete) {
+                    deleteModal.style.display = 'flex';
                 }
+            });
+            // Modal actions
+            document.getElementById('modal-cancel').addEventListener('click', () => {
+                deleteModal.style.display = 'none';
+                nodeToDelete = null;
+            });
+            document.getElementById('modal-confirm').addEventListener('click', () => {
+                if (nodeToDelete && nodeToDelete.parent) {
+                    // Find and remove the node from its parent's children array in the data
+                    const children = nodeToDelete.parent.data.children;
+                    const index = children.findIndex(child => child.path === nodeToDelete.data.path);
+                    if (index > -1) {
+                        children.splice(index, 1);
                     }
+                    renderTreemap(currentFileTree); // Re-render with the modified data
                 }
+                deleteModal.style.display = 'none';
+                nodeToDelete = null;
+            });
+            // Resize handler
+            window.addEventListener('resize', () => {
+                if (currentFileTree) {
+                    renderTreemap(currentFileTree);
                 }
+            });
+            /**
+             * Formats bytes into a human-readable string (KB, MB, GB).
+             */
+            function formatBytes(bytes) {
+                if (bytes === 0) return '0 Bytes';
                 const k = 1024;
+                const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
                 const i = Math.floor(Math.log(bytes) / Math.log(k));
+                return `${parseFloat((bytes / Math.pow(k, i)).toFixed(2))} ${sizes[i]}`;
             }
+        });
     </script>
 </body>
+</html>