Move to Dash v2.0 (#402)

* Move to Dash v2.0

* Bump version to 2.0.0

* Update readme

* Add sandbox attributes to boostrap template

* Record environment used to develop v2.0.0 of dpd

* Fix development status

Co-authored-by: Mark Gibbs <mark@gibbs.consulting>

Author: delsim

README.md

@@ -90,8 +90,7 @@ Taking a very simple example inspired by the excellent [getting started](https:/
 
 ```python
 import dash
-import dash_core_components as dcc
-import dash_html_components as html
+from dash import dcc, html
 
 from django_plotly_dash import DjangoDash
 

demo/demo/assets/image_two.png

@@ -7,8 +7,7 @@
 #pylint: disable=no-member
 
 import dash
-import dash_core_components as dcc
-import dash_html_components as html
+from dash import dcc, html
 import plotly.graph_objs as go
 #import dpd_components as dpd
 import numpy as np

demo/demo/dash_apps.py

@@ -34,9 +34,8 @@
 from django.core.cache import cache
 
 import dash
+from dash import dcc, html
 from dash.dependencies import MATCH, ALL
-import dash_core_components as dcc
-import dash_html_components as html
 
 import plotly.graph_objs as go
 

demo/demo/plotly_apps.py

@@ -196,10 +196,8 @@
 # be handled by the Django staticfiles infrastructure
 
 PLOTLY_COMPONENTS = [
-    'dash_core_components',
-    'dash_html_components',
+
     'dash_bootstrap_components',
-    'dash_renderer',
     'dpd_components',
     'dpd_static_support',
 ]

demo/demo/settings.py

@@ -18,6 +18,7 @@ pytest-cov
 python-coveralls
 pytz
 redis
+setuptools
 sphinx
 sphinx-autobuild
 sphinx_rtd_theme

dev_requirements.txt

@@ -29,3 +29,7 @@
 from .version import __version__
 
 from .dash_wrapper import DjangoDash
+
+# Monkeypatching
+
+import django_plotly_dash._callback

django_plotly_dash/__init__.py

@@ -0,0 +1,135 @@
+#
+# Monkey patching of register_callback
+#
+
+import dash._callback
+
+from dash._callback import (handle_grouped_callback_args,
+                            insert_callback,
+                            NoUpdate,
+                            )
+import collections
+from functools import wraps
+
+from dash.dependencies import (
+    handle_callback_args,
+    handle_grouped_callback_args,
+    Output,
+)
+from dash.exceptions import PreventUpdate
+
+from dash._grouping import (
+    flatten_grouping,
+    make_grouping_by_index,
+    grouping_len,
+)
+from dash._utils import (
+    create_callback_id,
+    stringify_id,
+    to_json,
+)
+
+from dash import _validate
+
+
+def register_callback(
+    callback_list, callback_map, config_prevent_initial_callbacks, *_args, **_kwargs
+):
+    (
+        output,
+        flat_inputs,
+        flat_state,
+        inputs_state_indices,
+        prevent_initial_call,
+    ) = handle_grouped_callback_args(_args, _kwargs)
+    if isinstance(output, Output):
+        # Insert callback with scalar (non-multi) Output
+        insert_output = output
+        multi = False
+    else:
+        # Insert callback as multi Output
+        insert_output = flatten_grouping(output)
+        multi = True
+
+    output_indices = make_grouping_by_index(output, list(range(grouping_len(output))))
+    callback_id = insert_callback(
+        callback_list,
+        callback_map,
+        config_prevent_initial_callbacks,
+        insert_output,
+        output_indices,
+        flat_inputs,
+        flat_state,
+        inputs_state_indices,
+        prevent_initial_call,
+    )
+
+    # pylint: disable=too-many-locals
+    def wrap_func(func):
+        @wraps(func)
+        def add_context(*args, **kwargs):
+            output_spec = kwargs.pop("outputs_list")
+            _validate.validate_output_spec(insert_output, output_spec, Output)
+
+            func_args, func_kwargs = _validate.validate_and_group_input_args(
+                args, inputs_state_indices
+            )
+
+            func_kwargs = {**func_kwargs,
+                           **kwargs}
+
+            # don't touch the comment on the next line - used by debugger
+            output_value = func(*func_args, **func_kwargs)  # %% callback invoked %%
+
+            if isinstance(output_value, NoUpdate):
+                raise PreventUpdate
+
+            if not multi:
+                output_value, output_spec = [output_value], [output_spec]
+                flat_output_values = output_value
+            else:
+                if isinstance(output_value, (list, tuple)):
+                    # For multi-output, allow top-level collection to be
+                    # list or tuple
+                    output_value = list(output_value)
+
+                # Flatten grouping and validate grouping structure
+                flat_output_values = flatten_grouping(output_value, output)
+
+            _validate.validate_multi_return(
+                output_spec, flat_output_values, callback_id
+            )
+
+            component_ids = collections.defaultdict(dict)
+            has_update = False
+            for val, spec in zip(flat_output_values, output_spec):
+                if isinstance(val, NoUpdate):
+                    continue
+                for vali, speci in (
+                    zip(val, spec) if isinstance(spec, list) else [[val, spec]]
+                ):
+                    if not isinstance(vali, NoUpdate):
+                        has_update = True
+                        id_str = stringify_id(speci["id"])
+                        component_ids[id_str][speci["property"]] = vali
+
+            if not has_update:
+                raise PreventUpdate
+
+            response = {"response": component_ids, "multi": True}
+
+            try:
+                jsonResponse = to_json(response)
+            except TypeError:
+                _validate.fail_callback_output(output_value, output)
+
+            return jsonResponse
+
+        callback_map[callback_id]["callback"] = add_context
+
+        return func
+
+    return wrap_func
+
+
+dash._callback.register_callback = register_callback

django_plotly_dash/_callback.py

@@ -56,10 +56,20 @@ def __init__(self):
         except:
             components = []
 
+        built_ins = [('dash', ['dcc', 'html', 'dash_table', 'deps', 'dash-renderer', 'dash-renderer/build']), ]
+
         for component_name in components:
 
-            module = importlib.import_module(component_name)
-            path_directory = os.path.dirname(module.__file__)
+            split_name = component_name.split('/')
+            try:
+                module_name = ".".join(split_name)
+                module = importlib.import_module(module_name)
+                path_directory = os.path.dirname(module.__file__)
+            except:
+                module_name = ".".join(split_name[:-1])
+                module = importlib.import_module(module_name)
+                path_directory = os.path.join(os.path.dirname(module.__file__),
+                                              split_name[-1])
 
             root = path_directory
             storage = FileSystemStorage(location=root)
@@ -76,6 +86,29 @@ def __init__(self):
             self.storages[component_name] = storage
             self.components[path] = component_name
 
+        for module_name, component_list in built_ins:
+
+            module = importlib.import_module(module_name)
+
+            for specific_component in component_list:
+
+                path_directory = os.path.join(os.path.dirname(module.__file__),
+                                              specific_component)
+
+                root = path_directory
+                component_name = f"{module_name}/{specific_component}"
+                path = f"dash/component/{component_name}"
+
+                if path not in self.components:
+
+                    storage = FileSystemStorage(location=root)
+                    storage.prefix = path
+
+                    self.locations.append(component_name)
+
+                    self.storages[component_name] = storage
+                    self.components[path] = component_name
+
         super().__init__()
 
     def find(self, path, all=False):

django_plotly_dash/finders.py

@@ -1,3 +1,3 @@
 <div class="embed-responsive embed-responsive-{{aspect}}">
-  <iframe src="{{app.base_url}}" class="embed-responsive-item"></iframe>
+  <iframe src="{{app.base_url}}" class="embed-responsive-item" sandbox="allow-downloads allow-scripts allow-same-origin"></iframe>
 </div>

django_plotly_dash/templates/django_plotly_dash/plotly_app_bootstrap.html

@@ -349,7 +349,7 @@ def test_updating(client):
                                                            'value':'medium'},
                                                          ]}), content_type="application/json")
 
-        assert response.content == b'{"response": {"output-size": {"children": "The chosen T-shirt is a medium blue one."}}, "multi": true}'
+        assert response.content == b'{"response":{"output-size":{"children":"The chosen T-shirt is a medium blue one."}},"multi":true}'
         assert response.status_code == 200
 
 
@@ -489,7 +489,7 @@ def test_injection_updating(client):
                                                            'value':'TestIt'},
                                                          ]}), content_type="application/json")
 
-        rStart = b'{"response": {"test-output-div": {"children": [{"props": {"id": "line-area-graph2"'
+        rStart = b'{"response":{"test-output-div":{"children":[{"props":{"id":"line-area-graph2"'
 
         assert response.content.startswith(rStart)
         assert response.status_code == 200
@@ -501,7 +501,7 @@ def test_injection_updating(client):
                                                            'value':'TestIt'},
                                                          ]}), content_type="application/json")
 
-        rStart = b'{"response": {"test-output-div": {"children": [{"props": {"id": "line-area-graph2"'
+        rStart = b'{"response":{"test-output-div":{"children":[{"props":{"id":"line-area-graph2"'
 
         assert response.content.startswith(rStart)
         assert response.status_code == 200
@@ -530,7 +530,7 @@ def test_injection_updating(client):
                                                            'value':'TestIt'},
                                                          ]}), content_type="application/json")
 
-        rStart = b'{"response": {"test-output-div3": {"children": [{"props": {"id": "line-area-graph2"'
+        rStart = b'{"response":{"test-output-div3":{"children":[{"props":{"id":"line-area-graph2"'
 
         assert response.content.startswith(rStart)
         assert response.status_code == 200
@@ -551,7 +551,7 @@ def test_injection_updating(client):
                                                             'property':'value',
                                                             'value':'TestIt'},
                                                           ]}), content_type="application/json")
-        rStart = b'{"response": {"test-output-div2": {"children": [{"props": {"children": ["You have '
+        rStart = b'{"response":{"test-output-div2":{"children":[{"props":{"children":["You have '
 
         assert response.content.startswith(rStart)
         assert response.status_code == 200

django_plotly_dash/tests.py

@@ -9,7 +9,7 @@
 from typing import Union
 
 import dash
-import dash_html_components as html
+from dash import html
 import flask
 from dash import Dash, no_update
 from dash.dependencies import MATCH, ALL, ALLSMALLER, Input, Output, State

django_plotly_dash/tests_dash_contract.py

@@ -27,7 +27,7 @@
 from django.urls import path
 from django.views.decorators.csrf import csrf_exempt
 
-from .views import routes, layout, dependencies, update, main_view, component_suites, component_component_suites, asset_redirection
+from .views import routes, layout, dependencies, update, main_view, component_suites, component_component_suites, asset_redirection, component_suites_build
 from .views import add_stateless_apps
 
 from .app_name import app_name, main_view_label
@@ -50,6 +50,8 @@
                                                       ('_dash-update-component', csrf_exempt(update), 'update-component', '', ),
                                                       ('', main_view, main_view_label, '', ),
                                                       ('_dash-component-suites', component_suites, 'component-suites', '/<slug:component>/<resource>', ),
+                                                      ('_dash-component-suites', component_suites, 'component-suites', '/<slug:component>/<slug:cpe2>/<resource>', ),
+                                                      ('_dash-component-suites', component_suites_build, 'component-suites', '/<slug:component>/<slug:cpe2>/build/<resource>', ),
                                                       ('_dash-component-suites', component_component_suites, 'component-component-suites', '/<slug:component>/_components/<resource>', ),
                                                       ('assets', asset_redirection, 'asset-redirect', '/<path:path>', ),
                                                      ]:

django_plotly_dash/urls.py

@@ -23,4 +23,4 @@
 
 '''
 
-__version__ = "1.7.1"
+__version__ = "2.0.0"

django_plotly_dash/version.py

@@ -123,15 +123,28 @@ def component_component_suites(request, resource=None, component=None, **kwargs)
                             extra_element="_components/",
                             **kwargs)
 
-def component_suites(request, resource=None, component=None, extra_element="", **kwargs):
+
+def component_suites_build(request, resource=None, component=None, extra_element="", cpe2=None, **kwargs):
     'Return part of a client-side component, served locally for some reason'
+    return component_suites(request,
+                            resource=resource,
+                            component=component,
+                            extra_element=extra_element,
+                            cpe2=f"{cpe2}/build",
+                            **kwargs)
+
+
+def component_suites(request, resource=None, component=None, extra_element="", cpe2=None, **kwargs):
+    'Return part of a client-side component, served locally for some reason'
+
+    extra_path_part = f"{cpe2}/" if cpe2 else ""
 
     get_params = request.GET.urlencode()
     if get_params and False:
-        redone_url = static_path("dash/component/%s/%s%s?%s" %(component, extra_element, resource, get_params))
+        redone_url = static_path("dash/component/%s/%s%s%s?%s" %(component, extra_path_part, extra_element, resource, get_params))
     else:
         resource, _fingerprint = check_fingerprint(resource)
-        redone_url = static_path("dash/component/%s/%s%s" % (component, extra_element, resource))
+        redone_url = static_path("dash/component/%s/%s%s%s" % (component, extra_path_part, extra_element, resource))
 
     return HttpResponseRedirect(redirect_to=redone_url)
 

django_plotly_dash/views.py

@@ -65,10 +65,7 @@ and also providing a list of components used
 
   PLOTLY_COMPONENTS = [
 
-      # Common components
-      'dash_core_components',
-      'dash_html_components',
-      'dash_renderer',
+      # Common components (ie within dash itself) are automatically added
 
       # django-plotly-dash components
       'dpd_components',
@@ -80,7 +77,9 @@ and also providing a list of components used
   ]
 
 This list should be extended with any additional components that the applications
-use, where the components have files that have to be served locally.
+use, where the components have files that have to be served locally. The components that
+are part of the core ``dash`` package are automatically included and do not need to be
+provided in this list.
 
 Furthermore, middleware should be added for redirection of external assets from
 underlying packages, such as ``dash-bootstrap-components``. With the standard

docs/configuration.rst

@@ -18,8 +18,7 @@ For example, the ``plotly_apps.py`` example contains this dash application:
 .. code-block:: python
 
   import dash
-  import dash_core_components as dcc
-  import dash_html_components as html
+  from dash import dcc, html
 
   from django_plotly_dash import DjangoDash