Add vis.js rendering (the default one)

.prettierignore

@@ -0,0 +1,2 @@
+*.min.css
+*.min.js

package.json

@@ -32,7 +32,9 @@
     "@types/jest": "23.3.1",
     "@types/lodash": "4.14.116",
     "@types/node": "10.9.4",
+    "@types/pug": "2.0.4",
     "@types/sass-graph": "2.1.2",
+    "@types/vis": "4.21.7",
     "jest": "23.5.0",
     "npm-run-all": "4.1.3",
     "prettier": "1.14.2",
@@ -48,6 +50,7 @@
     "express": "4.16.3",
     "lodash": "4.17.10",
     "opn": "5.3.0",
+    "pug": "2.0.3",
     "sass-graph": "3.0.0",
     "viz.js": "2.0.0"
   }

src/index.ts

@@ -1,11 +1,11 @@
 import { flow } from "lodash";
 
 import { Path, generateGraphFromSassGraph } from "./generation/sass-graph";
-import { renderGraphToVizGraph } from "./rendering/viz";
+import { renderGraphToVisGraph } from "./rendering/vis";
 
 export function generateVisualGraph(pathToFolder: Path): void {
   flow(
     generateGraphFromSassGraph,
-    renderGraphToVizGraph,
+    renderGraphToVisGraph,
   )(pathToFolder);
 }

src/rendering/vis/index.ts

@@ -0,0 +1,29 @@
+import * as express from "express";
+// @ts-ignore (missing typings)
+import * as opn from "opn";
+
+import { Graph } from "../../graph";
+import { graphToVisGraph } from "./translator";
+
+export function renderGraphToVisGraph(graph: Graph): void {
+  const visGraph = graphToVisGraph(graph);
+
+  const app = express();
+  app.set("view engine", "pug");
+  app.set("views", `${__dirname}/views`);
+  app.use(express.static(`${__dirname}/assets`));
+
+  app.get("/", (_req, res) =>
+    res.render("index", {
+      nodes: JSON.stringify(visGraph.nodes),
+      edges: JSON.stringify(visGraph.edges),
+    }),
+  );
+  app.listen("3000");
+
+  // If `wait: true`, opn won't resolve until we quit the browser.
+  // => don't wait and exit the process after page is open.
+  opn("http://localhost:3000", { wait: false })
+    // Wait for the page to be open & resources to be loaded before we exit.
+    .then(() => setTimeout(() => process.exit(0), 2000));
+}

src/rendering/vis/translator.test.ts

@@ -0,0 +1,29 @@
+import { Graph } from "../../graph";
+import { graphToVisGraph } from "./translator";
+
+it("translate an empty graph", () => {
+  const graph = new Graph();
+
+  const visGraph = graphToVisGraph(graph);
+
+  const emptyVisGraph = { nodes: [], edges: [] };
+  expect(visGraph).toEqual(emptyVisGraph);
+});
+
+it("translate a graph with some vertices", () => {
+  const graph = new Graph();
+  graph.addVertice("main", "_header");
+  graph.addVertice("main", "_footer");
+
+  const visGraph = graphToVisGraph(graph);
+
+  const expectedVisGraph = {
+    nodes: [
+      { id: "main", label: "main" },
+      { id: "_header", label: "_header" },
+      { id: "_footer", label: "_footer" },
+    ],
+    edges: [{ from: "main", to: "_header" }, { from: "main", to: "_footer" }],
+  };
+  expect(visGraph).toEqual(expectedVisGraph);
+});

src/rendering/vis/translator.ts

@@ -0,0 +1,27 @@
+import { Node, Edge } from "vis";
+
+import { Graph } from "../../graph";
+
+type VisGraph = { nodes: Node[]; edges: Edge[] };
+
+export function graphToVisGraph(graph: Graph): VisGraph {
+  const nodes: Node[] = [];
+  const edges: Edge[] = [];
+
+  graph.vertices.forEach((vertice) => {
+    const [parent, child] = vertice.nodes;
+    const nodeIds = nodes.map(({ id }) => id);
+
+    if (!nodeIds.includes(parent)) {
+      nodes.push({ id: parent, label: parent });
+    }
+
+    if (!nodeIds.includes(child)) {
+      nodes.push({ id: child, label: child });
+    }
+
+    edges.push({ from: parent, to: child });
+  });
+
+  return { nodes, edges };
+}

src/rendering/vis/views/index.pug

@@ -0,0 +1,42 @@
+doctype html
+head
+  title Sass Graph Viz
+  style.
+    html, body {
+      height: 100%;
+      overflow: hidden;
+      margin: 0;
+      padding: 0;
+    }
+
+    #graph {
+      width: 100%;
+      height: 100%;
+    }
+
+  link(href='vis.4.21.0.min.css', rel='stylesheet', type='text/css')
+  script(src='vis.4.21.0.min.js')
+
+  script.
+    function renderVisGraph() {
+      var container = document.getElementById('graph');
+
+      var data = {
+        nodes: new vis.DataSet(JSON.parse('!{nodes}')),
+        edges: new vis.DataSet(JSON.parse('!{edges}'))
+      };
+
+      var options = {
+        autoResize: true,
+        height: '100%',
+        width: '100%',
+        edges: {
+          arrows: 'to'
+        }
+      };
+
+      var network = new vis.Network(container, data, options);
+    }
+
+  body(onload='renderVisGraph()')
+    div#graph

src/rendering/viz.ts → src/rendering/viz.js/index.ts

@@ -1,14 +1,13 @@
 import * as express from "express";
-// @ts-ignore
+// @ts-ignore (missing typings)
 import * as opn from "opn";
-// @ts-ignore
+// @ts-ignore (missing typings)
 import * as Viz from "viz.js";
-// @ts-ignore
+// @ts-ignore (missing typings)
 import { Module, render } from "viz.js/full.render";
 
-import { Graph } from "../graph";
-
-type VizGraph = string;
+import { Graph } from "../../graph";
+import { graphToVizGraph } from "./translator";
 
 export function renderGraphToVizGraph(graph: Graph): void {
   const app = express();
@@ -30,16 +29,3 @@ export function renderGraphToVizGraph(graph: Graph): void {
       console.log(vizGraph);
     });
 }
-
-export function graphToVizGraph(graph: Graph): VizGraph {
-  return Array.from(graph.vertices)
-    .map((vertice) => {
-      const [parent, child] = vertice.nodes.map(escapeUnsupportedCharacter);
-      return `${parent} -> ${child}`;
-    })
-    .join("\n");
-}
-
-function escapeUnsupportedCharacter(s: string): string {
-  return s.match(/[-\/]/g) ? `"${s}"` : s;
-}

src/rendering/viz.test.ts → src/rendering/viz.js/translator.test.ts

@@ -1,5 +1,5 @@
-import { Graph } from "../graph";
-import { graphToVizGraph } from "./viz";
+import { Graph } from "../../graph";
+import { graphToVizGraph } from "./translator";
 
 it("compute an empty graph", () => {
   const graph = new Graph();

src/rendering/viz.js/translator.ts

@@ -0,0 +1,16 @@
+import { Graph } from "../../graph";
+
+type VizGraph = string;
+
+export function graphToVizGraph(graph: Graph): VizGraph {
+  return Array.from(graph.vertices)
+    .map((vertice) => {
+      const [parent, child] = vertice.nodes.map(escapeUnsupportedCharacter);
+      return `${parent} -> ${child}`;
+    })
+    .join("\n");
+}
+
+function escapeUnsupportedCharacter(s: string): string {
+  return s.match(/[-\/]/g) ? `"${s}"` : s;
+}

tsconfig.json

@@ -3,6 +3,7 @@
     "outDir": "dist",
     "target": "es2015",
     "module": "commonjs",
+    "lib": ["es2017", "dom"],
     "sourceMap": true,
     "declaration": true,
     "removeComments": true,