React Flow - Node Tool

Is there any planned node graphing component on the development roadmap?

It would nice to have a node component similar to React Flow.

I can image it working similarly to Ember Chart.js or Apex Charts where the user and perform all the configuration to get the nodes style and settings to their liking.

Ironically, a few members of my team and I were just talking about building this for a project. I’m open to open sourcing it if it’s easy to use.

Out of curiosity, how would you imagine the props that you give it?

Maybe an array of nodes and an array of edges. However what would you do to determine the initial position of the nodes on the canvas?

And what types of events would you expect, an onInstanceDragBegin, onInstanceDragEnd, and onInstanceClick?

Maybe an onEdgeSnap? Not sure if there’s value to that

Also would you imagine each node is an embedded view?

2 Likes

I was looking at similar items for visualising SNMP data.

Not quite the same thing as React Flow, but we've been pursuing something similar with the Embr Charts module and a charts.js graph chart. Here's an early discussion on that: Graph view libraries in ignition?
We already use an efficient caching process and globalVarMaps in the Integration Toolkit module to effectively relate various tagPaths to each other with relationship keys, which is the foundation of graphing things such as production power flow, network connectivity, control aggregation, and many other types of relationships.

I'm also considering a sankey chart to visualize power production from sub blocks or battery containers to inverter modules to power conversion stations to feeder breakers to purchasing meters to point of interconnection meters at utility-scale PV and BESS plants.

I'm also looking to test Embr Periscope module's JSON view component. This would further our goal of having a common Ignition-built product platform that can be easily pushed to every site we touch with zero site-level configuration in the project stack. Right now, we have root folders of various view types, and those views are compiled together by "assembler views" (of which graph or sankey will be new assemblers) at runtime. But it would give us more flexibility to pull json directly from memory tags in the tag browser, similar to how we pull SVGs or view canvas instances today. Musson Industrial's Embr-Periscope Module - #11 by bmusson

I hope others continue to share what they're working on - great ideas liam1 and kgamble.

4 Likes