Experimenting with the Layout including a Grid

Random
1

Hi All

I was trying to experiment with what can be done today with respect to a grid/ dashboard layout.

The conclusion is that some things cannot be done but I need to wait for custom widgets or an official grid before it get’s really interesting.

I’ve included the experiment in the awesome-streamlit.org gallery.

Feel free to contribute your improvements here https://github.com/MarcSkovMadsen/awesome-streamlit/blob/master/gallery/layout_experiments/app.py

image
image.png1920×1032 109 KB

8 Likes
2

And here is a full width page

image
image1920×1032 78.3 KB

3 Likes
3

Added dark theme and plotly subplots

image
image.png1920×1032 114 KB

4 Likes
4

@Marc thank you for continuing to innovate and push the boundaries in Streamlit! Really cool to see what you’re doing and definitely gives some food for thought as we are speccing out how advanced layout could work :slight_smile:

1 Like
5

I have so many friends, colleagues and fellow pythonistas whose life would be much easier if we could just push Streamlit a little bit.

That’s my motivation.

8 Likes
6

Hi @Marc this is really cool, thanks so much for all the work on it. Have you built in a way to display interactive data in the grid layout (the way st.write() displays a data frame for example)?

1 Like
7

Hi @fingercracker

Better functionality for laying out things is on the Roadmap and I believe it is coming up soon.

2 Likes
8

Hi marc! how to add user input value into grid.cell().text() or grid.cell().markdown() ?

9

Thanks Marc, this is awesome. I can’t wait until we figure out how to get plotly into the grid - the subplots are nice, but fall short at figures with multiple traces. Will post if I figure something out in the interim to show two more advanced multiple-trace figures side-by-side.

10

Very nice layout thing Marc!
I see no problem plotting several traces/curves with plotly and subplots :

import streamlit as st
import numpy as np
import plotly.express as px
from plotly.subplots import make_subplots
import plotly.graph_objects as go


st.button("Re-run")

pts = 50
x1 = np.arange(pts)
y1 = np.random.random(pts)
y2 = np.random.random(pts)
y3 = (x1/pts)**2

fig = make_subplots(rows=1, cols=2)

fig.add_trace(go.Scatter(x=x1,y=y1,
                    mode='markers',
                    name='markers'),row=1,col=1)
fig.add_trace(go.Scatter(x=x1,y=y2,
                    mode='markers',
                    name='markers2'),row=1,col=2)
fig.add_trace(go.Scatter(x=x1,y=y3,
                    mode='lines',
                    name='lines'),row=1,col=2)

fig.update_layout(height=300, width=800, title_text="Side By Side Subplots")

g = st.plotly_chart(fig)