Python dash.Dash() Examples

def test_dbm3002_rotate(dash_duo):

    app = dash.Dash(__name__)

    app.layout = html.Div([
        dash_bio.Molecule3dViewer(
            id=_COMPONENT_ID,
            modelData=_model_data,
            styles=_styles_data
        )
    ])

    dash_duo.start_server(app)
    dash_duo.wait_for_element('#' + _COMPONENT_ID)

    mol3d = dash_duo.find_element('#' + _COMPONENT_ID + ' canvas')
    ac = ActionChains(dash_duo.driver)
    ac.drag_and_drop_by_offset(mol3d, 100, 50).perform()

    dash_duo.percy_snapshot('test-mol3d_rotate') 

def test_dbm2002_preselected_atoms(dash_duo):

    app = dash.Dash(__name__)

    app.layout = html.Div(simple_app_layout(
        dash_bio.Molecule2dViewer(
            id=_COMPONENT_ID,
            modelData=_data,
            selectedAtomIds=[1, 3]
        )
    ))

    dash_duo.start_server(app)
    dash_duo.wait_for_element('#test-mol2d')

    assert len(dash_duo.find_elements(
        'g.nodes-container > g.node.selected[index="1"]')) == 1
    assert len(dash_duo.find_elements(
        'g.nodes-container > g.node.selected[index="3"]')) == 1 

def add(self, filename: pathlib.Path) -> str:
        """Calling this function makes the filename given as input
        available as a hosted asset when the application is running.
        The returned string is a URI which the plugin optionally
        can use internally (e.g. as "src" in image elements).

        Calling this function with the same input path
        multiple times will return the same URI.

        Filenames added to WebvizAssets that ends with .css or .js
        are loaded automatically in the browser by Dash,
        both in non-portable and portable mode.
        """

        path = pathlib.Path(filename)

        if filename not in self._assets.values():
            assigned_id = self._generate_id(path.name)
            self._assets[assigned_id] = filename
        else:
            assigned_id = {v: k for k, v in self._assets.items()}[filename]

        return os.path.normcase(os.path.join(self._base_folder(), assigned_id)) 

def test_data_table_with_settings(dash_duo):

    app = dash.Dash(__name__)
    app.css.config.serve_locally = True
    app.scripts.config.serve_locally = True
    app.config.suppress_callback_exceptions = True
    CACHE.init_app(app.server)
    code_file = "./tests/data/example_data.csv"
    with mock.patch(GET_DATA) as mock_path:
        mock_path.return_value = pd.read_csv(code_file)
        page = _data_table.DataTable(
            csv_file=code_file, sorting=False, filtering=False, pagination=False
        )
        app.layout = page.layout
        dash_duo.start_server(app)
        assert dash_duo.get_logs() == [], "browser console should contain no error" 

def test_dbfc007_color_scheme_initial_load(dash_duo):

    app = dash.Dash(__name__)

    app.layout = html.Div(
        dash_bio.FornaContainer(
            id=_COMPONENT_ID,
            sequences=[{'sequence': 'AUGAU', 'structure': '.....'}],
            colorScheme='positions'
        )
    )

    dash_duo.start_server(app)
    dash_duo.wait_for_element('#' + _COMPONENT_ID)

    check_color(dash_duo, 1, 'rgb(152, 223, 138)')
    check_color(dash_duo, 2, 'rgb(187, 221, 139)')
    check_color(dash_duo, 3, 'rgb(219, 219, 141)')
    check_color(dash_duo, 4, 'rgb(239, 187, 146)')
    check_color(dash_duo, 5, 'rgb(255, 152, 150)') 

def test_example_plugin(dash_duo):

    app = dash.Dash(__name__)
    app.config.suppress_callback_exceptions = True
    CACHE.init_app(app.server)
    title = "Example"
    page = _example_plugin.ExamplePlugin(app, title)
    app.layout = page.layout
    dash_duo.start_server(app)
    btn = dash_duo.find_element("#" + page.uuid("submit-button"))
    assert btn.text == "Submit"
    text = dash_duo.find_element("#" + page.uuid("output-state"))
    assert text.text == "Button has been pressed 0 times."
    btn.click()
    dash_duo.wait_for_contains_text(
        "#" + page.uuid("output-state"), "Button has been pressed 1 times", timeout=2
    )
    assert text.text == "Button has been pressed 1 times." 

def test_dbmp005_highlight_color(dash_duo):

    app = dash.Dash(__name__)

    app.layout = html.Div(nested_component_layout(
        dash_bio.ManhattanPlot(
            dataframe=_data
        )
    ))

    nested_component_app_callback(
        app,
        dash_duo,
        component=dash_bio.ManhattanPlot,
        component_data=_data,
        data_prop_name='dataframe',
        test_prop_name='highlight_color',
        test_prop_value='rgb(76, 184, 254)',
        prop_value_type='string',
        take_snapshot=True
    ) 

def test_dbfc001_display_sequences(dash_duo):

    app = dash.Dash(__name__)

    sequences = [
        {
            'sequence': 'AUGGGCCCGGGCCCAAUGGGCCCGGGCCCA',
            'structure': '.((((((())))))).((((((()))))))'
        }
    ]

    app.layout = html.Div(simple_app_layout(
        dash_bio.FornaContainer(
            id=_COMPONENT_ID
        )
    ))
    simple_app_callback(
        app,
        dash_duo,
        component_id=_COMPONENT_ID,
        test_prop_name='sequences',
        test_prop_value=json.dumps(sequences),
        prop_value_type='list',
        validation_fn=lambda x: json.dumps(x) == json.dumps(sequences)
    ) 

def __init__(self, app: Dash):
        @app.callback(
            Output('hello_output', 'children'),
            [Input('hello_input', 'value')]
        )

        def update(hello_input: str):
            '''
            Takes in one arguement(s);
            - <hello_input>:   (str)

            Returns a layout_page matching requested pathname.
            '''
            # Some validation
            if len(hello_input) > 2:
                return f'Hello {hello_input}! Welcome to the app!' 

def setUp(self):
        """Set up for tests.  Need to provid Flask.test_client() to all tests.  Further
        configuration (e.g. FlaskLoginAuth) must be provided within the tests."""
        server = Flask(__name__)
        server.config.update(
            SECRET_KEY = os.urandom(12),
        )

        self.app = Dash(name='app1', url_base_pathname='/app1', server=server)
        self.app.layout = html.Div('Hello World!')

        self.add_auth_app = Dash(name='add_auth_app', url_base_pathname='/add-auth-app', server=server)
        self.add_auth_app.layout = html.Div('Hello World!')

        self.multi_app_no_auth = Dash(name='multi_app_no_auth', url_base_pathname='/app-no-auth', server=server)
        self.multi_app_no_auth.layout = html.Div('Hello World!')

        # Will raise an error because it doesn't have the same server
        self.crash_app = Dash(name='crash', url_base_pathname='/crash-app')
        self.crash_app.layout = html.Div('Goodby Cruel World!')

        self.server = server.test_client()
        self.assertEqual(server.debug, False) 

def test_parameter_corr(dash_duo):

    app = dash.Dash(__name__)
    app.css.config.serve_locally = True
    app.scripts.config.serve_locally = True
    app.config.suppress_callback_exceptions = True
    CACHE.init_app(app.server)
    app.webviz_settings = {
        "shared_settings": {"scratch_ensembles": {"iter-0": ""}},
        "theme": default_theme,
    }
    ensembles = ["iter-0"]

    with mock.patch(get_parameters) as mock_parameters:
        mock_parameters.return_value = pd.read_csv("tests/data/parameters.csv")

        p = ParameterCorrelation(app, ensembles)

        app.layout = p.layout
        dash_duo.start_server(app)

        my_component = dash_duo.find_element(f"#{p.ids('ensemble-all')}")

        if not my_component.text.startswith("iter-0"):
            raise AssertionError() 

def test_surface_selector(dash_duo):

    app = dash.Dash(__name__)
    app.config.suppress_callback_exceptions = True
    realizations = pd.read_csv("tests/data/realizations.csv")
    s = SurfaceSelector(app, surface_context, realizations)

    app.layout = html.Div(children=[s.layout, html.Pre(id="pre", children="ok")])

    @app.callback(Output("pre", "children"), [Input(s.storage_id, "data")])
    def _test(data):
        return json.dumps(json.loads(data))

    dash_duo.start_server(app)

    dash_duo.wait_for_contains_text("#pre", json.dumps(return_value), timeout=4) 

def test_dbav002_change_colorscale(dash_duo):

    app = dash.Dash(__name__)

    app.layout = html.Div(simple_app_layout(
        dash_bio.AlignmentChart(id=_COMPONENT_ID, data=_data)
    ))

    simple_app_callback(
        app,
        dash_duo,
        component_id=_COMPONENT_ID,
        test_prop_name='colorscale',
        test_prop_value='hydro',
        prop_value_type='string',
        take_snapshot=True
    )

    # the heatmap background is an image, so we can't programmatically
    # assert that the colors are correct; this test requires a look at
    # the Percy snapshot that is taken 

def test_dbcl001_colorscale(dash_duo):

    app = dash.Dash(__name__)

    app.layout = html.Div(nested_component_layout(
        dash_bio.Clustergram(
            data=_data
        )
    ))

    nested_component_app_callback(
        app,
        dash_duo,
        component=dash_bio.Clustergram,
        component_data=_data,
        test_prop_name='color_map',
        test_prop_value=json.dumps(
            [[0, 'blue'], [0.5, 'yellow'], [1, 'pink']]
        ),
        prop_value_type='list',
        path_to_test_prop='["data"][2]["colorscale"]',
        take_snapshot=True
    ) 

def register_dashapps(app):
    from app.dashapp1.layout import layout
    from app.dashapp1.callbacks import register_callbacks

    # Meta tags for viewport responsiveness
    meta_viewport = {"name": "viewport", "content": "width=device-width, initial-scale=1, shrink-to-fit=no"}

    dashapp1 = dash.Dash(__name__,
                         server=app,
                         url_base_pathname='/dashboard/',
                         assets_folder=get_root_path(__name__) + '/dashboard/assets/',
                         meta_tags=[meta_viewport])

    with app.app_context():
        dashapp1.title = 'Dashapp 1'
        dashapp1.layout = layout
        register_callbacks(dashapp1)

    _protect_dashviews(dashapp1) 

def test_dbvp001_highlight_color(dash_duo):

    app = dash.Dash(__name__)

    app.layout = html.Div(nested_component_layout(
        dash_bio.VolcanoPlot(
            dataframe=_data
        )
    ))

    nested_component_app_callback(
        app,
        dash_duo,
        component=dash_bio.VolcanoPlot,
        component_data=_data,
        test_prop_name='highlight_color',
        test_prop_value='rgb(90, 12, 254)',
        prop_value_type='string',
        data_prop_name='dataframe',
        take_snapshot=True
    ) 

def test_dbsp005_preset_view_stickball(dash_duo):

    app = dash.Dash(__name__)

    app.layout = html.Div(simple_app_layout(
        dash_bio.Speck(
            id=_COMPONENT_ID,
            data=_data
        )
    ))

    simple_app_callback(
        app,
        dash_duo,
        component_id=_COMPONENT_ID,
        test_prop_name='presetView',
        test_prop_value='stickball',
        prop_value_type='string',
        take_snapshot=True
    ) 

def test_dbsp004_preset_view_toon(dash_duo):

    app = dash.Dash(__name__)

    app.layout = html.Div(simple_app_layout(
        dash_bio.Speck(
            id=_COMPONENT_ID,
            data=_data
        )
    ))

    simple_app_callback(
        app,
        dash_duo,
        component_id=_COMPONENT_ID,
        test_prop_name='presetView',
        test_prop_value='toon',
        prop_value_type='string',
        take_snapshot=True
    ) 

def test_dbsp002_click_and_drag(dash_duo):

    app = dash.Dash(__name__)

    app.layout = html.Div(
        dash_bio.Speck(
            id=_COMPONENT_ID,
            data=_data
        )
    )

    dash_duo.start_server(app)
    dash_duo.wait_for_element('#' + _COMPONENT_ID)

    speck = dash_duo.find_element('#' + _COMPONENT_ID + ' canvas')
    ac = ActionChains(dash_duo.driver)
    ac.move_to_element(speck).key_down(Keys.SHIFT).drag_and_drop_by_offset(
        speck, -50, 100).key_up(Keys.SHIFT).perform()

    dash_duo.percy_snapshot('test-speck_click_and_drag') 

def test_dbsp001_rotate(dash_duo):

    app = dash.Dash(__name__)

    app.layout = html.Div(
        dash_bio.Speck(
            id=_COMPONENT_ID,
            data=_data
        )
    )

    dash_duo.start_server(app)
    dash_duo.wait_for_element('#' + _COMPONENT_ID)

    speck = dash_duo.find_element('#' + _COMPONENT_ID + ' canvas')
    ac = ActionChains(dash_duo.driver)
    ac.move_to_element(speck).drag_and_drop_by_offset(
        speck, 150, 200).perform()

    dash_duo.percy_snapshot('test-speck_rotate') 

def test_dbvp002_points_color(dash_duo):

    app = dash.Dash(__name__)

    app.layout = html.Div(nested_component_layout(
        dash_bio.VolcanoPlot(
            dataframe=_data
        )
    ))

    nested_component_app_callback(
        app,
        dash_duo,
        component=dash_bio.VolcanoPlot,
        component_data=_data,
        test_prop_name='col',
        test_prop_value='rgb(12, 254, 42)',
        prop_value_type='string',
        data_prop_name='dataframe',
        take_snapshot=True
    ) 

def test_dbcl006_df_input_row_cluster(dash_duo):

    app = dash.Dash(__name__)

    # run the same test as dbcl002 (row clustering) where table of
    # observations (data argument) is left as a DataFrame
    assert isinstance(_mtcars_data, pd.DataFrame)
    app.layout = html.Div(nested_component_layout(
        dash_bio.Clustergram(
            data=_mtcars_data
        )
    ))

    nested_component_app_callback(
        app,
        dash_duo,
        component=dash_bio.Clustergram,
        component_data=_data,
        test_prop_name='cluster',
        test_prop_value='row',
        prop_value_type='string'
    )

    assert len(dash_duo.find_elements('g.subplot.x2y2')) == 0
    assert len(dash_duo.find_elements('g.subplot.x4y4')) == 1 

def test_dbvp003_point_size(dash_duo):

    app = dash.Dash(__name__)

    app.layout = html.Div(nested_component_layout(
        dash_bio.VolcanoPlot(
            dataframe=_data
        )
    ))

    nested_component_app_callback(
        app,
        dash_duo,
        component=dash_bio.VolcanoPlot,
        component_data=_data,
        test_prop_name='point_size',
        test_prop_value=10,
        prop_value_type='int',
        data_prop_name='dataframe',
        take_snapshot=True
    ) 

def test_dbvp004_genomewideline_value(dash_duo):

    app = dash.Dash(__name__)

    app.layout = html.Div(nested_component_layout(
        dash_bio.VolcanoPlot(
            dataframe=_data
        )
    ))

    nested_component_app_callback(
        app,
        dash_duo,
        component=dash_bio.VolcanoPlot,
        component_data=_data,
        test_prop_name='genomewideline_value',
        test_prop_value=3,
        prop_value_type='int',
        data_prop_name='dataframe',
        take_snapshot=True
    ) 

def test_dbav001_hide_conservation(dash_duo):

    app = dash.Dash(__name__)

    app.layout = html.Div(simple_app_layout(
        dash_bio.AlignmentChart(id=_COMPONENT_ID, data=_data)
    ))

    simple_app_callback(
        app,
        dash_duo,
        component_id=_COMPONENT_ID,
        test_prop_name='showconservation',
        test_prop_value=str(False),
        prop_value_type='bool',
        validation_fn=lambda x: x is False
    )

    assert len(dash_duo.find_elements('g.cartesianlayer.xy3')) == 0 

def Blockquote():
    if 'DASH_DOCS_URL_PREFIX' in os.environ:
        return None
    return rc.Markdown('''
        > This documentation is for [Dash Enterprise](https://plotly.com/dash),
        Plotly's commercial platform for managing and improving
        Dash applications in your organization.
        <dccLink href="/dash-enterprise" children="View the docs"/> or
        [request a trial](https://plotly.com/get-demo/).
    ''')


# # # # # # #
# Initialize
# # # # # # # 

def update_graph_4(value):
    return generate_figure(value, {
        'data': [{
            'type': 'histogram2dcontour',
        }]
    })


# Dash CSS 

def test_dbfc004_color_scheme_preset_position(dash_duo):

    app = dash.Dash(__name__)

    app.layout = html.Div(simple_app_layout(
        dash_bio.FornaContainer(
            id=_COMPONENT_ID,
            sequences=[{'sequence': 'AUGAU', 'structure': '.....'}]
        )
    ))

    simple_app_callback(
        app,
        dash_duo,
        component_id=_COMPONENT_ID,
        test_prop_name='colorScheme',
        test_prop_value='positions',
        prop_value_type='string',
        take_snapshot=True
    )

    check_color(dash_duo, 1, 'rgb(152, 223, 138)')
    check_color(dash_duo, 2, 'rgb(187, 221, 139)')
    check_color(dash_duo, 3, 'rgb(219, 219, 141)')
    check_color(dash_duo, 4, 'rgb(239, 187, 146)')
    check_color(dash_duo, 5, 'rgb(255, 152, 150)') 

def test_dbm2004_select_deselect_atoms_via_click(dash_duo):

    app = dash.Dash(__name__)

    app.layout = html.Div([
        dash_bio.Molecule2dViewer(
            id=_COMPONENT_ID,
            modelData=_data
        ),
        html.Div(id='clicked-atoms')
    ])

    @app.callback(
        dash.dependencies.Output('clicked-atoms', 'children'),
        [dash.dependencies.Input(_COMPONENT_ID, 'selectedAtomIds')]
    )
    def show_clicked_ids(ids):
        return json.dumps(ids)

    dash_duo.start_server(app)

    atom_2 = dash_duo.find_element(
        'g.nodes-container > g.node[index="2"]')
    atom_2.click()
    assert dash_duo.find_element('#clicked-atoms').text == json.dumps([2])

    atom_3 = dash_duo.find_element(
        'g.nodes-container > g.node[index="3"]')
    atom_3.click()
    assert dash_duo.find_element('#clicked-atoms').text == json.dumps([2, 3])

    atom_2 = dash_duo.find_element(
        'g.nodes-container > g.node.selected[index="2"]')
    atom_2.click()
    assert dash_duo.find_element('#clicked-atoms').text == json.dumps([3]) 

def run_standalone_app(
        layout,
        callbacks,
        header_colors,
        filename
):
    """Run demo app (tests/dashbio_demos/*/app.py) as standalone app."""
    app = dash.Dash(__name__)
    app.scripts.config.serve_locally = True
    # Handle callback to component with id "fullband-switch"
    app.config['suppress_callback_exceptions'] = True

    # Get all information from filename
    app_name = os.getenv('DASH_APP_NAME', '')
    if app_name == '':
        app_name = os.path.basename(os.path.dirname(filename))
    app_name = app_name.replace('dash-', '')

    app_title = "{}".format(app_name.replace('-', ' ').title())

    # Assign layout
    app.layout = app_page_layout(
        page_layout=layout(),
        app_title=app_title,
        app_name=app_name,
        standalone=True,
        **header_colors()
    )

    # Register all callbacks
    callbacks(app)

    # return app object
    return app