[gephi-lite] Improves geolayout and layout buttons

Details:
- Improves LayoutButton types and logic
- Replaces centerMissing boolean with missingStrategy
- Adds inferSettings and hideReset options to layout types
- Infers geo layout settings on open panel
- Adds a button to run geo layout AND open the map layer, with the
  related panel opened

Author: jacomyal

packages/gephi-lite/src/components/common-icons.tsx

@@ -53,6 +53,7 @@ import {
   PiMagnifyingGlass,
   PiMagnifyingGlassMinus,
   PiMagnifyingGlassPlus,
+  PiMapTrifold,
   PiMoonStars,
   PiMoonStarsFill,
   PiPaintBrush,
@@ -140,6 +141,7 @@ export const LightThemeIcon = PiSun;
 export const LightThemeSelectedIcon = PiSunFill;
 export const LockIcon = PiLock;
 export const LoginIcon = PiSignIn;
+export const MapIcon = PiMapTrifold;
 export const MarqueeIcon = PiSelection;
 export const MarqueeIconFill = PiSelectionBold;
 export const MenuCollapseIcon = PiCaretDown;

packages/gephi-lite/src/core/context/eventsContext.ts

@@ -11,6 +11,8 @@ export const EVENTS = {
   nodeCreated: "nodeCreated",
   edgeCreated: "edgeCreated",
   searchResultsSelected: "searchResultsSelected",
+  // Navigation:
+  openPanel: "openPanel",
 } as const;
 
 /**

packages/gephi-lite/src/core/layouts/collection/forceAtlas2.ts

@@ -5,6 +5,7 @@ import { ForceAtlas2LayoutParameters, ForceAtlas2Settings, inferSettings } from
 import RAW_FA2_DEFAULT_SETTINGS from "graphology-layout-forceatlas2/defaults";
 import FA2Layout from "graphology-layout-forceatlas2/worker";
 
+import { GuessSettingsIcon } from "../../../components/common-icons";
 import { WorkerLayout } from "../types";
 
 const FA2_DEFAULT_SETTINGS = RAW_FA2_DEFAULT_SETTINGS as Required<ForceAtlas2Settings>;
@@ -16,9 +17,12 @@ export const ForceAtlas2Layout = {
   buttons: [
     {
       id: "autoSettings",
+      icon: GuessSettingsIcon,
       description: true,
-      getSettings(_currentSettings, dataGraph: DataGraph) {
-        return { ...FA2_DEFAULT_SETTINGS, ...inferSettings(dataGraph) };
+      onClick(_currentSettings, dataGraph: DataGraph) {
+        return {
+          setSettings: { ...FA2_DEFAULT_SETTINGS, ...inferSettings(dataGraph) },
+        };
       },
     },
   ],

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

@@ -1,15 +1,140 @@
+import { DataGraph } from "@gephi/gephi-lite-sdk";
+
+import { MapIcon } from "../../../components/common-icons";
+import { appearanceActions } from "../../appearance";
+import { EVENTS, emitter } from "../../context/eventsContext";
 import { LayoutMapping, SyncLayout } from "../types";
 
+const LAT_RE = /^(lat|latitude|y_?coord)$/i;
+const LNG_RE = /^(lng|lon|long|longitude|x_?coord)$/i;
+
+export type MissingStrategy = "keep" | "grid" | "barycentergrid";
+
 export interface GeographicLayoutSettings {
   latitudeField?: string;
   longitudeField?: string;
-  centerMissing: boolean;
+  missingStrategy: MissingStrategy;
+}
+
+function computeGridPositions(
+  nodeIds: string[],
+  extent: { minX: number; maxX: number; minY: number; maxY: number },
+): LayoutMapping {
+  const result: LayoutMapping = {};
+  if (nodeIds.length === 0) return result;
+
+  const width = extent.maxX - extent.minX || 1;
+  const height = extent.maxY - extent.minY || 1;
+  const cols = Math.ceil(Math.sqrt(nodeIds.length));
+  const spacing = Math.min(width, height) / Math.max(cols, 1);
+  const offsetX = extent.minX - width * 0.2 - cols * spacing;
+  const startY = (extent.minY + extent.maxY) / 2 - (Math.ceil(nodeIds.length / cols) * spacing) / 2;
+
+  nodeIds.forEach((nodeId, i) => {
+    const col = i % cols;
+    const row = Math.floor(i / cols);
+    result[nodeId] = { x: offsetX + col * spacing, y: startY + row * spacing };
+  });
+  return result;
+}
+
+function runGeographic(graph: DataGraph, options?: { settings: GeographicLayoutSettings }): LayoutMapping {
+  const { latitudeField, longitudeField, missingStrategy = "keep" } = options?.settings || {};
+  const result: LayoutMapping = {};
+
+  if (!latitudeField || !longitudeField) return result;
+
+  const validIds: string[] = [];
+  const missingIds: string[] = [];
+
+  graph.forEachNode((nodeId, attrs) => {
+    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 };
+      validIds.push(nodeId);
+    } else {
+      missingIds.push(nodeId);
+    }
+  });
+
+  if (missingStrategy === "keep" || missingIds.length === 0 || validIds.length === 0) return result;
+
+  // Compute extent of geolocated nodes
+  let minX = Infinity,
+    maxX = -Infinity,
+    minY = Infinity,
+    maxY = -Infinity;
+  for (const id of validIds) {
+    const { x, y } = result[id];
+    if (x < minX) minX = x;
+    if (x > maxX) maxX = x;
+    if (y < minY) minY = y;
+    if (y > maxY) maxY = y;
+  }
+  const extent = { minX, maxX, minY, maxY };
+
+  if (missingStrategy === "grid") {
+    Object.assign(result, computeGridPositions(missingIds, extent));
+  } else if (missingStrategy === "barycentergrid") {
+    const validSet = new Set(validIds);
+    const gridIds: string[] = [];
+
+    for (const nodeId of missingIds) {
+      const geoNeighbors = graph.neighbors(nodeId).filter((n) => validSet.has(n));
+      if (geoNeighbors.length > 0) {
+        let sx = 0,
+          sy = 0;
+        for (const n of geoNeighbors) {
+          sx += result[n].x;
+          sy += result[n].y;
+        }
+        result[nodeId] = { x: sx / geoNeighbors.length, y: sy / geoNeighbors.length };
+      } else {
+        gridIds.push(nodeId);
+      }
+    }
+
+    Object.assign(result, computeGridPositions(gridIds, extent));
+  }
+
+  return result;
+}
+
+function inferGeographicSettings(dataGraph: DataGraph): Partial<GeographicLayoutSettings> {
+  if (dataGraph.order === 0) return {};
+  const sample = dataGraph.getNodeAttributes(dataGraph.nodes()[0]);
+  const numericKeys = Object.keys(sample).filter((k) => typeof sample[k] === "number");
+  return {
+    latitudeField: numericKeys.find((k) => LAT_RE.test(k)),
+    longitudeField: numericKeys.find((k) => LNG_RE.test(k)),
+  };
 }
 
 export const GeographicLayout = {
   id: "geographic",
   type: "sync",
   description: true,
+  hideReset: true,
+  inferSettings: inferGeographicSettings,
+  buttons: [
+    {
+      id: "applyWithMap",
+      description: true,
+      icon: MapIcon,
+      onClick() {
+        return {
+          applyLayout: true,
+          before() {
+            appearanceActions.setBackgroundLayer({ type: "map", map: { engine: "maplibre" } });
+          },
+          then() {
+            emitter.emit(EVENTS.openPanel, "appearance-background");
+          },
+        };
+      },
+    },
+  ],
   parameters: [
     {
       id: "latitudeField",
@@ -28,34 +153,12 @@ export const GeographicLayout = {
       description: true,
     },
     {
-      id: "centerMissing",
-      type: "boolean",
-      defaultValue: false,
+      id: "missingStrategy",
+      type: "enum",
+      options: [{ id: "keep" }, { id: "grid" }, { id: "barycentergrid" }],
+      defaultValue: "keep",
       description: true,
     },
   ],
-  run(graph, options) {
-    const { latitudeField, longitudeField, centerMissing = false } = options?.settings || {};
-    const result: LayoutMapping = {};
-
-    if (!latitudeField || !longitudeField) {
-      return result;
-    }
-
-    graph.forEachNode((nodeId, attrs) => {
-      const lat = attrs[latitudeField];
-      const lng = attrs[longitudeField];
-
-      if (typeof lat === "number" && typeof lng === "number" && !isNaN(lat) && !isNaN(lng)) {
-        // Valid coordinates: x = longitude, y = latitude
-        result[nodeId] = { x: lng, y: lat };
-      } else if (centerMissing) {
-        // Missing values: place at center (0, 0)
-        result[nodeId] = { x: 0, y: 0 };
-      }
-      // If !centerMissing, we don't add to result (node keeps current position)
-    });
-
-    return result;
-  },
+  run: runGeographic,
 } as SyncLayout<GeographicLayoutSettings>;

packages/gephi-lite/src/core/layouts/types.ts

@@ -1,6 +1,7 @@
 import { FieldModelType } from "@gephi/gephi-lite-sdk";
 import Graph from "graphology";
 import { ConnectedClosenessResult } from "graphology-metrics/layout-quality/connected-closeness";
+import { ComponentType } from "react";
 import { Coordinates } from "sigma/types";
 
 import { DataGraph, ItemData } from "../graph/types";
@@ -37,6 +38,12 @@ export interface LayoutAttributeParameter extends BaseLayoutParameter {
   restriction?: FieldModelType[];
 }
 
+export interface LayoutEnumParameter extends BaseLayoutParameter {
+  type: "enum";
+  options: Array<{ id: string }>;
+  defaultValue: string;
+}
+
 export type LayoutScriptFunction = (
   id: string,
   attributes: ItemData,
@@ -54,12 +61,21 @@ export type LayoutParameter =
   | LayoutScriptParameter
   | LayoutBooleanParameter
   | LayoutNumberParameter
-  | LayoutAttributeParameter;
+  | LayoutAttributeParameter
+  | LayoutEnumParameter;
+
+export interface LayoutButtonInstructions<P = unknown> {
+  setSettings?: P;
+  applyLayout?: boolean;
+  before?: () => void;
+  then?: () => void;
+}
 
 export interface LayoutButton<P = unknown> {
   id: string;
   description?: boolean;
-  getSettings: (currentSettings: P, dataGraph: DataGraph) => P;
+  icon?: ComponentType;
+  onClick: (currentSettings: P, dataGraph: DataGraph) => LayoutButtonInstructions<P>;
 }
 
 /**
@@ -73,8 +89,10 @@ export interface SyncLayout<P = any> {
   id: string;
   type: "sync";
   description?: boolean;
+  hideReset?: boolean;
   buttons?: Array<LayoutButton<P>>;
   parameters: Array<LayoutParameter>;
+  inferSettings?: (dataGraph: DataGraph) => Partial<P>;
   run: (graph: DataGraph, options?: { settings: P }) => LayoutMapping;
 }
 
@@ -93,8 +111,10 @@ export interface WorkerLayout<P = any> {
   id: string;
   type: "worker";
   description?: boolean;
+  hideReset?: boolean;
   buttons?: Array<LayoutButton<P>>;
   parameters: Array<LayoutParameter>;
+  inferSettings?: (dataGraph: DataGraph) => Partial<P>;
   supervisor: WorkerSupervisorConstructor;
 }
 

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

@@ -429,6 +429,12 @@
     "description": "This panel allows computing new coordinates to nodes of the graph. ",
     "geographic": {
       "description": "Positions nodes according to their geographic coordinates (latitude/longitude)",
+      "buttons": {
+        "applyWithMap": {
+          "description": "Apply layout and enable map background",
+          "title": "Apply with map"
+        }
+      },
       "parameters": {
         "latitudeField": {
           "description": "Node attribute containing latitude values",
@@ -438,9 +444,14 @@
           "description": "Node attribute containing longitude values",
           "title": "Longitude field"
         },
-        "centerMissing": {
-          "description": "Place nodes with missing coordinates at the center (0,0). If unchecked, they keep their current position.",
-          "title": "Center missing nodes"
+        "missingStrategy": {
+          "description": "How to handle nodes without valid geographic coordinates",
+          "title": "Missing coordinates",
+          "options": {
+            "keep": "Keep current position",
+            "grid": "Place in grid (left of map)",
+            "barycentergrid": "Neighbors barycenter + grid"
+          }
         }
       },
       "title": "Geographic"

packages/gephi-lite/src/views/graphPage/index.tsx

@@ -1,5 +1,5 @@
 import cx from "classnames";
-import { type ComponentType, FC, useEffect, useState } from "react";
+import { type ComponentType, FC, useCallback, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { PiX } from "react-icons/pi";
 
@@ -25,6 +25,7 @@ import {
 } from "../../components/common-icons";
 import { LayoutQualityForm } from "../../components/forms/LayoutQualityForm";
 import { useSelection, useSelectionActions } from "../../core/context/dataContexts";
+import { EVENTS, emitter } from "../../core/context/eventsContext";
 import { LAYOUTS } from "../../core/layouts/collection";
 import { EDGE_METRICS, MIXED_METRICS, NODE_METRICS } from "../../core/metrics/collections";
 import { useMobile } from "../../hooks/useMobile";
@@ -36,7 +37,19 @@ import { LabelsPanel } from "./panels/LabelsPanel";
 import { MetricsPanel } from "./panels/MetricsPanel";
 import { LayoutPanel } from "./panels/layouts/LayoutPanel";
 
-const MENU: MenuItem<{ panel?: ComponentType }>[] = [
+type PanelMenuItem = MenuItem<{ panel?: ComponentType }>;
+
+function findMenuPanel(menu: PanelMenuItem[], id: string): { id: string; panel: ComponentType } | undefined {
+  for (const item of menu) {
+    if (item.id === id && "panel" in item && item.panel) return { id: item.id, panel: item.panel };
+    if ("children" in item) {
+      const found = findMenuPanel(item.children, id);
+      if (found) return found;
+    }
+  }
+}
+
+const MENU: PanelMenuItem[] = [
   {
     id: "layout",
     i18nKey: "layouts.title",
@@ -118,6 +131,21 @@ export const GraphPage: FC = () => {
   // Mobile display:
   const [expanded, setExpanded] = useState(false);
 
+  const openPanel = useCallback(
+    (panelId: string) => {
+      const found = findMenuPanel(MENU, panelId);
+      if (found) setSelectedTool(found);
+    },
+    [setSelectedTool],
+  );
+
+  useEffect(() => {
+    emitter.on(EVENTS.openPanel, openPanel);
+    return () => {
+      emitter.off(EVENTS.openPanel, openPanel);
+    };
+  }, [openPanel]);
+
   const selectionPanel = (
     <div className={cx("panel panel-right panel-expandable panel-selection", items.size > 0 && "deployed")}>
       <button