Show error to view

Author: kishikawakatsumi

Public/css/common.css

@@ -61,3 +61,8 @@ body {
   color: #0d6efd;
   border-color: #0d6efd;
 }
+
+.alert {
+  font-family: Menlo, Consolas, "DejaVu Sans Mono", "Ubuntu Mono", monospace;
+  font-size: 11pt;
+}

Public/index.html

@@ -108,18 +108,7 @@
             </div>
             <div id="statistics-tab-pane" class="tab-pane" role="tabpanel" aria-labelledby="statistics-tab"
               tabindex="0">
-              <div id="statistics-container" class="" role="document">
-                <table class="table table-borderless table-striped table-hover table-sm">
-                  <thead>
-                    <tr>
-                      <th scope="col" style="width: 60%;">Syntax</th>
-                      <th scope="col">Count</th>
-                    </tr>
-                  </thead>
-                  <tbody>
-                  </tbody>
-                </table>
-              </div>
+              <div id="statistics-container" class="" role="document"></div>
             </div>
           </div>
         </div>

Public/js/app.js

@@ -16,7 +16,7 @@ import "ace-builds/src-min-noconflict/theme-xcode";
 const Range = ace.require("ace/range").Range;
 
 export class App {
-  get contentMaxHeight() {
+  get contentViewHeight() {
     const headerHeight = document.querySelector("header").clientHeight;
     const footerHeight = document.querySelector("footer").clientHeight;
     return `calc(100vh - ${headerHeight}px - ${footerHeight}px)`;
@@ -133,6 +133,13 @@ export class App {
       false
     );
 
+    const onresize = debounce(() => {
+      this.onresize();
+    }, 200);
+    new ResizeObserver(() => {
+      onresize();
+    }).observe(document.body);
+
     this.update();
   }
 
@@ -179,19 +186,12 @@ export class App {
           }, []);
         this.updateStatistics(statistics);
 
-        document.getElementById("structure").style.maxHeight =
-          this.contentMaxHeight;
-        document.getElementById("syntax-container").style.maxHeight =
-          this.contentMaxHeight;
-        document.getElementById("statistics-container").style.maxHeight =
-          this.contentMaxHeight;
+        this.onresize();
       })
       .catch((error) => {
-        if (error.status == 413) {
-          alert("Payload Too Large");
-        } else {
-          alert("Something went wrong");
-        }
+        this.structureView.error = error;
+        this.syntaxView.error = error;
+        this.statisticsView.error = error;
       })
       .finally(() => {
         hideLoading();
@@ -241,6 +241,14 @@ export class App {
       }
     };
   }
+
+  onresize() {
+    document.getElementById("structure").style.height = this.contentViewHeight;
+    document.getElementById("syntax-container").style.height =
+      this.contentViewHeight;
+    document.getElementById("statistics-container").style.height =
+      this.contentViewHeight;
+  }
 }
 
 function configurations() {

Public/js/statistics_view.js

@@ -6,26 +6,35 @@ import "datatables.net-bs5/css/dataTables.bootstrap5.min.css";
 import "../css/table.css";
 
 export class StatisticsView {
+  set error(error) {
+    this.container.innerHTML = `<div class="alert alert-danger m-3" role="alert">${error}</div>`;
+  }
+
   constructor(container) {
     this.container = container;
 
     this.onmouseover = () => {};
     this.onmouseout = () => {};
-
-    this.init();
-  }
-
-  init() {
-    this.body = this.container.querySelector(":scope > table > tbody");
   }
 
   update(statistics) {
-    this.body.innerHTML = "";
+    this.container.innerHTML = `<table class="table table-borderless table-striped table-hover table-sm">
+  <thead>
+    <tr>
+      <th scope="col" style="width: 60%;">Syntax</th>
+      <th scope="col">Count</th>
+    </tr>
+  </thead>
+  <tbody>
+  </tbody>
+</table>
+`;
 
+    const body = this.container.querySelector(":scope > table > tbody");
     for (const row of statistics) {
       const tr = document.createElement("tr");
       tr.innerHTML = `<td style="font-family: Menlo, Consolas, 'DejaVu Sans Mono', 'Ubuntu Mono', monospace;">${row.text}</td><td><div>${row.ranges.length}</div></td>`;
-      this.body.appendChild(tr);
+      body.appendChild(tr);
 
       tr.addEventListener("mouseover", (event) => {
         event.preventDefault();

Public/js/structure_view.js

@@ -4,6 +4,10 @@ import { TreeView } from "./tree_view.js";
 import { Popover } from "./popover.js";
 
 export class StructureView {
+  set error(error) {
+    this.container.innerHTML = `<div class="alert alert-danger m-3" role="alert">${error}</div>`;
+  }
+
   constructor(container) {
     this.container = container;
     this.popover = new Popover();

Public/js/syntax_view.js

@@ -4,6 +4,10 @@ import { Popover } from "./popover.js";
 import "../css/syntax.css";
 
 export class SyntaxView {
+  set error(error) {
+    this.container.innerHTML = `<div class="alert alert-danger m-3" role="alert">${error}</div>`;
+  }
+
   constructor(container) {
     this.container = container;
     this.popover = new Popover();

Public/scss/default.scss

@@ -15,6 +15,7 @@
 @import "bootstrap/scss/dropdown";
 @import "bootstrap/scss/nav";
 @import "bootstrap/scss/badge";
+@import "bootstrap/scss/alert";
 @import "bootstrap/scss/close";
 @import "bootstrap/scss/modal";
 @import "bootstrap/scss/tooltip";