diff --git a/tinygrad/viz/index.html b/tinygrad/viz/index.html
index 33c893ae8c..ad08c448ad 100644
--- a/tinygrad/viz/index.html
+++ b/tinygrad/viz/index.html
@@ -292,6 +292,7 @@
}
.raw-text > pre {
display: inline-block;
+ min-width: 100%;
}
.raw-text code {
max-height: none !important;
diff --git a/tinygrad/viz/js/index.js b/tinygrad/viz/js/index.js
index f092d3ef79..14cb93b3c5 100644
--- a/tinygrad/viz/js/index.js
+++ b/tinygrad/viz/js/index.js
@@ -25,7 +25,7 @@ const colored = n => d3.create("span").call(s => s.selectAll("span").data(typeof
const rect = (s) => (typeof s === "string" ? document.querySelector(s) : s).getBoundingClientRect();
let timeout = null;
-const updateProgress = ({ start }) => {
+const updateProgress = ({ start, err }) => {
clearTimeout(timeout);
const msg = document.getElementById("progress-message");
msg.style.display = "none";
@@ -33,6 +33,11 @@ const updateProgress = ({ start }) => {
msg.innerText = "Rendering new graph...";
timeout = setTimeout(() => { msg.style.display = "block"; }, 2000);
}
+ d3.select("#custom").html("");
+ if (err) {
+ displaySelection("#custom");
+ d3.select("#custom").append(() => d3.create("div").classed("raw-text", true).call(s => s.append(() => codeBlock(err, "txt"))).node());
+ }
}
function intersectRect(r1, r2) {
@@ -136,6 +141,10 @@ function renderDag(graph, additions, recenter, layoutOpts) {
}).attr("class", e => e.value.label.type).attr("id", e => `${e.v}-${e.w}`).datum(e => e.value.label.text));
if (recenter) document.getElementById("zoom-to-fit-btn").click();
};
+ worker.onerror = (e) => {
+ e.preventDefault();
+ updateProgress({ err:"Error in graph layout:\n"+e.message });
+ }
}
// ** profiler graph