Skip to main content

Advanced Selector Usage

Dynamically changing the selected value of a Selector​

It is possible to change the selected value of a selector dynamically by calling the JavaScript function changeSelectorValue() from an HTML element such as a button.

changeSelectorValue(selectorId, value, blockUuid, runOnChange, runAllOnChange)
rendering

To render javascript remember to render it properly using HTML and display from IPython

from IPython.display import display, HTML
display(HTML(you_html_or_js_code))

Arguments​

  • selectorId: the id of the selector that you want to change.
  • value: the value to set as selected in the selector. This must be one of the options in the selector's options list.
  • block_uuid: The identifier code for the block to resume the execution. usually its good to pass MINEO_BLOCK_UUID (the current block).
  • runOnChange: a boolean flag that determines whether to run the block after the event is triggered.
  • runAllOnChange: a boolean flag that determines whether to run all blocks with higher sequence numbers after the event is triggered.

Example​

from IPython.display import HTML,display
options = range(10)
my_selector = selectors.Dropdown('sel-id5', options, selected_name='0')
my_selector.render()

selector_value = 1
display(HTML(f""" 
<button onclick="changeSelectorValue('sel-id5', '{selector_value}', '{MINEO_BLOCK_UUID}', true, true)">Change selector to value 1</button>
"""))

In the above example, we first create a dropdown selector with ID sel-id5 and set the default selected value to 0. Then, we render the selector in the notebook.

We then create an HTML button that, when clicked, calls changeSelectorValue() to change the selected value of the dropdown selector to 1. The runOnChange and runAllOnChange flags are set to True, so the block is run after the value is changed.

Other utilities to change selector and execute blocks programmatically​

generate_change_selector(selector_id: str, value: str, block_uuid=None, run_on_change=True, run_all_on_change=True)​

Creates the required JavaScript code that will change the value of a notebook selector to the value of a given JavaScript variable.

Parameters:

  • selector_id (str): The selector_name of the selector whose value the created script will change.
  • value (str): The JavaScript variable name whose value will become the value of the selector.
  • block_uuid (optional, str): The UUID of the block. If not provided, it will be automatically generated.
  • run_on_change (optional, bool): If True, the block containing the selector will be run after changing the value. Default is True.
  • run_all_on_change (optional, bool): If True, all blocks with a higher sequence number are run after a user changes the value of the selector. Default is True.

Returns:

  • script (str): The generated JavaScript code.

change_selector_value(selector_id: str, value: str, block_uuid=None, run_on_change=True, run_all_on_change=True)​

Directly changes some selector and triggers the block execution of some block. (without the need to display or manually execute the js code)

Parameters:

  • selector_id (str): The selector_name of the selector whose value will be changed.
  • value (str): The JavaScript variable name whose value will become the value of the selector.
  • block_uuid (optional, str): The UUID of the block. If not provided, it will be automatically generated.
  • run_on_change (optional, bool): If True, the block containing the selector will be run after changing the value. Default is True.
  • run_all_on_change (optional, bool): If True, all blocks with a higher sequence number are run after a user changes the value of the selector. Default is True.

The function generates the necessary JavaScript code using generate_change_selector and then displays it using the display function with an HTML script tag.

Example​

print(x) # x defined in another block
x = x + 1
if x < 10:
    # In this case we execute again the current block, but passing block_uuid will resume execution on any block
    # Also , note that the 'value' must be passed as js code
    selectors.change_selector_value('foo', "'bar'")

Display inline and custom HTML​

MINEO selectors let you obtain the html of the element to render it in any desired custom html layout. You could adapt the example below to your needs.

from IPython.display import display, HTML

elements =[]

options = ['foo', 'bar', 'zoo', 'zar']

dropdown = selectors.Dropdown('dropdown-a', options=options, label='Drowpdown with helptext')
elements.append(dropdown)

dropdown = selectors.Dropdown('dropdown-b', options=options, label='Drowpdown with helptext')
elements.append(dropdown)

dropdown = selectors.Dropdown('dropdown-c', options=options, label='Drowpdown with helptext')
elements.append(dropdown)

cols_html = "".join(
    f'<div>{element}</div>'
    for element in elements
)

# Custom style class to display the selectors in a responsive flex row
display(HTML(f"""
<style>
.mycontainer {{
    display: flex;
    flex-direction: row;
}}

</style>
<div class="mycontainer">
{cols_html}
</div>
"""))