# streamlit-plugins
Components and Frameworks to give new features to streamlit
![Demo Multipage with Navbar](https://raw.githubusercontent.com/quiradev/streamlit-plugins/main/resources/demo1.gif)
## Frameworks
### Multilit (Inherit from Hydralit)
This is a fork of [Hydralit](https://github.com/TangleSpace/hydralit).
In this version, I update all the code to be compatible with the last version of streamlit.
And it improves the interface to be more user-friendly. Also, it respects the strealit active theme and can be override by the user.
In a future is planned to incorporate the new multipage native of streamlit. Instead of the current implementation.
Can use built-in buttons to change the page, or use a function to change the page programmatically.
![Change Page with button](https://raw.githubusercontent.com/quiradev/streamlit-plugins/main/resources/demo2.gif)
## Components
The Navbar and Loader component are inherited from Hydralit components, only to give support to the multilit framework.
But this version has improve the interface and loaders to be more user-friendly.
### Navbar (Sidebar, Topbar and Under Streamlit Header)
![Navbar Component](https://raw.githubusercontent.com/quiradev/streamlit-plugins/main/resources/navbar_position_modes.gif)
Component to use when you want to have a navbar in your streamlit app.
It can be used with native multipage streamlit, or use the multilit framework.
If you want to use the native multipage streamlit, you can use the `st_navbar` function to create the navbar.
This component it returns the id of the defined menu that has to run the page.
This is an [example of multipage]() with native streamlit
```python
st.set_page_config(layout="wide")
if "logged_in" not in st.session_state:
st.session_state.logged_in = True
if "app_id" not in st.session_state:
st.session_state.app_id = None
if "active_app_id" not in st.session_state:
st.session_state.active_app_id = None
USER = "admin"
PASSWORD = "admin"
positions = ["top", "under", "side"]
def my_sidebar():
with st.sidebar:
st.write("Logged in:", st.session_state.logged_in)
position_mode = st.radio(
"Navbar position mode",
positions,
# index=positions.index(st.session_state.get("position_mode", "top")),
)
sticky_nav = st.checkbox(
"Sticky navbar", value=st.session_state.get("sticky_nav", True)
)
st.session_state["position_mode"] = position_mode
st.session_state["sticky_nav"] = sticky_nav
def my_heading():
st.title("Streamlit Multi-Page App")
st.subheader("This is a multi-page app with a native Streamlit navbar.")
st.markdown("> But only vizualize well with navbar on `top` position")
def login():
_, col, _ = st.columns([2, 6, 2])
with col:
with st.form(key="login_form"):
user = st.text_input("Username")
password = st.text_input("Password", type="password")
submitted = st.form_submit_button("Submit")
with st.expander("Psst! Here's the login info"):
st.write(f"Username and Password is:")
st.markdown(f"""
```bash
{USER}
```
""")
if submitted:
if user == USER and password == PASSWORD:
st.session_state.logged_in = True
st.session_state.app_id = "app_default"
st.rerun()
else:
st.toast("Invalid username or password", icon="❌")
def account():
st.write("Account page")
st.caption("This is a protected page. Only logged in users can view this.")
def settings():
st.button("Theme")
def logout():
st.session_state.logged_in = False
st.session_state.app_id = None
st.session_state.active_app_id = None
st.rerun()
st.logo(
image="https://streamlit.io/images/brand/streamlit-logo-primary-colormark-darktext.svg",
icon_image="https://streamlit.io/images/brand/streamlit-mark-color.png"
)
login_page = st.Page(login, title="Log in", icon=":material/login:")
account_page = st.Page(account, title="Account", icon=":material/account_circle:")
settings_page = st.Page(settings, title="Settings", icon=":material/settings:")
dashboard = st.Page("dashboard.py", title="Dashboard", icon=":material/dashboard:", default=True)
bugs = st.Page("reports/bugs.py", title="Bug reports", icon=":material/bug_report:")
alerts = st.Page("reports/alerts.py", title="System alerts", icon=":material/notification_important:")
search = st.Page("tools/search.py", title="Search", icon=":material/search:")
history = st.Page("tools/history.py", title="History", icon=":material/history:")
# Streamlit Navigation
if st.session_state.logged_in:
pg = st.navigation(
{
"Account": [account_page, settings_page, logout],
"Reports": [dashboard, bugs, alerts],
"Tools": [search, history],
}
)
else:
pg = st.navigation([login_page])
pg.run()
```
And if you want to use streamlit Navbar, it has to be addapted to this code:
```python
# ...
search = st.Page("tools/search.py", title="Search", icon=":material/search:")
history = st.Page("tools/history.py", title="History", icon=":material/history:")
# ---Only for the demo---
my_sidebar()
position_mode = st.session_state.get("position_mode", "top")
sticky_nav = st.session_state.get("sticky_nav", True)
# ---Only for the demo---
app_id = "app_login"
if st.session_state.logged_in:
# SOME TEXT ABOVE THE NAVBAR
if position_mode == "top":
my_heading()
# --------# HERE IS THE CHANGE #--------
from streamlit_plugins.components.navbar import st_navbar, build_menu_from_st_pages
# Create the menu definition
menu_data, menu_account_data, app_map = build_menu_from_st_pages(
{
"name": "Reports", "subpages": [dashboard, bugs, alerts], "icon": ":material/assessment:"
},
{
"name": "Tools", "subpages": [search, history], "icon": ":material/extension:"
},
login_app=login_page, account_app=account_page, settings_app=settings_page,
logout_callback=logout,
)
# Instantiate a Navbar (You can made more than one - Maybe unstable)
app_id = st_navbar(
menu_definition=menu_data if st.session_state.logged_in else [],
login_name=menu_account_data,
hide_streamlit_markers=False,
override_app_selected_id=st.session_state.app_id,
sticky_nav=sticky_nav, # at the top or not
position_mode=position_mode, # top or subtop
)
# --------# HERE IS THE CHANGE #--------
if position_mode != "top":
my_heading()
if not st.session_state.logged_in and app_id != "app_login":
app_id = "app_login"
if app_id == "app_login":
if st.session_state.logged_in:
app_id = "app_logout"
# Loads the selected app content
# Handled by Streamlit page navigation, but hardcoded to make work with navbar plugin
# In a future, can be hide this code as internal, inside of `st_navbar`
st.session_state.app_id = None # Added to fix login/logout issue
st.session_state.active_app_id = app_id
app_map[app_id]._can_be_called = True
app_map[app_id].run()
```
#### Is responsive!!
![Navbar Component Responsive](https://raw.githubusercontent.com/quiradev/streamlit-plugins/main/resources/navbar_responsive.gif)
### Loader (Inherit from Hydralit Components)
### AnnotatedText (Inspired from SpaCy Anotated Text)
### LabelStudio (Developing)
LabelStudio adapter for NERs into streamlit
### SnakeViz
Interface in streamlit to measue bottlenecks in yout code
Raw data
{
"_id": null,
"home_page": "https://github.com/quiradev/streamlit-plugins",
"name": "streamlit-plugins",
"maintainer": null,
"docs_url": null,
"requires_python": ">=3.9",
"maintainer_email": null,
"keywords": "streamlit, plugins, framework, components, navbar, loader, multilit",
"author": "Victor Quilon Ranera",
"author_email": "v.quilonr@gmail.com",
"download_url": "https://files.pythonhosted.org/packages/68/4f/674c48c269039b9e690be003099916fcb7d921fc2ea0c106c4af2ba51c8f/streamlit_plugins-0.3.2.tar.gz",
"platform": null,
"description": "# streamlit-plugins\nComponents and Frameworks to give new features to streamlit\n\n![Demo Multipage with Navbar](https://raw.githubusercontent.com/quiradev/streamlit-plugins/main/resources/demo1.gif)\n\n## Frameworks\n### Multilit (Inherit from Hydralit)\nThis is a fork of [Hydralit](https://github.com/TangleSpace/hydralit).\n\nIn this version, I update all the code to be compatible with the last version of streamlit.\nAnd it improves the interface to be more user-friendly. Also, it respects the strealit active theme and can be override by the user.\nIn a future is planned to incorporate the new multipage native of streamlit. Instead of the current implementation.\n\nCan use built-in buttons to change the page, or use a function to change the page programmatically.\n![Change Page with button](https://raw.githubusercontent.com/quiradev/streamlit-plugins/main/resources/demo2.gif)\n\n## Components\nThe Navbar and Loader component are inherited from Hydralit components, only to give support to the multilit framework.\nBut this version has improve the interface and loaders to be more user-friendly.\n\n### Navbar (Sidebar, Topbar and Under Streamlit Header)\n![Navbar Component](https://raw.githubusercontent.com/quiradev/streamlit-plugins/main/resources/navbar_position_modes.gif)\nComponent to use when you want to have a navbar in your streamlit app.\nIt can be used with native multipage streamlit, or use the multilit framework.\n\nIf you want to use the native multipage streamlit, you can use the `st_navbar` function to create the navbar.\n\nThis component it returns the id of the defined menu that has to run the page.\n\nThis is an [example of multipage]() with native streamlit\n```python\nst.set_page_config(layout=\"wide\")\n\nif \"logged_in\" not in st.session_state:\n st.session_state.logged_in = True\n\nif \"app_id\" not in st.session_state:\n st.session_state.app_id = None\n\nif \"active_app_id\" not in st.session_state:\n st.session_state.active_app_id = None\n\nUSER = \"admin\"\nPASSWORD = \"admin\"\n\npositions = [\"top\", \"under\", \"side\"]\n\ndef my_sidebar():\n with st.sidebar:\n st.write(\"Logged in:\", st.session_state.logged_in)\n position_mode = st.radio(\n \"Navbar position mode\",\n positions,\n # index=positions.index(st.session_state.get(\"position_mode\", \"top\")),\n )\n sticky_nav = st.checkbox(\n \"Sticky navbar\", value=st.session_state.get(\"sticky_nav\", True)\n )\n st.session_state[\"position_mode\"] = position_mode\n st.session_state[\"sticky_nav\"] = sticky_nav\n\n\ndef my_heading():\n st.title(\"Streamlit Multi-Page App\")\n st.subheader(\"This is a multi-page app with a native Streamlit navbar.\")\n st.markdown(\"> But only vizualize well with navbar on `top` position\")\n\n\ndef login():\n _, col, _ = st.columns([2, 6, 2])\n with col:\n with st.form(key=\"login_form\"):\n user = st.text_input(\"Username\")\n password = st.text_input(\"Password\", type=\"password\")\n submitted = st.form_submit_button(\"Submit\")\n\n with st.expander(\"Psst! Here's the login info\"):\n st.write(f\"Username and Password is:\")\n st.markdown(f\"\"\"\n ```bash\n {USER}\n ```\n \"\"\")\n\n if submitted:\n if user == USER and password == PASSWORD:\n st.session_state.logged_in = True\n st.session_state.app_id = \"app_default\"\n st.rerun()\n else:\n st.toast(\"Invalid username or password\", icon=\"\u274c\")\n\n\ndef account():\n st.write(\"Account page\")\n st.caption(\"This is a protected page. Only logged in users can view this.\")\n\n\ndef settings():\n st.button(\"Theme\")\n\n\ndef logout():\n st.session_state.logged_in = False\n st.session_state.app_id = None\n st.session_state.active_app_id = None\n st.rerun()\n\nst.logo(\n image=\"https://streamlit.io/images/brand/streamlit-logo-primary-colormark-darktext.svg\",\n icon_image=\"https://streamlit.io/images/brand/streamlit-mark-color.png\"\n)\n\nlogin_page = st.Page(login, title=\"Log in\", icon=\":material/login:\")\naccount_page = st.Page(account, title=\"Account\", icon=\":material/account_circle:\")\nsettings_page = st.Page(settings, title=\"Settings\", icon=\":material/settings:\")\ndashboard = st.Page(\"dashboard.py\", title=\"Dashboard\", icon=\":material/dashboard:\", default=True)\nbugs = st.Page(\"reports/bugs.py\", title=\"Bug reports\", icon=\":material/bug_report:\")\nalerts = st.Page(\"reports/alerts.py\", title=\"System alerts\", icon=\":material/notification_important:\")\nsearch = st.Page(\"tools/search.py\", title=\"Search\", icon=\":material/search:\")\nhistory = st.Page(\"tools/history.py\", title=\"History\", icon=\":material/history:\")\n\n# Streamlit Navigation\nif st.session_state.logged_in:\n pg = st.navigation(\n {\n \"Account\": [account_page, settings_page, logout],\n \"Reports\": [dashboard, bugs, alerts],\n \"Tools\": [search, history],\n }\n )\nelse:\n pg = st.navigation([login_page])\n\npg.run()\n```\n\nAnd if you want to use streamlit Navbar, it has to be addapted to this code:\n```python\n# ...\nsearch = st.Page(\"tools/search.py\", title=\"Search\", icon=\":material/search:\")\nhistory = st.Page(\"tools/history.py\", title=\"History\", icon=\":material/history:\")\n\n# ---Only for the demo---\nmy_sidebar()\nposition_mode = st.session_state.get(\"position_mode\", \"top\")\nsticky_nav = st.session_state.get(\"sticky_nav\", True)\n# ---Only for the demo---\n\n\n\n\napp_id = \"app_login\"\nif st.session_state.logged_in:\n # SOME TEXT ABOVE THE NAVBAR\n if position_mode == \"top\":\n my_heading()\n \n # --------# HERE IS THE CHANGE #--------\n from streamlit_plugins.components.navbar import st_navbar, build_menu_from_st_pages\n # Create the menu definition\n menu_data, menu_account_data, app_map = build_menu_from_st_pages(\n {\n \"name\": \"Reports\", \"subpages\": [dashboard, bugs, alerts], \"icon\": \":material/assessment:\"\n },\n {\n \"name\": \"Tools\", \"subpages\": [search, history], \"icon\": \":material/extension:\"\n },\n login_app=login_page, account_app=account_page, settings_app=settings_page,\n logout_callback=logout,\n )\n # Instantiate a Navbar (You can made more than one - Maybe unstable)\n app_id = st_navbar(\n menu_definition=menu_data if st.session_state.logged_in else [],\n login_name=menu_account_data,\n hide_streamlit_markers=False,\n override_app_selected_id=st.session_state.app_id,\n sticky_nav=sticky_nav, # at the top or not\n position_mode=position_mode, # top or subtop\n )\n # --------# HERE IS THE CHANGE #--------\n\n if position_mode != \"top\":\n my_heading()\n\nif not st.session_state.logged_in and app_id != \"app_login\":\n app_id = \"app_login\"\n\nif app_id == \"app_login\":\n if st.session_state.logged_in:\n app_id = \"app_logout\"\n\n\n# Loads the selected app content\n# Handled by Streamlit page navigation, but hardcoded to make work with navbar plugin\n# In a future, can be hide this code as internal, inside of `st_navbar`\nst.session_state.app_id = None # Added to fix login/logout issue\nst.session_state.active_app_id = app_id\napp_map[app_id]._can_be_called = True\napp_map[app_id].run()\n```\n\n#### Is responsive!!\n![Navbar Component Responsive](https://raw.githubusercontent.com/quiradev/streamlit-plugins/main/resources/navbar_responsive.gif)\n\n### Loader (Inherit from Hydralit Components)\n\n### AnnotatedText (Inspired from SpaCy Anotated Text)\n\n### LabelStudio (Developing)\nLabelStudio adapter for NERs into streamlit\n\n### SnakeViz\nInterface in streamlit to measue bottlenecks in yout code\n",
"bugtrack_url": null,
"license": "MIT",
"summary": "Components and Frameworks to give new features to streamlit",
"version": "0.3.2",
"project_urls": {
"Homepage": "https://github.com/quiradev/streamlit-plugins"
},
"split_keywords": [
"streamlit",
" plugins",
" framework",
" components",
" navbar",
" loader",
" multilit"
],
"urls": [
{
"comment_text": "",
"digests": {
"blake2b_256": "8c6b57a0d1fa00826c537ce9efbd99c521b310799fde1034e1fc30dbfce2bd8a",
"md5": "19c4b8dc293cb39b574ecd8e6df45b6f",
"sha256": "e9d1c2e5f6e3d4d642ec6ba34486d6672146018ea74be20caef0345274bbd51b"
},
"downloads": -1,
"filename": "streamlit_plugins-0.3.2-py3-none-any.whl",
"has_sig": false,
"md5_digest": "19c4b8dc293cb39b574ecd8e6df45b6f",
"packagetype": "bdist_wheel",
"python_version": "py3",
"requires_python": ">=3.9",
"size": 8813759,
"upload_time": "2024-11-08T10:59:28",
"upload_time_iso_8601": "2024-11-08T10:59:28.139048Z",
"url": "https://files.pythonhosted.org/packages/8c/6b/57a0d1fa00826c537ce9efbd99c521b310799fde1034e1fc30dbfce2bd8a/streamlit_plugins-0.3.2-py3-none-any.whl",
"yanked": false,
"yanked_reason": null
},
{
"comment_text": "",
"digests": {
"blake2b_256": "684f674c48c269039b9e690be003099916fcb7d921fc2ea0c106c4af2ba51c8f",
"md5": "903cef881d9f7db3496d061784bec86e",
"sha256": "c55140a19098e284450991b261e0a906039e7f868111695b184e811198e405f0"
},
"downloads": -1,
"filename": "streamlit_plugins-0.3.2.tar.gz",
"has_sig": false,
"md5_digest": "903cef881d9f7db3496d061784bec86e",
"packagetype": "sdist",
"python_version": "source",
"requires_python": ">=3.9",
"size": 8758501,
"upload_time": "2024-11-08T10:59:32",
"upload_time_iso_8601": "2024-11-08T10:59:32.973928Z",
"url": "https://files.pythonhosted.org/packages/68/4f/674c48c269039b9e690be003099916fcb7d921fc2ea0c106c4af2ba51c8f/streamlit_plugins-0.3.2.tar.gz",
"yanked": false,
"yanked_reason": null
}
],
"upload_time": "2024-11-08 10:59:32",
"github": true,
"gitlab": false,
"bitbucket": false,
"codeberg": false,
"github_user": "quiradev",
"github_project": "streamlit-plugins",
"travis_ci": false,
"coveralls": false,
"github_actions": true,
"requirements": [],
"lcname": "streamlit-plugins"
}