Add support for the interactive visualizer

[saulshanabrook]

This PR adds the ability to try the new interactive visualizer in the web editor. I still kept the original graphviz visualizer as default, while this while let you switch between them:

new.mov

The new visualizer includes the following features compared to the existing editor:

• Hopefully, better performance when laying out and rendering many nodes
• The ability to focus on a single sub-graph, by clicking on a node and filtering to its descendants
• highlights the connected components to an edge/node on click (could add an on-hover option as well)
• incremental layout based on the existing positions, which the layout engine will take into account
• preserving colors of nodes across multiple consecutive renders, so they will stay consistent
• better edge routing and layout performed by eclipse layout kernel
• design closer to the examples at the egg homepage, courtesy of react flow and tailwind css

Moreover, it can serve as a base to build future interactive features that would be helpful.

[saulshanabrook]

I have updated this PR to support transitioning between multiple e-graphs, the last thing I wanted to add before calling the visualizer good for now!

Untitled2.mov

If anyone could try this locally and make sure it works, then we can get this in. Thanks!

[yihozhang]

This looks awesome!! Thank you for making the visualizer better!

[yihozhang]

This PR seems to make some unintended style changes to the entire web demo (font, font size, alignments, button styles, etc).

Before:

After:

[saulshanabrook]

Yes, it does! I thought they mainly were fine, except it's just not great when the buttons wrap. That's based on your screen size and the addition of the extra toggle.

I think the changes are from using tailwindcss to style the visualizer and it pulls in some "pre-flight" styles:

Built on top of modern-normalize, Preflight is a set of base styles for Tailwind projects that are designed to smooth over cross-browser inconsistencies and make it easier for you to work within the constraints of your design system.

[yihozhang]

@saulshanabrook I see! Thanks for the explanation. Some differences I noticed

1. Font size increases a bit in general
2. The font weight used in the code editor is lighter
3. Spacing between lines in the code editor is wider
4. The buttons and dropdown menus are less recognizable (e.g., no background, no border)
5. The button wraps at the end (although this goes away if I further zoom out).

1 and 2 seem fine, I'm not sure about 3 (the original spacing looks slightly more natural), and I think we should fix 4 and 5. What do you think?

[saulshanabrook]

Thanks @yihozhang!

I published a new version that limited the preflight styles to just my component (using this) and I think it fixed it?

For reference I had to purge the JS cache of these two URLs after publishing to load the new one:

https://cdn.jsdelivr.net/npm/egraph-visualizer@2/dist/style.css
https://cdn.jsdelivr.net/npm/egraph-visualizer@2/+esm

[yihozhang]

Yes, thank you!! @saulshanabrook