diff --git a/frontend/components/Logs.js b/frontend/components/Logs.js
index 44d7e122b4..7cf94cd192 100644
--- a/frontend/components/Logs.js
+++ b/frontend/components/Logs.js
@@ -88,7 +88,12 @@ export const Logs = ({ logs, line_heights, set_cm_highlighted_line, sanitize_htm
`
}
-const Progress = ({ progress }) => {
+const Progress = ({ name, progress }) => {
+ return html`${name}
+ <${ProgressBar} progress=${progress} />`
+}
+
+const ProgressBar = ({ progress }) => {
const bar_ref = useRef(/** @type {HTMLElement?} */ (null))
useLayoutEffect(() => {
@@ -136,7 +141,7 @@ const Dot = ({ set_cm_highlighted_line, msg, kwargs, y, level, sanitize_html })
${is_progress
- ? html`<${Progress} progress=${progress} />`
+ ? html`<${Progress} name="${msg[0]}" progress=${progress} />`
: is_stdout
? html`<${MoreInfo}
body=${html`${"This text was written to the "}
diff --git a/frontend/editor.css b/frontend/editor.css
index bc150d3e85..4a3849125c 100644
--- a/frontend/editor.css
+++ b/frontend/editor.css
@@ -2984,8 +2984,25 @@ pluto-logs-container > header {
/* background: #494949; */
}
-pluto-logs-container pluto-progress-bars pluto-progress:not(:first-child) {
- margin-top: 10px;
+pluto-logs-container pluto-progress-bar-container {
+ overflow: hidden;
+ outline: 3px solid var(--pluto-logs-progress-border);
+ outline-offset: -2px;
+ border-radius: 6px;
+ background: var(--pluto-logs-progress-bg);
+ font-size: 0.7rem;
+ flex: 0 1 200px;
+}
+
+pluto-logs-container pluto-progress-name {
+ white-space: pre-wrap;
+ font-family: var(--julia-mono-font-stack);
+ font-size: 0.8rem;
+ font-variant-ligatures: none;
+ padding: 0 0.4rem 0 0.1rem;
+}
+pluto-logs-container pluto-progress-name:empty {
+ padding: 0;
}
pluto-logs-container pluto-progress-bar {
@@ -2993,7 +3010,6 @@ pluto-logs-container pluto-progress-bar {
padding: 0.3em 0.6em;
background: linear-gradient(90deg, var(--c), var(--c));
background-repeat: no-repeat;
- width: 100%;
transition: background-size cubic-bezier(0.14, 0.71, 0, 0.99) 0.5s, opacity linear 0.2s;
display: grid;
align-items: center;
@@ -3098,18 +3114,11 @@ pluto-log-dot-positioner.Stdout pluto-log-icon::before {
}
pluto-log-dot.Progress {
- overflow: hidden;
padding: 0px;
- flex: 0 1 200px;
display: flex;
flex-direction: row;
- align-items: stretch;
+ align-items: center;
align-self: center;
- outline: 3px solid var(--pluto-logs-progress-border);
- outline-offset: -2px;
- border-radius: 6px;
- background: var(--pluto-logs-progress-bg);
- font-size: 0.7rem;
}
pluto-log-dot.Stdout {
--inner: hsl(36deg 20% 37%);