Issue #833: isSectionTitle state property added

src/TmFv3DApp/tmdet-viewer/TmRowTitleComponent.tsx

@@ -23,53 +23,46 @@ export class TmRowTitleComponent extends React.Component<TmRowTitleInterface, Tm
     private readonly configData : RcsbFvRowConfigInterface;
 
     readonly state = {
-        url: undefined
+        url: undefined,
+        isSectionTitle: 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;
+        if (this.configData.externalRowTitle?.rowTitleAdditionalProps) {
+            const rowTitleAdditionalProps = this.configData.externalRowTitle?.rowTitleAdditionalProps as any;
+            this.state.url = rowTitleAdditionalProps.url ?? null;
+            this.state.isSectionTitle = rowTitleAdditionalProps.isSectionTitle ?? false;
         }
     }
 
     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>
-                   <div style={{
-                           MozUserSelect:"none",
-                           WebkitUserSelect:"none",
-                           msUserSelect:"none",
-                           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: React.MouseEvent) => this.click(e) }
-                   >
-                       { titleNode }
-                   </div>
-               </div>
-           </div>
-       );
+        const titleNode = this.createTitleNode();
+        return (
+            <div style={{textAlign:"right", display:"flex"}}>
+                <div>
+                    <div style={{
+                            MozUserSelect:"none",
+                            WebkitUserSelect:"none",
+                            msUserSelect:"none",
+                            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: React.MouseEvent) => this.click(e) }
+                    >
+                        { titleNode }
+                    </div>
+                </div>
+            </div>
+        );
     }
 
     protected click(e: React.MouseEvent) {
@@ -79,4 +72,18 @@ export class TmRowTitleComponent extends React.Component<TmRowTitleInterface, Tm
             this.props.titleClick!(e);
         }
     }
+
+    protected createTitleNode() {
+        let titleNode = this.state.isSectionTitle
+            ? <b>{ this.configData.rowTitle as string }</b>
+            : <>{ this.configData.rowTitle as string }</>;
+        titleNode = this.state.url
+            ? <a href={this.state.url}
+                   style= {{ color: "inherit", textDecorationLine: "none" }}
+              >
+                { titleNode }
+              </a>
+            : titleNode;
+        return titleNode;
+    }
 }