Refine diagnostic section layout

frontend/src/components/ElaboracaoTab.jsx

@@ -711,6 +711,9 @@ function ScatterPlotCarousel({
   sectionFilePrefix,
   onDownloadFigure,
   onDownloadAll,
+  renderItem = null,
+  downloadAllLabel = 'Baixar todos os gráficos',
+  pillsAriaLabel = 'Escolher dupla de gráficos',
   loading = false,
   downloadingAssets = false,
 }) {
@@ -748,7 +751,9 @@ function ScatterPlotCarousel({
   }
 
   function buildFileNameBase(item, itemIndex) {
-    return `${sectionFilePrefix}_${sanitizeFileName(item?.label, `dispersao_${itemIndex + 1}`)}`
+    if (item?.fileNameBase) return sanitizeFileName(item.fileNameBase, `grafico_${itemIndex + 1}`)
+    const prefix = sectionFilePrefix ? `${sectionFilePrefix}_` : ''
+    return `${prefix}${sanitizeFileName(item?.label, `dispersao_${itemIndex + 1}`)}`
   }
 
   return (
@@ -761,12 +766,12 @@ function ScatterPlotCarousel({
             onClick={onDownloadAll}
             disabled={loading || downloadingAssets || safeItems.length === 0}
           >
-            Baixar todos os gráficos
+            {downloadAllLabel}
           </button>
         </div>
       ) : null}
       {totalPages > 1 ? (
-        <div className="scatter-carousel-pills" aria-label="Escolher dupla de gráficos">
+        <div className="scatter-carousel-pills" aria-label={pillsAriaLabel}>
           {Array.from({ length: totalPages }, (_, pageIndex) => {
             const pairStart = (pageIndex * pageSize) + 1
             const pairEnd = Math.min(pairStart + pageSize - 1, safeItems.length)
@@ -786,28 +791,38 @@ function ScatterPlotCarousel({
           })}
         </div>
       ) : null}
-      <div className="scatter-carousel-track">
+      <div className={`scatter-carousel-track${visibleItems.length === 1 ? ' is-single' : ''}`}>
         {visibleItems.map((item, visibleIndex) => {
           const itemIndex = startIndex + visibleIndex
           const fileNameBase = buildFileNameBase(item, itemIndex)
+          if (typeof renderItem === 'function') {
+            return (
+              <React.Fragment key={`${itemKeyPrefix}-${item.id || itemIndex}`}>
+                {renderItem({ item, itemIndex, fileNameBase })}
+              </React.Fragment>
+            )
+          }
+          const forceHideLegend = item.forceHideLegend ?? true
+          const showPointIndexToggle = item.showPointIndexToggle ?? true
+          const downloadOptions = item.downloadOptions || { forceHideLegend }
           return (
           <PlotFigure
-            key={`${itemKeyPrefix}-${item.id}`}
+            key={`${itemKeyPrefix}-${item.id || itemIndex}`}
             figure={item.figure}
-            indexedFigure={indexedFigureMap?.get(String(item.label || '').trim()) || null}
-            onRequestIndexedFigure={onRequestIndexedFigure}
+            indexedFigure={item.indexedFigure || indexedFigureMap?.get(String(item.label || '').trim()) || null}
+            onRequestIndexedFigure={item.onRequestIndexedFigure || onRequestIndexedFigure}
             title={item.title}
             subtitle={item.subtitle}
-            showPointIndexToggle
-            forceHideLegend
-            className="plot-stretch"
+            showPointIndexToggle={showPointIndexToggle}
+            forceHideLegend={forceHideLegend}
+            className={item.className || 'plot-stretch'}
             lazy
             headerActions={typeof onDownloadFigure === 'function' ? (
               <button
                 type="button"
                 className="btn-download-subtle plot-card-download-btn"
                 title={item.legenda || item.label || 'Fazer download'}
-                onClick={() => onDownloadFigure(item.figure, fileNameBase, { forceHideLegend: true })}
+                onClick={() => onDownloadFigure(item.figure, fileNameBase, downloadOptions)}
                 disabled={loading || downloadingAssets || !item.figure}
               >
                 Fazer download
@@ -969,17 +984,25 @@ function getDispersaoYLabel(eixoYTipo, eixoYResiduo, eixoYColuna, colunaYComRotu
   return `${colunaYComRotulo} transformado`
 }
 
-function DiagnosticPngCard({ title, pngPayload, alt }) {
+function DiagnosticPngCard({ title, pngPayload, alt, headerActions = null, className = '' }) {
   if (!pngPayload?.image_base64) {
     return (
       <div className="empty-box">Grafico indisponivel.</div>
     )
   }
   const mime = String(pngPayload.mime_type || 'image/png').trim() || 'image/png'
+  const cardClassName = `plot-card plot-png-card ${className}`.trim()
   return (
-    <div className="plot-card plot-png-card">
+    <div className={cardClassName}>
       <div className="plot-card-head">
-        <h4 className="plot-card-title">{title}</h4>
+        <div className="plot-card-head-main">
+          <h4 className="plot-card-title">{title}</h4>
+        </div>
+        {headerActions ? (
+          <div className="plot-card-head-actions">
+            {headerActions}
+          </div>
+        ) : null}
       </div>
       <img
         src={`data:${mime};base64,${pngPayload.image_base64}`}
@@ -5723,9 +5746,8 @@ export default function ElaboracaoTab({ sessionId, authUser, quickLoadRequest =
               {[
                 { id: 'diagnosticos', label: 'Diagnósticos' },
                 { id: 'testes', label: 'Testes' },
-                { id: 'equacoes', label: 'Equações' },
                 { id: 'coeficientes', label: 'Coeficientes' },
-                { id: 'obs_calc', label: 'Obs x Calc' },
+                { id: 'equacoes', label: 'Equações' },
               ].map((tab) => (
                 <button
                   key={`sec14-tab-${tab.id}`}
@@ -5769,17 +5791,6 @@ export default function ElaboracaoTab({ sessionId, authUser, quickLoadRequest =
                 )
               ) : null}
 
-              {section14Tab === 'equacoes' ? (
-                <div className="equation-formats-section section14-equations-panel">
-                  <h4>Equações do Modelo</h4>
-                  <EquationFormatsPanel
-                    equacoes={fit.equacoes}
-                    onDownload={(mode) => void onDownloadEquacao(mode)}
-                    disabled={loading || downloadingAssets}
-                  />
-                </div>
-              ) : null}
-
               {section14Tab === 'coeficientes' ? (
                 <div className="section14-table-panel">
                   <div className="section14-table-head">
@@ -5797,20 +5808,14 @@ export default function ElaboracaoTab({ sessionId, authUser, quickLoadRequest =
                 </div>
               ) : null}
 
-              {section14Tab === 'obs_calc' ? (
-                <div className="section14-table-panel">
-                  <div className="section14-table-head">
-                    <h4>Valores Observados x Calculados</h4>
-                    <button
-                      type="button"
-                      className="btn-download-subtle"
-                      onClick={() => onDownloadTableCsv(fit.tabela_obs_calc, 'secao14_obs_calc')}
-                      disabled={loading || downloadingAssets || !fit.tabela_obs_calc}
-                    >
-                      Fazer download
-                    </button>
-                  </div>
-                  <DataTable table={fit.tabela_obs_calc} maxHeight={460} />
+              {section14Tab === 'equacoes' ? (
+                <div className="equation-formats-section section14-equations-panel">
+                  <h4>Equações do Modelo</h4>
+                  <EquationFormatsPanel
+                    equacoes={fit.equacoes}
+                    onDownload={(mode) => void onDownloadEquacao(mode)}
+                    disabled={loading || downloadingAssets}
+                  />
                 </div>
               ) : null}
             </div>
@@ -5822,112 +5827,94 @@ export default function ElaboracaoTab({ sessionId, authUser, quickLoadRequest =
                 Modo PNG automático para mais de {fit.graficos_diagnostico_limiar_png || 1500} 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={() => (
-                  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={() => (
-                  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={() => (
-                  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={() => (
-                  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>
-              <button
-                type="button"
-                className="btn-download-subtle"
-                onClick={() => onDownloadFigurePng(fit.grafico_correlacao, 'secao15_correlacao')}
-                disabled={loading || downloadingAssets || !fit.grafico_correlacao}
-              >
-                Correlação
-              </button>
-              <button
-                type="button"
-                className="btn-download-subtle"
-                onClick={() => {
-                  if (secao15DiagnosticoPng) {
-                    void onDownloadPngBase64Batch([
+            {secao15DiagnosticoPng ? (
+              <ScatterPlotCarousel
+                items={[
+                  { id: 'obs_calc_png', type: 'png', label: 'Obs x Calc', title: 'Obs x Calc', pngPayload: fit.grafico_obs_calc_png, fileNameBase: 'secao15_obs_calc' },
+                  { id: 'residuos_png', type: 'png', label: 'Resíduos', title: 'Resíduos', pngPayload: fit.grafico_residuos_png, fileNameBase: 'secao15_residuos' },
+                  { id: 'histograma_png', type: 'png', label: 'Histograma', title: 'Histograma', pngPayload: fit.grafico_histograma_png, fileNameBase: 'secao15_histograma' },
+                  { id: 'cook_png', type: 'png', label: 'Cook', title: 'Cook', pngPayload: fit.grafico_cook_png, fileNameBase: 'secao15_cook' },
+                  { id: 'correlacao', type: 'figure', label: 'Correlação', title: 'Matriz de correlação', figure: fit.grafico_correlacao, fileNameBase: 'secao15_correlacao', className: 'plot-stretch plot-correlation-card' },
+                ]}
+                itemKeyPrefix="s15-png"
+                onDownloadAll={() => {
+                  void (async () => {
+                    const pngDownloads = [
                       { 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' },
-                  ])
+                    ]
+                    if (pngDownloads.some((item) => String(item.imageBase64 || '').trim())) {
+                      await onDownloadPngBase64Batch(pngDownloads)
+                    }
+                    if (fit.grafico_correlacao) {
+                      await onDownloadFigurePng(fit.grafico_correlacao, '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)
+                renderItem={({ item, fileNameBase }) => (
+                  item.type === 'png' ? (
+                    <DiagnosticPngCard
+                      title={item.title}
+                      pngPayload={item.pngPayload}
+                      alt={`${item.title} em PNG`}
+                      className="plot-stretch"
+                      headerActions={(
+                        <button
+                          type="button"
+                          className="btn-download-subtle plot-card-download-btn"
+                          onClick={() => onDownloadPngBase64(item.pngPayload?.image_base64, item.pngPayload?.mime_type, fileNameBase)}
+                          disabled={loading || downloadingAssets || !item.pngPayload?.image_base64}
+                        >
+                          Fazer download
+                        </button>
+                      )}
+                    />
+                  ) : (
+                    <PlotFigure
+                      figure={item.figure}
+                      title={item.title}
+                      className={item.className}
+                      lazy
+                      headerActions={(
+                        <button
+                          type="button"
+                          className="btn-download-subtle plot-card-download-btn"
+                          onClick={() => onDownloadFigurePng(item.figure, fileNameBase)}
+                          disabled={loading || downloadingAssets || !item.figure}
+                        >
+                          Fazer download
+                        </button>
+                      )}
+                    />
+                  )
                 )}
-              >
-                Todos
-              </button>
-            </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>
+                loading={loading}
+                downloadingAssets={downloadingAssets}
+              />
             ) : (
-              <div className="plot-grid-2-fixed">
-                <PlotFigure figure={fit.grafico_obs_calc} indexedFigure={fit.grafico_obs_calc_com_indices || null} onRequestIndexedFigure={() => ensureSecao15GraficoComIndices('obs_calc')} title="Obs x Calc" showPointIndexToggle />
-                <PlotFigure figure={fit.grafico_residuos} indexedFigure={fit.grafico_residuos_com_indices || null} onRequestIndexedFigure={() => ensureSecao15GraficoComIndices('residuos')} title="Resíduos" showPointIndexToggle />
-                <PlotFigure figure={fit.grafico_histograma} indexedFigure={fit.grafico_histograma_com_indices || null} onRequestIndexedFigure={() => ensureSecao15GraficoComIndices('histograma')} title="Histograma" showPointIndexToggle />
-                <PlotFigure figure={fit.grafico_cook} indexedFigure={fit.grafico_cook_com_indices || null} onRequestIndexedFigure={() => ensureSecao15GraficoComIndices('cook')} title="Cook" showPointIndexToggle forceHideLegend />
-              </div>
+              <ScatterPlotCarousel
+                items={[
+                  { id: 'obs_calc', label: 'Obs x Calc', title: 'Obs x Calc', figure: fit.grafico_obs_calc, indexedFigure: fit.grafico_obs_calc_com_indices || null, onRequestIndexedFigure: () => ensureSecao15GraficoComIndices('obs_calc'), fileNameBase: 'secao15_obs_calc', forceHideLegend: false, downloadOptions: { forceHideLegend: false } },
+                  { id: 'residuos', label: 'Resíduos', title: 'Resíduos', figure: fit.grafico_residuos, indexedFigure: fit.grafico_residuos_com_indices || null, onRequestIndexedFigure: () => ensureSecao15GraficoComIndices('residuos'), fileNameBase: 'secao15_residuos', forceHideLegend: false, downloadOptions: { forceHideLegend: false } },
+                  { id: 'histograma', label: 'Histograma', title: 'Histograma', figure: fit.grafico_histograma, indexedFigure: fit.grafico_histograma_com_indices || null, onRequestIndexedFigure: () => ensureSecao15GraficoComIndices('histograma'), fileNameBase: 'secao15_histograma', forceHideLegend: false, downloadOptions: { forceHideLegend: false } },
+                  { id: 'cook', label: 'Cook', title: 'Cook', figure: fit.grafico_cook, indexedFigure: fit.grafico_cook_com_indices || null, onRequestIndexedFigure: () => ensureSecao15GraficoComIndices('cook'), fileNameBase: 'secao15_cook', forceHideLegend: true, downloadOptions: { forceHideLegend: true } },
+                  { id: 'correlacao', label: 'Correlação', title: 'Matriz de correlação', figure: fit.grafico_correlacao, fileNameBase: 'secao15_correlacao', forceHideLegend: false, showPointIndexToggle: false, className: 'plot-stretch plot-correlation-card', downloadOptions: { forceHideLegend: false } },
+                ]}
+                itemKeyPrefix="s15-plot"
+                onDownloadFigure={onDownloadFigurePng}
+                onDownloadAll={() => onDownloadFiguresPngBatch([
+                  { figure: fit.grafico_obs_calc, fileNameBase: 'secao15_obs_calc', forceHideLegend: false },
+                  { figure: fit.grafico_residuos, fileNameBase: 'secao15_residuos', forceHideLegend: false },
+                  { figure: fit.grafico_histograma, fileNameBase: 'secao15_histograma', forceHideLegend: false },
+                  { figure: fit.grafico_cook, fileNameBase: 'secao15_cook', forceHideLegend: true },
+                  { figure: fit.grafico_correlacao, fileNameBase: 'secao15_correlacao', forceHideLegend: false },
+                ])}
+                loading={loading}
+                downloadingAssets={downloadingAssets}
+              />
             )}
-            <div className="plot-full-width">
-              <PlotFigure figure={fit.grafico_correlacao} title="Matriz de correlação" showPointIndexToggle className="plot-correlation-card" />
-            </div>
             {secao15DiagnosticoPng ? (
               <>
                 <div className="scatter-interactive-control">
@@ -5946,23 +5933,6 @@ export default function ElaboracaoTab({ sessionId, authUser, quickLoadRequest =
                 </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}`}
@@ -5974,6 +5944,23 @@ export default function ElaboracaoTab({ sessionId, authUser, quickLoadRequest =
                         forceHideLegend={secao15InterativoSelecionado === 'cook'}
                         className="plot-stretch"
                         lazy
+                        headerActions={(
+                          <button
+                            type="button"
+                            className="btn-download-subtle plot-card-download-btn"
+                            onClick={() => {
+                              if (!secao15InterativoFigura) return
+                              void onDownloadFigurePng(
+                                secao15InterativoFigura,
+                                `secao15_${sanitizeFileName(secao15InterativoLabel, 'diagnostico_interativo')}`,
+                                { forceHideLegend: secao15InterativoSelecionado === 'cook' },
+                              )
+                            }}
+                            disabled={loading || downloadingAssets || !secao15InterativoFigura}
+                          >
+                            Fazer download
+                          </button>
+                        )}
                       />
                     ) : (
                       <div className="empty-box">Grafico indisponivel.</div>

frontend/src/styles.css

@@ -5156,7 +5156,9 @@ button.btn-upload-select {
 }
 
 .section14-test-card .section14-field-row {
-  padding: 6px 8px;
+  padding: 4px 0;
+  border-bottom: none;
+  background: transparent;
 }
 
 .section14-test-card .section14-field-label {
@@ -5168,6 +5170,13 @@ button.btn-upload-select {
   line-height: 1.25;
 }
 
+.section14-test-card .section14-field-grid {
+  gap: 4px;
+  border: none;
+  border-radius: 0;
+  overflow: visible;
+}
+
 .section14-field-row {
   display: flex;
   justify-content: space-between;
@@ -6324,6 +6333,10 @@ button.btn-upload-select {
   gap: 12px;
 }
 
+.scatter-carousel-track.is-single > * {
+  grid-column: 1 / -1;
+}
+
 .section-disclaimer-warning {
   margin: 0 0 10px;
   padding: 9px 12px;