Merge pull request #105 from Vizzuality/rename-data-tool-map

[N/A] Rename "Data tool" to "Map" and update all links/references/folders/imports

frontend/next.config.js

@@ -38,13 +38,8 @@ const nextConfig = {
   redirects() {
     return [
       {
-        source: '/dashboard',
-        destination: '/dashboard/GLOB',
-        permanent: false,
-      },
-      {
-        source: '/data-tool',
-        destination: '/data-tool/GLOB',
+        source: '/map',
+        destination: '/map/GLOB',
         permanent: false,
       },
     ];

frontend/src/components/header.tsx

@@ -19,7 +19,7 @@ import { cn } from '@/lib/classnames';
 import ArrowRight from '@/styles/icons/arrow-right.svg?sprite';
 
 const NAVIGATION_ITEMS = [
-  { name: 'Data tool', href: PAGES.dataTool, colorClassName: 'text-blue fill-blue' },
+  { name: 'Map', href: PAGES.map, colorClassName: 'text-blue fill-blue' },
   { name: 'Knowledge Hub', href: PAGES.knowledgeHub, colorClassName: 'text-green fill-green' },
   { name: 'About', href: PAGES.about, colorClassName: 'text-black fill-black' },
   { name: 'Contact', href: PAGES.contact, colorClassName: 'text-black fill-black' },

frontend/src/components/map/attributions/index.tsx

@@ -2,7 +2,7 @@ import { FC } from 'react';
 
 import { AttributionControl } from 'react-map-gl';
 
-import { useSyncMapLayers } from '@/containers/data-tool/content/map/sync-settings';
+import { useSyncMapLayers } from '@/containers/map/content/map/sync-settings';
 import { useGetLayers } from '@/types/generated/layer';
 
 const Attributions: FC = () => {

frontend/src/components/map/draw-controls/index.tsx

@@ -5,7 +5,7 @@ import { Trash2 } from 'lucide-react';
 
 import '@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css';
 import { Button } from '@/components/ui/button';
-import { drawStateAtom } from '@/containers/data-tool/store';
+import { drawStateAtom } from '@/containers/map/store';
 
 import { useMapboxDraw, UseMapboxDrawProps } from './hooks';
 

frontend/src/components/map/drawing/index.tsx

@@ -5,7 +5,7 @@ import { Source, Layer, LngLatBoundsLike, useMap } from 'react-map-gl';
 import { bbox } from '@turf/turf';
 import { useAtomValue } from 'jotai';
 
-import { drawStateAtom } from '@/containers/data-tool/store';
+import { drawStateAtom } from '@/containers/map/store';
 
 import { DRAW_STYLES } from '../draw-controls/hooks';
 

frontend/src/components/sidebar-content/analysis/index.tsx

@@ -1,7 +1,7 @@
 import { useSetAtom } from 'jotai';
 
 import { Button } from '@/components/ui/button';
-import { drawStateAtom } from '@/containers/data-tool/store';
+import { drawStateAtom } from '@/containers/map/store';
 
 const AnalysisStateContent = {
   Content: () => {

frontend/src/components/sidebar-content/drawing/index.tsx

@@ -6,7 +6,7 @@ import { AlertCircle } from 'lucide-react';
 import { Alert, AlertDescription } from '@/components/ui/alert';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
-import { drawStateAtom } from '@/containers/data-tool/store';
+import { drawStateAtom } from '@/containers/map/store';
 
 import { convertFilesToGeojson, supportedFileformats } from './helpers';
 

frontend/src/components/sidebar-content/index.tsx

@@ -2,7 +2,7 @@ import { FC } from 'react';
 
 import { useAtomValue } from 'jotai';
 
-import { drawStateAtom } from '@/containers/data-tool/store';
+import { drawStateAtom } from '@/containers/map/store';
 
 import AnalysisStateContent from './analysis';
 import DrawingStateContent from './drawing';

frontend/src/components/sidebar-content/overview/index.tsx

@@ -1,7 +1,7 @@
 import { useAtom } from 'jotai';
 
 import { Button } from '@/components/ui/button';
-import { drawStateAtom } from '@/containers/data-tool/store';
+import { drawStateAtom } from '@/containers/map/store';
 
 const OverviewStateContent = {
   Content: () => (

frontend/src/constants/pages.ts

@@ -1,6 +1,6 @@
 export const PAGES = {
   homepage: '/',
-  dataTool: '/data-tool',
+  map: '/map',
   knowledgeHub: '/knowledge-hub',
   contact: '/contact',
   about: '/about',

frontend/src/containers/homepage/link-cards/index.tsx

@@ -4,12 +4,12 @@ import LinkCard from '@/containers/homepage/link-cards/link-card';
 const LinkCards: React.FC = () => (
   <div className="flex flex-col gap-6">
     <LinkCard
-      title="Data Tool"
-      subtitle="An interactive tool for tracking 30x30 progress and drawing new protected areas"
+      title="Map"
+      subtitle="An interactive map for tracking 30x30 progress and drawing new protected areas"
       description="This tool allows users to understand global progress toward 30x30 at a glance, draw new potential protected areas, and illustrate the effects of those proposed areas on national and global progress toward 30x30."
       image="computer"
-      link={PAGES.dataTool}
-      linkLabel="Go to the Data Tool"
+      link={PAGES.map}
+      linkLabel="Go to the Map"
     />
     <LinkCard
       title="Knowledge Hub"

frontend/src/containers/data-tool/content/details/index.tsx → frontend/src/containers/map/content/details/index.tsx

@@ -5,12 +5,12 @@ import { useRouter } from 'next/router';
 import { useQueryClient } from '@tanstack/react-query';
 
 import { Button } from '@/components/ui/button';
-import tablesSettings from '@/containers/data-tool/content/details/tables-settings';
-import { useSyncDataToolContentSettings } from '@/containers/data-tool/sync-settings';
+import tablesSettings from '@/containers/map/content/details/tables-settings';
+import { useSyncMapContentSettings } from '@/containers/map/sync-settings';
 import { LocationGroupsDataItemAttributes } from '@/types/generated/strapi.schemas';
 
-const DataToolDetails: React.FC = () => {
-  const [, setSettings] = useSyncDataToolContentSettings();
+const MapDetails: React.FC = () => {
+  const [, setSettings] = useSyncMapContentSettings();
   const {
     query: { locationCode },
   } = useRouter();
@@ -63,4 +63,4 @@ const DataToolDetails: React.FC = () => {
   );
 };
 
-export default DataToolDetails;
+export default MapDetails;

frontend/src/containers/data-tool/content/details/table/index.tsx → frontend/src/containers/map/content/details/table/index.tsx

@@ -10,7 +10,7 @@ import {
 import { cn } from '@/lib/classnames';
 
 // ! todo: type columns,data properly
-const DataToolTable = ({ columns, data }) => {
+const MapTable = ({ columns, data }) => {
   const tableRef = useRef<HTMLTableElement>();
   const firstColumnRef = useRef<HTMLTableCellElement>(null);
 
@@ -125,4 +125,4 @@ const DataToolTable = ({ columns, data }) => {
   );
 };
 
-export default DataToolTable;
+export default MapTable;

frontend/src/containers/data-tool/content/details/table/sorting-button/index.tsx → frontend/src/containers/map/content/details/table/sorting-button/index.tsx

@@ -2,8 +2,8 @@ import { Column } from '@tanstack/react-table';
 import { ArrowDownNarrowWide, ArrowUpNarrowWide, ArrowUpDown } from 'lucide-react';
 
 import { Button } from '@/components/ui/button';
-import { GlobalRegionalTableColumns } from '@/containers/data-tool/content/details/tables/global-regional/useColumns';
-import { NationalHighseasTableColumns } from '@/containers/data-tool/content/details/tables/national-highseas/useColumns';
+import { GlobalRegionalTableColumns } from '@/containers/map/content/details/tables/global-regional/useColumns';
+import { NationalHighseasTableColumns } from '@/containers/map/content/details/tables/national-highseas/useColumns';
 
 const BUTTON_CLASSNAMES = '-ml-4';
 const ICON_CLASSNAMES = 'h-4 w-4';

frontend/src/containers/data-tool/content/details/table/tooltip-button/index.tsx → frontend/src/containers/map/content/details/table/tooltip-button/index.tsx

@@ -5,8 +5,8 @@ import { Info } from 'lucide-react';
 
 import { Button } from '@/components/ui/button';
 import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
-import { GlobalRegionalTableColumns } from '@/containers/data-tool/content/details/tables/global-regional/useColumns';
-import { NationalHighseasTableColumns } from '@/containers/data-tool/content/details/tables/national-highseas/useColumns';
+import { GlobalRegionalTableColumns } from '@/containers/map/content/details/tables/global-regional/useColumns';
+import { NationalHighseasTableColumns } from '@/containers/map/content/details/tables/national-highseas/useColumns';
 
 type TooltipButtonProps = {
   column:

frontend/src/containers/data-tool/content/details/tables-settings.ts → frontend/src/containers/map/content/details/tables-settings.ts

@@ -1,5 +1,5 @@
-import GlobalRegionalTable from '@/containers/data-tool/content/details/tables/global-regional';
-import NationalHighSeasTable from '@/containers/data-tool/content/details/tables/national-highseas';
+import GlobalRegionalTable from '@/containers/map/content/details/tables/global-regional';
+import NationalHighSeasTable from '@/containers/map/content/details/tables/national-highseas';
 
 const tablesSettings = {
   worldwideRegion: {

frontend/src/containers/data-tool/content/details/tables/global-regional/index.tsx → frontend/src/containers/map/content/details/tables/global-regional/index.tsx

@@ -4,9 +4,9 @@ import { useRouter } from 'next/router';
 
 import { useQueryClient } from '@tanstack/react-query';
 
-import { applyFilters } from '@/containers/data-tool/content/details/helpers';
-import Table from '@/containers/data-tool/content/details/table';
-import useColumns from '@/containers/data-tool/content/details/tables/global-regional/useColumns';
+import { applyFilters } from '@/containers/map/content/details/helpers';
+import Table from '@/containers/map/content/details/table';
+import useColumns from '@/containers/map/content/details/tables/global-regional/useColumns';
 import { useGetLocations } from '@/types/generated/location';
 import type {
   LocationGroupsDataItemAttributes,
@@ -20,7 +20,7 @@ const GlobalRegionalTable: React.FC = () => {
 
   const queryClient = useQueryClient();
 
-  const dataToolLocation = queryClient.getQueryData<LocationGroupsDataItemAttributes>([
+  const mapLocation = queryClient.getQueryData<LocationGroupsDataItemAttributes>([
     'locations',
     locationCode,
   ]);
@@ -40,11 +40,11 @@ const GlobalRegionalTable: React.FC = () => {
   const { data: locationsData }: { data: LocationListResponseDataItem[] } = useGetLocations(
     {
       filters:
-        dataToolLocation?.type === 'region'
+        mapLocation?.type === 'region'
           ? {
               groups: {
                 code: {
-                  $eq: dataToolLocation?.code,
+                  $eq: mapLocation?.code,
                 },
               },
             }
@@ -154,7 +154,7 @@ const GlobalRegionalTable: React.FC = () => {
       const lfpHighProtectedPercentage = (lfpHighProtectedArea * 100) / location.totalMarineArea;
 
       // Global contributions calculations
-      const globalContributionPercentage = (protectedArea * 100) / dataToolLocation.totalMarineArea;
+      const globalContributionPercentage = (protectedArea * 100) / mapLocation.totalMarineArea;
 
       return {
         location: location.name,
@@ -169,7 +169,7 @@ const GlobalRegionalTable: React.FC = () => {
         globalContribution: globalContributionPercentage,
       };
     });
-  }, [dataToolLocation, locationsData]);
+  }, [mapLocation, locationsData]);
 
   const tableData = useMemo(() => {
     return applyFilters(parsedData, filters);

frontend/src/containers/data-tool/content/details/tables/global-regional/useColumns.tsx → frontend/src/containers/map/content/details/tables/global-regional/useColumns.tsx

@@ -5,14 +5,14 @@ import Link from 'next/link';
 import { ColumnDef } from '@tanstack/react-table';
 
 import { PAGES } from '@/constants/pages';
-import FiltersButton from '@/containers/data-tool/content/details/table/filters-button';
-import HeaderItem from '@/containers/data-tool/content/details/table/header-item';
-import { cellFormatter } from '@/containers/data-tool/content/details/table/helpers';
-import SortingButton from '@/containers/data-tool/content/details/table/sorting-button';
-import TooltipButton from '@/containers/data-tool/content/details/table/tooltip-button';
-import useFiltersOptions from '@/containers/data-tool/content/details/tables/global-regional/useFiltersOptions';
-import useTooltips from '@/containers/data-tool/content/details/tables/global-regional/useTooltips';
-import { useDataToolSearchParams } from '@/containers/data-tool/content/map/sync-settings';
+import FiltersButton from '@/containers/map/content/details/table/filters-button';
+import HeaderItem from '@/containers/map/content/details/table/header-item';
+import { cellFormatter } from '@/containers/map/content/details/table/helpers';
+import SortingButton from '@/containers/map/content/details/table/sorting-button';
+import TooltipButton from '@/containers/map/content/details/table/tooltip-button';
+import useFiltersOptions from '@/containers/map/content/details/tables/global-regional/useFiltersOptions';
+import useTooltips from '@/containers/map/content/details/tables/global-regional/useTooltips';
+import { useMapSearchParams } from '@/containers/map/content/map/sync-settings';
 
 export type GlobalRegionalTableColumns = {
   location: string;
@@ -33,7 +33,7 @@ type UseColumnsProps = {
 };
 
 const useColumns = ({ filters, onFiltersChange }: UseColumnsProps) => {
-  const searchParams = useDataToolSearchParams();
+  const searchParams = useMapSearchParams();
   const { locationTypes: locationTypesOptions } = useFiltersOptions();
 
   const tooltips = useTooltips();
@@ -48,7 +48,7 @@ const useColumns = ({ filters, onFiltersChange }: UseColumnsProps) => {
           return (
             <Link
               className="underline"
-              href={`${PAGES.dataTool}/${locationCode}?${searchParams.toString()}`}
+              href={`${PAGES.map}/${locationCode}?${searchParams.toString()}`}
             >
               {location}
             </Link>

frontend/src/containers/data-tool/content/details/tables/global-regional/useFiltersOptions.ts → frontend/src/containers/map/content/details/tables/global-regional/useFiltersOptions.ts

@@ -1,4 +1,4 @@
-import { LOCATION_TYPES_FILTER_OPTIONS } from '@/containers/data-tool/constants';
+import { LOCATION_TYPES_FILTER_OPTIONS } from '@/containers/map/constants';
 
 const useFiltersOptions = () => {
   return {

frontend/src/containers/data-tool/content/details/tables/national-highseas/index.tsx → frontend/src/containers/map/content/details/tables/national-highseas/index.tsx

@@ -4,9 +4,9 @@ import { useRouter } from 'next/router';
 
 import { useQueryClient } from '@tanstack/react-query';
 
-import { applyFilters } from '@/containers/data-tool/content/details/helpers';
-import Table from '@/containers/data-tool/content/details/table';
-import useColumns from '@/containers/data-tool/content/details/tables/national-highseas/useColumns';
+import { applyFilters } from '@/containers/map/content/details/helpers';
+import Table from '@/containers/map/content/details/table';
+import useColumns from '@/containers/map/content/details/tables/national-highseas/useColumns';
 import { useGetMpaProtectionCoverageStats } from '@/types/generated/mpa-protection-coverage-stat';
 import {
   LocationGroupsDataItemAttributes,
@@ -20,7 +20,7 @@ const NationalHighseasTable: React.FC = () => {
 
   const queryClient = useQueryClient();
 
-  const dataToolLocation = queryClient.getQueryData<LocationGroupsDataItemAttributes>([
+  const mapLocation = queryClient.getQueryData<LocationGroupsDataItemAttributes>([
     'locations',
     locationCode,
   ]);
@@ -50,7 +50,7 @@ const NationalHighseasTable: React.FC = () => {
         filters: {
           location: {
             code: {
-              $eq: dataToolLocation?.code,
+              $eq: mapLocation?.code,
             },
           },
         },
@@ -100,7 +100,7 @@ const NationalHighseasTable: React.FC = () => {
       const fishingProtectionLevel = coverageStats?.fishing_protection_level?.data?.attributes;
 
       // Calculate coverage percentage
-      const coveragePercentage = (coverageStats.area / dataToolLocation.totalMarineArea) * 100;
+      const coveragePercentage = (coverageStats.area / mapLocation.totalMarineArea) * 100;
 
       return {
         protectedArea: mpa?.name,
@@ -112,7 +112,7 @@ const NationalHighseasTable: React.FC = () => {
         area: mpa?.area,
       };
     });
-  }, [coverageData, dataToolLocation]);
+  }, [coverageData, mapLocation]);
 
   const tableData = useMemo(() => {
     return applyFilters(parsedData, filters);

frontend/src/containers/data-tool/content/details/tables/national-highseas/useColumns.tsx → frontend/src/containers/map/content/details/tables/national-highseas/useColumns.tsx

@@ -2,13 +2,13 @@ import { useMemo } from 'react';
 
 import { ColumnDef } from '@tanstack/react-table';
 
-import FiltersButton from '@/containers/data-tool/content/details/table/filters-button';
-import HeaderItem from '@/containers/data-tool/content/details/table/header-item';
-import { cellFormatter } from '@/containers/data-tool/content/details/table/helpers';
-import SortingButton from '@/containers/data-tool/content/details/table/sorting-button';
-import TooltipButton from '@/containers/data-tool/content/details/table/tooltip-button';
-import useFiltersOptions from '@/containers/data-tool/content/details/tables/national-highseas/useFiltersOptions';
-import useTooltips from '@/containers/data-tool/content/details/tables/national-highseas/useTooltips';
+import FiltersButton from '@/containers/map/content/details/table/filters-button';
+import HeaderItem from '@/containers/map/content/details/table/header-item';
+import { cellFormatter } from '@/containers/map/content/details/table/helpers';
+import SortingButton from '@/containers/map/content/details/table/sorting-button';
+import TooltipButton from '@/containers/map/content/details/table/tooltip-button';
+import useFiltersOptions from '@/containers/map/content/details/tables/national-highseas/useFiltersOptions';
+import useTooltips from '@/containers/map/content/details/tables/national-highseas/useTooltips';
 
 export type NationalHighseasTableColumns = {
   protectedArea: string;

frontend/src/containers/data-tool/content/index.tsx → frontend/src/containers/map/content/index.tsx

@@ -1,10 +1,10 @@
-import { useSyncDataToolContentSettings } from '@/containers/data-tool/sync-settings';
+import { useSyncMapContentSettings } from '@/containers/map/sync-settings';
 
 import Details from './details';
 import Map from './map';
 
-const DataToolContent: React.FC = () => {
-  const [{ showDetails }] = useSyncDataToolContentSettings();
+const MapContent: React.FC = () => {
+  const [{ showDetails }] = useSyncMapContentSettings();
 
   return (
     <>
@@ -18,4 +18,4 @@ const DataToolContent: React.FC = () => {
   );
 };
 
-export default DataToolContent;
+export default MapContent;