made StructureMeasurementsControls seperate panel again

src/mol-plugin-ui/controls.tsx

@@ -21,6 +21,7 @@ import { Icon } from './controls/icons';
 import { StructureComponentControls } from './structure/components';
 import { StructureSourceControls } from './structure/source';
 import { VolumeStreamingControls } from './structure/volume';
+import { StructureMeasurementsControls } from './structure/measurements';
 
 export class TrajectoryViewportControls extends PluginUIComponent<{}, { show: boolean, label: string }> {
     state = { show: false, label: '' }
@@ -284,6 +285,7 @@ export class DefaultStructureTools extends PluginUIComponent {
 
             <StructureSourceControls />
             <StructureSelectionControls />
+            <StructureMeasurementsControls />
             <StructureComponentControls />
             <VolumeStreamingControls />
 

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

@@ -13,7 +13,7 @@ import { PluginStateObject } from '../../mol-plugin-state/objects';
 import { PluginCommands } from '../../mol-plugin/commands';
 import { angleLabel, dihedralLabel, distanceLabel, lociLabel } from '../../mol-theme/label';
 import { FiniteArray } from '../../mol-util/type-helpers';
-import { PurePluginUIComponent } from '../base';
+import { PurePluginUIComponent, CollapsableControls } from '../base';
 import { ActionMenu } from '../controls/action-menu';
 import { ExpandGroup, IconButton, ToggleButton, Button } from '../controls/common';
 import { Icon } from '../controls/icons';
@@ -22,12 +22,19 @@ import { UpdateTransformControl } from '../state/update-transform';
 
 // TODO details, options (e.g. change text for labels)
 
-export class StructureMeasurementsControls extends PurePluginUIComponent {
-    render() {
-        return <ExpandGroup header='Measurements' noOffset>
+export class StructureMeasurementsControls extends CollapsableControls {
+    defaultState() {
+        return {
+            isCollapsed: false,
+            header: 'Measurements',
+        }
+    }
+
+    renderControls() {
+        return <>
             <MeasurementControls />
             <MeasurementList />
-        </ExpandGroup>
+        </>
     }
 }
 

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

@@ -18,7 +18,6 @@ import { CollapsableControls, CollapsableState, PurePluginUIComponent } from '..
 import { ActionMenu } from '../controls/action-menu';
 import { ControlGroup, ToggleButton, IconButton, Button } from '../controls/common';
 import { ParameterControls } from '../controls/parameters';
-import { StructureMeasurementsControls } from './measurements';
 
 const StructureSelectionParams = {
     granularity: InteractivityManager.Params.granularity,
@@ -174,7 +173,6 @@ export class StructureSelectionControls<P, S extends StructureSelectionControlsS
                 </Button>
                 {!empty && <IconButton onClick={this.clear} icon='cancel' title='Clear' className='msp-form-control' flex />}
             </div>
-            <StructureMeasurementsControls />
         </>
     }
 }