From 3169e8f4e9a0a4b6ec04dab8a8cb7ad4d7a45677 Mon Sep 17 00:00:00 2001 From: matej <60509086+matej-vavrek@users.noreply.github.com> Date: Thu, 12 Sep 2024 19:10:34 +0200 Subject: [PATCH] #1508 (#447) * Squashed commit of the following: commit e61321646b0f62c6ba81ca8dbbb8a328405819c4 Author: Boris Kovar 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 --- .../molecule/moleculeView/moleculeView.js | 34 +++++++++---------- .../observationCmpView/observationCmpView.js | 2 +- .../preview/molecule/observationsDialog.js | 25 ++++++-------- js/components/target/targetList.js | 6 ++-- js/reducers/ngl/dispatchActions.js | 1 + 5 files changed, 32 insertions(+), 36 deletions(-) diff --git a/js/components/preview/molecule/moleculeView/moleculeView.js b/js/components/preview/molecule/moleculeView/moleculeView.js index 80012de7b..faa448e84 100644 --- a/js/components/preview/molecule/moleculeView/moleculeView.js +++ b/js/components/preview/molecule/moleculeView/moleculeView.js @@ -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({ @@ -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 => { @@ -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 ( <> {/* Title label */} - + { @@ -1435,7 +1438,7 @@ const MoleculeView = memo( const tagLabel = tagCategory === 'ConformerSites' ? tagTypeObject.tag_prefix.replace(getTagType('CanonSites')?.tag_prefix, '') : tagTypeObject?.tag_prefix; return {PLURAL_TO_SINGULAR[tagCategory]} - {tagTypeObject.upload_name}} + title={
{PLURAL_TO_SINGULAR[tagCategory]} - {tagTypeObject.tag}
} > } {showExpandedView && - - - {getTagType('CanonSites')?.tag} - - - {XCA_TAGS_CATEGORIES.map((tagCategory, index) => { - return + {XCA_TAGS_CATEGORIES_EXPANDED.map((tagCategory, index) => { + return {getTagLabel(tagCategory)} diff --git a/js/components/preview/molecule/observationCmpView/observationCmpView.js b/js/components/preview/molecule/observationCmpView/observationCmpView.js index f18d11ee3..a4e33dffd 100644 --- a/js/components/preview/molecule/observationCmpView/observationCmpView.js +++ b/js/components/preview/molecule/observationCmpView/observationCmpView.js @@ -1328,7 +1328,7 @@ const ObservationCmpView = memo( {/* Title label */} - + { diff --git a/js/components/preview/molecule/observationsDialog.js b/js/components/preview/molecule/observationsDialog.js index 4afa77319..c57e617db 100644 --- a/js/components/preview/molecule/observationsDialog.js +++ b/js/components/preview/molecule/observationsDialog.js @@ -268,7 +268,8 @@ 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; }; @@ -276,14 +277,13 @@ export const ObservationsDialog = memo( 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'), }); /** @@ -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; @@ -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 }} > - - TagName - - {['CanonSites', 'ConformerSites', 'CrystalformSites', 'Crystalforms', 'Quatassemblies'].map( + {['Quatassemblies', 'ConformerSites', 'Crystalforms', 'CrystalformSites', 'CanonSites'].map( (tagCategory, index) => ( {PLURAL_TO_SINGULAR[tagCategory]} diff --git a/js/components/target/targetList.js b/js/components/target/targetList.js index 4318ab7f0..63afebd0f 100644 --- a/js/components/target/targetList.js +++ b/js/components/target/targetList.js @@ -296,7 +296,7 @@ export const TargetList = memo(() => { } } return initObject; - }); + }, []); useEffect(() => { const init = initialize(); @@ -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); diff --git a/js/reducers/ngl/dispatchActions.js b/js/reducers/ngl/dispatchActions.js index f3ed7688d..c15f95588 100644 --- a/js/reducers/ngl/dispatchActions.js +++ b/js/reducers/ngl/dispatchActions.js @@ -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,