Panel content reorganization + Control/Tool rework

frontend/javascripts/oxalis/constants.js

@@ -97,17 +97,46 @@ export const OrthoViewCrosshairColors: OrthoViewMap<[number, number]> = {
 };
 
 export const BorderTabs = {
-  DatasetInfoTabView: { id: "DatasetInfoTabView", name: "Info" },
-  CommentTabView: { id: "CommentTabView", name: "Comments" },
-  MeshesView: { id: "MeshesView", name: "Meshes" },
-  SkeletonTabView: { id: "SkeletonTabView", name: "Skeleton" },
-  AbstractTreeTab: { id: "AbstractTreeTab", name: "AbsTree" },
+  DatasetInfoTabView: {
+    id: "DatasetInfoTabView",
+    name: "Info",
+    description: "Information about the dataset",
+  },
+  CommentTabView: {
+    id: "CommentTabView",
+    name: "Comments",
+    description: "Add comments to skeleton nodes",
+  },
+  MeshesView: {
+    id: "MeshesView",
+    name: "Meshes",
+    description: "Load, compute and organize Meshes of segments",
+  },
+  SkeletonTabView: {
+    id: "SkeletonTabView",
+    name: "Skeleton",
+    description: "Create and organize skeletons",
+  },
+  AbstractTreeTab: {
+    id: "AbstractTreeTab",
+    name: "AbsTree",
+    description: "Views an abstract version of the active skeleton",
+  },
   ControlsAndRenderingSettingsTab: {
     id: "ControlsAndRenderingSettingsTab",
-    name: "Controls/Rendering",
+    name: "Settings",
+    description: "Change general settings about controls and rendering.",
+  },
+  BoundingBoxTab: {
+    id: "BoundingBoxTab",
+    name: "BBoxes",
+    description: "Add and organize bounding boxes",
+  },
+  LayerSettingsTab: {
+    id: "LayerSettingsTab",
+    name: "Layers",
+    description: "Change settings of each data layer",
   },
-  BoundingBoxTab: { id: "BoundingBoxTab", name: "BBoxes" },
-  LayerSettingsTab: { id: "LayerSettingsTab", name: "Layer" },
 };
 
 export const OrthoViewGrayCrosshairColor = 0x222222;

frontend/javascripts/oxalis/controller/combinations/tool_controls.js

@@ -443,7 +443,7 @@ export class EraseTool {
     _altKey: boolean,
   ): Object {
     return {
-      leftDrag: `Erase (${activeTool === AnnotationToolEnum.BRUSH ? "Brush" : "Trace"})`,
+      leftDrag: `Erase (${activeTool === AnnotationToolEnum.ERASE_BRUSH ? "Brush" : "Trace"})`,
       rightClick: "Context Menu",
     };
   }

frontend/javascripts/oxalis/view/action-bar/toolbar_view.js

@@ -25,12 +25,26 @@ import {
   getDisabledInfoForTools,
   adaptActiveToolToShortcuts,
 } from "oxalis/model/accessors/tool_accessor";
-import { createTreeAction } from "oxalis/model/actions/skeletontracing_actions";
+import {
+  createTreeAction,
+  setMergerModeEnabledAction,
+} from "oxalis/model/actions/skeletontracing_actions";
 import { getActiveTree } from "oxalis/model/accessors/skeletontracing_accessor";
 import { LogSliderSetting } from "oxalis/view/components/setting_input_views";
 import { userSettings } from "types/schemas/user_settings.schema";
 import { toNullable } from "libs/utils";
-import SkeletonActionsView, { narrowButtonStyle } from "./skeleton_actions_view";
+
+const narrowButtonStyle = {
+  paddingLeft: 10,
+  paddingRight: 8,
+};
+
+const imgStyleForSpaceyIcons = {
+  width: 20,
+  height: 20,
+  lineHeight: 10,
+  marginTop: -2,
+};
 
 function getSkeletonToolHint(activeTool, isShiftPressed, isControlPressed, isAltPressed): ?string {
   if (activeTool !== AnnotationToolEnum.SKELETON) {
@@ -156,6 +170,49 @@ function OverwriteModeSwitch({ isControlPressed, isShiftPressed, visible }) {
   );
 }
 
+function AdditionalSkeletonModesButtons() {
+  const dispatch = useDispatch();
+  const isMergerModeEnabled = useSelector(
+    state => state.temporaryConfiguration.isMergerModeEnabled,
+  );
+  const isNewNodeNewTreeModeOn = useSelector(state => state.userConfiguration.newNodeNewTree);
+  const toggleNewNodeNewTreeMode = () =>
+    dispatch(updateUserSettingAction("newNodeNewTree", !isNewNodeNewTreeModeOn));
+  const toggleMergerMode = () => dispatch(setMergerModeEnabledAction(!isMergerModeEnabled));
+  const activeButtonStyle = { ...narrowButtonStyle, borderColor: "#1890ff" };
+  const newNodeNewTreeModeButtonStyle = isNewNodeNewTreeModeOn
+    ? activeButtonStyle
+    : narrowButtonStyle;
+  const mergerModeButtonStyle = isMergerModeEnabled ? activeButtonStyle : narrowButtonStyle;
+
+  return (
+    <React.Fragment>
+      <Tooltip title="Toggle the Single node Tree (soma clicking) mode">
+        <ButtonComponent
+          style={newNodeNewTreeModeButtonStyle}
+          value="active"
+          onClick={toggleNewNodeNewTreeMode}
+        >
+          <img
+            style={imgStyleForSpaceyIcons}
+            src="/assets/images/soma-clicking-icon.svg"
+            alt="Single Node Tree Mode"
+          />
+        </ButtonComponent>
+      </Tooltip>
+      <Tooltip title="Toggle Merger Mode">
+        <ButtonComponent style={mergerModeButtonStyle} value="active" onClick={toggleMergerMode}>
+          <img
+            style={imgStyleForSpaceyIcons}
+            src="/assets/images/merger-mode-icon.svg"
+            alt="Merger Mode"
+          />
+        </ButtonComponent>
+      </Tooltip>
+    </React.Fragment>
+  );
+}
+
 const mapId = id => {
   const { cube } = Model.getSegmentationLayer();
   return cube.mapId(id);
@@ -207,18 +264,55 @@ function CreateTreeButton() {
   return (
     <Badge dot style={{ boxShadow: "none", background: rgbColorString }}>
       <Tooltip title={`Create a new Tree – ${activeTreeHint}`}>
-        <ButtonComponent onClick={handleCreateTree} style={{ width: 36, paddingLeft: 10 }}>
+        <ButtonComponent onClick={handleCreateTree} style={narrowButtonStyle}>
           <img
             src="/assets/images/new-tree.svg"
             alt="New Tree Icon"
-            style={{ width: 16, height: 16 }}
+            style={imgStyleForSpaceyIcons}
           />
         </ButtonComponent>
       </Tooltip>
     </Badge>
   );
 }
 
+function ChangeBrushSizeButton() {
+  const brushSize = useSelector(state => state.userConfiguration.brushSize);
+
+  return (
+    <Tooltip title="Change the brush size">
+      <Popover
+        content={
+          <div style={{ width: 230 }}>
+            <div style={{ marginBottom: 8 }}>Set the brush size:</div>
+            <LogSliderSetting
+              label=""
+              roundTo={0}
+              min={userSettings.brushSize.minimum}
+              max={userSettings.brushSize.maximum}
+              step={5}
+              spans={[0, 14, 10]}
+              value={brushSize}
+              onChange={handleUpdateBrushSize}
+            />
+          </div>
+        }
+        trigger="click"
+        placement="bottom"
+        style={{ cursor: "pointer" }}
+      >
+        <ButtonComponent style={{ width: 36, padding: 0 }} value="active">
+          <img
+            src="/assets/images/brush-size-icon.svg"
+            alt="Merger Mode"
+            style={{ width: 20, height: 20 }}
+          />
+        </ButtonComponent>
+      </Popover>
+    </Tooltip>
+  );
+}
+
 export default function ToolbarView() {
   const hasVolume = useSelector(state => state.tracing.volume != null);
   const hasSkeleton = useSelector(state => state.tracing.skeleton != null);
@@ -264,8 +358,6 @@ export default function ToolbarView() {
     isAltPressed,
   );
 
-  const brushSize = useSelector(state => state.userConfiguration.brushSize);
-
   const skeletonToolHint =
     hasSkeleton && useLegacyBindings
       ? getSkeletonToolHint(activeTool, isShiftPressed, isControlPressed, isAltPressed)
@@ -286,6 +378,10 @@ export default function ToolbarView() {
   const showCreateTreeButton = hasSkeleton && adaptedActiveTool === AnnotationToolEnum.SKELETON;
   const showCreateCellButton =
     isVolumeSupported && !showCreateTreeButton && adaptedActiveTool !== AnnotationToolEnum.MOVE;
+  const showChangeBrushSizeButton =
+    showCreateCellButton &&
+    (adaptedActiveTool === AnnotationToolEnum.BRUSH ||
+      adaptedActiveTool === AnnotationToolEnum.ERASE_BRUSH);
 
   return (
     <div
@@ -452,48 +548,25 @@ export default function ToolbarView() {
         ) : null}
       </Radio.Group>
 
+      {showCreateTreeButton ? (
+        <Space size={0} className="tight-button-group" style={{ marginLeft: 10 }}>
+          <CreateTreeButton />
+          <AdditionalSkeletonModesButtons />
+        </Space>
+      ) : null}
+
+      {showCreateCellButton || showChangeBrushSizeButton ? (
+        <Space size={0} style={{ marginLeft: 12 }} className="tight-button-group">
+          {showCreateCellButton ? <CreateCellButton /> : null}
+          {showChangeBrushSizeButton ? <ChangeBrushSizeButton /> : null}
+        </Space>
+      ) : null}
+
       <OverwriteModeSwitch
         isControlPressed={isControlPressed}
         isShiftPressed={isShiftPressed}
         visible={ToolsWithOverwriteCapabilities.includes(adaptedActiveTool)}
       />
-
-      <Space size={0} style={{ marginLeft: 12 }} className="tight-button-group">
-        {showCreateCellButton ? <CreateCellButton /> : null}
-        {showCreateTreeButton ? <CreateTreeButton /> : null}
-        <Tooltip title="Change the brush size">
-          <Popover
-            content={
-              <div style={{ width: 230 }}>
-                <div style={{ marginBottom: 8 }}>Set the brush size:</div>
-                <LogSliderSetting
-                  label=""
-                  roundTo={0}
-                  min={userSettings.brushSize.minimum}
-                  max={userSettings.brushSize.maximum}
-                  step={5}
-                  spans={[0, 14, 10]}
-                  value={brushSize}
-                  onChange={handleUpdateBrushSize}
-                />
-              </div>
-            }
-            trigger="click"
-            placement="bottom"
-            style={{ cursor: "pointer" }}
-          >
-            <ButtonComponent style={{ width: 36, padding: 0 }} value="active">
-              <img
-                src="/assets/images/brush-size-icon.svg"
-                alt="Merger Mode"
-                style={{ width: 20, height: 20 }}
-              />
-            </ButtonComponent>
-          </Popover>
-        </Tooltip>
-      </Space>
-
-      {hasSkeleton ? <SkeletonActionsView /> : null}
     </div>
   );
 }

frontend/javascripts/oxalis/view/components/setting_input_views.js

@@ -1,6 +1,6 @@
 // @flow
 import { Row, Col, Slider, InputNumber, Switch, Tooltip, Input, Select, Popover } from "antd";
-import { DeleteOutlined, DownloadOutlined } from "@ant-design/icons";
+import { DeleteOutlined, DownloadOutlined, EditOutlined } from "@ant-design/icons";
 import * as React from "react";
 import _ from "lodash";
 
@@ -276,13 +276,11 @@ export function NumberInputPopoverSetting(props: NumberInputPopoverSettingProps)
     </div>
   );
   return (
-    <Popover
-      content={numberInput}
-      trigger="click"
-      placement={placement}
-      style={{ cursor: "pointer" }}
-    >
-      {label} {value != null ? value : "-"}
+    <Popover content={numberInput} trigger="click" placement={placement}>
+      <span style={{ cursor: "pointer" }}>
+        {label} {value != null ? value : "-"}
+        <EditOutlined style={{ fontSize: 11 }} />
+      </span>
     </Popover>
   );
 }

frontend/javascripts/oxalis/view/layouting/flex_layout_wrapper.js

@@ -4,7 +4,7 @@ import FlexLayout, { TabNode, TabSetNode } from "flexlayout-react";
 import { connect } from "react-redux";
 import type { Dispatch } from "redux";
 import Store, { type OxalisState, type BorderOpenStatus } from "oxalis/store";
-import { Layout } from "antd";
+import { Layout, Tooltip } from "antd";
 import _ from "lodash";
 import Toast from "libs/toast";
 import messages from "messages";
@@ -17,7 +17,7 @@ import {
 } from "oxalis/view/layouting/default_layout_configs";
 
 import Statusbar from "oxalis/view/statusbar";
-import { OrthoViews, ArbitraryViews } from "oxalis/constants";
+import { OrthoViews, ArbitraryViews, BorderTabs } from "oxalis/constants";
 import AbstractTreeTab from "oxalis/view/right-border-tabs/abstract_tree_tab";
 import CommentTabView from "oxalis/view/right-border-tabs/comment_tab/comment_tab_view";
 import DatasetInfoTabView from "oxalis/view/right-border-tabs/dataset_info_tab_view";
@@ -250,6 +250,11 @@ class FlexLayoutWrapper extends React.PureComponent<Props, State> {
       <FlexLayout.Layout
         model={model}
         factory={(...args) => this.layoutFactory(...args)}
+        titleFactory={renderedNode => (
+          <Tooltip title={BorderTabs[renderedNode.getId()].description}>
+            {renderedNode.getName()}{" "}
+          </Tooltip>
+        )}
         onModelChange={() => {
           // Update / inform parent layout about the changes.
           // This will trigger the parents onModelChange and this will then save the model changes.