[layout] design when layout is running

While a layout is running, clickin on a layout item on the menu stop the
running layout and set this layout as the latest (for buttons on the
graphs).

Now it's possible to change the layout parameter when its is already
running. A restart is called.

iOn the menu, display a spinner next the algo that is running.

Author: sim51

package-lock.json

@@ -40,6 +40,7 @@
     "lerna": "^8.2.0",
     "playwright": "^1.50.1",
     "prettier": "^3.4.2",
+    "react-what-changed": "^1.1.2",
     "rimraf": "^6.0.1",
     "typescript": "^5.7.3",
     "typescript-eslint": "^8.22.0",

package.json

@@ -7,6 +7,7 @@ import { IconType } from "react-icons";
 import TetherComponent from "react-tether";
 
 import { CaretDownIcon, CaretRightIcon } from "./common-icons";
+import { Spinner } from "./Loader";
 
 type MenuCommon<T = unknown> = {
   id: string;
@@ -22,17 +23,18 @@ type MenuCommon<T = unknown> = {
     }
 ) &
   T;
-type MenuButton<T> = MenuCommon<T> & { type?: "button" };
+type MenuButton<T> = MenuCommon<T> & { type?: "button" , isRunning?:boolean};
 type MenuText<T> = MenuCommon<T> & { type: "text"; className?: string };
 type MenuSimpleItem<T> = MenuButton<T> | MenuText<T>;
-type MenuSection<T> = MenuSimpleItem<T> & { children: MenuSimpleItem<T>[] };
+export type MenuSection<T> = MenuSimpleItem<T> & { children: MenuSimpleItem<T>[] };
 export type MenuItem<T = unknown> = MenuSimpleItem<T> | MenuSection<T>;
 
-const ItemMenuInner: FC<{ item: MenuItem; isOpened?: boolean; isSelected?: boolean }> = ({
+const ItemMenuInner: FC<{ item: MenuItem; isOpened?: boolean; isSelected?: boolean, isLoading? :boolean }> = ({
   item,
   isOpened,
   isSelected,
-}) => {
+  isLoading
+}) =>{
   const { t } = useTranslation();
   return (
     <div className="d-flex align-items-center w-100">
@@ -46,6 +48,7 @@ const ItemMenuInner: FC<{ item: MenuItem; isOpened?: boolean; isSelected?: boole
           <span className="side-menu-item">{item.capitalize ? capitalize(t(item.i18nKey)) : t(item.i18nKey)}</span>
         </>
       )}
+      {isLoading && (<Spinner className="spinner-border-sm ms-2"/>)}
       {isOpened !== undefined && <span>{isOpened ? <CaretDownIcon /> : <CaretRightIcon />}</span>}
     </div>
   );
@@ -69,7 +72,7 @@ function SimpleItem<T = unknown>({
       className={cx("gl-btn w-100 text-start", selected === item.id && "gl-btn-fill")}
       onClick={() => onSelectedChange(item)}
     >
-      <ItemMenuInner item={item} isSelected={selected === item.id} />
+      <ItemMenuInner item={item} isSelected={selected === item.id} isLoading={item.isRunning}/>
     </button>
   );
 }

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

@@ -1,12 +1,18 @@
-import { FC } from "react";
+import { FC, useEffect } from "react";
 import { useTranslation } from "react-i18next";
 
-import { useLayoutActions, useLayoutState } from "../../core/context/dataContexts";
+import { useLayoutActions, useLayoutState, useSessionActions } from "../../core/context/dataContexts";
 
 export const LayoutQualityForm: FC = () => {
   const { t } = useTranslation();
-  const { quality } = useLayoutState();
-  const { setQuality } = useLayoutActions();
+  const { setLastLayout } = useSessionActions();
+  const layoutState = useLayoutState();
+  const { setQuality, stopLayout } = useLayoutActions();
+
+  useEffect(() => {
+    setLastLayout("layout-quality");
+    if (layoutState.type === "running") stopLayout();
+  }, [layoutState, stopLayout, setLastLayout]);
 
   return (
     <div className="panel-body">
@@ -24,9 +30,9 @@ export const LayoutQualityForm: FC = () => {
           <input
             className="form-check-input"
             id="qualityEnabled"
-            checked={quality.enabled}
+            checked={layoutState.quality.enabled}
             type="checkbox"
-            onChange={(e) => setQuality({ ...quality, enabled: e.target.checked })}
+            onChange={(e) => setQuality({ ...layoutState.quality, enabled: e.target.checked })}
           />
           <label htmlFor="qualityEnabled" className="form-check-label">
             {t("layouts.quality.enable")}
@@ -36,9 +42,9 @@ export const LayoutQualityForm: FC = () => {
           <input
             className="form-check-input"
             id="qualityGrid"
-            checked={quality.showGrid}
+            checked={layoutState.quality.showGrid}
             type="checkbox"
-            onChange={(e) => setQuality({ ...quality, showGrid: e.target.checked })}
+            onChange={(e) => setQuality({ ...layoutState.quality, showGrid: e.target.checked })}
           />
           <label htmlFor="qualityGrid" className="form-check-label">
             {t("layouts.quality.showGrid")}

packages/gephi-lite/src/components/forms/LayoutQualityForm.tsx

@@ -7,7 +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 { sessionAtom } from "../session";
 import { resetCamera } from "../sigma";
 import { LAYOUTS } from "./collection";
 import { LayoutMapping, LayoutQuality, LayoutState } from "./types";
@@ -62,19 +62,16 @@ export const stopLayout = asyncAction(async (isForRestart = false) => {
 export const startLayout = asyncAction(async (id: string, params: unknown, isForRestart = false) => {
   // Stop the previous algo (the "if needed" is done in the function itself)
   await stopLayout(isForRestart);
-  
+
   const { setNodePositions } = graphDatasetActions;
-  const { setLastLayoutUsed } = sessionActions;
 
   // search the layout
   const layout = LAYOUTS.find((l) => l.id === id);
 
   if (layout) {
-    if (!isForRestart) setLastLayoutUsed(layout.id);
-
     // Sync layout
     if (layout.type === "sync") {
-      layoutStateAtom.set((prev) => ({ ...prev, type: "running", layoutId: id }));
+      layoutStateAtom.set((prev) => ({ ...prev, type: "running", layoutId: id, supervisor: undefined }));
 
       // generate positions
       const dataset = graphDatasetAtom.get();
@@ -104,8 +101,8 @@ export const startLayout = asyncAction(async (id: string, params: unknown, isFor
 export const restartLastLayout = asyncAction(async () => {
   // Get the algo and its parameters
   const session = sessionAtom.get();
-  if (session.lastLayoutUsed) {
-    const layoutId = session.lastLayoutUsed;
+  if (session.lastLayout) {
+    const layoutId = session.lastLayout;
     const layout = LAYOUTS.find((e) => e.id === layoutId);
     const params = session.layoutsParameters[layoutId] || {};
     if (layout) {

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

@@ -18,16 +18,16 @@ export const reset: Producer<Session, []> = () => {
   return () => getEmptySession();
 };
 
-const setLastLayoutUsed: Producer<Session, [Session["lastLayoutUsed"]]> = (lastLayoutUsed) => {
+const setLastLayout: Producer<Session, [Session["lastLayout"]]> = (layoutId) => {
   return (session) => ({
     ...session,
-    lastLayoutUsed,
+    lastLayout: layoutId
   });
 };
 
 export const sessionActions = {
   reset: producerToAction(reset, sessionAtom),
-  setLastLayoutUsed: producerToAction(setLastLayoutUsed, sessionAtom),
+  setLastLayout: producerToAction(setLastLayout, sessionAtom),
 };
 
 /**

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

@@ -1,6 +1,6 @@
 export interface Session {
+  lastLayout?: string;
   // 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/core/session/types.ts

@@ -87,8 +87,18 @@ const InteractionsController: FC = () => {
 
   // Get the latest layout run in the history with its data
   const lastLayoutActive = useMemo(() => {
-    if (!session.lastLayoutUsed) return null;
-    const layoutId = session.lastLayoutUsed;
+    if (!session.lastLayout) return null;
+    const layoutId = session.lastLayout;
+    
+    // Special case for layout quality
+    if(layoutId === "layout-quality") 
+      return {
+      id: "quality",
+      name: t(`layouts.${layoutId}.title`),
+      type: "quality",
+      params:{}
+    }
+
     const layout = LAYOUTS.find((e) => e.id === layoutId);
     if (!layout) return null;
 
@@ -98,7 +108,7 @@ const InteractionsController: FC = () => {
       type: layout.type,
       params: session.layoutsParameters[layout.id] || {},
     };
-  }, [session.lastLayoutUsed, session.layoutsParameters, t]);
+  }, [session.lastLayout, session.layoutsParameters, t]);
 
   // Get needed info to render the layout button
   const layoutButton = useMemo(() => {
@@ -124,6 +134,13 @@ const InteractionsController: FC = () => {
             disabled: false,
             className: "gl-btn gl-btn-icon gl-btn-outline bg-body",
           };
+        } else if (lastLayoutActive.type === "quality") {
+          result = {
+            title: t("graph.control.layout-run-latest", { name: lastLayoutActive.name }),
+            icon: <PlaySyncIcon />,
+            disabled: true,
+            className: "gl-btn gl-btn-icon gl-btn-outline bg-body",
+          };
         } else {
           result = {
             title: t("graph.control.layout-start-latest", { name: lastLayoutActive.name }),

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

@@ -1,5 +1,5 @@
 import cx from "classnames";
-import { type ComponentType, FC, useEffect, useState } from "react";
+import { type ComponentType, FC, useEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { PiX } from "react-icons/pi";
 
@@ -24,7 +24,7 @@ import {
   MetricsIconFill,
 } from "../../components/common-icons";
 import { LayoutQualityForm } from "../../components/forms/LayoutQualityForm";
-import { useSelection, useSelectionActions } from "../../core/context/dataContexts";
+import { useLayoutState, useSelection, useSelectionActions } from "../../core/context/dataContexts";
 import { EVENTS, useEventsContext } from "../../core/context/eventsContext";
 import { LAYOUTS } from "../../core/layouts/collection";
 import { EDGE_METRICS, MIXED_METRICS, NODE_METRICS } from "../../core/metrics/collections";
@@ -113,10 +113,28 @@ export const GraphPage: FC = () => {
   const [selectedTool, setSelectedTool] = useState<undefined | { id: string; panel: ComponentType }>(undefined);
   const { items } = useSelection();
   const { emptySelection } = useSelectionActions();
+  const layoutState = useLayoutState();
   const { t } = useTranslation();
   const isMobile = useMobile();
   const { emitter } = useEventsContext();
 
+  const menuExtended:MenuItem<{ panel?: ComponentType, isRunning?:boolean }>[] = useMemo(
+    () =>
+      MENU.map((section) => {
+        if (section.id === "layout" && layoutState.type === "running" && "children" in section) {
+          return {
+            ...section,
+            children: section.children.map((item) => ({
+              ...item,
+              isRunning: `layout-${layoutState.layoutId}` === item.id,
+            })),
+          };
+        }
+        return section;
+      }),
+    [layoutState],
+  );
+
   // Mobile display:
   const [expanded, setExpanded] = useState(false);
 
@@ -190,7 +208,7 @@ export const GraphPage: FC = () => {
             <GraphSummary />
             <GraphSearchSelection />
             <SideMenu
-              menu={MENU}
+              menu={menuExtended}
               selected={selectedTool?.id}
               onSelectedChange={(item) =>
                 setSelectedTool(

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

@@ -7,7 +7,6 @@ import Highlight from "react-highlight";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router";
 
-import { LoaderFill } from "../../../../components/Loader";
 import MessageAlert from "../../../../components/MessageAlert";
 import {
   CodeEditorIcon,
@@ -27,7 +26,7 @@ import { sessionAtom } from "../../../../core/session";
 
 export const LayoutForm: FC<{
   layout: Layout;
-  onStart: (params: Record<string, unknown>) => void;
+  onStart: (params: Record<string, unknown>, restart?:boolean) => void;
   onStop: () => void;
   isRunning: boolean;
 }> = ({ layout, onStart, onStop, isRunning }) => {
@@ -74,8 +73,16 @@ export const LayoutForm: FC<{
         errors[param.id] = t(`error.form.max`, { ...param, name });
     });
 
-    setErrors(Object.keys(errors).length > 0 ? errors : null);
-  }, [layout, layoutParameters, t]);
+    const hasError = Object.keys(errors).length > 0 
+    setErrors(hasError ? errors : null);
+
+    if(layout.type === "worker" && !hasError && isRunning){
+      onStart(layoutParameters, true);
+
+    } 
+    // I don't want to trigger this useeffect when the isRunning value changed
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [layout, layoutParameters, t, onStart]);
 
   /**
    * When the layout change
@@ -187,7 +194,6 @@ export const LayoutForm: FC<{
                       param.description ? t(`layouts.${layout.id}.parameters.${param.id}.description`) : undefined
                     }
                     value={value as number}
-                    disabled={isRunning}
                     onChange={(v) => changeParameter(param.id, v)}
                     required={param.required || false}
                     min={param.min}
@@ -203,7 +209,6 @@ export const LayoutForm: FC<{
                       param.description ? t(`layouts.${layout.id}.parameters.${param.id}.description`) : undefined
                     }
                     value={!!value as boolean}
-                    disabled={isRunning}
                     onChange={(v) => changeParameter(param.id, v)}
                     required={param.required || false}
                   />
@@ -218,7 +223,6 @@ export const LayoutForm: FC<{
                     }
                     placeholder={t("common.none")}
                     value={value as string}
-                    disabled={isRunning}
                     onChange={(v) => changeParameter(param.id, v)}
                     options={((param.itemType === "nodes" ? nodeFields : edgeFields) as FieldModel[])
                       .filter((field) => (param.restriction ? param.restriction.includes(field.type) : true))
@@ -286,7 +290,6 @@ export const LayoutForm: FC<{
               </div>
             );
           })}
-          {isRunning && <LoaderFill />}
         </div>
       </div>
 
@@ -324,7 +327,6 @@ export const LayoutForm: FC<{
                 const graph = getFilteredDataGraph(dataset, sigmaGraph);
                 setParameters(getSettings(layoutParameters, graph));
               }}
-              disabled={isRunning}
             >
               <GuessSettingsIcon />
             </button>
@@ -334,7 +336,6 @@ export const LayoutForm: FC<{
             title={t("common.reset")}
             className="gl-btn gl-btn-outline gl-btn-icon"
             onClick={() => setParameters()}
-            disabled={isRunning}
           >
             <ResetIcon />
           </button>