Can I visualize a BST?

[risingBirdSong]

trafficstars

Is it possible and how can it be setup?

class TreeNode {
  val: number
  left: TreeNode | null
  right: TreeNode | null
  constructor(val?: number, left?: TreeNode | null, right?: TreeNode | null) {
    this.val = (val === undefined ? 0 : val)
    this.left = (left === undefined ? null : left)
    this.right = (right === undefined ? null : right)
  }
}


function insertLevelOrder(numbers: number[], root: TreeNode | null, i: number) {
  if (i < numbers.length) {
    let temp = new TreeNode(numbers[i]);
    root = temp;
    root.left = insertLevelOrder(numbers, root.left, 2 * i + 1);
    root.right = insertLevelOrder(numbers, root.right, 2 * i + 2);
  }
  return root
}

let treeA = new TreeNode();
let numsA = [1, 2, 3, 4, 5, 6, 6, 6, 6, 6];
let testA = insertLevelOrder(numsA, treeA, 0);
console.log("test A", testA);

I tried with this code and asked the debug visualizer to visualize the root node and other various nodes.

The result was [object Object]

Can such a visualization be done?

[hediet]

You should be able to visualize "root" and select "object graph" as data extractor in the options.

[risingBirdSong]

Thanks that looks awesome!

And it got cut off but that require statement is the absolute path to your npm package -> "@hediet/debug-visualizer-data-extraction" ?

[hediet]

The require statement in the screenshot is not required - It is easy-attach. I use it with my vscode-rpc extension to make launching the debugger easier.

[risingBirdSong]

Thank you for the help, after trying it with your easy attach package and not succeeding I was able to get it with ts-node debugger setup.

But if I may ask a little more and not be a bother, are we able to see the tree built up one node at a time? Are we able to see the values in the tree in the visualization?

Thanks again

[hediet]

But if I may ask a little more and not be a bother, are we able to see the tree built up one node at a time? Are we able to see the values in the tree in the visualization?

Should work both. For the values however, you need to convert your tree to graph data. See the js demos for how to do that. To see how the tree builds up, you need to put all tree nodes in a global array and visualize that array. You can do that in your TreeNode constructor.

[risingBirdSong]

Thanks for all the help I will try these

[HansUXdev]

I don't understand how to get this extension working. It looks really amazing and all. I wish it worked more like code runner.

I know with your demo I'm having issues importing you modules because you use ESM without the flag among other things. https://github.com/HansUXdev/JavaScript-First/tree/master/00-Drafts/00-Algorithms

but I'll follow you instructions with an example like

function bubble_Sort(a)
{
    var swapp;
    var n = a.length-1;
    var x=a;
    do {
        swapp = false;
        for (var i=0; i < n; i++)
        {
            if (x[i] < x[i+1])
            {
               var temp = x[i];
               x[i] = x[i+1];
               x[i+1] = temp;
               swapp = true;
            }
        }
        n--;
    } while (swapp);
 return x; 
}

let data = [0,1,2,3,4,5,6,7]

console.log(bubble_Sort(data))

I thought I followed the instructions well enough... But I'm also not used to using the built in debugger.