Solution of my review comments for David on detail-pages

Signed-off-by: Zoltan M. <[email protected]>

src/App.js

@@ -2,9 +2,9 @@ import React from 'react';
 import { unstable_HistoryRouter as HistoryRouter } from 'react-router-dom';
 
 import history from './common/history'
+import Routes from './components/Routes';
 import { Footer } from './components/footer/Footer';
 import Navbar from './components/navbar/Navbar';
-import { routes } from './routes';
 
 import './App.css';
 
@@ -14,7 +14,7 @@ const App = () => {
       <div className='main-content'>
         <HistoryRouter history={history}>
           <Navbar />
-          {routes}
+          <Routes/>
         </HistoryRouter>
       </div>
       <Footer />

src/routes.tsx → src/components/Routes.tsx

@@ -1,42 +1,44 @@
-import React, { ReactNode } from 'react';
-import { Route, Routes } from 'react-router-dom';
+import React, { FC, ReactNode } from 'react';
+import { Route, Routes as ReactRoutes } from 'react-router-dom';
 
-import WorkInProgress from './WorkInProgress';
-import { Column } from './common/styles';
-import AccountHome from './components/account/AccountHome';
-import Provider from './components/account/Provider';
-import DashboardPage from './components/dashboard/dashboard_page';
-import LcmFinal from './components/dashboard/lcm/LcmFinal';
-import LcmServices from './components/dashboard/lcm/LcmServices';
-import OntologiesDetailsPage from './components/detailsPage/pages/ontologies/OntologiesDetailsPage';
-import OwlGraph from './components/detailsPage/pages/ontologies/components/actions/OwlGraph/OwlGraph';
-import ShapesDetailsPage from './components/detailsPage/pages/shapes/ShapesDetailsPage';
-import DiscoveryItem from './components/discovery/DiscoveryItem';
-import SearchView from './components/discovery/search/SearchView';
-import AboutPage from './components/help/AboutPage'
-import SupportPage from './components/help/SupportPage'
-import LoginFail from './components/login/LoginFail';
-import OnboardingPage from './components/onboarding/onboarding_page';
-import Ontologies from './components/ontologies/Ontologies';
-import Participants from './components/participants/Participants';
-import ProtectedRoute from './components/protectedRoute/ProtectedRoute';
-import ProvideAttributes from './components/provide/ProvideAttributes';
-import ProvideOverview from './components/provide/ProvideOverview';
-import ProvideSelection from './components/provide/ProvideSelection';
-import Resources from './components/resources/Resources';
-import ServiceOfferings from './components/serviceOfferings/ServiceOfferings';
-import Shapes from './components/shapes/Shapes';
-import SolutionPackagingView from './components/solutionPackaging/SolutionPackagingView';
-import DetailsPage from './pages/details/DetailsPage';
-import Home from './pages/home/Home';
+import WorkInProgress from '../WorkInProgress';
+import { Column } from '../common/styles';
+import DetailsPage from '../pages/details/DetailsPage';
+import Home from '../pages/home/Home';
+
+import AccountHome from './account/AccountHome';
+import Provider from './account/Provider';
+import DashboardPage from './dashboard/dashboard_page';
+import LcmFinal from './dashboard/lcm/LcmFinal';
+import LcmServices from './dashboard/lcm/LcmServices';
+import OntologiesDetailsPage from './detailsPage/pages/ontologies/OntologiesDetailsPage';
+import OwlGraph from './detailsPage/pages/ontologies/components/actions/OwlGraph/OwlGraph';
+import ShapesDetailsPage from './detailsPage/pages/shapes/ShapesDetailsPage';
+import DiscoveryItem from './discovery/DiscoveryItem';
+import SearchView from './discovery/search/SearchView';
+import AboutPage from './help/AboutPage'
+import SupportPage from './help/SupportPage'
+import LoginFail from './login/LoginFail';
+import OnboardingPage from './onboarding/onboarding_page';
+import Ontologies from './ontologies/Ontologies';
+import Participants from './participants/Participants';
+import ProtectedRoute from './protectedRoute/ProtectedRoute';
+import ProvideAttributes from './provide/ProvideAttributes';
+import ProvideOverview from './provide/ProvideOverview';
+import ProvideSelection from './provide/ProvideSelection';
+import Resources from './resources/Resources';
+import ServiceOfferings from './serviceOfferings/ServiceOfferings';
+import Shapes from './shapes/Shapes';
+import SolutionPackagingView from './solutionPackaging/SolutionPackagingView';
 
 const ViewContainer = (view: ReactNode) => {
+  // @ts-ignore
   return <div className='body-container'>{view}</div>
 }
 
-export const routes = (
+const Routes: FC = () => (
   <Column>
-    <Routes>
+    <ReactRoutes>
       <Route path="/" element={<Column><Home /></Column>} />
       <Route path="/home" element={ViewContainer(<Home />)} />
       <Route path="/service-offerings" element={ViewContainer(<ServiceOfferings />)} />
@@ -75,6 +77,8 @@ export const routes = (
       <Route path="/ontologies/graph/*" element={ViewContainer(<OwlGraph />)} />
       <Route path="/shapes" element={ViewContainer(<Shapes />)} />
       <Route path="/shapes/details/*" element={ViewContainer(<ShapesDetailsPage />)} />
-    </Routes>
+    </ReactRoutes>
   </Column>
 );
+
+export default Routes;

src/components/buttons/GaiaXButton.tsx

@@ -5,16 +5,14 @@ import styles from './GaiaXButton.module.css';
 interface IGaiaXButton {
   label: string;
   handleOnClick: () => void;
-  width?: string;
 }
 
 const GaiaXButton: FC<Readonly<IGaiaXButton>> = ({
   label,
   handleOnClick,
-  width,
 }) => {
   return (
-    <button className={styles.button} onClick={handleOnClick} style={width ? { width } : {}}>
+    <button className={styles.button} onClick={handleOnClick}>
       {label}
     </button>
   );

src/components/detailsPage/pages/ontologies/components/actions/OntologyActions.module.css

@@ -20,3 +20,7 @@
     align-items: center;
     flex-direction: column;
 }
+
+.buttons button {
+    width: 100%;
+}

src/components/detailsPage/pages/ontologies/components/actions/OntologyActions.tsx

@@ -33,8 +33,8 @@ const OntologyActions: FC = () => {
         <Title>{t('dashboard.actions')}</Title>
       </div>
       <div className={styles['buttons']}>
-        <GaiaXButton label={t('details.view-graph')} handleOnClick={() => handleNavigationToGraphPage()} width={'100%'}/>
-        <GaiaXButton label={t('details.download-file')} handleOnClick={() => downloadTurtleFile(ontology.subject)} width={'100%'}/>
+        <GaiaXButton label={t('details.view-graph')} handleOnClick={() => handleNavigationToGraphPage()}/>
+        <GaiaXButton label={t('details.download-file')} handleOnClick={() => downloadTurtleFile(ontology.subject)}/>
       </div>
     </div>
   );

src/components/detailsPage/pages/ontologies/components/actions/OwlGraph/OwlGraph.tsx

@@ -15,18 +15,14 @@ const OwlGraph = () => {
   const [ontology, setOntology] = useState<Ontology>();
 
   useEffect(() => {
-    const loadOntology = async () => {
-      try {
-        const ontology = await getOntologyById(id);
-        setOntology(ontology);
-      } catch (error) {
-        console.error('Error fetching self descriptions:', error);
-      } finally {
-        setIsLoading(false);
-      }
-    };
-
-    loadOntology();
+    getOntologyById(id)
+      .then(
+        (ontology) => setOntology(ontology)
+      ).catch(
+        error => console.error('Error fetching self descriptions:', error)
+      ).finally(
+        () => setIsLoading(false)
+      )
   }, []);
 
   if (!ontology) {

src/components/ontologies/Ontologies.tsx

@@ -32,21 +32,20 @@ const Ontologies = () => {
       try {
         const fetchedOntologies = await getAllOntologies();
 
-        fetchedOntologies.forEach(ontology => {
-          ontology.nodes.forEach(node => {
-            if (node.type == 'http://www.w3.org/2000/01/rdf-schema#Class' || node.type == 'http://www.w3.org/2002/07/owl#Class' || node.type == 'http://www.w3.org/2002/07/owl#ObjectProperty'){
-              if (!nodes.find(n => n.id === node.id)) {
-                nodes.push(node);
-              }
-            }
-          });
+        const uniqueNodes = new Map(fetchedOntologies
+          .map(ontology => ontology.nodes)
+          .reduce((result, currentOntologyNodes) => [...result, ...currentOntologyNodes])
+          .filter(node => node.type == 'http://www.w3.org/2000/01/rdf-schema#Class'
+                || node.type == 'http://www.w3.org/2002/07/owl#Class'
+                || node.type == 'http://www.w3.org/2002/07/owl#ObjectProperty')
+          .map(node => [node.id, node] as [string, Node]));
+        setNodes(Array.from(uniqueNodes.values()))
 
-          ontology.links.forEach(link => {
-            if (!links.find(l => l.source === link.source && l.target === link.target)) {
-              links.push(link);
-            }
-          });
-        });
+        const uniqueLinks = new Map(fetchedOntologies
+          .map(ontology => ontology.links)
+          .reduce((merged, currentOntologyLinks) => [...merged, ...links])
+          .map(link => [link.source + link.target, link] as [string, Link]))
+        setLinks(Array.from(uniqueLinks.values()))
 
         setOriginalOntologies(fetchedOntologies);
         setFilteredOntologies(fetchedOntologies);

src/services/SchemaApiService.ts

@@ -1,6 +1,6 @@
 import axios from 'axios';
 
-import { ShapesAndOntologiesInput } from '../types/ontologies.model';
+import { Ontology, ShapesAndOntologiesInput } from '../types/ontologies.model';
 
 import { fetchOntologies } from './ontologyService.utils';
 import { fetchShapes } from './shapeService.utils';
@@ -56,7 +56,7 @@ export const getConvertedFile = async (id: string) => {
 
 export const getAllOntologies = async () => {
   const response = await getAllSchemas();
-  return response ? fetchOntologies(response.ontologies) : [];
+  return (response ? await fetchOntologies(response.ontologies) : []) as Ontology[];
 };
 
 export const getAllShapes = async () => {

src/services/ontologyService.utils.ts

@@ -8,14 +8,8 @@ import { getSchemaById } from './SchemaApiService';
 import { getRelatedShapes } from './shapeService.utils';
 
 export const fetchOntologies = async (ontologiesStringArray: string[]) => {
-  const promises = ontologiesStringArray.map(async id => {
-    const relatedShapes = await getRelatedShapes(id);
-    const promise = await getSchemaById(id);
-    const parsedOntology = await parseSingleOntology(promise);
-    return createOntologyObject(parsedOntology, relatedShapes);
-  });
-
-  return await Promise.all(promises);
+  const ontologiesPromise = ontologiesStringArray.map(async id => getOntologyById(id));
+  return await Promise.all(ontologiesPromise);
 }
 
 export const parseSingleOntology = (item: string) => {
@@ -91,8 +85,12 @@ export const createOntologyObject = (quads: Quad[], relatedShapes: Shape[]): Ont
 };
 
 export const getOntologyById = async (id: string) => {
-  const relatedShapes = await getRelatedShapes(id);
-  const response = await getSchemaById(id);
-  const parsedOntology = await parseSingleOntology(response);
-  return createOntologyObject(parsedOntology, relatedShapes);
+  const relatedShapesPromise = getRelatedShapes(id);
+  const parsedOntologyPromise = getSchemaById(id).then((response) => parseSingleOntology(response));
+
+  return await Promise.all([relatedShapesPromise, parsedOntologyPromise]).then(
+    ([relatedShapes, parsedOntology]) => createOntologyObject(parsedOntology, relatedShapes)
+  ).catch((reason) => {
+    throw reason
+  });
 }