renaming, cleanup
This commit is contained in:
Michael Murtaugh
326
src/wikimap.js
326
src/wikimap.js
@@ -1,142 +1,172 @@
|
||||
import { event, select, selectAll} from 'd3-selection';
|
||||
import { values, set, map } from 'd3-collection';
|
||||
import { drag } from 'd3-drag';
|
||||
import { zoom } from 'd3-zoom';
|
||||
import { forceSimulation, forceLink, forceManyBody, forceCenter, forceX, forceY, forceRadial } from 'd3-force';
|
||||
import { Wiki, Page } from './wiki.js';
|
||||
import EventEmitter from 'eventemitter3';
|
||||
import { json } from 'd3-fetch';
|
||||
|
||||
import { ForceNet } from './forcenet.js';
|
||||
|
||||
export class Map {
|
||||
|
||||
constructor (apiurl) {
|
||||
constructor (symbols) {
|
||||
var width = 600,
|
||||
height = 600;
|
||||
this.wiki = new Wiki(apiurl);
|
||||
|
||||
this.events = new EventEmitter();
|
||||
this.active_page = null;
|
||||
// this.nodes = {};
|
||||
this.simulation = forceSimulation()
|
||||
.velocityDecay(0.1)
|
||||
.force("link", forceLink().id(d => d.title))
|
||||
.force("charge", forceManyBody())
|
||||
.force("radial", forceRadial(180, width/2, height/2));
|
||||
// .force("center", forceCenter(width / 2, height / 2));
|
||||
this.symbols = symbols;
|
||||
this.net = new ForceNet(symbols);
|
||||
this.net.on("nodeclick", this.nodeclick.bind(this));
|
||||
// this.simulation = forceSimulation()
|
||||
// .velocityDecay(0.1)
|
||||
// .force("link", forceLink().id(d => d.title))
|
||||
// .force("charge", forceManyBody())
|
||||
// .force("radial", forceRadial(180, width/2, height/2));
|
||||
// // .force("center", forceCenter(width / 2, height / 2));
|
||||
this.svg = null;
|
||||
this.historylinks = {};
|
||||
this.links = null;
|
||||
this.highlight_category = null;
|
||||
this.show_history = false;
|
||||
}
|
||||
|
||||
nodeclick (d, elt) {
|
||||
console.log("nodeclick", d, elt, this);
|
||||
this.set_active_node(d, elt);
|
||||
}
|
||||
|
||||
init_svg (svg) {
|
||||
this.net.init_svg(svg);
|
||||
}
|
||||
|
||||
async load_json (source) {
|
||||
var data = await json(source);
|
||||
// console.log("got data!", data);
|
||||
// index the nodes by title, init link-arity count
|
||||
var index = {};
|
||||
this.nodes_by_title = index;
|
||||
for (let i=0, l=data.nodes.length; i<l; i++) {
|
||||
let node = data.nodes[i];
|
||||
node.count = 0;
|
||||
index[node.title] = node;
|
||||
}
|
||||
this.nodes = data.nodes;
|
||||
|
||||
var use_links = [];
|
||||
data.links = data.links.forEach(x => {
|
||||
var source = index[x.source],
|
||||
target = index[x.target];
|
||||
if (source === undefined) {
|
||||
console.log("bad source", x.source);
|
||||
return;
|
||||
}
|
||||
if (target === undefined) {
|
||||
console.log("bad target", x.target);
|
||||
return;
|
||||
}
|
||||
source.count += 1;
|
||||
target.count += 1;
|
||||
use_links.push({ source: source, target: target });
|
||||
});
|
||||
data.links = use_links;
|
||||
this.links = data.links;
|
||||
// console.log("data", data);
|
||||
// calculate the node sizes (link arity)
|
||||
this.net.update_graph(data);
|
||||
}
|
||||
|
||||
get_symbol_image_path (cname) {
|
||||
var symbol = this.symbols[cname];
|
||||
if (symbol) {
|
||||
let hpos = symbol.indexOf("#"),
|
||||
rest = symbol.substr(hpos+1);
|
||||
rest = rest.replace(/'/g, '');
|
||||
return "img/"+rest+".png";
|
||||
}
|
||||
}
|
||||
async load_cats (src, elt) {
|
||||
var data = await json(src);
|
||||
|
||||
console.log("indexing categories by title");
|
||||
var cats_by_title = {};
|
||||
for (let i=0, l=data.length; i<l; i++) {
|
||||
let cat = data[i];
|
||||
cats_by_title[cat.title] = cat;
|
||||
cat.pages = [];
|
||||
cat.tcount = 0;
|
||||
}
|
||||
// index categories
|
||||
console.log("indexing categories");
|
||||
for (let key in this.nodes_by_title) {
|
||||
let node = this.nodes_by_title[key];
|
||||
// console.log("key", key, node.cats);
|
||||
for (let j=0, jl=node.cats.length; j<jl; j++) {
|
||||
let cname = node.cats[j],
|
||||
cat = cats_by_title[cname];
|
||||
if (cat) {
|
||||
// increment the category + parents
|
||||
cat.pages.push(node);
|
||||
cat.tcount += 1
|
||||
while (cat.parent) {
|
||||
cat = cats_by_title[cat.parent];
|
||||
cat.tcount += 1;
|
||||
}
|
||||
} else {
|
||||
console.log("Warning, unknown category", cname);
|
||||
}
|
||||
}
|
||||
}
|
||||
console.log("pre filter", data.length);
|
||||
data = data.filter(d => d.tcount > 0)
|
||||
console.log("post filter", data.length);
|
||||
console.log("load_cats.data", data, elt);
|
||||
var cat = select(elt)
|
||||
.selectAll("div.cat")
|
||||
.data(data)
|
||||
.enter()
|
||||
.append("div")
|
||||
.attr("class", "cat");
|
||||
cat.classed("icon", d => this.get_symbol_image_path(d.title));
|
||||
cat.append("span").attr("class", "icon").filter(d=> this.get_symbol_image_path(d.title)).style("background-image", d => "url("+this.get_symbol_image_path(d.title)+")");
|
||||
cat.append("span").attr("class", "spacing").html(d => {
|
||||
var d = d.depth,
|
||||
ret = "";
|
||||
while(d) {
|
||||
ret += " ";
|
||||
d-=1;
|
||||
}
|
||||
return ret;
|
||||
});
|
||||
cat.append("a").attr("class", "label").html(d => d.title).attr("href", "#").on("click", d => {
|
||||
event.preventDefault();
|
||||
this.category_click(d);
|
||||
})
|
||||
cat.append("span").attr("class", "count").html(d => d.tcount)
|
||||
}
|
||||
|
||||
category_click (d) {
|
||||
console.log("category click", d);
|
||||
if (this.highlight_category) {
|
||||
// cleanup old pages
|
||||
this.highlight_category.pages.forEach(d => d.highlight = false);
|
||||
}
|
||||
this.highlight_category = d;
|
||||
this.highlight_category.pages.forEach(d => d.highlight = true);
|
||||
this.net.update_nodes();
|
||||
// set highlight category...
|
||||
// all nodes with this category get .highlight = true
|
||||
// make a category index ?!
|
||||
}
|
||||
|
||||
on (message, callback, context) {
|
||||
this.events.on(message, callback, context);
|
||||
}
|
||||
|
||||
init_svg (svg) {
|
||||
this.svg = select(svg || "svg");
|
||||
this.linksg = this.svg.append("g")
|
||||
.attr("class", "links");
|
||||
this.nodesg = this.svg.append("g")
|
||||
.attr("class", "nodes");
|
||||
}
|
||||
|
||||
dragstarted (d) {
|
||||
if (!event.active) this.simulation.alphaTarget(0.3).restart();
|
||||
d.fx = d.x;
|
||||
d.fy = d.y;
|
||||
}
|
||||
|
||||
dragged (d) {
|
||||
d.fx = event.x;
|
||||
d.fy = event.y;
|
||||
}
|
||||
|
||||
dragended(d) {
|
||||
if (!event.active) this.simulation.alphaTarget(0);
|
||||
d.fx = null;
|
||||
d.fy = null;
|
||||
}
|
||||
|
||||
update_graph (graph) {
|
||||
// console.log("UPDATE GRAPH", graph.nodes.length, graph.links.length);
|
||||
var that = this,
|
||||
link = this.linksg.selectAll("line")
|
||||
.data(graph.links, function (d) { return that.link_key(d.source.title, d.target.title) });
|
||||
var link_enter = link.enter()
|
||||
.append("line");
|
||||
|
||||
link.exit().each(d => {
|
||||
d.source.linked = false;
|
||||
d.target.linked = false;
|
||||
}).remove();
|
||||
|
||||
link_enter.merge(link).each(d => {
|
||||
d.source.linked = true;
|
||||
d.target.linked = true;
|
||||
});
|
||||
|
||||
var node = this.nodesg
|
||||
.selectAll("g.page")
|
||||
.data(graph.nodes, function (d) { return d.title });
|
||||
|
||||
var node_enter = node.enter().append("g")
|
||||
.attr("class", d=>"page "+this.wiki.get_ns_classname(d.ns))
|
||||
.on("click", d => {
|
||||
this.set_active_node(d.title);
|
||||
})
|
||||
.on("mouseover", function (d) {
|
||||
// console.log("mouseover", this);
|
||||
select(this).classed("mouse", true);
|
||||
})
|
||||
.on("mouseout", function (d) {
|
||||
// console.log("mouseout", this);
|
||||
select(this).classed("mouse", false);
|
||||
})
|
||||
.call(drag()
|
||||
.on("start", this.dragstarted.bind(this))
|
||||
.on("drag", this.dragged.bind(this))
|
||||
.on("end", this.dragended.bind(this)));
|
||||
|
||||
node_enter.append("circle")
|
||||
.attr("r", 6);
|
||||
|
||||
node_enter.append("text")
|
||||
.text(d => d.title)
|
||||
.attr("x", 10);
|
||||
|
||||
//node_enter.append("title")
|
||||
// .text(function(d) { return d.title; });
|
||||
|
||||
node = node_enter.merge(node);
|
||||
link = link_enter.merge(link);
|
||||
|
||||
node.classed("active", d=>d.active);
|
||||
|
||||
this.simulation
|
||||
.nodes(graph.nodes)
|
||||
.on("tick", ticked);
|
||||
|
||||
this.simulation.force("link")
|
||||
.links(graph.links);
|
||||
|
||||
this.simulation.force("radial").radius(d => d.linked ? null : 200);
|
||||
|
||||
function ticked() {
|
||||
link
|
||||
.attr("x1", function(d) { return d.source.x; })
|
||||
.attr("y1", function(d) { return d.source.y; })
|
||||
.attr("x2", function(d) { return d.target.x; })
|
||||
.attr("y2", function(d) { return d.target.y; });
|
||||
|
||||
// node
|
||||
// .attr("cx", function(d) { return d.x; })
|
||||
// .attr("cy", function(d) { return d.y; });
|
||||
node
|
||||
.attr("transform", d => `translate(${d.x},${d.y})`);
|
||||
}
|
||||
this.simulation.alphaTarget(0.3).restart();
|
||||
}
|
||||
|
||||
link_key (a, b) {
|
||||
return (a < b) ? ("link_"+a+"_"+b) : ("link_"+b+"_"+a);
|
||||
}
|
||||
|
||||
/* OLD STYLE with node.all_links
|
||||
walk (node, links) {
|
||||
var links_seen = {};
|
||||
// var node = this.ensure_node(nodename);
|
||||
@@ -149,35 +179,78 @@ export class Map {
|
||||
})
|
||||
return;
|
||||
}
|
||||
|
||||
*/
|
||||
set_active_title (title) {
|
||||
this.set_active_node(title);
|
||||
}
|
||||
|
||||
activate_linked_nodes (page, active) {
|
||||
// deactivate linked links/nodes
|
||||
for (let i=0, l=this.links.length; i<l; i++) {
|
||||
let link = this.links[i];
|
||||
if (link.source == page || link.target == page) {
|
||||
link.active2 = active;
|
||||
link.source.active2 = active;
|
||||
link.target.active2 = active;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async set_active_node (page) {
|
||||
if (typeof(page) === "string") {
|
||||
page = this.wiki.get_page_by_title(page)
|
||||
}
|
||||
let pagename = page;
|
||||
page = this.nodes_by_title[page];
|
||||
|
||||
if (!page) {
|
||||
console.log("wikimap.set_active_node: page not found", pagename);
|
||||
}
|
||||
}
|
||||
if (page === this.active_page) {
|
||||
// console.log("page is already the active page", page, this.active_page);
|
||||
return;
|
||||
}
|
||||
if (this.active_page) {
|
||||
this.active_page.active = false;
|
||||
var lkey = this.link_key(this.active_page.title, page.title),
|
||||
source = (this.active_page.title < page.title) ? this.active_page : page,
|
||||
target = (this.active_page.title < page.title) ? page : this.active_page;
|
||||
this.historylinks[lkey] = {source: source, target: target};
|
||||
// deactivate linked links/nodes
|
||||
this.activate_linked_nodes(this.active_page, false);
|
||||
// ENSURE HISTORY LINK TO PREVIOUS NODE AND CURRENT
|
||||
var lkey = this.net.link_key(this.active_page.title, page.title),
|
||||
source = (this.active_page.title < page.title) ? this.active_page : page,
|
||||
target = (this.active_page.title < page.title) ? page : this.active_page;
|
||||
this.historylinks[lkey] = {source: source, target: target, type:"history"};
|
||||
}
|
||||
// n = this.ensure_node(pagetitle);
|
||||
|
||||
this.active_page = page;
|
||||
this.active_page.active = true;
|
||||
this.load(this.active_page);
|
||||
this.activate_linked_nodes(this.active_page, true);
|
||||
|
||||
this.events.emit("page", this.active_page.title);
|
||||
|
||||
this.net.update_nodes();
|
||||
this.net.update_forces();
|
||||
}
|
||||
|
||||
set_show_history (value) {
|
||||
console.log("wikimap.show_history", value);
|
||||
if (this.show_history !== value) {
|
||||
this.show_history = value;
|
||||
if (this.show_history) {
|
||||
let graph = {};
|
||||
graph.nodes = this.nodes;
|
||||
graph.links = this.links.slice();
|
||||
for (var key in this.historylinks) {
|
||||
graph.links.push(this.historylinks[key])
|
||||
}
|
||||
this.net.update_graph(graph);
|
||||
} else {
|
||||
let graph = {};
|
||||
graph.nodes = this.nodes;
|
||||
graph.links = this.links;
|
||||
this.net.update_graph(graph);
|
||||
}
|
||||
}
|
||||
}
|
||||
/*
|
||||
async load (page) {
|
||||
console.log("loading", page.title);
|
||||
var links = await page.get_links(),
|
||||
@@ -200,6 +273,7 @@ export class Map {
|
||||
// console.log("GOT DATA", titles);
|
||||
// return titles;
|
||||
}
|
||||
*/
|
||||
}
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user