I am pushing edges in my react-flow setup. Suppose the edges are crossing each other; currently my edge labels render at the midpoint of an edge, so if the edges cross each other they render on top of each other. The user is not able to see the labels as they are stacked on-top of each other.

setEdges((eds) =>
    eds.map((edge) => {
      const tranformation_logic_from_data =
        data[edge.target].columns[edge["targetHandle"].split("-")[1]];

      if (tranformation_logic_from_data) {
        logic = tranformation_logic_from_data.transformation_logic;
      } else {
        logic = "";
      }

      return {
        ...edge,
        style: {
          ...edge.style,
          /*    stroke:
          lineageType === "Variable"
            ? "#ccc"
            : connectorColortoggle
            ? operationColorMap[
                data[edge.target].table_transformation_logic
              ] || "#000"
            : "#aaa", */
          stroke: "#ccc",
          strokeWidth:
            lineageType === "Variable" ? 4 / zoomLevel : 4 / zoomLevel,
          strokeDasharray: lineageType === "Variable" ? "" : "1, 8",
        },
        label: variableConnectorTextToggle ? logic : "",
        labelStyle: {
          fill: "#000",
          fontWeight: 500,
          fontSize: 20,
        },
        labelBgPadding: [30, 10],
        labelBgStyle: { fill: "white", stroke: "#ccc", strokeWidth: 1 },
        labelShowBg: true,
        labelBgBorderRadius: 8,
      };
    })
  );

If I remove the background of a label from the code: "labelShowBg: false"

Now we see how some labels have other labels stacked under them

Is there any solution to this problem, I have tried figuring out edge length and setting label location based on that, but if edge lengths are same, it creates an issue there

If label background is on, the lower-level edge labels are not visible

Edit: I have also tried using EdgeLabelRenderer , to try to make a sort of collision detection system, but no luck using that also