feat(reports): keep every metric in the data, and let the reader switch between them

Report #2. The visualization only ever showed one dataset because the outline
prompt explicitly said so: "If the data has multiple metrics, choose the most
scientifically relevant one" - and the schema only had room for one data array.
Everything else the researcher uploaded was discarded at generation time, so no
amount of UI could get it back.

- The chart schema gains `additionalSeries`: one entry per OTHER metric, each
  with its own name, axis label with units, chart type and data. The primary
  metric stays as `data` so the rendered PNG and older reports are unaffected.
- The prompt now requires those other metrics to be returned rather than
  dropped, and says why: the researcher uploaded them and expects to see them.
- The full-size visualization dialog lists the metrics as chips and swaps the
  interactive chart between them. With one metric it renders exactly as before;
  older reports with no additionalSeries fall back to the stored PNG.

Note this only helps reports generated from here on - the discarded metrics
were never persisted, so existing reports have nothing to switch to and will
keep showing their single chart.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

Author: piyushmahajan7749

app/api/report/outline/route.ts

@@ -74,7 +74,7 @@ RULES:
    - "bar" - comparing a numeric metric across conditions / samples / formulations (DEFAULT).
    - "pie" - showing proportion / share / composition of a whole (values should sum to ~100% or represent parts of one whole). Use pie ONLY when parts-of-a-whole is the actual meaning.
 3. Use SHORT labels (max 15 characters) for the categories. Abbreviate names (e.g. "C0 Control", "E1", "F2 Glycine").
-4. All values MUST be in the same unit. If the data has multiple metrics, choose the most scientifically relevant one.
+4. All values within ONE series MUST share a unit. If the data has several metrics, pick the most scientifically relevant one as the PRIMARY chart - and return every OTHER metric in additionalSeries, one entry each, with its own label and units. Do NOT silently drop the other metrics: the researcher uploaded them and expects to be able to see them.
 5. Provide a clear chartTitle (e.g. "Mean Viscosity by Formulation") and yAxisLabel WITH units for bar charts (e.g. "Viscosity (mPa·s)"). yAxisLabel can be empty for pie charts.
 6. Return only POSITIVE values when possible. If comparing % changes, use absolute values or the raw measurement instead.
 7. IMPORTANT: Include ALL data points / conditions / formulations from the dataset. Do NOT skip or drop any rows.`
@@ -89,7 +89,8 @@ Return a JSON object with:
 - chartTitle: descriptive title
 - chartType: "bar" or "pie"
 - yAxisLabel: Y-axis label with units (for bar charts)
-- data: array of {label, value} pairs with short labels and consistent numeric values`
+- data: array of {label, value} pairs with short labels and consistent numeric values
+- additionalSeries: one entry per OTHER metric in the data (metric name, yAxisLabel with units, its own data array)`
 
   try {
     const completion = await openai().beta.chat.completions.parse({
@@ -408,7 +409,30 @@ const chartTool = tool(
       yAxisLabel: z
         .string()
         .optional()
-        .describe("Label for the Y axis with units (bar charts only)")
+        .describe("Label for the Y axis with units (bar charts only)"),
+      /**
+       * EVERY other metric present in the data, one entry each. The primary
+       * `data` above stays the headline chart (and the rendered PNG); these let
+       * the researcher switch to the other readouts instead of losing them.
+       */
+      additionalSeries: z
+        .array(
+          z.object({
+            metric: z
+              .string()
+              .describe("What this series measures, e.g. 'SEC monomer'"),
+            yAxisLabel: z
+              .string()
+              .describe("Axis label WITH units, e.g. 'Monomer (%)'"),
+            chartType: z.enum(["bar", "pie"]).optional(),
+            data: z.array(z.object({ label: z.string(), value: z.number() }))
+          })
+        )
+        .max(8)
+        .optional()
+        .describe(
+          "One entry per ADDITIONAL metric in the data. Omit only if the data truly has a single metric."
+        )
     })
   }
 )

components/reports/report-editor.tsx

@@ -34,6 +34,10 @@ import { InputsTab } from "@/components/reports/tabs/inputs-tab"
 import { ReportTab as ReportTabView } from "@/components/reports/tabs/report-tab"
 import { ReportPreviewModal } from "@/components/reports/report-preview-modal"
 import { ReportGeneratingView } from "@/components/reports/report-generating-view"
+import {
+  ReportChart,
+  type ChartType
+} from "@/app/[locale]/[workspaceid]/report/components/report-chart"
 import { ELNExportModal } from "@/components/eln/eln-export-modal"
 import { ELNConnectModal } from "@/components/eln/eln-connect-modal"
 import { ELNConnection } from "@/types/eln"
@@ -208,6 +212,7 @@ export function ReportEditor({
   const [regeneratingChart, setRegeneratingChart] = useState(false)
   const [showPreview, setShowPreview] = useState(false)
   const [showViz, setShowViz] = useState(false)
+  const [vizSeries, setVizSeries] = useState(0)
   const [isSavingNow, setIsSavingNow] = useState(false)
   const sectionSaveTimer = useRef<ReturnType<typeof setTimeout> | null>(null)
 
@@ -1124,18 +1129,80 @@ export function ReportEditor({
               {report?.name ? `${report.name} — results` : "Result data"}
             </DialogTitle>
           </DialogHeader>
-          {report?.chart_image ? (
-            // eslint-disable-next-line @next/next/no-img-element
-            <img
-              src={report.chart_image as string}
-              alt="Result visualization"
-              className="border-ink-200 max-h-[70vh] w-full rounded-lg border bg-white object-contain"
-            />
-          ) : (
-            <p className="text-ink-500 py-8 text-center text-sm">
-              No chart has been generated for this report yet.
-            </p>
-          )}
+          {(() => {
+            const cd = (report?.chart_data ?? null) as any
+            // Primary metric first, then every other metric the outline found.
+            // The generator used to be told to pick ONE metric and discard the
+            // rest, so uploads with several readouts only ever charted one.
+            const series: Array<{
+              metric: string
+              yAxisLabel?: string
+              chartType?: ChartType
+              data: { label: string; value: number }[]
+            }> = []
+            if (Array.isArray(cd?.data) && cd.data.length) {
+              series.push({
+                metric: cd.chartTitle || "Primary result",
+                yAxisLabel: cd.yAxisLabel,
+                chartType: cd.chartType,
+                data: cd.data
+              })
+            }
+            for (const extra of cd?.additionalSeries ?? []) {
+              if (Array.isArray(extra?.data) && extra.data.length) {
+                series.push({
+                  metric: extra.metric || "Metric",
+                  yAxisLabel: extra.yAxisLabel,
+                  chartType: extra.chartType,
+                  data: extra.data
+                })
+              }
+            }
+            const active = series[Math.min(vizSeries, series.length - 1)]
+            if (!active) {
+              return report?.chart_image ? (
+                // eslint-disable-next-line @next/next/no-img-element
+                <img
+                  src={report.chart_image as string}
+                  alt="Result visualization"
+                  className="border-ink-200 max-h-[70vh] w-full rounded-lg border bg-white object-contain"
+                />
+              ) : (
+                <p className="text-ink-500 py-8 text-center text-sm">
+                  No chart has been generated for this report yet.
+                </p>
+              )
+            }
+            return (
+              <div className="space-y-3">
+                {series.length > 1 && (
+                  <div className="flex flex-wrap gap-1.5">
+                    {series.map((sr, i) => (
+                      <button
+                        key={sr.metric + i}
+                        type="button"
+                        onClick={() => setVizSeries(i)}
+                        className={cn(
+                          "rounded-full border px-3 py-1 text-[12px] transition-colors",
+                          i === vizSeries
+                            ? "border-ink bg-ink text-white"
+                            : "border-line text-ink-2 hover:border-line-strong"
+                        )}
+                      >
+                        {sr.metric}
+                      </button>
+                    ))}
+                  </div>
+                )}
+                <ReportChart
+                  data={active.data}
+                  chartTitle={active.metric}
+                  yAxisLabel={active.yAxisLabel}
+                  chartType={active.chartType ?? "bar"}
+                />
+              </div>
+            )
+          })()}
         </DialogContent>
       </Dialog>