From 5a81d6ffe4058e9f44176af91f0891df6a86c8ca Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?P=C3=A1ll=20Haraldsson?= Date: Thu, 4 Jun 2020 00:23:07 +0000 Subject: [PATCH 1/2] Fixed examples I testes first one, I guess all work now. Maybe more punctuation, I left out periods intentionally at the end of some sentences. jldoctest -> julia? I guess both work, not sure if either is older/outdated. I know what you mean by callid"" but at first I thought last one of first triple quote missing. Possibly callid"" (aslo callid""" ... """ possible, maybe not oo desirable here). --- README.md | 40 ++++++++++++++++++++++++++-------------- 1 file changed, 26 insertions(+), 14 deletions(-) diff --git a/README.md b/README.md index 1d0de2a..769107e 100644 --- a/README.md +++ b/README.md @@ -32,6 +32,9 @@ Pkg.add(PackageSpec(url="https://github.com/plotly/dash-table.git", rev="jl")) ```jldoctest julia> using Dash +julia> using DashHtmlComponents +julia> using DashCoreComponents + julia> app = dash(external_stylesheets = ["https://codepen.io/chriddyp/pen/bWLwgP.css"]) julia> app.layout = html_div() do @@ -48,16 +51,18 @@ julia> app.layout = html_div() do ) ) end + julia> run_server(app, "0.0.0.0", 8080) ``` -* The `DashApp` struct represent dashboard application. + +* The `DashApp` struct represents a dashboard application. * To make `DashApp` struct use `dash(layout_maker::Function, name::String; external_stylesheets::Vector{String} = Vector{String}(), url_base_pathname="/", assets_folder::String = "assets")`` where `layout_maker` is a function with signature ()::Component -* Unlike the python version where each Dash component is represented as a separate class, all components in Dash.jl are represented by struct `Component`. -* You can create `Component` specific for concrete Dash component by the set of functions in the form ``lowercase()_lowercase()``. For example, in python html `
` element is represented as `HTML.Div` in Dasboards it is created using function `html_div` -* The list of all supported components is available in docstring for Dasboards module -* All functions for a component creation have the signature `(;kwargs...)::Component`. List of key arguments specific for the concrete component is available in the docstring for each function -* Functions for creation components which have `children` property have two additional methods ``(children::Any; kwargs...)::Component`` and ``(children_maker::Function; kwargs..)::Component``. `children` must by string or number or single component or collection of components -* ``make_handler(app::Dash; debug::Bool = false)`` makes handler function for using in HTTP package +* Unlike the Python version where each Dash component is represented as a separate class, all components in Dash.jl are represented by struct `Component`. +* You can create `Component` specific for concrete Dash component by the set of functions in the form ``lowercase()_lowercase()``. For example, in Python html `
` element is represented as `HTML.Div` in Dasboards it is created using function `html_div` +* The list of all supported components is available in docstring for Dasboards module. +* All functions for a component creation have the signature `(;kwargs...)::Component`. List of key arguments specific for the concrete component is available in the docstring for each function. +* Functions for creation components which have `children` property have two additional methods ``(children::Any; kwargs...)::Component`` and ``(children_maker::Function; kwargs..)::Component``. `children` must by string or number or single component or collection of components. +* ``make_handler(app::Dash; debug::Bool = false)`` makes a handler function for using in HTTP package. __Once you have run the code to create the Dashboard, go to `http://127.0.0.1:8080` in your browser to view the Dashboard!__ @@ -66,6 +71,9 @@ __Once you have run the code to create the Dashboard, go to `http://127.0.0.1:80 ```jldoctest julia> using Dash +julia> using DashHtmlComponents +julia> using DashCoreComponents + julia> app = dash(external_stylesheets = ["https://codepen.io/chriddyp/pen/bWLwgP.css"]) julia> app.layout = html_div() do @@ -76,17 +84,21 @@ julia> app.layout = html_div() do julia> callback!(app, callid"my-id.value => my-div.children") do input_value "You've entered $(input_value)" end -julia> run_server(app, "0.0.0.0", 8080) +julia> run_server(app, "0.0.0.0", 8080) ``` + * You can make your dashboard interactive by register callbacks for changes in frontend with function ``callback!(func::Function, app::Dash, id::CallbackId)`` * Inputs and outputs (and states, see below) of callback are described by struct `CallbackId` which can easily created by string macro `callid""` * `callid""` parse string in form ``"[{state1 [,...]}] input1[,...] => output1[,...]"`` where all items is ``"."`` -* Callback function must have the signature(states..., inputs...), and provide a return value comparable (in terms of number of elements) to the outputs being updated. +* Callback functions must have the signature(states..., inputs...), and provide a return value comparable (in terms of number of elements) to the outputs being updated. ### States and Multiple Outputs ```jldoctest julia> using Dash +julia> using DashHtmlComponents +julia> using DashCoreComponents + julia> app = dash(external_stylesheets = ["https://codepen.io/chriddyp/pen/bWLwgP.css"]) julia> app.layout = html_div() do @@ -102,7 +114,7 @@ end julia> run_server(app, "0.0.0.0", 8080) ``` -## Comparation with original python syntax +## Comparation with original Python syntax ### component naming: @@ -139,7 +151,7 @@ app.layout = html_div() do ``` ### callbacks: -* python: +* Python: ```python @app.callback(Output('output', 'children'), [Input('submit-button', 'n_clicks')], @@ -157,9 +169,9 @@ callback!(app, callid"""{state1.value, state2.value} ..... end ``` -Be careful - in Dash.jl states came first in arguments list +Be careful - in Dash.jl states come first in an arguments list. -### json: -I use JSON2 for json serialization/deserialization, so in callbacks all JSON objects are `NamedTuples` rather than dictionaries. Within component properties you can use both `Dict` and `NamedTuple` for json objects. +### JSON: +I use JSON2.jl for JSON serialization/deserialization, so in callbacks all JSON objects are `NamedTuples` rather than dictionaries. Within component properties you can use both `Dict` and `NamedTuple` for JSON objects. Note when declaring elements with a single properly that `layout = (title = "Test graph")` is not interpreted as a `NamedTuple` by Julia - you'll need to add a comma when declaring the layout, e.g. `layout = (title = "Test graph",)` From b8249e216bed76e77842caa6a4c997fac91eb9f4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?P=C3=A1ll=20Haraldsson?= Date: Thu, 4 Jun 2020 12:25:25 +0000 Subject: [PATCH 2/2] Fixed another example [ci skip] --- src/Dash.jl | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/Dash.jl b/src/Dash.jl index f5e6fc1..ab3d0f6 100644 --- a/src/Dash.jl +++ b/src/Dash.jl @@ -31,6 +31,8 @@ Julia backend for [Plotly Dash](https://github.com/plotly/dash) ```julia using Dash +using DashHtmlComponents +using DashCoreComponents app = dash(external_stylesheets=["https://codepen.io/chriddyp/pen/bWLwgP.css"]) do html_div() do dcc_input(id="graphTitle", value="Let's Dance!", type = "text"),