Merge branch 'puppeteer-code-graph'

errorcorrectionzoo · Mar 27, 2024 · ac256dd · ac256dd
2 parents 82e29a9 + 58dbb08
commit ac256dd
Show file tree

Hide file tree

Showing 20 changed files with 650 additions and 439 deletions.
diff --git a/.gitignore b/.gitignore
@@ -17,6 +17,7 @@
 
 node_modules
 
+jscomponents/codegraph/_headless_exporter_browser_code_dist
 previewtool/dist
 _zoodb_citations_cache
 

diff --git a/_zoodb_citations_cache/cache_compiled_citations.json b/_zoodb_citations_cache/cache_compiled_citations.json
diff --git a/_zoodb_citations_cache/cache_downloaded_info.json b/_zoodb_citations_cache/cache_downloaded_info.json
diff --git a/jscomponents/codegraph/_headless_exporter_browser_code.js b/jscomponents/codegraph/_headless_exporter_browser_code.js
@@ -0,0 +1,140 @@
+//
+// PUPPETEER IN-BROWSER CODE
+//
+
+console.log(`Executing in-browser code now`);
+
+function isStrict() { return !this; }
+if (!isStrict()) {
+    console.error(`Not strict mode!`);
+    throw new Error(`Not strict mode!`);
+}
+
+// -----
+
+import debugm from 'debug'; const debug = debugm('_headless_exporter_browser_code');
+
+import loMerge from 'lodash/merge.js';
+
+import { load_eczoodb_from_data } from './setup_eczoodb.js';
+
+import { EczCodeGraph } from './index.js';
+import { EczCodeGraphViewController } from './eczcodegraphviewcontroller.js';
+
+import cytoscape from 'cytoscape';
+import cySvg from 'cytoscape-svg';
+cytoscape.use( cySvg );
+
+
+async function _loadCodeGraph(eczoodbData, displayOptions)
+{
+    const eczoodb = await load_eczoodb_from_data(eczoodbData);
+
+    let eczCodeGraph = new EczCodeGraph({
+        eczoodb,
+    });
+
+    await eczCodeGraph.initialize();
+
+    let eczCodeGraphViewController = new EczCodeGraphViewController(eczCodeGraph, displayOptions);
+
+    await eczCodeGraphViewController.initialize();
+
+    return { eczoodb, eczCodeGraph, eczCodeGraphViewController };
+}
+
+async function _prepareCodeGraphAndLayout(
+    eczoodbData, { displayOptions, updateLayoutOptions, cyStyleOptions }
+)
+{
+    const {
+        eczoodb,
+        eczCodeGraph,
+        eczCodeGraphViewController,
+    } = await _loadCodeGraph(eczoodbData, displayOptions);
+
+    debug(`Code graph loaded.`);
+
+    const domNode = window.document.createElement('div');
+    window.document.body.appendChild(domNode);
+    domNode.style.width = 800;
+    domNode.style.height = 600;
+
+    await eczCodeGraph.mountInDom(
+        domNode,
+        {
+            styleOptions: Object.assign(
+                {
+                    matchWebPageFonts: false,
+                    window: window,
+                },
+                cyStyleOptions,
+            ),
+        }
+    );
+
+    debug(`Mounted in DOM!`);
+
+    eczCodeGraphViewController.setDisplayOptions(displayOptions);
+
+    debug(`set display options!`);
+
+    // perform layout !
+    await eczCodeGraph.updateLayout(loMerge(
+        {
+            animate: false
+        },
+        updateLayoutOptions
+    ));
+
+    debug(`ran updateLayout()!`);
+
+    const cy = eczCodeGraph.cy;
+
+    // fit into view
+    await cy.fit();
+
+    debug(`fit cy canvas view to graph. Done!`);
+
+    debug(`There are ${cy.nodes().length} nodes in the graph.`);
+
+    return {
+        eczoodb,
+        eczCodeGraph,
+        eczCodeGraphViewController,
+    };
+}
+
+async function _loadAndCompileCodeGraphToSvgPromise(eczoodbData, prepareOptions, svgOptions)
+{
+    //debug('eczoodbData = ', JSON.stringify(eczoodbData)); // ok, works
+    debug('prepareOptions = ', JSON.stringify(prepareOptions));
+    var result = await _prepareCodeGraphAndLayout(eczoodbData, prepareOptions);
+
+    var cy = result.eczCodeGraph.cy;
+
+    var svgData = cy.svg(Object.assign(
+        {
+            full: true
+        },
+        svgOptions
+    ));
+    return {
+        svgData: svgData,
+        // moredata: {
+        //     cy_data: cy.json(),
+        // }
+    };
+}
+
+window.loadCodeGraph = _loadCodeGraph;
+window.prepareCodeGraphAndLayout = _prepareCodeGraphAndLayout;
+window.loadAndCompileCodeGraphToSvgPromise = _loadAndCompileCodeGraphToSvgPromise;
+
+window.localStorage.debug = '*';
+
+console.log('Loaded (msg via console.log())');
+debug(`Loaded (msg via debug()).`);
+console.debug('Loaded (msg via console.debug())');
+
+window.finished_loading = true;
diff --git a/jscomponents/codegraph/_headless_exporter_browser_page.html b/jscomponents/codegraph/_headless_exporter_browser_page.html
@@ -0,0 +1,12 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<script>
+window.localStorage.debug = "*";
+window.finished_loading = false;
+</script>
+<script type="module" src="./_headless_exporter_browser_code.js"></script>
+</head>
+<body id="body">
+</body>
+</html>
diff --git a/jscomponents/codegraph/eczcodegraph.js b/jscomponents/codegraph/eczcodegraph.js
@@ -120,7 +120,8 @@ export class EczCodeGraph
 
         await this.initGraph();
 
-        debug("EczCodeGraph initialize() done.  Don't forget to install a subgraph selector.");
+        debug(`EczCodeGraph initialize() done.  Don't forget to install a subgraph selector, `
+              + `for instance, via a EczCodeGraphViewController instance.`);
     }
 
     static getNodeIdCode(codeId)
@@ -436,8 +437,10 @@ export class EczCodeGraph
             }
         );
 
-        debug(`updateLayout() - Nodes that participate in the layout (.layoutVisible):`,
-              this.cy.nodes('.layoutVisible').map( (n) => n.id() ));
+        // DEBUG
+        const nodeIdsInLayout = this.cy.nodes('.layoutVisible').map( (n) => n.id() );
+        debug(`updateLayout(): ${nodeIdsInLayout.length} nodes participate in the layout (.layoutVisible):`,
+              nodeIdsInLayout);
 
         let shouldApplyPrelayout = true;
         let shouldApplyCoseLayout = true;
@@ -817,6 +820,8 @@ export class EczCodeGraph
         // the stylesheet for the graph
         cytoscapeConfig.style = cyBaseStyleJson;
 
+        debug(`About to initialize cytoscape graph w/ ${nodes.length} nodes & ${edges.length} edges`);
+
         // create the cytoscape object
         this.cy = cytoscape(cytoscapeConfig);