plotly_utils.py

htmx-plotly.js

@@ -3,16 +3,29 @@
 htmx.defineExtension('htmx-plotly', {
     transformResponse : (text, xhr, elt) => {
 
+        const verbose = true
+        const pedantic = false
+
         var plotEl = htmx.closest(elt, "[plot-id]"); // closest including div element
         if (plotEl) {
             const dataNew = JSON.parse(text)
+            n = dataNew.length
             const plotId = plotEl.getAttribute('plot-id');  // lookup value of ? in < .. plot-id="?">
             var plotDiv = htmx.find("#" + plotId); // div element pointed at
             if (plotDiv) {
-                // https://plotly.com/javascript/plotlyjs-function-reference/#plotlyrestyle 
-                Plotly.restyle(plotId, dataNew)
+                // https://plotly.com/javascript/plotlyjs-function-reference/#plotlyrestyle
+                    for (const [i, d] of dataNew.entries()) {
+                        if (verbose) {console.warn('Restyling trace ' + i + ' of ' + n)}
+                        Plotly.restyle(plotId, d)
+                    }
+
+                  // // validate against a layout (TBD)
+                if (pedantic) {
+                    Plotly.validate(dataNew, {}).forEach((o) => console.warn('Plotly.validate: ' + o.msg))
+                }
+
             } else {
-                throw "Cannot find plot id: " + plotId
+                console.error("Cannot find plot id: " + plotId)
             }
         } else {
             console.log('No plot-id attribute defined')

plotly_compound_scatter_test.py

@@ -7,6 +7,8 @@ def irisScatter1():
     # Load data, make figure.
     df = px.data.iris()
     fig = px.scatter(df, x="sepal_width", y="sepal_length")
+    # print(f'type(fig): {type(fig)}')
+    # print(f'{fig.data}')
     trace = next(fig.select_traces())
 
     # Set default point styles.
@@ -29,4 +31,9 @@ def irisScatter1():
     # Alternatively, call:
     fig.update_traces(marker=dict(color=color, size=size, symbol=symbol))
 
-    return fig.to_json()
+    # json_ = fig.to_json()
+    # print(f'JSON: {json_}')
+    # return fig.to_json()
+
+    # print(f'{fig.data}')
+    return fig

plotly_utils.py

@@ -0,0 +1,13 @@
+import json
+
+def plotlyToRestyle(x):
+    """
+    :param x: a Plotly object with a .to_json() implem, e.g. a Figure
+    :return: data that can be passed to restyle in Plotly.js
+    """
+    z = x.to_json() # .to_json() is Plotly implem
+    def duplicate(w):
+        w['x'] = [w['x']]  # the .restyle() nested array bs
+        w['y'] = [w['y']]
+        return w
+    return [duplicate(w) for w in json.loads(z)['data']]

server.py

@@ -1,6 +1,9 @@
 
-from flask import Flask, request, send_file
+from flask import Flask, request, send_file, make_response
+import json
 from markupsafe import Markup, escape
+import jsonpickle
+from plotly_utils import plotlyToRestyle
 
 from plotly_compound_scatter_test import irisScatter1
 
@@ -11,11 +14,25 @@ def index():
     return send_file('index.html')
 
 @app.post('/get-data')
-def hello():
+def getData():
     # name = request.args.get("name", "World")
     # return f'Hello, {escape(name)}!'
-    figJSON = irisScatter1()
-    return figJSON
+    x = irisScatter1()
+
+    # z = x.to_json() # .to_json() is Plotly implem
+    # w = json.loads(z)['data'][0]  # parse back into dict and extract data
+    # w['x'] = [w['x']]  # the .restyle() nested array bs
+    # w['y'] = [w['y']]
+    w = plotlyToRestyle(x)
+    # print(f'.restyle data: {w}')
+    return make_response(w)
 
 if __name__ == "__main__":
-    app.run(host='0.0.0.0', port=3000, debug=True)
+    app.run(host='0.0.0.0', port=3000, debug=True)
+
+
+
+
+    # w = json.loads(z)['data'][0]  # parse back into dict and extract data
+
+    # return w