Merge branch 'feature/COMP-292-fix' into 'develop'

[COMP-292] : [COMP-299] [COMP-325] [COMP-317] Connectivity Fix

See merge request !90

compendium-frontend/src/helpers/ConnectivityDisplayConstant.tsx

@@ -70,23 +70,64 @@ export const dataKeyMap = {
 };
 
 export const displayCategoryMap={
-    "hospitals": "Non-university public Hospitals",
+
     "universities": "Universities & Other (ISCED 6-8)",
     "further_education": "Further education (ISCED 4-5)",
-    "government": "Government departments (national, regional, local)",
-    "institutes" : "Research Institutes",
-    "primary_schools" : "Primary schools (ISCED 1)",
-    "for_profit_orgs" : "For-profit organisations",
     "secondary_schools" : "Secondary schools (ISCED 2-3)",
+    "primary_schools" : "Primary schools (ISCED 1)",
+    "institutes" : "Research Institutes",
     "cultural" : "Libraries, Museums, Archives, Cultural institutions",
+    "hospitals": "Non-university public Hospitals",
+    "government": "Government departments (national, regional, local)",
     "iros" : "International (virtual) research organisations",
+    "for_profit_orgs" : "For-profit organisations",
+
+    "commercial_r_and_e" : "Commercial R&E traffic only",
+    "commercial_general" :"Commercial general",
+    "commercial_collaboration":"Commercial for collaboration only (project/time limited)",
+    "commercial_service_provider": "Commercial Service Provider",
+    "university_spin_off" :"University Spin Off/Incubator",
+
     "collaboration": "Connection to your network for collaboration with R&E users",
     "service_supplier":"Connection to your network for supplying services for R&E",
     "direct_peering":"Direct peering (e.g. direct peering or cloud peering)",
-    "university_spin_off" :"University Spin Off/Incubator",
+
+}
+
+export const displayCategoryMapNew=[
+
+    {
+        "universities": "Universities & Other (ISCED 6-8)",
+        "further_education": "Further education (ISCED 4-5)",
+        "secondary_schools" : "Secondary schools (ISCED 2-3)",
+        "primary_schools" : "Primary schools (ISCED 1)",
+        "institutes" : "Research Institutes",
+        "cultural" : "Libraries, Museums, Archives, Cultural institutions",
+        "hospitals": "Non-university public Hospitals",
+        "government": "Government departments (national, regional, local)",
+        "iros" : "International (virtual) research organisations",
+        "for_profit_orgs" : "For-profit organisations",
+    },
+    {
         "commercial_r_and_e" : "Commercial R&E traffic only",
         "commercial_general" :"Commercial general",
         "commercial_collaboration":"Commercial for collaboration only (project/time limited)",
         "commercial_service_provider": "Commercial Service Provider",
+        "university_spin_off" :"University Spin Off/Incubator",
+    },
+    {
+        "collaboration": "Connection to your network for collaboration with R&E users",
+        "service_supplier":"Connection to your network for supplying services for R&E",
+        "direct_peering":"Direct peering (e.g. direct peering or cloud peering)",
+    }
+]
 
+export const remitCover={
+    "yes_incl_other":"Yes - including transit to other networks",
+    "yes_national_nren":"Yes - national NREN access",
+    "sometimes":"In some circumstances",
+    "no_policy":"No - not eligible for policy reasons",
+    "no_financial":"No - financial restrictions",
+    "no_other":"No - other reason",
+    "unsure":"Unsure/unclear"
 }

compendium-frontend/src/helpers/ConnectivityViewComponent.tsx

 import React from "react";
 import CollapsibleConnectivityBox from "../components/CollapsibleConnectivityBox";
 import {Table} from "react-bootstrap";
-import {displayCategoryMap} from "./ConnectivityDisplayConstant";
+import {displayCategoryMap,displayCategoryMapNew} from "./ConnectivityDisplayConstant";
 
 
 function TableRow({ title, data }) {
@@ -59,12 +59,55 @@ function TableSectionForTickIcon({ userCategoryMapForCarrier, filterSelection, t
 type UserCategoryMap = Map<string, Map<string, any>>;
 type UserCategoryMapForCarrier = Map<string, Map<string, Map<string, any>>>;
 
+
+
 export function ConnectedUserData({ dataLookup, filterSelection, tableDataMap, isTickIcon=false,
                                       carrierCategoryList= [] }): React.ReactElement {
     const result: JSX.Element[] = [];
     let tableSections;
+    function getCategoryOrder(category: string): number {
+        for (const [mainCategory, subCategories] of Object.entries(displayCategoryMapNew)) {
+            if (category in subCategories) {
+                return Object.keys(subCategories).indexOf(category);
+            }
+        }
+        return -1;
+    }
+
+    function getKeyValuesForSubcategory(subcategoryKey: string): [string, string][] | undefined {
+        const subcategory = displayCategoryMapNew.find((entry) => entry[subcategoryKey]);
+
+        // Use type assertion to tell TypeScript that subcategory is not undefined
+        if (subcategory) {
+            return Object.entries(subcategory);
+        }
+
+        return undefined;
+
+    }
     const dataLookupEntries: [string, UserCategoryMap| UserCategoryMapForCarrier][] = Array.from(dataLookup.entries());
-    dataLookupEntries.forEach(([userCategory, userCategoryMap]) => {
+
+    const keys = dataLookupEntries;
+    const subCategoryKey = keys[0];
+    if(subCategoryKey){
+        const subCategory =getKeyValuesForSubcategory(subCategoryKey[0])
+
+        // console.log(subCategory)
+        if (subCategory) {
+            subCategory.sort(([a], [b]) => {
+                const categoryOrderA = getCategoryOrder(a);
+                const categoryOrderB = getCategoryOrder(b);
+
+                // If either category is not found in displayCategoryMap, maintain the original order
+                if (categoryOrderA === -1 || categoryOrderB === -1) {
+                    return 0;
+                }
+
+                return categoryOrderA - categoryOrderB;
+            });
+                // Iterate over the key-value pairs
+            subCategory.forEach(([key, value]) => {
+                const userCategoryMap: UserCategoryMap | UserCategoryMapForCarrier = dataLookup.get(key)
                 let tableSections;
                 // console.log(userCategory)
                 if (isTickIcon) {
@@ -77,7 +120,7 @@ export function ConnectedUserData({ dataLookup, filterSelection, tableDataMap, i
                             filterSelection={filterSelection}
                             title={title}
                             dataKey={dataKey}
-                    category={(isTickIcon && carrierCategoryList.length==1)? carrierCategoryList[0] :userCategory}
+                            category={(isTickIcon && carrierCategoryList.length==1)? carrierCategoryList[0] :key}
                         />
                     ));
                 } else {
@@ -94,8 +137,9 @@ export function ConnectedUserData({ dataLookup, filterSelection, tableDataMap, i
                     ));
                 }
                 const categoryContent = (
-            <CollapsibleConnectivityBox title={displayCategoryMap[userCategory]} startCollapsed key={userCategory}>
+                    <CollapsibleConnectivityBox title={value} startCollapsed key={key}>
                         <div className="table-responsive">
+                            {userCategoryMap ? (
                             <Table className="connectivity-table" bordered>
                                 <colgroup>
                                     <col span={1} style={{ width: "10%" }} />
@@ -122,11 +166,18 @@ export function ConnectedUserData({ dataLookup, filterSelection, tableDataMap, i
                                 {tableSections}
                                 </tbody>
                             </Table>
+                            ) : (
+                                <p>No data available for this section.</p>
+                                )}
                         </div>
                     </CollapsibleConnectivityBox>
                 );
 
                 result.push(categoryContent);
+
                 });
+        }
+    }
+
     return <div className="connectivity-border">{result}</div>;
 }
\ No newline at end of file

compendium-frontend/src/helpers/dataconversion.tsx

@@ -3,6 +3,7 @@ import {
     FundingSource, FundingSourceDataset,
     Budget, BasicDataset, NrenStaff, NrenStaffDataset, TrafficVolume, NrenAndYearDatapoint
 } from "../Schema";
+import {remitCover} from "./ConnectivityDisplayConstant";
 
 // create a color from a string, credits https://stackoverflow.com/a/16348977
 const stringToColour = function (str) {
@@ -390,3 +391,27 @@ export function createConnectivityDataLookupForCommercial<Datatype extends NrenA
     // console.log(dataLookup)
     return dataLookup;
 }
+
+export function createConnectivityDataLookupForConnectedProportion<Datatype extends NrenAndYearDatapoint>(data: Datatype[], columnProperty: string,) {
+    const dataLookup = new Map<string, Map<string, Map<number, Datatype>>>();
+
+    data.forEach(entry => {
+        let serviceEntry = dataLookup.get(entry[columnProperty]);
+        if (!serviceEntry) {
+            serviceEntry = new Map<string, Map<number, Datatype>>();
+        }
+        let nrenEntry = serviceEntry.get(entry.nren);
+        if (!nrenEntry) {
+            nrenEntry = new Map<number, Datatype>();
+        }
+        const newValue = remitCover[entry["coverage"]]
+        if(newValue){
+            entry["coverage"] = newValue;
+        }
+        nrenEntry.set(entry.year, entry);
+        serviceEntry.set(entry.nren, nrenEntry);
+        dataLookup.set(entry[columnProperty], serviceEntry);
+    });
+    // console.log(dataLookup)
+    return dataLookup;
+}
\ No newline at end of file

compendium-frontend/src/pages/CompendiumData.tsx

@@ -90,6 +90,41 @@ function CompendiumData(): ReactElement {
 
                         <CollapsibleBox title={Sections.ConnectedUsers} startCollapsed>
                             <div className="collapsible-column">
+                                <Row>
+                                    <Link to="/connected-proportion" className="link-text-underline">
+                                        <span>Connected Proportion</span>
+                                    </Link>
+                                </Row>
+                                <Row>
+                                    <Link to="/connectivity-level" className="link-text-underline">
+                                        <span>Connectivity Level</span>
+                                    </Link>
+                                </Row>
+                                <Row>
+                                    <Link to="/connectivity-growth" className="link-text-underline">
+                                        <span>Connectivity Growth</span>
+                                    </Link>
+                                </Row>
+                                <Row>
+                                    <Link to="/connection-carrier" className="link-text-underline">
+                                        <span>Connection Carrier</span>
+                                    </Link>
+                                </Row>
+                                <Row>
+                                    <Link to="/connectivity-load" className="link-text-underline">
+                                        <span>Connectivity Load</span>
+                                    </Link>
+                                </Row>
+                                <Row>
+                                    <Link to="/commercial-charging-level" className="link-text-underline">
+                                        <span>Commercial Charging Level</span>
+                                    </Link>
+                                </Row>
+                                <Row>
+                                    <Link to="/commercial-connectivity" className="link-text-underline">
+                                        <span>Commercial Connectivity</span>
+                                    </Link>
+                                </Row>
                                 <Row>
                                     <Link to="/institutions-urls" className="link-text-underline">
                                         <span>Connected Institutions URLs</span>

compendium-frontend/src/pages/ConnectedUser.tsx

@@ -4,7 +4,9 @@ import {Col, Row, Table} from "react-bootstrap";
 import {ConnectedProportion, ConnectivityCategory, Service, ServiceCategory} from "../Schema";
 import {
     createConnectivityDataLookup,
-    createConnectivityDataLookupForCarrier, createConnectivityDataLookupForCommercial,
+    createConnectivityDataLookupForCarrier,
+    createConnectivityDataLookupForCommercial,
+    createConnectivityDataLookupForConnectedProportion,
     createMatrixDataLookup
 } from "../helpers/dataconversion";
 import DataPage from "../components/DataPage";
@@ -52,7 +54,10 @@ function ConnectedUserPage({ connectivity_category}: inputProps): React.ReactEle
         const commercialChargingCategoryList =['collaboration','service_supplier','direct_peering']
         isTickIcon = true;
         dataLookup = createConnectivityDataLookupForCommercial(selectedData, commercialChargingCategoryList);
-    }else {
+    }else if(connectivity_category==ConnectivityCategory.ConnectedProportion.toString()){
+        dataLookup = createConnectivityDataLookupForConnectedProportion(selectedData, 'user_category');
+    }
+    else {
          dataLookup = createConnectivityDataLookup(selectedData, 'user_category');
     }
 
@@ -68,7 +73,7 @@ function ConnectedUserPage({ connectivity_category}: inputProps): React.ReactEle
 
     return (
         <DataPage title={displayTitle[connectivity_category]}
-                  description="Hover over the elements for additional information."
+                  description=""
                   category={Sections.ConnectedUsers} filter={filterNode}>
             <>
                 {/*<DownloadDataButton data={serviceData} filename="nren_services.csv" exportType={ExportType.CSV} />*/}