report feedback

Vizzuality · Jan 29, 2024 · 15fbf5e · 15fbf5e
1 parent ac69bfb
commit 15fbf5e
Show file tree

Hide file tree

Showing 18 changed files with 179 additions and 186 deletions.
diff --git a/app/components/button/component.tsx b/app/components/button/component.tsx
@@ -13,7 +13,7 @@ const THEME = {
   secondary:
     'text-white bg-gray-700 hover:bg-gray-600 active:bg-gray-400 border border-gray-700 hover:border-gray-600 active:border-gray-400 active:outline active:outline-offset-2 active:outline-gray-700',
   'secondary-alt':
-    'text-black bg-transparent hover:bg-transparent active:bg-transparent border border-gray-600 hover:border-gray-400 active:border-gray-300',
+    'text-white bg-transparent hover:bg-transparent active:bg-transparent border border-gray-600 hover:border-gray-400 active:border-gray-300',
 
   tertiary: 'text-black bg-gray-200 hover:bg-gray-100 hover:border-gray-100 hover:text-white',
 

diff --git a/app/layout/project/sidebar/scenario/solutions/target-achievement/toolbar/component.tsx b/app/layout/project/sidebar/scenario/solutions/target-achievement/toolbar/component.tsx
@@ -30,7 +30,7 @@ export const ScenarioGapAnalysis: React.FC<ScenarioPostGapAnalysisToolbarProps>
         theme="dark"
         size="sm"
         defaultValue={search}
-        placeholder="Search by feature name..."
+        placeholder="Search target"
         aria-label="Search"
         onChange={onChangeDebounced}
       />

diff --git a/app/layout/projects/show/map/legend/hooks/index.ts b/app/layout/projects/show/map/legend/hooks/index.ts
@@ -1,5 +1,3 @@
-import { useQueryClient } from 'react-query';
-
 import { useRouter } from 'next/router';
 
 import { useAppDispatch, useAppSelector } from 'store/hooks';
@@ -124,8 +122,6 @@ export const useFeaturesLegend = () => {
   const { query } = useRouter();
   const { pid, sid } = query as { pid: string; sid: string };
 
-  // const queryClient = useQueryClient();
-
   const featureColors = useColorFeatures(pid, sid);
 
   const dispatch = useAppDispatch();

diff --git a/app/layout/scenarios/reports/solutions/advanced-settings/constants.ts b/app/layout/scenarios/reports/solutions/advanced-settings/constants.ts
@@ -80,4 +80,8 @@ export const SCENARIO_PARAMETERS = [
     description: 'Clumping rule',
     value: 'CLUMPTYPE',
   },
+  {
+    description: 'BLM',
+    value: 'BLM',
+  },
 ];
diff --git a/app/layout/scenarios/reports/solutions/best-solution/map/index.tsx b/app/layout/scenarios/reports/solutions/best-solution/map/index.tsx
@@ -116,7 +116,7 @@ export const ReportMap = ({ id }: { id: string }): JSX.Element => {
                 <LayerManager map={map} plugin={PluginMapboxGl}>
                   <Layer key={PUGridLayer.id} {...PUGridLayer} />
                 </LayerManager>
-                <MapScale />
+                <MapScale className="right-3" />
               </>
             );
           }}

diff --git a/app/layout/scenarios/reports/solutions/cost-surface/index.tsx b/app/layout/scenarios/reports/solutions/cost-surface/index.tsx
@@ -17,14 +17,13 @@ export const CostSurfaceReport = (): JSX.Element => {
     pid,
     {},
     {
-      select: (data) =>
-        data.filter((cs) => cs.scenarios.filter((s) => s.id === sid).length > 0)?.[0],
+      select: (data) => data.filter((cs) => cs.scenarios.find((s) => s.id === sid))?.[0],
     }
   );
 
   const LEGEND = useMemo(() => {
     return {
-      name: 'Cost layer',
+      name: costSurfaceQuery.data?.name,
       settingsManager: null,
       items: [
         {

diff --git a/app/layout/scenarios/reports/solutions/cost-surface/map/index.tsx b/app/layout/scenarios/reports/solutions/cost-surface/map/index.tsx
@@ -124,7 +124,7 @@ export const CostSurfaceReportMap = ({ id }: { id: string }): JSX.Element => {
                 <LayerManager map={map} plugin={PluginMapboxGl}>
                   <Layer key={PUGridLayer.id} {...PUGridLayer} />
                 </LayerManager>
-                <MapScale />
+                <MapScale className="right-3" />
               </>
             );
           }}

diff --git a/app/layout/scenarios/reports/solutions/different-solutions/first/index.tsx b/app/layout/scenarios/reports/solutions/different-solutions/first/index.tsx
@@ -2,69 +2,59 @@ import React from 'react';
 
 import { useRouter } from 'next/router';
 
-import { useBestSolution, useMostDifferentSolutions } from 'hooks/solutions';
+import { useBestSolution } from 'hooks/solutions';
 
 import Icon from 'components/icon/component';
 import DifferentSolutionReportMap from 'layout/scenarios/reports/solutions/different-solutions/map';
-import { cn } from 'utils/cn';
 
 import STAR_SVG from 'svgs/ui/star.svg?sprite';
 
+const SOLUTION_INFO_BOX_CLASSES = 'border-l-[3px] border-primary-500 pl-2';
+
 export const DifferentSolutionsPage = (): JSX.Element => {
   const { query } = useRouter();
   const { sid } = query as { sid: string };
 
-  const mostDifSolutionsQuery = useMostDifferentSolutions(sid);
-
   const bestSolutionQuery = useBestSolution(sid, {});
 
-  const SOLUTION_INFO_BOX_CLASSES = 'border-l-[3px] border-primary-500 pl-2';
-
   return (
     <div className="flex flex-col">
-      <h2 className="py-6 text-sm font-medium uppercase">Five most different solutions</h2>
+      <h2 className="py-6 text-sm font-medium uppercase">Best Solution</h2>
       <div className="flex flex-col space-y-3">
-        {mostDifSolutionsQuery.data?.slice(0, 2).map((solution) => {
-          return (
-            <div key={solution.id} className="flex space-x-6 bg-gray-100 px-5 py-3">
-              <DifferentSolutionReportMap id="report-map-3" runId={solution.runId} />
-              <div className="flex flex-col space-y-4">
-                <div className="flex items-center space-x-6">
-                  <p className="font-semibold">Run {solution.runId}</p>
-                  <div
-                    className={cn({
-                      'hidden rounded-2xl bg-primary-500 px-3 py-1': true,
-                      'flex items-center space-x-4': solution.id === bestSolutionQuery.data?.id,
-                    })}
-                  >
-                    <p className="text-sm text-black">Best solution</p>
-                    <Icon className="h-3 w-3 text-black" icon={STAR_SVG} />
-                  </div>
-                </div>
-                <div className={SOLUTION_INFO_BOX_CLASSES}>
-                  <p>
-                    Score: <span className="font-medium">{solution.score}</span>
-                  </p>
-                </div>
-                <div className={SOLUTION_INFO_BOX_CLASSES}>
-                  <p>
-                    Missing: <span className="font-medium">{solution.missingValues}</span>
-                  </p>
-                </div>
-                <div className={SOLUTION_INFO_BOX_CLASSES}>
-                  <p>
-                    Cost: <span className="font-medium">{solution.cost}</span>
-                  </p>
-                </div>
-                <div className={SOLUTION_INFO_BOX_CLASSES}>
-                  <p>
-                    PlanningUnits: <span className="font-medium">{solution.cost}</span>
-                  </p>
-                </div>
+        <div key={bestSolutionQuery.data?.id} className="flex space-x-6 bg-gray-100 px-5 py-3">
+          <DifferentSolutionReportMap id="report-map-3" runId={bestSolutionQuery.data?.runId} />
+          <div className="flex flex-col space-y-4">
+            <div className="flex items-center space-x-6">
+              <p className="font-semibold">Run {bestSolutionQuery.data?.runId}</p>
+              <div className="flex items-center space-x-4 rounded-2xl bg-primary-500 px-3 py-1">
+                <p className="text-sm text-black">Best solution</p>
+                <Icon className="h-3 w-3 text-black" icon={STAR_SVG} />
               </div>
             </div>
-          );
-        })}
+            <div className={SOLUTION_INFO_BOX_CLASSES}>
+              <p>
+                Score: <span className="font-medium">{bestSolutionQuery.data?.scoreValue}</span>
+              </p>
+            </div>
+            <div className={SOLUTION_INFO_BOX_CLASSES}>
+              <p>
+                Missing:{' '}
+                <span className="font-medium">{bestSolutionQuery.data?.missingValues}</span>
+              </p>
+            </div>
+            <div className={SOLUTION_INFO_BOX_CLASSES}>
+              <p>
+                Cost: <span className="font-medium">{bestSolutionQuery.data?.costValue}</span>
+              </p>
+            </div>
+            <div className={SOLUTION_INFO_BOX_CLASSES}>
+              <p>
+                PlanningUnits:{' '}
+                <span className="font-medium">{bestSolutionQuery.data?.costValue}</span>
+              </p>
+            </div>
+          </div>
+        </div>
       </div>
     </div>
   );

diff --git a/app/layout/scenarios/reports/solutions/different-solutions/map/index.tsx b/app/layout/scenarios/reports/solutions/different-solutions/map/index.tsx
@@ -113,7 +113,7 @@ export const ReportMap = ({ id, runId }: { id: string; runId: number }): JSX.Ele
                 <LayerManager map={map} plugin={PluginMapboxGl}>
                   <Layer key={PUGridLayer.id} {...PUGridLayer} />
                 </LayerManager>
-                <MapScale />
+                <MapScale className="right-3" />
               </>
             );
           }}

diff --git a/app/layout/scenarios/reports/solutions/frequency/map/index.tsx b/app/layout/scenarios/reports/solutions/frequency/map/index.tsx
@@ -117,7 +117,7 @@ export const ReportMap = ({ id }: { id: string }): JSX.Element => {
                 <LayerManager map={map} plugin={PluginMapboxGl}>
                   <Layer key={PUGridLayer.id} {...PUGridLayer} />
                 </LayerManager>
-                <MapScale />
+                <MapScale className="right-3" />
               </>
             );
           }}

diff --git a/app/layout/scenarios/reports/solutions/gap-analysis/index.tsx b/app/layout/scenarios/reports/solutions/gap-analysis/index.tsx
@@ -32,12 +32,16 @@ export const GapAnalysisPage = (): JSX.Element => {
                 <tr key={feature.id}>
                   <td>{feature.name}</td>
                   <td>
-                    {(feature.current.percent * 100).toFixed(0)}% ({feature.current.value}
-                    {feature.current.unit})
+                    <span>{(feature.current.percent * 100).toFixed(0)}%</span>
+                    {feature.current.value && (
+                      <span>{`${feature.current.value} ${feature.current.unit}`}</span>
+                    )}
                   </td>
                   <td>
-                    {(feature.target.percent * 100).toFixed(0)}% ({feature.target.value}
-                    {feature.target.unit})
+                    <span>{(feature.target.percent * 100).toFixed(0)}% </span>
+                    {feature.current.value && (
+                      <span>{`${feature.current.value} ${feature.current.unit}`}</span>
+                    )}
                   </td>
                   <td>
                     <div

diff --git a/app/layout/scenarios/reports/solutions/grid/map/index.tsx b/app/layout/scenarios/reports/solutions/grid/map/index.tsx
@@ -113,7 +113,7 @@ export const ReportMap = ({ id }: { id: string }): JSX.Element => {
                 <LayerManager map={map} plugin={PluginMapboxGl}>
                   <Layer key={PUGridLayer.id} {...PUGridLayer} />
                 </LayerManager>
-                <MapScale />
+                <MapScale className="right-3" />
               </>
             );
           }}

diff --git a/app/layout/scenarios/reports/solutions/header/index.tsx b/app/layout/scenarios/reports/solutions/header/index.tsx
@@ -44,7 +44,7 @@ export const ReportHeader = (): JSX.Element => {
             <div className="h-5 w-[2px] bg-gray-200" />
             <div className="flex space-x-2">
               <p className="font-medium uppercase">Marxan platform version:</p>
-              <p> V.0.0.1</p>
+              <p>V.2.0.35</p>
             </div>
             <div className="h-5 w-[2px] bg-gray-200" />
             <div className="flex space-x-2">

diff --git a/app/layout/scenarios/reports/solutions/pu-status/index.tsx b/app/layout/scenarios/reports/solutions/pu-status/index.tsx
@@ -19,7 +19,7 @@ export const PUStatusReport = (): JSX.Element => {
       <div className="flex w-2/6 flex-col space-y-3 py-5 text-sm">
         <p className="font-semibold">Locked in/out areas</p>
         <div className={PU_LEGEND_CONTAINER_CLASSES}>
-          <div className={`${PU_LEGEND_BOX_CLASSES} border-blue-900 bg-blue-900`} />
+          <div className={`${PU_LEGEND_BOX_CLASSES} border-[#12EC80] bg-[#12EC80]`} />
           <p>Conservation areas </p>
         </div>
         <div className={PU_LEGEND_CONTAINER_CLASSES}>

diff --git a/app/layout/scenarios/reports/solutions/pu-status/map/index.tsx b/app/layout/scenarios/reports/solutions/pu-status/map/index.tsx
@@ -133,7 +133,7 @@ export const ReportMap = ({ id }: { id: string }): JSX.Element => {
                 <LayerManager map={map} plugin={PluginMapboxGl}>
                   <Layer key={PUGridLayer.id} {...PUGridLayer} />
                 </LayerManager>
-                <MapScale />
+                <MapScale className="right-3" />
               </>
             );
           }}

diff --git a/app/package.json b/app/package.json
@@ -1,6 +1,6 @@
 {
-  "name": "app",
-  "version": "0.4.0",
+  "name": "marxan-app",
+  "version": "2.0.35",
   "private": true,
   "scripts": {
     "dev": "next dev",

diff --git a/app/pages/reports/[pid]/[sid]/solutions.tsx b/app/pages/reports/[pid]/[sid]/solutions.tsx
@@ -8,7 +8,7 @@ import AdvancedSettingsPage from 'layout/scenarios/reports/solutions/advanced-se
 import BestSolutionPage from 'layout/scenarios/reports/solutions/best-solution';
 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';
+// import DifferentSolutionsSecondPage from 'layout/scenarios/reports/solutions/different-solutions/second';
 import FeaturesPage from 'layout/scenarios/reports/solutions/features';
 import FrequencyPage from 'layout/scenarios/reports/solutions/frequency';
 import GapAnalysisPage from 'layout/scenarios/reports/solutions/gap-analysis';
@@ -53,20 +53,20 @@ const MainReport: React.FC = () => {
       {/* PAGE 5 */}
       <div className={PAGE_CLASSES}>
         <ReportHeader />
-        <AdvancedSettingsPage />
+        <div className="mt-10 flex flex-col space-y-10">
+          <PUStatusReport />
+          <CostSurfaceReport />
+        </div>
       </div>
       {/* PAGE 6 */}
       <div className={PAGE_CLASSES}>
         <ReportHeader />
-        <FeaturesPage />
+        <AdvancedSettingsPage />
       </div>
       {/* PAGE 7 */}
       <div className={PAGE_CLASSES}>
         <ReportHeader />
-        <div className="mt-10 flex flex-col space-y-10">
-          <PUStatusReport />
-          <CostSurfaceReport />
-        </div>
+        <FeaturesPage />
       </div>
       {/* PAGE 8 */}
       <div className={PAGE_CLASSES}>
@@ -79,10 +79,10 @@ const MainReport: React.FC = () => {
         <DifferentSolutionsFirstPage />
       </div>
       {/* PAGE 10 */}
-      <div className={PAGE_CLASSES}>
+      {/* <div className={PAGE_CLASSES}>
         <ReportHeader />
         <DifferentSolutionsSecondPage />
-      </div>
+      </div> */}
       {/* PAGE 11 */}
       <div className={PAGE_CLASSES}>
         <ReportHeader />