added support for nested folders in /pages

Author: AnnMarieW

dash_labs/plugins/pages.py

@@ -1,6 +1,7 @@
 from dash import callback, Output, Input, html, dcc
 import dash
 import os
+import glob
 import importlib
 from collections import OrderedDict
 import json
@@ -223,18 +224,20 @@ def _filename_to_name(filename):
 
 
 def _filename_to_path(filename):
-    return "/" + filename.split(".")[-1].replace("_", "-").lower()
+    return filename.replace("_", "-").replace(".", "/").lower().split("pages")[-1]
 
 
 def plug(app):
     # Import the pages so that the user doesn't have to.
     # TODO - Do validate_layout in here too
     dash.page_registry = OrderedDict()
 
-    for page_filename in os.listdir("pages"):
+    for page_filename in glob.iglob("pages/**", recursive=True):
+        _, _, page_filename = page_filename.partition("pages/")
         if page_filename.startswith("_") or not page_filename.endswith(".py"):
             continue
         page_filename = page_filename.replace(".py", "")
+        page_filename = page_filename.replace("/", ".")
         page_module = importlib.import_module(f"pages.{page_filename}")
 
         if f"pages.{page_filename}" in dash.page_registry:
@@ -253,7 +256,6 @@ def router():
         def update(pathname, search):
             path_id = app.strip_relative_path(pathname)
             query_parameters = _parse_query_string(search)
-
             layout = None
             for module in dash.page_registry:
                 page = dash.page_registry[module]

docs/demos/multi-page-nested-folders/app.py

@@ -0,0 +1,32 @@
+import dash
+import dash_labs as dl
+import dash_bootstrap_components as dbc
+
+
+app = dash.Dash(
+    __name__, plugins=[dl.plugins.pages], external_stylesheets=[dbc.themes.BOOTSTRAP]
+)
+
+navbar = dbc.NavbarSimple(
+    dbc.DropdownMenu(
+        [
+            dbc.DropdownMenuItem(page["name"], href=page["path"])
+            for page in dash.page_registry.values()
+            if page["module"] != "pages.not_found_404"
+        ],
+        nav=True,
+        label="More Pages",
+    ),
+    brand="Multi Page App Plugin Demo",
+    color="primary",
+    dark=True,
+    className="mb-2",
+)
+
+app.layout = dbc.Container(
+    [navbar, dl.plugins.page_container],
+    fluid=True,
+)
+
+if __name__ == "__main__":
+    app.run_server(debug=True)

docs/demos/multi-page-nested-folders/pages/chapter/bar-charts.py

@@ -0,0 +1,30 @@
+import dash
+
+dash.register_page(__name__)
+
+print(__name__)
+
+from dash import Dash, dcc, html, Input, Output, callback
+import plotly.express as px
+
+df = px.data.tips()
+days = df.day.unique()
+
+layout = html.Div(
+    [
+        dcc.Dropdown(
+            id="dropdown",
+            options=[{"label": x, "value": x} for x in days],
+            value=days[0],
+            clearable=False,
+        ),
+        dcc.Graph(id="bar-chart"),
+    ]
+)
+
+
+@callback(Output("bar-chart", "figure"), Input("dropdown", "value"))
+def update_bar_chart(day):
+    mask = df["day"] == day
+    fig = px.bar(df[mask], x="sex", y="total_bill", color="smoker", barmode="group")
+    return fig

docs/demos/multi-page-nested-folders/pages/chapter/heatmaps.py

@@ -0,0 +1,27 @@
+
+import dash
+dash.register_page(__name__, path="/")
+print(__name__)
+
+from dash import Dash, dcc, html, Input, Output, callback
+import plotly.express as px
+
+df = px.data.medals_wide(indexed=True)
+
+layout = html.Div(
+    [
+        html.P("Medals included:"),
+        dcc.Checklist(
+            id="heatmaps-medals",
+            options=[{"label": x, "value": x} for x in df.columns],
+            value=df.columns.tolist(),
+        ),
+        dcc.Graph(id="heatmaps-graph"),
+    ]
+)
+
+
+@callback(Output("heatmaps-graph", "figure"), Input("heatmaps-medals", "value"))
+def filter_heatmap(cols):
+    fig = px.imshow(df[cols])
+    return fig

docs/demos/multi-page-nested-folders/pages/histograms.py

@@ -0,0 +1,32 @@
+import dash
+
+dash.register_page(__name__)
+
+from dash import Dash, dcc, html, Input, Output, callback
+import plotly.express as px
+import numpy as np
+
+np.random.seed(2020)
+
+layout = html.Div(
+    [
+        dcc.Graph(id="histograms-graph"),
+        html.P("Mean:"),
+        dcc.Slider(
+            id="histograms-mean", min=-3, max=3, value=0, marks={-3: "-3", 3: "3"}
+        ),
+        html.P("Standard Deviation:"),
+        dcc.Slider(id="histograms-std", min=1, max=3, value=1, marks={1: "1", 3: "3"}),
+    ]
+)
+
+
+@callback(
+    Output("histograms-graph", "figure"),
+    Input("histograms-mean", "value"),
+    Input("histograms-std", "value"),
+)
+def display_color(mean, std):
+    data = np.random.normal(mean, std, size=500)
+    fig = px.histogram(data, nbins=30, range_x=[-10, 10])
+    return fig

docs/demos/multi-page-nested-folders/pages/not_found_404.py

@@ -0,0 +1,7 @@
+from dash import html
+import dash
+
+dash.register_page(__name__, path="/404")
+
+
+layout = html.H1("Custom 404")