Skip to content

Commit

Permalink
Reintegrate the cellPrompt in create assignment cell widget
Browse files Browse the repository at this point in the history
  • Loading branch information
@brichet
brichet committed Oct 26, 2022
1 parent 4dcd41a commit ae19779
Showing 1 changed file with 65 additions and 45 deletions.
110 changes: 65 additions & 45 deletions src/create_assignment/create_assignment_extension.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,51 +3,41 @@ import {
Dialog,
Styling
} from '@jupyterlab/apputils';

import {
Cell,
ICellModel
} from '@jupyterlab/cells';

// import {
// IChangedArgs
// } from '@jupyterlab/coreutils';

import { IChangedArgs } from '@jupyterlab/coreutils';
import {
DocumentRegistry
} from '@jupyterlab/docregistry';

import {
INotebookModel,
INotebookTracker,
Notebook,
NotebookPanel
} from '@jupyterlab/notebook';
import { CellList } from '@jupyterlab/notebook/lib/celllist';

import {
IObservableJSON,
IObservableList,
IObservableMap,
} from '@jupyterlab/observables';

import {
ReadonlyPartialJSONValue
} from '@lumino/coreutils';

import {
Message
} from '@lumino/messaging';

import {
ISignal,
Signal
} from '@lumino/signaling';

import {
Panel,
Widget
} from '@lumino/widgets';

import {
CellModel,
CellType,
Expand Down Expand Up @@ -236,8 +226,9 @@ export class CreateAssignmentWidget extends Panel {
*/
class CellWidget extends Panel {

constructor(cellModel: ICellModel) {
constructor(cellModel: ICellModel, notebookPanel?: NotebookPanel) {
super();
this._notebookPanel = notebookPanel;
this._cellModel = cellModel;
this._cellModel.metadata.changed.connect(
this._onMetadataChange, this
Expand All @@ -247,6 +238,10 @@ class CellWidget extends Panel {
this._initMetadata(cellModel);
this.addClass(CSS_CELL_WIDGET);
this.node.addEventListener('click', this._onClick.bind(this));
this.cellModel.stateChanged.connect(this._onStateChange, this);

// Try to update the prompt (works only if cell widget has been created).
this._updatePrompt();
}

/**
Expand Down Expand Up @@ -275,6 +270,8 @@ class CellWidget extends Panel {
this._onMetadataChange, this
);
this.node.removeEventListener('click', this._onClick);
this.cellModel.stateChanged.disconnect(this._onStateChange, this);

if (this._taskInput != null) {
this._taskInput.onchange = null;
}
Expand All @@ -298,24 +295,46 @@ class CellWidget extends Panel {
/**
* Sets this cell as active/focused.
*/
setActive(active: boolean): void {
setActive(active: boolean): void {
if (active) {
this.addClass(CSS_MOD_ACTIVE);
}
else {

// This _updatePrompt() call is a hack to create a prompt when a new cell is
// added in cellList. Indeed the listener catches that a new cell model is added
// to cellList, but not that the cell widget is created in the NotebookPanel.
// The prompt is a copy of the one from the cell widget but there is no listener
// on its creation. When a new cell is created, it is activated, so we use here
// this activation to create the prompt.
this._updatePrompt();
} else {
this.removeClass(CSS_MOD_ACTIVE);
}
}

// private getCellStateChangedListener(
// srcPrompt: HTMLElement, destPrompt: HTMLElement):
// (model: ICellModel, changedArgs: IChangedArgs<any, any, string>) => void {
// return (model: ICellModel, changedArgs: IChangedArgs<any, any, string>) => {
// if (changedArgs.name == 'executionCount') {
// destPrompt.innerText = srcPrompt.innerText;
// }
// }
// }
/**
* Copy the prompt of the cell widget of the notebook.
*/
private _updatePrompt() {
this._headerElement.removeChild(this._promptNode);
const cell: Cell = this._notebookPanel.content.widgets.find(widget => {
return widget.model.id === this.cellModel.id
});
if (cell && cell.promptNode){
this._promptNode = cell.promptNode.cloneNode(true) as HTMLElement;
} else {
this._promptNode = document.createElement('div');
}
this._headerElement.insertBefore(this._promptNode, this._headerElement.firstChild);
}

private _onStateChange(
model: ICellModel,
changedArgs: IChangedArgs<any, any, string>
) {
if (changedArgs.name == 'executionCount') {
this._updatePrompt();
}
}

private _onMetadataChange (
metadata: IObservableJSON,
Expand Down Expand Up @@ -383,6 +402,7 @@ class CellWidget extends Panel {
}
bodyElement.appendChild(fragment);
this.node.appendChild(bodyElement);
this._headerElement = headerElement;
this._lock = headerElement.getElementsByTagName('a')[0];
this._gradeId = idElement;
this._points = pointsElement;
Expand All @@ -403,12 +423,8 @@ class CellWidget extends Panel {
private _newHeaderElement(): HTMLDivElement {
const element = document.createElement('div');
element.className = CSS_CELL_HEADER;
// if (this.cell && this.cell.promptNode) {
// const promptNode = this.cell.promptNode.cloneNode(true) as HTMLElement;
// element.appendChild(promptNode);
// this.cell.stateChanged.connect(this.getCellStateChangedListener(
// this.cell.promptNode, promptNode));
// }
this._promptNode = document.createElement('div');
element.appendChild(this._promptNode);
const lockElement = document.createElement('a');
lockElement.className = CSS_LOCK_BUTTON;
const listElement = document.createElement('li');
Expand Down Expand Up @@ -552,6 +568,9 @@ class CellWidget extends Panel {
}

private _cellModel: ICellModel;
private _notebookPanel: NotebookPanel | null;
private _promptNode: HTMLElement;
private _headerElement: HTMLDivElement;
private _click = new Signal<this, void>(this);
private _lock: HTMLAnchorElement;
private _gradeId: HTMLDivElement;
Expand Down Expand Up @@ -621,7 +640,7 @@ class NotebookWidget extends Panel {

constructor(panel: NotebookPanel) {
super();
this._activeCell = panel.content.activeCell.model;
this._activeCellModel = panel.content.activeCell.model;
this._notebookPanel = panel;
this.addClass(CSS_NOTEBOOK_WIDGET);
this._initCellWidgets(panel.content);
Expand Down Expand Up @@ -654,7 +673,7 @@ class NotebookWidget extends Panel {
this.notebookPanel?.disposed?.disconnect(this._onNotebookDisposed, this);

this.notebookPanel?.dispose();
this._activeCell = null;
this._activeCellModel = null;
this._cellMetadataChanged = null;
this._cellWidgets = null;
this._metadataChangedHandlers = null;
Expand Down Expand Up @@ -682,7 +701,7 @@ class NotebookWidget extends Panel {
) {
switch (args.type) {
case 'add': {
this._addCellWidget(args.newValues[0], args.newIndex);
this._addCellWidget(args.newValues[0], args.newIndex);
break;
}
case 'move': {
Expand All @@ -703,18 +722,18 @@ class NotebookWidget extends Panel {
this._cellWidgets.get(oldCell).dispose();
this._cellWidgets.delete(oldCell);
const cellWidget = this._addCellWidget(newCell, args.newIndex);
cellWidget.setActive(this._activeCell === newCell);
if (this._activeCell === newCell) {
cellWidget.setActive(this._activeCellModel === newCell);
if (this._activeCellModel === newCell) {
this._scrollIntoViewNearest(cellWidget);
}
}
}
}
}

private _addCellWidget(cell: ICellModel, index = undefined as number): CellWidget {
const cellWidget = new CellWidget(cell);
this._cellWidgets.set(cell, cellWidget);
private _addCellWidget(cellModel: ICellModel, index = undefined as number): CellWidget {
const cellWidget = new CellWidget(cellModel, this._notebookPanel);
this._cellWidgets.set(cellModel, cellWidget);
if (index == null) {
this.addWidget(cellWidget);
}
Expand All @@ -723,7 +742,7 @@ class NotebookWidget extends Panel {
}
cellWidget.click.connect(this._activeCellWidgetListener, this);
const metadataChangedHandler = this._getMetadataChangedHandler(cellWidget);
cell.metadata.changed.connect(metadataChangedHandler);
cellModel.metadata.changed.connect(metadataChangedHandler);
this._metadataChangedHandlers.set(cellWidget, metadataChangedHandler);
return cellWidget;
}
Expand All @@ -741,21 +760,22 @@ class NotebookWidget extends Panel {
/**
* Called when the selected cell on notebook panel changes.
*/
private _onActiveCellChange(notebook: Notebook, cell: Cell) {
if (this._activeCell != null) {
const activeWidget = this._cellWidgets.get(this._activeCell);
private async _onActiveCellChange(notebook: Notebook, cell: Cell) {
if (this._activeCellModel != null) {
const activeWidget = this._cellWidgets.get(this._activeCellModel);
if (activeWidget != null) {
activeWidget.setActive(false);
}
}
if (cell != null) {
await cell.ready;
const activeWidget = this._cellWidgets.get(cell.model);
if (activeWidget != null) {
activeWidget.setActive(true);
this._scrollIntoViewNearest(activeWidget);
}
}
this._activeCell = cell.model;
this._activeCellModel = cell.model;
}

/**
Expand Down Expand Up @@ -913,7 +933,7 @@ class NotebookWidget extends Panel {
}
}

private _activeCell = null as ICellModel;
private _activeCellModel = null as ICellModel;
private _cellMetadataChanged = new Signal<this, CellWidget>(this);
private _cellWidgets = new Map<ICellModel, CellWidget>();
private _metadataChangedHandlers = new Map<
Expand Down

0 comments on commit ae19779

Please sign in to comment.