Add color picker to select tree color

CHANGELOG.unreleased.md

@@ -14,6 +14,7 @@ For upgrade instructions, please check the [migration guide](MIGRATIONS.released
 - The total length of skeletons can now be measured using the dropdown in the tree list tab. Also, the frontend API received the methods `api.tracing.measureTreeLength` and `api.tracing.measureAllTrees`. [#4898](https://github.com/scalableminds/webknossos/pull/4898)
 - Introduced an indeterminate visibility state for groups in the tree tab if not all but only some of the group's children are visible. Before, the visibility of those groups was shown as not visible which made it hard to find the visible trees. [#4897](https://github.com/scalableminds/webknossos/pull/4897)
 - Dataset uploads on a specific Datastore can now be restricted to a single organization. [#4892](https://github.com/scalableminds/webknossos/pull/4892)
+- Added a button to set the color of a tree in the trees tab view. [#4907](https://github.com/scalableminds/webknossos/pull/4907)
 
 ### Changed
 - In the tree tab, all groups but the root group are now collapsed instead of expanded when opening a tracing. [#4897](https://github.com/scalableminds/webknossos/pull/4897)

frontend/javascripts/oxalis/model/actions/skeletontracing_actions.js

@@ -105,6 +105,7 @@ type SetTreeColorIndexAction = {
   colorIndex: number,
 };
 type ShuffleTreeColorAction = { type: "SHUFFLE_TREE_COLOR", treeId?: number };
+type SetTreeColorAction = { type: "SET_TREE_COLOR", treeId: number, color: Vector3 };
 type ShuffleAllTreeColorsAction = { type: "SHUFFLE_ALL_TREE_COLORS", treeId?: number };
 type CreateCommentAction = {
   type: "CREATE_COMMENT",
@@ -148,6 +149,7 @@ export type SkeletonTracingAction =
   | MergeTreesAction
   | SetTreeNameAction
   | SelectNextTreeAction
+  | SetTreeColorAction
   | ShuffleTreeColorAction
   | ShuffleAllTreeColorsAction
   | SetTreeColorIndexAction
@@ -196,6 +198,7 @@ export const SkeletonTracingSaveRelevantActions = [
   "TOGGLE_TREE_GROUP",
   "TOGGLE_ALL_TREES",
   "TOGGLE_INACTIVE_TREES",
+  "SET_TREE_COLOR_INDEX",
   // Composited actions, only dispatched using `batchActions`
   "DELETE_GROUP_AND_TREES",
 ];
@@ -418,6 +421,12 @@ export const shuffleTreeColorAction = (treeId: number): ShuffleTreeColorAction =
   treeId,
 });
 
+export const setTreeColorAction = (treeId: number, color: Vector3): SetTreeColorAction => ({
+  type: "SET_TREE_COLOR",
+  treeId,
+  color,
+});
+
 export const shuffleAllTreeColorsAction = (): ShuffleAllTreeColorsAction => ({
   type: "SHUFFLE_ALL_TREE_COLORS",
 });

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

@@ -529,6 +529,18 @@ function SkeletonTracingReducer(state: OxalisState, action: Action): OxalisState
             .getOrElse(state);
         }
 
+        case "SET_TREE_COLOR": {
+          const { color, treeId } = action;
+          return getTree(skeletonTracing, treeId)
+            .map(tree => {
+              tree = { ...tree, color };
+              return update(state, {
+                tracing: { skeleton: { trees: { [tree.treeId]: { $set: tree } } } },
+              });
+            })
+            .getOrElse(state);
+        }
+
         case "SHUFFLE_TREE_COLOR": {
           return getTree(skeletonTracing, action.treeId)
             .chain(tree => shuffleTreeColor(skeletonTracing, tree))

frontend/javascripts/oxalis/view/right-menu/tree_hierarchy_view.js

@@ -9,6 +9,8 @@ import SortableTree from "react-sortable-tree";
 import _ from "lodash";
 import type { Dispatch } from "redux";
 import { type Action } from "oxalis/model/actions/actions";
+import type { Vector3 } from "oxalis/constants";
+import * as Utils from "libs/utils";
 import {
   MISSING_GROUP_ID,
   TYPE_GROUP,
@@ -28,6 +30,7 @@ import { getMaximumGroupId } from "oxalis/model/reducers/skeletontracing_reducer
 import {
   setActiveTreeAction,
   setActiveGroupAction,
+  setTreeColorAction,
   toggleTreeAction,
   toggleTreeGroupAction,
   toggleAllTreesAction,
@@ -56,6 +59,7 @@ type Props = {
   onSetActiveGroup: number => void,
   onToggleTree: number => void,
   onToggleAllTrees: () => void,
+  onSetTreeColor: (number, Vector3) => void,
   onToggleTreeGroup: number => void,
   onUpdateTreeGroups: (Array<TreeGroup>) => void,
   onBatchActions: (Array<Action>, string) => void,
@@ -362,6 +366,34 @@ class TreeHierarchyView extends React.PureComponent<Props, State> {
             style={{ marginLeft: 9, display: "inline" }}
             onClick={this.onSelectTree}
           >{`(${tree.nodes.size()}) ${tree.name}`}</div>
+          <div style={{ position: "relative", display: "inline" }}>
+            <i
+              className="fas fa-eye-dropper fa-sm"
+              style={{
+                position: "absolute",
+                top: "50%",
+                left: "50%",
+                transform: "translate(-50%, -50%)",
+                cursor: "pointer",
+              }}
+            />
+            <input
+              type="color"
+              style={{
+                position: "absolute",
+                left: 0,
+                top: 0,
+                width: 14,
+                opacity: 0,
+                cursor: "pointer",
+              }}
+              onChange={event => {
+                let color = Utils.hexToRgb(event.target.value);
+                color = Utils.map3(component => component / 255, color);
+                this.props.onSetTreeColor(tree.treeId, color);
+              }}
+            />
+          </div>
         </div>
       );
       nodeProps.className = "tree-type";
@@ -438,6 +470,9 @@ const mapDispatchToProps = (dispatch: Dispatch<*>) => ({
   onSetActiveGroup(groupId) {
     dispatch(setActiveGroupAction(groupId));
   },
+  onSetTreeColor(treeId, color) {
+    dispatch(setTreeColorAction(treeId, color));
+  },
   onToggleTree(treeId) {
     dispatch(toggleTreeAction(treeId));
   },