Highly Customized Frontend for Computional Biology App

[JonathanAlles]

I wanted to share a Streamlit only frontend for an app used to manage genomics datasets.
The UI is built only in Streamlit with a number of custom components and CSS (details below).

What do you think?

Sidebar: Added footer container with absolute positioning to sidebar bottom

Header: Sticky header (absolute positioning top, z-index 9999)

Avatar: st.popover with round shape and expandable menu with link to settings

Split-Button: (streamlit-split-bottom) custom component for table actions

Button and Layout Styling: st-styled (st_yled) package for container background, button, styling, css templates

Custom CSS: All that could not be done with st_yled.

Source code will be available soon

[andfanilo]

This is beautiful, well done looking forward to the source code deep dive!

[Pradeep_Inani]

Pretty cool.

[Atha]

Hello,

Is the source code available?

[JonathanAlles]

Hi @Atha

The source code will be release by the end of the month since it is part of an open-source app for computational biology, which needs to be finalized first.
I will link it here once it is out.

Most of the styling was applied through the st_yled package which enables a lot style customization for ST components (here’s the docs; there is also a webapp on the community cloud)

Best wishes,
Jonathan

[Radu]

Looks very professional, corporate like

[JonathanAlles]

The source code for the app is available on GitHub as part of the ReadStore GitHub repository.

[JonathanAlles]

The source code for the app is available on GitHub as part of the ReadStore GitHub repository.