Skip to content

#164 Use Vizdom instead of D3 for DOT graph rendering #178

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
jimbethancourt merged 2 commits into from
Jun 7, 2026
Merged

#164 Use Vizdom instead of D3 for DOT graph rendering #178

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f1ac2f8
#164 Use Vizdom instead of D3 for DOT graph rendering
jimbethancourt Jun 7, 2026
9f39bcb
#175 Handle `<` and `>` characters correctly in HTML report
jimbethancourt Jun 7, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 9 additions & 3 deletions refactor-first-maven-plugin/src/main/java/org/hjug/mavenreport/RefactorFirstMavenReport.java
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -101,10 +101,8 @@ private void printHead(Sink mainSink) {
renderJsDeclaration(mainSink, "https://cdnjs.cloudflare.com/ajax/libs/sigma.js/2.4.0/sigma.min.js");
renderJsDeclaration(mainSink, "https://cdnjs.cloudflare.com/ajax/libs/graphology/0.25.4/graphology.umd.min.js");

// may only need graphlib-dot
renderJsDeclaration(mainSink, "https://cdnjs.cloudflare.com/ajax/libs/graphlib/2.1.8/graphlib.min.js");
renderJsDeclaration(mainSink, "https://cdn.jsdelivr.net/npm/graphlib-dot@0.6.4/dist/graphlib-dot.min.js");
renderJsDeclaration(mainSink, "https://cdn.jsdelivr.net/npm/3d-force-graph");
renderModuleDeclaration(mainSink, "https://cdn.jsdelivr.net/npm/@vizdom/vizdom-ts-web@0.1.19/vizdom_ts.min.js");

mainSink.head_();
}
Expand All @@ -120,6 +118,14 @@ private void renderJsDeclaration(Sink mainSink, String scriptUrl) {
mainSink.unknown("script", new Object[] {HtmlMarkup.TAG_TYPE_END}, null);
}

private void renderModuleDeclaration(Sink mainSink, String scriptUrl) {
SinkEventAttributeSet githubButtonJS = new SinkEventAttributeSet();
githubButtonJS.addAttribute(SinkEventAttributes.TYPE, "module");
githubButtonJS.addAttribute(SinkEventAttributes.SRC, scriptUrl);
mainSink.unknown("script", new Object[] {HtmlMarkup.TAG_TYPE_START}, githubButtonJS);
mainSink.unknown("script", new Object[] {HtmlMarkup.TAG_TYPE_END}, null);
}

private void renderStyle(Sink mainSink) {
SinkEventAttributeSet githubButtonJS = new SinkEventAttributeSet();
githubButtonJS.addAttribute(SinkEventAttributes.SRC, HtmlReport.POPUP_STYLE);
Expand Down
45 changes: 19 additions & 26 deletions report/src/main/java/org/hjug/refactorfirst/report/HtmlReport.java
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
@Slf4j
public class HtmlReport extends SimpleHtmlReport {

int d3Threshold = 700;
int dotGraphThreshold = 4000;

// use Files.readString(Path.of(file))
// Created by generative AI and modified slightly
Expand Down Expand Up @@ -279,10 +279,9 @@ public class HtmlReport extends SimpleHtmlReport {
+ " </script>";

// Created by generative AI and modified
public static final String POPUP_STYLE = "<style>\n" + " /* Popup container */\n"
public static final String POPUP_STYLE = "<style>\n"
+ " main {\n" + " max-width: 100vw;/*3840px;*/\n"
+ " width: 100vw; /* or 100vw for viewport width */\n"
+ " /*background-color: lightblue; *//* just for visibility */\n"
+ " padding: 0px 0px; /* 0px top & bottom, 40px left & right */\n"
+ " }\n"
+ "\n"
Expand All @@ -301,6 +300,7 @@ public class HtmlReport extends SimpleHtmlReport {
+ " width: 100%;\n"
+ " height: 100%;\n"
+ " }"
+ " /* Popup container */\n"
+ " .popup {\n"
+ " position: fixed;\n"
+ " display: none;\n"
Expand Down Expand Up @@ -388,24 +388,14 @@ public String printHead() {
"<script async defer src=\"https://buttons.github.io/buttons.js\"></script>\n"
// google chart import
+ "<script type=\"text/javascript\" src=\"https://www.gstatic.com/charts/loader.js\"></script>\n"
// d3 dot graph imports
// + "<script src=\"https://d3js.org/d3.v5.min.js\"></script>\n"
// + "<script
// src=\"https://cdnjs.cloudflare.com/ajax/libs/d3-graphviz/3.0.5/d3-graphviz.min.js\"></script>\n"
// + "<script
// src=\"https://unpkg.com/@hpcc-js/wasm@0.3.11/dist/index.min.js\"></script>\n"

// + "<script
// src=\"https://cdn.jsdelivr.net/npm/@hpcc-js/wasm-graphviz@1.7.0/dist/index.min.js\"></script>\n"
// graphing imports - sigma, graphology, vizdom
+ "<script src=\"https://cdn.jsdelivr.net/npm/svg-pan-zoom@3.6.1/dist/svg-pan-zoom.min.js\"></script>"

// sigma graph imports - sigma, graphology, graphlib, and graphlib-dot
+ "<script src=\"https://cdnjs.cloudflare.com/ajax/libs/sigma.js/2.4.0/sigma.min.js\"></script>\n"
+ "<script src=\"https://cdnjs.cloudflare.com/ajax/libs/graphology/0.25.4/graphology.umd.min.js\"></script>\n"
// may only need graphlib-dot
+ "<script src=\"https://cdnjs.cloudflare.com/ajax/libs/graphlib/2.1.8/graphlib.min.js\"></script>\n"
+ "<script src=\"https://cdn.jsdelivr.net/npm/graphlib-dot@0.6.4/dist/graphlib-dot.min.js\"></script>\n"
+ "<script src=\"https://cdn.jsdelivr.net/npm/3d-force-graph\"></script>\n"
+ "<script type=\"module\" src=\"https://cdn.jsdelivr.net/npm/@vizdom/vizdom-ts-web@0.1.19/vizdom_ts.min.js\"></script>\n"
// Make the output look decent. Don't use in RefactorFirstMavenReport.
+ "<link rel=\"stylesheet\" href=\"https://unpkg.com/mvp.css\">\n";
}

Expand Down Expand Up @@ -489,7 +479,7 @@ public String renderClassGraphVisuals() {
int relationshipCount = classGraph.edgeSet().size();
stringBuilder.append("<div align=\"center\">Number of classes: " + classCount + " Number of relationships: "
+ relationshipCount + "<br></div>");
if (classCount + relationshipCount < d3Threshold) {
if (classCount + relationshipCount < dotGraphThreshold) {
stringBuilder.append(generateDotImage(classGraphName));
} else {
// revisit and add DOT SVG popup button
Expand Down Expand Up @@ -519,15 +509,18 @@ private StringBuilder generateGraphButtons(String graphName, String dot) {
private static String generateDotImage(String graphName) {
// revisit and add D3 popup button as well
return "<div id=\"" + graphName
+ "\" style=\"width: 95%; margin: auto; border: thin solid black\"></div>\n"
+ "\" style=\"width: 95%; height: 70vh; margin: auto; border: thin solid black\"></div>\n"
+ "<script type=\"module\">\n"
+ "import { Graphviz } from \"https://cdn.jsdelivr.net/npm/@hpcc-js/wasm/dist/index.js\";\n"
+ " if (Graphviz) {\n"
+ " const graphviz = await Graphviz.load();\n"
+ " let svg = graphviz.layout("
+ graphName + "_dot, \"svg\", \"dot\");\n"
+ " // Set desired width and height\n"
+ "\n"
+ "import init, { DotParser } from \"https://esm.run/@vizdom/vizdom-ts-web\";\n"
+ " if(DotParser) {\n"
+ " // Wait for the WASM binary to be compiled and the 'wasm' object to be populated\n"
+ " await init();\n"
+ " // Create a new Dot Parser\n"
+ " const parser = new DotParser();\n"
+ " const dotGraph = parser.parse("
+ graphName + "_dot);\n" + " const directedGraph = dotGraph.to_directed();\n"
+ " const positioned = directedGraph.layout();\n"
+ " let svg = positioned.to_svg().to_string();\n"
+ " // Modify the SVG string to include width and height attributes\n"
+ " svg = svg.replace('<svg ', `<svg class=\"fullscreen-svg\"`);\n"
+ "\n"
Expand Down Expand Up @@ -637,7 +630,7 @@ public String renderCycleVisuals(RankedCycle cycle) {
StringBuilder stringBuilder = new StringBuilder();
stringBuilder.append(generateGraphButtons(cycleName, dot));

if (cycle.getCycleNodes().size() + cycle.getEdgeSet().size() < d3Threshold) {
if (cycle.getCycleNodes().size() + cycle.getEdgeSet().size() < dotGraphThreshold) {
stringBuilder.append(generateDotImage(cycleName));
} else {
// revisit and add DOT SVG popup button
Expand Down
2 changes: 1 addition & 1 deletion report/src/main/java/org/hjug/refactorfirst/report/SimpleHtmlReport.java
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -744,7 +744,7 @@ public String renderDisharmonyInfo(
// simplify the method signature to just the name and type
sig = getSimpleMethodSignature(sig);
}
sb.append(drawTableCell(sig != null ? sig : ""));
sb.append(drawTableCell(sig != null ? sig.replace("<", "&lt;").replace(">", "&gt;") : ""));
}
sb.append(drawTableCell(rd.getPriority().toString()));
if (showDetails) {
Expand Down
Loading