Skip to content

Commit

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

* #1508 adjusted column order and width calculation

---------

Co-authored-by: Boris Kovar <boris.kovar@m2ms.sk>
  • Loading branch information
@matej-vavrek @boriskovar-m2ms
matej-vavrek and boriskovar-m2ms authored Sep 13, 2024
1 parent 3169e8f commit fdf2a7c
Show file tree
Hide file tree
Showing 2 changed files with 11 additions and 13 deletions.
10 changes: 4 additions & 6 deletions js/components/preview/molecule/moleculeView/moleculeView.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -358,6 +358,8 @@ export const img_data_init = `<svg xmlns="http://www.w3.org/2000/svg" version="1
<animateTransform attributeName="transform" type="rotate" repeatCount="indefinite" dur="0.689655172413793s" values="0 50 50;360 50 50" keyTimes="0;1"></animateTransform>
</circle> '</svg>`;

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

const MoleculeView = memo(
({
imageHeight,
Expand Down Expand Up @@ -476,9 +478,6 @@ const MoleculeView = memo(
setTagEditModalOpenNew(tagEditorOpenObs);
}, [tagEditorOpenObs]);

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

useEffect(() => {
api({
url: `${base_url}/api/canon_site_confs/`,
Expand Down Expand Up @@ -523,7 +522,7 @@ const MoleculeView = memo(
setHeaderWidthsHandler(getTagLabel(tagCategory), tagCategory);
})
}
}, [showExpandedView, getTagType, getTagLabel, centroidRes, data.longcode, setHeaderWidthsHandler, XCA_TAGS_CATEGORIES]);
}, [showExpandedView, getTagType, getTagLabel, centroidRes, data.longcode, setHeaderWidthsHandler]);

const handlePopoverOpen = event => {
setTagPopoverOpen(event.currentTarget);
Expand Down Expand Up @@ -1428,7 +1427,6 @@ const MoleculeView = memo(
xs={5}
container
direction="row"
justifyContent="center"
alignItems="center"
// wrap="nowrap"
style={{ height: "100%" }}
Expand Down Expand Up @@ -1488,7 +1486,7 @@ const MoleculeView = memo(
</div>}
</Grid>
{showExpandedView && <Grid item container alignItems='center' wrap="nowrap">
{XCA_TAGS_CATEGORIES_EXPANDED.map((tagCategory, index) => {
{XCA_TAGS_CATEGORIES.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)}
Expand Down
14 changes: 7 additions & 7 deletions js/components/preview/molecule/observationsDialog.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,7 @@ import { updateLHSCompound, updateMoleculeInMolLists, updateMoleculeTag, updateT
import { createPoseErrorMessage } from './api/poseApi';
import { augumentTagObjectWithId, createMoleculeTagObject, DEFAULT_TAG_COLOR, getMoleculeTagForTag } from '../tags/utils/tagUtils';
import { updateExistingTag } from '../tags/api/tagsApi';
import { XCA_TAGS_CATEGORIES } from './moleculeView/moleculeView';

const MIN_PANEL_HEIGHT = 250;

Expand Down Expand Up @@ -277,11 +278,11 @@ export const ObservationsDialog = memo(
const [tagEditorAnchorEl, setTagEditorAnchorEl] = useState(null);
const [expandView, setExpandView] = useState(null);
const [headerWidths, setHeaderWidths] = useState({
Quatassemblies: getCalculatedTagColumnWidth('Quatassemblies'),
CanonSites: getCalculatedTagColumnWidth('CanonSites'),
ConformerSites: getCalculatedTagColumnWidth('ConformerSites'),
Quatassemblies: getCalculatedTagColumnWidth('Quatassemblies'),
Crystalforms: getCalculatedTagColumnWidth('Crystalforms'),
CrystalformSites: getCalculatedTagColumnWidth('CrystalformSites'),
CanonSites: getCalculatedTagColumnWidth('CanonSites'),
CentroidRes: getCalculatedTagColumnWidth('CentroidRes'),
LongCode: getCalculatedTagColumnWidth('LongCode'),
});
Expand All @@ -292,7 +293,7 @@ export const ObservationsDialog = memo(
* @param {*} tagCategory
*/
const setHeaderWidthsHandler = (tagText, tagCategory) => {
const calculatedWidth = getCalculatedTagColumnWidth(tagText, '12px bold');
const calculatedWidth = getCalculatedTagColumnWidth(tagText, 'bold 12px');
if (headerWidths[tagCategory] < calculatedWidth) {
setHeaderWidths(old => {
const newWidths = { ...old };
Expand Down Expand Up @@ -984,11 +985,10 @@ export const ObservationsDialog = memo(
item
xs
container
justifyContent="space-around"
// adjust maxWidth if headers are a bit misplaced
style={{ maxWidth: '74%', marginLeft: 95 }}
alignItems="center"
style={{ marginLeft: 95 }}
>
{['Quatassemblies', 'ConformerSites', 'Crystalforms', 'CrystalformSites', 'CanonSites'].map(
{XCA_TAGS_CATEGORIES.map(
(tagCategory, index) => (
<Grid item align="center" key={index} className={classes.headerCell} style={{ minWidth: headerWidths[tagCategory] }}>
{PLURAL_TO_SINGULAR[tagCategory]}
Expand Down

0 comments on commit fdf2a7c

Please sign in to comment.