Components

Find the list of supported components here and how to use them.

Visuals

Plotly

class bowtie.visual.Plotly(init: Optional[Dict] = None)[source]

Plotly component.

Useful for many kinds of plots.

Create a Plotly component.

Parameters:init (dict, optional) – Initial Plotly data to plot.
do_all(plot)[source]

Replace the entire plot.

Parameters:plot (dict) – Dict that can be plotted with Plotly. It should have this structure: {data: [], layout: {}}.
Returns:
Return type:None
do_config(config)[source]

Update the configuration of the plot.

Parameters:config (dict) – Plotly config information.
Returns:
Return type:None
do_data(data)[source]

Replace the data portion of the plot.

Parameters:data (list of traces) – List of data to replace the old data.
Returns:
Return type:None
do_layout(layout)[source]

Update the layout.

Parameters:layout (dict) – Contains layout information.
Returns:
Return type:None
get(timeout=10)

Get the current selection of points.

Returns:
Return type:list
get_click(timeout=10)

Get the current selection of points.

Returns:
Return type:list
get_hover(timeout=10)

Get the current selection of points.

Returns:
Return type:list
get_layout(timeout=10)

Get the current layout.

Returns:
Return type:list
get_select(timeout=10)

Get the current selection of points.

Returns:
Return type:list
on_beforehover

Emit an event before hovering over a point.

Payload: TODO.
Returns:Name of event.
Return type:str
on_click

React to Plotly click event.

Payload: TODO.
Returns:Name of event.
Return type:str
on_hover

Emit an event after hovering over a point.

Payload: TODO.
Returns:Name of event.
Return type:str
on_relayout

Emit an event when the chart axes change.

Payload: TODO.
Returns:Name of event.
Return type:str
on_select

Emit an event when points are selected with a tool.

Payload: TODO.
Returns:Name of event.
Return type:str
on_unhover

Emit an event when hover is removed.

Payload: TODO.
Returns:Name of event.
Return type:str

Table

class bowtie.visual.Table(data=None, columns: Optional[List[Union[int, str]]] = None, results_per_page: int = 10)[source]

Ant Design table with filtering and sorting.

Create a table and optionally initialize the data.

Parameters:
  • data (pd.DataFrame, optional) –
  • columns (list, optional) – List of column names to display.
  • results_per_page (int, optional) – Number of rows on each pagination of the table.
do_columns(columns)[source]

Update the columns of the table.

Parameters:columns (array-like) – List of strings.
Returns:
Return type:None
do_data(data)[source]

Replace the columns and data of the table.

Parameters:data (pandas.DataFrame) –
Returns:
Return type:None

SVG

class bowtie.visual.SVG(preserve_aspect_ratio: bool = False)[source]

SVG image.

Mainly for matplotlib plots.

Create SVG component.

Parameters:preserve_aspect_ratio (bool, optional) – If True it preserves the aspect ratio otherwise it will stretch to fill up the space available.
do_image(image)[source]

Replace the image.

Parameters:image (str) – Generated by savefig from matplotlib with format=svg.
Returns:
Return type:None

Examples

This shows how to update an SVG widget with Matplotlib.

>>> from io import StringIO
>>> import matplotlib
>>> matplotlib.use('Agg')
>>> import matplotlib.pyplot as plt
>>> image = SVG()
>>>
>>> def callback(x):
...     sio = StringIO()
...     plt.plot(range(5))
...     plt.savefig(sio, format='svg')
...     sio.seek(0)
...     s = sio.read()
...     idx = s.find('<svg')
...     s = s[idx:]
...     image.do_image(s)

SmartGrid

class bowtie.visual.SmartGrid[source]

Griddle table with filtering and sorting.

Create the table, optionally set the columns.

do_update(data)[source]

Update the data of the table.

Parameters:data (pandas.DataFrame) –
Returns:
Return type:None
get(timeout=10)

Get the table data.

Returns:Each entry in the list is a dict of labels and values for a row.
Return type:list

Progress

Progress component.

Not for direct use by user.

class bowtie._progress.Progress[source]

Circle progress indicator.

Create a progress indicator.

This component is used by all visual components. It is not meant to be used alone.

By default, it is not visible. It is an opt-in feature and you can happily use Bowtie without using the progress indicators at all.

It is useful for indicating progress to the user for long-running processes. It can be accessed through the .progress accessor.

Examples

Using the progress widget to provide feedback to the user.

>>> from bowtie.visual import Plotly
>>> plotly = Plotly()
>>> def callback(x):
...     plotly.progress.do_visible(True)
...     plotly.progress.do_percent(0)
...     compute1()
...     plotly.progress.do_inc(50)
...     compute2()
...     plotly.progress.do_visible(False)

References

https://ant.design/components/progress/

do_active()[source]

Reset the progress to active (in progress) status.

Returns:
Return type:None
do_error()[source]

Display an error in the progress indicator.

Returns:
Return type:None
do_inc(inc)[source]

Increment the progress indicator.

Parameters:inc (number) – Value to increment the progress.
Returns:
Return type:None
do_percent(percent)[source]

Set the percentage of the progress.

Parameters:percent (number) – Sets the progress to this percentage.
Returns:
Return type:None
do_success()[source]

Display the progress indicator as done.

Returns:
Return type:None
do_visible(visible)[source]

Hide and shows the progress indicator.

Parameters:visible (bool) – If True shows the progress indicator otherwise it is hidden.
Returns:
Return type:None

Controllers

Button

class bowtie.control.Button(label: str = '')[source]

An Ant design button.

Create a button.

Parameters:label (str, optional) – Label on the button.
on_click

Emit an event when the button is clicked.

There is no getter associated with this event.

Payload: None.
Returns:Name of click event.
Return type:str

Switch

class bowtie.control.Switch(initial: bool = False)[source]

Toggle switch.

Create a toggle switch.

Parameters:initial (bool, optional) – Starting state of the switch.
get(timeout=10)

Get the state of the switch.

Returns:True if the switch is enabled.
Return type:bool
on_switch

Emit an event when the switch is toggled.

Payload: bool status of the switch.
Returns:Name of event.
Return type:str

DatePicker

class bowtie.control.DatePicker[source]

A Date Picker.

Let’s you choose an individual day.

Create a date picker.

get(timeout=10)

Get the currently selected date.

Returns:Date in the format “YYYY-MM-DD”
Return type:str
on_change

Emit an event when a date is selected.

Payload: str of the form "yyyy-mm-dd".
Returns:Name of event.
Return type:str

MonthPicker

class bowtie.control.MonthPicker[source]

A Month Picker.

Let’s you choose a month and year.

Create month picker.

get(timeout=10)

Get the currently selected month.

Returns:Month in the format “YYYY-MM”
Return type:str
on_change

Emit an event when a month is selected.

Payload: str of the form "yyyy-mm".
Returns:Name of event.
Return type:str

RangePicker

class bowtie.control.RangePicker[source]

A Date Range Picker.

Choose two dates to use as a range.

Create a date range picker.

get(timeout=10)

Get the currently selected date range.

Returns:A list of two strings ["yyyy-mm-dd", "yyyy-mm-dd"].
Return type:list
on_change

Emit an event when a range is selected.

Payload: list of two dates ["yyyy-mm-dd", "yyyy-mm-dd"].
Returns:Name of event.
Return type:str

Textbox

class bowtie.control.Textbox(placeholder: str = 'Enter text', size: str = 'default', area: bool = False, autosize: bool = False, disabled: bool = False)[source]

A single line text box.

Create a text box.

Parameters:
  • placeholder (str, optional) – Initial text that appears.
  • size ('default', 'large', 'small', optional) – Size of the text box.
  • area (bool, optional) – Create a text area if True else create a single line input.
  • autosize (bool, optional) – Automatically size the widget based on the content.
  • disabled (bool, optional) – Disable input to the widget.

References

https://ant.design/components/input/

do_text(text)[source]

Set the text of the text box.

Parameters:text (str) – String of the text box.
get(timeout=10)

Get the current text.

Returns:
Return type:str
on_change

Emit an event when the text is changed.

Payload: str
Returns:Name of event.
Return type:str
on_enter

Emit an event when enter is pressed in the text box.

Payload: str
Returns:Name of event.
Return type:str

Number

class bowtie.control.Number(start: int = 0, minimum: float = -1e+100, maximum: float = 1e+100, step: int = 1, size: str = 'default')[source]

A number input widget with increment and decrement buttons.

Create a number input.

Parameters:
  • start (number, optional) – Starting number
  • minimum (number, optional) – Lower bound
  • maximum (number, optional) – Upper bound
  • size ('default', 'large', 'small', optional) – Size of the text box.

References

https://ant.design/components/input/

get(timeout=10)

Get the current number.

Returns:
Return type:number
on_change

Emit an event when the number is changed.

Payload: number
Returns:Name of event.
Return type:str

Slider

class bowtie.control.Slider(start: Union[float, Sequence[float], None] = None, ranged: bool = False, minimum: float = 0, maximum: float = 100, step: float = 1, vertical: bool = False)[source]

Ant Design slider.

Create a slider.

Parameters:
  • start (number or list with two values, optional) – Determines the starting value. If a list of two values are given it will be a range slider.
  • ranged (bool, optional) – If this is a range slider.
  • minimum (number, optional) – Minimum value of the slider.
  • maximum (number, optional) – Maximum value of the slider.
  • step (number, optional) – Step size.
  • vertical (bool, optional) – If True, the slider will be vertical

References

https://ant.design/components/slider/

do_inc(value=1)[source]

Increment value of slider by given amount.

Parameters:value (int) – Number to change value of slider by.
do_max(value)[source]

Replace the max value of the slider.

Parameters:value (int) – Maximum value of the slider.
do_min(value)[source]

Replace the min value of the slider.

Parameters:value (int) – Minimum value of the slider.
do_min_max_value(minimum, maximum, value)[source]

Set the minimum, maximum, and value of slider simultaneously.

Parameters:
  • minimum (int) – Minimum value of the slider.
  • maximum (int) – Maximum value of the slider.
  • value (int) – Value of the slider.
do_value(value)[source]

Set the value of the slider.

Parameters:value (int) – Value of the slider.
get(timeout=10)

Get the currently selected value(s).

Returns:List if it’s a range slider and gives two values.
Return type:list or number
on_after_change

Emit an event when the slider control is released.

Payload: number or list of values.
Returns:Name of event.
Return type:str
on_change

Emit an event when the slider’s value changes.

Payload: number or list of values.
Returns:Name of event.
Return type:str

NoUISlider

class bowtie.control.Nouislider(start: Union[int, Sequence[int]] = 0, minimum: int = 0, maximum: int = 100, tooltips: bool = True)[source]

A lightweight JavaScript range slider library.

Create a slider.

Parameters:
  • start (number or list with two values, optional) – Determines the starting value. If a list of two values are given it will be a range slider.
  • minimum (number, optional) – Minimum value of the slider.
  • maximum (number, optional) – Maximum value of the slider.
  • tooltips (bool, optional) – Show a popup text box.

References

https://refreshless.com/nouislider/events-callbacks/

get(timeout=10)

Get the currently selected value(s).

Returns:List if it’s a range slider and gives two values.
Return type:list or number
on_change

Emit an event when the slider is moved.

https://refreshless.com/nouislider/events-callbacks/

Payload: list of values.
Returns:Name of event.
Return type:str
on_end

Emit an event when the slider is moved.

https://refreshless.com/nouislider/events-callbacks/

Payload: list of values.
Returns:Name of event.
Return type:str
on_set

Emit an event when the slider is moved.

https://refreshless.com/nouislider/events-callbacks/

Payload: list of values.
Returns:Name of event.
Return type:str
on_slide

Emit an event when the slider is moved.

https://refreshless.com/nouislider/events-callbacks/

Payload: list of values.
Returns:Name of event.
Return type:str
on_start

Emit an event when the slider is moved.

https://refreshless.com/nouislider/events-callbacks/

Payload: list of values.
Returns:Name of event.
Return type:str
on_update

Emit an event when the slider is moved.

https://refreshless.com/nouislider/events-callbacks/

Payload: list of values.
Returns:Name of event.
Return type:str

Upload

class bowtie.control.Upload(multiple=True)[source]

Draggable file upload widget.

Create the widget.

Note: the handler parameter may be changed in the future.

Parameters:multiple (bool, optional) – If true, you can upload multiple files at once. Even with this set to true, the handler will get called once per file uploaded.
on_upload

Emit an event when the selection changes.

There is no getter associated with this event.

Payload: tuple with a str (name) and BytesIO (stream).

The user is responsible for storing the object in this function if they want it for later use. To indicate an error, return True, otherwise a return value of None or False indicate success.

HTML

Markdown

class bowtie.html.Markdown(initial: str = '')[source]

Display Markdown.

Create a Markdown widget.

Parameters:initial (str, optional) – Default markdown for the widget.
do_text(text)[source]

Replace widget with this text.

Parameters:test (str) – Markdown text as a string.
Returns:
Return type:None
get(timeout=10)

Get the current text.

Returns:
Return type:String of html.

Div

class bowtie.html.Div(text: str = '')[source]

Div tag.

Create header text with a size.

Parameters:text (str) – Text of the header tag.
do_text(text)[source]

Replace widget with this text.

Parameters:test (str) – Markdown text as a string.
Returns:
Return type:None
get(timeout=10)

Get the current text.

Returns:
Return type:String of html.