@polymer-labs/visual-lock

3D interactive dependency visualization component for Gel lockfiles.

Installation

npm install @polymer-labs/visual-lock

Usage

Vanilla JavaScript

const { generateVisualizationHTML, buildDependencyGraph } = require('@polymer-labs/visual-lock');
const fs = require('fs');

// Load your gel.lock file
const lockData = JSON.parse(fs.readFileSync('gel.lock', 'utf8'));

// Build dependency graph
const graph = buildDependencyGraph(lockData.dependencies);

// Generate standalone HTML visualization
const html = generateVisualizationHTML(graph, process.cwd());

// Save to file
fs.writeFileSync('visualization.html', html);

React Component

import { VisualLock } from '@polymer-labs/visual-lock/react';

function App() {
  const lockData = {
    /* your gel.lock data */
  };

  const handleDissolve = packageName => {
    console.log('Dissolving:', packageName);
    // Execute gel dissolve command
  };

  return <VisualLock lockfileData={lockData} onDissolve={handleDissolve} />;
}

Features

• 🎨 3D Visualization - Interactive Three.js rendering
• 🔵 Glowing Connections - Highlights dependency relationships
• 🎯 Click Interactions - Select nodes for details
• 🎮 Mouse Controls - Drag to rotate, scroll to zoom
• 🌈 Color Coding - Visual weight indicators
  • 🟢 Green = Light (0-2 dependencies)
  • 🟠 Orange = Medium (3-5 dependencies)
  • 🔴 Red = Heavy (6+ dependencies)
• 💎 Glassmorphism UI - Modern, clean interface
• ⚡ Smooth Animations - Pulsing and floating effects

API

buildDependencyGraph(dependencies)

Converts gel.lock dependencies into a graph structure.

Parameters:

• dependencies (Object) - Dependencies from gel.lock

Returns: { nodes, edges }

generateVisualizationHTML(graph, projectRoot)

Generates a standalone HTML file with 3D visualization.

Parameters:

• graph (Object) - Graph from buildDependencyGraph
• projectRoot (string) - Absolute project path

Returns: HTML string

React Component: <VisualLock>

Props:

• lockfileData (Object) - Gel lockfile data
• onDissolve (Function) - Callback when dissolve clicked

Browser Support

• Chrome/Edge 90+
• Firefox 88+
• Safari 14+

Requires WebGL support for 3D rendering.

License

MIT © Polymer Labs