graphs

function GraphBody({
  canvasSize,
  gridLines,
  curves,
  markers,
  intersectionDots,
  xFn,
  yFn,
  yTicks,
  densityMap,
}) {
  const [pathNodes, setPathNodes] = useState();
  console.log("rendered");

  // TODO: Might need to draw intersection dots between curve and marker
  return (
    <>
      {gridLines && <GridLines ticks={yTicks} />}
      <svg
        viewBox={`0 0 ${canvasSize.width} ${canvasSize.height}`}
        style={{
          position: "absolute",
          top: 0,
          left: 0,
        }}
      >
        {curves.map((curve) => (
          <Curve
            key={curve.name}
            points={padData(densityMap[curve.name], xFn)}
            xFn={xFn}
            yFn={yFn}
            segments={curve.segments}
            fillColor={curve.fillColor}
            strokeColor={curve.strokeColor}
            canvasSize={canvasSize}
            ref={(el) => {
              console.log(pathNodes, curve.name);
              if (!pathNodes[curve.name]) {
                console.log("update");
                setPathNodes((prevState) => ({
                  ...prevState,
                  [curve.name]: el,
                }));
              }
            }}
          />
        ))}
      </svg>
      {markers.map(({ position, label, color }) => (
        <Marker
          key={position}
          position={position}
          label={label}
          color={color}
        />
      ))}
      {intersectionDots.map(({ curveName, position, color }) => {
        const node = pathNodes[curveName];

        if (!node) return null;

        return (
          <IntersectionDot
            position={position}
            color={color}
            pathNode={node}
            canvasWidth={canvasSize.width}
            key={`${curveName}.${position}`}
          />
        );
      })}
    </>
  );
}