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

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

@@ -7,6 +7,8 @@ import Shortcut from "libs/shortcut_component";
 import DomVisibilityObserver from "oxalis/view/components/dom_visibility_observer";
 import { mod } from "libs/utils";
 
+const PRIMARY_COLOR = "var(--ant-color-primary)";
+
 type Props<S> = {
   data: S[];
   searchKey: keyof S | ((item: S) => string);
@@ -21,6 +23,7 @@ type State = {
   isVisible: boolean;
   searchQuery: string;
   currentPosition: number | null | undefined;
+  areAllMatchesSelected: boolean;
 };
 
 export default class AdvancedSearchPopover<
@@ -30,6 +33,7 @@ export default class AdvancedSearchPopover<
     isVisible: false,
     searchQuery: "",
     currentPosition: null,
+    areAllMatchesSelected: false,
   };
 
   getAvailableOptions = memoizeOne(
@@ -70,6 +74,7 @@ export default class AdvancedSearchPopover<
     currentPosition = mod(currentPosition + offset, numberOfAvailableOptions);
     this.setState({
       currentPosition,
+      areAllMatchesSelected: false,
     });
     this.props.onSelect(availableOptions[currentPosition]);
   };
@@ -102,7 +107,7 @@ export default class AdvancedSearchPopover<
 
   render() {
     const { data, searchKey, provideShortcut, children, targetId } = this.props;
-    const { searchQuery, isVisible } = this.state;
+    const { searchQuery, isVisible, areAllMatchesSelected } = this.state;
     let { currentPosition } = this.state;
     const availableOptions = this.getAvailableOptions(data, searchQuery, searchKey);
     const numberOfAvailableOptions = availableOptions.length;
@@ -120,6 +125,7 @@ export default class AdvancedSearchPopover<
             color: "red",
           }
         : {};
+    const selectAllMatchesButtonColor = areAllMatchesSelected ? PRIMARY_COLOR : undefined;
     return (
       <React.Fragment>
         {provideShortcut ? (
@@ -175,9 +181,16 @@ export default class AdvancedSearchPopover<
                       this.setState({
                         searchQuery: evt.target.value,
                         currentPosition: null,
+                        areAllMatchesSelected: false,
                       })
                     }
-                    addonAfter={`${currentPosition + 1}/${numberOfAvailableOptions}`}
+                    addonAfter={
+                      <div style={{ minWidth: 25 }}>
+                        {!areAllMatchesSelected
+                          ? `${currentPosition + 1}/${numberOfAvailableOptions}`
+                          : ""}
+                      </div>
+                    }
                     ref={this.autoFocus}
                     autoFocus
                   />
@@ -207,10 +220,16 @@ export default class AdvancedSearchPopover<
                     <ButtonComponent
                       style={{
                         width: 40,
+                        color: selectAllMatchesButtonColor,
+                        borderColor: selectAllMatchesButtonColor,
                       }}
                       onClick={
                         this.props.onSelectAllMatches != null
-                          ? () => this.props.onSelectAllMatches!(availableOptionsToSelectAllMatches)
+                          ? () => {
+                              this.props.onSelectAllMatches!(availableOptionsToSelectAllMatches);
+                              if (!areAllMatchesSelected)
+                                this.setState({ areAllMatchesSelected: true });
+                            }
                           : undefined
                       }
                       disabled={isSelectAllMatchesDisabled}

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

@@ -137,6 +137,8 @@ import { SegmentStatisticsModal } from "./segment_statistics_modal";
 import type { ItemType } from "antd/lib/menu/interface";
 import { InputWithUpdateOnBlur } from "oxalis/view/components/input_with_update_on_blur";
 
+const SCROLL_DELAY_MS = 50;
+
 const { confirm } = Modal;
 const { Option } = Select;
 // Interval in ms to check for running mesh file computation jobs for this dataset
@@ -1613,7 +1615,7 @@ class SegmentsView extends React.Component<Props, State> {
     // 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);
+    }, SCROLL_DELAY_MS);
     const isASegment = "color" in selectedElement;
     if (isASegment) {
       this.onSelectSegment(selectedElement);
@@ -1642,7 +1644,9 @@ class SegmentsView extends React.Component<Props, State> {
         this.props.visibleSegmentationLayer.name,
       ),
     );
-    this.tree.current?.scrollTo({ key: allMatches[0].key });
+    setTimeout(() => {
+      this.tree.current?.scrollTo({ key: allMatches[0].key });
+    }, SCROLL_DELAY_MS);
   };
 
   getSegmentStatisticsModal = (groupId: number) => {

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

@@ -253,11 +253,14 @@ 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
-  let selectedKeys = props.selectedTreeIds.map((treeId) => getNodeKey(GroupTypeEnum.TREE, treeId));
+  const selectedKeys = props.activeGroupId
+    ? [getNodeKey(GroupTypeEnum.GROUP, props.activeGroupId)]
+    : props.selectedTreeIds.map((treeId) => getNodeKey(GroupTypeEnum.TREE, treeId));
 
-  if (props.activeGroupId) selectedKeys = [getNodeKey(GroupTypeEnum.GROUP, props.activeGroupId)];
-
-  treeRef.current?.scrollTo({ key: selectedKeys[0], align: "auto" });
+  useEffect(
+    () => treeRef.current?.scrollTo({ key: selectedKeys[0], align: "auto" }),
+    [selectedKeys[0]],
+  );
 
   return (
     <>