feat: extend comment box field in analysis tabs for other elements #2241

Squashed commit of the following: commit acafbea Author: adambasha0 <[email protected]> Date: Tue Nov 19 12:52:55 2024 +0000 refactor: add unit tests for AnalysisCommentBoxComponent commit 45e0515 Author: adambasha0 <[email protected]> Date: Fri Nov 15 14:46:57 2024 +0000 refactor: comment box and comment button components for analysis tabs of reactions commit 12df07d Author: adambasha0 <[email protected]> Date: Fri Nov 15 12:28:53 2024 +0000 feat: add comment box and comment button in analysis tabs for elements
ComPlat · Feb 3, 2025 · fc187c5 · fc187c5
1 parent 4c42aea
commit fc187c5
Show file tree

Hide file tree

Showing 8 changed files with 264 additions and 78 deletions.
diff --git a/app/javascript/src/apps/mydb/elements/details/cellLines/analysesTab/AnalysesContainer.js b/app/javascript/src/apps/mydb/elements/details/cellLines/analysesTab/AnalysesContainer.js
@@ -1,11 +1,17 @@
 import React, { Component } from 'react';
 import { StoreContext } from 'src/stores/mobx/RootStore';
 import { observer } from 'mobx-react';
-import { Accordion, Button, ListGroup } from 'react-bootstrap';
+import {
+  Accordion,
+  Button,
+  ListGroup,
+  ButtonToolbar
+} from 'react-bootstrap';
 import ElementStore from 'src/stores/alt/stores/ElementStore';
 import OrderModeRow from 'src/apps/mydb/elements/details/cellLines/analysesTab/OrderModeRow';
 import EditModeRow from 'src/apps/mydb/elements/details/cellLines/analysesTab/EditModeRow';
 import PropTypes from 'prop-types';
+import { CommentButton, CommentBox } from 'src/components/common/AnalysisCommentBoxComponent';
 
 class AnalysesContainer extends Component {
   // eslint-disable-next-line react/static-property-placement
@@ -14,7 +20,8 @@ class AnalysesContainer extends Component {
   constructor() {
     super();
     this.state = {
-      mode: 'edit'
+      mode: 'edit',
+      commentBoxVisible: false,
     };
   }
 
@@ -25,18 +32,18 @@ class AnalysesContainer extends Component {
     const { currentElement } = ElementStore.getState();
     currentElement.container.children[0].children.push(newContainer);
     this.handleChange(true);
-  }
+  };
 
   handleStartDrag = (container) => {
     this.setState({ draggingContainer: container.id });
-  }
+  };
 
   handleEndDrag = () => {
     this.setState({
       draggingContainer: '',
       lastHoveredContainer: ''
     });
-  }
+  };
 
   handleModeToggle = () => {
     const { mode } = this.state;
@@ -45,7 +52,7 @@ class AnalysesContainer extends Component {
     } else {
       this.setState({ mode: 'edit' });
     }
-  }
+  };
 
   handleHoverOver = (containerId) => {
     const { lastHoveredContainer } = this.state;
@@ -55,7 +62,7 @@ class AnalysesContainer extends Component {
     }
 
     this.setState({ lastHoveredContainer: containerId });
-  }
+  };
 
   handleChange = (changed = false) => {
     const { item } = this.props;
@@ -64,7 +71,13 @@ class AnalysesContainer extends Component {
       cellLineDetailsStore.cellLines(item.id).setChanged(true);
     }
     this.forceUpdate();
-  }
+  };
+
+  handleCommentTextChange = (e) => {
+    const { currentElement } = ElementStore.getState();
+    currentElement.container.description = e.target.value;
+    this.handleChange(true);
+  };
 
   renderAddButton = () => {
     const { readOnly } = this.props;
@@ -79,7 +92,11 @@ class AnalysesContainer extends Component {
         Add analysis
       </Button>
     );
-  }
+  };
+
+  toggleCommentBox = () => {
+    this.setState((prevState) => ({ commentBoxVisible: !prevState.commentBoxVisible }));
+  };
 
   renderModeButton = () => {
     const { mode } = this.state;
@@ -168,15 +185,25 @@ class AnalysesContainer extends Component {
     return (mode === 'edit')
       ? this.renderEditModeContainer()
       : this.renderOrderModeContainer();
-  }
+  };
 
   render() {
+    const { commentBoxVisible } = this.state;
+    const { currentElement } = ElementStore.getState();
     return (
       <div className="analysis-container">
         <div className="d-flex justify-content-between mb-3">
           {this.renderModeButton()}
-          {this.renderAddButton()}
+          <ButtonToolbar className="gap-2">
+            <CommentButton toggleCommentBox={this.toggleCommentBox} size="xsm" disable={false} />
+            {this.renderAddButton()}
+          </ButtonToolbar>
         </div>
+        <CommentBox
+          isVisible={commentBoxVisible}
+          value={currentElement.container.description}
+          handleCommentTextChange={this.handleCommentTextChange}
+        />
         {this.renderContainerPanel()}
       </div>
     );

diff --git a/...ascript/src/apps/mydb/elements/details/reactions/analysesTab/ReactionDetailsContainers.js b/...ascript/src/apps/mydb/elements/details/reactions/analysesTab/ReactionDetailsContainers.js
@@ -2,7 +2,12 @@
 /* eslint-disable react/require-default-props */
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { Button, Accordion, Card } from 'react-bootstrap';
+import {
+  Button,
+  Accordion,
+  Card,
+  ButtonToolbar,
+} from 'react-bootstrap';
 import Container from 'src/models/Container';
 import ContainerComponent from 'src/components/container/ContainerComponent';
 import PrintCodeButton from 'src/components/common/PrintCodeButton';
@@ -25,6 +30,7 @@ import SpectraEditorButton from 'src/components/common/SpectraEditorButton';
 import { AnalysisVariationLink } from 'src/apps/mydb/elements/details/reactions/variationsTab/ReactionVariationsAnalyses';
 import { truncateText } from 'src/utilities/textHelper';
 import AccordionHeaderWithButtons from 'src/components/common/AccordionHeaderWithButtons';
+import { CommentButton, CommentBox } from 'src/components/common/AnalysisCommentBoxComponent';
 
 const nmrMsg = (reaction, container) => {
   const ols = container.extended_metadata?.kind?.split('|')[0].trim();
@@ -63,7 +69,8 @@ export default class ReactionDetailsContainers extends Component {
     super(props);
 
     this.state = {
-      activeContainer: UIStore.getState().reaction.activeAnalysis
+      activeContainer: UIStore.getState().reaction.activeAnalysis,
+      commentBoxVisible: false,
     };
     this.containerRefs = {};
 
@@ -234,8 +241,18 @@ export default class ReactionDetailsContainers extends Component {
     return null;
   }
 
+  handleCommentTextChange = (e) => {
+    const { reaction } = this.props;
+    reaction.container.description = e.target.value;
+    this.handleChange(reaction.container);
+  };
+
+  toggleCommentBox = () => {
+    this.setState((prevState) => ({ commentBoxVisible: !prevState.commentBoxVisible }));
+  };
+
   render() {
-    const { activeContainer } = this.state;
+    const { activeContainer, commentBoxVisible } = this.state;
     const { reaction, readOnly } = this.props;
 
     const containerHeader = (container) => {
@@ -340,8 +357,18 @@ export default class ReactionDetailsContainers extends Component {
         return (
           <div>
             <div className="d-flex justify-content-end align-items-center mb-3">
-              {this.addButton()}
+              <ButtonToolbar className="gap-1">
+                <div className="mt-2">
+                  <CommentButton toggleCommentBox={this.toggleCommentBox} size="sm" />
+                </div>
+                {this.addButton()}
+              </ButtonToolbar>
             </div>
+            <CommentBox
+              isVisible={commentBoxVisible}
+              value={reaction.container.description}
+              handleCommentTextChange={this.handleCommentTextChange}
+            />
             <Accordion
               className='border rounded overflow-hidden'
               onSelect={this.handleAccordionOpen}

diff --git a/...src/apps/mydb/elements/details/researchPlans/analysesTab/ResearchPlanDetailsContainers.js b/...src/apps/mydb/elements/details/researchPlans/analysesTab/ResearchPlanDetailsContainers.js
@@ -1,6 +1,11 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { Button, Accordion, Card } from 'react-bootstrap';
+import {
+  Button,
+  Accordion,
+  Card,
+  ButtonToolbar
+} from 'react-bootstrap';
 import Container from 'src/models/Container';
 import ContainerComponent from 'src/components/container/ContainerComponent';
 import QuillViewer from 'src/components/QuillViewer';
@@ -18,12 +23,14 @@ import TextTemplateActions from 'src/stores/alt/actions/TextTemplateActions';
 import SpectraEditorButton from 'src/components/common/SpectraEditorButton';
 import { truncateText } from 'src/utilities/textHelper';
 import AccordionHeaderWithButtons from 'src/components/common/AccordionHeaderWithButtons';
+import { CommentButton, CommentBox } from 'src/components/common/AnalysisCommentBoxComponent';
 
 export default class ResearchPlanDetailsContainers extends Component {
   constructor(props) {
     super(props);
     this.state = {
-      activeContainer: 0
+      activeContainer: 0,
+      commentBoxVisible: false,
     };
 
     this.handleChange = this.handleChange.bind(this);
@@ -162,9 +169,19 @@ export default class ResearchPlanDetailsContainers extends Component {
     return null;
   }
 
+  handleCommentTextChange = (e) => {
+    const { researchPlan } = this.props;
+    researchPlan.container.description = e.target.value;
+    this.handleChange(researchPlan);
+  };
+
+  toggleCommentBox = () => {
+    this.setState((prevState) => ({ commentBoxVisible: !prevState.commentBoxVisible }));
+  };
+
   render() {
     const { researchPlan, readOnly } = this.props;
-    const { activeContainer } = this.state;
+    const { activeContainer, commentBoxVisible } = this.state;
 
     const containerHeader = (container) => {
       let kind = container.extended_metadata.kind || '';
@@ -267,8 +284,18 @@ export default class ResearchPlanDetailsContainers extends Component {
         return (
           <div>
             <div className="my-2 mx-3 d-flex justify-content-end">
-              {this.addButton()}
+              <ButtonToolbar className="gap-1">
+                <div className="mt-2">
+                  <CommentButton toggleCommentBox={this.toggleCommentBox} size="sm" />
+                </div>
+                {this.addButton()}
+              </ButtonToolbar>
             </div>
+            <CommentBox
+              isVisible={commentBoxVisible}
+              value={researchPlan.container.description}
+              handleCommentTextChange={this.handleCommentTextChange}
+            />
             <Accordion
               className="border rounded overflow-hidden"
               onSelect={this.handleAccordionOpen}

diff --git a/...vascript/src/apps/mydb/elements/details/samples/analysesTab/SampleDetailsContainersCom.js b/...vascript/src/apps/mydb/elements/details/samples/analysesTab/SampleDetailsContainersCom.js
@@ -1,15 +1,14 @@
 /* eslint-disable react/prop-types */
-import React, { useState, useEffect } from 'react';
-import {
-  Button, Form, OverlayTrigger, Tooltip, ButtonToolbar, Accordion, Card
-} from 'react-bootstrap';
+import React, { useState } from 'react';
+import { ButtonToolbar, Accordion, Card } from 'react-bootstrap';
 import ContainerComponent from 'src/components/container/ContainerComponent';
 import ContainerRow from 'src/apps/mydb/elements/details/samples/analysesTab/SampleDetailsContainersDnd';
 import {
   AnalysesHeader,
   AnalysisModeToggle,
 } from 'src/apps/mydb/elements/details/samples/analysesTab/SampleDetailsContainersAux';
 import AccordionHeaderWithButtons from 'src/components/common/AccordionHeaderWithButtons';
+import { CommentButton, CommentBox } from 'src/components/common/AnalysisCommentBoxComponent';
 
 function RndNotAvailable() {
   return (
@@ -46,61 +45,22 @@ function ReactionsDisplay({
 }) {
   const [commentBoxVisible, setCommentBoxVisible] = useState(false);
 
-  useEffect(() => {
-    if (sample.container.description && sample.container.description.trim() !== '') {
-      setCommentBoxVisible(true);
-    } else {
-      setCommentBoxVisible(false);
-    }
-  }, [sample.container.description]);
-
-  const renderCommentButton = (disable = false) => {
-    return (
-      <OverlayTrigger
-        placement="top"
-        overlay={(
-          <Tooltip id="analysisCommentBox">
-            general remarks that relate to all analytical data
-          </Tooltip>
-        )}
-      >
-        <Button
-          size="xsm"
-          variant="primary"
-          onClick={() => {setCommentBoxVisible(!commentBoxVisible)}}
-          disabled={disable}
-        >
-          Add comment
-        </Button>
-      </OverlayTrigger>
-    );
-  }
-
-  const renderCommentBox = (sample, handleCommentTextChange) => {
-    const { container } = sample;
-    return (
-      <Form.Group>
-        <Form.Control
-          as="textarea"
-          style={{ height: '80px' }}
-          value={container.description}
-          onChange={handleCommentTextChange}
-          className="my-3"
-        />
-      </Form.Group>
-    );
-  }
+  const toggleCommentBox = () => setCommentBoxVisible((prev) => !prev);
 
   return (
     <div>
       <div className="d-flex justify-content-between align-items-center mb-3">
         {AnalysisModeToggle(mode, handleToggleMode, isDisabled)}
         <ButtonToolbar className="gap-2">
-          {renderCommentButton()}
+          <CommentButton toggleCommentBox={toggleCommentBox} size="xsm" />
           {addButton()}
         </ButtonToolbar>
       </div>
-      {commentBoxVisible && renderCommentBox(sample, handleCommentTextChange)}
+      <CommentBox
+        isVisible={commentBoxVisible}
+        value={sample.container.description}
+        handleCommentTextChange={handleCommentTextChange}
+      />
       {mode === 'edit' ? (
         <Accordion
           id="editable-analysis-list"