#1482 added TagName and CentroidRes columns for expanded view of obse…

…rvation dialog

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

@@ -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: {
@@ -346,7 +348,8 @@ const useStyles = makeStyles(theme => ({
  categoryCell: {
  padding: '4px 8px',
  fontWeight: 'bold',
- textWrap: 'nowrap'
+ textWrap: 'nowrap',
+ fontSize: 12
  }
 }));
 
@@ -382,7 +385,9 @@ const MoleculeView = memo(
  disableP,
  disableC,
  hideImage,
- showExpandedView
+ showExpandedView,
+ headerWidths,
+ setHeaderWidthsHandler
  }) => {
  // const [countOfVectors, setCountOfVectors] = useState('-');
  // const [cmpds, setCmpds] = useState('-');
@@ -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);
 
@@ -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);
  };
@@ -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
@@ -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
@@ -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

js/components/preview/molecule/observationsDialog.js

@@ -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';
@@ -190,7 +190,7 @@ const useStyles = makeStyles(theme => ({
  }
  },
  headerCell: {
- padding: '0px 12px',
+ padding: '0px 8px',
  borderColor: 'black',
  fontSize: 12
  }
@@ -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) {
@@ -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>
@@ -794,6 +834,8 @@ export const ObservationsDialog = memo(
  setRef={setTagEditorAnchorEl}
  hideImage={true}
  showExpandedView={expandView}
+ headerWidths={headerWidths}
+ setHeaderWidthsHandler={setHeaderWidthsHandler}
  />
  </GroupNglControlButtonsContext.Provider>
  );