feat: post gap analysis layer

app/hooks/solutions/index.ts

@@ -180,7 +180,7 @@ export function useBestSolution(sid) {
   return useMemo(() => {
     return {
       ...query,
-      data: data?.data,
+      data: data?.data || {},
     };
   }, [query, data]);
 }

app/layout/scenarios/show/map/component.tsx

@@ -80,7 +80,7 @@ export const ScenariosMap: React.FC<ScenariosShowMapProps> = () => {
   const {
     data: bestSolutionData,
   } = useBestSolution(sid);
-  const bestSolution = bestSolutionData || {};
+  const bestSolution = bestSolutionData;
 
   const {
     data: allGapAnalysisData,
@@ -95,30 +95,38 @@ export const ScenariosMap: React.FC<ScenariosShowMapProps> = () => {
 
   const include = useMemo(() => {
     if (tab === 'protected-areas' || tab === 'features') return 'protection';
+
     if (tab === 'analysis' && subtab === 'analysis-preview') return 'protection,features';
     if (tab === 'analysis' && subtab === 'analysis-gap-analysis') return 'features';
     if (tab === 'analysis' && subtab === 'analysis-cost-surface') return 'cost';
     if (tab === 'analysis' && subtab === 'analysis-adjust-planning-units') return 'lock-status,protection';
-    if (tab === 'solutions') return 'results';
+
+    if (tab === 'solutions' && subtab !== 'solutions-gap-analysis') return 'results';
+    if (tab === 'solutions' && subtab === 'solutions-gap-analysis') return 'features';
 
     return 'protection';
   }, [tab, subtab]);
 
   const sublayers = useMemo(() => {
     if (tab === 'protected-areas') return ['wdpa-percentage'];
+
     if (tab === 'features') return ['wdpa-percentage'];
+
     if (tab === 'analysis' && subtab === 'analysis-preview') return ['wdpa-percentage', 'features'];
     if (tab === 'analysis' && subtab === 'analysis-gap-analysis') return ['features'];
     if (tab === 'analysis' && subtab === 'analysis-cost-surface') return ['cost'];
     if (tab === 'analysis' && subtab === 'analysis-adjust-planning-units') return ['wdpa-percentage', 'lock-in', 'lock-out'];
-    if (tab === 'solutions') return ['solutions'];
+
+    if (tab === 'solutions' && subtab !== 'solutions-gap-analysis') return ['solutions'];
+    if (tab === 'solutions' && subtab === 'solutions-gap-analysis') return ['features'];
 
     return [];
   }, [tab, subtab]);
 
   const layers = useMemo(() => {
     if (tab === 'protected-areas' && subtab === 'protected-areas-preview' && !!wdpaIucnCategories?.length) return ['wdpa-preview', 'pugrid'];
     if (tab === 'protected-areas' && subtab === 'protected-areas-percentage' && !!wdpaIucnCategories?.length) return ['wdpa-percentage', 'pugrid'];
+
     if (tab === 'features') {
       return [
         ...wdpaIucnCategories?.length ? ['wdpa-percentage'] : [],
@@ -127,11 +135,14 @@ export const ScenariosMap: React.FC<ScenariosShowMapProps> = () => {
         'pugrid',
       ];
     }
+
     if (tab === 'analysis' && subtab === 'analysis-gap-analysis') return ['features', 'pugrid'];
     if (tab === 'analysis' && subtab === 'analysis-cost-surface') return ['cost', 'pugrid'];
     if (tab === 'analysis' && subtab === 'analysis-adjust-planning-units') return ['wdpa-percentage', 'lock-in', 'lock-out', 'pugrid'];
     if (tab === 'analysis') return ['wdpa-percentage', 'features', 'pugrid'];
-    if (tab === 'solutions') return ['frequency', 'solution', 'pugrid'];
+
+    if (tab === 'solutions' && subtab !== 'solutions-gap-analysis') return ['frequency', 'solution', 'pugrid'];
+    if (tab === 'solutions' && subtab === 'solutions-gap-analysis') return ['features'];
 
     return ['pugrid'];
   }, [tab, subtab, wdpaIucnCategories?.length]);
@@ -143,6 +154,10 @@ export const ScenariosMap: React.FC<ScenariosShowMapProps> = () => {
     return [];
   }, [allGapAnalysisData]);
 
+  const highlightedFeaturesIds = useMemo(() => {
+    return highlightFeatures.map((h) => h.replace(`_run${selectedSolution?.runId || bestSolution?.runId}`, ''));
+  }, [highlightFeatures, selectedSolution, bestSolution]);
+
   const FeaturePreviewLayers = useFeaturePreviewLayers({
     features: selectedFeaturesData,
     cache,
@@ -167,7 +182,7 @@ export const ScenariosMap: React.FC<ScenariosShowMapProps> = () => {
       puIncludedValue: included,
       puExcludedValue: excluded,
       features: featuresIds,
-      highlightFeatures,
+      highlightFeatures: highlightedFeaturesIds,
       runId: selectedSolution?.runId || bestSolution?.runId,
       settings: {
         pugrid: layerSettings.pugrid,

app/layout/scenarios/show/solutions/gap-analysis/list/component.tsx

@@ -1,6 +1,6 @@
-import React from 'react';
+import React, { useCallback, useEffect } from 'react';
 
-import { useSelector } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 
 import { useRouter } from 'next/router';
 
@@ -25,9 +25,16 @@ export const ScenariosPostGapAnalysisList: React.FC<ScenariosPostGapAnalysisList
   const { query } = useRouter();
   const { sid } = query;
 
-  getScenarioSlice(sid);
+  const scenarioSlice = getScenarioSlice(sid);
+  const {
+    setHighlightFeatures,
+  } = scenarioSlice.actions;
+  const dispatch = useDispatch();
 
-  const { selectedSolution } = useSelector((state) => state[`/scenarios/${sid}`]);
+  const {
+    selectedSolution,
+    highlightFeatures,
+  } = useSelector((state) => state[`/scenarios/${sid}`]);
 
   const {
     data: bestSolutionData,
@@ -53,6 +60,31 @@ export const ScenariosPostGapAnalysisList: React.FC<ScenariosPostGapAnalysisList
     },
   );
 
+  const toggleHighlight = useCallback((id) => {
+    const newHighlightFeatures = [...highlightFeatures];
+    if (!newHighlightFeatures.includes(id)) {
+      newHighlightFeatures.push(id);
+    } else {
+      const i = newHighlightFeatures.indexOf(id);
+      newHighlightFeatures.splice(i, 1);
+    }
+    dispatch(setHighlightFeatures(newHighlightFeatures));
+  }, [dispatch, setHighlightFeatures, highlightFeatures]);
+
+  const isHighlighted = useCallback((id) => {
+    if (!highlightFeatures.includes(id)) {
+      return false;
+    }
+    return true;
+  }, [highlightFeatures]);
+
+  useEffect(() => {
+    return () => {
+      dispatch(setHighlightFeatures([]));
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   return (
     <div className="relative flex flex-col flex-grow overflow-hidden" style={{ minHeight: 200 }}>
       <div className="absolute left-0 z-10 w-full h-6 -top-1 bg-gradient-to-b from-gray-700 via-gray-700" />
@@ -92,6 +124,8 @@ export const ScenariosPostGapAnalysisList: React.FC<ScenariosPostGapAnalysisList
                 <Item
                   {...item}
                   scrollRoot={scrollRef}
+                  highlighted={isHighlighted(item.id)}
+                  onHighlight={() => toggleHighlight(item.id)}
                 />
               </div>
             );