chore(tests): wording graph => flow

cypress/integration/flow/basic.spec.js

@@ -1,4 +1,4 @@
-describe('Basic Graph Rendering', () => {
+describe('Basic Flow Rendering', () => {
   it('renders a flow with three nodes', () => {
     cy.visit('/basic');
 

cypress/integration/flow/custom-node.js

@@ -1,5 +1,5 @@
-describe('Custom Node Graph Rendering', () => {
+describe('Custom Node Flow Rendering', () => {
-  it('renders a graph', () => {
+  it('renders a flow', () => {
     cy.visit('/custom-node');
 
     cy.get('.react-flow__renderer');

cypress/integration/flow/empty.spec.js

@@ -1,5 +1,5 @@
 describe('Empty Flow Rendering', () => {
-  it('renders an empty graph', () => {
+  it('renders an empty flow', () => {
     cy.visit('/empty');
 
     cy.get('.react-flow__renderer');

cypress/integration/flow/interaction.spec.js

@@ -1,5 +1,5 @@
-describe('Interaction Graph Rendering', () => {
+describe('Interaction Flow Rendering', () => {
-  it('renders a graph', () => {
+  it('renders initial flow', () => {
     cy.visit('/interaction');
 
     cy.get('.react-flow__renderer');

cypress/integration/flow/overview.spec.js

@@ -1,5 +1,5 @@
-describe('Overview Graph Rendering', () => {
+describe('Overview Flow Rendering', () => {
-  it('renders a graph', () => {
+  it('renders a flow', () => {
     cy.visit('/');
 
     cy.get('.react-flow__renderer');

cypress/integration/flow/stress.spec.js

@@ -1,5 +1,5 @@
-describe('Stress Graph Rendering', () => {
+describe('Stress Flow Rendering', () => {
-  it('renders a graph', () => {
+  it('renders initial flow', () => {
     cy.visit('/stress');
 
     cy.get('.react-flow__renderer');

example/src/Basic/index.js

@@ -2,9 +2,9 @@ import React, { useState } from 'react';
 
 import ReactFlow, { removeElements, addEdge, isNode, Background } from 'react-flow-renderer';
 
-const onNodeDragStop = node => console.log('drag stop', node);
+const onNodeDragStop = (node) => console.log('drag stop', node);
-const onLoad = reactFlowInstance => console.log('graph loaded:', reactFlowInstance);
+const onLoad = (reactFlowInstance) => console.log('flow loaded:', reactFlowInstance);
-const onElementClick = element => console.log('click', element);
+const onElementClick = (element) => console.log('click', element);
 
 const initialElements = [
   { id: '1', type: 'input', data: { label: 'Node 1' }, position: { x: 250, y: 5 } },
@@ -17,20 +17,19 @@ const initialElements = [
 
 const BasicFlow = () => {
   const [elements, setElements] = useState(initialElements);
-  const onElementsRemove = (elementsToRemove) =>
+  const onElementsRemove = (elementsToRemove) => setElements((els) => removeElements(elementsToRemove, els));
-    setElements(els => removeElements(elementsToRemove, els));
+  const onConnect = (params) => setElements((els) => addEdge(params, els));
-  const onConnect = (params) => setElements(els => addEdge(params, els));
 
   const updatePos = () => {
-    setElements(elms => {
+    setElements((elms) => {
-      return elms.map(el => {
+      return elms.map((el) => {
         if (isNode(el)) {
           return {
             ...el,
             position: {
               x: Math.random() * 400,
-              y: Math.random() * 400
+              y: Math.random() * 400,
-            }
+            },
           };
         }
 
@@ -54,14 +53,11 @@ const BasicFlow = () => {
     >
       <Background variant="lines" />
 
-      <button
+      <button onClick={updatePos} style={{ position: 'absolute', right: 10, top: 30, zIndex: 4 }}>
-        onClick={updatePos}
-        style={{ position: 'absolute', right: 10, top: 30, zIndex: 4 }}
-      >
         change pos
       </button>
     </ReactFlow>
   );
-}
+};
 
 export default BasicFlow;

example/src/CustomNode/index.js

@@ -6,7 +6,7 @@ import ColorSelectorNode from './ColorSelectorNode';
 
 const onNodeDragStop = (node) => console.log('drag stop', node);
 const onElementClick = (element) => console.log('click', element);
-const onLoad = (reactFlowInstance) => console.log('graph loaded:', reactFlowInstance);
+const onLoad = (reactFlowInstance) => console.log('flow loaded:', reactFlowInstance);
 
 const initBgColor = '#f0e742';
 

example/src/Empty/index.js

@@ -2,23 +2,22 @@ import React, { useState } from 'react';
 
 import ReactFlow, { removeElements, addEdge, MiniMap, Controls, Background } from 'react-flow-renderer';
 
-const onNodeDragStop = node => console.log('drag stop', node);
+const onNodeDragStop = (node) => console.log('drag stop', node);
-const onLoad = reactFlowInstance => console.log('graph loaded:', reactFlowInstance);
+const onLoad = (reactFlowInstance) => console.log('flow loaded:', reactFlowInstance);
-const onElementClick = element => console.log('click', element);
+const onElementClick = (element) => console.log('click', element);
 
 const EmptyFlow = () => {
   const [elements, setElements] = useState([]);
-  const onElementsRemove = (elementsToRemove) =>
+  const onElementsRemove = (elementsToRemove) => setElements((els) => removeElements(elementsToRemove, els));
-    setElements(els => removeElements(elementsToRemove, els));
+  const onConnect = (params) => setElements((els) => addEdge(params, els));
-  const onConnect = (params) => setElements(els => addEdge(params, els));
   const addRandomNode = () => {
     const nodeId = (elements.length + 1).toString();
     const newNode = {
       id: nodeId,
       data: { label: `Node: ${nodeId}` },
-      position: { x: Math.random() * window.innerWidth, y: Math.random() * window.innerHeight }
+      position: { x: Math.random() * window.innerWidth, y: Math.random() * window.innerHeight },
     };
-    setElements(els => els.concat(newNode));
+    setElements((els) => els.concat(newNode));
   };
 
   return (
@@ -27,22 +26,18 @@ const EmptyFlow = () => {
       onLoad={onLoad}
       onElementClick={onElementClick}
       onElementsRemove={onElementsRemove}
-      onConnect={p => onConnect(p)}
+      onConnect={(p) => onConnect(p)}
       onNodeDragStop={onNodeDragStop}
     >
       <MiniMap />
       <Controls />
       <Background variant="lines" />
 
-      <button
+      <button type="button" onClick={addRandomNode} style={{ position: 'absolute', left: 10, top: 10, zIndex: 4 }}>
-        type="button"
-        onClick={addRandomNode}
-        style={{ position: 'absolute', left: 10, top: 10, zIndex: 4 }}
-      >
         add node
       </button>
     </ReactFlow>
   );
-}
+};
 
 export default EmptyFlow;

example/src/Overview/index.js

@@ -7,7 +7,7 @@ const onNodeDragStop = (node) => console.log('drag stop', node);
 const onElementClick = (element) => console.log('click', element);
 const onSelectionChange = (elements) => console.log('selection change', elements);
 const onLoad = (reactFlowInstance) => {
-  console.log('graph loaded:', reactFlowInstance);
+  console.log('flow loaded:', reactFlowInstance);
   reactFlowInstance.fitView();
 };
 

example/src/Stress/index.js

@@ -3,30 +3,29 @@ import React, { useState } from 'react';
 import ReactFlow, { removeElements, addEdge, MiniMap, isNode, Controls, Background } from 'react-flow-renderer';
 import { getElements } from './utils';
 
-const onLoad = reactFlowInstance => {
+const onLoad = (reactFlowInstance) => {
   reactFlowInstance.fitView();
 
   console.log(reactFlowInstance.getElements());
-}
+};
 
 const initialElements = getElements(10, 10);
 
-const StressGraph = () => {
+const StressFlow = () => {
   const [elements, setElements] = useState(initialElements);
-  const onElementsRemove = (elementsToRemove) =>
+  const onElementsRemove = (elementsToRemove) => setElements((els) => removeElements(elementsToRemove, els));
-    setElements(els => removeElements(elementsToRemove, els));
+  const onConnect = (params) => setElements((els) => addEdge(params, els));
-  const onConnect = (params) => setElements(els => addEdge(params, els));
 
   const updatePos = () => {
-    setElements(elms => {
+    setElements((elms) => {
-      return elms.map(el => {
+      return elms.map((el) => {
         if (isNode(el)) {
           return {
             ...el,
             position: {
               x: Math.random() * window.innerWidth,
-              y: Math.random() * window.innerHeight
+              y: Math.random() * window.innerHeight,
-            }
+            },
           };
         }
 
@@ -36,24 +35,16 @@ const StressGraph = () => {
   };
 
   return (
-    <ReactFlow
+    <ReactFlow elements={elements} onLoad={onLoad} onElementsRemove={onElementsRemove} onConnect={onConnect}>
-      elements={elements}
-      onLoad={onLoad}
-      onElementsRemove={onElementsRemove}
-      onConnect={onConnect}
-    >
       <MiniMap />
       <Controls />
       <Background />
 
-      <button
+      <button onClick={updatePos} style={{ position: 'absolute', right: 10, top: 30, zIndex: 4 }}>
-        onClick={updatePos}
-        style={{ position: 'absolute', right: 10, top: 30, zIndex: 4 }}
-      >
         change pos
       </button>
     </ReactFlow>
   );
-}
+};
 
-export default StressGraph;
+export default StressFlow;