Shorter question: how should toolbars be programatically created and dynamically changed in a D3.js app with a Python backend?
I'm trying to create Javascript/D3 visualizations for simulations written in Python and using Flask, as an alternative to using a Tkinter GUI. I want a particular model to be selected by a radio button. Changing the selection not only changes the plot, but also swaps to a toolbar of numerical inputs appropriate for that model. I want to create the toolbars programatically, so that as a new model is added to the code an appropriate toolbar is automatically generated.
My problem is that there are a lot of ways to manipulate the DOM, and it's not clear to me what the best approach would be:
Python/Flask could manipulate the DOM, but I think that requires a page refresh.
If HTML imports were used, there would have to be a separate .html file for each toolbar.
A unique
<div>could be created for each toolbar and hidden/unhidden as needed, but it feels wrong to create a dozen<div>s rather than swap the content of one<div>.A toolbar
<div>could be torn down/built up everytime a toolbar is needed, but it feels wrong to keep building the same toolbars from scratch.innerHTML could be swapped, but this might be bad? cf. this SO question
There are multiple options for manipulating the DOM at the frontend: JS, D3, JQuery...
To illustrate, here is a screenshot of what I have so far. The radio buttons swap between two models. In lieu of a toolbar, I have a JSON dump of the model's toolbar info. The JSON dump would be replaced by its interpretation as a series of labels and numerical inputs.
