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%);