From 15fbf5e90f5e2873b0ea78dac521ffeecf5a7665 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s=20Gonz=C3=A1lez?= Date: Mon, 29 Jan 2024 16:17:37 +0100 Subject: [PATCH] report feedback --- app/components/button/component.tsx | 2 +- .../target-achievement/toolbar/component.tsx | 2 +- .../projects/show/map/legend/hooks/index.ts | 4 - .../solutions/advanced-settings/constants.ts | 4 + .../solutions/best-solution/map/index.tsx | 2 +- .../reports/solutions/cost-surface/index.tsx | 5 +- .../solutions/cost-surface/map/index.tsx | 2 +- .../different-solutions/first/index.tsx | 82 +++---- .../different-solutions/map/index.tsx | 2 +- .../reports/solutions/frequency/map/index.tsx | 2 +- .../reports/solutions/gap-analysis/index.tsx | 12 +- .../reports/solutions/grid/map/index.tsx | 2 +- .../reports/solutions/header/index.tsx | 2 +- .../reports/solutions/pu-status/index.tsx | 2 +- .../reports/solutions/pu-status/map/index.tsx | 2 +- app/package.json | 4 +- app/pages/reports/[pid]/[sid]/solutions.tsx | 18 +- app/yarn.lock | 216 +++++++++--------- 18 files changed, 179 insertions(+), 186 deletions(-) diff --git a/app/components/button/component.tsx b/app/components/button/component.tsx index 872479e08d..3c2bb8ddd0 100644 --- 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 index 9c3eaf3b76..d6b4623774 100644 --- 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 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 index 3363d1f388..734f837cff 100644 --- 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 index 0f724d9719..4b0052976c 100644 --- 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 index f9da308ebf..826855d0b9 100644 --- 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 => { - + ); }} diff --git a/app/layout/scenarios/reports/solutions/cost-surface/index.tsx b/app/layout/scenarios/reports/solutions/cost-surface/index.tsx index 6bf0302159..47232c9965 100644 --- 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 index f4bd5d1253..a4f8913cf3 100644 --- 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 => { - + ); }} diff --git a/app/layout/scenarios/reports/solutions/different-solutions/first/index.tsx b/app/layout/scenarios/reports/solutions/different-solutions/first/index.tsx index c1807b588f..30df84b18a 100644 --- 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 (
-

Five most different solutions

+

Best Solution

- {mostDifSolutionsQuery.data?.slice(0, 2).map((solution) => { - return ( -
- -
-
-

Run {solution.runId}

-
-

Best solution

- -
-
-
-

- Score: {solution.score} -

-
-
-

- Missing: {solution.missingValues} -

-
-
-

- Cost: {solution.cost} -

-
-
-

- PlanningUnits: {solution.cost} -

-
+
+ +
+
+

Run {bestSolutionQuery.data?.runId}

+
+

Best solution

+
- ); - })} +
+

+ Score: {bestSolutionQuery.data?.scoreValue} +

+
+
+

+ Missing:{' '} + {bestSolutionQuery.data?.missingValues} +

+
+
+

+ Cost: {bestSolutionQuery.data?.costValue} +

+
+
+

+ PlanningUnits:{' '} + {bestSolutionQuery.data?.costValue} +

+
+
+
); diff --git a/app/layout/scenarios/reports/solutions/different-solutions/map/index.tsx b/app/layout/scenarios/reports/solutions/different-solutions/map/index.tsx index 10ade6e053..da81f10a4f 100644 --- 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 - + ); }} diff --git a/app/layout/scenarios/reports/solutions/frequency/map/index.tsx b/app/layout/scenarios/reports/solutions/frequency/map/index.tsx index 5891bd026a..8d02da6283 100644 --- 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 => { - + ); }} diff --git a/app/layout/scenarios/reports/solutions/gap-analysis/index.tsx b/app/layout/scenarios/reports/solutions/gap-analysis/index.tsx index 24c9444d54..53dc6bf7ac 100644 --- 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 => { {feature.name} - {(feature.current.percent * 100).toFixed(0)}% ({feature.current.value} - {feature.current.unit}) + {(feature.current.percent * 100).toFixed(0)}% + {feature.current.value && ( + {`${feature.current.value} ${feature.current.unit}`} + )} - {(feature.target.percent * 100).toFixed(0)}% ({feature.target.value} - {feature.target.unit}) + {(feature.target.percent * 100).toFixed(0)}% + {feature.current.value && ( + {`${feature.current.value} ${feature.current.unit}`} + )}
{ - + ); }} diff --git a/app/layout/scenarios/reports/solutions/header/index.tsx b/app/layout/scenarios/reports/solutions/header/index.tsx index fbfb9955e8..1b6d330c1e 100644 --- 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 => {

Marxan platform version:

-

V.0.0.1

+

V.2.0.35

diff --git a/app/layout/scenarios/reports/solutions/pu-status/index.tsx b/app/layout/scenarios/reports/solutions/pu-status/index.tsx index 4dfac5025d..c1c15642e8 100644 --- 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 => {

Locked in/out areas

-
+

Conservation areas

diff --git a/app/layout/scenarios/reports/solutions/pu-status/map/index.tsx b/app/layout/scenarios/reports/solutions/pu-status/map/index.tsx index 78a02529a1..3accbffc74 100644 --- 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 => { - + ); }} diff --git a/app/package.json b/app/package.json index 32822edc6e..19073ea2cc 100644 --- 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 index b1b4f6b103..3860e87b2c 100644 --- 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 */}
- +
+ + +
{/* PAGE 6 */}
- +
{/* PAGE 7 */}
-
- - -
+
{/* PAGE 8 */}
@@ -79,10 +79,10 @@ const MainReport: React.FC = () => {
{/* PAGE 10 */} -
+ {/*
-
+
*/} {/* PAGE 11 */}
diff --git a/app/yarn.lock b/app/yarn.lock index 54c906907c..d9a6ddc999 100644 --- a/app/yarn.lock +++ b/app/yarn.lock @@ -4070,114 +4070,6 @@ __metadata: languageName: node linkType: hard -"app@workspace:.": - version: 0.0.0-use.local - resolution: "app@workspace:." - dependencies: - "@artsy/fresnel": 6.1.0 - "@dnd-kit/core": 6.0.8 - "@dnd-kit/modifiers": 6.0.1 - "@dnd-kit/sortable": 7.0.2 - "@dnd-kit/utilities": 3.2.1 - "@egjs/react-flicking": ^4.2.2 - "@math.gl/web-mercator": ^3.3.2 - "@playwright/test": 1.36.2 - "@popperjs/core": ^2.6.0 - "@radix-ui/react-collapsible": 1.0.3 - "@radix-ui/react-popover": 1.0.6 - "@radix-ui/react-scroll-area": 1.0.4 - "@radix-ui/react-switch": 1.0.3 - "@react-aria/button": ^3.3.0 - "@react-aria/dialog": ^3.1.2 - "@react-aria/focus": ^3.2.3 - "@react-aria/i18n": ^3.2.0 - "@react-aria/interactions": ^3.3.2 - "@react-aria/overlays": ^3.6.1 - "@react-aria/searchfield": ^3.1.1 - "@react-aria/slider": ^3.0.0 - "@react-aria/utils": ^3.5.0 - "@react-aria/visually-hidden": ^3.2.1 - "@react-stately/searchfield": ^3.1.1 - "@react-stately/slider": ^3.0.0 - "@reduxjs/toolkit": 1.9.5 - "@tailwindcss/forms": 0.5.3 - "@tanem/react-nprogress": ^4.0.8 - "@tippyjs/react": 4.2.6 - "@turf/area": 6.5.0 - "@types/chroma-js": 2.4.1 - "@types/d3": ^6.3.0 - "@types/lodash": 4.14.192 - "@types/mapbox-gl": 2.7.15 - "@types/node": 18.15.11 - "@types/react": 18.0.32 - "@types/react-map-gl": 6.1.3 - "@typescript-eslint/eslint-plugin": 5.58.0 - "@typescript-eslint/parser": 5.57.0 - "@vizzuality/layer-manager-plugin-mapboxgl": 2.0.3 - "@vizzuality/layer-manager-provider-carto": 2.0.3 - "@vizzuality/layer-manager-react": 2.0.3 - autoprefixer: ^10.0.2 - axios: 1.6.0 - chroma-js: ^2.4.2 - clsx: 1.2.1 - cookie: ^0.4.1 - d3: ^6.5.0 - d3-ease: ^2.0.0 - date-fns: ^2.19.0 - deck.gl: 7.3.6 - downshift: ^6.0.15 - eslint: 8.38.0 - eslint-config-next: 13.3.0 - eslint-config-prettier: 8.8.0 - eslint-plugin-prettier: 4.2.1 - fast-password-entropy: ^1.1.1 - final-form: 4.20.9 - framer-motion: 6.3.15 - fuse.js: ^6.4.6 - husky: ^4.3.0 - jsona: ^1.9.2 - jsonwebtoken: ^9.0.0 - lint-staged: ^10.5.2 - lodash: ^4.17.20 - luma.gl: 7.3.2 - next: 13.5.1 - next-auth: 4.24.5 - next-compose-plugins: ^2.2.1 - next-optimized-images: ^2.6.2 - next-plausible: ^2.0.0 - popmotion: 9.3.1 - postcss: 8.4.31 - prettier: 2.8.7 - prettier-plugin-tailwindcss: 0.2.7 - react: 18.2.0 - react-aria: ^3.3.0 - react-cookie: 4.1.1 - react-dom: 18.2.0 - react-dropzone: ^11.3.1 - react-final-form: 6.5.9 - react-icons: 4.11.0 - react-intersection-observer: ^8.31.1 - react-map-gl: ^6.1.13 - react-map-gl-draw: 0.21.1 - react-modal: ^3.12.1 - react-paginate: ^8.1.2 - react-popper: ^2.2.4 - react-query: 3.39.3 - react-redux: 8.1.2 - react-resize-detector: ^6.7.3 - react-table: ^7.7.0 - rooks: 7.14.1 - svg-sprite-loader: 6.0.11 - svgo: 3.0.2 - svgo-loader: 4.0.0 - tailwind-merge: 1.13.2 - tailwindcss: 3.3.1 - typescript: 5.0.3 - use-debounce: ^6.0.1 - validate.js: ^0.13.1 - languageName: unknown - linkType: soft - "aproba@npm:^1.0.3 || ^2.0.0": version: 2.0.0 resolution: "aproba@npm:2.0.0" @@ -8653,6 +8545,114 @@ __metadata: languageName: node linkType: hard +"marxan-app@workspace:.": + version: 0.0.0-use.local + resolution: "marxan-app@workspace:." + dependencies: + "@artsy/fresnel": 6.1.0 + "@dnd-kit/core": 6.0.8 + "@dnd-kit/modifiers": 6.0.1 + "@dnd-kit/sortable": 7.0.2 + "@dnd-kit/utilities": 3.2.1 + "@egjs/react-flicking": ^4.2.2 + "@math.gl/web-mercator": ^3.3.2 + "@playwright/test": 1.36.2 + "@popperjs/core": ^2.6.0 + "@radix-ui/react-collapsible": 1.0.3 + "@radix-ui/react-popover": 1.0.6 + "@radix-ui/react-scroll-area": 1.0.4 + "@radix-ui/react-switch": 1.0.3 + "@react-aria/button": ^3.3.0 + "@react-aria/dialog": ^3.1.2 + "@react-aria/focus": ^3.2.3 + "@react-aria/i18n": ^3.2.0 + "@react-aria/interactions": ^3.3.2 + "@react-aria/overlays": ^3.6.1 + "@react-aria/searchfield": ^3.1.1 + "@react-aria/slider": ^3.0.0 + "@react-aria/utils": ^3.5.0 + "@react-aria/visually-hidden": ^3.2.1 + "@react-stately/searchfield": ^3.1.1 + "@react-stately/slider": ^3.0.0 + "@reduxjs/toolkit": 1.9.5 + "@tailwindcss/forms": 0.5.3 + "@tanem/react-nprogress": ^4.0.8 + "@tippyjs/react": 4.2.6 + "@turf/area": 6.5.0 + "@types/chroma-js": 2.4.1 + "@types/d3": ^6.3.0 + "@types/lodash": 4.14.192 + "@types/mapbox-gl": 2.7.15 + "@types/node": 18.15.11 + "@types/react": 18.0.32 + "@types/react-map-gl": 6.1.3 + "@typescript-eslint/eslint-plugin": 5.58.0 + "@typescript-eslint/parser": 5.57.0 + "@vizzuality/layer-manager-plugin-mapboxgl": 2.0.3 + "@vizzuality/layer-manager-provider-carto": 2.0.3 + "@vizzuality/layer-manager-react": 2.0.3 + autoprefixer: ^10.0.2 + axios: 1.6.0 + chroma-js: ^2.4.2 + clsx: 1.2.1 + cookie: ^0.4.1 + d3: ^6.5.0 + d3-ease: ^2.0.0 + date-fns: ^2.19.0 + deck.gl: 7.3.6 + downshift: ^6.0.15 + eslint: 8.38.0 + eslint-config-next: 13.3.0 + eslint-config-prettier: 8.8.0 + eslint-plugin-prettier: 4.2.1 + fast-password-entropy: ^1.1.1 + final-form: 4.20.9 + framer-motion: 6.3.15 + fuse.js: ^6.4.6 + husky: ^4.3.0 + jsona: ^1.9.2 + jsonwebtoken: ^9.0.0 + lint-staged: ^10.5.2 + lodash: ^4.17.20 + luma.gl: 7.3.2 + next: 13.5.1 + next-auth: 4.24.5 + next-compose-plugins: ^2.2.1 + next-optimized-images: ^2.6.2 + next-plausible: ^2.0.0 + popmotion: 9.3.1 + postcss: 8.4.31 + prettier: 2.8.7 + prettier-plugin-tailwindcss: 0.2.7 + react: 18.2.0 + react-aria: ^3.3.0 + react-cookie: 4.1.1 + react-dom: 18.2.0 + react-dropzone: ^11.3.1 + react-final-form: 6.5.9 + react-icons: 4.11.0 + react-intersection-observer: ^8.31.1 + react-map-gl: ^6.1.13 + react-map-gl-draw: 0.21.1 + react-modal: ^3.12.1 + react-paginate: ^8.1.2 + react-popper: ^2.2.4 + react-query: 3.39.3 + react-redux: 8.1.2 + react-resize-detector: ^6.7.3 + react-table: ^7.7.0 + rooks: 7.14.1 + svg-sprite-loader: 6.0.11 + svgo: 3.0.2 + svgo-loader: 4.0.0 + tailwind-merge: 1.13.2 + tailwindcss: 3.3.1 + typescript: 5.0.3 + use-debounce: ^6.0.1 + validate.js: ^0.13.1 + languageName: unknown + linkType: soft + "match-sorter@npm:^6.0.2": version: 6.2.0 resolution: "match-sorter@npm:6.2.0"