Skip to content

Commit b534037

Browse files
authored
Merge pull request #162 from yash112-lang/master
Added clear cell output button in toolbar
2 parents ece34ad + 1cd5fa9 commit b534037

File tree

22 files changed

+488
-1
lines changed

22 files changed

+488
-1
lines changed

.github/workflows/main.yml

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ jobs:
2828
- react-widget
2929
- settings
3030
- state
31+
- toolbar-button
3132
- widgets
3233
os: [ubuntu-latest, macos-latest, windows-latest]
3334
steps:

README.md

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -68,6 +68,7 @@ Start with the [Hello World](hello-world) and then jump to the topic you are int
6868
- [Settings](settings)
6969
- [Signals](signals)
7070
- [State](state)
71+
- [Toolbar item](toolbar-button)
7172
- [Widgets](widgets)
7273

7374
You can expect from each example:
@@ -177,6 +178,12 @@ Use State persistence in an extension.
177178

178179
[![State](state/preview.gif)](state)
179180

181+
### [Toolbar item](toolbar-button)
182+
183+
Add a new button to the notebook toolbar.
184+
185+
[![Toolbar button](toolbar-button/Preview.gif)](toolbar-button)
186+
180187
### [Widgets](widgets)
181188

182189
Add a new Widget element to the main window.

kernel-messaging/README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -284,5 +284,5 @@ example, you will explore how you can reuse some Jupyter components to have a ni
284284
This example uses React to define UI elements. You can
285285
learn more about React in JupyterLab in [that example](../react-widget/README.md).
286286

287-
The UI refresh is triggered by signal emitions. To know more about it,
287+
The UI refresh is triggered by signal emissions. To know more about it,
288288
you can have a look at the [signal example](../signals/README.md).

toolbar-button/.eslintignore

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
node_modules
2+
dist
3+
coverage
4+
**/*.d.ts

toolbar-button/.eslintrc.js

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
module.exports = {
2+
extends: [
3+
'eslint:recommended',
4+
'plugin:@typescript-eslint/eslint-recommended',
5+
'plugin:@typescript-eslint/recommended',
6+
'plugin:jsdoc/recommended',
7+
'plugin:prettier/recommended',
8+
'plugin:react/recommended'
9+
],
10+
parser: '@typescript-eslint/parser',
11+
parserOptions: {
12+
project: 'tsconfig.json',
13+
sourceType: 'module'
14+
},
15+
plugins: ['@typescript-eslint', 'jsdoc'],
16+
rules: {
17+
'@typescript-eslint/interface-name-prefix': [
18+
'error',
19+
{ prefixWithI: 'always' }
20+
],
21+
'@typescript-eslint/no-unused-vars': ['warn', { args: 'none' }],
22+
'@typescript-eslint/no-explicit-any': 'off',
23+
'@typescript-eslint/camelcase': 'warn',
24+
'@typescript-eslint/no-namespace': 'off',
25+
'@typescript-eslint/no-use-before-define': 'off',
26+
'@typescript-eslint/quotes': [
27+
'error',
28+
'single',
29+
{ avoidEscape: true, allowTemplateLiterals: false }
30+
],
31+
curly: ['error', 'all'],
32+
eqeqeq: 'error',
33+
'jsdoc/require-param-type': 'off',
34+
'jsdoc/require-property-type': 'off',
35+
'jsdoc/require-returns-type': 'off',
36+
'jsdoc/no-types': 'warn',
37+
'prefer-arrow-callback': 'error'
38+
},
39+
settings: {
40+
jsdoc: {
41+
mode: 'typescript'
42+
},
43+
react: {
44+
version: 'detect'
45+
}
46+
}
47+
};

toolbar-button/.gitignore

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
*.bundle.*
2+
lib/
3+
node_modules/
4+
*.egg-info/
5+
.ipynb_checkpoints
6+
*.tsbuildinfo

toolbar-button/.prettierrc

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"singleQuote": true,
3+
"trailingComma": "none",
4+
"arrowParens": "avoid"
5+
}

toolbar-button/MANIFEST.in

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
include LICENSE
2+
include README.md
3+
include pyproject.toml
4+
recursive-include jupyter-config *.json
5+
6+
include package.json
7+
include install.json
8+
include ts*.json
9+
include yarn.lock
10+
11+
graft jupyterlab_examples_toolbar_button/labextension
12+
13+
# Javascript files
14+
graft src
15+
graft style
16+
prune **/node_modules
17+
prune lib
18+
prune binder
19+
20+
# Patterns to exclude from any directory
21+
global-exclude *~
22+
global-exclude *.pyc
23+
global-exclude *.pyo
24+
global-exclude .git
25+
global-exclude .ipynb_checkpoints

toolbar-button/Preview.gif

126 KB
Loading

toolbar-button/README.md

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
# Toolbar Item
2+
3+
This example shows how to add a button to the notebook toolbar.
4+
5+
![Toolbar button](Preview.gif)
6+
7+
In this particular example, the button will clear all cell outputs
8+
9+
To use it first you need to import the following packages:
10+
11+
```ts
12+
// src/index.ts#L1-L16
13+
14+
import { IDisposable, DisposableDelegate } from '@lumino/disposable';
15+
16+
import {
17+
JupyterFrontEnd,
18+
JupyterFrontEndPlugin
19+
} from '@jupyterlab/application';
20+
21+
import { ToolbarButton } from '@jupyterlab/apputils';
22+
23+
import { DocumentRegistry } from '@jupyterlab/docregistry';
24+
25+
import {
26+
NotebookActions,
27+
NotebookPanel,
28+
INotebookModel
29+
} from '@jupyterlab/notebook';
30+
```
31+
32+
Firstly you have to register the plugin information. For that you have to pass a activate **function** and the plugin **id**.
33+
34+
```ts
35+
// src/index.ts#L21-L25
36+
37+
const plugin: JupyterFrontEndPlugin<void> = {
38+
activate,
39+
id: 'toolbar-button',
40+
autoStart: true
41+
};
42+
```
43+
44+
New widgets can be added to a document widget by implementing the interface [DocumentRegistry.IWidgetExtension](https://jupyterlab.readthedocs.io/en/latest/api/interfaces/docregistry.documentregistry.iwidgetextension.html). In particular, you need to add your widget in the `createNew` method that is called when creating a new
45+
document widget; in this case a notebook panel.
46+
47+
```ts
48+
// src/index.ts#L30-L54
49+
50+
export class ButtonExtension
51+
implements DocumentRegistry.IWidgetExtension<NotebookPanel, INotebookModel> {
52+
/**
53+
* Create a new extension for the notebook panel widget.
54+
*/
55+
createNew(
56+
panel: NotebookPanel,
57+
context: DocumentRegistry.IContext<INotebookModel>
58+
): IDisposable {
59+
const clearOutput = () => {
60+
NotebookActions.clearAllOutputs(panel.content);
61+
};
62+
const button = new ToolbarButton({
63+
className: 'clear-output-button',
64+
label: 'Clear All Outputs',
65+
onClick: clearOutput,
66+
tooltip: 'Clear All Outputs'
67+
});
68+
69+
panel.toolbar.insertItem(10, 'clearOutputs', button);
70+
return new DisposableDelegate(() => {
71+
button.dispose();
72+
});
73+
}
74+
}
75+
```
76+
77+
Finally you need to tell the document registry about your widget extension:
78+
79+
```ts
80+
// src/index.ts#L59-L61
81+
82+
function activate(app: JupyterFrontEnd) {
83+
app.docRegistry.addWidgetExtension('Notebook', new ButtonExtension());
84+
}
85+
```
86+
87+
## Where to Go Next
88+
89+
This example uses a command to display the widget. Have a look a the
90+
[commands example](../commands/README.md) for more information about it.

0 commit comments

Comments
 (0)