When changing colors in a comment on a fresh install of flume I get the error: TypeError: Cannot read property 'contains' of null.
The code returned is: ` 7 |
8 | const testClickOutside = React.useCallback(
9 | e => {

10 | if (!wrapper.current.contains(e.target)) {
| ^ 11 | onRequestClose();
12 | document.removeEventListener("click", testClickOutside);
13 | document.removeEventListener("contextmenu", testClickOutside);`

Hi there, I'm currently creating custom controls with react components within the root node and would like to have the data or react component returned when accessing the getNodes() function or by using dynamic inputs.

.addRootNodeType({
      type: "form",
      label: "Form",
      initialWidth: 250,
      inputs: ports => data => {
        console.log('Root Node Input Data', data);
        return [
          ports.selector({ name: "fieldSelector", label: "Add Field", hidePort: true }),
          ports.field({ name: "field", label: "Field_0", hidePort: true })
        ];
   },
})

.addPortType({
      type: "selector",
      name: "field selector",
      label: "Field Selector",
      color: Colors.blue,
      hidePort: true,
      controls: [
        Controls.custom({
          name: "fieldSelector",
          label: "Field",
          render: (data, onChange) => {
            return (<FieldButton 
              editorInstance = {editor}
              />);
            }
        })
      ]
    })

.addPortType({
      type: "field",
      name: "field_0",
      label: "Field_0",
      color: Colors.green,
      hidePort: true,
      controls: [
        Controls.custom({
          name: "field",
          label: "Field",
          render: (data, onChange, context) => (
            <Field 
            data={data}
            onChange={onChange}
            context={context}
            />
          )
        })
      ]
    })

However as it stands when returning the dynamic root node input data and the getNodes() command from the node editor all they return is undefined:

So what my question is if I'm going about this the wrong way or if it's currently not possible to retrieve this data. Thank you very much.

Hello !

I'm looking for create a Tabbed navigation between nodes editor, but I don't fin any solution...
I use Redux and I have multiple JSON file and I want to refresh the graph when I click on Tab.
Someone knows a solution for re render dynamically the graph when one of these parameters change ?
nodes={ newNodes }
comments= {newComments}

Thanks all for your answers !

Hey there. First off, great project. It's amazing, and I'm already thinking of ways to use it.

Secondly, being a hacker, I tried creating a cyclical graph. While the graph could be represented correctly in the graph editor, as soon as it was evaluated by the engine, it created an infinite loop which overloaded the call stack.

This seems like the kind of thing which could be solved in user land, but I wonder if there are any plans to limit the ability to connect back to a dependency node.

This is probably a duplicate of #38 but wanted to show some code to be sure. So I have this:

const addNode = () => {
        config.addNodeType({
            type: "API_UPDATE",
            label: "API UPDATE",
            description: "Performs an UPDATE HTTP Request",
            inputs: ports => [
                ports.string({ name: "URL", label: "URL" }),
                ports.string({ name: "Name", label: "Name" }),
                ports.string({ name: "Email", label: "Email" }),
                ports.string({ name: "Password", label: "Password" }),
            ],
            outputs: ports => [
                
            ]
        });
    }

    return (

        <div style={{ width: 1024, height: 800 }}>
            <button onClick={saveNodes}>Save Logic</button>
            <button onClick={addNode}>Add Node</button>
            <NodeEditor nodes={nodes} ref={nodeEditor} portTypes={config.portTypes} nodeTypes={config.nodeTypes} />{" "}
        </div>
    );

In which I'm trying to dynamically append a node type to the configuration, in order to be available on the right-click menu. Is this something that is doable? It doesn't throw any errors but the list isn't updated.

Thanks!

Hi,
Thanks for this awesome library!

Had a question about the API. Is there any way that I can address a unique node/port/control in the editor live? I read about the context object, but I believe it's the same across all the controls and cannot be addressed to a particular node/port or control.

I wanted to mark a node if it's busy or not while executing the logic.

ps: I am not using a rootnode or rootengine

A common React expectation is that changing the child nodes prop triggers a re-render of the component.

I am trying to externally manipulate nodes prop to control the NodeEditor programmatically using Mobx State Tree with observers. It is intended to work like a "remote control" for the NodeEditor's UI, setting/updating some internal state, then (when all nodes are wired up) letting user to play around and experiment on its own.

Example on CS link below prints a comment each time re-render is performed, NodeEditor does not update the contents on this re-render (if change is coming from the outside). The current state is rendered as JSON in the middle of the screen for easier monitoring. Adding nodes with right click works ok.

I've added a button to toggle the parent NodeEditor component rendering, which can be used to manually perform the update by first removing NodeEditor from the dom, then rendering it back. This works, but I still hope there is a less brutal way to achieve a refresh. 🙂

https://codesandbox.io/s/mst-flume-control-4y1xl?file=/src/flume.js

p.s.: Connections between nodes disappear after toggling the NodeEditor off and then back on. Trying to do changes to nodes after that cause errors to appear.

Please add a way to allow the multiple nodes selection and make them as part of a group like a "comment node" except the group have to wrap all selected nodes

I read this: https://flume.dev/docs/saving-nodes but not sure how we can restore the saved nodes. Imagine the following scenario:

• Save nodes
• Save them as JSON in local-storage
• Refresh page
• Restore nodes from local-storage

Is there any way to achieve this?

I would like to have a (multi)select / dropdown with options that i get from a remote api (ajax call).

The ajax call should be made when the node is created, not when the config is loaded.

This could be achieved with custom controls but it is very messy to implement in the first place.

The bare <select> elements does not work out of the box. Couldn't figure out why (it is just not clickable). I'm using the react-select component now.

Is there any plan to support React 17? Cause I was trying to start a project to use Flume and I got the following error

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR!   react@"^17.0.1" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.13.1" from [email protected]
npm ERR! node_modules/flume
npm ERR!   flume@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See /Users/freddy/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/freddy/.npm/_logs/2020-10-28T01_51_43_083Z-debug.log```

Hey, I am looking for a solution to be able to dynamically retrieve the nodes that have been added.
Because I want to get each values of my node when I click on, like label etc..
Anyone knows how can I do that ?
Thank you very much for your answers !

It would be awesome to have the ability to resize nodes at runtime (similar to how you can resize comments).

I am getting this error. I don't want to use force command as It might conflict with other npm packages. Please fix this.

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR!   react@"^17.0.2" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.13.1" from [email protected]
npm ERR! node_modules/flume
npm ERR!   flume@"*" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

Versions

Flume: 0.4.0
Browser: Edge 84.0.522.50
Server: Next 9.5.1

Description

When server rendering a flume editor with defaultNodes, the new nodes gets created with a different ID on the server and client

This causes a runtime error when creating a connection to that server-rendered node

Possible solutions could be

• have the user provide their own id for each node in defaultNodes (seems like the easiest solution)
• generate the same id on server/client (can maybe take hints from @reach/auto-id? can't use it directly as it's a hook and we are in a reducer at this point.)
• do nothing: ssr isn't a goal for this project
• something else?

I'd be happy to PR something if you let me know which solution path you'd prefer.

Reproduction

Create a next app (yarn create next-app ssr-bug-repro) and add the following page. Then drag a number node on and try to create a connection from it to the default node.

import { NodeEditor, FlumeConfig, Colors, Controls } from 'flume'

const config = new FlumeConfig()
  .addPortType({
    type: 'number',
    name: 'number',
    label: 'Number',
    color: Colors.red,
    controls: [Controls.number({ name: 'number', label: 'Number' })]
  })
  .addNodeType({
    type: 'number',
    label: 'Number',
    description: 'Outputs a numeric value',
    inputs: ports => [ports.number()],
    outputs: ports => [ports.number()]
  })
  .addRootNodeType({
    type: 'homepage',
    label: 'Homepage',
    initialWidth: 170,
    inputs: ports => [
      ports.number({ name: 'copyrightYear', label: 'Copyright Year' })
    ]
  })

export default function Test () {
  // if I uncomment this line below (essentially disabling SSR) everything works fine.
  // if (!global.document) return null
  return (
    <div style={{ width: 800, height: 600 }}>
      <NodeEditor
        portTypes={config.portTypes}
        nodeTypes={config.nodeTypes}
        defaultNodes={[{ type: 'homepage', x: 190, y: -150 }]}
      />
    </div>
  )
}

From the docs:

Any quality library which provides a user interface for end users must be theme-able to match the rest of the application. Flume is no exception to this, and work is underway to provide a stable API for creating node editor themes. Because of the diverse methods that developers use to style their applications, we are working to make sure when this API is released it will be robust and universal.

In an ideal world, themes created for the node editor will:

• Have full access to overriding CSS for nodes, ports, controls, and the stage itself.
• Be able to adjust the styling of connections, potentially including the way in which they are rendered.
• Be easily shareable with the community.

This issue will serve as the umbrella discussion for theming-related issues and feature requests.

The root engine now prevents circular node setups from overwhelming the call stack, but the node editor still allows creating node configurations that can cause these infinite loops. As mentioned in the initial discussion in #19, my first thought is to prevent users from creating cyclical graphs by default, when they attempt to connect nodes in such a way that it would cause a circular dependency. Doing this brings up a few considerations:

• Users need to be notified when this happens and why. A toast notification positioned relative to the stage seems most appropriate.
• Running this circular check shouldn't freeze the UI while it's processing, so it needs to bail out as quickly as possible. My first thought is to just start at the node being connected from, and walk through all the connected nodes. If it ever returns to the initial node it cancels the connection and throws the error.
• Developers should be able to override this behavior. My thought is a new prop on the node editor called circularNodeBehavior or disallowCircularNodes, something like that; with three possible values, error, warn, and none (or allow). The API will need to be finalized, but it essentially should let developers decide if circular values should not be allowed, be allowed and throw a warning, or just be allowed across the board.
• Adding a toast notification system opens up some interesting possibilities for allowing more user-friendly validation scenarios. That functionality could be exposed to developers too to allow custom validation when connecting nodes.

May be I just cant see option to do that? But it would be very useful to have a Control attached to the output node. For constant values f.e.

I would like to try out different theming approaches to help out with #18. I see that there is an example directory to test the library during development. I do however have difficulties running it. I see, that flume (node-editor), react and react-dom are linked locally. Is that necessary to run the example? I have tried installing react and react-dom and npm linking the node-editor to the example, but I get the error: Cannot read property 'thisCompilation' of undefined when running npm run start.

@chrisjpatty could you elaborate on how to setup the library for local development?

Hello! First of all thank you for this nice tool! I wanted to try and give it a spin so I opened https://codesandbox.io/ (my weapon of choice to quickly fire up some experiments), created a React template, and started following the quick start guide.

However, I get this error every time I create or delete a node / comment:

It doesn't seem to be critical as I can dismiss it and keep working. My initial thought is that while the error is not critical, it still trips react-error-overlay used in create-react-app, which powers the React template in codesandbox - it keeps doing that even if I download the project as a .zip file and do normal offline development.

Here's the super simple Codesandbox: https://codesandbox.io/s/experiment-flume-ykvts

Weird thing is that I did found some simple examples among the project issues using Codesandbox, but the issue does not seem to appear in them (like https://codesandbox.io/s/dynamically-add-flume-types-example-forked-ypg7t?file=/src/App.js), and I can't tell what's different.

Thanks!
L

This would be great. Is there a workaround for now?

Blender's Frame Node is very important for grouping and handling large node graphs. Has this feature been considered here yet?

In Safari (tested on both iPad and Mac) the "Add Node" menu tries to render every item so that it is visible on the screen and everything gets compressed together.

I want to create a custom control to display custom data inline with the input (example is a boolean "lamp" changing color if incoming input is true or false). An inline input indicator.

My problem is that connecting the input port triggers state similar to noControls flag, which hides the controls (including my custom control which I use to display state).

Ports named Indicator 2 and 3 have an input connected which causes them to lose the custom controls.

The third node is an experimental solution using separate node with custom (standalone externally controlled) control but this is a fragile complex workaround, you need to manually manage all custom controls.

p.s.: Alternative way of solving this would be to allow to define an JSX "indicator" component, which overrides the "label" of the port and gets displayed all the time, no matter if controls are enabled or not. This would also be more semantically correct, as using a custom port control for the indicator is actually a hack.

Is there any way to add nodes without using 'defaultNodes'?
If I don't put it there, no nodes will be created.

import { FlumeConfig, Colors, Controls } from 'flume'

const config = new FlumeConfig()
config
	.addPortType({
		type: "string",
		name: "string",
		label: "Text",
		color: Colors.green,
		controls: [
			Controls.text({
				name: "string",
				label: "Text"
			})
		]
	})
	.addPortType({
		type: "boolean",
		name: "boolean",
		label: "True/False",
		color: Colors.blue,
		controls: [
			Controls.checkbox({
				name: "boolean",
				label: "True/False"
			})
		]
	})
	.addPortType({
		type: "number",
		name: "number",
		label: "Number",
		color: Colors.red,
		controls: [
			Controls.number({
				name: "number",
				label: "Number"
			})
		]
	})
	.addNodeType({
		type: "homepage2",
		label: "Homepage2",
		initialWidth: 170,
		inputs: ports => [
			ports.string({
				name: "title",
				label: "Title"
			}),
			ports.string({
				name: "description",
				label: "Description"
			}),
			ports.boolean({
				name: "showSignup",
				label: "Show Signup"
			}),
			ports.number({
				name: "copyrightYear",
				label: "Copyright Year"
			})
		]
	})
	.addRootNodeType({
		type: "homepage3",
		label: "Homepage3",
		initialWidth: 170,
		inputs: ports => [
			ports.string({
				name: "title",
				label: "Title"
			}),
			ports.string({
				name: "description",
				label: "Description"
			}),
			ports.boolean({
				name: "showSignup",
				label: "Show Signup"
			}),
			ports.number({
				name: "copyrightYear",
				label: "Copyright Year"
			})
		]
	})
export default config;

import React from 'react'
import { NodeEditor } from 'flume'
import config from './config'

const App = () => {
  const [nodes, setNodes] = React.useState({})
  return (
    <div style={{width: '100vw', height: '100vh'}}>
      <NodeEditor
        nodeTypes={config.nodeTypes}
        portTypes={config.portTypes}
        nodes={nodes}
        onChange={setNodes}
        defaultNodes={[
          {
            type: "homepage3",
            x: 190,
            y: -150
          },
          {
            type: "homepage2",
            x: 190,
            y: -150
          }
        ]}
      />
    </div>
  )
}

export default App;

I'm trying to create a compose node that takes a string of parameterized text and lets you plug in the variables. For example, I may want to generate an email message like: Welcome {name}, your document is ready at {url}.. This is possible today by defining the JoinStrings node found in the examples and using it a bunch of times. Ideally it could be a single node, I could type this in as my node's first input, and 2 string inputs would be auto-generated on the side: name and url.

If you clone the github repository and call npm install you get the following error?

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR!   react@"file:../node_modules/react" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.8.0" from [email protected]
npm ERR! node_modules/docz
npm ERR!   docz@"^2.3.1" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See C:\Users\joele\AppData\Local\npm-cache\eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\joele\AppData\Local\npm-cache\_logs\2021-07-10T09_55_57_593Z-debug.log

I managed to get it to work using --legacy-peer-deps but it comes up with a lot of npm WARN deprecated warnings.

Mac Chrome Version 84.0.4147.89 (Official Build) (64-bit)

See screenshot below.

If I increase the min-height of this class it will work

.heroBlock_3SLJ {

    display: flex;

    width: 100%;

    min-height: calc(100vh - 40px);

    background: var(--background-dark);
}

How can we pass one value of the node to other with result displayed in the other node

Hello, I'm trying to add a custom node for having a curve editor directly on my graph.
The problem is I'm not able to use a custom port control like this:

config.addPortType({
  type: "curve",
  name: "curve",
  label: "Curve",
  color: Colors.pink,
  controls: [
    Controls.custom({
      name: "curve",
      label: "Curve",
      render: function (data, onChange){
        <Curve />
      } 
    })
  ]
})

I have this error when I try to use my node with my custom port
TypeError: render is not a function
Directly from the Flume node_module, does someone knows how to solve this ?

Thanks everyone !

First off, awesome library! Trying to use it in a new project, and had quite some fun.

I really need multiple connections on one input, but while waiting for #74 I went ahead and made a "Join" node type which takes a number of inputs of a certain port type and emits just one output, which I can then hook up appropriately. I don't use the RootEngine so I am not bothered about the semantics inside Flume.

Now I made the node such that I have a numeric input in which I enter how many inputs I'll need:

This is rather cumbersome, I'd much rather have it create a new unconnected input as soon as the input before it is connected. I thought this might be possible with Dynamic Nodes (https://flume.dev/docs/dynamic-nodes) but I only see how to make ports based on the value of the other ports, but not on whether they are connected or not. Is there a way to do this and to get rid of the extra "input count" port?

My code for inputs of the join node now looks like this:

inputs: ports => data => {
  const inputs = [];
  if (data.inputs) {
      for (let n = 1; n <= data.inputs.number; ++n) {
          inputs.push(ports.flow({
              name: 'flow' + n,
              label: `Flow [${n}]`
          }));
      }
  }
  return [
      ports.number({
          name: 'inputs',
          label: 'Inputs'
      }),
      ...inputs
  ];
}

Hi!

Looks awesome. Nice website as well, thanks!
I was wondering whether typescript type definitions are on the roadmap (@types/flume)? Would be great for all the typescript users 😄

Thank you!

Unfortunately this seems to be by design, but it complicates what should be the basic function of loading in a graph.

NodeEditor provides a way to retrieve the nodes and I am saving them out to localStorage, but I'm unable to actually populate the graph with any nodes by manually changing the nodes object after the editor has been rendered.

The inputData field only ever seems to contain an object like

{
portName: undefined
}

but I would expect it to contain the inputs for the entire node.

Any insight as to what I'm missing?

Hello, thanks for this awesome library! It does exactly what I'm looking for, and the API is incredibly well documented and easy to use!

I'm run into one feature request, though: it would be nice if you could group certain nodes into categories in the popup menu.

Current	This feature

(the example on the right is taken from the blender node system, of course, it should be styled more consistently). This feature would be very useful when there are possibly 100s of different node types.

I'm not sure what the best way to expose this in the API would be. Probably a .addGroupType method on the config, then an optional field on the nodes, called group:

const config = new FlumeConfig()
config
+  .addGroupType({
+    type: "textmanipulation",
+    label: "Text Manipulation",
+    description: "Modify texts in various ways",
  })
  .addNodeType({
+   group: "textmanipulation"
    type: "string",
    label: "Text",
    description: "Outputs a string of text",
    inputs: ports => [
      ports.string()
    ],
    outputs: ports => [
      ports.string()
    ]
  })

I'd be more than happy to open a PR for this feature if you gave me some general pointers in the codebase.

When trying to use the library with snowpack as a build tool I noticed that nanoid is required in a couple of places.

const nanoid = require("nanoid")

I tried to replace it in a couple of places with an esm import and it works.

import { nanoid } from "nanoid"

This seems to work apart from nanoid depending on a nodejs package called crypto. Nanoid can however also be imported from:

import { nanoid } from "nanoid/non-secure/index/

From what I can see nanoid is used to generate a random ID which has no need to be secure (See nanoid security). By using the non-secure package and importing instead of requiring it the node dependency could be dropped making the library usable outside of a node bundler like webpack.

Is there something else I don't see? If not I could easily provide a PR to change this.

Hi!

Curious whether it's possible to have the output type rely on the input type inside a node?
Say I'd like to create a generic 'ForEach' node. This supports the (port) type 'Array', which has 'acceptTypes' set to a number of types that are arrays (e.g. MyCustomObjectsArray, OtherObjectsArray). This ForEach node would then accept both those array types and its output would be of type 'MyCustomObject' or 'OtherObject', depending on the input.

If we would have access to the connected inputs inside the 'outputs' property, we might be able to do this?
Let me know if something is unclear.

Thank you very much for this awesome library. It looks awesome!

Is there some guide on how to run this? I've tried the steps provided on the ReadMe but I'm guessing it requires the setup of various other modules correct?

I didn't have much luck with the example as well.

It would really improve usability if the user can preview a result value for every output port on every node.

What I’m thinking is:

RootEngine will need a new function. Something like resolveAllNodes. Then the output of that can be passed to the node editor:

<NodeEditor ... resolvedValues={resolvedValues} />

Then in the options of addPortType something called renderOutput is added that expects a function with type definition:

renderOutput(portOutputData) -> ReactNode

This could be rendered either below or instead of the outputs label.

@chrisjpatty Has something like this been planned or considered? I may be interested in helping develop this feature (if you see value in it and it doesn’t conflict with any of your work).

Following through the Getting Started Guide, i came across the default "number" node not being able to accept negative numbers.

You can test, by scroling down this page and try clicking the "down" arrow on the number node. It keeps resetting to 0 or 1.

I don't find a configuration way to allow negative numbers, since the regex /[^0-9.]+/g prevents the minus-character (see in the onchange-event of the created input element).

All lines are gray at the moment.

Boolean flow would be easier to visualize if green line would represent true and red line false state.

Is this available or would an upgrade with dynamic css classes applied to the line dom elements be needed first?

This comes up in some comments in issues and PR but I can't seem to understand how to render a node that has an input field, an output port, but no input port. Is this possible?

Nice-looking library! Congratulations.

Do you have any thoughts or intentions around nodes which are composed of their own graph of nodes? The use cases I have in mind would benefit from this ability to nest, modularize, and hide complexity.

When having a Material UI Select component on the same page with a flume NodeEditor, after opening the select popover once, the NodeEditor context menu stops working.

As a React newbie, my skills for debugging this further are limited. Nevertheless, here's a reproduction case:
https://codepen.io/rgngl/pen/poEZdQb

On react v17.0.2 all connection don't get rendered. The nodes that are close to the start shows connection but the nodes far from center of the board don't get rendered.

It would be awesome if flume exposed some way to customize what shows up in a node's header.

I'm trying to add an icon to the top right of each of my nodes (which on hover/click will show some help text/video). I can kinda hack it together by setting my node's label to be a React element but it's got some issues:

1. That icon also shows up in the node list. This may or may not be desirable.
2. Typing in the "Filter Options" sections causes a crash because label is expected to be a string.

Hi Chris,

first of all great work! I have been on the lookout for something like this for a couple of weeks and your implementation is by far the best I have found.

I have a question though. From my understanding the main purpose of the NodeEditor is to allow anyone to customize the business logic of an application to their needs. We are trying to build something with a similar aim. We want to give domain experts a tool to build decision trees to model their decision making process. The result should be an interactive questionnaire for end users. The business logic in this case would be the decision making logic.

While trying to implement something like this with flume I have found that the building of a decision tree is possible, because it is very similar to what flume should be used for. I had however difficulties when trying to make the building process dynamic. For example in our case the bet case would be for the ports to be addable and removable by the domain expert, because the ports would represent options to answer a question. While I could probably dynamically add ports during the runtime of the NodeEditor I see no way to integrate such a functionality into the current Node UI.

It would be great to get your insight into this approach. If flume can be the core of our application I would also be happy to help you out in development.

Cheers Philipp

Under "The Root Node", it shows how to label ports; however, ports label as their data type (e.g. "True/False") instead of port title (e.g. "Input" or "Output")

config.addNodeType({
    type: "boolean",
    label: "True/False",
    description: "Outputs a true/false value",
    initialWidth: 140,
    inputs: ports => [
      ports.boolean({
        name: 'input',
        title: 'Input',
      }),
    ],
    outputs: ports => [
      ports.boolean({
        name: 'input',
        title: 'Input',
      }),
    ]
  })

Hi,

Flume seems to be a great node editor tool. We are looking to build a contact center flow and allow our customers to configure them (Similar to AWS Connect). I want an advice whether it will be possible using flume.dev or any other suggestion on the tools available for the same (Open source or commercial tools):