@jupyterlab/logconsole 4.0.0-alpha.19 → 4.0.0-alpha.20

package/lib/logger.d.ts

@@ -6,11 +6,11 @@ import { IContentChange, ILogger, ILoggerOutputAreaModel, ILogPayload, IStateCha
 /**
  * All severity levels, including an internal one for metadata.
  */
-declare type FullLogLevel = LogLevel | 'metadata';
+type FullLogLevel = LogLevel | 'metadata';
 /**
  * Custom Notebook Output with log info.
  */
-declare type ILogOutput = nbformat.IOutput & {
+type ILogOutput = nbformat.IOutput & {
     /**
      * Date & time when output is logged in integer representation.
      */

package/lib/tokens.d.ts

@@ -9,7 +9,7 @@ import { ISignal } from '@lumino/signaling';
  * The Logger Registry token.
  */
 export declare const ILoggerRegistry: Token<ILoggerRegistry>;
-export declare type ILoggerRegistryChange = 'append';
+export type ILoggerRegistryChange = 'append';
 /**
  * A Logger Registry that registers and provides loggers by source.
  */
@@ -36,7 +36,7 @@ export interface ILoggerRegistry extends IDisposable {
 /**
  * Log severity level
  */
-export declare type LogLevel = 'critical' | 'error' | 'warning' | 'info' | 'debug';
+export type LogLevel = 'critical' | 'error' | 'warning' | 'info' | 'debug';
 /**
  * The base log payload type.
  */
@@ -96,9 +96,9 @@ export interface IOutputLog extends ILogPayloadBase {
 /**
  * Log payload union type.
  */
-export declare type ILogPayload = ITextLog | IHtmlLog | IOutputLog;
-export declare type IContentChange = 'append' | 'clear';
-export declare type IStateChange = IChangedArgs<IRenderMimeRegistry | null, IRenderMimeRegistry | null, 'rendermime'> | IChangedArgs<LogLevel, LogLevel, 'level'>;
+export type ILogPayload = ITextLog | IHtmlLog | IOutputLog;
+export type IContentChange = 'append' | 'clear';
+export type IStateChange = IChangedArgs<IRenderMimeRegistry | null, IRenderMimeRegistry | null, 'rendermime'> | IChangedArgs<LogLevel, LogLevel, 'level'>;
 export interface ILoggerOutputAreaModel extends IOutputAreaModel {
     /**
      * The maximum number of outputs to store.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jupyterlab/logconsole",
-  "version": "4.0.0-alpha.19",
+  "version": "4.0.0-alpha.20",
   "description": "JupyterLab - Log Console",
   "homepage": "https://github.com/jupyterlab/jupyterlab",
   "bugs": {
@@ -24,7 +24,8 @@
   "files": [
     "lib/**/*.{d.ts,eot,gif,html,jpg,js,js.map,json,png,svg,woff2,ttf}",
     "style/**/*.{css,eot,gif,html,jpg,json,png,svg,woff2,ttf}",
-    "style/index.js"
+    "style/index.js",
+    "src/**/*.{ts,tsx}"
   ],
   "scripts": {
     "build": "tsc -b",
@@ -37,23 +38,23 @@
     "watch": "tsc -b --watch"
   },
   "dependencies": {
-    "@jupyterlab/coreutils": "^6.0.0-alpha.19",
-    "@jupyterlab/nbformat": "^4.0.0-alpha.19",
-    "@jupyterlab/outputarea": "^4.0.0-alpha.19",
-    "@jupyterlab/rendermime": "^4.0.0-alpha.19",
-    "@jupyterlab/services": "^7.0.0-alpha.19",
-    "@jupyterlab/translation": "^4.0.0-alpha.19",
-    "@lumino/coreutils": "^2.0.0-beta.0",
-    "@lumino/disposable": "^2.0.0-beta.1",
-    "@lumino/messaging": "^2.0.0-beta.0",
-    "@lumino/signaling": "^2.0.0-beta.1",
-    "@lumino/widgets": "^2.0.0-beta.1"
+    "@jupyterlab/coreutils": "^6.0.0-alpha.20",
+    "@jupyterlab/nbformat": "^4.0.0-alpha.20",
+    "@jupyterlab/outputarea": "^4.0.0-alpha.20",
+    "@jupyterlab/rendermime": "^4.0.0-alpha.20",
+    "@jupyterlab/services": "^7.0.0-alpha.20",
+    "@jupyterlab/translation": "^4.0.0-alpha.20",
+    "@lumino/coreutils": "^2.0.0-rc.0",
+    "@lumino/disposable": "^2.0.0-rc.0",
+    "@lumino/messaging": "^2.0.0-rc.0",
+    "@lumino/signaling": "^2.0.0-rc.0",
+    "@lumino/widgets": "^2.0.0-rc.0"
   },
   "devDependencies": {
-    "@jupyterlab/testing": "^4.0.0-alpha.19",
+    "@jupyterlab/testing": "^4.0.0-alpha.20",
     "@types/jest": "^29.2.0",
     "rimraf": "~3.0.0",
-    "typescript": "~4.7.3"
+    "typescript": "~5.0.0-beta"
   },
   "publishConfig": {
     "access": "public"

package/src/index.ts

@@ -0,0 +1,11 @@
+// Copyright (c) Jupyter Development Team.
+// Distributed under the terms of the Modified BSD License.
+/**
+ * @packageDocumentation
+ * @module logconsole
+ */
+
+export * from './logger';
+export * from './registry';
+export * from './tokens';
+export * from './widget';

package/src/logger.ts

@@ -0,0 +1,436 @@
+// Copyright (c) Jupyter Development Team.
+// Distributed under the terms of the Modified BSD License.
+
+import * as nbformat from '@jupyterlab/nbformat';
+import { IOutputAreaModel, OutputAreaModel } from '@jupyterlab/outputarea';
+import {
+  IOutputModel,
+  IRenderMimeRegistry,
+  OutputModel
+} from '@jupyterlab/rendermime';
+import { ISignal, Signal } from '@lumino/signaling';
+import {
+  IContentChange,
+  ILogger,
+  ILoggerOutputAreaModel,
+  ILogPayload,
+  IStateChange,
+  LogLevel
+} from './tokens';
+
+/**
+ * All severity levels, including an internal one for metadata.
+ */
+type FullLogLevel = LogLevel | 'metadata';
+
+/**
+ * Custom Notebook Output with log info.
+ */
+type ILogOutput = nbformat.IOutput & {
+  /**
+   * Date & time when output is logged in integer representation.
+   */
+  timestamp: number;
+
+  /**
+   * Log level
+   */
+  level: FullLogLevel;
+};
+
+export interface ILogOutputModel extends IOutputModel {
+  /**
+   * Date & time when output is logged.
+   */
+  readonly timestamp: Date;
+
+  /**
+   * Log level
+   */
+  readonly level: FullLogLevel;
+}
+
+/**
+ * Log Output Model with timestamp which provides
+ * item information for Output Area Model.
+ */
+export class LogOutputModel extends OutputModel implements ILogOutputModel {
+  /**
+   * Construct a LogOutputModel.
+   *
+   * @param options - The model initialization options.
+   */
+  constructor(options: LogOutputModel.IOptions) {
+    super(options);
+
+    this.timestamp = new Date(options.value.timestamp);
+    this.level = options.value.level;
+  }
+
+  /**
+   * Date & time when output is logged.
+   */
+  readonly timestamp: Date;
+
+  /**
+   * Log level
+   */
+  readonly level: FullLogLevel;
+}
+
+/**
+ * Log Output Model namespace that defines initialization options.
+ */
+namespace LogOutputModel {
+  export interface IOptions extends IOutputModel.IOptions {
+    value: ILogOutput;
+  }
+}
+
+/**
+ * Implementation of `IContentFactory` for Output Area Model
+ * which creates LogOutputModel instances.
+ */
+class LogConsoleModelContentFactory extends OutputAreaModel.ContentFactory {
+  /**
+   * Create a rendermime output model from notebook output.
+   */
+  createOutputModel(options: LogOutputModel.IOptions): LogOutputModel {
+    return new LogOutputModel(options);
+  }
+}
+
+/**
+ * Output Area Model implementation which is able to
+ * limit number of outputs stored.
+ */
+export class LoggerOutputAreaModel
+  extends OutputAreaModel
+  implements ILoggerOutputAreaModel
+{
+  constructor({ maxLength, ...options }: LoggerOutputAreaModel.IOptions) {
+    super(options);
+    this.maxLength = maxLength;
+  }
+
+  /**
+   * Add an output, which may be combined with previous output.
+   *
+   * @returns The total number of outputs.
+   *
+   * #### Notes
+   * The output bundle is copied. Contiguous stream outputs of the same `name`
+   * are combined. The oldest outputs are possibly removed to ensure the total
+   * number of outputs is at most `.maxLength`.
+   */
+  add(output: ILogOutput): number {
+    super.add(output);
+    this._applyMaxLength();
+    return this.length;
+  }
+
+  /**
+   * Whether an output should combine with the previous output.
+   *
+   * We combine if the two outputs are in the same second, which is the
+   * resolution for our time display.
+   */
+  protected shouldCombine(options: {
+    value: ILogOutput;
+    lastModel: ILogOutputModel;
+  }): boolean {
+    const { value, lastModel } = options;
+
+    const oldSeconds = Math.trunc(lastModel.timestamp.getTime() / 1000);
+    const newSeconds = Math.trunc(value.timestamp / 1000);
+
+    return oldSeconds === newSeconds;
+  }
+
+  /**
+   * Get an item at the specified index.
+   */
+  get(index: number): ILogOutputModel {
+    return super.get(index) as ILogOutputModel;
+  }
+
+  /**
+   * Maximum number of outputs to store in the model.
+   */
+  get maxLength(): number {
+    return this._maxLength;
+  }
+  set maxLength(value: number) {
+    this._maxLength = value;
+    this._applyMaxLength();
+  }
+
+  /**
+   * Manually apply length limit.
+   */
+  private _applyMaxLength() {
+    if (this.list.length > this._maxLength) {
+      this.list.removeRange(0, this.list.length - this._maxLength);
+    }
+  }
+
+  private _maxLength: number;
+}
+
+export namespace LoggerOutputAreaModel {
+  export interface IOptions extends IOutputAreaModel.IOptions {
+    /**
+     * The maximum number of messages stored.
+     */
+    maxLength: number;
+  }
+}
+
+/**
+ * A concrete implementation of ILogger.
+ */
+export class Logger implements ILogger {
+  /**
+   * Construct a Logger.
+   *
+   * @param source - The name of the log source.
+   */
+  constructor(options: Logger.IOptions) {
+    this.source = options.source;
+    this.outputAreaModel = new LoggerOutputAreaModel({
+      contentFactory: new LogConsoleModelContentFactory(),
+      maxLength: options.maxLength
+    });
+  }
+
+  /**
+   * The maximum number of outputs stored.
+   *
+   * #### Notes
+   * Oldest entries will be trimmed to ensure the length is at most
+   * `.maxLength`.
+   */
+  get maxLength(): number {
+    return this.outputAreaModel.maxLength;
+  }
+  set maxLength(value: number) {
+    this.outputAreaModel.maxLength = value;
+  }
+
+  /**
+   * The level of outputs logged
+   */
+  get level(): LogLevel {
+    return this._level;
+  }
+  set level(newValue: LogLevel) {
+    const oldValue = this._level;
+    if (oldValue === newValue) {
+      return;
+    }
+    this._level = newValue;
+    this._log({
+      output: {
+        output_type: 'display_data',
+        data: {
+          'text/plain': `Log level set to ${newValue}`
+        }
+      },
+      level: 'metadata'
+    });
+    this._stateChanged.emit({ name: 'level', oldValue, newValue });
+  }
+
+  /**
+   * Number of outputs logged.
+   */
+  get length(): number {
+    return this.outputAreaModel.length;
+  }
+
+  /**
+   * A signal emitted when the list of log messages changes.
+   */
+  get contentChanged(): ISignal<this, IContentChange> {
+    return this._contentChanged;
+  }
+
+  /**
+   * A signal emitted when the log state changes.
+   */
+  get stateChanged(): ISignal<this, IStateChange> {
+    return this._stateChanged;
+  }
+
+  /**
+   * Rendermime to use when rendering outputs logged.
+   */
+  get rendermime(): IRenderMimeRegistry | null {
+    return this._rendermime;
+  }
+  set rendermime(value: IRenderMimeRegistry | null) {
+    if (value !== this._rendermime) {
+      const oldValue = this._rendermime;
+      const newValue = (this._rendermime = value);
+      this._stateChanged.emit({ name: 'rendermime', oldValue, newValue });
+    }
+  }
+
+  /**
+   * The number of messages that have ever been stored.
+   */
+  get version(): number {
+    return this._version;
+  }
+
+  /**
+   * The source for the logger.
+   */
+  readonly source: string;
+
+  /**
+   * The output area model used for the logger.
+   *
+   * #### Notes
+   * This will usually not be accessed directly. It is a public attribute so
+   * that the renderer can access it.
+   */
+  readonly outputAreaModel: LoggerOutputAreaModel;
+
+  /**
+   * Log an output to logger.
+   *
+   * @param log - The output to be logged.
+   */
+  log(log: ILogPayload): void {
+    // Filter by our current log level
+    if (
+      Private.LogLevel[log.level as keyof typeof Private.LogLevel] <
+      Private.LogLevel[this._level as keyof typeof Private.LogLevel]
+    ) {
+      return;
+    }
+    let output: nbformat.IOutput | null = null;
+    switch (log.type) {
+      case 'text':
+        output = {
+          output_type: 'display_data',
+          data: {
+            'text/plain': log.data
+          }
+        };
+        break;
+      case 'html':
+        output = {
+          output_type: 'display_data',
+          data: {
+            'text/html': log.data
+          }
+        };
+        break;
+      case 'output':
+        output = log.data;
+        break;
+      default:
+        break;
+    }
+
+    if (output) {
+      this._log({
+        output,
+        level: log.level
+      });
+    }
+  }
+
+  /**
+   * Clear all outputs logged.
+   */
+  clear(): void {
+    this.outputAreaModel.clear(false);
+    this._contentChanged.emit('clear');
+  }
+
+  /**
+   * Add a checkpoint to the log.
+   */
+  checkpoint(): void {
+    this._log({
+      output: {
+        output_type: 'display_data',
+        data: {
+          'text/html': '<hr/>'
+        }
+      },
+      level: 'metadata'
+    });
+  }
+
+  /**
+   * Whether the logger is disposed.
+   */
+  get isDisposed(): boolean {
+    return this._isDisposed;
+  }
+
+  /**
+   * Dispose the logger.
+   */
+  dispose(): void {
+    if (this.isDisposed) {
+      return;
+    }
+    this._isDisposed = true;
+    this.clear();
+    this._rendermime = null!;
+    Signal.clearData(this);
+  }
+
+  private _log(options: { output: nbformat.IOutput; level: FullLogLevel }) {
+    // First, make sure our version reflects the new message so things
+    // triggering from the signals below have the correct version.
+    this._version++;
+
+    // Next, trigger any displays of the message
+    this.outputAreaModel.add({
+      ...options.output,
+      timestamp: Date.now(),
+      level: options.level
+    });
+
+    // Finally, tell people that the message was appended (and possibly
+    // already displayed).
+    this._contentChanged.emit('append');
+  }
+
+  private _isDisposed = false;
+  private _contentChanged = new Signal<this, IContentChange>(this);
+  private _stateChanged = new Signal<this, IStateChange>(this);
+  private _rendermime: IRenderMimeRegistry | null = null;
+  private _version = 0;
+  private _level: LogLevel = 'warning';
+}
+
+export namespace Logger {
+  export interface IOptions {
+    /**
+     * The log source identifier.
+     */
+    source: string;
+    /**
+     * The maximum number of messages to store.
+     */
+    maxLength: number;
+  }
+}
+
+namespace Private {
+  export enum LogLevel {
+    debug,
+    info,
+    warning,
+    error,
+    critical,
+    metadata
+  }
+}

package/src/registry.ts

@@ -0,0 +1,107 @@
+// Copyright (c) Jupyter Development Team.
+// Distributed under the terms of the Modified BSD License.
+
+import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
+import { ISignal, Signal } from '@lumino/signaling';
+import { Logger } from './logger';
+import { ILogger, ILoggerRegistry, ILoggerRegistryChange } from './tokens';
+
+/**
+ * A concrete implementation of ILoggerRegistry.
+ */
+export class LoggerRegistry implements ILoggerRegistry {
+  /**
+   * Construct a LoggerRegistry.
+   *
+   * @param defaultRendermime - Default rendermime to render outputs
+   * with when logger is not supplied with one.
+   */
+  constructor(options: LoggerRegistry.IOptions) {
+    this._defaultRendermime = options.defaultRendermime;
+    this._maxLength = options.maxLength;
+  }
+
+  /**
+   * Get the logger for the specified source.
+   *
+   * @param source - The name of the log source.
+   *
+   * @returns The logger for the specified source.
+   */
+  getLogger(source: string): ILogger {
+    const loggers = this._loggers;
+    let logger = loggers.get(source);
+    if (logger) {
+      return logger;
+    }
+
+    logger = new Logger({ source, maxLength: this.maxLength });
+    logger.rendermime = this._defaultRendermime;
+    loggers.set(source, logger);
+
+    this._registryChanged.emit('append');
+
+    return logger;
+  }
+
+  /**
+   * Get all loggers registered.
+   *
+   * @returns The array containing all registered loggers.
+   */
+  getLoggers(): ILogger[] {
+    return Array.from(this._loggers.values());
+  }
+
+  /**
+   * A signal emitted when the logger registry changes.
+   */
+  get registryChanged(): ISignal<this, ILoggerRegistryChange> {
+    return this._registryChanged;
+  }
+
+  /**
+   * The max length for loggers.
+   */
+  get maxLength(): number {
+    return this._maxLength;
+  }
+  set maxLength(value: number) {
+    this._maxLength = value;
+    this._loggers.forEach(logger => {
+      logger.maxLength = value;
+    });
+  }
+
+  /**
+   * Whether the register is disposed.
+   */
+  get isDisposed(): boolean {
+    return this._isDisposed;
+  }
+
+  /**
+   * Dispose the registry and all loggers.
+   */
+  dispose(): void {
+    if (this.isDisposed) {
+      return;
+    }
+    this._isDisposed = true;
+    this._loggers.forEach(x => x.dispose());
+    Signal.clearData(this);
+  }
+
+  private _defaultRendermime: IRenderMimeRegistry;
+  private _loggers = new Map<string, ILogger>();
+  private _maxLength: number;
+  private _registryChanged = new Signal<this, ILoggerRegistryChange>(this);
+  private _isDisposed = false;
+}
+
+export namespace LoggerRegistry {
+  export interface IOptions {
+    defaultRendermime: IRenderMimeRegistry;
+    maxLength: number;
+  }
+}

package/src/tokens.ts

@@ -0,0 +1,189 @@
+// Copyright (c) Jupyter Development Team.
+// Distributed under the terms of the Modified BSD License.
+
+import { IChangedArgs } from '@jupyterlab/coreutils';
+import * as nbformat from '@jupyterlab/nbformat';
+import { IOutputAreaModel } from '@jupyterlab/outputarea';
+import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
+import { Token } from '@lumino/coreutils';
+import { IDisposable } from '@lumino/disposable';
+import { ISignal } from '@lumino/signaling';
+
+/**
+ * The Logger Registry token.
+ */
+export const ILoggerRegistry = new Token<ILoggerRegistry>(
+  '@jupyterlab/logconsole:ILoggerRegistry'
+);
+
+export type ILoggerRegistryChange = 'append';
+
+/**
+ * A Logger Registry that registers and provides loggers by source.
+ */
+export interface ILoggerRegistry extends IDisposable {
+  /**
+   * Get the logger for the specified source.
+   *
+   * @param source - The name of the log source.
+   *
+   * @returns The logger for the specified source.
+   */
+  getLogger(source: string): ILogger;
+  /**
+   * Get all loggers registered.
+   *
+   * @returns The array containing all registered loggers.
+   */
+  getLoggers(): ILogger[];
+
+  /**
+   * A signal emitted when the logger registry changes.
+   */
+  readonly registryChanged: ISignal<this, ILoggerRegistryChange>;
+}
+
+/**
+ * Log severity level
+ */
+export type LogLevel = 'critical' | 'error' | 'warning' | 'info' | 'debug';
+
+/**
+ * The base log payload type.
+ */
+export interface ILogPayloadBase {
+  /**
+   * Type of log data.
+   */
+  type: string;
+
+  /**
+   * Log level
+   */
+  level: LogLevel;
+
+  /**
+   * Data
+   */
+  data: any;
+}
+
+/**
+ * Plain text log payload.
+ */
+export interface ITextLog extends ILogPayloadBase {
+  /**
+   * Type of log data.
+   */
+  type: 'text';
+  /**
+   * Log data as plain text.
+   */
+  data: string;
+}
+
+/**
+ * HTML log payload.
+ */
+export interface IHtmlLog extends ILogPayloadBase {
+  /**
+   * Type of log data.
+   */
+  type: 'html';
+  /**
+   * Log data as HTML string.
+   */
+  data: string;
+}
+
+/**
+ * Notebook kernel output log payload.
+ */
+export interface IOutputLog extends ILogPayloadBase {
+  /**
+   * Type of log data.
+   */
+  type: 'output';
+  /**
+   * Log data as Notebook kernel output.
+   */
+  data: nbformat.IOutput;
+}
+
+/**
+ * Log payload union type.
+ */
+export type ILogPayload = ITextLog | IHtmlLog | IOutputLog;
+
+export type IContentChange = 'append' | 'clear';
+
+export type IStateChange =
+  | IChangedArgs<
+      IRenderMimeRegistry | null,
+      IRenderMimeRegistry | null,
+      'rendermime'
+    >
+  | IChangedArgs<LogLevel, LogLevel, 'level'>;
+
+export interface ILoggerOutputAreaModel extends IOutputAreaModel {
+  /**
+   * The maximum number of outputs to store.
+   */
+  maxLength: number;
+}
+
+/**
+ * A Logger that manages logs from a particular source.
+ */
+export interface ILogger extends IDisposable {
+  /**
+   * Number of outputs logged.
+   */
+  readonly length: number;
+  /**
+   * Max number of messages.
+   */
+  maxLength: number;
+  /**
+   * Log level.
+   */
+  level: LogLevel;
+  /**
+   * Rendermime to use when rendering outputs logged.
+   */
+  rendermime: IRenderMimeRegistry | null;
+  /**
+   * A signal emitted when the log model changes.
+   */
+  readonly contentChanged: ISignal<this, IContentChange>;
+  /**
+   * A signal emitted when the rendermime changes.
+   */
+  readonly stateChanged: ISignal<this, IStateChange>;
+  /**
+   * The name of the log source.
+   */
+  readonly source: string;
+  /**
+   * Output Area Model used to manage log storage in memory.
+   */
+  readonly outputAreaModel: ILoggerOutputAreaModel;
+  /**
+   * The cumulative number of messages the log has stored.
+   */
+  readonly version: number;
+  /**
+   * Log an output to logger.
+   *
+   * @param log - The output to be logged.
+   */
+  log(log: ILogPayload): void;
+  /**
+   * Add a checkpoint in the log.
+   */
+  checkpoint(): void;
+  /**
+   * Clear all outputs logged.
+   */
+  clear(): void;
+}

package/src/widget.ts

@@ -0,0 +1,489 @@
+// Copyright (c) Jupyter Development Team.
+// Distributed under the terms of the Modified BSD License.
+
+import { IChangedArgs } from '@jupyterlab/coreutils';
+import * as nbformat from '@jupyterlab/nbformat';
+import { IOutputPrompt, OutputArea } from '@jupyterlab/outputarea';
+import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
+import { Kernel, KernelMessage } from '@jupyterlab/services';
+import {
+  ITranslator,
+  nullTranslator,
+  TranslationBundle
+} from '@jupyterlab/translation';
+import { Message } from '@lumino/messaging';
+import { ISignal, Signal } from '@lumino/signaling';
+import { Panel, PanelLayout, StackedPanel, Widget } from '@lumino/widgets';
+import { LoggerOutputAreaModel, LogOutputModel } from './logger';
+import {
+  IContentChange,
+  ILogger,
+  ILoggerRegistry,
+  ILoggerRegistryChange,
+  IStateChange,
+  LogLevel
+} from './tokens';
+
+function toTitleCase(value: string) {
+  return value.length === 0 ? value : value[0].toUpperCase() + value.slice(1);
+}
+
+/**
+ * All severity levels, including an internal one for metadata.
+ */
+type FullLogLevel = LogLevel | 'metadata';
+
+/**
+ * Log console output prompt implementation
+ */
+class LogConsoleOutputPrompt extends Widget implements IOutputPrompt {
+  constructor() {
+    super();
+    this._timestampNode = document.createElement('div');
+    this.node.append(this._timestampNode);
+  }
+
+  /**
+   * Date & time when output is logged.
+   */
+  set timestamp(value: Date) {
+    this._timestamp = value;
+    this._timestampNode.innerHTML = this._timestamp.toLocaleTimeString();
+    this.update();
+  }
+
+  /**
+   * Log level
+   */
+  set level(value: FullLogLevel) {
+    this._level = value;
+    this.node.dataset.logLevel = value;
+    this.update();
+  }
+
+  update() {
+    if (this._level !== undefined && this._timestamp !== undefined) {
+      this.node.title = `${this._timestamp.toLocaleString()}; ${toTitleCase(
+        this._level
+      )} level`;
+    }
+  }
+
+  /**
+   * The execution count for the prompt.
+   */
+  executionCount: nbformat.ExecutionCount;
+
+  private _timestamp: Date;
+  private _level: FullLogLevel;
+  private _timestampNode: HTMLDivElement;
+}
+
+/**
+ * Output Area implementation displaying log outputs
+ * with prompts showing log timestamps.
+ */
+class LogConsoleOutputArea extends OutputArea {
+  /**
+   * Output area model used by the widget.
+   */
+  readonly model: LoggerOutputAreaModel;
+
+  /**
+   * Create an output item with a prompt and actual output
+   */
+  protected createOutputItem(model: LogOutputModel): Widget | null {
+    const panel = super.createOutputItem(model) as Panel;
+    if (panel === null) {
+      // Could not render model
+      return null;
+    }
+
+    // first widget in panel is prompt of type LoggerOutputPrompt
+    const prompt = panel.widgets[0] as LogConsoleOutputPrompt;
+    prompt.timestamp = model.timestamp;
+    prompt.level = model.level;
+    return panel;
+  }
+
+  /**
+   * Handle an input request from a kernel by doing nothing.
+   */
+  protected onInputRequest(
+    msg: KernelMessage.IInputRequestMsg,
+    future: Kernel.IShellFuture
+  ): void {
+    return;
+  }
+}
+
+/**
+ * Implementation of `IContentFactory` for Output Area
+ * which creates custom output prompts.
+ */
+class LogConsoleContentFactory extends OutputArea.ContentFactory {
+  /**
+   * Create the output prompt for the widget.
+   */
+  createOutputPrompt(): LogConsoleOutputPrompt {
+    return new LogConsoleOutputPrompt();
+  }
+}
+
+/**
+ * Implements a panel which supports pinning the position to the end if it is
+ * scrolled to the end.
+ *
+ * #### Notes
+ * This is useful for log viewing components or chat components that append
+ * elements at the end. We would like to automatically scroll when the user
+ * has scrolled to the bottom, but not change the scrolling when the user has
+ * changed the scroll position.
+ */
+export class ScrollingWidget<T extends Widget> extends Widget {
+  constructor({ content, ...options }: ScrollingWidget.IOptions<T>) {
+    super(options);
+    this.addClass('jp-Scrolling');
+    const layout = (this.layout = new PanelLayout());
+    layout.addWidget(content);
+
+    this._content = content;
+    this._sentinel = document.createElement('div');
+    this.node.appendChild(this._sentinel);
+  }
+
+  /**
+   * The content widget.
+   */
+  get content(): T {
+    return this._content;
+  }
+
+  protected onAfterAttach(msg: Message): void {
+    super.onAfterAttach(msg);
+    // defer so content gets a chance to attach first
+    requestAnimationFrame(() => {
+      this._sentinel.scrollIntoView();
+      this._scrollHeight = this.node.scrollHeight;
+    });
+
+    // Set up intersection observer for the sentinel
+    if (typeof IntersectionObserver !== 'undefined') {
+      this._observer = new IntersectionObserver(
+        args => {
+          this._handleScroll(args);
+        },
+        { root: this.node, threshold: 1 }
+      );
+      this._observer.observe(this._sentinel);
+    }
+  }
+
+  protected onBeforeDetach(msg: Message): void {
+    if (this._observer) {
+      this._observer.disconnect();
+    }
+  }
+
+  protected onAfterShow(msg: Message): void {
+    if (this._tracking) {
+      this._sentinel.scrollIntoView();
+    }
+  }
+
+  private _handleScroll([entry]: IntersectionObserverEntry[]) {
+    if (entry.isIntersecting) {
+      this._tracking = true;
+    } else if (this.isVisible) {
+      const currentHeight = this.node.scrollHeight;
+      if (currentHeight === this._scrollHeight) {
+        // Likely the user scrolled manually
+        this._tracking = false;
+      } else {
+        // We assume we scrolled because our size changed, so scroll to the end.
+        this._sentinel.scrollIntoView();
+        this._scrollHeight = currentHeight;
+        this._tracking = true;
+      }
+    }
+  }
+
+  private _content: T;
+  private _observer: IntersectionObserver | null = null;
+  private _scrollHeight: number;
+  private _sentinel: HTMLDivElement;
+  private _tracking: boolean;
+}
+
+export namespace ScrollingWidget {
+  export interface IOptions<T extends Widget> extends Widget.IOptions {
+    content: T;
+  }
+}
+
+/**
+ * A StackedPanel implementation that creates Output Areas
+ * for each log source and activates as source is switched.
+ */
+export class LogConsolePanel extends StackedPanel {
+  /**
+   * Construct a LogConsolePanel instance.
+   *
+   * @param loggerRegistry - The logger registry that provides
+   * logs to be displayed.
+   */
+  constructor(loggerRegistry: ILoggerRegistry, translator?: ITranslator) {
+    super();
+    this.translator = translator || nullTranslator;
+    this._trans = this.translator.load('jupyterlab');
+    this._loggerRegistry = loggerRegistry;
+    this.addClass('jp-LogConsolePanel');
+
+    loggerRegistry.registryChanged.connect(
+      (sender: ILoggerRegistry, args: ILoggerRegistryChange) => {
+        this._bindLoggerSignals();
+      },
+      this
+    );
+
+    this._bindLoggerSignals();
+
+    this._placeholder = new Widget();
+    this._placeholder.addClass('jp-LogConsoleListPlaceholder');
+    this.addWidget(this._placeholder);
+  }
+
+  /**
+   * The logger registry providing the logs.
+   */
+  get loggerRegistry(): ILoggerRegistry {
+    return this._loggerRegistry;
+  }
+
+  /**
+   * The current logger.
+   */
+  get logger(): ILogger | null {
+    if (this.source === null) {
+      return null;
+    }
+    return this.loggerRegistry.getLogger(this.source);
+  }
+
+  /**
+   * The log source displayed
+   */
+  get source(): string | null {
+    return this._source;
+  }
+  set source(name: string | null) {
+    if (name === this._source) {
+      return;
+    }
+    const oldValue = this._source;
+    const newValue = (this._source = name);
+    this._showOutputFromSource(newValue);
+    this._handlePlaceholder();
+    this._sourceChanged.emit({ oldValue, newValue, name: 'source' });
+  }
+
+  /**
+   * The source version displayed.
+   */
+  get sourceVersion(): number | null {
+    const source = this.source;
+    return source !== null
+      ? this._loggerRegistry.getLogger(source).version
+      : null;
+  }
+
+  /**
+   * Signal for source changes
+   */
+  get sourceChanged(): ISignal<
+    this,
+    IChangedArgs<string | null, string | null, 'source'>
+  > {
+    return this._sourceChanged;
+  }
+
+  /**
+   * Signal for source changes
+   */
+  get sourceDisplayed(): ISignal<this, ISourceDisplayed> {
+    return this._sourceDisplayed;
+  }
+
+  protected onAfterAttach(msg: Message): void {
+    super.onAfterAttach(msg);
+    this._updateOutputAreas();
+    this._showOutputFromSource(this._source);
+    this._handlePlaceholder();
+  }
+
+  protected onAfterShow(msg: Message): void {
+    super.onAfterShow(msg);
+    if (this.source !== null) {
+      this._sourceDisplayed.emit({
+        source: this.source,
+        version: this.sourceVersion
+      });
+    }
+  }
+
+  private _bindLoggerSignals() {
+    const loggers = this._loggerRegistry.getLoggers();
+    for (const logger of loggers) {
+      if (this._loggersWatched.has(logger.source)) {
+        continue;
+      }
+
+      logger.contentChanged.connect((sender: ILogger, args: IContentChange) => {
+        this._updateOutputAreas();
+        this._handlePlaceholder();
+      }, this);
+
+      logger.stateChanged.connect((sender: ILogger, change: IStateChange) => {
+        if (change.name !== 'rendermime') {
+          return;
+        }
+        const viewId = `source:${sender.source}`;
+        const outputArea = this._outputAreas.get(viewId);
+        if (outputArea) {
+          if (change.newValue) {
+            // cast away readonly
+            (outputArea.rendermime as IRenderMimeRegistry) = change.newValue;
+          } else {
+            outputArea.dispose();
+          }
+        }
+      }, this);
+
+      this._loggersWatched.add(logger.source);
+    }
+  }
+
+  private _showOutputFromSource(source: string | null) {
+    // If the source is null, pick a unique name so all output areas hide.
+    const viewId = source === null ? 'null source' : `source:${source}`;
+
+    this._outputAreas.forEach(
+      (outputArea: LogConsoleOutputArea, name: string) => {
+        // Show/hide the output area parents, the scrolling windows.
+        if (outputArea.id === viewId) {
+          outputArea.parent?.show();
+          if (outputArea.isVisible) {
+            this._sourceDisplayed.emit({
+              source: this.source,
+              version: this.sourceVersion
+            });
+          }
+        } else {
+          outputArea.parent?.hide();
+        }
+      }
+    );
+
+    const title =
+      source === null
+        ? this._trans.__('Log Console')
+        : this._trans.__('Log: %1', source);
+    this.title.label = title;
+    this.title.caption = title;
+  }
+
+  private _handlePlaceholder() {
+    if (this.source === null) {
+      this._placeholder.node.textContent = this._trans.__(
+        'No source selected.'
+      );
+      this._placeholder.show();
+    } else if (this._loggerRegistry.getLogger(this.source).length === 0) {
+      this._placeholder.node.textContent = this._trans.__('No log messages.');
+      this._placeholder.show();
+    } else {
+      this._placeholder.hide();
+      this._placeholder.node.textContent = '';
+    }
+  }
+
+  private _updateOutputAreas() {
+    const loggerIds = new Set<string>();
+    const loggers = this._loggerRegistry.getLoggers();
+
+    for (const logger of loggers) {
+      const source = logger.source;
+      const viewId = `source:${source}`;
+      loggerIds.add(viewId);
+
+      // add view for logger if not exist
+      if (!this._outputAreas.has(viewId)) {
+        const outputArea = new LogConsoleOutputArea({
+          rendermime: logger.rendermime!,
+          contentFactory: new LogConsoleContentFactory(),
+          model: logger.outputAreaModel
+        });
+        outputArea.id = viewId;
+
+        // Attach the output area so it is visible, so the accounting
+        // functions below record the outputs actually displayed.
+        const w = new ScrollingWidget({
+          content: outputArea
+        });
+        this.addWidget(w);
+        this._outputAreas.set(viewId, outputArea);
+
+        // This is where the source object is associated with the output area.
+        // We capture the source from this environment in the closure.
+        const outputUpdate = (sender: LogConsoleOutputArea) => {
+          // If the current log console panel source is the source associated
+          // with this output area, and the output area is visible, then emit
+          // the logConsolePanel source displayed signal.
+          if (this.source === source && sender.isVisible) {
+            // We assume that the output area has been updated to the current
+            // version of the source.
+            this._sourceDisplayed.emit({
+              source: this.source,
+              version: this.sourceVersion
+            });
+          }
+        };
+        // Notify messages were displayed any time the output area is updated
+        // and update for any outputs rendered on construction.
+        outputArea.outputLengthChanged.connect(outputUpdate, this);
+        // Since the output area was attached above, we can rely on its
+        // visibility to account for the messages displayed.
+        outputUpdate(outputArea);
+      }
+    }
+
+    // remove output areas that do not have corresponding loggers anymore
+    const viewIds = this._outputAreas.keys();
+
+    for (const viewId of viewIds) {
+      if (!loggerIds.has(viewId)) {
+        const outputArea = this._outputAreas.get(viewId);
+        outputArea?.dispose();
+        this._outputAreas.delete(viewId);
+      }
+    }
+  }
+
+  protected translator: ITranslator;
+  private _trans: TranslationBundle;
+  private _loggerRegistry: ILoggerRegistry;
+  private _outputAreas = new Map<string, LogConsoleOutputArea>();
+  private _source: string | null = null;
+  private _sourceChanged = new Signal<
+    this,
+    IChangedArgs<string | null, string | null, 'source'>
+  >(this);
+  private _sourceDisplayed = new Signal<this, ISourceDisplayed>(this);
+  private _placeholder: Widget;
+  private _loggersWatched: Set<string> = new Set();
+}
+
+export interface ISourceDisplayed {
+  source: string | null;
+  version: number | null;
+}