diff --git a/libs/components/src/notebook-cell/notebook-cell.scss b/libs/components/src/notebook-cell/notebook-cell.scss index 63ae2b40ca..0bd44f75b6 100644 --- a/libs/components/src/notebook-cell/notebook-cell.scss +++ b/libs/components/src/notebook-cell/notebook-cell.scss @@ -28,9 +28,19 @@ cv-code-editor { background-color: var(--cv-theme-primary); border-radius: 2px; cursor: move; + height: 100%; margin-top: 2px; visibility: hidden; +} + +.selectionIndicatorWrapper { min-width: 8px; + + &:hover { + .selectionIndicator { + visibility: visible; + } + } } .timesExecuted { @@ -42,6 +52,7 @@ cv-code-editor { height: 100%; justify-content: end; line-height: var(--mdc-typography-body2-line-height); + width: 50px; text-wrap: nowrap; .executionCount { @@ -66,7 +77,6 @@ cv-code-editor { display: flex; justify-content: space-between; - &:hover, &.focused, &.selected { .selectionIndicator { @@ -90,15 +100,14 @@ cv-code-editor { display: flex; gap: 0.75rem; justify-content: end; - width: calc(100% - 2rem); + width: calc(100% - 1.5rem); } .cellOutputWrapper { display: flex; flex-direction: column; gap: 0.75rem; - max-width: 92%; - min-width: 92%; + width: calc(100% - 58px); } .output { diff --git a/libs/components/src/notebook-cell/notebook-cell.ts b/libs/components/src/notebook-cell/notebook-cell.ts index cffef08de9..83b08c0a14 100644 --- a/libs/components/src/notebook-cell/notebook-cell.ts +++ b/libs/components/src/notebook-cell/notebook-cell.ts @@ -171,7 +171,10 @@ export class CovalentNotebookCell extends LitElement { }; return html`
- +
+
+
+
${this.renderExecutionCount()} (cell.selected = false)); } + disconnectedCallback(): void { + super.disconnectedCallback(); + document.removeEventListener('keydown', this._handleKeydown); + } + // Dispatch a custom cell event dispatchCustomCellEvent(name: string, cell?: CellData) { if (!cell && this._selectedCellIndex) { @@ -166,7 +211,7 @@ export class CovalentNotebook extends LitElement { const cell = this.cells[cellIndex]; const template = html` -
+
containerRect.bottom; + + // Scroll to the top of the cell + if (isAbove) { + container.scrollTop = + selectedCellElement.offsetTop - container.offsetTop; + } else if (isBelow) { + // Scroll to the bottom of the cell + container.scrollTop = + selectedCellElement.offsetTop - + container.offsetTop - + container.clientHeight + + selectedCellElement.clientHeight; + } + } + } + // Dispatch an event when the cell type is changed handleCellTypeChange(e: CustomEvent) { const cellType = this.cellTypes[e.detail.index]; @@ -286,6 +362,35 @@ export class CovalentNotebook extends LitElement { } } + private _handleKeydown(event: KeyboardEvent) { + let selectedCellIndex = this.cells?.findIndex((cell) => cell.selected); + switch (event.key) { + case 'ArrowUp': + selectedCellIndex = Math.max(selectedCellIndex - 1, 0); + this.scrollToSelectedCell(selectedCellIndex); + break; + case 'ArrowDown': + selectedCellIndex = Math.min( + selectedCellIndex + 1, + this.cells.length - 1 + ); + this.scrollToSelectedCell(selectedCellIndex); + break; + case 'Enter': + if (event.shiftKey) { + this.runCell(); + } else { + const selectedCellElement = this.shadowRoot?.querySelector( + `#cell-${selectedCellIndex}` + ); + const codeEditor = + selectedCellElement?.shadowRoot?.querySelector('cv-code-editor'); + codeEditor?.editor?.focus(); + } + break; + } + } + // Shows the cell editor on clicking output for markdown cells handleOutputCLick(index: number) { const cell = this.cells[index]; @@ -393,7 +498,7 @@ export class CovalentNotebook extends LitElement { )} -
+
${this.cells.map( (cell, index) => html`
- - this.addCell({ - code: '', - language: this.defaultLanguage || 'python', - })} - > + this.addCell('code')}> addCode cell - this.addCell({ code: '', language: 'markdown' })} - > + this.addCell('markdown')}> addMarkdown
@@ -483,6 +578,11 @@ export class CovalentNotebook extends LitElement { if (this._selectedCellIndex !== null) { const cell = this.cells[this._selectedCellIndex]; this.dispatchCustomCellEvent('run-cell', cell); + + // Select the next cell after running the current cell + if (this._selectedCellIndex + 1 < this.cells.length) { + this.scrollToSelectedCell(this._selectedCellIndex + 1); + } } this.requestUpdate(); } @@ -505,8 +605,11 @@ export class CovalentNotebook extends LitElement { protected updated(_changedProperties: PropertyValues): void { if (_changedProperties.has('cells')) { - this.cells.forEach((cell) => { + this.cells.forEach((cell, index) => { cell.showEditor = this.shouldRenderEditor(cell); + if (cell.inputs?.length) { + this.scrollToSelectedCell(index); + } }); } }