Issue #820: external row title params by API response

src/TmFv3DApp/FeatureViewConfig.ts

@@ -116,12 +116,7 @@ export async function createFeatureViewerConfing(params: TmFvConfigParams) {
 
     // TODO remove it after implementing external row title auto-config
     if (params.fvConfigData) {
-        fvConfig.rowConfig[0].externalRowTitle = {
-            rowTitleComponent: TmRowTitleComponent,
-            rowTitleAdditionalProps: {
-                // TODO
-            }
-        };
+        setExternalRowTitleComponent(fvConfig.rowConfig, structureRowClickHandler);
     }
 
     if (!params.fvConfigData) {
@@ -222,3 +217,19 @@ function setFvConfigCallbacks(fvConfig: FeatureViewInterface<LoadMolstarInterfac
     };
 
 }
+
+function setExternalRowTitleComponent(rows: RcsbFvRowConfigInterface[], titleClick: () => void) {
+    rows.forEach(track => {
+        if (track.externalRowTitle && (track.externalRowTitle.rowTitleComponent as unknown) == "TmRowTitleComponent") {
+            track.externalRowTitle.rowTitleComponent = TmRowTitleComponent;
+            if (!track.externalRowTitle.rowTitleAdditionalProps) {
+                track.externalRowTitle.rowTitleAdditionalProps = {};
+            }
+            (track.externalRowTitle.rowTitleAdditionalProps as any).titleClick = titleClick;
+        }
+    });
+}
+
+function structureRowClickHandler() {
+    console.warn('TODO: implement structureRowClickHandler()');
+}

src/TmFv3DApp/tmdet-viewer/TmRowTitleComponent.tsx

@@ -1,58 +1,68 @@
+/*
+ * Inspired by MsaRowTitleComponent.tsx
+ * https://github.com/rcsb/rcsb-saguaro-3d/blob/c44fae65cb3b201c3d758ee15509b9fdbd3bd0a6/src/RcsbFvSequence/SequenceViews/RcsbView/PfvManagerFactoryImplementation/MsaPfvComponents/MsaRowTitleComponent.tsx
+ *
+ * Further rendering info can be accessed here:
+ * https://github.com/rcsb/rcsb-saguaro/blob/master/src/RcsbFv/RcsbFvRow/RcsbFvRowTitle.tsx
+ */
+
 import * as React from "react";
 import {RcsbFvRowConfigInterface} from "@rcsb/rcsb-saguaro";
 import { RcsbFvRowTitleInterface } from "@rcsb/rcsb-saguaro/build/RcsbFv/RcsbFvRow/RcsbFvRowTitle";
 
+interface TmRowTitleInterface extends RcsbFvRowTitleInterface {
+    color?: string;
+    title: string;
+    titleClick?: () => void;
+}
+
 interface TmRowTitleState {
-    title: string,
-    expandTitle: boolean;
-    disabled: boolean;
-    titleColor?: string;
-    blocked:boolean;
 }
 
-export class TmRowTitleComponent extends React.Component<RcsbFvRowTitleInterface, TmRowTitleState> {
+export class TmRowTitleComponent extends React.Component<TmRowTitleInterface, TmRowTitleState> {
 
     private readonly configData : RcsbFvRowConfigInterface;
 
     readonly state = {
-        title: 'STATE TITLE',
-        expandTitle: false,
-        disabled: true,
-        blocked:false
     };
 
-    constructor(props: any) {
+    constructor(props: TmRowTitleInterface) {
         super(props);
-        this.configData = (this.props as any).data;
+        this.configData = this.props.data;
     }
 
     public render(): JSX.Element{
        return (
-           <div style={{textAlign:"right", display:"flex"}}
-//                onMouseOver={()=>this.hover(true)}
-//                onMouseOut={()=>this.hover(false)}
-           >
+           <div style={{textAlign:"right", display:"flex"}}>
                <div>
                    <div style={{
                            MozUserSelect:"none",
                            WebkitUserSelect:"none",
                            msUserSelect:"none",
-                           //color: this.state.titleColor,
-                           cursor: this.state.blocked ? "wait" : "pointer",
+                           color: this.props.color ?? "rgb(94, 148, 195)",
+                           fontWeight: "bold",
+                           cursor: "pointer",
                            maxWidth: (this.configData.rowTitleWidth ?? 190) - 60,
                            overflow: "hidden",
                            textOverflow: "ellipsis",
                            whiteSpace: "nowrap",
                            textAlign: "right"
                        }}
-//                       onClick={(e: MouseEvent)=>this.click(e)}
-//                       title={this.props.targetAlignment.target_id ?? undefined}
-                       title={'TITLE'}
+                       onClick={ (e: React.MouseEvent) => this.click(e) }
                    >
-                       <a href="https://rcsb.org/">{this.state.title}</a>
+                       { this.configData.rowTitle as string }
                    </div>
                </div>
            </div>
        );
     }
+
+    protected click(e: React.MouseEvent) {
+        e.preventDefault();
+        if (!this.props.titleClick) {
+            console.warn('title click handler is not set:', e);
+        } else {
+            this.props.titleClick!();
+        }
+    }
 }