Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Change the dom to not allow the "Structures" panel to expand #1361

Merged
merged 4 commits into from
Feb 3, 2022
Merged

Change the dom to not allow the "Structures" panel to expand #1361

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
5631587
fix: change the dom to not allow the "Structures" panel to expand
Sebastien-Ahkrin Feb 1, 2022
c12efe7
refactor: change the layout to be flex and move the ResponsiveChart t…
Sebastien-Ahkrin Feb 3, 2022
5c69201
refactor: add min-height 0 to the panel
Sebastien-Ahkrin Feb 3, 2022
b7bf935
fix: resolve test error
Sebastien-Ahkrin Feb 3, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
227 changes: 103 additions & 124 deletions src/component/panels/MoleculesPanel/MoleculePanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
/** @jsxImportSource @emotion/react */
import { css } from '@emotion/react';
import { css, SerializedStyles } from '@emotion/react';
import OCL from 'openchemlib/full';
import { useState, useCallback, useEffect, memo } from 'react';
import { ResponsiveChart } from 'react-d3-utils';
Expand All @@ -21,62 +21,46 @@ import { SET_MOLECULE } from '../../reducer/types/Types';
import MoleculePanelHeader from './MoleculePanelHeader';
import useAtomAssignment from './useAtomAssignment';

const styles = css`
display: flex;
flex-direction: column;
flex-grow: 1;
width: 100%;
height: 100%;

.molecule-container {
width: 100%;
height: 100%;
max-height: calc(100% - 25px);

.slider {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100%;
padding: 0px;
.mol-svg-container {
width: 100%;
div {
width: 100%;
height: 100%;
}
}

p {
width: 100%;
margin: 0 auto;
display: block;
position: relative;
text-align: center;
}

svg polygon {
fill: gray !important;
}
}
}
`;

const toolbarStyle = css`
display: flex;
flex-direction: row;
border-bottom: 0.55px solid rgb(240, 240, 240);
padding: 0px 5px;

p {
margin: 0;
text-align: right;
width: 100%;
line-height: 22px;
padding: 0px 10px;
}
`;
const styles: Record<
'panel' | 'molecule' | 'toolbar' | 'slider' | 'items',
SerializedStyles
> = {
panel: css({
display: 'flex',
flexGrow: 1,
width: '100%',
height: '100%',
flexDirection: 'column',
}),
molecule: css({
display: 'flex',
flex: '1 1 0%',
flexDirection: 'column',
minHeight: 0,
}),
toolbar: css({
display: 'flex',
borderBottom: '0.55px solid rgb(240, 240, 240)',
padding: '0px 10px',
justifyContent: 'end',
height: 22,
}),
slider: css({
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
flexGrow: 1,
minHeight: 0,
}),
items: css({
display: 'flex',
flexDirection: 'column',
flex: '1 1 0%',
height: '100%',
minHeight: 0,
}),
};

interface MoleculePanelInnerProps {
zones: Zones;
Expand Down Expand Up @@ -140,79 +124,74 @@ function MoleculePanelInner({
}, []);

return (
<div css={styles}>
<div css={styles.panel}>
<MoleculePanelHeader
currentIndex={currentIndex}
molecules={molecules}
onOpenMoleculeEditor={() => openMoleculeEditorHandler()}
onMoleculeIndexChange={moleculeIndexHandler}
/>

<div className="molecule-container">
<ResponsiveChart>
{({ height, width }) => {
return (
<NextPrev
onChange={(slideIndex) => setCurrentIndex(slideIndex)}
defaultIndex={currentIndex}
>
{molecules && molecules.length > 0 ? (
molecules.map((mol: Molecule, index) => (
<>
<div css={toolbarStyle}>
<p>
<MF mf={mol.mf} /> - {mol.mw?.toFixed(2)}
</p>
</div>
<div
className="slider"
key={mol.key}
onDoubleClick={() => openMoleculeEditorHandler(mol)}
style={{
backgroundColor:
(index + 1) % 2 !== 0 ? '#fafafa' : 'white',
}}
>
<div className="mol-svg-container">
<OCLnmr
OCL={OCL}
id={`molSVG${index}`}
width={width}
height={height}
molfile={mol.molfile || ''}
setMolfile={(molfile) =>
handleReplaceMolecule(mol.key, molfile)
}
setSelectedAtom={handleOnClickAtom}
atomHighlightColor={
currentDiaIDsToHighlight &&
currentDiaIDsToHighlight.length > 0
? 'red'
: '#FFD700'
}
atomHighlightOpacity={0.35}
highlights={
currentDiaIDsToHighlight &&
currentDiaIDsToHighlight.length > 0
? currentDiaIDsToHighlight
: assignedDiaIDsMerged
}
setHoverAtom={handleOnAtomHover}
/>
</div>
</div>
</>
))
) : (
<div
style={{ width: '100%', height: '100%' }}
onClick={() => openMoleculeEditorHandler()}
/>
)}
</NextPrev>
);
}}
</ResponsiveChart>
<div css={styles.molecule}>
<NextPrev
onChange={(slideIndex) => setCurrentIndex(slideIndex)}
defaultIndex={currentIndex}
>
{molecules && molecules.length > 0 ? (
molecules.map((mol: Molecule, index) => (
<div key={mol.key} css={styles.items}>
<span css={styles.toolbar}>
<MF mf={mol.mf} /> - {mol.mw?.toFixed(2)}
</span>
<div
css={styles.slider}
className="mol-svg-container"
onDoubleClick={() => openMoleculeEditorHandler(mol)}
style={{
backgroundColor:
(index + 1) % 2 !== 0 ? '#fafafa' : 'white',
}}
>
<ResponsiveChart>
{({ height, width }) => {
return (
<OCLnmr
OCL={OCL}
id={`molSVG${index}`}
width={width}
height={height}
molfile={mol.molfile || ''}
setMolfile={(molfile) =>
handleReplaceMolecule(mol.key, molfile)
}
setSelectedAtom={handleOnClickAtom}
atomHighlightColor={
currentDiaIDsToHighlight &&
currentDiaIDsToHighlight.length > 0
? 'red'
: '#FFD700'
}
atomHighlightOpacity={0.35}
highlights={
currentDiaIDsToHighlight &&
currentDiaIDsToHighlight.length > 0
? currentDiaIDsToHighlight
: assignedDiaIDsMerged
}
setHoverAtom={handleOnAtomHover}
/>
);
}}
</ResponsiveChart>
</div>
</div>
))
) : (
<div
style={{ width: '100%', height: '100%' }}
onClick={() => openMoleculeEditorHandler()}
/>
)}
</NextPrev>
</div>
</div>
);
Expand Down