Skip to content

Commit

Permalink
separated SubstanceDetail component
Browse files Browse the repository at this point in the history
  • Loading branch information
@cheminfolab
cheminfolab committed Sep 17, 2023
1 parent 4a1cace commit 7c2b040
Show file tree
Hide file tree
Showing 2 changed files with 184 additions and 135 deletions.
184 changes: 184 additions & 0 deletions frontend/src/components/ChemSubDetail.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,184 @@
import {useState} from "react";
import {Col, Container, Form, Modal, Row, Tab, Table, Tabs} from "react-bootstrap";
import SubstanceImage from "./SubstanceImage";
import FormulaFormatter from "./FormulaFormatter";
import DataRow from "./DataRow";

const SubstanceDetail = ({units, substance, setDetail}) => {
let [edit, setEdit] = useState(false)
if (substance) return(
<Modal
show={substance !== null}
onHide={() => setDetail(null)}
dialogClassName="modal-90w"
centered
>
<Modal.Header closeButton>
<Modal.Title>
{substance.name}
</Modal.Title>
</Modal.Header>
<Modal.Body>
<Form>
<Container>
<Row>
{substance.image
? <Col xs={12} lg={2} className={"d-flex justify-content-center"}><SubstanceImage path={substance.image}/></Col>
: null
}
<Col xs={12} lg={5}>
<Table borderless>
<tbody>
<DataRow
name={"formula"}
data={substance.formula}
edit={edit}
text={<FormulaFormatter formula={substance.formula}/>}
/>
<DataRow
name={"CAS"}
data={substance.cas}
edit={edit}
/>
<DataRow
name={"PubChem SID"}
data={substance.pubchem_sid}
edit={edit}
/>
<DataRow
name={"PubChem CID"}
data={substance.pubchem_cid}
edit={edit}
/>
<DataRow
name={"InChI"}
data={substance.inchi}
edit={edit}
/>
<DataRow
name={"InChI key"}
data={substance.inchi_key}
edit={edit}
/>
<DataRow
name={"SMILES"}
data={substance.smiles}
edit={edit}
/>
</tbody>
</Table>
</Col>
<Col xs={12} lg={5}>
<Table borderless>
<tbody>
<DataRow
name={"name"}
data={substance.name}
edit={edit}
/>
<DataRow
name={"label"}
data={substance.label}
edit={edit}
/>
<DataRow
name={"synonyms"}
data={substance.synonyms}
edit={edit}
/>
</tbody>
</Table>
</Col>
</Row>
</Container>
</Form>
<Tabs
defaultActiveKey="home"
transition={false}
className="mb-3"
>
<Tab eventKey="home" title="Properties">
<Container>
<Row>
<Col lg={2}></Col>
<Col xs={12} lg={10}>
<Table borderless>
<tbody>
<DataRow
name={"molar mass"}
data={substance.mol_weight}
edit={edit}
units={units}
unit={substance.mol_weight_unit}
/>
<DataRow
name={"exact mass"}
data={substance.exact_mass}
edit={edit}
units={units}
unit={substance.exact_mass_unit}
/>
</tbody>
</Table>
</Col>
</Row>
</Container>
</Tab>
<Tab eventKey="structure" title="Structure">
<p>
Ipsum molestiae natus adipisci modi eligendi? Debitis amet quae unde
commodi aspernatur enim, consectetur. Cumque deleniti temporibus
ipsam atque a dolores quisquam quisquam adipisci possimus
laboriosam. Quibusdam facilis doloribus debitis! Sit quasi quod
accusamus eos quod. Ab quos consequuntur eaque quo rem! Mollitia
reiciendis porro quo magni incidunt dolore amet atque facilis ipsum
deleniti rem!
</p>
</Tab>
<Tab eventKey="analysis" title="Analysis">
<p>
Ipsum molestiae natus adipisci modi eligendi? Debitis amet quae unde
commodi aspernatur enim, consectetur. Cumque deleniti temporibus
ipsam atque a dolores quisquam quisquam adipisci possimus
laboriosam. Quibusdam facilis doloribus debitis! Sit quasi quod
accusamus eos quod. Ab quos consequuntur eaque quo rem! Mollitia
reiciendis porro quo magni incidunt dolore amet atque facilis ipsum
deleniti rem!
</p>
</Tab>
<Tab eventKey="related" title="Related">
<p>
Ipsum molestiae natus adipisci modi eligendi? Debitis amet quae unde
commodi aspernatur enim, consectetur. Cumque deleniti temporibus
ipsam atque a dolores quisquam quisquam adipisci possimus
laboriosam. Quibusdam facilis doloribus debitis! Sit quasi quod
accusamus eos quod. Ab quos consequuntur eaque quo rem! Mollitia
reiciendis porro quo magni incidunt dolore amet atque facilis ipsum
deleniti rem!
</p>
</Tab>
</Tabs>
{/*<Form>*/}
{/* <Form.Group className="mb-3" controlId="exampleForm.ControlInput1">*/}
{/* <Form.Label>Email address</Form.Label>*/}
{/* <Form.Control*/}
{/* type="email"*/}
{/* name="email2"*/}
{/* placeholder="name@example.com"*/}
{/* autoFocus*/}
{/* />*/}
{/* </Form.Group>*/}
{/* <Form.Group*/}
{/* className="mb-3"*/}
{/* controlId="exampleForm.ControlTextarea1"*/}
{/* >*/}
{/* <Form.Label>Example textarea</Form.Label>*/}
{/* <Form.Control as="textarea" rows={3} />*/}
{/* </Form.Group>*/}
{/*</Form>*/}
</Modal.Body>
</Modal>
)
}

export default SubstanceDetail
135 changes: 0 additions & 135 deletions frontend/src/components/ChemSubTable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -83,141 +83,6 @@ const SubstanceCard = ({units, substance, selected, setSelected, setDetail}) =>
)
}

const SubstanceDetail = ({units, substance, setDetail}) => {
// let [edit, setEdit] = useState(false)
if (substance) return(
<Modal
show={substance !== null}
onHide={() => setDetail(null)}
dialogClassName="modal-90w"
centered
>
<Modal.Header closeButton>
<Modal.Title>
{substance.name}
</Modal.Title>
</Modal.Header>
<Modal.Body>
<Container>
<Row>
{substance.image
? <Col xs={12} lg={2} className={"d-flex justify-content-center"}><SubstanceImage path={substance.image}/></Col>
: null
}
<Col xs={12} lg={10}>
<Table borderless>
<tbody>
<DataRow
name={"formula"}
data={substance.formula}
text={<FormulaFormatter formula={substance.formula}/>}
/>
<DataRow
name={"CAS"}
data={substance.cas}
/>
<DataRow
name={"PubChem SID"}
data={substance.pubchem_sid}
/>
<DataRow
name={"PubChem CID"}
data={substance.pubchem_cid}
/>
<DataRow
name={"InChI"}
data={substance.inchi}
/>
<DataRow
name={"InChI key"}
data={substance.inchi_key}
/>
<DataRow
name={"SMILES"}
data={substance.smiles}
/>
</tbody>
</Table>
</Col>
</Row>
</Container>
<Tabs
defaultActiveKey="home"
transition={false}
className="mb-3"
>
<Tab eventKey="home" title="Properties">
<Container>
<Row>
<Col xs={12} lg={10}>
<Table borderless>
<tbody>
<DataRow
name={"molar mass"}
data={substance.mol_weight}
text={`${substance.mol_weight} ${
units.find(u => u.id === substance.mol_weight_unit).symbol
}`}
/>
<DataRow
name={"exact mass"}
data={substance.exact_mass}
text={`${substance.exact_mass} ${
units.find(u => u.id === substance.exact_mass_unit).symbol
}`}
/>
</tbody>
</Table>
</Col>
</Row>
</Container>
</Tab>
<Tab eventKey="profile" title="Spectra">
<p>
Ipsum molestiae natus adipisci modi eligendi? Debitis amet quae unde
commodi aspernatur enim, consectetur. Cumque deleniti temporibus
ipsam atque a dolores quisquam quisquam adipisci possimus
laboriosam. Quibusdam facilis doloribus debitis! Sit quasi quod
accusamus eos quod. Ab quos consequuntur eaque quo rem! Mollitia
reiciendis porro quo magni incidunt dolore amet atque facilis ipsum
deleniti rem!
</p>
</Tab>
<Tab eventKey="contact" title="SDS">
<p>
Ipsum molestiae natus adipisci modi eligendi? Debitis amet quae unde
commodi aspernatur enim, consectetur. Cumque deleniti temporibus
ipsam atque a dolores quisquam quisquam adipisci possimus
laboriosam. Quibusdam facilis doloribus debitis! Sit quasi quod
accusamus eos quod. Ab quos consequuntur eaque quo rem! Mollitia
reiciendis porro quo magni incidunt dolore amet atque facilis ipsum
deleniti rem!
</p>
</Tab>
</Tabs>
{/*<Form>*/}
{/* <Form.Group className="mb-3" controlId="exampleForm.ControlInput1">*/}
{/* <Form.Label>Email address</Form.Label>*/}
{/* <Form.Control*/}
{/* type="email"*/}
{/* name="email2"*/}
{/* placeholder="name@example.com"*/}
{/* autoFocus*/}
{/* />*/}
{/* </Form.Group>*/}
{/* <Form.Group*/}
{/* className="mb-3"*/}
{/* controlId="exampleForm.ControlTextarea1"*/}
{/* >*/}
{/* <Form.Label>Example textarea</Form.Label>*/}
{/* <Form.Control as="textarea" rows={3} />*/}
{/* </Form.Group>*/}
{/*</Form>*/}
</Modal.Body>
</Modal>
)
}

const ChemSubTable = ({units, substances, selected, setSelected}) => {
let [detail, setDetail] = useState<Substance | null>(null)
if (substances.length === 0) return(<Row>No data available.</Row>)
Expand Down

0 comments on commit 7c2b040

Please sign in to comment.