Misc improvements to details table in skeleton and segments tab

CHANGELOG.unreleased.md

@@ -19,6 +19,8 @@ For upgrade instructions, please check the [migration guide](MIGRATIONS.released
 - It is now possible to select the magnification of the layers on which an AI model will be trained. [#8266](https://github.com/scalableminds/webknossos/pull/8266)
 - When the eraser tool is active, one can switch temporarily to the fill-segment tool by pressing shift and ctrl. Only pressing shift, switches to the pick-segment tool. [#8314](https://github.com/scalableminds/webknossos/pull/8314)
 - Enabled auto sorting of Typescript imports in Biome linter. [#8313](https://github.com/scalableminds/webknossos/pull/8313)
+- Clicking on a segment or tree group will show some details in the details table. [#8316](https://github.com/scalableminds/webknossos/pull/8316)
+- Segment and tree names can be edited by doubleclicking them. [#8316](https://github.com/scalableminds/webknossos/pull/8316)
 
 ### Changed
 - Renamed "resolution" to "magnification" in more places within the codebase, including local variables. [#8168](https://github.com/scalableminds/webknossos/pull/8168)

frontend/javascripts/dashboard/folders/metadata_table.tsx

@@ -542,3 +542,25 @@ export function InnerMetadataTable({
     </table>
   );
 }
+
+export function SimpleRow({
+  label, // must not be called "key" as this is reserved in react
+  value,
+  isTableHead,
+}: { label: React.ReactNode; value: React.ReactNode; isTableHead?: boolean }) {
+  if (isTableHead) {
+    return (
+      <tr>
+        <th>{label}</th>
+        <th colSpan={2}>{value}</th>
+      </tr>
+    );
+  }
+
+  return (
+    <tr>
+      <td>{label}</td>
+      <td colSpan={2}>{value}</td>
+    </tr>
+  );
+}

frontend/javascripts/oxalis/api/api_latest.ts

@@ -176,7 +176,7 @@ import {
   callDeep,
   createGroupToSegmentsMap,
   moveGroupsHelper,
-} from "oxalis/view/right-border-tabs/tree_hierarchy_view_helpers";
+} from "oxalis/view/right-border-tabs/trees_tab/tree_hierarchy_view_helpers";
 import type { Versions } from "oxalis/view/version_view";
 // @ts-expect-error ts-migrate(7016) FIXME: Could not find a declaration file for module 'twee... Remove this comment to see the full error message
 import TWEEN from "tween.js";

frontend/javascripts/oxalis/model/accessors/skeletontracing_accessor.ts

@@ -16,7 +16,7 @@ import type {
 import {
   MISSING_GROUP_ID,
   findGroup,
-} from "oxalis/view/right-border-tabs/tree_hierarchy_view_helpers";
+} from "oxalis/view/right-border-tabs/trees_tab/tree_hierarchy_view_helpers";
 import type {
   APIAnnotation,
   AnnotationLayerDescriptor,

frontend/javascripts/oxalis/model/accessors/volumetracing_accessor.ts

@@ -45,7 +45,7 @@ import type { SegmentHierarchyNode } from "oxalis/view/right-border-tabs/segment
 import {
   MISSING_GROUP_ID,
   getGroupByIdWithSubgroups,
-} from "oxalis/view/right-border-tabs/tree_hierarchy_view_helpers";
+} from "oxalis/view/right-border-tabs/trees_tab/tree_hierarchy_view_helpers";
 import type {
   APIAnnotation,
   APIAnnotationInfo,

frontend/javascripts/oxalis/model/helpers/compaction/compact_toggle_actions.ts

@@ -14,7 +14,7 @@ import {
   MISSING_GROUP_ID,
   createGroupToTreesMap,
   getGroupByIdWithSubgroups,
-} from "oxalis/view/right-border-tabs/tree_hierarchy_view_helpers";
+} from "oxalis/view/right-border-tabs/trees_tab/tree_hierarchy_view_helpers";
 type GroupNode = {
   children: GroupNode[];
   groupId: number | null | undefined;

frontend/javascripts/oxalis/model/helpers/nml_helpers.ts

@@ -32,7 +32,7 @@ import type {
   TreeGroup,
   UserBoundingBox,
 } from "oxalis/store";
-import { findGroup } from "oxalis/view/right-border-tabs/tree_hierarchy_view_helpers";
+import { findGroup } from "oxalis/view/right-border-tabs/trees_tab/tree_hierarchy_view_helpers";
 // @ts-expect-error ts-migrate(7016) FIXME: Could not find a declaration file for module 'saxo... Remove this comment to see the full error message
 import Saxophone from "saxophone";
 import type { APIBuildInfo, MetadataEntryProto } from "types/api_flow_types";

frontend/javascripts/oxalis/model/reducers/skeletontracing_reducer.ts

@@ -45,7 +45,7 @@ import type { OxalisState, SkeletonTracing, Tree, TreeGroup } from "oxalis/store
 import {
   GroupTypeEnum,
   getNodeKey,
-} from "oxalis/view/right-border-tabs/tree_hierarchy_view_helpers";
+} from "oxalis/view/right-border-tabs/trees_tab/tree_hierarchy_view_helpers";
 import type { MetadataEntryProto } from "types/api_flow_types";
 import { userSettings } from "types/schemas/user_settings.schema";
 

frontend/javascripts/oxalis/model/reducers/volumetracing_reducer.ts

@@ -9,6 +9,7 @@ import {
 import {
   getRequestedOrVisibleSegmentationLayer,
   getSegmentationLayerForTracing,
+  getSelectedIds,
   getVisibleSegments,
   getVolumeTracingById,
 } from "oxalis/model/accessors/volumetracing_accessor";
@@ -55,10 +56,11 @@ import type {
 import {
   findParentIdForGroupId,
   getGroupNodeKey,
-} from "oxalis/view/right-border-tabs/tree_hierarchy_view_helpers";
+} from "oxalis/view/right-border-tabs/trees_tab/tree_hierarchy_view_helpers";
 import type { AdditionalCoordinate, ServerVolumeTracing } from "types/api_flow_types";
 import { mapGroups } from "../accessors/skeletontracing_accessor";
 import { sanitizeMetadata } from "./skeletontracing_reducer";
+
 type SegmentUpdateInfo =
   | {
       readonly type: "UPDATE_VOLUME_TRACING";
@@ -192,7 +194,7 @@ function handleUpdateSegment(state: OxalisState, action: UpdateSegmentAction) {
       creationTime: action.timestamp,
       name: null,
       color: null,
-      groupId: null,
+      groupId: getSelectedIds(state)[0].group,
       someAdditionalCoordinates: someAdditionalCoordinates,
       ...oldSegment,
       ...segment,

frontend/javascripts/oxalis/view/components/editable_text_label.tsx

@@ -23,6 +23,7 @@ export type EditableTextLabelProp = {
   margin?: number | string;
   onClick?: () => void;
   disableEditing?: boolean;
+  hideEditIcon?: boolean;
   onContextMenu?: () => void;
   width?: string | number;
   iconClassName?: string;
@@ -133,6 +134,7 @@ class EditableTextLabel extends React.PureComponent<EditableTextLabelProp, State
   render() {
     const iconStyle = {
       cursor: "pointer",
+      marginLeft: 5,
     };
     const margin = this.props.margin != null ? this.props.margin : "0 10px";
     const inputComponentProps: InputProps = {
@@ -147,6 +149,18 @@ class EditableTextLabel extends React.PureComponent<EditableTextLabelProp, State
       autoFocus: true,
     };
     const isInvalidStyleMaybe = this.props.isInvalid ? { color: "var(--ant-color-error)" } : {};
+    const onRename = (evt: React.MouseEvent) => {
+      if (this.props.disableEditing) {
+        return;
+      }
+      evt.stopPropagation();
+      this.setState({
+        isEditing: true,
+      });
+      if (this.props.onRenameStart) {
+        this.props.onRenameStart();
+      }
+    };
 
     if (this.state.isEditing) {
       return (
@@ -185,6 +199,7 @@ class EditableTextLabel extends React.PureComponent<EditableTextLabelProp, State
           }}
           className={this.props.onClick != null ? "clickable-text" : undefined}
           onClick={this.props.onClick}
+          onDoubleClick={onRename}
           onContextMenu={this.props.onContextMenu}
         >
           {this.props.markdown ? (
@@ -194,27 +209,18 @@ class EditableTextLabel extends React.PureComponent<EditableTextLabelProp, State
           ) : (
             <span style={isInvalidStyleMaybe}>{this.props.value}</span>
           )}
-          {this.props.disableEditing ? null : (
+          {this.props.disableEditing || this.props.hideEditIcon ? null : (
             <FastTooltip key="edit" title={`Edit ${this.props.label}`} placement="bottom">
               <EditOutlined
                 className={
                   this.props.iconClassName + " " + (this.props.markdown ? "flex-item" : "")
                 }
                 style={{
                   ...iconStyle,
-                  marginLeft: 5,
                   display: "inline",
                   whiteSpace: "nowrap",
                 }}
-                onClick={(evt) => {
-                  evt.stopPropagation();
-                  this.setState({
-                    isEditing: true,
-                  });
-                  if (this.props.onRenameStart) {
-                    this.props.onRenameStart();
-                  }
-                }}
+                onClick={onRename}
               />
             </FastTooltip>
           )}

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

@@ -130,12 +130,14 @@ import {
   additionallyExpandGroup,
   createGroupToParentMap,
   createGroupToSegmentsMap,
+  findGroup,
   findParentIdForGroupId,
   getExpandedGroups,
   getGroupByIdWithSubgroups,
   getGroupNodeKey,
-} from "../tree_hierarchy_view_helpers";
+} from "../trees_tab/tree_hierarchy_view_helpers";
 import { SegmentStatisticsModal } from "./segment_statistics_modal";
+import { SimpleRow } from "dashboard/folders/metadata_table";
 
 const SCROLL_DELAY_MS = 50;
 
@@ -1980,31 +1982,28 @@ class SegmentsView extends React.Component<Props, State> {
   };
 
   renderDetailsForSelection() {
-    const { segments } = this.props.selectedIds;
-    if (segments.length === 1) {
+    const { segments: selectedSegmentIds, group: selectedGroupId } = this.props.selectedIds;
+    if (selectedSegmentIds.length === 1) {
       const readOnly = !this.props.allowUpdate;
-      const segment = this.props.segments?.getNullable(segments[0]);
+      const segment = this.props.segments?.getNullable(selectedSegmentIds[0]);
       if (segment == null) {
         return <>Cannot find details for selected segment.</>;
       }
       return (
         <table className="metadata-table">
           <thead>
-            <tr>
-              <th>ID</th>
-              <th colSpan={2}>{segment.id}</th>
-            </tr>
+            <SimpleRow isTableHead label="ID" value={segment.id} />
           </thead>
           <tbody>
-            <tr>
-              <td>Name</td>
-              <td colSpan={2}>
+            <SimpleRow
+              label="Name"
+              value={
                 <InputWithUpdateOnBlur
                   value={segment.name || ""}
                   onChange={this.renameActiveSegment}
                 />
-              </td>
-            </tr>
+              }
+            />
             <MetadataEntryTableRows
               item={segment}
               setMetadata={this.setMetadata}
@@ -2013,6 +2012,63 @@ class SegmentsView extends React.Component<Props, State> {
           </tbody>
         </table>
       );
+    } else if (selectedGroupId != null) {
+      const { segmentGroups } = this.props;
+      const activeGroup = findGroup(this.props.segmentGroups, selectedGroupId);
+      if (!activeGroup || this.props.segments == null) {
+        return null;
+      }
+
+      const groupToSegmentsMap = createGroupToSegmentsMap(this.props.segments);
+      const groupWithSubgroups = getGroupByIdWithSubgroups(segmentGroups, selectedGroupId);
+
+      return (
+        <table className="metadata-table">
+          <thead>
+            <SimpleRow isTableHead label="ID" value={activeGroup.groupId} />
+          </thead>
+          <tbody>
+            <SimpleRow
+              label="Name"
+              value={
+                <InputWithUpdateOnBlur
+                  value={activeGroup.name || ""}
+                  onChange={(newName) => {
+                    if (this.props.visibleSegmentationLayer == null) {
+                      return;
+                    }
+                    api.tracing.renameSegmentGroup(
+                      activeGroup.groupId,
+                      newName,
+                      this.props.visibleSegmentationLayer.name,
+                    );
+                  }}
+                />
+              }
+            />
+
+            {groupWithSubgroups.length === 1 ? (
+              <SimpleRow
+                label="Segment Count"
+                value={groupToSegmentsMap[selectedGroupId]?.length ?? 0}
+              />
+            ) : (
+              <>
+                <SimpleRow
+                  label="Segment Count (direct children)"
+                  value={groupToSegmentsMap[selectedGroupId]?.length ?? 0}
+                />
+                <SimpleRow
+                  label="Segment Count (all children)"
+                  value={_.sum(
+                    groupWithSubgroups.map((groupId) => groupToSegmentsMap[groupId]?.length ?? 0),
+                  )}
+                />
+              </>
+            )}
+          </tbody>
+        </table>
+      );
     }
     return null;
   }

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

@@ -79,15 +79,15 @@ import Store from "oxalis/store";
 import ButtonComponent from "oxalis/view/components/button_component";
 import DomVisibilityObserver from "oxalis/view/components/dom_visibility_observer";
 import InputComponent from "oxalis/view/components/input_component";
+import TreeHierarchyView from "oxalis/view/right-border-tabs/trees_tab/tree_hierarchy_view";
 import {
   GroupTypeEnum,
   MISSING_GROUP_ID,
   additionallyExpandGroup,
   callDeep,
   createGroupToParentMap,
   createGroupToTreesMap,
-} from "oxalis/view/right-border-tabs/tree_hierarchy_view_helpers";
-import TreeHierarchyView from "oxalis/view/right-border-tabs/trees_tab/tree_hierarchy_view";
+} from "oxalis/view/right-border-tabs/trees_tab/tree_hierarchy_view_helpers";
 import * as React from "react";
 import { connect } from "react-redux";
 import type { Dispatch } from "redux";
@@ -389,20 +389,6 @@ class SkeletonTabView extends React.PureComponent<Props, State> {
     },
   );
 
-  handleChangeName = (evt: React.ChangeEvent<HTMLInputElement>) => {
-    if (!this.props.skeletonTracing) {
-      return;
-    }
-
-    const { activeGroupId } = this.props.skeletonTracing;
-
-    if (activeGroupId != null) {
-      api.tracing.renameSkeletonGroup(activeGroupId, evt.target.value);
-    } else {
-      this.props.onChangeTreeName(evt.target.value);
-    }
-  };
-
   deleteGroup = (groupId: number, deleteRecursively: boolean = false) => {
     if (!this.props.skeletonTracing) {
       return;
@@ -929,10 +915,10 @@ class SkeletonTabView extends React.PureComponent<Props, State> {
                     <i className="fas fa-arrow-left" />
                   </ButtonComponent>
                   <InputComponent
-                    onChange={this.handleChangeName}
+                    onChange={() => {}}
                     value={activeTreeName || activeGroupName}
-                    disabled={noTreesAndGroups || isEditingDisabled}
-                    title={isEditingDisabled ? isEditingDisabledMessage : undefined}
+                    disabled
+                    title="Edit the name in the details table below the tree list. Note: This text field will be removed in a future update."
                     style={{ width: "80%" }}
                   />
                   <ButtonComponent