First cut of direct html insertion of a dash app using a django template

Mark Gibbs · Mark Gibbs · commit 814c4a1fd9fe · 2018-08-29T08:31:32.000-07:00
diff --git a/demo/demo/settings.py b/demo/demo/settings.py
@@ -51,6 +51,9 @@
     'django.middleware.csrf.CsrfViewMiddleware',
     'django.contrib.auth.middleware.AuthenticationMiddleware',
     'django.contrib.messages.middleware.MessageMiddleware',
+
+    'django_plotly_dash.middleware.BaseMiddleware',
+
     'django.middleware.clickjacking.XFrameOptionsMiddleware',
 ]
 
diff --git a/demo/demo/templates/base.html b/demo/demo/templates/base.html
@@ -10,6 +10,7 @@
    {%block app_header_css%}
    <link rel="stylesheet" type="text/css" href="{%static "demo/demo.css"%}"></link>
    {%endblock%}
+   {%plotly_header%}
    <title>Django Plotly Dash Examples - {%block title%}{%endblock%}</title>
  </head>
  <body>
@@ -39,6 +40,7 @@
    </main>
    {%block footer%}
    {%endblock%}
-</body>
-{%block post_body%}{%endblock%}
+ </body>
+ {%block post_body%}{%endblock%}
+ {%plotly_footer%}
 </html>
diff --git a/django_plotly_dash/dash_wrapper.py b/django_plotly_dash/dash_wrapper.py
@@ -237,6 +237,8 @@ def __init__(self,
             self._replacements = dict()
         self._use_dash_layout = len(self._replacements) < 1
 
+        self._return_embedded = False
+
     def use_dash_dispatch(self):
         'Indicate if dispatch is using underlying dash code or the wrapped code'
         return self._dash_dispatch
@@ -457,8 +459,44 @@ def extra_html_properties(self, prefix=None, postfix=None, template_type=None):
                                                                                                          'prefix':prefix,
                                                                                                         }
 
+    def index(self, *args, **kwargs):  # pylint: disable=unused-argument
+        scripts = self._generate_scripts_html()
+        css = self._generate_css_dist_html()
+        config = self._generate_config_html()
+        metas = self._generate_meta_html()
+        title = getattr(self, 'title', 'Dash')
+        if self._favicon:
+            favicon = '<link rel="icon" type="image/x-icon" href="{}">'.format(
+                flask.url_for('assets.static', filename=self._favicon))
+        else:
+            favicon = ''
+
+            _app_entry = '''
+<div id="react-entry-point">
+  <div class="_dash-loading">
+    Loading Django-Plotly-Dash app
+  </div>
+</div>
+'''
+        index = self.interpolate_index(
+            metas=metas, title=title, css=css, config=config,
+            scripts=scripts, app_entry=_app_entry, favicon=favicon)
+
+        return index
+
     def interpolate_index(self, **kwargs):
-        resp = super(WrappedDash, self).interpolate_index(**kwargs)
 
-        #print(resp)
-        return resp
+        if not self._return_embedded:
+            resp = super(WrappedDash, self).interpolate_index(**kwargs)
+            return resp
+
+        self._return_embedded.add_css(kwargs['css'])
+        self._return_embedded.add_config(kwargs['config'])
+        self._return_embedded.add_scripts(kwargs['scripts'])
+
+        return kwargs['app_entry']
+
+    def set_embedded(self, embedded_holder=None):
+        self._return_embedded = embedded_holder if embedded_holder else EmbeddedHolder()
+    def exit_embedded(self):
+        self._return_embedded = False
diff --git a/django_plotly_dash/middleware.py b/django_plotly_dash/middleware.py
@@ -0,0 +1,61 @@
+'''
+Django-plotly-dash middleware
+
+This middleware enables the collection of items from templates for inclusion in the header and footer
+'''
+
+class EmbeddedHolder(object):
+    def __init__(self):
+        self.css = ""
+        self.config = ""
+        self.scripts = ""
+    def add_css(self, css):
+        if css:
+            self.css = css
+    def add_config(self, config):
+        if config:
+            self.config = config
+    def add_scripts(self, scripts):
+        if scripts:
+            self.scripts = scripts
+
+class ContentCollector:
+    def __init__(self):
+        self.header_placeholder = "DJANGO_PLOTLY_DASH_HEADER_PLACEHOLDER"
+        self.footer_placeholder = "DJANGO_PLOTLY_DASH_FOOTER_PLACEHOLDER"
+
+        self.embedded_holder = EmbeddedHolder()
+        self._encoding = "utf-8"
+
+    def adjust_response(self, response):
+
+        c1 = self._replace(response.content,
+                           self.header_placeholder,
+                           self.embedded_holder.css)
+
+        response.content = self._replace(c1,
+                                         self.footer_placeholder,
+                                         "\n".join([self.embedded_holder.config,
+                                                    self.embedded_holder.scripts]))
+
+        return response
+
+    def _replace(self, content, placeholder, substitution):
+        return content.replace(self._encode(placeholder),
+                               self._encode(substitution if substitution else ""))
+
+    def _encode(self, string):
+        return string.encode(self._encoding)
+
+class BaseMiddleware:
+
+    def __init__(self, get_response):
+        self.get_response = get_response
+
+    def __call__(self, request):
+
+        request.dpd_content_handler = ContentCollector()
+        response = self.get_response(request)
+        response = request.dpd_content_handler.adjust_response(response)
+
+        return response
diff --git a/django_plotly_dash/templates/django_plotly_dash/plotly_direct.html b/django_plotly_dash/templates/django_plotly_dash/plotly_direct.html
@@ -0,0 +1,3 @@
+<div class="django-plotly-dash django-plotly-dash-direct">
+  {%autoescape off%}{{resp}}{%endautoescape%}
+</div>
diff --git a/django_plotly_dash/templatetags/plotly_dash.py b/django_plotly_dash/templatetags/plotly_dash.py
@@ -36,6 +36,21 @@
 
 ws_default_url = "/%s" % pipe_ws_endpoint_name()
 
+def _locate_daapp(name, slug, da, cache_id=None):
+
+    app = None
+
+    if name is not None:
+        da, app = DashApp.locate_item(name, stateless=True, cache_id=cache_id)
+
+    if slug is not None:
+        da, app = DashApp.locate_item(slug, stateless=False, cache_id=cache_id)
+
+    if not app:
+        app = da.as_dash_instance()
+
+    return da, app
+
 @register.inclusion_tag("django_plotly_dash/plotly_app.html", takes_context=True)
 def plotly_app(context, name=None, slug=None, da=None, ratio=0.1, use_frameborder=False, initial_arguments=None):
     'Insert a dash application using a html iframe'
@@ -57,8 +72,6 @@ def plotly_app(context, name=None, slug=None, da=None, ratio=0.1, use_frameborde
     height: 100%;
     """
 
-    app = None
-
     if initial_arguments:
         # Generate a cache id
         cache_id = "dpd-initial-args-%s" % str(uuid.uuid4()).replace('-', '')
@@ -67,14 +80,35 @@ def plotly_app(context, name=None, slug=None, da=None, ratio=0.1, use_frameborde
     else:
         cache_id = None
 
-    if name is not None:
-        da, app = DashApp.locate_item(name, stateless=True, cache_id=cache_id)
+    da, app = _locate_daapp(name, slug, da, cache_id=cache_id)
 
-    if slug is not None:
-        da, app = DashApp.locate_item(slug, stateless=False, cache_id=cache_id)
+    return locals()
 
-    if not app:
-        app = da.as_dash_instance(cache_id=cache_id)
+@register.simple_tag(takes_context=True)
+def plotly_header(context):
+    'Insert placeholder for django-plotly-dash header content'
+    return context.request.dpd_content_handler.header_placeholder
+
+@register.simple_tag(takes_context=True)
+def plotly_footer(context):
+    'Insert placeholder for django-plotly-dash footer content'
+    return context.request.dpd_content_handler.footer_placeholder
+
+@register.inclusion_tag("django_plotly_dash/plotly_direct.html", takes_context=True)
+def plotly_direct(context, name=None, slug=None, da=None):
+    'Direct insertion of a Dash app'
+
+    da, app = _locate_daapp(name, slug, da)
+
+    view_func = app.locate_endpoint_function()
+
+    # Load embedded holder inserted by middleware
+    eh = context.request.dpd_content_handler.embedded_holder
+    app.set_embedded(eh)
+    try:
+        resp = view_func()
+    finally:
+        app.exit_embedded()
 
     return locals()
 
@@ -87,14 +121,8 @@ def plotly_message_pipe(context, url=None):
 @register.simple_tag()
 def plotly_app_identifier(name=None, slug=None, da=None, postfix=None):
     'Return a slug-friendly identifier'
-    if name is not None:
-        da, app = DashApp.locate_item(name, stateless=True)
-
-    if slug is not None:
-        da, app = DashApp.locate_item(slug, stateless=False)
 
-    if not app:
-        app = da.as_dash_instance()
+    da, app = _locate_daapp(name, slug, da)
 
     slugified_id = app.slugified_id()
 
@@ -106,14 +134,7 @@ def plotly_app_identifier(name=None, slug=None, da=None, postfix=None):
 def plotly_class(name=None, slug=None, da=None, prefix=None, postfix=None, template_type=None):
     'Return a string of space-separated class names'
 
-    if name is not None:
-        da, app = DashApp.locate_item(name, stateless=True)
-
-    if slug is not None:
-        da, app = DashApp.locate_item(slug, stateless=False)
-
-    if not app:
-        app = da.as_dash_instance()
+    da, app = _locate_daapp(name, slug, da)
 
     return app.extra_html_properties(prefix=prefix,
                                      postfix=postfix,

Original file line number	Diff line number	Diff line change
`@@ -51,6 +51,9 @@`
`51`	`51`	`'django.middleware.csrf.CsrfViewMiddleware',`
`52`	`52`	`'django.contrib.auth.middleware.AuthenticationMiddleware',`
`53`	`53`	`'django.contrib.messages.middleware.MessageMiddleware',`
	`54`	`+`
	`55`	`+ 'django_plotly_dash.middleware.BaseMiddleware',`
	`56`	`+`
`54`	`57`	`'django.middleware.clickjacking.XFrameOptionsMiddleware',`
`55`	`58`	`]`
`56`	`59`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+<div class="django-plotly-dash django-plotly-dash-direct">`
	`2`	`+ {%autoescape off%}{{resp}}{%endautoescape%}`
	`3`	`+</div>`