@hpcc-js/wasm-graphviz 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +20 -0
- package/dist/index.js +4 -0
- package/dist/index.js.map +7 -0
- package/package.json +57 -0
- package/src/graphviz.ts +372 -0
- package/src/index.ts +1 -0
- package/types/graphviz.d.ts +215 -0
- package/types/index.d.ts +1 -0
package/package.json
ADDED
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@hpcc-js/wasm-graphviz",
|
|
3
|
+
"version": "1.0.0",
|
|
4
|
+
"description": "hpcc-js - WASM Graphviz",
|
|
5
|
+
"type": "module",
|
|
6
|
+
"exports": {
|
|
7
|
+
".": {
|
|
8
|
+
"types": "./types/index.d.ts",
|
|
9
|
+
"import": "./dist/index.js"
|
|
10
|
+
}
|
|
11
|
+
},
|
|
12
|
+
"types": "./types/index.d.ts",
|
|
13
|
+
"files": [
|
|
14
|
+
"dist/**/*",
|
|
15
|
+
"src/**/*",
|
|
16
|
+
"types/**/*"
|
|
17
|
+
],
|
|
18
|
+
"scripts": {
|
|
19
|
+
"clean": "rimraf ./dist ./dist-test ./types",
|
|
20
|
+
"build-types": "tsc --project tsconfig.json --emitDeclarationOnly",
|
|
21
|
+
"build-types-watch": "npm run build-types -- --watch",
|
|
22
|
+
"build-ts": "node esbuild.mjs",
|
|
23
|
+
"build-ts-dev": "npm run build-ts -- --mode=development",
|
|
24
|
+
"build-ts-watch": "npm run compile-ts-dev -- --watch",
|
|
25
|
+
"build-dev": "run-p build-types build-ts-dev",
|
|
26
|
+
"build": "run-p build-types build-ts",
|
|
27
|
+
"lint-skypack": "npx -y @skypack/package-check",
|
|
28
|
+
"lint-eslint": "eslint src/**/*.ts",
|
|
29
|
+
"lint": "run-p lint-eslint lint-skypack",
|
|
30
|
+
"test-chrome": "karma start --single-run --browsers ChromiumHeadless karma.conf.cjs",
|
|
31
|
+
"test-firefox": "karma start --single-run --browsers Firefox karma.conf.cjs",
|
|
32
|
+
"test-node": "mocha ./dist-test/index.node.js --reporter spec",
|
|
33
|
+
"test": "run-s test-chrome test-node"
|
|
34
|
+
},
|
|
35
|
+
"dependencies": {
|
|
36
|
+
"yargs": "17.7.2"
|
|
37
|
+
},
|
|
38
|
+
"devDependencies": {
|
|
39
|
+
"@hpcc-js/esbuild-plugins": "1.0.0"
|
|
40
|
+
},
|
|
41
|
+
"keywords": [
|
|
42
|
+
"graphviz",
|
|
43
|
+
"typescript",
|
|
44
|
+
"webassembly",
|
|
45
|
+
"wasm",
|
|
46
|
+
"dot",
|
|
47
|
+
"neato",
|
|
48
|
+
"twopi"
|
|
49
|
+
],
|
|
50
|
+
"author": "hpcc-systems",
|
|
51
|
+
"repository": {
|
|
52
|
+
"type": "git",
|
|
53
|
+
"url": "git+https://github.com/hpcc-systems/hpcc-js-wasm.git"
|
|
54
|
+
},
|
|
55
|
+
"homepage": "https://hpcc-systems.github.io/hpcc-js-wasm/",
|
|
56
|
+
"license": "Apache-2.0"
|
|
57
|
+
}
|
package/src/graphviz.ts
ADDED
|
@@ -0,0 +1,372 @@
|
|
|
1
|
+
// @ts-expect-error importing from a wasm file is resolved via a custom esbuild plugin
|
|
2
|
+
import load, { reset } from "../../../build/src-cpp/graphviz/graphvizlib.wasm";
|
|
3
|
+
|
|
4
|
+
/**
|
|
5
|
+
* Various graphic and data formats for end user, web, documents and other applications. See [Output Formats](https://graphviz.gitlab.io/docs/outputs/) for more information.
|
|
6
|
+
*/
|
|
7
|
+
export type Format = "svg" | "dot" | "json" | "dot_json" | "xdot_json" | "plain" | "plain-ext";
|
|
8
|
+
|
|
9
|
+
/**
|
|
10
|
+
* Various algorithms for projecting abstract graphs into a space for visualization. See [Layout Engines](https://graphviz.gitlab.io/docs/layouts/) for more details.
|
|
11
|
+
*/
|
|
12
|
+
export type Engine = "circo" | "dot" | "fdp" | "sfdp" | "neato" | "osage" | "patchwork" | "twopi" | "nop" | "nop2";
|
|
13
|
+
|
|
14
|
+
/**
|
|
15
|
+
* Example: Passing a web hosted Image to GraphViz:
|
|
16
|
+
* ```ts
|
|
17
|
+
* import { Graphviz } from "@hpcc-js/wasm/graphviz";
|
|
18
|
+
*
|
|
19
|
+
* const graphviz = await Graphviz.load();
|
|
20
|
+
* const svg = graphviz.layout('digraph { a[image="https://.../image.png"]; }', "svg", "dot", {
|
|
21
|
+
* images: [{
|
|
22
|
+
* path: "https://.../image.png",
|
|
23
|
+
* width: "272px",
|
|
24
|
+
* height: "92px"
|
|
25
|
+
* }]
|
|
26
|
+
* });
|
|
27
|
+
* document.getElementById("placeholder").innerHTML = svg;
|
|
28
|
+
* ```
|
|
29
|
+
*/
|
|
30
|
+
export interface Image {
|
|
31
|
+
/**
|
|
32
|
+
* Full URL to image
|
|
33
|
+
*/
|
|
34
|
+
path: string;
|
|
35
|
+
width: string;
|
|
36
|
+
height: string;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
export interface File {
|
|
40
|
+
path: string;
|
|
41
|
+
data: string;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
export interface Options {
|
|
45
|
+
images?: Image[];
|
|
46
|
+
files?: File[];
|
|
47
|
+
yInvert?: boolean;
|
|
48
|
+
nop?: number;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
function imageToFile(image: Image): File {
|
|
52
|
+
return {
|
|
53
|
+
path: image.path,
|
|
54
|
+
data: `<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
|
55
|
+
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
|
56
|
+
<svg width="${image.width}" height="${image.height}"></svg>`
|
|
57
|
+
};
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
function imagesToFiles(images: Image[]) {
|
|
61
|
+
return images.map(imageToFile);
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
function createFiles(graphviz: any, _options?: Options) {
|
|
65
|
+
const options = {
|
|
66
|
+
images: [],
|
|
67
|
+
files: [],
|
|
68
|
+
..._options
|
|
69
|
+
};
|
|
70
|
+
[...options.files, ...imagesToFiles(options.images)].forEach(file => graphviz.createFile(file.path, file.data));
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
/**
|
|
74
|
+
* The Graphviz layout algorithms take descriptions of graphs in a simple text language, and make diagrams in useful formats, such as images and SVG for web pages or display in an interactive graph browser.
|
|
75
|
+
*
|
|
76
|
+
* Graphviz has many useful features for concrete diagrams, such as options for colors, fonts, tabular node layouts, line styles, hyperlinks, and custom shapes.
|
|
77
|
+
*
|
|
78
|
+
* See [graphviz.org](https://graphviz.org/) for more details.
|
|
79
|
+
*
|
|
80
|
+
* ```ts
|
|
81
|
+
* import { Graphviz } from "@hpcc-js/wasm/graphviz";
|
|
82
|
+
*
|
|
83
|
+
* const graphviz = await Graphviz.load();
|
|
84
|
+
*
|
|
85
|
+
* const dot = "digraph G { Hello -> World }";
|
|
86
|
+
* const svg = graphviz.dot(dot);
|
|
87
|
+
* ```
|
|
88
|
+
*
|
|
89
|
+
* ### Online Demos
|
|
90
|
+
* * https://raw.githack.com/hpcc-systems/hpcc-js-wasm/trunk/index.html
|
|
91
|
+
* * https://observablehq.com/@gordonsmith/graphviz
|
|
92
|
+
*/
|
|
93
|
+
export class Graphviz {
|
|
94
|
+
|
|
95
|
+
private constructor(protected _module: any) {
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
/**
|
|
99
|
+
* Compiles and instantiates the raw wasm.
|
|
100
|
+
*
|
|
101
|
+
* ::: info
|
|
102
|
+
* In general WebAssembly compilation is disallowed on the main thread if the buffer size is larger than 4KB, hence forcing `load` to be asynchronous;
|
|
103
|
+
* :::
|
|
104
|
+
*
|
|
105
|
+
* @returns A promise to an instance of the Graphviz class.
|
|
106
|
+
*/
|
|
107
|
+
static load(): Promise<Graphviz> {
|
|
108
|
+
return load().then((module: any) => {
|
|
109
|
+
return new Graphviz(module);
|
|
110
|
+
});
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
/**
|
|
114
|
+
* Unloades the compiled wasm instance.
|
|
115
|
+
*/
|
|
116
|
+
static unload() {
|
|
117
|
+
reset();
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
/**
|
|
121
|
+
* @returns The Graphviz c++ version
|
|
122
|
+
*/
|
|
123
|
+
version(): string {
|
|
124
|
+
return this._module.Graphviz.prototype.version();
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
/**
|
|
128
|
+
* Performs layout for the supplied _dotSource_, see [The DOT Language](https://graphviz.gitlab.io/doc/info/lang.html) for specification.
|
|
129
|
+
*
|
|
130
|
+
* @param dotSource Required - graph definition in [DOT](https://graphviz.gitlab.io/doc/info/lang.html) language
|
|
131
|
+
* @param outputFormat The format of the result.
|
|
132
|
+
* @param layoutEngine The type of layout to perform.
|
|
133
|
+
* @param options Advanced Options for images, files, yInvert and nop.
|
|
134
|
+
* @returns A string containing the calculated layout in the format specified by `outputFormat`
|
|
135
|
+
*/
|
|
136
|
+
layout(dotSource: string, outputFormat: Format = "svg", layoutEngine: Engine = "dot", options?: Options): string {
|
|
137
|
+
if (!dotSource) return "";
|
|
138
|
+
const graphViz = new this._module.Graphviz(options?.yInvert ? 1 : 0, options?.nop ? options?.nop : 0);
|
|
139
|
+
let retVal = "";
|
|
140
|
+
let errorMsg = "";
|
|
141
|
+
try {
|
|
142
|
+
createFiles(graphViz, options);
|
|
143
|
+
try {
|
|
144
|
+
retVal = graphViz.layout(dotSource, outputFormat, layoutEngine);
|
|
145
|
+
} catch (e: any) {
|
|
146
|
+
errorMsg = e.message;
|
|
147
|
+
};
|
|
148
|
+
errorMsg = graphViz.lastError() || errorMsg;
|
|
149
|
+
} finally {
|
|
150
|
+
this._module.destroy(graphViz);
|
|
151
|
+
}
|
|
152
|
+
if (!retVal && errorMsg) {
|
|
153
|
+
Graphviz.unload();
|
|
154
|
+
throw new Error(errorMsg);
|
|
155
|
+
}
|
|
156
|
+
return retVal;
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
/**
|
|
160
|
+
* acyclic is a filter that takes a directed graph as input and outputs a copy of the graph with sufficient edges reversed to make the graph acyclic. The reversed edge inherits all of the attributes of the original edge. The optional file argument specifies where the input graph is stored; by default.
|
|
161
|
+
*
|
|
162
|
+
* @param dotSource Required - graph definition in [DOT](https://graphviz.gitlab.io/doc/info/lang.html) language
|
|
163
|
+
* @param doWrite Enable output is produced, though the return value will indicate whether the graph is acyclic or not.
|
|
164
|
+
* @param verbose Print information about whether the file is acyclic, has a cycle or is undirected.
|
|
165
|
+
* @returns `{ acyclic: boolean, num_rev: number, outFile: string }` `acyclic` will be true if a cycle was found, `num_rev` will contain the number of reversed edges and `outFile` will (optionally) contain the output.
|
|
166
|
+
*/
|
|
167
|
+
acyclic(dotSource: string, doWrite: boolean = false, verbose: boolean = false): { acyclic: boolean, num_rev: number, outFile: string } {
|
|
168
|
+
if (!dotSource) return { acyclic: false, num_rev: 0, outFile: "" };
|
|
169
|
+
const graphViz = new this._module.Graphviz();
|
|
170
|
+
let acyclic: boolean = false;
|
|
171
|
+
let num_rev: number = 0;
|
|
172
|
+
let outFile: string = "";
|
|
173
|
+
let errorMsg = "";
|
|
174
|
+
try {
|
|
175
|
+
try {
|
|
176
|
+
acyclic = graphViz.acyclic(dotSource, doWrite, verbose);
|
|
177
|
+
num_rev = graphViz.acyclic_num_rev;
|
|
178
|
+
outFile = graphViz.acyclic_outFile;
|
|
179
|
+
} catch (e: any) {
|
|
180
|
+
errorMsg = e.message;
|
|
181
|
+
};
|
|
182
|
+
errorMsg = graphViz.lastError() || errorMsg;
|
|
183
|
+
} finally {
|
|
184
|
+
this._module.destroy(graphViz);
|
|
185
|
+
}
|
|
186
|
+
if (errorMsg) {
|
|
187
|
+
Graphviz.unload();
|
|
188
|
+
throw new Error(errorMsg);
|
|
189
|
+
}
|
|
190
|
+
return { acyclic, num_rev, outFile };
|
|
191
|
+
}
|
|
192
|
+
|
|
193
|
+
/**
|
|
194
|
+
* tred computes the transitive reduction of directed graphs, and prints the resulting graphs to standard output. This removes edges implied by transitivity. Nodes and subgraphs are not otherwise affected. The ‘‘meaning’’ and validity of the reduced graphs is application dependent. tred is particularly useful as a preprocessor to dot to reduce clutter in dense layouts. Undirected graphs are silently ignored.
|
|
195
|
+
*
|
|
196
|
+
* @param dotSource Required - graph definition in [DOT](https://graphviz.gitlab.io/doc/info/lang.html) language
|
|
197
|
+
* @param verbose Print additional information.
|
|
198
|
+
* @param printRemovedEdges Print information about removed edges.
|
|
199
|
+
* @returns `{ out: string, err: string }`.
|
|
200
|
+
*/
|
|
201
|
+
tred(dotSource: string, verbose: boolean = false, printRemovedEdges: boolean = false): { out: string, err: string } {
|
|
202
|
+
if (!dotSource) return { out: "", err: "" };
|
|
203
|
+
const graphViz = new this._module.Graphviz();
|
|
204
|
+
let out: string = "";
|
|
205
|
+
let err: string = "";
|
|
206
|
+
let errorMsg = "";
|
|
207
|
+
try {
|
|
208
|
+
try {
|
|
209
|
+
graphViz.tred(dotSource, verbose, printRemovedEdges);
|
|
210
|
+
out = graphViz.tred_out;
|
|
211
|
+
err = graphViz.tred_err;
|
|
212
|
+
} catch (e: any) {
|
|
213
|
+
errorMsg = e.message;
|
|
214
|
+
};
|
|
215
|
+
errorMsg = graphViz.lastError() || errorMsg;
|
|
216
|
+
} finally {
|
|
217
|
+
this._module.destroy(graphViz);
|
|
218
|
+
}
|
|
219
|
+
if (!out && errorMsg) {
|
|
220
|
+
Graphviz.unload();
|
|
221
|
+
throw new Error(errorMsg);
|
|
222
|
+
}
|
|
223
|
+
return { out, err };
|
|
224
|
+
}
|
|
225
|
+
|
|
226
|
+
/**
|
|
227
|
+
* unflatten is a preprocessor to dot that is used to improve the aspect ratio of graphs having many leaves or disconnected nodes. The usual layout for such a graph is generally very wide or tall. unflatten inserts invisible edges or adjusts the minlen on edges to improve layout compaction.
|
|
228
|
+
*
|
|
229
|
+
* @param dotSource Required - graph definition in [DOT](https://graphviz.gitlab.io/doc/info/lang.html) language
|
|
230
|
+
* @param maxMinlen The minimum length of leaf edges is staggered between 1 and len (a small integer).
|
|
231
|
+
* @param do_fans Enables the staggering of the -maxMinlen option to fanout nodes whose indegree and outdegree are both 1. This helps with structures such as a -> \{w x y \} -> b. This option only works if the -maxMinlen flag is set.
|
|
232
|
+
* @param chainLimit Form disconnected nodes into chains of up to len nodes.
|
|
233
|
+
* @returns A string containing the "unflattened" dotSource.
|
|
234
|
+
*/
|
|
235
|
+
unflatten(dotSource: string, maxMinlen: number = 0, do_fans: boolean = false, chainLimit: number = 0): string {
|
|
236
|
+
if (!dotSource) return "";
|
|
237
|
+
const graphViz = new this._module.Graphviz();
|
|
238
|
+
let retVal = "";
|
|
239
|
+
let errorMsg = "";
|
|
240
|
+
try {
|
|
241
|
+
try {
|
|
242
|
+
retVal = graphViz.unflatten(dotSource, maxMinlen, do_fans, chainLimit);
|
|
243
|
+
} catch (e: any) {
|
|
244
|
+
errorMsg = e.message;
|
|
245
|
+
};
|
|
246
|
+
errorMsg = graphViz.lastError() || errorMsg;
|
|
247
|
+
} finally {
|
|
248
|
+
this._module.destroy(graphViz);
|
|
249
|
+
}
|
|
250
|
+
if (!retVal && errorMsg) {
|
|
251
|
+
Graphviz.unload();
|
|
252
|
+
throw new Error(errorMsg);
|
|
253
|
+
}
|
|
254
|
+
return retVal;
|
|
255
|
+
}
|
|
256
|
+
|
|
257
|
+
/**
|
|
258
|
+
* Convenience function that performs the **circo** layout, is equivalent to `layout(dotSource, outputFormat, "circo");`.
|
|
259
|
+
*
|
|
260
|
+
* @param dotSource Required - graph definition in [DOT](https://graphviz.gitlab.io/doc/info/lang.html) language
|
|
261
|
+
* @param outputFormat The format of the result.
|
|
262
|
+
* @param options Advanced Options for images, files, yInvert and nop.
|
|
263
|
+
* @returns A string containing the calculated layout in the format specified by `outputFormat`
|
|
264
|
+
*/
|
|
265
|
+
circo(dotSource: string, outputFormat: Format = "svg", options?: Options): string {
|
|
266
|
+
return this.layout(dotSource, outputFormat, "circo", options);
|
|
267
|
+
}
|
|
268
|
+
|
|
269
|
+
/**
|
|
270
|
+
* Convenience function that performs the **dot** layout, is equivalent to `layout(dotSource, outputFormat, "dot");`.
|
|
271
|
+
*
|
|
272
|
+
* @param dotSource Required - graph definition in [DOT](https://graphviz.gitlab.io/doc/info/lang.html) language
|
|
273
|
+
* @param outputFormat The format of the result.
|
|
274
|
+
* @param options Advanced Options for images, files, yInvert and nop.
|
|
275
|
+
* @returns A string containing the calculated layout in the format specified by `outputFormat`
|
|
276
|
+
*/
|
|
277
|
+
dot(dotSource: string, outputFormat: Format = "svg", options?: Options): string {
|
|
278
|
+
return this.layout(dotSource, outputFormat, "dot", options);
|
|
279
|
+
}
|
|
280
|
+
|
|
281
|
+
/**
|
|
282
|
+
* Convenience function that performs the **fdp** layout, is equivalent to `layout(dotSource, outputFormat, "fdp");`.
|
|
283
|
+
*
|
|
284
|
+
* @param dotSource Required - graph definition in [DOT](https://graphviz.gitlab.io/doc/info/lang.html) language
|
|
285
|
+
* @param outputFormat The format of the result.
|
|
286
|
+
* @param options Advanced Options for images, files, yInvert and nop.
|
|
287
|
+
* @returns A string containing the calculated layout in the format specified by `outputFormat`
|
|
288
|
+
*/
|
|
289
|
+
fdp(dotSource: string, outputFormat: Format = "svg", options?: Options): string {
|
|
290
|
+
return this.layout(dotSource, outputFormat, "fdp", options);
|
|
291
|
+
}
|
|
292
|
+
|
|
293
|
+
/**
|
|
294
|
+
* Convenience function that performs the **sfdp** layout, is equivalent to `layout(dotSource, outputFormat, "sfdp");`.
|
|
295
|
+
*
|
|
296
|
+
* @param dotSource Required - graph definition in [DOT](https://graphviz.gitlab.io/doc/info/lang.html) language
|
|
297
|
+
* @param outputFormat The format of the result.
|
|
298
|
+
* @param options Advanced Options for images, files, yInvert and nop.
|
|
299
|
+
* @returns A string containing the calculated layout in the format specified by `outputFormat`
|
|
300
|
+
*/
|
|
301
|
+
sfdp(dotSource: string, outputFormat: Format = "svg", options?: Options): string {
|
|
302
|
+
return this.layout(dotSource, outputFormat, "sfdp", options);
|
|
303
|
+
}
|
|
304
|
+
|
|
305
|
+
/**
|
|
306
|
+
* Convenience function that performs the **neato** layout, is equivalent to `layout(dotSource, outputFormat, "neato");`.
|
|
307
|
+
*
|
|
308
|
+
* @param dotSource Required - graph definition in [DOT](https://graphviz.gitlab.io/doc/info/lang.html) language
|
|
309
|
+
* @param outputFormat The format of the result.
|
|
310
|
+
* @param options Advanced Options for images, files, yInvert and nop.
|
|
311
|
+
* @returns A string containing the calculated layout in the format specified by `outputFormat`
|
|
312
|
+
*/
|
|
313
|
+
neato(dotSource: string, outputFormat: Format = "svg", options?: Options): string {
|
|
314
|
+
return this.layout(dotSource, outputFormat, "neato", options);
|
|
315
|
+
}
|
|
316
|
+
|
|
317
|
+
/**
|
|
318
|
+
* Convenience function that performs the **osage** layout, is equivalent to `layout(dotSource, outputFormat, "osage");`.
|
|
319
|
+
*
|
|
320
|
+
* @param dotSource Required - graph definition in [DOT](https://graphviz.gitlab.io/doc/info/lang.html) language
|
|
321
|
+
* @param outputFormat The format of the result.
|
|
322
|
+
* @param options Advanced Options for images, files, yInvert and nop.
|
|
323
|
+
* @returns A string containing the calculated layout in the format specified by `outputFormat`
|
|
324
|
+
*/
|
|
325
|
+
osage(dotSource: string, outputFormat: Format = "svg", options?: Options): string {
|
|
326
|
+
return this.layout(dotSource, outputFormat, "osage", options);
|
|
327
|
+
}
|
|
328
|
+
|
|
329
|
+
/**
|
|
330
|
+
* Convenience function that performs the **patchwork** layout, is equivalent to `layout(dotSource, outputFormat, "patchwork");`.
|
|
331
|
+
*
|
|
332
|
+
* @param dotSource Required - graph definition in [DOT](https://graphviz.gitlab.io/doc/info/lang.html) language
|
|
333
|
+
* @param outputFormat The format of the result.
|
|
334
|
+
* @param options Advanced Options for images, files, yInvert and nop.
|
|
335
|
+
* @returns A string containing the calculated layout in the format specified by `outputFormat`
|
|
336
|
+
*/
|
|
337
|
+
patchwork(dotSource: string, outputFormat: Format = "svg", options?: Options): string {
|
|
338
|
+
return this.layout(dotSource, outputFormat, "patchwork", options);
|
|
339
|
+
}
|
|
340
|
+
|
|
341
|
+
/**
|
|
342
|
+
* Convenience function that performs the **twopi** layout, is equivalent to `layout(dotSource, outputFormat, "twopi");`.
|
|
343
|
+
*
|
|
344
|
+
* @param dotSource Required - graph definition in [DOT](https://graphviz.gitlab.io/doc/info/lang.html) language
|
|
345
|
+
* @param outputFormat The format of the result.
|
|
346
|
+
* @param options Advanced Options for images, files, yInvert and nop.
|
|
347
|
+
* @returns A string containing the calculated layout in the format specified by `outputFormat`
|
|
348
|
+
*/
|
|
349
|
+
twopi(dotSource: string, outputFormat: Format = "svg", options?: Options): string {
|
|
350
|
+
return this.layout(dotSource, outputFormat, "twopi", options);
|
|
351
|
+
}
|
|
352
|
+
|
|
353
|
+
/**
|
|
354
|
+
* Convenience function that performs the **nop** layout, is equivalent to `layout(dotSource, "dot", "nop");`.
|
|
355
|
+
*
|
|
356
|
+
* @param dotSource Required - graph definition in [DOT](https://graphviz.gitlab.io/doc/info/lang.html) language
|
|
357
|
+
* @returns A string containing the "pretty printed" dotSource.
|
|
358
|
+
*/
|
|
359
|
+
nop(dotSource: string): string {
|
|
360
|
+
return this.layout(dotSource, "dot", "nop");
|
|
361
|
+
}
|
|
362
|
+
|
|
363
|
+
/**
|
|
364
|
+
* Convenience function that performs the **nop2** layout, is equivalent to `layout(dotSource, "dot", "nop2");`.
|
|
365
|
+
*
|
|
366
|
+
* @param dotSource Required - graph definition in [DOT](https://graphviz.gitlab.io/doc/info/lang.html) language
|
|
367
|
+
* @returns A string containing the "pretty printed" dotSource.
|
|
368
|
+
*/
|
|
369
|
+
nop2(dotSource: string): string {
|
|
370
|
+
return this.layout(dotSource, "dot", "nop2");
|
|
371
|
+
}
|
|
372
|
+
}
|
package/src/index.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from "./graphviz.ts";
|
|
@@ -0,0 +1,215 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Various graphic and data formats for end user, web, documents and other applications. See [Output Formats](https://graphviz.gitlab.io/docs/outputs/) for more information.
|
|
3
|
+
*/
|
|
4
|
+
export type Format = "svg" | "dot" | "json" | "dot_json" | "xdot_json" | "plain" | "plain-ext";
|
|
5
|
+
/**
|
|
6
|
+
* Various algorithms for projecting abstract graphs into a space for visualization. See [Layout Engines](https://graphviz.gitlab.io/docs/layouts/) for more details.
|
|
7
|
+
*/
|
|
8
|
+
export type Engine = "circo" | "dot" | "fdp" | "sfdp" | "neato" | "osage" | "patchwork" | "twopi" | "nop" | "nop2";
|
|
9
|
+
/**
|
|
10
|
+
* Example: Passing a web hosted Image to GraphViz:
|
|
11
|
+
* ```ts
|
|
12
|
+
* import { Graphviz } from "@hpcc-js/wasm/graphviz";
|
|
13
|
+
*
|
|
14
|
+
* const graphviz = await Graphviz.load();
|
|
15
|
+
* const svg = graphviz.layout('digraph { a[image="https://.../image.png"]; }', "svg", "dot", {
|
|
16
|
+
* images: [{
|
|
17
|
+
* path: "https://.../image.png",
|
|
18
|
+
* width: "272px",
|
|
19
|
+
* height: "92px"
|
|
20
|
+
* }]
|
|
21
|
+
* });
|
|
22
|
+
* document.getElementById("placeholder").innerHTML = svg;
|
|
23
|
+
* ```
|
|
24
|
+
*/
|
|
25
|
+
export interface Image {
|
|
26
|
+
/**
|
|
27
|
+
* Full URL to image
|
|
28
|
+
*/
|
|
29
|
+
path: string;
|
|
30
|
+
width: string;
|
|
31
|
+
height: string;
|
|
32
|
+
}
|
|
33
|
+
export interface File {
|
|
34
|
+
path: string;
|
|
35
|
+
data: string;
|
|
36
|
+
}
|
|
37
|
+
export interface Options {
|
|
38
|
+
images?: Image[];
|
|
39
|
+
files?: File[];
|
|
40
|
+
yInvert?: boolean;
|
|
41
|
+
nop?: number;
|
|
42
|
+
}
|
|
43
|
+
/**
|
|
44
|
+
* The Graphviz layout algorithms take descriptions of graphs in a simple text language, and make diagrams in useful formats, such as images and SVG for web pages or display in an interactive graph browser.
|
|
45
|
+
*
|
|
46
|
+
* Graphviz has many useful features for concrete diagrams, such as options for colors, fonts, tabular node layouts, line styles, hyperlinks, and custom shapes.
|
|
47
|
+
*
|
|
48
|
+
* See [graphviz.org](https://graphviz.org/) for more details.
|
|
49
|
+
*
|
|
50
|
+
* ```ts
|
|
51
|
+
* import { Graphviz } from "@hpcc-js/wasm/graphviz";
|
|
52
|
+
*
|
|
53
|
+
* const graphviz = await Graphviz.load();
|
|
54
|
+
*
|
|
55
|
+
* const dot = "digraph G { Hello -> World }";
|
|
56
|
+
* const svg = graphviz.dot(dot);
|
|
57
|
+
* ```
|
|
58
|
+
*
|
|
59
|
+
* ### Online Demos
|
|
60
|
+
* * https://raw.githack.com/hpcc-systems/hpcc-js-wasm/trunk/index.html
|
|
61
|
+
* * https://observablehq.com/@gordonsmith/graphviz
|
|
62
|
+
*/
|
|
63
|
+
export declare class Graphviz {
|
|
64
|
+
protected _module: any;
|
|
65
|
+
private constructor();
|
|
66
|
+
/**
|
|
67
|
+
* Compiles and instantiates the raw wasm.
|
|
68
|
+
*
|
|
69
|
+
* ::: info
|
|
70
|
+
* In general WebAssembly compilation is disallowed on the main thread if the buffer size is larger than 4KB, hence forcing `load` to be asynchronous;
|
|
71
|
+
* :::
|
|
72
|
+
*
|
|
73
|
+
* @returns A promise to an instance of the Graphviz class.
|
|
74
|
+
*/
|
|
75
|
+
static load(): Promise<Graphviz>;
|
|
76
|
+
/**
|
|
77
|
+
* Unloades the compiled wasm instance.
|
|
78
|
+
*/
|
|
79
|
+
static unload(): void;
|
|
80
|
+
/**
|
|
81
|
+
* @returns The Graphviz c++ version
|
|
82
|
+
*/
|
|
83
|
+
version(): string;
|
|
84
|
+
/**
|
|
85
|
+
* Performs layout for the supplied _dotSource_, see [The DOT Language](https://graphviz.gitlab.io/doc/info/lang.html) for specification.
|
|
86
|
+
*
|
|
87
|
+
* @param dotSource Required - graph definition in [DOT](https://graphviz.gitlab.io/doc/info/lang.html) language
|
|
88
|
+
* @param outputFormat The format of the result.
|
|
89
|
+
* @param layoutEngine The type of layout to perform.
|
|
90
|
+
* @param options Advanced Options for images, files, yInvert and nop.
|
|
91
|
+
* @returns A string containing the calculated layout in the format specified by `outputFormat`
|
|
92
|
+
*/
|
|
93
|
+
layout(dotSource: string, outputFormat?: Format, layoutEngine?: Engine, options?: Options): string;
|
|
94
|
+
/**
|
|
95
|
+
* acyclic is a filter that takes a directed graph as input and outputs a copy of the graph with sufficient edges reversed to make the graph acyclic. The reversed edge inherits all of the attributes of the original edge. The optional file argument specifies where the input graph is stored; by default.
|
|
96
|
+
*
|
|
97
|
+
* @param dotSource Required - graph definition in [DOT](https://graphviz.gitlab.io/doc/info/lang.html) language
|
|
98
|
+
* @param doWrite Enable output is produced, though the return value will indicate whether the graph is acyclic or not.
|
|
99
|
+
* @param verbose Print information about whether the file is acyclic, has a cycle or is undirected.
|
|
100
|
+
* @returns `{ acyclic: boolean, num_rev: number, outFile: string }` `acyclic` will be true if a cycle was found, `num_rev` will contain the number of reversed edges and `outFile` will (optionally) contain the output.
|
|
101
|
+
*/
|
|
102
|
+
acyclic(dotSource: string, doWrite?: boolean, verbose?: boolean): {
|
|
103
|
+
acyclic: boolean;
|
|
104
|
+
num_rev: number;
|
|
105
|
+
outFile: string;
|
|
106
|
+
};
|
|
107
|
+
/**
|
|
108
|
+
* tred computes the transitive reduction of directed graphs, and prints the resulting graphs to standard output. This removes edges implied by transitivity. Nodes and subgraphs are not otherwise affected. The ‘‘meaning’’ and validity of the reduced graphs is application dependent. tred is particularly useful as a preprocessor to dot to reduce clutter in dense layouts. Undirected graphs are silently ignored.
|
|
109
|
+
*
|
|
110
|
+
* @param dotSource Required - graph definition in [DOT](https://graphviz.gitlab.io/doc/info/lang.html) language
|
|
111
|
+
* @param verbose Print additional information.
|
|
112
|
+
* @param printRemovedEdges Print information about removed edges.
|
|
113
|
+
* @returns `{ out: string, err: string }`.
|
|
114
|
+
*/
|
|
115
|
+
tred(dotSource: string, verbose?: boolean, printRemovedEdges?: boolean): {
|
|
116
|
+
out: string;
|
|
117
|
+
err: string;
|
|
118
|
+
};
|
|
119
|
+
/**
|
|
120
|
+
* unflatten is a preprocessor to dot that is used to improve the aspect ratio of graphs having many leaves or disconnected nodes. The usual layout for such a graph is generally very wide or tall. unflatten inserts invisible edges or adjusts the minlen on edges to improve layout compaction.
|
|
121
|
+
*
|
|
122
|
+
* @param dotSource Required - graph definition in [DOT](https://graphviz.gitlab.io/doc/info/lang.html) language
|
|
123
|
+
* @param maxMinlen The minimum length of leaf edges is staggered between 1 and len (a small integer).
|
|
124
|
+
* @param do_fans Enables the staggering of the -maxMinlen option to fanout nodes whose indegree and outdegree are both 1. This helps with structures such as a -> \{w x y \} -> b. This option only works if the -maxMinlen flag is set.
|
|
125
|
+
* @param chainLimit Form disconnected nodes into chains of up to len nodes.
|
|
126
|
+
* @returns A string containing the "unflattened" dotSource.
|
|
127
|
+
*/
|
|
128
|
+
unflatten(dotSource: string, maxMinlen?: number, do_fans?: boolean, chainLimit?: number): string;
|
|
129
|
+
/**
|
|
130
|
+
* Convenience function that performs the **circo** layout, is equivalent to `layout(dotSource, outputFormat, "circo");`.
|
|
131
|
+
*
|
|
132
|
+
* @param dotSource Required - graph definition in [DOT](https://graphviz.gitlab.io/doc/info/lang.html) language
|
|
133
|
+
* @param outputFormat The format of the result.
|
|
134
|
+
* @param options Advanced Options for images, files, yInvert and nop.
|
|
135
|
+
* @returns A string containing the calculated layout in the format specified by `outputFormat`
|
|
136
|
+
*/
|
|
137
|
+
circo(dotSource: string, outputFormat?: Format, options?: Options): string;
|
|
138
|
+
/**
|
|
139
|
+
* Convenience function that performs the **dot** layout, is equivalent to `layout(dotSource, outputFormat, "dot");`.
|
|
140
|
+
*
|
|
141
|
+
* @param dotSource Required - graph definition in [DOT](https://graphviz.gitlab.io/doc/info/lang.html) language
|
|
142
|
+
* @param outputFormat The format of the result.
|
|
143
|
+
* @param options Advanced Options for images, files, yInvert and nop.
|
|
144
|
+
* @returns A string containing the calculated layout in the format specified by `outputFormat`
|
|
145
|
+
*/
|
|
146
|
+
dot(dotSource: string, outputFormat?: Format, options?: Options): string;
|
|
147
|
+
/**
|
|
148
|
+
* Convenience function that performs the **fdp** layout, is equivalent to `layout(dotSource, outputFormat, "fdp");`.
|
|
149
|
+
*
|
|
150
|
+
* @param dotSource Required - graph definition in [DOT](https://graphviz.gitlab.io/doc/info/lang.html) language
|
|
151
|
+
* @param outputFormat The format of the result.
|
|
152
|
+
* @param options Advanced Options for images, files, yInvert and nop.
|
|
153
|
+
* @returns A string containing the calculated layout in the format specified by `outputFormat`
|
|
154
|
+
*/
|
|
155
|
+
fdp(dotSource: string, outputFormat?: Format, options?: Options): string;
|
|
156
|
+
/**
|
|
157
|
+
* Convenience function that performs the **sfdp** layout, is equivalent to `layout(dotSource, outputFormat, "sfdp");`.
|
|
158
|
+
*
|
|
159
|
+
* @param dotSource Required - graph definition in [DOT](https://graphviz.gitlab.io/doc/info/lang.html) language
|
|
160
|
+
* @param outputFormat The format of the result.
|
|
161
|
+
* @param options Advanced Options for images, files, yInvert and nop.
|
|
162
|
+
* @returns A string containing the calculated layout in the format specified by `outputFormat`
|
|
163
|
+
*/
|
|
164
|
+
sfdp(dotSource: string, outputFormat?: Format, options?: Options): string;
|
|
165
|
+
/**
|
|
166
|
+
* Convenience function that performs the **neato** layout, is equivalent to `layout(dotSource, outputFormat, "neato");`.
|
|
167
|
+
*
|
|
168
|
+
* @param dotSource Required - graph definition in [DOT](https://graphviz.gitlab.io/doc/info/lang.html) language
|
|
169
|
+
* @param outputFormat The format of the result.
|
|
170
|
+
* @param options Advanced Options for images, files, yInvert and nop.
|
|
171
|
+
* @returns A string containing the calculated layout in the format specified by `outputFormat`
|
|
172
|
+
*/
|
|
173
|
+
neato(dotSource: string, outputFormat?: Format, options?: Options): string;
|
|
174
|
+
/**
|
|
175
|
+
* Convenience function that performs the **osage** layout, is equivalent to `layout(dotSource, outputFormat, "osage");`.
|
|
176
|
+
*
|
|
177
|
+
* @param dotSource Required - graph definition in [DOT](https://graphviz.gitlab.io/doc/info/lang.html) language
|
|
178
|
+
* @param outputFormat The format of the result.
|
|
179
|
+
* @param options Advanced Options for images, files, yInvert and nop.
|
|
180
|
+
* @returns A string containing the calculated layout in the format specified by `outputFormat`
|
|
181
|
+
*/
|
|
182
|
+
osage(dotSource: string, outputFormat?: Format, options?: Options): string;
|
|
183
|
+
/**
|
|
184
|
+
* Convenience function that performs the **patchwork** layout, is equivalent to `layout(dotSource, outputFormat, "patchwork");`.
|
|
185
|
+
*
|
|
186
|
+
* @param dotSource Required - graph definition in [DOT](https://graphviz.gitlab.io/doc/info/lang.html) language
|
|
187
|
+
* @param outputFormat The format of the result.
|
|
188
|
+
* @param options Advanced Options for images, files, yInvert and nop.
|
|
189
|
+
* @returns A string containing the calculated layout in the format specified by `outputFormat`
|
|
190
|
+
*/
|
|
191
|
+
patchwork(dotSource: string, outputFormat?: Format, options?: Options): string;
|
|
192
|
+
/**
|
|
193
|
+
* Convenience function that performs the **twopi** layout, is equivalent to `layout(dotSource, outputFormat, "twopi");`.
|
|
194
|
+
*
|
|
195
|
+
* @param dotSource Required - graph definition in [DOT](https://graphviz.gitlab.io/doc/info/lang.html) language
|
|
196
|
+
* @param outputFormat The format of the result.
|
|
197
|
+
* @param options Advanced Options for images, files, yInvert and nop.
|
|
198
|
+
* @returns A string containing the calculated layout in the format specified by `outputFormat`
|
|
199
|
+
*/
|
|
200
|
+
twopi(dotSource: string, outputFormat?: Format, options?: Options): string;
|
|
201
|
+
/**
|
|
202
|
+
* Convenience function that performs the **nop** layout, is equivalent to `layout(dotSource, "dot", "nop");`.
|
|
203
|
+
*
|
|
204
|
+
* @param dotSource Required - graph definition in [DOT](https://graphviz.gitlab.io/doc/info/lang.html) language
|
|
205
|
+
* @returns A string containing the "pretty printed" dotSource.
|
|
206
|
+
*/
|
|
207
|
+
nop(dotSource: string): string;
|
|
208
|
+
/**
|
|
209
|
+
* Convenience function that performs the **nop2** layout, is equivalent to `layout(dotSource, "dot", "nop2");`.
|
|
210
|
+
*
|
|
211
|
+
* @param dotSource Required - graph definition in [DOT](https://graphviz.gitlab.io/doc/info/lang.html) language
|
|
212
|
+
* @returns A string containing the "pretty printed" dotSource.
|
|
213
|
+
*/
|
|
214
|
+
nop2(dotSource: string): string;
|
|
215
|
+
}
|
package/types/index.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from "./graphviz.ts";
|