Merge pull request #1119 from Vizzuality/feature/nat-dash-info

Feature/nat dash info

package.json

@@ -18,7 +18,6 @@
   },
   "dependencies": {
     "@artsy/fresnel": "6.1.0",
-    "@deck.gl/core": "^8.9.6",
     "@dnd-kit/core": "^6.0.8",
     "@dnd-kit/modifiers": "^6.0.1",
     "@dnd-kit/sortable": "^7.0.2",
@@ -54,6 +53,7 @@
     "@turf/bbox": "6.5.0",
     "@types/d3-format": "^3.0.1",
     "@types/lodash-es": "4.17.7",
+    "autoprefixer": "^10.4.19",
     "axios": "1.6.0",
     "chroma-js": "^2.4.2",
     "classnames": "^2.3.2",
@@ -74,6 +74,7 @@
     "react-dom": "18.2.0",
     "react-dropzone": "14.2.3",
     "react-map-gl": "7.0.21",
+    "react-markdown": "^9.0.1",
     "react-virtualized": "9.22.5",
     "recharts": "^2.5.0",
     "recoil": "^0.7.7",
@@ -88,18 +89,14 @@
   },
   "devDependencies": {
     "@playwright/test": "^1.41.0",
-    "@transifex/cli": "6.0.2",
     "@transifex/native": "6.0.2",
     "@transifex/react": "6.0.2",
     "@types/geojson": "7946.0.10",
-    "@types/google.analytics": "0.0.42",
     "@types/mapbox-gl": "2.7.11",
-    "@types/node": "18.15.0",
+    "@types/node": "20.12.7",
     "@types/react": "18.0.28",
     "@types/react-dom": "18.0.11",
     "@typescript-eslint/eslint-plugin": "5.48.2",
-    "assert": "2.0.0",
-    "autoprefixer": "10.4.14",
     "eslint": "8.32.0",
     "eslint-config-next": "13.1.2",
     "eslint-config-prettier": "8.6.0",
@@ -108,9 +105,7 @@
     "prettier": "2.8.3",
     "prettier-plugin-tailwindcss": "0.2.1",
     "react-icons": "4.11.0",
-    "start-server-and-test": "1.12.1",
     "svg-sprite-loader": "6.0.11",
-    "svgo": "3.0.2",
     "svgo-loader": "3.0.3",
     "typescript": "4.9.4"
   },

src/components/contextual/contextual-basemaps.tsx

@@ -40,8 +40,8 @@ const BasemapsMapSettings = () => {
   );
 
   return (
-    <div className="relative flex flex-col text-sm text-black/85">
-      <RadioGroup onValueChange={handleClick} defaultValue={defaultActive}>
+    <div className="relative flex flex-col text-sm leading-4 text-black/85">
+      <RadioGroup onValueChange={handleClick} defaultValue={defaultActive} className="space-y-2">
         <div className="flex space-x-4">
           <RadioGroupItem
             option={{ value: 'no-layer', label: 'No layer' }}

src/components/markdown-viewer/index.tsx

@@ -0,0 +1,11 @@
+import ReactMarkdown from 'react-markdown';
+
+function MarkdownViewer({ markdownText }) {
+  return (
+    <div className="prose prose-sm mx-auto p-4 sm:prose-lg lg:prose-xl">
+      <ReactMarkdown>{markdownText}</ReactMarkdown>
+    </div>
+  );
+}
+
+export default MarkdownViewer;

src/components/radio-group/index.tsx

@@ -11,7 +11,7 @@ export interface RadioGroupDemoProps extends RadioGroupProps {
 }
 
 const RadioGroup = ({ options, children, ...props }: RadioGroupDemoProps) => (
-  <RadioGroupPrimitive.Root className="space-y flex flex-col" {...props}>
+  <RadioGroupPrimitive.Root className="flex flex-col" {...props}>
     {!!options
       ? options.map((option) => (
           <div key={option.value}>

src/components/suggested-layers/index.tsx

@@ -44,9 +44,9 @@ const SuggestedLayers = ({
   // };
 
   return (
-    <div className="flex flex-col space-y-4 rounded-xl bg-black bg-opacity-[4%] p-3">
+    <div className="flex flex-col space-y-5 rounded-xl bg-black bg-opacity-[4%] p-3">
       <div className="flex items-center justify-between">
-        <div className="flex items-center space-x-2">
+        <div className="flex items-center space-x-4">
           {!!thumbSource && (
             <div className="relative h-[42px] w-[42px] shrink-0 rounded-2xl">
               <Image
@@ -62,7 +62,7 @@ const SuggestedLayers = ({
           {color && (
             <div className="h-[42px] w-[42px] rounded-2xl" style={{ backgroundColor: color }} />
           )}
-          <p className="text-sm">{description}</p>
+          <p className="text-sm font-light">{description}</p>
         </div>
         <div className="flex items-start space-x-2">
           <SwitchWrapper id={id}>

src/containers/datasets/alerts/widget.tsx

@@ -221,13 +221,11 @@ const AlertsWidget = () => {
               description="We recommend you to use Planet-NICFI Satellite Imagery to validate the alerts."
             >
               {isActive && (
-                <div className="pb-4">
-                  <DateSelect
-                    mosaic_id="45d01564-c099-42d8-b8f2-a0851accf3e7"
-                    id="planet_medres_visual_monthly"
-                    className={{ content: 'w-[420px]' }}
-                  />
-                </div>
+                <DateSelect
+                  mosaic_id="45d01564-c099-42d8-b8f2-a0851accf3e7"
+                  id="planet_medres_visual_monthly"
+                  className={{ content: 'w-[420px]' }}
+                />
               )}
             </SuggestedLayers>
           </div>

src/containers/datasets/drawing-tool/index.tsx

@@ -59,7 +59,6 @@ const WidgetDrawingTool = () => {
   }, [setDrawingToolState, isDrawingToolEnabled, resetDrawingUploadToolState]);
 
   useUploadFile(acceptedFiles?.[0], onUploadFile);
-
   useEffect(() => {
     setMapCursor(isDrawingToolEnabled ? 'cell' : 'grab');
   }, [setMapCursor, isDrawingToolEnabled]);

src/containers/datasets/national-dashboard/indicator-source/index.tsx

@@ -47,6 +47,7 @@ const IndicatorSource = ({
   );
 
   const compareNationalLayers = activeLayersIds.includes(id);
+
   useEffect(() => {
     if (isActive && !compareNationalLayers) {
       const layersUpdate = updateLayers(activeLayers, {

src/containers/datasets/restoration-sites/hooks.tsx

@@ -8,7 +8,6 @@ import {
 } from 'store/widgets/restoration-sites';
 
 import { useQuery, UseQueryOptions } from '@tanstack/react-query';
-import { GeoJsonProperties, GeoJsonTypes } from 'geojson';
 import { Visibility } from 'mapbox-gl';
 import { useRecoilValue } from 'recoil';
 
@@ -19,7 +18,7 @@ import type { UseParamsOptions } from 'types/widget';
 
 import API from 'services/api';
 
-import type { Data, DataResponse, DataFilters, RestorationSite } from './types';
+import type { Data, DataResponse, DataFilters } from './types';
 
 // widget data
 export function useMangroveRestorationSites(

src/containers/map/legend/index.tsx

@@ -32,8 +32,8 @@ const Legend = ({ embedded = false }: { embedded?: boolean }) => {
       const newLayers = order.map((id) => {
         return activeLayers.find((l) => l.id === id);
       }) as ActiveLayers[];
-
-      setActiveLayers(newLayers);
+      const activeLayerPlanet = activeLayers.filter((l) => l.id.includes('planet'));
+      setActiveLayers([...newLayers, ...activeLayerPlanet]);
     },
     [activeLayers, setActiveLayers]
   );

src/containers/map/legend/item/index.tsx

@@ -125,7 +125,7 @@ const LegendItem = ({
       id={id}
       className="flex flex-col items-start rounded-md bg-white pb-4 pt-2 text-sm md:px-2"
     >
-      <div className="flex w-full items-center justify-between">
+      <div className="flex w-full items-start justify-between">
         <div className="flex items-center space-x-2">
           <Media greaterThanOrEqual="md">
             {!embedded && (
@@ -143,7 +143,7 @@ const LegendItem = ({
                     aria-label="Layer statistics"
                     onClick={() => setStatisticsDialogVisibility(!statisticsDialogVisibility)}
                   >
-                    <p className="pl-4 text-xs font-semibold uppercase tracking-wider text-black/85 md:pl-0">
+                    <p className="pl-4 text-left text-xs font-semibold uppercase tracking-wider text-black/85 md:pl-0">
                       {title}
                     </p>
                   </button>

src/containers/navigation/index.tsx

@@ -3,7 +3,6 @@ import GuideSwitcher from 'containers/guide/switcher';
 import LanguageSelector from 'containers/navigation/language-selector';
 import Menu from 'containers/navigation/menu';
 import News from 'containers/navigation/news';
-
 const HELPER_ID = 'menu-categories';
 
 const AppTools = () => (

src/containers/widgets/index.tsx

@@ -185,6 +185,7 @@ const WidgetsContainer: FC = () => {
                   />
                   <p className="text-sm font-light text-black/85">
                     Disclaimer: Some layers and widgets are not available for certain locations.
+                    Select applicable geography to enable layer.
                   </p>
                 </div>
                 <Helper

src/hooks/analysis/index.ts

@@ -29,8 +29,8 @@ export const useUploadFile = (
 ) => {
   const [, setUploadErrorModal] = useRecoilState(uploadFileAtom);
   const data = new FormData();
-  data.append('file', file);
 
+  data.append('file', file);
   return useQuery(['converter'], () => fetchUploadFile(data), {
     ...queryOptions,
     enabled: !!file && enabled,

src/pages/500.tsx

@@ -1,3 +1,5 @@
-export default function Custom500() {
-  return <h1>500 - Server-side error occurred</h1>;
+export default function Custom500({ statusCode }) {
+  return (
+    <h1 className="h-screen w-screen text-black">500 - Server-side error occurred {statusCode}</h1>
+  );
 }

tests/navigation.spec.ts

@@ -1,5 +1,4 @@
 import { expect, test } from '@playwright/test';
-import { fi } from 'date-fns/locale';
 
 test.beforeEach(async ({ page }) => {
   await page.goto('/');