From ce83b06bb99680c124b0e76b532ffbc739c29f8e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cl=C3=A9ment=20Prod=27homme?= <contact@clementprodhomme.fr>
Date: Wed, 20 Nov 2024 14:31:03 +0100
Subject: [PATCH 1/3] feat(client): Display dataset metadata in dialog

---
 client/package.json                           |   1 +
 client/src/components/dataset-card/index.tsx  |  24 +-
 .../src/components/dataset-metadata/index.tsx |  93 ++
 client/src/components/markdown/index.tsx      |  32 +
 .../navigation/navigation-desktop/index.tsx   |   2 +-
 .../panels/contextual-layers/index.tsx        |  11 +-
 .../panels/contextual-layers/item.tsx         |  29 +-
 .../src/components/panels/drought/index.tsx   |  11 +-
 client/src/components/panels/flood/index.tsx  |  11 +-
 .../panels/hydrometeorological/index.tsx      |   1 +
 client/src/components/ui/dialog.tsx           |   4 +-
 client/src/hooks/use-datasets-by-sub-topic.ts |   7 +-
 client/src/svgs/question-mark.svg             |   6 +
 client/yarn.lock                              | 804 +++++++++++++++++-
 14 files changed, 1012 insertions(+), 24 deletions(-)
 create mode 100644 client/src/components/dataset-metadata/index.tsx
 create mode 100644 client/src/components/markdown/index.tsx
 create mode 100644 client/src/svgs/question-mark.svg

diff --git a/client/package.json b/client/package.json
index 5a6ba5b..da63d2d 100644
--- a/client/package.json
+++ b/client/package.json
@@ -57,6 +57,7 @@
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "react-map-gl": "7.1.7",
+    "react-markdown": "9.0.1",
     "tailwind-merge": "2.5.4",
     "tailwindcss-animate": "1.0.7",
     "tailwindcss-border-image": "1.1.2",
diff --git a/client/src/components/dataset-card/index.tsx b/client/src/components/dataset-card/index.tsx
index fe47819..cedca6d 100644
--- a/client/src/components/dataset-card/index.tsx
+++ b/client/src/components/dataset-card/index.tsx
@@ -6,7 +6,9 @@ import Link from "next/link";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import * as React from "react";
 
+import DatasetMetadata from "@/components/dataset-metadata";
 import { Button } from "@/components/ui/button";
+import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog";
 import { Label } from "@/components/ui/label";
 import MonthPicker from "@/components/ui/month-picker";
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
@@ -25,7 +27,8 @@ import ChevronDownIcon from "@/svgs/chevron-down.svg";
 import DownloadIcon from "@/svgs/download.svg";
 import PauseIcon from "@/svgs/pause.svg";
 import PlayIcon from "@/svgs/play.svg";
-import { DatasetLayersDataItem } from "@/types/generated/strapi.schemas";
+import QuestionMarkIcon from "@/svgs/question-mark.svg";
+import { DatasetLayersDataItem, MetadataItemComponent } from "@/types/generated/strapi.schemas";
 import { LayerParamsConfig } from "@/types/layer";
 
 import {
@@ -40,9 +43,10 @@ interface DatasetCardProps {
   name: string;
   defaultLayerId: number | undefined;
   layers: DatasetLayersDataItem[];
+  metadata?: MetadataItemComponent;
 }
 
-const DatasetCard = ({ id, name, defaultLayerId, layers }: DatasetCardProps) => {
+const DatasetCard = ({ id, name, defaultLayerId, layers, metadata }: DatasetCardProps) => {
   const [layersConfiguration, { addLayer, updateLayer, removeLayer }] = useMapLayers();
 
   const defaultSelectedLayerId = useMemo(
@@ -235,6 +239,22 @@ const DatasetCard = ({ id, name, defaultLayerId, layers }: DatasetCardProps) =>
               </Link>
             </Button>
           )}
+          {!!metadata && (
+            <Dialog>
+              <DialogTrigger asChild>
+                <Button variant="ghost" size="icon-sm" className="group/info">
+                  <span className="sr-only">Information</span>
+                  <QuestionMarkIcon
+                    className="!size-4 transition-colors group-hover/info:text-casper-blue-300"
+                    aria-hidden
+                  />
+                </Button>
+              </DialogTrigger>
+              <DialogContent>
+                <DatasetMetadata name={name} metadata={metadata} />
+              </DialogContent>
+            </Dialog>
+          )}
           <Switch
             id={`dataset-${id}-toggle`}
             checked={isDatasetActive}
diff --git a/client/src/components/dataset-metadata/index.tsx b/client/src/components/dataset-metadata/index.tsx
new file mode 100644
index 0000000..cf386f4
--- /dev/null
+++ b/client/src/components/dataset-metadata/index.tsx
@@ -0,0 +1,93 @@
+import Link from "next/link";
+
+import Markdown from "@/components/markdown";
+import { DialogHeader, DialogTitle } from "@/components/ui/dialog";
+import { MetadataItemComponent } from "@/types/generated/strapi.schemas";
+
+interface DatasetMetadataProps {
+  name: string;
+  metadata: MetadataItemComponent;
+}
+
+const DatasetMetadata = ({ name, metadata }: DatasetMetadataProps) => {
+  return (
+    <>
+      <DialogHeader>
+        <DialogTitle>{name}</DialogTitle>
+      </DialogHeader>
+      <dl className="mt-8 flex flex-col gap-2 text-xs">
+        {!!metadata.full_name && (
+          <div>
+            <dt className="font-bold">Full name</dt>
+            <dd>{metadata.full_name}</dd>
+          </div>
+        )}
+        {!!metadata.source && (
+          <div>
+            <dt className="font-bold">Source</dt>
+            <dd>{metadata.source}</dd>
+          </div>
+        )}
+        {!!metadata.website && (
+          <div>
+            <dt className="font-bold">Website</dt>
+            <dd>
+              <Link
+                href={metadata.website}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="break-all underline"
+              >
+                {metadata.website}
+              </Link>
+            </dd>
+          </div>
+        )}
+        {!!metadata.description && (
+          <div>
+            <dt className="font-bold">Description</dt>
+            <dd>{metadata.description}</dd>
+          </div>
+        )}
+        {!!metadata.main_applications && (
+          <div>
+            <dt className="font-bold">Main applications</dt>
+            <dd>
+              <Markdown>{metadata.main_applications}</Markdown>
+            </dd>
+          </div>
+        )}
+        {!!metadata.temporal_resolution && (
+          <div>
+            <dt className="font-bold">Temporal resolution</dt>
+            <dd>
+              <Markdown>{metadata.temporal_resolution}</Markdown>
+            </dd>
+          </div>
+        )}
+        {!!metadata.temporal_coverage && (
+          <div>
+            <dt className="font-bold">Temporal coverage</dt>
+            <dd>
+              <Markdown>{metadata.temporal_coverage}</Markdown>
+            </dd>
+          </div>
+        )}
+        {!!metadata.spatial_resolution && (
+          <div>
+            <dt className="font-bold">Spatial resolution</dt>
+            <dd>{metadata.spatial_resolution}</dd>
+          </div>
+        )}
+        {!!metadata.units && (
+          <div>
+            <dt className="font-bold">Units</dt>
+            <dd>{metadata.units}</dd>
+          </div>
+        )}
+      </dl>
+    </>
+  );
+};
+
+export default DatasetMetadata;
diff --git a/client/src/components/markdown/index.tsx b/client/src/components/markdown/index.tsx
new file mode 100644
index 0000000..79f2e13
--- /dev/null
+++ b/client/src/components/markdown/index.tsx
@@ -0,0 +1,32 @@
+import Link from "next/link";
+import ReactMarkdown from "react-markdown";
+
+interface MarkdownProps {
+  children: string | null | undefined;
+}
+
+const Markdown = ({ children }: MarkdownProps) => {
+  return (
+    <ReactMarkdown
+      allowedElements={["ul", "ol", "li", "b", "strong", "em", "i", "a", "br", "p"]}
+      components={{
+        ul: ({ children }) => <ul className="list-inside list-disc">{children}</ul>,
+        ol: ({ children }) => <ol className="list-inside list-decimal">{children}</ol>,
+        a: ({ children, href }) => (
+          <Link
+            href={href!}
+            target={href?.startsWith("http") ? "_blank" : undefined}
+            rel={href?.startsWith("http") ? "noopener noreferrer" : undefined}
+            className="break-all underline"
+          >
+            {children}
+          </Link>
+        ),
+      }}
+    >
+      {children}
+    </ReactMarkdown>
+  );
+};
+
+export default Markdown;
diff --git a/client/src/components/navigation/navigation-desktop/index.tsx b/client/src/components/navigation/navigation-desktop/index.tsx
index 8c62e87..b8e8419 100644
--- a/client/src/components/navigation/navigation-desktop/index.tsx
+++ b/client/src/components/navigation/navigation-desktop/index.tsx
@@ -46,7 +46,7 @@ const NavigationDesktop = () => {
                   <MapPinIcon aria-hidden />
                 </Button>
               </DialogTrigger>
-              <DialogContent className="gap-0">
+              <DialogContent>
                 <LocationPanel onExit={onExitLocationDialog} />
               </DialogContent>
             </Dialog>
diff --git a/client/src/components/panels/contextual-layers/index.tsx b/client/src/components/panels/contextual-layers/index.tsx
index b7d9bc4..ee6965a 100644
--- a/client/src/components/panels/contextual-layers/index.tsx
+++ b/client/src/components/panels/contextual-layers/index.tsx
@@ -9,10 +9,12 @@ import XMarkIcon from "@/svgs/xmark.svg";
 import Item from "./item";
 
 const ContextualLayersPanel = () => {
-  const { data, isLoading } = useDatasetsBySubTopic("contextual", "sub_topic.name,name", [
-    "layer",
-    "download_link",
-  ]);
+  const { data, isLoading } = useDatasetsBySubTopic(
+    "contextual",
+    "sub_topic.name,name",
+    ["layer", "download_link"],
+    true,
+  );
 
   return (
     <>
@@ -75,6 +77,7 @@ const ContextualLayersPanel = () => {
                   id: dataset.layers[0].id!,
                   name: dataset.layers[0].attributes!.name!,
                   downloadLink: dataset.layers[0].attributes!.download_link,
+                  metadata: dataset.metadata,
                 }))}
             />
           ))}
diff --git a/client/src/components/panels/contextual-layers/item.tsx b/client/src/components/panels/contextual-layers/item.tsx
index f90cd25..9642f50 100644
--- a/client/src/components/panels/contextual-layers/item.tsx
+++ b/client/src/components/panels/contextual-layers/item.tsx
@@ -1,16 +1,25 @@
 import Link from "next/link";
+import * as React from "react";
 
+import DatasetMetadata from "@/components/dataset-metadata";
 import { Button } from "@/components/ui/button";
+import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog";
 import { Label } from "@/components/ui/label";
 import { Switch } from "@/components/ui/switch";
 import useMapLayers from "@/hooks/use-map-layers";
 import { cn } from "@/lib/utils";
 import DownloadIcon from "@/svgs/download.svg";
-import { Dataset, Layer } from "@/types/generated/strapi.schemas";
+import QuestionMarkIcon from "@/svgs/question-mark.svg";
+import { Dataset, Layer, MetadataItemComponent } from "@/types/generated/strapi.schemas";
 
 interface ItemProps {
   name: Dataset["name"];
-  layers: { id: number; name: Layer["name"]; downloadLink?: Layer["download_link"] }[];
+  layers: {
+    id: number;
+    name: Layer["name"];
+    downloadLink?: Layer["download_link"];
+    metadata?: MetadataItemComponent;
+  }[];
 }
 
 const Item = ({ name, layers }: ItemProps) => {
@@ -49,6 +58,22 @@ const Item = ({ name, layers }: ItemProps) => {
                   />
                 </Link>
               </Button>
+              {!!layer.metadata && (
+                <Dialog>
+                  <DialogTrigger asChild>
+                    <Button variant="ghost" size="icon-sm" className="group/info">
+                      <span className="sr-only">Information</span>
+                      <QuestionMarkIcon
+                        className="!size-4 transition-colors group-hover/info:text-casper-blue-300"
+                        aria-hidden
+                      />
+                    </Button>
+                  </DialogTrigger>
+                  <DialogContent>
+                    <DatasetMetadata name={name} metadata={layer.metadata} />
+                  </DialogContent>
+                </Dialog>
+              )}
               <Switch
                 id={`${layer.id}-toggle`}
                 checked={layersConfiguration.findIndex(({ id }) => id === layer.id) !== -1}
diff --git a/client/src/components/panels/drought/index.tsx b/client/src/components/panels/drought/index.tsx
index 478b586..2dc8c4b 100644
--- a/client/src/components/panels/drought/index.tsx
+++ b/client/src/components/panels/drought/index.tsx
@@ -6,11 +6,12 @@ import { Skeleton } from "@/components/ui/skeleton";
 import useDatasetsBySubTopic from "@/hooks/use-datasets-by-sub-topic";
 
 const DroughtPanel = () => {
-  const { data, isLoading } = useDatasetsBySubTopic("drought", "sub_topic.name:desc,name", [
-    "name",
-    "params_config",
-    "download_link",
-  ]);
+  const { data, isLoading } = useDatasetsBySubTopic(
+    "drought",
+    "sub_topic.name:desc,name",
+    ["name", "params_config", "download_link"],
+    true,
+  );
 
   return (
     <div className="min-h-screen px-5 py-5 lg:min-h-0 lg:px-10">
diff --git a/client/src/components/panels/flood/index.tsx b/client/src/components/panels/flood/index.tsx
index 2fc9d36..597564d 100644
--- a/client/src/components/panels/flood/index.tsx
+++ b/client/src/components/panels/flood/index.tsx
@@ -6,11 +6,12 @@ import { Skeleton } from "@/components/ui/skeleton";
 import useDatasetsBySubTopic from "@/hooks/use-datasets-by-sub-topic";
 
 const FloodPanel = () => {
-  const { data, isLoading } = useDatasetsBySubTopic("flood", "sub_topic.name:desc,name", [
-    "name",
-    "params_config",
-    "download_link",
-  ]);
+  const { data, isLoading } = useDatasetsBySubTopic(
+    "flood",
+    "sub_topic.name:desc,name",
+    ["name", "params_config", "download_link"],
+    true,
+  );
 
   return (
     <div className="min-h-screen px-5 py-5 lg:min-h-0 lg:px-10">
diff --git a/client/src/components/panels/hydrometeorological/index.tsx b/client/src/components/panels/hydrometeorological/index.tsx
index 163fd7a..b57d1c1 100644
--- a/client/src/components/panels/hydrometeorological/index.tsx
+++ b/client/src/components/panels/hydrometeorological/index.tsx
@@ -11,6 +11,7 @@ const HydrometeorologicalPanel = () => {
     "hydrometeorological",
     "sub_topic.name:desc,name",
     ["name", "params_config", "download_link"],
+    true,
   );
 
   return (
diff --git a/client/src/components/ui/dialog.tsx b/client/src/components/ui/dialog.tsx
index b12bdb8..753c255 100644
--- a/client/src/components/ui/dialog.tsx
+++ b/client/src/components/ui/dialog.tsx
@@ -39,12 +39,12 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        "fixed left-[50%] top-[50%] z-10 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 bg-rhino-blue-900 px-10 py-12 text-white duration-500 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]",
+        "fixed left-[50%] top-[50%] z-10 flex max-h-[calc(100vh_-_theme(spacing.10))] w-full max-w-lg translate-x-[-50%] translate-y-[-50%] flex-col gap-4 bg-rhino-blue-900 px-10 py-12 text-white duration-500 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]",
         className,
       )}
       {...props}
     >
-      {children}
+      <div className="overflow-y-auto">{children}</div>
       <DialogPrimitive.Close className="absolute right-0 top-5 translate-x-1/2" asChild>
         <Button type="button" variant="yellow" size="icon">
           <XMarkIcon aria-hidden className="!size-5 xl:!size-6" />
diff --git a/client/src/hooks/use-datasets-by-sub-topic.ts b/client/src/hooks/use-datasets-by-sub-topic.ts
index 8ed1601..281cf7a 100644
--- a/client/src/hooks/use-datasets-by-sub-topic.ts
+++ b/client/src/hooks/use-datasets-by-sub-topic.ts
@@ -1,5 +1,5 @@
 import { useGetDatasets } from "@/types/generated/dataset";
-import { DatasetLayersDataItem } from "@/types/generated/strapi.schemas";
+import { DatasetLayersDataItem, MetadataItemComponent } from "@/types/generated/strapi.schemas";
 
 type DatasetsBySubTopic = {
   subTopic: string;
@@ -8,6 +8,7 @@ type DatasetsBySubTopic = {
     name: string;
     defaultLayerId: number | undefined;
     layers: DatasetLayersDataItem[];
+    metadata?: MetadataItemComponent;
   }[];
 };
 
@@ -15,6 +16,7 @@ export default function useDatasetsBySubTopic(
   topicSlug: string,
   sort = "sub_topic.name,name",
   layersFields = ["name"],
+  includeMetadata = false,
 ) {
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
   // @ts-ignore-error
@@ -34,6 +36,7 @@ export default function useDatasetsBySubTopic(
           fields: layersFields,
           sort: "name",
         },
+        metadata: includeMetadata,
       },
       filters: {
         topic: {
@@ -62,6 +65,7 @@ export default function useDatasetsBySubTopic(
             const dataset = item.attributes!.name;
             const defaultLayerId = item.attributes!.default_layer!.data?.id;
             const layers = item.attributes!.layers!.data!;
+            const metadata = item.attributes!.metadata;
 
             if (currentSubTopic === null || currentSubTopic !== subTopic) {
               currentSubTopic = subTopic;
@@ -74,6 +78,7 @@ export default function useDatasetsBySubTopic(
               name: dataset,
               defaultLayerId,
               layers,
+              ...(includeMetadata ? { metadata: metadata ?? undefined } : {}),
             });
           }
 
diff --git a/client/src/svgs/question-mark.svg b/client/src/svgs/question-mark.svg
new file mode 100644
index 0000000..e9b10cd
--- /dev/null
+++ b/client/src/svgs/question-mark.svg
@@ -0,0 +1,6 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Icon">
+<path id="Icon (Stroke)" fill-rule="evenodd" clip-rule="evenodd"
+      d="M8 2.27273C4.83691 2.27273 2.27273 4.83691 2.27273 8C2.27273 11.1631 4.83691 13.7273 8 13.7273C11.1631 13.7273 13.7273 11.1631 13.7273 8C13.7273 4.83691 11.1631 2.27273 8 2.27273ZM1 8C1 4.13401 4.13401 1 8 1C11.866 1 15 4.13401 15 8C15 11.866 11.866 15 8 15C4.13401 15 1 11.866 1 8ZM8.00004 5.10101C6.94034 5.10101 6.1631 5.60946 5.90833 6.15007C5.75851 6.46799 5.37933 6.60426 5.06141 6.45443C4.74349 6.30461 4.60722 5.92543 4.75705 5.60751C5.2788 4.50037 6.59683 3.82828 8.00004 3.82828C8.90542 3.82828 9.74959 4.10272 10.3818 4.57684C11.0141 5.05112 11.4647 5.75489 11.4647 6.58586C11.4647 8.00167 10.2073 9.00043 8.82291 9.266C8.75752 9.27854 8.70313 9.31099 8.67027 9.34578C8.64031 9.37748 8.6364 9.40042 8.6364 9.41414C8.6364 9.7656 8.35149 10.0505 8.00004 10.0505C7.64858 10.0505 7.36367 9.7656 7.36367 9.41414C7.36367 8.6483 7.97448 8.13282 8.58313 8.01606C9.64266 7.81281 10.192 7.14906 10.192 6.58586C10.192 6.24531 10.0094 5.88848 9.61812 5.59503C9.22665 5.30142 8.65667 5.10101 8.00004 5.10101ZM7.36364 11.5354C7.36364 11.1839 7.64855 10.899 8 10.899H8.00707C8.35853 10.899 8.64344 11.1839 8.64344 11.5354C8.64344 11.8868 8.35853 12.1717 8.00707 12.1717H8C7.64855 12.1717 7.36364 11.8868 7.36364 11.5354Z" fill="currentColor"/>
+</g>
+</svg>
diff --git a/client/yarn.lock b/client/yarn.lock
index b57393d..4047941 100644
--- a/client/yarn.lock
+++ b/client/yarn.lock
@@ -4343,6 +4343,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/debug@npm:^4.0.0":
+  version: 4.1.12
+  resolution: "@types/debug@npm:4.1.12"
+  dependencies:
+    "@types/ms": "npm:*"
+  checksum: 10c0/5dcd465edbb5a7f226e9a5efd1f399c6172407ef5840686b73e3608ce135eeca54ae8037dcd9f16bdb2768ac74925b820a8b9ecc588a58ca09eca6acabe33e2f
+  languageName: node
+  linkType: hard
+
 "@types/es-aggregate-error@npm:^1.0.2":
   version: 1.0.6
   resolution: "@types/es-aggregate-error@npm:1.0.6"
@@ -4352,6 +4361,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/estree-jsx@npm:^1.0.0":
+  version: 1.0.5
+  resolution: "@types/estree-jsx@npm:1.0.5"
+  dependencies:
+    "@types/estree": "npm:*"
+  checksum: 10c0/07b354331516428b27a3ab99ee397547d47eb223c34053b48f84872fafb841770834b90cc1a0068398e7c7ccb15ec51ab00ec64b31dc5e3dbefd624638a35c6d
+  languageName: node
+  linkType: hard
+
+"@types/estree@npm:*, @types/estree@npm:^1.0.0":
+  version: 1.0.6
+  resolution: "@types/estree@npm:1.0.6"
+  checksum: 10c0/cdfd751f6f9065442cd40957c07fd80361c962869aa853c1c2fd03e101af8b9389d8ff4955a43a6fcfa223dd387a089937f95be0f3eec21ca527039fd2d9859a
+  languageName: node
+  linkType: hard
+
 "@types/geojson-vt@npm:^3.2.5":
   version: 3.2.5
   resolution: "@types/geojson-vt@npm:3.2.5"
@@ -4375,6 +4400,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/hast@npm:^3.0.0":
+  version: 3.0.4
+  resolution: "@types/hast@npm:3.0.4"
+  dependencies:
+    "@types/unist": "npm:*"
+  checksum: 10c0/3249781a511b38f1d330fd1e3344eed3c4e7ea8eff82e835d35da78e637480d36fad37a78be5a7aed8465d237ad0446abc1150859d0fde395354ea634decf9f7
+  languageName: node
+  linkType: hard
+
 "@types/json-schema@npm:^7.0.11, @types/json-schema@npm:^7.0.4, @types/json-schema@npm:^7.0.7":
   version: 7.0.15
   resolution: "@types/json-schema@npm:7.0.15"
@@ -4416,6 +4450,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/mdast@npm:^4.0.0":
+  version: 4.0.4
+  resolution: "@types/mdast@npm:4.0.4"
+  dependencies:
+    "@types/unist": "npm:*"
+  checksum: 10c0/84f403dbe582ee508fd9c7643ac781ad8597fcbfc9ccb8d4715a2c92e4545e5772cbd0dbdf18eda65789386d81b009967fdef01b24faf6640f817287f54d9c82
+  languageName: node
+  linkType: hard
+
+"@types/ms@npm:*":
+  version: 0.7.34
+  resolution: "@types/ms@npm:0.7.34"
+  checksum: 10c0/ac80bd90012116ceb2d188fde62d96830ca847823e8ca71255616bc73991aa7d9f057b8bfab79e8ee44ffefb031ddd1bcce63ea82f9e66f7c31ec02d2d823ccc
+  languageName: node
+  linkType: hard
+
 "@types/node@npm:*":
   version: 22.7.9
   resolution: "@types/node@npm:22.7.9"
@@ -4500,6 +4550,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/unist@npm:*, @types/unist@npm:^3.0.0":
+  version: 3.0.3
+  resolution: "@types/unist@npm:3.0.3"
+  checksum: 10c0/2b1e4adcab78388e088fcc3c0ae8700f76619dbcb4741d7d201f87e2cb346bfc29a89003cfea2d76c996e1061452e14fcd737e8b25aacf949c1f2d6b2bc3dd60
+  languageName: node
+  linkType: hard
+
+"@types/unist@npm:^2.0.0":
+  version: 2.0.11
+  resolution: "@types/unist@npm:2.0.11"
+  checksum: 10c0/24dcdf25a168f453bb70298145eb043cfdbb82472db0bc0b56d6d51cd2e484b9ed8271d4ac93000a80da568f2402e9339723db262d0869e2bf13bc58e081768d
+  languageName: node
+  linkType: hard
+
 "@types/urijs@npm:^1.19.19":
   version: 1.19.25
   resolution: "@types/urijs@npm:1.19.25"
@@ -4683,7 +4747,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@ungap/structured-clone@npm:^1.2.0":
+"@ungap/structured-clone@npm:^1.0.0, @ungap/structured-clone@npm:^1.2.0":
   version: 1.2.0
   resolution: "@ungap/structured-clone@npm:1.2.0"
   checksum: 10c0/8209c937cb39119f44eb63cf90c0b73e7c754209a6411c707be08e50e29ee81356dca1a848a405c8bdeebfe2f5e4f831ad310ae1689eeef65e7445c090c6657d
@@ -5158,6 +5222,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"bail@npm:^2.0.0":
+  version: 2.0.2
+  resolution: "bail@npm:2.0.2"
+  checksum: 10c0/25cbea309ef6a1f56214187004e8f34014eb015713ea01fa5b9b7e9e776ca88d0fdffd64143ac42dc91966c915a4b7b683411b56e14929fad16153fc026ffb8b
+  languageName: node
+  linkType: hard
+
 "balanced-match@npm:^1.0.0":
   version: 1.0.2
   resolution: "balanced-match@npm:1.0.2"
@@ -5391,6 +5462,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"ccount@npm:^2.0.0":
+  version: 2.0.1
+  resolution: "ccount@npm:2.0.1"
+  checksum: 10c0/3939b1664390174484322bc3f45b798462e6c07ee6384cb3d645e0aa2f318502d174845198c1561930e1d431087f74cf1fe291ae9a4722821a9f4ba67e574350
+  languageName: node
+  linkType: hard
+
 "chalk@npm:^2.4.2":
   version: 2.4.2
   resolution: "chalk@npm:2.4.2"
@@ -5412,6 +5490,34 @@ __metadata:
   languageName: node
   linkType: hard
 
+"character-entities-html4@npm:^2.0.0":
+  version: 2.1.0
+  resolution: "character-entities-html4@npm:2.1.0"
+  checksum: 10c0/fe61b553f083400c20c0b0fd65095df30a0b445d960f3bbf271536ae6c3ba676f39cb7af0b4bf2755812f08ab9b88f2feed68f9aebb73bb153f7a115fe5c6e40
+  languageName: node
+  linkType: hard
+
+"character-entities-legacy@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "character-entities-legacy@npm:3.0.0"
+  checksum: 10c0/ec4b430af873661aa754a896a2b55af089b4e938d3d010fad5219299a6b6d32ab175142699ee250640678cd64bdecd6db3c9af0b8759ab7b155d970d84c4c7d1
+  languageName: node
+  linkType: hard
+
+"character-entities@npm:^2.0.0":
+  version: 2.0.2
+  resolution: "character-entities@npm:2.0.2"
+  checksum: 10c0/b0c645a45bcc90ff24f0e0140f4875a8436b8ef13b6bcd31ec02cfb2ca502b680362aa95386f7815bdc04b6464d48cf191210b3840d7c04241a149ede591a308
+  languageName: node
+  linkType: hard
+
+"character-reference-invalid@npm:^2.0.0":
+  version: 2.0.1
+  resolution: "character-reference-invalid@npm:2.0.1"
+  checksum: 10c0/2ae0dec770cd8659d7e8b0ce24392d83b4c2f0eb4a3395c955dce5528edd4cc030a794cfa06600fcdd700b3f2de2f9b8e40e309c0011c4180e3be64a0b42e6a1
+  languageName: node
+  linkType: hard
+
 "charenc@npm:0.0.2":
   version: 0.0.2
   resolution: "charenc@npm:0.0.2"
@@ -5553,6 +5659,7 @@ __metadata:
     react: "npm:18.3.1"
     react-dom: "npm:18.3.1"
     react-map-gl: "npm:7.1.7"
+    react-markdown: "npm:9.0.1"
     tailwind-merge: "npm:2.5.4"
     tailwindcss: "npm:3.4.14"
     tailwindcss-animate: "npm:1.0.7"
@@ -5642,6 +5749,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"comma-separated-tokens@npm:^2.0.0":
+  version: 2.0.3
+  resolution: "comma-separated-tokens@npm:2.0.3"
+  checksum: 10c0/91f90f1aae320f1755d6957ef0b864fe4f54737f3313bd95e0802686ee2ca38bff1dd381964d00ae5db42912dd1f4ae5c2709644e82706ffc6f6842a813cdd67
+  languageName: node
+  linkType: hard
+
 "commander@npm:^4.0.0":
   version: 4.1.1
   resolution: "commander@npm:4.1.1"
@@ -5917,7 +6031,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"debug@npm:^4.1.0, debug@npm:^4.1.1, debug@npm:^4.3.5":
+"debug@npm:^4.0.0, debug@npm:^4.1.0, debug@npm:^4.1.1, debug@npm:^4.3.5":
   version: 4.3.7
   resolution: "debug@npm:4.3.7"
   dependencies:
@@ -5929,6 +6043,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"decode-named-character-reference@npm:^1.0.0":
+  version: 1.0.2
+  resolution: "decode-named-character-reference@npm:1.0.2"
+  dependencies:
+    character-entities: "npm:^2.0.0"
+  checksum: 10c0/66a9fc5d9b5385a2b3675c69ba0d8e893393d64057f7dbbb585265bb4fc05ec513d76943b8e5aac7d8016d20eea4499322cbf4cd6d54b466976b78f3a7587a4c
+  languageName: node
+  linkType: hard
+
 "deep-equal@npm:^2.0.5":
   version: 2.2.3
   resolution: "deep-equal@npm:2.2.3"
@@ -6021,6 +6144,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"dequal@npm:^2.0.0":
+  version: 2.0.3
+  resolution: "dequal@npm:2.0.3"
+  checksum: 10c0/f98860cdf58b64991ae10205137c0e97d384c3a4edc7f807603887b7c4b850af1224a33d88012009f150861cbee4fa2d322c4cc04b9313bee312e47f6ecaa888
+  languageName: node
+  linkType: hard
+
 "destroy@npm:1.2.0":
   version: 1.2.0
   resolution: "destroy@npm:1.2.0"
@@ -6035,6 +6165,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"devlop@npm:^1.0.0, devlop@npm:^1.1.0":
+  version: 1.1.0
+  resolution: "devlop@npm:1.1.0"
+  dependencies:
+    dequal: "npm:^2.0.0"
+  checksum: 10c0/e0928ab8f94c59417a2b8389c45c55ce0a02d9ac7fd74ef62d01ba48060129e1d594501b77de01f3eeafc7cb00773819b0df74d96251cf20b31c5b3071f45c0e
+  languageName: node
+  linkType: hard
+
 "didyoumean@npm:^1.2.2":
   version: 1.2.2
   resolution: "didyoumean@npm:1.2.2"
@@ -6899,6 +7038,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"estree-util-is-identifier-name@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "estree-util-is-identifier-name@npm:3.0.0"
+  checksum: 10c0/d1881c6ed14bd588ebd508fc90bf2a541811dbb9ca04dec2f39d27dcaa635f85b5ed9bbbe7fc6fb1ddfca68744a5f7c70456b4b7108b6c4c52780631cc787c5b
+  languageName: node
+  linkType: hard
+
 "esutils@npm:2.0.3, esutils@npm:^2.0.2":
   version: 2.0.3
   resolution: "esutils@npm:2.0.3"
@@ -7009,6 +7155,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"extend@npm:^3.0.0":
+  version: 3.0.2
+  resolution: "extend@npm:3.0.2"
+  checksum: 10c0/73bf6e27406e80aa3e85b0d1c4fd987261e628064e170ca781125c0b635a3dabad5e05adbf07595ea0cf1e6c5396cacb214af933da7cbaf24fe75ff14818e8f9
+  languageName: node
+  linkType: hard
+
 "fast-deep-equal@npm:^3.1.1, fast-deep-equal@npm:^3.1.3":
   version: 3.1.3
   resolution: "fast-deep-equal@npm:3.1.3"
@@ -7601,6 +7754,45 @@ __metadata:
   languageName: node
   linkType: hard
 
+"hast-util-to-jsx-runtime@npm:^2.0.0":
+  version: 2.3.2
+  resolution: "hast-util-to-jsx-runtime@npm:2.3.2"
+  dependencies:
+    "@types/estree": "npm:^1.0.0"
+    "@types/hast": "npm:^3.0.0"
+    "@types/unist": "npm:^3.0.0"
+    comma-separated-tokens: "npm:^2.0.0"
+    devlop: "npm:^1.0.0"
+    estree-util-is-identifier-name: "npm:^3.0.0"
+    hast-util-whitespace: "npm:^3.0.0"
+    mdast-util-mdx-expression: "npm:^2.0.0"
+    mdast-util-mdx-jsx: "npm:^3.0.0"
+    mdast-util-mdxjs-esm: "npm:^2.0.0"
+    property-information: "npm:^6.0.0"
+    space-separated-tokens: "npm:^2.0.0"
+    style-to-object: "npm:^1.0.0"
+    unist-util-position: "npm:^5.0.0"
+    vfile-message: "npm:^4.0.0"
+  checksum: 10c0/97761b2a48b8bc37da3d66cb4872312ae06c6e8f9be59e33b04b21fa5af371a39cb23b3ca165dd8e898ba1caf9b76399da35c957e68bad02a587a3a324216d56
+  languageName: node
+  linkType: hard
+
+"hast-util-whitespace@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "hast-util-whitespace@npm:3.0.0"
+  dependencies:
+    "@types/hast": "npm:^3.0.0"
+  checksum: 10c0/b898bc9fe27884b272580d15260b6bbdabe239973a147e97fa98c45fa0ffec967a481aaa42291ec34fb56530dc2d484d473d7e2bae79f39c83f3762307edfea8
+  languageName: node
+  linkType: hard
+
+"html-url-attributes@npm:^3.0.0":
+  version: 3.0.1
+  resolution: "html-url-attributes@npm:3.0.1"
+  checksum: 10c0/496e4908aa8b77665f348b4b03521901794f648b8ac34a581022cd6f2c97934d5c910cd91bc6593bbf2994687549037bc2520fcdc769b31484f29ffdd402acd0
+  languageName: node
+  linkType: hard
+
 "http-cache-semantics@npm:^4.1.1":
   version: 4.1.1
   resolution: "http-cache-semantics@npm:4.1.1"
@@ -7767,6 +7959,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"inline-style-parser@npm:0.2.4":
+  version: 0.2.4
+  resolution: "inline-style-parser@npm:0.2.4"
+  checksum: 10c0/ddc0b210eaa03e0f98d677b9836242c583c7c6051e84ce0e704ae4626e7871c5b78f8e30853480218b446355745775df318d4f82d33087ff7e393245efa9a881
+  languageName: node
+  linkType: hard
+
 "internal-slot@npm:^1.0.4, internal-slot@npm:^1.0.7":
   version: 1.0.7
   resolution: "internal-slot@npm:1.0.7"
@@ -7804,6 +8003,23 @@ __metadata:
   languageName: node
   linkType: hard
 
+"is-alphabetical@npm:^2.0.0":
+  version: 2.0.1
+  resolution: "is-alphabetical@npm:2.0.1"
+  checksum: 10c0/932367456f17237533fd1fc9fe179df77957271020b83ea31da50e5cc472d35ef6b5fb8147453274ffd251134472ce24eb6f8d8398d96dee98237cdb81a6c9a7
+  languageName: node
+  linkType: hard
+
+"is-alphanumerical@npm:^2.0.0":
+  version: 2.0.1
+  resolution: "is-alphanumerical@npm:2.0.1"
+  dependencies:
+    is-alphabetical: "npm:^2.0.0"
+    is-decimal: "npm:^2.0.0"
+  checksum: 10c0/4b35c42b18e40d41378293f82a3ecd9de77049b476f748db5697c297f686e1e05b072a6aaae2d16f54d2a57f85b00cbbe755c75f6d583d1c77d6657bd0feb5a2
+  languageName: node
+  linkType: hard
+
 "is-arguments@npm:^1.1.1":
   version: 1.1.1
   resolution: "is-arguments@npm:1.1.1"
@@ -7927,6 +8143,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"is-decimal@npm:^2.0.0":
+  version: 2.0.1
+  resolution: "is-decimal@npm:2.0.1"
+  checksum: 10c0/8085dd66f7d82f9de818fba48b9e9c0429cb4291824e6c5f2622e96b9680b54a07a624cfc663b24148b8e853c62a1c987cfe8b0b5a13f5156991afaf6736e334
+  languageName: node
+  linkType: hard
+
 "is-error@npm:^2.2.0":
   version: 2.2.2
   resolution: "is-error@npm:2.2.2"
@@ -7991,6 +8214,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"is-hexadecimal@npm:^2.0.0":
+  version: 2.0.1
+  resolution: "is-hexadecimal@npm:2.0.1"
+  checksum: 10c0/3eb60fe2f1e2bbc760b927dcad4d51eaa0c60138cf7fc671803f66353ad90c301605b502c7ea4c6bb0548e1c7e79dfd37b73b632652e3b76030bba603a7e9626
+  languageName: node
+  linkType: hard
+
 "is-lambda@npm:^1.0.1":
   version: 1.0.1
   resolution: "is-lambda@npm:1.0.1"
@@ -8035,6 +8265,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"is-plain-obj@npm:^4.0.0":
+  version: 4.1.0
+  resolution: "is-plain-obj@npm:4.1.0"
+  checksum: 10c0/32130d651d71d9564dc88ba7e6fda0e91a1010a3694648e9f4f47bb6080438140696d3e3e15c741411d712e47ac9edc1a8a9de1fe76f3487b0d90be06ac9975e
+  languageName: node
+  linkType: hard
+
 "is-plain-object@npm:^2.0.3, is-plain-object@npm:^2.0.4":
   version: 2.0.4
   resolution: "is-plain-object@npm:2.0.4"
@@ -8600,6 +8837,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"longest-streak@npm:^3.0.0":
+  version: 3.1.0
+  resolution: "longest-streak@npm:3.1.0"
+  checksum: 10c0/7c2f02d0454b52834d1bcedef79c557bd295ee71fdabb02d041ff3aa9da48a90b5df7c0409156dedbc4df9b65da18742652aaea4759d6ece01f08971af6a7eaa
+  languageName: node
+  linkType: hard
+
 "loose-envify@npm:^1.0.0, loose-envify@npm:^1.1.0, loose-envify@npm:^1.4.0":
   version: 1.4.0
   resolution: "loose-envify@npm:1.4.0"
@@ -8717,6 +8961,127 @@ __metadata:
   languageName: node
   linkType: hard
 
+"mdast-util-from-markdown@npm:^2.0.0":
+  version: 2.0.2
+  resolution: "mdast-util-from-markdown@npm:2.0.2"
+  dependencies:
+    "@types/mdast": "npm:^4.0.0"
+    "@types/unist": "npm:^3.0.0"
+    decode-named-character-reference: "npm:^1.0.0"
+    devlop: "npm:^1.0.0"
+    mdast-util-to-string: "npm:^4.0.0"
+    micromark: "npm:^4.0.0"
+    micromark-util-decode-numeric-character-reference: "npm:^2.0.0"
+    micromark-util-decode-string: "npm:^2.0.0"
+    micromark-util-normalize-identifier: "npm:^2.0.0"
+    micromark-util-symbol: "npm:^2.0.0"
+    micromark-util-types: "npm:^2.0.0"
+    unist-util-stringify-position: "npm:^4.0.0"
+  checksum: 10c0/76eb2bd2c6f7a0318087c73376b8af6d7561c1e16654e7667e640f391341096c56142618fd0ff62f6d39e5ab4895898b9789c84cd7cec2874359a437a0e1ff15
+  languageName: node
+  linkType: hard
+
+"mdast-util-mdx-expression@npm:^2.0.0":
+  version: 2.0.1
+  resolution: "mdast-util-mdx-expression@npm:2.0.1"
+  dependencies:
+    "@types/estree-jsx": "npm:^1.0.0"
+    "@types/hast": "npm:^3.0.0"
+    "@types/mdast": "npm:^4.0.0"
+    devlop: "npm:^1.0.0"
+    mdast-util-from-markdown: "npm:^2.0.0"
+    mdast-util-to-markdown: "npm:^2.0.0"
+  checksum: 10c0/9a1e57940f66431f10312fa239096efa7627f375e7933b5d3162c0b5c1712a72ac87447aff2b6838d2bbd5c1311b188718cc90b33b67dc67a88550e0a6ef6183
+  languageName: node
+  linkType: hard
+
+"mdast-util-mdx-jsx@npm:^3.0.0":
+  version: 3.1.3
+  resolution: "mdast-util-mdx-jsx@npm:3.1.3"
+  dependencies:
+    "@types/estree-jsx": "npm:^1.0.0"
+    "@types/hast": "npm:^3.0.0"
+    "@types/mdast": "npm:^4.0.0"
+    "@types/unist": "npm:^3.0.0"
+    ccount: "npm:^2.0.0"
+    devlop: "npm:^1.1.0"
+    mdast-util-from-markdown: "npm:^2.0.0"
+    mdast-util-to-markdown: "npm:^2.0.0"
+    parse-entities: "npm:^4.0.0"
+    stringify-entities: "npm:^4.0.0"
+    unist-util-stringify-position: "npm:^4.0.0"
+    vfile-message: "npm:^4.0.0"
+  checksum: 10c0/1b0b64215efbbbb1ee9ba2a2b3e5f11859dada7dff162949a0d503aefbd75c0308f17d404df126c54acea06d2224905915b2cac2e6c999514c919bd963b8de24
+  languageName: node
+  linkType: hard
+
+"mdast-util-mdxjs-esm@npm:^2.0.0":
+  version: 2.0.1
+  resolution: "mdast-util-mdxjs-esm@npm:2.0.1"
+  dependencies:
+    "@types/estree-jsx": "npm:^1.0.0"
+    "@types/hast": "npm:^3.0.0"
+    "@types/mdast": "npm:^4.0.0"
+    devlop: "npm:^1.0.0"
+    mdast-util-from-markdown: "npm:^2.0.0"
+    mdast-util-to-markdown: "npm:^2.0.0"
+  checksum: 10c0/5bda92fc154141705af2b804a534d891f28dac6273186edf1a4c5e3f045d5b01dbcac7400d27aaf91b7e76e8dce007c7b2fdf136c11ea78206ad00bdf9db46bc
+  languageName: node
+  linkType: hard
+
+"mdast-util-phrasing@npm:^4.0.0":
+  version: 4.1.0
+  resolution: "mdast-util-phrasing@npm:4.1.0"
+  dependencies:
+    "@types/mdast": "npm:^4.0.0"
+    unist-util-is: "npm:^6.0.0"
+  checksum: 10c0/bf6c31d51349aa3d74603d5e5a312f59f3f65662ed16c58017169a5fb0f84ca98578f626c5ee9e4aa3e0a81c996db8717096705521bddb4a0185f98c12c9b42f
+  languageName: node
+  linkType: hard
+
+"mdast-util-to-hast@npm:^13.0.0":
+  version: 13.2.0
+  resolution: "mdast-util-to-hast@npm:13.2.0"
+  dependencies:
+    "@types/hast": "npm:^3.0.0"
+    "@types/mdast": "npm:^4.0.0"
+    "@ungap/structured-clone": "npm:^1.0.0"
+    devlop: "npm:^1.0.0"
+    micromark-util-sanitize-uri: "npm:^2.0.0"
+    trim-lines: "npm:^3.0.0"
+    unist-util-position: "npm:^5.0.0"
+    unist-util-visit: "npm:^5.0.0"
+    vfile: "npm:^6.0.0"
+  checksum: 10c0/9ee58def9287df8350cbb6f83ced90f9c088d72d4153780ad37854f87144cadc6f27b20347073b285173b1649b0723ddf0b9c78158608a804dcacb6bda6e1816
+  languageName: node
+  linkType: hard
+
+"mdast-util-to-markdown@npm:^2.0.0":
+  version: 2.1.2
+  resolution: "mdast-util-to-markdown@npm:2.1.2"
+  dependencies:
+    "@types/mdast": "npm:^4.0.0"
+    "@types/unist": "npm:^3.0.0"
+    longest-streak: "npm:^3.0.0"
+    mdast-util-phrasing: "npm:^4.0.0"
+    mdast-util-to-string: "npm:^4.0.0"
+    micromark-util-classify-character: "npm:^2.0.0"
+    micromark-util-decode-string: "npm:^2.0.0"
+    unist-util-visit: "npm:^5.0.0"
+    zwitch: "npm:^2.0.0"
+  checksum: 10c0/4649722a6099f12e797bd8d6469b2b43b44e526b5182862d9c7766a3431caad2c0112929c538a972f214e63c015395e5d3f54bd81d9ac1b16e6d8baaf582f749
+  languageName: node
+  linkType: hard
+
+"mdast-util-to-string@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "mdast-util-to-string@npm:4.0.0"
+  dependencies:
+    "@types/mdast": "npm:^4.0.0"
+  checksum: 10c0/2d3c1af29bf3fe9c20f552ee9685af308002488f3b04b12fa66652c9718f66f41a32f8362aa2d770c3ff464c034860b41715902ada2306bb0a055146cef064d7
+  languageName: node
+  linkType: hard
+
 "mdn-data@npm:2.0.28":
   version: 2.0.28
   resolution: "mdn-data@npm:2.0.28"
@@ -8766,6 +9131,242 @@ __metadata:
   languageName: node
   linkType: hard
 
+"micromark-core-commonmark@npm:^2.0.0":
+  version: 2.0.2
+  resolution: "micromark-core-commonmark@npm:2.0.2"
+  dependencies:
+    decode-named-character-reference: "npm:^1.0.0"
+    devlop: "npm:^1.0.0"
+    micromark-factory-destination: "npm:^2.0.0"
+    micromark-factory-label: "npm:^2.0.0"
+    micromark-factory-space: "npm:^2.0.0"
+    micromark-factory-title: "npm:^2.0.0"
+    micromark-factory-whitespace: "npm:^2.0.0"
+    micromark-util-character: "npm:^2.0.0"
+    micromark-util-chunked: "npm:^2.0.0"
+    micromark-util-classify-character: "npm:^2.0.0"
+    micromark-util-html-tag-name: "npm:^2.0.0"
+    micromark-util-normalize-identifier: "npm:^2.0.0"
+    micromark-util-resolve-all: "npm:^2.0.0"
+    micromark-util-subtokenize: "npm:^2.0.0"
+    micromark-util-symbol: "npm:^2.0.0"
+    micromark-util-types: "npm:^2.0.0"
+  checksum: 10c0/87c7a75cd339189eb6f1d6323037f7d108d1331d953b84fe839b37fd385ee2292b27222327c1ceffda46ba5d5d4dee703482475e5ee8744be40c9e308d8acb77
+  languageName: node
+  linkType: hard
+
+"micromark-factory-destination@npm:^2.0.0":
+  version: 2.0.1
+  resolution: "micromark-factory-destination@npm:2.0.1"
+  dependencies:
+    micromark-util-character: "npm:^2.0.0"
+    micromark-util-symbol: "npm:^2.0.0"
+    micromark-util-types: "npm:^2.0.0"
+  checksum: 10c0/bbafcf869cee5bf511161354cb87d61c142592fbecea051000ff116068dc85216e6d48519d147890b9ea5d7e2864a6341c0c09d9948c203bff624a80a476023c
+  languageName: node
+  linkType: hard
+
+"micromark-factory-label@npm:^2.0.0":
+  version: 2.0.1
+  resolution: "micromark-factory-label@npm:2.0.1"
+  dependencies:
+    devlop: "npm:^1.0.0"
+    micromark-util-character: "npm:^2.0.0"
+    micromark-util-symbol: "npm:^2.0.0"
+    micromark-util-types: "npm:^2.0.0"
+  checksum: 10c0/0137716b4ecb428114165505e94a2f18855c8bbea21b07a8b5ce514b32a595ed789d2b967125718fc44c4197ceaa48f6609d58807a68e778138d2e6b91b824e8
+  languageName: node
+  linkType: hard
+
+"micromark-factory-space@npm:^2.0.0":
+  version: 2.0.1
+  resolution: "micromark-factory-space@npm:2.0.1"
+  dependencies:
+    micromark-util-character: "npm:^2.0.0"
+    micromark-util-types: "npm:^2.0.0"
+  checksum: 10c0/f9ed43f1c0652d8d898de0ac2be3f77f776fffe7dd96bdbba1e02d7ce33d3853c6ff5daa52568fc4fa32cdf3a62d86b85ead9b9189f7211e1d69ff2163c450fb
+  languageName: node
+  linkType: hard
+
+"micromark-factory-title@npm:^2.0.0":
+  version: 2.0.1
+  resolution: "micromark-factory-title@npm:2.0.1"
+  dependencies:
+    micromark-factory-space: "npm:^2.0.0"
+    micromark-util-character: "npm:^2.0.0"
+    micromark-util-symbol: "npm:^2.0.0"
+    micromark-util-types: "npm:^2.0.0"
+  checksum: 10c0/e72fad8d6e88823514916890099a5af20b6a9178ccf78e7e5e05f4de99bb8797acb756257d7a3a57a53854cb0086bf8aab15b1a9e9db8982500dd2c9ff5948b6
+  languageName: node
+  linkType: hard
+
+"micromark-factory-whitespace@npm:^2.0.0":
+  version: 2.0.1
+  resolution: "micromark-factory-whitespace@npm:2.0.1"
+  dependencies:
+    micromark-factory-space: "npm:^2.0.0"
+    micromark-util-character: "npm:^2.0.0"
+    micromark-util-symbol: "npm:^2.0.0"
+    micromark-util-types: "npm:^2.0.0"
+  checksum: 10c0/20a1ec58698f24b766510a309b23a10175034fcf1551eaa9da3adcbed3e00cd53d1ebe5f030cf873f76a1cec3c34eb8c50cc227be3344caa9ed25d56cf611224
+  languageName: node
+  linkType: hard
+
+"micromark-util-character@npm:^2.0.0":
+  version: 2.1.1
+  resolution: "micromark-util-character@npm:2.1.1"
+  dependencies:
+    micromark-util-symbol: "npm:^2.0.0"
+    micromark-util-types: "npm:^2.0.0"
+  checksum: 10c0/d3fe7a5e2c4060fc2a076f9ce699c82a2e87190a3946e1e5eea77f563869b504961f5668d9c9c014724db28ac32fa909070ea8b30c3a39bd0483cc6c04cc76a1
+  languageName: node
+  linkType: hard
+
+"micromark-util-chunked@npm:^2.0.0":
+  version: 2.0.1
+  resolution: "micromark-util-chunked@npm:2.0.1"
+  dependencies:
+    micromark-util-symbol: "npm:^2.0.0"
+  checksum: 10c0/b68c0c16fe8106949537bdcfe1be9cf36c0ccd3bc54c4007003cb0984c3750b6cdd0fd77d03f269a3382b85b0de58bde4f6eedbe7ecdf7244759112289b1ab56
+  languageName: node
+  linkType: hard
+
+"micromark-util-classify-character@npm:^2.0.0":
+  version: 2.0.1
+  resolution: "micromark-util-classify-character@npm:2.0.1"
+  dependencies:
+    micromark-util-character: "npm:^2.0.0"
+    micromark-util-symbol: "npm:^2.0.0"
+    micromark-util-types: "npm:^2.0.0"
+  checksum: 10c0/8a02e59304005c475c332f581697e92e8c585bcd45d5d225a66c1c1b14ab5a8062705188c2ccec33cc998d33502514121478b2091feddbc751887fc9c290ed08
+  languageName: node
+  linkType: hard
+
+"micromark-util-combine-extensions@npm:^2.0.0":
+  version: 2.0.1
+  resolution: "micromark-util-combine-extensions@npm:2.0.1"
+  dependencies:
+    micromark-util-chunked: "npm:^2.0.0"
+    micromark-util-types: "npm:^2.0.0"
+  checksum: 10c0/f15e282af24c8372cbb10b9b0b3e2c0aa681fea0ca323a44d6bc537dc1d9382c819c3689f14eaa000118f5a163245358ce6276b2cda9a84439cdb221f5d86ae7
+  languageName: node
+  linkType: hard
+
+"micromark-util-decode-numeric-character-reference@npm:^2.0.0":
+  version: 2.0.2
+  resolution: "micromark-util-decode-numeric-character-reference@npm:2.0.2"
+  dependencies:
+    micromark-util-symbol: "npm:^2.0.0"
+  checksum: 10c0/9c8a9f2c790e5593ffe513901c3a110e9ec8882a08f466da014112a25e5059b51551ca0aeb7ff494657d86eceb2f02ee556c6558b8d66aadc61eae4a240da0df
+  languageName: node
+  linkType: hard
+
+"micromark-util-decode-string@npm:^2.0.0":
+  version: 2.0.1
+  resolution: "micromark-util-decode-string@npm:2.0.1"
+  dependencies:
+    decode-named-character-reference: "npm:^1.0.0"
+    micromark-util-character: "npm:^2.0.0"
+    micromark-util-decode-numeric-character-reference: "npm:^2.0.0"
+    micromark-util-symbol: "npm:^2.0.0"
+  checksum: 10c0/f24d75b2e5310be6e7b6dee532e0d17d3bf46996841d6295f2a9c87a2046fff4ab603c52ab9d7a7a6430a8b787b1574ae895849c603d262d1b22eef71736b5cb
+  languageName: node
+  linkType: hard
+
+"micromark-util-encode@npm:^2.0.0":
+  version: 2.0.1
+  resolution: "micromark-util-encode@npm:2.0.1"
+  checksum: 10c0/b2b29f901093845da8a1bf997ea8b7f5e061ffdba85070dfe14b0197c48fda64ffcf82bfe53c90cf9dc185e69eef8c5d41cae3ba918b96bc279326921b59008a
+  languageName: node
+  linkType: hard
+
+"micromark-util-html-tag-name@npm:^2.0.0":
+  version: 2.0.1
+  resolution: "micromark-util-html-tag-name@npm:2.0.1"
+  checksum: 10c0/ae80444db786fde908e9295f19a27a4aa304171852c77414516418650097b8afb401961c9edb09d677b06e97e8370cfa65638dde8438ebd41d60c0a8678b85b9
+  languageName: node
+  linkType: hard
+
+"micromark-util-normalize-identifier@npm:^2.0.0":
+  version: 2.0.1
+  resolution: "micromark-util-normalize-identifier@npm:2.0.1"
+  dependencies:
+    micromark-util-symbol: "npm:^2.0.0"
+  checksum: 10c0/5299265fa360769fc499a89f40142f10a9d4a5c3dd8e6eac8a8ef3c2e4a6570e4c009cf75ea46dce5ee31c01f25587bde2f4a5cc0a935584ae86dd857f2babbd
+  languageName: node
+  linkType: hard
+
+"micromark-util-resolve-all@npm:^2.0.0":
+  version: 2.0.1
+  resolution: "micromark-util-resolve-all@npm:2.0.1"
+  dependencies:
+    micromark-util-types: "npm:^2.0.0"
+  checksum: 10c0/bb6ca28764696bb479dc44a2d5b5fe003e7177aeae1d6b0d43f24cc223bab90234092d9c3ce4a4d2b8df095ccfd820537b10eb96bb7044d635f385d65a4c984a
+  languageName: node
+  linkType: hard
+
+"micromark-util-sanitize-uri@npm:^2.0.0":
+  version: 2.0.1
+  resolution: "micromark-util-sanitize-uri@npm:2.0.1"
+  dependencies:
+    micromark-util-character: "npm:^2.0.0"
+    micromark-util-encode: "npm:^2.0.0"
+    micromark-util-symbol: "npm:^2.0.0"
+  checksum: 10c0/60e92166e1870fd4f1961468c2651013ff760617342918e0e0c3c4e872433aa2e60c1e5a672bfe5d89dc98f742d6b33897585cf86ae002cda23e905a3c02527c
+  languageName: node
+  linkType: hard
+
+"micromark-util-subtokenize@npm:^2.0.0":
+  version: 2.0.3
+  resolution: "micromark-util-subtokenize@npm:2.0.3"
+  dependencies:
+    devlop: "npm:^1.0.0"
+    micromark-util-chunked: "npm:^2.0.0"
+    micromark-util-symbol: "npm:^2.0.0"
+    micromark-util-types: "npm:^2.0.0"
+  checksum: 10c0/75501986ecb02a6f06c0f3e58b584ae3ff3553b520260e8ce27d2db8c79b8888861dd9d3b26e30f5c6084fddd90f96dc3ff551f02c2ac4d669ebe920e483b6d6
+  languageName: node
+  linkType: hard
+
+"micromark-util-symbol@npm:^2.0.0":
+  version: 2.0.1
+  resolution: "micromark-util-symbol@npm:2.0.1"
+  checksum: 10c0/f2d1b207771e573232436618e78c5e46cd4b5c560dd4a6d63863d58018abbf49cb96ec69f7007471e51434c60de3c9268ef2bf46852f26ff4aacd10f9da16fe9
+  languageName: node
+  linkType: hard
+
+"micromark-util-types@npm:^2.0.0":
+  version: 2.0.1
+  resolution: "micromark-util-types@npm:2.0.1"
+  checksum: 10c0/872ec9334bb42afcc91c5bed8b7ee03b75654b36c6f221ab4d2b1bb0299279f00db948bf38ec6bc1ec03d0cf7842c21ab805190bf676157ba587eb0386d38b71
+  languageName: node
+  linkType: hard
+
+"micromark@npm:^4.0.0":
+  version: 4.0.1
+  resolution: "micromark@npm:4.0.1"
+  dependencies:
+    "@types/debug": "npm:^4.0.0"
+    debug: "npm:^4.0.0"
+    decode-named-character-reference: "npm:^1.0.0"
+    devlop: "npm:^1.0.0"
+    micromark-core-commonmark: "npm:^2.0.0"
+    micromark-factory-space: "npm:^2.0.0"
+    micromark-util-character: "npm:^2.0.0"
+    micromark-util-chunked: "npm:^2.0.0"
+    micromark-util-combine-extensions: "npm:^2.0.0"
+    micromark-util-decode-numeric-character-reference: "npm:^2.0.0"
+    micromark-util-encode: "npm:^2.0.0"
+    micromark-util-normalize-identifier: "npm:^2.0.0"
+    micromark-util-resolve-all: "npm:^2.0.0"
+    micromark-util-sanitize-uri: "npm:^2.0.0"
+    micromark-util-subtokenize: "npm:^2.0.0"
+    micromark-util-symbol: "npm:^2.0.0"
+    micromark-util-types: "npm:^2.0.0"
+  checksum: 10c0/b5d950c84664ce209575e5a54946488f0a1e1240d080544e657b65074c9b08208a5315d9db066b93cbc199ec05f68552ba8b09fd5e716c726f4a4712275a7c5c
+  languageName: node
+  linkType: hard
+
 "micromatch@npm:^4.0.4, micromatch@npm:^4.0.5":
   version: 4.0.7
   resolution: "micromatch@npm:4.0.7"
@@ -9518,6 +10119,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"parse-entities@npm:^4.0.0":
+  version: 4.0.1
+  resolution: "parse-entities@npm:4.0.1"
+  dependencies:
+    "@types/unist": "npm:^2.0.0"
+    character-entities: "npm:^2.0.0"
+    character-entities-legacy: "npm:^3.0.0"
+    character-reference-invalid: "npm:^2.0.0"
+    decode-named-character-reference: "npm:^1.0.0"
+    is-alphanumerical: "npm:^2.0.0"
+    is-decimal: "npm:^2.0.0"
+    is-hexadecimal: "npm:^2.0.0"
+  checksum: 10c0/9dfa3b0dc43a913c2558c4bd625b1abcc2d6c6b38aa5724b141ed988471977248f7ad234eed57e1bc70b694dd15b0d710a04f66c2f7c096e35abd91962b7d926
+  languageName: node
+  linkType: hard
+
 "parse-json@npm:^5.2.0":
   version: 5.2.0
   resolution: "parse-json@npm:5.2.0"
@@ -9940,6 +10557,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"property-information@npm:^6.0.0":
+  version: 6.5.0
+  resolution: "property-information@npm:6.5.0"
+  checksum: 10c0/981e0f9cc2e5acdb414a6fd48a99dd0fd3a4079e7a91ab41cf97a8534cf43e0e0bc1ffada6602a1b3d047a33db8b5fc2ef46d863507eda712d5ceedac443f0ef
+  languageName: node
+  linkType: hard
+
 "protocol-buffers-schema@npm:^3.3.1":
   version: 3.6.0
   resolution: "protocol-buffers-schema@npm:3.6.0"
@@ -10059,6 +10683,27 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-markdown@npm:9.0.1":
+  version: 9.0.1
+  resolution: "react-markdown@npm:9.0.1"
+  dependencies:
+    "@types/hast": "npm:^3.0.0"
+    devlop: "npm:^1.0.0"
+    hast-util-to-jsx-runtime: "npm:^2.0.0"
+    html-url-attributes: "npm:^3.0.0"
+    mdast-util-to-hast: "npm:^13.0.0"
+    remark-parse: "npm:^11.0.0"
+    remark-rehype: "npm:^11.0.0"
+    unified: "npm:^11.0.0"
+    unist-util-visit: "npm:^5.0.0"
+    vfile: "npm:^6.0.0"
+  peerDependencies:
+    "@types/react": ">=18"
+    react: ">=18"
+  checksum: 10c0/3a3895dbd56647bc864b8da46dd575e71a9e609eb1e43fea8e8e6209d86e208eddd5b07bf8d7b5306a194b405440760a8d134aebd5a4ce5dc7dee4299e84db96
+  languageName: node
+  linkType: hard
+
 "react-remove-scroll-bar@npm:^2.3.3, react-remove-scroll-bar@npm:^2.3.6":
   version: 2.3.6
   resolution: "react-remove-scroll-bar@npm:2.3.6"
@@ -10297,6 +10942,31 @@ __metadata:
   languageName: node
   linkType: hard
 
+"remark-parse@npm:^11.0.0":
+  version: 11.0.0
+  resolution: "remark-parse@npm:11.0.0"
+  dependencies:
+    "@types/mdast": "npm:^4.0.0"
+    mdast-util-from-markdown: "npm:^2.0.0"
+    micromark-util-types: "npm:^2.0.0"
+    unified: "npm:^11.0.0"
+  checksum: 10c0/6eed15ddb8680eca93e04fcb2d1b8db65a743dcc0023f5007265dda558b09db595a087f622062ccad2630953cd5cddc1055ce491d25a81f3317c858348a8dd38
+  languageName: node
+  linkType: hard
+
+"remark-rehype@npm:^11.0.0":
+  version: 11.1.1
+  resolution: "remark-rehype@npm:11.1.1"
+  dependencies:
+    "@types/hast": "npm:^3.0.0"
+    "@types/mdast": "npm:^4.0.0"
+    mdast-util-to-hast: "npm:^13.0.0"
+    unified: "npm:^11.0.0"
+    vfile: "npm:^6.0.0"
+  checksum: 10c0/68f986e8ee758d415e93babda2a0d89477c15b7c200edc23b8b1d914dd6e963c5fc151a11cbbbcfa7dd237367ff3ef86e302be90f31f37a17b0748668bd8c65b
+  languageName: node
+  linkType: hard
+
 "require-directory@npm:^2.1.1":
   version: 2.1.1
   resolution: "require-directory@npm:2.1.1"
@@ -10814,6 +11484,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"space-separated-tokens@npm:^2.0.0":
+  version: 2.0.2
+  resolution: "space-separated-tokens@npm:2.0.2"
+  checksum: 10c0/6173e1d903dca41dcab6a2deed8b4caf61bd13b6d7af8374713500570aa929ff9414ae09a0519f4f8772df993300305a395d4871f35bc4ca72b6db57e1f30af8
+  languageName: node
+  linkType: hard
+
 "split-string@npm:^3.0.1":
   version: 3.1.0
   resolution: "split-string@npm:3.1.0"
@@ -10997,6 +11674,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"stringify-entities@npm:^4.0.0":
+  version: 4.0.4
+  resolution: "stringify-entities@npm:4.0.4"
+  dependencies:
+    character-entities-html4: "npm:^2.0.0"
+    character-entities-legacy: "npm:^3.0.0"
+  checksum: 10c0/537c7e656354192406bdd08157d759cd615724e9d0873602d2c9b2f6a5c0a8d0b1d73a0a08677848105c5eebac6db037b57c0b3a4ec86331117fa7319ed50448
+  languageName: node
+  linkType: hard
+
 "strip-ansi-cjs@npm:strip-ansi@^6.0.1, strip-ansi@npm:^6.0.0, strip-ansi@npm:^6.0.1":
   version: 6.0.1
   resolution: "strip-ansi@npm:6.0.1"
@@ -11043,6 +11730,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"style-to-object@npm:^1.0.0":
+  version: 1.0.8
+  resolution: "style-to-object@npm:1.0.8"
+  dependencies:
+    inline-style-parser: "npm:0.2.4"
+  checksum: 10c0/daa6646b1ff18258c0ca33ed281fbe73485c8391192db1b56ce89d40c93ea64507a41e8701d0dadfe771bc2f540c46c9b295135f71584c8e5cb23d6a19be9430
+  languageName: node
+  linkType: hard
+
 "styled-jsx@npm:5.1.1":
   version: 5.1.1
   resolution: "styled-jsx@npm:5.1.1"
@@ -11330,6 +12026,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"trim-lines@npm:^3.0.0":
+  version: 3.0.1
+  resolution: "trim-lines@npm:3.0.1"
+  checksum: 10c0/3a1611fa9e52aa56a94c69951a9ea15b8aaad760eaa26c56a65330dc8adf99cb282fc07cc9d94968b7d4d88003beba220a7278bbe2063328eb23fb56f9509e94
+  languageName: node
+  linkType: hard
+
+"trough@npm:^2.0.0":
+  version: 2.2.0
+  resolution: "trough@npm:2.2.0"
+  checksum: 10c0/58b671fc970e7867a48514168894396dd94e6d9d6456aca427cc299c004fe67f35ed7172a36449086b2edde10e78a71a284ec0076809add6834fb8f857ccb9b0
+  languageName: node
+  linkType: hard
+
 "ts-api-utils@npm:^1.3.0":
   version: 1.3.0
   resolution: "ts-api-utils@npm:1.3.0"
@@ -11571,6 +12281,21 @@ __metadata:
   languageName: node
   linkType: hard
 
+"unified@npm:^11.0.0":
+  version: 11.0.5
+  resolution: "unified@npm:11.0.5"
+  dependencies:
+    "@types/unist": "npm:^3.0.0"
+    bail: "npm:^2.0.0"
+    devlop: "npm:^1.0.0"
+    extend: "npm:^3.0.0"
+    is-plain-obj: "npm:^4.0.0"
+    trough: "npm:^2.0.0"
+    vfile: "npm:^6.0.0"
+  checksum: 10c0/53c8e685f56d11d9d458a43e0e74328a4d6386af51c8ac37a3dcabec74ce5026da21250590d4aff6733ccd7dc203116aae2b0769abc18cdf9639a54ae528dfc9
+  languageName: node
+  linkType: hard
+
 "union-value@npm:^1.0.1":
   version: 1.0.1
   resolution: "union-value@npm:1.0.1"
@@ -11601,6 +12326,54 @@ __metadata:
   languageName: node
   linkType: hard
 
+"unist-util-is@npm:^6.0.0":
+  version: 6.0.0
+  resolution: "unist-util-is@npm:6.0.0"
+  dependencies:
+    "@types/unist": "npm:^3.0.0"
+  checksum: 10c0/9419352181eaa1da35eca9490634a6df70d2217815bb5938a04af3a662c12c5607a2f1014197ec9c426fbef18834f6371bfdb6f033040fa8aa3e965300d70e7e
+  languageName: node
+  linkType: hard
+
+"unist-util-position@npm:^5.0.0":
+  version: 5.0.0
+  resolution: "unist-util-position@npm:5.0.0"
+  dependencies:
+    "@types/unist": "npm:^3.0.0"
+  checksum: 10c0/dde3b31e314c98f12b4dc6402f9722b2bf35e96a4f2d463233dd90d7cde2d4928074a7a11eff0a5eb1f4e200f27fc1557e0a64a7e8e4da6558542f251b1b7400
+  languageName: node
+  linkType: hard
+
+"unist-util-stringify-position@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "unist-util-stringify-position@npm:4.0.0"
+  dependencies:
+    "@types/unist": "npm:^3.0.0"
+  checksum: 10c0/dfe1dbe79ba31f589108cb35e523f14029b6675d741a79dea7e5f3d098785045d556d5650ec6a8338af11e9e78d2a30df12b1ee86529cded1098da3f17ee999e
+  languageName: node
+  linkType: hard
+
+"unist-util-visit-parents@npm:^6.0.0":
+  version: 6.0.1
+  resolution: "unist-util-visit-parents@npm:6.0.1"
+  dependencies:
+    "@types/unist": "npm:^3.0.0"
+    unist-util-is: "npm:^6.0.0"
+  checksum: 10c0/51b1a5b0aa23c97d3e03e7288f0cdf136974df2217d0999d3de573c05001ef04cccd246f51d2ebdfb9e8b0ed2704451ad90ba85ae3f3177cf9772cef67f56206
+  languageName: node
+  linkType: hard
+
+"unist-util-visit@npm:^5.0.0":
+  version: 5.0.0
+  resolution: "unist-util-visit@npm:5.0.0"
+  dependencies:
+    "@types/unist": "npm:^3.0.0"
+    unist-util-is: "npm:^6.0.0"
+    unist-util-visit-parents: "npm:^6.0.0"
+  checksum: 10c0/51434a1d80252c1540cce6271a90fd1a106dbe624997c09ed8879279667fb0b2d3a685e02e92bf66598dcbe6cdffa7a5f5fb363af8fdf90dda6c855449ae39a5
+  languageName: node
+  linkType: hard
+
 "universalify@npm:^2.0.0":
   version: 2.0.1
   resolution: "universalify@npm:2.0.1"
@@ -11711,6 +12484,26 @@ __metadata:
   languageName: node
   linkType: hard
 
+"vfile-message@npm:^4.0.0":
+  version: 4.0.2
+  resolution: "vfile-message@npm:4.0.2"
+  dependencies:
+    "@types/unist": "npm:^3.0.0"
+    unist-util-stringify-position: "npm:^4.0.0"
+  checksum: 10c0/07671d239a075f888b78f318bc1d54de02799db4e9dce322474e67c35d75ac4a5ac0aaf37b18801d91c9f8152974ea39678aa72d7198758b07f3ba04fb7d7514
+  languageName: node
+  linkType: hard
+
+"vfile@npm:^6.0.0":
+  version: 6.0.3
+  resolution: "vfile@npm:6.0.3"
+  dependencies:
+    "@types/unist": "npm:^3.0.0"
+    vfile-message: "npm:^4.0.0"
+  checksum: 10c0/e5d9eb4810623f23758cfc2205323e33552fb5972e5c2e6587babe08fe4d24859866277404fb9e2a20afb71013860d96ec806cb257536ae463c87d70022ab9ef
+  languageName: node
+  linkType: hard
+
 "vt-pbf@npm:^3.1.3":
   version: 3.1.3
   resolution: "vt-pbf@npm:3.1.3"
@@ -11950,3 +12743,10 @@ __metadata:
   checksum: 10c0/8b7e6d9ce86f00fc4ea16c949aab5538505a1f3f1a9c7c095b2a7308b4ed894deec7bdb2c614e1486a337abdce09a6e56282dc0e39fe9f880953b094f8c7810b
   languageName: node
   linkType: hard
+
+"zwitch@npm:^2.0.0":
+  version: 2.0.4
+  resolution: "zwitch@npm:2.0.4"
+  checksum: 10c0/3c7830cdd3378667e058ffdb4cf2bb78ac5711214e2725900873accb23f3dfe5f9e7e5a06dcdc5f29605da976fc45c26d9a13ca334d6eea2245a15e77b8fc06e
+  languageName: node
+  linkType: hard

From 37975465c4428dec25ae66c2400f4535f85490ca Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cl=C3=A9ment=20Prod=27homme?= <contact@clementprodhomme.fr>
Date: Wed, 20 Nov 2024 14:42:33 +0100
Subject: [PATCH 2/3] feat(client): Add tooltip to the dataset buttons

---
 client/package.json                           |  2 +-
 client/src/components/dataset-card/index.tsx  | 59 +++++++++------
 .../panels/contextual-layers/item.tsx         | 72 ++++++++++---------
 client/src/components/ui/tooltip.tsx          | 30 ++++++++
 client/yarn.lock                              | 10 +--
 5 files changed, 112 insertions(+), 61 deletions(-)
 create mode 100644 client/src/components/ui/tooltip.tsx

diff --git a/client/package.json b/client/package.json
index da63d2d..f94aba9 100644
--- a/client/package.json
+++ b/client/package.json
@@ -36,7 +36,7 @@
     "@radix-ui/react-slot": "1.1.0",
     "@radix-ui/react-switch": "1.1.1",
     "@radix-ui/react-tabs": "1.1.1",
-    "@radix-ui/react-tooltip": "1.1.3",
+    "@radix-ui/react-tooltip": "1.1.4",
     "@t3-oss/env-nextjs": "0.11.1",
     "@tanstack/react-query": "5.59.16",
     "@turf/bbox": "7.1.0",
diff --git a/client/src/components/dataset-card/index.tsx b/client/src/components/dataset-card/index.tsx
index cedca6d..88fcd91 100644
--- a/client/src/components/dataset-card/index.tsx
+++ b/client/src/components/dataset-card/index.tsx
@@ -20,6 +20,7 @@ import {
   SelectValue,
 } from "@/components/ui/select";
 import { Switch } from "@/components/ui/switch";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
 import useMapLayers from "@/hooks/use-map-layers";
 import { cn } from "@/lib/utils";
 import CalendarDaysIcon from "@/svgs/calendar-days.svg";
@@ -225,31 +226,45 @@ const DatasetCard = ({ id, name, defaultLayerId, layers, metadata }: DatasetCard
         </Label>
         <div className="flex items-center gap-0.5 pt-1">
           {!!selectedLayer?.attributes!.download_link && (
-            <Button variant="ghost" size="icon-sm" className="group/download" asChild>
-              <Link
-                href={selectedLayer?.attributes!.download_link ?? ""}
-                rel="noopener noreferrer"
-                download={selectedLayer?.attributes!.name}
-              >
-                <span className="sr-only">Download</span>
-                <DownloadIcon
-                  className="!size-4 transition-colors group-hover/download:text-casper-blue-300"
-                  aria-hidden
-                />
-              </Link>
-            </Button>
+            <TooltipProvider>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button variant="ghost" size="icon-sm" className="group/download" asChild>
+                    <Link
+                      href={selectedLayer?.attributes!.download_link ?? ""}
+                      rel="noopener noreferrer"
+                      download={selectedLayer?.attributes!.name}
+                    >
+                      <span className="sr-only">Download</span>
+                      <DownloadIcon
+                        className="!size-4 transition-colors group-hover/download:text-casper-blue-300"
+                        aria-hidden
+                      />
+                    </Link>
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent>Download dataset</TooltipContent>
+              </Tooltip>
+            </TooltipProvider>
           )}
           {!!metadata && (
             <Dialog>
-              <DialogTrigger asChild>
-                <Button variant="ghost" size="icon-sm" className="group/info">
-                  <span className="sr-only">Information</span>
-                  <QuestionMarkIcon
-                    className="!size-4 transition-colors group-hover/info:text-casper-blue-300"
-                    aria-hidden
-                  />
-                </Button>
-              </DialogTrigger>
+              <TooltipProvider>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <DialogTrigger asChild>
+                      <Button variant="ghost" size="icon-sm" className="group/info">
+                        <span className="sr-only">Information</span>
+                        <QuestionMarkIcon
+                          className="!size-4 transition-colors group-hover/info:text-casper-blue-300"
+                          aria-hidden
+                        />
+                      </Button>
+                    </DialogTrigger>
+                  </TooltipTrigger>
+                  <TooltipContent>More info</TooltipContent>
+                </Tooltip>
+              </TooltipProvider>
               <DialogContent>
                 <DatasetMetadata name={name} metadata={metadata} />
               </DialogContent>
diff --git a/client/src/components/panels/contextual-layers/item.tsx b/client/src/components/panels/contextual-layers/item.tsx
index 9642f50..53b4fc3 100644
--- a/client/src/components/panels/contextual-layers/item.tsx
+++ b/client/src/components/panels/contextual-layers/item.tsx
@@ -6,8 +6,8 @@ import { Button } from "@/components/ui/button";
 import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog";
 import { Label } from "@/components/ui/label";
 import { Switch } from "@/components/ui/switch";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
 import useMapLayers from "@/hooks/use-map-layers";
-import { cn } from "@/lib/utils";
 import DownloadIcon from "@/svgs/download.svg";
 import QuestionMarkIcon from "@/svgs/question-mark.svg";
 import { Dataset, Layer, MetadataItemComponent } from "@/types/generated/strapi.schemas";
@@ -35,40 +35,46 @@ const Item = ({ name, layers }: ItemProps) => {
               {layer.name}
             </Label>
             <div className="flex items-center gap-0.5 pt-1">
-              <Button
-                variant="ghost"
-                size="icon-sm"
-                className={cn({
-                  "group/download": true,
-                  "pointer-events-none opacity-20": !layer.downloadLink,
-                })}
-                aria-disabled={!layer.downloadLink}
-                tabIndex={!layer.downloadLink ? -1 : undefined}
-                asChild
-              >
-                <Link
-                  href={layer.downloadLink ?? ""}
-                  rel="noopener noreferrer"
-                  download={layer.name}
-                >
-                  <span className="sr-only">Download</span>
-                  <DownloadIcon
-                    className="!size-4 transition-colors group-hover/download:text-casper-blue-300"
-                    aria-hidden
-                  />
-                </Link>
-              </Button>
+              {!!layer.downloadLink && (
+                <TooltipProvider>
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <Button variant="ghost" size="icon-sm" className="group/download" asChild>
+                        <Link
+                          href={layer.downloadLink ?? ""}
+                          rel="noopener noreferrer"
+                          download={layer.name}
+                        >
+                          <span className="sr-only">Download</span>
+                          <DownloadIcon
+                            className="!size-4 transition-colors group-hover/download:text-casper-blue-300"
+                            aria-hidden
+                          />
+                        </Link>
+                      </Button>
+                    </TooltipTrigger>
+                    <TooltipContent>Download dataset</TooltipContent>
+                  </Tooltip>
+                </TooltipProvider>
+              )}
               {!!layer.metadata && (
                 <Dialog>
-                  <DialogTrigger asChild>
-                    <Button variant="ghost" size="icon-sm" className="group/info">
-                      <span className="sr-only">Information</span>
-                      <QuestionMarkIcon
-                        className="!size-4 transition-colors group-hover/info:text-casper-blue-300"
-                        aria-hidden
-                      />
-                    </Button>
-                  </DialogTrigger>
+                  <TooltipProvider>
+                    <Tooltip>
+                      <TooltipTrigger asChild>
+                        <DialogTrigger asChild>
+                          <Button variant="ghost" size="icon-sm" className="group/info">
+                            <span className="sr-only">Information</span>
+                            <QuestionMarkIcon
+                              className="!size-4 transition-colors group-hover/info:text-casper-blue-300"
+                              aria-hidden
+                            />
+                          </Button>
+                        </DialogTrigger>
+                      </TooltipTrigger>
+                      <TooltipContent>More info</TooltipContent>
+                    </Tooltip>
+                  </TooltipProvider>
                   <DialogContent>
                     <DatasetMetadata name={name} metadata={layer.metadata} />
                   </DialogContent>
diff --git a/client/src/components/ui/tooltip.tsx b/client/src/components/ui/tooltip.tsx
new file mode 100644
index 0000000..08ff54b
--- /dev/null
+++ b/client/src/components/ui/tooltip.tsx
@@ -0,0 +1,30 @@
+"use client";
+
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const TooltipProvider = TooltipPrimitive.Provider;
+
+const Tooltip = TooltipPrimitive.Root;
+
+const TooltipTrigger = TooltipPrimitive.Trigger;
+
+const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <TooltipPrimitive.Content
+    ref={ref}
+    sideOffset={sideOffset}
+    className={cn(
+      "z-50 overflow-hidden bg-rhino-blue-950 px-2 py-0.5 text-xs text-white animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className,
+    )}
+    {...props}
+  />
+));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
diff --git a/client/yarn.lock b/client/yarn.lock
index 4047941..8af6b56 100644
--- a/client/yarn.lock
+++ b/client/yarn.lock
@@ -3520,9 +3520,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@radix-ui/react-tooltip@npm:1.1.3":
-  version: 1.1.3
-  resolution: "@radix-ui/react-tooltip@npm:1.1.3"
+"@radix-ui/react-tooltip@npm:1.1.4":
+  version: 1.1.4
+  resolution: "@radix-ui/react-tooltip@npm:1.1.4"
   dependencies:
     "@radix-ui/primitive": "npm:1.1.0"
     "@radix-ui/react-compose-refs": "npm:1.1.0"
@@ -3546,7 +3546,7 @@ __metadata:
       optional: true
     "@types/react-dom":
       optional: true
-  checksum: 10c0/388f2b74277dc8ac39ef6218e61f5cbebdc9ff5d03a8759bbd9d234561f43fab2771c4537c2e0faaaa19976d5b4cf7eb08112a493dc119e8abc45cbe7a416c97
+  checksum: 10c0/721cfb0bf34e74af5a58d89a73e087522517b9502fb7ae9d1dc99137d4952f2bfd1696001e17aa83dfb533c39b4333030149562ebfe62d31238a1a2995bc6bd6
   languageName: node
   linkType: hard
 
@@ -5618,7 +5618,7 @@ __metadata:
     "@radix-ui/react-slot": "npm:1.1.0"
     "@radix-ui/react-switch": "npm:1.1.1"
     "@radix-ui/react-tabs": "npm:1.1.1"
-    "@radix-ui/react-tooltip": "npm:1.1.3"
+    "@radix-ui/react-tooltip": "npm:1.1.4"
     "@svgr/webpack": "npm:8.1.0"
     "@t3-oss/env-nextjs": "npm:0.11.1"
     "@tanstack/eslint-plugin-query": "npm:5.59.7"

From c94dc0b62e2658f5ef56e25ff867d6fe4f20753c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cl=C3=A9ment=20Prod=27homme?= <contact@clementprodhomme.fr>
Date: Wed, 20 Nov 2024 14:49:43 +0100
Subject: [PATCH 3/3] refactor(client): Separate dataset toggle from other
 icons

---
 client/src/components/dataset-card/index.tsx            | 5 ++++-
 client/src/components/panels/contextual-layers/item.tsx | 5 ++++-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/client/src/components/dataset-card/index.tsx b/client/src/components/dataset-card/index.tsx
index 88fcd91..f811411 100644
--- a/client/src/components/dataset-card/index.tsx
+++ b/client/src/components/dataset-card/index.tsx
@@ -224,7 +224,7 @@ const DatasetCard = ({ id, name, defaultLayerId, layers, metadata }: DatasetCard
         <Label htmlFor={`dataset-${id}-toggle`} className="text-[20px]">
           {name}
         </Label>
-        <div className="flex items-center gap-0.5 pt-1">
+        <div className="flex items-center gap-1 pt-1.5">
           {!!selectedLayer?.attributes!.download_link && (
             <TooltipProvider>
               <Tooltip>
@@ -270,6 +270,9 @@ const DatasetCard = ({ id, name, defaultLayerId, layers, metadata }: DatasetCard
               </DialogContent>
             </Dialog>
           )}
+          {(!!selectedLayer?.attributes!.download_link || !!metadata) && (
+            <div className="mx-0.5 h-5 w-px bg-casper-blue-400" />
+          )}
           <Switch
             id={`dataset-${id}-toggle`}
             checked={isDatasetActive}
diff --git a/client/src/components/panels/contextual-layers/item.tsx b/client/src/components/panels/contextual-layers/item.tsx
index 53b4fc3..d7ed59c 100644
--- a/client/src/components/panels/contextual-layers/item.tsx
+++ b/client/src/components/panels/contextual-layers/item.tsx
@@ -34,7 +34,7 @@ const Item = ({ name, layers }: ItemProps) => {
             <Label htmlFor={`${layer.id}-toggle`} className="text-xl">
               {layer.name}
             </Label>
-            <div className="flex items-center gap-0.5 pt-1">
+            <div className="flex items-center gap-1 pt-1.5">
               {!!layer.downloadLink && (
                 <TooltipProvider>
                   <Tooltip>
@@ -80,6 +80,9 @@ const Item = ({ name, layers }: ItemProps) => {
                   </DialogContent>
                 </Dialog>
               )}
+              {(!!layer.downloadLink || !!layer.metadata) && (
+                <div className="mx-0.5 h-5 w-px bg-casper-blue-400" />
+              )}
               <Switch
                 id={`${layer.id}-toggle`}
                 checked={layersConfiguration.findIndex(({ id }) => id === layer.id) !== -1}