Duplicate from plotly/dash-app-template

Co-authored-by: Nathan Drezner <[email protected]>

.github/workflows/spaces_publish.yml

@@ -0,0 +1,21 @@
+name: Sync to Hugging Face hub
+on:
+  push:
+    branches: [main]
+
+  # to run this workflow manually from the Actions tab
+  workflow_dispatch:
+    
+
+jobs:
+  sync-to-hub:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+          lfs: true
+      - name: Push to hub
+        env:
+          HF_TOKEN: ${{ secrets.HF_TOKEN }}
+        run: git push https://plotly:[email protected]/spaces/plotly/dash-app-template main

.gitignore

@@ -0,0 +1,291 @@
+.DS_Store
+.vscode/
+
+# Build artifacts
+dash_ag_grid/*
+!dash_ag_grid/__init__.py
+R/
+deps/
+man/
+inst/
+DESCRIPTION
+NAMESPACE
+Project.toml
+src/*.jl
+src/jl/*.jl
+lib/
+
+# Created by .ignore support plugin (hsz.mobi)
+### VisualStudioCode template
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+### JetBrains template
+# Covers JetBrains IDEs: IntelliJ, RubyMine, PhpStorm, AppCode, PyCharm, CLion, Android Studio and WebStorm
+# Reference: https://intellij-support.jetbrains.com/hc/en-us/articles/206544839
+
+# User-specific stuff
+.idea/**/workspace.xml
+.idea/**/tasks.xml
+.idea/**/usage.statistics.xml
+.idea/**/dictionaries
+.idea/**/shelf
+
+# Sensitive or high-churn files
+.idea/**/dataSources/
+.idea/**/dataSources.ids
+.idea/**/dataSources.local.xml
+.idea/**/sqlDataSources.xml
+.idea/**/dynamic.xml
+.idea/**/uiDesigner.xml
+.idea/**/dbnavigator.xml
+
+# Gradle
+.idea/**/gradle.xml
+.idea/**/libraries
+
+# Gradle and Maven with auto-import
+# When using Gradle or Maven with auto-import, you should exclude module files,
+# since they will be recreated, and may cause churn.  Uncomment if using
+# auto-import.
+# .idea/modules.xml
+# .idea/*.iml
+# .idea/modules
+
+# CMake
+cmake-build-*/
+
+# Mongo Explorer plugin
+.idea/**/mongoSettings.xml
+
+# File-based project format
+*.iws
+
+# IntelliJ
+out/
+
+# mpeltonen/sbt-idea plugin
+.idea_modules/
+
+# JIRA plugin
+atlassian-ide-plugin.xml
+
+# Cursive Clojure plugin
+.idea/replstate.xml
+
+# Crashlytics plugin (for Android Studio and IntelliJ)
+com_crashlytics_export_strings.xml
+crashlytics.properties
+crashlytics-build.properties
+fabric.properties
+
+# Editor-based Rest Client
+.idea/httpRequests
+### Node template
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+
+# next.js build output
+.next
+
+# nuxt.js build output
+.nuxt
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless
+### Python template
+# Byte-compiled / optimized / DLL files
+__pycache__/
+*.py[cod]
+*$py.class
+
+# C extensions
+*.so
+
+# Distribution / packaging
+.Python
+build/
+develop-eggs/
+dist/
+downloads/
+eggs/
+.eggs/
+lib64/
+parts/
+sdist/
+var/
+wheels/
+*.egg-info/
+.installed.cfg
+*.egg
+MANIFEST
+
+# PyInstaller
+#  Usually these files are written by a python script from a template
+#  before PyInstaller builds the exe, so as to inject date/other infos into it.
+*.manifest
+*.spec
+
+# Installer logs
+pip-log.txt
+pip-delete-this-directory.txt
+
+# Unit test / coverage reports
+htmlcov/
+.tox/
+.coverage
+.coverage.*
+nosetests.xml
+coverage.xml
+*.cover
+.hypothesis/
+.pytest_cache/
+
+# Translations
+*.mo
+*.pot
+
+# Django stuff:
+local_settings.py
+db.sqlite3
+
+# Flask stuff:
+instance/
+.webassets-cache
+
+# Scrapy stuff:
+.scrapy
+
+# Sphinx documentation
+docs/_build/
+
+# PyBuilder
+target/
+
+# Jupyter Notebook
+.ipynb_checkpoints
+
+# pyenv
+.python-version
+
+# celery beat schedule file
+celerybeat-schedule
+
+# SageMath parsed files
+*.sage.py
+
+# Environments
+.venv
+env/
+venv/
+ENV/
+env.bak/
+venv.bak/
+
+# Spyder project settings
+.spyderproject
+.spyproject
+
+# Rope project settings
+.ropeproject
+
+# mkdocs documentation
+/site
+
+# mypy
+.mypy_cache/
+### SublimeText template
+# Cache files for Sublime Text
+*.tmlanguage.cache
+*.tmPreferences.cache
+*.stTheme.cache
+
+# Workspace files are user-specific
+*.sublime-workspace
+
+# Project files should be checked into the repository, unless a significant
+# proportion of contributors will probably not be using Sublime Text
+# *.sublime-project
+
+# SFTP configuration file
+sftp-config.json
+
+# Package control specific files
+Package Control.last-run
+Package Control.ca-list
+Package Control.ca-bundle
+Package Control.system-ca-bundle
+Package Control.cache/
+Package Control.ca-certs/
+Package Control.merged-ca-bundle
+Package Control.user-ca-bundle
+oscrypto-ca-bundle.crt
+bh_unicode_properties.cache
+
+# Sublime-github package stores a github token in this file
+# https://packagecontrol.io/packages/sublime-github
+GitHub.sublime-settings

Dockerfile

@@ -0,0 +1,16 @@
+FROM python:3.12
+COPY --from=ghcr.io/astral-sh/uv:0.4.20 /uv /bin/uv
+
+RUN useradd -m -u 1000 user
+ENV PATH="/home/user/.local/bin:$PATH"
+ENV UV_SYSTEM_PYTHON=1
+
+WORKDIR /app
+
+COPY --chown=user ./requirements.txt requirements.txt
+RUN uv pip install -r requirements.txt
+
+COPY --chown=user . /app
+USER user
+
+CMD ["gunicorn", "app:server", "--workers", "4", "--bind", "0.0.0.0:7860"]

README.md

@@ -0,0 +1,93 @@
+---
+title: Dash App Template
+emoji: 📊
+sdk: docker
+app_file: app.py
+pinned: true
+---
+
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+
+# Dash on Spaces
+
+![Gapminder Dashboard Screenshot](screenshot.png)
+
+With Dash Open Source, you can create data apps on your laptop in pure Python, no JavaScript required.
+
+Get familiar with Dash by building a [sample app](https://dash.plotly.com/tutorial) with open source. Scale up with [Dash Enterprise](https://plotly.com/dash/) when your Dash app is ready for department or company-wide consumption. Or, launch your initiative with Dash Enterprise from the start to unlock developer productivity gains and hands-on acceleration from Plotly's team.
+
+## Deploy Dash on Spaces
+
+To get started with Dash on Spaces, click the button below:
+
+<a href="http://huggingface.co/new-space?template=plotly/dash-app-template" target="_blank">
+    <img src="https://huggingface.co/datasets/huggingface/badges/resolve/main/deploy-to-spaces-lg.svg" alt="">
+</a>
+
+This will start building your Space using Plotly's Dash Docker template. If successful, you should see a similar application to the [Dash template app](https://huggingface.co/spaces/dash/dash-app-template).
+
+## Customizing your Dash app
+
+If you have never built with Dash before, we recommend getting started with our [Dash in 20 minutes tutorial](https://dash.plotly.com/tutorial).
+
+When you create a Dash Space, you'll get a few key files to help you get started:
+
+### 1. app.py
+
+This is the main app file that defines the core logic of your project. Dash apps are often structured as modules, and you can optionally seperate your layout, callbacks, and data into other files, like `layout.py`, etc.
+
+Inside of `app.py` you will see:
+
+1. `from dash import Dash, html`
+   We import the `Dash` object to define our app, and the `html` library, which gives us building blocks to assemble our project.
+
+2. `app = Dash()`
+   Here, we define our app. Layout, server, and callbacks are _bound_ to the `app` object.
+
+3. `server = app.server`
+   Here, we define our server variable, which is used to run the app in production.
+
+4. `app.layout = `
+   The starter app layout is defined as a list of Dash components, an indivdual Dash component, or a function that returns either.
+
+   The `app.layout` is your initial layout that will be updated as a single-page application by callbacks and other logic in your project.
+
+5. `if __name__ == '__main__': app.run(debug=True)`
+   If you are running your project locally with `python app.py`, `app.run(...)` will execute and start up a development server to work on your project, with features including hot reloading, the callback graph, and more.
+
+   In production, we recommend `gunicorn`, which is a production-grade server. Debug features will not be enabled when running your project with `gunicorn`, so this line will never be reached.
+
+### 2. Dockerfile
+
+The Dockerfile for a Dash app is minimal since Dash has few system dependencies. The key requirements are:
+
+- It installs the dependencies listed in `requirements.txt` (using `uv`)
+- It creates a non-root user for security
+- It runs the app with `gunicorn` using `gunicorn app:server --workers 4`
+
+You may need to modify this file if your application requires additional system dependencies, permissions, or other CLI flags.
+
+### 3. requirements.txt
+
+The Space will automatically install dependencies listed in the `requirements.txt` file. At minimum, you must include `dash` and `gunicorn` in this file. You will want to add any other required packages your app needs.
+
+The Dash Space template provides a basic setup that you can extend based on your needs.
+
+## Additional Resources and Support
+
+- [Dash documentation](https://dash.plotly.com)
+- [Dash GitHub repository](https://github.com/plotly/dash)
+- [Dash Community Forums](https://community.plotly.com)
+- [Dash Enterprise](https://plotly.com/dash)
+- [Dash template Space](https://huggingface.co/spaces/plotly/dash-app-template)
+
+## Troubleshooting
+
+If you encounter issues:
+
+1. Make sure your notebook runs locally in app mode using `python app.py`
+2. Check that all required packages are listed in `requirements.txt`
+3. Verify the port configuration matches (7860 is the default for Spaces)
+4. Check Space logs for any Python errors
+
+For more help, visit the [Plotly Community Forums](https://community.plotly.com) or [open an issue](https://github.com/plotly/dash/issues).

app.py

@@ -0,0 +1,332 @@
+import dash
+import dash_mantine_components as dmc
+import plotly.express as px
+from dash import Input, Output, callback, dcc, html
+from dash_iconify import DashIconify
+
+
+app = dash.Dash(__name__)
+server = app.server
+
+df = px.data.gapminder()
+
+
+def create_scatter_plot(selected_year, selected_continent=None):
+    filtered_df = df[df["year"] == selected_year]
+
+    if selected_continent and selected_continent != "All":
+        filtered_df = filtered_df[filtered_df["continent"] == selected_continent]
+
+    fig = px.scatter(
+        filtered_df,
+        x="gdpPercap",
+        y="lifeExp",
+        size="pop",
+        color="continent",
+        hover_name="country",
+        log_x=True,
+        size_max=60,
+        title=f"Life Expectancy vs GDP per Capita ({selected_year})",
+    )
+
+    fig.update_layout(
+        template="plotly_dark",
+        paper_bgcolor="rgba(0,0,0,0)",
+        plot_bgcolor="rgba(0,0,0,0)",
+    )
+
+    return fig
+
+
+def create_line_chart(selected_country):
+    country_data = df[df["country"] == selected_country]
+    fig = px.line(
+        country_data,
+        x="year",
+        y="lifeExp",
+        title=f"{selected_country} - Life Expectancy",
+    )
+    fig.update_layout(
+        template="plotly_dark",
+        paper_bgcolor="rgba(0,0,0,0)",
+        plot_bgcolor="rgba(0,0,0,0)",
+    )
+    return fig
+
+
+def create_bar_chart(selected_year):
+    year_data = df[df["year"] == selected_year]
+    continent_stats = year_data.groupby("continent")["lifeExp"].mean().reset_index()
+    fig = px.bar(
+        continent_stats,
+        x="continent",
+        y="lifeExp",
+        color="continent",
+        title=f"Average Life Expectancy by Continent ({selected_year})",
+    )
+    fig.update_layout(
+        template="plotly_dark",
+        paper_bgcolor="rgba(0,0,0,0)",
+        plot_bgcolor="rgba(0,0,0,0)",
+        showlegend=False,
+    )
+    return fig
+
+
+def create_datacard(title, value, icon, color):
+    return dmc.Card(
+        [
+            dmc.Group(
+                [
+                    DashIconify(icon=icon, width=30, color=color),
+                    html.Div(
+                        [
+                            dmc.Text(value, size="xl", fw=700, c="white"),
+                            dmc.Text(title, size="sm", c="dimmed"),
+                        ]
+                    ),
+                ],
+                align="center",
+                gap="md",
+            )
+        ],
+        p="md",
+        className="datacard",
+    )
+
+
+app.layout = dmc.MantineProvider(
+    [
+        html.Link(
+            href="https://fonts.googleapis.com/css2?family=Outfit:[email protected]&display=swap",
+            rel="stylesheet",
+        ),
+        dmc.Group(
+            [
+                DashIconify(icon="twemoji:globe-with-meridians", width=45),
+                dmc.Text(
+                    "Gapminder World Data Explorer", ml=10, size="xl", fw=900, c="white"
+                ),
+            ],
+            align="center",
+            className="header",
+            mb="md",
+        ),
+        dmc.Grid(
+            [
+                dmc.GridCol(
+                    [
+                        dmc.Stack(
+                            [
+                                dmc.Card(
+                                    [
+                                        dmc.Text("Controls", size="lg", mb="md"),
+                                        dmc.Stack(
+                                            [
+                                                html.Div(
+                                                    [
+                                                        dmc.Text(
+                                                            "Year:", size="sm", mb=5
+                                                        ),
+                                                        dmc.Slider(
+                                                            id="year-slider",
+                                                            min=1952,
+                                                            max=2007,
+                                                            step=5,
+                                                            value=2007,
+                                                            marks=[
+                                                                {
+                                                                    "value": year,
+                                                                    "label": str(year),
+                                                                }
+                                                                for year in [
+                                                                    1952,
+                                                                    1967,
+                                                                    1982,
+                                                                    1997,
+                                                                    2007,
+                                                                ]
+                                                            ],
+                                                        ),
+                                                    ]
+                                                ),
+                                                html.Div(
+                                                    [
+                                                        dmc.Text(
+                                                            "Continent Filter:",
+                                                            size="sm",
+                                                            mb=5,
+                                                        ),
+                                                        dmc.Select(
+                                                            id="continent-dropdown",
+                                                            data=[
+                                                                {
+                                                                    "value": "All",
+                                                                    "label": "All Continents",
+                                                                }
+                                                            ]
+                                                            + [
+                                                                {
+                                                                    "value": cont,
+                                                                    "label": cont,
+                                                                }
+                                                                for cont in sorted(
+                                                                    df[
+                                                                        "continent"
+                                                                    ].unique()
+                                                                )
+                                                            ],
+                                                            value="All",
+                                                        ),
+                                                    ]
+                                                ),
+                                                html.Div(
+                                                    [
+                                                        dmc.Text(
+                                                            "Select Country:",
+                                                            size="sm",
+                                                            mb=5,
+                                                        ),
+                                                        dmc.Select(
+                                                            id="country-dropdown",
+                                                            data=[
+                                                                {
+                                                                    "value": country,
+                                                                    "label": country,
+                                                                }
+                                                                for country in sorted(
+                                                                    df[
+                                                                        "country"
+                                                                    ].unique()
+                                                                )
+                                                            ],
+                                                            value="United States",
+                                                            searchable=True,
+                                                        ),
+                                                    ]
+                                                ),
+                                            ],
+                                            gap="lg",
+                                        ),
+                                    ],
+                                    p="md",
+                                    className="control-card",
+                                )
+                            ]
+                        )
+                    ],
+                    span=3,
+                ),
+                dmc.GridCol(
+                    [
+                        dmc.Stack(
+                            [
+                                html.Div(id="stats-cards"),
+                                dmc.Card(
+                                    [dcc.Graph(id="scatter-plot")],
+                                    p="sm",
+                                    className="chart-card",
+                                ),
+                            ],
+                            gap="md",
+                        )
+                    ],
+                    span=9,
+                ),
+            ],
+            gutter="md",
+        ),
+        dmc.Grid(
+            [
+                dmc.GridCol(
+                    [
+                        dmc.Card(
+                            [dcc.Graph(id="line-chart")], p="sm", className="chart-card"
+                        )
+                    ],
+                    span=6,
+                ),
+                dmc.GridCol(
+                    [
+                        dmc.Card(
+                            [dcc.Graph(id="bar-chart")], p="sm", className="chart-card"
+                        )
+                    ],
+                    span=6,
+                ),
+            ],
+            gutter="md",
+            mt="md",
+        ),
+    ],
+    forceColorScheme="dark",
+    theme={"colorScheme": "dark"},
+)
+
+
+@callback(
+    Output("scatter-plot", "figure"),
+    [Input("year-slider", "value"), Input("continent-dropdown", "value")],
+)
+def update_scatter_plot(selected_year, selected_continent):
+    return create_scatter_plot(selected_year, selected_continent)
+
+
+@callback(Output("line-chart", "figure"), Input("country-dropdown", "value"))
+def update_line_chart(selected_country):
+    return create_line_chart(selected_country)
+
+
+@callback(Output("bar-chart", "figure"), Input("year-slider", "value"))
+def update_bar_chart(selected_year):
+    return create_bar_chart(selected_year)
+
+
+@callback(Output("stats-cards", "children"), Input("year-slider", "value"))
+def update_stats(selected_year):
+    year_data = df[df["year"] == selected_year]
+
+    avg_life_exp = round(year_data["lifeExp"].mean(), 1)
+    total_pop = year_data["pop"].sum()
+    num_countries = len(year_data)
+    avg_gdp = round(year_data["gdpPercap"].mean(), 0)
+
+    return dmc.Grid(
+        [
+            dmc.GridCol(
+                create_datacard(
+                    "Life Expectancy",
+                    f"{avg_life_exp} years",
+                    "mdi:heart-pulse",
+                    "#ff6b35",
+                ),
+                span=3,
+            ),
+            dmc.GridCol(
+                create_datacard(
+                    "Population",
+                    f"{total_pop / 1e9:.1f}B",
+                    "mdi:account-group",
+                    "#1f77b4",
+                ),
+                span=3,
+            ),
+            dmc.GridCol(
+                create_datacard(
+                    "Countries", str(num_countries), "mdi:earth", "#2ca02c"
+                ),
+                span=3,
+            ),
+            dmc.GridCol(
+                create_datacard(
+                    "GDP per Capita", f"${avg_gdp:,.0f}", "mdi:currency-usd", "#d62728"
+                ),
+                span=3,
+            ),
+        ],
+        gutter="sm",
+    )
+
+
+if __name__ == "__main__":
+    app.run(debug=True, port=8050)

assets/styles.css

@@ -0,0 +1,107 @@
+body {
+    font-family: 'Outfit', sans-serif;
+    background: linear-gradient(135deg, #1e1e2e 0%, #2a2a3e 100%);
+    margin: 0;
+    padding: 20px;
+    min-height: 100vh;
+}
+
+.header {
+    background: linear-gradient(135deg, #ff6b35, #d43425);
+    padding: 20px 30px;
+    border-radius: 15px;
+    box-shadow: 0 8px 25px rgba(255, 107, 53, 0.3);
+    margin-bottom: 20px;
+}
+
+.control-card {
+    background: rgba(15, 15, 20, 0.9);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    backdrop-filter: blur(10px);
+    border-radius: 15px;
+    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
+}
+
+.chart-card {
+    background: rgba(15, 15, 20, 0.9);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    backdrop-filter: blur(10px);
+    border-radius: 15px;
+    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
+}
+
+.datacard {
+    background: linear-gradient(135deg, rgba(255, 107, 53, 0.1), rgba(212, 52, 37, 0.1));
+    border: 1px solid rgba(255, 107, 53, 0.3);
+    border-radius: 12px;
+    transition: all 0.3s ease;
+    backdrop-filter: blur(10px);
+}
+
+.datacard:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 12px 30px rgba(255, 107, 53, 0.2);
+}
+
+.year-slider .mantine-Slider-track {
+    background: rgba(255, 255, 255, 0.2);
+}
+
+.year-slider .mantine-Slider-bar {
+    background: linear-gradient(90deg, #ff6b35, #d43425);
+}
+
+.year-slider .mantine-Slider-thumb {
+    background: #ff6b35;
+    border: 2px solid white;
+}
+
+.continent-select .mantine-Select-input,
+.country-select .mantine-Select-input {
+    background: rgba(255, 255, 255, 0.1);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    color: white;
+}
+
+.continent-select .mantine-Select-input:focus,
+.country-select .mantine-Select-input:focus {
+    border-color: #ff6b35;
+    box-shadow: 0 0 10px rgba(255, 107, 53, 0.3);
+}
+
+/* Custom scrollbar for dropdowns */
+.mantine-Select-dropdown {
+    background: rgba(15, 15, 20, 0.95);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    backdrop-filter: blur(10px);
+}
+
+.mantine-Select-item {
+    color: white;
+}
+
+.mantine-Select-item:hover {
+    background: rgba(255, 107, 53, 0.2);
+}
+
+/* Graph styling adjustments */
+.js-plotly-plot {
+    border-radius: 10px;
+    overflow: hidden;
+}
+
+/* Responsive design */
+@media (max-width: 768px) {
+    body {
+        padding: 10px;
+    }
+    
+    .header {
+        padding: 15px 20px;
+    }
+    
+    .control-card,
+    .chart-card {
+        margin: 10px 0;
+    }
+}

requirements.txt

@@ -0,0 +1,6 @@
+dash
+dash-mantine-components
+dash-iconify
+plotly
+pandas
+gunicorn