From 50ad7c4e7d1dcb31a538c4d5b3fde2ba2c66d0c9 Mon Sep 17 00:00:00 2001
From: Charlie <ctbushman@gmail.com>
Date: Wed, 28 Jan 2026 13:24:48 -0500
Subject: [PATCH 1/3] Add diagnostics for species tree rendering

---
 app/nl_query.py                 |  4 ++-
 app/templates/show_species.html | 48 ++++++++++++++++++++++++++-------
 2 files changed, 41 insertions(+), 11 deletions(-)

diff --git a/app/nl_query.py b/app/nl_query.py
index 606e381..2b3b9fe 100644
--- a/app/nl_query.py
+++ b/app/nl_query.py
@@ -53,7 +53,8 @@ class State(TypedDict):
     ]
 )
 
-GENERATE_QUERY_PROMPT = lambda user_input: f"""
+GENERATE_QUERY_PROMPT = (
+    lambda user_input: f"""
 ``` SYSTEM
 Given an input question, create a syntactically correct SQLite3 query to run to help find the answer. Unless the user specifies
 in his question a specific number of examples they wish to obtain, you can return all the results that match the question.
@@ -69,6 +70,7 @@ class State(TypedDict):
 {user_input}
 ```
 """
+)
 
 llm = ChatOpenAI(
     model="gpt-4o",
diff --git a/app/templates/show_species.html b/app/templates/show_species.html
index 308a1c0..f607ec5 100644
--- a/app/templates/show_species.html
+++ b/app/templates/show_species.html
@@ -36,22 +36,50 @@ <h3 class="h5 mb-0">Tree</h3>
       <p class="text-danger mb-0">Unable to read treefile: {{ tree_error }}</p>
       {% elif tree_content %}
       <p class="text-muted small mb-2">Source: {{ tree_path.rsplit('/', 1)[-1] }}</p>
+      <div id="tree-status" class="text-muted small mb-2" role="status">
+        Loading tree…
+      </div>
       <div id="tree-container" class="border rounded bg-white" style="min-height: 500px;"></div>
       <script src="https://cdn.jsdelivr.net/npm/d3@7.9.0/dist/d3.min.js" integrity="sha384-CjloA8y00+1SDAUkjs099PVfnY2KmDC2BZnws9kh8D/lX1s46w6EPhpXdqMfjK6i" crossorigin="anonymous"></script>
       <script src="https://cdn.jsdelivr.net/npm/underscore@1.13.7/underscore-min.js" integrity="sha384-pSOYJz6tr3k8mV502/FWpqSv7+V4JzjQc8uhWMOZE1SoCFLcJCSfxMFOE6hEd/hT" crossorigin="anonymous"></script>
       <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js" integrity="sha384-H6KKS1H1WwuERMSm+54dYLzjg0fKqRK5ZRyASdbrI/lwrCc6bXEmtGYr5SwvP1pZ" crossorigin="anonymous"></script>
       <script src="https://cdn.jsdelivr.net/npm/phylotree@2.4.0/dist/phylotree.min.js" integrity="sha384-34Lu7wnDpakXRJnVFjFOd2/2rWjTA18GPeCh8LgBT007VUc43HtcbFilygn/rwFT" crossorigin="anonymous"></script>
       <script>
-        const newick = {{ tree_content | tojson }};
-        console.log(newick);
-        const tree = new phylotree.phylotree(newick);
-        tree.render({
-          container: "#tree-container",
-          width: document.querySelector("#tree-container").clientWidth || 800,
-          height: 500,
-          "align-tips": true,
-          zoom: true
-        });
+        const rawNewick = {{ tree_content | tojson }};
+        const statusEl = document.querySelector("#tree-status");
+        const containerEl = document.querySelector("#tree-container");
+        const status = (message, className = "text-muted") => {
+          statusEl.textContent = message;
+          statusEl.className = `small mb-2 ${className}`;
+        };
+        const treeWidth = containerEl.clientWidth || 800;
+        const newick = rawNewick.trim().endsWith(";")
+          ? rawNewick.trim()
+          : `${rawNewick.trim()};`;
+
+        console.debug("Treefile length:", rawNewick.length);
+        console.debug("Treefile preview:", rawNewick.slice(0, 200));
+
+        if (!window.phylotree) {
+          status("Phylotree library failed to load.", "text-danger");
+        } else if (!newick || newick === ";") {
+          status("Treefile is empty after trimming.", "text-danger");
+        } else {
+          try {
+            const tree = new phylotree.phylotree(newick);
+            tree.render({
+              container: "#tree-container",
+              width: treeWidth,
+              height: 500,
+              "align-tips": true,
+              zoom: true
+            });
+            status("Tree rendered successfully.");
+          } catch (error) {
+            console.error("Failed to render tree", error);
+            status(`Tree render failed: ${error.message}`, "text-danger");
+          }
+        }
       </script>
       {% elif tree_root %}
       <p class="mb-0">No treefile found for this species.</p>

From a3ae3a9f9c737b849b063fb588ab1d60a3be6e26 Mon Sep 17 00:00:00 2001
From: Charlie <ctbushman@gmail.com>
Date: Wed, 28 Jan 2026 14:19:15 -0500
Subject: [PATCH 2/3] Simplify species tree demo rendering

---
 app/templates/show_species.html | 49 ++++++---------------------------
 1 file changed, 9 insertions(+), 40 deletions(-)

diff --git a/app/templates/show_species.html b/app/templates/show_species.html
index f607ec5..12c5843 100644
--- a/app/templates/show_species.html
+++ b/app/templates/show_species.html
@@ -36,50 +36,19 @@ <h3 class="h5 mb-0">Tree</h3>
       <p class="text-danger mb-0">Unable to read treefile: {{ tree_error }}</p>
       {% elif tree_content %}
       <p class="text-muted small mb-2">Source: {{ tree_path.rsplit('/', 1)[-1] }}</p>
-      <div id="tree-status" class="text-muted small mb-2" role="status">
-        Loading tree…
-      </div>
       <div id="tree-container" class="border rounded bg-white" style="min-height: 500px;"></div>
       <script src="https://cdn.jsdelivr.net/npm/d3@7.9.0/dist/d3.min.js" integrity="sha384-CjloA8y00+1SDAUkjs099PVfnY2KmDC2BZnws9kh8D/lX1s46w6EPhpXdqMfjK6i" crossorigin="anonymous"></script>
-      <script src="https://cdn.jsdelivr.net/npm/underscore@1.13.7/underscore-min.js" integrity="sha384-pSOYJz6tr3k8mV502/FWpqSv7+V4JzjQc8uhWMOZE1SoCFLcJCSfxMFOE6hEd/hT" crossorigin="anonymous"></script>
-      <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js" integrity="sha384-H6KKS1H1WwuERMSm+54dYLzjg0fKqRK5ZRyASdbrI/lwrCc6bXEmtGYr5SwvP1pZ" crossorigin="anonymous"></script>
       <script src="https://cdn.jsdelivr.net/npm/phylotree@2.4.0/dist/phylotree.min.js" integrity="sha384-34Lu7wnDpakXRJnVFjFOd2/2rWjTA18GPeCh8LgBT007VUc43HtcbFilygn/rwFT" crossorigin="anonymous"></script>
       <script>
-        const rawNewick = {{ tree_content | tojson }};
-        const statusEl = document.querySelector("#tree-status");
-        const containerEl = document.querySelector("#tree-container");
-        const status = (message, className = "text-muted") => {
-          statusEl.textContent = message;
-          statusEl.className = `small mb-2 ${className}`;
-        };
-        const treeWidth = containerEl.clientWidth || 800;
-        const newick = rawNewick.trim().endsWith(";")
-          ? rawNewick.trim()
-          : `${rawNewick.trim()};`;
-
-        console.debug("Treefile length:", rawNewick.length);
-        console.debug("Treefile preview:", rawNewick.slice(0, 200));
-
-        if (!window.phylotree) {
-          status("Phylotree library failed to load.", "text-danger");
-        } else if (!newick || newick === ";") {
-          status("Treefile is empty after trimming.", "text-danger");
-        } else {
-          try {
-            const tree = new phylotree.phylotree(newick);
-            tree.render({
-              container: "#tree-container",
-              width: treeWidth,
-              height: 500,
-              "align-tips": true,
-              zoom: true
-            });
-            status("Tree rendered successfully.");
-          } catch (error) {
-            console.error("Failed to render tree", error);
-            status(`Tree render failed: ${error.message}`, "text-danger");
-          }
-        }
+        const newick =
+          "((((Pig:0.147969,Cow:0.21343):0.085099,Horse:0.165787,Cat:0.264806):0.058611, ((RhMonkey{Foreground}:0.002015,Baboon{Foreground}:0.003108){Foreground}:0.022733 ,(Human{Foreground}:0.004349,Chimp{Foreground}:0.000799){Foreground}:0.011873):0.101856) :0.340802,Rat:0.050958,Mouse:0.09795);";
+        const tree = new phylotree.phylotree(newick);
+        tree.render({
+          container: "#tree-container",
+          width: document.querySelector("#tree-container").clientWidth || 800,
+          height: 500,
+          "align-tips": true
+        });
       </script>
       {% elif tree_root %}
       <p class="mb-0">No treefile found for this species.</p>

From 6f02ce8f7986462bc3c54dd3ff1e66dd0bed389f Mon Sep 17 00:00:00 2001
From: Charlie <ctbushman@gmail.com>
Date: Sat, 31 Jan 2026 10:58:06 -0500
Subject: [PATCH 3/3] Ensure minimal tree demo renders

---
 app/templates/show_species.html | 28 ++++++++++++++++++----------
 1 file changed, 18 insertions(+), 10 deletions(-)

diff --git a/app/templates/show_species.html b/app/templates/show_species.html
index 12c5843..20afff7 100644
--- a/app/templates/show_species.html
+++ b/app/templates/show_species.html
@@ -36,18 +36,26 @@ <h3 class="h5 mb-0">Tree</h3>
       <p class="text-danger mb-0">Unable to read treefile: {{ tree_error }}</p>
       {% elif tree_content %}
       <p class="text-muted small mb-2">Source: {{ tree_path.rsplit('/', 1)[-1] }}</p>
-      <div id="tree-container" class="border rounded bg-white" style="min-height: 500px;"></div>
-      <script src="https://cdn.jsdelivr.net/npm/d3@7.9.0/dist/d3.min.js" integrity="sha384-CjloA8y00+1SDAUkjs099PVfnY2KmDC2BZnws9kh8D/lX1s46w6EPhpXdqMfjK6i" crossorigin="anonymous"></script>
+      <div
+        id="tree-container"
+        class="border rounded bg-white"
+        style="min-height: 500px; width: 100%;"
+      ></div>
+      <script src="https://cdn.jsdelivr.net/npm/d3@5.16.0/dist/d3.min.js" integrity="sha384-3fWy2ac2SbHqetCPxW6g4o5lm5nH6ri/3nSrCtU8X41HbQVf2V3dPz8eS8D6V7/v" crossorigin="anonymous"></script>
+      <script src="https://cdn.jsdelivr.net/npm/underscore@1.13.7/underscore-min.js" integrity="sha384-pSOYJz6tr3k8mV502/FWpqSv7+V4JzjQc8uhWMOZE1SoCFLcJCSfxMFOE6hEd/hT" crossorigin="anonymous"></script>
       <script src="https://cdn.jsdelivr.net/npm/phylotree@2.4.0/dist/phylotree.min.js" integrity="sha384-34Lu7wnDpakXRJnVFjFOd2/2rWjTA18GPeCh8LgBT007VUc43HtcbFilygn/rwFT" crossorigin="anonymous"></script>
       <script>
-        const newick =
-          "((((Pig:0.147969,Cow:0.21343):0.085099,Horse:0.165787,Cat:0.264806):0.058611, ((RhMonkey{Foreground}:0.002015,Baboon{Foreground}:0.003108){Foreground}:0.022733 ,(Human{Foreground}:0.004349,Chimp{Foreground}:0.000799){Foreground}:0.011873):0.101856) :0.340802,Rat:0.050958,Mouse:0.09795);";
-        const tree = new phylotree.phylotree(newick);
-        tree.render({
-          container: "#tree-container",
-          width: document.querySelector("#tree-container").clientWidth || 800,
-          height: 500,
-          "align-tips": true
+        window.addEventListener("load", () => {
+          const newick =
+            "((((Pig:0.147969,Cow:0.21343):0.085099,Horse:0.165787,Cat:0.264806):0.058611,((RhMonkey{Foreground}:0.002015,Baboon{Foreground}:0.003108){Foreground}:0.022733,(Human{Foreground}:0.004349,Chimp{Foreground}:0.000799){Foreground}:0.011873):0.101856):0.340802,Rat:0.050958,Mouse:0.09795);";
+          const container = document.querySelector("#tree-container");
+          const tree = new phylotree.phylotree(newick);
+          tree.render({
+            container: "#tree-container",
+            width: container.clientWidth || 800,
+            height: 500,
+            "align-tips": true
+          });
         });
       </script>
       {% elif tree_root %}