Merge pull request #67 from Vizzuality/develop

Update staging
Vizzuality · Jul 2, 2024 · 44050a7 · 44050a7
2 parents 918af38 + 8c1c4d4
commit 44050a7
Show file tree

Hide file tree

Showing 62 changed files with 1,073 additions and 474 deletions.
diff --git a/client/next.config.mjs b/client/next.config.mjs
@@ -1,5 +1,4 @@
-import createNextIntlPlugin from 'next-intl/plugin'
-
+import createNextIntlPlugin from "next-intl/plugin";
 
 const withNextIntl = createNextIntlPlugin();
 
@@ -11,6 +10,11 @@ const nextConfig = {
         protocol: "https",
         hostname: "api.mapbox.com",
       },
+      {
+        protocol: "https",
+        hostname: "storage.googleapis.com",
+        pathname: "/rdp-landing-bucket/**",
+      },
     ],
   },
   webpack(config) {

diff --git a/client/src/app/[locale]/layout.tsx b/client/src/app/[locale]/layout.tsx
@@ -1,12 +1,14 @@
 import "./globals.css";
 import "mapbox-gl/dist/mapbox-gl.css";
 
+import localFont from "next/font/local";
+
 import { getTranslations } from "@/i18n";
 import { getMessages } from "next-intl/server";
 import LayoutProviders from "./layout-providers";
 import NextIntlProvider from "@/components/next-intl-provider";
 import Header from "@/containers/header";
-
+// import { w } from "next/font/google"
 export async function generateMetadata({ params: { locale } }: { params: { locale: string } }) {
   const t = await getTranslations({ locale });
 
@@ -18,6 +20,12 @@ export async function generateMetadata({ params: { locale } }: { params: { local
   };
 }
 
+// Font files can be colocated inside of `app`
+const wotfard = localFont({
+  src: "../../assets/fonts/wotfard-regular-webfont.woff2",
+  display: "swap",
+});
+
 export default async function LocaleLayout({
   children,
   params: { locale },
@@ -29,9 +37,9 @@ export default async function LocaleLayout({
 
   return (
     <LayoutProviders>
-      <html lang={locale}>
+      <html lang={locale} className={wotfard.className}>
         <NextIntlProvider locale={locale} messages={messages}>
-          <body className="flex h-[100svh] flex-col overflow-y-hidden">
+          <body className="flex flex-col">
             <Header />
             <div className="flex-1">{children}</div>
           </body>

diff --git a/client/src/app/[locale]/map/page.tsx b/client/src/app/[locale]/map/page.tsx
@@ -1,15 +1,40 @@
 import Datasets from "@/containers/datasets";
 import Map from "@/containers/map";
 import Sidebar from "@/containers/sidebar";
+import getQueryClient from "@/lib/react-query/getQueryClient";
+import { getGetDatasetsQueryOptions } from "@/types/generated/dataset";
+import { dehydrate, HydrationBoundary } from "@tanstack/react-query";
+
+async function prefetchQueries() {
+  const queryClient = getQueryClient();
+  try {
+    const { queryKey, queryFn } = getGetDatasetsQueryOptions({
+      populate: ["layers", "layers.layer", "sources", "citations"],
+      sort: "id:asc",
+      locale: "all",
+    });
+
+    await queryClient.prefetchQuery({
+      queryKey,
+      queryFn,
+    });
+    return dehydrate(queryClient);
+  } catch (error) {
+    console.info(error);
+    return null;
+  }
+}
 
 export default async function Home() {
+  const dehydratedState = await prefetchQueries();
   return (
-    // The map is a client component, so it needs to be wrapped in the NextIntlClientProvider to provide the translations
-    <div className="flex">
-      <Sidebar>
-        <Datasets />
-      </Sidebar>
-      <Map />
-    </div>
+    <HydrationBoundary state={dehydratedState}>
+      <div className="flex h-[var(--content-height)] w-full overflow-y-hidden">
+        <Sidebar>
+          <Datasets />
+        </Sidebar>
+        <Map />
+      </div>
+    </HydrationBoundary>
   );
 }
diff --git a/client/src/app/[locale]/page.tsx b/client/src/app/[locale]/page.tsx
@@ -1,12 +1,11 @@
-import { useTranslations } from "@/i18n";
+import Footer from "@/containers/footer";
+import HomeComponent from "@/containers/home";
 
 export default function Home() {
-  const t = useTranslations();
   return (
-    <main className="flex min-h-screen flex-col items-center justify-between p-24">
-      <div>{t("Rangelands Data Platform")}</div>
-      <div>{t("Exploring Rangelands")}</div>
-      <div>{t("Test string")}</div>
+    <main className="h-auto min-h-screen w-[100vsw] overflow-x-hidden">
+      <HomeComponent />
+      <Footer />
     </main>
   );
 }
diff --git a/client/src/assets/fonts/wotfard-regular-webfont.woff2 b/client/src/assets/fonts/wotfard-regular-webfont.woff2
diff --git a/client/src/assets/images/gmv-logo.png b/client/src/assets/images/gmv-logo.png
diff --git a/client/src/assets/images/map.png b/client/src/assets/images/map.png
diff --git a/client/src/assets/images/platform/collaboration.png b/client/src/assets/images/platform/collaboration.png
diff --git a/client/src/assets/images/platform/community.png b/client/src/assets/images/platform/community.png
diff --git a/client/src/assets/images/platform/data.png b/client/src/assets/images/platform/data.png
diff --git a/client/src/assets/images/vizzuality-logo.png b/client/src/assets/images/vizzuality-logo.png
diff --git a/client/src/components/map/index.tsx b/client/src/components/map/index.tsx
@@ -132,7 +132,7 @@ export const Map: FC<CustomMapProps> = ({
   }, [bounds, isFlying]);
 
   return (
-    <div className={cn("absolute left-0 top-0 z-0 h-full w-full", className)}>
+    <div className={cn("absolute bottom-0 left-0 z-0 h-[var(--content-height)] w-full", className)}>
       <ReactMapGL
         id={id}
         initialViewState={initialViewState}

diff --git a/client/src/components/map/layers/deck-layer/rangeland-component.tsx b/client/src/components/map/layers/deck-layer/rangeland-component.tsx
@@ -0,0 +1,71 @@
+import { MVTLayer } from "@deck.gl/geo-layers";
+import { useDeckMapboxOverlayContext } from "../../provider";
+import { env } from "@/env.mjs";
+import { useEffect, useMemo, useState } from "react";
+
+export interface RangelandsLayerComponentProps {
+  id: string;
+  data: string;
+  opacity?: number;
+  visibility?: boolean;
+  colorProperty: string;
+  lineWidth?: number;
+}
+
+const RangelandsLayerComponent = ({
+  id,
+  data,
+  opacity,
+  visibility,
+  colorProperty,
+  lineWidth = 1,
+  ...props
+}: RangelandsLayerComponentProps) => {
+  const dataWithMapboxToken = data + `?access_token=${env.NEXT_PUBLIC_MAPBOX_TOKEN}`;
+  const [hoveredProperty, setHoveredProperty] = useState(null);
+  const i = `${id}-deck`;
+  const { addLayer, removeLayer } = useDeckMapboxOverlayContext();
+  const config = useMemo(
+    () =>
+      new MVTLayer({
+        id: i,
+        data: dataWithMapboxToken,
+        opacity: opacity ?? 1,
+        visible: visibility ?? true,
+        pickable: true,
+        onHover: (info) => {
+          setHoveredProperty(info?.object?.properties?.[colorProperty]);
+        },
+        getLineWidth: (f) => {
+          return f?.properties?.[colorProperty] === hoveredProperty ? lineWidth : 0;
+        },
+        lineWidthUnits: "pixels",
+        getLineColor: [255, 255, 255],
+        updateTriggers: {
+          getLineWidth: hoveredProperty,
+        },
+        ...props,
+      }),
+    [id, dataWithMapboxToken, opacity, visibility, props],
+  );
+
+  useEffect(() => {
+    if (!config) return;
+    // Give the map a chance to load the background layer before adding the Deck layer
+    setTimeout(() => {
+      // https://github.com/visgl/deck.gl/blob/c2ba79b08b0ea807c6779d8fe1aaa307ebc22f91/modules/mapbox/src/resolve-layers.ts#L66
+      addLayer(config);
+    }, 10);
+  }, [i, id, config, addLayer]);
+
+  useEffect(() => {
+    if (!config) return;
+    return () => {
+      removeLayer(i);
+    };
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+  return null;
+};
+
+export default RangelandsLayerComponent;
diff --git a/client/src/components/map/layers/deck-layer/raster.tsx b/client/src/components/map/layers/deck-layer/raster.tsx
@@ -7,6 +7,7 @@ import { LayerProps } from "@/types/layers";
 
 export interface RasterLayerProps extends LayerProps {
   id: string;
+  beforeId: string;
   source: RasterSource;
   opacity: number;
   visibility: boolean;
@@ -15,14 +16,25 @@ export interface RasterLayerProps extends LayerProps {
 }
 
 class RasterLayer {
-  constructor({ id, source, visibility, opacity, tileProps, bitmapProps }: RasterLayerProps) {
+  constructor({
+    id,
+    source,
+    visibility,
+    opacity,
+    beforeId,
+    tileProps,
+    bitmapProps,
+  }: RasterLayerProps) {
     return new TileLayer<unknown>({
       ...tileProps,
       id,
+      // @ts-expect-error - `beforeId` is not a valid prop for TileLayer
+      beforeId,
       data: source.tiles,
       tileSize: source.tileSize ?? 256,
       minZoom: source.minzoom,
       maxZoom: source.maxzoom,
+      year: 2020,
       visible: visibility ?? true,
       opacity: opacity ?? 1,
       refinementStrategy: "never",

diff --git a/client/src/components/map/legends/content/choropleth.tsx b/client/src/components/map/legends/content/choropleth.tsx
@@ -0,0 +1,42 @@
+import React from "react";
+
+import { LegendComponent } from "../../types";
+
+type LegendComponentProps = {
+  items: LegendComponent["items"];
+};
+
+export const LegendChoropleth: React.FC<LegendComponentProps> = ({ items }) => {
+  return (
+    <div>
+      <ul className="flex w-full overflow-hidden rounded-full">
+        {items.map(({ color }) => (
+          <li
+            key={`${color}`}
+            className="h-2 flex-shrink-0"
+            style={{
+              width: `${100 / items.length}%`,
+              backgroundColor: color,
+            }}
+          />
+        ))}
+      </ul>
+
+      <ul className="mt-1 flex w-full">
+        {items.map(({ name }) => (
+          <li
+            key={`${name}`}
+            className="flex-shrink-0 text-center text-xs"
+            style={{
+              width: `${100 / items.length}%`,
+            }}
+          >
+            {name}
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+};
+
+export default LegendChoropleth;
diff --git a/client/src/components/map/legends/content/gradient.tsx b/client/src/components/map/legends/content/gradient.tsx
@@ -9,7 +9,7 @@ const GradientLegend = ({ items }: LegendComponentProps) => {
   return (
     <div>
       <div
-        className="flex h-3 w-full rounded-full"
+        className="flex h-2 w-full rounded-full"
         style={{
           backgroundImage: `linear-gradient(to right, ${items.map((i) => i.color).join(",")})`,
         }}

diff --git a/client/src/components/map/legends/header/index.tsx b/client/src/components/map/legends/header/index.tsx
@@ -1,4 +1,6 @@
+import { ChevronDown } from "lucide-react";
 import { LayerInfo, LayerOpacity, LayerVisibility } from "./buttons";
+import { Button } from "@/components/ui/button";
 
 type LegendHeaderProps = {
   title?: string;
@@ -8,6 +10,7 @@ type LegendHeaderProps = {
   setVisibility: (v: boolean) => void;
   visible: boolean;
   info?: string;
+  handleChangeIsOpen: () => void;
 };
 
 const LegendHeader = ({
@@ -18,6 +21,7 @@ const LegendHeader = ({
   info,
   opacity,
   visible,
+  handleChangeIsOpen,
 }: LegendHeaderProps) => {
   return (
     <div>
@@ -26,6 +30,9 @@ const LegendHeader = ({
         <LayerOpacity onChangeOpacity={setOpacity} opacity={opacity} />
         {!!info && <LayerInfo info={info} title={title} />}
         <LayerVisibility onChangeVisibility={setVisibility} visible={visible} />
+        <Button onClick={handleChangeIsOpen} variant="link" className="h-fit px-0 py-0">
+          <ChevronDown className="h-5 w-5 shrink-0 group-data-[state=open]:rotate-180" />
+        </Button>
       </div>
       {subtitle && <span className="text-xs">{subtitle}</span>}
     </div>

diff --git a/client/src/components/map/legends/index.tsx b/client/src/components/map/legends/index.tsx
diff --git a/client/src/components/map/tooltip/components/index.css b/client/src/components/map/tooltip/components/index.css
@@ -2,8 +2,4 @@
   background-color: transparent;
   padding: 0;
   border-radius: theme("borderRadius.lg");
-  box-shadow: theme("boxShadow.lg");
-}
-.mapboxgl-popup-close-button {
-  display: none;
 }
diff --git a/client/src/components/map/tooltip/components/rangelands.tsx b/client/src/components/map/tooltip/components/rangelands.tsx
@@ -77,7 +77,7 @@ const RangelandsTooltip = (props: MapTooltipProps) => {
   }, []);
 
   return (
-    <div className="overflow-hidden rounded-lg bg-background">
+    <div className="overflow-hidden rounded-lg bg-background drop-shadow-2xl">
       <div className="border-t-[12px]" style={{ borderColor: content.color }}></div>
       <div className="space-y-4 p-6 pt-3">
         <div className="space-y-2">