Add button to select all trees and all segments that match a search

CHANGELOG.unreleased.md

@@ -16,6 +16,7 @@ For upgrade instructions, please check the [migration guide](MIGRATIONS.released
 - Most sliders have been improved: Wheeling above a slider now changes its value and double-clicking its knob resets it to its default value. [#8095](https://github.com/scalableminds/webknossos/pull/8095)
 - It is now possible to search for unnamed segments with the full default name instead of only their id. [#8133](https://github.com/scalableminds/webknossos/pull/8133)
 - Increased loading speed for precomputed meshes. [#8110](https://github.com/scalableminds/webknossos/pull/8110)
+- Added a button to the search popover in the skeleton and segment tab to select all matching non-group results. [#8123](https://github.com/scalableminds/webknossos/pull/8123)
 - Unified wording in UI and code: “Magnification”/“mag” is now used in place of “Resolution“ most of the time, compare [https://docs.webknossos.org/webknossos/terminology.html](terminology document). [#8111](https://github.com/scalableminds/webknossos/pull/8111)
 
 ### Changed

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

@@ -1,5 +1,5 @@
 import { Input, Tooltip, Popover, Space, type InputRef } from "antd";
-import { DownOutlined, UpOutlined } from "@ant-design/icons";
+import { CheckSquareOutlined, DownOutlined, UpOutlined } from "@ant-design/icons";
 import * as React from "react";
 import memoizeOne from "memoize-one";
 import ButtonComponent from "oxalis/view/components/button_component";
@@ -11,6 +11,7 @@ type Props<S> = {
   data: S[];
   searchKey: keyof S | ((item: S) => string);
   onSelect: (arg0: S) => void;
+  onSelectAllMatches?: (arg0: S[]) => void;
   children: React.ReactNode;
   provideShortcut?: boolean;
   targetId: string;
@@ -109,7 +110,10 @@ export default class AdvancedSearchPopover<
     currentPosition =
       currentPosition == null ? -1 : Math.min(currentPosition, numberOfAvailableOptions - 1);
     const hasNoResults = numberOfAvailableOptions === 0;
-    const hasMultipleResults = numberOfAvailableOptions > 1;
+    const availableOptionsToSelectAllMatches = availableOptions.filter(
+      (result) => result.type === "Tree" || result.type === "segment",
+    );
+    const isSelectAllMatchesDisabled = availableOptionsToSelectAllMatches.length < 2;
     const additionalInputStyle =
       hasNoResults && searchQuery !== ""
         ? {
@@ -183,7 +187,7 @@ export default class AdvancedSearchPopover<
                         width: 40,
                       }}
                       onClick={this.selectPreviousOption}
-                      disabled={!hasMultipleResults}
+                      disabled={hasNoResults}
                     >
                       <UpOutlined />
                     </ButtonComponent>
@@ -194,11 +198,26 @@ export default class AdvancedSearchPopover<
                         width: 40,
                       }}
                       onClick={this.selectNextOption}
-                      disabled={!hasMultipleResults}
+                      disabled={hasNoResults}
                     >
                       <DownOutlined />
                     </ButtonComponent>
                   </Tooltip>
+                  <Tooltip title="Select all matches (except groups)">
+                    <ButtonComponent
+                      style={{
+                        width: 40,
+                      }}
+                      onClick={
+                        this.props.onSelectAllMatches != null
+                          ? () => this.props.onSelectAllMatches!(availableOptionsToSelectAllMatches)
+                          : undefined
+                      }
+                      disabled={isSelectAllMatchesDisabled}
+                    >
+                      <CheckSquareOutlined />
+                    </ButtonComponent>
+                  </Tooltip>
                 </Space.Compact>
               </React.Fragment>
             )

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

@@ -1590,7 +1590,7 @@ class SegmentsView extends React.Component<Props, State> {
     this.setState(({ renamingCounter }) => ({ renamingCounter: renamingCounter - 1 }));
   };
 
-  handleSearchSelect = (selectedElement: SegmentHierarchyNode) => {
+  maybeExpandParentGroup = (selectedElement: SegmentHierarchyNode) => {
     if (this.tree?.current == null) {
       return;
     }
@@ -1606,16 +1606,45 @@ class SegmentsView extends React.Component<Props, State> {
     if (expandedGroups) {
       this.setExpandedGroupsFromSet(expandedGroups);
     }
+  };
+
+  handleSearchSelect = (selectedElement: SegmentHierarchyNode) => {
+    this.maybeExpandParentGroup(selectedElement);
     // As parent groups might still need to expand, we need to wait for this to finish.
     setTimeout(() => {
       if (this.tree.current) this.tree.current.scrollTo({ key: selectedElement.key });
     }, 50);
     const isASegment = "color" in selectedElement;
     if (isASegment) {
       this.onSelectSegment(selectedElement);
+    } else {
+      if (this.props.visibleSegmentationLayer == null) return;
+      Store.dispatch(
+        setSelectedSegmentsOrGroupAction(
+          [],
+          selectedElement.id,
+          this.props.visibleSegmentationLayer?.name,
+        ),
+      );
     }
   };
 
+  handleSelectAllMatchingSegments = (allMatches: SegmentHierarchyNode[]) => {
+    if (this.props.visibleSegmentationLayer == null) return;
+    const allMatchingSegmentIds = allMatches.map((match) => {
+      this.maybeExpandParentGroup(match);
+      return match.id;
+    });
+    Store.dispatch(
+      setSelectedSegmentsOrGroupAction(
+        allMatchingSegmentIds,
+        null,
+        this.props.visibleSegmentationLayer.name,
+      ),
+    );
+    this.tree.current?.scrollTo({ key: allMatches[0].key });
+  };
+
   getSegmentStatisticsModal = (groupId: number) => {
     const visibleSegmentationLayer = this.props.visibleSegmentationLayer;
     if (visibleSegmentationLayer == null) {
@@ -1833,6 +1862,7 @@ class SegmentsView extends React.Component<Props, State> {
                     searchKey={(item) => getSegmentName(item)}
                     provideShortcut
                     targetId={segmentsTabId}
+                    onSelectAllMatches={this.handleSelectAllMatchingSegments}
                   >
                     <ButtonComponent
                       size="small"

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

@@ -668,7 +668,7 @@ class SkeletonTabView extends React.PureComponent<Props, State> {
     });
   };
 
-  handleSearchSelect = (selectedElement: TreeOrTreeGroup) => {
+  maybeExpandParentGroups = (selectedElement: TreeOrTreeGroup) => {
     const { skeletonTracing } = this.props;
     if (!skeletonTracing) {
       return;
@@ -682,13 +682,25 @@ class SkeletonTabView extends React.PureComponent<Props, State> {
     if (expandedGroups) {
       this.props.onSetExpandedGroups(expandedGroups);
     }
+  };
+
+  handleSearchSelect = (selectedElement: TreeOrTreeGroup) => {
+    this.maybeExpandParentGroups(selectedElement);
     if (selectedElement.type === GroupTypeEnum.TREE) {
       this.props.onSetActiveTree(selectedElement.id);
     } else {
       this.props.onSetActiveTreeGroup(selectedElement.id);
     }
   };
 
+  handleSelectAllMatchingTrees = (matchingTrees: TreeOrTreeGroup[]) => {
+    const treeIds = matchingTrees.map((tree) => {
+      this.maybeExpandParentGroups(tree);
+      return tree.id;
+    });
+    this.setState({ selectedTreeIds: treeIds });
+  };
+
   getTreesComponents(sortBy: string) {
     if (!this.props.skeletonTracing) {
       return null;
@@ -864,6 +876,7 @@ class SkeletonTabView extends React.PureComponent<Props, State> {
                     searchKey="name"
                     provideShortcut
                     targetId={treeTabId}
+                    onSelectAllMatches={this.handleSelectAllMatchingTrees}
                   >
                     <ButtonComponent title="Open the search via CTRL + Shift + F">
                       <SearchOutlined />

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

@@ -188,8 +188,7 @@ function TreeHierarchyView(props: Props) {
     }
   }
 
-  function onSelectGroupNode(node: TreeNode) {
-    const groupId = node.id;
+  function onSelectGroupNode(groupId: number) {
     const numberOfSelectedTrees = props.selectedTreeIds.length;
 
     if (numberOfSelectedTrees > 1) {
@@ -254,11 +253,11 @@ function TreeHierarchyView(props: Props) {
   const checkedKeys = deepFlatFilter(UITreeData, (node) => node.isChecked).map((node) => node.key);
 
   // selectedKeys is mainly used for highlighting, i.e. blueish background color
-  const selectedKeys = props.selectedTreeIds.map((treeId) =>
-    getNodeKey(GroupTypeEnum.TREE, treeId),
-  );
+  let selectedKeys = props.selectedTreeIds.map((treeId) => getNodeKey(GroupTypeEnum.TREE, treeId));
+
+  if (props.activeGroupId) selectedKeys = [getNodeKey(GroupTypeEnum.GROUP, props.activeGroupId)];
 
-  if (props.activeGroupId) selectedKeys.push(getNodeKey(GroupTypeEnum.GROUP, props.activeGroupId));
+  treeRef.current?.scrollTo({ key: selectedKeys[0], align: "auto" });
 
   return (
     <>
@@ -297,7 +296,7 @@ function TreeHierarchyView(props: Props) {
                   onSelect={(_selectedKeys, info: { node: TreeNode; nativeEvent: MouseEvent }) =>
                     info.node.type === GroupTypeEnum.TREE
                       ? onSelectTreeNode(info.node, info.nativeEvent)
-                      : onSelectGroupNode(info.node)
+                      : onSelectGroupNode(info.node.id)
                   }
                   onDrop={onDrop}
                   onCheck={onCheck}