Dash WebApp using static externals

Solved!
rreff
Level 2
Dash WebApp using static externals

hi.

 

We are using dash webapps inside of dataiku. Which working very well! 

Part of clean code priciples we are trying to separate code parts using project and global share code libraries. Which are working also "quite" well!

Only one crucial point cannot yet be resolved.

We can not separate call backs at an different code file.

Example:

FILE: backend.py
import dataiku
import dash

import dash_core_components as dcc
import dash_html_components as html

import pandas as pd
import plotly.express as px
import plotly.graph_objs as go

    
from dash.dependencies import Input, Output

from datetime import datetime as dt
from datetime import date, timedelta

# link func.py
from func import show

app.layout = html.Div(
            className="content",
            children=[
                
                html.Link(rel='stylesheet', href='/local/static/dash-apps/assets/custom.css'),
                
                html.Div(
                    className="right_content",
                    children=[
                        html.Div(
                            className="top_metrics",
                            children=['']),
                        html.Div(children=show()),
                    ]
                ),
                
                html.Div(
                    className="left_menu",
                    children=layout_index
                ),
            ])
FILE: func.py
import dataiku
import datetime

from dash.dependencies import Input, Output, State
from dash.exceptions import PreventUpdate
from dash_table.Format import Format
from datetime import datetime as dt

import numpy as np
import pandas as pd

_now = datetime.datetime.now()
_datestamp = _now.strftime("%Y%m%d")

ds_main = dataiku.Dataset("typed_EurexCloses_unique_D")
df_main = ds_main.get_dataframe()

df_prep = df_main.fillna('N/A').replace('', 'N/A')


def prepData():
    result = df_prep
    return result

def show():
    return html.Div([

        html.H3('EUREX quality setter'),
        
        html.P('CALL::' + str(_now.now())),
                
        get_table_view(),
    ])

def get_table_view():
    return html.Div([

        dash_table.DataTable(
            id='datatable-interactivity',
            #columns=[ {"name": i, "id": i, "deletable": False, "selectable": False} for i in df_main.columns ],
            columns=[
                {"name": ["main", "id"], "id": "id"},
                ...
            ],
            merge_duplicate_headers=True,
            
            data=prepData().to_dict('records'),
            ...
            

        ),
        html.Div(id='datatable-interactivity-container'),
    ])

@app.callback(
	Output('datatable-interactivity', 'style_data_conditional'),
	Input('datatable-interactivity', 'selected_columns')
)
def update_styles(selected_columns):
	print ("::update_styles")
	return [{
		'if': { 'column_id': i },
		'background_color': '#69adff'
	} for i in selected_columns]

Question: How can we make '@app' accessable from different file located at project or global share code libraries?

0 Kudos
1 Solution
fchataigner2
Dataiker

Hi

app is actually a variable that DSS creates for you outside of your code for the webapp. You thus need to pass it to your external library as parameter to the show() method, like

from stuff import things
import dash_html_components as html

app.config.external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
app.layout = html.Div(things.make_contents(app))

which used the components setup in the stuff/things.py library file:

import dash
import dash_html_components as html
import dash_core_components as dcc

def make_contents(app):
    @app.callback(
        dash.dependencies.Output('dd-output-container', 'children'),
        [dash.dependencies.Input('demo-dropdown', 'value')])
    def update_output(value):
        return 'You have selected "{}"'.format(value)

    return [
                dcc.Dropdown(
                    id='demo-dropdown',
                    options=[
                        {'label': 'New York City', 'value': 'NYC'},
                        {'label': 'Montreal', 'value': 'MTL'},
                        {'label': 'San Francisco', 'value': 'SF'}
                    ],
                    value='NYC'
                ),
                html.Div(id='dd-output-container')
            ]

View solution in original post

2 Replies
fchataigner2
Dataiker

Hi

app is actually a variable that DSS creates for you outside of your code for the webapp. You thus need to pass it to your external library as parameter to the show() method, like

from stuff import things
import dash_html_components as html

app.config.external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
app.layout = html.Div(things.make_contents(app))

which used the components setup in the stuff/things.py library file:

import dash
import dash_html_components as html
import dash_core_components as dcc

def make_contents(app):
    @app.callback(
        dash.dependencies.Output('dd-output-container', 'children'),
        [dash.dependencies.Input('demo-dropdown', 'value')])
    def update_output(value):
        return 'You have selected "{}"'.format(value)

    return [
                dcc.Dropdown(
                    id='demo-dropdown',
                    options=[
                        {'label': 'New York City', 'value': 'NYC'},
                        {'label': 'Montreal', 'value': 'MTL'},
                        {'label': 'San Francisco', 'value': 'SF'}
                    ],
                    value='NYC'
                ),
                html.Div(id='dd-output-container')
            ]
rreff
Level 2
Author

that was easy, I just didn't see it to get it done by myself.
works now. thanks for.

0 Kudos