trying a fix

src/js/gcode-viewer.js

@@ -1,11 +1,18 @@
 "use strict";
 
 const entityMap = {
-    "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;",
+  "&": "&amp;",
-    "/": "&#x2F;", "`": "&#x60;", "=": "&#x3D;" };
+  "<": "&lt;",
+  ">": "&gt;",
+  '"': "&quot;",
+  "'": "&#39;",
+  "/": "&#x2F;",
+  "`": "&#x60;",
+  "=": "&#x3D;",
+};
 
 function escapeHTML(s) {
-    return s.replace(/[&<>"'`=\\/]/g, function(c) {
+  return s.replace(/[&<>"'`=\\/]/g, function (c) {
     return entityMap[c];
   });
 }
@@ -13,47 +20,47 @@ function escapeHTML(s) {
 module.exports = {
   template: "#gcode-viewer-template",
 
-    data: function() {
+  data: function () {
     return {
       empty: true,
       file: "",
-            line: -1
+      line: -1,
     };
   },
 
   events: {
-        "gcode-load": function(file) {
+    "gcode-load": function (file) {
       this.load(file);
     },
-        "gcode-clear": function() {
+    "gcode-clear": function () {
       this.clear();
     },
-        "gcode-reload": function(file) {
+    "gcode-reload": function (file) {
       this.reload(file);
     },
-        "gcode-line": function(line) {
+    "gcode-line": function (line) {
       this.update_line(line);
-        }
+    },
   },
 
-    ready: function() {
+  ready: function () {
     this.clusterize = new Clusterize({
       rows: [],
       scrollElem: this.$el.querySelector(".clusterize-scroll"),
       contentElem: this.$el.querySelector(".clusterize-content"),
       no_data_text: "GCode view...",
-            callbacks: { clusterChanged: this.highlight }
+      callbacks: { clusterChanged: this.highlight },
     });
   },
 
-    attached: function() {
+  attached: function () {
     if (typeof this.clusterize != "undefined") {
       this.clusterize.refresh(true);
     }
   },
 
   methods: {
-        load: async function(file) {
+    load: async function (file) {
       if (file == this.file) {
         return;
       }
@@ -65,10 +72,13 @@ module.exports = {
       }
 
       const response = await fetch(`/api/file/${file}`, { cache: "no-cache" });
+      if (response.status == 400) {
+        return;
+      }
       const text = await response.text();
 
       if (text.length > 20e6) {
-                this.clusterize.update([ "File is large - gcode view disabled" ]);
+        this.clusterize.update(["File is large - gcode view disabled"]);
       } else {
         const lines = escapeHTML(text.trimRight())
           .split(/[\r\n]/)
@@ -82,14 +92,14 @@ module.exports = {
       Vue.nextTick(this.update_line);
     },
 
-        clear: function() {
+    clear: function () {
       this.empty = true;
       this.file = "";
       this.line = -1;
       this.clusterize.clear();
     },
 
-        reload: function(file) {
+    reload: function (file) {
       if (file != this.file) {
         return;
       }
@@ -97,7 +107,7 @@ module.exports = {
       this.load(file);
     },
 
-        highlight: function() {
+    highlight: function () {
       const highlights = this.$el.querySelectorAll(".highlight");
       for (const highlight of highlights) {
         highlight.className = (highlight.className || "")
@@ -111,12 +121,12 @@ module.exports = {
         line.className = (line.className || "")
           .split(" ")
           .filter(c => c !== "highlight")
-                    .concat([ "highlight" ])
+          .concat(["highlight"])
           .join(" ");
       }
     },
 
-        update_line: function(line) {
+    update_line: function (line) {
       if (typeof line != "undefined") {
         if (this.line == line) {
           return;
@@ -147,6 +157,6 @@ module.exports = {
       scroll.scrollTop = target * lineHeight;
 
       Vue.nextTick(this.highlight);
-        }
+    },
-    }
+  },
 };