[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_238":239,"_240":241},"routes/_app.x.$handle.$name",{"_97":96,"_32":46,"_105":87,"_27":106,"_13":14,"_107":-5,"_11":108,"_109":110,"_111":112,"_113":114,"_115":116,"_20":-5,"_117":-5,"_118":-5,"_119":25,"_120":121,"_122":59,"_123":-5,"_124":-5,"_125":126},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_44":45,"_32":46,"_39":47,"_48":-5,"_49":25,"_50":51,"_52":51,"_53":-5,"_54":-5,"_18":55,"_56":57,"_58":59,"_60":59,"_61":-5,"_62":63,"_64":65,"_66":-5,"_67":-5,"_68":-5,"_69":-5,"_70":71,"_72":71,"_73":74,"_75":74,"_76":74,"_77":71,"_78":71,"_79":80,"_81":82,"_83":84,"_85":25},"version",34,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":33,"_34":35,"_36":38,"_39":40,"_41":14,"_42":43,"_24":25},"previous",{"_30":31,"_32":33,"_34":35,"_36":37},"deleted",false,"deletedHere","path","frontend/simple-app.js","latestPath","fileId","bad0e00a-b6b8-11f0-b1ac-0224a6c84d84","name","simple-app.js","fileType","script","content","console.log('PNPM Lockfile Visualizer loading...');\n\nclass PnpmLockfileVisualizer {\n constructor() {\n console.log('PnpmLockfileVisualizer initializing...');\n this.lockfileData = null;\n this.folderGraphs = new Map();\n this.currentGraph = null;\n this.simulation = null;\n \n this.initializeEventListeners();\n this.setupD3();\n console.log('PnpmLockfileVisualizer initialized');\n }\n \n initializeEventListeners() {\n const fileInput = document.getElementById('file-input');\n const uploadArea = document.getElementById('upload-area');\n const folderSelect = document.getElementById('folder-select');\n const layoutStrength = document.getElementById('layout-strength');\n const resetZoom = document.getElementById('reset-zoom');\n \n if (fileInput) {\n fileInput.addEventListener('change', (e) => {\n console.log('File selected:', e.target.files);\n const file = e.target.files[0];\n if (file) this.processFile(file);\n });\n }\n \n if (uploadArea) {\n uploadArea.addEventListener('click', () => fileInput.click());\n uploadArea.addEventListener('dragover', (e) => {\n e.preventDefault();\n e.currentTarget.classList.add('dragover');\n });\n uploadArea.addEventListener('dragleave', (e) => {\n e.currentTarget.classList.remove('dragover');\n });\n uploadArea.addEventListener('drop', (e) => {\n e.preventDefault();\n e.currentTarget.classList.remove('dragover');\n const files = e.dataTransfer.files;\n if (files.length > 0) this.processFile(files[0]);\n });\n }\n \n if (folderSelect) {\n folderSelect.addEventListener('change', (e) => {\n const folder = e.target.value;\n if (folder) this.renderGraph(folder);\n else this.clearGraph();\n });\n }\n \n if (layoutStrength) {\n layoutStrength.addEventListener('input', (e) => {\n const strength = parseInt(e.target.value);\n if (this.simulation) {\n this.simulation.force('charge').strength(-strength);\n this.simulation.alpha(0.3).restart();\n }\n });\n }\n \n if (resetZoom) {\n resetZoom.addEventListener('click', () => this.resetZoom());\n }\n }\n \n setupD3() {\n if (typeof d3 === 'undefined') {\n console.error('D3 is not loaded!');\n return;\n }\n \n this.svg = d3.select('#graph-svg');\n this.width = 800;\n this.height = 600;\n \n this.zoom = d3.zoom()\n .scaleExtent([0.1, 4])\n .on('zoom', (event) => {\n this.container.attr('transform', event.transform);\n });\n \n this.svg.call(this.zoom);\n this.container = this.svg.append('g');\n this.tooltip = d3.select('#tooltip');\n }\n \n async processFile(file) {\n console.log('Processing file:', file.name);\n \n if (!file.name.includes('pnpm-lock')) {\n alert('Please select a pnpm-lock.yaml file');\n return;\n }\n \n this.showLoading(true);\n \n try {\n const text = await file.text();\n console.log('File content length:', text.length);\n \n this.lockfileData = this.parseYaml(text);\n console.log('Parsed data:', this.lockfileData);\n \n this.processLockfileData();\n this.populateFolderSelect();\n this.showControls(true);\n this.showVisualization(true);\n \n console.log('File processing completed');\n } catch (error) {\n console.error('Error processing file:', error);\n alert('Error processing lockfile: ' + error.message);\n } finally {\n this.showLoading(false);\n }\n }\n \n parseYaml(yamlText) {\n const lines = yamlText.split('\\n');\n const result = {};\n const stack = [{ obj: result, indent: -1 }];\n \n for (let line of lines) {\n const trimmed = line.trim();\n if (!trimmed || trimmed.startsWith('#')) continue;\n \n const indent = line.length - line.trimStart().length;\n \n while (stack.length > 1 && stack[stack.length - 1].indent >= indent) {\n stack.pop();\n }\n \n const parent = stack[stack.length - 1].obj;\n \n if (trimmed.endsWith(':')) {\n const key = trimmed.slice(0, -1);\n parent[key] = {};\n stack.push({ obj: parent[key], indent });\n } else if (trimmed.includes(': ')) {\n const colonIndex = trimmed.indexOf(': ');\n const key = trimmed.substring(0, colonIndex);\n const value = trimmed.substring(colonIndex + 2);\n \n if (value.startsWith('\"') && value.endsWith('\"')) {\n parent[key] = value.slice(1, -1);\n } else if (value.startsWith(\"'\") && value.endsWith(\"'\")) {\n parent[key] = value.slice(1, -1);\n } else if (value === 'true') {\n parent[key] = true;\n } else if (value === 'false') {\n parent[key] = false;\n } else if (!isNaN(value) && value !== '') {\n parent[key] = parseFloat(value);\n } else {\n parent[key] = value;\n }\n }\n }\n \n return result;\n }\n \n processLockfileData() {\n this.folderGraphs.clear();\n \n const packages = this.lockfileData.packages || {};\n const importers = this.lockfileData.importers || {};\n \n // Process importers (workspace packages)\n for (const [importerPath, importerInfo] of Object.entries(importers)) {\n const folder = importerPath === '.' ? 'root' : importerPath.replace('./', '');\n \n if (!this.folderGraphs.has(folder)) {\n this.folderGraphs.set(folder, {\n nodes: new Map(),\n links: []\n });\n }\n \n const graph = this.folderGraphs.get(folder);\n const mainNodeId = folder === 'root' ? 'root' : folder.split('/').pop();\n \n if (!graph.nodes.has(mainNodeId)) {\n graph.nodes.set(mainNodeId, {\n id: mainNodeId,\n name: mainNodeId,\n type: 'main',\n version: 'workspace',\n path: importerPath\n });\n }\n \n this.addDependencies(graph, mainNodeId, importerInfo.dependencies, 'dependency');\n this.addDependencies(graph, mainNodeId, importerInfo.devDependencies, 'devDependency');\n this.addDependencies(graph, mainNodeId, importerInfo.optionalDependencies, 'optionalDependency');\n }\n \n // Convert Maps to Arrays for D3\n for (const [folder, graph] of this.folderGraphs) {\n graph.nodes = Array.from(graph.nodes.values());\n }\n }\n \n addDependencies(graph, sourceId, dependencies, type) {\n if (!dependencies) return;\n \n for (const [depName, depVersion] of Object.entries(dependencies)) {\n const depId = depName.replace(/[/@]/g, '_');\n \n if (!graph.nodes.has(depId)) {\n graph.nodes.set(depId, {\n id: depId,\n name: depName,\n type: type,\n version: depVersion\n });\n }\n \n graph.links.push({\n source: sourceId,\n target: depId,\n type: type\n });\n }\n }\n \n populateFolderSelect() {\n const select = document.getElementById('folder-select');\n select.innerHTML = '';\n \n for (const folder of this.folderGraphs.keys()) {\n const option = document.createElement('option');\n option.value = folder;\n option.textContent = folder;\n select.appendChild(option);\n }\n \n if (this.folderGraphs.size === 1) {\n const firstFolder = Array.from(this.folderGraphs.keys())[0];\n select.value = firstFolder;\n this.renderGraph(firstFolder);\n }\n }\n \n renderGraph(folder) {\n const graph = this.folderGraphs.get(folder);\n if (!graph) return;\n \n this.currentGraph = graph;\n this.clearGraph();\n \n document.getElementById('graph-info').textContent = \n `Folder: ${folder} | Nodes: ${graph.nodes.length} | Links: ${graph.links.length}`;\n \n const container = document.getElementById('graph-container');\n this.width = container.clientWidth;\n this.height = container.clientHeight;\n \n this.simulation = d3.forceSimulation(graph.nodes)\n .force('link', d3.forceLink(graph.links).id(d => d.id).distance(50))\n .force('charge', d3.forceManyBody().strength(-100))\n .force('center', d3.forceCenter(this.width / 2, this.height / 2))\n .force('collision', d3.forceCollide().radius(20));\n \n const link = this.container.append('g')\n .attr('class', 'links')\n .selectAll('line')\n .data(graph.links)\n .enter().append('line')\n .attr('class', 'link')\n .style('stroke', d => {\n switch(d.type) {\n case 'devDependency': return '#ff6b6b';\n case 'optionalDependency': return '#a855f7';\n default: return '#4ecdc4';\n }\n });\n \n const node = this.container.append('g')\n .attr('class', 'nodes')\n .selectAll('circle')\n .data(graph.nodes)\n .enter().append('circle')\n .attr('class', 'node')\n .attr('r', d => d.type === 'main' ? 12 : 8)\n .style('fill', d => this.getNodeColor(d.type))\n .call(this.drag());\n \n const label = this.container.append('g')\n .attr('class', 'labels')\n .selectAll('text')\n .data(graph.nodes)\n .enter().append('text')\n .attr('class', 'node-label')\n .text(d => d.name.length > 15 ? d.name.substring(0, 15) + '...' : d.name);\n \n node.on('mouseover', (event, d) => {\n this.tooltip\n .style('display', 'block')\n .html(`${d.name}
Type: ${d.type}
Version: ${d.version}`)\n .style('left', (event.pageX + 10) + 'px')\n .style('top', (event.pageY - 10) + 'px');\n })\n .on('mouseout', () => {\n this.tooltip.style('display', 'none');\n });\n \n this.simulation.on('tick', () => {\n link\n .attr('x1', d => d.source.x)\n .attr('y1', d => d.source.y)\n .attr('x2', d => d.target.x)\n .attr('y2', d => d.target.y);\n \n node\n .attr('cx', d => d.x)\n .attr('cy', d => d.y);\n \n label\n .attr('x', d => d.x)\n .attr('y', d => d.y + 4);\n });\n }\n \n getNodeColor(type) {\n switch (type) {\n case 'main': return '#2563eb';\n case 'dependency': return '#10b981';\n case 'devDependency': return '#f59e0b';\n case 'optionalDependency': return '#8b5cf6';\n default: return '#6b7280';\n }\n }\n \n drag() {\n return d3.drag()\n .on('start', (event, d) => {\n if (!event.active) this.simulation.alphaTarget(0.3).restart();\n d.fx = d.x;\n d.fy = d.y;\n })\n .on('drag', (event, d) => {\n d.fx = event.x;\n d.fy = event.y;\n })\n .on('end', (event, d) => {\n if (!event.active) this.simulation.alphaTarget(0);\n d.fx = null;\n d.fy = null;\n });\n }\n \n clearGraph() {\n this.container.selectAll('*').remove();\n if (this.simulation) this.simulation.stop();\n }\n \n resetZoom() {\n this.svg.transition().duration(750).call(\n this.zoom.transform,\n d3.zoomIdentity\n );\n }\n \n showLoading(show) {\n document.getElementById('loading').classList.toggle('hidden', !show);\n }\n \n showControls(show) {\n document.getElementById('controls-section').classList.toggle('hidden', !show);\n }\n \n showVisualization(show) {\n document.getElementById('visualization-section').classList.toggle('hidden', !show);\n }\n}\n\ndocument.addEventListener('DOMContentLoaded', () => {\n console.log('DOM loaded, initializing PnpmLockfileVisualizer...');\n new PnpmLockfileVisualizer();\n});","console.log('PNPM Lockfile Visualizer loading...');\n\nclass PnpmLockfileVisualizer {\n constructor() {\n console.log('PnpmLockfileVisualizer initializing...');\n this.lockfileData = null;\n this.folderGraphs = new Map();\n this.currentGraph = null;\n this.simulation = null;\n \n this.initializeEventListeners();\n this.setupD3();\n console.log('PnpmLockfileVisualizer initialized');\n }\n \n initializeEventListeners() {\n const fileInput = document.getElementById('file-input');\n const uploadArea = document.getElementById('upload-area');\n const folderSelect = document.getElementById('folder-select');\n const layoutStrength = document.getElementById('layout-strength');\n const resetZoom = document.getElementById('reset-zoom');\n \n if (fileInput) {\n fileInput.addEventListener('change', (e) => {\n console.log('File selected:', e.target.files);\n const file = e.target.files[0];\n if (file) this.processFile(file);\n });\n }\n \n if (uploadArea) {\n uploadArea.addEventListener('click', () => fileInput.click());\n uploadArea.addEventListener('dragover', (e) => {\n e.preventDefault();\n e.currentTarget.classList.add('dragover');\n });\n uploadArea.addEventListener('dragleave', (e) => {\n e.currentTarget.classList.remove('dragover');\n });\n uploadArea.addEventListener('drop', (e) => {\n e.preventDefault();\n e.currentTarget.classList.remove('dragover');\n const files = e.dataTransfer.files;\n if (files.length > 0) this.processFile(files[0]);\n });\n }\n \n if (folderSelect) {\n folderSelect.addEventListener('change', (e) => {\n const folder = e.target.value;\n if (folder) this.renderGraph(folder);\n else this.clearGraph();\n });\n }\n \n if (layoutStrength) {\n layoutStrength.addEventListener('input', (e) => {\n const strength = parseInt(e.target.value);\n if (this.simulation) {\n this.simulation.force('charge').strength(-strength);\n this.simulation.alpha(0.3).restart();\n }\n });\n }\n \n if (resetZoom) {\n resetZoom.addEventListener('click', () => this.resetZoom());\n }\n }\n \n setupD3() {\n if (typeof d3 === 'undefined') {\n console.error('D3 is not loaded!');\n return;\n }\n \n this.svg = d3.select('#graph-svg');\n this.width = 800;\n this.height = 600;\n \n this.zoom = d3.zoom()\n .scaleExtent([0.1, 4])\n .on('zoom', (event) => {\n this.container.attr('transform', event.transform);\n });\n \n this.svg.call(this.zoom);\n this.container = this.svg.append('g');\n this.tooltip = d3.select('#tooltip');\n }\n \n async processFile(file) {\n console.log('Processing file:', file.name);\n \n if (!file.name.includes('pnpm-lock')) {\n alert('Please select a pnpm-lock.yaml file');\n return;\n }\n \n this.showLoading(true);\n \n try {\n const text = await file.text();\n console.log('File content length:', text.length);\n \n this.lockfileData = this.parseYaml(text);\n console.log('Parsed data:', this.lockfileData);\n \n this.processLockfileData();\n this.populateFolderSelect();\n this.showControls(true);\n this.showVisualization(true);\n \n console.log('File processing completed');\n } catch (error) {\n console.error('Error processing file:', error);\n alert('Error processing lockfile: ' + error.message);\n } finally {\n this.showLoading(false);\n }\n }\n \n parseYaml(yamlText) {\n const lines = yamlText.split('\\n');\n const result = {};\n const stack = [{ obj: result, indent: -1 }];\n \n for (let line of lines) {\n const trimmed = line.trim();\n if (!trimmed || trimmed.startsWith('#')) continue;\n \n const indent = line.length - line.trimStart().length;\n \n while (stack.length > 1 && stack[stack.length - 1].indent >= indent) {\n stack.pop();\n }\n \n const parent = stack[stack.length - 1].obj;\n \n if (trimmed.endsWith(':')) {\n const key = trimmed.slice(0, -1);\n parent[key] = {};\n stack.push({ obj: parent[key], indent });\n } else if (trimmed.includes(': ')) {\n const colonIndex = trimmed.indexOf(': ');\n const key = trimmed.substring(0, colonIndex);\n const value = trimmed.substring(colonIndex + 2);\n \n if (value.startsWith('\"') && value.endsWith('\"')) {\n parent[key] = value.slice(1, -1);\n } else if (value.startsWith(\"'\") && value.endsWith(\"'\")) {\n parent[key] = value.slice(1, -1);\n } else if (value === 'true') {\n parent[key] = true;\n } else if (value === 'false') {\n parent[key] = false;\n } else if (!isNaN(value) && value !== '') {\n parent[key] = parseFloat(value);\n } else {\n parent[key] = value;\n }\n }\n }\n \n return result;\n }\n \n processLockfileData() {\n this.folderGraphs.clear();\n \n const packages = this.lockfileData.packages || {};\n const importers = this.lockfileData.importers || {};\n \n console.log('Processing lockfile data...');\n console.log('Packages found:', Object.keys(packages).length);\n console.log('Importers found:', Object.keys(importers).length);\n \n // Process importers (workspace packages)\n for (const [importerPath, importerInfo] of Object.entries(importers)) {\n console.log('Processing importer:', importerPath, importerInfo);\n const folder = importerPath === '.' ? 'root' : importerPath.replace('./', '');\n \n if (!this.folderGraphs.has(folder)) {\n this.folderGraphs.set(folder, {\n nodes: new Map(),\n links: []\n });\n }\n \n const graph = this.folderGraphs.get(folder);\n const mainNodeId = folder === 'root' ? 'root' : folder.split('/').pop();\n \n if (!graph.nodes.has(mainNodeId)) {\n graph.nodes.set(mainNodeId, {\n id: mainNodeId,\n name: mainNodeId,\n type: 'main',\n version: 'workspace',\n path: importerPath\n });\n }\n \n this.addDependencies(graph, mainNodeId, importerInfo.dependencies, 'dependency');\n this.addDependencies(graph, mainNodeId, importerInfo.devDependencies, 'devDependency');\n this.addDependencies(graph, mainNodeId, importerInfo.optionalDependencies, 'optionalDependency');\n }\n \n // If no importers, try to process packages directly\n if (Object.keys(importers).length === 0) {\n console.log('No importers found, processing packages directly...');\n \n // Create a root folder for all packages\n const folder = 'root';\n if (!this.folderGraphs.has(folder)) {\n this.folderGraphs.set(folder, {\n nodes: new Map(),\n links: []\n });\n }\n \n const graph = this.folderGraphs.get(folder);\n \n // Add a main root node\n if (!graph.nodes.has('root')) {\n graph.nodes.set('root', {\n id: 'root',\n name: 'Project Root',\n type: 'main',\n version: 'root',\n path: '.'\n });\n }\n \n // Add some sample dependencies from packages\n let depCount = 0;\n for (const [packagePath, packageInfo] of Object.entries(packages)) {\n if (depCount >= 10) break; // Limit for testing\n \n const packageName = packagePath.replace(/^\\//, '').replace(/@/g, '').split('/')[0];\n const depId = packageName.replace(/[/@]/g, '_');\n \n if (!graph.nodes.has(depId)) {\n graph.nodes.set(depId, {\n id: depId,\n name: packageName,\n type: 'dependency',\n version: packageInfo.version || 'unknown'\n });\n \n graph.links.push({\n source: 'root',\n target: depId,\n type: 'dependency'\n });\n \n depCount++;\n }\n }\n }\n \n // Convert Maps to Arrays for D3\n for (const [folder, graph] of this.folderGraphs) {\n graph.nodes = Array.from(graph.nodes.values());\n console.log(`Folder ${folder}: ${graph.nodes.length} nodes, ${graph.links.length} links`);\n }\n \n console.log('Total folders processed:', this.folderGraphs.size);\n }\n \n addDependencies(graph, sourceId, dependencies, type) {\n if (!dependencies) return;\n \n for (const [depName, depVersion] of Object.entries(dependencies)) {\n const depId = depName.replace(/[/@]/g, '_');\n \n if (!graph.nodes.has(depId)) {\n graph.nodes.set(depId, {\n id: depId,\n name: depName,\n type: type,\n version: depVersion\n });\n }\n \n graph.links.push({\n source: sourceId,\n target: depId,\n type: type\n });\n }\n }\n \n populateFolderSelect() {\n const select = document.getElementById('folder-select');\n select.innerHTML = '';\n \n for (const folder of this.folderGraphs.keys()) {\n const option = document.createElement('option');\n option.value = folder;\n option.textContent = folder;\n select.appendChild(option);\n }\n \n if (this.folderGraphs.size === 1) {\n const firstFolder = Array.from(this.folderGraphs.keys())[0];\n select.value = firstFolder;\n this.renderGraph(firstFolder);\n }\n }\n \n renderGraph(folder) {\n const graph = this.folderGraphs.get(folder);\n if (!graph) return;\n \n this.currentGraph = graph;\n this.clearGraph();\n \n document.getElementById('graph-info').textContent = \n `Folder: ${folder} | Nodes: ${graph.nodes.length} | Links: ${graph.links.length}`;\n \n const container = document.getElementById('graph-container');\n this.width = container.clientWidth;\n this.height = container.clientHeight;\n \n this.simulation = d3.forceSimulation(graph.nodes)\n .force('link', d3.forceLink(graph.links).id(d => d.id).distance(50))\n .force('charge', d3.forceManyBody().strength(-100))\n .force('center', d3.forceCenter(this.width / 2, this.height / 2))\n .force('collision', d3.forceCollide().radius(20));\n \n const link = this.container.append('g')\n .attr('class', 'links')\n .selectAll('line')\n .data(graph.links)\n .enter().append('line')\n .attr('class', 'link')\n .style('stroke', d => {\n switch(d.type) {\n case 'devDependency': return '#ff6b6b';\n case 'optionalDependency': return '#a855f7';\n default: return '#4ecdc4';\n }\n });\n \n const node = this.container.append('g')\n .attr('class', 'nodes')\n .selectAll('circle')\n .data(graph.nodes)\n .enter().append('circle')\n .attr('class', 'node')\n .attr('r', d => d.type === 'main' ? 12 : 8)\n .style('fill', d => this.getNodeColor(d.type))\n .call(this.drag());\n \n const label = this.container.append('g')\n .attr('class', 'labels')\n .selectAll('text')\n .data(graph.nodes)\n .enter().append('text')\n .attr('class', 'node-label')\n .text(d => d.name.length > 15 ? d.name.substring(0, 15) + '...' : d.name);\n \n node.on('mouseover', (event, d) => {\n this.tooltip\n .style('display', 'block')\n .html(`${d.name}
Type: ${d.type}
Version: ${d.version}`)\n .style('left', (event.pageX + 10) + 'px')\n .style('top', (event.pageY - 10) + 'px');\n })\n .on('mouseout', () => {\n this.tooltip.style('display', 'none');\n });\n \n this.simulation.on('tick', () => {\n link\n .attr('x1', d => d.source.x)\n .attr('y1', d => d.source.y)\n .attr('x2', d => d.target.x)\n .attr('y2', d => d.target.y);\n \n node\n .attr('cx', d => d.x)\n .attr('cy', d => d.y);\n \n label\n .attr('x', d => d.x)\n .attr('y', d => d.y + 4);\n });\n }\n \n getNodeColor(type) {\n switch (type) {\n case 'main': return '#2563eb';\n case 'dependency': return '#10b981';\n case 'devDependency': return '#f59e0b';\n case 'optionalDependency': return '#8b5cf6';\n default: return '#6b7280';\n }\n }\n \n drag() {\n return d3.drag()\n .on('start', (event, d) => {\n if (!event.active) this.simulation.alphaTarget(0.3).restart();\n d.fx = d.x;\n d.fy = d.y;\n })\n .on('drag', (event, d) => {\n d.fx = event.x;\n d.fy = event.y;\n })\n .on('end', (event, d) => {\n if (!event.active) this.simulation.alphaTarget(0);\n d.fx = null;\n d.fy = null;\n });\n }\n \n clearGraph() {\n this.container.selectAll('*').remove();\n if (this.simulation) this.simulation.stop();\n }\n \n resetZoom() {\n this.svg.transition().duration(750).call(\n this.zoom.transform,\n d3.zoomIdentity\n );\n }\n \n showLoading(show) {\n document.getElementById('loading').classList.toggle('hidden', !show);\n }\n \n showControls(show) {\n document.getElementById('controls-section').classList.toggle('hidden', !show);\n }\n \n showVisualization(show) {\n document.getElementById('visualization-section').classList.toggle('hidden', !show);\n }\n}\n\ndocument.addEventListener('DOMContentLoaded', () => {\n console.log('DOM loaded, initializing PnpmLockfileVisualizer...');\n new PnpmLockfileVisualizer();\n});","createdAt",["D",1761956667111],"branchVersion","branchId","09fd6dc6-b6b7-11f0-b7de-0224a6c84d84","id","09fcfecc-b6b7-11f0-b7de-0224a6c84d84","pnpm-lockfile-visualizer",["D",1761955771128],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","imageUrl","3eb3b590-22c2-11f0-9b13-dfe0c265f9b2","pinnedFileId","09fff33e-b6b7-11f0-b7de-0224a6c84d84","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","88ae229b-a472-4fce-9197-c4e251f25b88","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_97":96,"_104":100},"org",{"_97":96,"_98":-5,"_99":100,"_18":55,"_101":102,"_103":25},"branch",{"_13":86,"_32":87,"_44":43,"_88":45,"_89":-5,"_90":-5,"_91":-5,"_92":-5,"_93":-5,"_94":46,"_95":96},"isOwned",42,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","njbotkin","handle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18yd0g5bnY4SlZyT0NtVkpzU1VFdndWV3FXZEsifQ","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_44":45,"_32":46,"_39":234,"_48":-5,"_49":25,"_50":51,"_52":51,"_53":-5,"_54":-5,"_18":55,"_56":57,"_58":59,"_60":59,"_61":-5,"_62":63,"_64":65,"_66":-5,"_67":-5,"_68":-5,"_69":-5,"_70":71,"_72":71,"_73":74,"_75":74,"_76":74,"_77":71,"_78":71,"_79":235,"_81":236,"_83":237,"_85":25},"tree",[174,180,181,182],"files",[174,175,176,177,178,179,180,181,182],"counts",{"_163":63,"_164":165,"_166":63,"_167":168,"_169":170},"contents",[127,128,129,130],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_44":156,"_32":157,"_30":158,"_134":-5,"_42":43,"_41":159,"_136":59,"_39":160,"_13":63,"_34":161,"_36":-5,"_24":25,"_139":-5,"_27":162},{"_44":149,"_32":150,"_30":151,"_134":-5,"_42":43,"_41":152,"_136":59,"_39":153,"_13":145,"_34":20,"_36":154,"_24":25,"_139":-5,"_27":155},{"_44":141,"_32":142,"_30":57,"_134":-5,"_42":43,"_41":143,"_136":25,"_39":144,"_13":145,"_34":146,"_36":147,"_24":25,"_139":-5,"_27":148},{"_44":131,"_32":132,"_30":133,"_134":-5,"_42":43,"_41":135,"_136":59,"_39":137,"_13":63,"_34":20,"_36":138,"_24":25,"_139":-5,"_27":140},"17c4ef50-b6b8-11f0-ad07-0224a6c84d84","sample-pnpm-lock.yaml","17c4f00e-b6b8-11f0-ad07-0224a6c84d84","parentId",13,"latest",["D",1761956223738],"lockfileVersion: '6.0'\n\nsettings:\n autoInstallPeers: true\n excludeLinksFromLockfile: false\n\nimporters:\n\n .:\n dependencies:\n react:\n specifier: ^18.2.0\n version: 18.2.0\n react-dom:\n specifier: ^18.2.0\n version: 18.2.0(react@18.2.0)\n hono:\n specifier: ^3.11.7\n version: 3.11.7\n devDependencies:\n '@types/react':\n specifier: ^18.2.0\n version: 18.2.0\n typescript:\n specifier: ^5.0.0\n version: 5.0.0\n vite:\n specifier: ^4.4.0\n version: 4.4.0\n\n packages/frontend:\n dependencies:\n d3:\n specifier: ^7.8.0\n version: 7.8.0\n tailwindcss:\n specifier: ^3.3.0\n version: 3.3.0\n devDependencies:\n '@types/d3':\n specifier: ^7.4.0\n version: 7.4.0\n\n packages/backend:\n dependencies:\n express:\n specifier: ^4.18.0\n version: 4.18.0\n cors:\n specifier: ^2.8.5\n version: 2.8.5\n devDependencies:\n '@types/express':\n specifier: ^4.17.0\n version: 4.17.0\n '@types/cors':\n specifier: ^2.8.0\n version: 2.8.0\n optionalDependencies:\n sharp:\n specifier: ^0.32.0\n version: 0.32.0\n\npackages:\n\n /@types/cors@2.8.0:\n resolution: {integrity: sha512-example}\n dev: true\n\n /@types/d3@7.4.0:\n resolution: {integrity: sha512-example}\n dev: true\n\n /@types/express@4.17.0:\n resolution: {integrity: sha512-example}\n dev: true\n\n /@types/react@18.2.0:\n resolution: {integrity: sha512-example}\n dev: true\n\n /cors@2.8.5:\n resolution: {integrity: sha512-example}\n engines: {node: '>= 0.10'}\n\n /d3@7.8.0:\n resolution: {integrity: sha512-example}\n\n /express@4.18.0:\n resolution: {integrity: sha512-example}\n engines: {node: '>= 0.10.0'}\n\n /hono@3.11.7:\n resolution: {integrity: sha512-example}\n\n /react@18.2.0:\n resolution: {integrity: sha512-example}\n engines: {node: '>=0.10.0'}\n\n /react-dom@18.2.0(react@18.2.0):\n resolution: {integrity: sha512-example}\n peerDependencies:\n react: ^18.2.0\n dependencies:\n react: 18.2.0\n\n /sharp@0.32.0:\n resolution: {integrity: sha512-example}\n engines: {node: '>=14.15.0'}\n optional: true\n\n /tailwindcss@3.3.0:\n resolution: {integrity: sha512-example}\n engines: {node: '>=12.13.0'}\n\n /typescript@5.0.0:\n resolution: {integrity: sha512-example}\n engines: {node: '>=12.20'}\n\n /vite@4.4.0:\n resolution: {integrity: sha512-example}\n engines: {node: ^14.18.0 || >=16.0.0}","label",[132],"af958542-b6b8-11f0-afc3-0224a6c84d84","main.ts",27,["D",1761956478433],4,"http","import { Hono } from \"https://esm.sh/hono@3.11.7\";\nimport { readFile, serveFile } from \"https://esm.town/v/std/utils/index.ts\";\n\nconst app = new Hono();\n\n// Unwrap Hono errors to see original error details\napp.onError((err) => Promise.reject(err));\n\n// Serve the main page\napp.get(\"/\", async (c) => {\n const html = await readFile(\"/frontend/compact.html\", import.meta.url);\n return c.html(html);\n});\n\n// Serve simple test page\napp.get(\"/simple\", async (c) => {\n const html = await readFile(\"/frontend/simple.html\", import.meta.url);\n return c.html(html);\n});\n\n// Serve frontend files\napp.get(\"/frontend/*\", (c) => serveFile(c.req.path, import.meta.url));\n\nexport default app.fetch;",[142],"eb587a08-b6b8-11f0-897f-0224a6c84d84","README.md","e7a09644-b6b7-11f0-84d3-0224a6c84d84",33,["D",1761956578695],"# PNPM Lockfile Dependency Visualizer\n\nA web application that visualizes dependencies from pnpm-lock.yaml files using D3.js force-directed graphs.\n\n## Features\n\n- **File Upload**: Drag and drop or click to upload pnpm-lock.yaml files\n- **Folder-based Visualization**: Separate graphs for each workspace/folder in your project\n- **Interactive Force-Directed Graphs**: \n - Drag nodes to reposition them\n - Zoom and pan to explore large dependency trees\n - Hover tooltips showing package details\n- **Customizable Layout**: Adjust force simulation strength\n- **Color-coded Dependencies**:\n - Blue: Main packages/workspaces\n - Green: Regular dependencies \n - Yellow: Dev dependencies\n - Purple: Optional dependencies\n - Red links: Dev dependency relationships\n - Teal links: Regular dependency relationships\n - Purple links: Optional dependency relationships\n\n## How to Use\n\n1. Open the application in your browser\n2. Upload a pnpm-lock.yaml file by:\n - Dragging and dropping it onto the upload area, or\n - Clicking the upload area to browse for the file\n - **Try it out**: Use the included `sample-pnpm-lock.yaml` file to test the application\n3. Select a folder from the dropdown menu to visualize its dependencies\n4. Interact with the graph:\n - Drag nodes to reposition them\n - Use mouse wheel to zoom in/out\n - Pan by dragging empty space\n - Hover over nodes to see package details\n5. Adjust the layout strength slider to change how tightly nodes cluster\n6. Use \"Reset Zoom\" to return to the default view\n\n## Technical Details\n\n### Architecture\n- **Frontend**: Vanilla JavaScript with D3.js for visualization\n- **Backend**: Hono server for serving static files\n- **Styling**: TailwindCSS for responsive design\n\n### File Structure\n```\n├── frontend/\n│ ├── compact.html # Main HTML template (optimized)\n│ ├── simple-app.js # JavaScript application logic\n│ ├── index.html # Original HTML template\n│ ├── app.js # Original JavaScript (large file)\n│ └── simple.html # Test HTML template\n├── main.ts # Hono server entry point\n├── sample-pnpm-lock.yaml # Sample lockfile for testing\n└── README.md # This file\n```\n\n### Dependencies\n- D3.js v7 for force-directed graph visualization\n- TailwindCSS for styling\n- Hono for the web server\n\n## Supported File Format\n\nThe application expects pnpm-lock.yaml files with the standard pnpm lockfile structure:\n\n```yaml\npackages:\n /:\n dependencies:\n package-name: version\n devDependencies:\n dev-package: version\n /workspace-folder:\n dependencies:\n another-package: version\n```\n\n## Browser Compatibility\n\nWorks in all modern browsers that support:\n- ES6+ JavaScript features\n- SVG rendering\n- File API for drag-and-drop uploads\n\n## Limitations\n\n- Currently supports pnpm-lock.yaml files only\n- Uses a simplified YAML parser (works for standard pnpm lockfiles)\n- Large dependency trees may impact performance\n- No persistent storage - data is lost on page refresh",[150],"bef5ef78-b6b7-11f0-99f9-0224a6c84d84","frontend","f3a00075-e69b-430b-84a9-5ec916ed064a",2,["D",1761956074736],"directory",[157],"pulls","branches",1,"forks","envVars",{"_171":63,"_173":63},"connections",{"_171":63,"_172":63},"count","unfilledCount","emptyCount",{"_44":156,"_32":157,"_30":158,"_134":-5,"_42":43,"_41":159,"_136":59,"_39":231,"_13":63,"_34":161,"_36":-5,"_24":25,"_139":-5,"_184":232,"_27":233},{"_44":222,"_32":223,"_30":224,"_134":158,"_42":43,"_41":225,"_136":59,"_39":226,"_13":227,"_34":35,"_36":228,"_24":25,"_139":-5,"_184":229,"_27":230},{"_44":214,"_32":215,"_30":216,"_134":158,"_42":43,"_41":217,"_136":59,"_39":218,"_13":159,"_34":20,"_36":219,"_24":25,"_139":-5,"_184":220,"_27":221},{"_44":206,"_32":207,"_30":208,"_134":158,"_42":43,"_41":209,"_136":59,"_39":210,"_13":159,"_34":20,"_36":211,"_24":25,"_139":-5,"_184":212,"_27":213},{"_44":201,"_32":33,"_30":31,"_134":158,"_42":43,"_41":14,"_136":25,"_39":202,"_13":203,"_34":35,"_36":38,"_24":25,"_139":-5,"_184":204,"_27":205},{"_44":193,"_32":194,"_30":195,"_134":158,"_42":43,"_41":196,"_136":59,"_39":197,"_13":63,"_34":20,"_36":198,"_24":25,"_139":-5,"_184":199,"_27":200},{"_44":149,"_32":150,"_30":151,"_134":-5,"_42":43,"_41":152,"_136":59,"_39":190,"_13":145,"_34":20,"_36":154,"_24":25,"_139":-5,"_184":191,"_27":192},{"_44":141,"_32":142,"_30":57,"_134":-5,"_42":43,"_41":143,"_136":25,"_39":187,"_13":145,"_34":146,"_36":147,"_24":25,"_139":-5,"_184":188,"_27":189},{"_44":131,"_32":132,"_30":133,"_134":-5,"_42":43,"_41":135,"_136":59,"_39":183,"_13":63,"_34":20,"_36":138,"_24":25,"_139":-5,"_184":185,"_27":186},["D",1761956223738],"children",[],[132],["D",1761956478433],[],[142],["D",1761956578695],[],[150],"98378e40-b6b8-11f0-9df0-0224a6c84d84","simple.html","98378f6c-b6b8-11f0-9df0-0224a6c84d84",24,["D",1761956439238],"\n\n\n \n \n Simple Test\n \n\n\n

Simple Test

\n \n \n

\n \n \n\n",[],[157,194],"200ccdd0-b6b9-11f0-afe6-0224a6c84d84",["D",1761956667111],3,[],[157,33],"8b1de7a4-b6b8-11f0-a802-0224a6c84d84","index.html","bef5dbb4-b6b7-11f0-99f9-0224a6c84d84",22,["D",1761956417241],"\n\n\n \n \n PNPM Lockfile Dependency Visualizer\n \n \n \n \n\n\n

\n PNPM Lockfile Dependency Visualizer\n

\n \n \n

\n \n

\n \n \n

\n \n

Drop your pnpm-lock.yaml file here

or click to browse

\n \n

\n \n \n

\n \n Select Folder:\n \n \n

\n \n Layout Strength:\n \n \n

\n \n

\n \n \n

\n Main\n

\n Dependencies\n

\n Dev Dependencies\n

\n Optional\n

\n \n

\n \n \n

Processing lockfile...

\n \n \n

\n \n \n\n",[],[157,207],"dfac66c4-b6b8-11f0-9d08-0224a6c84d84","compact.html","acce0d20-b6b8-11f0-afc3-0224a6c84d84",31,["D",1761956559117],"\n\n\n \n \n PNPM Lockfile Dependency Visualizer\n \n \n \n \n\n\n

PNPM Lockfile Dependency Visualizer

\n \n

Drop your pnpm-lock.yaml file here

or click to browse

\n \n

\n Select Folder:\n \n

\n Layout Strength:\n \n

\n \n

Main

Dependencies

Dev Dependencies

Optional

\n \n

Processing lockfile...

\n \n

\n \n \n\n",[],[157,215],"9171902e-b6b8-11f0-aff0-0224a6c84d84","app.js","d85b5bec-b6b7-11f0-8cd2-0224a6c84d84",23,["D",1761956427866],11,"class PnpmLockfileVisualizer {\n constructor() {\n console.log('PnpmLockfileVisualizer initializing...');\n this.lockfileData = null;\n this.folderGraphs = new Map();\n this.currentGraph = null;\n this.simulation = null;\n \n this.initializeEventListeners();\n this.setupD3();\n console.log('PnpmLockfileVisualizer initialized successfully');\n }\n \n initializeEventListeners() {\n console.log('Initializing event listeners...');\n const uploadArea = document.getElementById('upload-area');\n const fileInput = document.getElementById('file-input');\n const folderSelect = document.getElementById('folder-select');\n const layoutStrength = document.getElementById('layout-strength');\n const resetZoom = document.getElementById('reset-zoom');\n const debugBtn = document.getElementById('debug-btn');\n \n if (!uploadArea || !fileInput) {\n console.error('Upload elements not found!');\n return;\n }\n \n // Debug button\n if (debugBtn) {\n debugBtn.addEventListener('click', () => {\n console.log('Debug button clicked!');\n alert('JavaScript is working! D3 loaded: ' + (typeof d3 !== 'undefined'));\n });\n }\n \n // File upload handling\n uploadArea.addEventListener('click', () => {\n console.log('Upload area clicked');\n fileInput.click();\n });\n uploadArea.addEventListener('dragover', this.handleDragOver.bind(this));\n uploadArea.addEventListener('dragleave', this.handleDragLeave.bind(this));\n uploadArea.addEventListener('drop', this.handleDrop.bind(this));\n fileInput.addEventListener('change', this.handleFileSelect.bind(this));\n \n // Controls\n folderSelect.addEventListener('change', this.handleFolderChange.bind(this));\n layoutStrength.addEventListener('input', this.handleLayoutStrengthChange.bind(this));\n resetZoom.addEventListener('click', this.resetZoom.bind(this));\n \n console.log('Event listeners initialized');\n }\n \n setupD3() {\n console.log('Setting up D3...');\n \n if (typeof d3 === 'undefined') {\n console.error('D3 is not loaded!');\n return;\n }\n \n console.log('D3 version:', d3.version);\n \n this.svg = d3.select('#graph-svg');\n if (this.svg.empty()) {\n console.error('SVG element not found!');\n return;\n }\n \n this.width = 800;\n this.height = 600;\n \n // Create zoom behavior\n this.zoom = d3.zoom()\n .scaleExtent([0.1, 4])\n .on('zoom', (event) => {\n this.container.attr('transform', event.transform);\n });\n \n this.svg.call(this.zoom);\n \n // Create container for graph elements\n this.container = this.svg.append('g');\n \n // Create tooltip\n this.tooltip = d3.select('#tooltip');\n if (this.tooltip.empty()) {\n console.error('Tooltip element not found!');\n }\n \n console.log('D3 setup completed');\n }\n \n handleDragOver(e) {\n e.preventDefault();\n e.currentTarget.classList.add('dragover');\n }\n \n handleDragLeave(e) {\n e.currentTarget.classList.remove('dragover');\n }\n \n handleDrop(e) {\n e.preventDefault();\n e.currentTarget.classList.remove('dragover');\n \n const files = e.dataTransfer.files;\n if (files.length > 0) {\n this.processFile(files[0]);\n }\n }\n \n handleFileSelect(e) {\n console.log('File selected:', e.target.files);\n const file = e.target.files[0];\n if (file) {\n console.log('Processing file:', file.name);\n this.processFile(file);\n }\n }\n \n async processFile(file) {\n console.log('Processing file:', file.name, 'Size:', file.size);\n \n if (!file.name.includes('pnpm-lock')) {\n console.warn('File name does not contain pnpm-lock:', file.name);\n alert('Please select a pnpm-lock.yaml file');\n return;\n }\n \n this.showLoading(true);\n \n try {\n console.log('Reading file text...');\n const text = await file.text();\n console.log('File text length:', text.length);\n console.log('First 200 chars:', text.substring(0, 200));\n \n console.log('Parsing YAML...');\n this.lockfileData = this.parseYaml(text);\n console.log('Parsed data:', this.lockfileData);\n \n console.log('Processing lockfile data...');\n this.processLockfileData();\n console.log('Folder graphs:', this.folderGraphs);\n \n this.populateFolderSelect();\n this.showControls(true);\n this.showVisualization(true);\n \n console.log('File processing completed successfully');\n } catch (error) {\n console.error('Error processing file:', error);\n alert('Error processing lockfile. Please check the file format.');\n } finally {\n this.showLoading(false);\n }\n }\n \n parseYaml(yamlText) {\n // Enhanced YAML parser for pnpm-lock.yaml structure\n const lines = yamlText.split('\\n');\n const result = {};\n const stack = [{ obj: result, indent: -1 }];\n \n for (let line of lines) {\n const trimmed = line.trim();\n if (!trimmed || trimmed.startsWith('#')) continue;\n \n const indent = line.length - line.trimStart().length;\n \n // Pop stack until we find the right parent level\n while (stack.length > 1 && stack[stack.length - 1].indent >= indent) {\n stack.pop();\n }\n \n const parent = stack[stack.length - 1].obj;\n \n if (trimmed.endsWith(':')) {\n // This is a key with nested content\n const key = trimmed.slice(0, -1);\n parent[key] = {};\n stack.push({ obj: parent[key], indent });\n } else if (trimmed.includes(': ')) {\n // This is a key-value pair\n const colonIndex = trimmed.indexOf(': ');\n const key = trimmed.substring(0, colonIndex);\n const value = trimmed.substring(colonIndex + 2);\n \n // Handle quoted strings and basic types\n if (value.startsWith('\"') && value.endsWith('\"')) {\n parent[key] = value.slice(1, -1);\n } else if (value.startsWith(\"'\") && value.endsWith(\"'\")) {\n parent[key] = value.slice(1, -1);\n } else if (value === 'true') {\n parent[key] = true;\n } else if (value === 'false') {\n parent[key] = false;\n } else if (!isNaN(value) && value !== '') {\n parent[key] = parseFloat(value);\n } else {\n parent[key] = value;\n }\n }\n }\n \n return result;\n }\n \n processLockfileData() {\n this.folderGraphs.clear();\n \n // Handle both 'packages' and 'importers' sections (different pnpm versions)\n const packages = this.lockfileData.packages || {};\n const importers = this.lockfileData.importers || {};\n \n // Process importers (workspace packages)\n for (const [importerPath, importerInfo] of Object.entries(importers)) {\n const folder = importerPath === '.' ? 'root' : importerPath.replace('./', '');\n \n if (!this.folderGraphs.has(folder)) {\n this.folderGraphs.set(folder, {\n nodes: new Map(),\n links: []\n });\n }\n \n const graph = this.folderGraphs.get(folder);\n \n // Add main package node for this workspace\n const mainNodeId = folder === 'root' ? 'root' : folder.split('/').pop();\n if (!graph.nodes.has(mainNodeId)) {\n graph.nodes.set(mainNodeId, {\n id: mainNodeId,\n name: mainNodeId,\n type: 'main',\n version: 'workspace',\n path: importerPath\n });\n }\n \n // Add dependencies from importer\n this.addDependencies(graph, mainNodeId, importerInfo.dependencies, 'dependency');\n this.addDependencies(graph, mainNodeId, importerInfo.devDependencies, 'devDependency');\n this.addDependencies(graph, mainNodeId, importerInfo.optionalDependencies, 'optionalDependency');\n }\n \n // If no importers, fall back to packages structure\n if (Object.keys(importers).length === 0) {\n for (const [packagePath, packageInfo] of Object.entries(packages)) {\n if (!packageInfo.dependencies && !packageInfo.devDependencies) continue;\n \n const folder = this.extractFolderFromPath(packagePath);\n \n if (!this.folderGraphs.has(folder)) {\n this.folderGraphs.set(folder, {\n nodes: new Map(),\n links: []\n });\n }\n \n const graph = this.folderGraphs.get(folder);\n \n // Add main package node\n const mainNodeId = this.getPackageNameFromPath(packagePath);\n if (!graph.nodes.has(mainNodeId)) {\n graph.nodes.set(mainNodeId, {\n id: mainNodeId,\n name: mainNodeId,\n type: 'main',\n version: packageInfo.version || 'unknown',\n path: packagePath\n });\n }\n \n // Add dependency nodes and links\n this.addDependencies(graph, mainNodeId, packageInfo.dependencies, 'dependency');\n this.addDependencies(graph, mainNodeId, packageInfo.devDependencies, 'devDependency');\n }\n }\n \n // Convert Maps to Arrays for D3\n for (const [folder, graph] of this.folderGraphs) {\n graph.nodes = Array.from(graph.nodes.values());\n }\n }\n \n extractFolderFromPath(packagePath) {\n if (packagePath.startsWith('/')) {\n const parts = packagePath.split('/');\n return parts.length > 2 ? parts[1] : 'root';\n }\n return 'root';\n }\n \n getPackageNameFromPath(packagePath) {\n if (packagePath.startsWith('/')) {\n const parts = packagePath.split('/');\n return parts[parts.length - 1] || 'root';\n }\n return packagePath.replace(/[/@]/g, '_');\n }\n \n addDependencies(graph, sourceId, dependencies, type) {\n if (!dependencies) return;\n \n for (const [depName, depVersion] of Object.entries(dependencies)) {\n const depId = depName.replace(/[/@]/g, '_');\n \n // Add dependency node if not exists\n if (!graph.nodes.has(depId)) {\n graph.nodes.set(depId, {\n id: depId,\n name: depName,\n type: type,\n version: depVersion\n });\n }\n \n // Add link\n graph.links.push({\n source: sourceId,\n target: depId,\n type: type\n });\n }\n }\n \n populateFolderSelect() {\n const select = document.getElementById('folder-select');\n select.innerHTML = '';\n \n for (const folder of this.folderGraphs.keys()) {\n const option = document.createElement('option');\n option.value = folder;\n option.textContent = folder;\n select.appendChild(option);\n }\n \n // Auto-select first folder if only one exists\n if (this.folderGraphs.size === 1) {\n const firstFolder = Array.from(this.folderGraphs.keys())[0];\n select.value = firstFolder;\n this.renderGraph(firstFolder);\n }\n }\n \n handleFolderChange(e) {\n const folder = e.target.value;\n if (folder) {\n this.renderGraph(folder);\n } else {\n this.clearGraph();\n }\n }\n \n handleLayoutStrengthChange(e) {\n const strength = parseInt(e.target.value);\n if (this.simulation) {\n this.simulation.force('charge').strength(-strength);\n this.simulation.alpha(0.3).restart();\n }\n }\n \n resetZoom() {\n this.svg.transition().duration(750).call(\n this.zoom.transform,\n d3.zoomIdentity\n );\n }\n \n renderGraph(folder) {\n const graph = this.folderGraphs.get(folder);\n if (!graph) return;\n \n this.currentGraph = graph;\n this.clearGraph();\n \n // Update info\n document.getElementById('graph-info').textContent = \n `Folder: ${folder} | Nodes: ${graph.nodes.length} | Links: ${graph.links.length}`;\n \n // Update container size\n const container = document.getElementById('graph-container');\n this.width = container.clientWidth;\n this.height = container.clientHeight;\n \n // Create simulation\n this.simulation = d3.forceSimulation(graph.nodes)\n .force('link', d3.forceLink(graph.links).id(d => d.id).distance(50))\n .force('charge', d3.forceManyBody().strength(-100))\n .force('center', d3.forceCenter(this.width / 2, this.height / 2))\n .force('collision', d3.forceCollide().radius(20));\n \n // Create links\n const link = this.container.append('g')\n .attr('class', 'links')\n .selectAll('line')\n .data(graph.links)\n .enter().append('line')\n .attr('class', 'link')\n .style('stroke', d => {\n switch(d.type) {\n case 'devDependency': return '#ff6b6b';\n case 'optionalDependency': return '#a855f7';\n default: return '#4ecdc4';\n }\n });\n \n // Create nodes\n const node = this.container.append('g')\n .attr('class', 'nodes')\n .selectAll('circle')\n .data(graph.nodes)\n .enter().append('circle')\n .attr('class', 'node')\n .attr('r', d => d.type === 'main' ? 12 : 8)\n .style('fill', d => this.getNodeColor(d.type))\n .call(this.drag());\n \n // Create labels\n const label = this.container.append('g')\n .attr('class', 'labels')\n .selectAll('text')\n .data(graph.nodes)\n .enter().append('text')\n .attr('class', 'node-label')\n .text(d => d.name.length > 15 ? d.name.substring(0, 15) + '...' : d.name);\n \n // Add tooltips\n node.on('mouseover', (event, d) => {\n this.tooltip\n .style('display', 'block')\n .html(`\n ${d.name}
\n Type: ${d.type}
\n Version: ${d.version}\n `)\n .style('left', (event.pageX + 10) + 'px')\n .style('top', (event.pageY - 10) + 'px');\n })\n .on('mouseout', () => {\n this.tooltip.style('display', 'none');\n });\n \n // Update positions on simulation tick\n this.simulation.on('tick', () => {\n link\n .attr('x1', d => d.source.x)\n .attr('y1', d => d.source.y)\n .attr('x2', d => d.target.x)\n .attr('y2', d => d.target.y);\n \n node\n .attr('cx', d => d.x)\n .attr('cy', d => d.y);\n \n label\n .attr('x', d => d.x)\n .attr('y', d => d.y + 4);\n });\n }\n \n getNodeColor(type) {\n switch (type) {\n case 'main': return '#2563eb';\n case 'dependency': return '#10b981';\n case 'devDependency': return '#f59e0b';\n case 'optionalDependency': return '#8b5cf6';\n default: return '#6b7280';\n }\n }\n \n drag() {\n return d3.drag()\n .on('start', (event, d) => {\n if (!event.active) this.simulation.alphaTarget(0.3).restart();\n d.fx = d.x;\n d.fy = d.y;\n })\n .on('drag', (event, d) => {\n d.fx = event.x;\n d.fy = event.y;\n })\n .on('end', (event, d) => {\n if (!event.active) this.simulation.alphaTarget(0);\n d.fx = null;\n d.fy = null;\n });\n }\n \n clearGraph() {\n this.container.selectAll('*').remove();\n if (this.simulation) {\n this.simulation.stop();\n }\n }\n \n showLoading(show) {\n document.getElementById('loading').classList.toggle('hidden', !show);\n }\n \n showControls(show) {\n document.getElementById('controls-section').classList.toggle('hidden', !show);\n }\n \n showVisualization(show) {\n document.getElementById('visualization-section').classList.toggle('hidden', !show);\n }\n}\n\n// Initialize the application\ndocument.addEventListener('DOMContentLoaded', () => {\n console.log('DOM loaded, initializing PnpmLockfileVisualizer...');\n try {\n new PnpmLockfileVisualizer();\n } catch (error) {\n console.error('Failed to initialize PnpmLockfileVisualizer:', error);\n }\n});",[],[157,223],["D",1761956074736],[175,176,177,178,179],[157],["D",1761955771128],{"_97":96,"_104":100},{"_97":96,"_98":-5,"_99":100,"_18":55,"_101":102,"_103":25},{"_13":86,"_32":87,"_44":43,"_88":45,"_89":-5,"_90":-5,"_91":-5,"_92":-5,"_93":-5,"_94":46,"_95":96},"ctx",{"_79":-5,"_124":271,"_272":273,"_274":275,"_276":25,"_277":25,"_278":25,"_279":59,"_280":-5,"_281":-7,"_282":-7,"_283":63,"_284":25,"_285":25,"_286":-5,"_287":25,"_288":25,"_289":25,"_290":-5},"ENV",{"_242":243,"_244":245,"_246":87,"_247":248,"_249":250,"_251":252,"_253":254,"_255":256,"_257":258,"_259":260,"_261":262,"_263":264,"_265":266,"_267":268,"_269":270},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","71c1b20804b3232a7e513be260cfffc1932a9e97","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Diff · v34