Prevent dragging tree while renaming

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

@@ -1915,7 +1915,7 @@ class SegmentsView extends React.Component<Props, State> {
                                 draggable={{
                                   icon: false,
                                   nodeDraggable: () =>
-                                    // Forbid renaming when segments or groups are being renamed,
+                                    // Forbid dragging when segments or groups are being renamed,
                                     // since selecting text within the editable input box would not work
                                     // otherwise (instead, the item would be dragged).
                                     this.state.renamingCounter === 0 && this.props.allowUpdate,

frontend/javascripts/viewer/view/right-border-tabs/trees_tab/tree_hierarchy_renderers.tsx

@@ -77,6 +77,8 @@ export function renderTreeNode(
   onOpenContextMenu: (menu: MenuProps, event: React.MouseEvent<HTMLDivElement>) => void,
   hideContextMenu: () => void,
   node: TreeNode,
+  increaseEditCounter: () => void,
+  decreaseEditCounter: () => void,
 ): React.ReactNode {
   const tree = props.trees.getNullable(node.id);
   if (tree == null) return null;
@@ -102,6 +104,8 @@ export function renderTreeNode(
       <EditableTextLabel
         value={tree.name}
         label="Tree Name"
+        onRenameStart={increaseEditCounter}
+        onRenameEnd={decreaseEditCounter}
         onChange={(newValue) => Store.dispatch(setTreeNameAction(newValue, tree.treeId))}
         hideEditIcon
         margin={0}
@@ -227,6 +231,8 @@ export function renderGroupNode(
   hideContextMenu: () => void,
   node: TreeNode,
   expandedNodeKeys: string[],
+  increaseEditCounter: () => void,
+  decreaseEditCounter: () => void,
 ) {
   // The root group must not be removed or renamed
   const { id, name } = node;
@@ -250,6 +256,8 @@ export function renderGroupNode(
         onChange={(newValue) => api.tracing.renameSkeletonGroup(id, newValue)}
         hideEditIcon
         margin={0}
+        onRenameStart={increaseEditCounter}
+        onRenameEnd={decreaseEditCounter}
       />
       {}
     </div>

frontend/javascripts/viewer/view/right-border-tabs/trees_tab/tree_hierarchy_view.tsx

@@ -68,6 +68,10 @@ function TreeHierarchyView(props: Props) {
   const [contextMenuPosition, setContextMenuPosition] = useState<[number, number] | null>(null);
   const [menu, setMenu] = useState<MenuProps | null>(null);
 
+  const [renamingCounter, setRenamingCounter] = useState(0);
+  const increaseRenamingCounter = () => setRenamingCounter((prev) => prev + 1);
+  const decreaseRenamingCounter = () => setRenamingCounter((prev) => Math.max(prev - 1, 0));
+
   const treeRef = useRef<GetRef<typeof AntdTree>>(null);
   const wrapperRef = useRef<HTMLDivElement>(null);
 
@@ -253,7 +257,7 @@ function TreeHierarchyView(props: Props) {
   }
 
   function isNodeDraggable(node: TreeNode): boolean {
-    return props.allowUpdate && node.id !== MISSING_GROUP_ID;
+    return props.allowUpdate && node.id !== MISSING_GROUP_ID && renamingCounter === 0;
   }
 
   // checkedKeys includes all nodes with a "selected" checkbox
@@ -321,13 +325,22 @@ function TreeHierarchyView(props: Props) {
                   ref={treeRef}
                   titleRender={(node) =>
                     node.type === GroupTypeEnum.TREE
-                      ? renderTreeNode(props, onOpenContextMenu, hideContextMenu, node)
+                      ? renderTreeNode(
+                          props,
+                          onOpenContextMenu,
+                          hideContextMenu,
+                          node,
+                          increaseRenamingCounter,
+                          decreaseRenamingCounter,
+                        )
                       : renderGroupNode(
                           props,
                           onOpenContextMenu,
                           hideContextMenu,
                           node,
                           expandedNodeKeys,
+                          increaseRenamingCounter,
+                          decreaseRenamingCounter,
                         )
                   }
                   switcherIcon={<DownOutlined />}

unreleased_changes/8801.md

@@ -0,0 +1,2 @@
+### Fixed
+- When renaming skeletons or skeleton groups, it is now possible to select a part of the name.