Fix notebook display issues #870

ciyer · 2020-03-25T11:51:16Z

Fix #838 (Allow hiding/showing of notebook cells)

Also:

Use Source Code Pro for output display
Show stdout output in black
Style tables as bootstrap tables

Testing (compare old/new)

See the difference in fonts and colors

See how the input cells are hidden when papermill runs in report mode

See how the tables look different

See how you can select if code is to be shown

https://sekhar.dev.renku.ch/projects/cramakri/notebook-rendering/files/blob/notebooks/input-hidden-test-report.ran.ipynb (default is code hidden, but can show as well)
https://sekhar.dev.renku.ch/projects/cramakri/notebook-rendering/files/blob/notebooks/ouput-test.ipynb (default is code shown, but can hide as well)

Fix #838

- import Source Code Pro font used in output display - display code in black - improve styling of tables

Fix #838

- import Source Code Pro font used in output display - display code in black - improve styling of tables

Fix #838

- import Source Code Pro font used in output display - display code in black - improve styling of tables

Fix #838

ciyer · 2020-04-15T16:04:57Z

So if there is the default, then there should just be the default without having to give it a name or a button. Can we make it a toggle that makes it clear that it's a global override? and if you flip it in either direction it's ignoring the cell-specific setting?

That will make it clearer. Let me think about how to implement that.

vfried · 2020-04-15T16:09:54Z

Hey, if the option is between two things we can use something like in the ckeditor (Coming soon)

That is the code for it..
<CustomInput className="float-right" type="switch" id="exampleCustomSwitch" name="customSwitch" label={switchLabel} checked={codeview} onChange={() => { setCodeview(!codeview); }} />

ciyer · 2020-04-15T18:30:24Z

I like that switch. We could do something like

lorenzo-cavazzi

With the update, the layout looks much better 👍
I agree the switch looks nice. I would probably keep the 3 buttons but I see they may be confusing.

I have noticed a strange behavior in the "View in GitLab" button on the project's header. If you click on it, the dropdown menu is empty. Not sure how this could be related to the changes in the file components, but comparing it with dev, it seems it affects only this PR 🤔

ciyer · 2020-04-17T16:07:40Z

@lorenzo-cavazzi Can you check this again? It looks correct on my computer (I tried Chrome and Firefox).

ciyer · 2020-04-17T16:34:24Z

This is what it looks like now:

- import Source Code Pro font used in output display - display code in black - improve styling of tables

Fix #838

Show the code visibility switch as a header. Fix #838

Use outline buttons and semi-bold for the label. Fix #838

Extract the code visibility form as a separate component. Fix #838

Provide a switch for changing code visibility. Fix #838

- import Source Code Pro font used in output display - display code in black - improve styling of tables

Fix #838

Provide a switch for changing code visibility. Fix #838

rokroskar · 2020-04-18T20:01:02Z

Thanks @ciyer I think that's much clearer!

lorenzo-cavazzi

Great feature, now it looks very polished! And thumb up for the tests, they act as documentation here 👍

I added a comment, just a minor detail on components spacing. Fell free to add the margin or just merge the PR if you like how it looks now.

lorenzo-cavazzi · 2020-04-20T07:19:35Z

src/file/File.present.js

+
+  const overrideControl = (displayMode === NotebookSourceDisplayMode.DEFAULT) ?
+    null :
+    <ButtonGroup key="controls" size="sm">


The Buttons look very close to the text above (see picture)

I would add a distance, maybe className="mt-1" (or even mt-2)

I tried both and prefer mt-1. Here is what it looks like now.

Provide a switch for changing code visibility. Fix #838

- import Source Code Pro font used in output display - display code in black - improve styling of tables

Fix #838

rokroskar · 2020-04-21T08:27:41Z

Thanks all, this is going to make the notebooks view so much better!

ciyer pushed a commit that referenced this pull request Mar 25, 2020

fix: import Source Code Pro font used in output display (#870)

a9300d6

Fix #838

ciyer pushed a commit that referenced this pull request Mar 25, 2020

fix: display code in black (#870)

3213d62

Fix #838

ciyer force-pushed the 838-notebook-display branch from 7f50402 to be7a74c Compare March 25, 2020 11:53

ciyer pushed a commit that referenced this pull request Mar 25, 2020

fix: import Source Code Pro font used in output display (#870)

bbc02ce

Fix #838

ciyer pushed a commit that referenced this pull request Mar 25, 2020

fix: display code in black (#870)

33c7acd

Fix #838

ciyer force-pushed the 838-notebook-display branch from be7a74c to 941c365 Compare March 25, 2020 14:51

ciyer changed the title ~~Fix notebook display issues~~ WIP: Fix notebook display issues Mar 26, 2020

ciyer added this to the sprint-2020-03-27 milestone Mar 27, 2020

ciyer pushed a commit that referenced this pull request Apr 3, 2020

fix: import Source Code Pro font used in output display (#870)

ef7fe2e

Fix #838

ciyer force-pushed the 838-notebook-display branch from 941c365 to c81a86f Compare April 3, 2020 08:17

ciyer pushed a commit that referenced this pull request Apr 3, 2020

fix: display code in black (#870)

3bd292d

Fix #838

ciyer pushed a commit that referenced this pull request Apr 3, 2020

feat: hide cells hidden in papermill report mode (#870)

bba4586

Fix #838

ciyer force-pushed the 838-notebook-display branch from c81a86f to bba4586 Compare April 3, 2020 09:17

ciyer pushed a commit that referenced this pull request Apr 3, 2020

fix: import Source Code Pro font used in output display (#870)

fd2d0ae

Fix #838

ciyer pushed a commit that referenced this pull request Apr 3, 2020

fix: display code in black (#870)

44cfa67

Fix #838

ciyer force-pushed the 838-notebook-display branch from bba4586 to d639aae Compare April 3, 2020 09:19

ciyer pushed a commit that referenced this pull request Apr 3, 2020

feat: hide cells hidden in papermill report mode (#870)

d639aae

Fix #838

ciyer pushed a commit that referenced this pull request Apr 3, 2020

fix: improve styling of notebooks (#870)

591499e

- import Source Code Pro font used in output display - display code in black - improve styling of tables

ciyer pushed a commit that referenced this pull request Apr 3, 2020

feat: hide cells hidden in papermill report mode (#870)

1a85140

Fix #838

ciyer force-pushed the 838-notebook-display branch from d639aae to 1a85140 Compare April 3, 2020 14:14

ciyer pushed a commit that referenced this pull request Apr 14, 2020

fix: improve styling of notebooks (#870)

1e6c3ab

- import Source Code Pro font used in output display - display code in black - improve styling of tables

ciyer pushed a commit that referenced this pull request Apr 14, 2020

feat: hide cells hidden in papermill report mode (#870)

a280f82

Fix #838

ciyer force-pushed the 838-notebook-display branch from 1a85140 to a280f82 Compare April 14, 2020 12:13

ciyer pushed a commit that referenced this pull request Apr 14, 2020

feat: provide UI for hiding/showing code cells (#870)

5660377

ciyer changed the title ~~WIP: Fix notebook display issues~~ Fix notebook display issues Apr 15, 2020

ciyer pushed a commit that referenced this pull request Apr 15, 2020

fix: improve styling of notebooks (#870)

6d5f1ce

- import Source Code Pro font used in output display - display code in black - improve styling of tables

ciyer pushed a commit that referenced this pull request Apr 15, 2020

feat: hide cells hidden in papermill report mode (#870)

825c8b0

Fix #838

ciyer force-pushed the 838-notebook-display branch from 5660377 to f8cbb02 Compare April 15, 2020 07:32

ciyer pushed a commit that referenced this pull request Apr 15, 2020

feat: provide UI for hiding/showing code cells (#870)

f8cbb02

ciyer marked this pull request as ready for review April 15, 2020 07:33

lorenzo-cavazzi requested changes Apr 16, 2020

View reviewed changes

ciyer pushed a commit that referenced this pull request Apr 17, 2020

fix: improve styling of notebooks (#870)

4ea09a7

- import Source Code Pro font used in output display - display code in black - improve styling of tables

ciyer pushed a commit that referenced this pull request Apr 17, 2020

feat: hide cells hidden in papermill report mode (#870)

a7cd0fd

Fix #838

ciyer force-pushed the 838-notebook-display branch from ec04ec7 to acd6b73 Compare April 17, 2020 17:01

ciyer pushed a commit that referenced this pull request Apr 17, 2020

feat: provide UI for hiding/showing code cells (#870)

a071e7a

ciyer pushed a commit that referenced this pull request Apr 17, 2020

feat: provide UI for hiding/showing code cells (#870)

d80cfe8

Show the code visibility switch as a header. Fix #838

ciyer pushed a commit that referenced this pull request Apr 17, 2020

feat: provide UI for hiding/showing code cells (#870)

5469e25

Use outline buttons and semi-bold for the label. Fix #838

ciyer pushed a commit that referenced this pull request Apr 17, 2020

feat: provide UI for hiding/showing code cells (#870)

ed29c3c

Extract the code visibility form as a separate component. Fix #838

ciyer pushed a commit that referenced this pull request Apr 17, 2020

feat: provide UI for hiding/showing code cells (#870)

7c16736

Provide a switch for changing code visibility. Fix #838

ciyer force-pushed the 838-notebook-display branch from acd6b73 to 15203bf Compare April 17, 2020 17:25

cramakri added 2 commits April 17, 2020 19:26

fix: improve styling of notebooks (#870)

143cb71

- import Source Code Pro font used in output display - display code in black - improve styling of tables

feat: hide cells hidden in papermill report mode (#870)

46194a7

Fix #838

ciyer force-pushed the 838-notebook-display branch from 15203bf to c89e935 Compare April 17, 2020 17:26

ciyer pushed a commit that referenced this pull request Apr 17, 2020

feat: provide UI for hiding/showing code cells (#870)

d31427b

Provide a switch for changing code visibility. Fix #838

lorenzo-cavazzi previously approved these changes Apr 20, 2020

View reviewed changes

feat: provide UI for hiding/showing code cells (#870)

30d59dd

Provide a switch for changing code visibility. Fix #838

ciyer dismissed lorenzo-cavazzi’s stale review via 30d59dd April 21, 2020 07:28

ciyer force-pushed the 838-notebook-display branch from c89e935 to 30d59dd Compare April 21, 2020 07:28

lorenzo-cavazzi approved these changes Apr 21, 2020

View reviewed changes

ciyer merged commit 396d0cb into master Apr 21, 2020

ciyer pushed a commit that referenced this pull request Apr 21, 2020

fix: improve styling of notebooks (#870)

edc6c6d

- import Source Code Pro font used in output display - display code in black - improve styling of tables

ciyer pushed a commit that referenced this pull request Apr 21, 2020

feat: hide cells hidden in papermill report mode (#870)

8e1c035

Fix #838

ciyer deleted the 838-notebook-display branch April 21, 2020 08:36

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fix notebook display issues #870

Fix notebook display issues #870

ciyer commented Mar 25, 2020 •

edited

Loading

ciyer commented Apr 15, 2020

vfried commented Apr 15, 2020 •

edited

Loading

ciyer commented Apr 15, 2020

lorenzo-cavazzi left a comment

ciyer commented Apr 17, 2020

ciyer commented Apr 17, 2020

rokroskar commented Apr 18, 2020

lorenzo-cavazzi left a comment •

edited

Loading

lorenzo-cavazzi Apr 20, 2020

ciyer Apr 21, 2020

rokroskar commented Apr 21, 2020

Fix notebook display issues #870

Fix notebook display issues #870

Conversation

ciyer commented Mar 25, 2020 • edited Loading

Testing (compare old/new)

ciyer commented Apr 15, 2020

vfried commented Apr 15, 2020 • edited Loading

ciyer commented Apr 15, 2020

lorenzo-cavazzi left a comment

Choose a reason for hiding this comment

ciyer commented Apr 17, 2020

ciyer commented Apr 17, 2020

rokroskar commented Apr 18, 2020

lorenzo-cavazzi left a comment • edited Loading

Choose a reason for hiding this comment

lorenzo-cavazzi Apr 20, 2020

Choose a reason for hiding this comment

ciyer Apr 21, 2020

Choose a reason for hiding this comment

rokroskar commented Apr 21, 2020

ciyer commented Mar 25, 2020 •

edited

Loading

vfried commented Apr 15, 2020 •

edited

Loading

lorenzo-cavazzi left a comment •

edited

Loading