Skip to content

Commit

Permalink
#1482 (#442)
Browse files Browse the repository at this point in the history 
* 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>
  • Loading branch information
@boriskovar-m2ms @matej-vavrek
boriskovar-m2ms and matej-vavrek authored Aug 22, 2024
1 parent 90fe890 commit 261e109
Show file tree
Hide file tree
Showing 2 changed files with 110 additions and 21 deletions.
81 changes: 64 additions & 17 deletions js/components/preview/molecule/moleculeView/moleculeView.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,8 @@ import Typography from '@mui/material/Typography';
import { Edit } from '@material-ui/icons';
import { DJANGO_CONTEXT } from '../../../../utils/djangoContext';
import { getFontColorByBackgroundColor } from '../../../../utils/colors';
import { api, METHOD } from '../../../../utils/api';
import { base_url } from '../../../routes/constants';

const useStyles = makeStyles(theme => ({
container: {
Expand Down Expand Up @@ -346,7 +348,8 @@ const useStyles = makeStyles(theme => ({
categoryCell: {
padding: '4px 8px',
fontWeight: 'bold',
textWrap: 'nowrap'
textWrap: 'nowrap',
fontSize: 12
}
}));

Expand Down Expand Up @@ -382,7 +385,9 @@ const MoleculeView = memo(
disableP,
disableC,
hideImage,
showExpandedView
showExpandedView,
headerWidths,
setHeaderWidthsHandler
}) => {
// const [countOfVectors, setCountOfVectors] = useState('-');
// const [cmpds, setCmpds] = useState('-');
Expand Down Expand Up @@ -457,6 +462,7 @@ const MoleculeView = memo(
const [densityModalOpen, setDensityModalOpen] = useState(false);
const [moleculeTooltipOpen, setMoleculeTooltipOpen] = useState(false);
const [tagPopoverOpen, setTagPopoverOpen] = useState(null);
const [centroidRes, setCentroidRes] = useState('');

const moleculeImgRef = useRef(null);

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

const XCA_TAGS_CATEGORIES = ['CanonSites', 'ConformerSites', 'CrystalformSites', 'Crystalforms', 'Quatassemblies'];

useEffect(() => {
api({
url: `${base_url}/api/canon_sites/`,
method: METHOD.GET
})
.then(resp => {
const canonSite = resp.data.results.find(canonSite => canonSite.id === data.canon_site_conf);
setCentroidRes(canonSite ? canonSite.centroid_res : '');
})
.catch(err => {
console.log('error fetching centroid_res from canon_sites', err);
setCentroidRes('');
});
}, [data.canon_site_conf]);

useEffect(() => {
if (showExpandedView) {
setHeaderWidthsHandler(getTagType('CanonSites')?.tag, 'TagName');
setHeaderWidthsHandler(centroidRes, 'CentroidRes');
XCA_TAGS_CATEGORIES.forEach(tagCategory => {
setHeaderWidthsHandler(getTagLabel(tagCategory), tagCategory);
})
}
}, [showExpandedView, getTagType, getTagLabel, centroidRes, setHeaderWidthsHandler, XCA_TAGS_CATEGORIES]);

const handlePopoverOpen = event => {
setTagPopoverOpen(event.currentTarget);
};
Expand Down Expand Up @@ -1061,6 +1094,21 @@ const MoleculeView = memo(
return fontSize;
};

const getTagLabel = useCallback(tagCategory => {
const tagTypeObject = getTagType(tagCategory);
let tagLabel = '';
if (tagTypeObject) {
if (tagCategory === 'CrystalformSites') {
// "chop" more of CrystalformSites name
tagLabel = tagTypeObject.upload_name.substring(tagTypeObject.upload_name.indexOf('-') + 1).trim();
tagLabel = tagLabel.substring(tagLabel.indexOf('-') + 1).trim();
} else {
tagLabel = tagTypeObject.upload_name.substring(tagTypeObject.upload_name.indexOf('-') + 1).trim();
}
}
return tagLabel;
}, [getTagType]);

return (
<>
<Grid
Expand Down Expand Up @@ -1359,7 +1407,7 @@ const MoleculeView = memo(
// wrap="nowrap"
style={{ height: "100%" }}
>
{['CanonSites', 'ConformerSites', 'CrystalformSites', 'Crystalforms', 'Quatassemblies'].map(tagCategory => {
{XCA_TAGS_CATEGORIES.map(tagCategory => {
const tagTypeObject = getTagType(tagCategory);
const tagLabel = tagCategory === 'ConformerSites' ? tagTypeObject.tag_prefix.replace(getTagType('CanonSites')?.tag_prefix, '') : tagTypeObject?.tag_prefix;
return <Tooltip
Expand Down Expand Up @@ -1414,24 +1462,23 @@ const MoleculeView = memo(
</div>}
</Grid>
{showExpandedView && <Grid item container alignItems='center' wrap="nowrap">
{['CanonSites', 'ConformerSites', 'CrystalformSites', 'Crystalforms', 'Quatassemblies'].map((tagCategory, index) => {
const tagTypeObject = getTagType(tagCategory);
let tagLabel = '';
if (tagTypeObject) {
if (tagCategory === 'CrystalformSites') {
// "chop" more of CrystalformSites name
tagLabel = tagTypeObject.upload_name.substring(tagTypeObject.upload_name.indexOf('-') + 1);
tagLabel = tagLabel.substring(tagLabel.indexOf('-') + 1);
} else {
tagLabel = tagTypeObject.upload_name.substring(tagTypeObject.upload_name.indexOf('-') + 1);
}
}
<Tooltip title={"CanonSite TagName"}>
<Grid item align="center" className={classes.categoryCell} style={{ minWidth: headerWidths.TagName }}>
{getTagType('CanonSites')?.tag}
</Grid>
</Tooltip>
{XCA_TAGS_CATEGORIES.map((tagCategory, index) => {
return <Tooltip title={PLURAL_TO_SINGULAR[tagCategory]} key={index}>
<Grid item align="center" className={classes.categoryCell} style={{ fontSize: 12 }}>
{tagLabel}
<Grid item align="center" className={classes.categoryCell} style={{ minWidth: headerWidths[tagCategory] }}>
{getTagLabel(tagCategory)}
</Grid>
</Tooltip>
})}
<Tooltip title={"CentroidRes"}>
<Grid item align="center" className={classes.categoryCell} style={{ minWidth: headerWidths.CentroidRes }}>
{centroidRes}
</Grid>
</Tooltip>
</Grid>}
</Grid >
<SvgTooltip
Expand Down
50 changes: 46 additions & 4 deletions js/components/preview/molecule/observationsDialog.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { forwardRef, memo, useCallback, useContext, useMemo, useRef, useState } from 'react';
import React, { forwardRef, memo, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
import { CircularProgress, Grid, Popper, IconButton, Typography, Tooltip } from '@material-ui/core';
import { ArrowLeft, ArrowRight, Close, KeyboardArrowDown } from '@material-ui/icons';
import { makeStyles } from '@material-ui/styles';
Expand Down Expand Up @@ -190,7 +190,7 @@ const useStyles = makeStyles(theme => ({
}
},
headerCell: {
padding: '0px 12px',
padding: '0px 8px',
borderColor: 'black',
fontSize: 12
}
Expand Down Expand Up @@ -247,8 +247,41 @@ export const ObservationsDialog = memo(

const tagEditorRef = useRef();

const getCalculatedTagColumnWidth = (tagText, font = null) => {
const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");
ctx.font = font ?? '12px';
const calculatedWidth = ctx.measureText(tagText).width + 16;
return calculatedWidth;
};

const [tagEditorAnchorEl, setTagEditorAnchorEl] = useState(null);
const [expandView, setExpandView] = useState(null);
const [headerWidths, setHeaderWidths] = useState({
TagName: getCalculatedTagColumnWidth('TagName'),
CanonSites: getCalculatedTagColumnWidth('CanonSites'),
ConformerSites: getCalculatedTagColumnWidth('ConformerSites'),
CrystalformSites: getCalculatedTagColumnWidth('CrystalformSites'),
Crystalforms: getCalculatedTagColumnWidth('Crystalforms'),
Quatassemblies: getCalculatedTagColumnWidth('Quatassemblies'),
CentroidRes: getCalculatedTagColumnWidth('CentroidRes')
});

/**
* Handler for setting width of expanded view columns for child rows
* @param {*} tagText
* @param {*} tagCategory
*/
const setHeaderWidthsHandler = (tagText, tagCategory) => {
const calculatedWidth = getCalculatedTagColumnWidth(tagText, '12px bold');
if (headerWidths[tagCategory] < calculatedWidth) {
setHeaderWidths(old => {
const newWidths = { ...old };
newWidths[tagCategory] = calculatedWidth;
return { ...newWidths }
});
}
};

const moleculeList = useMemo(() => {
if (searchString !== null) {
Expand Down Expand Up @@ -734,15 +767,22 @@ export const ObservationsDialog = memo(
xs
container
justifyContent="space-around"
style={{ maxWidth: '63%', marginLeft: 95 }}
style={{ maxWidth: '72%', marginLeft: 95 }}
// style={{ marginLeft: 95 }}
>
<Grid item align="center" className={classes.headerCell} style={{ minWidth: headerWidths.TagName }} >
TagName
</Grid>
{['CanonSites', 'ConformerSites', 'CrystalformSites', 'Crystalforms', 'Quatassemblies'].map(
(tagCategory, index) => (
<Grid item align="center" key={index} className={classes.headerCell}>
<Grid item align="center" key={index} className={classes.headerCell} style={{ minWidth: headerWidths[tagCategory] }}>
{PLURAL_TO_SINGULAR[tagCategory]}
</Grid>
)
)}
<Grid item align="center" className={classes.headerCell} style={{ minWidth: headerWidths.CentroidRes }}>
CentroidRes
</Grid>
</Grid>
)}
</Grid>
Expand Down Expand Up @@ -794,6 +834,8 @@ export const ObservationsDialog = memo(
setRef={setTagEditorAnchorEl}
hideImage={true}
showExpandedView={expandView}
headerWidths={headerWidths}
setHeaderWidthsHandler={setHeaderWidthsHandler}
/>
</GroupNglControlButtonsContext.Provider>
);
Expand Down

0 comments on commit 261e109

Please sign in to comment.