Skip to content

Commit

Permalink
feat: adding support to back to editor and naming improvements (datal…
Browse files Browse the repository at this point in the history 
…ayer#247)
  • Loading branch information
Marcos Alves committed Jun 28, 2024
1 parent 22a31b3 commit 1034794
Show file tree
Hide file tree
Showing 3 changed files with 52 additions and 30 deletions.
30 changes: 26 additions & 4 deletions packages/react/src/components/cell/Cell.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
*/

import { useState, useEffect } from 'react';
import { CodeCell } from '@jupyterlab/cells';
import { CodeCell, MarkdownCell } from '@jupyterlab/cells';
import { KernelMessage } from '@jupyterlab/services';
import { Box } from '@primer/react';
import CellAdapter from './CellAdapter';
Expand Down Expand Up @@ -36,15 +36,15 @@ export const Cell = (props: ICellProps) => {
const [adapter, setAdapter] = useState<CellAdapter>();

const handleCodeCellState = (adapter: CellAdapter) => {
(adapter.codeCell as CodeCell).outputArea.outputLengthChanged?.connect(
(adapter.cell as CodeCell).outputArea.outputLengthChanged?.connect(
(outputArea, outputsCount) => {
cellStore.setOutputsCount(outputsCount);
}
);
adapter.sessionContext.initialize().then(() => {
if (autoStart) {
const execute = CodeCell.execute(
(adapter.codeCell as CodeCell),
(adapter.cell as CodeCell),
adapter.sessionContext
);
execute.then((msg: void | KernelMessage.IExecuteReplyMsg) => {
Expand All @@ -65,7 +65,7 @@ export const Cell = (props: ICellProps) => {
});
cellStore.setAdapter(adapter);
cellStore.setSource(source);
adapter.codeCell.model.contentChanged.connect(
adapter.cell.model.contentChanged.connect(
(cellModel, changedArgs) => {
cellStore.setSource(cellModel.sharedModel.getSource());
}
Expand All @@ -75,6 +75,28 @@ export const Cell = (props: ICellProps) => {
handleCodeCellState(adapter);
}
setAdapter(adapter);


const handleDblClick = (event: Event) => {
let target = event.target as HTMLElement;

/**
* Find the DOM searching by the markdown output class (since child elements can be clicked also)
* If a rendered markdown was found, then back cell to editor mode
*/
while (target && !target.classList.contains('jp-MarkdownOutput')) {
target = target.parentElement as HTMLElement;
}
if (target && target.classList.contains('jp-MarkdownOutput')) {
(adapter.cell as MarkdownCell).rendered = false;
}
};

// Adds the event for double click and the removal on component's destroy
document.addEventListener('dblclick', handleDblClick);
return () => {
document.removeEventListener('dblclick', handleDblClick);
};
});
}
}, [source, defaultKernel, serverSettings]);
Expand Down
42 changes: 21 additions & 21 deletions packages/react/src/components/cell/CellAdapter.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ import getMarked from '../notebook/marked/marked';
import CellCommands from './CellCommands';

export class CellAdapter {
private _codeCell: CodeCell | MarkdownCell | RawCell;
private _cell: CodeCell | MarkdownCell | RawCell;
private _kernel: Kernel;
private _panel: BoxPanel;
private _sessionContext: SessionContext;
Expand Down Expand Up @@ -211,7 +211,7 @@ export class CellAdapter {
});

if (type === 'code') {
this._codeCell = new CodeCell({
this._cell = new CodeCell({
rendermime,
model: new CodeCellModel({
sharedModel: createStandaloneCell({
Expand All @@ -225,7 +225,7 @@ export class CellAdapter {
}),
});
} else if (type === 'markdown') {
this._codeCell = new MarkdownCell({
this._cell = new MarkdownCell({
rendermime,
model: new MarkdownCellModel({
sharedModel: createStandaloneCell({
Expand All @@ -240,11 +240,11 @@ export class CellAdapter {
});
}

this._codeCell.addClass('dla-Jupyter-Cell');
this._codeCell.initializeState();
this._cell.addClass('dla-Jupyter-Cell');
this._cell.initializeState();

if (this._type === 'markdown') {
(this._codeCell as MarkdownCell).rendered = false;
(this._cell as MarkdownCell).rendered = false;
}

this._sessionContext.kernelChanged.connect(
Expand All @@ -270,18 +270,18 @@ export class CellAdapter {
if (this._type === 'code') {
const lang = info.language_info;
const mimeType = mimeService.getMimeTypeByLanguage(lang);
this._codeCell.model.mimeType = mimeType;
this._cell.model.mimeType = mimeType;
}
});
});
const editor = this._codeCell.editor;
const editor = this._cell.editor;
const model = new CompleterModel();
const completer = new Completer({ editor, model });
const timeout = 1000;
const provider = new KernelCompleterProvider();
const reconciliator = new ProviderReconciliator({
context: {
widget: this._codeCell,
widget: this._cell,
editor,
session: this._sessionContext.session,
},
Expand All @@ -293,7 +293,7 @@ export class CellAdapter {
const provider = new KernelCompleterProvider();
handler.reconciliator = new ProviderReconciliator({
context: {
widget: this._codeCell,
widget: this._cell,
editor,
session: this._sessionContext.session,
},
Expand All @@ -303,7 +303,7 @@ export class CellAdapter {
});
handler.editor = editor;

CellCommands(commands, this._codeCell!, this._sessionContext, handler);
CellCommands(commands, this._cell!, this._sessionContext, handler);
completer.hide();
completer.addClass('jp-Completer-Cell');
Widget.attach(completer, document.body);
Expand All @@ -313,9 +313,9 @@ export class CellAdapter {
icon: runIcon,
onClick: () => {
if (this._type === 'code') {
CodeCell.execute(this._codeCell as CodeCell, this._sessionContext);
CodeCell.execute(this._cell as CodeCell, this._sessionContext);
} else if (this._type === 'markdown') {
(this.codeCell as MarkdownCell).rendered = true;
(this._cell as MarkdownCell).rendered = true;
}
},
tooltip: 'Run',
Expand All @@ -336,18 +336,18 @@ export class CellAdapter {
);

if (this._type === 'code') {
(this._codeCell as CodeCell).outputsScrolled = false;
(this._cell as CodeCell).outputsScrolled = false;
}
this._codeCell.activate();
this._cell.activate();

this._panel = new BoxPanel();
this._panel.direction = 'top-to-bottom';
this._panel.spacing = 0;
this._panel.addWidget(toolbar);
this._panel.addWidget(this._codeCell);
this._panel.addWidget(this._cell);

BoxPanel.setStretch(toolbar, 0);
BoxPanel.setStretch(this._codeCell, 1);
BoxPanel.setStretch(this._cell, 1);
window.addEventListener('resize', () => {
this._panel.update();
});
Expand All @@ -358,8 +358,8 @@ export class CellAdapter {
return this._panel;
}

get codeCell(): CodeCell | MarkdownCell | RawCell {
return this._codeCell;
get cell(): CodeCell | MarkdownCell | RawCell {
return this._cell;
}

get sessionContext(): SessionContext {
Expand All @@ -372,9 +372,9 @@ export class CellAdapter {

execute = () => {
if (this._type === 'code') {
CodeCell.execute((this._codeCell as CodeCell), this._sessionContext);
CodeCell.execute((this._cell as CodeCell), this._sessionContext);
} else if (this._type === 'markdown') {
(this._codeCell as MarkdownCell).rendered = true;
(this._cell as MarkdownCell).rendered = true;
}
};
}
Expand Down
10 changes: 5 additions & 5 deletions packages/react/src/components/cell/CellCommands.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ const cmdIds = {

export const CellCommands = (
commandRegistry: CommandRegistry,
codeCell: CodeCell | MarkdownCell | RawCell,
cell: CodeCell | MarkdownCell | RawCell,
sessionContext: SessionContext,
completerHandler: CompletionHandler
): void => {
Expand All @@ -30,10 +30,10 @@ export const CellCommands = (
});
commandRegistry.addCommand('run:cell', {
execute: () => {
if (codeCell instanceof CodeCell) {
CodeCell.execute(codeCell, sessionContext)
} else if (codeCell instanceof MarkdownCell) {
(codeCell as MarkdownCell).rendered = true;
if (cell instanceof CodeCell) {
CodeCell.execute(cell, sessionContext)
} else if (cell instanceof MarkdownCell) {
(cell as MarkdownCell).rendered = true;
}
},
});
Expand Down

0 comments on commit 1034794

Please sign in to comment.