EGraph Visualizer

Interactive visualizer for e-graphs in the serialized JSON format using Cytoscape JS and Eclipse Layout Kernel.

Development

First install Yarn, then run:

yarn install
yarn run [build|start|lint]

Packaging

Currently, this visualizer is packaged as an AnyWidget JS ESM file with all dependencies included. On every Git tag, a new verison is bundled and published as a Github release.

It is also published as an NPM package, which can be imported and used in the browser like this:

<div id="egraph-visualizer"></div>
<script type="module">
  import { mount } from "https://cdn.skypack.dev/egraph-visualizer";
  const egraph = {
    nodes: {
      "//": {
        op: "/",
        children: ["*", "2"],
        eclass: "top",
      },
      "**": {
        op: "*",
        eclass: "top",
        children: ["a", "/"],
      },
      "*": {
        op: "*",
        eclass: "middle",
        children: ["a", "2"],
      },
      "<<": {
        op: "<<",
        eclass: "middle",
        children: ["a", "1"],
      },
      a: {
        op: "a",
        eclass: "top",
      },
      2: {
        op: "2",
        eclass: "bottom",
      },
      1: {
        op: "1",
        eclass: "right",
      },
      "/": {
        op: "/",
        eclass: "right",
        children: ["2", "2"],
      },
    },
  };
  const mounted = mount(document.getElementById("egraph-visualizer"));
  mounted.render(JSON.stringify(egraph));
  // later can call mounted.unmount() to remove the visualizer
</script>

There is also a demo site published on Github Pages, which allows you to upload and edit a serialized e-graph and see the visualization.