Stack Overflow
Stack Overflow

Questions tagged [react-flow]

90 questions
0
votes
2 answers

React Flow app getting error: Invalid hook call. Hooks can only be called inside of the body of a function component

Below is a simplified version of the function giving me this error. I think it meets all the requirements as its being called from a button click in the UI and not from another JavaScript function. function LoadData() { const [graphData,…
spacedog
  • 446
  • 3
  • 13
0
votes
0 answers

React Flow: Is there a Dynamic “force” node layout function?

I’m pulling graph data from neo4j and was hoping to display my graphs in React Flow, however, I have not seen options for different auto layout styles. Most of the examples I have seen in React Flow have been coded in javascript and produce Tree…
spacedog
  • 446
  • 3
  • 13
0
votes
0 answers

Setting up ReactFlow v11 with webpack

I am trying to use ReactFlow version 11 in my existing project. I am using external react scripts in the project. I am using React 17 with react-scripts@5.0.0 and my webpack looks like this : module.exports = { .... externals: { 'react-dom':…
Mr.Vibe
  • 392
  • 6
  • 14
0
votes
0 answers

Preventing Overlapping of Nodes in React Flow When Nodes are Dragged and Resized

I need to prevent nodes from overlapping when their size changes. Is there any way to automatically update the positions of the nodes when their size changes so that they don't overlap with each other? I'd like the nodes to move away from each other…
Osama Abdullah
  • 57
  • 8
0
votes
0 answers

I need my node content to increase proportionally to my NodeResizer

I'm trying to make my node increase in size proportionally, but it happens that it grows misaligned and I haven't found a solution for the same. Gif with the problem Hope there is some way to do this.
Caio Ribeiro
  • 1
  • 1
0
votes
0 answers

Unable to start webpack server after update

I tried to install reactflow, in order to support that I had to update the react version, which I did, then somehow the web pack got updated, and the npm start script stopped working anymore. npm error I'm not sure the issue is with webpack or I…
grass
  • 9
  • 1
0
votes
0 answers

Plotly - Dash @app.callback does not re-render Dash elements inside custom component unless re-render is triggered somehow

Inside usage.py I try to update graph-tooltip: @app.callback( Output("grid-value", "children"), Input("live-graph", "hoverData"), ) def display_hover(hoverData): if hoverData is None: return no_update # demo only shows the first…
rojikada
  • 347
  • 1
  • 3
  • 9
0
votes
1 answer

How to keep a node selected when clicking on pane - React flow

I'm developing a website when you can select multiple nodes to perform certain operations. I'd like to keep all the nodes I have clicked on "selected" i.e with the border colored. In fact, if I've selected a bunch of nodes and then I click on the…
Fili139
  • 3
  • 3
0
votes
0 answers

How to update Drag and drop Nodes in React-flow Library

When I am click on Input node that time Node drag Successfully drop.. Click on Node open input box and edit the node Name
Amol A. Kapadi
  • 11
  • 2
0
votes
2 answers

How can I reset the viewport of my React-Flow project to fitView, without clicking the Controls fitView?

I'm working on a React-Flow project. I'm changing the layout of the nodes and edges with a button and I want the last thing to happen to be resetting the viewport to be centered (so just fitView). How can I do this? I've tried calling fitView()…
907riley
  • 11
  • 1
0
votes
0 answers

d3 Radial Tree and React-Flow?

Quite new with d3 but have been stuck on this for several weeks and figured I'd ask here I've been trying to create a radial/flare tree using React-Flow but I'm having a really hard time with positioning the nodes. I need to use React-Flow because…
Tony Chan
  • 41
  • 1
0
votes
1 answer

Is there a way to enforce hierarchical validation with reactflow nodes?

I am using reactflow to create a system of sequences, each with their own "levels" I need to only allow sequences to connect to others of a lower level than their own. For example, A level 5 sequence should be able to connect to sequences of level…
William Gibson
  • 15
  • 4
0
votes
2 answers

React flow: custom group node example

I'm studying the React Flow library documentation and trying to figure out if there is a way to create my own node that will be a group (I want to implement custom title with styles for node before children nodes). I didn't find anything in the…
Schekhovtsov
  • 101
  • 2
  • 10
0
votes
1 answer

how to reposition nodes when they are intersecting with each other in react flow

When a node1 is dragged over node2 in react-flow, then node2 is overlapping with node1. But I want it to be shifted right so that there will be no overlapping between nodes The expected result is that node2 is to be shifted right.
Kurma Sai Priyatham
  • 1
0
votes
1 answer

How to create a draggable node when click on a button in react flow - typescript?

i am working on react flow using typescript, for react flow i am using ractflow and react-flow-renderer packages. In the start i have one node and a button, what i want is: when i click on the button => create a new node. i was able to create a new…
Salar Sali
  • 103
  • 1
  • 8
1 2 3
4
5 6