titlepath is titles not ids

app/crawler/main.sh

@@ -119,6 +119,7 @@ crawl_with() {
 		full_title="${full_title#/}"
 		export TITLE="${full_title##*/}"
 		export CONTENT="$(
+			echo "**!! WARNING !! This page is autogenerated and prone to destruction and replacement**"
 			$backend get "$crawlable_source" "$i"
 		)"
 		export ID="$(

spike/review/reinvent/ezmded/ui/index.html

@@ -226,8 +226,9 @@
 				pids = pids.slice(0, pids.length-1)
 
 				var titlePath = "/"
-				for (var pid in pids) {
-					titlePath += ` <input type="button" class="lil_btn" value="${pids[pid]}" onclick="drawFile('${pids.slice(0, pid+1).join("/")}');"/> /`
+				for (var i = 0; i < pids.length; i++) {
+					const fullPid = pids.slice(0, i+1)
+					titlePath += ` <input type="button" class="lil_btn" value="${idsToTitle(fullPid)}" onclick="drawFile('${fullPid.join("/")}');"/> /`
 				}
 
 				enableMDE()
@@ -266,6 +267,23 @@
 				navigateToQueryParams()
 			}
 
+			var lastTree = {}
+
+			function idsToTitle(original_ids) {
+				var ids = original_ids.slice(0, original_ids.length)
+				var subtree = lastTree
+				while (ids && ids.length > 0) {
+					if (!subtree || !subtree["Branches"] || !subtree["Branches"][ids[0]])
+						break
+					subtree = subtree["Branches"][ids[0]]
+					ids = ids.slice(1, ids.length)
+					if (ids.length == 0 && subtree.Leaf && subtree.Leaf.Title ) {
+						return subtree.Leaf.Title
+					}
+				}
+				return ids[ids.length-1]
+			}
+
 			function drawTree() {
 				function htmlifyBranch(id, branch) {
 					const maxTreeTitleLength = 35
@@ -297,8 +315,8 @@
 				http("GET", "/api/v0/tree", (body, status) => {
 					if (status != 200)
 						throw `bad status getting tree: ${status}: ${body}`
-					const tree = JSON.parse(body)
-					document.getElementById("tree").innerHTML = htmlifyBranch("", tree)
+					lastTree = JSON.parse(body)
+					document.getElementById("tree").innerHTML = htmlifyBranch("", lastTree)
 				})
 			}