Skip to content

Commit

Permalink
#1508 (#447)
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

* #1489 show warning toast message if is defined on target load

* #1322 added longcode column

* updated general function for tag comparison

* #1505 adjusted getting of centroid_res

* #1458 allow to tag XCA sites, temp commit

# Conflicts:
#	js/components/preview/molecule/observationsDialog.js

* #1458 adjusted functionality and styling to proper change tag

* #1508 removed TagName column in expanded observation dialog, changed order of columns, adjusted labels and tooltips, show observation dialog in its full height

---------

Co-authored-by: Boris Kovar <boris.kovar@m2ms.sk>
  • Loading branch information
@matej-vavrek @boriskovar-m2ms
matej-vavrek and boriskovar-m2ms authored Sep 12, 2024
1 parent b32a185 commit 3169e8f
Show file tree
Hide file tree
Showing 5 changed files with 32 additions and 36 deletions.
34 changes: 16 additions & 18 deletions js/components/preview/molecule/moleculeView/moleculeView.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -476,7 +476,8 @@ const MoleculeView = memo(
setTagEditModalOpenNew(tagEditorOpenObs);
}, [tagEditorOpenObs]);

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

useEffect(() => {
api({
Expand Down Expand Up @@ -516,7 +517,6 @@ const MoleculeView = memo(

useEffect(() => {
if (showExpandedView) {
setHeaderWidthsHandler(getTagType('CanonSites')?.tag, 'TagName');
setHeaderWidthsHandler(centroidRes, 'CentroidRes');
setHeaderWidthsHandler(data.longcode, 'LongCode');
XCA_TAGS_CATEGORIES.forEach(tagCategory => {
Expand Down Expand Up @@ -1121,17 +1121,20 @@ const MoleculeView = memo(
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();
}
tagLabel = tagTypeObject.tag;
}
return tagLabel;
}, [getTagType]);

const getTagTooltip = useCallback(tagCategory => {
const tagTypeObject = getTagType(tagCategory);
let tagTooltip = '';
if (tagTypeObject) {
tagTooltip = tagTypeObject.upload_name;
}
return tagTooltip;
}, [getTagType]);

return (
<>
<Grid
Expand Down Expand Up @@ -1175,7 +1178,7 @@ const MoleculeView = memo(
<Grid item container justifyContent="flex-start" alignItems="center" direction="row">
<Grid item container justifyContent="space-between" direction="column" xs={3}>
{/* Title label */}
<Tooltip title={moleculeTitle + (data.id === pose?.main_site_observation ? " - main observation" : "")} placement="bottom-start">
<Tooltip title={data.prefix_tooltip ?? '-' + (data.id === pose?.main_site_observation ? " - main observation" : "")} placement="bottom-start">
<Grid
item
onCopy={e => {
Expand Down Expand Up @@ -1435,7 +1438,7 @@ const MoleculeView = memo(
const tagLabel = tagCategory === 'ConformerSites' ? tagTypeObject.tag_prefix.replace(getTagType('CanonSites')?.tag_prefix, '') : tagTypeObject?.tag_prefix;
return <Tooltip
key={`tag-category-${tagCategory}`}
title={<div style={{ whiteSpace: 'pre-line' }}>{PLURAL_TO_SINGULAR[tagCategory]} - {tagTypeObject.upload_name}</div>}
title={<div style={{ whiteSpace: 'pre-line' }}>{PLURAL_TO_SINGULAR[tagCategory]} - {tagTypeObject.tag}</div>}
>
<Grid item xs
className={classNames(classes.contColButtonMenu)}
Expand Down Expand Up @@ -1485,13 +1488,8 @@ const MoleculeView = memo(
</div>}
</Grid>
{showExpandedView && <Grid item container alignItems='center' wrap="nowrap">
<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}>
{XCA_TAGS_CATEGORIES_EXPANDED.map((tagCategory, index) => {
return <Tooltip title={`${PLURAL_TO_SINGULAR[tagCategory]} - ${getTagTooltip(tagCategory)}`} key={index}>
<Grid item align="center" className={classes.categoryCell} style={{ minWidth: headerWidths[tagCategory] }}>
{getTagLabel(tagCategory)}
</Grid>
Expand Down
2 changes: 1 addition & 1 deletion js/components/preview/molecule/observationCmpView/observationCmpView.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1328,7 +1328,7 @@ const ObservationCmpView = memo(
</Grid>
<Grid item container className={classes.detailsCol} justifyContent="space-evenly" direction="column" xs={2}>
{/* Title label */}
<Tooltip title={moleculeTitle} placement="bottom-start">
<Tooltip title={getMainObservation()?.prefix_tooltip ?? '-'} placement="bottom-start">
<Grid
item
onCopy={e => {
Expand Down
25 changes: 11 additions & 14 deletions js/components/preview/molecule/observationsDialog.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -268,22 +268,22 @@ export const ObservationsDialog = memo(
const getCalculatedTagColumnWidth = (tagText, font = null) => {
const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");
ctx.font = font ?? '12px';
ctx.font = `${(font ?? '12px')} "Roboto", "Helvetica", "Arial", sans-serif`;
// 16 as padding buffer
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'),
Quatassemblies: getCalculatedTagColumnWidth('Quatassemblies'),
ConformerSites: getCalculatedTagColumnWidth('ConformerSites'),
CrystalformSites: getCalculatedTagColumnWidth('CrystalformSites'),
Crystalforms: getCalculatedTagColumnWidth('Crystalforms'),
Quatassemblies: getCalculatedTagColumnWidth('Quatassemblies'),
CrystalformSites: getCalculatedTagColumnWidth('CrystalformSites'),
CanonSites: getCalculatedTagColumnWidth('CanonSites'),
CentroidRes: getCalculatedTagColumnWidth('CentroidRes'),
LongCode: getCalculatedTagColumnWidth('LongCode')
LongCode: getCalculatedTagColumnWidth('LongCode'),
});

/**
Expand Down Expand Up @@ -619,13 +619,13 @@ export const ObservationsDialog = memo(
let height = 0;
if (anchorEl) {
// available height of the window - top position of the anchor element, ie pose from hit navigator - "bottom margin"
const maxHeight = window.innerHeight - anchorEl?.getBoundingClientRect().top - 13;
// const maxHeight = window.innerHeight - anchorEl?.getBoundingClientRect().top - 13;
const observationsApproximateHeight = moleculeList.length * 47;
const headerFooterApproximateHeight = 87;
const totalApproximateHeight = observationsApproximateHeight + headerFooterApproximateHeight;
if (totalApproximateHeight > maxHeight) {
/*if (totalApproximateHeight > maxHeight) {
height = maxHeight;
} else if (totalApproximateHeight < MIN_PANEL_HEIGHT) {
} else*/ if (totalApproximateHeight < MIN_PANEL_HEIGHT) {
height = MIN_PANEL_HEIGHT;
} else {
height = totalApproximateHeight;
Expand Down Expand Up @@ -986,12 +986,9 @@ export const ObservationsDialog = memo(
container
justifyContent="space-around"
// adjust maxWidth if headers are a bit misplaced
style={{ maxWidth: '77%', marginLeft: 95 }}
style={{ maxWidth: '74%', marginLeft: 95 }}
>
<Grid item align="center" className={classes.headerCell} style={{ minWidth: headerWidths.TagName }} >
TagName
</Grid>
{['CanonSites', 'ConformerSites', 'CrystalformSites', 'Crystalforms', 'Quatassemblies'].map(
{['Quatassemblies', 'ConformerSites', 'Crystalforms', 'CrystalformSites', 'CanonSites'].map(
(tagCategory, index) => (
<Grid item align="center" key={index} className={classes.headerCell} style={{ minWidth: headerWidths[tagCategory] }}>
{PLURAL_TO_SINGULAR[tagCategory]}
Expand Down
6 changes: 3 additions & 3 deletions js/components/target/targetList.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -296,7 +296,7 @@ export const TargetList = memo(() => {
}
}
return initObject;
});
}, []);

useEffect(() => {
const init = initialize();
Expand Down Expand Up @@ -1145,8 +1145,8 @@ export const TargetList = memo(() => {
filteredListOfTargets !== undefined
? filteredListOfTargets
: listOfTargets !== undefined
? listOfTargets
: target_id_list,
? listOfTargets
: target_id_list,
projectsList
);
const slice = combinations.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage);
Expand Down
1 change: 1 addition & 0 deletions js/reducers/ngl/dispatchActions.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,6 +77,7 @@ export const loadObject = ({
}

console.count(`Before object is loaded`);
// versionFixedTarget can cause "Error: TypeError: path is null" in stage.loadFile
return nglObjectDictionary[versionFixedTarget.OBJECT_TYPE]({
stage,
input_dict: versionFixedTarget,
Expand Down

0 comments on commit 3169e8f

Please sign in to comment.