From 468f0054bbf391a2c765386d717a5643be91d2d2 Mon Sep 17 00:00:00 2001
From: Ashwini <amurthy.ashwini@gmail.com>
Date: Tue, 1 Oct 2024 16:06:12 +0000
Subject: [PATCH] extend analyses changes to wellplates and cellLines

---
 .../cellLines/analysesTab/EditModeRow.js      | 51 +++++++-------
 .../analysesTab/ReactionDetailsContainers.js  | 69 ++++++++-----------
 .../ResearchPlanDetailsContainers.js          | 28 +++-----
 .../analysesTab/WellplateDetailsContainers.js | 30 +++++---
 4 files changed, 84 insertions(+), 94 deletions(-)

diff --git a/app/packs/src/apps/mydb/elements/details/cellLines/analysesTab/EditModeRow.js b/app/packs/src/apps/mydb/elements/details/cellLines/analysesTab/EditModeRow.js
index 677bfa5669..59b08b4f1e 100644
--- a/app/packs/src/apps/mydb/elements/details/cellLines/analysesTab/EditModeRow.js
+++ b/app/packs/src/apps/mydb/elements/details/cellLines/analysesTab/EditModeRow.js
@@ -2,31 +2,36 @@ import React from 'react';
 import Header from 'src/apps/mydb/elements/details/cellLines/analysesTab/Header';
 import ContainerComponent from 'src/components/container/ContainerComponent';
 import PropTypes from 'prop-types';
-import { Accordion } from 'react-bootstrap';
+import { Accordion, Card } from 'react-bootstrap';
+import AccordionHeaderWithButtons from 'src/components/common/AccordionHeaderWithButtons';
 
 const EditModeRow = ({ container, handleChange, element, readOnly }) => (
-  <Accordion.Item eventKey={container.id}>
-    <Accordion.Header as="div">
-      <Header
-        isEditHeader
-        element={element}
-        container={container}
-        handleChange={handleChange}
-        readOnly={readOnly}
-      />
-    </Accordion.Header>
-    <Accordion.Body>
-      <ContainerComponent
-        analysisMethodTitle="Type (BioAssay Ontology)"
-        ontologyName="bao"
-        templateType="researchPlan"
-        readOnly={readOnly}
-        disabled={false}
-        container={container}
-        onChange={() => handleChange(container)}
-      />
-    </Accordion.Body>
-  </Accordion.Item>
+  <Card eventKey={container.id}>
+    <Card.Header className="rounded-0 p-0 border-bottom-0">
+      <AccordionHeaderWithButtons as="div">
+        <Header
+          isEditHeader
+          element={element}
+          container={container}
+          handleChange={handleChange}
+          readOnly={readOnly}
+        />
+      </AccordionHeaderWithButtons>
+    </Card.Header>
+    <Accordion.Collapse>
+      <Card.Body>
+        <ContainerComponent
+          analysisMethodTitle="Type (BioAssay Ontology)"
+          ontologyName="bao"
+          templateType="researchPlan"
+          readOnly={readOnly}
+          disabled={false}
+          container={container}
+          onChange={() => handleChange(container)}
+        />
+      </Card.Body>
+    </Accordion.Collapse>
+  </Card>
 );
 
 EditModeRow.propTypes = {
diff --git a/app/packs/src/apps/mydb/elements/details/reactions/analysesTab/ReactionDetailsContainers.js b/app/packs/src/apps/mydb/elements/details/reactions/analysesTab/ReactionDetailsContainers.js
index b6abd01cb8..d4a141822f 100644
--- a/app/packs/src/apps/mydb/elements/details/reactions/analysesTab/ReactionDetailsContainers.js
+++ b/app/packs/src/apps/mydb/elements/details/reactions/analysesTab/ReactionDetailsContainers.js
@@ -188,7 +188,7 @@ export default class ReactionDetailsContainers extends Component {
     const hasNMRium = isNMRKind(container, chmos) && hasNmriumWrapper;
 
     return (
-      <div className="d-flex justify-content-between align-items-center mb-0">
+      <div className="d-flex justify-content-between align-items-center mb-0 gap-1">
         <AnalysisVariationLink
           reaction={reaction}
           analysisID={container.id}
@@ -327,15 +327,15 @@ export default class ReactionDetailsContainers extends Component {
       const titleStatus = status ? (' - Status: ' + container.extended_metadata.status) : '';
 
       return (
-        <div className="d-flex w-100 mb-0 bg-gray-200 p-4 align-items-center">
+        <div className="d-flex w-100 mb-0 align-items-center">
           <strike className="flex-grow-1">
             {container.name}
             {titleKind}
             {titleStatus}
           </strike>
           <Button
-            className="ml-auto"
-            size="sm"
+            className="ms-auto"
+            size="xsm"
             variant="danger"
             onClick={() => this.handleUndo(container)}
           >
@@ -351,8 +351,6 @@ export default class ReactionDetailsContainers extends Component {
       ));
 
       if (analyses_container.length === 1 && analyses_container[0].children.length > 0) {
-
-
         return (
             <div>
               <div className="d-flex justify-content-end align-items-center mb-3">
@@ -365,19 +363,6 @@ export default class ReactionDetailsContainers extends Component {
               >
                 {analyses_container[0].children.map((container, key) => {
                   const isFirstTab = key === 0;
-                  if (container.is_deleted) {
-                    return (
-                      <Accordion.Item
-                        eventKey={key}
-                        key={`reaction_container_deleted_${container.id}`}
-                        className='border rounded overflow-hidden'
-                      >
-                        <Accordion.Header>
-                          {containerHeaderDeleted(container)}
-                        </Accordion.Header>
-                      </Accordion.Item>
-                    );
-                  }
                   return (
                     <Card
                       ref={(element) => { this.containerRefs[key] = element; }}
@@ -386,31 +371,33 @@ export default class ReactionDetailsContainers extends Component {
                     >
                       <Card.Header className="rounded-0 p-0 border-bottom-0">
                         <AccordionHeaderWithButtons eventKey={key}>
-                          {containerHeader(container)}
+                          {container.is_deleted ? containerHeaderDeleted(container) : containerHeader(container)}
                         </AccordionHeaderWithButtons>
                       </Card.Header>
 
-                      <Accordion.Collapse eventKey={key}>
-                        <Card.Body>
-                          <ContainerComponent
-                            disabled={readOnly}
-                            readOnly={readOnly}
-                            templateType="reaction"
-                            container={container}
-                            onChange={this.handleChange.bind(this, container)}
-                          />
-                          <ViewSpectra
-                            sample={reaction}
-                            handleSampleChanged={this.handleSpChange}
-                            handleSubmit={this.props.handleSubmit}
-                          />
-                          <NMRiumDisplayer
-                            sample={reaction}
-                            handleSampleChanged={this.handleSpChange}
-                            handleSubmit={this.props.handleSubmit}
-                          />
-                        </Card.Body>
-                      </Accordion.Collapse>
+                      {!container.is_deleted &&
+                        <Accordion.Collapse eventKey={key}>
+                          <Card.Body>
+                            <ContainerComponent
+                              disabled={readOnly}
+                              readOnly={readOnly}
+                              templateType="reaction"
+                              container={container}
+                              onChange={this.handleChange.bind(this, container)}
+                            />
+                            <ViewSpectra
+                              sample={reaction}
+                              handleSampleChanged={this.handleSpChange}
+                              handleSubmit={this.props.handleSubmit}
+                            />
+                            <NMRiumDisplayer
+                              sample={reaction}
+                              handleSampleChanged={this.handleSpChange}
+                              handleSubmit={this.props.handleSubmit}
+                            />
+                          </Card.Body>
+                        </Accordion.Collapse>
+                      }
                     </Card>
                   );
                 })}
diff --git a/app/packs/src/apps/mydb/elements/details/researchPlans/analysesTab/ResearchPlanDetailsContainers.js b/app/packs/src/apps/mydb/elements/details/researchPlans/analysesTab/ResearchPlanDetailsContainers.js
index 7929632c59..e6af05a32f 100644
--- a/app/packs/src/apps/mydb/elements/details/researchPlans/analysesTab/ResearchPlanDetailsContainers.js
+++ b/app/packs/src/apps/mydb/elements/details/researchPlans/analysesTab/ResearchPlanDetailsContainers.js
@@ -120,7 +120,7 @@ export default class ResearchPlanDetailsContainers extends Component {
     const hasNMRium = isNMRKind(container, chmos) && hasNmriumWrapper;
 
     return (
-      <div className="d-flex justify-content-between align-items-center mb-0">
+      <div className="d-flex justify-content-between align-items-center mb-0 gap-1">
         <SpectraEditorButton
           element={researchPlan}
           hasJcamp={hasJcamp}
@@ -240,7 +240,7 @@ export default class ResearchPlanDetailsContainers extends Component {
       const titleStatus = status ? (` - Status: ${container.extended_metadata.status}`) : '';
 
       return (
-        <div className="d-flex w-100 mb-0 bg-gray-200 p-4 align-items-center">
+        <div className="d-flex w-100 mb-0 align-items-center">
           <span className="flex-grow-1 text-decoration-line-through">
             {container.name}
             {titleKind}
@@ -248,7 +248,7 @@ export default class ResearchPlanDetailsContainers extends Component {
           </span>
           <Button
             className="ml-auto"
-            size="sm"
+            size="xsm"
             variant="danger"
             onClick={() => this.handleUndo(container)}
           >
@@ -266,7 +266,7 @@ export default class ResearchPlanDetailsContainers extends Component {
       if (analysesContainer.length === 1 && analysesContainer[0].children.length > 0) {
         return (
           <div>
-            <div className="mb-2 me-1 d-flex justify-content-end">
+            <div className="my-2 mx-3 d-flex justify-content-end">
               {this.addButton()}
             </div>
             <Accordion
@@ -275,18 +275,6 @@ export default class ResearchPlanDetailsContainers extends Component {
               activeKey={activeContainer}
             >
               {analysesContainer[0].children.map((container, key) => {
-                if (container.is_deleted) {
-                  return (
-                    <Accordion.Item
-                      eventKey={key}
-                      key={`research_plan_container_deleted_${container.id}`}
-                      className="border rounded overflow-hidden"
-                    >
-                      <Accordion.Header>{containerHeaderDeleted(container)}</Accordion.Header>
-                    </Accordion.Item>
-                  );
-                }
-
                 return (
                   <Card
                     eventKey={key}
@@ -294,10 +282,11 @@ export default class ResearchPlanDetailsContainers extends Component {
                   >
                     <Card.Header className="rounded-0 p-0 border-bottom-0">
                       <AccordionHeaderWithButtons eventKey={key}>
-                        {containerHeader(container)}
+                        {container.is_deleted ? containerHeaderDeleted(container) : containerHeader(container)}
                       </AccordionHeaderWithButtons>
                     </Card.Header>
 
+                    {!container.is_deleted &&
                     <Accordion.Collapse eventKey={key}>
                       <Card.Body>
                       <ContainerComponent
@@ -318,7 +307,8 @@ export default class ResearchPlanDetailsContainers extends Component {
                         handleSubmit={this.props.handleSubmit}
                       />
                       </Card.Body>
-                    </Accordion.Collapse>
+                      </Accordion.Collapse>
+                    }
                     </Card>
                 );
               })}
@@ -328,7 +318,7 @@ export default class ResearchPlanDetailsContainers extends Component {
       }
 
       return (
-        <div className="d-flex align-items-center justify-content-between mb-2 mt-4 mx-3">
+        <div className="d-flex align-items-center justify-content-between my-2 mx-3">
           <span className="ms-3"> There are currently no Analyses. </span>
           <div>
             {this.addButton()}
diff --git a/app/packs/src/apps/mydb/elements/details/wellplates/analysesTab/WellplateDetailsContainers.js b/app/packs/src/apps/mydb/elements/details/wellplates/analysesTab/WellplateDetailsContainers.js
index 4d9d1e7515..c3f5e490dc 100644
--- a/app/packs/src/apps/mydb/elements/details/wellplates/analysesTab/WellplateDetailsContainers.js
+++ b/app/packs/src/apps/mydb/elements/details/wellplates/analysesTab/WellplateDetailsContainers.js
@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { Accordion, Button, Card, Row } from 'react-bootstrap';
+import { Accordion, Button, Card } from 'react-bootstrap';
 import Container from 'src/models/Container';
 import ContainerComponent from 'src/components/container/ContainerComponent';
 import PrintCodeButton from 'src/components/common/PrintCodeButton'
@@ -62,7 +62,7 @@ export default class WellplateDetailsContainers extends Component {
     setWellplate(wellplate);
   }
 
-  handleAccordionOpen(key) {
+  handleAccordionOpen = (key) => {
     this.setState({ activeContainer: key });
   }
 
@@ -70,7 +70,12 @@ export default class WellplateDetailsContainers extends Component {
     const { readOnly } = this.props;
     if (!readOnly) {
       return (
-        <Button size="sm" variant="success" onClick={() => this.handleAdd()}>
+        <Button
+          size="sm"
+          variant="success"
+          onClick={() => this.handleAdd()}
+          className="ms-auto"
+        >
           Add analysis
         </Button>
       )
@@ -98,7 +103,7 @@ export default class WellplateDetailsContainers extends Component {
           ident={container.id}
         />
         <Button
-          size="sm"
+          size="xxsm"
           variant="danger"
           disabled={readOnly}
           onClick={() => {
@@ -118,7 +123,7 @@ export default class WellplateDetailsContainers extends Component {
           {(container.extended_metadata['status'] && container.extended_metadata['status'] != '') ? (' - Status: ' + container.extended_metadata['status']) : ''}
         </strike>
         <div className="d-flex justify-content-end gap-2 me-2">
-          <Button size="sm" variant="danger" onClick={() => this.handleUndo(container)}>
+          <Button size="xsm" variant="danger" onClick={() => this.handleUndo(container)}>
             <i className="fa fa-undo"></i>
           </Button>
         </div>
@@ -139,24 +144,27 @@ export default class WellplateDetailsContainers extends Component {
 
     if (analyses_container.length != 1 || analyses_container[0].children.length == 0) {
       return (
-        <div className='d-flex justify-content-between align-items-center'>
+        <div className='d-flex justify-content-between align-items-center my-2 mx-3'>
           <p className='m-0'>
             There are currently no Analyses.
-            {this.addButton()}
           </p>
+          <div>
+            {this.addButton()}
+          </div>
+
         </div>
       )
     }
 
     return (
       <div>
-        <div className="my-3">
+        <div className="d-flex justify-content-end my-2 mx-3">
           {this.addButton()}
         </div>
         <Accordion
           className="border rounded overflow-hidden"
-          // onSelect={this.handleAccordionOpen}
-          // activeKey={activeContainer}
+          onSelect={this.handleAccordionOpen}
+          activeKey={activeContainer}
         >
           {
             analyses_container[0].children.map((container, key) => {
@@ -165,7 +173,7 @@ export default class WellplateDetailsContainers extends Component {
                 <Card
                   eventKey={key}
                   key={`wellplate_container_${key}`}
-                  // className={"rounded-0 border-0" + (isFirstTab ? '' : ' border-top')}
+                  className={"rounded-0 border-0" + (isFirstTab ? '' : ' border-top')}
                 >
                   <Card.Header className="rounded-0 p-0 border-bottom-0">
                     <AccordionHeaderWithButtons eventKey={key}>