Make execution time relative to frontend time

packages/notebook/src/browser/view/notebook-code-cell-view.tsx

@@ -76,6 +76,7 @@ export interface NotebookCodeCellStatusProps {
 
 export interface NotebookCodeCellStatusState {
  currentExecution?: CellExecution;
+ executionTime: number;
 }
 
 export class NotebookCodeCellStatus extends React.Component<NotebookCodeCellStatusProps, NotebookCodeCellStatusState> {
@@ -85,17 +86,24 @@ export class NotebookCodeCellStatus extends React.Component<NotebookCodeCellStat
  constructor(props: NotebookCodeCellStatusProps) {
  super(props);
 
- this.state = {};
+ this.state = {
+ executionTime: 0
+ };
 
  let currentInterval: NodeJS.Timeout | undefined;
  this.toDispose.push(props.executionStateService.onDidChangeExecution(event => {
  if (event.affectsCell(this.props.cell.uri)) {
- this.setState({ currentExecution: event.changed });
+ this.setState({ currentExecution: event.changed, executionTime: 0 });
  clearInterval(currentInterval);
  if (event.changed?.state === NotebookCellExecutionState.Executing) {
+ const startTime = Date.now();
  // The resolution of the time display is only a single digit after the decimal point.
  // Therefore, we only need to update the display every 100ms.
- currentInterval = setInterval(() => this.forceUpdate(), 100);
+ currentInterval = setInterval(() => {
+ this.setState({
+ executionTime: Date.now() - startTime
+ });
+ }, 100);
  }
  }
  }));
@@ -144,12 +152,11 @@ export class NotebookCodeCellStatus extends React.Component<NotebookCodeCellStat
 
  private getExecutionTime(): number {
  const { runStartTime, runEndTime } = this.props.cell.internalMetadata;
+ const { executionTime } = this.state;
  if (runStartTime !== undefined && runEndTime !== undefined) {
  return runEndTime - runStartTime;
- } else if (runStartTime !== undefined) {
- return Date.now() - runStartTime;
  }
- return 0;
+ return executionTime;
  }
 
  private renderTime(ms: number): string {