Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add voila and streamlit examples #269

Merged
merged 8 commits into from
May 7, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
94 changes: 94 additions & 0 deletions docs/docs/create-apps/streamlit-app.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,94 @@
---
sidebar_position: 8
---

# Streamlit apps

## Environment requirements

Your conda environment (used in JHub Apps Launcher's App creation form) must have the following packages for successful app deployment:

* `jhsingle-native-proxy` >= 0.8.2
* `streamlit`
* Other libraries used in the app

:::note
In some cases, you may need `ipywidgets`
:::

## Example application

To deploy the [Streamlit App][streamlit-app] using JHub Apps, you can use the following code and environment:

<details>
<summary> Code (Python file) </summary>

In a Python file, copy the following lines of code.

```python title="streamlit_app.py"
from collections import namedtuple
import altair as alt
import math
import pandas as pd
import streamlit as st

"""
# Welcome to Streamlit!

"""

total_points = st.slider("Number of points in spiral", 1, 5000, 2000)
num_turns = st.slider("Number of turns in spiral", 1, 100, 9)

Point = namedtuple("Point", "x y")
data = []

points_per_turn = total_points / num_turns

for curr_point_num in range(total_points):
curr_turn, i = divmod(curr_point_num, points_per_turn)
angle = (curr_turn + 1) * 2 * math.pi * i / points_per_turn
radius = curr_point_num / total_points
x = radius * math.cos(angle)
y = radius * math.sin(angle)
data.append(Point(x, y))

st.altair_chart(
alt.Chart(pd.DataFrame(data), height=500, width=500)
.mark_circle(color="#0068c9", opacity=0.5)
.encode(x="x:Q", y="y:Q")
)
```

You will see an app that displays a spiral of points:

![Streamlit interactive plot of a spiral of points with two sliders to adjust the number of points and the number of turns in the spiral](/img/streamlit_app.png)
</details>

<details>
<summary> Environment specification </summary>

Use the following spec to create a Conda environment wherever JHub Apps is deployed.
If using Nebari, use this spec to create an environment with [conda-store][conda-store].

```yaml
channels:
- conda-forge
dependencies:
- altair
- jhsingle-native-proxy>=0.8.2
- pandas
- streamlit
- ipykernel
```
</details>


## Next steps

:sparkles: [Launch app →](/docs/create-apps/general-app)

<!-- External links -->

[streamlit-app]: https://github.com/streamlit/streamlit-example/blob/8bd2197e4ba68dd68127a264dc6708f0a96f23c8/streamlit_app.py
[conda-store]: https://conda.store/conda-store-ui/tutorials/create-envs
82 changes: 82 additions & 0 deletions docs/docs/create-apps/voila-app.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,82 @@
---
sidebar_position: 7
---

# Viola apps

## Environment requirements

Your conda environment (used in JHub Apps Launcher's App creation form) must have the following packages for successful app deployment:

* `jhsingle-native-proxy` >= 0.8.2
* `voila` >= 0.5.6
* Other libraries used in the app

:::note
In some cases, you may need `ipywidgets`
:::

## Example application

To deploy the [Voila Basic Example][voila-basic-example] using JHub Apps, you can use the following code and environment:

<details>
<summary> Code (Jupyter Notebook) </summary>

In a Jupyter Notebook, copy the following lines of code into a cell.

```python title="voila-basic-slider.ipynb"
import ipywidgets as widgets

slider = widgets.FloatSlider(description='x')
text = widgets.FloatText(disabled=True, description='x^2')

def compute(*ignore):
text.value = str(slider.value ** 2)

slider.observe(compute, 'value')

slider.value = 4

widgets.VBox([slider, text])
```

You will see a basic slider app as shown in this screenshot:

![Simple interactive Voilà app displaying a slider for variable x and its squared value](/img/voila_app.png)
</details>

<details>
<summary> Environment specification </summary>

Use the following spec to create a Conda environment wherever JHub Apps is deployed.
If using Nebari, use this spec to create an environment with [conda-store][conda-store].

```yaml
channels:
- conda-forge
dependencies:
- ipywidgets
- jhsingle-native-proxy>=0.8.2
- pandas
- python
- pip
- pip:
- voila==0.5.6
- ipykernel
```
:::note
When viola (>=0.5.6) is available on Conda Forge, it can be moved outside of the pip section of the dependencies
:::

</details>


## Next steps

:sparkles: [Launch app →](/docs/create-apps/general-app)

<!-- External links -->

[voila-basic-example]: https://github.com/voila-dashboards/voila/blob/7596c4f930caf4fc2d89ba63b1096046adf9fe0e/notebooks/basics.ipynb
[conda-store]: https://conda.store/conda-store-ui/tutorials/create-envs
Binary file added docs/static/img/streamlit_app.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/static/img/voila_app.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading