Improve performance of skeleton tab

CHANGELOG.unreleased.md

@@ -37,6 +37,7 @@ For upgrade instructions, please check the [migration guide](MIGRATIONS.released
 - When proofreading segmentations, the user can now interact with super-voxels directly in the data viewports. Additionally, proofreading is significantly faster because the segmentation data doesn't have to be re-downloaded after each merge/split operation. [#7654](https://github.com/scalableminds/webknossos/pull/7654)
 - Because of the way our models are trained, AI analysis and training is disabled for 2D and ND datasets, as well as for color layers with data type uInt24. [#7957](https://github.com/scalableminds/webknossos/pull/7957)
 - The overall performance was improved (especially for the segments tab). [#7958](https://github.com/scalableminds/webknossos/pull/7958)
+- The performance for the skeleton tab was improved. [#7989](https://github.com/scalableminds/webknossos/pull/7989)
 
 ### Fixed
 - Fixed a bug that allowed the default newly created bounding box to appear outside the dataset. In case the whole bounding box would be outside it is created regardless. [#7892](https://github.com/scalableminds/webknossos/pull/7892)

frontend/javascripts/components/formatted_date.tsx

@@ -1,6 +1,6 @@
-import { Tooltip } from "antd";
 import * as React from "react";
 import dayjs from "dayjs";
+import FastTooltip from "./fast_tooltip";
 
 const defaultTimeFormat = "YYYY-MM-DD HH:mm";
 
@@ -32,15 +32,12 @@ export default function FormattedDate({
   const _tooltipFormat = tooltipFormat || format;
 
   return (
-    <Tooltip
-      title={
-        <span>
-          The displayed time refers to your local timezone. In UTC, the time is:{" "}
-          {_timestamp.format(_tooltipFormat)}
-        </span>
-      }
+    <FastTooltip
+      title={`The displayed time refers to your local timezone. In UTC, the time is: ${_timestamp.format(
+        _tooltipFormat,
+      )}`}
     >
       {_timestamp.local().format(_format)}
-    </Tooltip>
+    </FastTooltip>
   );
 }

frontend/javascripts/dashboard/advanced_dataset/dataset_action_view.tsx

@@ -20,6 +20,7 @@ import { MenuProps, Modal, Typography } from "antd";
 import { useState } from "react";
 import { confirmAsync } from "dashboard/dataset/helper_components";
 import { useQueryClient } from "@tanstack/react-query";
+import { getNoActionsAvailableMenu } from "oxalis/view/context_menu";
 
 const disabledStyle: React.CSSProperties = {
   pointerEvents: "none",
@@ -303,20 +304,7 @@ export function getDatasetActionContextMenu({
   hideContextMenu: () => void;
 }): MenuProps {
   if (datasets.length !== 1) {
-    return {
-      onClick: hideContextMenu,
-      style: {
-        borderRadius: 6,
-      },
-      mode: "vertical",
-      items: [
-        {
-          key: "view",
-          disabled: true,
-          label: "No actions available.",
-        },
-      ],
-    };
+    return getNoActionsAvailableMenu(hideContextMenu);
   }
   const dataset = datasets[0];
 

frontend/javascripts/dashboard/folders/folder_selection.tsx

@@ -57,6 +57,7 @@ export default function FolderSelection({
       value={folderId || undefined}
       dropdownStyle={{ maxHeight: 500, overflow: "auto" }}
       placeholder="Select Folder"
+      treeNodeFilterProp={"title"}
       allowClear
       popupMatchSelectWidth={false}
       treeDefaultExpandAll

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

@@ -539,7 +539,7 @@ export function CopyableSharingLink({
   const linkToCopy = showShortLink ? shortUrl || longUrl : longUrl;
 
   return (
-    <Space.Compact>
+    <Space.Compact block>
       <Tooltip title="When enabled, the link is shortened automatically.">
         <Button
           type={showShortLink ? "primary" : "default"}

frontend/javascripts/oxalis/view/context_menu.tsx

@@ -179,6 +179,21 @@ type NoNodeContextMenuProps = Props & {
   infoRows: ItemType[];
 };
 
+export const getNoActionsAvailableMenu = (hideContextMenu: () => void): MenuProps => ({
+  onClick: hideContextMenu,
+  style: {
+    borderRadius: 6,
+  },
+  mode: "vertical",
+  items: [
+    {
+      key: "view",
+      disabled: true,
+      label: "No actions available.",
+    },
+  ],
+});
+
 function copyIconWithTooltip(value: string | number, title: string) {
   return (
     <FastTooltip title={title}>

frontend/javascripts/oxalis/view/right-border-tabs/segments_tab/segments_view.tsx

@@ -27,7 +27,6 @@ import {
   Button,
   ConfigProvider,
   Divider,
-  Dropdown,
   Empty,
   MenuProps,
   Modal,
@@ -125,13 +124,9 @@ import { APIJobType, type AdditionalCoordinate } from "types/api_flow_types";
 import { DataNode } from "antd/lib/tree";
 import { ensureSegmentIndexIsLoadedAction } from "oxalis/model/actions/dataset_actions";
 import { ValueOf } from "types/globals";
-import {
-  ContextMenuContext,
-  GenericContextMenuContainer,
-  getContextMenuPositionFromEvent,
-} from "oxalis/view/context_menu";
-import Shortcut from "libs/shortcut_component";
+import { getContextMenuPositionFromEvent } from "oxalis/view/context_menu";
 import FastTooltip from "components/fast_tooltip";
+import { ContextMenuContainer } from "../sidebar_context_menu";
 
 const { confirm } = Modal;
 const { Option } = Select;
@@ -411,61 +406,6 @@ const rootGroup = {
   isExpanded: true,
 };
 
-function ContextMenuInner(propsWithInputRef: ContextMenuProps) {
-  const inputRef = React.useContext(ContextMenuContext);
-  const { contextMenuPosition, hideContextMenu } = propsWithInputRef;
-  let menu: MenuProps = { items: [] };
-
-  if (contextMenuPosition != null) {
-    menu = propsWithInputRef.menu || {
-      onClick: hideContextMenu,
-      style: {
-        borderRadius: 6,
-      },
-      mode: "vertical",
-      items: [
-        {
-          key: "view",
-          disabled: true,
-          label: "No actions available.",
-        },
-      ],
-    };
-  }
-
-  if (inputRef == null || inputRef.current == null) return null;
-  const refContent = inputRef.current;
-
-  return (
-    <React.Fragment>
-      <Shortcut supportInputElements keys="escape" onTrigger={hideContextMenu} />
-      <Dropdown
-        menu={menu}
-        overlayClassName="dropdown-overlay-container-for-context-menu"
-        open={contextMenuPosition != null}
-        getPopupContainer={() => refContent}
-        destroyPopupOnHide
-      >
-        <div />
-      </Dropdown>
-    </React.Fragment>
-  );
-}
-
-type ContextMenuProps = {
-  contextMenuPosition: [number, number] | null | undefined;
-  hideContextMenu: () => void;
-  menu: MenuProps | null | undefined;
-};
-
-function ContextMenuContainer(props: ContextMenuProps) {
-  return (
-    <GenericContextMenuContainer {...props} className="segment-list-context-menu-overlay">
-      <ContextMenuInner {...props} />
-    </GenericContextMenuContainer>
-  );
-}
-
 class SegmentsView extends React.Component<Props, State> {
   intervalID: ReturnType<typeof setTimeout> | null | undefined;
   state: State = {
@@ -1712,6 +1652,7 @@ class SegmentsView extends React.Component<Props, State> {
           hideContextMenu={this.hideContextMenu}
           contextMenuPosition={this.state.contextMenuPosition}
           menu={this.state.menu}
+          className="segment-list-context-menu-overlay"
         />
         <DomVisibilityObserver targetId={segmentsTabId}>
           {(isVisibleInDom) => {

frontend/javascripts/oxalis/view/right-border-tabs/sidebar_context_menu.tsx

@@ -0,0 +1,52 @@
+import { Dropdown, MenuProps } from "antd";
+import React from "react";
+
+import Shortcut from "libs/shortcut_component";
+import {
+  ContextMenuContext,
+  GenericContextMenuContainer,
+  getNoActionsAvailableMenu,
+} from "../context_menu";
+
+function ContextMenuInner(propsWithInputRef: ContextMenuProps) {
+  const inputRef = React.useContext(ContextMenuContext);
+  const { contextMenuPosition, hideContextMenu } = propsWithInputRef;
+  let menu: MenuProps = { items: [] };
+
+  if (contextMenuPosition != null) {
+    menu = propsWithInputRef.menu || getNoActionsAvailableMenu(hideContextMenu);
+  }
+
+  if (inputRef == null || inputRef.current == null) return null;
+  const refContent = inputRef.current;
+
+  return (
+    <React.Fragment>
+      <Shortcut supportInputElements keys="escape" onTrigger={hideContextMenu} />
+      <Dropdown
+        menu={menu}
+        overlayClassName="dropdown-overlay-container-for-context-menu"
+        open={contextMenuPosition != null}
+        getPopupContainer={() => refContent}
+        destroyPopupOnHide
+      >
+        <div />
+      </Dropdown>
+    </React.Fragment>
+  );
+}
+
+type ContextMenuProps = {
+  contextMenuPosition: [number, number] | null | undefined;
+  hideContextMenu: () => void;
+  menu: MenuProps | null | undefined;
+  className: string; // todop: should be unique?
+};
+
+export function ContextMenuContainer(props: ContextMenuProps) {
+  return (
+    <GenericContextMenuContainer {...props} className={props.className}>
+      <ContextMenuInner {...props} />
+    </GenericContextMenuContainer>
+  );
+}