refactor web module

Author: kamiazya

src/web/Graphviz.tsx

@@ -1,13 +1,25 @@
 import React, { FC, useState, useEffect } from 'react';
 import { Graphviz } from './Graphviz';
-import { Digraph } from '../components/Digraph';
-import { Node } from '../components/Node';
-import { Edge } from '../components/Edge';
-import { Subgraph } from '../components/Subgraph';
-import { DOT } from '../components/HtmlLike';
+import { Digraph } from '../../components/Digraph';
+import { Node } from '../../components/Node';
+import { Edge } from '../../components/Edge';
+import { Subgraph } from '../../components/Subgraph';
+import { DOT } from '../../components/HtmlLike';
 
 export default { title: 'Graphviz' };
 
+export const Small: FC = () => (
+  <Graphviz>
+    <Digraph>
+      <Node id="n1" />
+      <Node id="n2" />
+      <Node id="n3" />
+      <Edge targets={['n1', 'n2', 'n3']} />
+      <Edge targets={['n1', 'n3']} />
+    </Digraph>
+  </Graphviz>
+);
+
 export const Example: FC = () => (
   <Graphviz>
     <Digraph

src/web/Graphviz.stories.tsx src/web/components/Graphviz.stories.tsxsrc/web/Graphviz.stories.tsx renamed to src/web/components/Graphviz.stories.tsx

@@ -0,0 +1,31 @@
+/* eslint-disable react/no-danger */
+/* eslint-disable react/prop-types */
+import React, { FC, ReactElement, useMemo } from 'react';
+import { renderToDot } from '../../renderer/render';
+import { useRendered, Engine, Image, File } from '../hooks/rendered';
+
+type Props = {
+  children: ReactElement;
+  engine?: Engine;
+  images?: Image[];
+  files?: File[];
+};
+
+export const Graphviz: FC<Props> = ({ children, engine, images, files }) => {
+  const dot = useMemo(() => renderToDot(children), [children]);
+  const rendered = useRendered(dot, engine, 'svg', { images, files });
+  const svg = useMemo((): { __html: string } | undefined => {
+    if (rendered) {
+      return {
+        __html: rendered,
+      };
+    }
+    return undefined;
+  }, [rendered]);
+  return <div dangerouslySetInnerHTML={svg} />;
+};
+
+Graphviz.defaultProps = {
+  images: [],
+  files: [],
+};

src/web/components/Graphviz.tsx

@@ -0,0 +1,34 @@
+import { useState, useEffect } from 'react';
+import { graphviz } from '@hpcc-js/wasm';
+
+export type Format = 'svg' | 'dot' | 'json' | 'dot_json' | 'xdot_json';
+
+export type Engine = 'circo' | 'dot' | 'fdp' | 'neato' | 'osage' | 'patchwork' | 'twopi';
+export type Image = {
+  path: string;
+  width: string;
+  height: string;
+};
+export type File = {
+  path: string;
+  data: string;
+};
+
+export const useRendered = (
+  dot: string,
+  engine?: Engine,
+  format?: Format,
+  ext?: {
+    images?: Image[];
+    files?: File[];
+  },
+): string | undefined => {
+  const [rendered, setRendered] = useState<string>();
+  useEffect(() => {
+    (async (): Promise<void> => {
+      const result = await graphviz.layout(dot, format, engine, ext);
+      setRendered(result);
+    })();
+  }, [dot, engine, format, ext, setRendered]);
+  return rendered;
+};

src/web/hooks/rendered.ts

@@ -0,0 +1,2 @@
+export * from './hooks/rendered';
+export * from './components/Graphviz';