Visdcc network - hierarchial layout arrangement

Hi

I have used visdcc network for incorporating data lineage graph. When i click a node, i want the leaf nodes and edges to branch out from the clicked node in an hierarchical layout. It is working, yet unfortunately all the leaf nodes were cluttered together instead of spacing it in equal x and y positions. I tried multiple options, but it is not working.

Can i get assistance on this?

Here is the snippet of the network code and attached is the output of it.

@app.callback(
    Output('net', 'data', allow_duplicate=True),
    Output('net', 'options', allow_duplicate=True),
    [Input('net', 'selection'),],
    [State('net', 'options')],
    prevent_initial_call=True
)
def extend_graph(selection, options, graph_data={"nodes":[], "edges":[]}):
    
    
    # Get the clicked node ID
    clicked_node = selection['nodes'][0]

    final_df = df.drop_duplicates(keep='first').copy()
    final_df["target_table"]=final_df["target_table"].apply(lambda x:x.strip())
    final_df["source_tables"]=final_df["source_tables"].apply(lambda x:x.strip())

    final_df2 = final_df.loc[( final_df['target_table'] == clicked_node ) | (final_df['source_tables'] == clicked_node)]
    
    node_list = list(
    set(final_df2['source_tables'].unique().tolist()+final_df2['target_table'].unique().tolist())
)
    leaf_nodes = [
    ({
        'id': node_name, 
        'label': node_name,
        'color': "red",
        'shape':'dot',
        'size':100
    })
    if node_name == clicked_node
    else
    ({
        'id': node_name, 
        'label': node_name,
        'color': "#fac687",
        'shape':'dot',
        'size':100
    })
    for _, node_name in enumerate(node_list)
    ]

    #print(nodes)
    new_edges=[]
    for row in final_df2.drop_duplicates(subset=['target_table', 'source_tables'], keep='last').to_dict(orient='records'):
        source, target = row['source_tables'], row['target_table']
        new_edges.append({
            'id':source + "__" + target,
            'from': source,
            'to': target,
            'width': 0.5
        })

    # Update the graph data
    graph_data['nodes'].extend(leaf_nodes)
    graph_data['edges'].extend(new_edges)

    # Return the updated graph data and layout options
    options = {
            'physics':{
                        'enabled': True,
                    },  # Disable physics while zooming
            'solver': 'hierarchicalRepulsion',
            'layout': {'hierarchical': {'enabled': True, 'direction':'UD'}},
            'wind': { 'x': 50, 'y': 50 },
            'improvedLayout':False,
            'height':'1000px',
            'nodes':{'shape': 'box',
                    'margin': 10,
                    'size': 25,
                    'borderWidth': 2,
                    'borderWidthSelected': 2,
                    'font': {
                        'multi': 'markdown',
                        'align': 'center',
                    },
                    'labelHighlightBold': True,
                    'widthConstraint': {
                        'minimum': 30,
                        'maximum': 100,
                    }},
            'edges':{ 'color': {
                            'inherit': 'both',
                        },
                        'arrows': {
                            'to': {
                                'enabled': True,
                                'scaleFactor': 0.5
                            }
                        },
                        'chosen': False,
                        "arrowStrikethrough": False,
                        'smooth': {
                            'type': "dynamic",
                            'roundness': 0.5,
                        }
                    },
            'interaction':{'hover':True},
            'neighborhoodHighlight': {
                                'enabled': True,
                                'degree': 2,
                                'highlightColor': 'blue'
                            }   
        }
    
    # new_positions = {}
    # angle = 360 / len(graph_data['nodes'])
    # radius = 200  # Radius of the circle
    
    # for i, node in enumerate(graph_data['nodes']):
    #     if node['id'] == clicked_node:
    #         new_positions[node['id']] = {'x':0, 'y': 0}
    #     else:
    #         theta = i * angle
    #         x = radius * math.cos(math.radians(theta))
    #         y = radius * math.sin(math.radians(theta))
    #         new_positions[node['id']] = {'x': x, 'y': y}
            
    # graph_data['positions'] = new_positions

    return graph_data, options