Skip to content

Commit 261e109

Browse files
boriskovar-m2msmatej-vavrek
boriskovar-m2ms
and
matej-vavrek
authored
* Squashed commit of the following: commit e613216 Author: Boris Kovar <boris.kovar@m2ms.sk> Date: Wed Jul 31 13:57:02 2024 +0200 - implemented #1251 * #1482 added TagName and CentroidRes columns for expanded view of observation dialog --------- Co-authored-by: matej <matej.vavrek@m2ms.sk>
1 parent 90fe890 commit 261e109

File tree

2 files changed

+110
-21
lines changed

2 files changed

+110
-21
lines changed

‎js/components/preview/molecule/moleculeView/moleculeView.js

+64-17
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,8 @@ import Typography from '@mui/material/Typography';
5656
import { Edit } from '@material-ui/icons';
5757
import { DJANGO_CONTEXT } from '../../../../utils/djangoContext';
5858
import { getFontColorByBackgroundColor } from '../../../../utils/colors';
59+
import { api, METHOD } from '../../../../utils/api';
60+
import { base_url } from '../../../routes/constants';
5961

6062
const useStyles = makeStyles(theme => ({
6163
container: {
@@ -346,7 +348,8 @@ const useStyles = makeStyles(theme => ({
346348
categoryCell: {
347349
padding: '4px 8px',
348350
fontWeight: 'bold',
349-
textWrap: 'nowrap'
351+
textWrap: 'nowrap',
352+
fontSize: 12
350353
}
351354
}));
352355

@@ -382,7 +385,9 @@ const MoleculeView = memo(
382385
disableP,
383386
disableC,
384387
hideImage,
385-
showExpandedView
388+
showExpandedView,
389+
headerWidths,
390+
setHeaderWidthsHandler
386391
}) => {
387392
// const [countOfVectors, setCountOfVectors] = useState('-');
388393
// const [cmpds, setCmpds] = useState('-');
@@ -457,6 +462,7 @@ const MoleculeView = memo(
457462
const [densityModalOpen, setDensityModalOpen] = useState(false);
458463
const [moleculeTooltipOpen, setMoleculeTooltipOpen] = useState(false);
459464
const [tagPopoverOpen, setTagPopoverOpen] = useState(null);
465+
const [centroidRes, setCentroidRes] = useState('');
460466

461467
const moleculeImgRef = useRef(null);
462468

@@ -470,6 +476,33 @@ const MoleculeView = memo(
470476
setTagEditModalOpenNew(tagEditorOpenObs);
471477
}, [tagEditorOpenObs]);
472478

479+
const XCA_TAGS_CATEGORIES = ['CanonSites', 'ConformerSites', 'CrystalformSites', 'Crystalforms', 'Quatassemblies'];
480+
481+
useEffect(() => {
482+
api({
483+
url: `${base_url}/api/canon_sites/`,
484+
method: METHOD.GET
485+
})
486+
.then(resp => {
487+
const canonSite = resp.data.results.find(canonSite => canonSite.id === data.canon_site_conf);
488+
setCentroidRes(canonSite ? canonSite.centroid_res : '');
489+
})
490+
.catch(err => {
491+
console.log('error fetching centroid_res from canon_sites', err);
492+
setCentroidRes('');
493+
});
494+
}, [data.canon_site_conf]);
495+
496+
useEffect(() => {
497+
if (showExpandedView) {
498+
setHeaderWidthsHandler(getTagType('CanonSites')?.tag, 'TagName');
499+
setHeaderWidthsHandler(centroidRes, 'CentroidRes');
500+
XCA_TAGS_CATEGORIES.forEach(tagCategory => {
501+
setHeaderWidthsHandler(getTagLabel(tagCategory), tagCategory);
502+
})
503+
}
504+
}, [showExpandedView, getTagType, getTagLabel, centroidRes, setHeaderWidthsHandler, XCA_TAGS_CATEGORIES]);
505+
473506
const handlePopoverOpen = event => {
474507
setTagPopoverOpen(event.currentTarget);
475508
};
@@ -1061,6 +1094,21 @@ const MoleculeView = memo(
10611094
return fontSize;
10621095
};
10631096

1097+
const getTagLabel = useCallback(tagCategory => {
1098+
const tagTypeObject = getTagType(tagCategory);
1099+
let tagLabel = '';
1100+
if (tagTypeObject) {
1101+
if (tagCategory === 'CrystalformSites') {
1102+
// "chop" more of CrystalformSites name
1103+
tagLabel = tagTypeObject.upload_name.substring(tagTypeObject.upload_name.indexOf('-') + 1).trim();
1104+
tagLabel = tagLabel.substring(tagLabel.indexOf('-') + 1).trim();
1105+
} else {
1106+
tagLabel = tagTypeObject.upload_name.substring(tagTypeObject.upload_name.indexOf('-') + 1).trim();
1107+
}
1108+
}
1109+
return tagLabel;
1110+
}, [getTagType]);
1111+
10641112
return (
10651113
<>
10661114
<Grid
@@ -1359,7 +1407,7 @@ const MoleculeView = memo(
13591407
// wrap="nowrap"
13601408
style={{ height: "100%" }}
13611409
>
1362-
{['CanonSites', 'ConformerSites', 'CrystalformSites', 'Crystalforms', 'Quatassemblies'].map(tagCategory => {
1410+
{XCA_TAGS_CATEGORIES.map(tagCategory => {
13631411
const tagTypeObject = getTagType(tagCategory);
13641412
const tagLabel = tagCategory === 'ConformerSites' ? tagTypeObject.tag_prefix.replace(getTagType('CanonSites')?.tag_prefix, '') : tagTypeObject?.tag_prefix;
13651413
return <Tooltip
@@ -1414,24 +1462,23 @@ const MoleculeView = memo(
14141462
</div>}
14151463
</Grid>
14161464
{showExpandedView && <Grid item container alignItems='center' wrap="nowrap">
1417-
{['CanonSites', 'ConformerSites', 'CrystalformSites', 'Crystalforms', 'Quatassemblies'].map((tagCategory, index) => {
1418-
const tagTypeObject = getTagType(tagCategory);
1419-
let tagLabel = '';
1420-
if (tagTypeObject) {
1421-
if (tagCategory === 'CrystalformSites') {
1422-
// "chop" more of CrystalformSites name
1423-
tagLabel = tagTypeObject.upload_name.substring(tagTypeObject.upload_name.indexOf('-') + 1);
1424-
tagLabel = tagLabel.substring(tagLabel.indexOf('-') + 1);
1425-
} else {
1426-
tagLabel = tagTypeObject.upload_name.substring(tagTypeObject.upload_name.indexOf('-') + 1);
1427-
}
1428-
}
1465+
<Tooltip title={"CanonSite TagName"}>
1466+
<Grid item align="center" className={classes.categoryCell} style={{ minWidth: headerWidths.TagName }}>
1467+
{getTagType('CanonSites')?.tag}
1468+
</Grid>
1469+
</Tooltip>
1470+
{XCA_TAGS_CATEGORIES.map((tagCategory, index) => {
14291471
return <Tooltip title={PLURAL_TO_SINGULAR[tagCategory]} key={index}>
1430-
<Grid item align="center" className={classes.categoryCell} style={{ fontSize: 12 }}>
1431-
{tagLabel}
1472+
<Grid item align="center" className={classes.categoryCell} style={{ minWidth: headerWidths[tagCategory] }}>
1473+
{getTagLabel(tagCategory)}
14321474
</Grid>
14331475
</Tooltip>
14341476
})}
1477+
<Tooltip title={"CentroidRes"}>
1478+
<Grid item align="center" className={classes.categoryCell} style={{ minWidth: headerWidths.CentroidRes }}>
1479+
{centroidRes}
1480+
</Grid>
1481+
</Tooltip>
14351482
</Grid>}
14361483
</Grid >
14371484
<SvgTooltip

‎js/components/preview/molecule/observationsDialog.js

+46-4
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { forwardRef, memo, useCallback, useContext, useMemo, useRef, useState } from 'react';
1+
import React, { forwardRef, memo, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
22
import { CircularProgress, Grid, Popper, IconButton, Typography, Tooltip } from '@material-ui/core';
33
import { ArrowLeft, ArrowRight, Close, KeyboardArrowDown } from '@material-ui/icons';
44
import { makeStyles } from '@material-ui/styles';
@@ -190,7 +190,7 @@ const useStyles = makeStyles(theme => ({
190190
}
191191
},
192192
headerCell: {
193-
padding: '0px 12px',
193+
padding: '0px 8px',
194194
borderColor: 'black',
195195
fontSize: 12
196196
}
@@ -247,8 +247,41 @@ export const ObservationsDialog = memo(
247247

248248
const tagEditorRef = useRef();
249249

250+
const getCalculatedTagColumnWidth = (tagText, font = null) => {
251+
const canvas = document.createElement("canvas");
252+
const ctx = canvas.getContext("2d");
253+
ctx.font = font ?? '12px';
254+
const calculatedWidth = ctx.measureText(tagText).width + 16;
255+
return calculatedWidth;
256+
};
257+
250258
const [tagEditorAnchorEl, setTagEditorAnchorEl] = useState(null);
251259
const [expandView, setExpandView] = useState(null);
260+
const [headerWidths, setHeaderWidths] = useState({
261+
TagName: getCalculatedTagColumnWidth('TagName'),
262+
CanonSites: getCalculatedTagColumnWidth('CanonSites'),
263+
ConformerSites: getCalculatedTagColumnWidth('ConformerSites'),
264+
CrystalformSites: getCalculatedTagColumnWidth('CrystalformSites'),
265+
Crystalforms: getCalculatedTagColumnWidth('Crystalforms'),
266+
Quatassemblies: getCalculatedTagColumnWidth('Quatassemblies'),
267+
CentroidRes: getCalculatedTagColumnWidth('CentroidRes')
268+
});
269+
270+
/**
271+
* Handler for setting width of expanded view columns for child rows
272+
* @param {*} tagText
273+
* @param {*} tagCategory
274+
*/
275+
const setHeaderWidthsHandler = (tagText, tagCategory) => {
276+
const calculatedWidth = getCalculatedTagColumnWidth(tagText, '12px bold');
277+
if (headerWidths[tagCategory] < calculatedWidth) {
278+
setHeaderWidths(old => {
279+
const newWidths = { ...old };
280+
newWidths[tagCategory] = calculatedWidth;
281+
return { ...newWidths }
282+
});
283+
}
284+
};
252285

253286
const moleculeList = useMemo(() => {
254287
if (searchString !== null) {
@@ -734,15 +767,22 @@ export const ObservationsDialog = memo(
734767
xs
735768
container
736769
justifyContent="space-around"
737-
style={{ maxWidth: '63%', marginLeft: 95 }}
770+
style={{ maxWidth: '72%', marginLeft: 95 }}
771+
// style={{ marginLeft: 95 }}
738772
>
773+
<Grid item align="center" className={classes.headerCell} style={{ minWidth: headerWidths.TagName }} >
774+
TagName
775+
</Grid>
739776
{['CanonSites', 'ConformerSites', 'CrystalformSites', 'Crystalforms', 'Quatassemblies'].map(
740777
(tagCategory, index) => (
741-
<Grid item align="center" key={index} className={classes.headerCell}>
778+
<Grid item align="center" key={index} className={classes.headerCell} style={{ minWidth: headerWidths[tagCategory] }}>
742779
{PLURAL_TO_SINGULAR[tagCategory]}
743780
</Grid>
744781
)
745782
)}
783+
<Grid item align="center" className={classes.headerCell} style={{ minWidth: headerWidths.CentroidRes }}>
784+
CentroidRes
785+
</Grid>
746786
</Grid>
747787
)}
748788
</Grid>
@@ -794,6 +834,8 @@ export const ObservationsDialog = memo(
794834
setRef={setTagEditorAnchorEl}
795835
hideImage={true}
796836
showExpandedView={expandView}
837+
headerWidths={headerWidths}
838+
setHeaderWidthsHandler={setHeaderWidthsHandler}
797839
/>
798840
</GroupNglControlButtonsContext.Provider>
799841
);

0 commit comments

Comments
 (0)