Updating keyfiguresfinland

[tuopouk]

I should not have included the clock now.

[Coding-with-Adam]

Thank you @tuopouk @AnnMarieW would you be able to do a code review for this next week?

[AnnMarieW]

Yes, I can make some time next week.

[tuopouk]

@AnnMarieW Here is also the serverside version. You can compare the map updates. To me it seems that the clientside version's update is faster. I have a some demos here: Clientside callback demo (more data): http://keyfiguresfinland.herokuapp.com/ Serveside callback demo: https://serversidefigures.herokuapp.com/

[AnnMarieW]

This is a great topic - nice to see an app with data from a country other than US or Canada. I like the use of the clientside callback, it's a significant performance bump -- and the figure is fantastic.

For the review, let's start by focusing on this callback:

@app.callback(Output('key-figures-finland-whole-country-header-x','children'),Input('key-figures-finland-key-figure-selection-x', 'value'))
def update_whole_country_header(key_figure):
    kf_string = key_figure.split(',')
    kf_string.pop(-2)
    kf_string = ', '.join(kf_string)
    kf_string = {True:key_figure, False:kf_string}[len(kf_string.split(','))==1]
    return html.P([kf_string,html.Br(),"in Finland:",html.Br(), ("{:,}".format(whole_country_df.loc[key_figure])).replace('.0','').replace(',',' ')+key_figure.split(',')[-2].replace('2020','').replace('2021','').replace(key_figure.split(',')[0],'')],className="fw-bold")

It's difficult to understand what's going on in the callback function. After a bit of study, it appears that you are parsing the valueof the Dropdown and displaying it as a sentence that includes the value from the whole_country_df

This needs to be simplified to make the code more readable and maintainable. One suggestion is to do a little more data wrangling at the start to make the whole_country_df shaped like this:

(This example is just 2 rows to show the format)

data = {
    "stat_key": [
        "Employment rate, %, 2020",
        "Annual contribution margin, EUR per capita, 2020",
    ],
    "stat_name": ["Employment rate", "Annual contribution margin"],
    "units": ["%", "EUR per capita"],
    "year": ["2020", "2020"],
    "stat": [69.5, 728.8],
}
whole_country_df = pd.DataFrame(data).set_index("stat_key")

Then the callback could look like:

@app.callback(
    Output("key-figures-finland-whole-country-header-x", "children"),
    Input("key-figures-finland-key-figure-selection-x", "value"),
)
def update_whole_country_header(key_figure):
    dff = whole_country_df.loc[key_figure]
    return html.Div(
        [
            html.Div([dff.stat_name, ", ", dff.year]),
            html.Div("in Finland"),
            html.Span([dff.stat, dff.units]),
        ]
    )

Now it's much easier to see what this callback does. Plus, if you would like to style the returned data in a different way, like put it in a card, or make the number stand out more, then it will be really easy to update.

[tuopouk]

@AnnMarieW I updated the code making it probably easier to read. The challenges were to extract names, units and years from the stat name, to display discrete values (e.g. population) as integer values, and to have a space as the thousand separator. I hope it makes more sense now. I also formatted the dropdown style because the labels overlapped on mobile.

[AnnMarieW]

Hi @tuopouk

Yes, the latest changes are much easier to read!

The formatting of the number can be done with the other data wrangling in the global space rather than the callback. Personally, I think the values would look nice with one decimal place and comma separators, and this could be done with an f-string in the component. This is a style question, and Adam can weigh in too - it's a trade-off but we are trying to keep the code simple and concise for the Example Index.

I recently made a checklist for all the things we look for in the code review. Can you please review the list and try to complete as many as possible?

Code Review Checklist

Basic Requirements

• [ ] App is beginner-friendly and demonstrates basic dash features with ~150 lines of code or less. Typically includes a figure and/or a table and at least one callback.
• [ ] Code is easy to read, maintain and extend.
• [ ] App is different from others in the Example Index.
• [ ] Runs error free as a stand-alone app in a virtual environment made from the current requirements.txt. Adding anything to the requriements.txt needs prior approval.
• [ ] Must include __name__ in app instantiation and may include a Bootstrap external stylesheet. Anything else needs prior approval.
• [ ] Does not include the following since it will not work in production: app.title = "...." server = app.server
• [ ] Uses Plotly built-in datasets or data from https://github.com/plotly/datasets. Unique data sets may be added temporarily to the assets folder for use during review. Before deployment, the data will be moved to the Plotly datasets repo.
• [ ] Has no errors in the console
• [ ] Code is formatted with black==21.6b0 (same version as used with Dash)
• [ ] Ensure the layout is responsive - ie is functional and looks nice in various browser window sizes
• [ ] Uses minimal styling, so it's easy for people to adapt the app for use in their own projects without removing a lot of custom style.

Naming conventions

• [ ] Uses descriptive variable names
• [ ] Uses python standard camel_case variable names ie submit_button
• [ ] For id's, uses hyphens. ie id="submit-button"
• [ ] In the style prop, uses camel case: ie style={"textAlign": "center"}
• [ ] Uses df for main pandas dataframe in the global scope. Uses dff for the filtered df in a callback function.

Concise code

• [ ] Uses concise syntax available in Dash>=2.0 For example use dcc.Dropdown(df.columns) rather than dcc.Dropdown(options = [{'label':c, 'value':c} for c in df.columns]
• [ ] Does not put callback Input()s Output()s or State()s in a list
• [ ] Does not include props that are set to the defaults for the component. For example, it's not necessary to include multi=False in the dcc.Dropdown. Check the reference section of the docs to see the defaults for the components.
• [ ] Does not include unused imports
• [ ] Uses Minimal comments - only those necessary to describe "why" rather than just describing what the code does.
• [ ] Uses f-strings rather than .format()

In apps using dash-bootstrap-components:

• [ ] Uses className prop whenever possible instead of the style prop For example: className="bg-primary" rather than style={"backgroundColor": "blue"}
• [ ] Uses named Bootstrap colors rather than custom colors wherever possible
• [ ] Avoids using html.BR() for spacing and instead uses margin in the className prop
• [ ] Uses dbc.Button instead of html.Button.
• [ ] Uses dbc.Container as the outer container of the app rather than html.Div
• [ ] Works well with dbc.themes.SPACELAB sine that is the stylesheet used in production.

Before release: (For Maintainers only)

• [ ] Checklist above is complete
• [ ] Ensure IDs are unique by adding prefix <filename>-x-
• [ ] Add app image to the assets folder
• [ ] Remove any data files added to the assets folder during review
• [ ] Add data files to Plotly datasets repo (if any)
• [ ] Include the new app by adding the related file to the pages folder and run app.py from the root directory to ensure the new app works in the Example Index.
• [ ] add entry to the CHANGELOG.md
• [ ] Release :party: