Delay errors, with collapsed output (#272)

Author: georgestagg

ggsql-wasm/demo/src/quarto/main.ts

@@ -19,6 +19,7 @@ interface CellInfo {
   error: string | null;
   editor: EditorInstance | null;
   errorDisplay: HTMLElement | null;
+  errorTimerId: number | null;
 }
 
 // ---------------------------------------------------------------------------
@@ -117,6 +118,7 @@ function gatherCells(): CellInfo[] {
       error: null,
       editor: null,
       errorDisplay: null,
+      errorTimerId: null,
     });
   }
 
@@ -246,14 +248,50 @@ async function applyEditors(
   }
 }
 
+const ERROR_DELAY_MS = 1000;
+
+function clearError(cell: CellInfo): void {
+  if (cell.errorTimerId !== null) {
+    clearTimeout(cell.errorTimerId);
+    cell.errorTimerId = null;
+  }
+  const el = cell.errorDisplay!;
+  el.innerHTML = "";
+  el.classList.remove("visible", "collapsed");
+}
+
+function showError(cell: CellInfo, message: string): void {
+  clearError(cell);
+  cell.errorTimerId = window.setTimeout(() => {
+    cell.errorTimerId = null;
+    const el = cell.errorDisplay!;
+    el.innerHTML = "";
+
+    const toggle = document.createElement("span");
+    toggle.className = "ggsql-error-toggle";
+    toggle.textContent = "\u25B6";
+
+    const text = document.createElement("span");
+    text.className = "ggsql-error-text";
+    text.textContent = message;
+
+    el.appendChild(toggle);
+    el.appendChild(text);
+    el.classList.add("visible", "collapsed");
+
+    el.onclick = () => {
+      const isCollapsed = el.classList.toggle("collapsed");
+      toggle.textContent = isCollapsed ? "\u25B6" : "\u25BC";
+    };
+  }, ERROR_DELAY_MS);
+}
+
 async function executeCell(
   cell: CellInfo,
   editorInst: EditorInstance,
   ctx: WasmContextManager
 ): Promise<void> {
-  const errorDisplay = cell.errorDisplay!;
-  errorDisplay.textContent = "";
-  errorDisplay.classList.remove("visible");
+  clearError(cell);
 
   const currentQuery = rewriteCsvRefs(editorInst.getValue());
 
@@ -270,8 +308,7 @@ async function executeCell(
       ctx.executeSql(currentQuery);
     }
   } catch (e: any) {
-    errorDisplay.textContent = String(e);
-    errorDisplay.classList.add("visible");
+    showError(cell, String(e));
   }
 }
 

ggsql-wasm/demo/src/quarto/styles.css

@@ -24,15 +24,41 @@
   color: #AE2012;
   background: #FFF0ED;
   border-top: 1px solid #E5A4A0;
-  white-space: pre-wrap;
-  word-break: break-word;
   display: none;
+  cursor: pointer;
+  gap: 6px;
+  align-items: flex-start;
 }
 
 .ggsql-editor-wrapper .monaco-editor .overflow-guard {
   touch-action: pan-y !important;
 }
 
 .ggsql-error-display.visible {
-  display: block;
+  display: flex;
+}
+
+.ggsql-error-toggle {
+  flex-shrink: 0;
+  font-size: 10px;
+  line-height: 1.6;
+  user-select: none;
+  width: 1em;
+  text-align: center;
+}
+
+.ggsql-error-text {
+  flex: 1;
+  min-width: 0;
+}
+
+.ggsql-error-display.collapsed .ggsql-error-text {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.ggsql-error-display:not(.collapsed) .ggsql-error-text {
+  white-space: pre-wrap;
+  word-break: break-word;
 }