Serve locally (#133)

* Local serving of assets

* Demo nine to show and test use of local assets. 

* Move to serving dash components assets through staticfiles, and steps towards serving other files locally through url rewriting

* Constrain dash component versions

* Add static support to dev environment for demo

* Increased test coverage

Author: delsim

.gitignore

@@ -54,7 +54,7 @@ coverage.xml
 *.log
 local_settings.py
 */db.sqlite3
-demo/static/*
+demo/staticfiles/*
 
 # Flask stuff:
 instance/

demo/demo/assets/image_one.png

@@ -84,6 +84,7 @@ def callback_size(dropdown_color, dropdown_size):
 
 a2 = DjangoDash("Ex2",
                 serve_locally=True)
+
 a2.layout = html.Div([
     dcc.RadioItems(id="dropdown-one",
                    options=[{'label':i, 'value':j} for i, j in [("O2", "Oxygen"),
@@ -186,8 +187,7 @@ def callback_liveIn_button_press(red_clicks, blue_clicks, green_clicks,
                                                                                              change_col,
                                                                                              datetime.fromtimestamp(0.001*timestamp))
 
-liveOut = DjangoDash("LiveOutput",
-                    )#serve_locally=True)
+liveOut = DjangoDash("LiveOutput")
 
 def _get_cache_key(state_uid):
     return "demo-liveout-s6-%s" % state_uid
@@ -309,3 +309,10 @@ def callback_show_timeseries(internal_state_string, state_uid, **kwargs):
     return {'data':traces,
             #'layout': go.Layout
            }
+
+localState = DjangoDash("LocalState",
+                        serve_locally=True)
+
+localState.layout = html.Div([html.Img(src=localState.get_asset_url('image_one.png')),
+                              html.Img(src='assets/image_two.png'),
+                              ])

demo/demo/plotly_apps.py

@@ -42,17 +42,22 @@
     'bootstrap4',
 
     'django_plotly_dash.apps.DjangoPlotlyDashConfig',
+    'dpd_static_support',
 ]
 
 MIDDLEWARE = [
     'django.middleware.security.SecurityMiddleware',
+
+    'whitenoise.middleware.WhiteNoiseMiddleware',
+
     'django.contrib.sessions.middleware.SessionMiddleware',
     'django.middleware.common.CommonMiddleware',
     'django.middleware.csrf.CsrfViewMiddleware',
     'django.contrib.auth.middleware.AuthenticationMiddleware',
     'django.contrib.messages.middleware.MessageMiddleware',
 
     'django_plotly_dash.middleware.BaseMiddleware',
+    'django_plotly_dash.middleware.ExternalRedirectionMiddleware',
 
     'django.middleware.clickjacking.XFrameOptionsMiddleware',
 ]
@@ -134,13 +139,15 @@
     "view_decorator" : None, # Specify a function to be used to wrap each of the dpd view functions
 
     "cache_arguments" : True, # True for cache, False for session-based argument propagation
+
+    #"serve_locally" : True, # True to serve assets locally, False to use their unadulterated urls (eg a CDN)
     }
 
 # Static files (CSS, JavaScript, Images)
 # https://docs.djangoproject.com/en/2.0/howto/static-files/
 
 STATIC_URL = '/static/'
-STATIC_ROOT = os.path.join(BASE_DIR, 'static')
+STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
 
 STATICFILES_DIRS = [
     os.path.join(BASE_DIR, 'demo', 'static'),
@@ -178,6 +185,7 @@
 
     'django_plotly_dash.finders.DashAssetFinder',
     'django_plotly_dash.finders.DashComponentFinder',
+    'django_plotly_dash.finders.DashAppDirectoryFinder',
 ]
 
 # Plotly components containing static content that should
@@ -189,4 +197,5 @@
     'dash_bootstrap_components',
     'dash_renderer',
     'dpd_components',
+    'dpd_static_support',
 ]

demo/demo/settings.py

@@ -0,0 +1,33 @@
+{%extends "base.html"%}
+{%load plotly_dash%}
+
+{%block title%}Demo Nine - Serving local assets{%endblock%}
+
+{%block content%}
+<h1>Serving Local Assets</h1>
+<p>
+  This example demonstrates serving local assets as part of a Dash app.
+</p>
+<p>
+  The extra files are specified using the standard plotly dash approach, and are
+  made available through the standard Django staticfiles infrastructure. This means that
+  they will be served the same way as other static files through a reverse proxy.
+</p>
+<p></p>
+<div class="card bg-light border-dark">
+  <div class="card-body">
+    <p><span>{</span>% load plotly_dash %}</p>
+    <p>&lt;div class="<span>{</span>% plotly_class name="LocalState"%}">
+    <p class="ml-3"><span>{</span>% plotly_app name="LocalState" ratio=0.3 %}</p>
+    <p>&lt;\div>
+  </div>
+</div>
+<p></p>
+<div class="card border-dark">
+  <div class="card-body">
+    <div class="{%plotly_class name="LocalState"%}">
+      {%plotly_app name="LocalState" ratio=0.3 %}
+    </div>
+  </div>
+</div>
+{%endblock%}

demo/demo/templates/demo_nine.html

@@ -15,5 +15,6 @@ <h1>Demonstration Application</h1>
     <li><a class="btn btn-primary btnspace" href="{%url "demo-six"%}">Demo Six</a> - simple html injection example</li>
     <li><a class="btn btn-primary btnspace" href="{%url "demo-seven"%}">Demo Seven</a> - dash-bootstrap-components example</li>
     <li><a class="btn btn-primary btnspace" href="{%url "demo-eight"%}">Demo Eight</a> - Django session state example</li>
+    <li><a class="btn btn-primary btnspace" href="{%url "demo-nine"%}">Demo Nine</a> - local serving of assets</li>
   </ul>
 {%endblock%}

demo/demo/templates/index.html

@@ -44,6 +44,7 @@
     url('^demo-six', dash_example_1_view, name="demo-six"),
     url('^demo-seven', TemplateView.as_view(template_name='demo_seven.html'), name="demo-seven"),
     url('^demo-eight', session_state_view, {'template_name':'demo_eight.html'}, name="demo-eight"),
+    url('^demo-nine', TemplateView.as_view(template_name='demo_nine.html'), name="demo-nine"),
     url('^admin/', admin.site.urls),
     url('^django_plotly_dash/', include('django_plotly_dash.urls')),
 

demo/demo/urls.py

@@ -1,9 +1,10 @@
 channels>=2.0
 channels-redis
 daphne
-Django>=2.0
+Django>=2.0,<2.2
 django-bootstrap4
 django-redis
+dpd-static-support
 grip
 pandas
 pylint
@@ -16,4 +17,5 @@ redis
 sphinx
 sphinx-autobuild
 twine
+whitenoise
 

dev_requirements.txt

@@ -39,6 +39,8 @@
 from .app_name import app_name, main_view_label
 from .middleware import EmbeddedHolder
 
+from .util import static_asset_path
+from .util import serve_locally as serve_locally_setting
 
 uid_counter = 0
 
@@ -84,11 +86,12 @@ class DjangoDash:
     To use, construct an instance of DjangoDash() in place of a Dash() one.
     '''
     #pylint: disable=too-many-instance-attributes
-    def __init__(self, name=None, serve_locally=False,
+    def __init__(self, name=None, serve_locally=None,
                  expanded_callbacks=False,
                  add_bootstrap_links=False,
                  suppress_callback_exceptions=False,
                  **kwargs): # pylint: disable=unused-argument, too-many-arguments
+
         if name is None:
             global uid_counter # pylint: disable=global-statement
             uid_counter += 1
@@ -104,19 +107,40 @@ def __init__(self, name=None, serve_locally=False,
         add_usable_app(self._uid,
                        self)
 
+        if serve_locally is None:
+            self._serve_locally = serve_locally_setting()
+        else:
+            self._serve_locally = serve_locally
+
         self._expanded_callbacks = expanded_callbacks
-        self._serve_locally = serve_locally
         self._suppress_callback_exceptions = suppress_callback_exceptions
 
         if add_bootstrap_links:
             from bootstrap4.bootstrap import css_url
             bootstrap_source = css_url()['href']
-            self.css.append_script({'external_url':[bootstrap_source,]})
+
+            if self._serve_locally:
+                # Ensure package is loaded; if not present then pip install dpd-static-support
+                import dpd_static_support
+                hard_coded_package_name = "dpd_static_support"
+                base_file_name = bootstrap_source.split('/')[-1]
+
+                self.css.append_script({'external_url':        [bootstrap_source,],
+                                        'relative_package_path' : base_file_name,
+                                        'namespace':              hard_coded_package_name,
+                                        })
+            else:
+                self.css.append_script({'external_url':[bootstrap_source,],})
 
         # Remember some caller info for static files
         caller_frame = inspect.stack()[1]
         self.caller_module = inspect.getmodule(caller_frame[0])
         self.caller_module_location = inspect.getfile(self.caller_module)
+        self.assets_folder = "assets"
+
+    def get_asset_static_url(self, asset_path):
+        module_name = self.caller_module.__name__
+        return static_asset_path(module_name, asset_path)
 
     def as_dash_instance(self, cache_id=None):
         '''
@@ -205,6 +229,16 @@ def expanded_callback(self, output, inputs=[], state=[], events=[]): # pylint: d
         self._expanded_callbacks = True
         return self.callback(output, inputs, state, events)
 
+    def get_asset_url(self, asset_name):
+        '''URL of an asset associated with this component
+
+        Use a placeholder and insert later
+        '''
+
+        return "assets/" + str(asset_name)
+
+        #return self.as_dash_instance().get_asset_url(asset_name)
+
 class PseudoFlask:
     'Dummy implementation of a Flask instance, providing stub functionality'
     def __init__(self):
@@ -234,7 +268,8 @@ class WrappedDash(Dash):
     # pylint: disable=too-many-arguments, too-many-instance-attributes
     def __init__(self,
                  base_pathname=None, replacements=None, ndid=None,
-                 expanded_callbacks=False, serve_locally=False, **kwargs):
+                 expanded_callbacks=False, serve_locally=False,
+                 **kwargs):
 
         self._uid = ndid
 
@@ -245,7 +280,8 @@ def __init__(self,
         kwargs['url_base_pathname'] = self._base_pathname
         kwargs['server'] = self._notflask
 
-        super(WrappedDash, self).__init__(**kwargs)
+        super(WrappedDash, self).__init__(__name__,
+                                          **kwargs)
 
         self.css.config.serve_locally = serve_locally
         self.scripts.config.serve_locally = serve_locally
@@ -507,6 +543,8 @@ def index(self, *args, **kwargs):  # pylint: disable=unused-argument
 
     def interpolate_index(self, **kwargs): #pylint: disable=arguments-differ
 
+        print("IN INTERPOLATE INDEX")
+
         if not self._return_embedded:
             resp = super(WrappedDash, self).interpolate_index(**kwargs)
             return resp