Skip to content

Commit

Permalink
feat: show nmrium button
Browse files Browse the repository at this point in the history
  • Loading branch information
Lan Le committed Aug 14, 2023
1 parent 3707d3d commit c1ec128
Show file tree
Hide file tree
Showing 2 changed files with 222 additions and 49 deletions.
127 changes: 87 additions & 40 deletions app/packs/src/apps/mydb/elements/details/reactions/analysesTab/ReactionDetailsContainers.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,11 +15,12 @@ import { hNmrCount, cNmrCount, instrumentText } from 'src/utilities/ElementUtils
import { contentToText } from 'src/utilities/quillFormat';
import { chmoConversions } from 'src/components/OlsComponent';
import { previewContainerImage } from 'src/utilities/imageHelper';
import { JcampIds, BuildSpcInfos } from 'src/utilities/SpectraHelper';
import { JcampIds, BuildSpcInfos, BuildSpcInfosForNMRDisplayer, isNMRKind } from 'src/utilities/SpectraHelper';
import UIStore from 'src/stores/alt/stores/UIStore';
import SpectraActions from 'src/stores/alt/actions/SpectraActions';
import LoadingActions from 'src/stores/alt/actions/LoadingActions';
import ViewSpectra from 'src/apps/mydb/elements/details/ViewSpectra';
import NMRiumDisplayer from 'src/components/nmriumWrapper/NMRiumDisplayer';

import TextTemplateActions from 'src/stores/alt/actions/TextTemplateActions';

Expand All @@ -42,48 +43,74 @@ const nmrMsg = (reaction, container) => {
const SpectraEditorBtn = ({
element, spcInfo, hasJcamp, hasChemSpectra,
toggleSpectraModal, confirmRegenerate,
toggleNMRDisplayerModal, hasNMRium,
}) => (
<OverlayTrigger
placement="bottom"
delayShow={500}
overlay={<Tooltip id="spectra">Spectra Editor {!spcInfo ? ': Reprocess' : ''}</Tooltip>}
>{spcInfo ? (
<ButtonGroup className="button-right">
<SplitButton
id="spectra-editor-split-button"
pullRight
bsStyle="info"
<span>
<OverlayTrigger
placement="bottom"
delayShow={500}
overlay={<Tooltip id="spectra">Spectra Editor {!spcInfo ? ': Reprocess' : ''}</Tooltip>}
>{spcInfo ? (
<ButtonGroup className="button-right">
<SplitButton
id="spectra-editor-split-button"
pullRight
bsStyle="info"
bsSize="xsmall"
title={<i className="fa fa-area-chart" />}
onToggle={(open, event) => { if (event) { event.stopPropagation(); } }}
onClick={toggleSpectraModal}
disabled={!spcInfo || !hasChemSpectra}
>
<MenuItem
id="regenerate-spectra"
key="regenerate-spectra"
onSelect={(eventKey, event) => {
event.stopPropagation();
confirmRegenerate(event);
}}
disabled={!hasJcamp || !element.can_update}
>
<i className="fa fa-refresh" /> Reprocess
</MenuItem>
</SplitButton>
</ButtonGroup>
) : (
<Button
bsStyle="warning"
bsSize="xsmall"
title={<i className="fa fa-area-chart" />}
onToggle={(open, event) => { if (event) { event.stopPropagation(); } }}
onClick={toggleSpectraModal}
disabled={!spcInfo || !hasChemSpectra}
className="button-right"
onClick={confirmRegenerate}
disabled={false}
>
<MenuItem
id="regenerate-spectra"
key="regenerate-spectra"
onSelect={(eventKey, event) => {
event.stopPropagation();
confirmRegenerate(event);
}}
disabled={!hasJcamp || !element.can_update}
<i className="fa fa-area-chart" /><i className="fa fa-refresh " />
</Button>
)}
</OverlayTrigger>
{
hasNMRium ? (
<OverlayTrigger
placement="top"
delayShow={500}
overlay={<Tooltip id="spectra_nmrium_wrapper">Process with NMRium</Tooltip>}
>
<i className="fa fa-refresh" /> Reprocess
</MenuItem>
</SplitButton>
</ButtonGroup>
) : (
<Button
bsStyle="warning"
bsSize="xsmall"
className="button-right"
onClick={confirmRegenerate}
disabled={false}
>
<i className="fa fa-area-chart" /><i className="fa fa-refresh " />
</Button>
)}
</OverlayTrigger>
<ButtonGroup className="button-right">
<Button
id="spectra-editor-split-button"
pullRight
bsStyle="info"
bsSize="xsmall"
onToggle={(open, event) => { if (event) { event.stopPropagation(); } }}
onClick={toggleNMRDisplayerModal}
disabled={!hasJcamp || !element.can_update}
>
<i className="fa fa-bar-chart"/>
</Button>
</ButtonGroup>
</OverlayTrigger>
) : null
}
</span>
);

SpectraEditorBtn.propTypes = {
Expand All @@ -96,13 +123,17 @@ SpectraEditorBtn.propTypes = {
hasChemSpectra: PropTypes.bool,
toggleSpectraModal: PropTypes.func.isRequired,
confirmRegenerate: PropTypes.func.isRequired,
toggleNMRDisplayerModal: PropTypes.func.isRequired,
hasNMRium: PropTypes.bool,
};

SpectraEditorBtn.defaultProps = {
hasJcamp: false,
spcInfo: false,
element: {},
hasChemSpectra: false,
hasEditedJcamp: false,
hasNMRium: false,
};

export default class ReactionDetailsContainers extends Component {
Expand Down Expand Up @@ -192,13 +223,22 @@ export default class ReactionDetailsContainers extends Component {
}
};
const spcInfo = BuildSpcInfos(reaction, container);
const { hasChemSpectra } = UIStore.getState();
const { hasChemSpectra, hasNmriumWrapper } = UIStore.getState();
const toggleSpectraModal = (e) => {
e.stopPropagation();
SpectraActions.ToggleModal();
SpectraActions.LoadSpectra.defer(spcInfo);
};

//process open NMRium
const toggleNMRDisplayerModal = (e) => {
const spcInfosForNMRDisplayer = BuildSpcInfosForNMRDisplayer(reaction, container);
e.stopPropagation();
SpectraActions.ToggleModalNMRDisplayer();
SpectraActions.LoadSpectraForNMRDisplayer.defer(spcInfosForNMRDisplayer); // going to fetch files base on spcInfos
}

const hasNMRium = isNMRKind(container) && hasNmriumWrapper;

return (
<div className="upper-btn">
Expand All @@ -219,6 +259,8 @@ export default class ReactionDetailsContainers extends Component {
hasChemSpectra={hasChemSpectra}
toggleSpectraModal={toggleSpectraModal}
confirmRegenerate={confirmRegenerate}
toggleNMRDisplayerModal={toggleNMRDisplayerModal}
hasNMRium={hasNMRium}
/>
</div>
);
Expand Down Expand Up @@ -388,6 +430,11 @@ export default class ReactionDetailsContainers extends Component {
handleSampleChanged={this.handleSpChange}
handleSubmit={this.props.handleSubmit}
/>
<NMRiumDisplayer
sample={reaction}
handleSampleChanged={this.handleSpChange}
handleSubmit={this.props.handleSubmit}
/>
</Panel.Body>
</Panel>
);
Expand Down
144 changes: 135 additions & 9 deletions ...ks/src/apps/mydb/elements/details/reactions/analysesTab/ReactionDetailsContainers.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,9 @@ import Reaction from 'src/models/Reaction';
import Container from 'src/models/Container';
import { DndProvider } from 'react-dnd';
import { HTML5Backend } from 'react-dnd-html5-backend';
import ImageModal from 'src/components/common/ImageModal';
import PrintCodeButton from 'src/components/common/PrintCodeButton';
import ContainerComponent from 'src/components/container/ContainerComponent';

Enzyme.configure({ adapter: new Adapter() });

Expand Down Expand Up @@ -62,6 +65,18 @@ describe('ReactionDetailsContainers', () => {
describe('It has analyses', () => {
let reaction = null;

const btnAdd = (
<div style={{ marginBottom: '10px' }}>
&nbsp;<Button
className="button-right"
bsSize="xsmall"
bsStyle="success"
>
Add analysis
</Button>
</div>
);

beforeEach(() => {
reaction = Reaction.buildEmpty();
});
Expand All @@ -82,15 +97,7 @@ describe('ReactionDetailsContainers', () => {
);
const expectedValue = shallow(
<div>
<div style={{ marginBottom: '10px' }}>
&nbsp;<Button
className="button-right"
bsSize="xsmall"
bsStyle="success"
>
Add analysis
</Button>
</div>
{btnAdd}
<PanelGroup id="reaction-analyses-panel" defaultActiveKey={0} activeKey={0} accordion>
<Panel
eventKey={0}
Expand All @@ -114,5 +121,124 @@ describe('ReactionDetailsContainers', () => {
);
expect(wrapper.html()).toEqual(expectedValue.html());
});

// it('Render with normal analysis', () => {
// const analysis = Container.buildAnalysis();
// reaction.container.children[0].children.push(analysis);

// const wrapper = shallow(
// <DndProvider backend={HTML5Backend}>
// <ReactionDetailsContainers reaction={reaction} readOnly={false} />
// </DndProvider>
// );

// const SpectraEditorBtn = (
// <div class="button-right btn-group">
// <div class="dropdown disabled btn-group btn-group-xs btn-group-info">
// <button disabled type="button" class="btn btn-xs btn-info">
// <i class="fa fa-area-chart"></i>
// </button>
// <button aria-label="[object Object]" id="spectra-editor-split-button" disabled role="button" aria-haspopup="true" aria-expanded="false" type="button" class="dropdown-toggle btn btn-xs btn-info"> <span class="caret"></span>
// </button>
// <ul role="menu" class="dropdown-menu dropdown-menu-right" aria-labelledby="spectra-editor-split-button">
// <li role="presentation" class="disabled">
// <a id="regenerate-spectra" role="menuitem" tabindex="-1" href="#">
// <i class="fa fa-refresh"></i> Reprocess
// </a>
// </li>
// </ul>
// </div>
// </div>
// );

// const headerBtnGroup = (
// <div className="upper-btn">
// <Button
// bsSize="xsmall"
// bsStyle="danger"
// className="button-right"
// disabled={false}
// >
// <i className="fa fa-trash" />
// </Button>
// <PrintCodeButton element={reaction} analyses={[analysis]} ident={analysis.id} />
// {
// SpectraEditorBtn
// }
// {/* <SpectraEditorBtn
// element={reaction}
// hasJcamp={hasJcamp}
// spcInfo={spcInfo}
// hasChemSpectra={hasChemSpectra}
// toggleSpectraModal={toggleSpectraModal}
// confirmRegenerate={confirmRegenerate}
// /> */}
// </div>
// );

// const headerPanel = (
// <div className="analysis-header order" style={{ width: '100%' }}>
// <div className="preview">
// <ImageModal
// previewObject={{
// src: '/images/wild_card/no_attachment.svg'
// }}
// popObject={{
// title: analysis.name,
// src: null,
// }}
// />
// </div>
// <div className="abstract">
// {
// headerBtnGroup
// }
// <div className="lower-text">
// <div className="main-title">{analysis.name}</div>
// <div className="sub-title">Type: {analysis.extended_metadata.kind}</div>
// <div className="sub-title">Status: {analysis.extended_metadata.status} {''} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {''}</div>
// <div className="desc sub-title">
// <span style={{ float: 'left', marginRight: '5px' }}>
// Content:
// </span>
// {/* <QuillViewer value={contentOneLine} /> */}
// <span />
// </div>

// </div>
// </div>
// </div>
// );

// const expectedValue = shallow(
// <DndProvider backend={HTML5Backend}>
// <div>
// {btnAdd}
// <PanelGroup id="reaction-analyses-panel" defaultActiveKey={0} activeKey={0} accordion>
// <Panel
// eventKey={0}
// key={`reaction_container_${analysis.id}`}
// >
// <Panel.Heading>
// <Panel.Title toggle>
// {headerPanel}
// </Panel.Title>
// </Panel.Heading>
// <Panel.Body collapsible="true">
// <ContainerComponent
// disabled={false}
// readOnly={false}
// templateType="reaction"
// container={analysis}
// />
// <div class="spectra-editor"></div>
// </Panel.Body>
// </Panel>
// </PanelGroup>
// </div></DndProvider>
// );

// expect(wrapper.html()).toEqual(expectedValue.html());
// });
});
});

0 comments on commit c1ec128

Please sign in to comment.