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.

Sign up for GitHub

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

Jump to bottom

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

Merged
merged 8 commits into from
Aug 5, 2024
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
92e8c0c
add frontend code
disberd Jul 20, 2024
fcd5e54
add progress icon
disberd Jul 20, 2024
c72958e
add progress css
disberd Jul 20, 2024
83cb83d
removed old unused css
disberd Jul 20, 2024
427a619
css tweaks
disberd Jul 20, 2024
6a30728
remove log and class
disberd Jul 23, 2024
ef2b2df
remove icon and use :empty
disberd Jul 23, 2024
db8cfdb
Merge branch 'main' into show_progress_name
disberd Jul 31, 2024
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
9 changes: 7 additions & 2 deletions frontend/components/Logs.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(() => {
Expand Down Expand Up @@ -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 "}
Expand Down
31 changes: 20 additions & 11 deletions frontend/editor.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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%);
Expand Down
Loading