A-Legacy-in-Metal

Running

File size: 18,638 Bytes

<!DOCTYPE html>
<html lang="en">
<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>