Refactor deprecated antd Dropdown menus

CHANGELOG.unreleased.md

@@ -20,13 +20,12 @@ For upgrade instructions, please check the [migration guide](MIGRATIONS.released
 - Improved Terms-of-Service modal (e.g., allow to switch organization even when modal was blocking the remaining usage of WEBKNOSSOS). [#6930](https://github.com/scalableminds/webknossos/pull/6930)
 
 ### Fixed
-- Fixed a bug where N5 datasets reading with end-chunks that have a chunk size differing from the metadata-supplied chunk size would fail for some areas. [#6890](https://github.com/scalableminds/webknossos/pull/6890)
-- Fixed potential crash when trying to edit certain annotation properties of a shared annotation. [#6892](https://github.com/scalableminds/webknossos/pull/6892)
-- Fixed a bug where merging multiple volume annotations would result in inconsistent segment lists. [#6882](https://github.com/scalableminds/webknossos/pull/6882)
-- Fixed a bug where uploading multiple annotations with volume layers at once would fail. [#6882](https://github.com/scalableminds/webknossos/pull/6882)
-- Fixed a bug where dates were formatted incorrectly in Voxelytics reports. [#6908](https://github.com/scalableminds/webknossos/pull/6908)
-- Fix antd deprecation warning for Dropdown menus. [#6898](https://github.com/scalableminds/webknossos/pull/6898)
-
+- Fixed an issue with text hints not being visible on the logout page for dark mode users. [#6916](https://github.com/scalableminds/webknossos/pull/6916)
+- Fixed creating task types with a selected preferred mode. [#6928](https://github.com/scalableminds/webknossos/pull/6928)
+- Fixed support for rendering of negative floats. [#6895](https://github.com/scalableminds/webknossos/pull/6895)
+- Fixed caching issues with webworkers. [#6932](https://github.com/scalableminds/webknossos/pull/6932)
+- Fixed download button for annotations which was disabled in some cases. [#6931](https://github.com/scalableminds/webknossos/pull/6931)
+- Fixed antd deprecation warning for Dropdown menus. [#6898](https://github.com/scalableminds/webknossos/pull/6898)
 ### Removed
 
 ### Breaking Changes

frontend/javascripts/dashboard/advanced_dataset/dataset_table.tsx

@@ -1,6 +1,6 @@
 import { FolderOpenOutlined, PlusOutlined, WarningOutlined } from "@ant-design/icons";
 import { Link } from "react-router-dom";
-import { Dropdown, Table, Tag, Tooltip } from "antd";
+import { Dropdown, MenuProps, Table, Tag, Tooltip } from "antd";
 import type { FilterValue, SorterResult, TablePaginationConfig } from "antd/lib/table/interface";
 import * as React from "react";
 import _ from "lodash";
@@ -68,7 +68,7 @@ type ContextMenuProps = {
 function ContextMenuInner(propsWithInputRef: ContextMenuProps) {
   const inputRef = React.useContext(ContextMenuContext);
   const { datasets, reloadDataset, contextMenuPosition, hideContextMenu } = propsWithInputRef;
-  let menu = {};
+  let menu: MenuProps = { items: [] };
 
   if (contextMenuPosition != null) {
     // getDatasetActionContextMenu should not be turned into <DatasetActionMenu />
@@ -91,7 +91,6 @@ function ContextMenuInner(propsWithInputRef: ContextMenuProps) {
         overlayClassName="dropdown-overlay-container-for-context-menu"
         open={contextMenuPosition != null}
         getPopupContainer={() => refContent}
-        // @ts-ignore
         destroyPopupOnHide
       >
         <div />

frontend/javascripts/dashboard/folders/folder_tree.tsx

@@ -188,10 +188,7 @@ export function FolderTreeSidebar({
       <Dropdown
         menu={createMenu()}
         placement="bottom"
-        // The overlay is generated lazily. By default, this would make the overlay
-        // re-render on each parent's render() after it was shown for the first time.
-        // The reason for this is that it's not destroyed after closing.
-        // Therefore, autoDestroy is passed.
+        // AutoDestroy is used to remove the menu from DOM and keep up the performance.
         // destroyPopupOnHide should also be an option according to the docs, but
         // does not work properly. See https://github.com/react-component/trigger/issues/106#issuecomment-948532990
         // @ts-expect-error ts-migrate(2322) FIXME: Type '{ children: Element; overlay: () => Element;... Remove this comment to see the full error message
@@ -259,10 +256,7 @@ function generateTitle(
     <Dropdown
       menu={createMenu()}
       placement="bottom"
-      // The overlay is generated lazily. By default, this would make the overlay
-      // re-render on each parent's render() after it was shown for the first time.
-      // The reason for this is that it's not destroyed after closing.
-      // Therefore, autoDestroy is passed.
+      // AutoDestroy is used to remove the menu from DOM and keep up the performance.
       // destroyPopupOnHide should also be an option according to the docs, but
       // does not work properly. See https://github.com/react-component/trigger/issues/106#issuecomment-948532990
       // @ts-expect-error ts-migrate(2322) FIXME: Type '{ children: Element; overlay: () => Element;... Remove this comment to see the full error message

frontend/javascripts/oxalis/view/action-bar/tracing_actions_view.tsx

@@ -232,7 +232,7 @@ export function getLayoutMenu(props: LayoutMenuProps): SubMenuType {
             title: "Save current layout",
             icon: <SaveOutlined />,
           },
-      { key: "dividier", type: "divider" },
+      { key: "divider", type: "divider" },
       {
         key: "available-layouts",
         type: "group",

frontend/javascripts/oxalis/view/context_menu.tsx

@@ -1,8 +1,8 @@
-import { CopyOutlined } from "@ant-design/icons";
+import { CopyOutlined, PushpinOutlined } from "@ant-design/icons";
 import type { Dispatch } from "redux";
 import { Dropdown, Empty, notification, Tooltip, Popover, Input, MenuProps } from "antd";
-import { connect, useDispatch, useSelector } from "react-redux";
-import React, { createContext, MouseEvent, useContext, useEffect } from "react";
+import { connect } from "react-redux";
+import React, { createContext, MouseEvent, useContext } from "react";
 import type {
   APIConnectomeFile,
   APIDataset,
@@ -168,12 +168,6 @@ type NoNodeContextMenuProps = Props & {
   infoRows: ItemType[];
 };
 
-const MenuLabel: React.FunctionComponent = ({ children }) => <span>{children}</span>;
-export const MenuItemWithMappingActivationConfirmation = withMappingActivationConfirmation<
-  { children: React.ReactNode },
-  typeof MenuLabel
->(MenuLabel);
-
 function copyIconWithTooltip(value: string | number, title: string) {
   return (
     <Tooltip title={title}>
@@ -363,7 +357,7 @@ function getMaybeMinCutItem(
   };
 }
 
-function getMaybeMeshItems(
+function getMeshItems(
   maybeClickedMeshId: number | null | undefined,
   maybeMeshIntersectionPosition: Vector3 | null | undefined,
   visibleSegmentationLayer: APIDataLayer | null | undefined,
@@ -372,13 +366,13 @@ function getMaybeMeshItems(
   hideMesh: (segmentationLayerName: string, meshId: number) => void,
   setPosition: (position: Vector3) => void,
   refreshMesh: (segmentationLayerName: string, meshId: number) => void,
-): MenuItemType[] | null {
+): MenuItemType[] {
   if (
     maybeClickedMeshId == null ||
     maybeMeshIntersectionPosition == null ||
     visibleSegmentationLayer == null
   ) {
-    return null;
+    return [];
   }
 
   return [
@@ -408,7 +402,7 @@ function getMaybeMeshItems(
   ];
 }
 
-function NodeContextMenuOptions({
+function getNodeContextMenuOptions({
   skeletonTracing,
   clickedNodeId,
   maybeClickedMeshId,
@@ -433,9 +427,8 @@ function NodeContextMenuOptions({
   infoRows,
   allowUpdate,
 }: NodeContextMenuOptionsProps): ItemType[] {
-  const isProofreadingActive = useSelector(
-    (state: OxalisState) => state.uiInformation.activeTool === AnnotationToolEnum.PROOFREAD,
-  );
+  const state = Store.getState();
+  const isProofreadingActive = state.uiInformation.activeTool === AnnotationToolEnum.PROOFREAD;
 
   if (skeletonTracing == null) {
     throw new Error(
@@ -463,7 +456,7 @@ function NodeContextMenuOptions({
     );
   }
 
-  const maybeMeshItems = getMaybeMeshItems(
+  const meshItems = getMeshItems(
     maybeClickedMeshId,
     maybeMeshIntersectionPosition,
     visibleSegmentationLayer,
@@ -561,7 +554,7 @@ function NodeContextMenuOptions({
               },
         ]
       : []),
-    ...(maybeMeshItems ? maybeMeshItems : []),
+    ...meshItems,
     isTheSameNode
       ? null
       : {
@@ -738,7 +731,7 @@ function getBoundingBoxMenuOptions({
   ];
 }
 
-function NoNodeContextMenuOptions(props: NoNodeContextMenuProps): ItemType[] {
+function getNoNodeContextMenuOptions(props: NoNodeContextMenuProps): ItemType[] {
   const {
     skeletonTracing,
     volumeTracing,
@@ -763,17 +756,16 @@ function NoNodeContextMenuOptions(props: NoNodeContextMenuProps): ItemType[] {
     infoRows,
     allowUpdate,
   } = props;
-  const dispatch = useDispatch();
-  const isAgglomerateMappingEnabled = useSelector(hasAgglomerateMapping);
-  const isConnectomeMappingEnabled = useSelector(hasConnectomeFile);
 
-  const isProofreadingActive = useSelector(
-    (state: OxalisState) => state.uiInformation.activeTool === AnnotationToolEnum.PROOFREAD,
-  );
+  const state = Store.getState();
+  const isAgglomerateMappingEnabled = hasAgglomerateMapping(state);
+  const isConnectomeMappingEnabled = hasConnectomeFile(state);
+
+  const isProofreadingActive = state.uiInformation.activeTool === AnnotationToolEnum.PROOFREAD;
 
-  useEffect(() => {
-    dispatch(maybeFetchMeshFilesAction(visibleSegmentationLayer, dataset, false));
-  }, [visibleSegmentationLayer, dataset]);
+  // useEffect(() => {
+  Store.dispatch(maybeFetchMeshFilesAction(visibleSegmentationLayer, dataset, false));
+  // }, [visibleSegmentationLayer, dataset]);
 
   const loadPrecomputedMesh = async () => {
     if (!currentMeshFile || !visibleSegmentationLayer || globalPosition == null) return;
@@ -786,7 +778,9 @@ function NoNodeContextMenuOptions(props: NoNodeContextMenuProps): ItemType[] {
       return;
     }
 
-    dispatch(loadPrecomputedMeshAction(segmentId, globalPosition, currentMeshFile.meshFileName));
+    Store.dispatch(
+      loadPrecomputedMeshAction(segmentId, globalPosition, currentMeshFile.meshFileName),
+    );
   };
 
   const computeMeshAdHoc = () => {
@@ -801,7 +795,7 @@ function NoNodeContextMenuOptions(props: NoNodeContextMenuProps): ItemType[] {
       return;
     }
 
-    dispatch(loadAdHocMeshAction(segmentId, globalPosition));
+    Store.dispatch(loadAdHocMeshAction(segmentId, globalPosition));
   };
 
   const isVolumeBasedToolActive = VolumeTools.includes(activeTool);
@@ -891,22 +885,17 @@ function NoNodeContextMenuOptions(props: NoNodeContextMenuProps): ItemType[] {
       className: "node-context-menu-item",
       key: "load-synapses",
       disabled: !isConnectomeMappingEnabled.value,
-      label: (
-        <MenuItemWithMappingActivationConfirmation
-          onClick={() => loadSynapsesOfAgglomerateAtPosition(globalPosition)}
-          mappingName={connectomeFileMappingName}
-          descriptor="connectome file"
-          layerName={segmentationLayerName}
-          mappingInfo={mappingInfo}
-        >
-          {isConnectomeMappingEnabled.value ? (
-            "Import Agglomerate and Synapses"
-          ) : (
-            <Tooltip title={isConnectomeMappingEnabled.reason}>
-              Import Agglomerate and Synapses
-            </Tooltip>
-          )}
-        </MenuItemWithMappingActivationConfirmation>
+      onClick: withMappingActivationConfirmation(
+        () => loadSynapsesOfAgglomerateAtPosition(globalPosition),
+        connectomeFileMappingName,
+        "connectome file",
+        segmentationLayerName,
+        mappingInfo,
+      ),
+      label: isConnectomeMappingEnabled.value ? (
+        "Import Agglomerate and Synapses"
+      ) : (
+        <Tooltip title={isConnectomeMappingEnabled.reason}>Import Agglomerate and Synapses</Tooltip>
       ),
     };
     // This action doesn't need a skeleton tracing but is conceptually related to the "Import Agglomerate Skeleton" action
@@ -917,17 +906,14 @@ function NoNodeContextMenuOptions(props: NoNodeContextMenuProps): ItemType[] {
   const loadPrecomputedMeshItem: MenuItemType = {
     key: "load-precomputed-mesh",
     disabled: !currentMeshFile,
-    label: (
-      <MenuItemWithMappingActivationConfirmation
-        onClick={loadPrecomputedMesh}
-        mappingName={meshFileMappingName}
-        descriptor="mesh file"
-        layerName={segmentationLayerName}
-        mappingInfo={mappingInfo}
-      >
-        Load Mesh (precomputed)
-      </MenuItemWithMappingActivationConfirmation>
+    onClick: withMappingActivationConfirmation(
+      loadPrecomputedMesh,
+      meshFileMappingName,
+      "mesh file",
+      segmentationLayerName,
+      mappingInfo,
     ),
+    label: "Load Mesh (precomputed)",
   };
   const computeMeshAdHocItem = {
     key: "compute-mesh-adhc",
@@ -973,7 +959,7 @@ function NoNodeContextMenuOptions(props: NoNodeContextMenuProps): ItemType[] {
   const isSkeletonToolActive = activeTool === AnnotationToolEnum.SKELETON;
   let allActions: ItemType[] = [];
 
-  const maybeMeshRelatedItems = getMaybeMeshItems(
+  const meshRelatedItems = getMeshItems(
     maybeClickedMeshId,
     maybeMeshIntersectionPosition,
     visibleSegmentationLayer,
@@ -991,8 +977,8 @@ function NoNodeContextMenuOptions(props: NoNodeContextMenuProps): ItemType[] {
   } else {
     allActions = [...nonSkeletonActions, ...skeletonActions, ...boundingBoxActions];
   }
-  if (maybeMeshRelatedItems) {
-    allActions = allActions.concat(maybeMeshRelatedItems);
+  if (meshRelatedItems) {
+    allActions = allActions.concat(meshRelatedItems);
   }
 
   const empty: ItemType = {
@@ -1091,13 +1077,9 @@ function getInfoMenuItem(
   label: MenuItemType["label"],
 ): MenuItemGroupType {
   /*
-   * This component can be used within an antd Menu, even though
-   * the docs dictate to always use a <Menu.Item /> or <Menu.Divider />.
-   * However, we want non-clickable info rows with a special styling here.
-   * Note that we must not pass along all props here, since antd will pass
-   * an eventKey prop to this component. Delegating this to <div /> will
-   * produce a "React does not recognize the `eventKey` prop on a DOM element"
-   * warning.
+   * This component is a work-around. We want antd menu entries that can not be selected
+   * or otherwise interacted with. An "empty" menu group will only display the group header
+   * which gives us the desired behavior.
    */
 
   return { key, label, type: "group" };
@@ -1172,7 +1154,8 @@ function ContextMenuInner(propsWithInputRef: Props) {
       getInfoMenuItem(
         "positionInfo",
         <>
-          <i className="fas fa-map-marker-alt" /> Position: {nodePositionAsString}
+          <PushpinOutlined style={{ transform: "rotate(-45deg)" }} /> Position:{" "}
+          {nodePositionAsString}
           {copyIconWithTooltip(nodePositionAsString, "Copy node position")}
         </>,
       ),
@@ -1183,7 +1166,7 @@ function ContextMenuInner(propsWithInputRef: Props) {
       getInfoMenuItem(
         "positionInfo",
         <>
-          <i className="fa-solid fa-location-dot" /> Position: {positionAsString}
+          <PushpinOutlined style={{ transform: "rotate(-45deg)" }} /> Position: {positionAsString}
           {copyIconWithTooltip(positionAsString, "Copy position")}
         </>,
       ),
@@ -1250,11 +1233,6 @@ function ContextMenuInner(propsWithInputRef: Props) {
     });
   }
 
-  // It's important to not use <NodeContextMenuOptions ...>
-  // or <NoNodeContextMenuOptions ... />
-  // for the following two expressions, since this breaks
-  // antd's internal population of the correct class names
-  // for the menu.
   const menu: MenuProps = {
     onClick: hideContextMenu,
     style: {
@@ -1263,13 +1241,13 @@ function ContextMenuInner(propsWithInputRef: Props) {
     mode: "vertical",
     items:
       maybeClickedNodeId != null
-        ? NodeContextMenuOptions({
+        ? getNodeContextMenuOptions({
             clickedNodeId: maybeClickedNodeId,
             infoRows,
             viewport: maybeViewport,
             ...props,
           })
-        : NoNodeContextMenuOptions({
+        : getNoNodeContextMenuOptions({
             segmentIdAtPosition,
             infoRows,
             viewport: maybeViewport,

frontend/javascripts/oxalis/view/right-border-tabs/connectome_tab/synapse_tree.tsx

@@ -217,8 +217,9 @@ class SynapseTree extends React.Component<Props, State> {
         title = node.title;
       } else {
         title = (
-          <Dropdown // Lazily create the dropdown menu and destroy it again, afterwards
+          <Dropdown
             menu={this.createSegmentDropdownMenu(data.id)}
+            // AutoDestroy is used to remove the menu from DOM and keep up the performance.
             autoDestroy
             placement="bottom"
             open={this.state.activeSegmentDropdownKey === key}