Skip to content

Commit 25d432d

Browse files
lumos309geshuming
lumos309
authored and
geshuming
committed
DATA VIZ: Fix bugs, incorrect string and null displays (#871)
* Fix bugs, incorrect string and null displays * Fix numbers not displaying correctly * Fix data visualizer breaking
1 parent 28a0776 commit 25d432d

File tree

1 file changed

+72
-23
lines changed

1 file changed

+72
-23
lines changed

‎public/externalLibs/visualizer/visualizer.js

Lines changed: 72 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -30,13 +30,13 @@
3030
thisNode.left = construct_tree(head(lst))
3131
}
3232
} else if (is_function(head(lst))) { // draw the function object
33-
if (perms.indexOf(head(lst)) > -1) { // check if function has been drawn
34-
thisNode.leftid = perms.indexOf(head(lst))
35-
} else {
36-
thisNode.left = construct_function(head(lst))
37-
}
33+
if (perms.indexOf(head(lst)) > -1) { // check if function has been drawn
34+
thisNode.leftid = perms.indexOf(head(lst))
35+
} else {
36+
thisNode.left = construct_function(head(lst))
37+
}
3838
} else {
39-
// otherwise, it's a data item
39+
// otherwise, it's a data item
4040
thisNode.data = head(lst)
4141
}
4242
// similarly for right subtree.
@@ -47,11 +47,11 @@
4747
thisNode.right = construct_tree(tail(lst))
4848
}
4949
} else if (is_function(tail(lst))) {
50-
if (perms.indexOf(tail(lst)) > -1) {
51-
thisNode.rightid = perms.indexOf(tail(lst))
52-
} else {
53-
thisNode.right = construct_function(tail(lst))
54-
}
50+
if (perms.indexOf(tail(lst)) > -1) {
51+
thisNode.rightid = perms.indexOf(tail(lst))
52+
} else {
53+
thisNode.right = construct_function(tail(lst))
54+
}
5555
} else {
5656
thisNode.data2 = tail(lst)
5757
}
@@ -182,6 +182,9 @@
182182
// if it's left child is part of a cycle and it's been drawn, link back to that node instead
183183
} else if (node.leftid != null) {
184184
backwardLeftEdge(x, y, nodelist[node.leftid].getX(), nodelist[node.leftid].getY(), layer)
185+
} else if ((node.data === null) && !!node.isFunction) {
186+
var nullbox = new NodeEmptyHead_list(x, y)
187+
nullbox.put(layer)
185188
}
186189

187190
// similarly for right child
@@ -227,6 +230,9 @@
227230
this.drawLeft(node.left, x, y, layer)
228231
} else if (node.leftid != null) {
229232
backwardLeftEdge(x, y, nodelist[node.leftid].getX(), nodelist[node.leftid].getY(), layer)
233+
} else if ((node.data === null) && !node.isFunction) {
234+
var nullbox = new NodeEmptyHead_list(x, y)
235+
nullbox.put(layer)
230236
}
231237
if (node.right !== null) {
232238
this.drawRight(node.right, x, y, layer)
@@ -266,6 +272,9 @@
266272
this.drawLeft(node.left, x, y, layer)
267273
} else if (node.leftid != null) {
268274
backwardLeftEdge(x, y, nodelist[node.leftid].getX(), nodelist[node.leftid].getY(), layer)
275+
} else if ((node.data === null) && !node.isFunction) {
276+
var nullbox = new NodeEmptyHead_list(x, y)
277+
nullbox.put(layer)
269278
}
270279
if (node.right !== null) {
271280
this.drawRight(node.right, x, y, layer)
@@ -354,20 +363,22 @@
354363
/**
355364
* Try to fit any data into the box. If not possible, assign a number and log it in the console.
356365
*/
357-
function toText(data, full) {
366+
function toText(data, full) {
358367
if (full) {
359368
return '' + data
360369
} else {
361370
var type = typeof data
362371
if (type === 'function' || type === 'object') {
363372
return false
364-
} else {
373+
} else if (type === "string") {
365374
var str = '' + data
366375
if (str.length > 5) {
367376
return false
368377
} else {
369-
return str
378+
return '"' + str + '"'
370379
}
380+
} else {
381+
return '' + data
371382
}
372383
}
373384
}
@@ -504,7 +515,7 @@
504515
}
505516

506517
/**
507-
* Connects a NodeBox to it's parent at x,y by using line segments with arrow head
518+
* Connects a NodeBox to its parent at x,y by using line segments with arrow head
508519
*/
509520
NodeBox.prototype.connectTo = function(x, y) {
510521
// starting point
@@ -762,9 +773,9 @@
762773
x1 + tcon.boxWidth * 3 / 4,
763774
y1 + tcon.boxSpacingY * 3 / 4,
764775
x1 + tcon.boxWidth * 3 / 4,
765-
y2 - tcon.boxSpacingY * 3 / 8,
776+
y2 - tcon.boxSpacingY * 3 / 8 + 7,
766777
x2 + tcon.boxWidth / 4 + tcon.arrowSpaceH,
767-
y2 - tcon.boxSpacingY * 3 / 8,
778+
y2 - tcon.boxSpacingY * 3 / 8 + 7,
768779
x2 + tcon.boxWidth / 4 + tcon.arrowSpaceH,
769780
y2 - tcon.arrowSpace
770781
]
@@ -855,6 +866,44 @@
855866
return this.image
856867
}
857868

869+
/**
870+
* Complements a NodeBox when the head is an empty box.
871+
*/
872+
function NodeEmptyHead_list(x, y) {
873+
var null_box = new Kinetic.Line({
874+
x: x - tcon.boxWidth / 2,
875+
y: y,
876+
points: [
877+
tcon.boxWidth * tcon.vertBarPos,
878+
tcon.boxHeight,
879+
tcon.boxWidth * tcon.vertBarPos,
880+
0,
881+
tcon.boxWidth,
882+
0,
883+
tcon.boxWidth * tcon.vertBarPos,
884+
tcon.boxHeight,
885+
tcon.boxWidth,
886+
tcon.boxHeight,
887+
tcon.boxWidth,
888+
0
889+
],
890+
strokeWidth: tcon.strokeWidth - 1,
891+
stroke: 'white'
892+
})
893+
this.image = null_box
894+
}
895+
896+
/**
897+
* Adds it to a container
898+
*/
899+
NodeEmptyHead_list.prototype.put = function(container) {
900+
container.add(this.image)
901+
}
902+
903+
NodeEmptyHead_list.prototype.getRaw = function() {
904+
return this.image
905+
}
906+
858907
// A list of layers drawn, used for history
859908
var layerList = []
860909
// ID of the current layer shown. Avoid changing this value externally as layer is not updated.
@@ -982,20 +1031,20 @@
9821031
const existing = [];
9831032

9841033
function helper(xs) {
985-
if ((!is_pair(xs) && !is_array(xs)) || is_null(xs)) {
1034+
if ((!is_pair(xs) && !is_function(xs)) || is_null(xs)) {
9861035
return 0;
9871036
} else {
9881037
let leftHeight;
9891038
let rightHeight;
9901039
if (existing.includes(xs[0])
991-
|| (!is_pair(xs[0]) && (!is_array(xs[0])))) {
1040+
|| (!is_pair(xs[0]) && !is_function(xs[0]))) {
9921041
leftHeight = 0;
9931042
} else {
9941043
existing.push(xs[0]);
9951044
leftHeight = helper(xs[0]);
9961045
}
9971046
if (existing.includes(xs[1])
998-
|| (!is_pair(xs[1]) && (!is_array(xs[1])))) {
1047+
|| (!is_pair(xs[1]) && !is_function(xs[1]))) {
9991048
rightHeight = 0;
10001049
} else {
10011050
existing.push(xs[1]);
@@ -1017,20 +1066,20 @@
10171066
const existing = [];
10181067

10191068
function helper(xs) {
1020-
if ((!is_pair(xs) && !is_array(xs)) || is_null(xs)) {
1069+
if ((!is_pair(xs) && !is_function(xs)) || is_null(xs)) {
10211070
return 0;
10221071
} else {
10231072
let leftWidth;
10241073
let rightWidth;
10251074
if (existing.includes(xs[0])
1026-
|| (!is_pair(xs[0]) && (!is_array(xs[0])))) {
1075+
|| (!is_pair(xs[0]) && !is_function(xs[0]))) {
10271076
leftWidth = 0;
10281077
} else {
10291078
existing.push(xs[0]);
10301079
leftWidth = helper(xs[0]);
10311080
}
10321081
if (existing.includes(xs[1])
1033-
|| (!is_pair(xs[1]) && (!is_array(xs[1])))) {
1082+
|| (!is_pair(xs[1]) && !is_function(xs[1]))) {
10341083
rightWidth = 0;
10351084
} else {
10361085
existing.push(xs[1]);

0 commit comments

Comments
 (0)