CEEU-lab / city_modeller

Urban dynamics performance assessment with data-driven modelling templates
GNU General Public License v3.0
0 stars 0 forks source link

Multipages Setting #14

Closed PyMap closed 1 year ago

PyMap commented 1 year ago

A esta altura que estamos por mergear este PR, es un buen momento para evaluar si este diseño de páginas nos facilita la vida

https://blog.streamlit.io/introducing-multipage-apps/#tips-and-tricks

@fabridiana @NMonnerSans si a medida que avanzamos la botonera del sidebar se pone muy compleja, esta es una buena alternativa para diseñar el wrapper de streamlit

NMonnerSans commented 1 year ago

Vot Sí, como dije en el PR, para mí el routing es mejor para el user, que puede por URL ir a la herramienta que quiere en vez de caer en la landing siempre (y si está bien implementado esto en st, ahorra bastantes recursos levantar las páginas de a 1)

PyMap commented 1 year ago

Ok @NMonnerSans , yo sugeriría de implementarlo cuando tengamos ya mergeados los templates de street greenry y green surfaces. Pero como te parezca mejor a vos

NMonnerSans commented 1 year ago

Como está planteada esta feature de streamlit, no admite jerarquías, así que no va a servir para tener múltiples secciones (micro y macromodeling).

NMonnerSans commented 1 year ago

Una posibilidad de que esto funcione, consistentemente con nuestro caso de uso, es que cada sección sea una página de multipages, pero el tema es que se ven muy feas las secciones. Esto no sirve para navegar con jerarquías, salvo que adentro de micromodeling ponele diseñemos una sidebar de la sección, pero van a quedar muy chiquitas las secciones comparado con las subsecciones. Es medio choto el comportamiento default, y medio invisible para customizarlo.

PyMap commented 1 year ago

Me parece algo enroscado. Yo sacrificaría en elegancia y buscaría simplicidad.

  1. Si hacemos que los links de acceso a los templates de micro y macro estén en el sidebar, yo imaginaba algo así. Algo de eso intenté hacer con el expander. En este ejemplo no hay radio buttons, sino algo así como checkboxes que te llevan a páginas distintas: image

En este ejemplo, los checkbox no son múltiples (si elegis uno, se destilda el otro). Me parecía que hacer algo así no era tan complejo. Lo es?

  1. Otra opción que veo es salir del sidebar y poner todo en un landing page. Algo así. Por ahí, podríamos combinar los botones con imagenes fijas. Tipo:
    
    st.markdown("Micromodelling")
    col1, col2, col3, col4 = st.columns(4)

col1.image("GreenViewIndex.jpg")

def about(): st.write("Welcome to GVI micromodelling template") if st.button("Click GVI"): st.write("Welcome to GVI micromodelling template")

Es decir, que haya una imagen y debajo un boton. Eso se podr[ia ordenar bajo dos títulos (Micro y Macro) y debajo cada imagen con su boton

3. Y sino, la opción más simple seríadejar cada pagina debajo de dos títulos (micro y macro) en el sidebar:

st.markdown("Micromodelling")

link to GVI micromodelling template ``` Algo así (donde los íconos corresponden a cada tempalte): ![image](https://user-images.githubusercontent.com/44501803/236487698-8a97c412-ff95-4481-838f-c2f7250b2b76.png)