dash-app-gallery icon indicating copy to clipboard operation
dash-app-gallery copied to clipboard

Noting already existing categories for all apps

Open Coding-with-Adam opened this issue 3 years ago β€’ 17 comments
trafficstars

Adam: from 1st app to cultural dimensions Somesh: Discrete color to KNN clasification Tolga: Legend app to Plotly Express App Gyasi: Poisson app to the end

Google sheet here.

@tolgahancepel @someshfengde

Coding-with-Adam avatar May 05 '22 17:05 Coding-with-Adam

I'm here.

IcToxi avatar May 05 '22 17:05 IcToxi

Hi there,

Has anyone run it successfully? I got this:

URLError

urllib.error.URLError: <urlopen error [Errno 111] Connection refused>
Traceback (most recent call last)

    File "/usr/local/mambaforge/envs/dash-gallery/lib/python3.9/urllib/request.py", line 1346, in do_open

    h.request(req.get_method(), req.selector, req.data, headers,

    File "/usr/local/mambaforge/envs/dash-gallery/lib/python3.9/http/client.py", line 1285, in request

    self._send_request(method, url, body, headers, encode_chunked)

    File "/usr/local/mambaforge/envs/dash-gallery/lib/python3.9/http/client.py", line 1331, in _send_request

    self.endheaders(body, encode_chunked=encode_chunked)

    File "/usr/local/mambaforge/envs/dash-gallery/lib/python3.9/http/client.py", line 1280, in endheaders

    self._send_output(message_body, encode_chunked=encode_chunked)

    File "/usr/local/mambaforge/envs/dash-gallery/lib/python3.9/http/client.py", line 1040, in _send_output

    self.send(msg)

    File "/usr/local/mambaforge/envs/dash-gallery/lib/python3.9/http/client.py", line 980, in send

    self.connect()

    File "/usr/local/mambaforge/envs/dash-gallery/lib/python3.9/http/client.py", line 1447, in connect

    super().connect()

    File "/usr/local/mambaforge/envs/dash-gallery/lib/python3.9/http/client.py", line 946, in connect

    self.sock = self._create_connection(

    File "/usr/local/mambaforge/envs/dash-gallery/lib/python3.9/socket.py", line 844, in create_connection

    raise err

    File "/usr/local/mambaforge/envs/dash-gallery/lib/python3.9/socket.py", line 832, in create_connection

    sock.connect(sa)

Then I found out there was a runtime file there, so I was going to deploy the environment exactly as required. I got this:

ERROR: Could not find a version that satisfies the requirement numpy==1.22.3 (from versions: 1.3.0, 1.4.1, 1.5.0, 1.5.1, 1.6.0, 1.6.1, 1.6.2, 1.7.0, 1.7.1, 1.7.2, 1.8.0, 1.8.1, 1.8.2, 1.9.0, 1.9.1, 1.9.2, 1.9.3, 1.10.0.post2, 1.10.1, 1.10.2, 1.10.4, 1.11.0, 1.11.1, 1.11.2, 1.11.3, 1.12.0, 1.12.1, 1.13.0rc1, 1.13.0rc2, 1.13.0, 1.13.1, 1.13.3, 1.14.0rc1, 1.14.0, 1.14.1, 1.14.2, 1.14.3, 1.14.4, 1.14.5, 1.14.6, 1.15.0rc1, 1.15.0rc2, 1.15.0, 1.15.1, 1.15.2, 1.15.3, 1.15.4, 1.16.0rc1, 1.16.0rc2, 1.16.0, 1.16.1, 1.16.2, 1.16.3, 1.16.4, 1.16.5, 1.16.6, 1.17.0rc1, 1.17.0rc2, 1.17.0, 1.17.1, 1.17.2, 1.17.3, 1.17.4, 1.17.5, 1.18.0rc1, 1.18.0, 1.18.1, 1.18.2, 1.18.3, 1.18.4, 1.18.5, 1.19.0rc1, 1.19.0rc2, 1.19.0, 1.19.1, 1.19.2, 1.19.3, 1.19.4, 1.19.5, 1.20.0rc1, 1.20.0rc2, 1.20.0, 1.20.1, 1.20.2, 1.20.3, 1.21.0rc1, 1.21.0rc2, 1.21.0, 1.21.1, 1.21.2, 1.21.3, 1.21.4, 1.21.5, 1.21.6)
ERROR: No matching distribution found for numpy==1.22.3

NumPy 1.22.0 Release Notes:

The Python versions supported in this release are 3.8-3.10, Python 3.7 has been dropped.

To be honest, this is a novice-oriented project, why stick to the old habit of using pip to manage the environment?

Also, use python376 in 2022, which is a bit far from the environment of those real users.

IcToxi avatar May 06 '22 08:05 IcToxi

HI @IcToxi, I've had some errors launching as well but not like your errors. Did you try installing all the libraries within the requirements.txt file first? My error was generated because I forgot to do that.

Also, what operating system are you using?

Coding-with-Adam avatar May 06 '22 14:05 Coding-with-Adam

Hi @Coding-with-Adam,

I have tried WSL and Manjaro, same error. I created a new virtual environment with mamba (tried both py3.9 and py3.7.6), and then used pip to execute pip install -r requirements.txt. And I have no clue about this error from socket, I've given up to continue tossing the environment. Could you please send me a to-do list? Since we assigned tasks from the page that I can't run right now.

IcToxi avatar May 06 '22 15:05 IcToxi

Hi @IcToxi I am running python 3.8.13 and it's running fine on my end let me check by updating python version

someshfengde avatar May 06 '22 15:05 someshfengde

Hi @IcToxi we're trying to get that fixed today. But, I'm not sure how long it will take. While we work on it, would you be able to create a minimal app that has a sunburst and a chained callback?

Coding-with-Adam avatar May 06 '22 15:05 Coding-with-Adam

@Coding-with-Adam Sure.

And thank you, @someshfengde, but I don't think this issue is worth our time, our task doesn't necessarily need to run the whole app.

IcToxi avatar May 06 '22 16:05 IcToxi

@IcToxi I updated the requirements.txt file at start of the project so it kinda became related to meπŸ˜†

someshfengde avatar May 06 '22 16:05 someshfengde

from dash import Dash, Input, Output, html, dcc
import dash_bootstrap_components as dbc
import plotly.express as px
import numpy as np

df = px.data.gapminder().query("year >= 1992")

app = Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])

app.layout = html.Div(
    dbc.Row(
        [
            dbc.Col(
                [
                    dbc.Container(
                        [
                            dcc.Dropdown(
                                id="sunburst-plot-x-year",
                                options=df.year.unique(),
                                value=df.year.unique()[-1],
                            ),
                            dcc.Dropdown(id="sunburst-plot-x-continent", multi=True),
                            dcc.Dropdown(id="sunburst-plot-x-country", multi=True),
                        ]
                    )
                ],
                width=3,
            ),
            dbc.Col(
                [
                    dbc.Container(
                        [
                            dcc.Graph(id="sunburst-plot-x-graph"),
                        ]
                    )
                ],
                width=9,
            ),
        ]
    )
)


@app.callback(
    Output("sunburst-plot-x-continent", "options"),
    Input("sunburst-plot-x-year", "value"),
)
def chained_dropdown_1(year):
    return df.query(f"year == {year}").continent.unique()


@app.callback(
    Output("sunburst-plot-x-continent", "value"),
    Input("sunburst-plot-x-continent", "options"),
)
def chained_dropdown_2(available_options):
    return available_options


@app.callback(
    Output("sunburst-plot-x-country", "options"),
    Input("sunburst-plot-x-continent", "value"),
)
def chained_dropdown_3(continent):
    return df.query(f"continent in {continent}").country.unique()


@app.callback(
    Output("sunburst-plot-x-country", "value"),
    Input("sunburst-plot-x-country", "options"),
)
def chained_dropdown_4(available_options):
    return available_options


@app.callback(
    Output("sunburst-plot-x-graph", "figure"),
    [
        Input("sunburst-plot-x-year", "value"),
        Input("sunburst-plot-x-continent", "value"),
        Input("sunburst-plot-x-country", "value"),
    ],
)
def generate_graph(year, continent, country):
    _df = df.query(f"year == {year} & continent in {continent} & country in {country}")

    fig = px.sunburst(
        _df,
        path=["continent", "country"],
        values="pop",
        color="lifeExp",
        hover_data=["iso_alpha"],
        color_continuous_scale="RdBu",
        color_continuous_midpoint=np.average(_df["lifeExp"], weights=_df["pop"]),
    )

    fig.update_layout(margin=dict(l=0, r=0, t=0, b=0))
    return fig


if __name__ == "__main__":
    app.run_server(debug=True)

Hi @Coding-with-Adam, I paste it here?

IcToxi avatar May 06 '22 17:05 IcToxi

Tip: Don't forget external_stylesheets=[dbc.themes.XXXX] when using dbc's Layout. πŸ™ƒ

IcToxi avatar May 06 '22 17:05 IcToxi

Hi @IcToxi your app is now in the repo. I made small changes to avoid a None Type error, but it looks great. Thank you for creating.

We also updated the main requirements.txt file. Can you try to git clone this repo again and see if you get the same error please.

image

Coding-with-Adam avatar May 07 '22 02:05 Coding-with-Adam

I can run it now, sorry, it has nothing to do with the environment, it is the raw.githubusercontent.com you introduced that I can't visit normally for some reasons you might know.

IcToxi avatar May 07 '22 06:05 IcToxi

from dash import Dash, html, dcc, dash_table, Output, Input, State
from dash.exceptions import PreventUpdate
import plotly.express as px

df = px.data.iris()
fig = px.parallel_coordinates(
    df,
    color="species_id",
    labels={
        "species_id": "Species",
        "sepal_width": "Sepal Width",
        "sepal_length": "Sepal Length",
        "petal_width": "Petal Width",
        "petal_length": "Petal Length",
    },
    color_continuous_scale=px.colors.diverging.Tealrose,
    color_continuous_midpoint=2,
)

app = Dash(__name__)

app.layout = html.Div(
    [
        my_graph := dcc.Graph(figure=fig),
        my_table := dash_table.DataTable(
            df.to_dict("records"),
            [{"name": i, "id": i} for i in df.columns],
            row_selectable="single",
        ),
    ]
)


@app.callback(
    Output(my_graph, "figure"),
    Input(my_table, "selected_rows"),
    State(my_graph, "figure"),
)
def pick(r, f):
    if r is None:
        raise PreventUpdate

    row = (
        df[["sepal_length", "sepal_width", "petal_length", "petal_width", "species_id"]]
        .loc[r[0]]
        .to_list()
    )

    for i, v in enumerate(f.get("data")[0].get("dimensions")):
        v.update({"constraintrange": [row[i] - row[i] / 100000, row[i]]})

    return f


if __name__ == "__main__":
    app.run_server(debug=True)

This is one of my replies on the forum, this kind of [row[i] - row[i] / 100000 does not seem very common, do you think it is appropriate to add it here?

IcToxi avatar May 07 '22 07:05 IcToxi

This is one of my replies on the forum, this kind of [row[i] - row[i] / 100000 does not seem very common, do you think it is appropriate to add it here?

Do you mean add this example as an app here in the gallery?

Coding-with-Adam avatar May 07 '22 07:05 Coding-with-Adam

from dash import Dash, html, dcc, Input, Output, State, MATCH, ALL

app = Dash(__name__)

questionnaire = {
    1: {
        "type": "choice",
        "question": "Does your agency use an electronic accounting software system (as opposed to manual)?",
        "options": ["Yes", "No", "Skip"],
    },
    2: {
        "type": "choice+blank",
        "question": "Has your agency recently implemented any new or substantially changed systems, for example, financial management or accounting systems? (If yes, please explain.)",
        "options": ["Yes", "No", "Skip"],
    },
    3: {
        "type": "choice",
        "question": "Does your agency have a written Accounting and Financial Reporting policy?",
        "options": ["Yes", "No", "Skip"],
    },
    4: {
        "type": "choice",
        "question": "Does your agency have a written Personnel policy (to include travel reimbursement, fringe benefits, etc.)?",
        "options": ["Yes", "No", "Skip"],
    },
    5: {
        "type": "multi-choice",
        "question": "Which of the following aspects of the OJT training program were explained to you?",
        "options": [
            "Training Hours",
            "Type of Training",
            "Training Wages",
            "Job Choices",
            "Entry Wages",
        ],
    },
    6: {
        "type": "multi-choice",
        "question": "How did you learn about this OJT program?",
        "options": [
            "Contractor",
            "Community Based Organization",
            "Union Apprenticeship Program",
            "Other",
        ],
    },
    7: {
        "type": "blank",
        "question": "What are your performance based strengths (speed, strength, power, agility, balance, conditioning, etc.)?",
    },
    8: {
        "type": "essay",
        "question": "Do you have any questions, comments or concerns?",
    },
}


def generate(k, v):
    match v["type"]:
        case "choice":
            return html.Div(
                [
                    html.P(str(k) + ". " + v["question"]),
                    dcc.RadioItems(
                        id={
                            "index": k,
                            "type": v["type"],
                            "category": "questionnaire",
                            "additional": False,
                        },
                        options={i: i for i in v["options"]},
                    ),
                ]
            )
        case "multi-choice":
            return html.Div(
                [
                    html.P(str(k) + ". " + v["question"]),
                    dcc.Checklist(
                        id={
                            "index": k,
                            "type": v["type"],
                            "category": "questionnaire",
                            "additional": False,
                        },
                        options={i: i for i in v["options"]},
                    ),
                ]
            )
        case "choice+blank":
            return html.Div(
                [
                    html.P(str(k) + ". " + v["question"]),
                    dcc.RadioItems(
                        id={
                            "index": k,
                            "type": v["type"],
                            "category": "questionnaire",
                            "additional": False,
                        },
                        options={i: i for i in v["options"]},
                    ),
                    dcc.Input(
                        id={
                            "index": k,
                            "type": v["type"],
                            "category": "questionnaire",
                            "additional": True,
                        },
                        disabled=True,
                    ),
                ]
            )
        case "blank":
            return html.Div(
                [
                    html.P(str(k) + ". " + v["question"]),
                    dcc.Input(
                        id={
                            "index": k,
                            "type": v["type"],
                            "category": "questionnaire",
                            "additional": False,
                        }
                    ),
                ]
            )
        case "essay":
            return html.Div(
                [
                    html.P(str(k) + ". " + v["question"]),
                    dcc.Textarea(
                        id={
                            "index": k,
                            "type": v["type"],
                            "category": "questionnaire",
                            "additional": False,
                        }
                    ),
                ]
            )
        case _:
            return html.Div("Something is wrong...")


app.layout = html.Div(
    [generate(k, v) for k, v in questionnaire.items()]
    + [html.Br(), btn := html.Button("Submit"), answers := html.Div()]
)


app.callback(
    Output(
        {
            "category": "questionnaire",
            "type": "choice+blank",
            "additional": True,
            "index": MATCH,
        },
        "disabled",
    ),
    Input(
        {
            "category": "questionnaire",
            "type": "choice+blank",
            "additional": False,
            "index": MATCH,
        },
        "value",
    ),
)(lambda v: False if v == "Yes" else True)


app.callback(
    Output(btn, "disabled"),
    Input(
        {"category": "questionnaire", "type": ALL, "additional": False, "index": ALL},
        "value",
    ),
)(lambda answer: False if all(answer) else True)


@app.callback(
    Output(answers, "children"),
    Input(btn, "n_clicks"),
    [
        State(
            {"category": "questionnaire", "type": ALL, "additional": ALL, "index": ALL},
            "id",
        ),
        State(
            {"category": "questionnaire", "type": ALL, "additional": ALL, "index": ALL},
            "value",
        ),
    ],
    prevent_initial_call=True,
)
def collect(n_clicks, index, answer):
    return str([v | {"answer": answer[i]} for i, v in enumerate(index)])


if __name__ == "__main__":
    app.run_server(debug=True)

And this one, which I think would be a good example of pattern matching, but the questionnaires I just found randomly on the internet would look a little weird in a formal place. Anyone has a good idea?

IcToxi avatar May 07 '22 07:05 IcToxi

And for client-side callbacks, I think writing in JS files should be advocated. But currently the structure of this project is only designed to display Python code.

IcToxi avatar May 07 '22 07:05 IcToxi

Do you mean add this example as an app here in the gallery?

Yes, I see that the parallel-coordinates is in our list.

IcToxi avatar May 07 '22 07:05 IcToxi