Skip to main content

A wrapper around dash to extend the api defining the layout

Project description

dash-wrapper

A wrapper around dash that allows a new syntax to define the layout of your app.

The idea is of this package is to simplify the syntax for nesting html elements in your app layout. When you want to import an element, instead of:

import dash_core_components as dcc
import dash_html_components as html

element1 = html.Div()
element2 = dcc.Input()

you would simply do:

from dash_wrapper import dash_core_components as dcc
from dash_wrapper import dash_html_components as html

element1 = html.Div()
element2 = dcc.Input()

And you are good to go. Your elements now have additional functionality that I will explain below.

In the following examples notice that, since this API implements the nesting of elements as a single chain of arithmetic operations, you need to either wrap everything inside parenthesis or you can use the backslash \ at the end of each line. Even though this is not required (you could do a very long one liner if you want) of course it is strongly suggested to use it in order to visualize the structure of the layout. (IMHO the benefit becomes obvious after you add a few elements the layout).

There are 5 simple rules to define the layout :

  1. add an element on the lower level with *
  2. add an element on the same level with @
  3. add an element on the previous level with /
  4. add an element on the nth previous level with /n/
  5. add an element on A specific level with %n%

Example 1: add an element on the lower level with * AKA add a child

standard API:

Div(Div(id='level1-child1'), id='level0-parent')

new API:

(
Div(id='level0-parent') *     # level 0 (with * we specify to add the next element to level 1, i.e. to the children of level 0)
    Div(id='level1-child1')   # level 1 
)

Example 2: add an element on the same level with @ AKA add a sibling

standard API:

Div([Div(id='level1-child1'), 
     Div(id='level1-child2')], 
id='level0-parent')

new API:

(
Div(id='level0-parent') *       # level 0 (with * we specify to add the next element to level 1, i.e. to the children of level 0)
    Div(id='level1-child1') @   # level 1 (with @ we specify to add the next element to level 1, i.e. same level)
    Div(id='level1-child2')     # level 1
)

Example 3: add an element on the previous level with / AKA add an uncle

standard API:

Div([
    Div(id='level1-child1'), 
    Div(
        Div(id='level2-child1'), 
    id='level1-child2'), 
    Div(id='level2-child1')], 
id='level0-level0-parent')

new API:

(
Div(id='level0-parent') *           # level 0 (with * we specify to add the next element to level 1, i.e. to the children of level 0)
    Div(id='level1-child1') @       # level 1 (with @ we specify to add the next element to level 1, i.e. same level)
    Div(id='level1-child2') *       # level 1 (with * we specify to add the next element to level 2, i.e. to the children of level 1)
        Div(id='level2-child1') /   # level 2 (with / we specify to add the next element to level 1 because we go back 1 level)
    Div(id='level1-child2')         # level 1
)

Example 4: add an element on the nth previous level with /n/ AKA add a nth-cestor This simply mean that you go back n levels

standard API:

Div([
    Div(id='level1-child1'), 
    Div(
        Div(
            Div(id='level3-child1'), 
        id='level2-child1'), 
    id='level1-child2'), 
    Div(id='level1-child3')], 
id='level0-parent')

new API:

(
Div(id='level0-parent') *                 # level 0 (with * we specify to add the next element to level 1, i.e. to the children of level 0)
    Div(id='level1-child1') @             # level 1 (with @ we specify to add the next element to level 1, i.e. same level)
    Div(id='level1-child2') *             # level 1 (with * we specify to add the next element to level 2, i.e. to the children of level 1)
        Div(id='level2-child1') *         # level 2 (with * we specify to add the next element to level 3, i.e. to the children of level 2)
            Div(id='level3-child1') /2/   # level 3 (with /2/ we specify to add the next element to level 1 because we go back 2 levels)
    Div(id='level1-child3')               # level 1
)

Example 5: add an element on specific levev with %n% This is same of Example 4 but to specify the level we simply count forrward instead of countinc backward

new API:

(
Div(id='level0-parent') *                # level 0 (with * we specify to add the next element to level 1, i.e. to the children of level 0)
    Div(id='level1-child1') @            # level 1 (with @ we specify to add the next element to level 1, i.e. same level)
    Div(id='level1-child2') *            # level 1 (with * we specify to add the next element to level 2, i.e. to the children of level 1)
        Div(id='level2-child1') *        # level 2 (with * we specify to add the next element to level 3, i.e. to the children of level 2)
            Div(id='SubSubChild1') %1%   # level 3 (with %1% I specify to add the next element to level 1)
    Div(id='level1-child3')              # level 1
)

It should be clear that after a few divs the standard way of defining the layout becomes very messy to inspect and maintain. Especially if you want to move one element to another location you need to be careful with the parenthesis and which becomes tedious.

The way this is implemented implemented you just need to remember the 5 simple rules for nesting elements.

Project details


Download files

Download the file for your platform. If you're not sure which to choose, learn more about installing packages.

Source Distribution

dash-wrapper-0.2.0.tar.gz (6.3 kB view details)

Uploaded Source

Built Distribution

dash_wrapper-0.2.0-py3-none-any.whl (10.0 kB view details)

Uploaded Python 3

File details

Details for the file dash-wrapper-0.2.0.tar.gz.

File metadata

  • Download URL: dash-wrapper-0.2.0.tar.gz
  • Upload date:
  • Size: 6.3 kB
  • Tags: Source
  • Uploaded using Trusted Publishing? No
  • Uploaded via: twine/3.1.1 pkginfo/1.5.0.1 requests/2.22.0 setuptools/47.1.1 requests-toolbelt/0.9.1 tqdm/4.43.0 CPython/3.7.7

File hashes

Hashes for dash-wrapper-0.2.0.tar.gz
Algorithm Hash digest
SHA256 3fffbfb35ef65e836ed15333636ab6c67440073bda60efb43f65e5fa431186e2
MD5 ce29ae7d3c9c25b93b4269430183074c
BLAKE2b-256 1b0c51a854949a8fa46efed859d20579ee443dd8cb421f390dd3162f3c36ddf9

See more details on using hashes here.

File details

Details for the file dash_wrapper-0.2.0-py3-none-any.whl.

File metadata

  • Download URL: dash_wrapper-0.2.0-py3-none-any.whl
  • Upload date:
  • Size: 10.0 kB
  • Tags: Python 3
  • Uploaded using Trusted Publishing? No
  • Uploaded via: twine/3.1.1 pkginfo/1.5.0.1 requests/2.22.0 setuptools/47.1.1 requests-toolbelt/0.9.1 tqdm/4.43.0 CPython/3.7.7

File hashes

Hashes for dash_wrapper-0.2.0-py3-none-any.whl
Algorithm Hash digest
SHA256 9694ebe8b56571561edcf29ef1014a2902eb64632cc67f935cfe89a3669256f4
MD5 a0afc74d2fdf1c7c3eb9fc480c52c856
BLAKE2b-256 fb4665eb93b18abdc50363a0ac965a83d9ff90c93a8f8c952e39bf1ad83b178f

See more details on using hashes here.

Supported by

AWS AWS Cloud computing and Security Sponsor Datadog Datadog Monitoring Fastly Fastly CDN Google Google Download Analytics Microsoft Microsoft PSF Sponsor Pingdom Pingdom Monitoring Sentry Sentry Error logging StatusPage StatusPage Status page