Skip to content

Only extract the nearest comment #4

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
merged 2 commits into from
Nov 26, 2024
Merged

Only extract the nearest comment #4

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
723a47a
Only extract the nearest comment
basnijholt Nov 26, 2024
734ddc0
fix multi line test
basnijholt Nov 26, 2024
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
163 changes: 163 additions & 0 deletions src/graphvizsvg.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1007,4 +1007,167 @@ describe("GraphvizSvg", () => {
graphviz.tooltip(node, false);
expect(link.attr("data-tooltip-keepvisible")).toBeUndefined();
});

test("should handle node comments", (done) => {
const svgContent = `
<svg width="100pt" height="100pt">
<g>
<!-- User comment for A -->
<g class="node">
<title>A</title>
<ellipse cx="50" cy="50" rx="30" ry="30"/>
</g>
<!-- Another comment for B -->
<g class="node">
<title>B</title>
<ellipse cx="150" cy="50" rx="30" ry="30"/>
</g>
<g class="node">
<title>C</title>
<ellipse cx="250" cy="50" rx="30" ry="30"/>
</g>
</g>
</svg>`;

const options = {
svg: svgContent,
ready() {
// Debug output
console.log("Comments map:", this._commentsByName);
console.log("Node C:", $(this._nodesByName["C"]).attr("data-comment"));

// Original test assertions
expect(this._commentsByName["A"]).toBe("User comment for A");
expect(this._commentsByName["B"]).toBe("Another comment for B");
expect(this._commentsByName["C"]).toBeUndefined();

done();
},
};

container.graphviz(options);
});

test("should handle comments on nodes, edges and clusters", (done) => {
const svgContent = `
<svg width="100pt" height="100pt">
<g>
<!-- Node A comment -->
<g class="node">
<title>A</title>
<ellipse cx="50" cy="50" rx="30" ry="30"/>
</g>
<!-- Node B comment -->
<g class="node">
<title>B</title>
<ellipse cx="150" cy="50" rx="30" ry="30"/>
</g>
<!-- Edge A->B comment -->
<g class="edge">
<title>A->B</title>
<path d="M50,50 L150,50"/>
</g>
</g>
</svg>`;

const options = {
svg: svgContent,
ready() {
// Test node comments
expect(this._commentsByName["A"]).toBe("Node A comment");
expect(this._commentsByName["B"]).toBe("Node B comment");

// Test node data-comment attributes
const nodeA = $(this._nodesByName["A"]);
const nodeB = $(this._nodesByName["B"]);
expect(nodeA.attr("data-comment")).toBe("Node A comment");
expect(nodeB.attr("data-comment")).toBe("Node B comment");

// Test edge comments
const edge = $('g.edge[data-name="A->B"]');
expect(edge.attr("data-comment")).toBe("Edge A->B comment");

done();
},
};

container.graphviz(options);
});

test("should handle multiple comments and whitespace", (done) => {
const svgContent = `
<svg width="100pt" height="100pt">
<g>
<!-- First comment -->
<!-- Node A comment -->
<g class="node">
<title>A</title>
<ellipse cx="50" cy="50" rx="30" ry="30"/>
</g>

<!--
Multi-line
Node B
comment
-->
<g class="node">
<title>B</title>
<ellipse cx="150" cy="50" rx="30" ry="30"/>
</g>
</g>
</svg>`;

const options = {
svg: svgContent,
ready() {
// Should only capture the immediate previous comment
expect(this._commentsByName["A"]).toBe("Node A comment");

// Should handle multi-line comments - normalize whitespace for comparison
const comment = this._commentsByName["B"];
const normalizedComment = comment
.split("\n")
.map((line) => line.trim())
.join("\n");
expect(normalizedComment).toBe("Multi-line\nNode B\ncomment");

done();
},
};

container.graphviz(options);
});

test("should handle nodes without comments", (done) => {
const svgContent = `
<svg width="100pt" height="100pt">
<g>
<!-- Node A comment -->
<g class="node">
<title>A</title>
<ellipse cx="50" cy="50" rx="30" ry="30"/>
</g>
<g class="node">
<title>B</title>
<ellipse cx="150" cy="50" rx="30" ry="30"/>
</g>
</g>
</svg>`;

const options = {
svg: svgContent,
ready() {
// Node A should have a comment
expect(this._commentsByName["A"]).toBe("Node A comment");

// Node B should not have a comment
expect(this._commentsByName["B"]).toBeUndefined();
expect($(this._nodesByName["B"]).attr("data-comment")).toBeUndefined();

done();
},
};

container.graphviz(options);
});
});
29 changes: 21 additions & 8 deletions src/setup.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
// setup.js
import $ from 'jquery';
import $ from "jquery";

export function setup(context) {
const options = context.options;
Expand All @@ -14,6 +14,7 @@ export function setup(context) {
context.$edges = $graph.children(".edge");
context._nodesByName = {};
context._edgesByName = {};
context._commentsByName = {};

// Add top-level class and copy background color to element
context.$element.addClass("graphviz-svg");
Expand All @@ -25,6 +26,16 @@ export function setup(context) {
context.$nodes.each((_, el) => _setupNodesEdges($(el), true, context));
context.$edges.each((_, el) => _setupNodesEdges($(el), false, context));

// After setting up nodes, collect comments
context.$nodes.each((_, node) => {
const $node = $(node);
const name = $node.attr("data-name");
const comment = $node.attr("data-comment");
if (comment) {
context._commentsByName[name] = comment;
}
});

// Remove the graph title element
const $title = context.$graph.children("title");
context.$graph.attr("data-name", $title.text());
Expand Down Expand Up @@ -68,19 +79,21 @@ function _setupNodesEdges($el, isNode, context) {
}
// Check for user-added comments
let previousSibling = $el[0].previousSibling;
while (previousSibling && previousSibling.nodeType !== 8) {
while (previousSibling && previousSibling.nodeType === 3) {
// Skip text nodes
previousSibling = previousSibling.previousSibling;
}

if (previousSibling && previousSibling.nodeType === 8) {
const htmlDecode = (input) => {
const e = document.createElement("div");
e.innerHTML = input;
return e.childNodes[0].nodeValue;
};
const value = htmlDecode(previousSibling.nodeValue.trim());
// 8 is comment node
const value = previousSibling.nodeValue.trim();
console.log("Found comment:", value);
if (value !== title) {
// User-added comment
$el.attr("data-comment", value);
if (isNode) {
context._commentsByName[title] = value;
}
}
}
}
Expand Down