Heap index

README.md

@@ -93,6 +93,9 @@ You can use the checkboxes to toggle display of two properties next to each node
   i.e., number of descendants including the node itself.
   (Useful for illustrating sequence binary trees,
   which support accessing the *i*th node in traversal order.)
+* **Heap index** (yellow, right):
+  The 1-based index of the node in the heap array, when in heap mode
+  (and more generally, the 1-based BFS order of the node).
 
 ### Speed
 

index.civet

@@ -13,9 +13,11 @@ class SpriteNode
   right: SpriteNode?
   size: number?
   height: number?
+  index: number?
   parentLine: Line
   heightText: Text?
   sizeText: Text?
+  indexText: Text?
   loaded: Promise<void>?
 
   x: number?
@@ -99,6 +101,10 @@ class SpriteNode
       .attr 'x', +nodeSize * 0.6
       .attr 'y', 0
       .addClass 'size'
+      @indexText = @g.plain (@index ?? 0).toString()
+      .attr 'x', +nodeSize * 0.6
+      .attr 'y', 0
+      .addClass 'index'
     @updateParentLine()
   setParent(@parent: SpriteNode?): void
     @updateParentLine()
@@ -202,11 +208,16 @@ class SpriteNode
     [@x, other.x] = [other.x, @x]
     [@y, other.y] = [other.y, @y]
     [@key, other.key] = [other.key, @key]
-    [@size, other.size] = [other.size, @size]
-    [@height, other.height] = [other.height, @height]
+    [@loaded, other.loaded] = [other.loaded, @loaded]
     [@sizeText, other.sizeText] = [other.sizeText, @sizeText]
     [@heightText, other.heightText] = [other.heightText, @heightText]
-    [@loaded, other.loaded] = [other.loaded, @loaded]
+    [@indexText, other.indexText] = [other.indexText, @indexText]
+    @sizeText?.plain (@size ?? 1).toString()
+    @heightText?.plain (@height ?? 0).toString()
+    @indexText?.plain (@index ?? 0).toString()
+    other.sizeText?.plain (other.size ?? 1).toString()
+    other.heightText?.plain (other.height ?? 0).toString()
+    other.indexText?.plain (other.index ?? 0).toString()
 
 class SpriteTree
   svg: Svg
@@ -236,6 +247,7 @@ class SpriteTree
     //  @nodeGroup.add node.g
     @root.computeSize()
     @root.computeHeight()
+    @computeIndex()
     @root.x ?= 0
     @root.y ?= 0
     @root.layout @root.x, @root.y
@@ -547,6 +559,12 @@ class SpriteTree
       queue.push node.left if node.left?.key?
       queue.push node.right if node.right?.key?
     nodes
+
+  computeIndex(): void
+    for each node, i of @heapArray()
+      continue unless node?
+      node.index = i
+      node.indexText?.plain i.toString()
 
   // Force tree into a complete tree, then build
   makeMaxHeap(): Promise<void>
@@ -820,7 +838,7 @@ function gui(): void
         image.setAttribute 'href', urlFor key
         image.querySelector('title')?.innerHTML = toName key
 
-  for toggle of ['size', 'height']
+  for toggle of ['size', 'height', 'index']
     document.querySelector(`#${toggle}`)!.addEventListener 'input', (e) =>
       document.documentElement.classList.toggle toggle,
         (e.currentTarget as HTMLInputElement).checked

index.pug

@@ -35,6 +35,10 @@ html
         input(type="checkbox")#height
         |  heights
       br
+      label.index
+        input(type="checkbox")#index
+        |  heap index
+      br
       label
         input(type="radio", name="style", value="2D", checked)
         | 2D

index.styl

@@ -1,8 +1,9 @@
 :root, input
   background: black
   color: white
-  --height-color: magenta
+  --height-color: #f8f
   --size-color: cyan
+  --index-color: yellow
 a, a:visited
   color: yellow
 a:hover, a:active
@@ -46,7 +47,11 @@ text
     dominant-baseline: middle
     fill: var(--height-color)
   &.size
+    dominant-baseline: middle
     fill: var(--size-color)
+  &.index
+    dominant-baseline: middle
+    fill: var(--index-color)
   font-family: sans-serif
   font-size: 32px
 g.bad
@@ -57,8 +62,12 @@ label.height
   color: var(--height-color)
 label.size
   color: var(--size-color)
+label.index
+  color: var(--index-color)
 
 :root:not(.height) text.height
   display: none
 :root:not(.size) text.size
   display: none
+:root:not(.index) text.index
+  display: none