buttons working better

streamlit_viz.py

@@ -188,12 +188,6 @@ def main():
   frames = [go.Frame(data=graph_obj) for graph_obj in graph_objs]
   # show them with streamlit
 
-  # this puts them all on the screen at once
-  # like each new one shows up below the previous one
-  # instead of replacing the previous one
-  #for fig in figures:
-  #  st.plotly_chart(fig)
-  #  time.sleep(1)
 
   # This works the way I want
   # but the plot is tiny
@@ -229,47 +223,28 @@ def main():
   # this one finally set the speed
   # no mention of how they figured this out but thank goodness I found it
   # https://towardsdatascience.com/basic-animation-with-matplotlib-and-plotly-5eef4ad6c5aa
+
+  # this also has custom animation speeds in it
+  # https://plotly.com/python/custom-buttons/#reference
   ani_fig = go.Figure(
     data=graph_objs[0],
     frames=frames,
     layout=go.Layout(
       updatemenus=[{
         'type':'buttons',
-        # Streamlit's dark mode erases the text from this button
-        # but it shows up in light mode
-        # also, st.button() buttons show up fine in dark mode
-
-        # Trying some of these to see whether I can get the button text to show up
         # https://plotly.com/python/reference/layout/updatemenus/
 
-        # this doesn't have any effect
-        # in either light or dark mode
-        # `fill` value is rgb(244, 250, 255) still
-        # when I change this, the browser debugger says that the <text> tag is updating
-        # not the surrounding <rect>
-        # also there isn't any change in the <text> tag, it just updates
-        'bgcolor': '#00f',
-
-        # This does make the text show up so that's good
-        'font': {'color': '#639'},
-        # And this one works too
-        'bordercolor': '#f7b',
-
-        # set all buttons to inactive
-        # to see whether that gives them all bgcolor
-        # yep that works
-        #'active': -1,
-
-        # Or set showactive to False?
-        # Also works
+        # Always show the background color on buttons
+        # streamlit breaks the background color of the active button in darkmode
         'showactive': False,
-
-        # they always flash white on mouseover though
-        # I'm not sure I can change that behavior
-
-        # The actual html "style" text in the page changes when I mouseover the elements
-        # which makes me think it's not something I can affect
-
+        # background color of the buttons
+        'bgcolor': '#fff',
+        # font in the buttons
+        'font': {'color': '#000'},
+        # border color of the buttons
+        'bordercolor': '#000',
+
+        # Play button
         'buttons':[{
           'label':'Play',
           'method': 'animate',
@@ -277,18 +252,15 @@ def main():
             'frame': {'duration':5000},
             'transition': {'duration': 2500},
           }],
-        },
-        # Now this one gets the bgcolor
-        # and if I click it then the other button gets
-        # the bgcolor
-        # so a button only gets bgcolor if it's not "active"
-        {'label': 'Button 2', 'method':'skip'}
+        }
        ]
       }]
     )
   )
   st.plotly_chart(ani_fig)
 
+  st.markdown(f'## {len(FEATS)}')
+
 
 if __name__=='__main__':
   main()