SequenceView: fix polymers & everything modes

src/mol-plugin-ui/sequence.tsx

@@ -377,9 +377,16 @@ export class SequenceView extends PluginUIComponent<{ defaultMode?: SequenceView
 
             <NonEmptySequenceWrapper>
                 {sequenceWrappers.map((s, i) => {
-                    return typeof s.wrapper === 'string'
+                    const elem = typeof s.wrapper === 'string'
                         ? <div key={i} className='msp-sequence-wrapper'>{s.wrapper}</div>
-                        : <Sequence key={i} sequenceWrapper={s.wrapper} label={values.mode === 'single' ? void 0 : s.label} />;
+                        : <Sequence key={i} sequenceWrapper={s.wrapper} />;
+
+                    if (values.mode === 'single') return elem;
+
+                    return <>
+                        <div className='msp-sequence-chain-label'>{s.label}</div>
+                        {elem}
+                    </>;
                 })}
             </NonEmptySequenceWrapper>
         </div>;

src/mol-plugin-ui/sequence/sequence.tsx

@@ -20,7 +20,6 @@ type SequenceProps = {
     sequenceWrapper: SequenceWrapper.Any,
     sequenceNumberPeriod?: number,
     hideSequenceNumbers?: boolean,
-    label?: string
 }
 
 /** Note, if this is changed, the CSS for `msp-sequence-number` needs adjustment too */
@@ -301,7 +300,6 @@ export class Sequence<P extends SequenceProps> extends PluginUIComponent<P> {
             onMouseLeave={this.mouseLeave}
             ref={this.parentDiv}
         >
-            {this.props.label && <div className='msp-sequence-label'>{this.props.label}</div>}
             {elems}
         </div>;
     }

src/mol-plugin-ui/skin/base/components/sequence.scss

@@ -61,6 +61,16 @@ $sequence-select-height: 24px;
     right: 0;
 }
 
+.msp-sequence-chain-label {
+    margin-left: $control-spacing;
+    margin-top: $control-spacing;
+    user-select: none;
+    color: $sequence-number-color;
+    font-size: 90%;
+    line-height: 90%;
+    padding-left: 0.2em;
+}
+
 .msp-sequence-wrapper {
     span {
         cursor: pointer;
@@ -81,7 +91,7 @@ $sequence-select-height: 24px;
         padding-bottom: 1em;
         padding-left: 0.2em;
     }
-
+    
     .msp-sequence-number {
         color: $sequence-number-color;
         word-break: keep-all;