How to use @jupyterlab/cells - 10 common examples

it('should set the cell prompt properly while executing', async () => {
        const widget = new CodeCell({ model, rendermime, contentFactory });
        widget.initializeState();
        widget.model.value.text = 'foo';
        const future1 = CodeCell.execute(widget, session);
        expect(widget.promptNode.textContent).toEqual('[*]:');
        const future2 = CodeCell.execute(widget, session);
        expect(widget.promptNode.textContent).toEqual('[*]:');
        await expect(future1).rejects.toThrow('Canceled');
        expect(widget.promptNode.textContent).toEqual('[*]:');
        let msg = await future2;
        expect(msg).not.toBeUndefined;

        // The `if` is a Typescript type guard so that msg.content works below.
        if (msg) {
          expect(widget.promptNode.textContent).toEqual(
            `[${msg.content.execution_count}]:`
          );

it('should save the collapse state to the model `collapsed` metadata', () => {
        const model = new CodeCellModel({});
        let widget = new CodeCell({ model, rendermime });
        widget.initializeState();
        expect(widget.outputHidden).toEqual(false);

        widget.outputHidden = true;
        widget.saveCollapseState();
        expect(model.metadata.get('collapsed')).toEqual(true);

        // Default values are not saved explicitly
        widget.outputHidden = false;
        widget.saveCollapseState();
        expect(model.metadata.get('collapsed')).toEqual(undefined);

        // Default values are explicitly deleted
        model.metadata.set('collapsed', false);
        widget.outputHidden = false;
        widget.saveCollapseState();

it('should save the collapse state to the model', () => {
        const model = new CodeCellModel({});
        let widget = new CodeCell({ model, rendermime });
        widget.initializeState();
        expect(widget.outputsScrolled).toEqual(false);

        widget.outputsScrolled = true;
        widget.saveScrolledState();
        expect(model.metadata.get('scrolled')).toEqual(true);

        widget.outputsScrolled = false;
        widget.saveScrolledState();
        // Default values are not saved explicitly
        expect(model.metadata.get('scrolled')).toEqual(undefined);
      });
    });

it('should save the collapse state to the model', () => {
        const model = new CellModel({});
        const widget = new Cell({ model, contentFactory }).initializeState();
        expect(widget.inputHidden).toEqual(false);

        widget.inputHidden = true;
        widget.saveCollapseState();
        expect(model.metadata.get('jupyter')).toEqual({
          source_hidden: true
        });

        widget.inputHidden = false;
        widget.saveCollapseState();
        // Default values are not saved explicitly
        expect(model.metadata.get('jupyter')).toEqual(undefined);
      });
    });

it('should set the cell prompt properly while executing', async () => {
        const widget = new CodeCell({ model, rendermime, contentFactory });
        widget.initializeState();
        widget.model.value.text = 'foo';
        const future1 = CodeCell.execute(widget, session);
        expect(widget.promptNode.textContent).toEqual('[*]:');
        const future2 = CodeCell.execute(widget, session);
        expect(widget.promptNode.textContent).toEqual('[*]:');
        await expect(future1).rejects.toThrow('Canceled');
        expect(widget.promptNode.textContent).toEqual('[*]:');
        let msg = await future2;
        expect(msg).not.toBeUndefined;

        // The `if` is a Typescript type guard so that msg.content works below.
        if (msg) {
          expect(widget.promptNode.textContent).toEqual(
            `[${msg.content.execution_count}]:`
          );
        }
      });
    });

it('should set the cell prompt properly while executing', async () => {
        const widget = new CodeCell({ model, rendermime, contentFactory });
        widget.initializeState();
        widget.model.value.text = 'foo';
        const future1 = CodeCell.execute(widget, session);
        expect(widget.promptNode.textContent).toEqual('[*]:');
        const future2 = CodeCell.execute(widget, session);
        expect(widget.promptNode.textContent).toEqual('[*]:');
        await expect(future1).rejects.toThrow('Canceled');
        expect(widget.promptNode.textContent).toEqual('[*]:');
        let msg = await future2;
        expect(msg).not.toBeUndefined;

        // The `if` is a Typescript type guard so that msg.content works below.
        if (msg) {
          expect(widget.promptNode.textContent).toEqual(
            `[${msg.content.execution_count}]:`
          );
        }
      });
    });

addBanner() {
    if (this._banner) {
      // An old banner just becomes a normal cell now.
      let cell = this._banner;
      this._cells.push(this._banner);
      cell.disposed.connect(this._onCellDisposed, this);
    }
    // Create the banner.
    let banner = (this._banner = new RawCell({
      contentFactory: this.contentFactory
    }));
    banner.editor.model.value = '...';
    banner.addClass(BANNER_CLASS);
    banner.readOnly = true;
    this._content.addWidget(banner);
  }

addBanner() {
    if (this._banner) {
      // An old banner just becomes a normal cell now.
      let cell = this._banner;
      this._cells.push(this._banner);
      cell.disposed.connect(
        this._onCellDisposed,
        this
      );
    }
    // Create the banner.
    let model = this.modelFactory.createRawCell({});
    model.value.text = '...';
    let banner = (this._banner = new RawCell({
      model,
      contentFactory: this.contentFactory
    })).initializeState();
    banner.addClass(BANNER_CLASS);
    banner.readOnly = true;
    this._content.addWidget(banner);
  }

addBanner() {
    if (this._banner) {
      // An old banner just becomes a normal cell now.
      let cell = this._banner;
      this._cells.push(this._banner);
      cell.disposed.connect(
        this._onCellDisposed,
        this
      );
    }
    // Create the banner.
    let model = this.modelFactory.createRawCell({});
    model.value.text = '...';
    let banner = (this._banner = new RawCell({
      model,
      contentFactory: this.contentFactory
    }));
    banner.addClass(BANNER_CLASS);
    banner.readOnly = true;
    this._content.addWidget(banner);
  }

let target = event.target as HTMLElement;
    let cellFilter = (node: HTMLElement) =>
      node.classList.contains(CONSOLE_CELL_CLASS);
    let cellIndex = CellDragUtils.findCell(target, this._cells, cellFilter);

    if (cellIndex === -1) {
      // `event.target` sometimes gives an orphaned node in
      // Firefox 57, which can have `null` anywhere in its parent line. If we fail
      // to find a cell using `event.target`, try again using a target
      // reconstructed from the position of the click event.
      target = document.elementFromPoint(
        event.clientX,
        event.clientY
      ) as HTMLElement;
      cellIndex = CellDragUtils.findCell(target, this._cells, cellFilter);
    }

    if (cellIndex === -1) {
      return;
    }

    const cell = this._cells.get(cellIndex);

    let targetArea: CellDragUtils.ICellTargetArea = CellDragUtils.detectTargetArea(
      cell,
      event.target as HTMLElement
    );

    if (targetArea === 'prompt') {
      this._dragData = {
        pressX: event.clientX,