Choose hue based on file type/extension

static/javascript/sidebar.js

@@ -118,6 +118,16 @@ function size_picker_setup() {
     })
 }
 
+function filetype_highlighting_setup() {
+    const filetype_highlighting_control = document.getElementById("filetype_highlight_control")
+    if (filetype_highlighting_control) {
+        filetype_highlighting_control.checked = USER_DEFINED_HUE
+        filetype_highlighting_control.onchange = () => {
+            USER_DEFINED_HUE = filetype_highlighting_control.checked
+        }
+    }
+}
+
 function color_picker_setup() {
     let el = document.getElementById("sidebar_color_picker")
     let input_number = el.querySelector(".color_picker_number")
@@ -159,7 +169,7 @@ function submit_query_setup() {
 }
 
 function fraction_highlighting_setup() {
-    const fraction_highlighting_control = document.getElementById("hightlight_control")
+    const fraction_highlighting_control = document.getElementById("highlight_control")
     if (fraction_highlighting_control) {
         fraction_highlighting_control.onchange = () => {
             FRACTION_HIGHLIGHTING = fraction_highlighting_control.checked
@@ -241,6 +251,7 @@ function main() {
     submodule_tree_setup()
     text_depth_setup()
     size_picker_setup()
+    filetype_highlighting_setup()
     color_picker_setup()
     submit_query_setup()
     fraction_highlighting_setup()

static/javascript/treemap.js

@@ -246,6 +246,30 @@ function insert_subtree(parent, to_insert, path) {
     return parent.val
 }
 
+function get_extension(filename) {
+    const n = filename.length
+    const i = filename.indexOf(".")
+    if (i == -1 || i == n) return null
+    return filename.split(".").pop()
+}
+
+let EXTENSION_SET = new Set()
+let EXTENSION_MAP = new Map()
+
+function filetype_hue(filename) {
+    const extension = get_extension(filename)
+    if (extension === null || extension === undefined) return null
+    const bytes = Uint8Array.from(extension.split("").map(c => c.charCodeAt(0)))
+    let hue = 0
+    bytes.forEach((b, index) => {
+        hue += (((b%26)+7)%26) * (360/26) / (26**index)
+    })
+    return hue
+    return EXTENSION_MAP.get(get_extension(filename))
+}
+
+USER_DEFINED_HUE = false
+
 // Given an object in the style generated by handle_row, draw the boxes as necessary
 function draw_tree(obj_tree, SVG_ROOT) {
     // Draw children first so parent directory draws on top and so is clickable
@@ -264,19 +288,28 @@ function draw_tree(obj_tree, SVG_ROOT) {
             obj_tree.SVG_ELEMENT.insertBefore(box_highlight, obj_tree.SVG_ELEMENT.querySelector(".svg_box"))
         }
         const rect = obj_tree.SVG_ELEMENT.querySelector(".svg_box_highlight")
-        if ("hue" in obj_tree && "fraction" in obj_tree && rect) {
+        const hue_to_use = USER_DEFINED_HUE ? "hue_user" : "hue_filetype"
+        if (hue_to_use in obj_tree && "fraction" in obj_tree && rect) {
             [saturation, lightness] = fraction_to_saturation_and_lightness(obj_tree.fraction)
-            rect.style["fill"] = `hsl(${obj_tree.hue},${saturation}%,${lightness}%)`
+            rect.style["fill"] = `hsl(${obj_tree[hue_to_use]},${saturation}%,${lightness}%)`
             rect.style["fill-opacity"] = "100%"
         }
     }
 
     obj_tree.highlight = (hue, fraction) => {
-        obj_tree.hue = hue
+        obj_tree.hue_user = hue
         obj_tree.fraction = fraction
         obj_tree.update_highlight()
     }
 
+    obj_tree.filetype_highlight = () => {
+        if (!obj_tree || "children" in obj_tree) return
+        const hue = filetype_hue(obj_tree.text)
+        if (hue === null || hue === undefined) return
+        obj_tree.hue_filetype = hue
+        obj_tree.update_highlight()
+    }
+
     // Modifies text that appears when hovering over element
     obj_tree.set_title = (text) => {
         const alt_text = obj_tree.SVG_ELEMENT.querySelector("title")
@@ -293,7 +326,7 @@ function get_objs_to_highlight(obj_tree, highlighting_obj) {
     if ("children" in highlighting_obj) highlighting_obj.children.forEach((child) => {
         if (!"children" in obj_tree) {
             console.error(`Searching for ${child.name} in`, obj_tree)
-	}
+        }
         obj_tree_child = obj_tree.children.find((child2) => child2.text == child.name)
         if (obj_tree_child) out.push(...get_objs_to_highlight(obj_tree_child, child))
     })
@@ -304,16 +337,29 @@ function get_objs_to_highlight(obj_tree, highlighting_obj) {
     return out
 }
 
+function get_all_objs(obj_tree) {
+    let out = []
+    if ("children" in obj_tree) {
+        obj_tree.children.forEach((child) => {
+            out.push(...get_all_objs(child))
+        })
+    }
+    else {
+        out.push(obj_tree)
+    }
+    return out
+}
+
 function set_alt_text(obj_tree, highlighting_obj) {
     if ("children" in highlighting_obj) highlighting_obj.children.forEach((child) => {
         if (!"children" in obj_tree) {
             console.error(`Searching for ${child.name} in`, obj_tree)
-	}
+        }
         const obj_to_set_text = obj_tree.children.find((child2) => child2.text == child.name)
         if (obj_to_set_text == undefined) {
             console.error(`Could not find ${child.name} in`, obj_tree)
             return
-	}
+        }
         set_alt_text(obj_to_set_text, child)
     })
     obj_tree.set_title(highlighting_obj.val)
@@ -344,6 +390,20 @@ function display_filetree(filetree_obj, highlighting_obj, SVG_ROOT, x, y, aspect
 
     obj_tree.forEach((val) => draw_tree(val, SVG_ROOT))
 
+    const all_objs = get_all_objs({"children": obj_tree})
+    if (EXTENSION_SET.size == 0) {
+        all_objs.forEach((obj) => {
+            EXTENSION_SET.add(get_extension(obj.text))
+        })
+        let l = []
+        EXTENSION_SET.forEach((val) => l.push(val))
+        const n = l.length
+        l.forEach((extension, index) => {
+            EXTENSION_MAP.set(extension, index * (360 / n))
+        })
+    }
+    all_objs.forEach(obj => obj.filetype_highlight())
+
     let objs_to_highlight = get_objs_to_highlight({"children": obj_tree}, highlighting_obj)
     if (Array.isArray(objs_to_highlight) && objs_to_highlight.length > 0) {
         const get_val = (obj) => obj.highlight_value

static/stylesheets/sidebar.css

@@ -102,6 +102,10 @@ input[type=number] {
     flex-basis: 6em;
 }
 
+#filetype_highlight_control {
+    margin: 0%;
+}
+
 .color_picker_container {
     display: inline-flex;
     border: black 1px solid;

templates/treemap.html

@@ -13,7 +13,7 @@
             <svg id="treemap_root_svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://w3.org/1999/xlink" width=100% height=100%>
                 <defs>
                     <linearGradient id="Gradient2" x1="0%" x2="100%" y1="0%" y2="100%">
-                        <stop offset="0%" style="stop-color: #333333; stop-opacity: 0.6"/>
+                        <stop offset="0%" style="stop-color: #333333; stop-opacity: 0.3"/>
                         <stop offset="100%" style="stop-color: #bbbbbb; stop-opacity: 0.2"/>
                     </linearGradient>
                 </defs>
@@ -54,8 +54,8 @@
                     Submodules
                 </div>
                 <div class="control_box">
-                    <label for="hightlight_control">Fractional highlighting</label>
-                    <input type="checkbox" name="hightlight_control" id="hightlight_control" checked="true"/>
+                    <label for="highlight_control">Fractional highlighting</label>
+                    <input type="checkbox" name="highlight_control" id="highlight_control" checked="true"/>
                 </div>
                 <div class="control_box">
                     <label for="text_depth_number">Text levels</label>
@@ -66,6 +66,7 @@
                     <input type="number" name="size_picker_number" id="size_picker_number" value="0" min="0"/>
                 </div>
                 <div class="color_picker_container" id="sidebar_color_picker">
+                    <input type="checkbox" name="filetype_highlight_control" id="filetype_highlight_control" checked="true"/>
                     <label for="color_control">Hue</label>
                     <div class="color_control">
                         <input type="range" class="color_picker_range" name="color_picker_range" value="0" min="0" max="360"/>