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';
@@ -52,8 +52,27 @@ import {
   DeleteScenarioLockProps,
   UseDownloadScenarioReportProps,
   DownloadScenarioReportProps,
+  UseBlmImageProps,
 } from './types';
 
+function fetchScenarioBLMImage(sId, blmValue, session) {
+  return SCENARIOS.request({
+    method: 'GET',
+    url: `/${sId}/calibration/maps/preview/${blmValue}`,
+    responseType: 'arraybuffer',
+    headers: {
+      Authorization: `Bearer ${session.accessToken}`,
+    },
+
+  }).then((response) => {
+    const data = {
+      blmValue,
+      image: response.data,
+    };
+    return data;
+  });
+}
+
 /**
 ****************************************
   SCENARIO STATUS
@@ -823,6 +842,39 @@ 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: UseBlmImageProps) => {
+        const { data: { blmValue, image: blob } } = q;
+        const imageURL = window.URL.createObjectURL(new Blob([blob]));
+        return {
+          ...acc,
+          [blmValue]: imageURL,
+        };
+      }, {});
+    }
+    return {};
+  }, [userQueries]);
+
+  return useMemo(() => {
+    return {
+      data: CALIBRATION_IMAGES,
+    };
+  }, [CALIBRATION_IMAGES]);
+}
+
 export function useScenarioCalibrationResults(scenarioId) {
   const [session] = useSession();
 
@@ -837,14 +889,23 @@ 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 +939,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 +956,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]);
     },
@@ -913,7 +977,7 @@ export function useDownloadScenarioReport({
     const baseUrl = process.env.NEXT_PUBLIC_URL || window.location.origin;
 
     return axios.request({
-      url: `${baseUrl}/api/reports/scenarios/${sid}?solutionId=${solutionId}`,
+      url: `${baseUrl}/api/reports/scenarios/${sid}/solutions?solutionId=${solutionId}`,
       responseType: 'arraybuffer',
       headers: {
         Authorization: `Bearer ${session.accessToken}`,

app/hooks/scenarios/types.ts

@@ -113,7 +113,7 @@ export interface UseSaveScenarioCalibrationRangeProps {
   requestConfig?: AxiosRequestConfig
 }
 export interface SaveScenarioCalibrationRangeProps {
-  id?: string,
+  sid?: string,
   data: any,
 }
 
@@ -125,3 +125,7 @@ export interface DownloadScenarioReportProps {
   sid: string,
   solutionId: string;
 }
+
+export interface UseBlmImageProps {
+  [q: string]: 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/layout/scenarios/edit/parameters/blm-calibration/image-modal/component.tsx

@@ -49,7 +49,7 @@ export const BlmImageModal: React.FC<BlmImageModalProps> = ({
               type="button"
               onClick={() => setZoomImage(false)}
             >
-              <img src={blmImage || '/images/mock/blm-mock-image.png'} alt="selected blm" className="border-4 border-transparent rounded-xl hover:border-primary-500 w-60 h-60" />
+              <img src={blmImage} alt="selected blm" className="border-4 border-transparent rounded-xl hover:border-primary-500 w-60 h-60" />
               <div className="absolute bottom-0 right-0 z-50 flex items-center justify-center w-6 h-6 mb-0.5 mr-0.5 rounded-tl-lg rounded-br-lg bg-primary-500">
                 <Icon icon={CLOSE_SVG} className="w-3 h-3 text-black" />
               </div>

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

@@ -39,7 +39,6 @@ export const ScenariosBlmSettingsChart: React.FC<ScenariosBlmSettingsChartProps>
   const { pid, sid } = query;
 
   const { blmImage } = useSelector((state) => state[`/scenarios/${sid}/edit`]);
-
   const editable = useCanEditScenario(pid, sid);
   const { data: scenarioData } = useScenario(sid);
 
@@ -76,20 +75,22 @@ export const ScenariosBlmSettingsChart: React.FC<ScenariosBlmSettingsChartProps>
                   noValidate
                   onSubmit={handleSubmit}
                 >
-                  <button
-                    className="absolute right-0"
-                    type="button"
-                    onClick={() => setZoomImage(true)}
-                  >
-                    <img
-                      src={blmImage || '/images/mock/blm-mock-image.png'}
-                      alt="selected blm"
-                      className="border-2 border-transparent rounded-lg hover:border-primary-500"
-                    />
-                    <div className="absolute bottom-0 right-0 z-50 w-5 h-5 mb-px mr-px rounded-tl-lg rounded-br-md bg-primary-500">
-                      <Icon icon={ZOOM_SVG} />
-                    </div>
-                  </button>
+                  {blmImage && (
+                    <button
+                      className="absolute right-0"
+                      type="button"
+                      onClick={() => setZoomImage(true)}
+                    >
+                      <img
+                        src={blmImage}
+                        alt="selected blm"
+                        className="border-2 border-transparent rounded-lg hover:border-primary-500"
+                      />
+                      <div className="absolute bottom-0 right-0 z-50 w-5 h-5 mb-px mr-px rounded-tl-lg rounded-br-md bg-primary-500">
+                        <Icon icon={ZOOM_SVG} />
+                      </div>
+                    </button>
+                  )}
 
                   <div className="flex flex-col">
                     <div className="flex items-center space-x-2">
@@ -157,17 +158,15 @@ export const ScenariosBlmSettingsChart: React.FC<ScenariosBlmSettingsChartProps>
                     </div>
                   </div>
 
-                  <>
-                    <div className="flex flex-col mt-8 space-y-2">
-                      <h3 className="text-sm font-bold text-white">Boundary Length</h3>
-                      <p className="text-xs text-white">
-                        More
-                      </p>
-                    </div>
-                    <div className="w-full h-32">
-                      <BLMChart data={calibrationResultsData} />
-                    </div>
-                  </>
+                  <div className="flex flex-col mt-8 space-y-2">
+                    <h3 className="text-sm font-bold text-white">Boundary Length</h3>
+                    <p className="text-xs text-white">
+                      More
+                    </p>
+                  </div>
+                  <div className="w-full h-32">
+                    <BLMChart data={calibrationResultsData} />
+                  </div>
                 </form>
               );
             }}

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);
+}