reaviz / reagraph Goto Github PK

If the following code:

export const Circular = () => (
  <GraphCanvas
    nodes={[{
      id: '1',
      label: '1'
    }]}
    edges={[{
      source: '1',
      target: '1',
      id: '1-1',
      label: '1-1'
    }]}
  />
);

renders no edge which is not expected.

Example Code: https://vasturiano.github.io/3d-force-graph/example/curved-links/

Add helpers for saving a graph as an image.

https://stackoverflow.com/questions/15558418/how-do-you-save-an-image-from-a-three-js-canvas

A very odd bug: input element can't accept typing input when using useSelection hook.

Demo: https://codesandbox.io/s/reagraph-example-forked-hmdomr?file=/src/App.tsx

Add an example of a interactive editor for the graph ( upload dot files, etc ).

The force layout is acting weird when you add a new node with no connection. That node is pretty far away from the others.

https://observablehq.com/@d3/disjoint-force-directed-graph

Example: https://www.screencast.com/t/tLKTpnSAWPSt

I am from China, is trying this awesome libary to test some idea, but meet a problem: seems it can not render Chinese text as label.

The label visibility is not working too great. In this screenshot, there is no reason why most ( if not all ) should not be shown.

The current logic is not that great - https://github.com/reaviz/reagraph/blob/master/src/utils/visibility.ts. Ideally this would understand the position relativity of other nodes and only shown if there wasn't a lot of 'overlap'.

Need the ability to color an icon.

I tried this but it doens't render correctly:
https://gist.github.com/amcdnl/2bbe3e6cbe6ab2f738c8e6a45441cb73

Describe the bug

Is Reagraph not able to display characters in other languages? I'm not really sure how the canvas renders text, but if it's UTF-8 it should've worked on the Georgian language, but puts boxes instead.

Steps to Reproduce the Bug or Issue

1. Name any node "ტესტი"
2. It will show up as boxes

Expected behavior

It should display the Georgian characters, puts boxes instead.

Screenshots or Videos

Platform

• Reagraph Version: [e.g. 1.0.0]
• OS: [e.g. macOS, Windows, Linux]
• Browser: [e.g. Chrome, Safari, Firefox]
• NodeJS version: ...

Your Example Website or App

No response

Additional context

No response

Add the ability to have edge labels aligned to the edge like this ( Not on top of the line though - just to the side of it ).

This would be a new flag on the canvas like edgeLabelPosition: 'inline' | 'beside' ( these seem like bad names just thinking outloud here).

This might get interesting if you have curved edges though - #12

The pan control demos aren't working

Add the ability to group/cluser nodes based on a data attribute. This will likely be isolated to only some layouts.

• https://bl.ocks.org/mbostock/7882658
• https://bl.ocks.org/mbostock/7881887
• https://github.com/ericsoco/d3-force-cluster/blob/master/lib/forceCluster.js

Add the ability to show an arrow on both ends of an edge when it has the 2 links back and forth to each other.

The path finding is not highlighting like one would expect.

Currently it looks like:

It should be like:

So it would be defined as:

• Node 1 and Node 9 should be highlighted w/ rings
• Node 2 and Node 4 should be highlighted
• Only edges in the path should be highlighted ( Example Node 2 > Node 5 would not be highlighted )

Add the ability to drag and pin a node.

https://observablehq.com/@d3/sticky-force-layout

Add the ability to lasso select a variety of nodes.

https://observablehq.com/@d3/d3-polygonhull

The prop drilling is slowing down performance. We need to move to zustand ( because it has nice ability for transient updates ).

The entry animation is a bit too slow.

When you hover a label that has a ellipsis we might want to think about if we want expand all the text.

Add the ability to navigate the nodes using the keyboard. This might only apply for some layouts.

https://observablehq.com/@d3/hierarchy-traversal-animated

Feature Request

A option to nest nodes inside of other nodes using "Combos".
I've only seen 2 libraries that allow this:

• Keylines/Regraph (required paid license, close source):
  • https://cambridge-intelligence.com/category/regraph/combos-regraph/
• G6:
  • https://g6.antv.vision/en/docs/manual/middle/elements/combos/defaultCombo
• Ogma by Linkcurious (required paid license, close source)
  • https://linkurious.com/blog/ogma-3-0-visual-grouping-out-in-beta/
  • https://doc.linkurio.us/ogma/latest/examples/visual-grouping.html
• Cisco NextUI (unmaintained since 2017): Cisco NextUI Node sets
  example

This Gif is from the regraph library linked above

This is from Linkcurious Ogma library

What is the motivation / use case for changing the behavior?

• Combos toggle / hide detail on demand
• visually group nodes and links, reduces complexity of the graph for user's navigating the data
• offers exploratory method of navigating a data set / graph

References

• Keylines/Regraph Combos
• G6 Combo
  • Docs
  • Code
• Ogma
  • Docs: https://doc.linkurio.us/ogma/latest/examples/visual-grouping.html
  • Blog: https://linkurious.com/blog/ogma-3-0-visual-grouping-out-in-beta/

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] Performance issue
[X] Feature request
[ ] Documentation issue or request
[ ] Other... Please describe:

Current behavior

I've got a storybook plugin which displays Recoil trees both in the graph & in a list, currently if the user clicks a node on the graph they get a nice zoom in focus animation to show the node - but if they click it in the list the node is selected (via setSelections) but the graph doesn't zoom to focus on it.

Expected behavior

Ideally I'd like the same focusing action to occur regardless of if the user clicks the node in the graph or in the list.

Also it'd be really nice to have a way to trigger the hover effect.

Could be there's something returned by useSelection that'd do this already but I've not spotted it

What is the motivation / use case for changing the behavior?

To allow the nice graph features to be used programmatically as well.

Arrows have visual defects sometimes.

When you drag fast and the cursor moves outside, the highlighting stops. likely just need to use the use-gesture hook for this instead of doing it manually.

https://www.screencast.com/t/RERSNgIf7rbK

ngraph vs graphology

Not urgent, just wanted to share graphology and get your thoughts on it compared to ngraph for reagraph's underlying graph data structure 😄

grapology highlights

Compared to ngraph,graphology supports a more rich out of the box API for the graph:

• comprehensive standard library of algorithms, graph generators, layouts traversals , event listeners & utility functions
  
• layout algorithms offer sync and async versions (using web workers)
  The library is used by other more recent graph libraries like sigmajs and pixi-graph for the graph backend.

Besides the rich API, another strong aspect for the library is that its a community driven effort to help graph libraries share layouts, algorithms etc. In practice this means someone using sigmajs for example could move to pixi-graphor even reagraph (if it used graphology) since they share the same underlying graph structure
Jan Zak, talks about graphology in this YouTube video here

Centralized documentation

• Ngraph's packages are all scattered across different individual repos. Whereas's graphology has everything in one mono-repo
• For those wanting to customize reagraph, the centralized documentation with graphology is a big DX & productivity win

Make lasso + drag work together. Likely have to refactor how a drag is handled though.

When there is a offset ( such as margin ) when you drag, the cursor offset is wrong.

It needs to take into account canvas dom element offset in the page like I did here: https://github.com/reaviz/reaflow/blob/master/src/utils/helpers.ts#L51-L58

You can reproduce it in this minimal example which uses the same logic: https://codesandbox.io/s/react-three-draggable-gesture-offset-bug-oumtsn?file=/src/App.js

Code: https://github.com/reaviz/reagraph/blob/master/src/utils/useDrag.ts#L47

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Other... Please describe:

Current behavior

Fails to load with

Expected behavior

It works with an example component

Minimal reproduction of the problem with instructions

• Use Create-react-app to create basic app
• npm i reagraph --save
• Modify App.js to dump in example

import logo from './logo.svg';
import './App.css';
import React from 'react';
import { GraphCanvas } from 'reagraph'

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
        <GraphCanvas
    nodes={[
      {
        id: "n-1",
        label: "1"
      },
      {
        id: "n-2",
        label: "2"
      },
      {
        id: "n-3",
        label: "3"
      },
      {
        id: "n-4",
        label: "4"
      }
    ]}
    edges={[
      {
        id: "1->2",
        source: "n-1",
        target: "n-2",
        label: "Edge 1-2"
      },
      {
        id: "1->3",
        source: "n-1",
        target: "n-3",
        label: "Edge 1-3"
      },
      {
        id: "1->4",
        source: "n-1",
        target: "n-4",
        label: "Edge 1-4"
      }
    ]}
  />
      </header>
    </div>
  );
}

export default App;

• npm start
• observe failure in console while nothing is rendered

What is the motivation / use case for changing the behavior?

Environment

Libs:
- react version: ^18.1.0
- realayers version: ^1.0.2


Browser:
- [x] Chrome (desktop) version 102.0.5005.63
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: v18.2.0
- Platform:  Windows

Others:

We probably need to add a background ( optionally ) via the theme for edge labels so you can read them easier:

like they did here:

Describe the bug

If you create a brand new React app using 'create-react-app' and try and use Reagraph, you get the following error in browser console:

camera-controls.module.js:922 Uncaught TypeError: THREE.Vector3 is not a constructor
    at CameraControls.install (camera-controls.module.js:922:1)
    at index.js:934:1
    at index.js:2:1
    at ./node_modules/reagraph/dist/index.js (index.js:5:1)
    at options.factory (react refresh:6:1)
    at __webpack_require__ (bootstrap:24:1)
    at fn (hot module replacement:62:1)
    at ./src/App.tsx (bundle.js:18:66)
    at options.factory (react refresh:6:1)
    at __webpack_require__ (bootstrap:24:1)

It seems as if the camera-controls doesn't have a loaded Three library and THREE.Vector3 etc is undefined.

Steps to Reproduce the Bug or Issue

1. Follow steps to create a react app using https://github.com/facebook/create-react-app. Command I used was: npx create-react-app graph-test --template typescript
2. Install Reagraph npm i reagraph --save
3. Copy over basic example of Reagraph to App.tsx. Here is my App.tsx:

import React from 'react';
import './App.css';
import {GraphCanvas} from "reagraph";

function App() {
  return (
    <GraphCanvas
      nodes={[
        {
          id: '1',
          label: '1'
        },
        {
          id: '2',
          label: '2'
        }
      ]}
      edges={[
        {
          id: '1->2',
          source: 'n-1',
          target: 'n-2',
          label: 'Edge 1-2'
        }
      ]}
    />
  );
}

export default App;

4. Run the app using npm start (or yarn start)

Expected behavior

As a user I would expect to see the example Reagraph graph
but I get an error in the browser dev console and no graph

Screenshots or Videos

Platform

• Reagraph Version: 4.1.0
• OS: Windows 10 (also tested on MacOS 12.1)
• Browser: Brave (latest)
• NodeJS version: 16.14.2

Your Example Website or App

No response

Additional context

No response

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[X] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Other... Please describe:

Current behavior

I've managed to replicate it here where the node is almost entirely off screen (it happens at the very end of the video but I've included examples of it working fine while I tried to get it to happen since that should help narrow it down)

The node is being selected, but it's not focusing properly.

Expected behavior

The node is focused as normal.

Minimal reproduction of the problem with instructions

I'm struggling to get it to happen in the demo storybook entries, but my use has

          cameraMode="rotate"
          layoutType="treeTd3d"

Which might be contributing to it.

What is the motivation / use case for changing the behavior?

All nodes should behave the same when clicked

Environment

Libs:
- react version: 18.1.0
- reagraph version: 1.0.2


Browser:
- [X] Chrome (desktop) version 102
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX

Add the ability to have an icon inside a sphere like this:

I realize that is 2d and this is a 3d canvas but worth a shot.

Add a hierarchal layout ( tree top-down, tree left-right ) types. Something like this:

I'm submitting a...

• Regression

Current behaviour

I've just updated to the latest version(v2.0.9) from v1.0.3, and now data sets which were working in v1.0.3 are running into an error.

It's getting into the graph.forEachNode section but some nodes seem to have an undefined node.data, I've not been able to see a pattern in which nodes have undefined data and which have normal data.

It does appear to be happening when I change the nodes / edges props after load, but that could be a coincidence.

If you want the data that causes it I can export a JSON containing the nodes & edges after sanitising it a little.

Expected behaviour

Graph shows like the v1.0.3 did (but better)

Minimal reproduction of the problem with instructions

Nodes / Edges can be supplied if needed - I've only begun to look into it & haven't noticed a pattern yet

Environment

Libs:
- react version: 18.2.0
- reagraph version: 2.0.9


Browser:
- [x] Chrome (desktop) version 103

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Other... Please describe:

Current behavior

Expected behavior

Disable color on mouse out even it's outside the canvas

The current Data / Performance example is slow. Make it better.

Likely lies in the edges but also should look at this: https://docs.pmnd.rs/react-three-fiber/advanced/pitfalls#never-bind-fast-state-reactive

Migrate to framer-motion since it supports 3d animations now.

Current Issues:

• Line points don't animate correctly ( framer/motion#1532 )
• Rings aren't scaled correctly

Branch: https://github.com/reaviz/reagraph/tree/framer-motion

Describe the bug

When a lots of edges that meet the same target and its hard to understand whats going on. Possible solution might be combining edges from multiple nodes into one arrow that points at the node but that is difficult.

Steps to Reproduce the Bug or Issue

Goto https://reagraph.dev/?path=/story/demos-use-cases--cyber-security

Expected behavior

Its easier to understand.

Screenshots or Videos

Platform

• OS: [e.g. macOS, Windows, Linux]
• Browser: [e.g. Chrome, Safari, Firefox]
• Version: [e.g. 91.1]
• NodeJS version: ...

Your Example Website or App

Additional context

No response

Add the ability for the system to auto recommend a layout based on density/nodes/etc.

If you are panning or rotating ( aka camera control operations ), we should disable selection because its distracting having the cursor highlighting different things.

Need the ability to click on an arrow

Make a mini-map add on that would be in the corner of the screen.

What do you think about enabling the Github Discussions tab for this repo
People can ask questions, get help, share solutions here (hopefully) 😄

Example Discussions tab for react-query repo:

• https://github.com/TanStack/query/discussions

The min/max size clamps should also take into account relativity of the value. So for example, if clustering calculated it should be 100 out of 200 but the max size is 50 everything over 100 would be the same size despite the delta.

This is easy to do but will require post processing since you need to calculate all the sizes and then run this ( which can use d3-scale to do this ).

Add an example of npm graph depedencies - https://github.com/anvaka/npmgraphbuilder

Describe the bug

Hi there!
A React component passed as the contextMenu prop is being rendered, when triggered, outside the global App tree. Making it appear as another root of the app and not being able to reach any of the parent contexts/context providers. I believe it's a major limitation, making it impossible for the context menu to be a full-fledged React component.

Steps to Reproduce the Bug or Issue

1. Go to the sandbox link.
2. Follow the 'go to example' link.
3. Try to open up the context menu of a node
4. Experience an error

(Switch from ContextMenu to ContextMenu_safe to see the working menu)

Expected behavior

As a user, I would expect the Context Menu component not to fall outside the global App tree/flow, thus being unable to consume any of the context providers.

Screenshots or Videos

Platform

• Reagraph Version: 4.1.0
• OS: macOS latest
• Browser: Chrome latest

Your Example Website or App

https://codesandbox.io/s/damp-smoke-dnn8d6?file=/src/index.graph.tsx

Additional context

No response

Add the ability to curve the edges/links between the node.

Make something like this in src/utils/position.ts ( this only kinda works ):

export const calculateCurve = ({ from, to }) => {
  const midpoint = getMidPoint({ from, to });
  const { distance } = calcDistance({ from, to });

	let multipleVal = Math.pow(midpoint.x, 2);
	multipleVal += Math.pow(midpoint.y, 2);
	multipleVal += Math.pow(midpoint.z, 2);
	multipleVal = Math.pow(distance, 2) / multipleVal;
	multipleVal = multipleVal * 0.1;

	const midX = midpoint.x + multipleVal * midpoint.x;
	const midY = midpoint.y + multipleVal * midpoint.y;
	const midZ = midpoint.z + multipleVal * midpoint.z;

	return [
    new THREE.Vector3(from.x, from.y, from.z),
    new THREE.Vector3(midX, midY, midZ),
    new THREE.Vector3(to.x, to.y, to.z),
  ];
};

which could be used like in this component https://github.com/reaviz/reagraph/blob/master/src/symbols/Line.tsx#L14

<a.meshLine
  attach="geometry"
  vertices={interpolate(
    [fromVertices, toVertices],
      (a, b) => {
        const [start, mid, end ] = calculateCurve({
          from: { x: a[0], y: a[1], z: a[2] },
          to: { x: b[0], y: b[1], z: b[2] }
        });
        return new THREE.QuadraticBezierCurve3(start, mid, end).getPoints(200);
      }
    )}
/>

then you pass a flag on the GraphCavnas like curvedEdges.

If a user drags a node and then the layout changes ( such as a new node added ) the node you dragged position is lost. It should retain it.

Lines should stop at the end of the arrow.

If you hover an edge ( hover intent ) it should highlight similar to this: