Jinja – Plotly JSON Rendering

[hansen-maria]

Is your feature request related to a problem? Please describe.
All Plotly plots are currently rendered as fig.to_html(full_html=False, include_plotlyjs=False) and injected as raw HTML strings into Jinja templates. This approach embeds the entire Plotly figure definition (data, layout, config) as an inline <script> block, which makes the templates difficult to debug, inflates page size, and prevents the frontend from post-processing plot data (e.g. for colorblind theming or dynamic resizing).

Describe the solution you'd like
Replace inline HTML plot injection with a JSON-based approach:

1. In Python: use fig.to_json() instead of fig.to_html() to serialise plots as JSON strings and store them in the data model
2. In Jinja: render a lightweight <div> placeholder per plot, embed the JSON in a <script type="application/json"> block, and call Plotly.newPlot() from a shared plots.js initialiser that reads these blocks on DOMContentLoaded
3. This decouples plot data from rendering and allows the shown.bs.tab resize handler to access plot configs without parsing HTML

Describe alternatives you've considered
Keeping the current approach but adding autosize=True to all figure layouts. This partially addresses the resize issue but does not solve the debugging and theming problems.

Additional context
The pattern would be:

<div id="plot-gc-distribution" class="bpk-plot" style="width:100%;"></div>
<script type="application/json" data-plot-id="plot-gc-distribution">
  {{ col.dna_rna_data.gc_distribution_json | safe }}
</script>

// plots.js
document.querySelectorAll('.bpk-plot').forEach(div => {
  const src = document.querySelector(`[data-plot-id="${div.id}"]`);
  if (src) Plotly.newPlot(div, ...JSON.parse(src.textContent));
});

This also makes the colorblind toggle straightforward: swap the colorway in the JSON before calling newPlot rather than re-calling relayout after the fact.