jqTree | Tree widget for jQuery | Dataset library

I am really wanting to know how to integrate jqTree as a webpacker webpack in my Rails 6 application

UPDATE:- Using yarn add jqtree seems to have magically cleared up most of my issues however I am currently facing tree is not a function error

I am using the Ancestry gem to organise menu items and I need a drag and drop javascript tree view solution that will work nicely with the Ancestry gem. I have picked on jqTree as my desired solutions but I am happy to be persuaded to use an alternative as there seem to be a lot around but initially I would just like to be able to at least get a tree view working within Rails 6 Presumably I have to start by setting up jQuery, for which there are plenty of resources on how to do this so I guess this is more about how to get any jQuery component up and running in a Rails 6 app I guess I'll have to start with a jsx file and import some stuff and import some css into application.scss but just what this should look like I really am unsure of

So far I have setup jQuery according to the instructions here https://www.botreetechnologies.com/blog/introducing-jquery-in-rails-6-using-webpacker

I can confirm with a simple alert that this is all hooked up and working

I have made some more progress Instead of downloading the jqTree files, I have used yarn to install jqTree

replacing

I have downloaded the jqTree files and unpacked them to folder called jqTree inside my javascript/packs folder

with

A specific jQuery plugin used to render a Tree-View expects a data-string of "Nested Array of Objects". My Tree-View data (in the same structure) is available in a PHP array. I need to echo the PHP array in such way that the jQuery plugin can read the data.

I already tried to json_encode the PHP array but I get a completely different result than what's expected by the jQuery plugin. The exepected/required format of the data can be viewed here: https://mbraak.github.io/jqTree/#options-data as well as below:

I have to show only selected nodes and parents, and hide rest nodes when a button is clicked. Only nothing happens when I click the button.

The jsfiddle

http://jsfiddle.net/375emow0/

The code with commenting start on button click
$('button[name="psychTree-selected"]').click( function(node) {

In one of my projects I am trying to convert the following python dict

I'm trying to implement jqTree with Laravel app.

1. Controller gets data and return view:

   ...

In HTML I have:

I am trying to use jqtree in an Electron application. I have been able to get it to do everything I need it to do. However, I am running into a problem with positioning it on the window.

My index.html file looks like this:

following is my code :

I am using Jqtree to develop a drag and drop tree, however i would like to style the tree by the node level.

Tree Javascript