зеркало из https://github.com/mozilla/lightbeam.git
list view is working again
This commit is contained in:
dethe
Родитель
1ba992bdef
Коммит
d9d8d84923
|
|
@ -347,6 +347,7 @@ function switchFilter(name){
|
|||
console.log('unable to switch filter to %s', name);
|
||||
}
|
||||
global.filteredAggregate = currentFilter(aggregate);
|
||||
aggregate.emit('updated');
|
||||
}
|
||||
|
||||
aggregate.switchFilter = switchFilter;
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@ visualizations.clock = clock;
|
|||
clock.name = "clock";
|
||||
|
||||
clock.on('init', onInit);
|
||||
clock.on('connection', onConnection);
|
||||
aggregate.on('connection', onConnection);
|
||||
clock.on('remove', onRemove);
|
||||
|
||||
function onInit(){
|
||||
|
|
@ -54,7 +54,7 @@ function onConnection(conn){
|
|||
// A connection has the following keys:
|
||||
// source (url), target (url), timestamp (int), contentType (str), cookie (bool), sourceVisited (bool), secure(bool), sourcePathDepth (int), sourceQueryDepth(int)
|
||||
var connection = aggregate.connectionAsObject(conn);
|
||||
aggregate.emit('connection', connection);
|
||||
// aggregate.emit('connection', connection);
|
||||
var bucketIdx = timeToBucket(connection.timestamp);
|
||||
|
||||
if (! clock.timeslots[bucketIdx]){
|
||||
|
|
|
|||
|
|
@ -49,6 +49,7 @@ function getAllConnections(){
|
|||
allConnectionsAsArray = allConnectionsAsArray.concat(conns);
|
||||
}
|
||||
});
|
||||
console.log('returning %s connections from getAllConnections', allConnectionsAsArray.length);
|
||||
return allConnectionsAsArray;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ Emitter.prototype.once = function once(eventName, listener){
|
|||
this.on(eventName, wrapped);
|
||||
};
|
||||
|
||||
Emitter.prototype.removeListener = function removeListener(eventName, listener){
|
||||
Emitter.prototype.off = function off(eventName, listener){
|
||||
if (!this._listeners[eventName]) return;
|
||||
var listenerIndex = this._listeners[eventName].indexOf(listener);
|
||||
if (listenerIndex < 0) return;
|
||||
|
|
|
|||
|
|
@ -22,18 +22,27 @@ graph.on('init', onInit);
|
|||
graph.on('remove', onRemove);
|
||||
graph.on('reset', onReset);
|
||||
|
||||
function onUpdate(){
|
||||
// new nodes, reheat graph simulation
|
||||
if (force){
|
||||
console.log('restarting graph due to update');
|
||||
force.stop();
|
||||
force.nodes(filteredAggregate.nodes);
|
||||
force.links(filteredAggregate.edges)
|
||||
force.start();
|
||||
updateGraph();
|
||||
}else{
|
||||
console.log('the force is not with us');
|
||||
}
|
||||
}
|
||||
|
||||
function onInit(){
|
||||
console.log('initializing graph from %s connections', filteredAggregate.nodes.length);
|
||||
vis = d3.select(vizcanvas);
|
||||
// A D3 visualization has a two main components, data-shaping, and setting up the D3 callbacks
|
||||
// This binds our data to the D3 visualization and sets up the callbacks
|
||||
initGraph();
|
||||
aggregate.on('updated', function(){
|
||||
// new nodes, reheat graph simulation
|
||||
if (force){
|
||||
force.start();
|
||||
}
|
||||
});
|
||||
aggregate.on('updated', onUpdate);
|
||||
// Differenct visualizations may have different viewBoxes, so make sure we use the right one
|
||||
vizcanvas.setAttribute('viewBox', [0,0,width,height].join(' '));
|
||||
if ( !statsBarInitiated ){
|
||||
|
|
@ -111,7 +120,6 @@ function initGraph(){
|
|||
.nodes(filteredAggregate.nodes)
|
||||
.links(filteredAggregate.edges)
|
||||
.charge(-500)
|
||||
.alpha(0.01)
|
||||
.size([width,height])
|
||||
.start();
|
||||
updateGraph();
|
||||
|
|
@ -135,26 +143,52 @@ function initGraph(){
|
|||
ticks++;
|
||||
lastTick = nextTick;
|
||||
if ((lastTick - lastUpdate) > second){
|
||||
console.log('%s ticks per second, each draw takes %s milliseconds', ticks, d3.mean(draws));
|
||||
console.log('%s ticks per second, each draw takes %s milliseconds', ticks, Math.floor(d3.mean(draws)));
|
||||
lastUpdate = lastTick;
|
||||
draws = [];
|
||||
ticks = 0;
|
||||
}
|
||||
edges
|
||||
.attr('x1', sourceX )
|
||||
.attr('y1', sourceY )
|
||||
.attr('x2', targetX )
|
||||
.attr('y2', targetY )
|
||||
.classed('cookieYes', edgeCookie )
|
||||
.classed('highlighted', edgeHighlight )
|
||||
.classed('coloured', edgeColoured );
|
||||
nodes
|
||||
.attr('transform', scaleNode)
|
||||
.classed('visitedYes', visited)
|
||||
.classed('visitedNo', notVisited)
|
||||
.attr('data-timestamp', timestamp)
|
||||
.classed('highlighted', nodeHighlight);
|
||||
|
||||
edges.each(function(d, i){
|
||||
// `this` is the DOM node
|
||||
this.setAttribute('x1', d.source.x);
|
||||
this.setAttribute('y1', d.source.y);
|
||||
this.setAttribute('x2', d.target.x);
|
||||
this.setAttribute('y2', d.target.y);
|
||||
if (d.cookieCount){
|
||||
this.classList.add('cookieYes');
|
||||
}else{
|
||||
this.classList.remove('cookieYes');
|
||||
}
|
||||
if (highlight.connections){
|
||||
this.classList.add('highlighted');
|
||||
}else{
|
||||
this.classList.remove('highlighted');
|
||||
}
|
||||
if (d.cookieCount > 0 && highlight.cookies){
|
||||
this.classList.add('coloured');
|
||||
}else{
|
||||
this.classList.remove('coloured');
|
||||
}
|
||||
});
|
||||
nodes.each(function(d,i){
|
||||
// `this` is the DOM node
|
||||
this.setAttribute('transform', 'translate(' + d.x + ',' + d.y + ') scale(' + (1 + .05 * d.weight) + ')');
|
||||
this.setAttribute('data-timestamp', d.lastAccess.toISOString());
|
||||
if (d.visitedCount){
|
||||
this.classList.add('visitedYes');
|
||||
this.classList.remove('visitedNo');
|
||||
}else{
|
||||
this.classList.add('visitedNo');
|
||||
this.classList.remove('visitedYes');
|
||||
}
|
||||
if (d.visitedCount && highlight.highlightVisited){
|
||||
this.classList.add('highlighted');
|
||||
}else if((!d.visitedCount) &&highlight.highlightNeverVisited){
|
||||
this.classList.add('highlighted');
|
||||
}else{
|
||||
this.classList.remove('highlighted');
|
||||
}
|
||||
});
|
||||
var endDraw = Date.now();
|
||||
draws.push(endDraw - lastTick);
|
||||
nodes.call(force.drag);
|
||||
|
|
@ -233,6 +267,7 @@ function resetCanvas(){
|
|||
var newcanvas = vizcanvas.cloneNode(false);
|
||||
parent.replaceChild(newcanvas, vizcanvas);
|
||||
vizcanvas = newcanvas;
|
||||
aggregate.off('updated', onUpdate);
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -125,7 +125,7 @@
|
|||
<div class="blue-label">DESCRIPTION</div>
|
||||
<p>
|
||||
In this graph visualization, you can see <svg class="legend-canvas-small" version="1.1" xmlns="http://www.w3.org/2000/svg"><circle class="visitedSites" cx="8" cy="8" r="6" /></svg> <b>circular nodes</b> that are websites you have visited, <svg class="legend-canvas-small" version="1.1" xmlns="http://www.w3.org/2000/svg"><polygon class="unvisitedSites" points="0,14 7,2 14,14" /></svg> <b>triangular nodes</b> are third party site and <svg class="legend-canvas-small" version="1.1" xmlns="http://www.w3.org/2000/svg"><line class="connectionLine" x1="14" y1="2" x2="2" y2="14" /></svg> <b>connections</b> between them.
|
||||
Over time, this graph will become a network of connecitons and nodes to visualize your relationship with the web.
|
||||
Over time, this graph will become a network of connections and nodes to visualize your relationship with the web.
|
||||
</p>
|
||||
<p>
|
||||
This graph may get complex quickly and to reduce the amount of info displayed use <b>SESSIONS</b> to help focus on a set of data.
|
||||
|
|
@ -167,7 +167,7 @@
|
|||
<section>
|
||||
<div class="blue-label">DESCRIPTION</div>
|
||||
<p>
|
||||
In this clock visualization, you can see <svg class="legend-canvas-small" version="1.1" xmlns="http://www.w3.org/2000/svg"><circle class="visitedSites" cx="8" cy="8" r="6" /></svg> <b>circular nodes</b> in <span style="color:#72AC45"><b>green</b></span> represents websites you have visited and <span style="color:#968BCD"><b>purple</b></span> nodes that are sites you have not but still connected to you and the connecitons between them. Over time, this view reveals patterns across the arch that represent your browsing behavirous according to time and your relationship with the web.
|
||||
In this clock visualization, you can see <svg class="legend-canvas-small" version="1.1" xmlns="http://www.w3.org/2000/svg"><circle class="visitedSites" cx="8" cy="8" r="6" /></svg> <b>circular nodes</b> in <span style="color:#72AC45"><b>green</b></span> represents websites you have visited and <span style="color:#968BCD"><b>purple</b></span> nodes that are sites you have not but still connected to you and the connections between them. Over time, this view reveals patterns across the arch that represent your browsing behavirous according to time and your relationship with the web.
|
||||
</p>
|
||||
<p>
|
||||
This visualization becomes populated as 15 minutes increments on the arc and the previous (24 hour) session is seen faded to compare data from the previous day.
|
||||
|
|
@ -466,7 +466,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div id="tooltip"></div>
|
||||
<script src="d3.v3.js"></script>
|
||||
<script src="d3.v3.min.js"></script>
|
||||
<script src="events.js"></script>
|
||||
<script src="infobar.js"></script>
|
||||
<script src="collusion.js"></script>
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ visualizations.list = list;
|
|||
list.name = "list";
|
||||
|
||||
list.on("init", onInit);
|
||||
list.on("conneciton", onConnection);
|
||||
// list.on("connection", onConnection);
|
||||
list.on("remove", onRemove);
|
||||
list.on("showFilteredTable", function(filter){
|
||||
showFilteredTable(filter);
|
||||
|
|
@ -20,7 +20,6 @@ list.on("showFilteredTable", function(filter){
|
|||
function onInit(connections){
|
||||
vizcanvas.classList.add("hide"); // we don't need vizcanvas here, so hide it
|
||||
// A D3 visualization has a two main components, data-shaping, and setting up the D3 callbacks
|
||||
aggregate.emit('load', connections);
|
||||
// This binds our data to the D3 visualization and sets up the callbacks
|
||||
initList();
|
||||
initializeHandlers();
|
||||
|
|
@ -107,7 +106,7 @@ function showFilteredTable(filter){
|
|||
|
||||
function getNodes(filter){
|
||||
if( !filter ){ // if no filter, show all
|
||||
return aggregate.allnodes;
|
||||
return aggregate.nodes;
|
||||
}else{
|
||||
var nodeMap = aggregate.nodeForKey(filter);
|
||||
return Object.keys(nodeMap).map(function(key){ return nodeMap[key]; });
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче