@lumino/widgets#PanelLayout TypeScript Examples

The following examples show how to use @lumino/widgets#PanelLayout. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: jupyterlab-sparkmonitor.ts    From sparkmonitor with Apache License 2.0 6 votes vote down vote up 
createCellReactElements() {
        const createElementIfNotExists = (cellModel: ICellModel) => {
            if (cellModel.type === 'code') {
                const codeCell = this.notebookPanel.content.widgets.find((widget) => widget.model === cellModel);
                if (codeCell && !codeCell.node.querySelector('.sparkMonitorCellRoot')) {
                    const widget = ReactWidget.create(
                        React.createElement(CellWidget, {
                            notebookId: this.notebookPanel.id,
                            cellId: cellModel.id,
                        }),
                    );
                    widget.addClass('SparkMonitorCellWidget');

                    (codeCell.layout as PanelLayout).insertWidget(
                        2, // Insert the element below the input area based on position/index
                        widget,
                    );
                    codeCell.update();
                }
            }
        };

        const cells = this.notebookPanel.context.model.cells;

        // Ensure new cells created have a monitoring display
        cells.changed.connect((cells, changed) => {
            for (let i = 0; i < cells.length; i += 1) {
                createElementIfNotExists(cells.get(i));
            }
        });

        // Do it the first time
        for (let i = 0; i < cells.length; i += 1) {
            createElementIfNotExists(cells.get(i));
        }
    }
Example #2
Source File: widget.ts    From jupyterlab-tabular-data-editor with BSD 3-Clause "New" or "Revised" License 4 votes vote down vote up 
/**
   * Construct a new CSV viewer.
   */
  constructor(options: DSVEditor.IOptions) {
    super();

    const context = (this._context = options.context);
    const layout = (this.layout = new PanelLayout());

    this.addClass(CSV_CLASS);

    // Initialize the data grid.
    this._grid = new PaintedGrid({
      defaultSizes: {
        rowHeight: 21,
        columnWidth: 100,
        rowHeaderWidth: 60,
        columnHeaderHeight: 24
      },
      headerVisibility: 'all'
    });

    this._grid.addClass(CSV_GRID_CLASS);
    const keyHandler = new RichKeyHandler();
    this._grid.keyHandler = keyHandler;

    this._grid.copyConfig = {
      separator: '\t',
      format: DataGrid.copyFormatGeneric,
      headers: 'none',
      warningThreshold: 1e6
    };
    layout.addWidget(this._grid);

    // Add the mouse handler to the grid.
    const handler = new RichMouseHandler({ grid: this._grid });
    this._grid.mouseHandler = handler;

    // Connect to the mouse handler signals.
    handler.mouseUpSignal.connect(this._onMouseUp, this);
    handler.hoverSignal.connect(this._onMouseHover, this);

    // init search service to search for matches with the data grid
    this._searchService = new GridSearchService(this._grid);
    this._searchService.changed.connect(this._updateRenderer, this);

    // add the background column and row header elements
    this._background = VirtualDOM.realize(
      h.div({
        className: BACKGROUND_CLASS,
        style: {
          position: 'absolute',
          zIndex: '1'
        }
      })
    );
    this._rowHeader = VirtualDOM.realize(
      h.div({
        className: ROW_HEADER_CLASS,
        style: {
          position: 'absolute',
          zIndex: '2'
        }
      })
    );
    this._columnHeader = VirtualDOM.realize(
      h.div({
        className: COLUMN_HEADER_CLASS,
        style: {
          position: 'absolute',
          zIndex: '2'
        }
      })
    );

    // append the column and row headers to the viewport
    this._grid.viewport.node.appendChild(this._rowHeader);
    this._grid.viewport.node.appendChild(this._columnHeader);
    this._grid.viewport.node.appendChild(this._background);

    void this._context.ready.then(() => {
      this._updateGrid();
      this._revealed.resolve(undefined);
      // Throttle the rendering rate of the widget.
      this._monitor = new ActivityMonitor({
        signal: context.model.contentChanged,
        timeout: RENDER_TIMEOUT
      });
      this._monitor.activityStopped.connect(this._updateGrid, this);
    });
    this._grid.editingEnabled = true;
    this.commandSignal.connect(this._onCommand, this);
  }