Inject css style into widgets

src/scwidgets/__init__.py

@@ -1,24 +1,6 @@
 __version__ = "0.0.0-dev"
 __authors__ = "the scicode-widgets developer team"
 
-import os
+from ._css_style import CssStyle, get_css_style
 
-from IPython.core.display import HTML
-
-
-def get_css_style() -> HTML:
-    """
-    When reimporting scwidgets the objects displayed by the package are destroyed,
-    because the cell output is refreshed.
-    Since the module is loaded from cache when reimported one cannot rexecute the
-    code on reimport, so we rely on the user to do it on a separate scell to keep the
-    displayed html with the css style it avice in the notebook
-    """
-    with open(os.path.join(os.path.dirname(__file__), "css/widgets.css")) as file:
-        style_txt = file.read()
-
-    return HTML(
-        "HTML with scicode-widget css style sheet. "
-        "Please keep this cell output alive."
-        "<style>" + style_txt + "</style>"
-    )
+__all__ = ["CssStyle", "get_css_style"]

src/scwidgets/_css_style.py

@@ -0,0 +1,24 @@
+import os
+
+from ipywidgets import HTML
+
+
+class CssStyle(HTML):
+    """
+    This HTML widget has to be displayed so the css style is loaded in the notebook.
+
+    :param preamble: Text to appear before the style sheet
+    """
+
+    def __init__(self, preamble: str = ""):
+        with open(os.path.join(os.path.dirname(__file__), "css/widgets.css")) as file:
+            style_txt = file.read()
+
+        HTML.__init__(self, preamble + "<style>" + style_txt + "</style>")
+
+
+def get_css_style() -> HTML:
+    return CssStyle(
+        preamble="HTML with scicode-widget css style sheet. "
+        "Please keep this cell output alive."
+    )

src/scwidgets/check/_widget_check_registry.py

@@ -7,6 +7,7 @@
 
 from ipywidgets import Button, HBox, Layout, Output, VBox, Widget
 
+from .._css_style import CssStyle
 from .._utils import Formatter
 from ._check import Check, CheckResult
 
@@ -149,6 +150,7 @@ def __init__(self, *args, **kwargs):
         VBox.__init__(
             self,
             [
+                CssStyle(),
                 HBox([self._set_all_references_button, self._check_all_widgets_button]),
                 self._output,
             ],

src/scwidgets/exercise/_widget_code_exercise.py

@@ -12,6 +12,7 @@
 from widget_code_input import WidgetCodeInput
 from widget_code_input.utils import CodeValidationError
 
+from .._css_style import CssStyle
 from .._utils import Formatter
 from ..check import Check, CheckableWidget, CheckRegistry, CheckResult
 from ..code._widget_code_input import CodeInput
@@ -443,7 +444,7 @@ def __init__(
                 ]
             )
 
-        demo_children = []
+        demo_children = [CssStyle()]
         if self._exercise_title_html is not None:
             demo_children.append(self._exercise_title_html)
         if self._exercise_description_html is not None:

src/scwidgets/exercise/_widget_exercise_registry.py

@@ -11,6 +11,7 @@
 from IPython.display import display
 from ipywidgets import Button, Dropdown, HBox, Label, Layout, Output, Text, VBox
 
+from .._css_style import CssStyle
 from .._utils import Formatter
 
 
@@ -222,6 +223,7 @@ def __init__(self, filename_prefix: Optional[str] = None, *args, **kwargs):
         VBox.__init__(
             self,
             [
+                CssStyle(),
                 self._upper_panel_box,
                 self._lower_panel_output,
                 self._output,

src/scwidgets/exercise/_widget_text_exercise.py

@@ -2,6 +2,7 @@
 
 from ipywidgets import HTML, HBox, HTMLMath, Layout, Output, Textarea, VBox
 
+from .._css_style import CssStyle
 from .._utils import Formatter
 from ..cue import SaveCueBox, SaveResetCueButton
 from ._widget_exercise_registry import ExerciseRegistry, ExerciseWidget
@@ -99,7 +100,7 @@ def __init__(
 
         ExerciseWidget.__init__(self, exercise_registry, exercise_key)
 
-        widget_children = []
+        widget_children = [CssStyle()]
         if self._exercise_title_html is not None:
             widget_children.append(self._exercise_title_html)
         if self._exercise_description_html is not None:

tests/notebooks/widget_answers.py

@@ -17,15 +17,12 @@
 import os
 import sys
 
-import scwidgets
 from scwidgets.exercise import CodeExercise, ExerciseRegistry, TextExercise
 
 sys.path.insert(0, os.path.abspath("../.."))
 
 # -
 
-scwidgets.get_css_style()
-
 
 # Test 1:
 # -------

tests/notebooks/widget_check_registry.py

@@ -17,7 +17,6 @@
 import os
 import sys
 
-import scwidgets
 from scwidgets.check import CheckRegistry
 
 sys.path.insert(0, os.path.abspath("../.."))
@@ -26,8 +25,6 @@
 
 # -
 
-scwidgets.get_css_style()
-
 
 def create_check_registry(use_fingerprint, failing, buggy):
     check_registry = CheckRegistry()

tests/notebooks/widget_code_exercise.py

@@ -17,15 +17,12 @@
 import os
 import sys
 
-import scwidgets
-
 sys.path.insert(0, os.path.abspath("../.."))
 from tests.test_check import single_param_check  # noqa: E402
 from tests.test_code import get_code_exercise  # noqa: E402
 
 # -
 
-scwidgets.get_css_style()
 
 # Test 1:
 # -------

tests/notebooks/widget_scwidgets_code_input.py

@@ -16,12 +16,10 @@
 # +
 import time
 
-import scwidgets
 from scwidgets.code import CodeInput
 
 # -
 
-scwidgets.get_css_style()
 
 # Test 1:
 # -------

tests/test_widgets.py

@@ -263,7 +263,7 @@ def test_scwidgets_code_input(selenium_driver):
 
     # Tests if change in function_body changed the widget view
     time.sleep(2)
-    code_input_lines = nb_cells[2].find_elements(By.CLASS_NAME, CODE_MIRROR_CLASS_NAME)
+    code_input_lines = nb_cells[1].find_elements(By.CLASS_NAME, CODE_MIRROR_CLASS_NAME)
     assert "return 'change'" in code_input_lines[-1].text
 
 
@@ -299,7 +299,7 @@ def test_widget_answer(self, selenium_driver):
 
         # Test 1:
         # -------
-        nb_cell = nb_cells[2]
+        nb_cell = nb_cells[1]
 
         nb_cell.find_elements(By.CLASS_NAME, BUTTON_CLASS_NAME)
         answer_registry_buttons = nb_cell.find_elements(
@@ -415,7 +415,7 @@ def test_widget_answer(self, selenium_driver):
         # -------
         # Test if TextExercise shows correct output
 
-        nb_cell = nb_cells[3]
+        nb_cell = nb_cells[2]
 
         text_inputs = nb_cell.find_elements(By.CLASS_NAME, TEXT_INPUT_CLASS_NAME)
         assert len(text_inputs) == 1
@@ -519,7 +519,7 @@ def test_widget_answer(self, selenium_driver):
         # -------
         # Test if CodeExercise shows correct output
 
-        nb_cell = nb_cells[4]
+        nb_cell = nb_cells[3]
 
         answer_buttons = nb_cell.find_elements(
             By.CLASS_NAME, reset_cue_button_class_name("save", False)
@@ -1046,39 +1046,39 @@ def test_button_clicks(
 
     # Test 1.1 use_fingerprint=False, failing=False, buggy=False
     test_button_clicks(
-        nb_cells[3],
+        nb_cells[2],
         "Widget 1: ✓ (success)",
         "Successfully set all references",
         "Widget 1: ✓ (success)",
     )
 
     # Test 1.2 use_fingerprint=True, failing=False, buggy=False
     test_button_clicks(
-        nb_cells[4],
+        nb_cells[3],
         "Widget 1: ✓ (success)",
         "Successfully set all references",
         "Widget 1: ✓ (success)",
     )
 
     # Test 1.3 use_fingerprint=False, failing=False, buggy=False
     test_button_clicks(
-        nb_cells[5],
+        nb_cells[4],
         "Widget 1: 𐄂 (failed)",
         "Successfully set all references",
         "Widget 1: ✓ (success)",
     )
 
     # Test 1.4 use_fingerprint=False, failing=False, buggy=False
     test_button_clicks(
-        nb_cells[6],
+        nb_cells[5],
         "Widget 1: 𐄂 (failed)",
         "Successfully set all references",
         "Widget 1: ✓ (success)",
     )
 
     # Test 1.5 use_fingerprint=False, failing=False, buggy=True
     test_button_clicks(
-        nb_cells[7],
+        nb_cells[6],
         "Widget 1: ‼ (error)",
         "NameError: name 'bug' is not defined",
         "Widget 1: ‼ (error)",
@@ -1273,7 +1273,7 @@ def test_code_exercise(
 
     # Test 1.1
     test_code_exercise(
-        nb_cells[2],
+        nb_cells[1],
         ["SomeText", "Output"],
         ["Check was successful"],
         include_checks=True,
@@ -1284,7 +1284,7 @@ def test_code_exercise(
 
     # Test 1.2
     test_code_exercise(
-        nb_cells[3],
+        nb_cells[2],
         ["SomeText", "Output"],
         ["Check failed"],
         include_checks=True,
@@ -1295,7 +1295,7 @@ def test_code_exercise(
 
     # Test 1.3
     test_code_exercise(
-        nb_cells[4],
+        nb_cells[3],
         ["SomeText", "NameError: name 'bug' is not defined"],
         ["NameError: name 'bug' is not defined"],
         include_checks=True,
@@ -1305,7 +1305,7 @@ def test_code_exercise(
     )
     # Test 1.4
     test_code_exercise(
-        nb_cells[5],
+        nb_cells[4],
         ["SomeText", "Output"],
         ["Check was successful"],
         include_checks=True,
@@ -1316,7 +1316,7 @@ def test_code_exercise(
 
     # Test 1.5
     test_code_exercise(
-        nb_cells[6],
+        nb_cells[5],
         ["SomeText", "Output"],
         ["Check was successful"],
         include_checks=True,
@@ -1327,7 +1327,7 @@ def test_code_exercise(
 
     # Test 1.6
     test_code_exercise(
-        nb_cells[7],
+        nb_cells[6],
         ["SomeText", "Output"],
         ["Check was successful"],
         include_checks=True,
@@ -1342,7 +1342,7 @@ def test_code_exercise(
     # Test 2.1
     # Test if update button is shown even if params are None
     test_code_exercise(
-        nb_cells[8],
+        nb_cells[7],
         ["SomeText", "Output"],
         [],
         include_checks=False,