OpenSourceEcon / oselab

Open Source Macroeconomics Lab Webpage built in Flask
9 stars 7 forks source link

Adding static Bokeh (JavaScript) plot to gallery #63

Closed rickecon closed 4 years ago

rickecon commented 4 years ago

@asmockler and @hayleefay. Let me know if you have any suggestions. I am trying to add this static visualization of the DJIA over the past 15 recessions to the OSE Lab visualizations gallery. I added the Bokeh HTML output file DJIA_NPP_mth_2020-05-22.html for my visualization temporarily to the gallery directory of my djia branch of my fork of this repository.

  1. When I get rid of all the visualization code that goes between the <script> ... <\script> commands, I get what I expect when I create a local version of the site using bin/start.
    
    {% extends "layout.html" %}
    {% block body %}

{{ page_heading( title="DJIA Normalized Peak Plot over last 15 Recessions (1929-2020)", body="Explore the performance of the Dow Jones Industrial Average in the first months of the last 15 recessions (1929-2020). [Updated May 22, 2020]", ) }}

{% endblock %}

results in the following,
<img width="804" alt="OSElabBasicScreenShot" src="https://user-images.githubusercontent.com/4317690/82747717-45633080-9d59-11ea-85ea-145620c59db1.png">

2. When I update the target html page [`djia_npp_mth.html`](https://github.com/rickecon/oselab/blob/djia/oselab/templates/gallery/djia_npp_mth.html) to follow the gallery template as described in the [docs/gallery.md](https://github.com/rickecon/oselab/blob/djia/docs/gallery.md), I get the following `jinja2` error when I try to load the local site from `bin/start`.

jinja2.exceptions.TemplateSyntaxError: Encountered unknown tag 'F'. Jinja was looking for the following tags: 'endblock'. The innermost block that needs to be closed is 'block'.


3. When I post just the Bokeh output HTML code from [`DJIA_NPP_mth_2020-05-22.html`](https://github.com/rickecon/oselab/blob/djia/oselab/templates/gallery/DJIA_NPP_mth_2020-05-22.html) in the target [`djia_npp_mth.html`](https://github.com/rickecon/oselab/blob/djia/oselab/templates/gallery/djia_npp_mth.html) file, I get the following `jinja2` error when I try to load the local site from `bin/start`.

jinja2.exceptions.TemplateSyntaxError: Encountered unknown tag 'F'.

hayleefay commented 4 years ago

Hi @rickecon! Andy and I teamed up and found the problem! Inside that giant script tag there is an instance of {% that jinja is trying to parse. If you insert the raw jinja tag in djia_npp_mth.html around the first script tag, jinja leaves the contents alone and the visualization is rendered. image

rickecon commented 4 years ago

@hayleefay and @asmockler. Perfect. Worked like a charm. You guys are the best. Thank you for digging this out for me. I am not going to push this to the Heroku site yet because I want to tune a couple of things up on the viz. But thanks @asmockler for building me such a great flask site. AND CONGRATULATIONS ON YOUR BABY.

rickecon commented 4 years ago

This issue is resolved with PR #65.