add EOSCListings page, but don't link to it due to bad data quality

compendium-frontend/src/App.tsx

@@ -25,6 +25,7 @@ import CentralProcurementPage from "./pages/Standards&Policies/CentralProcuremen
 import CorporateStrategyPage from "./pages/Standards&Policies/CorporateStrategy";
 import CrisisExercisesPage from "./pages/Standards&Policies/CrisisExercises";
 import CrisisManagementPage from "./pages/Standards&Policies/CrisisManagement";
+import EOSCListingsPage from "./pages/Standards&Policies/EOSCListings";
 import PolicyPage from "./pages/Standards&Policies/Policy";
 import SecurityControlsPage from "./pages/Standards&Policies/SecurityControls";
 import ServiceLevelTargetsPage from "./pages/Standards&Policies/ServiceLevelTargets";
@@ -128,6 +129,7 @@ const router = createBrowserRouter([
       { path: "/dark-fibre-lease-international", element: <DarkFibreLeasePage key={"darkfibreinternational"} /> },
       { path: "/dark-fibre-installed", element: <DarkFibreInstalledPage /> },
       { path: "/remote-campuses", element: <RemoteCampusesPage /> },
+      { path: "/eosc-listings", element: <EOSCListingsPage /> },
       { path: "/fibre-light", element: <FibreLightPage /> },
       { path: "/monitoring-tools", element: <MonitoringToolsPage /> },
       { path: "/pert-team", element: <PertTeamPage /> },

compendium-frontend/src/Schema.tsx

@@ -147,6 +147,10 @@ export interface ECProject extends NrenAndYearDatapoint {
     project: string;
 }
 
+export interface EOSCListing extends NrenAndYearDatapoint {
+    service_names: string[];
+}
+
 export interface ExternalConnection extends NrenAndYearDatapoint {
     link_name: string,
     capacity: (number | null),

compendium-frontend/src/components/NrenYearTable.tsx

@@ -9,6 +9,28 @@ interface configProps {
     removeDecoration?: boolean;
 }
 
+function getUrlOrString(keysAreURLs, style, index, key, value: string) {
+    if (!keysAreURLs) {
+        return <li key={index}>
+            <span>{value}</span>
+        </li>
+    }
+
+    const isURL = key.startsWith('http');
+
+    if (!isURL) {
+        return <li key={index}>
+            <span>{value}</span>
+        </li>
+    }
+
+    return (<li key={index}>
+        <a href={addHttpIfMissing(key)} target="_blank" rel="noopener noreferrer" style={style}>{value}</a>
+    </li>)
+
+}
+
+
 function getJSXFromData(data: Map<string, Map<number, { [key: string]: string }>>,
     { dottedBorder = false, noDots = false, keysAreURLs = false, removeDecoration = false }: configProps) {
     return Array.from(data.entries()).map(([nren, nrenMap]) => {
@@ -24,14 +46,7 @@ function getJSXFromData(data: Map<string, Map<number, { [key: string]: string }>
                     <td className='pt-3 blue-column'>
                         <ul className={noDots ? 'no-list-style-type' : ''}>
                             {Array.from(Object.entries(yearData)).map(([text, key], index) => {
-                                if (!keysAreURLs) {
-                                    return (<li key={index}>
-                                        <span>{text}</span>
-                                    </li>)
-                                }
-                                return (<li key={index}>
-                                    <a href={addHttpIfMissing(key)} target="_blank" rel="noopener noreferrer" style={style}>{text}</a>
-                                </li>)
+                                return getUrlOrString(keysAreURLs, style, index, key, text);
                             })}
                         </ul>
                     </td>

compendium-frontend/src/pages/Standards&Policies/EOSCListings.tsx

+import React, { useContext } from 'react';
+
+import { EOSCListing } from "../../Schema";
+import { createDataLookupList, getTableData } from "../../helpers/dataconversion";
+import DataPage from '../../components/DataPage';
+import Filter from "../../components/graphing/Filter"
+import { Sections } from '../../helpers/constants';
+import { FilterSelectionContext } from '../../providers/FilterSelectionProvider';
+import ChartContainer from "../../components/graphing/ChartContainer";
+import { useData } from '../../helpers/useData';
+import NrenYearTable from '../../components/NrenYearTable';
+
+// The data for this page is not good quality, so it's unlisted for now.
+
+function EOSCListingsPage() {
+    const { filterSelection, setFilterSelection } = useContext(FilterSelectionContext);
+    const { data, years, nrens } = useData<EOSCListing>('/api/eosc-listings', setFilterSelection);
+
+    const selectedData = data.filter(data =>
+        filterSelection.selectedYears.includes(data.year) && filterSelection.selectedNrens.includes(data.nren)
+    );
+    const dataset = createDataLookupList(selectedData);
+
+    const dataByYear = getTableData(dataset, (obj, EOSCListing) => {
+        for (const listing of EOSCListing) {
+            for (const serviceName of listing.service_names) {
+                obj[serviceName] = serviceName;
+            }
+        }
+    })
+
+    const filterNode = <Filter
+        filterOptions={{ availableYears: [...years], availableNrens: [...nrens.values()] }}
+        filterSelection={filterSelection}
+        setFilterSelection={setFilterSelection}
+    />
+
+    const description = <span>
+        Some NRENs choose to list services on the EOSC portal, these can be seen in the table below.
+        Click on the name of the NREN to expand the detail and see the names of the services they list.
+    </span>
+
+    return (
+        <DataPage title="NREN Services Listed on the EOSC Portal"
+            description={description}
+            category={Sections.Policy} filter={filterNode}
+            data={selectedData} filename='nren_eosc_listings'>
+            <ChartContainer>
+                <NrenYearTable data={dataByYear} columnTitle="Service Name" dottedBorder keysAreURLs noDots />
+            </ChartContainer>
+        </DataPage>
+    );
+}
+export default EOSCListingsPage;