mirror of
https://github.com/IHaskell/IHaskell.git
synced 2025-04-16 11:26:08 +00:00
348 lines
8.5 KiB
Plaintext
348 lines
8.5 KiB
Plaintext
{
|
|
"cells": [
|
|
{
|
|
"cell_type": "markdown",
|
|
"metadata": {},
|
|
"source": [
|
|
"### The `Selection` Widgets\n",
|
|
"\n",
|
|
"+ Dropdown\n",
|
|
"+ RadioButtons\n",
|
|
"+ ToggleButtons\n",
|
|
"+ Select\n",
|
|
"+ SelectMultiple\n",
|
|
"+ SelectionSlider\n",
|
|
"+ SelectionRangeSlider"
|
|
]
|
|
},
|
|
{
|
|
"cell_type": "markdown",
|
|
"metadata": {},
|
|
"source": [
|
|
"These widgets can be used to choose between multiple alternatives. The `SelectMultiple` widget allows multiple selections, whereas `Dropdown`, `RadioButtons`, `ToggleButtons`, `SelectionSlider` and `Select` only allow one selection. `SelectionRangeSlider` returns exactly two selections.\n",
|
|
"\n",
|
|
"Every widget, except the sliders, can return `Nothing` as it selected index."
|
|
]
|
|
},
|
|
{
|
|
"cell_type": "code",
|
|
"execution_count": 1,
|
|
"metadata": {
|
|
"tags": []
|
|
},
|
|
"outputs": [],
|
|
"source": [
|
|
"{-# LANGUAGE OverloadedStrings #-}\n",
|
|
"{-# LANGUAGE FlexibleContexts #-}\n",
|
|
"import IHaskell.Display.Widgets"
|
|
]
|
|
},
|
|
{
|
|
"cell_type": "code",
|
|
"execution_count": 2,
|
|
"metadata": {
|
|
"collapsed": false,
|
|
"jupyter": {
|
|
"outputs_hidden": false
|
|
}
|
|
},
|
|
"outputs": [
|
|
{
|
|
"data": {
|
|
"text/plain": []
|
|
},
|
|
"metadata": {},
|
|
"output_type": "display_data"
|
|
}
|
|
],
|
|
"source": [
|
|
"-- Allows single selection\n",
|
|
"tgbs <- mkToggleButtons\n",
|
|
"dropdown <- mkDropdown\n",
|
|
"radio <- mkRadioButtons\n",
|
|
"select <- mkSelect\n",
|
|
"slider <- mkSelectionSlider\n",
|
|
"\n",
|
|
"-- Allows multiple selections\n",
|
|
"msel <- mkSelectMultiple\n",
|
|
"rslider <- mkSelectionRangeSlider"
|
|
]
|
|
},
|
|
{
|
|
"cell_type": "markdown",
|
|
"metadata": {},
|
|
"source": [
|
|
"### Single Selection Widgets\n",
|
|
"\n",
|
|
"We can set the options setting the `OptionsLabels` field, which is an array of Text. Let's see how can we select one of two functions with multiple selectors:"
|
|
]
|
|
},
|
|
{
|
|
"cell_type": "code",
|
|
"execution_count": 3,
|
|
"metadata": {},
|
|
"outputs": [
|
|
{
|
|
"data": {
|
|
"application/vnd.jupyter.widget-view+json": {
|
|
"model_id": "3abd4c34-c04f-4f59-b20c-a25206aa6a93",
|
|
"version_major": 2,
|
|
"version_minor": 0
|
|
}
|
|
},
|
|
"metadata": {},
|
|
"output_type": "display_data"
|
|
},
|
|
{
|
|
"data": {
|
|
"application/vnd.jupyter.widget-view+json": {
|
|
"model_id": "c436f5dc-68b8-4265-b7fe-3cde44221ab5",
|
|
"version_major": 2,
|
|
"version_minor": 0
|
|
}
|
|
},
|
|
"metadata": {},
|
|
"output_type": "display_data"
|
|
},
|
|
{
|
|
"data": {
|
|
"application/vnd.jupyter.widget-view+json": {
|
|
"model_id": "c9292a02-4ba3-435c-8202-92581524ba8d",
|
|
"version_major": 2,
|
|
"version_minor": 0
|
|
}
|
|
},
|
|
"metadata": {},
|
|
"output_type": "display_data"
|
|
},
|
|
{
|
|
"data": {
|
|
"application/vnd.jupyter.widget-view+json": {
|
|
"model_id": "579036b8-e825-4cfb-9c81-da728601c099",
|
|
"version_major": 2,
|
|
"version_minor": 0
|
|
}
|
|
},
|
|
"metadata": {},
|
|
"output_type": "display_data"
|
|
},
|
|
{
|
|
"data": {
|
|
"application/vnd.jupyter.widget-view+json": {
|
|
"model_id": "4a4f263e-f56a-4af1-88db-b97510e941b2",
|
|
"version_major": 2,
|
|
"version_minor": 0
|
|
}
|
|
},
|
|
"metadata": {},
|
|
"output_type": "display_data"
|
|
}
|
|
],
|
|
"source": [
|
|
"init w = do\n",
|
|
" setField @Description w \"Function:\"\n",
|
|
" setField @OptionsLabels w [\"sin\", \"cos\"]\n",
|
|
" return w\n",
|
|
" \n",
|
|
"init tgbs\n",
|
|
"init dropdown\n",
|
|
"init radio\n",
|
|
"init select\n",
|
|
"init slider"
|
|
]
|
|
},
|
|
{
|
|
"cell_type": "markdown",
|
|
"metadata": {},
|
|
"source": [
|
|
"We can create a `SelectionHandler` function that will be run every time the value is changed. Let's synchronize them so all the selectors always display the same value."
|
|
]
|
|
},
|
|
{
|
|
"cell_type": "code",
|
|
"execution_count": 4,
|
|
"metadata": {},
|
|
"outputs": [],
|
|
"source": [
|
|
"setHandlerOpt w = setField @SelectionHandler w $ do\n",
|
|
" y <- getField @OptionalIndex w\n",
|
|
" case y of\n",
|
|
" Just x -> do\n",
|
|
" setField @OptionalIndex dropdown $ Just x\n",
|
|
" setField @OptionalIndex tgbs $ Just x\n",
|
|
" setField @OptionalIndex radio $ Just x\n",
|
|
" setField @OptionalIndex select $ Just x\n",
|
|
" setField @Index slider x\n",
|
|
" _ -> return ()\n",
|
|
" \n",
|
|
"setHandler w = setField @SelectionHandler w $ do\n",
|
|
" x <- getField @Index w\n",
|
|
" setField @OptionalIndex dropdown $ Just x\n",
|
|
" setField @OptionalIndex tgbs $ Just x\n",
|
|
" setField @OptionalIndex radio $ Just x\n",
|
|
" setField @OptionalIndex select $ Just x\n",
|
|
" setField @Index slider x\n",
|
|
" \n",
|
|
"\n",
|
|
"setHandlerOpt tgbs\n",
|
|
"setHandlerOpt dropdown\n",
|
|
"setHandlerOpt radio\n",
|
|
"setHandlerOpt select\n",
|
|
"setHandler slider"
|
|
]
|
|
},
|
|
{
|
|
"cell_type": "markdown",
|
|
"metadata": {},
|
|
"source": [
|
|
"Now, if you click in any of the widgets, the value on all the other widgets should change too.\n",
|
|
"\n",
|
|
"### Multiple Selection Widgets\n",
|
|
"\n",
|
|
"In the multiple selection widget, you can select multiple items by doing Shift+Click. Let's do an example for selecting provinces (maybe for filtering later)."
|
|
]
|
|
},
|
|
{
|
|
"cell_type": "code",
|
|
"execution_count": 5,
|
|
"metadata": {},
|
|
"outputs": [
|
|
{
|
|
"data": {
|
|
"application/vnd.jupyter.widget-view+json": {
|
|
"model_id": "ebad2164-fc83-4aad-813d-ea44eae2338d",
|
|
"version_major": 2,
|
|
"version_minor": 0
|
|
}
|
|
},
|
|
"metadata": {},
|
|
"output_type": "display_data"
|
|
}
|
|
],
|
|
"source": [
|
|
"msel <- mkSelectMultiple\n",
|
|
"ccaa = \n",
|
|
" [ \"Andalusia\", \"Aragon\", \"Asturias\", \"Balearic Islands\", \"Basque Country\"\n",
|
|
" , \"Canary Islands\", \"Cantabria\", \"Castile and León\", \"Castilla-La Mancha\", \"Catalonia\"\n",
|
|
" , \"Madrid\", \"Extremadura\", \"Galicia\", \"La Rioja\", \"Navarre\", \"Murcia\", \"Valencia\"\n",
|
|
" ]\n",
|
|
" \n",
|
|
"setField @OptionsLabels msel ccaa\n",
|
|
"msel"
|
|
]
|
|
},
|
|
{
|
|
"cell_type": "markdown",
|
|
"metadata": {},
|
|
"source": [
|
|
"We can also set the items selected with the `Indices` attribute (which is an Integer list)."
|
|
]
|
|
},
|
|
{
|
|
"cell_type": "code",
|
|
"execution_count": 6,
|
|
"metadata": {},
|
|
"outputs": [],
|
|
"source": [
|
|
"setField @Indices msel [0,2]"
|
|
]
|
|
},
|
|
{
|
|
"cell_type": "markdown",
|
|
"metadata": {},
|
|
"source": [
|
|
"But we have to scroll a lot because we don't have enough space, which is a bit tiring. To fix this we can set a bigger number in the `Rows` attribute. This attribute tells the frontend how many rows we want to display. If we set it to `Nothing`, we are letting the frontend decide the number of rows."
|
|
]
|
|
},
|
|
{
|
|
"cell_type": "code",
|
|
"execution_count": 7,
|
|
"metadata": {},
|
|
"outputs": [],
|
|
"source": [
|
|
"setField @Rows msel $ Just 10"
|
|
]
|
|
},
|
|
{
|
|
"cell_type": "markdown",
|
|
"metadata": {},
|
|
"source": [
|
|
"Now let's create a slider. This one also returns an array of `Indices`, but it's always of size 2."
|
|
]
|
|
},
|
|
{
|
|
"cell_type": "code",
|
|
"execution_count": 9,
|
|
"metadata": {},
|
|
"outputs": [
|
|
{
|
|
"data": {
|
|
"application/vnd.jupyter.widget-view+json": {
|
|
"model_id": "2fe820d9-9fb7-492a-b126-410c8533098b",
|
|
"version_major": 2,
|
|
"version_minor": 0
|
|
}
|
|
},
|
|
"metadata": {},
|
|
"output_type": "display_data"
|
|
}
|
|
],
|
|
"source": [
|
|
"setField @OptionsLabels rslider [\"Very bad\", \"Bad\", \"Regular\", \"Good\", \"Very good\"]\n",
|
|
"rslider"
|
|
]
|
|
},
|
|
{
|
|
"cell_type": "markdown",
|
|
"metadata": {},
|
|
"source": [
|
|
"As expected, we can get/set the selected values."
|
|
]
|
|
},
|
|
{
|
|
"cell_type": "code",
|
|
"execution_count": 10,
|
|
"metadata": {},
|
|
"outputs": [
|
|
{
|
|
"data": {
|
|
"text/plain": [
|
|
"[0,0]"
|
|
]
|
|
},
|
|
"metadata": {},
|
|
"output_type": "display_data"
|
|
}
|
|
],
|
|
"source": [
|
|
"getField @Indices rslider\n",
|
|
"setField @Indices rslider [1,3]"
|
|
]
|
|
},
|
|
{
|
|
"cell_type": "code",
|
|
"execution_count": null,
|
|
"metadata": {},
|
|
"outputs": [],
|
|
"source": []
|
|
}
|
|
],
|
|
"metadata": {
|
|
"kernelspec": {
|
|
"display_name": "Haskell",
|
|
"language": "haskell",
|
|
"name": "haskell"
|
|
},
|
|
"language_info": {
|
|
"codemirror_mode": "ihaskell",
|
|
"file_extension": ".hs",
|
|
"mimetype": "text/x-haskell",
|
|
"name": "haskell",
|
|
"pygments_lexer": "Haskell",
|
|
"version": "9.8.2"
|
|
}
|
|
},
|
|
"nbformat": 4,
|
|
"nbformat_minor": 4
|
|
}
|