Has anyone attempted a dashflow component from Reactflow?

Hi all

Found this interesting react package and I can easily imagine as part of the Dash tools

https://reactflow.dev/

I have attempted to follow the “create your own components” wrapping up a react package and I got lost in the documentation,
Also noting some of the latest npm package not quite aligned with the list of the directions in setting up
There is also this latest reference that i tried to follow:

https://community.plotly.com/t/creating-custom-dash-components/72547/6

But the resulting template following this latest direction is nowhere near the initial template to follow the original documentation, reactflow has also quite a few features to bring and I got lost in several attempts to make it work.

Could this be something in line of incorporation by some skilled community members here? I am just a python hobbyist loving the Dash universe

Cheers!

Hi,

I attempted to create a dash component from reactflow, the basic node and edge creation just works fine but I got stuck in creating custom node and edges in reactflow.

My repository for dash reactflow : GitHub - siddharthajuprod07/dash-react-flow

The main issue I am facing is when I pass a dash component (like dcc.checkbox etc) as part of the custom node react is not able to identify it as a component and not rendering it.

I am following the same guide mentioned in reactflow custom node (Custom Nodes Guide - React Flow)

I have develop the code to handle the components passed from dash app (https://github.com/siddharthajuprod07/dash-react-flow/blob/master/src/ts/utils/customNode.tsx) , but its throwing me error.

import React, { useCallback } from 'react';
import { Handle, Position } from 'reactflow';


function CustomNode({ data, isConnectable }) {
  const dashComponentList:React.ReactNode[] = data["dashComponents"]
  console.log(dashComponentList)

  function createReactComponent(dashComponent:React.ReactNode,i:number){
    const NewComponent = dashComponent["namespace"]
    return <NewComponent key={i} type={dashComponent["type"]} {...dashComponent["props"]}></NewComponent>
  }
  
  return (
      <div className="custom-node">
        <Handle type="target" position={Position.Top} isConnectable={isConnectable} />
        {dashComponentList.map((dashComponent,i) => createReactComponent(dashComponent,i))} 
        <Handle type="source" position={Position.Bottom} isConnectable={isConnectable} />
      </div> 
  );
}

export default CustomNode;

Can anybody give me any direction on how to pass dash components to react to identify it as a component and render it?

Thanks,
Sid

@snehilvj will you be able to provide some guidence here please.