With the program:

var x = { value: 1, next: null};
var x = { value: 2, next: x};

The object pointed by x at the end of line 2 has null in the next field. When you remove "var" at the begging of line 2, the next field will point to an object with value 1. According to the semantics of JavaScript, "redeclaration of a variable will not lose its value" (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var). So the code without var on the second line should behave similar to the one with var.

The following code raises an "x is undefined" error at (seemingly) x.car in the else branch.

function append(x, y) {
    if (x===null) {
        return y;
    } else {
        return {car: x.car, cdr: append(x.cdr, y)};
    }
}

var l1 = { car: 123, cdr: null };
var l2 = { car: 456, cdr: null };
var l1 = append(l1,l2);

Classes that use inheritance won't run.

• TODO: make a minimal example
• Related: it silently fails; no error messages are shown
• Possible causes: the instrumentation process inserts some code before the super call in a subclass' constructor, which is not allowed in JS.
• Other possibilities: even there are no constructors in the super and sub classes, it doesn't work. So there could be more problems.

In the diagram at the end of execution (like the one in the attached image), the node val=555 is inserted by a top-level function ins. Clicking on the references around that node (i.e., the next field to this node, the next field in this node to the node(val=444), and the val field to 555) does nothing.

On the other hand, a click on the reference from Node(val=444) to Node(val=3) changes the context. Note that node(val=444) is created inside of the insert method in class Node, not a top-level function.

Also, when we declare a local variable to an object, a green arrow to that object appears in the diagram. However, when I was writing ins, the top-level function, I did not see such an arrow.

class Node {
    constructor(val, next) {
        this.val = val;
        this.next = next;
    }
    insert(pos, val) {
        var l = this;
        while (pos>0) {
            pos = pos - 1;
            l = l.next;
        }
        var n = new Node(val, null);
        n.next = l.next;
        l.next = n;
    }
}
function ins(node,pos,val) {
    var l = node;
    while (pos>0) {
        pos = pos -1;
        l = l.next;
    }
    l.next = new Node(val,l.next);
}

var lst = new Node(1, 
            new Node(2, 
                new Node(3, null)));
lst.insert(1,444);
ins(lst,1,555);

With this code

class C { }
class D extends C {
    constructor() {}
}
var v = new D()

I get an error Error?: |this| used uninitialized in D class constructor

It reminds me a restriction in Java, where you should write a call to the super-constructor at the beginning of a constructor. You are also not safe to access fields of this before finishing the call to the super-constructor.

When I replace either of [1] or [2] with [ ], the diagram will disappear.

Interestingly, a diagram is drawn when both of [1] and [2] are replaced with [ ].

I think the buffer should be cleared when this application is quitted.

In the following graph, we cannot access a node that has 2 as a property val. But the node should be removed in this view.

In the current implementation, there is a feature that shows/hides specific classes. The UI of this feature is a list of class names with check boxes, which are not nice. Consider better UI and implement that.

One idea is:

• for hiding, right-click a node in the graph, select a menu item "hide".
• for showing, provide a button "Hidden classes" which shows a dialog that lists a hidden class names. The user should be able to deselect some of the hidden classes.

see this video

For each time I typed a key, nodes on the canvas move around even though the typed text does not yet constitute a meaningful statement. Node positions should be stable when there is no essential changes in the code.

The error line at the bottom of the window had only a half height of a text, which made it impossible to read. But I tried to reproduce, it doesn't.

• TODO: Reproduce the situation.

When I write the following program and the cursor position is at last line, there must be 3 array objects([1,2,3], [2,4,6], [1,4,9]) in the visualization pane created during the program execution. But, the second array object([2,4,6]) is not appeared in the pane.

let obj = new Object();
let arr = [1,2,3];

obj.arr = arr.map(e => e + e);
obj.arr = arr.map(e => e * e);

It should be useful to include demo code (like the doubly-linked lists) in this repository so that the users can try the online system just by copy-and-paste.

In the current implementation, Kanon shows which part of the program has an error below the editor pane only by textual if the user program has an error. We have to improve the error indication to more user-friendly.

The code below first creates a list of leaves, and then builds a tree by combining leaves. After creation, the list nodes no longer needed, but they stay on the canvas.

It would be nice to hide the nodes that are not reachable from local variables.

class Leaf {
    constructor(char, count) {
        this.char = char
        this.count = count
    }
}

class Node {
    constructor(left,right) {
        this.left = left
        this.right = right
        this.count= left.count + right.count
    }
}
class Pool {
    constructor(tree, next) {
        this.tree = tree
        this.next = next
    }
    build() {
        var n = new Node(this.tree, this.next.tree)   
        return this.next.next.insert(n)
    }
    insert(newNode) {
        if (newNode.count <= this.tree.count) {
            return new Pool(newNode, this)
        } else {
            return new Pool(this.tree, this.next.insert(newNode))
        }
    }
}
class Sentinel {
    insert(newNode) {
        return new Pool(newNode, this)
    }
}

var a = new Leaf("A",10)
var b = new Leaf("B", 5)
var c = new Leaf("C", 2)
var candidate = new Pool(a, new Pool(b, new Pool(c, new Sentinel())))

candidate = candidate.build()
candidate = candidate.build()

Discuss with @akiou as to how to approach this

1. set font size 48pt
2. use the Programming-by-Demonstration feature to generate expressions
3. the popup for the candidate expressions are too narrow

An assignment of this in a constructor to another object will cause an error can't redefine non-configuratable property "__id"
The following snippet is an example.

class Node {
    constructor(prev) {
        prev.a = this;
    }
}

new Node({a:null});

When an instance variable has a primitive value, show the variable and the value inside of the enclosing object, rather than an external entity. It shouldn't be difficult in vis.js.

When the master branch is updated, all we need to do is to

1. checkout gh-pages
2. merge origin:master, and
3. push

to get installed the latest version on the web version. However, sometimes we experience conflicts at the second step, which might need to be examined. (We need a reproducable way .)

The following code should show the arrows for both a and b, but the one for b does not appear when I typed var b = a;. After writing some code in the next line, it appears, and keep appearing even if the added code after var b = a; is deleted.

I should add unit test codes for software maintenance.

With the following code, the display only shows nodes 888, 456, and 789 (i.e., 123 and 999 are disappeared).

class Node {
    constructor(val, next) {
        this.val = val;
        this.next = next;
        if (next != null) {
            this.next.prev = this;
        }
    }
    insertAfter(pos, value) {
        if (pos == 0) {
            var n = new Node(value,this.next);
            this.next = n;
            
        } else {
            this.next.insertAfter(pos-1, value);
        }
    }
}

var lst = new Node(123, new Node(456, new Node(789, null)));
lst.insertAfter(0, 999);
lst.insertAfter(1, 888);

(edit) Commenting out the lines 7-9 gives the hidden nodes back. So the assignment this.next.prev = this; might be the cause of the problem.

In the source code, there are at least three files that implement layout algorithms (....write the file names here...). Those algorithms should be able to be selected via the Preferences dialog.

1. Currently, the dialog works but we don't understand why.
2. Currently, the dialog can choose either FiFA or Original, but some other algorithms might also be selected.
3. Currently, the implementation seems to use if (selecet == "FiFA") do something else do something eles ... style, which is not so modular. Use classes or other module mechanism.