Fix Toast Theme Support and other minor improvements

frontend/javascripts/libs/render_independently.tsx

@@ -35,7 +35,7 @@ export default function renderIndependently(
       ReactDOM.render(
         // @ts-ignore
         <Provider store={Store}>
-          <GlobalThemeProvider>{getComponent(destroy)}</GlobalThemeProvider>
+          <GlobalThemeProvider isMainProvider={false}>{getComponent(destroy)}</GlobalThemeProvider>
         </Provider>,
         div,
       );

frontend/javascripts/libs/toast.tsx

@@ -1,6 +1,8 @@
 import { notification, Collapse } from "antd";
 import { CloseCircleOutlined } from "@ant-design/icons";
 import React from "react";
+import { useEffectOnlyOnce } from "./react_hooks";
+import renderIndependently from "./render_independently";
 import { animationFrame, sleep } from "./utils";
 
 export type ToastStyle = "info" | "warning" | "success" | "error";
@@ -18,6 +20,29 @@ export type ToastConfig = {
   onClose?: () => void;
 };
 
+export type NotificationAPI = ReturnType<typeof notification.useNotification>[0];
+type ToastMessageCallback = (api: NotificationAPI) => React.ReactNode;
+
+function ToastFunctionalComponentWrapper(props: {
+  type: ToastStyle;
+  message: (api: NotificationAPI) => React.ReactNode;
+  config: ToastConfig;
+  details: string | undefined;
+}) {
+  const [toastAPI, contextHolder] = notification.useNotification();
+  useEffectOnlyOnce(() => {
+    Toast._messageInternal(
+      props.type,
+      props.message(toastAPI),
+      props.config,
+      toastAPI,
+      props.details,
+    );
+  });
+  // Return empty renderable component for "renderIndependently"
+  return <>{contextHolder}</>;
+}
+
 const Toast = {
   messages(messages: Message[]): void {
     const errorChainObject = messages.find((msg) => typeof msg.chain !== "undefined");
@@ -76,10 +101,11 @@ const Toast = {
     );
   },
 
-  async message(
+  async _messageInternal(
     type: ToastStyle,
     rawMessage: string | React.ReactNode,
     config: ToastConfig,
+    notificationAPI: NotificationAPI,
     details?: string,
   ): Promise<void> {
     const message = this.buildContentWithDetails(rawMessage, details);
@@ -111,7 +137,7 @@ const Toast = {
       });
     }
 
-    notification[type](toastConfig);
+    notificationAPI[type](toastConfig);
 
     // Make sure that toasts don't just disappear while the user has WK in a background tab (e.g. while uploading large dataset).
     // Most browsers pause requestAnimationFrame() if the current tab is not active, but Firefox does not seem to do that.
@@ -155,5 +181,39 @@ const Toast = {
   close(key: string) {
     notification.destroy(key);
   },
+  message(
+    type: ToastStyle,
+    message: ToastMessageCallback | React.ReactNode = "Success :-)",
+    config: ToastConfig = {},
+    details?: string | undefined,
+  ) {
+    renderIndependently((destroy) => {
+      // Deferring destroy to give the Notification API a chance to close the toast via timeout
+      // before unmounting the parent component created with renderIndependently.
+      const deferredDestroy = () => setTimeout(destroy, 0);
+      const userOnClose = config.onClose;
+      // Making sure onClose destroys the ToastFunctionalComponentWrapper instance.
+      config.onClose =
+        userOnClose != null
+          ? () => {
+              userOnClose();
+              deferredDestroy();
+            }
+          : () => {
+              deferredDestroy();
+            };
+      const maybeWrappedMessage = (
+        typeof message === "function" ? message : () => message
+      ) as ToastMessageCallback;
+      return (
+        <ToastFunctionalComponentWrapper
+          message={maybeWrappedMessage}
+          config={config}
+          details={details}
+          type={type}
+        />
+      );
+    });
+  },
 };
 export default Toast;

frontend/javascripts/oxalis/model/bucket_data_handling/bounding_box.ts

@@ -81,6 +81,15 @@ class BoundingBox {
     });
   }
 
+  extend(other: BoundingBox): BoundingBox {
+    const newMin = V3.min(this.min, other.min);
+    const newMax = V3.max(this.max, other.max);
+    return new BoundingBox({
+      min: newMin,
+      max: newMax,
+    });
+  }
+
   getCenter(): Vector3 {
     return V3.floor(V3.add(this.min, V3.scale(this.getSize(), 0.5)));
   }

frontend/javascripts/oxalis/store.ts

@@ -1,6 +1,6 @@
 import { createStore, applyMiddleware } from "redux";
 import { enableBatching } from "redux-batched-actions";
-import createSagaMiddleware, { Saga } from "redux-saga";
+import createSagaMiddleware, { type Saga } from "redux-saga";
 import type {
   APIAllowedMode,
   APIAnnotationType,
@@ -47,13 +47,13 @@ import type {
   InterpolationMode,
   TreeType,
 } from "oxalis/constants";
-import { BLEND_MODES, ControlModeEnum } from "oxalis/constants";
+import type { BLEND_MODES, ControlModeEnum } from "oxalis/constants";
 import type { Matrix4x4 } from "libs/mjs";
 import type { UpdateAction } from "oxalis/model/sagas/update_actions";
 import AnnotationReducer from "oxalis/model/reducers/annotation_reducer";
 import DatasetReducer from "oxalis/model/reducers/dataset_reducer";
-import DiffableMap from "libs/diffable_map";
-import EdgeCollection from "oxalis/model/edge_collection";
+import type DiffableMap from "libs/diffable_map";
+import type EdgeCollection from "oxalis/model/edge_collection";
 import FlycamReducer from "oxalis/model/reducers/flycam_reducer";
 import SaveReducer from "oxalis/model/reducers/save_reducer";
 import SettingsReducer from "oxalis/model/reducers/settings_reducer";
@@ -69,7 +69,7 @@ import overwriteActionMiddleware from "oxalis/model/helpers/overwrite_action_mid
 import reduceReducers from "oxalis/model/helpers/reduce_reducers";
 import ConnectomeReducer from "oxalis/model/reducers/connectome_reducer";
 import OrganizationReducer from "./model/reducers/organization_reducer";
-import { StartAIJobModalState } from "./view/action-bar/starting_job_modals";
+import type { StartAIJobModalState } from "./view/action-bar/starting_job_modals";
 
 export type MutableCommentType = {
   content: string;

frontend/javascripts/test/backend-snapshot-tests/folders.e2e.ts

@@ -1,5 +1,4 @@
 import _ from "lodash";
-import Request from "libs/request";
 import {
   tokenUserA,
   tokenUserC,
@@ -8,6 +7,7 @@ import {
   replaceVolatileValues,
   writeTypeCheckingFile,
 } from "test/enzyme/e2e-setup";
+import Request from "libs/request";
 import * as foldersApi from "admin/api/folders";
 import test from "ava";
 test.before("Reset database and change token", async () => {

frontend/javascripts/theme.tsx

@@ -60,7 +60,10 @@ export function getAntdTheme(userTheme: Theme) {
   return { algorithm, token: globalDesignToken, components };
 }
 
-export default function GlobalThemeProvider({ children }: { children?: React.ReactNode }) {
+export default function GlobalThemeProvider({
+  children,
+  isMainProvider = true,
+}: { children?: React.ReactNode; isMainProvider?: boolean }) {
   const activeUser = useSelector((state: OxalisState) => state.activeUser);
   const userTheme = getThemeFromUser(activeUser);
   const antdTheme = getAntdTheme(userTheme);
@@ -82,7 +85,7 @@ export default function GlobalThemeProvider({ children }: { children?: React.Rea
           className={isDarkMode ? "dark-theme" : undefined}
           style={{
             background: "var(--ant-color-bg-base)",
-            height: "calc(100vh - var(--navbar-height))",
+            height: isMainProvider ? "calc(100vh - var(--navbar-height))" : "auto",
           }}
         >
           {children}

package.json

@@ -18,6 +18,7 @@
     "@types/dagre": "^0.7.48",
     "@types/lodash": "^4.14.181",
     "@types/memoize-one": "^5.1.2",
+    "@types/merge-img": "^2.1.1",
     "@types/mock-require": "^2.0.1",
     "@types/ndarray": "^1.0.11",
     "@types/ndarray-ops": "^1.2.4",
@@ -133,7 +134,6 @@
     "@tanstack/react-query-persist-client": "^4.14.1",
     "@types/file-saver": "^2.0.5",
     "@types/lz-string": "^1.3.34",
-    "@types/merge-img": "^2.1.1",
     "@types/pako": "^2.0.0",
     "@types/pixelmatch": "^5.2.4",
     "@types/pngjs": "^6.0.1",
@@ -221,23 +221,14 @@
     "**/rc-tree": "^5.7.12"
   },
   "ava": {
-    "files": [
-      "./public-test/test-bundle/**/*.{js,jsx}"
-    ],
-    "ignoredByWatcher": [
-      "./binaryData/**/*.*"
-    ],
-    "require": [
-      "./frontend/javascripts/test/_ava_polyfill_provider.ts"
-    ],
+    "files": ["./public-test/test-bundle/**/*.{js,jsx}"],
+    "ignoredByWatcher": ["./binaryData/**/*.*"],
+    "require": ["./frontend/javascripts/test/_ava_polyfill_provider.ts"],
     "snapshotDir": "frontend/javascripts/test/snapshots",
     "concurrency": 8
   },
   "c8": {
-    "exclude": [
-      "public-test/test-bundle/test/**/*.*",
-      "frontend/javascripts/test/**/*.*"
-    ],
+    "exclude": ["public-test/test-bundle/test/**/*.*", "frontend/javascripts/test/**/*.*"],
     "reporter": "lcov"
   }
 }

tools/check-cyclic-dependencies.js

@@ -1,57 +1,72 @@
-const dpdm = require("dpdm")
-const { parseDependencyTree, parseCircular } = dpdm
+const dpdm = require("dpdm");
+const { parseDependencyTree, parseCircular } = dpdm;
 
 const KNOWN_CYCLES = [
   [
-    'frontend/javascripts/oxalis/model/accessors/view_mode_accessor.ts',
-    'frontend/javascripts/oxalis/model/accessors/flycam_accessor.ts'
+    "frontend/javascripts/oxalis/model/accessors/view_mode_accessor.ts",
+    "frontend/javascripts/oxalis/model/accessors/flycam_accessor.ts",
   ],
   [
-    'frontend/javascripts/oxalis/model/accessors/flycam_accessor.ts',
-    'frontend/javascripts/oxalis/model/reducers/flycam_reducer.ts'
+    "frontend/javascripts/oxalis/model/accessors/flycam_accessor.ts",
+    "frontend/javascripts/oxalis/model/reducers/flycam_reducer.ts",
   ],
   [
-    'frontend/javascripts/oxalis/view/right-border-tabs/tree_hierarchy_view_helpers.ts',
-    'frontend/javascripts/oxalis/model/accessors/skeletontracing_accessor.ts'
+    "frontend/javascripts/oxalis/view/right-border-tabs/tree_hierarchy_view_helpers.ts",
+    "frontend/javascripts/oxalis/model/accessors/skeletontracing_accessor.ts",
   ],
+  ["frontend/javascripts/libs/request.ts", "frontend/javascripts/admin/datastore_health_check.ts"],
   [
-    'frontend/javascripts/libs/request.ts',
-    'frontend/javascripts/admin/datastore_health_check.ts'
+    "frontend/javascripts/admin/admin_rest_api.ts",
+    "frontend/javascripts/libs/request.ts",
+    "frontend/javascripts/admin/datastore_health_check.ts",
   ],
   [
-    'frontend/javascripts/admin/admin_rest_api.ts',
-    'frontend/javascripts/libs/request.ts',
-    'frontend/javascripts/admin/datastore_health_check.ts'
+    "frontend/javascripts/oxalis/view/action-bar/download_modal_view.tsx",
+    "frontend/javascripts/oxalis/view/action-bar/starting_job_modals.tsx",
   ],
   [
-    'frontend/javascripts/oxalis/view/action-bar/download_modal_view.tsx',
-    'frontend/javascripts/oxalis/view/action-bar/starting_job_modals.tsx'
+    "frontend/javascripts/admin/organization/upgrade_plan_modal.tsx",
+    "frontend/javascripts/admin/organization/organization_cards.tsx",
   ],
   [
-    'frontend/javascripts/admin/organization/upgrade_plan_modal.tsx',
-    'frontend/javascripts/admin/organization/organization_cards.tsx'
+    "frontend/javascripts/admin/task/task_create_form_view.tsx",
+    "frontend/javascripts/admin/task/task_create_bulk_view.tsx",
   ],
   [
-    'frontend/javascripts/admin/task/task_create_form_view.tsx',
-    'frontend/javascripts/admin/task/task_create_bulk_view.tsx'
+    "frontend/javascripts/admin/team/team_list_view.tsx",
+    "frontend/javascripts/admin/team/edit_team_modal_view.tsx",
   ],
   [
-    'frontend/javascripts/admin/team/team_list_view.tsx',
-    'frontend/javascripts/admin/team/edit_team_modal_view.tsx'
+    "frontend/javascripts/dashboard/advanced_dataset/dataset_table.tsx",
+    "frontend/javascripts/dashboard/folders/folder_tree.tsx",
   ],
   [
-    'frontend/javascripts/dashboard/advanced_dataset/dataset_table.tsx',
-    'frontend/javascripts/dashboard/folders/folder_tree.tsx'
+    "frontend/javascripts/oxalis/model_initialization.ts",
+    "frontend/javascripts/oxalis/controller/url_manager.ts",
   ],
   [
-    'frontend/javascripts/oxalis/model_initialization.ts',
-    'frontend/javascripts/oxalis/controller/url_manager.ts'
+    "frontend/javascripts/oxalis/geometries/plane.ts",
+    "frontend/javascripts/oxalis/geometries/materials/plane_material_factory.ts",
+    "frontend/javascripts/oxalis/shaders/main_data_shaders.glsl.ts",
   ],
   [
-    'frontend/javascripts/oxalis/geometries/plane.ts',
-    'frontend/javascripts/oxalis/geometries/materials/plane_material_factory.ts',
-    'frontend/javascripts/oxalis/shaders/main_data_shaders.glsl.ts'
-  ]
+    "frontend/javascripts/libs/toast.tsx",
+    "frontend/javascripts/libs/render_independently.tsx ",
+    "frontend/javascripts/oxalis/throttled_store.ts ",
+    "frontend/javascripts/oxalis/store.ts ",
+    "frontend/javascripts/oxalis/model/reducers/annotation_reducer.ts ",
+    "frontend/javascripts/oxalis/model/accessors/view_mode_accessor.ts ",
+    "frontend/javascripts/oxalis/model/accessors/flycam_accessor.ts ",
+    "frontend/javascripts/oxalis/model/accessors/dataset_accessor.ts ",
+    "frontend/javascripts/libs/error_handling.ts",
+  ],
+  [
+    "frontend/javascripts/libs/toast.tsx ",
+    "frontend/javascripts/libs/render_independently.tsx ",
+    "frontend/javascripts/oxalis/throttled_store.ts ",
+    "frontend/javascripts/oxalis/store.ts ",
+    "frontend/javascripts/oxalis/model/reducers/skeletontracing_reducer.ts",
+  ],
 ];
 parseDependencyTree("frontend/javascripts/main.tsx", {
   /* options, see below */
@@ -74,7 +89,7 @@ parseDependencyTree("frontend/javascripts/main.tsx", {
     );
   } else if (cyclicDependencies.length < knownCycleStrings.length) {
     throw new Error(`Congratulations! Your admirable work removed at least one cyclic dependency from the TypeScript modules. To ensure
-      that this improvement is not undone accidentally in the future, please adapt the KNOWN_CYCLES variable in the check-cyclic-dependies.js
+      that this improvement is not undone accidentally in the future, please adapt the KNOWN_CYCLES variable in the check-cyclic-dependencies.js
       script. Please set the variable to the following and commit it:
       ${JSON.stringify(cyclicDependencies, null, " ")}
     `);