Skip to content

Commit

Permalink
Styling (#51)
Browse files Browse the repository at this point in the history
  • Loading branch information
@hoxbro
hoxbro authored Nov 10, 2023
1 parent 560a88f commit 05b3880
Show file tree
Hide file tree
Showing 14 changed files with 1,079 additions and 815 deletions.
154 changes: 0 additions & 154 deletions examples/Basics.ipynb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -525,160 +525,6 @@
"source": [
"annotator.commit()"
]
},
{
"cell_type": "markdown",
"id": "57962a14-32be-4239-9ad3-f9eee5d18158",
"metadata": {},
"source": [
"## 🚧 Selecting and highlighting annotations\n",
"\n",
"Earlier we styled the indicators with `color='red', alpha=0.2`. To highlight a select a specific indicator, we can create a dimension expression to assign selected and non-selected indicators different values. Here we have a highlighter that uses a value of `0.6` for selected indicators and `0.1` for non-selected indicators. We can then apply these values to the `alpha` option:"
]
},
{
"cell_type": "code",
"execution_count": null,
"id": "9f937116-bf9c-439d-8288-bcb20ef7d044",
"metadata": {},
"outputs": [],
"source": [
"highlighter = annotator.selected_dim_expr(0.6, 0.1)\n",
"annotator.element * annotator.indicators().opts(color='red', alpha=highlighter) * annotator.region_editor()"
]
},
{
"cell_type": "markdown",
"id": "22ee298a-160d-4aeb-8988-658d6e09d04d",
"metadata": {},
"source": [
"Now you can use the `Tap` tool to directly select indicators.\n",
"\n",
"You can now delesect by collecting `select_by_index()` without any arguments:"
]
},
{
"cell_type": "code",
"execution_count": null,
"id": "c9f01e83-5eea-4b75-8164-9b851053b0c7",
"metadata": {},
"outputs": [],
"source": [
"annotator.select_by_index()"
]
},
{
"cell_type": "markdown",
"id": "526a45ef-31c6-475c-95e8-82ec73318bc4",
"metadata": {},
"source": [
"And we can select one or more indicators by number:"
]
},
{
"cell_type": "code",
"execution_count": null,
"id": "346679b5-88d6-42fd-a0b6-a16875a3aa71",
"metadata": {},
"outputs": [],
"source": [
"annotator.df"
]
},
{
"cell_type": "code",
"execution_count": null,
"id": "842a8345-e3eb-43e5-bc0c-c8da5a1d61a8",
"metadata": {},
"outputs": [],
"source": [
"annotator.select_by_index(annotator.df.index[0])"
]
},
{
"cell_type": "markdown",
"id": "e96a9082-ffdf-4eb6-a259-54d04c62dd06",
"metadata": {},
"source": [
"You can access the selected indicators using the `selected_indices` parameter (watchable):"
]
},
{
"cell_type": "code",
"execution_count": null,
"id": "a96009e8-197a-48fd-bca5-e455627de0f1",
"metadata": {},
"outputs": [],
"source": [
"annotator.selected_indices # parameter"
]
},
{
"cell_type": "markdown",
"id": "7987aa0d-d804-44bd-9d96-1cc96b741006",
"metadata": {},
"source": [
"This demonstrates the basics without storing additional metadata, using the undo system or persisting any data.\n",
"\n",
"Note that everything shown so far can be achieved with simple Python API and a single line of display code:\n",
"\n",
"```\n",
"annotator.element * annotator.indicators().opts(color='red', alpha=annotator.selected_dim_expr(0.6, 0.1)) * annotator.editable()\n",
"```\n"
]
},
{
"cell_type": "markdown",
"id": "16134a64-1347-4ebe-909a-716f55c520ac",
"metadata": {},
"source": [
"## 🚧 Using `.overlay`\n",
"\n",
"The `.overlay` method is a shortcut to building the following overlay:\n",
"\n",
"```\n",
"annotator.element * annotator.indicators() * annotator.region_editor()\n",
"```\n",
"\n",
"Where each layer can be enabled/disabled and styled individually: the above is equivalent to `annotator.overlay(element=True, indicators=True, editor=True)`.\n",
"\n",
"\n",
"Note, if either building the overlay yourself or using `.overlay` with `element=False` you can use `annotator.element` *or* you can use the original element after adding the necessary tools with ```speed_curve.opts(tools=annotator.edit_tools)```.\n",
"\n",
"### Styling the annotator\n",
"\n",
"You can set the style either through the `_style` keywords in `.overlay`:"
]
},
{
"cell_type": "code",
"execution_count": null,
"id": "a30ffca4-92ed-4bde-87fe-82c2485d7d2b",
"metadata": {},
"outputs": [],
"source": [
"annotator.overlay(range_style={'color': 'green', 'alpha': 0.4}, \n",
" edit_range_style={'alpha': 0.4, 'line_alpha': 1, 'color':'yellow'})"
]
},
{
"cell_type": "markdown",
"id": "0cde2049-de01-4615-99e3-3175806615cc",
"metadata": {},
"source": [
"Or once at the class-level as follows:"
]
},
{
"cell_type": "code",
"execution_count": null,
"id": "53cddcd9-897a-4ef7-bb1a-1e9dea2cdaee",
"metadata": {},
"outputs": [],
"source": [
"annotator.indicator.range_style['color']= 'green'\n",
"annotator.indicator.edit_range_style['color'] = 'yellow'"
]
}
],
"metadata": {
Expand Down
154 changes: 0 additions & 154 deletions examples/Basics_2D.ipynb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -521,160 +521,6 @@
"source": [
"annotator.commit()"
]
},
{
"cell_type": "markdown",
"id": "57962a14-32be-4239-9ad3-f9eee5d18158",
"metadata": {},
"source": [
"## 🚧 Selecting and highlighting annotations\n",
"\n",
"Earlier we styled the indicators with `color='red', alpha=0.2`. To highlight a select a specific indicator, we can create a dimension expression to assign selected and non-selected indicators different values. Here we have a highlighter that uses a value of `0.6` for selected indicators and `0.1` for non-selected indicators. We can then apply these values to the `alpha` option:"
]
},
{
"cell_type": "code",
"execution_count": null,
"id": "9f937116-bf9c-439d-8288-bcb20ef7d044",
"metadata": {},
"outputs": [],
"source": [
"highlighter = annotator.selected_dim_expr(0.6, 0.1)\n",
"annotator.element * annotator.indicators().opts(color='red', alpha=highlighter) * annotator.region_editor()"
]
},
{
"cell_type": "markdown",
"id": "22ee298a-160d-4aeb-8988-658d6e09d04d",
"metadata": {},
"source": [
"Now you can use the `Tap` tool to directly select indicators.\n",
"\n",
"You can now delesect by collecting `select_by_index()` without any arguments:"
]
},
{
"cell_type": "code",
"execution_count": null,
"id": "c9f01e83-5eea-4b75-8164-9b851053b0c7",
"metadata": {},
"outputs": [],
"source": [
"annotator.select_by_index()"
]
},
{
"cell_type": "markdown",
"id": "526a45ef-31c6-475c-95e8-82ec73318bc4",
"metadata": {},
"source": [
"And we can select one or more indicators by index value:"
]
},
{
"cell_type": "code",
"execution_count": null,
"id": "346679b5-88d6-42fd-a0b6-a16875a3aa71",
"metadata": {},
"outputs": [],
"source": [
"annotator.df"
]
},
{
"cell_type": "code",
"execution_count": null,
"id": "842a8345-e3eb-43e5-bc0c-c8da5a1d61a8",
"metadata": {},
"outputs": [],
"source": [
"annotator.select_by_index(annotator.df.index[0])"
]
},
{
"cell_type": "markdown",
"id": "e96a9082-ffdf-4eb6-a259-54d04c62dd06",
"metadata": {},
"source": [
"You can access the selected indicators using the `selected_indices` parameter (watchable):"
]
},
{
"cell_type": "code",
"execution_count": null,
"id": "a96009e8-197a-48fd-bca5-e455627de0f1",
"metadata": {},
"outputs": [],
"source": [
"annotator.selected_indices # parameter"
]
},
{
"cell_type": "markdown",
"id": "7987aa0d-d804-44bd-9d96-1cc96b741006",
"metadata": {},
"source": [
"This demonstrates the basics without storing additional metadata, using the undo system or persisting any data.\n",
"\n",
"Note that everything shown so far can be achieved with simple Python API and a single line of display code:\n",
"\n",
"```\n",
"annotator.element * annotator.indicators().opts(color='red', alpha=annotator.selected_dim_expr(0.6, 0.1)) * annotator.editable()\n",
"```\n"
]
},
{
"cell_type": "markdown",
"id": "16134a64-1347-4ebe-909a-716f55c520ac",
"metadata": {},
"source": [
"## 🚧 Using `.overlay`\n",
"\n",
"The `.overlay` method is a shortcut to building the following overlay:\n",
"\n",
"```\n",
"annotator.element * annotator.indicators() * annotator.region_editor()\n",
"```\n",
"\n",
"Where each layer can be enabled/disabled and styled individually: the above is equivalent to `annotator.overlay(element=True, indicators=True, editor=True)`.\n",
"\n",
"\n",
"Note, if either building the overlay yourself or using `.overlay` with `element=False` you can use `annotator.element` *or* you can use the original element after adding the necessary tools with ```speed_curve.opts(tools=annotator.edit_tools)```.\n",
"\n",
"### Styling the annotator\n",
"\n",
"You can set the style either through the `_style` keywords in `.overlay`:"
]
},
{
"cell_type": "code",
"execution_count": null,
"id": "a30ffca4-92ed-4bde-87fe-82c2485d7d2b",
"metadata": {},
"outputs": [],
"source": [
"annotator.overlay(range_style={'color': 'yellow', 'alpha': 0.4}, \n",
" edit_range_style={'alpha': 0.4, 'line_alpha': 1, 'color':'blue'})"
]
},
{
"cell_type": "markdown",
"id": "0cde2049-de01-4615-99e3-3175806615cc",
"metadata": {},
"source": [
"Or once at the class-level as follows:"
]
},
{
"cell_type": "code",
"execution_count": null,
"id": "53cddcd9-897a-4ef7-bb1a-1e9dea2cdaee",
"metadata": {},
"outputs": [],
"source": [
"annotator.indicator.range_style['color']= 'green'\n",
"annotator.indicator.edit_range_style['color'] = 'yellow'"
]
}
],
"metadata": {
Expand Down
Loading

0 comments on commit 05b3880

Please sign in to comment.