How to change arrow size using react-sigma library?

Question

I am trying to change graph's edge arrow size in React application using react-sigma library. Arrow size is so small that it is very hard to see it without zooming in. It seems that changing minArrowSize attribute in SigmaContainer settings does not work anymore in v2, it only worked in v1.

I have seen this answer https://stackoverflow.com/a/74287630/23819306 that might be helpful but I am not sure how to implement it in my React application. It seems that library code is being edited but I am only importing that library in my code. How to implement changes to react-sigma library?

This is code of my main component if it helps:

import React, { useState } from 'react';
import { SigmaContainer } from "@react-sigma/core";

import data from '../../newData.json';
import MyGraph from '../MyGraph/MyGraph';

export default function GraphRepresentation() {
  const [hoveredNode, setHoveredNode] = useState(null);
  const [pathData, setPathData] = useState(null);
  const [filters, setFilters] = useState({
    paths: {},
    nodes: {},
    edges: {},
    options: { explicitEdges: false, extraNodes: false, globalMode: true },
    explicitEdges: {},
    overlappingEdges: {}
  });

  return (
    <SigmaContainer
      style={{ height: "100vh", width: "100vw" }}
      settings={{
        defaultEdgeType: "arrow",
        zIndex: true
      }}
    >
      <MyGraph data={data} onGraphReady={(data) => {
        setFilters(data.filters);
        setPathData(data.pathData);
      }} />
      <Controls />
      <Panels filters={filters} setFilters={setFilters} pathData={pathData} />
      <Controllers hoveredNode={hoveredNode} setHoveredNode={setHoveredNode} filters={filters} />
    </SigmaContainer>
  );
};

Answer 1

To change the arrow size in the React application using the react-sigma library, you need to directly manipulate the Sigma.js instance to apply custom settings. Here's how you can do it:

1. Extend Sigma.js with Custom Settings: You need to create a custom Sigma.js component that extends the functionality of Sigma.js and allows you to apply custom settings.

2. Access Sigma.js Instance: Within this custom component, you can access the Sigma.js instance and apply custom settings such as arrow size.

Here's how you can implement these steps:

import React, { useState, useRef, useEffect } from 'react';
import { Sigma, EdgeShapes, ForceAtlas2, NOverlap, RelativeSize } from 'react-sigma';
import sigma from 'sigma';

// Custom Sigma Component
function MyCustomSigma({ data }) {
  const sigmaRef = useRef(null);

  useEffect(() => {
    if (sigmaRef.current) {
      // Access Sigma instance
      const s = sigmaRef.current.getInstances()[0];
      
      // Apply custom settings
      s.settings('edgeLabelSize', 5); // Example: Change arrow size

      // Refresh Sigma instance
      s.refresh();
    }
  }, [data]);

  return (
    <Sigma renderer="canvas" settings={{ enableEdgeHovering: true }} ref={sigmaRef}>
      <EdgeShapes default="arrow" />
      <ForceAtlas2 worker barnesHutOptimize barnesHutTheta={0.6} />
      <NOverlap gridSize={20} maxIterations={50} />
      <RelativeSize initialSize={15} />
    </Sigma>
  );
}

// Main Component
export default function GraphRepresentation() {
  const [data, setData] = useState(null);

  useEffect(() => {
    // Fetch your data or set it as you're doing
    setData(yourDataHere);
  }, []);

  return (
    <div style={{ height: '100vh', width: '100vw' }}>
      {data && <MyCustomSigma data={data} />}
    </div>
  );
}

In this example:

• We create a custom Sigma component MyCustomSigma.
• Inside this component, we use useRef to get a reference to the Sigma.js instance.
• We use useEffect to apply custom settings whenever the data changes.
• Within the useEffect, we access the Sigma instance using getInstances() method.
• We apply custom settings using settings() method.
• Finally, we refresh the Sigma instance to reflect the changes.

Make sure to replace 'yourDataHere' with your actual graph data. This example assumes you're using React hooks for managing state. Adjust the code as per your application structure.