cascade looks nice

whyboris · whyboris · commit 2d4c9e5df34d · 2020-06-25T23:49:06.000-04:00
diff --git a/bin/index.js b/bin/index.js
@@ -51,6 +51,8 @@ function startServer(allFunctions, functionMap) {
     app.use('/graphviz', express.static(path.join(__dirname, '..', 'graphing/graphviz')));
     app.use('/mermaid', express.static(path.join(__dirname, '..', 'graphing/mermaid')));
     app.use('/vendor', express.static(path.join(__dirname, '..', 'graphing/vendor')));
+    // API endpoints
+    app.use('/all', function (req, res) { res.json(allFunctions); });
     app.get('/arcAPI', function (req, res) { res.json(arc_1.convertForArc(allFunctions, functionMap)); });
     app.get('/cascadeAPI/:startFunc', function (req, res) {
         res.json(cascade_1.convertForCascade(functionMap, req.params.startFunc));
diff --git a/graphing/cascade/graph.js b/graphing/cascade/graph.js
@@ -17,14 +17,14 @@ export default function define(runtime, observer) {
     });
 
 
-  main.variable(observer()).define(["html"], function(html) {
-    return (
-      html`<div class="heading">Call Graph</div>`
-    )
-  });
+  // main.variable(observer()).define(["html"], function(html) {
+  //   return (
+  //     html`<div class="heading">Call Graph</div>`
+  //   )
+  // });
 
   main.variable(observer()).define(["svg", "width", "data", "color"], function (svg, width, data, color) {
-    return svg`<svg width="${width}" height="${data.layout.height}">
+    return svg`<svg width="${width - 200}" height="${data.layout.height}">
 
       <style>
         text {
diff --git a/graphing/cascade/index.html b/graphing/cascade/index.html
@@ -14,24 +14,61 @@
     }
 
     a {
+      color: black;
       display: block;
-      margin: 10px;
       font-family: sans-serif;
       font-size: 12px;
+      margin: 10px;
+      text-decoration: none;
+    }
+
+    #functionsList {
+      position: absolute;
+      background: white;
+      border-right: 1px solid black;
+    }
+
+    #graphDiv {
+      margin-left: 200px;
     }
   </style>
 </head>
 
 <body>
 
-  <div id="graph" style="text-align: center;"></div>
+  <div id="functionsList"></div>
+
+  <div id="graphDiv"></div>
+
+  <script>
+
+    fetch('http://localhost:3000/all')
+      .then((response) => {
+        return response.json();
+      })
+      .then((data) => {
+
+        data.sort();
+
+        const everyFunc = data.map(function (func) {
+              return '<a href="index.html?start=' + func + '">' + func + '</a>';
+            }).join('');
+
+        document.getElementById('functionsList').innerHTML = everyFunc;
+
+      });
+
+  </script>
 
   <script type="module">
     import define from "./graph.js";
     import { Runtime, Library, Inspector } from "/vendor/runtime.js";
 
     const runtime = new Runtime();
-    const main = runtime.module(define, Inspector.into(document.body));
+
+    const temp = document.getElementById('graphDiv');
+
+    const main = runtime.module(define, Inspector.into(temp));
 
     // Save to SVG & PNG
     setTimeout(() => {
@@ -58,15 +95,15 @@
         a.download = "callgraph.png";
         a.href = pngBase64;
         a.innerHTML = "download as PNG";
-        document.body.appendChild(a);
+        temp.appendChild(a);
 
         const svgBase64 = "data:image/svg+xml;base64," + btoa(svgData);
 
         const b = document.createElement("a");
         b.download = "callgraph.svg";
         b.href = svgBase64;
         b.innerHTML = "download as SVG";
-        document.body.appendChild(b);
+        temp.appendChild(b);
 
       };
 
diff --git a/index.ts b/index.ts
@@ -67,6 +67,9 @@ function startServer(allFunctions: string[], functionMap: Map<string, string[]>)
   app.use('/mermaid',  express.static(path.join(__dirname, '..', 'graphing/mermaid')));
   app.use('/vendor',   express.static(path.join(__dirname, '..', 'graphing/vendor')));
 
+  // API endpoints
+  app.use('/all',         function (req, res) { res.json(allFunctions) });
+
   app.get('/arcAPI',      function (req, res) { res.json(convertForArc(allFunctions, functionMap)) });
 
   app.get('/cascadeAPI/:startFunc',  function (req, res) {
