[data edition] fix bug in node edition

paulgirard · paulgirard · commit 45e2ff6744e7 · 2026-02-06T11:30:09.000+01:00
Editing node was resetting its position when done from the data table.
Bug corrected by refactoring the update/create/node/edge methods specs.
we now semantically separate attribute; technical attribute and dynamic attributes.
diff --git a/packages/gephi-lite/src/components/data/EditEdge.tsx b/packages/gephi-lite/src/components/data/EditEdge.tsx
@@ -96,20 +96,16 @@ const useEditEdgeForm = ({
           return;
         }
 
-        const allAttributes = {
-          ...fromPairs(
-            data.attributes
-              .filter(({ value }) => value !== "" || value === undefined)
-              .map(({ key, value }) => {
-                // value are all string because input are all text whatever the data model
-                // for now we cast value as number if they are number to help downstream algo to create appropriate data model
-                const valueAsNumber = toNumber(value);
-                return [key, valueAsNumber ? valueAsNumber : value];
-              }),
-          ),
-          ...pick(data, "label", "color", "weight"),
-        };
-
+        const allAttributes = fromPairs(
+          data.attributes
+            .filter(({ value }) => value !== "" || value === undefined)
+            .map(({ key, value }) => {
+              // value are all string because input are all text whatever the data model
+              // for now we cast value as number if they are number to help downstream algo to create appropriate data model
+              const valueAsNumber = toNumber(value);
+              return [key, valueAsNumber ? valueAsNumber : value];
+            }),
+        );
         // Create new edge:
         if (isNew) {
           try {
@@ -134,7 +130,7 @@ const useEditEdgeForm = ({
         // Update existing edge:
         else {
           try {
-            updateEdge(id, allAttributes, { directed: data.isDirected });
+            updateEdge(id, { itemData: allAttributes, dynamic: { directed: data.isDirected } });
             select({ type: "edges", items: new Set([id]), replace: true });
             notify({
               type: "success",
diff --git a/packages/gephi-lite/src/components/data/EditNode.tsx b/packages/gephi-lite/src/components/data/EditNode.tsx
@@ -86,24 +86,22 @@ const useEditNodeForm = ({
           return;
         }
 
-        const allAttributes = {
-          ...fromPairs(
-            data.attributes
-              .filter(({ value }) => value !== "" || value === undefined)
-              .map(({ key, value }) => {
-                // value are all string because input are all text whatever the data model
-                // for now we cast value as number if they are number to help downstream algo to create appropriate data model
-                const valueAsNumber = toNumber(value);
-                return [key, valueAsNumber ? valueAsNumber : value];
-              }),
-          ),
-          ...pick(data, "x", "y"),
-        };
+        const allAttributes = fromPairs(
+          data.attributes
+            .filter(({ value }) => value !== "" || value === undefined)
+            .map(({ key, value }) => {
+              // value are all string because input are all text whatever the data model
+              // for now we cast value as number if they are number to help downstream algo to create appropriate data model
+              const valueAsNumber = toNumber(value);
+              return [key, valueAsNumber ? valueAsNumber : value];
+            }),
+        );
+        const coordinates = pick(data, "x", "y");
 
         // Create new node:
         if (isNew) {
           try {
-            createNode(id, allAttributes);
+            createNode(id, { itemData: allAttributes, technical: coordinates });
             select({ type: "nodes", items: new Set([id]), replace: true });
             notify({
               type: "success",
@@ -124,7 +122,7 @@ const useEditNodeForm = ({
         // Update existing node:
         else {
           try {
-            updateNode(id, allAttributes);
+            updateNode(id, { itemData: allAttributes, technical: coordinates });
             select({ type: "nodes", items: new Set([id]), replace: true });
             notify({
               type: "success",
diff --git a/packages/gephi-lite/src/core/graph/index.ts b/packages/gephi-lite/src/core/graph/index.ts
@@ -5,6 +5,7 @@ import {
   FilteredGraph,
   FiltersState,
   ItemData,
+  NodeCoordinates,
   Scalar,
   getEmptyAppearanceState,
 } from "@gephi/gephi-lite-sdk";
@@ -280,10 +281,13 @@ const deleteItemsAttribute: Producer<GraphDataset, [ItemType, string]> = (type,
     };
   };
 };
-const createNode: MultiProducer<[GraphDataset, SearchState], [string, Attributes]> = (node, attributes) => {
+const createNode: MultiProducer<
+  [GraphDataset, SearchState],
+  [string, { itemData: ItemData; technical: NodeCoordinates }]
+> = (node, { itemData = {}, technical }) => {
   return [
     (state) => {
-      const { data, position } = cleanNode(node, attributes);
+      const { data, position } = cleanNode(node, itemData, technical);
       state.fullGraph.addNode(node);
       const newNodeFieldModel = newItemModel<"nodes">("nodes", data, state.nodeFields);
       return {
@@ -297,7 +301,7 @@ const createNode: MultiProducer<[GraphDataset, SearchState], [string, Attributes
   ];
 };
 
-const createEdge: MultiProducer<[GraphDataset, SearchState], [string, Attributes, string, string, boolean]> = (
+const createEdge: MultiProducer<[GraphDataset, SearchState], [string, ItemData, string, string, boolean]> = (
   edge,
   attributes,
   source,
@@ -329,11 +333,15 @@ const createEdge: MultiProducer<[GraphDataset, SearchState], [string, Attributes
 };
 const updateNode: MultiProducer<
   [GraphDataset, SearchState, AppearanceState],
-  [string, Attributes, { merge?: boolean }?]
-> = (node, attributes, { merge } = {}) => {
+  [string, { itemData?: ItemData; technical?: NodeCoordinates; dynamic?: Attributes; merge?: boolean }]
+> = (node, { itemData = {}, technical, merge }) => {
   return [
-    (state) => {
-      const { data, position } = cleanNode(node, merge ? { ...state.nodeData[node], ...attributes } : attributes);
+    (state): GraphDataset => {
+      const { data, position } = cleanNode(
+        node,
+        merge ? { ...state.nodeData[node], ...itemData } : itemData,
+        technical || state.layout[node],
+      );
       const newNodeFieldModel = newItemModel<"nodes">("nodes", data, state.nodeFields);
       return {
         ...state,
@@ -343,16 +351,18 @@ const updateNode: MultiProducer<
       };
     },
     nodeIndex(node),
-    checkAppearanceAfterAttributeUpdate("nodes", node, attributes),
+    checkAppearanceAfterAttributeUpdate("nodes", node, itemData),
   ];
 };
 const updateEdge: MultiProducer<
   [GraphDataset, SearchState, AppearanceState],
-  [string, Attributes, { merge?: boolean; directed?: boolean }?]
-> = (edge, attributes, { merge, directed } = {}) => {
+  [string, { itemData?: ItemData; technical?: NodeCoordinates; dynamic?: Attributes; merge?: boolean }]
+> = (edge, { itemData = {}, merge, dynamic }) => {
+  const directed = dynamic?.directed;
+
   return [
-    (state) => {
-      const { data } = cleanEdge(edge, merge ? { ...state.edgeData[edge], ...attributes } : attributes);
+    (state): GraphDataset => {
+      const { data } = cleanEdge(edge, merge ? { ...state.edgeData[edge], ...itemData } : itemData);
       const newEdgeFieldModel = newItemModel<"edges">("edges", data, state.edgeFields);
 
       // Validate new edge direction:
@@ -373,8 +383,6 @@ const updateEdge: MultiProducer<
         fullGraph = newFullGraph;
       }
 
-      // Index the edge
-      searchActions.edgeIndex(edge);
       return {
         ...state,
         fullGraph,
@@ -383,7 +391,7 @@ const updateEdge: MultiProducer<
       };
     },
     edgeIndex(edge),
-    checkAppearanceAfterAttributeUpdate("edges", edge, attributes),
+    checkAppearanceAfterAttributeUpdate("edges", edge, itemData),
   ];
 };
 const updateItems: MultiProducer<[GraphDataset, SearchState], [ItemType, Set<string>, string, Scalar]> = (
diff --git a/packages/gephi-lite/src/core/graph/utils.ts b/packages/gephi-lite/src/core/graph/utils.ts
@@ -1,7 +1,7 @@
 import { NodeCoordinates, getEmptyGraphDataset, toNumber, toScalar } from "@gephi/gephi-lite-sdk";
 import Graph, { MultiGraph } from "graphology";
 import { Attributes } from "graphology-types";
-import { flatMap, forEach, isNil, isNumber, keyBy, keys, mapValues, omit, sortBy, uniq, values } from "lodash";
+import { flatMap, forEach, isNil, isNumber, keyBy, keys, mapValues, omit, pick, sortBy, uniq, values } from "lodash";
 
 import { ItemType, Scalar } from "../types";
 import { inferFieldType } from "./fieldModel";
@@ -24,16 +24,22 @@ export function getRandomNodeCoordinate(): number {
   return Math.random() * 1000;
 }
 
-export function cleanNode(_node: string, attributes: Attributes): { data: ItemData; position: NodeCoordinates } {
-  const x = toNumber(attributes.x);
-  const y = toNumber(attributes.y);
+export function cleanNode(
+  _node: string,
+  attributes: Attributes,
+  coordinates?: { x: Scalar; y: Scalar },
+): { data: ItemData; position: NodeCoordinates } {
+  // ensure coordinate format
+  const x = toNumber(coordinates?.x);
+  const y = toNumber(coordinates?.y);
 
   const position: NodeCoordinates = {
     x: typeof x === "number" ? x : getRandomNodeCoordinate(),
     y: typeof y === "number" ? y : getRandomNodeCoordinate(),
   };
 
-  const data: ItemData = mapValues(omit(attributes, "x", "y"), (v) => toScalar(v));
+  // cast attributes to scalar
+  const data: ItemData = mapValues(attributes, (v) => toScalar(v));
 
   return { data, position };
 }
@@ -60,7 +66,7 @@ export function initializeGraphDataset(
 
   const nodeAttributeValues: Record<string, Scalar[]> = {};
   graph.forEachNode((node, attributes) => {
-    const { data, position } = cleanNode(node, attributes);
+    const { data, position } = cleanNode(node, omit(attributes, ["x", "y"]), pick(attributes, ["x", "y"]));
 
     for (const key in data) {
       nodeAttributeValues[key] = nodeAttributeValues[key] || [];
diff --git a/packages/gephi-lite/src/views/dataPage/dataTable/DataCell.tsx b/packages/gephi-lite/src/views/dataPage/dataTable/DataCell.tsx
@@ -41,9 +41,9 @@ export const InlineEditDataCell: FC<{
         onChange={(value) => {
           const update = type === "nodes" ? updateNode : updateEdge;
           if (field.dynamic) {
-            update(id, {}, { merge: true, [field.id]: value });
+            update(id, { merge: true, dynamic: { [field.id]: value } });
           } else {
-            update(id, { [field.id]: value }, { merge: true });
+            update(id, { itemData: { [field.id]: value }, merge: true });
           }
         }}
       />
@@ -108,9 +108,9 @@ export const EditDataCell: FC<{
             onSubmit={(e) => {
               e.preventDefault();
               if (field.dynamic) {
-                update(id, {}, { merge: true, [field.id]: value });
+                update(id, { merge: true, dynamic: { [field.id]: value } });
               } else {
-                update(id, { [field.id]: value }, { merge: true });
+                update(id, { itemData: { [field.id]: value }, merge: true });
               }
               close();
             }}
