Merge pull request #223 from plotly/adapt-for-DashBase-v1

Adapt for DashBase v1

Author: etpinard

.circleci/config.yml

@@ -36,13 +36,14 @@ jobs:
       - run:
           name: ⚙️  Integration tests
           command: |
-            julia --project -e 'import Pkg; Pkg.instantiate(); Pkg.update();'
             python -m venv venv
             . venv/bin/activate
             pip install --upgrade pip wheel
             git clone --depth 1 https://github.com/plotly/dash.git -b dev dash-main
             cd dash-main && pip install -e .[ci,dev,testing] --progress-bar off && cd ..
-            pytest --headless --nopercyfinalize --junitxml=test-reports/dashjl.xml --percy-assets=test/assets/ test/integration/
+            cd test/integration
+            julia --project -e 'import Pkg; Pkg.develop(path="../../"); Pkg.instantiate(); Pkg.update();'
+            pytest --headless --nopercyfinalize --junitxml=../../test-reports/dashjl.xml --percy-assets=../assets/ .
       - store_artifacts:
           path: test-reports
       - store_test_results:

CONTRIBUTING.md

@@ -41,8 +41,10 @@ cd Dash.jl
 git clone --depth 1 https://github.com/plotly/dash.git -b dev dash-main
 python3 -m venv venv
 pip install --upgrade pip wheel
-cd dash-main && pip install -e .[ci,dev,testing] && cd ..dash
-pytest --headless --nopercyfinalize --percy-assets=test/assets/ test/integration/
+cd dash-main && pip install -e .[ci,dev,testing] && cd ..
+cd test/integration
+julia --project -e 'import Pkg; Pkg.develop(path="../../"); Pkg.instantiate(); Pkg.update();'
+pytest --headless --nopercyfinalize --percy-assets=../assets/ .
 ```
 
 Alternatively, one can run the integration tests using the same Docker

Project.toml

@@ -16,8 +16,6 @@ JSON = "682c06a0-de6a-54ab-a142-c8b1cf79cde6"
 JSON3 = "0f8b85d8-7281-11e9-16c2-39a750bddbf1"
 MD5 = "6ac74813-4b46-53a4-afec-0b5dc9d7885c"
 Pkg = "44cfe95a-1eb2-52ea-b672-e2afdf69b78f"
-PlotlyBase = "a03496cd-edff-5a9b-9e67-9cda94a718b5"
-Requires = "ae029012-a4dd-5104-9daa-d747884805df"
 Sockets = "6462fe0b-24de-5631-8697-dd941f90decc"
 Test = "8dfed614-e22c-5e08-85e1-65c5234f0b40"
 UUIDs = "cf7118a7-6976-5b1a-9a39-7adc72f591a4"
@@ -26,7 +24,7 @@ YAML = "ddb6d928-2868-570f-bddf-ab3f9cf99eb6"
 [compat]
 Aqua = "0.6"
 CodecZlib = "0.6, 0.7"
-DashBase = "0.2"
+DashBase = "0.2, 1"
 DashCoreComponents = "2.0.0"
 DashHtmlComponents = "2.0.0"
 DashTable = "5.0.0"
@@ -35,8 +33,6 @@ HTTP = "1"
 JSON = "0.21"
 JSON3 = "1.9"
 MD5 = "0.2"
-PlotlyBase = "0.8.5, 0.8.6"
-Requires = "1.3"
 YAML = "0.4.7"
 julia = "1.6"
 

build/README.md

@@ -51,7 +51,10 @@ cd Dash.jl
 git clone --depth 1 https://github.com/plotly/dash.git -b dev dash-main
 
 # start `dashjl-tests`
+# [on 1st session]
 docker run -t -d --name dashjl-tests -v .:/home/circleci/project etpinard/dashjl-tests:<x.y.z>
+# [otherwise]
+docker start dashjl-tests
 
 # ssh into it as root (some python deps need that unfortunately)
 docker exec -u 0 -it dashjl-tests bash
@@ -74,11 +77,14 @@ chmod +x ./install-chromedriver.sh
 ORB_PARAM_DRIVER_INSTALL_DIR=/usr/local/bin/ ./install-chromedriver.sh
 
 # [on 1st session] instantiate julia deps
-cd /home/circleci/project/
-julia --project -e 'import Pkg; Pkg.instantiate()'
+cd /home/circleci/project/test/integration
+julia --project -e 'import Pkg; Pkg.develop(path="../../"); Pkg.instantiate()'
+
+# [optionally] if you want to use an unreleased version of DashBase
+julia --project -e 'import Pkg; Pkg.add(name="DashBase", rev="master")'
 
 # update julia deps then run integration tests
-cd /home/circleci/project/
+cd /home/circleci/project/test/integration
 julia --project -e 'import Pkg; Pkg.update()'
-pytest --headless --nopercyfinalize --percy-assets=test/assets/ test/integration/
+pytest --headless --nopercyfinalize --percy-assets=../assets/ .
 ```

src/Dash.jl

@@ -3,7 +3,6 @@ using DashBase
 import HTTP, JSON3, CodecZlib, MD5
 using Sockets
 using Pkg.Artifacts
-using Requires
 
 const ROOT_PATH = realpath(joinpath(@__DIR__, ".."))
 #const RESOURCE_PATH = realpath(joinpath(ROOT_PATH, "resources"))
@@ -28,7 +27,6 @@ include("handlers.jl")
 include("server.jl")
 include("init.jl")
 include("components_utils/_components_utils.jl")
-include("plotly_base.jl")
 
 @doc """
     module Dash
@@ -108,7 +106,6 @@ const _metadata = load_all_metadata()
 function __init__()
    setup_renderer_resources()
    setup_dash_resources()
-   @require PlotlyJS="f0f68f2c-4968-5e81-91da-67840de0976a" include("plotly_js.jl")
 end
 
 

src/app/dashapp.jl

@@ -40,28 +40,6 @@ mutable struct DashApp
 
 end
 
-const VecChildTypes = Union{NTuple{N, DashBase.Component} where {N}, Vector{<:DashBase.Component}}
-
-function Base.getindex(component::DashBase.Component, id::AbstractString)
-  component.id == id && return component
-  hasproperty(component, :children) || return nothing
-  cc = component.children
-  return if cc isa Union{VecChildTypes, DashBase.Component}
-        cc[id]
-    elseif cc isa AbstractVector
-        identity.(filter(x->hasproperty(x, :id), cc))[id]
-    else
-        nothing
-    end
-end
-function Base.getindex(children::VecChildTypes, id::AbstractString)
-  for element in children
-    element.id == id && return element
-    el = element[id]
-    el !== nothing && return el
-  end
-end
-
 #only name, index_string and layout are available to set
 function Base.setproperty!(app::DashApp, property::Symbol, value)
     property == :index_string && return set_index_string!(app, value)

src/plotly_base.jl

@@ -0,0 +1,7 @@
+[deps]
+Dash = "1b08a953-4be3-4667-9a23-3db579824955"
+DashBase = "03207cf0-e2b3-4b91-9ca8-690cf0fb507e"
+HTTP = "cd3eb016-35fb-5094-929b-558a96fad6f3"
+PlotlyBase = "a03496cd-edff-5a9b-9e67-9cda94a718b5"
+PlotlyJS = "f0f68f2c-4968-5e81-91da-67840de0976a"
+Plots = "91a5bcdd-55d7-5caf-9e0b-520d859cae80"

src/plotly_js.jl

@@ -1,5 +1,6 @@
 using Dash
 using PlotlyBase
+
 app = dash()
 app.layout = html_div() do
     dcc_graph(id = "graph",

test/integration/Project.toml

@@ -1,5 +1,6 @@
 using Dash
 using PlotlyJS
+
 app = dash()
 app.layout = html_div() do
     dcc_graph(id = "graph",

test/integration/base/jl_plotly_graph/jlpg001_plotly_graph.jl

@@ -0,0 +1,23 @@
+using Dash
+using Plots
+plotly()
+
+app = dash()
+app.layout = html_div() do
+    dcc_graph(id = "graph", figure = plot((1:10, 1:10))),
+    html_button("draw", id = "draw"),
+    html_div("", id = "status")
+end
+
+callback!(app,
+          Output("graph", "figure"),
+          Output("status", "children"),
+          Input("draw", "n_clicks")) do nclicks
+    return if isnothing(nclicks)
+        no_update(), "first"
+    else
+        plot([(1:10, 1:10), (1:10, 1:2:20)]), "second"
+    end
+end
+
+run_server(app)

test/integration/base/jl_plotly_graph/jlpg002_plotlyjs_graph.jl

@@ -0,0 +1,23 @@
+using Dash
+using Plots
+plotlyjs()
+
+app = dash()
+app.layout = html_div() do
+    dcc_graph(id = "graph", figure = plot((1:10, 1:10))),
+    html_button("draw", id = "draw"),
+    html_div("", id = "status")
+end
+
+callback!(app,
+          Output("graph", "figure"),
+          Output("status", "children"),
+          Input("draw", "n_clicks")) do nclicks
+    return if isnothing(nclicks)
+        no_update(), "first"
+    else
+        plot([(1:10, 1:10), (1:10, 1:2:20)]), "second"
+    end
+end
+
+run_server(app)

test/integration/base/jl_plotly_graph/jlpg003_plots_plotly_graph.jl

@@ -1,27 +1,36 @@
 import pathlib
 import os.path
 import logging
+
 logger = logging.getLogger(__name__)
 
 curr_path = pathlib.Path(__file__).parent.absolute()
 def jl_test_file_path(filename):
     return os.path.join(curr_path, "jl_plotly_graph", filename)
 
+def _run_test(dashjl, filename, percy_snapshot_prefix):
+    fp = jl_test_file_path(filename)
+    name = f"{percy_snapshot_prefix} figure callback"
 
-
-
-def test_jlpg001_plotly_graph(dashjl):
-    fp = jl_test_file_path("jlpg001_plotly_graph.jl")
     dashjl.start_server(fp)
-    dashjl.wait_for_element_by_css_selector(
-        "#graph", timeout=20
-    )
+    dashjl.wait_for_element_by_css_selector("#graph", timeout=20)
 
     dashjl.wait_for_text_to_equal("#status", "first", timeout=10)
-
-    dashjl.percy_snapshot(name="PlotlyBase figure layout")
+    dashjl.percy_snapshot(name=f"{percy_snapshot_prefix} figure layout")
 
     dashjl.find_element("#draw").click()
     dashjl.wait_for_text_to_equal("#status", "second", timeout=10)
+    dashjl.percy_snapshot(name=name)
+
+
+def test_jlpg001_plotly_graph(dashjl):
+    _run_test(dashjl, "jlpg001_plotly_graph.jl", "PlotlyBase")
+
+def test_jlpg002_plotlyjs_graph(dashjl):
+    _run_test(dashjl, "jlpg002_plotlyjs_graph.jl", "PlotlyJS")
+
+def test_jlpg003_plots_plotly_graph(dashjl):
+    _run_test(dashjl, "jlpg003_plots_plotly_graph.jl", "Plots plotly")
 
-    dashjl.percy_snapshot(name="PlotlyBase figure callback")
+def test_jlpg004_plots_plotlyjs_graph(dashjl):
+    _run_test(dashjl, "jlpg004_plots_plotlyjs_graph.jl", "Plots plotlyjs")