Add support for custom name in @progress (ProgressLogging.jl) (#2966)

fonsp · Aug 5, 2024 · 0e9b423 · 0e9b423
1 parent 4f8741c
commit 0e9b423
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 13 deletions.
diff --git 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`<pluto-progress-name>${name}</pluto-progress-name>
+        <pluto-progress-bar-container><${ProgressBar} progress=${progress} /></pluto-progress-bar-container>`
+}
+
+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 })
         <pluto-log-icon></pluto-log-icon>
         <pluto-log-dot class=${level}
             >${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
@@ -2984,16 +2984,32 @@ 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 {
     --c: var(--pluto-logs-progress-fill);
     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%);