What is the correct way to update js in Flask endpoint?

Question

API

Hello.

i have endpoint

views.py

@webapp.route('/chart_plotly', methods=['GET', 'POST'])
def chart_plotly():


    rng = pd.date_range('1/1/2011', periods=7500, freq='H')
    ts = pd.Series(np.random.randn(len(rng)), index=rng)

    graphs = [
        dict(
            data=[
                dict(
                    x=[1, 2, 3, 4, 5, 6, 7],
                    y=[11, 22, 33, 44, 55, 66, 77],
                    type='scatter'
                ),
            ],
            layout=dict(
                title='первый график'
            )
        ),

        dict(
            data=[
                dict(
                    x=[1, 3, 5, 2],
                    y=[10, 50, 30, 15],
                    type='bar'
                ),
            ],
            layout=dict(
                title='второй график'
            )
        ),

        dict(
            data=[
                dict(
                    x=ts.index,  # Can use the pandas data structures directly
                    y=ts
                )
            ],
            layout=dict(
                title='третий график'
            )
        )
    ]

    # Add "ids" to each of the graphs to pass up to the client
    # for templating
    ids = ['graph-{}'.format(i) for i, _ in enumerate(graphs)]

    # Convert the figures to JSON
    # PlotlyJSONEncoder appropriately converts pandas, datetime, etc
    # objects to their JSON equivalents
    graphJSON = json.dumps(graphs, cls=plotly.utils.PlotlyJSONEncoder)

    # return 'Hello %s!' % current_user.name
    return render_template('chart_plotly.html', ids=ids, graphJSON=graphJSON)

html.templatechart_plotly.html

_

{% extends 'base.html' %}

{% block title %}
WebApp (c)
{% endblock %}
{% block head %}


{% endblock %}
{% block body %}

{% for id in ids %}
<h3>{{id}}</h3>
<div id="{{id}}"></div>
{% endfor %}

<footer>
    <!-- D3.js -->
    <script src="{{ url_for('static', filename='d3-6.2/js/d3.min.js') }}"></script>
    <!-- jQuery -->
    <script src="{{ url_for('static', filename='jquery-2.1.4/js/jquery-2.1.4.min.js') }}"></script>
    <!-- Plotly.js -->
    <script src="{{ url_for('static', filename='plotly-1.52.3/js/plotly-basic.js') }}"></script>

    <script type="text/javascript">

        var graphs = {{graphJSON | safe}};
        var ids = {{ids | safe}};

        console.log(graphs)
        console.log(ids)

        for(var i in graphs) {
            Plotly.plot(ids[i], // the ID of the div, created above
                graphs[i].data,
                graphs[i].layout || {});
        }

    </script>
</footer>



</form>
{% endblock %}

3 graphs appear - everything is fine, BUT then I edit the info

dict(
            data=[
                dict(
                    x=[1, 2, 3, 4, 5, 6, 7],
                    y=[11, 22, 33, 44, 55, 66, 77],
                    type='scatter'
                ),
            ],
            layout=dict(
                title='первый график'
            )
        ),

I refresh by F5 the page in Google Chrome and the graph is not updated - only after a full restart How to update js in Flask endpoint correctly?

gunicorn -w 1 -b 0.0.0.0:8338 wsgi:webapp

Answer 1

try
export TEMPLATES_AUTO_RELOAD