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
-
on_beforehover
¶ Emit an event before hovering over a point.
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
-
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:
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 withformat=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)
-
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_inc
(inc)[source]¶ Increment the progress indicator.
Parameters: inc (number) – Value to increment the progress. Returns: Return type: None
-
Controllers¶
Button¶
Dropdown¶
-
class
bowtie.control.
Dropdown
(labels: Optional[List[str]] = None, values: Optional[List[Union[int, str]]] = None, multi: bool = False, default: Union[str, int, None] = None)[source]¶ Dropdown based on react-select.
Create a drop down.
Parameters: - labels (array-like, optional) – List of strings which will be visible to the user.
- values (array-like, optional) – List of values associated with the labels that are hidden from the user.
- multi (bool, optional) – If multiple selections are allowed.
- default (str or int, optional) – The default selected value.
-
do_choose
(values)[source]¶ Replace the drop down fields.
Parameters: values (list or str or int) – Value(s) of drop down item(s) to be selected. Returns: Return type: None
-
do_options
(labels, values)[source]¶ Replace the drop down fields.
Parameters: - labels (array-like) – List of strings which will be visible to the user.
- values (array-like) – List of values associated with the labels that are hidden from the user.
Returns: Return type:
-
get
(timeout=10)¶ Return selected value(s).
-
on_change
¶ Emit an event when the selection changes.
Payload:dict
with keys “value” and “label”.
Switch¶
DatePicker¶
MonthPicker¶
RangePicker¶
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.
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
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:
-
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
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.
-
Header¶
-
class
bowtie.html.
Header
(text: str = '', size: int = 1)[source]¶ Header tag.
Create header text with a size.
Parameters: -
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.
-