[gephi-lite] adding layout controller on graph

On the graph page, you can start/stop/run the last used layout, directly
on the graph.

The lastUsedLayout is store in the session using the corresponding atom.

Now when you on a layout setting page :
- you can close it even if the algo is running (the close button is on
  top of the loader)
- you can't change the parameters when an algo is running

Moreover, I review the node drag'n'drop feature to restart the algo
while you drag.

Author: sim51

packages/gephi-lite/src/components/Loader.tsx

@@ -23,8 +23,9 @@ export const Loader: FC = () => (
 /**
  * Display a loader that takes the size of its parent container.
  */
-export const LoaderFill: FC = () => (
+export const LoaderFill: FC<{ message?: string }> = ({ message }) => (
   <div className="loader-fill">
     <Spinner style={{ width: "3rem", height: " 3rem" }} />
+    {message && <p className="text-center">{message}</p>}
   </div>
 );

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

@@ -58,6 +58,8 @@ import {
   PiPaintBrush,
   PiPalette,
   PiPaletteFill,
+  PiPause,
+  PiPauseFill,
   PiPencilSimpleLine,
   PiPencilSimpleLineFill,
   PiPlay,
@@ -71,6 +73,8 @@ import {
   PiSelection,
   PiSelectionBold,
   PiSignIn,
+  PiSkipForwardFill,
+  PiSkipForwardLight,
   PiSpinner,
   PiSquare,
   PiStop,
@@ -152,6 +156,10 @@ export const MouseIconFill = PiCursorFill;
 export const OpenInGraphIcon = PiCrosshair;
 export const PlayIcon = PiPlay;
 export const PlayIconFill = PiPlayFill;
+export const PlaySyncIcon = PiSkipForwardLight;
+export const PlaySyncIconFill = PiSkipForwardFill;
+export const PauseIcon = PiPause;
+export const PauseIconFill = PiPauseFill;
 export const ResetIcon = PiArrowCounterClockwise;
 export const RetryIcon = PiArrowClockwise;
 export const SearchIcon = PiMagnifyingGlass;

packages/gephi-lite/src/core/context/dataContexts.tsx

@@ -147,6 +147,7 @@ export const useSearch = makeUseAtom(CONTEXTS.search);
 export const useLayoutState = makeUseAtom(CONTEXTS.layoutState);
 export const useUser = makeUseAtom(CONTEXTS.user);
 export const useDynamicItemData = makeUseAtom(CONTEXTS.dynamicItemData);
+export const useSessionData = makeUseAtom(CONTEXTS.session);
 
 export const useSigmaActions = makeUseActions(sigmaActions);
 export const useFiltersActions = makeUseActions(filtersActions);
@@ -159,6 +160,7 @@ export const useSearchActions = makeUseActions(searchActions);
 export const useFileActions = makeUseActions(fileActions);
 export const useLayoutActions = makeUseActions(layoutActions);
 export const useUserActions = makeUseActions(userActions);
+export const useSessionActions = makeUseActions(sessionActions);
 
 export const useResetStates = () => {
   return resetStates;

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

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

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

@@ -7,6 +7,7 @@ import { localStorage } from "../../utils/storage";
 import { EVENTS, emitter } from "../context/eventsContext";
 import { graphDatasetActions, graphDatasetAtom, sigmaGraphAtom } from "../graph";
 import { dataGraphToFullGraph } from "../graph/utils";
+import { sessionActions, sessionAtom } from "../session";
 import { resetCamera } from "../sigma";
 import { LAYOUTS } from "./collection";
 import { LayoutMapping, LayoutQuality, LayoutState } from "./types";
@@ -34,41 +35,46 @@ export const layoutStateAtom = atom<LayoutState>(getLocalStorageLayoutState());
  * Actions:
  * ********
  */
-export const startLayout = asyncAction(async (id: string, params: unknown) => {
+export const startLayout = asyncAction(async (id: string, params: unknown, isForRestart = false) => {
   const { setNodePositions } = graphDatasetActions;
-  const dataset = graphDatasetAtom.get();
+  const { setLastLayoutUsed } = sessionActions;
 
   // search the layout
   const layout = LAYOUTS.find((l) => l.id === id);
 
-  // Sync layout
-  if (layout && layout.type === "sync") {
-    layoutStateAtom.set((prev) => ({ ...prev, type: "running", layoutId: id }));
-
-    // generate positions
-    const fullGraph = dataGraphToFullGraph(dataset);
-    const positions = layout.run(fullGraph, { settings: params });
-
-    // Save it
-    setNodePositions(positions);
-
-    // To prevent resetting the camera before sigma receives new data, we
-    // need to wait a frame, and also wait for it to trigger a refresh:
-    setTimeout(() => {
-      layoutStateAtom.set((prev) => ({ ...prev, type: "idle" }));
-      resetCamera({ forceRefresh: false });
-    }, 0);
-  }
-
-  // Async layout
-  if (layout && layout.type === "worker") {
-    const worker = new layout.supervisor(sigmaGraphAtom.get(), { settings: params });
-    worker.start();
-    layoutStateAtom.set((prev) => ({ ...prev, type: "running", layoutId: id, supervisor: worker }));
+  if (layout) {
+    if (!isForRestart) setLastLayoutUsed(layout.id);
+
+    // Sync layout
+    if (layout.type === "sync") {
+      layoutStateAtom.set((prev) => ({ ...prev, type: "running", layoutId: id }));
+
+      // generate positions
+      const dataset = graphDatasetAtom.get();
+      const fullGraph = dataGraphToFullGraph(dataset);
+      const positions = layout.run(fullGraph, { settings: params });
+
+      // Save it
+      setNodePositions(positions);
+
+      // To prevent resetting the camera before sigma receives new data, we
+      // need to wait a frame, and also wait for it to trigger a refresh:
+      setTimeout(() => {
+        layoutStateAtom.set((prev) => ({ ...prev, type: "idle" }));
+        resetCamera({ forceRefresh: false });
+      }, 0);
+    }
+
+    // Async layout
+    if (layout.type === "worker") {
+      const worker = new layout.supervisor(sigmaGraphAtom.get(), { settings: params });
+      worker.start();
+      layoutStateAtom.set((prev) => ({ ...prev, type: "running", layoutId: id, supervisor: worker }));
+    }
   }
 });
 
-export const stopLayout = asyncAction(async () => {
+export const stopLayout = asyncAction(async (isForRestart = false) => {
   const { setNodePositions } = graphDatasetActions;
   const layoutState = layoutStateAtom.get();
 
@@ -77,15 +83,33 @@ export const stopLayout = asyncAction(async () => {
     layoutState.supervisor.stop();
     layoutState.supervisor.kill();
 
-    // Save data
-    const positions: LayoutMapping = {};
-    sigmaGraphAtom.get().forEachNode((node, { x, y }) => {
-      positions[node] = { x, y };
-    });
-    setNodePositions(positions);
+    // DOn't save position if it's for a restart
+    if (!isForRestart) {
+      // Save data
+      const positions: LayoutMapping = {};
+      sigmaGraphAtom.get().forEachNode((node, { x, y }) => {
+        positions[node] = { x, y };
+      });
+      setNodePositions(positions);
+    }
   }
 
-  layoutStateAtom.set((prev) => ({ ...prev, type: "idle" }));
+  // Don't set the state if it's for restart
+  if (!isForRestart) layoutStateAtom.set((prev) => ({ ...prev, type: "idle" }));
+});
+
+export const restartLastLayout = asyncAction(async () => {
+  // Get the algo and its parameters
+  const session = sessionAtom.get();
+  if (session.lastLayoutUsed) {
+    const layoutId = session.lastLayoutUsed;
+    const layout = LAYOUTS.find((e) => e.id === layoutId);
+    const params = session.layoutsParameters[layoutId] || {};
+    if (layout) {
+      await stopLayout(true);
+      await startLayout(layoutId, params, true);
+    }
+  }
 });
 
 export const setQuality: Producer<LayoutState, [LayoutQuality]> = (quality) => {
@@ -105,8 +129,9 @@ const _computeLayoutQualityMetric: Producer<LayoutState> = () => {
 };
 
 export const layoutActions = {
-  startLayout,
   stopLayout,
+  startLayout,
+  restartLastLayout,
   setQuality: producerToAction(setQuality, layoutStateAtom),
   computeLayoutQualityMetric: producerToAction(_computeLayoutQualityMetric, layoutStateAtom),
 };
@@ -140,3 +165,13 @@ gridEnabledAtom.bindEffect((connectedClosenessSettings) => {
     sigmaGraph.off("eachNodeAttributesUpdated", fn);
   };
 });
+
+layoutStateAtom.bindEffect((state) => {
+  if (state.type !== "running") return;
+
+  const fnHandleDraggin = debounce(restartLastLayout, 100, { leading: true, trailing: true, maxWait: 100 });
+  emitter.on(EVENTS.nodesDragged, fnHandleDraggin);
+  return () => {
+    emitter.off(EVENTS.nodesDragged, fnHandleDraggin);
+  };
+});

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

@@ -4,23 +4,30 @@ import { sessionStorage } from "../../utils/storage";
 import { Session } from "./types";
 import { getEmptySession, serializeSession } from "./utils";
 
-/**
- * Producers:
- * **********
- */
-
 /**
  * Public API:
  * ***********
  */
 export const sessionAtom = atom<Session>(getEmptySession());
 
+/**
+ * Producers:
+ * **********
+ */
 export const reset: Producer<Session, []> = () => {
   return () => getEmptySession();
 };
 
+const setLastLayoutUsed: Producer<Session, [Session["lastLayoutUsed"]]> = (lastLayoutUsed) => {
+  return (session) => ({
+    ...session,
+    lastLayoutUsed,
+  });
+};
+
 export const sessionActions = {
   reset: producerToAction(reset, sessionAtom),
+  setLastLayoutUsed: producerToAction(setLastLayoutUsed, sessionAtom),
 };
 
 /**

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

@@ -1,5 +1,6 @@
 export interface Session {
   // for each layout, we save the parameters
+  lastLayoutUsed?: string;
   layoutsParameters: { [layout: string]: Record<string, unknown> };
   // for each metrics, we save the parameters
   metrics: {

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

@@ -355,6 +355,11 @@
     "control": {
       "fullscreenEnter": "Enter fullscreen mode",
       "fullscreenExit": "Exit fullscreen",
+      "layout-open-settings": "Open '{{name}}' layout settings",
+      "layout-no-layout": "Disabled: there is no layout in your history",
+      "layout-run-latest": "Run layout '{{name}}'",
+      "layout-start-latest": "Start layout '{{name}}'",
+      "layout-stop-latest": "Stop layout '{{name}}'",
       "zoomIn": "Zoom In",
       "zoomOut": "Zoom Out",
       "zoomReset": "See the whole graph"
@@ -506,9 +511,9 @@
     },
     "description": "This panel allows computing new coordinates to nodes of the graph. ",
     "exec": {
-      "started": "Layout {{layout}} is running",
-      "stopped": "Layout {{layout}} has been stopped",
-      "success": "Layout \"{{layout}}\" has successfully been applied."
+      "started": "Layout '{{layout}}' is running",
+      "stopped": "Layout '{{layout}}' has been stopped",
+      "success": "Layout '{{layout}}' has successfully been applied."
     },
     "fa2": {
       "buttons": {

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

@@ -394,6 +394,10 @@
     "control": {
       "fullscreenEnter": "Activer le mode plein écran",
       "fullscreenExit": "Quitter le mode plein écran",
+      "layout-run-latest": "Exécuter la spatialisation '{{name}}'",
+      "layout-start-latest": "Démarrer la spatialisation '{{name}}'",
+      "layout-stop-latest": "Arrêter la spatialisation '{{name}}'",
+      "layout-open-settings": "Ouvrir le panneau de paramétrage du layout '{{name}}'",
       "zoomIn": "Zoom avant",
       "zoomOut": "Zoom arrière",
       "zoomReset": "Afficher tout le graphe"

packages/gephi-lite/src/styles/_loader.scss

@@ -26,5 +26,4 @@
 
 .z-over-loader {
   z-index: 10;
-  position: relative;
 }