[gephi-lite] Adds doc for map background layer

Author: jacomyal

packages/gephi-lite/src/components/GraphAppearance/background/MapBackgroundLayerForm.tsx

@@ -1,6 +1,6 @@
 import { MapBackgroundLayer } from "@gephi/gephi-lite-sdk";
 import { FC } from "react";
-import { useTranslation } from "react-i18next";
+import { Trans, useTranslation } from "react-i18next";
 
 import { useAppearance, useAppearanceActions } from "../../../core/context/dataContexts";
 import { useModal } from "../../../core/modals";
@@ -29,6 +29,21 @@ export const MapBackgroundLayerForm: FC = () => {
       <h3>{t("appearance.background.map.title")}</h3>
 
       <div className="panel-block">
+        <p className="form-text small text-muted">
+          <Trans
+            i18nKey={"appearance.background.map.maplibre.style_description"}
+            components={{
+              maplibreLink: <a href="https://maplibre.org/" target="_blank" rel="noreferrer" />,
+              maplibreStyleLink: (
+                <a href="https://maplibre.org/maplibre-style-spec/" target="_blank" rel="noreferrer" />
+              ),
+              gephiLiteDocLink: (
+                <a href="https://docs.gephi.org/lite/user-manual/map" target="_blank" rel="noreferrer" />
+              ),
+            }}
+          />
+        </p>
+
         <label className="form-label">{t("appearance.background.map.maplibre.style")}</label>
         <div className="d-flex align-items-center gl-gap-2">
           <span className="flex-grow-1 text-ellipsis">

packages/gephi-lite/src/locales/dev.json

@@ -1,5 +1,22 @@
 {
   "appearance": {
+    "background": {
+      "layer_mode": "Background layer",
+      "none": "None",
+      "map": {
+        "label": "Map",
+        "title": "Map background",
+        "maplibre": {
+          "custom_style": "Custom style",
+          "edit_style": "Edit map style",
+          "reset_style": "Reset to default style",
+          "style": "Map style",
+          "style_description": "The map is rendered using <maplibreLink>MapLibre</maplibreLink>. The style of the map follows the <maplibreStyleLink>MapLibre Style Spec</maplibreStyleLink>. There is also a <gephiLiteDocLink>dedicated page</gephiLiteDocLink> in the Gephi Lite documentation.",
+          "style_default": "Default",
+          "style_editor_title": "Edit map style"
+        }
+      }
+    },
     "color": {
       "color_all_items": "Color for all {{items}}",
       "default_value": "Color for {{items}} with no valid value",

packages/gephi-lite/src/locales/en.json

@@ -6,15 +6,14 @@
       "map": {
         "label": "Map",
         "title": "Map background",
-        "engine": "Engine:",
         "maplibre": {
-          "name": "MapLibre",
-          "style": "Map style:",
-          "style_default": "Default style",
+          "custom_style": "Custom style",
           "edit_style": "Edit map style",
-          "reset_style": "Reset to default",
-          "style_editor_title": "Map Style Editor",
-          "custom_style": "Custom style"
+          "reset_style": "Reset to default style",
+          "style": "Map style",
+          "style_description": "The map is rendered using <maplibreLink>MapLibre</maplibreLink>. The style of the map follows the <maplibreStyleLink>MapLibre Style Spec</maplibreStyleLink>. There is also a <gephiLiteDocLink>dedicated page</gephiLiteDocLink> in the Gephi Lite documentation.",
+          "style_default": "Default",
+          "style_editor_title": "Edit map style"
         }
       }
     },