Skip to content

Commit

Permalink
Restored node selection #311
Browse files Browse the repository at this point in the history
  • Loading branch information
@lucaneg
lucaneg committed Aug 14, 2024
1 parent ba63bec commit 8432db3
Show file tree
Hide file tree
Showing 3 changed files with 54 additions and 87 deletions.
25 changes: 14 additions & 11 deletions lisa/lisa-sdk/src/main/java/it/unive/lisa/outputs/DotGraph.java
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,9 +67,9 @@ private static MutableGraph buildLegend() {
builder.append(
"<tr><td align=\"right\">node border&nbsp;</td><td align=\"left\"><font color=\"gray\">gray</font>, single</td></tr>");
builder.append(
"<tr><td align=\"right\">entrypoint border&nbsp;</td><td align=\"left\"><font color=\"black\">black</font>, single</td></tr>");
"<tr><td align=\"right\">entrypoint border&nbsp;</td><td align=\"left\"><font color=\"black\">black</font>, dashed</td></tr>");
builder.append(
"<tr><td align=\"right\">exitpoint border&nbsp;</td><td align=\"left\"><font color=\"black\">black</font>, double</td></tr>");
"<tr><td align=\"right\">exitpoint border&nbsp;</td><td align=\"left\"><font color=\"black\">black</font>, solid</td></tr>");
builder.append(
"<tr><td align=\"right\">sequential edge&nbsp;</td><td align=\"left\"><font color=\"black\">black</font>, solid</td></tr>");
builder.append(
Expand Down Expand Up @@ -127,18 +127,21 @@ public void addNode(
if (label != null)
extra = "<br/><br/>" + dotEscape(format(label));

MutableNode n = Factory.mutNode(nodeName(node.getId()))
.setName(nodeName(node.getId()))
String nodeName = nodeName(node.getId());
MutableNode n = Factory.mutNode(nodeName)
.setName(nodeName)
.add(Label.html(l + extra))
.add(Shape.RECT);
.add(Shape.RECT)
// we keep trace of what was the original id of the node
.add("id", nodeName);

if (entry || exit)
n = n.add(Color.BLACK);
else
n = n.add(Color.GRAY);

if (exit)
n = n.add("peripheries", 2);
if (entry)
n = n.add(Style.DASHED);

graph.add(n);
}
Expand Down Expand Up @@ -196,7 +199,7 @@ public void addEdge(
MutableNode dest = mutNode(nodeName(id1));

Link link = src.linkTo(dest);

switch (edge.getKind()) {
case "TrueEdge":
link = link.with(Style.DASHED);
Expand All @@ -211,9 +214,9 @@ public void addEdge(
link = link.with(Color.BLACK);
break;
}

src.links().add(link);

// need to re-add the node to have it updated
graph.add(src);
}
Expand All @@ -224,7 +227,7 @@ public void dump(
throws IOException {
MutableGraph copy = graph.copy();
copy.graphAttrs().add(Label.of(title))
.graphAttrs().add("labelloc", "t");
.graphAttrs().add("labelloc", "t");
copy.add(buildLegend());
String exportedGraph = Graphviz.fromGraph(copy).render(Format.DOT).toString();
writer.write(exportedGraph);
Expand Down
2 changes: 1 addition & 1 deletion lisa/lisa-sdk/src/main/java/it/unive/lisa/outputs/HtmlGraph.java
View file
Original file line number Diff line number Diff line change
Expand Up @@ -106,7 +106,7 @@ public void dump(
if (includeSubnodes || graph.graph.nodes().stream().filter(n -> n.name().toString().equals(nodeName)).findAny().isPresent()) {
descrs.append("\t\t\t\t<div id=\"header-")
.append(nodeName)
.append("\" class=\"header-hidden\">\n");
.append("\" class=\"header-info header-hidden\">\n");
descrs.append(
"\t\t\t\t\t<div class=\"description-title-wrapper\"><span class=\"description-title\">")
.append(StringUtils.capitalize(descriptionLabel))
Expand Down
114 changes: 39 additions & 75 deletions lisa/lisa-sdk/src/main/resources/html-graph/viewer.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,34 +9,14 @@
<script src="assets/d3.v7.min.js"></script>
<script src="assets/d3-graphviz.min.js"></script>

<style>

.d-flex{display:flex!important}
.flex-column{flex-direction:column!important}
.flex-grow-1{flex-grow:1!important}
.justify-content-center{justify-content:center!important}
.align-items-center{align-items:center!important}

.hovered {
fill: #ffa500;
stroke: #333;
stroke-width: 2px;
filter: drop-shadow(0 0 5px rgba(255, 153, 0, 0.5));
}

.node ellipse {
transition: fill 0.3s ease, stroke 0.3s ease, stroke-width 0.3s ease;
}

<style>
body {
font-family: helvetica neue, helvetica, liberation sans, arial, sans-serif;
font-size: 14px;
background-color: white;
}

html, body, #full {
height: 100%;
}
html, body, #full { height: 100%; }

header {
height: 13%;
Expand Down Expand Up @@ -74,22 +54,16 @@
min-width: 200px;
}

.description-header {
font-weight: bold;
}
.description-header { font-weight: bold; }

#descriptions ul {
padding-left: inherit;
margin: 5px 0;
}

.description-nest {
padding-left: 15px;
}
.description-nest { padding-left: 15px; }

.header-hidden {
display: none;
}
.header-hidden { display: none; }

.description-title-wrapper {
margin-top: 0.83em;
Expand Down Expand Up @@ -171,8 +145,7 @@
font-weight: bold;
}

.close:hover,
.close:focus {
.close:hover, .close:focus {
color: black;
text-decoration: none;
cursor: pointer;
Expand All @@ -189,8 +162,7 @@
border-radius: 25px;
}

.button:disabled,
.button[disabled]{
.button:disabled, .button[disabled] {
background-color: #CCCCCC;
border: 1px #CCCCCC solid;
color: #666666;
Expand All @@ -201,6 +173,29 @@
border-radius: 25px;
border: 1px #16A15B solid;
}

#graph-wrapper {
display: flex !important;
flex-direction: column !important;
}

#graph {
display: flex !important;
flex-grow: 1 !important;
justify-content: center !important;
align-items: center !important;
}

.hovered {
stroke: #333;
stroke-width: 1px;
fill: rgba(22, 161, 91, 0.8);
filter: drop-shadow(0 0 5px rgba(255, 161, 91, 0.5));
}

.node { cursor: pointer; }

.node polygon { fill: white; }
</style>
</head>

Expand All @@ -218,21 +213,21 @@ <h3 th:utext="${graphDescription}">DESCRIPTION</h3>
<div class="modal-content">
<span class="close">&times;</span>
<b>Node border: <font color="darkgray">gray</font>, single</b>
<b>Entrypoint border: black, single</b>
<b>Exitpoint border: black, double</b>
<b>Entrypoint border: black, dashed</b>
<b>Exitpoint border: black, solid</b>
<b>Sequential edge: black, solid</b>
<b>False edge: <font color="red">red</font>, solid</b>
<b>True edge: <font color="blue">blue</font>, solid</b>
</div>
</div>
<div id="full">
<div class="splitter">
<div class="d-flex flex-column" id="graph-wrapper">
<div class="d-flex flex-grow-1 justify-content-center align-items-center" id="graph"></div>
<div id="graph-wrapper">
<div id="graph"></div>
</div>
<div id="separator"></div>
<div id="descriptions">
<div id="header-none">
<div id="header-info header-none">
No node selected. Select a node to show its <span th:utext="${graphDescriptionLabel}">DESCRIPTION LABEL</span>.
</div>
<div th:utext="${graphDescriptions}">
Expand Down Expand Up @@ -286,41 +281,10 @@ <h3 th:utext="${graphDescription}">DESCRIPTION</h3>

function renderGraph(dotString) {
graphviz.renderDot(dotString, function () {
d3.selectAll(".node")
.on("mouseover", function () {
d3.select(this)
.select("ellipse")
.classed("hovered", true);
})
.on("mouseout", function () {
d3.select(this)
.select("ellipse")
.classed("hovered", false);
});
}).on("end", function () {
d3.selectAll(".node a").each(function () {
const node = d3.select(this);
var info = d3.select(this).attr("xlink:title");

const jsonData = JSON.parse(info);
console.log(jsonData);

new bootstrap.Popover(this, {
container: 'body',
html: true,
trigger: 'hover',
placement: 'top',
title: jsonData.fullPath || "Default Title",
content: function () {
return `<h6>${jsonData.role}</h6>
<strong>Method:</strong> ${jsonData.method}<br>
<strong>Endpoint:</strong> ${jsonData.fullPath}<br>
<strong>Path variable:</strong> ${jsonData.pathVariableName}<br>
<strong>Location:</strong> ${jsonData.codeLocation}<br>
${addPathVariableInfo(jsonData.methodPathVariable)}
${addIssues(jsonData.issues)}`;
}
});
d3.selectAll('.node').on('click', function () {
var name = d3.select(this).attr('id');
d3.selectAll('.header-info').classed('header-hidden', true);
d3.select('#header-' + name).classed('header-hidden', false);
});
});
}
Expand Down

0 comments on commit 8432db3

Please sign in to comment.