app.py

import streamlit
from streamlit_agraph import agraph, Node, Edge, Config

nodes = []
edges = []

#Departamento Dirección
nodes.append( Node(id="CEO", 
                   label="Direccion", 
                   size=50, 
                   shape="circularImage",
                   image="http://marvel-force-chart.surge.sh/marvel_force_chart_img/top_spiderman.png") 
            ) # includes **kwargs
nodes.append( Node(id="EstrategiaCEO", 
                   size=25,
                   #shape="circularImage",
                   shape="square",
                   image="http://marvel-force-chart.surge.sh/marvel_force_chart_img/top_captainmarvel.png") 
            )

#Gestión Proyectos
nodes.append( Node(id="PM", 
                   label="Gestión Proyectos", 
                   size=25, 
                   shape="circularImage",
                   image="http://marvel-force-chart.surge.sh/marvel_force_chart_img/top_spiderman.png") 
            ) # includes **kwargs
nodes.append( Node(id="EstrategiaPM", 
                   size=25,
                   #shape="circularImage",
                   shape="square",
                   image="http://marvel-force-chart.surge.sh/marvel_force_chart_img/top_captainmarvel.png") 
            )
nodes.append( Node(id="Proyectos activos", 
                   size=25,
                   #shape="circularImage",
                   shape="star",
                   image="http://marvel-force-chart.surge.sh/marvel_force_chart_img/top_captainmarvel.png") 
            )

#I+D
nodes.append( Node(id="I+D", 
                   label="Innovación y Desarrollo", 
                   size=25, 
                   shape="circularImage",
                   image="http://marvel-force-chart.surge.sh/marvel_force_chart_img/top_spiderman.png") 
            ) # includes **kwargs
nodes.append( Node(id="EstrategiaI+D", 
                   size=25,
                   #shape="circularImage",
                   shape="square",
                   image="http://marvel-force-chart.surge.sh/marvel_force_chart_img/top_captainmarvel.png") 
            )
nodes.append( Node(id="Proyectos I+D activos", 
                   size=25,
                   #shape="circularImage",
                   shape="star",
                   image="http://marvel-force-chart.surge.sh/marvel_force_chart_img/top_captainmarvel.png") 
            )

#Comercial
nodes.append( Node(id="ComercialIndustria", 
                   label="Ventas", 
                   size=25, 
                   shape="circularImage",
                   image="http://marvel-force-chart.surge.sh/marvel_force_chart_img/top_spiderman.png") 
            ) # includes **kwargs
nodes.append( Node(id="EstrategiaV", 
                   size=25,
                   #shape="circularImage",
                   shape="square",
                   #llink="https://JPLTedCas-TedCasDashBoard.hf.space/Hoja%20de%20ruta%20MKT_TedCas%20Health%202025.docx"#https://huggingface.co/spaces/JPLTedCas/TedCasDashBoard/Hoja%20de%20ruta%20MKT_TedCas%20Health%202025.docx",
                   image="http://marvel-force-chart.surge.sh/marvel_force_chart_img/top_captainmarvel.png") 
            )
nodes.append( Node(id="Funnel", 
                   size=25,
                   #shape="circularImage",
                   shape="star",
                   link="http://marvel-force-chart.surge.sh/marvel_force_chart_img/top_captainmarvel.png",
                   
                   image="http://marvel-force-chart.surge.sh/marvel_force_chart_img/top_captainmarvel.png") 
            )
nodes.append( Node(id="ProductosIndustria", 
                   size=25,
                   #shape="circularImage",
                   shape="hexagon",
                   #url="https://docs.google.com/spreadsheets/d/1lEgeCuetraS2rNiNKkeH7PjC0Y3RtxBs/edit?usp=sharing&ouid=103898371342229161899&rtpof=true&sd=true",
                   image="http://marvel-force-chart.surge.sh/marvel_force_chart_img/top_captainmarvel.png") 
            )

#EDGES
#COMERCIAL INDUSTRIAL
edges.append( Edge(source="ComercialIndustria", 
                   label="define", 
                   target="EstrategiaV", 
                   # **kwargs
                   ) 
            ) 
edges.append( Edge(source="ComercialIndustria", 
                   label="proyectos conseguidos", 
                   target="Funnel", 
                   # **kwargs
                   ) 
            ) 
edges.append( Edge(source="ComercialIndustria", 
                   label="productos que vende", 
                   target="ProductosIndustria", 
                   # **kwargs
                   ) 
            ) 
#DIRECCION
edges.append( Edge(source="CEO", 
                   label="dirige", 
                   target="ComercialIndustria", 
                   # **kwargs
                   ) 
            ) 
edges.append( Edge(source="CEO", 
                   label="dirige", 
                   target="I+D", 
                   # **kwargs
                   ) 
            ) 
edges.append( Edge(source="CEO", 
                   label="dirige", 
                   target="PM", 
                   # **kwargs
                   ) 
            ) 



config = Config(width=750,
                height=950,
                directed=True, 
                physics=True, 
                hierarchical=False,
                # **kwargs
                )

return_value = agraph(nodes=nodes, 
                      edges=edges, 
                      config=config)


# Si el usuario selecciona un nodo, mostrar un enlace clickeable
if return_value and return_value["node"]:
    selected_node = return_value["node"]
    
    if selected_node == "ProductosIndustria":
        #url = "https://docs.google.com/spreadsheets/d/1lEgeCuetraS2rNiNKkeH7PjC0Y3RtxBs/edit?usp=sharing"
        url = "http://marvel-force-chart.surge.sh/marvel_force_chart_img/top_captainmarvel.png"
        st.markdown(f"🔗 **[Abrir Documento](<{url}>)**", unsafe_allow_html=True)