Skip to content

Commit bb6f5a4

Browse files
chrisjsewellchrisjsewell
authored
👌 IMPROVE: hide-output button (#450)
It now uses the same margin color as the cell source and, when the cell source is present, is "connected" to that, to form a single element.
1 parent 421ca2d commit bb6f5a4

File tree

5 files changed

+122
-78
lines changed

5 files changed

+122
-78
lines changed

‎docs/render/hiding.md‎

Lines changed: 24 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -34,8 +34,7 @@ import numpy as np
3434
data = np.random.rand(2, 100) * 100
3535
```
3636

37-
Here is a cell with a `hide-input` tag. Click the "toggle" button to the
38-
right to show it.
37+
Here is a cell with a `hide-input` tag.
3938

4039
```{code-cell} ipython3
4140
:tags: [hide-input]
@@ -55,7 +54,17 @@ fig, ax = plt.subplots()
5554
points =ax.scatter(*data, c=data[0], s=data[0])
5655
```
5756

58-
And the following cell has a `hide-cell` tag:
57+
Here's a cell with both `hide-input` and `hide-output` tags:
58+
59+
```{code-cell} ipython3
60+
:tags: [hide-input, hide-output]
61+
62+
# This cell has a hide-output tag
63+
fig, ax = plt.subplots()
64+
points =ax.scatter(*data, c=data[0], s=data[0])
65+
```
66+
67+
Here's a cell with a `hide-cell` tag:
5968

6069
```{code-cell} ipython3
6170
:tags: [hide-cell]
@@ -65,17 +74,26 @@ fig, ax = plt.subplots()
6574
points =ax.scatter(*data, c=data[0], s=data[0])
6675
```
6776

77+
Finally, a cell with both `remove-input` (see below) and `hide-output` tags:
78+
79+
```{code-cell} ipython3
80+
:tags: [remove-input, hide-output]
81+
82+
fig, ax = plt.subplots()
83+
points = ax.scatter(*data, c=data[0], s=data[0])
84+
```
85+
6886
You can control the hide/show prompts by using the `code_prompt_show` and `code_prompt_hide` configuration options.
69-
`{type}` will be replaced with `content`, `source`, or `outputs`, depending on the hide tag.
87+
The optional `{type}` placeholder will be replaced with `content`, `source`, or `outputs`, depending on the hide tag.
7088
See the {ref}`config/intro` section for more details.
7189

7290
````markdown
7391

7492
```{code-cell} ipython3
7593
:tags: [hide-cell]
7694
:mystnb:
77-
: code_prompt_show: "My show prompt"
78-
: code_prompt_hide: "My hide prompt"
95+
: code_prompt_show: "My show prompt for {type}"
96+
: code_prompt_hide: "My hide prompt for {type}"
7997
8098
print("hallo world")
8199
```
@@ -131,7 +149,6 @@ the page at all.
131149
```{code-cell} ipython3
132150
:tags: [remove-input]
133151
134-
# This cell has a remove-input tag
135152
fig, ax = plt.subplots()
136153
points =ax.scatter(*data, c=data[0], s=data[0])
137154
```
@@ -141,7 +158,6 @@ Here's a cell with a `remove-output` tag:
141158
```{code-cell} ipython3
142159
:tags: [remove-output]
143160
144-
# This cell has a remove-output tag
145161
fig, ax = plt.subplots()
146162
points = ax.scatter(*data, c=data[0], s=data[0])
147163
```
@@ -152,7 +168,6 @@ below, since the cell will be gone).
152168
```{code-cell} ipython3
153169
:tags: [remove-cell]
154170
155-
# This cell has a remove-cell tag
156171
fig, ax = plt.subplots()
157172
points = ax.scatter(*data, c=data[0], s=data[0])
158173
```

‎myst_nb/core/render.py‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -164,7 +164,7 @@ def render_nb_cell_code(self: SelfType, token: SyntaxTreeNode) -> None:
164164
if hide_cell:
165165
hide_mode = "all"
166166
elif hide_input and hide_output:
167-
hide_mode = "all"
167+
hide_mode = "input+output"
168168
elif hide_input:
169169
hide_mode = "input"
170170
elif hide_output:

‎myst_nb/sphinx_.py‎

Lines changed: 29 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -516,10 +516,21 @@ def run(self, **kwargs):
516516
has_input = node.children[0].get("nb_element") == "cell_code_source"
517517
has_output = node.children[-1].get("nb_element") == "cell_code_output"
518518

519-
# if we have the code source (input) element,
520-
# and we are collapsing the input or input+output
521-
# then we attach the "collapse button" above the input
522-
if has_input and hide_mode == "input":
519+
if has_input and hide_mode == "all":
520+
# wrap everything and place a summary above the input
521+
wrap_node = HideCodeCellNode(
522+
prompt_show=node["prompt_show"].replace("{type}", "content"),
523+
prompt_hide=node["prompt_hide"].replace("{type}", "content"),
524+
)
525+
wrap_node["classes"].append("above-input")
526+
wrap_node.extend(node.children)
527+
node.children = [wrap_node]
528+
529+
if has_input and has_output and hide_mode in ("output", "input+output"):
530+
node.children[0]["classes"].append("above-output-prompt")
531+
532+
if has_input and hide_mode in ("input", "input+output"):
533+
# wrap just the input and place a summary above the input
523534
wrap_node = HideCodeCellNode(
524535
prompt_show=node["prompt_show"].replace("{type}", "source"),
525536
prompt_hide=node["prompt_hide"].replace("{type}", "source"),
@@ -529,19 +540,23 @@ def run(self, **kwargs):
529540
wrap_node.append(code)
530541
node.replace(code, wrap_node)
531542

532-
elif has_input and hide_mode == "all":
543+
if has_input and has_output and hide_mode in ("output", "input+output"):
544+
# wrap just the output and place a summary below the input
533545
wrap_node = HideCodeCellNode(
534-
prompt_show=node["prompt_show"].replace("{type}", "content"),
535-
prompt_hide=node["prompt_hide"].replace("{type}", "content"),
546+
prompt_show=node["prompt_show"].replace("{type}", "output"),
547+
prompt_hide=node["prompt_hide"].replace("{type}", "output"),
536548
)
537-
wrap_node["classes"].append("above-input")
538-
wrap_node.extend(node.children)
539-
node.children = [wrap_node]
549+
wrap_node["classes"].append("below-input")
550+
output = node.children[-1]
551+
wrap_node.append(output)
552+
node.replace(output, wrap_node)
540553

541-
# if we don't have the code source (input) element,
542-
# or are only hiding the output,
543-
# then we place the "collapse button" above the output
544-
elif has_output and hide_mode in ("output", "all"):
554+
if (
555+
(not has_input)
556+
and has_output
557+
and hide_mode in ("all", "input+output", "output")
558+
):
559+
# wrap just the output and place a summary above the output
545560
wrap_node = HideCodeCellNode(
546561
prompt_show=node["prompt_show"].replace("{type}", "outputs"),
547562
prompt_hide=node["prompt_hide"].replace("{type}", "outputs"),

‎myst_nb/static/mystnb.css‎

Lines changed: 66 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,9 @@
99
--mystnb-stdout-border-color: #f7f7f7;
1010
--mystnb-stderr-border-color: #f7f7f7;
1111
--mystnb-traceback-border-color: #ffd6d6;
12+
--mystnb-hide-prompt-opacity: 70%;
13+
--mystnb-source-border-radius: .4em;
14+
--mystnb-source-border-width: 1px;
1215
}
1316

1417
/* Whole cell */
@@ -36,23 +39,68 @@ div.cell div.cell_input,
3639
div.cell details.above-input>summary {
3740
padding-left: 0em;
3841
padding-right: 0em;
39-
border: 1px var(--mystnb-source-border-color) solid;
42+
border: var(--mystnb-source-border-width) var(--mystnb-source-border-color) solid;
4043
background-color: var(--mystnb-source-bg-color);
4144
border-left-color: var(--mystnb-source-margin-color);
4245
border-left-width: medium;
43-
border-radius: .4em;
46+
border-radius: var(--mystnb-source-border-radius);
4447
}
4548

49+
div.cell_input>div,
50+
div.cell_output div.output>div.highlight {
51+
margin: 0em !important;
52+
border: none !important;
53+
}
54+
55+
/* All cell outputs */
56+
.cell_output {
57+
padding-left: 1em;
58+
padding-right: 0em;
59+
margin-top: 1em;
60+
}
61+
62+
/* Text outputs from cells */
63+
.cell_output .output.text_plain,
64+
.cell_output .output.traceback,
65+
.cell_output .output.stream,
66+
.cell_output .output.stderr {
67+
margin-top: 1em;
68+
margin-bottom: 0em;
69+
box-shadow: none;
70+
}
71+
72+
.cell_output .output.text_plain,
73+
.cell_output .output.stream {
74+
background: var(--mystnb-stdout-bg-color);
75+
border: 1px solid var(--mystnb-stdout-border-color);
76+
}
77+
78+
.cell_output .output.stderr {
79+
background: var(--mystnb-stderr-bg-color);
80+
border: 1px solid var(--mystnb-stderr-border-color);
81+
}
82+
83+
.cell_output .output.traceback {
84+
background: var(--mystnb-traceback-bg-color);
85+
border: 1px solid var(--mystnb-traceback-border-color);
86+
}
87+
88+
/* Collapsible cell content */
4689
div.cell details.above-input div.cell_input {
4790
border-top-left-radius: 0;
4891
border-top-right-radius: 0;
49-
border-top: 1px var(--mystnb-source-border-color) dashed;
92+
border-top: var(--mystnb-source-border-width) var(--mystnb-source-border-color) dashed;
93+
}
94+
95+
div.cell div.cell_input.above-output-prompt {
96+
border-bottom-left-radius: 0;
97+
border-bottom-right-radius: 0;
5098
}
5199

52100
div.cell details.above-input>summary {
53101
border-bottom-left-radius: 0;
54102
border-bottom-right-radius: 0;
55-
border-bottom: 1px var(--mystnb-source-border-color) dashed;
103+
border-bottom: var(--mystnb-source-border-width) var(--mystnb-source-border-color) dashed;
56104
padding-left: 1em;
57105
margin-bottom: 0;
58106
}
@@ -61,20 +109,26 @@ div.cell details.above-output>summary {
61109
background-color: var(--mystnb-source-bg-color);
62110
padding-left: 1em;
63111
padding-right: 0em;
64-
border: 1px var(--mystnb-source-border-color) solid;
65-
border-bottom: 1px var(--mystnb-source-border-color) dashed;
66-
border-left-color: blue;
112+
border: var(--mystnb-source-border-width) var(--mystnb-source-border-color) solid;
113+
border-radius: var(--mystnb-source-border-radius);
114+
border-left-color: var(--mystnb-source-margin-color);
67115
border-left-width: medium;
68-
border-top-left-radius: .4em;
69-
border-top-right-radius: .4em;
70116
}
71117

72-
div.cell details.hide>summary::marker {
73-
opacity: 50%;
118+
div.cell details.below-input>summary {
119+
background-color: var(--mystnb-source-bg-color);
120+
padding-left: 1em;
121+
padding-right: 0em;
122+
border: var(--mystnb-source-border-width) var(--mystnb-source-border-color) solid;
123+
border-top: none;
124+
border-bottom-left-radius: var(--mystnb-source-border-radius);
125+
border-bottom-right-radius: var(--mystnb-source-border-radius);
126+
border-left-color: var(--mystnb-source-margin-color);
127+
border-left-width: medium;
74128
}
75129

76130
div.cell details.hide>summary>span {
77-
opacity: 50%;
131+
opacity: var(--mystnb-hide-prompt-opacity);
78132
}
79133

80134
div.cell details.hide[open]>summary>span.collapsed {
@@ -94,52 +148,12 @@ div.cell details.hide:not([open])>summary>span.expanded {
94148
opacity: 1;
95149
}
96150
}
97-
98151
div.cell details.hide[open]>summary~* {
99152
-moz-animation: collapsed-fade-in 0.3s ease-in-out;
100153
-webkit-animation: collapsed-fade-in 0.3s ease-in-out;
101154
animation: collapsed-fade-in 0.3s ease-in-out;
102155
}
103156

104-
div.cell_input>div,
105-
div.cell_output div.output>div.highlight {
106-
margin: 0em !important;
107-
border: none !important;
108-
}
109-
110-
/* All cell outputs */
111-
.cell_output {
112-
padding-left: 1em;
113-
padding-right: 0em;
114-
margin-top: 1em;
115-
}
116-
117-
/* Text outputs from cells */
118-
.cell_output .output.text_plain,
119-
.cell_output .output.traceback,
120-
.cell_output .output.stream,
121-
.cell_output .output.stderr {
122-
margin-top: 1em;
123-
margin-bottom: 0em;
124-
box-shadow: none;
125-
}
126-
127-
.cell_output .output.text_plain,
128-
.cell_output .output.stream {
129-
background: var(--mystnb-stdout-bg-color);
130-
border: 1px solid var(--mystnb-stdout-border-color);
131-
}
132-
133-
.cell_output .output.stderr {
134-
background: var(--mystnb-stderr-bg-color);
135-
border: 1px solid var(--mystnb-stderr-border-color);
136-
}
137-
138-
.cell_output .output.traceback {
139-
background: var(--mystnb-traceback-bg-color);
140-
border: 1px solid var(--mystnb-traceback-border-color);
141-
}
142-
143157
/* Math align to the left */
144158
.cell_output .MathJax_Display {
145159
text-align: left !important;

‎tests/test_render_outputs/test_hide_cell_content.xml‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,10 +11,10 @@
1111
<literal_block classes="output stream" language="myst-ansi" linenos="False" xml:space="preserve">
1212
hide-input
1313
<container cell_index="2" cell_metadata="{'tags': ['hide-output']}" classes="cell tag_hide-output" exec_count="2" hide_mode="output" nb_element="cell_code" prompt_hide="Hide code cell {type}" prompt_show="Show code cell {type}">
14-
<container classes="cell_input" nb_element="cell_code_source">
14+
<container classes="cell_input above-output-prompt" nb_element="cell_code_source">
1515
<literal_block language="ipython3" linenos="False" xml:space="preserve">
1616
print("hide-output")
17-
<HideCodeCellNode classes="above-output" prompt_hide="Hide code cell outputs" prompt_show="Show code cell outputs">
17+
<HideCodeCellNode classes="below-input" prompt_hide="Hide code cell output" prompt_show="Show code cell output">
1818
<container classes="cell_output" nb_element="cell_code_output">
1919
<literal_block classes="output stream" language="myst-ansi" linenos="False" xml:space="preserve">
2020
hide-output

0 commit comments

Comments
 (0)