Generate linear gradient definitions dynamically

jmforsythe · Oct 19, 2023 · fe6d683 · fe6d683
1 parent 2978aff
commit fe6d683
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 9 deletions.
diff --git a/static/javascript/treemap.js b/static/javascript/treemap.js
@@ -121,6 +121,7 @@ function handle_row(row, x, y, width, height, parent_path, level, SVG_ROOT) {
                 x += box_width
         }
     })
+    MAX_DEPTH = Math.max(MAX_DEPTH, level+1)
     return out
 }
 
@@ -145,7 +146,7 @@ function get_box_text_element(obj) {
     element.setAttribute("id", `svg_path_${path}`)
 
     box.classList.add("svg_box")
-    box.setAttribute("fill", "url(#Gradient2)")
+    box.setAttribute("fill", `url(#Gradient${obj.level})`)
     box.setAttribute("fill-opacity", "20%")
 
     const txt = document.createTextNode(obj.text)
@@ -431,6 +432,7 @@ function display_filetree(filetree_obj, highlighting_obj, SVG_ROOT, x, y, aspect
 }
 
 function display_filetree_path(filetree_obj, highlighting_obj, path, hue) {
+    MAX_DEPTH = 0
     const [SVG_ROOT, x, y, aspect_ratio] = get_drawing_params()
     display_filetree(get_child_from_path(filetree_obj, path), get_child_from_path(highlighting_obj, path), SVG_ROOT, x, y, aspect_ratio, path, hue)
 }
@@ -497,13 +499,15 @@ function highlight_submodules(tree, highlight_params) {
 }
 
 async function main() {
-    display_filetree_with_params({}, null, "", 0)
+    await display_filetree_with_params({}, null, "", 0)
     update_styles(document.getElementById("treemap_root_svg"), 1)
+    update_defs(document.getElementById("treemap_root_svg"), MAX_DEPTH)
 }
 
 let filetree_obj_global = {}
 let highlighting_obj_global = {"name": "/", "val": 0, "children": []}
 let SUBMODULE_TREE = get_submodule_tree("")
 let back_stack = []
+let MAX_DEPTH = 0
 
 main()
diff --git a/static/javascript/treemap_style.js b/static/javascript/treemap_style.js
@@ -6,7 +6,6 @@ const SVG_STYLE = `
 }
 
 .svg_box {
-    fill: "url(#Gradient2)";
     visibility: hidden;
     width: 100%;
     height: 100%;
@@ -69,3 +68,34 @@ function update_styles(node, text_depth) {
     style.innerHTML = SVG_STYLE + text_rule
     node.insertBefore(style, node.firstChild)
 }
+
+function delete_defs(node) {
+    cur_defs_element = node.querySelector("defs")
+    if (cur_defs_element) {
+        node.removeChild(cur_defs_element)
+    }
+}
+
+function update_defs(node, gradient_depth=10) {
+    delete_defs(node)
+    const defs = document.createElementNS("http://www.w3.org/2000/svg", "defs")
+
+    for (let i = 0; i < gradient_depth; i++) {
+        const linearGradient = document.createElementNS("http://www.w3.org/2000/svg", "linearGradient")
+        const gradient_attrs = {id:`Gradient${i}`, x1:"0%", x2:"100%", y1:"0%", y2:"100%"}
+        for (const attr in gradient_attrs) {
+            linearGradient.setAttribute(attr, gradient_attrs[attr])
+        }
+        const stop1_opacity = Math.min(1,0.3+0.2*i)
+        const stop2_opacity = Math.max(0, 0.2)
+        const stop1 = document.createElementNS("http://www.w3.org/2000/svg", "stop")
+        stop1.setAttribute("offset", "0%")
+        stop1.setAttribute("style", `stop-color: #333333; stop-opacity: ${stop1_opacity}`)
+        const stop2 = document.createElementNS("http://www.w3.org/2000/svg", "stop")
+        stop2.setAttribute("offset", "100%")
+        stop2.setAttribute("style", `stop-color: #bbbbbb; stop-opacity: ${stop2_opacity}`)
+        linearGradient.replaceChildren(stop1, stop2)
+        defs.appendChild(linearGradient)
+    }
+    node.insertBefore(defs, node.firstChild)
+}
diff --git a/templates/treemap.html b/templates/treemap.html
@@ -11,12 +11,6 @@
         <div id="info_box"></div>
         <div id="container">
             <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.7"/>
-                        <stop offset="100%" style="stop-color: #bbbbbb; stop-opacity: 0.2"/>
-                    </linearGradient>
-                </defs>
                 <rect width="100%" height="100%" fill="url(#Gradient2)" opacity="10%"></rect>
             </svg>
         </div>