Refine graph title attributes and fetch last update date

Graph's title attributes were adjusted further on GlycansVsYear graph for better visibility. Additionally, incorporated a function in Graphs.tsx to fetch and display the last updated date from the remote data source. This helps users have real-time updates of the Protein Data Bank statistics.

Signed-off-by: Jordan Dialpuri <44945647+Dialpuri@users.noreply.github.com>

webapp/src/statistics/Graphs/GlycansVsYear.tsx

@@ -137,7 +137,15 @@ export default function GlycansVsYear() {
                 ligandTrace,
             ]}
             layout={{
-                title: 'Glycosylation in the PDB over time',
+                title: {
+                    text: 'Glycosylation in the PDB over time',
+                    x: 0.5,
+                    y: 1.1,
+                    xanchor: 'auto', // or 'auto', which matches 'left' in this case
+                    yanchor: 'bottom',
+                    xref: 'paper',
+                    yref: 'paper',
+                },
                 plot_bgcolor: '#FFFFFF',
                 paper_bgcolor: '#D6D9E5',
                 yaxis: {

webapp/src/statistics/Graphs/Graphs.tsx

@@ -1,10 +1,31 @@
 import GlycansVsYear from './GlycansVsYear.tsx';
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 export default function Graphs() {
+    const [lastUpdated, setLastUpdated] = useState<string>();
+
+    useEffect(() => {
+        const url =
+            'https://raw.githubusercontent.com/Dialpuri/PrivateerDatabase/master/stats/last_updated.json';
+
+        fetch(url)
+            .then(async (response) => await response.json())
+            .then((data) => {
+                setLastUpdated(data.date as string);
+            })
+            .catch((error) => {
+                console.log('Error reading last updated date', error);
+            });
+    }, []);
+
     return (
         <>
             <div className="flex flex-col items-center justify-center">
-                <h2 className="mx-auto">Statistics</h2>
+                <h2 className="w-full text-left pl-12">
+                    Protein Data Bank Statistics
+                </h2>
+                <h4 className="w-full text-left pl-12">
+                    Last Updated - {lastUpdated}
+                </h4>
 
                 <GlycansVsYear />
             </div>