Make markdown modal faster (e.g., editing of annotation description)

CHANGELOG.unreleased.md

@@ -24,6 +24,7 @@ For upgrade instructions, please check the [migration guide](MIGRATIONS.released
 - When proofreading segments and merging two segments, the segment item that doesn't exist anymore after the merge is automatically removed. [#7729](https://github.com/scalableminds/webknossos/pull/7729)
 - Changed some internal APIs to use spelling dataset instead of dataSet. This requires all connected datastores to be the latest version. [#7690](https://github.com/scalableminds/webknossos/pull/7690)
 - Toasts are shown until WEBKNOSSOS is running in the active browser tab again. Also, the content of most toasts that show errors or warnings is printed to the browser's console. [#7741](https://github.com/scalableminds/webknossos/pull/7741)
+- Improved UI speed when editing the description of an annotation. [#7769](https://github.com/scalableminds/webknossos/pull/7769)
 
 ### Fixed
 - Fixed that the Command modifier on MacOS wasn't treated correctly for some shortcuts. Also, instead of the Alt key, the ⌥ key is shown as a hint in the status bar on MacOS. [#7659](https://github.com/scalableminds/webknossos/pull/7659)

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

@@ -59,12 +59,20 @@ class EditableTextLabel extends React.PureComponent<EditableTextLabelProp, State
     }
   }
 
-  handleInputChange = (event: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>) => {
+  handleInputChangeFromEvent = (
+    event: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>,
+  ) => {
     this.setState({
       value: event.target.value,
     });
   };
 
+  handleInputChange = (newValue: string) => {
+    this.setState({
+      value: newValue,
+    });
+  };
+
   handleOnChange = () => {
     const validateAndUpdateValue = () => {
       if (this.validateFields()) {
@@ -120,7 +128,7 @@ class EditableTextLabel extends React.PureComponent<EditableTextLabelProp, State
     const margin = this.props.margin != null ? this.props.margin : "0 10px";
     const inputComponentProps: InputProps = {
       value: this.state.value,
-      onChange: this.handleInputChange,
+      onChange: this.handleInputChangeFromEvent,
       onPressEnter: this.handleOnChange,
       style: {
         width: this.props.width != null ? this.props.width : "60%",

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

@@ -34,19 +34,32 @@ export function MarkdownModal({
   isOpen?: boolean;
   placeholder?: string;
   onOk: () => void;
-  onChange: React.ChangeEventHandler<HTMLTextAreaElement>;
+  onChange: (newValue: string) => void;
 }) {
   const placeholderText = placeholder ? placeholder : `Add ${label}`;
+  const [currentValue, setCurrentValue] = React.useState(source);
+
+  const onConfirm = () => {
+    onChange(currentValue);
+    onOk();
+  };
+
+  const setCurrentValueFromEvent = (
+    event: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>,
+  ) => {
+    setCurrentValue(event.target.value);
+  };
+
   return (
     <Modal
       key="comment-markdown-modal"
       title={<span>{`Edit ${label}`}</span>}
       open={isOpen}
       onCancel={onOk}
-      closable={false}
+      closable={true}
       width={700}
       footer={[
-        <Button key="back" onClick={onOk}>
+        <Button key="back" onClick={onConfirm}>
           Ok
         </Button>,
       ]}
@@ -71,9 +84,9 @@ export function MarkdownModal({
       <Row gutter={16}>
         <Col span={12}>
           <Input.TextArea
-            defaultValue={source}
+            defaultValue={currentValue}
             placeholder={placeholderText}
-            onChange={onChange}
+            onChange={setCurrentValueFromEvent}
             rows={5}
             autoSize={{
               minRows: 5,
@@ -88,7 +101,7 @@ export function MarkdownModal({
             overflowY: "auto",
           }}
         >
-          <MarkdownWrapper source={source} />
+          <MarkdownWrapper source={currentValue} />
         </Col>
       </Row>
     </Modal>

frontend/javascripts/oxalis/view/right-border-tabs/comment_tab/comment_tab_view.tsx

@@ -240,13 +240,7 @@ class CommentTabView extends React.Component<PropsWithSkeleton, CommentTabState>
     this.nextComment(false);
   };
 
-  handleChangeInput = (
-    evt: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
-    insertLineBreaks: boolean = false,
-  ) => {
-    // @ts-ignore
-    const commentText = evt.target.value;
-
+  handleChangeInput = (commentText: string, insertLineBreaks: boolean = false) => {
     if (commentText) {
       this.props.createComment(insertLineBreaks ? commentText.replace(/\\n/g, "\n") : commentText);
     } else {
@@ -466,7 +460,7 @@ class CommentTabView extends React.Component<PropsWithSkeleton, CommentTabState>
                         : messages["tracing.read_only_mode_notification"]
                     }
                     onChange={(evt: React.ChangeEvent<HTMLInputElement>) =>
-                      this.handleChangeInput(evt, true)
+                      this.handleChangeInput(evt.target.value, true)
                     }
                     onPressEnter={(evt: React.KeyboardEvent<HTMLInputElement>) =>
                       (evt.target as HTMLElement).blur()

frontend/javascripts/oxalis/view/right-border-tabs/dataset_info_tab_view.tsx

@@ -3,7 +3,7 @@ import { Tooltip, Typography, Tag } from "antd";
 import { SettingOutlined, InfoCircleOutlined, EditOutlined } from "@ant-design/icons";
 import { connect } from "react-redux";
 import Markdown from "react-remarkable";
-import React, { CSSProperties, ChangeEvent } from "react";
+import React, { CSSProperties } from "react";
 import { Link } from "react-router-dom";
 import type { APIDataset, APIUser } from "types/api_flow_types";
 import { ControlModeEnum } from "oxalis/constants";
@@ -278,10 +278,6 @@ export class DatasetInfoTabView extends React.PureComponent<Props, State> {
     this.props.setAnnotationName(newName);
   };
 
-  setAnnotationDescription = (evt: ChangeEvent<HTMLTextAreaElement>) => {
-    this.props.setAnnotationDescription(evt.target.value);
-  };
-
   componentDidMount(): void {
     this.fetchData();
   }
@@ -500,7 +496,7 @@ export class DatasetInfoTabView extends React.PureComponent<Props, State> {
             source={this.props.annotation.description}
             isOpen={this.state.isMarkdownModalOpen}
             onOk={() => this.setState({ isMarkdownModalOpen: false })}
-            onChange={this.setAnnotationDescription}
+            onChange={this.props.setAnnotationDescription}
           />
         </div>
       );