Task/86 markdown description

package.json

@@ -28,6 +28,7 @@
     "js-file-download": "^0.4.12",
     "jwt-decode": "^3.1.2",
     "keycloak-js": "^22.0.5",
+    "markdown-to-jsx": "^7.5.0",
     "mem": "^9.0.2",
     "moment": "^2.29.3",
     "n3": "^1.17.3",

src/common/markdown/GMarkdown.module.css

@@ -0,0 +1,64 @@
+.gmarkdown {
+  font-size: large;
+  font-weight: lighter;
+  text-align: justify;
+}
+
+.gmarkdown table {
+  width: 100%;
+  border: 1px solid black;
+  border-collapse: collapse;
+  margin: 20px 0;
+}
+
+.gmarkdown th,
+.gmarkdown td {
+  border: 1px solid black;
+  padding: 8px;
+  text-align: left;
+}
+
+.gmarkdown th {
+  background-color: #f2f2f2;
+  font-weight: bold;
+}
+
+.gmarkdown tr:nth-child(even) {
+  background-color: #f9f9f9;
+}
+
+.gmarkdown tr:hover {
+  background-color: #e0e0e0;
+}
+
+.gmarkdown pre {
+  background-color: #f5f5f5;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  padding: 10px;
+  overflow-x: auto;
+  font-family: 'Courier New', Courier, monospace;
+  white-space: pre-wrap;
+}
+
+.gmarkdown code {
+  background-color: #e8e8e8;
+  border-radius: 4px;
+  padding: 2px 4px;
+  font-family: 'Courier New', Courier, monospace;
+}
+
+.gmarkdown pre code {
+  background: none;
+  color: inherit;
+}
+
+.card {
+  max-height: 200px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.ellipsis {
+  margin: auto;
+}

src/common/markdown/GMarkdown.tsx

@@ -0,0 +1,39 @@
+import classNames from 'classnames';
+import Markdown from 'markdown-to-jsx';
+import React, { useEffect, useRef, useState } from 'react';
+
+import styles from './GMarkdown.module.css';
+
+type GMarkdownProps = {
+    children: React.ReactNode;
+    isCard?: boolean;
+    maxContentHeight?: number;
+};
+
+const GMarkdown: React.FC<GMarkdownProps> = ({ isCard, maxContentHeight = 200, children }) => {
+  const [isHigher, setIsHigher] = useState(false);
+  const contentRef = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    if (contentRef.current) {
+      const contentHeight = contentRef.current.scrollHeight;
+      setIsHigher(contentHeight > maxContentHeight); // Adjust height as needed
+    }
+  }, [children]);
+
+  const cardClass = isCard ? styles.card : '';
+  const inlineStyles = isCard && maxContentHeight ? { maxHeight: maxContentHeight } : {};
+
+  return (
+    <>
+      <div className={classNames(styles.gmarkdown, cardClass)} style={inlineStyles}>
+        <div ref={contentRef}>
+          <Markdown>{children}</Markdown>
+        </div>
+      </div>
+      {isCard && isHigher && <div className={styles.ellipsis}>...</div>}
+    </>
+  );
+};
+
+export default GMarkdown;

src/components/ItemCard/OntologyCardContent.tsx

@@ -1,7 +1,8 @@
-import { FC } from 'react';
+import React, { FC } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 
+import GMarkdown from '../../common/markdown/GMarkdown';
 import { Ontology } from '../../types/ontologies.model';
 import Title from '../Title/Title';
 import GaiaXButton from '../buttons/GaiaXButton';
@@ -26,7 +27,7 @@ const OntologyCardContent: FC<IOntologyCardContent> = ({ ontology } ) => {
       <div style={{ textAlign: 'left' }}>
         <Title>{ontology.subject}</Title>
       </div>
-      <p>{ontology.description}</p>
+      <GMarkdown isCard>{ontology.description}</GMarkdown>
       <div className={styles.button}>
         <GaiaXButton
           label={t('details.more-details')}

src/components/ItemCard/ResourceCardContent.tsx

@@ -1,7 +1,8 @@
-import { FC } from 'react';
+import React, { FC } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 
+import GMarkdown from '../../common/markdown/GMarkdown';
 import { Resource } from '../../types/resources.model';
 import Title from '../Title/Title';
 import GaiaXButton from '../buttons/GaiaXButton';
@@ -18,7 +19,7 @@ const ResourceCardContent: FC<IResourceCardContent> = ({ resource }) => {
 
   const handleNavigationToDetailsPage = () => {
     const encodedUri = encodeURIComponent(JSON.stringify(resource.claimsGraphUri));
-    navigate(`/details/${encodedUri}`);
+    navigate(`/resources/${encodedUri}`);
   };
 
   return (
@@ -29,7 +30,7 @@ const ResourceCardContent: FC<IResourceCardContent> = ({ resource }) => {
         ))
       }
       </Title>
-      <p>{resource.description}</p>
+      <GMarkdown isCard>{resource.description}</GMarkdown>
       <div className={styles.button}>
         <GaiaXButton
           label={t('details.more-details')}

src/components/Routes.tsx

@@ -3,7 +3,6 @@ import { Route, Routes as ReactRoutes } from 'react-router-dom';
 
 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';
@@ -12,6 +11,7 @@ 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 ResourcesDetailsPage from './detailsPage/pages/resources/ResourcesDetailsPage';
 import ShapesDetailsPage from './detailsPage/pages/shapes/ShapesDetailsPage';
 import DiscoveryItem from './discovery/DiscoveryItem';
 import SearchView from './discovery/search/SearchView';
@@ -43,7 +43,8 @@ const Routes: FC = () => (
       <Route path="/service-offerings" element={ViewContainer(<ProtectedRoute><ServiceOfferings/></ProtectedRoute>)}/>
       <Route path="/participants" element={ViewContainer(<Participants />)} />
       <Route path="/resources" element={ViewContainer(<ProtectedRoute><Resources /></ProtectedRoute>)} />
-      <Route path="/details/:resourceId" element={ViewContainer(<ProtectedRoute><DetailsPage/></ProtectedRoute>)}/>
+      <Route path="/resources/:resourceId"
+        element={ViewContainer(<ProtectedRoute><ResourcesDetailsPage/></ProtectedRoute>)}/>
       <Route path="/services" element={ViewContainer(<SearchView type="services" />)} />
       <Route path="/help" element={ViewContainer(<WorkInProgress component="Help" />)} />
       <Route path="/loginfail" element={ViewContainer(<LoginFail />)} />

src/components/detailsPage/pages/ontologies/OntologyMainContent.tsx

@@ -2,6 +2,7 @@ import { FC, useContext } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 
+import GMarkdown from '../../../../common/markdown/GMarkdown';
 import { OntologyContext } from '../../../../context/OntologyContext';
 import { Shape } from '../../../../types/shapes.model';
 import Text from '../../../Text/Text';
@@ -25,7 +26,9 @@ const OntologyMainContent: FC = () => {
   return (
     <div className={styles['container']}>
       <Title>{t('ontologies.title')}</Title>
-      <Text>{ontology.description}</Text>
+      <GMarkdown>
+        {ontology.description}
+      </GMarkdown>
       {ontology.relatedShapes.length > 0 && (
         <div style={{ textAlign: 'left' }}>
           <Text>{t('ontologies.classes')}</Text>

src/components/detailsPage/pages/resources/ResourcesDatails.module.css

@@ -0,0 +1,11 @@
+.details-page-container {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    width: auto;
+}
+
+.new-car-loader {
+    display: flex;
+    justify-content: center;
+}

src/components/detailsPage/pages/resources/ResourcesDetailsPage.tsx

@@ -0,0 +1,74 @@
+import MapCard from 'components/cards/MapCard';
+import SidebarCard from 'components/cards/SidebarCard';
+import { AuthContext } from 'context/AuthContextProvider';
+import { useContext, useEffect, useState } from 'react';
+import { useParams } from 'react-router-dom';
+import { CypherQueryApiService as cypherQuery } from 'services/cypherQueryApiService';
+
+import car from '../../../../assets/car.gif';
+
+import styles from './ResourcesDatails.module.css';
+import ResourcesMainContent from './ResourcesMainContent';
+
+export default function ResourcesDetailsPage() {
+  const authContext = useContext(AuthContext);
+  const [selfDescriptionData, setSelfDescriptionData] = useState(null);
+  const { resourceId } = useParams();
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    const fetchAndSetSelfDescriptions = async () => {
+      try {
+        const response = await cypherQuery.getOneSelfDescriptions(resourceId);
+        console.log('Fetched data: ', response);
+        if (response) {
+          setSelfDescriptionData(response);
+        }
+      } catch (error) {
+        console.error('Error fetching self descriptions:', error);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    if (resourceId && authContext.isAuthenticated) {
+      fetchAndSetSelfDescriptions();
+    }
+  }, [resourceId, authContext.isAuthenticated]);
+
+  if (isLoading) {
+    return (
+      <div className="newCarLoader">
+        <img src={car} alt="loading..." className="car"/>
+      </div>
+    );
+  }
+
+  if (!selfDescriptionData) {
+    return <div>No data available.</div>;
+  }
+
+  return (
+    <div className={styles['details-page-container']}>
+      {isLoading ? (
+        <div className="newCarLoader">
+          <img src={car} alt="loading..." className="car"/>
+        </div>
+      ) : (
+        <>
+          <div>
+            <ResourcesMainContent cardData={selfDescriptionData}/>
+          </div>
+          <div>
+            <MapCard/>
+            <SidebarCard
+              title="Offered by"
+              subtitle="3D Mapping Solutions GmbH"
+              text="We offer high-precision 3D map data of roads and urban environments for applications in autonomous driving, robotics, urban planning and navigation systems."
+            />
+          </div>
+        </>
+      )}
+    </div>
+  );
+}

src/components/detailsPage/pages/resources/ResourcesMainContent.module.css

@@ -0,0 +1,21 @@
+.details-card-container {
+    box-shadow: 10px 15px 20px rgba(0, 0, 0, 0.25);
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    align-items: flex-start;
+    padding: 30px;
+    width: 90%;
+    background-color: white;
+    margin-top: 20px;
+    margin-bottom: 20px;
+    border-radius: 10px;
+}
+
+.details-grid-container {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr); /* Creates two columns of equal width */
+    margin-top: 20px; /* Optional: Adds some space above the grid */
+    justify-items: stretch;
+    align-items: start;
+}