Motivational words for errors (#3040)

Co-authored-by: Théo Galy-Fajou <[email protected]>
fonsp · Oct 3, 2024 · 9e3ea8f · 9e3ea8f
1 parent 5637bfc
commit 9e3ea8f
Show file tree

Hide file tree

Showing 3 changed files with 79 additions and 9 deletions.
diff --git a/frontend/components/ErrorMessage.js b/frontend/components/ErrorMessage.js
@@ -1,6 +1,6 @@
 import { cl } from "../common/ClassTable.js"
 import { PlutoActionsContext } from "../common/PlutoContext.js"
-import { html, useContext, useEffect, useLayoutEffect, useRef, useState } from "../imports/Preact.js"
+import { html, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from "../imports/Preact.js"
 import { highlight } from "./CellOutput.js"
 import { PkgTerminalView } from "./PkgTerminalView.js"
 import _ from "../imports/lodash.js"
@@ -205,10 +205,7 @@ export const ParseError = ({ cell_id, diagnostics }) => {
                             >
                                 <div class="classical-frame">
                                     ${message}
-                                    <div class="frame-source">
-                                        ${at}
-                                        <${StackFrameFilename} frame=${{ file: "#==#" + cell_id, line }} cell_id=${cell_id} />
-                                    </div>
+                                    <div class="frame-source">${at}<${StackFrameFilename} frame=${{ file: "#==#" + cell_id, line }} cell_id=${cell_id} /></div>
                                 </div>
                             </li>`
                     )}
@@ -423,6 +420,11 @@ export const ErrorMessage = ({ msg, stacktrace, cell_id }) => {
     )
 
     return html`<jlerror>
+        <div class="error-header">
+            <secret-h1>Error message</secret-h1>
+            <!-- <p>This message was included with the error:</p> -->
+        </div>
+
         <header>${matched_rewriter.display(msg)}</header>
         ${stacktrace.length == 0 || !(matched_rewriter.show_stacktrace?.() ?? true)
             ? null
@@ -443,8 +445,7 @@ export const ErrorMessage = ({ msg, stacktrace, cell_id }) => {
                               <div class="classical-frame">
                                   <${Funccall} frame=${frame} />
                                   <div class="frame-source">
-                                      ${at}
-                                      <${StackFrameFilename} frame=${frame} cell_id=${cell_id} />
+                                      ${at}<${StackFrameFilename} frame=${frame} cell_id=${cell_id} />
                                       <${DocLink} frame=${frame} />
                                   </div>
                               </div>
@@ -465,9 +466,52 @@ export const ErrorMessage = ({ msg, stacktrace, cell_id }) => {
                           : null}
                   </ol>
               </section>`}
+        <${Motivation} stacktrace=${stacktrace} />
     </jlerror>`
 }
 
+const motivational_words = [
+    //
+    "Don't panic!",
+    "Keep calm, you got this!",
+    "You got this!",
+    "Silly computer!",
+    "Silly computer!",
+    "beep boop CRASH 🤖",
+    "computer bad, you GREAT!",
+    "Probably not your fault!",
+    "Try asking on Julia Discourse!",
+    "uhmmmmmm??!",
+    "Maybe time for a break? ☕️",
+    "Everything is going to be okay!",
+    "Computers are hard!",
+    "C'est la vie !",
+    "¯\\_(ツ)_/¯",
+    "Oh no! 🙀",
+    "this suckz 💣",
+    "Be patient :)",
+    // Errors horen erbij
+    // Ook de pros krijgen errors
+    ...Array(30).fill(null),
+]
+
+const Motivation = ({ stacktrace }) => {
+    const msg = useMemo(() => {
+        return motivational_words[Math.floor(Math.random() * motivational_words.length)]
+    }, [stacktrace])
+
+    return msg == null
+        ? null
+        : html`<div
+              class="dont-panic"
+              onClick=${(e) => {
+                  window.open("https://discourse.julialang.org/", "_blank")?.focus()
+              }}
+          >
+              ${msg}
+          </div>`
+}
+
 const get_erred_upstreams = (
     /** @type {import("./Editor.js").NotebookData?} */ notebook,
     /** @type {string} */ cell_id,

diff --git a/frontend/hide-ui.css b/frontend/hide-ui.css
@@ -28,6 +28,7 @@ pluto-runarea,
     .MJX_ToolTip,
     .MJX_HoverRegion,
     .MJX_LiveRegion,
+    .dont-panic,
     nav#undo_delete {
         display: none !important;
     }

diff --git a/frontend/treeview.css b/frontend/treeview.css
@@ -267,10 +267,14 @@ jlerror > header > p {
 jlerror > header > p:first-child {
     font-weight: bold;
 }
-jlerror .stacktrace-header {
+jlerror .stacktrace-header,
+jlerror .error-header {
     font-family: var(--system-ui-font-stack);
 }
-jlerror .stacktrace-header > secret-h1 {
+jlerror .error-header {
+    margin-block-end: 1em;
+}
+jlerror secret-h1 {
     font-size: 1.9rem;
     font-weight: 700;
 }
@@ -336,6 +340,9 @@ jlerror > section .frame-source > span {
     opacity: 0.4;
     padding: 0px 0.2em;
 }
+jlerror > section .doclink {
+    user-select: none;
+}
 
 jlerror li::marker {
     background: red;
@@ -401,6 +408,24 @@ jlerror li .frame-line-preview pre > code:last-of-type:not(.frame-line) {
     margin-bottom: var(--crop);
 }
 
+jlerror .dont-panic {
+    position: absolute;
+    top: 0;
+    right: 0;
+    padding: 0.5em;
+    background: var(--pluto-logs-debug-color);
+    color: var(--black);
+    border-radius: 0.2em;
+    font-family: var(--system-ui-font-stack);
+    font-size: 1.2rem;
+    font-weight: 700;
+    transform: rotate(6deg);
+}
+
+body.disable_ui jlerror .dont-panic {
+    display: none;
+}
+
 table.pluto-table {
     table-layout: fixed;
 }