[Appearance] refacto appearnceGetter

- removed unecessary nodeId as param
- /!\ edgeId is still required for getColor on edge when using source/target

Author: paulgirard

src/core/appearance/types.ts

@@ -83,9 +83,9 @@ export interface AppearanceState {
   edgesLabelSize: LabelSize;
 }
 
-export type SizeGetter = (itemId: string, data: ItemData) => number;
-export type ColorGetter = (itemId: string, data: ItemData) => string;
-export type LabelGetter = (itemId: string, data: ItemData) => string | null;
+export type SizeGetter = (data: ItemData) => number;
+export type ColorGetter = (data: ItemData, edgeId?: string) => string;
+export type LabelGetter = (data: ItemData) => string | null;
 
 /**
  * This state contains the visual getters, i.e. the functions to get a node or

src/core/appearance/utils.ts

@@ -134,7 +134,7 @@ export function makeGetSize<
       });
       const delta = max - min || 1;
       const ratio = (sizesDef.maxSize - sizesDef.minSize) / delta;
-      getSize = (_itemId: string, data: ItemData) => {
+      getSize = (data: ItemData) => {
         const value = getValue(toNumber(data[sizesDef.field]));
 
         if (typeof value === "number" && !isNaN(value) && Math.abs(value) !== Infinity) {
@@ -162,10 +162,10 @@ export function makeGetColor<
   const itemsValues = itemType === "nodes" ? nodeData : edgeData;
   const colorsDef = itemType === "nodes" ? nodesColor : edgesColor;
 
-  let getColor: ((itemId: string, data: ItemData) => string) | null = null;
+  let getColor: ColorGetter | null = null;
   switch (colorsDef.type) {
     case "partition":
-      getColor = (_itemId: string, data: ItemData) => {
+      getColor = (data: ItemData) => {
         const value = data[colorsDef.field] as string;
         return value in colorsDef.colorPalette ? colorsDef.colorPalette[value] : colorsDef.missingColor;
       };
@@ -184,7 +184,7 @@ export function makeGetColor<
       const colorScale = chroma
         .scale(colorsDef.colorScalePoints.map((point) => point.color))
         .domain(colorsDef.colorScalePoints.map((csp) => csp.scalePoint));
-      getColor = (_itemId: string, data: ItemData) => {
+      getColor = (data: ItemData) => {
         const value = toNumber(data[colorsDef.field]);
         if (typeof value === "number") {
           return colorScale((value - min) / delta).hex();
@@ -201,15 +201,15 @@ export function makeGetColor<
     const getNodeColor = (getters as VisualGetters | undefined)?.getNodeColor;
     switch ((colorsDef as EdgeColor).type) {
       case "source":
-        getColor = (edgeId: string) => {
+        getColor = (_: ItemData, edgeId?: string) => {
           const node = fullGraph.source(edgeId);
-          return getNodeColor ? getNodeColor(node, nodeData[node]) : DEFAULT_NODE_COLOR;
+          return getNodeColor && edgeId && node ? getNodeColor(nodeData[node]) : DEFAULT_NODE_COLOR;
         };
         break;
       case "target":
-        getColor = (edgeId: string) => {
+        getColor = (_: ItemData, edgeId?: string) => {
           const node = fullGraph.target(edgeId);
-          return getNodeColor ? getNodeColor(node, nodeData[node]) : DEFAULT_NODE_COLOR;
+          return getNodeColor && edgeId && node ? getNodeColor(nodeData[node]) : DEFAULT_NODE_COLOR;
         };
         break;
     }
@@ -236,7 +236,7 @@ export function makeGetLabel<
       getLabel = () => labelsDef.value;
       break;
     case "field":
-      getLabel = (_itemId: string, data: ItemData) => {
+      getLabel = (data: ItemData) => {
         const label = toString(data[labelsDef.field]);
         return typeof label === "string" ? label : labelsDef.missingLabel;
       };
@@ -267,24 +267,24 @@ export function applyVisualProperties(graph: SigmaGraph, dataset: GraphDataset,
   graph.forEachNode((node) => {
     const attr: Partial<NodeRenderingData> = {};
     if (getters.getNodeSize) {
-      attr.size = getters.getNodeSize(node, dataset.nodeData[node]);
+      attr.size = getters.getNodeSize(dataset.nodeData[node]);
       // store raw size to compute label size independent to zoom
       attr.rawSize = attr.size;
     }
-    if (getters.getNodeColor) attr.color = getters.getNodeColor(node, dataset.nodeData[node]);
-    if (getters.getNodeLabel) attr.label = getters.getNodeLabel(node, dataset.nodeData[node]);
+    if (getters.getNodeColor) attr.color = getters.getNodeColor(dataset.nodeData[node]);
+    if (getters.getNodeLabel) attr.label = getters.getNodeLabel(dataset.nodeData[node]);
     graph.mergeNodeAttributes(node, attr);
   });
 
   graph.forEachEdge((edge) => {
     const attr: Partial<EdgeRenderingData> = {};
     if (getters.getEdgeSize) {
-      attr.size = getters.getEdgeSize(edge, dataset.edgeData[edge]);
+      attr.size = getters.getEdgeSize(dataset.edgeData[edge]);
       // store raw size to compute label size independent to zoom
       attr.rawSize = attr.size;
     }
-    if (getters.getEdgeColor) attr.color = getters.getEdgeColor(edge, dataset.edgeData[edge]);
-    if (getters.getEdgeLabel) attr.label = getters.getEdgeLabel(edge, dataset.edgeData[edge]);
+    if (getters.getEdgeColor) attr.color = getters.getEdgeColor(dataset.edgeData[edge], edge);
+    if (getters.getEdgeLabel) attr.label = getters.getEdgeLabel(dataset.edgeData[edge]);
     graph.mergeEdgeAttributes(edge, attr);
   });
 }

src/views/graphPage/Selection.tsx

@@ -33,8 +33,8 @@ function getItemAttributes(
   const hidden = type === "nodes" ? !filteredGraph.hasNode(id) : !filteredGraph.hasEdge(id);
 
   return {
-    label: (getLabel ? getLabel(id, data) : renderingData.label) || undefined,
-    color: getColor ? getColor(id, data) : renderingData.color || defaultColor,
+    label: (getLabel ? getLabel(data) : renderingData.label) || undefined,
+    color: getColor ? getColor(data, id) : renderingData.color || defaultColor,
     hidden,
   };
 }