feat(front): add BLM screenshots to calibration results[MARXAN-1416]

app/hooks/scenarios/index.ts

@@ -1,7 +1,7 @@
 import { useMemo } from 'react';
 
 import {
-  useQuery, useInfiniteQuery, useMutation, useQueryClient,
+  useQuery, useInfiniteQuery, useMutation, useQueryClient, useQueries,
 } from 'react-query';
 
 import flatten from 'lodash/flatten';
@@ -54,6 +54,23 @@ import {
   DownloadScenarioReportProps,
 } from './types';
 
+function fetchScenarioBLMImage(sId, blmValue, session) {
+  return SCENARIOS.request({
+    method: 'GET',
+    url: `/${sId}/calibration/maps/preview/${blmValue}`,
+    headers: {
+      Authorization: `Bearer ${session.accessToken}`,
+    },
+
+  }).then((response) => {
+    const data = {
+      blmValue,
+      image: response.data,
+    };
+    return data;
+  });
+}
+
 /**
 ****************************************
   SCENARIO STATUS
@@ -823,6 +840,38 @@ export function useCancelRunScenario({
 }
 
 // BLM
+export function useCalibrationBLMImages({ sid, blmValues }) {
+  const [session] = useSession();
+
+  const userQueries = useQueries(
+    blmValues.map((blmValue) => {
+      return {
+        queryKey: ['scenario-blm-image', sid, blmValue],
+        queryFn: () => fetchScenarioBLMImage(sid, blmValue, session),
+      };
+    }),
+  );
+
+  const CALIBRATION_IMAGES = useMemo(() => {
+    if (userQueries.every((u) => u?.isFetched)) {
+      return userQueries.reduce((acc, q: any) => {
+        const { data: { blmValue, image } } = q;
+        return {
+          ...acc,
+          [blmValue]: Buffer.from(image, 'binary').toString('base64'),
+        };
+      }, {});
+    }
+    return {};
+  }, [userQueries]);
+
+  return useMemo(() => {
+    return {
+      data: CALIBRATION_IMAGES,
+    };
+  }, [CALIBRATION_IMAGES]);
+}
+
 export function useScenarioCalibrationResults(scenarioId) {
   const [session] = useSession();
 
@@ -837,14 +886,22 @@ export function useScenarioCalibrationResults(scenarioId) {
 
   const { data } = query;
 
+  const blmValues = data?.data.map((i) => i.blmValue) || [];
+  const { data: blmImages } = useCalibrationBLMImages({ sid: scenarioId, blmValues });
   return useMemo(() => {
     const parsedData = Array.isArray(data?.data)
-      ? data?.data.sort((a, b) => (a.cost > b.cost ? 1 : -1)) : [];
+      ? data?.data.sort((a, b) => (a.cost > b.cost ? 1 : -1)).map((i) => {
+        return {
+          ...i,
+          pngData: blmImages[i.blmValue],
+        };
+      }) : [];
 
     return {
       ...query,
       data: parsedData,
     };
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [query, data?.data]);
 }
 
@@ -878,12 +935,15 @@ export function useSaveScenarioCalibrationRange({
   const queryClient = useQueryClient();
   const [session] = useSession();
 
-  const saveScenarioCalibrationRange = ({ id, data }: SaveScenarioCalibrationRangeProps) => {
-    return SCENARIOS.request({
-      url: `/${id}/calibration`,
+  const saveScenarioCalibrationRange = ({ sid, data }: SaveScenarioCalibrationRangeProps) => {
+    const baseUrl = /* process.env.NEXT_PUBLIC_URL || */ window.location.origin;
+
+    return axios.request({
+      url: `${baseUrl}/api/reports/scenarios/${sid}/blm`,
       data,
       headers: {
         Authorization: `Bearer ${session.accessToken}`,
+        'Content-Type': 'application/json',
       },
       ...requestConfig,
     });
@@ -892,7 +952,7 @@ export function useSaveScenarioCalibrationRange({
   return useMutation(saveScenarioCalibrationRange, {
     onSuccess: (data: any, variables, context) => {
       console.info('Succcess', data, variables, context);
-      const { id: scenarioId } = variables;
+      const { sid: scenarioId } = variables;
       queryClient.invalidateQueries(['scenario-calibration', scenarioId]);
       queryClient.invalidateQueries(['scenario-calibration-range', scenarioId]);
     },

app/hooks/scenarios/types.ts

@@ -113,7 +113,7 @@ export interface UseSaveScenarioCalibrationRangeProps {
   requestConfig?: AxiosRequestConfig
 }
 export interface SaveScenarioCalibrationRangeProps {
-  id?: string,
+  sid?: string,
   data: any,
 }
 

app/layout/scenarios/edit/parameters/blm-calibration/chart/component.tsx

@@ -46,7 +46,7 @@ type DataRow = {
    * Image thumbnail associated with the point.
    * The BLM point shouldn't have one.
    */
-  thumbnail: string | null;
+  pngData: string | null;
 };
 
 export interface BlmChartProps {
@@ -254,7 +254,7 @@ export const BlmChart: React.FC<BlmChartProps> = ({ data }: BlmChartProps) => {
           {/* Points */}
           <g>
             {data.map(({
-              cost, boundaryLength, thumbnail, blmValue,
+              cost, boundaryLength, pngData, blmValue,
             }, index) => (
               <foreignObject
                 // eslint-disable-next-line react/no-array-index-key
@@ -271,7 +271,7 @@ export const BlmChart: React.FC<BlmChartProps> = ({ data }: BlmChartProps) => {
                   onClick={() => {
                     onSaveBlm(blmValue);
                     dispatch(setBlm(blmValue));
-                    dispatch(setBlmImage(thumbnail));
+                    dispatch(setBlmImage(pngData));
                   }}
                   aria-hidden="true"
                 />

app/layout/scenarios/edit/parameters/blm-calibration/component.tsx

@@ -47,7 +47,7 @@ export const ScenariosBLMCalibration: React.FC<ScenariosBLMCalibrationProps> = (
     const range = [blmCalibrationFrom, blmCalibrationTo];
 
     saveScenarioCalibrationRange.mutate({
-      id: `${sid}`,
+      sid: `${sid}`,
       data: { range },
     }, {
       onSuccess: () => {

app/pages/api/reports/scenarios/[sid]/blm.ts

@@ -0,0 +1,31 @@
+import { getSession } from 'next-auth/client';
+
+import SCENARIOS from 'services/scenarios';
+
+export default async function handler(req, res) {
+  const session = await getSession({ req });
+
+  const baseUrl = process.env.NEXT_PUBLIC_URL || req.headers.origin;
+
+  const { sid } = req.query;
+
+  const { range } = req.body;
+
+  await SCENARIOS.request({
+    method: 'POST',
+    url: `/${sid}/calibration`,
+    headers: {
+      Authorization: `Bearer ${session.accessToken}`,
+      'Content-Type': 'application/json',
+      Cookie: req?.headers?.cookie,
+    },
+    data: {
+      range,
+      config: {
+        baseUrl,
+      },
+    },
+  });
+
+  res.status(200);
+}