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

Add stale cells (aka single-shot cells) #3068

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Add stale cells (aka single-shot cells) #3068

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
55 changes: 51 additions & 4 deletions frontend/components/Cell.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -105,7 +105,19 @@ const on_jump = (hasBarrier, pluto_actions, cell_id) => () => {
* */
export const Cell = ({
cell_input: { cell_id, code, code_folded, metadata },
cell_result: { queued, running, runtime, errored, output, logs, published_object_keys, depends_on_disabled_cells, depends_on_skipped_cells },
cell_result: {
queued,
running,
runtime,
errored,
output,
logs,
published_object_keys,
depends_on_disabled_cells,
depends_on_skipped_cells,
stale,
depends_on_stale_cells,
},
cell_dependencies,
cell_input_local,
notebook_id,
Expand Down Expand Up @@ -294,8 +306,10 @@ export const Cell = ({
code_folded,
skip_as_script,
running_disabled,
stale,
depends_on_disabled_cells,
depends_on_skipped_cells,
depends_on_stale_cells,
show_input,
shrunk: Object.values(logs).length > 0,
hooked_up: output?.has_pluto_hook_features ?? false,
Expand All @@ -315,9 +329,42 @@ export const Cell = ({
<span></span>
</button>
<pluto-shoulder draggable="true" title="Drag to move cell">
<button onClick=${on_code_fold} class="foldcode" title="Show/hide code">
<span></span>
</button>
<div>
<button onClick=${on_code_fold} class="foldcode" title="Show/hide code">
<span></span>
</button>
${stale
? html`<button
class="stale_cell_marker"
title=${`This cell’s output is stale. Click to know more!`}
onClick=${(e) => {
open_pluto_popup({
type: "info",
source_element: e.target,
body: html`This cell’s outputs is wrapped in a PlutoRunner.Stale object. This freezes all the cells that depend on this
one.`,
})
}}
>
<span></span>
</button>`
: depends_on_stale_cells
? html`<button
class="depends_on_stale_cells_marker"
title=${`This cell depends on stale cells. Click to know more!`}
onClick=${(e) => {
open_pluto_popup({
type: "info",
source_element: e.target,
body: html`This cell depends on a cell whose outputs is wrapped in a PlutoRunner.Stale object. This freezes all the cells
that depend on it, including this one.`,
})
}}
>
<span></span>
</button>`
: null}
</div>
</pluto-shoulder>
<pluto-trafficlight></pluto-trafficlight>
${code_not_trusted_yet
Expand Down
4 changes: 3 additions & 1 deletion frontend/components/Editor.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -118,7 +118,7 @@ const first_true_key = (obj) => {
* @type {{
* disabled: boolean,
* show_logs: boolean,
* skip_as_script: boolean
* skip_as_script: boolean,
* }}
*
* @typedef CellInputData
Expand Down Expand Up @@ -160,12 +160,14 @@ const first_true_key = (obj) => {
* queued: boolean,
* running: boolean,
* errored: boolean,
* stale: boolean,
* runtime: number?,
* downstream_cells_map: { string: [string]},
* upstream_cells_map: { string: [string]},
* precedence_heuristic: number?,
* depends_on_disabled_cells: boolean,
* depends_on_skipped_cells: boolean,
* depends_on_stale_cells: boolean,
* output: {
* body: string,
* persist_js_state: boolean,
Expand Down
55 changes: 40 additions & 15 deletions frontend/editor.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1253,6 +1253,11 @@ pluto-display > div {
display: none;
}

/* STALE CELLS */
pluto-cell.stale > pluto-output {
background: var(--pluto-stale-output-bg-color);
}

/* DISABLED CELLS */

pluto-cell.depends_on_disabled_cells > pluto-output,
Expand Down Expand Up @@ -1390,7 +1395,7 @@ button.floating_back_button,
pluto-cell > button,
pluto-input > button,
pluto-runarea > button,
pluto-shoulder > button,
pluto-shoulder > div > button,
nav#slide_controls > button {
position: absolute;
margin: 0px;
Expand Down Expand Up @@ -1420,7 +1425,6 @@ pluto-shoulder {
--invisible-border: calc(0.5 * var(--pluto-cell-spacing));
--shoulder-width: calc(28px + var(--invisible-border));
--border-radius: calc(5px + var(--invisible-border));

left: calc(0px - var(--shoulder-width));
width: var(--shoulder-width);
border-radius: var(--border-radius) 0px 0px var(--border-radius);
Expand All @@ -1434,6 +1438,7 @@ pluto-shoulder {
bottom: calc(0px - var(--invisible-border));
border: var(--invisible-border) solid rgba(0, 0, 0, 0);
border-right: none;
overflow: clip;
}
pluto-editor.fullscreen pluto-shoulder {
--shoulder-width: 2000px;
Expand All @@ -1444,32 +1449,44 @@ pluto-shoulder:hover {
background-clip: padding-box;
}

pluto-shoulder > button {
pluto-shoulder > div {
flex: 0 0 auto;
position: sticky;
top: 0;
display: flex;
flex-direction: column;
}

pluto-shoulder > div > button {
position: static;
padding: 4px 5px 4px 10px;
}

pluto-cell:focus-within > pluto-shoulder > button {
pluto-cell:focus-within > pluto-shoulder > div > button {
/* we use padding instead of 4px extra margin to move the eye to the left so that the hitbox becomes grows - you want to be able to double click the button */
padding-right: 9px;
}

/* pluto-cell.code_folded.inline-output > pluto-shoulder > button {
/* pluto-cell.code_folded.inline-output > pluto-shoulder > div > button {
margin-top: 3px;
} */

pluto-shoulder > button > span::after {
pluto-shoulder > div > button.foldcode > span::after {
background-image: url("https://cdn.jsdelivr.net/gh/ionic-team/[email protected]/src/svg/eye-outline.svg");
filter: var(--image-filters);
}

pluto-cell.code_folded > pluto-shoulder > button > span::after {
pluto-cell.code_folded > pluto-shoulder > div > button.foldcode > span::after {
background-image: url("https://cdn.jsdelivr.net/gh/ionic-team/[email protected]/src/svg/eye-off-outline.svg");
filter: var(--image-filters);
}

pluto-shoulder > div > button.stale_cell_marker > span::after,
pluto-shoulder > div > button.depends_on_stale_cells_marker > span::after {
background-image: url("https://cdn.jsdelivr.net/gh/ionic-team/[email protected]/src/svg/warning-outline.svg");
filter: var(--image-filters);
}

/* TRAFFIC LIGHT */

pluto-trafficlight {
Expand Down Expand Up @@ -1548,6 +1565,14 @@ body:not(.___) pluto-cell.errored > pluto-trafficlight {
background-clip: padding-box;
}

/* stale cells */
body:not(.___) pluto-cell.stale > pluto-trafficlight,
body:not(.___) pluto-cell.depends_on_stale_cells > pluto-trafficlight {
background: var(--stale-cell-color);
border-left-color: var(--stale-cell-color);
background-clip: padding-box;
}

body:not(.___) pluto-cell.queued > pluto-trafficlight::after {
background: repeating-linear-gradient(-45deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 8px, var(--normal-cell-color) 8px, var(--normal-cell-color) 16px);
background-clip: padding-box;
Expand Down Expand Up @@ -1624,7 +1649,7 @@ pluto-input > button > span {
pluto-cell > button,
pluto-input > button,
pluto-runarea > button,
pluto-shoulder > button,
pluto-shoulder > div > button,
pluto-cell > pluto-runarea {
opacity: 0;
/* to make it feel smooth: */
Expand All @@ -1638,8 +1663,8 @@ pluto-input > button > span {
pluto-cell:hover > pluto-input > button,
pluto-cell:focus-within > pluto-input > button,
pluto-cell > pluto-runarea > button,
pluto-cell:hover > pluto-shoulder > button,
pluto-cell:focus-within > pluto-shoulder > button {
pluto-cell:hover > pluto-shoulder > div > button,
pluto-cell:focus-within > pluto-shoulder > div > button {
opacity: 0.6;
transition: opacity 0.25s ease-in-out;
}
Expand All @@ -1650,7 +1675,7 @@ pluto-input > button > span {
pluto-cell > button:hover,
pluto-cell > pluto-input > button:hover,
pluto-cell > pluto-runarea > button:hover,
pluto-cell > pluto-shoulder > button:hover,
pluto-cell > pluto-shoulder > div > button:hover,
pluto-cell:hover > pluto-runarea {
opacity: 1;
/* to make it feel snappy: */
Expand All @@ -1661,7 +1686,7 @@ pluto-input > button > span {
@media screen and (pointer: coarse) {
pluto-cell > button.add_cell,
pluto-input > button,
pluto-shoulder > button {
pluto-shoulder > div > button {
opacity: 0.25;
transition: opacity 0.25s ease-in-out;
}
Expand All @@ -1676,14 +1701,14 @@ pluto-input > button > span {
pluto-cell:focus-within > button.add_cell,
pluto-cell:focus-within > pluto-input > button,
pluto-cell:focus-within > pluto-runarea,
pluto-cell:focus-within > pluto-shoulder > button {
pluto-cell:focus-within > pluto-shoulder > div > button {
opacity: 0.6;
transition: opacity 0.25s ease-in-out;
}
pluto-cell > pluto-input > button:focus-within,
pluto-cell > button:focus-within,
pluto-cell > pluto-input > button:focus-within pluto-cell > pluto-runarea > button:focus-within,
pluto-cell > pluto-shoulder > button:focus-within,
pluto-cell > pluto-shoulder > div > button:focus-within,
pluto-cell > pluto-runarea {
opacity: 1;
/* to make it feel snappy: */
Expand All @@ -1694,7 +1719,7 @@ pluto-input > button > span {
pluto-cell > button > span::after,
pluto-input > button > span::after,
pluto-runarea > button > span::after,
pluto-shoulder > button > span::after {
pluto-shoulder > div > button > span::after {
display: block;
content: " " !important;
background-size: 17px 17px;
Expand Down
2 changes: 2 additions & 0 deletions frontend/themes/dark.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@
--error-cell-color: rgba(var(--error-color), 0.6);
--bright-error-cell-color: rgba(var(--error-color), 0.9);
--light-error-cell-color: rgba(var(--error-color), 0);
--stale-cell-color: #b86f00;

/*Export styling*/
--export-bg-color: hsl(225deg 17% 18%);
Expand All @@ -45,6 +46,7 @@
--pluto-output-color: hsl(0deg 0% 77%);
--pluto-output-h-color: hsl(0, 0%, 90%);
--pluto-output-bg-color: var(--main-bg-color);
--pluto-stale-output-bg-color: #332300;
--a-underline: #ffffff69;
--blockquote-color: inherit;
--blockquote-bg: #2e2e2e;
Expand Down
46 changes: 24 additions & 22 deletions frontend/themes/light.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@
--error-cell-color: rgba(var(--error-color), 0.7);
--bright-error-cell-color: rgb(var(--error-color));
--light-error-cell-color: rgba(var(--error-color), 0.05);
--stale-cell-color: #ffba53;

/*Export styling*/
--export-bg-color: rgb(60, 67, 101);
Expand All @@ -45,6 +46,7 @@
--pluto-output-color: hsl(0, 0%, 25%);
--pluto-output-h-color: hsl(0, 0%, 12%);
--pluto-output-bg-color: white;
--pluto-stale-output-bg-color: #ffeed5;
--a-underline: #00000059;
--blockquote-color: #555;
--blockquote-bg: #f2f2f2;
Expand Down Expand Up @@ -191,36 +193,36 @@

/* code highlighting */
--cm-color-editor-text: #41323f;
--cm-color-comment: #e96ba8;
--cm-color-atom: #815ba4;
--cm-color-number: #815ba4;
--cm-color-property: #b67a48;
--cm-color-keyword: #ef6155;
--cm-color-string: #da5616;
--cm-color-var: #5668a4;
--cm-color-var2: #37768a;
--cm-color-macro: #5c8c5f;
--cm-color-builtin: #5e7ad3;
--cm-color-function: #cc80ac;
--cm-color-type: hsl(170deg 7% 56%);
--cm-color-bracket: #41323f;
--cm-color-tag: #ef6155;
--cm-color-link: #815ba4;
--cm-color-error-bg: #ef6155;
--cm-color-error: #f7f7f7;
--cm-color-comment: #e96ba8;
--cm-color-atom: #815ba4;
--cm-color-number: #815ba4;
--cm-color-property: #b67a48;
--cm-color-keyword: #ef6155;
--cm-color-string: #da5616;
--cm-color-var: #5668a4;
--cm-color-var2: #37768a;
--cm-color-macro: #5c8c5f;
--cm-color-builtin: #5e7ad3;
--cm-color-function: #cc80ac;
--cm-color-type: hsl(170deg 7% 56%);
--cm-color-bracket: #41323f;
--cm-color-tag: #ef6155;
--cm-color-link: #815ba4;
--cm-color-error-bg: #ef6155;
--cm-color-error: #f7f7f7;
--cm-color-matchingBracket: black;
--cm-color-matchingBracket-bg: #1b4bbb21;
--cm-color-placeholder-text: rgba(0, 0, 0, 0.2);
--cm-color-clickable-underline: #ced2ef;

/* Mixed parsers */
--cm-color-html: #48b685;
--cm-color-html: #48b685;
--cm-color-html-accent: #00ab85;
--cm-color-css: #876800;
--cm-color-css-accent: #696200;
--cm-color-css: #876800;
--cm-color-css-accent: #696200;
--cm-css-why-doesnt-codemirror-highlight-all-the-text-aaa: #3b3700;
--cm-color-md: #005a9b;
--cm-color-md-accent: #00a9d1;
--cm-color-md: #005a9b;
--cm-color-md-accent: #00a9d1;

/*autocomplete menu*/
--autocomplete-menu-bg-color: white;
Expand Down
Loading
Loading