Custom sequence viewer as a plugin spec (#988)

Factored out of #936

Co-authored-by: David Sehnal <dsehnal@users.noreply.github.com>

CHANGELOG.md

@@ -18,6 +18,7 @@ Note that since we don't clearly distinguish between a public and private interf
 - Do not activate drag overlay for non-file content
 - Add `structure-element-sphere` visual to `spacefill` representation
 - Fix missing `await` in `HeadlessPluginContext.saveStateSnapshot`
+- Added support for providing custom sequence viewers to the plugin spec
 - MolViewSpec extension (MVS)
 - Add URL parameters `mvs-url`, `mvs-data`, `mvs-format`
 - Add drag&drop for `.mvsj` files

package.json

@@ -99,7 +99,8 @@
     "Zhenyu Zhang <jump2cn@gmail.com>",
     "Russell Parker <russell@benchling.com>",
     "Dominik Tichy <tichydominik451@gmail.com>",
-    "Yana Rose <yana.v.rose@gmail.com>"
+    "Yana Rose <yana.v.rose@gmail.com>",
+    "Yakov Pechersky <ffxen158@gmail.com>"
   ],
   "license": "MIT",
   "devDependencies": {

src/mol-plugin-ui/plugin.tsx

@@ -193,12 +193,13 @@ class Layout extends PluginUIComponent {
         const layout = this.plugin.layout.state;
         const controls = this.plugin.spec.components?.controls || {};
         const viewport = this.plugin.spec.components?.viewport?.view || DefaultViewport;
+        const sequenceView = this.plugin.spec.components?.sequenceViewer?.view || SequenceView;
 
         return <div className='msp-plugin'>
             <div className={this.layoutClassName} onDragEnter={this.onDragEnter}>
                 <div className={this.layoutVisibilityClassName}>
                     {this.region('main', viewport)}
-                    {layout.showControls && controls.top !== 'none' && this.region('top', controls.top || SequenceView)}
+                    {layout.showControls && controls.top !== 'none' && this.region('top', controls.top || sequenceView)}
                     {layout.showControls && controls.left !== 'none' && this.region('left', controls.left || LeftPanelControls)}
                     {layout.showControls && controls.right !== 'none' && this.region('right', controls.right || ControlsWrapper)}
                     {layout.showControls && controls.bottom !== 'none' && this.region('bottom', controls.bottom || Log)}

src/mol-plugin-ui/spec.ts

@@ -24,6 +24,9 @@ interface PluginUISpec extends PluginSpec {
             view?: React.ComponentClass,
             controls?: React.ComponentClass
         },
+        sequenceViewer?: {
+            view?: React.ComponentClass
+        }
         hideTaskOverlay?: boolean,
         disableDragOverlay?: boolean,
     },