Improve folder coloring

web/src/Explorer/FolderState.test.ts

@@ -134,6 +134,7 @@ function it (
       fileTree.pushNode(newNode(node))
     }
     if (input.squash) fileTree.squash()
+    fileTree.order()
     const evs: Message[] = []
     const folderState = FolderState.fromFileTree(fileTree)
     folderState.registerListener('test', (m) => evs.push(m))

web/src/Explorer/FolderState.ts

@@ -124,15 +124,13 @@ export class FolderState<F> {
 
   static fromFileTree<T extends ColoredFileLeaf> (tree: FileTree<T>): FolderState<T> {
     const folderState = new FolderState<T>()
-    const folderKeys = [...tree.subTrees.keys()].sort()
-    for (const folder of folderKeys) {
+    for (const folder of tree.subTrees.keys()) {
       const childFolderState = FolderState.fromFileTree(tree.subTrees.get(folder)!)
       childFolderState.parent = folderState
       folderState.folders.set(folder, childFolderState)
     }
 
-    const fileKeys = [...tree.leafs.keys()].sort()
-    for (const file of fileKeys) {
+    for (const file of tree.leafs.keys()) {
       folderState.files.set(file, tree.leafs.get(file)!)
     }
     const { h, s, v } = tree.__data?.__color ?? { h: 0, s: 0, v: 1 }

web/src/FileTree.test.ts

@@ -18,48 +18,48 @@ describe("FileTree", () => {
     {
       render: `\
 __dep_tree_root__
+ a
+  b
+   c
+    d
+     e.ts -> 4
  foo
   bar
    a.ts -> 0
    b.ts -> 1
   baz
    c.ts -> 2
   d.ts -> 3
- a
-  b
-   c
-    d
-     e.ts -> 4
  f.ts -> 5`,
       parents: [
+        ['a', 'b', 'c', 'd'],
         ['foo', 'bar'],
         ['foo', 'bar'],
         ['foo', 'baz'],
         ['foo'],
-        ['a', 'b', 'c', 'd'],
         []
       ],
       parentStats: [
+        { kind: 'tree', depth: 4, total: 1, index: 0 },
         { kind: 'tree', depth: 2, total: 2, index: 0 },
         { kind: 'tree', depth: 2, total: 2, index: 0 },
         { kind: 'tree', depth: 2, total: 2, index: 1 },
-        { kind: 'tree', depth: 1, total: 2, index: 0 },
-        { kind: 'tree', depth: 4, total: 1, index: 0 },
+        { kind: 'tree', depth: 1, total: 2, index: 1 },
         { kind: 'tree', depth: 0, total: 1, index: 0 },
       ],
-      leafs: [0, 1, 2, 3, 4, 5]
+      leafs: [4, 0, 1, 2, 3, 5]
     }
   )
 
   it(
     'squash',
     {
       nodes: [
+        ['a', 'b', 'c', 'd', 'e.ts'],
         ['foo', 'bar', 'a.ts'],
         ['foo', 'bar', 'b.ts'],
         ['foo', 'baz', 'c.ts'],
         ['foo', 'd.ts'],
-        ['a', 'b', 'c', 'd', 'e.ts'],
         ['f.ts'],
         ['foo', 'bar', 'a', 'b', 'g.ts']
       ],
@@ -68,37 +68,37 @@ __dep_tree_root__
     {
       render: `\
 __dep_tree_root__
+ a/b/c/d
+  e.ts -> 0
  foo
   bar
    a/b
     g.ts -> 6
-   a.ts -> 0
-   b.ts -> 1
+   a.ts -> 1
+   b.ts -> 2
   baz
-   c.ts -> 2
-  d.ts -> 3
- a/b/c/d
-  e.ts -> 4
+   c.ts -> 3
+  d.ts -> 4
  f.ts -> 5`,
       parents: [
+        ['a/b/c/d'],
         ['foo', 'bar', 'a/b'],
         ['foo', 'bar'],
         ['foo', 'bar'],
         ['foo', 'baz'],
         ['foo'],
-        ['a/b/c/d'],
         [],
       ],
       parentStats: [
+        { kind: 'tree', depth: 1, total: 2, index: 0 },
         { kind: 'tree', depth: 3, total: 1, index: 0 },
         { kind: 'tree', depth: 2, total: 2, index: 0 },
         { kind: 'tree', depth: 2, total: 2, index: 0 },
         { kind: 'tree', depth: 2, total: 2, index: 1 },
-        { kind: 'tree', depth: 1, total: 2, index: 0 },
         { kind: 'tree', depth: 1, total: 2, index: 1 },
         { kind: 'tree', depth: 0, total: 1, index: 0 },
       ],
-      leafs: [6, 0, 1, 2, 3, 4, 5]
+      leafs: [0, 6, 1, 2, 3, 4, 5]
     }
   )
 })
@@ -120,6 +120,7 @@ function it (
       fileTree.pushNode(newNode(node))
     }
     if (input.squash) fileTree.squash()
+    fileTree.order()
 
     // ensure tree integrity
     ensureChildrenParents(fileTree)

web/src/FileTree.ts

@@ -110,6 +110,33 @@ export class FileTree<T = object> {
     }
   }
 
+  /**
+   * A Map in JS will be iterated in the order of insertion. This function
+   * orders the internal Maps alphabetically.
+   */
+  order() {
+    const subTrees = [...this.subTrees.entries()]
+    this.subTrees.clear()
+    subTrees.sort(([a], [b]) => a > b ? 1 : -1)
+    let i = 0
+    for (const [k, v] of subTrees) {
+      v.__index = i
+      v.order()
+      this.subTrees.set(k, v)
+      i++
+    }
+
+    const leafs = [...this.leafs.entries()]
+    this.leafs.clear()
+    leafs.sort(([a], [b]) => a > b ? 1 : -1)
+    i = 0
+    for (const [k, v] of leafs) {
+      v.__index = i
+      this.leafs.set(k, v)
+      i++
+    }
+  }
+
   /**
    * Retrieves the parent {@link FileTree} of a leaf node.
    */
@@ -148,7 +175,7 @@ export class FileTree<T = object> {
    * @param node
    */
   static stats<T> (node: FileLeaf<T> | FileTree<T>): NodeStats {
-    let depth = 0 // starts with -1 because there's always going to be at least 1 parent.
+    let depth = 0
     let parent = node.__parent
     while (parent !== undefined) {
       depth++

web/src/XGraph.ts

@@ -52,6 +52,7 @@ export function buildXGraph (graph: Graph) {
   const fileTree = FileTree.root<XNode>()
   graph.nodes.forEach(node => fileTree.pushNode(node))
   fileTree.squash()
+  fileTree.order()
   color(fileTree)
 
   // Check if there are more than one groups in all the nodes.