Home Explore Help
Sign In
web
/
TmMolStar
3
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

update partial configs && unmount callback

bioinsilico 3 years ago
parent
f800a1bcdb
commit
8956ed5dc1
9 changed files with 67 additions and 18 deletions
Split View Show Diff Stats
  1. 7 0
      CHANGELOG.md
  2. 1 1
      cdn-examples/multiple-chain/index.html
  3. 1 1
      cdn-examples/single-chain/index.html
  4. 22 6
      src/RcsbFv3D/RcsbFv3DAbstract.tsx
  5. 5 5
      src/RcsbFv3D/RcsbFv3DComponent.tsx
  6. 2 2
      src/RcsbFvContextManager/RcsbFvContextManager.ts
  7. 1 1
      src/RcsbFvSequence/SequenceViews/AbstractView.tsx
  8. 3 1
      src/RcsbFvSequence/SequenceViews/AssemblyView/AssemblyView.tsx
  9. 25 1
      src/RcsbFvSequence/SequenceViews/CustomView.tsx

+ 7 - 0
CHANGELOG.md
View File 

@@ -2,6 +2,13 @@
 
 
 [Semantic Versioning](https://semver.org/)
 
 
+## [1.3.5] - 2022-03-28
 
+### Improvements
 
+- `RcsbFv3DAbstract.updateConfig` method accepts partial states (`Partial<RcsbFvStructureInterface>` and `Partial<RcsbFvSequenceInterface>`)
 
+- `RcsbFv3DAbstract.unmount` method includes an optional callback executed after when the component is unmounted
 
+  - Assembly view `Back` link action has been refactored using the unmount-callback
 
+- Minor code refactoring
 
+
 
 ## [1.3.4] - 2022-03-07
 
 ### Bug fixes
 
 - NMR model change bug fix. New strategy to find the right `modeId` filtering the `assemblyModelSate`

+ 1 - 1
cdn-examples/multiple-chain/index.html
View File 

@@ -5,7 +5,7 @@
 
     <title>JavaScript example</title>
 
     <script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
 
     <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
 
-    <script crossorigin src="https://cdn.jsdelivr.net/npm/@rcsb/rcsb-saguaro-3d@1.0.2-beta/build/dist/app.js"></script>
 
+    <script crossorigin src="https://cdn.jsdelivr.net/npm/@rcsb/rcsb-saguaro-3d/build/dist/app.js"></script>
 
     <script src="./index.js"></script>
 
 </head>
 
 <body>

+ 1 - 1
cdn-examples/single-chain/index.html
View File 

@@ -5,7 +5,7 @@
 
     <title>JavaScript example</title>
 
     <script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
 
     <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
 
-    <script crossorigin src="https://cdn.jsdelivr.net/npm/@rcsb/rcsb-saguaro-3d@1.0.2-beta/build/dist/app.js"></script>
 
+    <script crossorigin src="https://cdn.jsdelivr.net/npm/@rcsb/rcsb-saguaro-3d/build/dist/app.js"></script>
 
     <script src="./index.js"></script>
 
 </head>
 
 <body>

+ 22 - 6
src/RcsbFv3D/RcsbFv3DAbstract.tsx
View File 

@@ -19,6 +19,7 @@ export abstract class RcsbFv3DAbstract {
 
     protected sequenceConfig: RcsbFvSequenceInterface;
 
     protected ctxManager: RcsbFvContextManager = new RcsbFvContextManager();
 
     private fullScreenFlag: boolean = false;
 
+    private overflowStyle: string = "";
 
     protected cssConfig:{
 
         rootPanel?: CSSProperties,
 
         structurePanel?: CSSProperties,
 
@@ -39,8 +40,7 @@ export abstract class RcsbFv3DAbstract {
 
         if(element.getAttribute("id") == null) {
 
             element.setAttribute("id", this.elementId);
 
             document.body.append(element);
 
-            this.fullScreenFlag = true;
 
-            document.body.style.overflow = "hidden";
 
+            this.fullScreen("on");
 
         }
 
         ReactDom.render(
 
             <RcsbFv3DComponent
 
@@ -56,19 +56,20 @@ export abstract class RcsbFv3DAbstract {
 
         );
 
     }
 
 
-    public unmount(removeHtmlElement?:boolean): void{
 
+    public unmount(removeHtmlElement?:boolean, unmountCallback?:()=>{}): void{
 
         const element: HTMLElement | null = document.getElementById(this.elementId);
 
         if(element != null) {
 
             ReactDom.unmountComponentAtNode(element);
 
             if(removeHtmlElement) {
 
                 element.remove();
 
-                document.body.style.overflow = "visible";
 
             }
 
-            window.history.back();
 
+            if(typeof unmountCallback === "function")
 
+                unmountCallback();
 
+            this.fullScreen("off")
 
         }
 
     }
 
 
-    public updateConfig(config: {structurePanelConfig?: RcsbFvStructureInterface; sequencePanelConfig?: RcsbFvSequenceInterface;}){
 
+    public updateConfig(config: {structurePanelConfig?: Partial<RcsbFvStructureInterface>; sequencePanelConfig?: Partial<RcsbFvSequenceInterface>;}){
 
         this.ctxManager.next({eventType: EventType.UPDATE_CONFIG, eventData:config});
 
     }
 
 
@@ -76,4 +77,19 @@ export abstract class RcsbFv3DAbstract {
 
         this.ctxManager.next({eventType: EventType.PLUGIN_CALL, eventData:f});
 
     }
 
 
+    private fullScreen(mode: "on" | "off"): void {
 
+        switch (mode){
 
+            case "on":
 
+                this.fullScreenFlag = true;
 
+                this.overflowStyle = document.body.style.overflow;
 
+                document.body.style.overflow = "hidden";
 
+                break;
 
+            case "off":
 
+                this.fullScreenFlag = false;
 
+                document.body.style.overflow = this.overflowStyle;
 
+                break;
 
+        }
 
+
 
+    }
 
+
 
 }

+ 5 - 5
src/RcsbFv3D/RcsbFv3DComponent.tsx
View File 

@@ -155,14 +155,14 @@ export class RcsbFv3DComponent extends React.Component <RcsbFv3DComponentInterfa
 
     }
 
 
     private updateConfig(config:UpdateConfigInterface){
 
-        const structureConfig: RcsbFvStructureInterface | undefined = config.structurePanelConfig;
 
-        const sequenceConfig: RcsbFvSequenceInterface | undefined = config.sequencePanelConfig;
 
+        const structureConfig: Partial<RcsbFvStructureInterface> | undefined = config.structurePanelConfig;
 
+        const sequenceConfig: Partial<RcsbFvSequenceInterface> | undefined = config.sequencePanelConfig;
 
         if(structureConfig != null && sequenceConfig != null){
 
-            this.setState({structurePanelConfig:structureConfig, sequencePanelConfig:sequenceConfig});
 
+            this.setState({structurePanelConfig:{...this.state.structurePanelConfig, ...structureConfig}, sequencePanelConfig:{...this.state.sequencePanelConfig, ...sequenceConfig}});
 
         }else if(structureConfig != null){
 
-            this.setState({structurePanelConfig:structureConfig});
 
+            this.setState({structurePanelConfig:{...this.state.structurePanelConfig, ...structureConfig}});
 
         }else if(sequenceConfig != null){
 
-            this.setState({sequencePanelConfig: sequenceConfig});
 
+            this.setState({sequencePanelConfig:{...this.state.sequencePanelConfig, ...sequenceConfig}});
 
         }
 
     }

+ 2 - 2
src/RcsbFvContextManager/RcsbFvContextManager.ts
View File 

@@ -16,8 +16,8 @@ export enum EventType {
 
 }
 
 
 export interface UpdateConfigInterface {
 
-    structurePanelConfig?:RcsbFvStructureInterface;
 
-    sequencePanelConfig?:RcsbFvSequenceInterface;
 
+    structurePanelConfig?:Partial<RcsbFvStructureInterface>;
 
+    sequencePanelConfig?:Partial<RcsbFvSequenceInterface>;
 
 }
 
 
 /**rxjs Event Handler Object. It allows objects to subscribe methods and then, get(send) events to(from) other objects*/

+ 1 - 1
src/RcsbFvSequence/SequenceViews/AbstractView.tsx
View File 

@@ -16,7 +16,7 @@ export interface AbstractViewInterface {
 
     subtitle?: string;
 
     plugin: SaguaroPluginInterface;
 
     selectorManager: RcsbFvSelectorManager;
 
-    unmount:(flag:boolean)=>void;
 
+    unmount:(flag:boolean,callback:()=>void)=>void;
 
 }
 
 
 export abstract class AbstractView<P,S> extends React.Component <P & AbstractViewInterface, S> implements SequenceViewInterface {

+ 3 - 1
src/RcsbFvSequence/SequenceViews/AssemblyView/AssemblyView.tsx
View File 

@@ -61,7 +61,9 @@ export class AssemblyView extends AbstractView<AssemblyViewInterface & AbstractV
 
                     <a style={{textDecoration:"none", color:"#337ab7", cursor:"pointer", marginRight:15}} target={"_blank"} href={"/docs/sequence-viewers/3d-protein-feature-view"}>
 
                         Help
 
                     </a>
 
-                    <a style={{textDecoration:"none", color: "#337ab7", cursor:"pointer"}} onClick={()=>{this.props.unmount(true)}}>
 
+                    <a style={{textDecoration:"none", color: "#337ab7", cursor:"pointer"}} onClick={()=>{this.props.unmount(true, ()=>{
 
+                        window.history.back();
 
+                    })}}>
 
                         Back
 
                     </a>
 
                 </div>

+ 25 - 1
src/RcsbFvSequence/SequenceViews/CustomView.tsx
View File 

@@ -69,6 +69,7 @@ export class CustomView extends AbstractView<CustomViewInterface & AbstractViewI
 
     private rcsbFvMap: Map<string, RcsbFv> = new Map<string, RcsbFv>();
 
     private firstModelLoad: boolean = true;
 
     private innerSelectionFlag: boolean = false;
 
+    private updateContext:"state-change"|null = null;
 
 
     readonly state: CustomViewStateInterface = {
 
         blockConfig: this.props.blockConfig,
 
@@ -93,7 +94,22 @@ export class CustomView extends AbstractView<CustomViewInterface & AbstractViewI
 
         });
 
     }
 
 
+    componentDidUpdate(prevProps: Readonly<CustomViewInterface & AbstractViewInterface>, prevState: Readonly<CustomViewStateInterface>, snapshot?: any) {
 
+        if(this.updateContext != "state-change") {
 
+            this.updateContext = "state-change";
 
+            this.mapBlocks(this.props.blockConfig);
 
+            this.setState( {
 
+                blockConfig: this.props.blockConfig,
 
+                blockSelectorElement: this.props.blockSelectorElement,
 
+                blockChangeCallback: this.props.blockChangeCallback
 
+            });
 
+        }
 
+    }
 
+
 
     private mapBlocks(config: FeatureBlockInterface | Array<FeatureBlockInterface>){
 
+        this.rcsbFvMap.forEach((pfv, id) => {
 
+            pfv.unmount();
 
+        });
 
         this.blockMap.clear();
 
         this.boardMap.clear();
 
         ( config instanceof Array ? config : [config]).forEach(block=>{
 
@@ -204,7 +220,7 @@ export class CustomView extends AbstractView<CustomViewInterface & AbstractViewI
 
         if(typeof this.props.modelChangeCallback === "function") {
 
             let newConfig: CustomViewStateInterface = this.props.modelChangeCallback(modelMap);
 
             if(newConfig != null ){
 
-                newConfig = newConfig as CustomViewStateInterface;
 
+                this.updateContext = "state-change";
 
                 if(newConfig.blockConfig != null && newConfig.blockSelectorElement != null){
 
                     this.mapBlocks(newConfig.blockConfig);
 
                     this.setState({blockConfig: newConfig.blockConfig, blockSelectorElement: newConfig.blockSelectorElement})
 
@@ -218,6 +234,14 @@ export class CustomView extends AbstractView<CustomViewInterface & AbstractViewI
 
         }
 
     }
 
 
+    setState<K extends keyof CustomViewStateInterface>(state: ((prevState: Readonly<CustomViewStateInterface>, props: Readonly<CustomViewInterface & AbstractViewInterface>) => (Pick<CustomViewStateInterface, K> | CustomViewStateInterface | null)) | Pick<CustomViewStateInterface, K> | CustomViewStateInterface | null, callback?: () => void) {
 
+        super.setState(state, ()=>{
 
+            this.blockViewSelector.setActiveBlock( (this.state.blockConfig instanceof Array ? this.state.blockConfig : [this.state.blockConfig])[0].blockId! )
 
+            if(typeof callback === "function") callback();
 
+            this.updateContext = null
 
+        });
 
+    }
 
+
 
     updateDimensions(): void {
 
         const div: HTMLElement | undefined | null = document.getElementById(this.componentDivId)?.parentElement;
 
         const width: number = window.document.getElementById(this.componentDivId)?.getBoundingClientRect().width ?? 0;