Measure page load and shader compile times

frontend/javascripts/app.ts

@@ -2,7 +2,7 @@ import { createNanoEvents } from "nanoevents";
 
 class WebknossosApplication {
   // This event emitter is currently only used for two types of events:
-  // 1) webknossos:ready
+  // 1) webknossos:initialized
   //    When WK is done with initialization, the front-end API can be constructed.
   // 2) rerender
   //    Most of the time, rendering happens when something in the Store changes. However,

frontend/javascripts/libs/window.ts

@@ -76,6 +76,7 @@ const _window: Window &
     OlvyConfig?: ArbitraryObject | null;
     managers?: Array<TextureBucketManager>;
     materials?: Record<string, ShaderMaterial>;
+    measuredTimeToFirstRender?: boolean;
   } =
   typeof window === "undefined"
     ? ({

frontend/javascripts/router/route_wrappers.tsx

@@ -14,14 +14,21 @@ import * as Utils from "libs/utils";
 import { coalesce } from "libs/utils";
 import window from "libs/window";
 import { isNumber } from "lodash";
+import { useEffect } from "react";
 import { Navigate, useLocation, useParams } from "react-router-dom";
 import { APICompoundTypeEnum, type APIMagRestrictions, TracingTypeEnum } from "types/api_types";
-import { ControlModeEnum } from "viewer/constants";
+import { ControlModeEnum, PerformanceMarkEnum } from "viewer/constants";
 import { getDatasetIdOrNameFromReadableURLPart } from "viewer/model/accessors/dataset_accessor";
 import { Store } from "viewer/singletons";
 import TracingLayoutView from "viewer/view/layouting/tracing_layout_view";
 import { PageNotFoundView } from "./page_not_found_view";
 
+function markTracingViewLoadStartEffect() {
+  const markName = PerformanceMarkEnum.TRACING_VIEW_LOAD;
+  performance.mark(markName);
+  return () => performance.clearMarks(markName);
+}
+
 export function RootRouteWrapper() {
   const isAuthenticated = useWkSelector((state) => state.activeUser != null);
   const hasOrganizations = useWkSelector((state) => state.uiInformation.hasOrganizations);
@@ -169,7 +176,7 @@ export function ShortLinksRouteWrapper() {
 export function TracingViewRouteWrapper() {
   const { type, id } = useParams();
   const initialMaybeCompoundType = type != null ? coalesce(APICompoundTypeEnum, type) : null;
-
+  useEffect(markTracingViewLoadStartEffect, []);
   return (
     <TracingLayoutView
       initialMaybeCompoundType={initialMaybeCompoundType}
@@ -269,7 +276,7 @@ export function TracingViewModeRouteWrapper() {
 
   const { datasetId, datasetName } = getDatasetIdOrNameFromReadableURLPart(datasetNameAndId);
   const getParams = Utils.getUrlParamsObjectFromString(location.search);
-
+  useEffect(markTracingViewLoadStartEffect, []);
   if (datasetName) {
     // Handle very old legacy URLs which neither have a datasetId nor an organizationId.
     // The schema is something like <authority>/datasets/:datasetName/view

frontend/javascripts/test/api/api_skeleton_latest.spec.ts

@@ -44,7 +44,7 @@ function applyRotationInFlycamReducerSpace(
 
 describe("API Skeleton", () => {
   beforeEach<WebknossosTestContext>(async (context) => {
-    await setupWebknossosForTesting(context, "skeleton", { dontDispatchWkReady: true });
+    await setupWebknossosForTesting(context, "skeleton", { dontDispatchWkInitialized: true });
   });
 
   it<WebknossosTestContext>("getActiveNodeId should get the active node id", ({ api }) => {

frontend/javascripts/test/helpers/apiHelpers.ts

@@ -43,7 +43,11 @@ import {
   sendSaveRequestWithToken,
   type MinCutTargetEdge,
 } from "admin/rest_api";
-import { resetStoreAction, restartSagaAction, wkReadyAction } from "viewer/model/actions/actions";
+import {
+  resetStoreAction,
+  restartSagaAction,
+  wkInitializedAction,
+} from "viewer/model/actions/actions";
 import { setActiveUserAction } from "viewer/model/actions/user_actions";
 import {
   tracings as HYBRID_TRACINGS,
@@ -314,7 +318,7 @@ startSaga(rootSaga);
 export async function setupWebknossosForTesting(
   testContext: WebknossosTestContext,
   mode: keyof typeof modelData,
-  options?: { dontDispatchWkReady?: boolean },
+  options?: { dontDispatchWkInitialized?: boolean },
 ): Promise<void> {
   /*
    * This will execute model.fetch(...) and initialize the store with the tracing, etc.
@@ -387,17 +391,17 @@ export async function setupWebknossosForTesting(
       true,
     );
     // Trigger the event ourselves, as the webKnossosController is not instantiated
-    app.vent.emit("webknossos:ready");
+    app.vent.emit("webknossos:initialized");
 
     const api = await webknossos.apiReady();
     testContext.api = api;
 
     // Ensure the slow compression is disabled by default. Tests may change
     // this individually.
     testContext.setSlowCompression(false);
-    if (!options?.dontDispatchWkReady) {
-      // Dispatch the wkReadyAction, so the sagas are started
-      Store.dispatch(wkReadyAction());
+    if (!options?.dontDispatchWkInitialized) {
+      // Dispatch the wkInitializedAction, so the sagas are started
+      Store.dispatch(wkInitializedAction());
     }
   } catch (error) {
     console.error("model.fetch() failed", error);

frontend/javascripts/test/sagas/annotation_saga.spec.ts

@@ -10,8 +10,8 @@ import {
   setBlockedByUserAction,
   setOthersMayEditForAnnotationAction,
 } from "viewer/model/actions/annotation_actions";
-import { ensureWkReady } from "viewer/model/sagas/ready_sagas";
-import { wkReadyAction } from "viewer/model/actions/actions";
+import { ensureWkInitialized } from "viewer/model/sagas/ready_sagas";
+import { wkInitializedAction } from "viewer/model/actions/actions";
 import { acquireAnnotationMutexMaybe } from "viewer/model/sagas/annotation_saga";
 
 const createInitialState = (
@@ -39,7 +39,7 @@ describe("Annotation Saga", () => {
     const storeState = createInitialState(false, false);
     const saga = acquireAnnotationMutexMaybe();
     saga.next();
-    saga.next(wkReadyAction());
+    saga.next(wkInitializedAction());
     saga.next(storeState.annotation.restrictions.allowUpdate);
     saga.next(storeState.annotation.annotationId);
     expect(saga.next().done, "The saga should terminate.").toBe(true);
@@ -51,9 +51,9 @@ describe("Annotation Saga", () => {
     const storeState = createInitialState(othersMayEdit);
     const saga = acquireAnnotationMutexMaybe();
 
-    expectValueDeepEqual(expect, saga.next(), call(ensureWkReady));
+    expectValueDeepEqual(expect, saga.next(), call(ensureWkInitialized));
     expect(
-      saga.next(wkReadyAction()).value.type,
+      saga.next(wkInitializedAction()).value.type,
       "The saga should select the allowUpdate next.",
     ).toBe("SELECT");
     expect(

frontend/javascripts/test/sagas/save_saga.spec.ts

@@ -3,7 +3,7 @@ import { alert } from "libs/window";
 import { setSaveBusyAction } from "viewer/model/actions/save_actions";
 import DiffableMap from "libs/diffable_map";
 import compactSaveQueue from "viewer/model/helpers/compaction/compact_save_queue";
-import { ensureWkReady } from "viewer/model/sagas/ready_sagas";
+import { ensureWkInitialized } from "viewer/model/sagas/ready_sagas";
 import { createSaveQueueFromUpdateActions } from "../helpers/saveHelpers";
 import { expectValueDeepEqual } from "../helpers/sagaHelpers";
 import { UnitLong } from "viewer/constants";
@@ -94,7 +94,7 @@ describe("Save Saga", () => {
     ];
     const saveQueue = createSaveQueueFromUpdateActions(updateActions, TIMESTAMP);
     const saga = pushSaveQueueAsync();
-    expectValueDeepEqual(expect, saga.next(), call(ensureWkReady));
+    expectValueDeepEqual(expect, saga.next(), call(ensureWkInitialized));
     saga.next(); // setLastSaveTimestampAction
 
     saga.next(); // select state
@@ -248,7 +248,7 @@ describe("Save Saga", () => {
     ];
     const saveQueue = createSaveQueueFromUpdateActions(updateActions, TIMESTAMP);
     const saga = pushSaveQueueAsync();
-    expectValueDeepEqual(expect, saga.next(), call(ensureWkReady));
+    expectValueDeepEqual(expect, saga.next(), call(ensureWkInitialized));
 
     saga.next();
     saga.next(); // select state
@@ -276,7 +276,7 @@ describe("Save Saga", () => {
     ];
     const saveQueue = createSaveQueueFromUpdateActions(updateActions, TIMESTAMP);
     const saga = pushSaveQueueAsync();
-    expectValueDeepEqual(expect, saga.next(), call(ensureWkReady));
+    expectValueDeepEqual(expect, saga.next(), call(ensureWkInitialized));
     saga.next();
     saga.next(); // select state
 

frontend/javascripts/viewer/api/api_latest.ts

@@ -91,7 +91,7 @@ import {
   getVolumeTracings,
   hasVolumeTracings,
 } from "viewer/model/accessors/volumetracing_accessor";
-import { restartSagaAction, wkReadyAction } from "viewer/model/actions/actions";
+import { restartSagaAction, wkInitializedAction } from "viewer/model/actions/actions";
 import {
   dispatchMaybeFetchMeshFilesAsync,
   refreshMeshesAction,
@@ -1161,7 +1161,7 @@ class TracingApi {
       version,
     );
     Store.dispatch(discardSaveQueuesAction());
-    Store.dispatch(wkReadyAction());
+    Store.dispatch(wkInitializedAction());
     UrlManager.updateUnthrottled();
   }
 

frontend/javascripts/viewer/api/api_loader.ts

@@ -14,7 +14,7 @@ class ApiLoader {
 
   constructor(webKnossosModel: WebKnossosModel) {
     this.readyPromise = new Promise((resolve) => {
-      app.vent.on("webknossos:ready", resolve);
+      app.vent.on("webknossos:initialized", resolve);
     });
     this.model = webKnossosModel;
     this.DEV = new WkDev(this);

frontend/javascripts/viewer/constants.ts

@@ -508,3 +508,8 @@ export enum AnnotationStateFilterEnum {
   ACTIVE = "Active",
   FINISHED_OR_ARCHIVED = "Finished",
 }
+
+export enum PerformanceMarkEnum {
+  TRACING_VIEW_LOAD = "tracing_view_load_start",
+  SHADER_COMPILE = "shader_compile_start",
+}

frontend/javascripts/viewer/controller.tsx

@@ -22,7 +22,7 @@ import UrlManager from "viewer/controller/url_manager";
 import ArbitraryController from "viewer/controller/viewmodes/arbitrary_controller";
 import PlaneController from "viewer/controller/viewmodes/plane_controller";
 import { AnnotationTool } from "viewer/model/accessors/tool_accessor";
-import { wkReadyAction } from "viewer/model/actions/actions";
+import { wkInitializedAction } from "viewer/model/actions/actions";
 import { redoAction, saveNowAction, undoAction } from "viewer/model/actions/save_actions";
 import { setViewModeAction, updateLayerSettingAction } from "viewer/model/actions/settings_actions";
 import { setIsInAnnotationViewAction } from "viewer/model/actions/ui_actions";
@@ -42,6 +42,8 @@ type OwnProps = {
 type StateProps = {
   viewMode: ViewMode;
   user: APIUser | null | undefined;
+  isUiReady: boolean;
+  isWkInitialized: boolean;
 };
 type Props = OwnProps & StateProps;
 type PropsWithRouter = Props & RouteComponentProps & WithBlockerProps;
@@ -174,14 +176,9 @@ class Controller extends React.PureComponent<PropsWithRouter, State> {
     this.initKeyboard();
     this.initTaskScript();
     window.webknossos = new ApiLoader(Model);
-    app.vent.emit("webknossos:ready");
-    Store.dispatch(wkReadyAction());
-    setTimeout(() => {
-      // Give wk (sagas and bucket loading) a bit time to catch air before
-      // showing the UI as "ready". The goal here is to avoid that the
-      // UI is still freezing after the loading indicator is gone.
-      this.props.setControllerStatus("loaded");
-    }, 200);
+    app.vent.emit("webknossos:initialized");
+    Store.dispatch(wkInitializedAction());
+    this.props.setControllerStatus("loaded");
   }
 
   async initTaskScript() {
@@ -309,20 +306,22 @@ class Controller extends React.PureComponent<PropsWithRouter, State> {
 
   render() {
     const status = this.props.controllerStatus;
-    const { user, viewMode } = this.props;
+    const { user, viewMode, isUiReady, isWkInitialized } = this.props;
     const { gotUnhandledError, organizationToSwitchTo } = this.state;
 
-    if (status === "loading") {
-      return <BrainSpinner />;
+    let cover = null;
+    // Show the brain spinner during loading and until the UI is ready
+    if (status === "loading" || (status === "loaded" && !isUiReady)) {
+      cover = <BrainSpinner />;
     } else if (status === "failedLoading" && user != null) {
-      return (
+      cover = (
         <BrainSpinnerWithError
           gotUnhandledError={gotUnhandledError}
           organizationToSwitchTo={organizationToSwitchTo}
         />
       );
     } else if (status === "failedLoading") {
-      return (
+      cover = (
         <CoverWithLogin
           onLoggedIn={() => {
             // Close existing error toasts for "Not Found" errors before trying again.
@@ -334,6 +333,12 @@ class Controller extends React.PureComponent<PropsWithRouter, State> {
       );
     }
 
+    // If wk is not initialized yet, only render the cover. If it is initialized, start rendering the controllers
+    // in the background, hidden by the cover.
+    if (!isWkInitialized) {
+      return cover;
+    }
+
     const { allowedModes } = Store.getState().annotation.restrictions;
 
     if (!allowedModes.includes(viewMode)) {
@@ -347,9 +352,19 @@ class Controller extends React.PureComponent<PropsWithRouter, State> {
     const isPlane = constants.MODES_PLANE.includes(viewMode);
 
     if (isArbitrary) {
-      return <ArbitraryController viewMode={viewMode} />;
+      return (
+        <>
+          {cover != null ? cover : null}
+          <ArbitraryController viewMode={viewMode} />
+        </>
+      );
     } else if (isPlane) {
-      return <PlaneController />;
+      return (
+        <>
+          {cover != null ? cover : null}
+          <PlaneController />
+        </>
+      );
     } else {
       // At the moment, all possible view modes consist of the union of MODES_ARBITRARY and MODES_PLANE
       // In case we add new viewmodes, the following error will be thrown.
@@ -360,6 +375,8 @@ class Controller extends React.PureComponent<PropsWithRouter, State> {
 
 function mapStateToProps(state: WebknossosState): StateProps {
   return {
+    isUiReady: state.uiInformation.isUiReady,
+    isWkInitialized: state.uiInformation.isWkInitialized,
     viewMode: state.temporaryConfiguration.viewMode,
     user: state.activeUser,
   };

frontend/javascripts/viewer/controller/camera_controller.ts

@@ -111,21 +111,16 @@ class CameraController extends React.PureComponent<Props> {
     const tdId = `inputcatcher_${OrthoViews.TDView}`;
     this.bindToEvents();
     Utils.waitForElementWithId(tdId).then(() => {
-      // Without this setTimeout, the initial camera angle/position
-      // within the 3D viewport is incorrect.
-      // Also see #5455.
-      setTimeout(() => {
-        this.props.setTargetAndFixPosition();
-        Store.dispatch(
-          setTDCameraWithoutTimeTrackingAction({
-            near: 0,
-            far,
-          }),
-        );
-        api.tracing.rotate3DViewToDiagonal(false);
-        const tdData = Store.getState().viewModeData.plane.tdCamera;
-        this.updateTDCamera(tdData);
-      }, 0);
+      this.props.setTargetAndFixPosition();
+      Store.dispatch(
+        setTDCameraWithoutTimeTrackingAction({
+          near: 0,
+          far,
+        }),
+      );
+      api.tracing.rotate3DViewToDiagonal(false);
+      const tdData = Store.getState().viewModeData.plane.tdCamera;
+      this.updateTDCamera(tdData);
     });
   }