Add button for collapsing all comments (#3215)

* add button for collapsing all comments; add linking-description to markdown modal

* update changelog

* fix linting

* fix typos

CHANGELOG.md

@@ -20,6 +20,7 @@ For upgrade instructions, please check the [migration guide](MIGRATIONS.md).
 - Tree groups can now be activated. This allows to rename a tree group analogous to renaming a tree. Also, toggling the visibility of a tree group can now be done by using the shortcuts "1" and "2". [#3066](https://github.com/scalableminds/webknossos/pull/3066)
 - Added the possibility to upload multiple NML files during task creation, even if they are not in a zip archive
 - Added the possibility to supply a dedicated "sorting date" for datasets to change the sorting order in the gallery view, by default the creation date is used [#3124](https://github.com/scalableminds/webknossos/pull/3124)
+- Added a button to collapse all comments. [#3215](https://github.com/scalableminds/webknossos/pull/3215)
 - The datasets in the dashboard are now sorted according to their user-specific usage. As a result, relevant datasets should appear at the top of the list. [#3206](https://github.com/scalableminds/webknossos/pull/3206)
 
 ### Changed

app/assets/javascripts/oxalis/view/components/markdown_modal.js

@@ -1,6 +1,6 @@
 // @flow
 import * as React from "react";
-import { Modal, Button, Row, Col } from "antd";
+import { Alert, Modal, Button, Row, Col } from "antd";
 import Markdown from "react-remarkable";
 import InputComponent from "oxalis/view/components/input_component";
 
@@ -30,15 +30,7 @@ export function MarkdownModal({
   return (
     <Modal
       key="comment-markdown-modal"
-      title={
-        <span>
-          {`Edit ${label}`} (
-          <a href="https://markdown-it.github.io/" target="_blank" rel="noopener noreferrer">
-            Markdown enabled
-          </a>
-          )
-        </span>
-      }
+      title={<span>{`Edit ${label}`}</span>}
       visible={visible}
       onCancel={onOk}
       closable={false}
@@ -49,6 +41,21 @@ export function MarkdownModal({
         </Button>,
       ]}
     >
+      <Alert
+        message={
+          <React.Fragment>
+            In addition to using{" "}
+            <a href="https://markdown-it.github.io/" target="_blank" rel="noopener noreferrer">
+              Markdown
+            </a>{" "}
+            for formatting, you can also create links to nodes and positions by using hashtags. For
+            example, <code>#123</code> links to node 123, while <code>#(1,2,3)</code> points to the
+            position 1,2,3.
+          </React.Fragment>
+        }
+        type="info"
+        style={{ marginBottom: 16 }}
+      />
       <Row gutter={16}>
         <Col span={12}>
           <InputComponent

app/assets/javascripts/oxalis/view/right-menu/comment_tab/comment_tab_view.js

@@ -209,6 +209,19 @@ class CommentTabView extends React.PureComponent<Props, CommentTabStateType> {
     }));
   };
 
+  toggleExpandForAllTrees = () => {
+    this.setState(prevState => {
+      const shouldBeCollapsed = !_.values(prevState.collapsedTreeIds).some(bool => bool);
+
+      const collapsedTreeIds = shouldBeCollapsed
+        ? _.mapValues(this.props.skeletonTracing.trees, () => true)
+        : {};
+      return {
+        collapsedTreeIds,
+      };
+    });
+  };
+
   toggleExpand = (treeId: number) => {
     this.setState(prevState => ({
       collapsedTreeIds: update(prevState.collapsedTreeIds, { $toggle: [treeId] }),
@@ -342,38 +355,43 @@ class CommentTabView extends React.PureComponent<Props, CommentTabStateType> {
             searchKey="content"
             maxSearchResults={10}
           >
-            <Tooltip title="Open the search via CTRL + Shift + F">
-              <ButtonComponent>
-                <Icon type="search" />
-              </ButtonComponent>
-            </Tooltip>
+            <ButtonComponent icon="search" title="Open the search via CTRL + Shift + F" />
           </SearchPopover>
-          <ButtonComponent onClick={this.previousComment}>
-            <i className="fa fa-arrow-left" />
-          </ButtonComponent>
+          <ButtonComponent
+            title="Jump to previous comment"
+            onClick={this.previousComment}
+            icon="arrow-left"
+          />
           <InputComponent
             value={activeCommentContent}
             disabled={activeNodeMaybe.isNothing}
             onChange={evt => this.handleChangeInput(evt, true)}
             onPressEnter={evt => evt.target.blur()}
             placeholder="Add comment"
-            style={{ width: "60%" }}
+            style={{ width: "50%" }}
           />
           <ButtonComponent
             onClick={() => this.setMarkdownModalVisibility(true)}
             disabled={activeNodeMaybe.isNothing}
             type={isMultilineComment ? "primary" : "button"}
-          >
-            <Icon type="edit" />Markdown
-          </ButtonComponent>
-          <ButtonComponent onClick={this.nextComment}>
-            <i className="fa fa-arrow-right" />
-          </ButtonComponent>
+            icon="edit"
+            title="Open dialog to edit comment in multi-line mode"
+          />
+          <ButtonComponent
+            title="Jump to next comment"
+            onClick={this.nextComment}
+            icon="arrow-right"
+          />
           <Dropdown overlay={this.renderSortDropdown()}>
             <ButtonComponent title="Sort" onClick={this.toggleSortingDirection}>
               {this.renderSortIcon()}
             </ButtonComponent>
           </Dropdown>
+          <ButtonComponent
+            onClick={this.toggleExpandForAllTrees}
+            icon="shrink"
+            title="Collapse or expand groups"
+          />
         </InputGroup>
         <div style={{ flex: "1 1 auto", marginTop: 20 }}>
           <AutoSizer>