render a graph in the browser using dagre-d3 and graphlib-dot, fixes #29

This commit is contained in:
Johannes Rudolph 2015-11-18 17:38:20 +01:00
parent ac0ab5189a
commit 000b0ed253
5 changed files with 192 additions and 3 deletions

View File

@ -0,0 +1,126 @@
<!doctype html>
<!--
Based on https://github.com/cpettitt/dagre-d3/blob/d215446e7e40ebfca303f4733e746e96420e3b46/demo/interactive-demo.html
which is published under this license:
Copyright (c) 2013 Chris Pettitt
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
-->
<meta charset="utf-8">
<title>Dependency Graph</title>
<script src="http://d3js.org/d3.v3.js"></script>
<script src="http://cpettitt.github.io/project/graphlib-dot/v0.6.1/graphlib-dot.js"></script>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="http://cpettitt.github.io/project/dagre-d3/v0.4.10/dagre-d3.min.js"></script>
<script src="dependencies.dot.js"></script>
<style>
svg {
border: 1px solid #999;
overflow: hidden;
}
.node {
white-space: nowrap;
}
.node rect,
.node circle,
.node ellipse {
stroke: #333;
fill: #fff;
stroke-width: 1.5px;
}
.cluster rect {
stroke: #333;
fill: #000;
fill-opacity: 0.1;
stroke-width: 1.5px;
}
.edgePath path.path {
stroke: #333;
stroke-width: 1.5px;
fill: none;
}
</style>
<style>
h1, h2 {
color: #333;
}
</style>
<body onLoad="initialize()">
<h1>Dependencies</h1>
<svg width=1280 height=1024>
<g/>
</svg>
<script>
function initialize() {
// Set up zoom support
var svg = d3.select("svg"),
inner = d3.select("svg g"),
zoom = d3.behavior.zoom().on("zoom", function() {
inner.attr("transform", "translate(" + d3.event.translate + ")" +
"scale(" + d3.event.scale + ")");
});
svg.call(zoom);
// Create and configure the renderer
var render = dagreD3.render();
function tryDraw(inputGraph) {
var g;
{
g = graphlibDot.read(inputGraph);
// Set margins, if not present
if (!g.graph().hasOwnProperty("marginx") &&
!g.graph().hasOwnProperty("marginy")) {
g.graph().marginx = 20;
g.graph().marginy = 20;
g.graph().rankdir = "LR";
}
g.graph().transition = function(selection) {
return selection.transition().duration(500);
};
// Render the graph into svg g
d3.select("svg g").call(render, g);
// Center the graph
var initialScale = 0.75;
zoom
.translate([(svg.attr("width") - g.graph().width * initialScale) / 2, 20])
.scale(initialScale)
.event(svg);
svg.attr('height', g.graph().height * initialScale + 40);
}
}
tryDraw(decodeURIComponent(data));
}
</script>
</body>

View File

@ -33,6 +33,12 @@ trait DependencyGraphKeys {
"Creates a dot file containing the dependency-graph for a project")
val dependencyDotString = TaskKey[String]("dependency-dot-string",
"Creates a String containing the dependency-graph for a project in dot format")
val dependencyBrowseGraphTarget = SettingKey[File]("dependency-browse-graph-target",
"The location dependency browse graph files should be put.")
val dependencyBrowseGraphHTML = TaskKey[URI]("dependency-browse-graph-html",
"Creates an HTML page that can be used to view the graph.")
val dependencyBrowseGraph = TaskKey[URI]("dependency-browse-graph",
"Opens an HTML page that can be used to view the graph.")
val moduleGraph = TaskKey[ModuleGraph]("module-graph",
"The dependency graph for a project")
val asciiGraph = TaskKey[String]("dependency-graph-string",

View File

@ -16,8 +16,6 @@
package net.virtualvoid.sbt.graph
import net.virtualvoid.sbt.graph.backend.{ IvyReport, SbtUpdateReport }
import net.virtualvoid.sbt.graph.util.IOUtil
import sbt._
import Keys._
@ -27,6 +25,10 @@ import sbt.complete.Parser
import org.apache.ivy.core.resolve.ResolveOptions
import net.virtualvoid.sbt.graph.backend.{ IvyReport, SbtUpdateReport }
import net.virtualvoid.sbt.graph.rendering.DagreHTML
import net.virtualvoid.sbt.graph.util.IOUtil
object DependencyGraphSettings {
import DependencyGraphKeys._
import ModuleGraphProtocol._
@ -83,6 +85,13 @@ object DependencyGraphSettings {
dependencyDotFile <<= target / "dependencies-%s.dot".format(config.toString),
dependencyDotString <<= dependencyDotStringTask,
dependencyDot <<= writeToFile(dependencyDotString, dependencyDotFile),
dependencyBrowseGraphTarget <<= target / "browse-dependency-graph",
dependencyBrowseGraphHTML <<= browseGraphHTMLTask,
dependencyBrowseGraph <<= (dependencyBrowseGraphHTML, streams).map { (uri, streams)
streams.log.info("Opening in browser...")
java.awt.Desktop.getDesktop.browse(uri)
uri
},
dependencyDotHeader := """digraph "dependency-graph" {
| graph[rankdir="LR"]
| edge [
@ -118,6 +127,13 @@ object DependencyGraphSettings {
(graph, dotHead, nodeLabel) rendering.DOT.dotGraph(graph, dotHead, nodeLabel)
}
def browseGraphHTMLTask =
(dependencyDotString, dependencyBrowseGraphTarget, streams).map { (graph, target, streams)
val link = DagreHTML.createLink(graph, target)
streams.log.info(s"HTML graph written to $link")
link
}
def writeToFile(dataTask: TaskKey[String], fileTask: SettingKey[File]) =
(dataTask, fileTask, streams).map { (data, outFile, streams)
IOUtil.writeToFile(data, outFile)

View File

@ -29,7 +29,8 @@ case class Module(id: ModuleId,
evictedByVersion: Option[String] = None,
error: Option[String] = None) {
def hadError: Boolean = error.isDefined
def isUsed: Boolean = !evictedByVersion.isDefined
def isUsed: Boolean = !isEvicted
def isEvicted: Boolean = evictedByVersion.isDefined
}
case class ModuleGraph(nodes: Seq[Module], edges: Seq[Edge]) {

View File

@ -0,0 +1,40 @@
/*
* Copyright 2015 Johannes Rudolph
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
package net.virtualvoid.sbt.graph
package rendering
import java.io.File
import java.net.{ URLEncoder, URI }
import net.virtualvoid.sbt.graph.util.IOUtil
object DagreHTML {
def createLink(dotGraph: String, targetDirectory: File): URI = {
targetDirectory.mkdirs()
val graphHTML = new File(targetDirectory, "graph.html")
IOUtil.saveResource("graph.html", graphHTML)
IOUtil.writeToFile(dotGraph, new File(targetDirectory, "dependencies.dot"))
val graphString =
URLEncoder.encode(dotGraph, "utf8")
.replaceAllLiterally("+", "%20")
IOUtil.writeToFile(s"""data = "$graphString";""", new File(targetDirectory, "dependencies.dot.js"))
new URI(graphHTML.toURI.toString)
}
}