Screenshot map

app/hooks/map/index.ts

@@ -19,6 +19,7 @@ import {
 
   UseLegend,
   UseGridPreviewLayer,
+  UseScenarioBLMLayer,
 } from './types';
 
 /**
@@ -973,7 +974,37 @@ export function usePUCompareLayer({
   }, [active, sid1, sid2, cache, options, COLOR_RAMP]);
 }
 
-// PUGrid
+export function useScenarioBlmLayer({
+  active, sId, blm, cache = 0,
+}: UseScenarioBLMLayer) {
+  return useMemo(() => {
+    if (!active || !sId) return null;
+
+    return {
+      id: `scenario-blm-layer-${sId}-${blm}-${cache}`,
+      type: 'vector',
+      source: {
+        type: 'vector',
+        tiles: [`${process.env.NEXT_PUBLIC_API_URL}/api/v1/scenarios/${sId}/calibration/tiles/${blm}/{z}/{x}/{y}.mvt`],
+      },
+      render: {
+        layers: [
+          {
+            type: 'fill',
+            'source-layer': 'layer0',
+            paint: {
+              'fill-color': COLORS.primary,
+              'fill-opacity': 0.5,
+            },
+
+          },
+        ],
+      },
+    };
+  }, [active, sId, blm, cache]);
+}
+
+// Legend
 export function useLegend({
   layers, options = {},
 }: UseLegend) {

app/hooks/map/types.ts

@@ -162,6 +162,13 @@ export interface UsePUCompareLayer {
   options?: Record<string, unknown>;
 }
 
+export interface UseScenarioBLMLayer {
+  cache?: number;
+  active?: boolean;
+  sId: string;
+  blm: number;
+}
+
 export interface UseLegend {
   layers: string[];
   options?: {

app/layout/scenarios/reports/blm/map/component.tsx

@@ -0,0 +1,119 @@
+import React, { useCallback, useEffect, useState } from 'react';
+
+import { useDispatch } from 'react-redux';
+
+import { useRouter } from 'next/router';
+
+import { setMaps } from 'store/slices/reports/blm';
+
+import PluginMapboxGl from '@vizzuality/layer-manager-plugin-mapboxgl';
+import { LayerManager, Layer } from '@vizzuality/layer-manager-react';
+
+import { useAccessToken } from 'hooks/auth';
+import {
+  useScenarioBlmLayer,
+} from 'hooks/map';
+import { useProject } from 'hooks/projects';
+
+import Map from 'components/map';
+
+export interface ScreenshotBLMMapProps {
+  id: string;
+}
+
+export const ScreenshotBLMMap: React.FC<ScreenshotBLMMapProps> = ({
+  id,
+}: ScreenshotBLMMapProps) => {
+  const accessToken = useAccessToken();
+
+  const { query } = useRouter();
+
+  const { pid, sid, blmValue = 1 } = query;
+
+  const dispatch = useDispatch();
+
+  const {
+    data = {},
+  } = useProject(pid);
+  const { bbox } = data;
+
+  const minZoom = 2;
+  const maxZoom = 20;
+  const [viewport, setViewport] = useState({});
+  const [bounds, setBounds] = useState(null);
+
+  const PUGridLayer = useScenarioBlmLayer({
+    cache: Date.now(),
+    active: true,
+    sId: sid ? `${sid}` : null,
+    blm: +blmValue,
+  });
+
+  useEffect(() => {
+    setBounds({
+      bbox,
+      options: { padding: 50 },
+      viewportOptions: { transitionDuration: 0 },
+    });
+  }, [bbox]);
+
+  const handleViewportChange = useCallback((vw) => {
+    setViewport(vw);
+  }, []);
+
+  const handleTransformRequest = (url) => {
+    if (url.startsWith(process.env.NEXT_PUBLIC_API_URL)) {
+      return {
+        url,
+        headers: {
+          Authorization: `Bearer ${accessToken}`,
+        },
+      };
+    }
+    return null;
+  };
+
+  const handleMapLoad = () => {
+    dispatch(setMaps({ [id]: true }));
+  };
+
+  return (
+    <>
+      <div
+        className="relative w-full h-full overflow-hidden"
+      >
+        <Map
+          className="map-report"
+          scrollZoom={false}
+          touchZoom={false}
+          dragPan={false}
+          dragRotate={false}
+          touchRotate={false}
+          bounds={bounds}
+          width={500}
+          height={500}
+          minZoom={minZoom}
+          maxZoom={maxZoom}
+          viewport={viewport}
+          mapboxApiAccessToken={process.env.NEXT_PUBLIC_MAPBOX_API_TOKEN}
+          mapStyle="mapbox://styles/marxan/ckn4fr7d71qg817kgd9vuom4s"
+          onMapViewportChange={handleViewportChange}
+          onMapLoad={handleMapLoad}
+          transformRequest={handleTransformRequest}
+          preserveDrawingBuffer
+          preventStyleDiffing
+        >
+          {(map) => {
+            return (
+              <LayerManager map={map} plugin={PluginMapboxGl}>
+                <Layer key={PUGridLayer.id} {...PUGridLayer} />
+              </LayerManager>
+            );
+          }}
+        </Map>
+      </div>
+    </>
+  );
+};
+
+export default ScreenshotBLMMap;

app/layout/scenarios/reports/blm/webshot-status/component.tsx

@@ -0,0 +1,49 @@
+import React, { useEffect, useMemo } from 'react';
+
+import { useSelector } from 'react-redux';
+
+import { useRouter } from 'next/router';
+
+import { useProject } from 'hooks/projects';
+
+export interface WebShotStatusProps {
+
+}
+
+globalThis.MARXAN = {
+  webshot_ready: false,
+};
+
+export const WebShotStatus: React.FC<WebShotStatusProps> = () => {
+  const { query } = useRouter();
+  const { pid } = query;
+
+  const { maps } = useSelector((state) => state['/reports/blm']);
+
+  const mapsLoaded = useMemo(() => {
+    return Object.keys(maps).every((k) => maps[k]);
+  }, [maps]);
+
+  const {
+    data: projectData,
+    isFetched: projectDataIsFetched,
+  } = useProject(pid);
+
+  const reportDataIsFetched = projectData && projectDataIsFetched
+    && mapsLoaded;
+
+  useEffect(() => {
+    if (reportDataIsFetched) {
+      setTimeout(() => {
+        globalThis.MARXAN = {
+          ...globalThis.MARXAN,
+          webshot_ready: true,
+        };
+      }, 5000);
+    }
+  }, [reportDataIsFetched]);
+
+  return null;
+};
+
+export default WebShotStatus;

app/layout/scenarios/reports/solutions/header/index.ts

@@ -0,0 +1 @@
+export { default } from './component';

app/layout/scenarios/reports/solutions/webshot-status/index.ts

@@ -0,0 +1 @@
+export { default } from './component';

app/pages/reports/[pid]/[sid]/blm.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+
+import { withProtection, withUser } from 'hoc/auth';
+
+import Head from 'layout/head';
+import ScreenshotMap from 'layout/scenarios/reports/blm/map';
+import WebShotStatus from 'layout/scenarios/reports/blm/webshot-status';
+
+export const getServerSideProps = withProtection(withUser());
+
+const BLMScreenshot: React.FC = () => {
+  return (
+    <>
+      <Head title="BLM screenshot" />
+
+      <ScreenshotMap id="blm-map-1" />
+
+      <WebShotStatus />
+    </>
+  );
+};
+
+export default BLMScreenshot;

app/pages/reports/[pid]/[sid]/solutions.tsx

@@ -4,11 +4,11 @@ import { withProtection, withUser } from 'hoc/auth';
 
 import Head from 'layout/head';
 import MetaIcons from 'layout/meta-icons';
-import ReportHeader from 'layout/scenarios/reports/header';
+import ReportHeader from 'layout/scenarios/reports/solutions/header';
 import Page1 from 'layout/scenarios/reports/solutions/page-1';
 import Page2 from 'layout/scenarios/reports/solutions/page-2';
 import Page3 from 'layout/scenarios/reports/solutions/page-3';
-import WebShotStatus from 'layout/scenarios/reports/webshot-status';
+import WebShotStatus from 'layout/scenarios/reports/solutions/webshot-status';
 
 export const getServerSideProps = withProtection(withUser());
 

app/store/index.ts

@@ -2,6 +2,7 @@ import communityProjects from 'store/slices/community/projects';
 import projects from 'store/slices/projects';
 import projectsDetail from 'store/slices/projects/[id]';
 import projectsNew from 'store/slices/projects/new';
+import reportsBlm from 'store/slices/reports/blm';
 import reportsSolutions from 'store/slices/reports/solutions';
 
 import { combineReducers, configureStore } from '@reduxjs/toolkit';
@@ -13,6 +14,7 @@ const staticReducers = {
   '/projects/new': projectsNew,
   '/community/projects': communityProjects,
   '/reports/solutions': reportsSolutions,
+  '/reports/blm': reportsBlm,
 };
 
 const asyncReducers = {

app/store/slices/reports/blm.ts

@@ -0,0 +1,27 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+
+interface ReportsSolutionsStateProps {
+  maps: Record<string, boolean>
+}
+
+const initialState = {
+  maps: {
+    'blm-map-1': false,
+  },
+} as ReportsSolutionsStateProps;
+
+const reportsBlmSlice = createSlice({
+  name: '/reports/blm',
+  initialState,
+  reducers: {
+    setMaps: (state, action: PayloadAction<Record<string, boolean>>) => {
+      state.maps = {
+        ...state.maps,
+        ...action.payload,
+      };
+    },
+  },
+});
+
+export const { setMaps } = reportsBlmSlice.actions;
+export default reportsBlmSlice.reducer;