From 3273f805be60e705b893b8babb51a81c0a631928 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9s=20Gonz=C3=A1lez?=
 <andres.gonzalez@vizzuality.com>
Date: Tue, 30 Jan 2024 16:36:22 +0100
Subject: [PATCH] solutions report: moves blm calibrations to another page

---
 .../solutions/advanced-settings/index.tsx     | 27 +----------
 .../solutions/calibration-results/index.tsx   | 47 +++++++++++++++++++
 app/pages/reports/[pid]/[sid]/solutions.tsx   | 16 +++++--
 3 files changed, 59 insertions(+), 31 deletions(-)
 create mode 100644 app/layout/scenarios/reports/solutions/calibration-results/index.tsx

diff --git a/app/layout/scenarios/reports/solutions/advanced-settings/index.tsx b/app/layout/scenarios/reports/solutions/advanced-settings/index.tsx
index 6a27cbdf00..54caf3acaf 100644
--- a/app/layout/scenarios/reports/solutions/advanced-settings/index.tsx
+++ b/app/layout/scenarios/reports/solutions/advanced-settings/index.tsx
@@ -1,9 +1,6 @@
-import React from 'react';
-
-import Image from 'next/image';
 import { useRouter } from 'next/router';
 
-import { useScenario, useScenarioCalibrationResults } from 'hooks/scenarios';
+import { useScenario } from 'hooks/scenarios';
 
 import {
   SCENARIO_PARAMETERS,
@@ -14,8 +11,6 @@ export const AdvancedSettingsPage = (): JSX.Element => {
   const { query } = useRouter();
   const { sid } = query as { sid: string };
 
-  const calibrationResultsQuery = useScenarioCalibrationResults(sid);
-
   const { data: scenarioData } = useScenario(sid);
 
   const { metadata } = scenarioData || {};
@@ -76,26 +71,6 @@ export const AdvancedSettingsPage = (): JSX.Element => {
           );
         })}
       </div>
-
-      <div className="flex w-5/12 flex-col space-y-2">
-        {calibrationResultsQuery.data?.map((cr) => {
-          return (
-            <div key={`${cr.scenarioId}-${cr.blmValue}`} className="flex space-x-3 bg-gray-600">
-              {cr.pngData && <Image src={cr.pngData} alt="Blm Image" width={115} height={115} />}
-              <div className="flex flex-col space-y-2 py-2 text-sm">
-                <div>
-                  <p className="font-medium uppercase text-white">BLM:</p>
-                  <p className="text-primary-500">{cr.blmValue}</p>
-                </div>
-                <div>
-                  <p className="font-medium uppercase text-white">COST:</p>
-                  <p className="text-primary-500">{cr.cost}</p>
-                </div>
-              </div>
-            </div>
-          );
-        })}
-      </div>
     </div>
   );
 };
diff --git a/app/layout/scenarios/reports/solutions/calibration-results/index.tsx b/app/layout/scenarios/reports/solutions/calibration-results/index.tsx
new file mode 100644
index 0000000000..cf16dbc7e4
--- /dev/null
+++ b/app/layout/scenarios/reports/solutions/calibration-results/index.tsx
@@ -0,0 +1,47 @@
+import Image from 'next/image';
+import { useRouter } from 'next/router';
+
+import { useScenarioCalibrationResults } from 'hooks/scenarios';
+
+import BlmChart from 'layout/project/sidebar/scenario/advanced-settings/blm-calibration/chart';
+
+const CalibrationResultsReport = (): JSX.Element => {
+  const { query } = useRouter();
+  const { sid } = query as { sid: string };
+
+  const calibrationResultsQuery = useScenarioCalibrationResults(sid);
+
+  const chartData = [...calibrationResultsQuery.data].sort((a, b) => a.cost - b.cost);
+
+  return (
+    <div className="space-y-8">
+      <div className="grid grid-cols-2 flex-col gap-3">
+        {calibrationResultsQuery.data?.map((cr) => {
+          return (
+            <div key={`${cr.scenarioId}-${cr.blmValue}`} className="flex space-x-3 bg-gray-600">
+              {cr.pngData && <Image src={cr.pngData} alt="Blm Image" width={150} height={150} />}
+              <div className="flex flex-col space-y-2 py-2 text-sm">
+                <div>
+                  <p className="font-medium uppercase text-white">BLM:</p>
+                  <p className="text-primary-500">{cr.blmValue}</p>
+                </div>
+                <div>
+                  <p className="font-medium uppercase text-white">COST:</p>
+                  <p className="text-primary-500">{cr.cost}</p>
+                </div>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+      {chartData?.length > 0 && (
+        <div className="h-72 w-full space-y-4 bg-gray-600 p-4">
+          <h3 className="text-sm font-bold text-white">Calibration results</h3>
+          <BlmChart data={chartData} selected={null} onChange={() => {}} />
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default CalibrationResultsReport;
diff --git a/app/pages/reports/[pid]/[sid]/solutions.tsx b/app/pages/reports/[pid]/[sid]/solutions.tsx
index 3860e87b2c..4119b73c90 100644
--- a/app/pages/reports/[pid]/[sid]/solutions.tsx
+++ b/app/pages/reports/[pid]/[sid]/solutions.tsx
@@ -6,6 +6,7 @@ import Head from 'layout/head';
 import MetaIcons from 'layout/meta-icons';
 import AdvancedSettingsPage from 'layout/scenarios/reports/solutions/advanced-settings';
 import BestSolutionPage from 'layout/scenarios/reports/solutions/best-solution';
+import CalibrationResultsReport from 'layout/scenarios/reports/solutions/calibration-results';
 import CostSurfaceReport from 'layout/scenarios/reports/solutions/cost-surface';
 import DifferentSolutionsFirstPage from 'layout/scenarios/reports/solutions/different-solutions/first';
 // import DifferentSolutionsSecondPage from 'layout/scenarios/reports/solutions/different-solutions/second';
@@ -66,29 +67,34 @@ const MainReport: React.FC = () => {
       {/* PAGE 7 */}
       <div className={PAGE_CLASSES}>
         <ReportHeader />
-        <FeaturesPage />
+        <CalibrationResultsReport />
       </div>
       {/* PAGE 8 */}
       <div className={PAGE_CLASSES}>
         <ReportHeader />
-        <SolutionsTablePage />
+        <FeaturesPage />
       </div>
       {/* PAGE 9 */}
       <div className={PAGE_CLASSES}>
         <ReportHeader />
-        <DifferentSolutionsFirstPage />
+        <SolutionsTablePage />
       </div>
       {/* PAGE 10 */}
+      <div className={PAGE_CLASSES}>
+        <ReportHeader />
+        <DifferentSolutionsFirstPage />
+      </div>
+      {/* PAGE 11 */}
       {/* <div className={PAGE_CLASSES}>
         <ReportHeader />
         <DifferentSolutionsSecondPage />
       </div> */}
-      {/* PAGE 11 */}
+      {/* PAGE 12 */}
       <div className={PAGE_CLASSES}>
         <ReportHeader />
         <GapAnalysisPage />
       </div>
-      {/* PAGE 12 */}
+      {/* PAGE 13 */}
       <div className={PAGE_CLASSES}>
         <ReportHeader />
         <TargetAchievementPage />