tabs

app.py

@@ -6,7 +6,7 @@ If you're not a hedgehog, you shouldn't reuse this code. Use this instead: https
 import streamlit as st
 
 
-from st_helpers import make_header, content_text, content_title, cite, make_footer, draw_tab_selector
+from st_helpers import make_header, content_text, content_title, cite, make_footer, make_tabs
 from charts import draw_current_progress
 
 st.set_page_config(page_title="Training Transformers Together", layout="centered")
@@ -64,39 +64,7 @@ content_text("<b> TODO </b> General Story That Weaves Together Three Tabs Below
              "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. "
              "Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.")
 
-query_params = st.experimental_get_query_params()
-tabs = ["Efficient Training", "Security & Privacy", "Make Your Own (TBU)"]
-active_tab = query_params["tab"][0] if "tab" in query_params else tabs[0]
-if active_tab not in tabs:
-    st.experimental_set_query_params(tab=tabs[0])
-    active_tab = tabs[0]
-
-draw_tab_selector(tabs, active_tab)
-
-if active_tab == tabs[0]:
-    content_text("<b> TODO 1</b> Lorem ipsum dolor sit amet, "
-                 "consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim"
-                 " ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. "
-                 "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. "
-                 "Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.")
-
-elif active_tab == tabs[1]:
-    content_text("<b> TODO 2</b> Lorem ipsum dolor sit amet, "
-                 "consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim"
-                 " ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. "
-                 "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. "
-                 "Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.")
-
-elif active_tab == tabs[2]:
-    content_text("<b> TODO 3</b> Lorem ipsum dolor sit amet, "
-                 "consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim"
-                 " ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. "
-                 "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. "
-                 "Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.")
-
-else:
-    st.error("Something has gone terribly wrong. Please keep your fingers crossed while reloading the page.")
-
+make_tabs()
 
 content_text("<b> TODO UPDATE")
 make_footer()

st_helpers.py

@@ -13,6 +13,8 @@ with open("static/content_style.css", 'r', encoding='utf-8') as f:
     content_style_css = f.read()
 with open("static/meta.html", 'r', encoding='utf-8') as f:
     meta_html = f.read()
+with open("static/tabs.html", 'r', encoding='utf-8') as f:
+    tabs_html = f.read()
 with open("static/footer.html", 'r', encoding='utf-8') as f:
     footer_html = f.read()
 
@@ -27,8 +29,12 @@ def make_header():
     )
 
 
+def make_tabs():
+    components.html(f"<style>{content_style_css}</style>{tabs_html}", height=400)
+
+
 def make_footer():
-    components.html(f"<style>{embeds_style_css}</style>{footer_html}", height=110)
+    components.html(f"<style>{content_style_css}</style>{footer_html}", height=110)
 
 
 def content_title(title: str, vspace_before: int = 0, vspace_after: int = 0):
@@ -51,22 +57,3 @@ CITATIONS = {}
 def cite(tag):
     CITATIONS.setdefault(tag, len(CITATIONS) + 1)
     return f"&nbsp;[{CITATIONS[tag]}]"
-
-
-def draw_tab_selector(tabs: Sequence[str], active_tab: str):
-    li_items = "".join(
-        f"""
-        <li class="nav-item">
-            <a class="nav-link{' active' if t == active_tab else ''}" href="/?tab={t}">{t}</a>
-        </li>
-        """
-        for t in tabs
-    )
-    tabs_html = f"""
-        <ul class="nav nav-tabs">
-        {li_items}
-        </ul>
-    """
-
-    st.markdown(tabs_html, unsafe_allow_html=True)
-    st.markdown("<br>", unsafe_allow_html=True)

static/tabs.html

@@ -0,0 +1,36 @@
+<html lang="en">
+<head>
+  <title>Bootstrap Example</title>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
+  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
+  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
+</head>
+<body>
+
+<div id="tabs" style="width: 100%; margin:0 auto;">
+    <div>
+        <!-- Nav tabs -->
+        <ul class="nav nav-tabs" role="tablist">
+            <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">"Efficient Training"</a></li>
+            <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Security & Privacy</a></li>
+            <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Make Your Own (TBU)</a></li>
+        </ul>
+
+        <!-- Tab panes -->
+        <div class="tab-content">
+            <div role="tabpanel" class="tab-pane active" id="home">
+                <b> TODO 1</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+            </div>
+            <div role="tabpanel" class="tab-pane" id="profile">
+                <b> TODO 2</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+            </div>
+            <div role="tabpanel" class="tab-pane" id="messages">
+                <b> TODO 3</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+            </div>
+        </div>
+
+    </div>
+</div>
+</body>