Skip to content
This repository was archived by the owner on Mar 17, 2024. It is now read-only.

Commit 0d7b4ea

Browse files
kamiazyakamiazya
committed
fix Graphviz component api
1 parent 418894e commit 0d7b4ea

File tree

4 files changed

+178
-159
lines changed

4 files changed

+178
-159
lines changed

‎src/stories/animations.stories.tsx‎

Lines changed: 12 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -31,14 +31,17 @@ export const CircoAnime: FC = () => {
3131
};
3232
}, [nodes, i, setNodes, setI]);
3333
return (
34-
<Graphviz engine="circo">
35-
<Digraph>
36-
{nodes.map((n, j) => (
37-
<Node id={n} key={n} shape={shapes[j % shapes.length]} />
38-
))}
39-
<Edge targets={nodes} />
40-
<Edge targets={[`n${i - 1}`, 'n0']} />
41-
</Digraph>
42-
</Graphviz>
34+
<Graphviz
35+
engine="circo"
36+
dot={
37+
<Digraph>
38+
{nodes.map((n, j) => (
39+
<Node id={n} key={n} shape={shapes[j % shapes.length]} />
40+
))}
41+
<Edge targets={nodes} />
42+
<Edge targets={[`n${i - 1}`, 'n0']} />
43+
</Digraph>
44+
}
45+
/>
4346
);
4447
};

‎src/stories/components.stories.tsx‎

Lines changed: 113 additions & 107 deletions
Original file line numberDiff line numberDiff line change
@@ -11,123 +11,129 @@ export const RootGraph: FC = () => {
1111
const Root = root === 'digraph' ? Digraph : Graph;
1212
const rankdir = select('rankdir', ['TB', 'BT', 'RL', 'LR'], 'TB');
1313
return (
14-
<Graphviz>
15-
<Root rankdir={rankdir}>
16-
<Node id="n1" />
17-
<Node id="n2" />
18-
<Node id="n3" />
19-
<Edge targets={['n1', 'n2', 'n3']} />
20-
<Edge targets={['n1', 'n3']} />
21-
</Root>
22-
</Graphviz>
14+
<Graphviz
15+
dot={
16+
<Root rankdir={rankdir}>
17+
<Node id="n1" />
18+
<Node id="n2" />
19+
<Node id="n3" />
20+
<Edge targets={['n1', 'n2', 'n3']} />
21+
<Edge targets={['n1', 'n3']} />
22+
</Root>
23+
}
24+
/>
2325
);
2426
};
2527

2628
export const NodeSample: FC = () => {
2729
return (
28-
<Graphviz>
29-
<Digraph>
30-
<Node
31-
id="n"
32-
label={text('label', 'label')}
33-
xlabel={text('xlabel', '')}
34-
color={text('color', 'black')}
35-
fillcolor={text('fillcolor', 'yellow')}
36-
style={text('style', 'filled')}
37-
shape={select(
38-
'shape',
39-
[
30+
<Graphviz
31+
dot={
32+
<Digraph>
33+
<Node
34+
id="n"
35+
label={text('label', 'label')}
36+
xlabel={text('xlabel', '')}
37+
color={text('color', 'black')}
38+
fillcolor={text('fillcolor', 'yellow')}
39+
style={text('style', 'filled')}
40+
shape={select(
41+
'shape',
42+
[
43+
'box',
44+
'assembly',
45+
'box3d',
46+
'cds',
47+
'circle',
48+
'component',
49+
'cylinder',
50+
'diamond',
51+
'doublecircle',
52+
'doubleoctagon',
53+
'egg',
54+
'ellipse',
55+
'fivepoverhang',
56+
'folder',
57+
'hexagon',
58+
'house',
59+
'insulator',
60+
'invhouse',
61+
'invtrapezium',
62+
'invtriangle',
63+
'larrow',
64+
'lpromoter',
65+
'Mcircle',
66+
'Mdiamond',
67+
'Msquare',
68+
'none',
69+
'note',
70+
'noverhang',
71+
'octagon',
72+
'oval',
73+
'parallelogram',
74+
'pentagon',
75+
'plain',
76+
'plaintext',
77+
'point',
78+
'polygon',
79+
'primersite',
80+
'promoter',
81+
'proteasesite',
82+
'proteinstab',
83+
'rarrow',
84+
'rect',
85+
'rectangle',
86+
'restrictionsite',
87+
'ribosite',
88+
'rnastab',
89+
'rpromoter',
90+
'septagon',
91+
'signature',
92+
'square',
93+
'star',
94+
'tab',
95+
'terminator',
96+
'threepoverhang',
97+
'trapezium',
98+
'triangle',
99+
'tripleoctagon',
100+
'underline',
101+
'utr',
102+
],
40103
'box',
41-
'assembly',
42-
'box3d',
43-
'cds',
44-
'circle',
45-
'component',
46-
'cylinder',
47-
'diamond',
48-
'doublecircle',
49-
'doubleoctagon',
50-
'egg',
51-
'ellipse',
52-
'fivepoverhang',
53-
'folder',
54-
'hexagon',
55-
'house',
56-
'insulator',
57-
'invhouse',
58-
'invtrapezium',
59-
'invtriangle',
60-
'larrow',
61-
'lpromoter',
62-
'Mcircle',
63-
'Mdiamond',
64-
'Msquare',
65-
'none',
66-
'note',
67-
'noverhang',
68-
'octagon',
69-
'oval',
70-
'parallelogram',
71-
'pentagon',
72-
'plain',
73-
'plaintext',
74-
'point',
75-
'polygon',
76-
'primersite',
77-
'promoter',
78-
'proteasesite',
79-
'proteinstab',
80-
'rarrow',
81-
'rect',
82-
'rectangle',
83-
'restrictionsite',
84-
'ribosite',
85-
'rnastab',
86-
'rpromoter',
87-
'septagon',
88-
'signature',
89-
'square',
90-
'star',
91-
'tab',
92-
'terminator',
93-
'threepoverhang',
94-
'trapezium',
95-
'triangle',
96-
'tripleoctagon',
97-
'underline',
98-
'utr',
99-
],
100-
'box',
101-
)}
102-
/>
103-
</Digraph>
104-
</Graphviz>
104+
)}
105+
/>
106+
</Digraph>
107+
}
108+
/>
105109
);
106110
};
107111

108112
export const EdgeSample: FC = () => {
109113
return (
110-
<Graphviz>
111-
<Digraph>
112-
<Node id="n1" />
113-
<Node id="n2" />
114-
<Edge
115-
targets={['n1', 'n2']}
116-
label={text('label', 'label')}
117-
dir={select('dir', ['forward', 'back', 'both'], 'forward')}
118-
arrowhead={select(
119-
'arrowhead',
120-
['box', 'crow', 'curve', 'icurve', 'diamond', 'dot', 'inv', 'none', 'normal', 'tee', 'vee'],
121-
'normal',
122-
)}
123-
arrowtail={select(
124-
'arrowtail',
125-
['box', 'crow', 'curve', 'icurve', 'diamond', 'dot', 'inv', 'none', 'normal', 'tee', 'vee'],
126-
'normal',
127-
)}
128-
arrowsize={number('arrowsize', 1, { min: 0, step: 0.1 })}
129-
/>
130-
</Digraph>
131-
</Graphviz>
114+
<Graphviz
115+
dot={
116+
<Digraph>
117+
<Node id="n1" />
118+
<Node id="n2" />
119+
<Edge
120+
targets={['n1', 'n2']}
121+
label={text('label', 'label')}
122+
dir={select('dir', ['forward', 'back', 'both'], 'forward')}
123+
arrowhead={select(
124+
'arrowhead',
125+
['box', 'crow', 'curve', 'icurve', 'diamond', 'dot', 'inv', 'none', 'normal', 'tee', 'vee'],
126+
'normal',
127+
)}
128+
arrowtail={select(
129+
'arrowtail',
130+
['box', 'crow', 'curve', 'icurve', 'diamond', 'dot', 'inv', 'none', 'normal', 'tee', 'vee'],
131+
'normal',
132+
)}
133+
arrowsize={number('arrowsize', 1, { min: 0, step: 0.1 })}
134+
/>
135+
</Digraph>
136+
}
137+
/>
132138
);
133139
};

‎src/stories/index.stories.tsx‎

Lines changed: 49 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -8,47 +8,57 @@ export default { title: 'Graphviz', decorators: [withKnobs] };
88
export const Simple: FC = () => {
99
const engine = select('engine', ['circo', 'dot', 'fdp', 'neato', 'osage', 'patchwork', 'twopi'], 'dot');
1010
return (
11-
<Graphviz engine={engine}>
12-
<Digraph>
13-
<Node id="n1" />
14-
<Node id="n2" />
15-
<Node id="n3" />
16-
<Edge targets={['n1', 'n2', 'n3']} />
17-
<Edge targets={['n1', 'n3']} />
18-
</Digraph>
19-
</Graphviz>
11+
<Graphviz
12+
engine={engine}
13+
dot={
14+
<Digraph>
15+
<Node id="n1" />
16+
<Node id="n2" />
17+
<Node id="n3" />
18+
<Edge targets={['n1', 'n2', 'n3']} />
19+
<Edge targets={['n1', 'n3']} />
20+
</Digraph>
21+
}
22+
/>
2023
);
2124
};
2225

26+
export const RenderDotString: FC = () => {
27+
const dot = 'digraph { a -> b -> c; a->c; }';
28+
return <Graphviz dot={dot} />;
29+
};
30+
2331
export const FullExample: FC = () => (
24-
<Graphviz>
25-
<Digraph
26-
rankdir="TB"
27-
edge={{
28-
color: 'blue',
29-
fontcolor: 'blue',
30-
}}
31-
node={{
32-
shape: 'none',
33-
}}
34-
>
35-
<Node
36-
id="nodeA"
37-
shape="none"
38-
label={
39-
<DOT.TABLE BORDER="0" CELLBORDER="1" CELLSPACING="0">
40-
<DOT.TR>
41-
<DOT.TD>left</DOT.TD>
42-
<DOT.TD PORT="m">middle</DOT.TD>
43-
<DOT.TD PORT="r">right</DOT.TD>
44-
</DOT.TR>
45-
</DOT.TABLE>
46-
}
47-
/>
48-
<Subgraph id="cluster" label="Cluster" labeljust="l">
49-
<Node id="nodeB" label="This is label for nodeB." />
50-
</Subgraph>
51-
<Edge targets={['nodeB', 'nodeA:m']} comment="Edge from node A to B" label={<DOT.B>A to B</DOT.B>} />
52-
</Digraph>
53-
</Graphviz>
32+
<Graphviz
33+
dot={
34+
<Digraph
35+
rankdir="TB"
36+
edge={{
37+
color: 'blue',
38+
fontcolor: 'blue',
39+
}}
40+
node={{
41+
shape: 'none',
42+
}}
43+
>
44+
<Node
45+
id="nodeA"
46+
shape="none"
47+
label={
48+
<DOT.TABLE BORDER="0" CELLBORDER="1" CELLSPACING="0">
49+
<DOT.TR>
50+
<DOT.TD>left</DOT.TD>
51+
<DOT.TD PORT="m">middle</DOT.TD>
52+
<DOT.TD PORT="r">right</DOT.TD>
53+
</DOT.TR>
54+
</DOT.TABLE>
55+
}
56+
/>
57+
<Subgraph id="cluster" label="Cluster" labeljust="l">
58+
<Node id="nodeB" label="This is label for nodeB." />
59+
</Subgraph>
60+
<Edge targets={['nodeB', 'nodeA:m']} comment="Edge from node A to B" label={<DOT.B>A to B</DOT.B>} />
61+
</Digraph>
62+
}
63+
/>
5464
);

‎src/web/components/Graphviz.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,15 +5,15 @@ import { renderToDot } from '../../renderer/render';
55
import { useRendered, Engine, Image, File } from '../hooks/rendered';
66

77
type Props = {
8-
children: ReactElement;
8+
dot: ReactElement | string;
99
engine?: Engine;
1010
images?: Image[];
1111
files?: File[];
1212
};
1313

14-
export const Graphviz: FC<Props> = ({ children, engine, images, files }) => {
15-
const dot = useMemo(() => renderToDot(children), [children]);
16-
const rendered = useRendered(dot, engine, 'svg', { images, files });
14+
export const Graphviz: FC<Props> = ({ dot, engine, images, files }) => {
15+
const dotString = useMemo(() => (typeof dot === 'string' ? dot : renderToDot(dot)), [dot]);
16+
const rendered = useRendered(dotString, engine, 'svg', { images, files });
1717
const svg = useMemo((): { __html: string } | undefined => {
1818
if (rendered) {
1919
return {

0 commit comments

Comments
 (0)