Merge pull request #605 from facultyai/julia-snippets

Julia snippets

Author: tcbegley

.github/workflows/doctest.yml

@@ -43,10 +43,19 @@ jobs:
           sudo apt-get install r-recommended r-cran-dash
       - name: Install R package
         run: sudo R CMD INSTALL .
-      - name: Test installation
-        run: library(dashBootstrapComponents)
-        shell: Rscript {0}
+      - name: Setup Julia
+        uses: julia-actions/setup-julia@v1
+        with:
+          version: '1.6.1'
+      - name: Add Julia artifacts to repo for local install
+        run: |
+          git add -f deps src/*.jl Project.toml
+          git -c user.name="GitHub Actions" -c user.email="actions@github.com" commit -m "Add Julia build artifacts"
+      - name: Install Julia dependencies
+        run: julia -e 'using Pkg; Pkg.add(["Dash", "DashCoreComponents", "DashHtmlComponents", "HTTP"]); Pkg.add(path=".");'
+      - name: Test Julia installation
+        run: julia -e 'using Dash, DashBootstrapComponents, HTTP;'
       - name: Install nox
         run: python3.8 -m pip install -U nox
-      - name: Test R docs snippets
+      - name: Test R and Julia docs snippets
         run: nox -s doctest

docs/components_page/components/__tests__/helpers.py

@@ -5,14 +5,15 @@ def py_source_to_app(py_source, env):
     """
     Create a Dash app from a string defining the app.
     """
+    env = env or {}
     exec(py_source, env)
     return env["app"]
 
 
 def drop_keys(d):
     """
-    Layout payload for R apps has a slightly different structure. We drop some
-    keys for parity.
+    Layout payload for R and Julia apps has a slightly different structure. We
+    drop some keys for parity.
     """
     if isinstance(d, dict):
         return {
@@ -31,3 +32,18 @@ def clean_path(path):
     if path.startswith("components/"):
         path = path[11:]
     return Path(path)
+
+
+def rename_variable(snippet_path, suffix, variable, assign_op="="):
+    with snippet_path.open() as f:
+        lines = f.read().split("\n")
+
+    new_lines = []
+    for line in lines:
+        if line.startswith(f"{variable} {assign_op}"):
+            line = line.replace(
+                f"{variable} {assign_op}", f"{variable}_{suffix} {assign_op}"
+            )
+        new_lines.append(line)
+
+    return "\n".join(new_lines)

docs/components_page/components/__tests__/test_snippets.py

@@ -3,78 +3,142 @@
 """
 import re
 import unittest
-from collections import defaultdict
 from pathlib import Path
 
 import pytest
 import requests
-from dash.testing.composite import DashRComposite
+from dash.testing.application_runners import JuliaRunner, RRunner
 
-from .helpers import clean_path, drop_keys, py_source_to_app
-from .wrappers import PY_WRAPPER, R_WRAPPER
+from .helpers import clean_path, drop_keys, py_source_to_app, rename_variable
+from .wrappers import JL_WRAPPER, PY_WRAPPER, R_WRAPPER
 
 HERE = Path(__file__).parent
 
 PATTERN = re.compile(r"{{example:(.*)}}")
 PARAMS = [
-    match.split(":")
+    (
+        path,
+        [match.split(":") for match in PATTERN.findall(path.read_text())],
+    )
     for path in HERE.parent.glob("*.md")
-    for match in PATTERN.findall(path.read_text())
 ]
 
 SKIP = ["components/table/kwargs.py", "components/tabs/active_tab.py"]
-ENVS = defaultdict(
-    dict,
-    {
-        "components/modal/scrollable.py": {
-            "LOREM": (HERE.parent / "modal" / "lorem.txt").read_text().strip()
-        }
-    },
-)
+ENVS = {
+    "modal.md": {
+        "LOREM": (HERE.parent / "modal" / "lorem.txt").read_text().strip()
+    }
+}
+
+R_PORT = 8051
+JL_PORT = 8053
 
 
 @pytest.fixture
-def dashr(request, dashr_server, tmpdir):
-    with DashRComposite(
-        dashr_server,
-        browser=request.config.getoption("webdriver"),
-        remote=request.config.getoption("remote"),
-        remote_url=request.config.getoption("remote_url"),
-        headless=request.config.getoption("headless"),
-        options=request.config.hook.pytest_setup_options(),
-        download_path=tmpdir.mkdir("download-r").strpath,
-        percy_assets_root=request.config.getoption("percy_assets"),
-        percy_finalize=request.config.getoption("nopercyfinalize"),
-        pause=request.config.getoption("pause"),
-    ) as dc:
-        yield dc
+def dashr_server():
+    with RRunner() as starter:
+        starter.port = R_PORT
+        yield starter
+
+
+@pytest.fixture
+def dashjl_server():
+    with JuliaRunner() as starter:
+        starter.port = JL_PORT
+        yield starter
 
 
 @pytest.mark.parametrize("config", PARAMS)
-def test_snippets(dash_duo, dashr, config):
-    path, name = config
-
-    if path not in SKIP:
-        env = ENVS[path]
-        path = HERE.parent / clean_path(path)
-        r_snippet = path.parent / f"{path.stem}.R"
-        if r_snippet.exists():
-            # Get python snippet layout
-            app = py_source_to_app(
-                PY_WRAPPER.format(snippet=path.read_text(), name=name), env=env
-            )
-            dash_duo.start_server(app, port=8051)
-            py_layout = requests.get(
-                f"{dash_duo.server_url}/_dash-layout"
-            ).json()
-
-            # Get R snippet layout
-            dashr.start_server(
-                R_WRAPPER.format(snippet=r_snippet.read_text(), name=name)
-            )
-            r_layout = requests.get(f"{dashr.server_url}/_dash-layout").json()
+def test_r_snippets(dash_thread_server, dashr_server, config):
+    md_path, data = config
+    env = ENVS.get(md_path.name)
 
-            # Test layouts match
-            unittest.TestCase().assertDictEqual(
-                drop_keys(py_layout), drop_keys(r_layout)
+    python_r_compare = []
+
+    # Concatenate all the snippets in the markdown file together
+    for i, (snippet_path, name) in enumerate(data):
+        if snippet_path in SKIP:
+            continue
+
+        snippet_path = HERE.parent / clean_path(snippet_path)
+        py_snippet = rename_variable(snippet_path, i, name)
+
+        r_snippet_path = snippet_path.parent / f"{snippet_path.stem}.R"
+
+        if r_snippet_path.exists():
+            r_snippet = rename_variable(
+                r_snippet_path, i, name, assign_op="<-"
             )
+            python_r_compare.append((py_snippet, r_snippet, f"{name}_{i}"))
+
+    assert_layouts_equal(
+        python_r_compare,
+        dashr_server,
+        R_WRAPPER,
+        R_PORT,
+        dash_thread_server,
+        env,
+        8050,
+    )
+
+
+@pytest.mark.parametrize("config", PARAMS)
+def test_jl_snippets(dash_thread_server, dashjl_server, config):
+    md_path, data = config
+    env = ENVS.get(md_path.name)
+
+    python_jl_compare = []
+
+    # Concatenate all the snippets in the markdown file together
+    for i, (snippet_path, name) in enumerate(data):
+        if snippet_path in SKIP:
+            continue
+
+        snippet_path = HERE.parent / clean_path(snippet_path)
+        py_snippet = rename_variable(snippet_path, i, name)
+
+        jl_snippet_path = snippet_path.parent / f"{snippet_path.stem}.jl"
+
+        if jl_snippet_path.exists():
+            jl_snippet = rename_variable(jl_snippet_path, i, name)
+            python_jl_compare.append((py_snippet, jl_snippet, f"{name}_{i}"))
+
+    assert_layouts_equal(
+        python_jl_compare,
+        dashjl_server,
+        JL_WRAPPER,
+        JL_PORT,
+        dash_thread_server,
+        env,
+        8052,
+    )
+
+
+def assert_layouts_equal(
+    compare, runner, wrapper, port, py_runner, py_env, py_port
+):
+    # Get python snippet layout
+    app = py_source_to_app(
+        PY_WRAPPER.format(
+            snippet="\n".join(x[0] for x in compare),
+            components=", ".join(x[2] for x in compare),
+        ),
+        env=py_env,
+    )
+    py_runner.start(app, port=py_port)
+    py_layout = requests.get(f"{py_runner.url}/_dash-layout").json()
+
+    # Get other language snippet layout
+    runner.start(
+        wrapper.format(
+            snippet="\n".join(x[1] for x in compare),
+            components=", ".join(x[2] for x in compare),
+            port=port,
+        )
+    )
+    layout = requests.get(f"{runner.url}/_dash-layout").json()
+
+    # Test layouts match
+    unittest.TestCase().assertDictEqual(
+        drop_keys(py_layout), drop_keys(layout)
+    )

docs/components_page/components/__tests__/wrappers.py

@@ -6,7 +6,7 @@
 
 {snippet}
 
-app.layout = {name}
+app.layout = html.Div([{components}])
 """
 
 R_WRAPPER = """
@@ -18,6 +18,17 @@
 
 {snippet}
 
-app$layout({name})
-app$run_server()
+app$layout(htmlDiv(list({components})))
+app$run_server(port = {port})
+"""
+
+JL_WRAPPER = """
+using Dash, DashBootstrapComponents
+
+app = dash(external_stylesheets=[dbc_themes.BOOTSTRAP]);
+
+{snippet}
+
+app.layout = html_div([{components}]);
+run_server(app, "127.0.0.1", {port});
 """

docs/components_page/components/alert.md

@@ -7,30 +7,30 @@ lead: Provide contextual feedback messages for user actions with the `Alert` com
 
 Set the color of `Alert` using the `color` argument and one of the eight supported contextual color names.
 
-{{example:components/alert/simple.py:alerts}}
+{{example:components/alert/simple.py:simple_alerts}}
 
 ## Link color
 
 The Bootstrap `alert-link` class can be used to color match links inside alerts to the color of the alert.
 
-{{example:components/alert/link.py:alerts}}
+{{example:components/alert/link.py:linked_alerts}}
 
 ## Additional content
 
 Alerts can contain additional HTML elements like headings, paragraphs and dividers.
 
-{{example:components/alert/content.py:alert}}
+{{example:components/alert/content.py:complex_alert}}
 
 ## Dismissing
 
 Set `dismissable=True` to add a dismiss button to the alert which closes the alert on click. You can also use the `is_open` property in callbacks to show or hide the alert. By default the alert appears and disappears with a fade animation. To disable this simply set `fade=False`.
 
-{{example:components/alert/dismiss.py:alert}}
+{{example:components/alert/dismiss.py:dimissable_alert}}
 
 ## Automatic dismissal
 
 You can have your `Alert` components dismiss themselves by using the `duration` keyword argument. Specify a duration in milliseconds after which you would like the `Alert` to dismiss itself when it first becomes visible.
 
-{{example:components/alert/auto_dismiss.py:alert}}
+{{example:components/alert/auto_dismiss.py:auto_dismiss_alert}}
 
 {{apidoc:src/components/Alert.js}}

docs/components_page/components/alert/auto_dismiss.R

@@ -1,7 +1,7 @@
 library(dashBootstrapComponents)
 library(dashHtmlComponents)
 
-alert <- htmlDiv(
+auto_dismiss_alert <- htmlDiv(
  list(
     dbcButton("Toggle", id = "alert-toggle-auto", className = "mr-1",
               n_clicks = 0),

docs/components_page/components/alert/auto_dismiss.jl

@@ -0,0 +1,21 @@
+using DashBootstrapComponents, DashHtmlComponents
+
+auto_dismiss_alert = html_div([
+    dbc_button("Toggle", id="alert-toggle-auto", className="mr-1", n_clicks=0),
+    html_hr(),
+    dbc_alert(
+        "Hello! I am an auto-dismissing alert!",
+        id="alert-auto",
+        is_open=true,
+        duration=4000,
+    ),
+]);
+
+callback!(
+    app,
+    Output("alert-auto", "is_open"),
+    Input("alert-toggle-auto", "n_clicks"),
+    State("alert-auto", "is_open"),
+) do n, is_open
+    return n > 0 ? is_open == 0 : is_open
+end;

docs/components_page/components/alert/auto_dismiss.py

@@ -2,7 +2,7 @@
 import dash_html_components as html
 from dash.dependencies import Input, Output, State
 
-alert = html.Div(
+auto_dismiss_alert = html.Div(
     [
         dbc.Button(
             "Toggle", id="alert-toggle-auto", className="mr-1", n_clicks=0

docs/components_page/components/alert/content.R

@@ -1,7 +1,7 @@
 library(dashBootstrapComponents)
 library(dashHtmlComponents)
 
-alert <- dbcAlert(
+complex_alert <- dbcAlert(
   list(
     htmlH4("Well done!", className = "alert-heading"),
     htmlP(

docs/components_page/components/alert/content.jl

@@ -0,0 +1,15 @@
+using DashBootstrapComponents, DashHtmlComponents
+
+complex_alert = dbc_alert([
+    html_h4("Well done!", className="alert-heading"),
+    html_p(
+        "This is a success alert with loads of extra text in it. So much " *
+        "that you can see how spacing within an alert works with this " *
+        "kind of content.",
+    ),
+    html_hr(),
+    html_p(
+        "Let's put some more text down here, but remove the bottom margin",
+        className="mb-0",
+    ),
+]);