epidemics/render_contact_network.js at master · Ravenwulf/epidemics · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
// render_graph.js
const fs = require('fs');
const path = require('path');
const puppeteer = require('puppeteer');

// --- 1. Get filename from command line ---
if (process.argv.length < 3) {
  console.error("Usage: node render_contact_network.js <graph.json>");
  process.exit(1);
}

const inputPath = process.argv[2];

if (!fs.existsSync(inputPath)) {
  console.error("File not found:", inputPath);
  process.exit(1);
}

const { elements, params } = JSON.parse(fs.readFileSync(inputPath, 'utf8'));

// --- 2. Create output PNG path ---
const base = path.basename(inputPath, '.json');
const outDir = path.join(path.dirname(inputPath), 'pngs');

// ensure ./graphs/pngs exists
if (!fs.existsSync(outDir)) {
  fs.mkdirSync(outDir, { recursive: true });
}

const outputPath = path.join(outDir, `${base}.png`);

// --- 3. Render with Puppeteer ---
(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  await page.setViewport({ width: 2400, height: 2400 });

  await page.setContent(`
    <html>
    <head>
      <style>
        body { margin: 0; padding: 0; overflow: hidden; }
        #cy { width: 2400px; height: 2400px; }
        #info {
          position: absolute;
          top: 10px;
          left: 10px;
          padding: 4px 6px;
          background: rgba(255,255,255,0.8);
          font-family: sans-serif;
          font-size: 12px;
          border-radius: 4px;
        }
      </style>
      <script src="https://unpkg.com/cytoscape/dist/cytoscape.min.js"></script>
    </head>
    <body>
      <div id="cy"></div>
      <div id="info"></div>
    </body>
    </html>
  `);

  // Inject elements, layout, styling
  await page.evaluate((elements, params) => {
    const cy = cytoscape({
      container: document.getElementById('cy'),
      elements: elements,
      style: [
        {
          selector: 'node',
          style: {
            'background-color': '#00e5ff',   // bright cyan
            'width': 8,
            'height': 8,
            'opacity': 1
          }
        },
        {
          selector: 'edge',
          style: {
            'line-color': 'rgba(255,255,255,0.35)',  // bright white, semi-transparent
            'width': 1.2,
            'opacity': 0.8
          }
        }
      ],
      layout: {
        name: 'circle',     // you can change this!
        animate: false
      }
    });

    // Overlay graph parameters
    const info = document.getElementById('info');
    info.textContent = `N=${params.N}, k=${params.k}, c=${params.c}`;
    window.cy = cy;
  }, elements, params);

  await new Promise(r => setTimeout(r, 300));  // let Cytoscape render

  await page.screenshot({ path: outputPath });
  await browser.close();

  console.log("Saved PNG →", outputPath);
})();