Add pdbCode to Moorhen visualizer link

Added a pdbCode property to various interfaces and components in the webapp to enhance the link to the Moorhen visualizer tool. If the pdbCode is present, it is appended to the Moorhen URL to directly visualize that particular structure, improving user experience.

webapp/src/interfaces/types.ts

@@ -85,6 +85,7 @@ export interface GlycanDetailProps {
     controls: any;
     map: any;
     moorhenProps: any;
+    pdbCode: string;
 }
 
 export interface NoGlycansProps {

webapp/src/main/GlycanDetail/GlycanDetail.tsx

@@ -183,6 +183,7 @@ export default function GlycanDetail(props: GlycanDetailProps) {
                             return [width, height];
                         }}
                         toggleGlycoblocks={toggleGlycoBlocks}
+                        pdbCode={props.pdbCode}
                     />
                 </div>
                 <div

webapp/src/main/GlycanDetail/GlycanDetailMoorhenView.tsx

@@ -10,6 +10,7 @@ export function GlycanDetailMoorhenView(props: {
     moorhenDimensions: () => [number, number];
     mapContour: number;
     toggleGlycoblocks: () => any;
+    pdbCode: string;
 }) {
     const size = Math.min(800, 0.9 * window.innerWidth);
     const [dimensions, setDimensions] = useState<Record<string, number>>(
@@ -44,7 +45,19 @@ export function GlycanDetailMoorhenView(props: {
         <div key={props.key} className="px-8 flex flex-col items-center">
             <h3 className="text-left text-xl w-full font-bold mt-2">
                 Visualise with <i>Moorhen</i>{' '}
-                <a href="https://moorhen.org" title="Go to Moorhen.org">
+
+                <a href={props.pdbCode !== "" ? `https://moorhen.org/pdb/${props.pdbCode}` : "https://moorhen.org"}
+                   title="Go to Moorhen.org"
+                    onClick={(e) => {e.stopPropagation()}}
+                   onTouchStart={(e) => {
+                       e.stopPropagation();
+                   }}
+                   onMouseDown={(e) => {
+                       e.stopPropagation();
+                   }}
+                   target="_blank"
+                   rel="noopener noreferrer"
+                >
                     <img className="inline h-8" src="./moorhen_logo.png"></img>
                 </a>
             </h3>

webapp/src/main/PrivateerDisplay/SNFG.tsx

@@ -220,6 +220,7 @@ export default function SNFG(props: SNFGProps): ReactElement {
         controls,
         map,
         moorhenProps: collectedProps,
+        pdbCode: props.PDBCode
     };
 
     const svgTableProps = {