Segment multiselect

CHANGELOG.unreleased.md

@@ -14,6 +14,7 @@ For upgrade instructions, please check the [migration guide](MIGRATIONS.released
 - Added the option to change the ordering of color layers via drag and drop. This is useful when using the cover blend mode. [#7188](https://github.com/scalableminds/webknossos/pull/7188)
 - Added configuration to require users' emails to be verified, added flow to verify emails via link. [#7161](https://github.com/scalableminds/webknossos/pull/7161)
 - Added a route to explore and add remote datasets via API. [#7176](https://github.com/scalableminds/webknossos/pull/7176)
+- Added option to select multiple segments in segment list in order to perform batch actions. [#7242](https://github.com/scalableminds/webknossos/pull/7242)
 
 ### Changed
 - Small messages during annotating (e.g. “finished undo”, “applying mapping…”) are now click-through so they do not block users from selecting tools. [7239](https://github.com/scalableminds/webknossos/pull/7239)

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

@@ -147,10 +147,10 @@ type Props = {
   mappingInfo: ActiveMappingInfo;
   isHoveredSegmentId: boolean;
   centeredSegmentId: number | null | undefined;
-  selectedSegmentId: number | null | undefined;
+  selectedSegmentIds: number[] | null | undefined;
   activeCellId: number | null | undefined;
   setHoveredSegmentId: (arg0: number | null | undefined) => void;
-  handleSegmentDropdownMenuVisibility: (arg0: number, arg1: boolean) => void;
+  handleSegmentDropdownMenuVisibility: (arg0: boolean, arg1: number) => void;
   activeDropdownSegmentId: number | null | undefined;
   allowUpdate: boolean;
   updateSegment: (
@@ -170,14 +170,15 @@ type Props = {
   currentMeshFile: APIMeshFile | null | undefined;
   onRenameStart: () => void;
   onRenameEnd: () => void;
+  multiSelectMenu: MenuProps;
 };
 
 function _MeshInfoItem(props: {
   segment: Segment;
   isSelectedInList: boolean;
   isHovered: boolean;
   isosurface: IsosurfaceInformation | null | undefined;
-  handleSegmentDropdownMenuVisibility: (arg0: number, arg1: boolean) => void;
+  handleSegmentDropdownMenuVisibility: (arg0: boolean, arg1: number) => void;
   visibleSegmentationLayer: APISegmentationLayer | null | undefined;
   setPosition: (arg0: Vector3) => void;
 }) {
@@ -197,7 +198,7 @@ function _MeshInfoItem(props: {
           style={{ marginLeft: 8 }}
           onContextMenu={(evt) => {
             evt.preventDefault();
-            props.handleSegmentDropdownMenuVisibility(segment.id, true);
+            props.handleSegmentDropdownMenuVisibility(true, segment.id);
           }}
         >
           No mesh loaded. Use right-click to add one.
@@ -315,7 +316,7 @@ function _SegmentListItem({
   mappingInfo,
   isHoveredSegmentId,
   centeredSegmentId,
-  selectedSegmentId,
+  selectedSegmentIds,
   activeCellId,
   setHoveredSegmentId,
   handleSegmentDropdownMenuVisibility,
@@ -333,6 +334,7 @@ function _SegmentListItem({
   currentMeshFile,
   onRenameStart,
   onRenameEnd,
+  multiSelectMenu,
 }: Props) {
   const isEditingDisabled = !allowUpdate;
 
@@ -349,7 +351,7 @@ function _SegmentListItem({
     return null;
   }
 
-  const andCloseContextMenu = (_ignore?: any) => handleSegmentDropdownMenuVisibility(0, false);
+  const andCloseContextMenu = (_ignore?: any) => handleSegmentDropdownMenuVisibility(false, 0);
 
   const createSegmentContextMenu = (): MenuProps => ({
     items: [
@@ -454,10 +456,7 @@ function _SegmentListItem({
       style={{
         padding: "2px 5px",
       }}
-      className={classnames("segment-list-item", {
-        "is-selected-cell": segment.id === selectedSegmentId,
-        "is-hovered-cell": isHoveredSegmentId,
-      })}
+      className={classnames("segment-list-item")}
       onMouseEnter={() => {
         setHoveredSegmentId(segment.id);
       }}
@@ -466,7 +465,11 @@ function _SegmentListItem({
       }}
     >
       <Dropdown
-        menu={createSegmentContextMenu()} // The overlay is generated lazily. By default, this would make the overlay
+        menu={
+          selectedSegmentIds?.includes(segment.id) && selectedSegmentIds.length > 1
+            ? multiSelectMenu
+            : createSegmentContextMenu()
+        } // 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.
@@ -476,7 +479,7 @@ function _SegmentListItem({
         autoDestroy
         placement="bottom"
         open={activeDropdownSegmentId === segment.id}
-        onOpenChange={(isVisible) => handleSegmentDropdownMenuVisibility(segment.id, isVisible)}
+        onOpenChange={(isVisible) => handleSegmentDropdownMenuVisibility(isVisible, segment.id)}
         trigger={["contextMenu"]}
       >
         <div style={{ display: "inline-flex", alignItems: "center" }}>
@@ -504,7 +507,7 @@ function _SegmentListItem({
           />
           <Tooltip title="Open context menu (also available via right-click)">
             <EllipsisOutlined
-              onClick={() => handleSegmentDropdownMenuVisibility(segment.id, true)}
+              onClick={() => handleSegmentDropdownMenuVisibility(true, segment.id)}
             />
           </Tooltip>
           {/* Show Default Segment Name if another one is already defined*/}
@@ -539,7 +542,9 @@ function _SegmentListItem({
       >
         <MeshInfoItem
           segment={segment}
-          isSelectedInList={segment.id === selectedSegmentId}
+          isSelectedInList={
+            selectedSegmentIds != null ? selectedSegmentIds?.includes(segment.id) : false
+          }
           isHovered={isHoveredSegmentId}
           isosurface={isosurface}
           handleSegmentDropdownMenuVisibility={handleSegmentDropdownMenuVisibility}