[UI] Add ability to view query plans directly in the UI

[onthebridgetonowhere]

Add support for viewing the graph in the browser.

Which issue does this PR close?

Closes #275 .

Rationale for this change

Explained in the issue linked above.

What changes are included in this PR?

Adds the possibility of viewing the diagram generated from the DOT file

Are there any user-facing changes?

Yes, another button is added in the UI's scheduler actions list

[andygrove]

Thanks @onthebridgetonowhere! I will take a look this weekend and see if I can help.

[andygrove]

@onthebridgetonowhere Maybe this helps?

https://www.anycodings.com/1questions/3439897/getting-error-thisnode-is-null-using-react

I will try this out too later today

[andygrove]

I tried this:

  var graphDiv = useRef<HTMLDivElement | null>(null);

  useEffect(() => {
    if (isOpen) {
      dot();
      if (graphDiv.current != null) {
        d3.graphviz(graphDiv.current).renderDot(dot_data);
      }
    }
  }, [graphDiv.current]);

  return (
    <>
      <Button onClick={onOpen}>View Graph</Button>
      <Modal isOpen={isOpen} onClose={onClose}>
        <ModalOverlay />
        <ModalContent>
          <ModalHeader>Graph for {props.value} job</ModalHeader>
          <ModalCloseButton />
          <ModalBody>
            <div ref={node => graphDiv.current = node}></div>
          </ModalBody>
          <ModalFooter>
            <Button colorScheme="blue" mr={3} onClick={onClose}>
              Close
            </Button>
          </ModalFooter>
        </ModalContent>
      </Modal>
    </>
  );

This seemed to get farther but then failed with a wasm validation error - failed to match magic number.

[onthebridgetonowhere]

I made it work! 🎆 I found the wasm error to be hard to grasp and hard to find understandable solutions. I went a different route by having a new backend API and rendering the SVG by reusing a React component.

There are a few tradeoffs though, which we need to consider:

• a new API that creates an SVG from the DOT string
• the new API requires a new crate, the graphviz-rust crate
• a new React dependency that allows us to easily render the SVG (react-inlinesvg)
• the backend does the conversion; I do not know of the performance of the graphviz-rust crate. I suggest we experiment with it, and optimize later if needed.

@andygrove let me know what you think, and thanks for your previous help.

[andygrove]

This is fantastic! I just tested this out locally. Thanks @onthebridgetonowhere