Issue #852: swap structure and sequence panels

src/RcsbFv3D/RcsbFv3DCustomComponent.tsx

@@ -65,15 +65,6 @@ export class RcsbFv3DCustomComponent<R,L,S> extends React.Component <RcsbFv3DCus
                     onMouseMove={(evt: MouseEvent<HTMLDivElement>)=>{this.mouseMove(evt)}}
                     onMouseUp={ (e)=>{this.splitPanelMouseUp()} }
                 >
-                    <div style={this.structureCssConfig(this.props.cssConfig?.structurePanel)} >
-                        <RcsbFvStructure<R,L,S>
-                            {...this.state.structurePanelConfig}
-                            componentId={this.props.id}
-                            structureViewer={this.props.structureViewer}
-                            stateManager={this.stateManager}
-                            structureViewerBehaviourObserver={this.props.structureViewerBehaviourObserver}
-                        />
-                    </div>
                     <div style={this.sequenceCssConfig(this.props.cssConfig?.sequencePanel)}  >
                         <RcsbFvCustomSequence<R,L>
                             config={this.state.sequencePanelConfig.config}
@@ -85,6 +76,15 @@ export class RcsbFv3DCustomComponent<R,L,S> extends React.Component <RcsbFv3DCus
                             unmount={this.props.unmount}
                         />
                     </div>
+                    <div style={this.structureCssConfig(this.props.cssConfig?.structurePanel)} >
+                        <RcsbFvStructure<R,L,S>
+                            {...this.state.structurePanelConfig}
+                            componentId={this.props.id}
+                            structureViewer={this.props.structureViewer}
+                            stateManager={this.stateManager}
+                            structureViewerBehaviourObserver={this.props.structureViewerBehaviourObserver}
+                        />
+                    </div>
                     {
                         this.panelDelimiter()
                     }
@@ -111,22 +111,22 @@ export class RcsbFv3DCustomComponent<R,L,S> extends React.Component <RcsbFv3DCus
                 this.splitPanelMouseDown()
             }}
             className={classes.rcsbFvSplitPanel}
-            style={{right: Math.round((1 - this.state.pfvScreenFraction) * 100) + "%"}}
+            style={{left: Math.round(this.state.pfvScreenFraction * 100) + "%"}}
         /> : <></>;
     }
 
     private structureCssConfig(css: CSSProperties | undefined): CSSProperties{
-        const widthFr: number = Math.round((1-this.state.pfvScreenFraction)*100);
+        const widthFr: number = Math.round((this.state.pfvScreenFraction)*100);
         const cssWidth: string = widthFr.toString()+"%";
         const cssHeight: string = "100%";
-        return {...(this.useDefaultCss() ? {width:cssWidth, height:cssHeight} : {}), ...css };
+        return {...(this.useDefaultCss() ? {width:cssWidth, height:cssHeight, overflowY:"auto", overflowX:"hidden", paddingBottom:5} : {}), ...css };
     }
 
     private sequenceCssConfig(css: CSSProperties | undefined): CSSProperties{
-        const widthFr: number = Math.round((this.state.pfvScreenFraction)*100);
+        const widthFr: number = Math.round((1-this.state.pfvScreenFraction)*100);
         const cssWidth: string = widthFr.toString()+"%";
         const cssHeight: string = "100%";
-        return {...(this.useDefaultCss() ? {width:cssWidth, height:cssHeight, overflowY:"auto", overflowX:"hidden", paddingBottom:5} : {}), ...css };
+        return {...(this.useDefaultCss() ? {width:cssWidth, height:cssHeight} : {}), ...css };
     }
 
     private static mainDivCssConfig(css: CSSProperties | undefined): CSSProperties{
@@ -192,4 +192,4 @@ export class RcsbFv3DCustomComponent<R,L,S> extends React.Component <RcsbFv3DCus
 
     private resize: null | ((evt: MouseEvent<HTMLDivElement>)=>void) = null;
 
-}
+}