From this information I would say the left part can be built using three side-by-side listviews, with per item the top and bottom margin extralarge in the first, large in the second and normal in the third. maybe a column in between containing a background picture for the connecting lines.

The right seems a normal data-grid listening to the third listview.

There are a lot of buttons, dropdowns and features that might complicate things

Can you give some more information on:

- which parts contain static data and which contain dynamic data.

- how are the dropdowns Loream1 used

- which parts of the page are most essential.

- add your best attempt so far and the problems you ran into.

Hi Sairam, I think it's time for your (first?) own widget…

As far as I know there isn't a widget available doing what you want to have. Side by side listviews is also a lot of work to style and I think it is a challenge to show the connecting lines without an interuption through all the generated divs and lists.

It is relatively easy to setup your own widget. And there is a lot of React source to show a diagram, like this one: https://reactjsexample.com/a-no-nonsense-diagramming-library-written-in-react/ 

Good luck!