TmMolStar/src/TmFv3DApp/tmdet-viewer/TmRowTitleComponent.tsx

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>
       );
    }
}