more fine-grained options for UI controls

CHANGELOG.md

@@ -2,6 +2,11 @@
 
 [Semantic Versioning](https://semver.org/)
 
+## Unreleased
+### Added
+- Expose Quick Styles functionality
+- More fine-grained options for UI controls
+
 ## [2.1.2] - 2022-02-08
 ### General
 - RO-2766: Allow strucmotif of 2 residues

src/viewer/index.ts

@@ -10,7 +10,7 @@
 import { BehaviorSubject } from 'rxjs';
 import { Plugin } from 'molstar/lib/mol-plugin-ui/plugin';
 import { PluginCommands } from 'molstar/lib/mol-plugin/commands';
-import { ViewerState as ViewerState, CollapsedState, ModelUrlProvider } from './types';
+import { ViewerState, CollapsedState, ModelUrlProvider } from './types';
 import { PluginSpec } from 'molstar/lib/mol-plugin/spec';
 
 import { ColorNames } from 'molstar/lib/mol-util/color/names';
@@ -45,6 +45,7 @@ import { MAQualityAssessment } from 'molstar/lib/extensions/model-archive/qualit
 import { ModelExport } from 'molstar/lib/extensions/model-export';
 import { exportHierarchy } from 'molstar/lib/extensions/model-export/export';
 import { GeometryExport } from 'molstar/lib/extensions/geo-export';
+import { Mp4Export } from 'molstar/lib/extensions/mp4-export';
 
 /** package version, filled in at bundle build time */
 declare const __RCSB_MOLSTAR_VERSION__: string;
@@ -61,6 +62,7 @@ const Extensions = {
     'anvil-membrane-orientation': PluginSpec.Behavior(ANVILMembraneOrientation),
     'ma-quality-assessment': PluginSpec.Behavior(MAQualityAssessment),
     'model-export': PluginSpec.Behavior(ModelExport),
+    'mp4-export': PluginSpec.Behavior(Mp4Export),
     'geo-export': PluginSpec.Behavior(GeometryExport),
 };
 
@@ -68,9 +70,15 @@ const DefaultViewerProps = {
     showImportControls: false,
     showSessionControls: false,
     showStructureSourceControls: true,
+    showMeasurementsControls: true,
+    showStrucmotifSubmitControls: true,
     showSuperpositionControls: true,
-    showMembraneOrientationPreset: false,
+    showQuickStylesControls: false,
+    showStructureComponentControls: true,
+    showVolumeStreamingControls: true,
     showValidationReportControls: true,
+
+    showMembraneOrientationPreset: false,
     /**
      * Needed when running outside of sierra. If set to true, the strucmotif UI will use an absolute URL to sierra-prod.
      * Otherwise, the link will be relative on the current host.
@@ -164,20 +172,24 @@ export class Viewer {
             showImportControls: o.showImportControls,
             showSessionControls: o.showSessionControls,
             showStructureSourceControls: o.showStructureSourceControls,
+            showMeasurementsControls: o.showMeasurementsControls,
+            showStrucmotifSubmitControls: o.showStrucmotifSubmitControls,
             showSuperpositionControls: o.showSuperpositionControls,
+            showQuickStylesControls: o.showQuickStylesControls,
+            showStructureComponentControls: o.showStructureComponentControls,
+            showVolumeStreamingControls: o.showVolumeStreamingControls,
             showValidationReportControls: o.showValidationReportControls,
             modelLoader: new ModelLoader(this._plugin),
             collapsed: new BehaviorSubject<CollapsedState>({
                 selection: true,
-                strucmotifSubmit: true,
                 measurements: true,
+                strucmotifSubmit: true,
                 superposition: true,
+                quickStyles: false,
                 component: false,
                 volume: true,
+                validationReport: true,
                 custom: true,
-                // this must be set to true as the Mp4Controls depends on the canvas which will be undefined at init() time
-                mp4export: true,
-                validationReport: true
             }),
             detachedFromSierra: o.detachedFromSierra
         };

src/viewer/types.ts

@@ -34,23 +34,30 @@ export interface ParseParams extends SharedParams {
 
 export type CollapsedState = {
     selection: boolean
-    strucmotifSubmit: boolean
     measurements: boolean
+    strucmotifSubmit: boolean
     superposition: boolean
+    quickStyles: boolean
     component: boolean
     volume: boolean
-    custom: boolean
-    mp4export: boolean
     validationReport: boolean
+    custom: boolean
 }
 
 export interface ViewerState {
     showImportControls: boolean
     showSessionControls: boolean
     showStructureSourceControls: boolean
+    showMeasurementsControls: boolean
+    showStrucmotifSubmitControls: boolean
     showSuperpositionControls: boolean
+    showQuickStylesControls: boolean
+    showStructureComponentControls: boolean
+    showVolumeStreamingControls: boolean
     showValidationReportControls: boolean
+
     modelLoader: ModelLoader
+
     collapsed: BehaviorSubject<CollapsedState>
     detachedFromSierra: boolean
 }

src/viewer/ui/controls.tsx

@@ -15,8 +15,8 @@ import { StructureComponentControls } from 'molstar/lib/mol-plugin-ui/structure/
 import { VolumeStreamingControls } from 'molstar/lib/mol-plugin-ui/structure/volume';
 import { SessionControls } from './session';
 import { StrucmotifSubmitControls } from './strucmotif';
-import { Mp4EncoderUI } from 'molstar/lib/extensions/mp4-export/ui';
 import { ValidationReportControls } from './validation';
+import { StructureQuickStylesControls } from 'molstar/lib/mol-plugin-ui/structure/quick-styles';
 
 export class StructureTools extends PluginUIComponent {
     get customState() {
@@ -31,14 +31,14 @@ export class StructureTools extends PluginUIComponent {
         const collapsed = this.customState.collapsed.value;
         return <>
             {this.customState.showStructureSourceControls && <StructureSourceControls />}
-            <StructureMeasurementsControls initiallyCollapsed={collapsed.measurements} />
-            <StrucmotifSubmitControls initiallyCollapsed={collapsed.strucmotifSubmit} />
+            {this.customState.showMeasurementsControls && <StructureMeasurementsControls initiallyCollapsed={collapsed.measurements} />}
+            {this.customState.showStrucmotifSubmitControls && <StrucmotifSubmitControls initiallyCollapsed={collapsed.strucmotifSubmit} />}
             {this.customState.showSuperpositionControls && <StructureSuperpositionControls initiallyCollapsed={collapsed.superposition} />}
-            <StructureComponentControls initiallyCollapsed={collapsed.component} />
-            <VolumeStreamingControls header='Density' initiallyCollapsed={collapsed.volume} />
+            {this.customState.showQuickStylesControls && <StructureQuickStylesControls initiallyCollapsed={collapsed.quickStyles} />}
+            {this.customState.showStructureComponentControls && <StructureComponentControls initiallyCollapsed={collapsed.component} />}
+            {this.customState.showVolumeStreamingControls && <VolumeStreamingControls header='Density' initiallyCollapsed={collapsed.volume} />}
             {this.customState.showValidationReportControls && <ValidationReportControls initiallyCollapsed={collapsed.validationReport} />}
             <CustomStructureControls initiallyCollapsed={collapsed.custom} />
-            <Mp4EncoderUI initiallyCollapsed={collapsed.mp4export}/>
         </>;
     }
 }