1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
|
"use strict";
var mv = function(mv) {
mv.socket = {
connect: connect
};
/* If we're updating due to something we received, then don't broadcast back. */
var netrendering = false;
/* Our ID */
var id = 0;
/* List of all users */
var users = {};
/* The user status box */
var usersStatus = d3.select("#users-status");
/* io.socket's socket */
var socket;
function connect() {
socket = io.connect('http://localhost:3000');
socket.on("connect", function() { console.log("CONNECT", arguments); });
socket.on("disconnect", function() { console.log("DISCONNECT", arguments); });
d3.select("#connect-status").style("display", "block");
socket.emit('login');
/*
* Protocol:
* selflogin -> id (I)
* login -> id (I), nick (S)
* nickset -> id (I), nick (S)
* users -> { id -> {nick (S), filters ({dim (S) -> filter (*)}) } }
* logout -> id (I)
*/
socket.on('selflogin', function(d) {
/* Acknowledged that we logged in */
/* Take note of our ID. */
id = d.id;
});
socket.on('login', function(d) {
/* Someone else logging in */
users[d.id] = { nick: d.nick, filters: {} };
updateUsersStatus();
});
socket.on('users', function(d) {
/* We've got a list of all users. */
/* The server is always right. */
users = d.users;
updateUsersStatus();
});
socket.on('nickset', function(d) {
/* Someone, possibly us, changed their nick. */
users[d.id].nick = d.nick;
updateUsersStatus();
});
socket.on('filterset', function(d) {
/* Someone changed their filter */
users[d.id].filters = d.filters;
/* Use the variable netrendering to denote that we're rendering due to a change received from the network. */
netrendering = true;
setOwnFilters(d.filters);
netrendering = false;
});
socket.on('logout', function(d) {
/* Someone disconnected, take them off the list. */
delete users[d.id];
updateUsersStatus();
});
/*
* Remember the old renderlet
* FIXME: Find a more elegant way to do this
*/
var f = dc.renderlet();
dc.renderlet(function() {
/* Hook a listener into dc's rendering routine. If it rerenders, broadcast the change. */
if (netrendering) {
/* If we rendered due a change we received, don't broadcast it again. That would be A Bad Thing. */
return;
}
socket.emit("filter", { filters: mv.charter.filters() });
/* Call the old renderlet */
f();
});
}
function setOwnFilters(filters) {
/* See if there's any difference - if there isn't, don't update. */
var change = false;
var key;
/* Check for keys in the filters to apply which are not in our charts. */
for (key in filters) {
if (!(key in mv.charts))
continue;
var filter = mv.charts[key].filter();
if (typeof(filter) == "array") {
/* Crossfilter uses arrays to filter ranges. Exactly the first two elements are significant. */
if (filter[0] == filters[key][0] &&
filter[1] == filters[key][1]) {
continue;
}
} else if (filter == filters[key]) {
continue;
}
/* This filter differs. Apply it. */
change = true;
mv.charts[key].filter(filters[key]);
}
/* Check for keys in our charts which are not in the filters to apply. */
for (key in mv.charts) {
if (mv.charts[key].filter() != null) {
if (key in filters) {
/* This has already been handled above */
continue;
}
/* There is no longer a filter applying here, clear it. */
change = true;
mv.charts[key].filterAll();
}
}
if (change) {
dc.redrawAll();
}
}
function updateUsersStatus() {
/* Convert the user list to a form suitable for a d3 selection */
var data = [];
for (var uid in users) { users[uid].id = uid; data.push(users[uid]); }
/* Data join */
var userlist = usersStatus.selectAll(".user")
.data(data, function(d) { return d.id; });
/* Enter */
userlist
.enter().append("li").attr("class", "user")
;
/* Update */
userlist
.each(function(d,i) {
var elm = d3.select(this);
console.log("Userlist para appending", d,i);
var name = elm.select(".name");
var nick = d.nick == null ? "Anonymous User " + d.id : d.nick;
if (d.id == id) {
/* This is us! We can edit our name. */
if (name.empty()) {
console.log("Found our entry. id:", id, "datum", d);
name = elm.append("input").attr("class", "name")
.attr("type", "text")
.attr("placeholder", "Enter name here")
.on("change", function () {
/* A d3 select must be dereferenced twice to access the DOM entity */
socket.emit("nick", { nick: name[0][0].value });
})
;
}
name.attr("value", nick);
} else {
/* This is someone else. We can't edit their name. */
if (name.empty()) {
name = elm.append("p").attr("class", "name");
}
name.text(nick);
}
})
;
/* Remove */
userlist
.exit().remove()
;
}
return mv;
}(mv || {});
|
