handle bar chart edge cases

Author: soham-chitnis10

client/src/App.jsx

@@ -12,7 +12,7 @@ const DEFAULT_SETTINGS = {
   sleepTime: 0,
   maxNewTokens: 300,
   k: 10,
-  T: 1.3,
+  T: 1,
 };
 
 function resolveRandomSeed(input) {

client/src/components/Barplot.jsx

@@ -85,6 +85,17 @@ export default function Barplot({ data, onTickClick, disabled }) {
       .style("font-size", `${tickFontSize}px`)
       .style("font-weight", "500");
 
+    yAxis
+      .selectAll("text")
+      .text((d) => {
+        if (d === " ") return "[sp]";
+        if (d === "\n") return "↵";
+        if (d === "\t") return "→";
+        if (typeof d === "string" && d.trim() === "" && d.length > 0)
+          return `[${d.length}sp]`;
+        return d;
+      });
+
     yAxis
       .selectAll(".tick")
       .style("cursor", "pointer")
@@ -95,8 +106,8 @@ export default function Barplot({ data, onTickClick, disabled }) {
           );
           return;
         }
-        const tickText = d3.select(this).select("text").text();
-        if (onTickClickRef.current) onTickClickRef.current(tickText);
+        const token = d3.select(this).datum();
+        if (onTickClickRef.current) onTickClickRef.current(token);
       });
 
     svg