Skip to content

Commit 5f26faf

Browse files
lee-naishlee-naish
committed
BFS edge colours now highlight frontier
1 parent 161531a commit 5f26faf

File tree

1 file changed

+72
-52
lines changed
  • src/algorithms/controllers

1 file changed

+72
-52
lines changed

‎src/algorithms/controllers/BFS.js

Lines changed: 72 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,22 @@
33
import GraphTracer from '../../components/DataStructures/Graph/GraphTracer';
44
import Array2DTracer from '../../components/DataStructures/Array/Array2DTracer';
55

6+
// Colors for array, graph nodes, graph edges
67
// OMG, colors for array and graph require different types and are
78
// inconsistent!
89
// XXX not sure how this interracts with color perception options -
910
// doesnt seem to work like this
1011
// XXX should do similar for edge colors?
1112
const FRONTIER_COLOR_A = '0'; // Blue
12-
const FRONTIER_COLOR_G = 4; // Blue
13+
const FRONTIER_COLOR_N = 4; // Blue
14+
const FRONTIER_COLOR_E = 4; // Blue
15+
const N_M_COLOR_E = 2; // Orange - edge between n and m
1316
const FINALISED_COLOR_A = '1'; // Green
14-
const FINALISED_COLOR_G = 1; // Green
17+
const FINALISED_COLOR_N = 1; // Green
18+
const FINALISED_COLOR_E = 3; // Red
19+
// if we find a path to end node:
20+
const SUCCESS_COLOR_A = '1'; // Green
21+
const SUCCESS_COLOR_E = 1; // Green
1522

1623
export default {
1724
initVisualisers() {
@@ -73,7 +80,7 @@ export default {
7380
const end = endNodes[0] - 1;
7481

7582
let lastNeighbor = null;
76-
let n = null
83+
let n = null;
7784

7885
// BFS(G, s) B1
7986
chunker.add(
@@ -138,7 +145,7 @@ export default {
138145

139146
// select start node in blue
140147
vis.array.select(0,b + 1);
141-
vis.graph.colorNode(b, FRONTIER_COLOR_G);
148+
vis.graph.colorNode(b, FRONTIER_COLOR_N);
142149
},
143150
[[displayedNodes, displayedParent, displayedVisited], displayedQueue, explored, visited, s, Nodes]
144151
);
@@ -162,7 +169,7 @@ export default {
162169
while (Nodes.length > 0) {
163170
chunker.add(
164171
2,
165-
(vis, c_n, y, z, c_visited, c_Nodes) => {
172+
(vis, c_n, c_lastNei, c_parent, c_visited, c_Nodes) => {
166173
// removes m if it exists; need to redo node selection etc
167174
// for green nodes:(
168175
vis.array.assignVariable('m', 2, undefined); // removes m if there
@@ -181,23 +188,25 @@ export default {
181188

182189
// remove the highlight between n
183190
// and the last visited neighbor
184-
if((c_n != null) && (y != null)){
185-
vis.graph.removeEdgeColor(c_n, y);
186-
// recolor its edge connecting to its parent
187-
if(z[y] != null){
188-
vis.graph.removeEdgeColor(z[y], y);
189-
vis.graph.colorEdge(z[y], y, 3);
190-
}
191-
191+
if((c_n != null) && (c_lastNei != null)){
192+
193+
vis.graph.removeEdgeColor(c_n, c_lastNei);
194+
let prevColor;
195+
if (c_Nodes.includes(c_lastNei))
196+
prevColor = FRONTIER_COLOR_E;
197+
else
198+
prevColor = FINALISED_COLOR_E;
199+
vis.graph.removeEdgeColor(c_n, c_lastNei);
200+
vis.graph.colorEdge(c_n, c_lastNei, prevColor);
192201
}
193202

194-
// recolor in red if it has a child
195-
for(let i = 0; i < z.length; i ++){
196-
if (z[i] == y){
197-
vis.graph.removeEdgeColor(i, y);
198-
vis.graph.colorEdge(i, y, 3);
199-
}
200-
}
203+
// // recolor in red if it has a child
204+
// for(let i = 0; i < c_parent.length; i ++){
205+
// if (c_parent[i] == c_lastNei){
206+
// vis.graph.removeEdgeColor(i, c_lastNei);
207+
// vis.graph.colorEdge(i, c_lastNei, FRONTIER_COLOR_E);
208+
// }
209+
// }
201210
},
202211
[n, lastNeighbor, parent, visited, Nodes]
203212

@@ -208,13 +217,13 @@ export default {
208217
displayedQueue.shift();
209218
chunker.add(
210219
10,
211-
(vis, x, y, z, a, b, Nodes) => {
220+
(vis, x, c_n, z, a, b, c_parent, Nodes) => {
212221
//reset
213222
vis.array.set(x,'BFS');
214223
//add a string "n" below the currently popped out node
215-
vis.array.assignVariable('n', 2, y + 1);
216-
217-
// highlight all finalised nodes in blue
224+
vis.array.assignVariable('n', 2, c_n + 1);
225+
226+
// highlight all frontier nodes
218227
for (let i = 0; i < a.length; i ++){
219228
if(a[i] == true && Nodes.includes(i)){
220229
vis.array.select(0,i + 1, 0, i + 1, FRONTIER_COLOR_A);
@@ -223,21 +232,28 @@ export default {
223232
}
224233
}
225234

226-
// highlight all other seen nodes in green
235+
// highlight all other finalised nodes
227236
for(let i = 0; i < b.length; i++)
228237
{
229238
if(b[i] == true && !Nodes.includes(i))
230239
{
231240
vis.array.select(0, i + 1, 0, i + 1, FINALISED_COLOR_A);
232241
vis.graph.removeNodeColor(i);
233-
vis.graph.colorNode(i, FINALISED_COLOR_G);
242+
vis.graph.colorNode(i, FINALISED_COLOR_N);
234243
}
235244
}
245+
246+
// finalise edge color to n from parent
247+
if (c_parent[c_n] !== null) {
248+
vis.graph.removeEdgeColor(c_n, c_parent[c_n]);
249+
vis.graph.colorEdge(c_n, c_parent[c_n], FINALISED_COLOR_E);
250+
}
236251

237252
//redisplay queue
238253
vis.array.setList(z);
239254
},
240-
[[displayedNodes, displayedParent, displayedVisited], n, displayedQueue, explored, visited, Nodes]
255+
[[displayedNodes, displayedParent, displayedVisited], n,
256+
displayedQueue, explored, visited, parent, Nodes]
241257
);
242258

243259
// If is_end_node(n) B11
@@ -260,14 +276,14 @@ export default {
260276
if(c_parent[y] != null)
261277
{
262278
vis.graph.removeEdgeColor(c_parent[y], y);
263-
vis.graph.colorEdge(c_parent[y], y , 3);
279+
vis.graph.colorEdge(c_parent[y], y , FRONTIER_COLOR_E);
264280
}
265281

266282
// recolor in red if it has a child
267283
for(let i = 0; i < c_parent.length; i ++){
268284
if (c_parent[i] == y){
269285
vis.graph.removeEdgeColor(i, y);
270-
vis.graph.colorEdge(i, y, 3);
286+
vis.graph.colorEdge(i, y, FRONTIER_COLOR_E);
271287
}
272288
}
273289
}
@@ -285,9 +301,9 @@ export default {
285301
// + color parent array
286302
while((current != a) && (c_parent[current] != null))
287303
{
288-
vis.array.select(1, current + 1, 1, current + 1, FINALISED_COLOR_A);
304+
vis.array.select(1, current + 1, 1, current + 1, SUCCESS_COLOR_A);
289305
vis.graph.removeEdgeColor(current, c_parent[current]);
290-
vis.graph.colorEdge(current, c_parent[current], 1);
306+
vis.graph.colorEdge(current, c_parent[current], SUCCESS_COLOR_E);
291307
current = c_parent[current];
292308
}
293309
},
@@ -298,45 +314,49 @@ export default {
298314
}
299315

300316
// for each node m neighbouring n B4
317+
lastNeighbor = null;
301318
for (let m = 0; m < numVertices; m++) {
302319

303320
if (E[n][m] != 0) {
304321

305322
chunker.add(
306323
4,
307-
(vis, c_n, c_m, z, a, c_visited, c_Nodes) => {
324+
(vis, c_n, c_m, c_lastNei, c_parent, c_visited, c_Nodes) => {
308325
//remove the color on Edge connecting the last neighbor
309326

310327

311328

312329
//remove the orange highlight from the edge connecting the last neighbour
313-
if (z != null)
330+
if (c_lastNei != null)
314331
{
315-
vis.graph.removeEdgeColor(c_n, z);
316-
317-
// recolor in red if it has a parent
318-
if(a[z] != null)
319-
{
320-
vis.graph.removeEdgeColor(a[z], z);
321-
vis.graph.colorEdge(a[z], z, 3);
332+
vis.graph.removeEdgeColor(c_n, c_lastNei);
333+
334+
// recolor if node has a parent or is start
335+
if(c_parent[c_lastNei] != null || c_lastNei == start) {
336+
vis.graph.removeEdgeColor(c_n, c_lastNei);
337+
// XXX if not just added or previously FINALISED_COLOR_E
338+
if (c_parent[c_n] === c_lastNei)
339+
vis.graph.colorEdge(c_n, c_lastNei, FINALISED_COLOR_E);
340+
else if (c_parent[c_lastNei] === c_n)
341+
vis.graph.colorEdge(c_n, c_lastNei, FRONTIER_COLOR_E);
322342
}
323343

324344
// recolor in red if it has a child
325-
for(let i = 0; i < a.length; i ++){
326-
if (a[i] == z){
327-
vis.graph.removeEdgeColor(i, z);
328-
vis.graph.colorEdge(i, z, 3);
329-
}
330-
}
345+
// for(let i = 0; i < c_parent.length; i ++){
346+
// if (c_parent[i] == c_lastNei){
347+
// vis.graph.removeEdgeColor(i, c_lastNei);
348+
// vis.graph.colorEdge(i, c_lastNei, FRONTIER_COLOR_E);
349+
// }
350+
// }
331351

332352
}
333353

334354
//highlight the edge connecting the neighbor
335355
vis.graph.removeEdgeColor(c_n,c_m);
336356
// color 2 = orange doesn't show up well - 4 = green better?
337-
vis.graph.colorEdge(c_n, c_m, 2);
357+
vis.graph.colorEdge(c_n, c_m, N_M_COLOR_E);
338358

339-
// add var m; need to color elements again:(
359+
// add var m; need to color elements again
340360
vis.array.assignVariable('m', 2, c_m + 1);
341361
// highlight all nodes explored in green in the array
342362
// and all other seen nodes in blue in the array
@@ -394,7 +414,7 @@ export default {
394414

395415
// color the graph node in blue as seen
396416
vis.graph.removeNodeColor(c_m);
397-
vis.graph.colorNode(c_m, FRONTIER_COLOR_G);
417+
vis.graph.colorNode(c_m, FRONTIER_COLOR_N);
398418
},
399419

400420
[[displayedNodes, displayedParent, displayedVisited], displayedQueue, explored, visited, n, m, Nodes]
@@ -433,7 +453,7 @@ export default {
433453

434454
//highlight the edge from n to this neighbor in red
435455
vis.graph.removeEdgeColor(b, c);
436-
vis.graph.colorEdge(b, c, 3);
456+
vis.graph.colorEdge(b, c, FRONTIER_COLOR_E);
437457

438458

439459
// vis.array.set(x, 'BFS');
@@ -483,14 +503,14 @@ export default {
483503
if(z[y] != null)
484504
{
485505
vis.graph.removeEdgeColor(z[y], y);
486-
vis.graph.colorEdge(z[y], y , 3);
506+
vis.graph.colorEdge(z[y], y , FRONTIER_COLOR_E);
487507
}
488508

489509
// recolor in red if it has a child
490510
for(let i = 0; i < z.length; i ++){
491511
if (z[i] == y){
492512
vis.graph.removeEdgeColor(i, y);
493-
vis.graph.colorEdge(i, y, 3);
513+
vis.graph.colorEdge(i, y, FRONTIER_COLOR_E);
494514
}
495515
}
496516
}

0 commit comments

Comments
 (0)