Issue #820: with links to page of the selected structure

src/TmFv3DApp/FeatureViewConfig.ts

@@ -225,7 +225,7 @@ function setExternalRowTitleComponent(rows: RcsbFvRowConfigInterface[], titleCli
             if (!track.externalRowTitle.rowTitleAdditionalProps) {
                 track.externalRowTitle.rowTitleAdditionalProps = {};
             }
-            (track.externalRowTitle.rowTitleAdditionalProps as any).titleClick = titleClick;
+            // TODO: (track.externalRowTitle.rowTitleAdditionalProps as any).titleClick = titleClick;
         }
     });
 }

src/TmFv3DApp/index.html

@@ -5,7 +5,13 @@
     <title>RCSB PDB 1D3D Viewer</title>
     <script src="./tm-saguaro.js"></script>
     <script defer type="module">
-      tmSaguaro.createViewer({
+      function getParam(name, regex, defaultValue) {
+          var r = new RegExp(name + '=' + '(' + regex + ')[&]?', 'i');
+          return decodeURIComponent(((window.location.search || '').match(r) || [])[1] || defaultValue);
+      }
+
+      var configs = {
+        "6bms_A": {
           title: 'TmSaguaro Example',
           subtitle: 'ZDH15 data',
           elementId: "tmSaguaro",
@@ -13,7 +19,30 @@
           labelAsymId: "A",
           side1: "Inside",
           configData: "./zdh15_saguaro.json"
-      });
+        },
+        "7khm_A": {
+          title: 'TmSaguaro Example II',
+          subtitle: 'ZDH15 data',
+          elementId: "tmSaguaro",
+          pdbEntry: "7khm",
+          labelAsymId: "A",
+          side1: "Outside",
+          configData: "./zdh15_saguaro_7khm_A.json"
+        },
+        "7khm_B": {
+          title: 'TmSaguaro Example III',
+          subtitle: 'ZDH15 data',
+          elementId: "tmSaguaro",
+          pdbEntry: "7khm",
+          labelAsymId: "B",
+          side1: "Outside",
+          configData: "./zdh15_saguaro_7khm_B.json"
+        }
+      };
+      var item = getParam("entry", ".+_.+", "6bms_A");
+      console.log(configs);
+      console.log("itwem:", item);
+      tmSaguaro.createViewer(configs[item]);
     </script>
 </head>
 <style>

src/TmFv3DApp/tmdet-viewer/TmFv3DCustom.tsx

@@ -14,11 +14,23 @@ import {RcsbFv3DCustomAbstract} from "../../RcsbFv3D/RcsbFv3DCustomAbstract";
 import { TmMolstarManagerFactory } from "./TmMolstarManagerFactory";
 import { RcsbFv3DCustomInterface } from "../../RcsbFv3D/RcsbFv3DCustom";
 
+type ViewerPropertiesType = {viewerElement:string|HTMLElement,viewerProps:Partial<ViewerProps>};
+type StructureViewerType = StructureViewer<LoadMolstarInterface<unknown,unknown>,LoadMolstarReturnType,ViewerPropertiesType>;
+
 export class TmFv3DCustom extends RcsbFv3DCustomAbstract<LoadMolstarInterface<unknown,unknown>,LoadMolstarReturnType,{viewerElement:string|HTMLElement,viewerProps:Partial<ViewerProps>}> {
 
+    protected viewer: StructureViewerType;
+    protected currentLoadConfig: any;
+
     constructor(params: RcsbFv3DCustomInterface) {
+
         const elementId: string = params.elementId ?? uniqid("TmDetFv3D_");
-        super({
+        const viewer = new StructureViewer<
+            LoadMolstarInterface<unknown,unknown>,
+            LoadMolstarReturnType,
+            ViewerPropertiesType
+        >( new TmMolstarManagerFactory(getModelIdFromTrajectory) );
+        const config = {
             elementId: elementId,
             structureConfig: {
                 loadConfig: params.structurePanelConfig.loadConfig,
@@ -30,14 +42,23 @@ export class TmFv3DCustom extends RcsbFv3DCustomAbstract<LoadMolstarInterface<un
             sequenceConfig:{
                 ...params.sequencePanelConfig,
             },
-            structureViewer:new StructureViewer<
-                LoadMolstarInterface<unknown,unknown>,
-                LoadMolstarReturnType,
-                {viewerElement:string|HTMLElement,viewerProps:Partial<ViewerProps>}
-            >( new TmMolstarManagerFactory(getModelIdFromTrajectory) ),
+            structureViewer: viewer,
             structureViewerBehaviourObserver: new NullBehaviourObserver<LoadMolstarInterface<unknown,unknown>,LoadMolstarReturnType>(),
             cssConfig: params.cssConfig
-        });
+        };
+
+        super(config);
+
+        this.viewer = viewer;
+        this.currentLoadConfig = config.structureConfig.loadConfig;
     }
 
-}
+    public async updateConfig(config: { structurePanelConfig?: { loadConfig: any }; sequencePanelConfig?: Partial<any> }) {
+        super.updateConfig(config);
+
+        // TODO: something is wrong around clear/reset/load: shaking camera after update config
+        await this.viewer.clear();
+        this.viewer.resetCamera();
+        await this.viewer.load(config.structurePanelConfig?.loadConfig);
+    }
+}

src/TmFv3DApp/tmdet-viewer/TmRowTitleComponent.tsx

@@ -12,7 +12,6 @@ import { RcsbFvRowTitleInterface } from "@rcsb/rcsb-saguaro/build/RcsbFv/RcsbFvR
 
 interface TmRowTitleInterface extends RcsbFvRowTitleInterface {
     color?: string;
-    title: string;
     titleClick?: () => void;
 }
 
@@ -24,14 +23,30 @@ export class TmRowTitleComponent extends React.Component<TmRowTitleInterface, Tm
     private readonly configData : RcsbFvRowConfigInterface;
 
     readonly state = {
+        url: undefined
     };
 
     constructor(props: TmRowTitleInterface) {
         super(props);
         this.configData = this.props.data;
+
+        if ((this.configData.externalRowTitle?.rowTitleAdditionalProps
+            && (this.configData.externalRowTitle?.rowTitleAdditionalProps as any).url)) {
+
+            this.state.url = (this.configData.externalRowTitle?.rowTitleAdditionalProps as any).url;
+        }
     }
 
     public render(): JSX.Element{
+        const titleNode = this.state.url
+            ? <>
+                <a href={this.state.url}
+                   style= {{ color: "inherit", textDecorationLine: "none" }}
+                >
+                    { this.configData.rowTitle as string }
+                </a>
+            </>
+            : <>{ this.configData.rowTitle as string }</>;
        return (
            <div style={{textAlign:"right", display:"flex"}}>
                <div>
@@ -50,7 +65,7 @@ export class TmRowTitleComponent extends React.Component<TmRowTitleInterface, Tm
                        }}
                        onClick={ (e: React.MouseEvent) => this.click(e) }
                    >
-                       { this.configData.rowTitle as string }
+                       { titleNode }
                    </div>
                </div>
            </div>
@@ -58,10 +73,10 @@ export class TmRowTitleComponent extends React.Component<TmRowTitleInterface, Tm
     }
 
     protected click(e: React.MouseEvent) {
-        e.preventDefault();
         if (!this.props.titleClick) {
             console.warn('title click handler is not set:', e);
         } else {
+            e.preventDefault();
             this.props.titleClick!();
         }
     }