small fixes to jupyterlab voila extension

[legendb317]

References

n/a

Code changes

Change 1

Issue: If a user makes an edit without saving and refreshes voila, voila does not reflect the updated cells
Fix: Save the notebook on refresh
(Note: Saving the notebook when using voila already occurs when the voila extension is launched)

Change 2

Issue: "Render on Refresh" checkbox is misaligned
Fix: Update style
(Note: Unless something is wrong with my dev environment, I noticed that changes to jp-VoilaPreview-renderOnSave in the base.css were not reflected)

User-facing changes

Change 1

Users will no longer need to save a notebook before refreshing voila

Change 2

Before

After

Backwards-incompatible changes

n/a

[github-actions]

👈 Launch a Binder on branch legendb317/voila/save-on-refresh

[github-actions]

Benchmark report

The execution time (in milliseconds) are grouped by test file, test type and browser.
For each case, the following values are computed: min <- [1st quartile - median - 3rd quartile] -> max.

Results table

Test file	voila-tree-classic.ipynb	voila-tree-light.ipynb	voila-tree-dark.ipynb	voila-tree-miami.ipynb	basics.ipynb	bqplot.ipynb	dashboard.ipynb	gridspecLayout.ipynb	interactive.ipynb	ipympl.ipynb	ipyvolume.ipynb	multiple_widgets.ipynb	query-strings.ipynb	reveal.ipynb
Render
chromium
actual	115 <- [123 - 148 - 197] -> 338	70 <- [74 - 82 - 99] -> 142	73 <- [77 - 85 - 99] -> 134	72 <- [74 - 80 - 90] -> 118	2639 <- [2819 - 2925 - 2957] -> 3601	2885 <- [2923 - 2981 - 3009] -> 3428	3144 <- [3206 - 3213 - 3214] -> 3368	3568 <- [3628 - 3654 - 3772] -> 3861	2282 <- [2351 - 2398 - 2413] -> 2537	4303 <- [4424 - 4572 - 4895] -> 5313	8760 <- [9987 - 10116 - 10193] -> 10203	10844 <- [10884 - 10958 - 10997] -> 11350	1655 <- [1661 - 1672 - 1685] -> 1721	2461 <- [2466 - 2471 - 2475] -> 2603
expected	3379 <- [3442 - 3517 - 3701] -> 3876	2976 <- [3227 - 3321 - 3421] -> 3604	3608 <- [3623 - 3709 - 3793] -> 3825	4453 <- [4453 - 4523 - 4661] -> 4748	2559 <- [2655 - 2656 - 2660] -> 2674	3982 <- [4079 - 4213 - 4356] -> 4743	12183 <- [18509 - 19553 - 20811] -> 21515	15319 <- [15660 - 15796 - 15912] -> 16056	1517 <- [1920 - 1997 - 2103] -> 2113

❗ Test metadata have changed

--- /dev/fd/63	2022-02-22 12:49:05.582882744 +0000
+++ /dev/fd/62	2022-02-22 12:49:05.586882793 +0000
@@ -4,37 +4,37 @@
     "BENCHMARK_REFERENCE": "actual"
   },
   "browsers": {
-    "chromium": "97.0.4666.0"
+    "chromium": "94.0.4595.0"
   },
   "systemInformation": {
     "cpu": {
-      "brand": "Xeon® Platinum 8272CL",
+      "brand": "Xeon® E5-2673 v3",
       "cache": {
         "l1d": 65536,
         "l1i": 65536,
-        "l2": 2097152,
-        "l3": 36700160
+        "l2": 524288,
+        "l3": 31457280
       },
       "cores": 2,
       "family": "6",
-      "flags": "fpu vme de pse tsc msr pae mce cx8 apic sep mtrr pge mca cmov pat pse36 clflush mmx fxsr sse sse2 ss ht syscall nx pdpe1gb rdtscp lm constant_tsc rep_good nopl xtopology cpuid pni pclmulqdq ssse3 fma cx16 pcid sse4_1 sse4_2 movbe popcnt aes xsave avx f16c rdrand hypervisor lahf_lm abm 3dnowprefetch invpcid_single pti fsgsbase bmi1 hle avx2 smep bmi2 erms invpcid rtm mpx avx512f avx512dq rdseed adx smap clflushopt avx512cd avx512bw avx512vl xsaveopt xsavec xsaves md_clear",
+      "flags": "fpu vme de pse tsc msr pae mce cx8 apic sep mtrr pge mca cmov pat pse36 clflush mmx fxsr sse sse2 ss ht syscall nx pdpe1gb rdtscp lm constant_tsc rep_good nopl xtopology cpuid pni pclmulqdq ssse3 fma cx16 pcid sse4_1 sse4_2 movbe popcnt aes xsave avx f16c rdrand hypervisor lahf_lm abm invpcid_single pti fsgsbase bmi1 avx2 smep bmi2 erms invpcid xsaveopt md_clear",
       "governor": "",
       "manufacturer": "Intel®",
-      "model": "85",
+      "model": "63",
       "physicalCores": 2,
       "processors": 1,
       "revision": "",
       "socket": "",
-      "speed": 2.6,
+      "speed": 2.4,
       "speedMax": null,
       "speedMin": null,
-      "stepping": "7",
+      "stepping": "2",
       "vendor": "GenuineIntel",
       "virtualization": false,
       "voltage": ""
     },
     "mem": {
-      "total": 7284850688
+      "total": 7291699200
     },
     "osInfo": {
       "arch": "x64",
@@ -42,11 +42,11 @@
       "codename": "Focal Fossa",
       "codepage": "UTF-8",
       "distro": "Ubuntu",
-      "kernel": "5.11.0-1028-azure",
+      "kernel": "5.8.0-1040-azure",
       "logofile": "ubuntu",
       "platform": "linux",
       "release": "20.04.3 LTS",
-      "serial": "b77b4ec5b44b40a7913d0d5091bccfef",
+      "serial": "cfc067bfcb844f35865e279a1b0e66c5",
       "servicepack": "",
       "uefi": false
     }

[jtpio]

Thanks @legendb317 👍

(Note: Unless something is wrong with my dev environment, I noticed that changes to jp-VoilaPreview-renderOnSave in the base.css were not reflected)

Normally the changes should be reflected and there seems to be some CSS applied to that class already:

voila/packages/jupyterlab-preview/style/base.css

Lines 5 to 7 in 6be66cc

	.jp-VoilaPreview-renderOnSave {
	align-items: center;
	}

If you run the watch script, does webpack incrementally recompiles the extension after making a change to the css file?

[legendb317]

Thanks @legendb317 👍

(Note: Unless something is wrong with my dev environment, I noticed that changes to jp-VoilaPreview-renderOnSave in the base.css were not reflected)

Normally the changes should be reflected and there seems to be some CSS applied to that class already:

voila/packages/jupyterlab-preview/style/base.css

Lines 5 to 7 in 6be66cc

	.jp-VoilaPreview-renderOnSave {
	align-items: center;
	}

If you run the watch script, does webpack incrementally recompiles the extension after making a change to the css file?

The webpack recompiles the extension after a change to the css file. However, the styling that is in the css file does not show up when I inspect the page.

[trungleduc]

I think we have some issues with the CSS of the extension, the CSS file is compiled with webpack but the content is not included on the page. I'm working on it.

[jtpio]

Ah ok, thanks both for looking into it!

[trungleduc]

Since the CSS issue is not the main point of this PR, I think we can merge this one and open another issue for the CSS file bug. What do you think @jtpio @legendb317 ?

[legendb317]

Since the CSS issue is not the main point of this PR, I think we can merge this one and open another issue for the CSS file bug. What do you think @jtpio @legendb317 ?

Sounds good to me.

[jtpio]

This should be fixed in #1096 now.

@legendb317 mind updating this PR and check if that fixes it? Thanks!

[legendb317]

@jtpio I have updated the PR and the CSS still seems broken

[trungleduc]

@legendb317 I just tested locally, the CSS file seems to be working fine.

[legendb317]

@legendb317 I just tested locally, the CSS file seems to be working fine.

sorry, I forgot to do an install after the update to #1096. The fix does work and I have pushed the changes to this PR.

[jtpio]

Thanks!