COMP-195 : Updating Titles and description

webapp/src/pages/Budget.tsx

@@ -39,7 +39,10 @@ function BudgetPage({ filterSelection, setFilterSelection }: inputProps): ReactE
     />
 
     return (
-        <DataPage title="Budgets" category={Sections.Organisation} filter={filterNode}>
+        <DataPage title="Budget of NRENs per Year" 
+        description='The graph shows the NRENs budget capita (in Million €) per year . 
+        On hovering over the graphs data points will give NRENs budget share in that year.  This graph can be used to compare, selecting multiple NRENs to see the 
+        fluctuation of budget over years and with other NRENs.' category={Sections.Organisation} filter={filterNode}>
             <>
                 <Row>
                     <LineGraph data={budgetData} />

webapp/src/pages/ChargingStructure.tsx

@@ -52,7 +52,8 @@ function ChargingStructurePage({ filterSelection, setFilterSelection }: inputPro
     return (
         <DataPage title="Charging Mechanism of NRENs per Year" 
         description="The charging structure is the way in which NRENs charge their customers for the services they provide.
-         The charging structure can be based on a flat fee, usage based fee, a combination of both, or no direct charge."
+         The charging structure can be based on a flat fee, usage based fee, a combination of both, or no direct charge. 
+         By selecting multiple years and NRENs, the table can be used to compare the charging structure of NRENs."
         category={Sections.Organisation} filter={filterNode}>
             <Table className="charging-struct-table" striped bordered responsive >
                 <colgroup>

webapp/src/pages/ECProjects.tsx

@@ -55,7 +55,10 @@ function ECProjects({ filterSelection, setFilterSelection }: inputProps) {
     />
 
     return (
-        <DataPage title="NREN Involvement in European Commission Projects" category={Sections.Organisation} filter={filterNode}>
+        <DataPage title="NREN Involvement in European Commission Projects" 
+        description='The table shows the NRENs involvement in European Commission Projects Membership. By selecting multiple
+        year and NRENs, the table can be used to compare the NRENs involvement in European Commission Projects Membership'
+        category={Sections.Organisation} filter={filterNode}>
             <Table borderless className='compendium-table'>
                 <thead>
                     <tr>

webapp/src/pages/ParentOrganisation.tsx

@@ -50,7 +50,10 @@ function ParentOrganisation({ filterSelection, setFilterSelection }: inputProps)
     />
 
     return (
-        <DataPage title="NREN Parent Organisations" category={Sections.Organisation} filter={filterNode}>
+        <DataPage title="NREN Parent Organisations" 
+        description='The table shows the NRENs parent organisation. You can select only one year at a time
+        and multiple NRENs. This table can be used to compare the parent organisation of NRENs.'
+        category={Sections.Organisation} filter={filterNode}>
             <Table borderless className='compendium-table'>
                 <thead>
                     <tr>

webapp/src/pages/Policy.tsx

@@ -70,7 +70,10 @@ function PolicyPage({ filterSelection, setFilterSelection }: inputProps) {
     />
 
     return (
-        <DataPage title="NREN Policies" category={Sections.Policy} filter={filterNode}>
+        <DataPage title="NREN Policies" 
+        description='The table shows the NRENs policies. By selecting multiple year and NRENs, 
+        the table can be used to compare the NRENs policies over years of selected NRENs.'
+        category={Sections.Policy} filter={filterNode}>
             <Table borderless className='compendium-table'>
                 <thead>
                     <tr>

webapp/src/pages/StaffGraph.tsx

@@ -144,9 +144,17 @@ function StaffGraph({ filterSelection, setFilterSelection, roles = false }: inpu
     // set a minimum height of 20rem
     const height = Math.max(numNrens * heightPerBar, 20);
 
-    const text = roles ? "Roles" : "Employment";
+    const title = roles
+    ? "Roles of NREN employees"
+    : "Types of employment for NRENs";
+    const description = roles
+    ? "The graph shows the roles of NREN employees. On hovering over the graph will give the percentage of employees in that role. This graph can be used to compare, selecting multiple NRENs to see the fluctuation of roles over selected year and with other NRENs."
+    : "The graph shows the types of employment for NREN employees. On hovering over the graphs will give the percentage of employees in that type of employment. This graph can be used to compare, selecting multiple NRENs to see the fluctuation of types of employment over selected year and with other NRENs.";
+    
     return (
-        <DataPage title={"NREN Staff " + text} category={Sections.Organisation} filter={filterNode}>
+        <DataPage title={title} 
+        description={description}
+        category={Sections.Organisation} filter={filterNode}>
             <WithLegend>
                 <div className="chart-container" style={{ 'height': `${height}rem` }}>
                     <Bar

webapp/src/pages/SubOrganisation.tsx

@@ -55,7 +55,10 @@ function SubOrganisation({ filterSelection, setFilterSelection }: inputProps) {
     />
 
     return (
-        <DataPage title="NREN Suborganisations" category={Sections.Organisation} filter={filterNode}>
+        <DataPage title="NREN Suborganisations" 
+        description='The table shows the NRENs suborganisations. You can select multiple years and NRENs to get a 
+        tabular view of NRENs suborganisations over the years.'
+        category={Sections.Organisation} filter={filterNode}>
             <Table borderless className='compendium-table'>
                 <thead>
                     <tr>