Issue #820: customized row title component prototype added

src/TmFv3DApp/FeatureViewConfig.ts

@@ -26,6 +26,7 @@ import { updateSiteColors } from "./tmdet-extension/tmdet-color-theme";
 import { fetchHtpDescriptor, fetchPdbtmJsvLibDescriptor, htpDescriptorToTrackData, jsvLibDescriptorToTrackData, registerRegionDescriptorData } from "./UniTmpHelper";
 import { TmDetRcsbPreset } from "./TmTrajectoryHierarchyPreset";
 import { TmDetDescriptorCache } from "./tmdet-extension/prop";
+import { TmRowTitleComponent } from "./tmdet-viewer/TmRowTitleComponent";
 
 export type TmFvConfigParams = {
     pdbEntry: string,
@@ -112,6 +113,17 @@ export async function createFeatureViewerConfing(params: TmFvConfigParams) {
     };
 
     updateSiteColors(params.side1 as any);
+
+    // TODO remove it after implementing external row title auto-config
+    if (params.fvConfigData) {
+        fvConfig.rowConfig[0].externalRowTitle = {
+            rowTitleComponent: TmRowTitleComponent,
+            rowTitleAdditionalProps: {
+                // TODO
+            }
+        };
+    }
+
     if (!params.fvConfigData) {
         const htpDescriptor = await fetchHtpDescriptor(params.htpEntry);
         const jsvlibDescriptor = await fetchPdbtmJsvLibDescriptor(params.pdbtmEntry);

src/TmFv3DApp/index.html

@@ -11,7 +11,7 @@
           elementId: "tmSaguaro",
           pdbEntry: "6bms",
           labelAsymId: "A",
-          side1: "Outside",
+          side1: "Inside",
           configData: "./zdh15_saguaro.json"
       });
     </script>

src/TmFv3DApp/tmdet-viewer/TmRowTitleComponent.tsx

@@ -0,0 +1,58 @@
+import * as React from "react";
+import {RcsbFvRowConfigInterface} from "@rcsb/rcsb-saguaro";
+import { RcsbFvRowTitleInterface } from "@rcsb/rcsb-saguaro/build/RcsbFv/RcsbFvRow/RcsbFvRowTitle";
+
+interface TmRowTitleState {
+    title: string,
+    expandTitle: boolean;
+    disabled: boolean;
+    titleColor?: string;
+    blocked:boolean;
+}
+
+export class TmRowTitleComponent extends React.Component<RcsbFvRowTitleInterface, TmRowTitleState> {
+
+    private readonly configData : RcsbFvRowConfigInterface;
+
+    readonly state = {
+        title: 'STATE TITLE',
+        expandTitle: false,
+        disabled: true,
+        blocked:false
+    };
+
+    constructor(props: any) {
+        super(props);
+        this.configData = (this.props as any).data;
+    }
+
+    public render(): JSX.Element{
+       return (
+           <div style={{textAlign:"right", display:"flex"}}
+//                onMouseOver={()=>this.hover(true)}
+//                onMouseOut={()=>this.hover(false)}
+           >
+               <div>
+                   <div style={{
+                           MozUserSelect:"none",
+                           WebkitUserSelect:"none",
+                           msUserSelect:"none",
+                           //color: this.state.titleColor,
+                           cursor: this.state.blocked ? "wait" : "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'}
+                   >
+                       <a href="https://rcsb.org/">{this.state.title}</a>
+                   </div>
+               </div>
+           </div>
+       );
+    }
+}