unitcell label tweaks

src/mol-model/structure/model/properties/symmetry.ts

@@ -11,6 +11,7 @@ import { Model } from '../../model'
 import { Spacegroup } from '../../../../mol-math/geometry';
 import { Vec3 } from '../../../../mol-math/linear-algebra';
 import { ModelSymmetry } from '../../../../mol-model-formats/structure/property/symmetry';
+import { radToDeg } from '../../../../mol-math/misc';
 
 /** Determine an atom set and a list of operators that should be applied to that set  */
 export interface OperatorGroup {
@@ -67,6 +68,25 @@ namespace Symmetry {
         const symmetry = ModelSymmetry.Provider.get(model)
         return symmetry ? arrayFind(symmetry.assemblies, a => a.id.toLowerCase() === _id) : undefined;
     }
+
+    export function getUnitcellLabel(symmetry: Symmetry) {
+        const { cell, name, num } = symmetry.spacegroup
+        const { size, anglesInRadians } = cell
+        const a = size[0].toFixed(2)
+        const b = size[1].toFixed(2)
+        const c = size[2].toFixed(2)
+        const alpha = radToDeg(anglesInRadians[0]).toFixed(2)
+        const beta = radToDeg(anglesInRadians[1]).toFixed(2)
+        const gamma = radToDeg(anglesInRadians[2]).toFixed(2)
+        const label: string[] = []
+        // name
+        label.push(`Unitcell <b>${name}</b> #${num}`)
+        // sizes
+        label.push(`${a}\u00D7${b}\u00D7${c} \u212B`)
+        // angles
+        label.push(`\u03b1=${alpha}\u00B0 \u03b2=${beta}\u00B0 \u03b3=${gamma}\u00B0`)
+        return label.join(' | ')
+    }
 }
 
 export { Symmetry }

src/mol-plugin-ui/structure/unitcell.tsx

@@ -31,9 +31,7 @@ export class UnitcellEntry extends PurePluginUIComponent<{ cell: UnitcellCell },
 
     highlight = (e: React.MouseEvent<HTMLElement>) => {
         e.preventDefault();
-        if (!this.props.cell.state.isHidden) {
-            PluginCommands.Interactivity.Object.Highlight(this.plugin, { state: this.props.cell.parent, ref: this.props.cell.transform.ref });
-        }
+        PluginCommands.Interactivity.Object.Highlight(this.plugin, { state: this.props.cell.parent, ref: this.props.cell.transform.ref });
     }
 
     clearHighlight = (e: React.MouseEvent<HTMLElement>) => {
@@ -56,10 +54,12 @@ export class UnitcellEntry extends PurePluginUIComponent<{ cell: UnitcellCell },
         const { obj } = cell;
         if (!obj) return null;
 
+        const { label, description } = obj
+
         return <>
             <div className='msp-btn-row-group' style={{ marginTop: '6px' }}>
-                <button className='msp-form-control msp-control-button-label' title={`Unitcell. Click to focus.`} onClick={this.focus} onMouseEnter={this.highlight} onMouseLeave={this.clearHighlight} style={{ textAlign: 'left' }}>
-                    Unitcell
+                <button className='msp-form-control msp-control-button-label' title={`${label}. Click to focus.`} onClick={this.focus} onMouseEnter={this.highlight} onMouseLeave={this.clearHighlight} style={{ textAlign: 'left' }}>
+                    {label} <small>{description}</small>
                 </button>
                 <IconButton customClass='msp-form-control' onClick={this.toggleVisibility} icon='visual-visibility' toggleState={!cell.state.isHidden} title={`${cell.state.isHidden ? 'Show' : 'Hide'}`} small style={{ flex: '0 0 32px' }} />
                 <IconButton customClass='msp-form-control' onClick={this.toggleOptions} icon='dot-3' title='Options' toggleState={this.state.showOptions} style={{ flex: '0 0 32px', padding: '0px' }} />

src/mol-repr/shape/model/unitcell.ts

@@ -15,7 +15,6 @@ import { MeshBuilder } from '../../../mol-geo/geometry/mesh/mesh-builder';
 import { BoxCage } from '../../../mol-geo/primitive/box';
 import { Mat4, Vec3 } from '../../../mol-math/linear-algebra';
 import { transformCage, cloneCage } from '../../../mol-geo/primitive/cage';
-import { radToDeg } from '../../../mol-math/misc';
 import { Sphere3D } from '../../../mol-math/geometry';
 import { RepresentationParamsGetter, Representation, RepresentationContext } from '../../representation';
 
@@ -80,29 +79,10 @@ function getUnitcellMesh(data: UnitcellData, props: UnitcellProps, mesh?: Mesh)
     return m
 }
 
-function getUnitcellLabel(data: UnitcellData) {
-    const { cell, name, num } = data.symmetry.spacegroup
-    const { size, anglesInRadians } = cell
-    const a = size[0].toFixed(2)
-    const b = size[1].toFixed(2)
-    const c = size[2].toFixed(2)
-    const alpha = radToDeg(anglesInRadians[0]).toFixed(2)
-    const beta = radToDeg(anglesInRadians[1]).toFixed(2)
-    const gamma = radToDeg(anglesInRadians[2]).toFixed(2)
-    const label: string[] = []
-    // name
-    label.push(`${name} #${num}`)
-    // sizes
-    label.push(`${a}\u00D7${b}\u00D7${c} \u212B`)
-    // angles
-    label.push(`\u03b1=${alpha}\u00B0 \u03b2=${beta}\u00B0 \u03b3=${gamma}\u00B0`)
-    return label.join(' | ')
-}
-
 function getUnitcellShape(ctx: RuntimeContext, data: UnitcellData, props: UnitcellProps, shape?: Shape<Mesh>) {
     const geo = getUnitcellMesh(data, props, shape && shape.geometry);
-    const label = getUnitcellLabel(data)
-    return Shape.create('Unitcell', data, geo, () => props.cellColor, () => 1, () => label)
+    const label = Symmetry.getUnitcellLabel(data.symmetry)
+    return Shape.create(label, data, geo, () => props.cellColor, () => 1, () => label)
 }
 
 //