alteracoes para grandes quantidades de pontos

backend/app/api/elaboracao.py

@@ -86,6 +86,14 @@ class DispersaoPayload(SessionPayload):
     eixo_y_coluna: str | None = None
 
 
+class DispersaoInterativoPayload(SessionPayload):
+    alvo: str = "secao10"
+
+
+class DiagnosticoInterativoPayload(SessionPayload):
+    grafico: str = "obs_calc"
+
+
 class TransformPreviewPayload(SessionPayload):
     transformacao_y: str = "(x)"
     transformacoes_x: dict[str, str] = Field(default_factory=dict)
@@ -288,6 +296,18 @@ def model_dispersao(payload: DispersaoPayload) -> dict[str, Any]:
     )
 
 
+@router.post("/dispersao-interativo")
+def dispersao_interativo(payload: DispersaoInterativoPayload) -> dict[str, Any]:
+    session = session_store.get(payload.session_id)
+    return elaboracao_service.obter_grafico_dispersao_interativo(session, payload.alvo)
+
+
+@router.post("/diagnostico-interativo")
+def diagnostico_interativo(payload: DiagnosticoInterativoPayload) -> dict[str, Any]:
+    session = session_store.get(payload.session_id)
+    return elaboracao_service.obter_grafico_diagnostico_interativo(session, payload.grafico)
+
+
 @router.post("/transform-preview")
 def transform_preview(payload: TransformPreviewPayload) -> dict[str, Any]:
     session = session_store.get(payload.session_id)

backend/app/models/session.py

@@ -51,6 +51,7 @@ class SessionState:
     pacote_visualizacao: dict[str, Any] | None = None
     dados_visualizacao: pd.DataFrame | None = None
     avaliacoes_visualizacao: list[dict[str, Any]] = field(default_factory=list)
+    graficos_dispersao_cache: dict[str, dict[str, Any]] = field(default_factory=dict)
 
     elaborador: dict[str, Any] | None = None
 
@@ -62,6 +63,7 @@ class SessionState:
         self.avaliacoes_elaboracao = []
         self.transformacao_y = "(x)"
         self.transformacoes_x = {}
+        self.graficos_dispersao_cache = {}
 
     def reset_visualizacao(self) -> None:
         self.pacote_visualizacao = None

backend/app/services/elaboracao_service.py

@@ -1,5 +1,6 @@
 from __future__ import annotations
 
+import base64
 import json
 import os
 import re
@@ -10,6 +11,8 @@ from typing import Any
 
 import numpy as np
 import pandas as pd
+import plotly.graph_objects as go
+import plotly.io as pio
 from fastapi import HTTPException
 
 from app.core.elaboracao import charts, geocodificacao
@@ -48,6 +51,7 @@ from app.services.serializers import dataframe_to_payload, figure_to_payload, sa
 
 _AVALIADORES_PATH = Path(__file__).resolve().parent.parent / "core" / "elaboracao" / "avaliadores.json"
 _AVALIADORES_CACHE: list[dict[str, Any]] | None = None
+LIMIAR_DISPERSAO_PNG = 1000
 
 
 def _is_rh_col(coluna: str) -> bool:
@@ -143,6 +147,161 @@ def list_avaliadores() -> list[dict[str, Any]]:
     return _AVALIADORES_CACHE
 
 
+def _usar_png_dispersao(total_pontos: int) -> bool:
+    return int(total_pontos) > LIMIAR_DISPERSAO_PNG
+
+
+def _contar_paineis_dispersao(fig: Any) -> int:
+    try:
+        data = list(getattr(fig, "data", []) or [])
+        eixos: set[str] = set()
+        for trace in data:
+            eixo = str(getattr(trace, "xaxis", "") or "").strip().lower()
+            if not eixo:
+                eixo = "x"
+            eixos.add(eixo)
+        return max(1, len(eixos))
+    except Exception:
+        return 1
+
+
+def _estilizar_figura_dispersao_png(fig: Any) -> Any:
+    try:
+        fig_out = go.Figure(fig)
+    except Exception:
+        return fig
+
+    for trace in fig_out.data or []:
+        mode = str(getattr(trace, "mode", "") or "")
+        if "markers" in mode:
+            marker_atual = getattr(trace, "marker", None)
+            marker = dict(marker_atual.to_plotly_json() if hasattr(marker_atual, "to_plotly_json") else (marker_atual or {}))
+            marker["color"] = "#FF8C00"
+            marker["size"] = float(marker.get("size") or 8)
+            marker["opacity"] = float(marker.get("opacity") if marker.get("opacity") is not None else 0.84)
+            linha = dict(marker.get("line") or {})
+            linha["color"] = linha.get("color") or "#1f2933"
+            linha["width"] = float(linha.get("width") or 1)
+            marker["line"] = linha
+            trace.marker = marker
+
+        if "lines" in mode:
+            line_atual = getattr(trace, "line", None)
+            line = dict(line_atual.to_plotly_json() if hasattr(line_atual, "to_plotly_json") else (line_atual or {}))
+            line["color"] = line.get("color") or "#dc3545"
+            line["width"] = float(line.get("width") or 2)
+            trace.line = line
+
+        trace.showlegend = False
+
+    fig_out.update_layout(
+        showlegend=False,
+        plot_bgcolor="white",
+        paper_bgcolor="white",
+        margin=dict(t=78, r=20, b=48, l=54),
+    )
+    fig_out.update_xaxes(showgrid=True, gridcolor="#d7dde3", showline=True, linecolor="#1f2933", zeroline=False)
+    fig_out.update_yaxes(showgrid=True, gridcolor="#d7dde3", showline=True, linecolor="#1f2933", zeroline=False)
+    return fig_out
+
+
+def _renderizar_png_grafico(fig: Any, *, estilo: str | None = None) -> dict[str, Any] | None:
+    if fig is None:
+        return None
+    try:
+        figura_export = _estilizar_figura_dispersao_png(fig) if str(estilo or "") == "dispersao" else fig
+        largura_layout = int(getattr(figura_export.layout, "width", 0) or 0)
+        altura_layout = int(getattr(figura_export.layout, "height", 0) or 0)
+
+        if str(estilo or "") == "dispersao":
+            paineis = _contar_paineis_dispersao(figura_export)
+            n_cols = min(3, max(1, paineis))
+            altura = altura_layout if altura_layout > 0 else 900
+            largura = largura_layout if largura_layout > 0 else (460 * n_cols)
+            largura = max(860, min(largura, 2200))
+            altura = max(520, min(altura, 1800))
+        else:
+            altura = altura_layout if altura_layout > 0 else 420
+            largura = largura_layout if largura_layout > 0 else int(round(altura * 1.75))
+            largura = max(640, min(largura, 2000))
+            altura = max(360, min(altura, 1600))
+
+        imagem = pio.to_image(figura_export, format="png", width=largura, height=altura, scale=1)
+        return {
+            "mime_type": "image/png",
+            "image_base64": base64.b64encode(imagem).decode("ascii"),
+            "width": largura,
+            "height": altura,
+        }
+    except Exception:
+        return None
+
+
+def _montar_payload_dispersao(
+    session: SessionState,
+    *,
+    cache_key: str,
+    fig: Any,
+    total_pontos: int,
+    estilo_png: str | None = "dispersao",
+) -> dict[str, Any]:
+    key = str(cache_key or "").strip().lower()
+    if not key:
+        raise ValueError("cache_key invalido")
+
+    if fig is None:
+        session.graficos_dispersao_cache.pop(key, None)
+        return {
+            "modo": "interativo",
+            "grafico": None,
+            "grafico_png": None,
+            "total_pontos": int(total_pontos),
+            "limiar_png": LIMIAR_DISPERSAO_PNG,
+        }
+
+    payload_interativo = figure_to_payload(fig)
+    if not payload_interativo:
+        session.graficos_dispersao_cache.pop(key, None)
+        return {
+            "modo": "interativo",
+            "grafico": None,
+            "grafico_png": None,
+            "total_pontos": int(total_pontos),
+            "limiar_png": LIMIAR_DISPERSAO_PNG,
+        }
+
+    usar_png = _usar_png_dispersao(int(total_pontos))
+    if not usar_png:
+        session.graficos_dispersao_cache.pop(key, None)
+        return {
+            "modo": "interativo",
+            "grafico": payload_interativo,
+            "grafico_png": None,
+            "total_pontos": int(total_pontos),
+            "limiar_png": LIMIAR_DISPERSAO_PNG,
+        }
+
+    payload_png = _renderizar_png_grafico(fig, estilo=estilo_png)
+    if not payload_png:
+        session.graficos_dispersao_cache.pop(key, None)
+        return {
+            "modo": "interativo",
+            "grafico": payload_interativo,
+            "grafico_png": None,
+            "total_pontos": int(total_pontos),
+            "limiar_png": LIMIAR_DISPERSAO_PNG,
+        }
+
+    session.graficos_dispersao_cache[key] = payload_interativo
+    return {
+        "modo": "png",
+        "grafico": None,
+        "grafico_png": payload_png,
+        "total_pontos": int(total_pontos),
+        "limiar_png": LIMIAR_DISPERSAO_PNG,
+    }
+
+
 def _clean_int_list(values: list[Any] | None) -> list[int]:
     if not values:
         return []
@@ -799,6 +958,12 @@ def apply_selection(
         fig_dispersao = charts.criar_graficos_dispersao(df_filtrado[colunas_x_validas], df_filtrado[coluna_y])
     except Exception:
         fig_dispersao = None
+    dispersao_payload = _montar_payload_dispersao(
+        session,
+        cache_key="secao10",
+        fig=fig_dispersao,
+        total_pontos=len(df_filtrado.index),
+    )
 
     busca_payload = search_transformacoes(session, grau_min_coef=grau_min_coef, grau_min_f=grau_min_f)
 
@@ -830,7 +995,11 @@ def apply_selection(
     return {
         "estatisticas": dataframe_to_payload(estatisticas, decimals=4),
         "micronumerosidade_html": micro_html,
-        "grafico_dispersao": figure_to_payload(fig_dispersao),
+        "grafico_dispersao": dispersao_payload.get("grafico"),
+        "grafico_dispersao_modo": dispersao_payload.get("modo"),
+        "grafico_dispersao_png": dispersao_payload.get("grafico_png"),
+        "grafico_dispersao_total_pontos": dispersao_payload.get("total_pontos"),
+        "grafico_dispersao_limiar_png": dispersao_payload.get("limiar_png"),
         "busca": busca_payload,
         "resumo_outliers": resumo_outliers,
         "outliers_html": outliers_html,
@@ -1023,6 +1192,13 @@ def fit_model(
         )
     except Exception:
         fig_dispersao_transf = None
+    total_pontos_modelo = int(getattr(resultado.get("X_transformado"), "shape", [0])[0] or 0)
+    dispersao_modelo_payload = _montar_payload_dispersao(
+        session,
+        cache_key="secao13",
+        fig=fig_dispersao_transf,
+        total_pontos=total_pontos_modelo,
+    )
 
     fig_corr = None
     try:
@@ -1033,6 +1209,26 @@ def fit_model(
         fig_corr = None
 
     graficos = charts.criar_painel_diagnostico(resultado)
+    usar_png_diagnosticos = _usar_png_dispersao(total_pontos_modelo)
+    obs_calc_png = _renderizar_png_grafico(graficos.get("obs_calc")) if usar_png_diagnosticos else None
+    residuos_png = _renderizar_png_grafico(graficos.get("residuos")) if usar_png_diagnosticos else None
+    histograma_png = _renderizar_png_grafico(graficos.get("histograma")) if usar_png_diagnosticos else None
+    cook_png = _renderizar_png_grafico(graficos.get("cook")) if usar_png_diagnosticos else None
+    diagnosticos_cache_map = {
+        "secao15_obs_calc": graficos.get("obs_calc"),
+        "secao15_residuos": graficos.get("residuos"),
+        "secao15_histograma": graficos.get("histograma"),
+        "secao15_cook": graficos.get("cook"),
+    }
+    for cache_key, fig_diag in diagnosticos_cache_map.items():
+        if usar_png_diagnosticos and fig_diag is not None:
+            payload_diag = figure_to_payload(fig_diag)
+            if payload_diag:
+                session.graficos_dispersao_cache[cache_key] = payload_diag
+            else:
+                session.graficos_dispersao_cache.pop(cache_key, None)
+        else:
+            session.graficos_dispersao_cache.pop(cache_key, None)
 
     tabela_metricas = resultado["tabela_obs_calc"].copy()
     tabela_metricas_estado = tabela_metricas.set_index("Índice")
@@ -1090,11 +1286,22 @@ def fit_model(
         "equacoes": sanitize_value(equacoes),
         "tabela_coef": dataframe_to_payload(resultado["tabela_coef"], decimals=4),
         "tabela_obs_calc": dataframe_to_payload(resultado["tabela_obs_calc"], decimals=4),
-        "grafico_dispersao_modelo": figure_to_payload(fig_dispersao_transf),
-        "grafico_obs_calc": figure_to_payload(graficos.get("obs_calc")),
-        "grafico_residuos": figure_to_payload(graficos.get("residuos")),
-        "grafico_histograma": figure_to_payload(graficos.get("histograma")),
-        "grafico_cook": figure_to_payload(graficos.get("cook")),
+        "grafico_dispersao_modelo": dispersao_modelo_payload.get("grafico"),
+        "grafico_dispersao_modelo_modo": dispersao_modelo_payload.get("modo"),
+        "grafico_dispersao_modelo_png": dispersao_modelo_payload.get("grafico_png"),
+        "grafico_dispersao_modelo_total_pontos": dispersao_modelo_payload.get("total_pontos"),
+        "grafico_dispersao_modelo_limiar_png": dispersao_modelo_payload.get("limiar_png"),
+        "graficos_diagnostico_modo": "png" if usar_png_diagnosticos else "interativo",
+        "graficos_diagnostico_total_pontos": total_pontos_modelo,
+        "graficos_diagnostico_limiar_png": LIMIAR_DISPERSAO_PNG,
+        "grafico_obs_calc": None if usar_png_diagnosticos else figure_to_payload(graficos.get("obs_calc")),
+        "grafico_residuos": None if usar_png_diagnosticos else figure_to_payload(graficos.get("residuos")),
+        "grafico_histograma": None if usar_png_diagnosticos else figure_to_payload(graficos.get("histograma")),
+        "grafico_cook": None if usar_png_diagnosticos else figure_to_payload(graficos.get("cook")),
+        "grafico_obs_calc_png": obs_calc_png,
+        "grafico_residuos_png": residuos_png,
+        "grafico_histograma_png": histograma_png,
+        "grafico_cook_png": cook_png,
         "grafico_correlacao": figure_to_payload(fig_corr),
         "tabela_metricas": dataframe_to_payload(tabela_metricas, decimals=4),
         "tabela_outliers_excluidos": tabela_outliers_excluidos,
@@ -1214,9 +1421,19 @@ def gerar_grafico_dispersao_modelo(
             fig = charts.criar_graficos_dispersao(x_base, y_base)
     except Exception:
         fig = None
+    dispersao_payload = _montar_payload_dispersao(
+        session,
+        cache_key="secao13",
+        fig=fig,
+        total_pontos=int(getattr(x_base, "shape", [0])[0] or 0),
+    )
 
     return {
-        "grafico": figure_to_payload(fig),
+        "grafico": dispersao_payload.get("grafico"),
+        "modo": dispersao_payload.get("modo"),
+        "grafico_png": dispersao_payload.get("grafico_png"),
+        "total_pontos": dispersao_payload.get("total_pontos"),
+        "limiar_png": dispersao_payload.get("limiar_png"),
         "eixo_x_aplicado": "nao_transformado" if eixo_x_norm in {"nao_transformado", "não_transformado"} else "transformado",
         "eixo_y_tipo_aplicado": eixo_y_norm,
         "eixo_y_residuo_aplicado": eixo_residuo_norm if eixo_y_norm == "residuo" else None,
@@ -1225,6 +1442,43 @@ def gerar_grafico_dispersao_modelo(
     }
 
 
+def obter_grafico_dispersao_interativo(session: SessionState, alvo: str) -> dict[str, Any]:
+    key = str(alvo or "").strip().lower()
+    if key not in {"secao10", "secao13"}:
+        raise HTTPException(status_code=400, detail="Alvo de grafico invalido")
+
+    grafico = session.graficos_dispersao_cache.get(key)
+    if not grafico:
+        raise HTTPException(status_code=404, detail="Grafico interativo indisponivel para este alvo")
+
+    return {
+        "alvo": key,
+        "grafico": sanitize_value(grafico),
+    }
+
+
+def obter_grafico_diagnostico_interativo(session: SessionState, grafico: str) -> dict[str, Any]:
+    alvo = str(grafico or "").strip().lower()
+    mapa_alvos = {
+        "obs_calc": "secao15_obs_calc",
+        "residuos": "secao15_residuos",
+        "histograma": "secao15_histograma",
+        "cook": "secao15_cook",
+    }
+    key = mapa_alvos.get(alvo)
+    if not key:
+        raise HTTPException(status_code=400, detail="Grafico diagnostico invalido")
+
+    payload = session.graficos_dispersao_cache.get(key)
+    if not payload:
+        raise HTTPException(status_code=404, detail="Grafico diagnostico interativo indisponivel")
+
+    return {
+        "grafico": alvo,
+        "payload": sanitize_value(payload),
+    }
+
+
 def apply_outlier_filters(session: SessionState, filtros: list[dict[str, Any]]) -> dict[str, Any]:
     metricas = session.tabela_metricas_estado
     if metricas is None:

backend/requirements.txt

@@ -7,6 +7,7 @@ numpy
 statsmodels
 scipy
 plotly
+kaleido
 folium
 branca
 joblib

frontend/src/api.js

@@ -161,6 +161,14 @@ export const api = {
     session_id: sessionId,
     ...(payload || {}),
   }),
+  getDispersaoInterativo: (sessionId, alvo) => postJson('/api/elaboracao/dispersao-interativo', {
+    session_id: sessionId,
+    alvo,
+  }),
+  getDiagnosticoInterativo: (sessionId, grafico) => postJson('/api/elaboracao/diagnostico-interativo', {
+    session_id: sessionId,
+    grafico,
+  }),
   previewTransformElab: (sessionId, transformacaoY, transformacoesX) => postJson('/api/elaboracao/transform-preview', {
     session_id: sessionId,
     transformacao_y: transformacaoY,

frontend/src/components/ElaboracaoTab.jsx

@@ -371,7 +371,8 @@ function stripPanelLayoutAxes(layout) {
   return out
 }
 
-function stylePanelTrace(trace) {
+function stylePanelTrace(trace, options = {}) {
+  const useScatterGlMarkers = Boolean(options.useScatterGlMarkers)
   const mode = String(trace?.mode || '')
   const traceName = String(trace?.name || '').toLowerCase()
   const hasMarkers = mode.includes('markers')
@@ -379,6 +380,9 @@ function stylePanelTrace(trace) {
   const next = { ...trace, showlegend: false }
 
   if (hasMarkers) {
+    if (useScatterGlMarkers) {
+      next.type = 'scattergl'
+    }
     next.marker = {
       ...(trace?.marker || {}),
       color: '#FF8C00',
@@ -446,7 +450,7 @@ function buildScatterPanels(figure, options = {}) {
       ...item.trace,
       xaxis: 'x',
       yaxis: 'y',
-    }))
+    }, { useScatterGlMarkers: Boolean(options.useScatterGlMarkers) }))
 
     const panelFigure = {
       data: panelTraces,
@@ -637,6 +641,27 @@ function obterLabelGrau(listaGraus, valor) {
   return item?.label || 'Sem enquadramento'
 }
 
+function DiagnosticPngCard({ title, pngPayload, alt }) {
+  if (!pngPayload?.image_base64) {
+    return (
+      <div className="empty-box">Grafico indisponivel.</div>
+    )
+  }
+  const mime = String(pngPayload.mime_type || 'image/png').trim() || 'image/png'
+  return (
+    <div className="plot-card plot-png-card">
+      <div className="plot-card-head">
+        <h4 className="plot-card-title">{title}</h4>
+      </div>
+      <img
+        src={`data:${mime};base64,${pngPayload.image_base64}`}
+        alt={alt || title}
+        className="plot-png-image"
+      />
+    </div>
+  )
+}
+
 export default function ElaboracaoTab({ sessionId }) {
   const [loading, setLoading] = useState(false)
   const [downloadingAssets, setDownloadingAssets] = useState(false)
@@ -720,6 +745,12 @@ export default function ElaboracaoTab({ sessionId }) {
   const [dispersaoEixoYTipo, setDispersaoEixoYTipo] = useState('y_transformado')
   const [dispersaoEixoYResiduo, setDispersaoEixoYResiduo] = useState('residuo_pad')
   const [dispersaoEixoYColuna, setDispersaoEixoYColuna] = useState('')
+  const [secao10InterativoFigura, setSecao10InterativoFigura] = useState(null)
+  const [secao10InterativoSelecionado, setSecao10InterativoSelecionado] = useState('none')
+  const [secao13InterativoFigura, setSecao13InterativoFigura] = useState(null)
+  const [secao13InterativoSelecionado, setSecao13InterativoSelecionado] = useState('none')
+  const [secao15InterativoFigura, setSecao15InterativoFigura] = useState(null)
+  const [secao15InterativoSelecionado, setSecao15InterativoSelecionado] = useState('none')
 
   const [filtros, setFiltros] = useState(defaultFiltros())
   const [outliersTexto, setOutliersTexto] = useState('')
@@ -970,6 +1001,19 @@ export default function ElaboracaoTab({ sessionId }) {
     }
     return ''
   }, [origemTransformacoes])
+  const secao10PngPayload = useMemo(() => {
+    if (String(selection?.grafico_dispersao_modo || '') !== 'png') return null
+    const payload = selection?.grafico_dispersao_png
+    if (!payload || typeof payload !== 'object') return null
+    const imageBase64 = String(payload.image_base64 || '').trim()
+    if (!imageBase64) return null
+    return {
+      imageBase64,
+      mimeType: String(payload.mime_type || 'image/png').trim() || 'image/png',
+      totalPontos: Number(payload.total_pontos ?? selection?.grafico_dispersao_total_pontos ?? 0) || 0,
+      limiar: Number(selection?.grafico_dispersao_limiar_png ?? 1000) || 1000,
+    }
+  }, [selection])
   const graficosSecao9 = useMemo(
     () => buildScatterPanels(selection?.grafico_dispersao, {
       singleLabel: 'Dispersão',
@@ -978,6 +1022,25 @@ export default function ElaboracaoTab({ sessionId }) {
     }),
     [selection?.grafico_dispersao, colunaY],
   )
+  const graficosSecao9Interativo = useMemo(
+    () => buildScatterPanels(secao10InterativoFigura, {
+      singleLabel: 'Dispersão',
+      height: 360,
+      yLabel: colunaY || 'Y',
+      useScatterGlMarkers: true,
+    }),
+    [secao10InterativoFigura, colunaY],
+  )
+  const secao10InterativoOpcoes = useMemo(() => {
+    const labels = graficosSecao9Interativo.length > 0
+      ? graficosSecao9Interativo.map((item) => String(item.label || '').trim()).filter(Boolean)
+      : (selection?.contexto?.colunas_x || colunasX).map((item) => String(item || '').trim()).filter(Boolean)
+    return Array.from(new Set(labels))
+  }, [graficosSecao9Interativo, selection?.contexto?.colunas_x, colunasX])
+  const secao10InterativoAtual = useMemo(() => {
+    if (secao10InterativoSelecionado === 'none' || graficosSecao9Interativo.length === 0) return null
+    return graficosSecao9Interativo.find((item) => String(item.label || '') === secao10InterativoSelecionado) || graficosSecao9Interativo[0]
+  }, [graficosSecao9Interativo, secao10InterativoSelecionado])
   const colunasGraficosSecao9 = useMemo(
     () => Math.max(1, Math.min(3, graficosSecao9.length || 1)),
     [graficosSecao9.length],
@@ -1014,10 +1077,60 @@ export default function ElaboracaoTab({ sessionId }) {
     }),
     [fit?.grafico_dispersao_modelo, yLabelSecao13],
   )
+  const secao13PngPayload = useMemo(() => {
+    if (String(fit?.grafico_dispersao_modelo_modo || '') !== 'png') return null
+    const payload = fit?.grafico_dispersao_modelo_png
+    if (!payload || typeof payload !== 'object') return null
+    const imageBase64 = String(payload.image_base64 || '').trim()
+    if (!imageBase64) return null
+    return {
+      imageBase64,
+      mimeType: String(payload.mime_type || 'image/png').trim() || 'image/png',
+      totalPontos: Number(payload.total_pontos ?? fit?.grafico_dispersao_modelo_total_pontos ?? 0) || 0,
+      limiar: Number(fit?.grafico_dispersao_modelo_limiar_png ?? 1000) || 1000,
+    }
+  }, [fit])
+  const graficosSecao12Interativo = useMemo(
+    () => buildScatterPanels(secao13InterativoFigura, {
+      singleLabel: 'Dispersão do modelo',
+      height: 360,
+      yLabel: yLabelSecao13,
+      useScatterGlMarkers: true,
+    }),
+    [secao13InterativoFigura, yLabelSecao13],
+  )
+  const secao13InterativoOpcoes = useMemo(() => {
+    const labels = graficosSecao12Interativo.length > 0
+      ? graficosSecao12Interativo.map((item) => String(item.label || '').trim()).filter(Boolean)
+      : (fit?.contexto?.colunas_x || colunasX).map((item) => String(item || '').trim()).filter(Boolean)
+    return Array.from(new Set(labels))
+  }, [graficosSecao12Interativo, fit?.contexto?.colunas_x, colunasX])
+  const secao13InterativoAtual = useMemo(() => {
+    if (secao13InterativoSelecionado === 'none' || graficosSecao12Interativo.length === 0) return null
+    return graficosSecao12Interativo.find((item) => String(item.label || '') === secao13InterativoSelecionado) || graficosSecao12Interativo[0]
+  }, [graficosSecao12Interativo, secao13InterativoSelecionado])
   const colunasGraficosSecao12 = useMemo(
     () => Math.max(1, Math.min(3, graficosSecao12.length || 1)),
     [graficosSecao12.length],
   )
+  const secao15DiagnosticoPng = useMemo(
+    () => String(fit?.graficos_diagnostico_modo || '') === 'png',
+    [fit?.graficos_diagnostico_modo],
+  )
+  const secao15InterativoOpcoes = useMemo(
+    () => [
+      { value: 'none', label: 'Sem gráfico interativo' },
+      { value: 'obs_calc', label: 'Obs x Calc' },
+      { value: 'residuos', label: 'Resíduos' },
+      { value: 'histograma', label: 'Histograma' },
+      { value: 'cook', label: 'Cook' },
+    ],
+    [],
+  )
+  const secao15InterativoLabel = useMemo(() => {
+    const item = secao15InterativoOpcoes.find((opt) => opt.value === secao15InterativoSelecionado)
+    return item?.label || 'Gráfico interativo'
+  }, [secao15InterativoOpcoes, secao15InterativoSelecionado])
   const temAvaliacoes = useMemo(
     () => Array.isArray(baseChoices) && baseChoices.length > 0,
     [baseChoices],
@@ -1130,6 +1243,33 @@ export default function ElaboracaoTab({ sessionId }) {
     }
   }, [colunasOriginaisDispersao, dispersaoEixoYColuna])
 
+  useEffect(() => {
+    if (graficosSecao9Interativo.length === 0) {
+      if (secao10InterativoSelecionado !== 'none') setSecao10InterativoSelecionado('none')
+      return
+    }
+    if (secao10InterativoSelecionado !== 'none' && !graficosSecao9Interativo.some((item) => String(item.label || '') === secao10InterativoSelecionado)) {
+      setSecao10InterativoSelecionado(String(graficosSecao9Interativo[0].label || 'none'))
+    }
+  }, [graficosSecao9Interativo, secao10InterativoSelecionado])
+
+  useEffect(() => {
+    if (graficosSecao12Interativo.length === 0) {
+      if (secao13InterativoSelecionado !== 'none') setSecao13InterativoSelecionado('none')
+      return
+    }
+    if (secao13InterativoSelecionado !== 'none' && !graficosSecao12Interativo.some((item) => String(item.label || '') === secao13InterativoSelecionado)) {
+      setSecao13InterativoSelecionado(String(graficosSecao12Interativo[0].label || 'none'))
+    }
+  }, [graficosSecao12Interativo, secao13InterativoSelecionado])
+
+  useEffect(() => {
+    if (!fit || !secao15DiagnosticoPng) {
+      if (secao15InterativoSelecionado !== 'none') setSecao15InterativoSelecionado('none')
+      if (secao15InterativoFigura) setSecao15InterativoFigura(null)
+    }
+  }, [fit, secao15DiagnosticoPng, secao15InterativoSelecionado, secao15InterativoFigura])
+
   useEffect(() => {
     if (!sessionId || tipoFonteDados === 'dai') return undefined
 
@@ -1409,6 +1549,10 @@ export default function ElaboracaoTab({ sessionId }) {
       setSelection(null)
       setSection6EditOpen(true)
       setFit(null)
+      setSecao10InterativoFigura(null)
+      setSecao10InterativoSelecionado('none')
+      setSecao13InterativoFigura(null)
+      setSecao13InterativoSelecionado('none')
       setFiltros(defaultFiltros())
       setOutliersTexto('')
       setReincluirTexto('')
@@ -1444,6 +1588,8 @@ export default function ElaboracaoTab({ sessionId }) {
 
   function applySelectionResponse(resp) {
     setSelection(resp)
+    setSecao10InterativoFigura(null)
+    setSecao10InterativoSelecionado('none')
     setSection6EditOpen(false)
     setSection11LocksOpen(false)
     setSection10ManualOpen(false)
@@ -1493,6 +1639,10 @@ export default function ElaboracaoTab({ sessionId }) {
 
   function applyFitResponse(resp, origemMeta = null) {
     setFit(resp)
+    setSecao13InterativoFigura(null)
+    setSecao13InterativoSelecionado('none')
+    setSecao15InterativoFigura(null)
+    setSecao15InterativoSelecionado('none')
     setDispersaoEixoX('transformado')
     setDispersaoEixoYTipo('y_transformado')
     setDispersaoEixoYResiduo('residuo_pad')
@@ -1585,6 +1735,10 @@ export default function ElaboracaoTab({ sessionId }) {
     setGrauCoef(0)
     setGrauF(0)
     setFit(null)
+    setSecao10InterativoFigura(null)
+    setSecao10InterativoSelecionado('none')
+    setSecao13InterativoFigura(null)
+    setSecao13InterativoSelecionado('none')
     setSelectionAppliedSnapshot(buildSelectionSnapshot())
     setColunasX([])
     setDicotomicas([])
@@ -1819,6 +1973,10 @@ export default function ElaboracaoTab({ sessionId }) {
     setSelectionAppliedSnapshot(buildSelectionSnapshot({ coluna_y: proximaColunaY }))
     setSelection(null)
     setFit(null)
+    setSecao10InterativoFigura(null)
+    setSecao10InterativoSelecionado('none')
+    setSecao13InterativoFigura(null)
+    setSecao13InterativoSelecionado('none')
     setTransformacaoY('(x)')
     setTransformacoesX({})
     setTransformacaoYFixaBusca('Livre')
@@ -1980,6 +2138,8 @@ export default function ElaboracaoTab({ sessionId }) {
       setSelectionAppliedSnapshot(buildSelectionSnapshot(payload))
       setSection6EditOpen(false)
       setFit(null)
+      setSecao13InterativoFigura(null)
+      setSecao13InterativoSelecionado('none')
       setOutlierFiltrosAplicadosSnapshot(buildFiltrosSnapshot(defaultFiltros()))
       setOutlierTextosAplicadosSnapshot(buildOutlierTextSnapshot('', ''))
       setCamposAvaliacao([])
@@ -2082,7 +2242,16 @@ export default function ElaboracaoTab({ sessionId }) {
         eixo_y_residuo: eixoYTipo === 'residuo' ? eixoYResiduo : null,
         eixo_y_coluna: eixoYTipo === 'coluna_original' ? eixoYColuna : null,
       })
-      setFit((prev) => ({ ...prev, grafico_dispersao_modelo: resp.grafico }))
+      setFit((prev) => ({
+        ...prev,
+        grafico_dispersao_modelo: resp.grafico,
+        grafico_dispersao_modelo_modo: resp.modo || (resp.grafico ? 'interativo' : ''),
+        grafico_dispersao_modelo_png: resp.grafico_png || null,
+        grafico_dispersao_modelo_total_pontos: resp.total_pontos,
+        grafico_dispersao_modelo_limiar_png: resp.limiar_png,
+      }))
+      setSecao13InterativoFigura(null)
+      setSecao13InterativoSelecionado('none')
     })
   }
 
@@ -2204,6 +2373,8 @@ export default function ElaboracaoTab({ sessionId }) {
       setReincluirTexto('')
       setOutlierTextosAplicadosSnapshot(buildOutlierTextSnapshot('', ''))
       setFit(null)
+      setSecao13InterativoFigura(null)
+      setSecao13InterativoSelecionado('none')
       setTransformacoesAplicadas(null)
       setOrigemTransformacoes(null)
       setSection10ManualOpen(true)
@@ -2230,6 +2401,10 @@ export default function ElaboracaoTab({ sessionId }) {
       setSelection(null)
       setSection6EditOpen(true)
       setFit(null)
+      setSecao10InterativoFigura(null)
+      setSecao10InterativoSelecionado('none')
+      setSecao13InterativoFigura(null)
+      setSecao13InterativoSelecionado('none')
       setTransformacoesAplicadas(null)
       setOrigemTransformacoes(null)
       setCamposAvaliacao([])
@@ -2567,6 +2742,97 @@ export default function ElaboracaoTab({ sessionId }) {
     }
   }
 
+  async function onDownloadPngBase64(imageBase64, mimeType, fileNameBase) {
+    const payload = String(imageBase64 || '').trim()
+    if (!payload) {
+      setError('Imagem indisponível para download.')
+      return
+    }
+    setDownloadingAssets(true)
+    setError('')
+    try {
+      const safeMime = String(mimeType || 'image/png').trim() || 'image/png'
+      const dataUrl = `data:${safeMime};base64,${payload}`
+      const response = await fetch(dataUrl)
+      const blob = await response.blob()
+      downloadBlob(blob, `${sanitizeFileName(fileNameBase, 'grafico')}.png`)
+    } catch (err) {
+      setError(err.message || 'Falha ao baixar imagem do gráfico.')
+    } finally {
+      setDownloadingAssets(false)
+    }
+  }
+
+  async function onDownloadPngBase64Batch(items) {
+    const validItems = (items || []).filter((item) => String(item?.imageBase64 || '').trim())
+    if (validItems.length === 0) {
+      setError('Não há imagens disponíveis para download.')
+      return
+    }
+    setDownloadingAssets(true)
+    setError('')
+    try {
+      for (let i = 0; i < validItems.length; i += 1) {
+        const item = validItems[i]
+        const safeMime = String(item.mimeType || 'image/png').trim() || 'image/png'
+        const dataUrl = `data:${safeMime};base64,${String(item.imageBase64).trim()}`
+        const response = await fetch(dataUrl)
+        const blob = await response.blob()
+        downloadBlob(blob, `${sanitizeFileName(item.fileNameBase, `grafico_${i + 1}`)}.png`)
+        if (i < validItems.length - 1) {
+          await sleep(180)
+        }
+      }
+    } catch (err) {
+      setError(err.message || 'Falha ao baixar imagens.')
+    } finally {
+      setDownloadingAssets(false)
+    }
+  }
+
+  async function onChangeSecao10InterativoSelecionado(value) {
+    const nextValue = String(value || 'none').trim() || 'none'
+    setSecao10InterativoSelecionado(nextValue)
+    if (nextValue === 'none') {
+      return
+    }
+    if (secao10InterativoFigura || !sessionId) return
+
+    await withBusy(async () => {
+      const resp = await api.getDispersaoInterativo(sessionId, 'secao10')
+      setSecao10InterativoFigura(resp?.grafico || null)
+    })
+  }
+
+  async function onChangeSecao13InterativoSelecionado(value) {
+    const nextValue = String(value || 'none').trim() || 'none'
+    setSecao13InterativoSelecionado(nextValue)
+    if (nextValue === 'none') {
+      return
+    }
+    if (secao13InterativoFigura || !sessionId) return
+
+    await withBusy(async () => {
+      const resp = await api.getDispersaoInterativo(sessionId, 'secao13')
+      setSecao13InterativoFigura(resp?.grafico || null)
+    })
+  }
+
+  async function onChangeSecao15InterativoSelecionado(value) {
+    const nextValue = String(value || 'none').trim() || 'none'
+    setSecao15InterativoSelecionado(nextValue)
+    if (nextValue === 'none') {
+      setSecao15InterativoFigura(null)
+      return
+    }
+    if (!sessionId) return
+
+    await withBusy(async () => {
+      const resp = await api.getDiagnosticoInterativo(sessionId, nextValue)
+      setSecao15InterativoFigura(resp?.payload || null)
+    })
+  }
+
   function toggleSelection(setter, value) {
     setter((prev) => {
       if (prev.includes(value)) return prev.filter((item) => item !== value)
@@ -3457,56 +3723,135 @@ export default function ElaboracaoTab({ sessionId }) {
           </SectionBlock>
 
           <SectionBlock step="10" title="Gráficos de Dispersão das Variáveis Independentes" subtitle="Leitura visual entre X e Y no conjunto filtrado.">
-            <div className="download-actions-bar">
-              {graficosSecao9.length > 1 ? <span className="download-actions-label">Fazer download:</span> : null}
-              {graficosSecao9.map((item, idx) => {
-                const fileBase = `secao10_${sanitizeFileName(item.label, `dispersao_${idx + 1}`)}`
-                return (
+            {secao10PngPayload ? (
+              <div className="section-disclaimer-warning">
+                Modo PNG automático para mais de {secao10PngPayload.limiar} pontos. Ao final da seção, podem ser gerados individualmente os gráficos interativos.
+              </div>
+            ) : null}
+            {secao10PngPayload ? (
+              <>
+                <div className="download-actions-bar">
                   <button
-                    key={`s9-dl-${item.id}`}
                     type="button"
                     className="btn-download-subtle"
-                    title={item.legenda}
-                    onClick={() => onDownloadFigurePng(item.figure, fileBase, { forceHideLegend: true })}
-                    disabled={loading || downloadingAssets || !item.figure}
+                    onClick={() => onDownloadPngBase64(secao10PngPayload.imageBase64, secao10PngPayload.mimeType, 'secao10_dispersao_png')}
+                    disabled={loading || downloadingAssets}
                   >
-                    {graficosSecao9.length > 1 ? item.label : 'Fazer download'}
+                    Fazer download
                   </button>
-                )
-              })}
-              {graficosSecao9.length > 1 ? (
-                <button
-                  type="button"
-                  className="btn-download-subtle"
-                  onClick={() => onDownloadFiguresPngBatch(
-                    graficosSecao9.map((item, idx) => ({
-                      figure: item.figure,
-                      fileNameBase: `secao10_${sanitizeFileName(item.label, `dispersao_${idx + 1}`)}`,
-                      forceHideLegend: true,
-                    })),
-                  )}
-                  disabled={loading || downloadingAssets || graficosSecao9.length === 0}
-                >
-                  Todos
-                </button>
-              ) : null}
-            </div>
-            {graficosSecao9.length > 0 ? (
-              <div className="plot-grid-scatter" style={{ '--plot-cols': colunasGraficosSecao9 }}>
-                {graficosSecao9.map((item) => (
-                  <PlotFigure
-                    key={`s9-plot-${item.id}`}
-                    figure={item.figure}
-                    title={item.title}
-                    subtitle={item.subtitle}
-                    forceHideLegend
-                    className="plot-stretch"
-                    lazy
+                </div>
+                <div className="scatter-png-card">
+                  <img
+                    src={`data:${secao10PngPayload.mimeType};base64,${secao10PngPayload.imageBase64}`}
+                    alt="Gráficos de dispersão em PNG"
+                    className="scatter-png-image"
                   />
-                ))}
-              </div>
+                </div>
+                <div className="scatter-interactive-control">
+                  <label>Gráfico interativo (opcional)</label>
+                  <select
+                    value={secao10InterativoSelecionado}
+                    onChange={(e) => {
+                      void onChangeSecao10InterativoSelecionado(e.target.value)
+                    }}
+                    disabled={loading}
+                  >
+                    <option value="none">Sem gráfico</option>
+                    {secao10InterativoOpcoes.map((item) => (
+                      <option key={`s10-int-opt-${item}`} value={item}>{item}</option>
+                    ))}
+                  </select>
+                </div>
+                {secao10InterativoSelecionado !== 'none' ? (
+                  <>
+                    <div className="download-actions-bar">
+                      <button
+                        type="button"
+                        className="btn-download-subtle"
+                        title={secao10InterativoAtual?.legenda || ''}
+                        onClick={() => {
+                          if (!secao10InterativoAtual) return
+                          void onDownloadFigurePng(
+                            secao10InterativoAtual.figure,
+                            `secao10_${sanitizeFileName(secao10InterativoAtual.label, 'dispersao_interativo')}`,
+                            { forceHideLegend: true },
+                          )
+                        }}
+                        disabled={loading || downloadingAssets || !secao10InterativoAtual?.figure}
+                      >
+                        Fazer download
+                      </button>
+                    </div>
+                    {secao10InterativoAtual?.figure ? (
+                      <PlotFigure
+                        key={`s9-interativo-plot-${secao10InterativoAtual.id}`}
+                        figure={secao10InterativoAtual.figure}
+                        title={secao10InterativoAtual.title}
+                        subtitle={secao10InterativoAtual.subtitle}
+                        forceHideLegend
+                        className="plot-stretch"
+                        lazy
+                      />
+                    ) : (
+                      <div className="empty-box">Grafico indisponivel.</div>
+                    )}
+                  </>
+                ) : null}
+              </>
             ) : (
-              <div className="empty-box">Grafico indisponivel.</div>
+              <>
+                <div className="download-actions-bar">
+                  {graficosSecao9.length > 1 ? <span className="download-actions-label">Fazer download:</span> : null}
+                  {graficosSecao9.map((item, idx) => {
+                    const fileBase = `secao10_${sanitizeFileName(item.label, `dispersao_${idx + 1}`)}`
+                    return (
+                      <button
+                        key={`s9-dl-${item.id}`}
+                        type="button"
+                        className="btn-download-subtle"
+                        title={item.legenda}
+                        onClick={() => onDownloadFigurePng(item.figure, fileBase, { forceHideLegend: true })}
+                        disabled={loading || downloadingAssets || !item.figure}
+                      >
+                        {graficosSecao9.length > 1 ? item.label : 'Fazer download'}
+                      </button>
+                    )
+                  })}
+                  {graficosSecao9.length > 1 ? (
+                    <button
+                      type="button"
+                      className="btn-download-subtle"
+                      onClick={() => onDownloadFiguresPngBatch(
+                        graficosSecao9.map((item, idx) => ({
+                          figure: item.figure,
+                          fileNameBase: `secao10_${sanitizeFileName(item.label, `dispersao_${idx + 1}`)}`,
+                          forceHideLegend: true,
+                        })),
+                      )}
+                      disabled={loading || downloadingAssets || graficosSecao9.length === 0}
+                    >
+                      Todos
+                    </button>
+                  ) : null}
+                </div>
+                {graficosSecao9.length > 0 ? (
+                  <div className="plot-grid-scatter" style={{ '--plot-cols': colunasGraficosSecao9 }}>
+                    {graficosSecao9.map((item) => (
+                      <PlotFigure
+                        key={`s9-plot-${item.id}`}
+                        figure={item.figure}
+                        title={item.title}
+                        subtitle={item.subtitle}
+                        forceHideLegend
+                        className="plot-stretch"
+                        lazy
+                      />
+                    ))}
+                  </div>
+                ) : (
+                  <div className="empty-box">Grafico indisponivel.</div>
+                )}
+              </>
             )}
           </SectionBlock>
 
@@ -3740,6 +4085,11 @@ export default function ElaboracaoTab({ sessionId }) {
       {fit ? (
         <>
           <SectionBlock step="13" title="Visualizar Mapa dos Dados de Mercado" subtitle="Escolha livre dos eixos para análise gráfica do modelo.">
+            {secao13PngPayload ? (
+              <div className="section-disclaimer-warning">
+                Modo PNG automático para mais de {secao13PngPayload.limiar} pontos. Ao final da seção, podem ser gerados individualmente os gráficos interativos.
+              </div>
+            ) : null}
             <div className="row dispersao-config-row">
               <div className="dispersao-config-field">
                 <label>Eixo X</label>
@@ -3810,56 +4160,148 @@ export default function ElaboracaoTab({ sessionId }) {
                 </div>
               ) : null}
             </div>
-            <div className="download-actions-bar">
-              {graficosSecao12.length > 1 ? <span className="download-actions-label">Fazer download:</span> : null}
-              {graficosSecao12.map((item, idx) => {
-                const fileBase = `secao13_${sanitizeFileName(item.label, `dispersao_${idx + 1}`)}`
-                return (
+            {secao13PngPayload ? (
+              <>
+                <div className="download-actions-bar">
                   <button
-                    key={`s12-dl-${item.id}`}
                     type="button"
                     className="btn-download-subtle"
-                    title={item.legenda}
-                    onClick={() => onDownloadFigurePng(item.figure, fileBase, { forceHideLegend: true })}
-                    disabled={loading || downloadingAssets || !item.figure}
+                    onClick={() => onDownloadPngBase64(secao13PngPayload.imageBase64, secao13PngPayload.mimeType, 'secao13_dispersao_png')}
+                    disabled={loading || downloadingAssets}
                   >
-                    {graficosSecao12.length > 1 ? item.label : 'Fazer download'}
+                    Fazer download
                   </button>
-                )
-              })}
-              {graficosSecao12.length > 1 ? (
-                <button
-                  type="button"
-                  className="btn-download-subtle"
-                  onClick={() => onDownloadFiguresPngBatch(
-                    graficosSecao12.map((item, idx) => ({
-                      figure: item.figure,
-                      fileNameBase: `secao13_${sanitizeFileName(item.label, `dispersao_${idx + 1}`)}`,
-                      forceHideLegend: true,
-                    })),
-                  )}
-                  disabled={loading || downloadingAssets || graficosSecao12.length === 0}
-                >
-                  Todos
-                </button>
-              ) : null}
-            </div>
-            {graficosSecao12.length > 0 ? (
-              <div className="plot-grid-scatter" style={{ '--plot-cols': colunasGraficosSecao12 }}>
-                {graficosSecao12.map((item) => (
-                  <PlotFigure
-                    key={`s12-plot-${item.id}`}
-                    figure={item.figure}
-                    title={item.title}
-                    subtitle={item.subtitle}
-                    forceHideLegend
-                    className="plot-stretch"
-                    lazy
+                </div>
+                <div className="scatter-png-card">
+                  <img
+                    src={`data:${secao13PngPayload.mimeType};base64,${secao13PngPayload.imageBase64}`}
+                    alt="Dispersão do modelo em PNG"
+                    className="scatter-png-image"
                   />
-                ))}
-              </div>
+                </div>
+                <div className="scatter-interactive-control">
+                  <label>Renderização interativa</label>
+                  <select
+                    value={secao13InterativoSelecionado === 'none' ? 'off' : 'on'}
+                    onChange={(e) => {
+                      const next = String(e.target.value || 'off')
+                      if (next === 'off') {
+                        void onChangeSecao13InterativoSelecionado('none')
+                        return
+                      }
+                      const firstOption = secao13InterativoOpcoes[0] || 'none'
+                      void onChangeSecao13InterativoSelecionado(firstOption)
+                    }}
+                    disabled={loading}
+                  >
+                    <option value="off">Sem gráfico interativo</option>
+                    <option value="on">Com gráfico interativo</option>
+                  </select>
+                </div>
+                {secao13InterativoSelecionado !== 'none' ? (
+                  <>
+                    <div className="scatter-interactive-control">
+                      <label>Variável do gráfico interativo</label>
+                      <select
+                        value={secao13InterativoSelecionado}
+                        onChange={(e) => {
+                          void onChangeSecao13InterativoSelecionado(e.target.value)
+                        }}
+                        disabled={loading}
+                      >
+                        {secao13InterativoOpcoes.map((item) => (
+                          <option key={`s13-int-opt-bottom-${item}`} value={item}>{item}</option>
+                        ))}
+                      </select>
+                    </div>
+                    <div className="download-actions-bar">
+                      <button
+                        type="button"
+                        className="btn-download-subtle"
+                        title={secao13InterativoAtual?.legenda || ''}
+                        onClick={() => {
+                          if (!secao13InterativoAtual) return
+                          void onDownloadFigurePng(
+                            secao13InterativoAtual.figure,
+                            `secao13_${sanitizeFileName(secao13InterativoAtual.label, 'dispersao_interativo')}`,
+                            { forceHideLegend: true },
+                          )
+                        }}
+                        disabled={loading || downloadingAssets || !secao13InterativoAtual?.figure}
+                      >
+                        Fazer download
+                      </button>
+                    </div>
+                    {secao13InterativoAtual?.figure ? (
+                      <PlotFigure
+                        key={`s12-interativo-plot-${secao13InterativoAtual.id}`}
+                        figure={secao13InterativoAtual.figure}
+                        title={secao13InterativoAtual.title}
+                        subtitle={secao13InterativoAtual.subtitle}
+                        forceHideLegend
+                        className="plot-stretch"
+                        lazy
+                      />
+                    ) : (
+                      <div className="empty-box">Grafico indisponivel.</div>
+                    )}
+                  </>
+                ) : null}
+              </>
             ) : (
-              <div className="empty-box">Grafico indisponivel.</div>
+              <>
+                <div className="download-actions-bar">
+                  {graficosSecao12.length > 1 ? <span className="download-actions-label">Fazer download:</span> : null}
+                  {graficosSecao12.map((item, idx) => {
+                    const fileBase = `secao13_${sanitizeFileName(item.label, `dispersao_${idx + 1}`)}`
+                    return (
+                      <button
+                        key={`s12-dl-${item.id}`}
+                        type="button"
+                        className="btn-download-subtle"
+                        title={item.legenda}
+                        onClick={() => onDownloadFigurePng(item.figure, fileBase, { forceHideLegend: true })}
+                        disabled={loading || downloadingAssets || !item.figure}
+                      >
+                        {graficosSecao12.length > 1 ? item.label : 'Fazer download'}
+                      </button>
+                    )
+                  })}
+                  {graficosSecao12.length > 1 ? (
+                    <button
+                      type="button"
+                      className="btn-download-subtle"
+                      onClick={() => onDownloadFiguresPngBatch(
+                        graficosSecao12.map((item, idx) => ({
+                          figure: item.figure,
+                          fileNameBase: `secao13_${sanitizeFileName(item.label, `dispersao_${idx + 1}`)}`,
+                          forceHideLegend: true,
+                        })),
+                      )}
+                      disabled={loading || downloadingAssets || graficosSecao12.length === 0}
+                    >
+                      Todos
+                    </button>
+                  ) : null}
+                </div>
+                {graficosSecao12.length > 0 ? (
+                  <div className="plot-grid-scatter" style={{ '--plot-cols': colunasGraficosSecao12 }}>
+                    {graficosSecao12.map((item) => (
+                      <PlotFigure
+                        key={`s12-plot-${item.id}`}
+                        figure={item.figure}
+                        title={item.title}
+                        subtitle={item.subtitle}
+                        forceHideLegend
+                        className="plot-stretch"
+                        lazy
+                      />
+                    ))}
+                  </div>
+                ) : (
+                  <div className="empty-box">Grafico indisponivel.</div>
+                )}
+              </>
             )}
           </SectionBlock>
 
@@ -3916,37 +4358,58 @@ export default function ElaboracaoTab({ sessionId }) {
           </SectionBlock>
 
           <SectionBlock step="15" title="Gráficos de Diagnóstico do Modelo" subtitle="Obs x calc, resíduos, histograma, Cook e correlação.">
+            {secao15DiagnosticoPng ? (
+              <div className="section-disclaimer-warning">
+                Modo PNG automático para mais de {fit.graficos_diagnostico_limiar_png || 1000} pontos. Ao final da seção, podem ser gerados individualmente os gráficos interativos.
+              </div>
+            ) : null}
             <div className="download-actions-bar">
               <span className="download-actions-label">Fazer download:</span>
               <button
                 type="button"
                 className="btn-download-subtle"
-                onClick={() => onDownloadFigurePng(fit.grafico_obs_calc, 'secao15_obs_calc')}
-                disabled={loading || downloadingAssets || !fit.grafico_obs_calc}
+                onClick={() => (
+                  secao15DiagnosticoPng
+                    ? onDownloadPngBase64(fit.grafico_obs_calc_png?.image_base64, fit.grafico_obs_calc_png?.mime_type, 'secao15_obs_calc')
+                    : onDownloadFigurePng(fit.grafico_obs_calc, 'secao15_obs_calc')
+                )}
+                disabled={loading || downloadingAssets || (secao15DiagnosticoPng ? !fit.grafico_obs_calc_png?.image_base64 : !fit.grafico_obs_calc)}
               >
                 Obs x calc
               </button>
               <button
                 type="button"
                 className="btn-download-subtle"
-                onClick={() => onDownloadFigurePng(fit.grafico_residuos, 'secao15_residuos')}
-                disabled={loading || downloadingAssets || !fit.grafico_residuos}
+                onClick={() => (
+                  secao15DiagnosticoPng
+                    ? onDownloadPngBase64(fit.grafico_residuos_png?.image_base64, fit.grafico_residuos_png?.mime_type, 'secao15_residuos')
+                    : onDownloadFigurePng(fit.grafico_residuos, 'secao15_residuos')
+                )}
+                disabled={loading || downloadingAssets || (secao15DiagnosticoPng ? !fit.grafico_residuos_png?.image_base64 : !fit.grafico_residuos)}
               >
                 Resíduos
               </button>
               <button
                 type="button"
                 className="btn-download-subtle"
-                onClick={() => onDownloadFigurePng(fit.grafico_histograma, 'secao15_histograma')}
-                disabled={loading || downloadingAssets || !fit.grafico_histograma}
+                onClick={() => (
+                  secao15DiagnosticoPng
+                    ? onDownloadPngBase64(fit.grafico_histograma_png?.image_base64, fit.grafico_histograma_png?.mime_type, 'secao15_histograma')
+                    : onDownloadFigurePng(fit.grafico_histograma, 'secao15_histograma')
+                )}
+                disabled={loading || downloadingAssets || (secao15DiagnosticoPng ? !fit.grafico_histograma_png?.image_base64 : !fit.grafico_histograma)}
               >
                 Histograma
               </button>
               <button
                 type="button"
                 className="btn-download-subtle"
-                onClick={() => onDownloadFigurePng(fit.grafico_cook, 'secao15_cook', { forceHideLegend: true })}
-                disabled={loading || downloadingAssets || !fit.grafico_cook}
+                onClick={() => (
+                  secao15DiagnosticoPng
+                    ? onDownloadPngBase64(fit.grafico_cook_png?.image_base64, fit.grafico_cook_png?.mime_type, 'secao15_cook')
+                    : onDownloadFigurePng(fit.grafico_cook, 'secao15_cook', { forceHideLegend: true })
+                )}
+                disabled={loading || downloadingAssets || (secao15DiagnosticoPng ? !fit.grafico_cook_png?.image_base64 : !fit.grafico_cook)}
               >
                 Cook
               </button>
@@ -3961,27 +4424,102 @@ export default function ElaboracaoTab({ sessionId }) {
               <button
                 type="button"
                 className="btn-download-subtle"
-                onClick={() => onDownloadFiguresPngBatch([
-                  { figure: fit.grafico_obs_calc, fileNameBase: 'secao15_obs_calc' },
-                  { figure: fit.grafico_residuos, fileNameBase: 'secao15_residuos' },
-                  { figure: fit.grafico_histograma, fileNameBase: 'secao15_histograma' },
-                  { figure: fit.grafico_cook, fileNameBase: 'secao15_cook', forceHideLegend: true },
-                  { figure: fit.grafico_correlacao, fileNameBase: 'secao15_correlacao' },
-                ])}
-                disabled={loading || downloadingAssets || (!fit.grafico_obs_calc && !fit.grafico_residuos && !fit.grafico_histograma && !fit.grafico_cook && !fit.grafico_correlacao)}
+                onClick={() => {
+                  if (secao15DiagnosticoPng) {
+                    void onDownloadPngBase64Batch([
+                      { imageBase64: fit.grafico_obs_calc_png?.image_base64, mimeType: fit.grafico_obs_calc_png?.mime_type, fileNameBase: 'secao15_obs_calc' },
+                      { imageBase64: fit.grafico_residuos_png?.image_base64, mimeType: fit.grafico_residuos_png?.mime_type, fileNameBase: 'secao15_residuos' },
+                      { imageBase64: fit.grafico_histograma_png?.image_base64, mimeType: fit.grafico_histograma_png?.mime_type, fileNameBase: 'secao15_histograma' },
+                      { imageBase64: fit.grafico_cook_png?.image_base64, mimeType: fit.grafico_cook_png?.mime_type, fileNameBase: 'secao15_cook' },
+                    ])
+                    return
+                  }
+                  void onDownloadFiguresPngBatch([
+                    { figure: fit.grafico_obs_calc, fileNameBase: 'secao15_obs_calc' },
+                    { figure: fit.grafico_residuos, fileNameBase: 'secao15_residuos' },
+                    { figure: fit.grafico_histograma, fileNameBase: 'secao15_histograma' },
+                    { figure: fit.grafico_cook, fileNameBase: 'secao15_cook', forceHideLegend: true },
+                    { figure: fit.grafico_correlacao, fileNameBase: 'secao15_correlacao' },
+                  ])
+                }}
+                disabled={loading || downloadingAssets || (
+                  secao15DiagnosticoPng
+                    ? (!fit.grafico_obs_calc_png?.image_base64 && !fit.grafico_residuos_png?.image_base64 && !fit.grafico_histograma_png?.image_base64 && !fit.grafico_cook_png?.image_base64)
+                    : (!fit.grafico_obs_calc && !fit.grafico_residuos && !fit.grafico_histograma && !fit.grafico_cook && !fit.grafico_correlacao)
+                )}
               >
                 Todos
               </button>
             </div>
-            <div className="plot-grid-2-fixed">
-              <PlotFigure figure={fit.grafico_obs_calc} title="Obs x Calc" />
-              <PlotFigure figure={fit.grafico_residuos} title="Resíduos" />
-              <PlotFigure figure={fit.grafico_histograma} title="Histograma" />
-              <PlotFigure figure={fit.grafico_cook} title="Cook" forceHideLegend />
-            </div>
+            {secao15DiagnosticoPng ? (
+              <div className="plot-grid-2-fixed">
+                <DiagnosticPngCard title="Obs x Calc" pngPayload={fit.grafico_obs_calc_png} alt="Obs x Calc em PNG" />
+                <DiagnosticPngCard title="Resíduos" pngPayload={fit.grafico_residuos_png} alt="Resíduos em PNG" />
+                <DiagnosticPngCard title="Histograma" pngPayload={fit.grafico_histograma_png} alt="Histograma em PNG" />
+                <DiagnosticPngCard title="Cook" pngPayload={fit.grafico_cook_png} alt="Cook em PNG" />
+              </div>
+            ) : (
+              <div className="plot-grid-2-fixed">
+                <PlotFigure figure={fit.grafico_obs_calc} title="Obs x Calc" />
+                <PlotFigure figure={fit.grafico_residuos} title="Resíduos" />
+                <PlotFigure figure={fit.grafico_histograma} title="Histograma" />
+                <PlotFigure figure={fit.grafico_cook} title="Cook" forceHideLegend />
+              </div>
+            )}
             <div className="plot-full-width">
               <PlotFigure figure={fit.grafico_correlacao} title="Matriz de correlação" className="plot-correlation-card" />
             </div>
+            {secao15DiagnosticoPng ? (
+              <>
+                <div className="scatter-interactive-control">
+                  <label>Gráfico interativo (opcional)</label>
+                  <select
+                    value={secao15InterativoSelecionado}
+                    onChange={(e) => {
+                      void onChangeSecao15InterativoSelecionado(e.target.value)
+                    }}
+                    disabled={loading}
+                  >
+                    {secao15InterativoOpcoes.map((item) => (
+                      <option key={`s15-int-opt-${item.value}`} value={item.value}>{item.label}</option>
+                    ))}
+                  </select>
+                </div>
+                {secao15InterativoSelecionado !== 'none' ? (
+                  <>
+                    <div className="download-actions-bar">
+                      <button
+                        type="button"
+                        className="btn-download-subtle"
+                        onClick={() => {
+                          if (!secao15InterativoFigura) return
+                          void onDownloadFigurePng(
+                            secao15InterativoFigura,
+                            `secao15_${sanitizeFileName(secao15InterativoLabel, 'diagnostico_interativo')}`,
+                            { forceHideLegend: secao15InterativoSelecionado === 'cook' },
+                          )
+                        }}
+                        disabled={loading || downloadingAssets || !secao15InterativoFigura}
+                      >
+                        Fazer download
+                      </button>
+                    </div>
+                    {secao15InterativoFigura ? (
+                      <PlotFigure
+                        key={`s15-interativo-${secao15InterativoSelecionado}`}
+                        figure={secao15InterativoFigura}
+                        title={secao15InterativoLabel}
+                        forceHideLegend={secao15InterativoSelecionado === 'cook'}
+                        className="plot-stretch"
+                        lazy
+                      />
+                    ) : (
+                      <div className="empty-box">Grafico indisponivel.</div>
+                    )}
+                  </>
+                ) : null}
+              </>
+            ) : null}
           </SectionBlock>
 
           <SectionBlock step="16" title="Analisar Resíduos" subtitle="Métricas para identificação de observações influentes.">

frontend/src/styles.css

@@ -2969,6 +2969,66 @@ button.btn-upload-select {
   gap: 12px;
 }
 
+.section-disclaimer-warning {
+  margin: 0 0 10px;
+  padding: 9px 12px;
+  border-radius: 10px;
+  border: 1px solid #efcf75;
+  background: linear-gradient(180deg, #fff8dd 0%, #ffefb8 100%);
+  color: #6f4d00;
+  font-size: 0.86rem;
+  font-weight: 700;
+}
+
+.scatter-png-card {
+  border: 1px solid #dbe5ef;
+  border-radius: 12px;
+  background: #fff;
+  padding: 10px;
+}
+
+.scatter-png-image {
+  display: block;
+  width: 100%;
+  height: auto;
+  border-radius: 8px;
+}
+
+.scatter-interactive-control {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+  margin: 12px 0;
+}
+
+.scatter-interactive-control label {
+  font-weight: 700;
+  color: #334b62;
+}
+
+.scatter-interactive-control select {
+  min-width: 220px;
+  max-width: 340px;
+}
+
+.scatter-interactive-hint {
+  color: #5f7387;
+  font-size: 0.84rem;
+}
+
+.plot-png-card {
+  padding: 8px;
+}
+
+.plot-png-image {
+  display: block;
+  width: 100%;
+  height: auto;
+  border-radius: 8px;
+  border: 1px solid #dbe5ef;
+}
+
 .plot-card {
   border: 1px solid #dbe5ef;
   border-radius: 12px;