[gephi-lite] Moves geo projections logic

Details:
- Moves geo projection logic from the visual getters to the layout
- Removes MapCoordinateMapping type and all coordinateMapping plumbing
- Generalizes smoothClamp/smoothClampInverse with explicit margin parameter
- Replaces MercatorCoordinate.fromLngLat with linear mapping + smoothClamp(y, 180, 90)
- Adds various projections from d3-geo (new dependency)
- Disables "Apply with map" button when projection is not Web Mercator

Author: jacomyal

package-lock.json

@@ -49,6 +49,7 @@
     "byte-size": "^9.0.1",
     "chroma-js": "^3.1.2",
     "classnames": "^2.5.1",
+    "d3-geo": "^3.1.1",
     "color": "^4.2.3",
     "copy-to-clipboard": "^3.3.3",
     "file-saver": "^2.0.5",
@@ -106,6 +107,7 @@
     "@types/byte-size": "^8.1.2",
     "@types/chroma-js": "^3.1.0",
     "@types/color": "^4.2.0",
+    "@types/d3-geo": "^3.1.0",
     "@types/file-saver": "^2.0.7",
     "@types/is-url": "^1.2.32",
     "@types/linkify-it": "^5.0.0",

packages/gephi-lite/package.json

@@ -1,10 +1,8 @@
-import { nodeExtent } from "graphology-metrics/graph";
 import { FC, useCallback, useMemo } from "react";
 import { useTranslation } from "react-i18next";
 
-import { useAppearance, useAppearanceActions, useSigmaGraph } from "../../core/context/dataContexts";
+import { useAppearance, useAppearanceActions } from "../../core/context/dataContexts";
 import { ItemType } from "../../core/types";
-import { computeCoordinateMappingFromGraph } from "../../utils/geo";
 import ColorPicker from "../ColorPicker";
 import { EnumInput } from "../forms/TypedInputs";
 import { MapBackgroundLayerForm } from "./background/MapBackgroundLayerForm";
@@ -60,7 +58,6 @@ export const GraphBackgroundAppearance: FC<unknown> = () => {
   const { t } = useTranslation();
   const { backgroundColor, layoutGridColor, backgroundLayer } = useAppearance();
   const { setBackgroundColorAppearance, setLayoutGridColorAppearance, setBackgroundLayer } = useAppearanceActions();
-  const sigmaGraph = useSigmaGraph();
 
   const layerMode: LayerMode = backgroundLayer?.type || "none";
 
@@ -73,37 +70,8 @@ export const GraphBackgroundAppearance: FC<unknown> = () => {
   );
 
   const enableMapLayer = useCallback(() => {
-    if (sigmaGraph.order === 0) {
-      // Empty graph: use a default mapping centered at 0,0
-      setBackgroundLayer({
-        type: "map",
-        map: {
-          engine: "maplibre",
-          coordinateMapping: {
-            graphExtent: { minX: -1, maxX: 1, minY: -1, maxY: 1 },
-            geoExtent: { west: -20, east: 20, south: -20, north: 20 },
-          },
-        },
-      });
-      return;
-    }
-
-    const { x, y } = nodeExtent(sigmaGraph, ["x", "y"]);
-    const graphExtent = { minX: x[0], maxX: x[1], minY: y[0], maxY: y[1] };
-
-    // Auto-detect if positions look geographic (after Geographic layout)
-    const looksGeographic =
-      graphExtent.minX >= -180 && graphExtent.maxX <= 180 && graphExtent.minY >= -90 && graphExtent.maxY <= 90;
-
-    if (looksGeographic) {
-      // Use direct mapping (x=lng, y=lat)
-      setBackgroundLayer({ type: "map", map: { engine: "maplibre" } });
-    } else {
-      // Compute coordinate mapping for arbitrary positions
-      const coordinateMapping = computeCoordinateMappingFromGraph(graphExtent);
-      setBackgroundLayer({ type: "map", map: { engine: "maplibre", coordinateMapping } });
-    }
-  }, [sigmaGraph, setBackgroundLayer]);
+    setBackgroundLayer({ type: "map", map: { engine: "maplibre" } });
+  }, [setBackgroundLayer]);
 
   return (
     <div className="panel-body">

packages/gephi-lite/src/components/GraphAppearance/index.tsx

@@ -12,11 +12,10 @@ import {
 import chroma from "chroma-js";
 import { Attributes } from "graphology-types";
 import { forEach, identity, isNil, keyBy } from "lodash";
-import { MercatorCoordinate } from "maplibre-gl";
 import { EdgeLabelDrawingFunction, NodeLabelDrawingFunction } from "sigma/rendering";
 import { EdgeDisplayData, NodeDisplayData } from "sigma/types";
 
-import { computeMercatorSizeRatio, geoToGraph, graphToGeo } from "../../utils/geo";
+import { MAP_Y_LIMIT, MAP_Y_MARGIN, MERCATOR_SIZE_RATIO, smoothClamp, smoothClampInverse } from "../../utils/geo";
 import { mergeStaticDynamicData } from "../graph/dynamicAttributes";
 import { getFieldValue, getFieldValueForQuantification } from "../graph/fieldModel";
 import {
@@ -307,34 +306,32 @@ export function getAllVisualGetters(
   appearance: AppearanceState,
   isClamped: boolean,
 ): VisualGetters {
-  // Check if map mode is active
-  const mapConfig = appearance.backgroundLayer?.type === "map" ? appearance.backgroundLayer.map : null;
-  const coordinateMapping = mapConfig?.coordinateMapping;
-  const sizeRatio = mapConfig ? computeMercatorSizeRatio(coordinateMapping) : 1;
+  const isMap = appearance.backgroundLayer?.type === "map";
 
   // Base size getters
   const baseGetNodeSize = makeGetNumberAttr("nodes", "size", dataset, dynamicNodeData, appearance);
   const baseGetEdgeSize = makeGetNumberAttr("edges", "size", dataset, dynamicNodeData, appearance);
 
   // Wrap size getters to apply sizeRatio in map mode
   const getNodeSize: NumberGetter | null =
-    baseGetNodeSize && sizeRatio !== 1 ? (data) => baseGetNodeSize(data) * sizeRatio : baseGetNodeSize;
+    baseGetNodeSize && isMap ? (data) => baseGetNodeSize(data) * MERCATOR_SIZE_RATIO : baseGetNodeSize;
   const getEdgeSize: NumberGetter | null =
-    baseGetEdgeSize && sizeRatio !== 1 ? (data) => baseGetEdgeSize(data) * sizeRatio : baseGetEdgeSize;
+    baseGetEdgeSize && isMap ? (data) => baseGetEdgeSize(data) * MERCATOR_SIZE_RATIO : baseGetEdgeSize;
 
-  const getNodePosition: CoordinateGetter | null = mapConfig
+  const getNodePosition: CoordinateGetter | null = isMap
     ? (pos) => {
-        const geo = graphToGeo(pos.x, pos.y, coordinateMapping, isClamped);
-        const mercator = MercatorCoordinate.fromLngLat({ lng: geo.lng, lat: geo.lat });
-        return { x: mercator.x, y: 1 - mercator.y };
+        const y = isClamped ? smoothClamp(pos.y, MAP_Y_LIMIT, MAP_Y_MARGIN) : pos.y;
+        return { x: (pos.x + 180) / 360, y: (180 + y) / 360 };
       }
     : null;
 
-  const reverseNodePosition: CoordinateGetter | null = mapConfig
+  const reverseNodePosition: CoordinateGetter | null = isMap
     ? (pos) => {
-        const mercator = new MercatorCoordinate(pos.x, 1 - pos.y, 0);
-        const lngLat = mercator.toLngLat();
-        return geoToGraph(lngLat.lat, lngLat.lng, coordinateMapping, isClamped);
+        const rawY = pos.y * 360 - 180;
+        return {
+          x: pos.x * 360 - 180,
+          y: isClamped ? smoothClampInverse(rawY, MAP_Y_LIMIT, MAP_Y_MARGIN) : rawY,
+        };
       }
     : null;
 

packages/gephi-lite/src/core/appearance/utils.ts

@@ -464,12 +464,12 @@ export const dynamicItemDataAtom = derivedAtom(
 // Updated reactively (via bindEffect below) and imperatively by the layout supervisor.
 export const mapClampedAtom = atom(false);
 const mapClampInputsAtom = derivedAtom([graphDatasetAtom, appearanceAtom], (dataset, appearance) => {
-  const mapConfig = appearance.backgroundLayer?.type === "map" ? appearance.backgroundLayer.map : null;
-  if (!mapConfig) return { isMap: false as const };
-  return { isMap: true as const, layout: dataset.layout, coordinateMapping: mapConfig.coordinateMapping };
+  const isMap = appearance.backgroundLayer?.type === "map";
+  if (!isMap) return { isMap: false as const };
+  return { isMap: true as const, layout: dataset.layout };
 });
 mapClampInputsAtom.bindEffect((inputs): undefined => {
-  mapClampedAtom.set(inputs.isMap ? layoutNeedsClamping(inputs.layout, inputs.coordinateMapping) : false);
+  mapClampedAtom.set(inputs.isMap ? layoutNeedsClamping(inputs.layout) : false);
 });
 export const visualGettersAtom = derivedAtom(
   [graphDatasetAtom, dynamicItemDataAtom, appearanceAtom],

packages/gephi-lite/src/core/graph/index.ts

@@ -28,20 +28,36 @@ describe("Geographic layout", () => {
       expect(GeographicLayout.run(graph, { settings: { missingStrategy: "keep" } } as never)).toEqual({});
     });
 
-    it("should assign x=lng, y=lat for valid nodes", () => {
+    it("should assign x=lng, y=lat with equirectangular projection", () => {
       const graph = makeGraph({
         paris: { lat: 48.85, lng: 2.35 },
         london: { lat: 51.5, lng: -0.12 },
       });
       const result = GeographicLayout.run(graph, {
-        settings: { latitudeField: "lat", longitudeField: "lng", missingStrategy: "keep" },
+        settings: {
+          projection: "equirectangular",
+          latitudeField: "lat",
+          longitudeField: "lng",
+          missingStrategy: "keep",
+        },
       });
       expect(result).toEqual({
         paris: { x: 2.35, y: 48.85 },
         london: { x: -0.12, y: 51.5 },
       });
     });
 
+    it("should apply Mercator projection with default (webmercator)", () => {
+      const graph = makeGraph({ a: { lat: 45, lng: 10 } });
+      const result = GeographicLayout.run(graph, {
+        settings: { latitudeField: "lat", longitudeField: "lng", missingStrategy: "keep" },
+      });
+      // x unchanged, y is Mercator-projected (y > lat for positive latitudes)
+      expect(result.a.x).toBe(10);
+      expect(result.a.y).toBeGreaterThan(45);
+      expect(result.a.y).toBeLessThan(90);
+    });
+
     it("should skip nodes with non-numeric or NaN coordinates", () => {
       const graph = makeGraph({
         a: { lat: 48, lng: 2 },
@@ -61,7 +77,12 @@ describe("Geographic layout", () => {
         b: {},
       });
       const result = GeographicLayout.run(graph, {
-        settings: { latitudeField: "lat", longitudeField: "lng", missingStrategy: "keep" },
+        settings: {
+          projection: "equirectangular",
+          latitudeField: "lat",
+          longitudeField: "lng",
+          missingStrategy: "keep",
+        },
       });
       expect(result).toEqual({ a: { x: 2, y: 48 } });
     });
@@ -74,7 +95,12 @@ describe("Geographic layout", () => {
         d: {},
       });
       const result = GeographicLayout.run(graph, {
-        settings: { latitudeField: "lat", longitudeField: "lng", missingStrategy: "grid" },
+        settings: {
+          projection: "equirectangular",
+          latitudeField: "lat",
+          longitudeField: "lng",
+          missingStrategy: "grid",
+        },
       });
       expect(result.a).toEqual({ x: 2, y: 48 });
       expect(result.b).toEqual({ x: -1, y: 51 });
@@ -99,7 +125,12 @@ describe("Geographic layout", () => {
         ],
       );
       const result = GeographicLayout.run(graph, {
-        settings: { latitudeField: "lat", longitudeField: "lng", missingStrategy: "barycentergrid" },
+        settings: {
+          projection: "equirectangular",
+          latitudeField: "lat",
+          longitudeField: "lng",
+          missingStrategy: "barycentergrid",
+        },
       });
       // c is connected to a and b, should be at barycenter
       expect(result.c).toEqual({ x: 5, y: 50 });

packages/gephi-lite/src/core/layouts/collection/geographic.spec.ts

@@ -1,6 +1,7 @@
 import { DataGraph } from "@gephi/gephi-lite-sdk";
 
 import { MapIcon } from "../../../components/common-icons";
+import { GeoProjectionType, applyGeoProjection } from "../../../utils/geo-projections";
 import { appearanceActions } from "../../appearance";
 import { EVENTS, emitter } from "../../context/eventsContext";
 import { LayoutMapping, SyncLayout } from "../types";
@@ -11,6 +12,7 @@ const LNG_RE = /^(lng|lon|long|longitude|x_?coord)$/i;
 export type MissingStrategy = "keep" | "grid" | "barycentergrid";
 
 export interface GeographicLayoutSettings {
+  projection?: GeoProjectionType;
   latitudeField?: string;
   longitudeField?: string;
   missingStrategy: MissingStrategy;
@@ -39,7 +41,8 @@ function computeGridPositions(
 }
 
 function runGeographic(graph: DataGraph, options?: { settings: GeographicLayoutSettings }): LayoutMapping {
-  const { latitudeField, longitudeField, missingStrategy = "keep" } = options?.settings || {};
+  const { projection = "webmercator", latitudeField, longitudeField, missingStrategy = "keep" } =
+    options?.settings || {};
   const result: LayoutMapping = {};
 
   if (!latitudeField || !longitudeField) return result;
@@ -51,7 +54,7 @@ function runGeographic(graph: DataGraph, options?: { settings: GeographicLayoutS
     const lat = attrs[latitudeField];
     const lng = attrs[longitudeField];
     if (typeof lat === "number" && typeof lng === "number" && !isNaN(lat) && !isNaN(lng)) {
-      result[nodeId] = { x: lng, y: lat };
+      result[nodeId] = applyGeoProjection(lng, lat, projection);
       validIds.push(nodeId);
     } else {
       missingIds.push(nodeId);
@@ -122,6 +125,8 @@ export const GeographicLayout = {
       id: "applyWithMap",
       description: true,
       icon: MapIcon,
+      disabled: (settings: GeographicLayoutSettings) =>
+        !!settings.projection && settings.projection !== "webmercator",
       onClick() {
         return {
           applyLayout: true,
@@ -136,6 +141,13 @@ export const GeographicLayout = {
     },
   ],
   parameters: [
+    {
+      id: "projection",
+      type: "enum",
+      options: [{ id: "webmercator" }, { id: "equirectangular" }, { id: "equalearth" }, { id: "naturalearth1" }],
+      defaultValue: "webmercator",
+      description: true,
+    },
     {
       id: "latitudeField",
       type: "attribute",