fix for dropdown not opening/displaying in static position. fix for callbacks not executing due to html tag id faulty with uuid4 string (but random string of a-z/0-9 works?)

Author: larsrollik

dash_entrypoints/assets/__init__.py

@@ -0,0 +1 @@
+.dropdown.dropdown { position: static; }

dash_entrypoints/assets/dropdown.fix.css

@@ -1,5 +1,7 @@
 from datetime import datetime
+from pathlib import Path
 
+import dash_bootstrap_components as dbc
 import dash_html_components as html
 import dash_table
 import numpy as np
@@ -39,12 +41,12 @@ def make_dates_list(years=None, months=np.arange(1, 13, 1), days=np.arange(1, 32
 
 
 def add_table(
-    table_name=None,
-    df=None,
-    dropdown_options=None,
-    dropdown_columns=[],
-    table_expandable=True,
-    table_width=90,
+    table_name: str = None,
+    df: pd.DataFrame = None,
+    dropdown_options: dict = None,
+    dropdown_columns: list = None,
+    table_expandable: bool = True,
+    table_width: int = 90,
     **kwargs,
 ):
     """Dash DataTable wrapper to provide dropdown columns along with free field columns. Tables are row extendable.
@@ -87,6 +89,7 @@ def add_table(
     ]
 
     table_title = str(table_name).replace("_", " ").capitalize()
+    table_button_name = "--".join([__name__, table_name]).replace(".", "--")
 
     layout = html.Div(
         [
@@ -102,26 +105,29 @@ def add_table(
                 dropdown=dropdown_options,
             ),
             html.Div(id=f"{table_name}-container"),
-            html.Button("Add Row", id=f"{table_name}-button", n_clicks=0)
+            html.Button("Add Row", id=table_button_name, n_clicks=0)
             if table_expandable
-            else html.Div(),
-            html.Br(),
+            else html.Div(hidden=True),
         ],
         style={
             "padding": "10px",
             "width": "90%" if table_width is None else f"{table_width}%",
         },
     )
 
-    @callback(
-        Output(table_name, "data"),
-        Input(f"{table_name}-button", "n_clicks"),
-        State(table_name, "data"),
-        State(table_name, "columns"),
-    )
-    def add_row(n_clicks, rows, columns):
-        if n_clicks > 0:
-            rows.append({c["id"]: "" for c in columns})
-        return rows
+    if table_expandable:
+
+        @callback(
+            Output(table_name, "data"),
+            [
+                Input(table_button_name, "n_clicks"),
+                State(table_name, "data"),
+                State(table_name, "columns"),
+            ],
+        )
+        def add_row(n_clicks, rows, columns):
+            if n_clicks > 0:
+                rows.append({c["id"]: "" for c in columns})
+            return rows
 
     return layout

dash_entrypoints/elements/datatable.py

@@ -1,6 +1,9 @@
+import json
 import socket
 from uuid import uuid4
 
+import dash
+
 
 def get_local_ip_address():
     """https://stackoverflow.com/questions/166506/finding-local-ip-addresses-using-pythons-stdlib"""
@@ -16,5 +19,14 @@ def get_local_ip_address():
     return ip
 
 
-def add_random_id(input_string=None):
-    return "__".join([input_string, str(uuid4())])
+def get_callback_context():
+    context = dash.callback_context
+    ctx = json.dumps(
+        {
+            "states": context.states,
+            "triggered": context.triggered,
+            "inputs": context.inputs,
+        },
+        indent=2,
+    )
+    return ctx

dash_entrypoints/misc.py

@@ -0,0 +1,5 @@
+from dash_entrypoints import assets
+
+DEFAULT_APP_NAME = "InterfaceEntrypoint"
+DEFAULT_VIEWS_MODULE = "dash_entrypoints.views"
+DEFAULT_ASSETS_FOLDER = assets.__path__[0]

dash_entrypoints/multi_page/__init__.py

@@ -3,6 +3,9 @@
 import sys
 
 from dash_entrypoints.misc import get_local_ip_address
+from dash_entrypoints.multi_page import DEFAULT_APP_NAME
+from dash_entrypoints.multi_page import DEFAULT_ASSETS_FOLDER
+from dash_entrypoints.multi_page import DEFAULT_VIEWS_MODULE
 from dash_entrypoints.multi_page.entrypoint import run_entrypoint
 
 
@@ -14,7 +17,7 @@ def make_parser():
         "--app-name",
         type=str,
         dest="app_name",
-        default="App name",
+        default=DEFAULT_APP_NAME,
         help="App name",
     )
     parser.add_argument(
@@ -30,9 +33,17 @@ def make_parser():
         "--views-module",
         type=str,
         dest="views_module",
-        default="dash_entrypoints.views",
+        default=DEFAULT_VIEWS_MODULE,
         help="Module import statement for module that contains pages, e.g. 'mypackage.page_subpackage' ",
     )
+    parser.add_argument(
+        "-a",
+        "--assets-folder",
+        type=str,
+        dest="assets_folder",
+        default=DEFAULT_ASSETS_FOLDER,
+        help="Folder with stylesheet, script, image assets",
+    )
     parser.add_argument(
         "--port",
         "-p",

dash_entrypoints/multi_page/cli.py

@@ -1,6 +1,4 @@
-import argparse
 import importlib
-import socket
 from pathlib import Path
 
 import dash
@@ -13,9 +11,9 @@
 from dash import State
 
 from dash_entrypoints.misc import get_local_ip_address
-
-DEFAULT_APP_NAME = "InterfaceEntrypoint"
-DEFAULT_VIEWS_MODULE = "dash_entrypoints.views"
+from dash_entrypoints.multi_page import DEFAULT_APP_NAME
+from dash_entrypoints.multi_page import DEFAULT_ASSETS_FOLDER
+from dash_entrypoints.multi_page import DEFAULT_VIEWS_MODULE
 
 
 def import_layout_function(layout_file=None, views_imported=None):
@@ -86,6 +84,7 @@ def empty_layout():
 def get_app(
     app_name=DEFAULT_APP_NAME,
     views_module=None,
+    assets_folder=None,
 ):
     """
 
@@ -94,10 +93,15 @@ def get_app(
     :param kwargs:
     :return:
     """
+    local_stylesheets = sorted(Path(assets_folder).glob("*.css"))
+    local_scripts = sorted(Path(assets_folder).glob("*.js"))
+
     app = dash.Dash(
         name=app_name,
         plugins=[dl.plugins.pages],
-        external_stylesheets=[dbc.themes.BOOTSTRAP],
+        assets_folder=assets_folder,
+        external_stylesheets=local_stylesheets + [dbc.themes.BOOTSTRAP],
+        external_scripts=local_scripts,
     )
     register_page_layouts(
         app_name=app_name,
@@ -179,6 +183,7 @@ def run_entrypoint(
     app_name=DEFAULT_APP_NAME,
     ip_address=get_local_ip_address(),
     views_module=DEFAULT_VIEWS_MODULE,
+    assets_folder=DEFAULT_ASSETS_FOLDER,
     port=9050,
     debug=False,
     **kwargs,
@@ -188,12 +193,15 @@ def run_entrypoint(
     :param app_name:
     :param ip_address:
     :param views_module:
+    :param assets_folder:
     :param port:
     :param debug:
     :param kwargs:
     :return:
     """
-    app = get_app(app_name=app_name, views_module=views_module)
+    app = get_app(
+        app_name=app_name, views_module=views_module, assets_folder=assets_folder
+    )
     app = add_base_layout(
         app=app, app_name=app_name, ip_address=ip_address, port=port, **kwargs
     )

dash_entrypoints/multi_page/entrypoint.py

@@ -13,7 +13,6 @@
 from dash_entrypoints.elements.datatable import add_table
 from dash_entrypoints.elements.datatable import make_dates_list
 from dash_entrypoints.elements.datatable import make_times_list_24h
-from dash_entrypoints.misc import add_random_id
 
 
 def layout():
@@ -32,27 +31,29 @@ def layout():
             "procedure_time_start": pd.to_datetime(dt).round("5min").strftime("%H:%M"),
         }
     )
-    dropdown_options_surgery = {
+    dropdown_options_procedures = {
         "subject_id": subject_ids,
         "procedure_date": dates,
         "procedure_time_start": times,
         "procedure_time_end": times,
     }
 
     # LAYOUT
-    submit_btn = add_random_id("submit_btn")
-    dummy_div = add_random_id("hidden_div")
+    from uuid import uuid4
 
+    submit_btn = "submit--23r98y98feondlkn1oi"
+    dummy_div = "dummy--as245923ur923hr913"
+
+    table_layout = add_table(
+        table_name=table_1,
+        df=df_for_table,
+        dropdown_options=dropdown_options_procedures,
+        table_expandable=False,
+    )
     layout = html.Div(
         [
-            add_table(
-                table_name=table_1,
-                df=df_for_table,
-                dropdown_options=dropdown_options_surgery,
-                table_expandable=False,
-            ),
+            table_layout,
             # NOTE: add other tables here
-            html.Hr(),
             html.Button("Submit!", id=submit_btn),
             html.Div(id=dummy_div, hidden=True),
             html.Br(),
@@ -62,13 +63,11 @@ def layout():
     table_names = [
         table_1,
     ]
-    state_inputs = [Input(submit_btn, "n_clicks")] + [
-        State(t, "data") for t in table_names
-    ]
+    state_inputs = [State(t, "data") for t in table_names]
 
     @callback(
-        [Output(dummy_div, "hidden")],
-        state_inputs,
+        Output(dummy_div, "hidden"),
+        [Input(submit_btn, "n_clicks")] + state_inputs,
     )
     def save_entry(n_clicks, *args):
         if n_clicks is None:
@@ -86,6 +85,6 @@ def save_entry(n_clicks, *args):
             f.write(yaml.dump(input_data))
             print(f"\nWritten to: {save_path}\n")
 
-        return [True]
+        return  # [True]
 
     return layout

dash_entrypoints/views/add__example_add_table.py

@@ -1,21 +1,34 @@
-import argparse
-import importlib
-import socket
 from pathlib import Path
 
-import dash
-import dash_labs as dl
 import numpy as np
 from dash import callback
-from dash import Dash
-from dash import dcc
 from dash import html
 from dash import Input
 from dash import Output
 from dash import State
+from dash.exceptions import PreventUpdate
+
+from dash_entrypoints.misc import get_callback_context
 
 
 def layout():
     """Example page layout. Shows a random number as proof of reload on every browser page refresh."""
-    layout = html.Div([html.H1(f"{__name__}, {np.random.randint(100)}")])
+
+    id_hidden_div = "--".join([__name__, "hidden-div"]).replace(".", "")
+    id_button = "--".join([__name__, "submit-button"]).replace(".", "")
+    layout = html.Div(
+        [
+            html.H1(f"{__name__}, {np.random.randint(100)}"),
+            html.Button("X!", id=id_button),
+            html.Div(id=id_hidden_div, hidden=True),
+        ]
+    )
+
+    @callback(Output(id_hidden_div, "hidden"), Input(id_button, "n_clicks"))
+    def x(n_clicks, *args):
+        if n_clicks is None:
+            raise PreventUpdate
+        print("CALLBACK:", {"n_clicks": n_clicks}, get_callback_context())
+        return
+
     return layout

dash_entrypoints/views/show__example_page.py

@@ -0,0 +1,12 @@
+from dash_entrypoints import run_entrypoint
+
+# from dash_entrypoints.misc import get_local_ip_address
+# from dash_entrypoints.multi_page.entrypoint import DEFAULT_VIEWS_MODULE
+
+run_entrypoint(
+    # app_name="TEST-APP",
+    # ip_address=get_local_ip_address(),
+    # views_module=DEFAULT_VIEWS_MODULE,
+    # port=9050,
+    debug=True,
+)