- added d3.js for visualizations using embedded svg

- added a servlet api/linkstructure.json which generates a link graph
information in json
- added a javascript link graph renderer hypertree.js using d3 and the
new servlet linkstructure.json
- embedded the new link graph in the crawler monitor and the host
browser
This commit is contained in:
Michael Peter Christen 2014-04-03 14:51:19 +02:00
parent 74ab094587
commit a6bb9be97e
10 changed files with 307 additions and 20 deletions

View File

@ -9,6 +9,9 @@
<script type="text/javascript" src="js/rss2.js"></script>
<script type="text/javascript" src="js/query.js"></script>
<script type="text/javascript" src="js/Crawler.js"></script>
<!-- style for hypertree -->
<link href="env/hypertree.css" rel="stylesheet">
</head>
<body id="Crawler" onload="initCrawler();">
@ -227,8 +230,11 @@ document.getElementById("queues").style.height = maxh + "px";
#{/list}#
</table>
#(linkstructure)#::
<script src="/js/d3.v3.min.js"></script>
<script src="/js/hypertree.js"></script>
<div id="linkstructure"></div>
<script>$(document).ready(linkstructure("#[hosts]#", "#linkstructure", 1280, 720, 500, 300));</script>::
<script type="text/javascript">
<!--
imagestub = "WebStructurePicture_p.png?host=#[hosts]#&depth=4&width=1024&height=512&nodes=600&time=1000&colortext=888888&colorback=FFFFFF&colordot0=1111BB&colordota=11BB11&colorline=222222&colorlineend=333333";
idx = 0;
setTimeout("doanimation(500)", 500);
@ -240,7 +246,6 @@ document.getElementById("queues").style.height = maxh + "px";
setTimeout("doanimation(" + (nexttimeout > 3000 ? 3000 : nexttimeout * 1.2) + ")", nexttimeout);
}
}
-->
</script>
<div style="clear:both; text-align:left;">
<img id="WebPicture" src="env/grafics/invisible.png"/>

View File

@ -58,6 +58,7 @@ import net.yacy.search.Switchboard;
import net.yacy.search.SwitchboardConstants;
import net.yacy.search.index.Fulltext;
import net.yacy.search.index.Segment;
import net.yacy.search.schema.CollectionSchema;
import net.yacy.server.serverObjects;
import net.yacy.server.serverSwitch;
@ -596,9 +597,7 @@ public class Crawler_p {
RowHandleSet urlhashes = sb.crawler.getURLHashes(h);
prop.put("crawlProfilesShow_list_" + count + "_debug_count", urlhashes == null ? "unknown" : Integer.toString(urlhashes.size()));
}
if (profile.urlMustMatchPattern() == CrawlProfile.MATCH_ALL_PATTERN) {
hosts = hosts + "," + profile.name();
}
hosts = hosts + "," + profile.name();
dark = !dark;
count++;
}
@ -607,26 +606,20 @@ public class Crawler_p {
prop.put("crawlProfilesShow_count", count);
prop.put("crawlProfilesShow", count == 0 ? 0 : 1);
prop.put("crawlProfilesShow_linkstructure", 0);
if (count > 0) {
// collect the host names for 'wide' crawls which can be visualized
boolean showLinkstructure = hosts.length() > 0;
/*
// check if there is actually something to see
if (showLinkstructure) {
showLinkstructure = false;
for (String host: hosts.substring(1).split(",")) {
String hash = null;
try {hash = ASCII.String((new DigestURI("http://" + host)).hash(), 6, 6);} catch (final MalformedURLException e) {Log.logException(e);}
if (hash != null && sb.webStructure.referencesCount(hash) > 0) {showLinkstructure = true; break;}
StringBuilder q = new StringBuilder();
hosts = hosts.substring(1);
q.append(CollectionSchema.host_s.getSolrFieldName()).append(':').append(hosts).append(" OR ").append(CollectionSchema.host_s.getSolrFieldName()).append(':').append("www.").append(hosts);
try {
prop.put("crawlProfilesShow_linkstructure", count == 1 && sb.index.fulltext().getDefaultConnector().getCountByQuery(q.toString()) > 0 ? 1 : 2);
prop.put("crawlProfilesShow_linkstructure_hosts", hosts);
} catch (IOException e) {
}
}
*/
if (showLinkstructure) {
prop.put("crawlProfilesShow_linkstructure", 1);
prop.put("crawlProfilesShow_linkstructure_hosts", hosts.substring(1));
} else {
prop.put("crawlProfilesShow_linkstructure", 0);
}
}
// return rewrite properties

View File

@ -56,6 +56,8 @@ function updatepage(str) {
//]]>
</script>
<script type="text/javascript" src="js/sorttable.js"></script>
<!-- style for hypertree -->
<link href="env/hypertree.css" rel="stylesheet">
</head>
<body id="IndexControl">
#(topmenu)#
@ -156,8 +158,17 @@ function updatepage(str) {
#{/list}#
</table>
</fieldset>
#(linkgraph)#::
<script src="/js/d3.v3.min.js"></script>
<script src="/js/hypertree.js"></script>
<div id="linkstructure"></div>
<script>$(document).ready(linkstructure("#[host]#", "#linkstructure", 1280, 720, 500, 300));</script>
#(/linkgraph)#
#(/files)#
#(outbound)#::
<fieldset><legend>Outbound Links, outgoing from #[host]# - Host List</legend>
#{list}#

View File

@ -505,6 +505,9 @@ public class HostBrowser {
prop.put("files_subpathloadsize", storedDocs.size());
prop.put("files_subpathdetectedsize", filecounter - storedDocs.size());
prop.put("files", 1);
uri = new DigestURL(path);
prop.put("files_linkgraph", uri.getPath().length() <= 1 && hostsize > 0);
prop.put("files_linkgraph_host", uri.getHost());
// generate inbound-links table
StructureEntry struct = sb.webStructure.incomingReferences(hosthash);

View File

@ -0,0 +1,172 @@
// linkstructure.java
// ------------
// (C) 2014 by Michael Peter Christen; mc@yacy.net
// first published 02.04.2014 on http://yacy.net
//
// This program is free software; you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by
// the Free Software Foundation; either version 2 of the License, or
// (at your option) any later version.
//
// This program is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU General Public License for more details.
//
// You should have received a copy of the GNU General Public License
// along with this program; if not, write to the Free Software
// Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA 02111-1307 USA
import java.net.MalformedURLException;
import java.util.HashMap;
import java.util.Iterator;
import java.util.Map;
import java.util.concurrent.BlockingQueue;
import org.apache.solr.common.SolrDocument;
import net.yacy.cora.document.encoding.ASCII;
import net.yacy.cora.document.id.DigestURL;
import net.yacy.cora.federate.solr.FailType;
import net.yacy.cora.federate.solr.connector.AbstractSolrConnector;
import net.yacy.cora.order.Base64Order;
import net.yacy.cora.protocol.HeaderFramework;
import net.yacy.cora.protocol.RequestHeader;
import net.yacy.cora.protocol.ResponseHeader;
import net.yacy.kelondro.data.meta.URIMetadataNode;
import net.yacy.search.Switchboard;
import net.yacy.search.index.Fulltext;
import net.yacy.search.schema.CollectionSchema;
import net.yacy.server.serverObjects;
import net.yacy.server.serverSwitch;
import net.yacy.server.servletProperties;
public class linkstructure {
public static enum Edgetype {
InboundOk, InboundNofollow, Outbound, Dead;
}
public static class Edge {
public DigestURL source, target;
public Edgetype type;
public Edge(DigestURL source, DigestURL target, Edgetype type) {
this.source = source;
this.target = target;
this.type = type;
}
}
public static serverObjects respond(final RequestHeader header, final serverObjects post, final serverSwitch env) {
final servletProperties prop = new servletProperties();
final String ext = header.get("EXT", "");
//final boolean json = ext.equals("json");
final boolean xml = ext.equals("xml");
final Switchboard sb = (Switchboard) env;
Fulltext fulltext = sb.index.fulltext();
if (post == null) return prop;
String about = post.get("about", null); // may be a URL, a URL hash or a domain hash
if (about == null) return prop;
boolean authenticated = sb.adminAuthenticated(header) >= 2;
int maxtime = Math.min(post.getInt("maxtime", 1000), authenticated ? 60000 : 1000);
int maxnodes = Math.min(post.getInt("maxnodes", 100), authenticated ? 1000 : 100);
DigestURL url = null;
String hostname = null;
if (about.length() == 12 && Base64Order.enhancedCoder.wellformed(ASCII.getBytes(about))) {
byte[] urlhash = ASCII.getBytes(about);
url = authenticated ? sb.getURL(urlhash) : null;
} else if (url == null && about.length() > 0) {
// consider "about" as url or hostname
try {
url = new DigestURL(about.indexOf("://") >= 0 ? about : "http://" + about); // accept also domains
hostname = url.getHost();
if (hostname.startsWith("www.")) hostname = hostname.substring(4);
} catch (final MalformedURLException e) {
}
}
if (hostname == null) return prop;
// now collect _all_ documents inside the domain until a timeout appears
StringBuilder q = new StringBuilder();
q.append(CollectionSchema.host_s.getSolrFieldName()).append(':').append(hostname).append(" OR ").append(CollectionSchema.host_s.getSolrFieldName()).append(':').append("www.").append(hostname);
BlockingQueue<SolrDocument> docs = fulltext.getDefaultConnector().concurrentDocumentsByQuery(q.toString(), 0, maxnodes, maxtime, 100, 1,
CollectionSchema.id.getSolrFieldName(),
CollectionSchema.sku.getSolrFieldName(),
CollectionSchema.failreason_s.getSolrFieldName(),
CollectionSchema.failtype_s.getSolrFieldName(),
CollectionSchema.inboundlinks_protocol_sxt.getSolrFieldName(),
CollectionSchema.inboundlinks_urlstub_sxt.getSolrFieldName(),
CollectionSchema.outboundlinks_protocol_sxt.getSolrFieldName(),
CollectionSchema.outboundlinks_urlstub_sxt.getSolrFieldName()
);
SolrDocument doc;
Map<String, FailType> errorDocs = new HashMap<String, FailType>();
Map<String, Edge> edges = new HashMap<String, Edge>();
try {
while ((doc = docs.take()) != AbstractSolrConnector.POISON_DOCUMENT) {
String u = (String) doc.getFieldValue(CollectionSchema.sku.getSolrFieldName());
String ids = (String) doc.getFieldValue(CollectionSchema.id.getSolrFieldName());
DigestURL from = new DigestURL(u, ASCII.getBytes(ids));
String errortype = (String) doc.getFieldValue(CollectionSchema.failtype_s.getSolrFieldName());
FailType error = errortype == null ? null : FailType.valueOf(errortype);
if (error != null) {
errorDocs.put(u, error);
} else {
Iterator<String> links = URIMetadataNode.getLinks(doc, true); // inbound
String link;
while (links.hasNext()) {
link = links.next();
try {
DigestURL linkurl = new DigestURL(link, null);
String edgehash = ids + ASCII.String(linkurl.hash());
edges.put(edgehash, new Edge(from, linkurl, Edgetype.InboundOk));
} catch (MalformedURLException e) {}
}
links = URIMetadataNode.getLinks(doc, false); // outbound
while (links.hasNext()) {
link = links.next();
try {
DigestURL linkurl = new DigestURL(link, null);
String edgehash = ids + ASCII.String(linkurl.hash());
edges.put(edgehash, new Edge(from, linkurl, Edgetype.Outbound));
} catch (MalformedURLException e) {}
}
}
if (edges.size() > maxnodes) break;
}
} catch (InterruptedException e) {
} catch (MalformedURLException e) {
}
// we use the errorDocs to mark all edges with endpoint to error documents
for (Map.Entry<String, Edge> edge: edges.entrySet()) {
if (errorDocs.containsKey(edge.getValue().target)) edge.getValue().type = Edgetype.Dead;
}
// finally just write out the edge array
int c = 0;
for (Map.Entry<String, Edge> edge: edges.entrySet()) {
prop.putJSON("list_" + c + "_source", edge.getValue().source.getPath());
prop.putJSON("list_" + c + "_target", edge.getValue().type.equals(Edgetype.Outbound) ? edge.getValue().target.toNormalform(true) : edge.getValue().target.getPath());
prop.putJSON("list_" + c + "_type", edge.getValue().type.name());
prop.put("list_" + c + "_eol", 1);
c++;
}
prop.put("list_" + (c-1) + "_eol", 0);
prop.put("list", c);
// Adding CORS Access header for xml output
if (xml) {
final ResponseHeader outgoingHeader = new ResponseHeader(200);
outgoingHeader.put(HeaderFramework.CORS_ALLOW_ORIGIN, "*");
prop.setOutgoingHeader(outgoingHeader);
}
// return rewrite properties
return prop;
}
}

View File

@ -0,0 +1,5 @@
[
#{list}#
{"source":"#[source]#", "target":"#[target]#", "type":"#[type]#"}#(eol)#::,#(/eol)#
#{/list}#
]

37
htroot/env/hypertree.css vendored Normal file
View File

@ -0,0 +1,37 @@
#Outbound {
fill: lightblue;
}
#Dead {
fill: red;
}
#InboundOk {
fill: green;
}
.hypertree {
border: solid;
}
.hypertree-link {
fill: none;
stroke-width: 1.2px;
}
.hypertree-link.Outbound {
stroke: lightblue;
}
.hypertree-link.Dead {
stroke: red;
stroke-dasharray: 0,2 1;
}
.hypertree-link.InboundOk {
stroke: green;
}
circle {
fill: lightgreen;
stroke: darkgreen;
stroke-width: 1.5px;
}
text {
font: 9px sans-serif;
pointer-events: none;
text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, 0 -1px 0 #fff, -1px 0 0 #fff;
}

5
htroot/js/d3.v3.min.js vendored Normal file

File diff suppressed because one or more lines are too long

48
htroot/js/hypertree.js Normal file
View File

@ -0,0 +1,48 @@
function linkstructure(hostname, element, width, height, maxtime, maxnodes) {
var nodes = {};
var links = [];
$.getJSON("/api/linkstructure.json?about=" + hostname + "&maxtime=" + maxtime + "&maxnodes=" + maxnodes, function(links) {
links.forEach(function(link) {
link.source = nodes[link.source] || (nodes[link.source] = {name: link.source});
link.target = nodes[link.target] || (nodes[link.target] = {name: link.target});
});
var force = d3.layout.force().nodes(d3.values(nodes)).links(links).size([width, height]).linkDistance(60).charge(-800).on("tick", tick).start();
var svg = d3.select(element).append("svg").attr("id", "hypertree").attr("width", width).attr("height", height);
svg.append("defs").selectAll("marker")
.data(["Dead", "Outbound", "InboundOk"])
.enter().append("marker")
.attr("id", function(d) { return d; })
.attr("viewBox", "0 -5 10 10")
.attr("refX", 15)
.attr("refY", -1.5)
.attr("markerWidth", 6)
.attr("markerHeight", 6)
.attr("orient", "auto")
.append("path")
.attr("d", "M0,-5L10,0L0,5");
svg.append("text").attr("x", 10).attr("y", 15).text(hostname).attr("style", "font-size:16px").attr("fill", "black");
svg.append("text").attr("x", 10).attr("y", 30).text("Site Link Structure Visualization made with YaCy").attr("style", "font-size:9px").attr("fill", "black");
svg.append("text").attr("x", 10).attr("y", 40).text(new Date()).attr("style", "font-size:9px").attr("fill", "black");
svg.append("text").attr("x", 10).attr("y", height - 20).text("green: links to same domain").attr("style", "font-size:9px").attr("fill", "green");
svg.append("text").attr("x", 10).attr("y", height - 10).text("blue: links to other domains").attr("style", "font-size:9px").attr("fill", "lightblue");
svg.append("text").attr("x", 10).attr("y", height).text("red: dead links").attr("style", "font-size:9px").attr("fill", "red");
var path = svg.append("g").selectAll("path").data(force.links()).enter().append("path").attr("class",
function(d) {return "hypertree-link " + d.type; }).attr("marker-end", function(d) { return "url(#" + d.type + ")";});
var circle = svg.append("g").selectAll("circle").data(force.nodes()).enter().append("circle").attr("r", 4).call(force.drag);
var text = svg.append("g").selectAll("text").data(force.nodes()).enter().append("text").attr("x", 8).attr("y", ".31em").text(
function(d) {return d.name; });
function tick() {
path.attr("d", linkArc);
circle.attr("transform", transform);
text.attr("transform", transform);
}
function linkArc(d) {
var dx = d.target.x - d.source.x, dy = d.target.y - d.source.y, dr = Math.sqrt(dx * dx + dy * dy);
return "M" + d.source.x + "," + d.source.y + "A" + dr + "," + dr + " 0 0,1 " + d.target.x + "," + d.target.y;
}
function transform(d) {
return "translate(" + d.x + "," + d.y + ")";
}
});
};

View File

@ -24,6 +24,9 @@
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- style for hypertree -->
<link href="env/hypertree.css" rel="stylesheet">
</head>
<body>
@ -93,6 +96,11 @@
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
<h1 class="page-header">Dashboard</h1>
<script src="/js/d3.v3.min.js"></script>
<script src="/js/hypertree.js"></script>
<div id="linkstructure"></div>
<script>$(document).ready(linkstructure("yacy.net", "#linkstructure", 1280, 720, 1000, 1000));</script>
<div class="row placeholders">
<div class="col-xs-6 col-sm-3 placeholder">
<img data-src="holder.js/200x200/auto/sky" class="img-responsive" alt="Generic placeholder thumbnail">
@ -116,7 +124,7 @@
</div>
</div>
<div>
<div class="row placeholders">
<a href="#" id="example1" class="btn btn-lg btn-danger" data-content="And here's some amazing content." data-original-title="A title">popover</a>
<a href="#" id="example2" class="btn btn-lg btn-danger" title="A Title" role="button">tooltip</a>
<script type="text/javascript">