Rebase and improver performance logging

packages/editor/src/di.config.ts

@@ -25,7 +25,6 @@ import ivyDiagramModule from './diagram/di.config';
 import { LaneNode } from './diagram/model';
 import { ivyLabelEditModule, ivyLabelEditUiModule } from './edit-label/di.config';
 import ivyExecutionModule from './execution/di.config';
-import { IvyGLSPCommandStack } from './ivy-command-stack';
 import ivyJumpModule from './jump/di.config';
 import ivyKeyListenerModule from './key-listener/di.config';
 import ivyLaneModule from './lanes/di.config';
@@ -93,7 +92,7 @@ export default function createContainer(widgetId: string, ...containerConfigurat
 
   bindOrRebind(container, MarqueeUtil).to(IvyMarqueeUtil).inSingletonScope();
   bindOrRebind(container, TYPES.IMarqueeBehavior).toConstantValue({ entireEdge: true, entireElement: true });
-  bindOrRebind(container, TYPES.ICommandStack).to(IvyGLSPCommandStack).inSingletonScope();
+  // bindOrRebind(container, TYPES.ICommandStack).to(IvyGLSPCommandStack).inSingletonScope();
   bindOrRebind(container, TYPES.ILogger).to(ConsoleLogger).inSingletonScope();
   bindOrRebind(container, TYPES.LogLevel).toConstantValue(LogLevel.warn);
   bindOrRebind(container, TYPES.ISnapper).to(GLSPCenterGridSnapper);

packages/editor/src/performance/perf-command-stack.ts

@@ -0,0 +1,19 @@
+import { GModelRoot, ICommand } from '@eclipse-glsp/client';
+import { injectable } from 'inversify';
+import { IvyGLSPCommandStack } from '../ivy-command-stack';
+
+@injectable()
+export class PerfCommandStack extends IvyGLSPCommandStack {
+  protected counter = 0;
+
+  override async execute(command: ICommand): Promise<GModelRoot> {
+    const counter = ++this.counter;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const kind = (command as any).action?.kind;
+    const perfmessage = kind ? `executeCommand-${kind}-${counter}` : `executeCommand-${counter}`;
+    console.time(perfmessage);
+    const result = await super.execute(command);
+    console.timeEnd(perfmessage);
+    return result;
+  }
+}

packages/editor/src/performance/perf-diagram-loader.ts

@@ -1,12 +1,4 @@
-import {
-  ApplicationIdProvider,
-  DiagramLoader,
-  DiagramLoadingOptions,
-  GLSPClient,
-  IDiagramStartup,
-  Ranked,
-  ResolvedDiagramLoadingOptions
-} from '@eclipse-glsp/client';
+import { DiagramLoader, DiagramLoadingOptions, IDiagramStartup, ResolvedDiagramLoadingOptions } from '@eclipse-glsp/client';
 import { injectable } from 'inversify';
 
 @injectable()
@@ -30,27 +22,8 @@ export class PerfDiagramLoader extends DiagramLoader {
   }
 
   override async load(options: DiagramLoadingOptions = {}): Promise<void> {
-    this.diagramStartups.sort(Ranked.sort);
-    await this.invokeStartupHook('preLoadDiagram');
-    const resolvedOptions: ResolvedDiagramLoadingOptions = {
-      requestModelOptions: {
-        sourceUri: this.options.sourceUri ?? '',
-        diagramType: this.options.diagramType,
-        ...options.requestModelOptions
-      },
-      initializeParameters: {
-        applicationId: ApplicationIdProvider.get(),
-        protocolVersion: GLSPClient.protocolVersion,
-        ...options.initializeParameters
-      },
-      enableNotifications: options.enableNotifications ?? true
-    };
-    await this.actionDispatcher.initialize();
-    await this.invokeStartupHook('preInitialize');
-    await this.initialize(resolvedOptions);
-    await this.invokeStartupHook('preRequestModel');
-    await this.requestModel(resolvedOptions);
-    await this.invokeStartupHook('postRequestModel');
-    this.modelInitializationConstraint.onInitialized(() => this.invokeStartupHook('postModelInitialization'));
+    console.time('DiagramLoader.load');
+    await super.load(options);
+    console.timeEnd('DiagramLoader.load');
   }
 }

packages/editor/src/performance/perf-viewer.tsx

@@ -10,20 +10,12 @@ export class PerfModelViewer extends ModelViewer {
     const counter = ++this.counter;
     console.time(`Viewer update (vu) (${counter})`);
     this.logger.log(this, 'rendering', model);
-    console.time(`vu- renderElement (${counter})`);
     const newVDOM = <div id={this.options.baseDiv}>{this.renderer.renderElement(model)}</div>;
-    console.timeEnd(`vu- renderElement (${counter})`);
     if (this.lastVDOM !== undefined) {
       const hadFocus = this.hasFocus();
-      console.time(`vu- copyClassesFromVNode (${counter})`);
       copyClassesFromVNode(this.lastVDOM, newVDOM);
-      console.timeEnd(`vu- copyClassesFromVNode (${counter})`);
-      console.time(`vu- patch vdom (${counter})`);
       this.lastVDOM = this.patcher.call(this, this.lastVDOM, newVDOM);
-      console.timeEnd(`vu- patch vdom (${counter})`);
-      console.time(`vu- restoreFocus (${counter})`);
       this.restoreFocus(hadFocus);
-      console.timeEnd(`vu- restoreFocus (${counter})`);
     } else if (typeof document !== 'undefined') {
       let placeholder = null;
       if (this.options.shadowRoot) {
@@ -40,20 +32,14 @@ export class PerfModelViewer extends ModelViewer {
             this.onWindowResize(newVDOM);
           });
         }
-        console.time(`vu- copyClassesFromElement (${counter})`);
         copyClassesFromElement(placeholder, newVDOM);
         setClass(newVDOM, this.options.baseClass, true);
-        console.timeEnd(`vu- copyClassesFromElement (${counter})`);
-        console.time(`vu- patch vdom (${counter})`);
         this.lastVDOM = this.patcher.call(this, placeholder, newVDOM);
-        console.timeEnd(`vu- patch vdom (${counter})`);
       } else {
         this.logger.error(this, 'element not in DOM:', this.options.baseDiv);
       }
     }
-    console.time(`vu- postUpdate (${counter})`);
     this.renderer.postUpdate(cause);
-    console.timeEnd(`vu- postUpdate (${counter})`);
     console.timeEnd(`Viewer update (vu) (${counter})`);
   }
 }

packages/editor/src/performance/performance-module.ts

@@ -1,8 +1,8 @@
-import { DiagramLoader, FeatureModule, GLSPActionDispatcher, SetModelCommand, TYPES } from '@eclipse-glsp/client';
-import { PerfDiagramLoader } from './perf-diagram-loader';
+import { DiagramLoader, FeatureModule, GLSPActionDispatcher, ModelViewer, TYPES } from '@eclipse-glsp/client';
 import { PerfActionDispatcher } from './perf-action-dispatcher';
+import { PerfCommandStack } from './perf-command-stack';
+import { PerfDiagramLoader } from './perf-diagram-loader';
 import { PerfModelViewer } from './perf-viewer';
-import { PerfSetModelCommand } from './per-set-model-command';
 
 export function createPerformanceModule(enabled?: boolean): FeatureModule {
   return new FeatureModule(
@@ -12,8 +12,8 @@ export function createPerformanceModule(enabled?: boolean): FeatureModule {
       }
       rebind(DiagramLoader).to(PerfDiagramLoader).inSingletonScope();
       rebind(GLSPActionDispatcher).to(PerfActionDispatcher).inSingletonScope();
-      rebind(TYPES.ModelViewer).to(PerfModelViewer).inSingletonScope();
-      rebind(SetModelCommand).to(PerfSetModelCommand);
+      rebind(ModelViewer).to(PerfModelViewer).inSingletonScope();
+      rebind(TYPES.ICommandStack).to(PerfCommandStack).inSingletonScope();
     },
     { featureId: Symbol('performance') }
   );