[dynamic atts] bug in selection

gephi · Feb 11, 2025 · c09bde8 · c09bde8
1 parent f8723fa
commit c09bde8
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 28 deletions.
diff --git a/packages/gephi-lite/src/components/Edge.tsx b/packages/gephi-lite/src/components/Edge.tsx
@@ -4,6 +4,7 @@ import { useTranslation } from "react-i18next";
 
 import { getItemAttributes } from "../core/appearance/utils";
 import { useDynamicItemData, useFilteredGraph, useGraphDataset, useVisualGetters } from "../core/context/dataContexts";
+import { mergeStaticDynamicData } from "../core/graph/dynamicAttributes";
 import { NodeComponent } from "./Node";
 
 export const EdgeComponent: FC<{
@@ -39,7 +40,7 @@ export const EdgeComponent: FC<{
 
 export const EdgeComponentById: FC<{ id: string }> = ({ id }) => {
   const graphDataset = useGraphDataset();
-  const dynamicItemData = useDynamicItemData();
+  const { dynamicNodeData, dynamicEdgeData } = useDynamicItemData();
   const visualGetters = useVisualGetters();
   const filteredGraph = useFilteredGraph();
 
@@ -48,25 +49,32 @@ export const EdgeComponentById: FC<{ id: string }> = ({ id }) => {
       "nodes",
       graphDataset.fullGraph.source(id),
       filteredGraph,
+      mergeStaticDynamicData(graphDataset.nodeData, dynamicNodeData)[graphDataset.fullGraph.source(id)],
       graphDataset,
-      dynamicItemData,
       visualGetters,
     );
     const target = getItemAttributes(
       "nodes",
       graphDataset.fullGraph.target(id),
       filteredGraph,
+      mergeStaticDynamicData(graphDataset.nodeData, dynamicNodeData)[graphDataset.fullGraph.target(id)],
+      graphDataset,
+      visualGetters,
+    );
+    const data = getItemAttributes(
+      "edges",
+      id,
+      filteredGraph,
+      mergeStaticDynamicData(graphDataset.edgeData, dynamicEdgeData)[id],
       graphDataset,
-      dynamicItemData,
       visualGetters,
     );
-    const data = getItemAttributes("edges", id, filteredGraph, graphDataset, dynamicItemData, visualGetters);
     return {
       ...data,
       source,
       target,
     };
-  }, [id, graphDataset, visualGetters, dynamicItemData, filteredGraph]);
+  }, [id, graphDataset, visualGetters, dynamicNodeData, dynamicEdgeData, filteredGraph]);
 
   return <EdgeComponent {...data} />;
 };
diff --git a/packages/gephi-lite/src/components/Node.tsx b/packages/gephi-lite/src/components/Node.tsx
@@ -4,6 +4,7 @@ import { useTranslation } from "react-i18next";
 
 import { getItemAttributes } from "../core/appearance/utils";
 import { useDynamicItemData, useFilteredGraph, useGraphDataset, useVisualGetters } from "../core/context/dataContexts";
+import { mergeStaticDynamicData } from "../core/graph/dynamicAttributes";
 
 export const NodeComponent: FC<{ label: ReactNode; color: string; hidden?: boolean }> = ({ label, color, hidden }) => {
   const { t } = useTranslation();
@@ -24,7 +25,15 @@ export const NodeComponentById: FC<{ id: string }> = ({ id }) => {
   const filteredGraph = useFilteredGraph();
 
   const data = useMemo(
-    () => getItemAttributes("nodes", id, filteredGraph, graphDataset, dynamicItemData, visualGetters),
+    () =>
+      getItemAttributes(
+        "nodes",
+        id,
+        filteredGraph,
+        mergeStaticDynamicData(graphDataset.nodeData, dynamicItemData.dynamicNodeData)[id],
+        graphDataset,
+        visualGetters,
+      ),
     [id, graphDataset, visualGetters, dynamicItemData, filteredGraph],
   );
 

diff --git a/packages/gephi-lite/src/core/appearance/utils.ts b/packages/gephi-lite/src/core/appearance/utils.ts
@@ -396,23 +396,19 @@ export function getItemAttributes(
   type: ItemType,
   id: string,
   filteredGraph: DatalessGraph,
+  itemData: StaticDynamicItemData,
   graphDataset: GraphDataset,
-  dynamicItemData: DynamicItemData,
   visualGetters: VisualGetters,
 ): { label: string | undefined; color: string; hidden?: boolean; directed?: boolean } {
-  const data =
-    type === "nodes"
-      ? { static: graphDataset.nodeData[id], dynamic: dynamicItemData.dynamicNodeData[id] }
-      : { static: graphDataset.edgeData[id], dynamic: dynamicItemData.dynamicEdgeData[id] };
   const renderingData = type === "nodes" ? graphDataset.nodeRenderingData[id] : graphDataset.edgeRenderingData[id];
   const getLabel = type === "nodes" ? visualGetters.getNodeLabel : visualGetters.getEdgeLabel;
   const getColor = type === "nodes" ? visualGetters.getNodeColor : visualGetters.getEdgeColor;
   const defaultColor = type === "nodes" ? DEFAULT_NODE_COLOR : DEFAULT_EDGE_COLOR;
   const hidden = type === "nodes" ? !filteredGraph.hasNode(id) : !filteredGraph.hasEdge(id);
 
   return {
-    label: (getLabel ? getLabel(data) : renderingData.label) || undefined,
-    color: getColor ? getColor(data, id) : renderingData.color || defaultColor,
+    label: (getLabel ? getLabel(itemData) : renderingData.label) || undefined,
+    color: getColor ? getColor(itemData, id) : renderingData.color || defaultColor,
     hidden,
     directed: graphDataset.metadata.type !== "undirected",
   };

diff --git a/packages/gephi-lite/src/views/graphPage/Selection.tsx b/packages/gephi-lite/src/views/graphPage/Selection.tsx
@@ -1,3 +1,4 @@
+import { StaticDynamicItemData } from "@gephi/gephi-lite-sdk";
 import { groupBy, isNil, toPairs } from "lodash";
 import { FC, ReactNode, useMemo } from "react";
 import { useTranslation } from "react-i18next";
@@ -22,7 +23,8 @@ import {
   useSelectionActions,
   useVisualGetters,
 } from "../../core/context/dataContexts";
-import { EdgeRenderingData, ItemData, NodeRenderingData } from "../../core/graph/types";
+import { mergeStaticDynamicData, staticDynamicAttributeLabel } from "../../core/graph/dynamicAttributes";
+import { EdgeRenderingData, NodeRenderingData } from "../../core/graph/types";
 import { useModal } from "../../core/modals";
 import { focusCameraOnEdge, focusCameraOnNode } from "../../core/sigma";
 import { DEFAULT_LINKIFY_PROPS } from "../../utils/url";
@@ -41,30 +43,35 @@ function SelectedItem<
 }: {
   type: T["type"];
   id: string;
-  data: ItemData;
+  data: StaticDynamicItemData;
   renderingData: T["data"];
   selectionSize?: number;
 }) {
   const { t } = useTranslation();
   const { openModal } = useModal();
 
   const graphDataset = useGraphDataset();
-  const dynamicItemData = useDynamicItemData();
   const visualGetters = useVisualGetters();
   const filteredGraph = useFilteredGraph();
   const { deleteItems } = useGraphDatasetActions();
   const { select, unselect } = useSelectionActions();
   const attributes = useMemo(
     () =>
       selectionSize === 1
-        ? [[t(`graph.model.${type}-data.id`) as string, id], ...toPairs(data), ...toPairs(renderingData)].filter(
-            ([, value]) => !isNil(value),
-          )
+        ? [
+            { label: t(`graph.model.${type}-data.id`) as string, value: id },
+            ...toPairs(data.static).map(([field, value]) => ({ label: field, value })),
+            ...toPairs(data.dynamic).map(([field, value]) => ({
+              label: staticDynamicAttributeLabel({ field, dynamic: true }),
+              value,
+            })),
+            ...toPairs(renderingData).map(([field, value]) => ({ label: field, value })),
+          ].filter(({ value }) => !isNil(value))
         : null,
     [data, id, renderingData, selectionSize, t, type],
   );
 
-  const item = getItemAttributes(type, id, filteredGraph, graphDataset, dynamicItemData, visualGetters);
+  const item = getItemAttributes(type, id, filteredGraph, data, graphDataset, visualGetters);
   let content: ReactNode;
   if (type === "nodes") {
     content = <NodeComponent label={item.label} color={item.color} hidden={item.hidden} />;
@@ -73,16 +80,16 @@ function SelectedItem<
       "nodes",
       graphDataset.fullGraph.source(id),
       filteredGraph,
+      data,
       graphDataset,
-      dynamicItemData,
       visualGetters,
     );
     const target = getItemAttributes(
       "nodes",
       graphDataset.fullGraph.target(id),
       filteredGraph,
+      data,
       graphDataset,
-      dynamicItemData,
       visualGetters,
     );
 
@@ -184,9 +191,9 @@ function SelectedItem<
       </h4>
       {attributes && (
         <ul className="ms-4 list-unstyled small">
-          {attributes.map(([key, value]) => (
-            <li key={key} className="overflow-hidden">
-              <span className="text-muted">{key}:</span>{" "}
+          {attributes.map(({ label, value }) => (
+            <li key={label} className="overflow-hidden">
+              <span className="text-muted">{label}:</span>{" "}
               <span className="text-ellipsis">
                 <ReactLinkify {...DEFAULT_LINKIFY_PROPS}>
                   {typeof value === "boolean" ? value.toString() : value}
@@ -207,10 +214,17 @@ export const Selection: FC = () => {
   const { type, items } = useSelection();
   const { select, reset } = useSelectionActions();
   const { nodeData, edgeData, nodeRenderingData, edgeRenderingData } = useGraphDataset();
-  const { dynamicNodeData } = useDynamicItemData();
+  const { dynamicNodeData, dynamicEdgeData } = useDynamicItemData();
   const { deleteItems } = useGraphDatasetActions();
   const filteredGraph = useFilteredGraph();
 
+  const mergedStaticDynamicItemData = useMemo(() => {
+    return mergeStaticDynamicData(
+      type === "nodes" ? nodeData : edgeData,
+      type === "nodes" ? dynamicNodeData : dynamicEdgeData,
+    );
+  }, [nodeData, dynamicNodeData, dynamicEdgeData, edgeData, type]);
+
   const ItemIcon = ItemIcons[type];
 
   const isVisible =
@@ -288,7 +302,8 @@ export const Selection: FC = () => {
               key={item}
               type={type}
               selectionSize={items.size}
-              data={type === "nodes" ? { ...nodeData[item], ...dynamicNodeData[item] } : edgeData[item]}
+              data={mergedStaticDynamicItemData[item]}
+              //TODO: add dynamic
               renderingData={type === "nodes" ? nodeRenderingData[item] : edgeRenderingData[item]}
             />
           )}
@@ -325,7 +340,7 @@ export const Selection: FC = () => {
                   key={item}
                   type={type}
                   selectionSize={items.size}
-                  data={type === "nodes" ? nodeData[item] : edgeData[item]}
+                  data={mergedStaticDynamicItemData[item]}
                   renderingData={type === "nodes" ? nodeRenderingData[item] : edgeRenderingData[item]}
                 />
               )}