Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Motivational words for errors #3040

Merged
merged 4 commits into from
Oct 3, 2024
Merged
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Next Next commit
Motivational words for errors
  • Loading branch information
fonsp committed Oct 3, 2024
commit 866605f7bfcf2934ccea185ed67ada048745fea7
47 changes: 40 additions & 7 deletions frontend/components/ErrorMessage.js
Original file line number Diff line number Diff line change
@@ -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,41 @@ 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!",
"Silly computer!",
"Silly computer!",
"Probably not your fault!",
"Try asking on Julia Discourse!",
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
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">${msg}</div>`
}

const get_erred_upstreams = (
/** @type {import("./Editor.js").NotebookData?} */ notebook,
/** @type {string} */ cell_id,
25 changes: 23 additions & 2 deletions frontend/treeview.css
Original file line number Diff line number Diff line change
@@ -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,20 @@ 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);
}

table.pluto-table {
table-layout: fixed;
}
Loading