├── .vscode
    ├── launch.json
    └── settings.json
├── LICENSE
├── README.md
├── app.py
├── frontend
    ├── __init__.py
    ├── __pycache__
    │   └── __init__.cpython-38.pyc
    └── index.html
├── frontend_multipage_app
    ├── __init__.py
    └── index.html
├── images
    ├── streamlit-component-toggle-buttons.gif
    └── streamlit-component-toggle-buttons.png
├── multipage_app.py
└── run.cmd


/.vscode/launch.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     // Use IntelliSense to learn about possible attributes.
 3 |     // Hover to view descriptions of existing attributes.
 4 |     // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
 5 |     "version": "0.2.0",
 6 |     "configurations": [
 7 |         {
 8 |             "name": "Python: Current File",
 9 |             "type": "python",
10 |             "request": "launch",
11 |             "program": "${file}",
12 |             "console": "integratedTerminal",
13 |             "env": {"DEBUG": "true"}
14 |         },
15 |         {
16 |             "name": "Python: Remote Attach",
17 |             "type": "python",
18 |             "request": "attach",
19 |             "port": 6789,
20 |             "host": "localhost",
21 |             "justMyCode": false,
22 |             "redirectOutput": true,
23 |             "pathMappings": [
24 |                 {
25 |                     "localRoot": "${workspaceFolder}",
26 |                     "remoteRoot": "."
27 |                 }
28 |             ]
29 |         }
30 |     ]
31 | }


--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 |     "git.ignoreLimitWarning": true
3 | }


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2021 Arvindra
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # Streamlit toggle buttons component
  2 | 
  3 | > Arvindra Sehmi, CloudOpti Ltd. | [Website](https://sehmiconscious.blogspot.com) | [LinkedIn](https://www.linkedin.com/in/asehmi/)
  4 | 
  5 | > Updated: 28 September, 2021
  6 | 
  7 | ---
  8 | 
  9 | **TL;DR:** Implementation of toggle buttons as a pure static HTML/JS Streamlit component. The key learning from this
 10 | sample application is that the Streamlit app server and front end web server are not required to be separate. _The component implementation is in a plain HTML/JS file, which is loaded, executed and renderd directly from the Streamlit app server_.
 11 | 
 12 | ## Demo
 13 | 
 14 | ![streamlit-component-toggle-buttons](./images/streamlit-component-toggle-buttons.gif)
 15 | 
 16 | ## Demo Multipage App
 17 | 
 18 | You can find a complete mini multipage app implementation in `./frontend_multipage_app`, which uses this simple framework. Run the app from the root folder:
 19 | 
 20 | ```
 21 | $ streamlit run multipage_app.py
 22 | You can now view your Streamlit app in your browser.
 23 | 
 24 |   Local URL: http://localhost:8765
 25 |   Network URL: http://192.168.1.100:8765
 26 | ```
 27 | 
 28 | ## Overview
 29 | 
 30 | The component's front end implementation is in the `./frontend/` folder. There are two files here, `__init__.py` and `index.html`.
 31 | 
 32 | **`./frontend/__init__.py`**
 33 | 
 34 | This code (the presence of `__init__.py` makes it a Python module, actually) simply declares the component using Streamlit's `components.declare_component` API and exports a handle to it. This handle is `component_toggle_buttons`. You can see the `path` to the component is the same folder. When Streamlit loads the component it will serve the default `index.html` file from this location.
 35 | 
 36 | ```python
 37 | import streamlit.components.v1 as components
 38 | component_toggle_buttons = components.declare_component(
 39 |     name='component_toggle_buttons',
 40 |     path='./frontend'
 41 | )
 42 | ```
 43 | 
 44 | **`./frontend/index.html`**
 45 | 
 46 | This self-contained file does the following:
 47 | 
 48 | 1. Draws a simple HTML user interface with styled buttons, in two class groups
 49 | 2. Loads JavaScript which implements core Streamlit component life cycle actions, namely the ability to:
 50 | - Inform Streamlit client that the component is ready, using `streamlit:componentReady` message type.
 51 | - Calculate or get it's own visible screen height, and inform Streamlit client, using `streamlit:setFrameHeight` message type.
 52 | - Handle inbound `message` events from the Streamlit client; with `streamlit:render` event type being critical.
 53 | - Send values (i.e., objects) to the Streamlit client application, using `streamlit:setComponentValue` message type.
 54 | 
 55 | ```html
 56 | <html>
 57 | <head>
 58 |   <style type="text/css">
 59 |   <!-- Removed for brevity -->
 60 |   </style>
 61 | </head>
 62 | 
 63 | <!--
 64 | ----------------------------------------------------
 65 | Your custom static HTML goes in the body:
 66 | -->
 67 | 
 68 | <body>
 69 |   <h2 id="group_1_header">Awaiting value from Streamlit</h2>
 70 |   <input type="button" id="0" value="Action 1.1" class="btn_group_1 off" onclick="toggle(this, 'btn_group_1');">
 71 |   <input type="button" id="1" value="Action 1.2" class="btn_group_1 off" onclick="toggle(this, 'btn_group_1');">
 72 |   <input type="button" id="2" value="Action 1.3" class="btn_group_1 off" onclick="toggle(this, 'btn_group_1');">
 73 | 
 74 |   <h2 id="group_2_header">Awaiting value from Streamlit</h2>
 75 |   <input type="button" id="0" value="Action 2.1" class="btn_group_2 off" onclick="toggle(this, 'btn_group_2');">
 76 |   <input type="button" id="1" value="Action 2.2" class="btn_group_2 off" onclick="toggle(this, 'btn_group_2');">
 77 |   <input type="button" id="2" value="Action 2.3" class="btn_group_2 off" onclick="toggle(this, 'btn_group_2');">
 78 | 
 79 |   <div id="message_div">
 80 |     <br /><span id="message_label">Awaiting value from Streamlit</span>
 81 |   </div>
 82 | </body>
 83 | 
 84 | <script type="text/javascript">
 85 |   // ----------------------------------------------------
 86 |   // These functions should be used as is to perform required Streamlit 
 87 |   // component lifecycle actions:
 88 |   //
 89 |   // 1. Signal Streamlit client that component is ready
 90 |   // 2. Signal Streamlit client to set visible height of the component
 91 |   //    (this is optional, in case Streamlit doesn't correctly auto-set it)
 92 |   // 3. Pass values from component to Streamlit client
 93 |   //
 94 | 
 95 |   // Helper function to send type and data messages to Streamlit client
 96 | 
 97 |   const SET_COMPONENT_VALUE = "streamlit:setComponentValue"
 98 |   const RENDER = "streamlit:render"
 99 |   const COMPONENT_READY = "streamlit:componentReady"
100 |   const SET_FRAME_HEIGHT = "streamlit:setFrameHeight"
101 | 
102 |   function _sendMessage(type, data) {
103 |     // copy data into object
104 |     var outboundData = Object.assign({
105 |       isStreamlitMessage: true,
106 |       type: type,
107 |     }, data)
108 | 
109 |     if (type == SET_COMPONENT_VALUE) {
110 |       console.log("_sendMessage data: " + JSON.stringify(data))
111 |       console.log("_sendMessage outboundData: " + JSON.stringify(outboundData))
112 |     }
113 | 
114 |     window.parent.postMessage(outboundData, "*")
115 |   }
116 | 
117 |   function initialize(pipeline) {
118 | 
119 |     // Hook Streamlit's message events into a simple dispatcher of pipeline handlers
120 |     window.addEventListener("message", (event) => {
121 |       if (event.data.type == RENDER) {
122 |         // The event.data.args dict holds any JSON-serializable value
123 |         // sent from the Streamlit client. It is already deserialized.
124 |         pipeline.forEach(handler => {
125 |           handler(event.data.args)
126 |         })
127 |       }
128 |     })
129 | 
130 |     _sendMessage(COMPONENT_READY, { apiVersion: 1 });
131 | 
132 |     // Component should be mounted by Streamlit in an iframe, so try to autoset the iframe height.
133 |     window.addEventListener("load", () => {
134 |       window.setTimeout(function () {
135 |         setFrameHeight(document.documentElement.clientHeight)
136 |       }, 0)
137 |     })
138 | 
139 |     // Optionally, if auto-height computation fails, you can manually set it
140 |     // (uncomment below)
141 |     //setFrameHeight(200)
142 |   }
143 | 
144 |   function setFrameHeight(height) {
145 |     _sendMessage(SET_FRAME_HEIGHT, { height: height })
146 |   }
147 | 
148 |   // The `data` argument can be any JSON-serializable value.
149 |   function notifyHost(data) {
150 |     _sendMessage(SET_COMPONENT_VALUE, data)
151 |   }
152 | 
153 |   // ----------------------------------------------------
154 |   // Your custom functionality for the component goes here:
155 | 
156 |   function toggle(button, group) {
157 |     buttons = document.getElementsByClassName(group)
158 |     console.log(buttons)
159 |     for (let i = 0; i < buttons.length; i++) {
160 |       console.log(buttons.item(i))
161 |     }
162 | 
163 |     for (let i = 0; i < buttons.length; i++) {
164 |       if (button.id == String(i) & button.className.includes("off")) {
165 |         button.className = group + " on"
166 |       } else if (button.id == String(i) & button.className.includes("on")) {
167 |         button.className = group + " off"
168 |       } else {
169 |         buttons.item(i).className = group + " off"
170 |       }
171 |     }
172 | 
173 |     buttons = document.getElementsByClassName(group)
174 |     actions = []
175 |     for (let i = 0; i < buttons.length; i++) {
176 |       btn = buttons.item(i)
177 |       actions.push({ "action": btn.value, "value": btn.className.includes("on") })
178 |     }
179 | 
180 |     states = {}
181 |     states['choice'] = {
182 |       "name": group,
183 |       "state": {
184 |         "action": button.value,
185 |         "value": button.className.includes("on")
186 |       }
187 |     }
188 |     states["options"] = { "name": group, "states": actions }
189 | 
190 |     notifyHost({
191 |       value: states,
192 |       dataType: "json",
193 |     })
194 |   }
195 | 
196 |   // ----------------------------------------------------
197 |   // Here you can customize a pipeline of handlers for 
198 |   // inbound properties from the Streamlit client app
199 | 
200 |   // Set initial value sent from Streamlit!
201 |   function initializeProps_Handler(props) {
202 |     let header1 = document.getElementById("group_1_header")
203 |     header1.innerText = props.initial_state.group_1_header
204 | 
205 |     let header2 = document.getElementById("group_2_header")
206 |     header2.innerText = props.initial_state.group_2_header
207 |   }
208 |   // Access values sent from Streamlit!
209 |   function dataUpdate_Handler(props) {
210 |     let msgLabel = document.getElementById("message_label")
211 |     msgLabel.innerText = `Update [${props.counter}] at ${props.datetime}`
212 |   }
213 |   // Simply log received data dictionary
214 |   function log_Handler(props) {
215 |     console.log("Received from Streamlit: " + JSON.stringify(props))
216 |   }
217 | 
218 |   let pipeline = [initializeProps_Handler, dataUpdate_Handler, log_Handler]
219 | 
220 |   // ----------------------------------------------------
221 |   // Finally, initialize component passing in pipeline
222 | 
223 |   initialize(pipeline)
224 | 
225 | </script>
226 | 
227 | </html>
228 | ```
229 | 
230 | In this basic component, notice `_sendMessage()` function uses `window.parent.postMessage()`, which is as fundamental as it gets. The value objects you send to the Streamlit client application must be any JSON serializable object. Conceptually they can be viewed as data or events carrying a data payload. Inbound message values received on `streamlit:render` events, are automatically de-serialized to JavaScript objects.
231 | 
232 | It's only illustrative, but I have also implemented a simple pipeline of inbound message handlers and a dispatcher. I show this being used to initialize component data values, update the user interface, and to log output to the console. See `*_Handler()` functions, `pipeline`, `initialize()` function.
233 | 
234 | The counterpart to the front end is the Streamlit application. Its entry point is in `app.py`. The `frontend` module is imported and the component handle, `component_toggle_buttons`, is used to create an instance of it. Interactions in the front end which give rise to value notifications will be received in the Streamlit client, which can be acted upon as required. I've provided simple design abstractions to make running of the component and handling its return values more explicit. They are `run_component()` and `handle_event()` respectively. This _wrapping_ makes the implementation neater and it'll be conceptually easier to understand the implementation of more advanced components when you're ready to take the next step implementing React component front ends.
235 | 
236 | The HTML code for the toggle buttons groups a set of related buttons using a named class (my own convention). This group class name and the button instance is passed to the `onclick` handler, `toggle()`, which manages the styling for the `on/off` state, and
237 | creates a JSON object to hold the button group's current state and the state of the clicked button. The button `id`s in each group are numbered from `0` upwards (again by my own convention). Finally, the JSON object is communicated to the Streamlit
238 | client application using `notifyHost()`.
239 | 
240 | Here's a brief explantion of the user interface elements (pink is `on` and dark grey is `off`):
241 | 
242 | ![streamlit-component-toggle-buttons-image](./images/streamlit-component-toggle-buttons.png)
243 | 
244 | And below is an example of the JSON object sent to the Streamlit client, indicating that button `Action 2.3` in button group `btn_group_2` was clicked to the `on` state. In addition, the state of all buttons in the group `btn_group_2` is provided. Feel free to change the JSON payload schema to suit your own requirements.
245 | 
246 | ```json
247 | {
248 |   "choice": {
249 |     "name": "btn_group_2",
250 |     "state": {
251 |       "action": "Action 2.3",
252 |       "value": true
253 |     }
254 |   },
255 |   "options": {
256 |     "name": "btn_group_2",
257 |     "states": [
258 |       {
259 |         "action": "Action 2.1",
260 |         "value": false
261 |       },
262 |       {
263 |         "action": "Action 2.2",
264 |         "value": false
265 |       },
266 |       {
267 |         "action": "Action 2.3",
268 |         "value": true
269 |       }
270 |     ]
271 |   }
272 | }
273 | ```
274 | 
275 | ## Running the Toggle Buttons Component
276 | 
277 | The component is run in the same way as any Streamlit app.
278 | 
279 | - Open a console window and change directory to the root folder of the cloned GitHub repo, where `app.py` is.
280 | - Now run the Streamlit server with this app.
281 | 
282 | ```
283 | $ streamlit run app.py
284 | You can now view your Streamlit app in your browser.
285 | 
286 |   Local URL: http://localhost:8765
287 |   Network URL: http://192.168.1.100:8765
288 | ```
289 | 
290 | - The app should start on the default port (8765) and launch a browser window to display the following page:
291 | 
292 | ---
293 | 
294 | All code is published under [MIT license](./LICENSE), so feel free to make changes and please **fork the repo if you're making changes and submit pull requests**.
295 | 
296 | If you like this work, consider clicking that **star** button. Thanks!


--------------------------------------------------------------------------------
/app.py:
--------------------------------------------------------------------------------
 1 | import streamlit as st
 2 | from datetime import datetime
 3 | 
 4 | from frontend import component_toggle_buttons
 5 | 
 6 | if 'counter' not in st.session_state:
 7 |     st.session_state.counter = 0
 8 | 
 9 | def main():
10 |     def run_component(props):
11 |         value = component_toggle_buttons(key='toggle_buttons', **props)
12 |         return value
13 |     def handle_event(value):
14 |         st.header('Streamlit')
15 |         st.write('Received from component: ', value)
16 | 
17 |     st.title('Toggle Buttons Component Demo')
18 |     st.session_state.counter = st.session_state.counter + 1
19 |     props = {
20 |         'initial_state': {
21 |             'group_1_header': 'Choose an option from group 1',
22 |             'group_2_header': 'Choose an option from group 2'
23 |         },
24 |         'counter': st.session_state.counter,
25 |         'datetime': str(datetime.now().strftime("%H:%M:%S, %d %b %Y"))
26 |     }
27 | 
28 |     handle_event(run_component(props))   
29 | 
30 | if __name__ == '__main__':
31 |     main()
32 | 


--------------------------------------------------------------------------------
/frontend/__init__.py:
--------------------------------------------------------------------------------
1 | import streamlit.components.v1 as components
2 | component_toggle_buttons = components.declare_component(
3 |     name='component_toggle_buttons',
4 |     path='./frontend'
5 | )


--------------------------------------------------------------------------------
/frontend/__pycache__/__init__.cpython-38.pyc:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/asehmi/streamlit-toggle-buttons-component/4ac842ca5ea0b40b2d1673c3d0313ea603f4a0cc/frontend/__pycache__/__init__.cpython-38.pyc


--------------------------------------------------------------------------------
/frontend/index.html:
--------------------------------------------------------------------------------
  1 | <html>
  2 | <head>
  3 |   <style type="text/css">
  4 |     body {
  5 |       background-color: lightblue;
  6 |       border-color: rgb(246, 51, 102);
  7 |       border-width: medium;
  8 |       font-family: sans-serif;
  9 |       font-size: 16px;
 10 |     }
 11 | 
 12 |     h1 {
 13 |       font-family: sans-serif;
 14 |       font-size: 24px;
 15 |       font-weight: normal;
 16 |       color: #262730;
 17 |     }
 18 | 
 19 |     h2 {
 20 |       font-family: sans-serif;
 21 |       font-size: 20px;
 22 |       font-weight: normal;
 23 |       color: #262730;
 24 |     }
 25 | 
 26 |     #message_div {
 27 |       font-family: sans-serif;
 28 |       font-size: 12px;
 29 |       font-weight: normal;
 30 |       color: #262730;
 31 |     }
 32 | 
 33 |     .on {
 34 |       border-radius: 5px;
 35 |       font-family: sans-serif;
 36 |       font-size: 16px;
 37 |       border: 1px solid #262730;
 38 |       color: white;
 39 |       background: rgb(246, 51, 102);
 40 |     }
 41 | 
 42 |     .off {
 43 |       border-radius: 5px;
 44 |       font-family: sans-serif;
 45 |       font-size: 16px;
 46 |       border: 1px solid #262730;
 47 |       color: white;
 48 |       background: #262730;
 49 |     }
 50 |   </style>
 51 | </head>
 52 | 
 53 | <!--
 54 | ----------------------------------------------------
 55 | Your custom static HTML goes in the body:
 56 | -->
 57 | 
 58 | <body>
 59 |   <h2 id="group_1_header">Awaiting value from Streamlit</h2>
 60 |   <input type="button" id="0" value="Action 1.1" class="btn_group_1 off" onclick="toggle(this, 'btn_group_1');">
 61 |   <input type="button" id="1" value="Action 1.2" class="btn_group_1 off" onclick="toggle(this, 'btn_group_1');">
 62 |   <input type="button" id="2" value="Action 1.3" class="btn_group_1 off" onclick="toggle(this, 'btn_group_1');">
 63 | 
 64 |   <h2 id="group_2_header">Awaiting value from Streamlit</h2>
 65 |   <input type="button" id="0" value="Action 2.1" class="btn_group_2 off" onclick="toggle(this, 'btn_group_2');">
 66 |   <input type="button" id="1" value="Action 2.2" class="btn_group_2 off" onclick="toggle(this, 'btn_group_2');">
 67 |   <input type="button" id="2" value="Action 2.3" class="btn_group_2 off" onclick="toggle(this, 'btn_group_2');">
 68 | 
 69 |   <div id="message_div">
 70 |     <br /><span id="message_label">Awaiting value from Streamlit</span>
 71 |   </div>
 72 | </body>
 73 | 
 74 | <script type="text/javascript">
 75 |   // ----------------------------------------------------
 76 |   // Use these functions as is to perform required Streamlit 
 77 |   // component lifecycle actions:
 78 |   //
 79 |   // 1. Signal Streamlit client that component is ready
 80 |   // 2. Signal Streamlit client to set visible height of the component
 81 |   //    (this is optional, in case Streamlit doesn't correctly auto-set it)
 82 |   // 3. Pass values from component to Streamlit client
 83 |   //
 84 | 
 85 |   // Helper function to send type and data messages to Streamlit client
 86 | 
 87 |   const SET_COMPONENT_VALUE = "streamlit:setComponentValue"
 88 |   const RENDER = "streamlit:render"
 89 |   const COMPONENT_READY = "streamlit:componentReady"
 90 |   const SET_FRAME_HEIGHT = "streamlit:setFrameHeight"
 91 | 
 92 |   function _sendMessage(type, data) {
 93 |     // copy data into object
 94 |     var outboundData = Object.assign({
 95 |       isStreamlitMessage: true,
 96 |       type: type,
 97 |     }, data)
 98 | 
 99 |     if (type == SET_COMPONENT_VALUE) {
100 |       console.log("_sendMessage data: " + JSON.stringify(data))
101 |       console.log("_sendMessage outboundData: " + JSON.stringify(outboundData))
102 |     }
103 | 
104 |     window.parent.postMessage(outboundData, "*")
105 |   }
106 | 
107 |   function initialize(pipeline) {
108 | 
109 |     // Hook Streamlit's message events into a simple dispatcher of pipeline handlers
110 |     window.addEventListener("message", (event) => {
111 |       if (event.data.type == RENDER) {
112 |         // The event.data.args dict holds any JSON-serializable value
113 |         // sent from the Streamlit client. It is already deserialized.
114 |         pipeline.forEach(handler => {
115 |           handler(event.data.args)
116 |         })
117 |       }
118 |     })
119 | 
120 |     _sendMessage(COMPONENT_READY, { apiVersion: 1 });
121 | 
122 |     // Component should be mounted by Streamlit in an iframe, so try to autoset the iframe height.
123 |     window.addEventListener("load", () => {
124 |       window.setTimeout(function () {
125 |         setFrameHeight(document.documentElement.clientHeight)
126 |       }, 0)
127 |     })
128 | 
129 |     // Optionally, if auto-height computation fails, you can manually set it
130 |     // (uncomment below)
131 |     //setFrameHeight(200)
132 |   }
133 | 
134 |   function setFrameHeight(height) {
135 |     _sendMessage(SET_FRAME_HEIGHT, { height: height })
136 |   }
137 | 
138 |   // The `data` argument can be any JSON-serializable value.
139 |   function notifyHost(data) {
140 |     _sendMessage(SET_COMPONENT_VALUE, data)
141 |   }
142 | 
143 |   // ----------------------------------------------------
144 |   // Your custom functionality for the component goes here:
145 | 
146 |   function toggle(button, group) {
147 |     buttons = document.getElementsByClassName(group)
148 |     console.log(buttons)
149 |     for (let i = 0; i < buttons.length; i++) {
150 |       console.log(buttons.item(i))
151 |     }
152 | 
153 |     for (let i = 0; i < buttons.length; i++) {
154 |       if (button.id == String(i) & button.className.includes("off")) {
155 |         button.className = group + " on"
156 |       } else if (button.id == String(i) & button.className.includes("on")) {
157 |         button.className = group + " off"
158 |       } else {
159 |         buttons.item(i).className = group + " off"
160 |       }
161 |     }
162 | 
163 |     buttons = document.getElementsByClassName(group)
164 |     actions = []
165 |     for (let i = 0; i < buttons.length; i++) {
166 |       btn = buttons.item(i)
167 |       actions.push({ "action": btn.value, "value": btn.className.includes("on") })
168 |     }
169 | 
170 |     states = {}
171 |     states['choice'] = {
172 |       "name": group,
173 |       "state": {
174 |         "action": button.value,
175 |         "value": button.className.includes("on")
176 |       }
177 |     }
178 |     states["options"] = { "name": group, "states": actions }
179 | 
180 |     notifyHost({
181 |       value: states,
182 |       dataType: "json",
183 |     })
184 |   }
185 | 
186 |   // ----------------------------------------------------
187 |   // Here you can customize a pipeline of handlers for 
188 |   // inbound properties from the Streamlit client app
189 | 
190 |   // Set initial value sent from Streamlit!
191 |   function initializeProps_Handler(props) {
192 |     let header1 = document.getElementById("group_1_header")
193 |     header1.innerText = props.initial_state.group_1_header
194 | 
195 |     let header2 = document.getElementById("group_2_header")
196 |     header2.innerText = props.initial_state.group_2_header
197 |   }
198 |   // Access values sent from Streamlit!
199 |   function dataUpdate_Handler(props) {
200 |     let msgLabel = document.getElementById("message_label")
201 |     msgLabel.innerText = `Update [${props.counter}] at ${props.datetime}`
202 |   }
203 |   // Simply log received data dictionary
204 |   function log_Handler(props) {
205 |     console.log("Received from Streamlit: " + JSON.stringify(props))
206 |   }
207 | 
208 |   let pipeline = [initializeProps_Handler, dataUpdate_Handler, log_Handler]
209 | 
210 |   // ----------------------------------------------------
211 |   // Finally, initialize component passing in pipeline
212 | 
213 |   initialize(pipeline)
214 | 
215 | </script>
216 | 
217 | </html>


--------------------------------------------------------------------------------
/frontend_multipage_app/__init__.py:
--------------------------------------------------------------------------------
1 | import streamlit.components.v1 as components
2 | component_multipage_app = components.declare_component(
3 |     name='component_multipage_app',
4 |     path='./frontend_multipage_app'
5 | )


--------------------------------------------------------------------------------
/frontend_multipage_app/index.html:
--------------------------------------------------------------------------------
  1 | <html>
  2 | <head>
  3 |   <style type="text/css">
  4 |     body {
  5 |       background-color: lightblue;
  6 |       border-color: rgb(246, 51, 102);
  7 |       border-width: medium;
  8 |       font-family: sans-serif;
  9 |       font-size: 16px;
 10 |     }
 11 | 
 12 |     h1 {
 13 |       font-family: sans-serif;
 14 |       font-size: 24px;
 15 |       font-weight: normal;
 16 |       color: #262730;
 17 |     }
 18 | 
 19 |     h2 {
 20 |       font-family: sans-serif;
 21 |       font-size: 20px;
 22 |       font-weight: bold;
 23 |       color: #262730;
 24 |     }
 25 | 
 26 |     .on {
 27 |       border-radius: 5px;
 28 |       font-family: sans-serif;
 29 |       font-size: 16px;
 30 |       border: 1px solid #262730;
 31 |       color: white;
 32 |       background: rgb(246, 51, 102);
 33 |     }
 34 | 
 35 |     .off {
 36 |       border-radius: 5px;
 37 |       font-family: sans-serif;
 38 |       font-size: 16px;
 39 |       border: 1px solid #262730;
 40 |       color: white;
 41 |       background: #262730;
 42 |     }
 43 | 
 44 |     .container {
 45 |       display: grid;
 46 |       grid-template-columns: 33% 33% 33%;
 47 |       grid-template-rows: auto;
 48 | 
 49 |       margin-left: auto;
 50 |       margin-right: auto;
 51 |     }
 52 | 
 53 |     .item {
 54 |       margin-left: auto;
 55 |       margin-right: auto;
 56 |     }
 57 |   </style>
 58 | </head>
 59 | 
 60 | <!--
 61 | ----------------------------------------------------
 62 | Your custom static HTML goes in the body:
 63 | -->
 64 | 
 65 | <body>
 66 |   <div class="container">
 67 |     <div class="item">
 68 |       <span>&nbsp;</span>
 69 |     </div>
 70 |     <div class="item">
 71 |       <h2 id="group_1_header">Awaiting value from Streamlit</h2>
 72 |     </div>
 73 |     <div class="item">
 74 |       <span>&nbsp;</span>
 75 |     </div>
 76 |   </div>
 77 |   <div class="container">
 78 |     <div class="item">
 79 |       <input type="button" id="0" value="Application 1" class="btn_group_1 off" onclick="toggle(this, 'btn_group_1');">
 80 |     </div>
 81 |     <div class="item">
 82 |       <input type="button" id="1" value="Application 2" class="btn_group_1 off" onclick="toggle(this, 'btn_group_1');">
 83 |     </div>
 84 |     <div class="item">
 85 |         <input type="button" id="2" value="Application 3" class="btn_group_1 off" onclick="toggle(this, 'btn_group_1');">
 86 |     </div>
 87 |   </div>
 88 | </body>
 89 | 
 90 | <script type="text/javascript">
 91 |   // ----------------------------------------------------
 92 |   // Use these functions as is to perform required Streamlit 
 93 |   // component lifecycle actions:
 94 |   //
 95 |   // 1. Signal Streamlit client that component is ready
 96 |   // 2. Signal Streamlit client to set visible height of the component
 97 |   //    (this is optional, in case Streamlit doesn't correctly auto-set it)
 98 |   // 3. Pass values from component to Streamlit client
 99 |   //
100 | 
101 |   // Helper function to send type and data messages to Streamlit client
102 | 
103 |   const SET_COMPONENT_VALUE = "streamlit:setComponentValue"
104 |   const RENDER = "streamlit:render"
105 |   const COMPONENT_READY = "streamlit:componentReady"
106 |   const SET_FRAME_HEIGHT = "streamlit:setFrameHeight"
107 | 
108 |   function _sendMessage(type, data) {
109 |     // copy data into object
110 |     var outboundData = Object.assign({
111 |       isStreamlitMessage: true,
112 |       type: type,
113 |     }, data)
114 | 
115 |     if (type == SET_COMPONENT_VALUE) {
116 |       console.log("_sendMessage data: " + JSON.stringify(data))
117 |       console.log("_sendMessage outboundData: " + JSON.stringify(outboundData))
118 |     }
119 | 
120 |     window.parent.postMessage(outboundData, "*")
121 |   }
122 | 
123 |   function initialize(pipeline) {
124 | 
125 |     // Hook Streamlit's message events into a simple dispatcher of pipeline handlers
126 |     window.addEventListener("message", (event) => {
127 |       if (event.data.type == RENDER) {
128 |         // The event.data.args dict holds any JSON-serializable value
129 |         // sent from the Streamlit client. It is already deserialized.
130 |         pipeline.forEach(handler => {
131 |           handler(event.data.args)
132 |         })
133 |       }
134 |     })
135 | 
136 |     _sendMessage(COMPONENT_READY, { apiVersion: 1 });
137 | 
138 |     // Component should be mounted by Streamlit in an iframe, so try to autoset the iframe height.
139 |     window.addEventListener("load", () => {
140 |       window.setTimeout(function () {
141 |         setFrameHeight(document.documentElement.clientHeight)
142 |       }, 0)
143 |     })
144 | 
145 |     // Optionally, if auto-height computation fails, you can manually set it
146 |     // (uncomment below)
147 |     //setFrameHeight(200)
148 |   }
149 | 
150 |   function setFrameHeight(height) {
151 |     _sendMessage(SET_FRAME_HEIGHT, { height: height })
152 |   }
153 | 
154 |   // The `data` argument can be any JSON-serializable value.
155 |   function notifyHost(data) {
156 |     _sendMessage(SET_COMPONENT_VALUE, data)
157 |   }
158 | 
159 |   // ----------------------------------------------------
160 |   // Your custom functionality for the component goes here:
161 | 
162 |   function toggle(button, group) {
163 |     let buttons = document.getElementsByClassName(group)
164 | 
165 |     console.log(buttons)
166 |     for (let i = 0; i < buttons.length; i++) {
167 |       console.log(buttons.item(i))
168 |     }
169 | 
170 |     for (let i = 0; i < buttons.length; i++) {
171 |       if (button.id == String(i) & button.className.includes("off")) {
172 |         button.className = group + " on"
173 |       } else if (button.id == String(i) & button.className.includes("on")) {
174 |         button.className = group + " off"
175 |       } else {
176 |         buttons.item(i).className = group + " off"
177 |       }
178 |     }
179 | 
180 |     let actions = []
181 |     for (let i = 0; i < buttons.length; i++) {
182 |       let btn = buttons.item(i)
183 |       actions.push({ "action": btn.value, "value": btn.className.includes("on") })
184 |     }
185 | 
186 |     let states = {}
187 |     states['choice'] = {
188 |       "name": group,
189 |       "state": {
190 |         "action": button.value,
191 |         "value": button.className.includes("on")
192 |       }
193 |     }
194 |     states["options"] = { "name": group, "states": actions }
195 | 
196 |     notifyHost({
197 |       value: states,
198 |       dataType: "json",
199 |     })
200 |   }
201 | 
202 |   // ----------------------------------------------------
203 |   // Here you can customize a pipeline of handlers for 
204 |   // inbound properties from the Streamlit client app
205 | 
206 |   // Set initial value sent from Streamlit!
207 |   function initializeProps_Handler(props) {
208 |     let header1 = document.getElementById("group_1_header")
209 |     header1.innerText = props.initial_state.group_1_header
210 |   }
211 | 
212 |   // Simply log received data dictionary
213 |   function log_Handler(props) {
214 |     console.log("Received from Streamlit: " + JSON.stringify(props))
215 |   }
216 | 
217 |   let pipeline = [initializeProps_Handler, log_Handler]
218 | 
219 |   // ----------------------------------------------------
220 |   // Finally, initialize component passing in pipeline
221 | 
222 |   initialize(pipeline)
223 | 
224 | </script>
225 | 
226 | </html>


--------------------------------------------------------------------------------
/images/streamlit-component-toggle-buttons.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/asehmi/streamlit-toggle-buttons-component/4ac842ca5ea0b40b2d1673c3d0313ea603f4a0cc/images/streamlit-component-toggle-buttons.gif


--------------------------------------------------------------------------------
/images/streamlit-component-toggle-buttons.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/asehmi/streamlit-toggle-buttons-component/4ac842ca5ea0b40b2d1673c3d0313ea603f4a0cc/images/streamlit-component-toggle-buttons.png


--------------------------------------------------------------------------------
/multipage_app.py:
--------------------------------------------------------------------------------
 1 | import streamlit as st
 2 | 
 3 | from frontend_multipage_app import component_multipage_app
 4 | 
 5 | class MultiPage:
 6 |     def __init__(self):
 7 |         self.apps = []
 8 |         self.app_names = []
 9 | 
10 |     def add_app(self, title, func, *args, **kwargs):
11 |         self.app_names.append(title)
12 |         self.apps.append({
13 |             "title": title,
14 |             "function": func,
15 |             "args":args,
16 |             "kwargs": kwargs
17 |         })
18 | 
19 |     def run(self, label='Go To'):
20 |         def run_component(props):
21 |             value = component_multipage_app(key='multipage_app', **props)
22 |             return value
23 |         def handle_event(value):
24 |             # st.header('Streamlit')
25 |             # st.write('Received from component: ', value)
26 |             app_choice = value['choice']['state']['action'] if value else self.app_names[0]
27 |             app_choice_status = value['choice']['state']['value'] if value else False
28 |             if app_choice_status == True:
29 |                 # run the selected app
30 |                 app = self.apps[self.app_names.index(app_choice)]
31 |                 app['function'](app['title'], *app['args'], **app['kwargs'])
32 |             else:
33 |                 st.write('Awaiting selection')
34 | 
35 |         props = {
36 |             'initial_state': {
37 |                 'group_1_header': label
38 |             }
39 |         }
40 |         handle_event(run_component(props))
41 | 
42 | def app1(title, info=None):
43 |     st.title(title)
44 |     st.write(info)
45 | def app2(title, info=None):
46 |     st.title(title)
47 |     st.write(info)
48 | def app3(title, info=None):
49 |     st.title(title)
50 |     st.write(info)
51 | 
52 | def main():
53 |     mp = MultiPage()
54 |     mp.add_app('Application 1', app1, info='Hello from App 1')
55 |     mp.add_app('Application 2', app2, info='Hello from App 2')
56 |     mp.add_app('Application 3', app3, info='Hello from App 3')
57 |     mp.run('Launch Application')
58 | 
59 | if __name__ == '__main__':
60 |     main()
61 | 


--------------------------------------------------------------------------------
/run.cmd:
--------------------------------------------------------------------------------
1 | streamlit run multipage_app.py
2 | 


--------------------------------------------------------------------------------