added docs and fix download function

Author: terapyon

.gitignore

@@ -155,6 +155,9 @@ net_vis/nbextension/index.*
 # Packed lab extensions
 net_vis/labextension
 
+# Auto-generated bundle content for TypeScript
+src/standaloneBundleContent.ts
+
 VSCode
 
 *.code-workspace

CHANGES.md

@@ -11,6 +11,12 @@
   - Works offline without internet connection or JupyterLab
   - Preserves all interactive features (zoom, pan, node selection, drag)
 
+- **One-Click Download Button**: Download HTML directly from JupyterLab
+  - Download button appears in top-right corner of visualization
+  - Click to instantly save as `netvis_export_YYYY-MM-DD.html`
+  - Works independently of kernel state (client-side generation)
+  - No code required for quick exports
+
 - **Export Customization**:
   - Custom title and description for HTML documents
   - Configurable container width (CSS values) and height (pixels)
@@ -55,7 +61,7 @@ plotter.export_html("graph.html", download=True)
 
 - **HTMLExporter**: Template-based HTML generation using string.Template
 - **Standalone Bundle**: D3.js + rendering code bundled via webpack (~280KB)
-- **Test Coverage**: 26 new tests covering all export functionality
+- **Test Coverage**: 50 new tests (26 Python + 24 TypeScript) covering all export functionality
 - **Error Handling**: Proper exception propagation for file system errors
 
 ### Compatibility

docs/source/index.rst

@@ -41,6 +41,8 @@ To get started with net_vis, install with pip::
     # Get HTML as string for embedding
     html = plotter.export_html()
 
+**One-Click Download Button**: When viewing a graph in JupyterLab, click the download button (top-right corner) to instantly save the visualization as an HTML file.
+
 **Note**: NetVis uses a MIME renderer that works automatically in JupyterLab 3.x and 4.x. Manual extension enabling is not required.
 
 

docs/source/introduction.rst

@@ -8,6 +8,8 @@ NetVis is a package for interactive visualization of Python NetworkX graphs with
 Key Features
 ------------
 
+- **Standalone HTML Export (v0.6.0)**: Export visualizations as self-contained HTML files that work offline
+- **One-Click Download Button (v0.6.0)**: Download HTML directly from JupyterLab visualization with a single click
 - **NetworkX Plotter API (v0.5.0)**: Direct visualization of NetworkX graphs without JSON conversion
 - **Interactive D3.js Visualization**: Force-directed graph layout with interactive node dragging, zooming, and panning
 - **Multiple Graph Types**: Support for Graph, DiGraph, MultiGraph, and MultiDiGraph
@@ -107,6 +109,50 @@ Version 0.5.0 introduces the **NetworkX Plotter API**, a high-level interface fo
 See the :doc:`examples/index` for complete usage examples.
 
 
+What's New in 0.6.0
+-------------------
+
+Version 0.6.0 introduces **Standalone HTML Export**, enabling you to share visualizations without JupyterLab:
+
+**HTML Export API**
+    Export visualizations as self-contained HTML files::
+
+        # Export to file
+        plotter.export_html("my_graph.html")
+
+        # Export with customization
+        plotter.export_html(
+            "report.html",
+            title="Network Analysis Report",
+            description="Generated analysis results",
+            width="800px",
+            height=700
+        )
+
+        # Get HTML as string for embedding
+        html = plotter.export_html()
+
+**One-Click Download Button**
+    When viewing a graph in JupyterLab, a download button appears in the top-right corner:
+
+    - Click the button to instantly download the visualization as HTML
+    - Files are automatically named ``netvis_export_YYYY-MM-DD.html``
+    - Works even when the kernel is stopped (client-side generation)
+    - No code required for quick exports
+
+**Exported HTML Features**
+    - Works offline (no internet connection required)
+    - All JavaScript and CSS embedded inline
+    - Interactive features preserved (zoom, pan, node dragging)
+    - Opens in any modern browser (Chrome, Firefox, Safari, Edge)
+
+**Remote Environment Support**
+    For JupyterHub, Google Colab, or Binder environments::
+
+        # Trigger browser download to local PC
+        plotter.export_html("graph.html", download=True)
+
+
 Architecture (v0.4.0)
 ---------------------
 

package.json

@@ -29,9 +29,9 @@
     "url": "https://github.com/cmscom/netvis"
   },
   "scripts": {
-    "build": "yarn run build:lib && yarn run build:labextension:dev",
-    "build:prod": "yarn run build:lib && yarn run build:labextension",
-    "build:standalone": "webpack --config webpack.standalone.js",
+    "build": "yarn run build:standalone && yarn run build:lib && yarn run build:labextension:dev",
+    "build:prod": "yarn run build:standalone && yarn run build:lib && yarn run build:labextension",
+    "build:standalone": "webpack --config webpack.standalone.js && node scripts/generate-bundle-module.js",
     "build:labextension": "jupyter labextension build .",
     "build:labextension:dev": "jupyter labextension build --development True .",
     "build:lib": "tsc",

scripts/generate-bundle-module.js

@@ -0,0 +1,51 @@
+#!/usr/bin/env node
+/**
+ * Generate TypeScript module containing the standalone bundle content.
+ *
+ * This script reads the built netvis-standalone.min.js and generates
+ * a TypeScript file that exports the bundle content as a string constant.
+ *
+ * Usage: node scripts/generate-bundle-module.js
+ *
+ * Output: src/standaloneBundleContent.ts
+ */
+
+const fs = require('fs');
+const path = require('path');
+
+const bundlePath = path.join(
+  __dirname,
+  '..',
+  'net_vis',
+  'resources',
+  'netvis-standalone.min.js'
+);
+const outputPath = path.join(__dirname, '..', 'src', 'standaloneBundleContent.ts');
+
+// Read the bundle
+if (!fs.existsSync(bundlePath)) {
+  console.error(`Error: Bundle not found at ${bundlePath}`);
+  console.error('Run "yarn run build:standalone" first.');
+  process.exit(1);
+}
+
+const bundleContent = fs.readFileSync(bundlePath, 'utf8');
+
+// Generate TypeScript module
+const tsContent = `/**
+ * Auto-generated file containing the standalone bundle content.
+ * DO NOT EDIT MANUALLY - regenerate with: node scripts/generate-bundle-module.js
+ *
+ * This module exports the minified D3.js + NetVis rendering code
+ * for embedding in standalone HTML exports.
+ */
+
+// eslint-disable-next-line max-len
+export const STANDALONE_BUNDLE: string = ${JSON.stringify(bundleContent)};
+`;
+
+// Write the TypeScript file
+fs.writeFileSync(outputPath, tsContent, 'utf8');
+
+console.log(`Generated: ${outputPath}`);
+console.log(`Bundle size: ${(bundleContent.length / 1024).toFixed(1)} KB`);

src/htmlExport.ts

@@ -5,6 +5,8 @@
  * for exporting NetVis graphs as standalone HTML files.
  */
 
+import { STANDALONE_BUNDLE } from './standaloneBundleContent';
+
 /**
  * Configuration for HTML export.
  */
@@ -60,8 +62,8 @@ export function generateStandaloneHtml(config: ExportConfig): string {
   // Generate inline CSS
   const css = generateCss();
 
-  // Generate inline JavaScript (D3.js rendering code)
-  const js = generateJs();
+  // Get the pre-built JavaScript bundle (D3.js + rendering code)
+  const js = getJsBundle();
 
   return `<!DOCTYPE html>
 <html lang="en">
@@ -215,93 +217,11 @@ function generateCss(): string {
 }
 
 /**
- * Generate JavaScript code for standalone HTML.
- * This is a minimal D3.js-based graph renderer.
+ * Get JavaScript bundle for standalone HTML.
+ *
+ * Returns the pre-built D3.js + NetVis rendering code bundle.
+ * This is the same bundle used by Python's HTMLExporter.
  */
-function generateJs(): string {
-  // For the standalone export, we need to include the D3.js bundle
-  // In the actual implementation, this would be loaded from the build
-  return `
-        // NetVis standalone renderer
-        var netvis = (function() {
-            // Minimal graph rendering (placeholder for full D3.js bundle)
-            function renderGraph(container, data) {
-                if (!container) return;
-
-                const width = container.clientWidth || 800;
-                const height = container.clientHeight || 600;
-
-                // Create SVG
-                const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
-                svg.setAttribute('width', width);
-                svg.setAttribute('height', height);
-                svg.setAttribute('viewBox', '0 0 ' + width + ' ' + height);
-                container.appendChild(svg);
-
-                // Simple force-directed layout simulation
-                const nodes = data.nodes || [];
-                const links = data.links || [];
-
-                // Initialize node positions
-                nodes.forEach(function(node, i) {
-                    node.x = node.x || width / 2 + (Math.random() - 0.5) * 200;
-                    node.y = node.y || height / 2 + (Math.random() - 0.5) * 200;
-                });
-
-                // Draw links
-                const linkGroup = document.createElementNS('http://www.w3.org/2000/svg', 'g');
-                linkGroup.setAttribute('class', 'netvis-links');
-                svg.appendChild(linkGroup);
-
-                links.forEach(function(link) {
-                    const source = nodes.find(function(n) { return n.id === link.source || n.id === link.source.id; });
-                    const target = nodes.find(function(n) { return n.id === link.target || n.id === link.target.id; });
-                    if (source && target) {
-                        const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
-                        line.setAttribute('class', 'netvis-link');
-                        line.setAttribute('x1', source.x);
-                        line.setAttribute('y1', source.y);
-                        line.setAttribute('x2', target.x);
-                        line.setAttribute('y2', target.y);
-                        line.setAttribute('stroke', '#999');
-                        line.setAttribute('stroke-opacity', '0.6');
-                        linkGroup.appendChild(line);
-                    }
-                });
-
-                // Draw nodes
-                const nodeGroup = document.createElementNS('http://www.w3.org/2000/svg', 'g');
-                nodeGroup.setAttribute('class', 'netvis-nodes');
-                svg.appendChild(nodeGroup);
-
-                nodes.forEach(function(node) {
-                    const g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
-                    g.setAttribute('class', 'netvis-node');
-                    g.setAttribute('transform', 'translate(' + node.x + ',' + node.y + ')');
-
-                    const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
-                    circle.setAttribute('r', 8);
-                    circle.setAttribute('fill', node.color || '#69b3a2');
-                    circle.setAttribute('stroke', '#fff');
-                    circle.setAttribute('stroke-width', '1.5');
-                    g.appendChild(circle);
-
-                    if (node.name || node.label) {
-                        const text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
-                        text.setAttribute('class', 'netvis-node-label');
-                        text.setAttribute('dx', '12');
-                        text.setAttribute('dy', '4');
-                        text.textContent = node.name || node.label;
-                        g.appendChild(text);
-                    }
-
-                    nodeGroup.appendChild(g);
-                });
-            }
-
-            return {
-                renderGraph: renderGraph
-            };
-        })();
-  `;
+function getJsBundle(): string {
+  return STANDALONE_BUNDLE;
 }