How to select current cell with JavaScript in Jupyter?

Question

I have a notebook cell containing JavaScript code, and I would like the code to select this particular cell. Unfortunately, the behavior of get_selected_cell depends on whether I execute the cell in place, or execute and select the cell below.

Example:

%%javascript
var cell = Jupyter.notebook.get_selected_cell();
console.log(Jupyter.notebook.find_cell_index(cell));

When executing this cell, the console output will be different whether I execute with Ctrl+Enter or Shift+Enter. In one case it logs the index of the cell that contains the JavaScript code, in the other the index of the cell below.

Is there a way to select the cell I want?

selected_cell means the one that is selected in the UI. Inside Javascript added to the output area of a cell, this is the output area. I can't currently find a way back from that to the cell it belongs to, though. — Thomas K
– Thomas K, Commented Sep 21, 2016 at 13:37
I suspect it probably is possible with some convoluted JS hackery, but I don't know how. Feel free to open a feature request on the notebook repo for an official way to reference the cell from JS output. — Thomas K
– Thomas K, Commented Sep 21, 2016 at 21:14

minrk · Accepted Answer · 2016-09-22 12:29:49Z

7

Your Javascript will have a handle on the OutputArea applying the Javascript, but not one all the way to the cell (in general, output areas can be used without cells or notebooks). You can find the cell by identifying the parent .cell element, and then getting the cell corresponding to that element:

%%javascript
var output_area = this;
// find my cell element
var cell_element = output_area.element.parents('.cell');
// which cell is it?
var cell_idx = Jupyter.notebook.get_cell_elements().index(cell_element);
// get the cell object
var cell = Jupyter.notebook.get_cell(cell_idx);

answered Sep 22, 2016 at 12:29

minrk

38.9k9 gold badges98 silver badges90 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Donghyun Kwak · Accepted Answer · 2018-05-09 06:23:53Z

2

In the case of executing javascript with display(HTML("javascript code")), this will return the Window object.

So you should use display(Javascript("javascript code")) to get the current cells' output_area.

answered May 9, 2018 at 6:23

Donghyun Kwak

315 bronze badges

Comments

Jay Wang · Accepted Answer · 2021-11-13 20:54:37Z

1

If you are writing a jupyter lab widget, you can get the cell index by iterating the widget array. This is what jupyter lab internally does (source).

const cellIndex = ArrayExt.findFirstIndex(
  notebook.content.widgets,
  widget => widget.node === this.originalCell.node
);

Then you can assign the new active cell by changing the activeCellIndex property of the notebook widget:

notebook.content.activeCellIndex = cellIndex;

answered Nov 13, 2021 at 20:54

Jay Wang

2,9105 gold badges34 silver badges59 bronze badges

1 Comment

Chris Pointon Over a year ago

I've been unable to find a way to access the notebook object from a Jupyter widget the way you illustrate. Could you provide a more complete sample please?

Collectives™ on Stack Overflow

How to select current cell with JavaScript in Jupyter?

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related