Basic

Setup

hdrs = bootstrap_hdrs()+download_js()+datatable_hdrs()
show(*hdrs)
from ngrok_token import *
url = start_ngrok(token)
ngrok tunnel opened at: https://a223-3-238-95-91.ngrok-free.app
app,rt = fast_app(pico=False,hdrs=hdrs)
server = JupyUvi(app)

Request

req.url

Get current page’s url

@rt
def sdf(req):
    return P(req.url)
htmx(url,'/sdf')

req.url_for

Get original

@rt
def sdf(req):
    return P(req.url_for('sdf'))
htmx(url,'/sdf')

With param:

# @rt("/api/{data}")
# def this(req,data:str):
#     return req.url_for('this',data=data)
# htmx(url,'/api/ssss')

Toasts

toasts options: “info”, “success”, “warning”, “error”

setup_toasts(app)
@rt
def test():
    return A('click to trigger toasts',hx_get=tt,target_id='content'),Div(id='content')

@rt
def tt(sess):
    return add_toast(sess, "Please upload a csv or excel file", "error")
htmx(url,'/test')

Tooltip

source

Tooltip

 Tooltip (tooltip_content, trigger_content, element='span', **kwargs)

Create a Bootstrap tooltip

Type Default Details
tooltip_content FT or str
trigger_content
element str span
kwargs 
@rt
def test():
    return blank(),Tooltip(P('instruction'),'❔')
htmx(url,'/test')

source

Helptip

 Helptip (tooltip_text=' ', trigger_content=i((),{'class': 'bi bi-
          question-circle-fill'}), **kwargs)

Create a Bootstrap tooltip with help icon as default

Type Default Details
tooltip_text str FT or str
trigger_content FT i((),{‘class’: ‘bi bi-question-circle-fill’})
kwargs 
@rt
def test():
    return blank(),P('Z Score',Helptip((P('sdfsdf'))))
htmx(url,'/test')

Table / Dataframe

df = pd.read_csv('data/example.csv')

source

df2html

 df2html (df, tooltips=None, cls='table table-striped', id=None, **kwargs)

Create an HTML table with Bootstrap styling and tooltips

Type Default Details
df
tooltips NoneType None dict
cls str table table-striped
id NoneType None
kwargs

source

download_table

 download_table (*args, **kwargs)

Enable table download through a download button

download_table()needs to be wrapped in the same Div with the df2html

@rt
def test():
    # to show table correctly, always needs a container
    return Container(
        Div(download_table(), df2html(df,tooltips={'ID': P('ssss')}))
    )
htmx(url,'/test')

Download invisible dataframe

source

send_df

 send_df (df, fname, href, button=button((i((),{'class': 'bi bi-
          download'}), ' Data'),{'class': 'btn btn-outline-secondary btn-
          sm'}))

source

download_df

 download_df (dataframe, fname)
@app.post
def download_file(dataframe:str, fname:str):
    return download_df(dataframe,fname)

@rt
def test(req):
    download_button = send_df(df,
                            fname='sdf.csv',
                            href=req.url_for('download_file') # function name
                           )
    return download_button
htmx(url, '/test')

Dynamic table

source

dynamic_table

 dynamic_table (df, id='dynamic_table', cls='table table-striped')

Dynamic data tables; make new id names if multiple tables

import numpy as np
matrix = np.random.rand(20, 10)
df = pd.DataFrame(matrix).round(2)
@rt
def test():
    return Container(dynamic_table(df))
htmx(url,'/test')

Pagination

source

get_pagination

 get_pagination (page, total_pages, routes)

Bootstrap-styled pagination with integrated page jump form

Suppose I want a pagination bar for page 3 of 20

get_pagination(3,20,'#')

The above pagination can be combined with this function:

source

get_page_index

 get_page_index (current_page, total_items, items_per_page=12)

Get start index and end index given the current page number

Suppose I have a list of 100 items, and I want each page have 12 items, so I need to calculate start index and end index given the current page (e.g., 2)

get_page_index(2,100,12)
(12, 24, 9)

Example for a pagination:

protein_list = [str(i) for i in range(100)]
@rt
def test(req, page: int = 1):

    # get item index
    start_idx, end_idx,total_pages = get_page_index(page, len(protein_list))

    # get items
    current_proteins = protein_list[start_idx:end_idx]
    show_proteins = P(','.join(current_proteins))

    # get dynamic route
    this_routes =req.url_for('test')

    # get pagination item
    pagination = get_pagination(page,total_pages,routes=this_routes)

    return show_proteins, pagination,this_routes
htmx(url,'/test')

End

server.stop()
kill_ngrok()
ngrok tunnel killed