How to use button on customized edge to update state?

[wilsoncwhuang]

Hi Community!

I created a graph using React Flow with a button on each edge. I customized both the edge and node to fit my requirements. However, I have questions about how to pass the data from customized edges or nodes to the file where the reactflow tag is located. For example, I want to update a specific state that is in the same file with the react flow tag. I tried useContext hook as below, but it seems not working. I guess it's because the customized edges are not wrapped in tag where I placed my Context Provider. Are there any way to solve this situation? Thank you.

Customized Edge

import { useCallback, useContext } from 'react';
import { useStore, getStraightPath, EdgeLabelRenderer } from 'reactflow';
import { getEdgeParams } from '../utils.js';
import { Box, useTheme } from "@mui/material";
import { tokens } from "../theme.js";
import { isDetailContext } from '../scenes/topology/index.jsx';

// Customize Edge Text to show connection ports
function EdgeLabel({ transform, label }) {

  const theme = useTheme();
  const colors = tokens(theme.palette.mode);

  return (
    
    <div
      style={{
        position: 'absolute',
        background: 'transparent',
        color: colors.grey[200],
        fontSize: 10,
        fontWeight: 700,
        transform,
      }}
      className="nodrag nopan"
    >
      {label}
    </div>
    
  );

}

const onEdgeClick = (evt, id) => {
  evt.stopPropagation();
  alert(`remove ${id}`);
};

console.log(isDetailContext)
// Customize edge to determine handle position automatically
function FloatingEdge({ id, source, target, markerEnd, style, data }) {

  const theme = useTheme();
  const colors = tokens(theme.palette.mode);

  const sourceNode = useStore(useCallback((store) => store.nodeInternals.get(source), [source]));
  const targetNode = useStore(useCallback((store) => store.nodeInternals.get(target), [target]));

  if (!sourceNode || !targetNode) {
    return null;
  }

  const { sx, sy, tx, ty, sourcePos, targetPos } = getEdgeParams(sourceNode, targetNode);

  // const [cx, cy] = getEdgeCenter({ sx, sy, tx, ty });

  const [edgePath, labelX, labelY] = getStraightPath({
    sourceX: sx,
    sourceY: sy,
    sourcePosition: sourcePos,
    targetPosition: targetPos,
    targetX: tx,
    targetY: ty,
  });

  return (

    <>
      <path
        id={id}
        className="react-flow__edge-path"
        d={edgePath}
        markerEnd={markerEnd}
        style={style}
      />
      {/* <BaseEdge id={id} path={edgePath} /> */}
      <EdgeLabelRenderer>
        {data.outLabel && (
          <EdgeLabel
            transform={`translate(-50%, 0%) translate(${sx + 10}px,${sy - 3}px)`}
            label={data.outLabel}
          />
        )}
        <Box
          sx={{
            "& .edgebutton": {
              width: 10,
              height: 12,
              background: colors.greenAccent[500],
              border: "1px solid black",
              cursor: "pointer",
              borderRadius: "20%",
              fontSize: 12,
              lineHeight: 1,
            },
            "& .edgebutton:hover": {
              boxShadow: "0 0 6px 2px rgba(0, 0, 0, 0.08)",
            }
          }}
        >
          <div
            style={{
              position: 'absolute',
              transform: `translate(-50%, -50%) translate(${labelX}px,${labelY}px)`,
              fontSize: 10,
              // everything inside EdgeLabelRenderer has no pointer events by default
              // if you have an interactive element, set pointer-events: all
              pointerEvents: 'all',
            }}
            className="nodrag nopan"
          >
            <button className="edgebutton" onClick={onEdgeClick}>
              
            </button>
          </div>
        </Box>

        {data.inLabel && (
          <EdgeLabel
            transform={`translate(-50%, -100%) translate(${tx - 10}px,${ty + 3}px)`}
            label={data.inLabel}
          />
        )}
      </EdgeLabelRenderer>
    </>

  );

}

export default FloatingEdge;

File where React FLow located

import { Box, Button, TextField, Select, MenuItem, InputLabel, FormControl, createFilterOptions , useTheme, Backdrop, Autocomplete } from "@mui/material";
import { useState, useEffect, useCallback, createContext } from "react";
import { Routes, Route } from 'react-router-dom';
import { BASE_URL } from "../../config";
import { tokens } from "../../theme";
import Header from "../../components/Header";
import BounceLoader from "react-spinners/BounceLoader";
import ReactFlow, { useNodesState, useEdgesState, addEdge, Background, Controls } from 'reactflow';
import 'reactflow/dist/style.css';
import { mockNodeData, mockEdgeData } from "../../data/mockTopoData";
import SwitchNode from '../../components/SwitchNode.jsx';
import ServerNode from '../../components/ServerNode.jsx';
import FloatingEdge from '../../components/FloatingEdge.jsx';
import FloatingConnectionLine from '../../components/FloatingConnectionLine.jsx';
import { createNodesAndEdges } from '../../utils.js';

export const isDetailContext = createContext();

const edgeTypes = {
    floating: FloatingEdge,
};

const nodeTypes = {
    switch: SwitchNode,
    server: ServerNode,
}

const Topology = () => {

    const theme = useTheme();
    const colors = tokens(theme.palette.mode);

    const connectionLineStyle = { stroke: '#fff' };
    const snapGrid = [20, 20]; 
    const defaultViewport = { x: 0, y: 0, zoom: 1.5 };
    const [nodes, setNodes, onNodesChange] = useNodesState();
    const [edges, setEdges, onEdgesChange] = useEdgesState();

    const [isLoading, setIsLoading] = useState();

    const onConnect = useCallback(
        (params) =>
            setEdges((eds) => addEdge({ ...params, animated: true, style: { stroke: '#fff' } }, eds)),
        []
    );

    useEffect(() => {
        setIsLoading(true);
        fetch(`${BASE_URL}/topology/get_topologies`)
        .then(res => res.json())
        .then(data => {
            setNodes(data[0])
            setEdges(data[1])
        })
        .catch(err => console.log(err))
        .finally(() => {
            setIsLoading(false)
        });
    }, []);

    const [isDetail, setIsDetail] = useState(false);
    console.log(isDetail);

    return (
    <isDetailContext.Provider value = {isDetail}>
        <Box ml={2} height="90%">
            <Header title="Topology" subtitle="Network diagram for current topology" /> 
            <Box height="85%">
                <ReactFlow
                    nodes={nodes}
                    edges={edges}
                    onNodesChange={onNodesChange}
                    onEdgesChange={onEdgesChange}
                    onConnect={onConnect}
                    connectionLineStyle={connectionLineStyle}
                    snapToGrid={true}
                    snapGrid={snapGrid}
                    defaultViewport={defaultViewport}
                    fitView
                    attributionPosition="bottom-left"
                    edgeTypes={edgeTypes}
                    nodeTypes={nodeTypes}
                    connectionLineComponent={FloatingConnectionLine}
                >
                    <Controls />
                    <Background gap={15} color={colors.grey[100]} variant="dots" />
                </ReactFlow>
            </Box>
        </Box>
    </isDetailContext.Provider>     

    )

}

export default Topology;

[bcakmakoglu]

Doesn't look like you're using the context correctly, you might wanna re-check the React docs for Context =)

You wanna start off with creating the context, which you did, so that part is fine, although a context should be capitalized like export const LevelContext = createContext(1).
After that you setup the Provider, which you also did - so far so good :)

After having created the context and setting up the provider you need to use the context.
Simply doing console.log(isDetailContext) won't yield the log you're probably looking for.
You have to call useContext(Context) to get the provided value(s).

const level = useContext(LevelContext);

// now you can use the provided value from `LevelContext`
console.log(level) // logs 1

Of course you don't need to use a context for this use-case, you could

1. Setup a different form of state management (like Zustand for example) that can be used from your custom edge
2. Pass a setter function to your custom components with the data object

{
	id: 'e1-2',
	source: '1',
	target: '2',
	data: {
		doSomething: () => { /* ... */ }
	}
}

[Pankaj-birla]

The above screenshot gave you some idea about my application. As you saw the two node "Node1" , "Node2" and in node "Node 2" the button I want to be slightly towards left to the markerEnd. And in node "Node1" due to the {targetY - 10} the button hides behind that node, so in this case the same above position I want ,i.e., below the markerEnd.

[bcakmakoglu]

Try a z-index ^^

[Pankaj-birla]

If it's just about z-indexing, add zIndex: 9999 or something to the edge label and you're good to go.

      <EdgeLabelRenderer>
        <div
          style={{
            zIndex: 9999,
            transform: `translate(-50%, -100%) translate(${targetX}px,${targetY - 10}px)`,
          }}
          className="edge-label-renderer__custom-edge nodrag nopan"
        >
          {data.label}
        </div>
      </EdgeLabelRenderer>

No, I want the button should be placed exactly at this points regardless of node dragging just before the marker-end, I'm getting the center position correct using the labelX & labelY instead of targetX & targetY but I don't want the button in the center of the edge, it should be at extreme end of the path before the marker-end, Hope this helps you to understand my problem statement .So how can I achieve this ?

[bcakmakoglu]

You want the label towards the target, which is where the label is in the sandbox (the yellow one):

If you drag the node around the label adjusts for the new target position:

add a z-index so the label always stays on top regardless if another node is dragged on its position:

What else is the problem? Seems like all the requirements are met according to your description.

[Pankaj-birla]

Try a z-index ^^

using z-index will shows the button on top of "Node2" node, but the position still remains same