Skip to content

Commit

Permalink
fix(notebooks): dispatch an event when cell content is edited
Browse files Browse the repository at this point in the history
  • Loading branch information
@bsahitya
bsahitya committed Jul 28, 2024
1 parent d859c81 commit da825bb
Showing 1 changed file with 32 additions and 14 deletions.
46 changes: 32 additions & 14 deletions libs/components/src/notebook/notebook.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -123,6 +123,7 @@ export class CovalentNotebook extends LitElement {
}
}

// Create a new cell object
createNewCell(cellType: string): CellData {
const language =
cellType === 'markdown' ? cellType : this.defaultLanguage || 'python';
Expand Down Expand Up @@ -151,7 +152,9 @@ export class CovalentNotebook extends LitElement {
// Delete the selected cell
deleteCell() {
if (this._selectedCellIndex !== null) {
this.cells.splice(this._selectedCellIndex, 1);
this.cells = this.cells.filter(
(_, index) => index !== this._selectedCellIndex
);
const selectedCellIndex = Math.min(
this._selectedCellIndex + 1,
this.cells.length - 1
Expand All @@ -172,7 +175,8 @@ export class CovalentNotebook extends LitElement {
document.removeEventListener('keydown', this._handleKeydown);
}

// Dispatch a custom cell event
// Dispatch a custom cell action event
// It handles actions like: run-cell, interrupt-cell, refresh-cell etc
dispatchCustomCellEvent(name: string, cell?: CellData) {
if (!cell && this._selectedCellIndex) {
cell = this.cells[this._selectedCellIndex];
Expand Down Expand Up @@ -211,6 +215,7 @@ export class CovalentNotebook extends LitElement {
getDragImage(cellIndex: number): HTMLElement {
const cell = this.cells[cellIndex];

// This is the drag image seen when a cell is being dragged
const template = html`
<div class="dragImage" style="width: 80%;">
<cv-notebook-cell
Expand Down Expand Up @@ -238,6 +243,8 @@ export class CovalentNotebook extends LitElement {
'#notebook-cells'
) as HTMLElement;

/* Check the current position of the selected cell within the container
and scroll to it's position */
if (selectedCellElement && container) {
const containerRect = container.getBoundingClientRect();
const cellRect = selectedCellElement.getBoundingClientRect();
Expand All @@ -263,10 +270,7 @@ export class CovalentNotebook extends LitElement {
// Dispatch an event when the cell type is changed
handleCellTypeChange(e: CustomEvent) {
const cellType = this.cellTypes[e.detail.index];
if (
this._selectedCellIndex &&
this.cells[this._selectedCellIndex].cell_type !== cellType.type
) {
if (this._selectedCellIndex !== null) {
this.dispatchEvent(
new CustomEvent('cell-type-changed', {
bubbles: true,
Expand All @@ -281,6 +285,7 @@ export class CovalentNotebook extends LitElement {
handleCodeChange(e: CustomEvent, index: number) {
const cell = this.cells[index];
cell.code = e.detail.code;
this.dispatchCustomCellEvent('edit-cell', cell);
}

handleDragStart(e: DragEvent, index: number) {
Expand Down Expand Up @@ -336,6 +341,7 @@ export class CovalentNotebook extends LitElement {
this.cells = this.cells.map((cell, idx) => ({ ...cell, index: idx }));

this._draggedCellIndex = null;
// Dispatch an event with updated cells
this.dispatchUpdatedCells();
}
}
Expand Down Expand Up @@ -370,24 +376,29 @@ export class CovalentNotebook extends LitElement {
}
}

// Handle keyboard actions within the notebook
private _handleKeydown(event: KeyboardEvent) {
let selectedCellIndex = this.cells?.findIndex((cell) => cell.selected);
switch (event.key) {
case 'ArrowUp':
// Navigate to the cell above the current cell
selectedCellIndex = Math.max(selectedCellIndex - 1, 0);
this.scrollToSelectedCell(selectedCellIndex);
break;
case 'ArrowDown':
// Navigate to the cell below the current cell
selectedCellIndex = Math.min(
selectedCellIndex + 1,
this.cells.length - 1
);
this.scrollToSelectedCell(selectedCellIndex);
break;
case 'Enter':
// Pressing Shift + Enter key should run the cell
if (event.shiftKey) {
this.runCell();
} else {
// Pressing the Enter key should add focus to the code editor
const selectedCellElement = this.shadowRoot?.querySelector(
`#cell-${selectedCellIndex}`
);
Expand All @@ -404,6 +415,7 @@ export class CovalentNotebook extends LitElement {
const cell = this.cells[index];
if (cell.language === 'markdown') {
cell.showEditor = true;
this.cells = this.cells.map((cell) => cell);
this.dispatchUpdatedCells();
}
}
Expand All @@ -415,11 +427,10 @@ export class CovalentNotebook extends LitElement {
this._selectedCellIndex !== null
? this._selectedCellIndex + 1
: this.cells.length;
this.deselectAllCells();
this._clipboardCell.selected = true;
this.cells.splice(index, 0, { ...this._clipboardCell });
this.cells = this.cells.map((cell, idx) => ({ ...cell, index: idx }));
this._selectedCellIndex = index;
this.selectCell(index);
this.dispatchUpdatedCells();
}
}
Expand All @@ -433,19 +444,23 @@ export class CovalentNotebook extends LitElement {
const md = markdownit({ html: true });
switch (key) {
case 'text/markdown':
// converts markdown to html
return html`<div class="output-container">
${unsafeHTML(md.render(output.data[key]))}
</div>`;
case 'text/html':
return html`<div class="output-container">
${unsafeHTML(output.data[key])}
</div>`;
case 'image/png': {
case 'image/png':
case 'image/jpg': {
return html`<div class="output-container">
<img
class="output-image"
draggable="false"
src=${`data:image/png;base64, ${output.data[key]}`}
src=${`data:image/${
key.includes('jpg') ? 'jpg' : 'png'
};base64, ${output.data[key]}`}
/>
</div>`;
}
Expand Down Expand Up @@ -483,15 +498,15 @@ export class CovalentNotebook extends LitElement {
></cv-icon-button>
<cv-icon-button
icon="stop"
@click="${() => this.dispatchCustomCellEvent('interrupt-cell')}"
@click="${() => this.dispatchCustomCellEvent('interrupt-kernel')}"
></cv-icon-button>
<cv-icon-button
icon="refresh"
@click="${() => this.dispatchCustomCellEvent('refresh-cell')}"
@click="${() => this.dispatchCustomCellEvent('refresh')}"
></cv-icon-button>
<cv-icon-button
icon="fast_forward"
@click="${() => this.dispatchCustomCellEvent('refresh-run-all-cell')}"
@click="${() => this.dispatchCustomCellEvent('refresh-run-all')}"
></cv-icon-button>
<cv-select
label="Cell type"
Expand Down Expand Up @@ -580,6 +595,7 @@ export class CovalentNotebook extends LitElement {
</div>`;
}

// Remove a css class from a target element
removeCSS(className: string, targetElement: Document | ShadowRoot | null) {
const elements = targetElement?.querySelectorAll(className);
elements?.forEach((element) => element.classList.remove(className));
Expand Down Expand Up @@ -609,6 +625,7 @@ export class CovalentNotebook extends LitElement {
}
}

// Whether a code editor should be shown in the cell
shouldRenderEditor(cell: CellData): boolean {
return (
cell.language !== 'markdown' ||
Expand All @@ -619,12 +636,13 @@ export class CovalentNotebook extends LitElement {
protected updated(_changedProperties: PropertyValues): void {
if (_changedProperties.has('cells')) {
this.cells.forEach((cell, index) => {
cell.showEditor = this.shouldRenderEditor(cell);
// If user input is requested in a cell, scroll to it's position
if (cell.inputs?.length) {
this.scrollToSelectedCell(index);
}
});
}
super.updated(_changedProperties);
}
}

Expand Down

0 comments on commit da825bb

Please sign in to comment.