From 64d095efb4cd7713a23121762763e1e678859f66 Mon Sep 17 00:00:00 2001 From: Keresztes Zsolt <178369172+zsoltker@users.noreply.github.com> Date: Mon, 9 Sep 2024 16:25:09 +0300 Subject: [PATCH 1/8] 86 Make markdown description possible, ontology description (details page & ontology cards) --- package.json | 1 + src/common/markdown/GMarkdown.module.css | 60 +++++++++++++++++++ src/common/markdown/GMarkdown.tsx | 18 ++++++ .../pages/ontologies/OntologyMainContent.tsx | 5 +- .../itemCard/OntologyCardContent.tsx | 5 +- 5 files changed, 86 insertions(+), 3 deletions(-) create mode 100644 src/common/markdown/GMarkdown.module.css create mode 100644 src/common/markdown/GMarkdown.tsx diff --git a/package.json b/package.json index 341d5cfc..dfda7842 100644 --- a/package.json +++ b/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", diff --git a/src/common/markdown/GMarkdown.module.css b/src/common/markdown/GMarkdown.module.css new file mode 100644 index 00000000..46129ada --- /dev/null +++ b/src/common/markdown/GMarkdown.module.css @@ -0,0 +1,60 @@ +.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: 300px; + overflow: hidden; + text-overflow: ellipsis; +} \ No newline at end of file diff --git a/src/common/markdown/GMarkdown.tsx b/src/common/markdown/GMarkdown.tsx new file mode 100644 index 00000000..d758413d --- /dev/null +++ b/src/common/markdown/GMarkdown.tsx @@ -0,0 +1,18 @@ +import classNames from 'classnames'; +import Markdown from 'markdown-to-jsx' +import React from 'react'; + +import styles from './GMarkdown.module.css'; + +type GMarkdownProps = { + children: React.ReactNode, + isCard?: boolean, + height?: number; +} +const GMarkdown: React.FC = ({ isCard, height, children }) => { + const cardClass = isCard ? styles.card : ''; + const inlineStyles = isCard && height ? { maxHeight: height } : {}; + return
{ children }
+} + +export default GMarkdown; diff --git a/src/components/detailsPage/pages/ontologies/OntologyMainContent.tsx b/src/components/detailsPage/pages/ontologies/OntologyMainContent.tsx index 719d2c69..373cfbd5 100644 --- a/src/components/detailsPage/pages/ontologies/OntologyMainContent.tsx +++ b/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 (
{t('ontologies.title')} - {ontology.description} + + {ontology.description} + {ontology.relatedShapes.length > 0 && (
{t('ontologies.classes')} diff --git a/src/components/itemCard/OntologyCardContent.tsx b/src/components/itemCard/OntologyCardContent.tsx index f8bc1765..09a59380 100644 --- a/src/components/itemCard/OntologyCardContent.tsx +++ b/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 = ({ ontology } ) => {
{ontology.subject}
-

{ontology.description}

+ {ontology.description}
Date: Wed, 18 Sep 2024 16:45:32 +0300 Subject: [PATCH 2/8] fix ellipsis && height --- src/common/markdown/GMarkdown.module.css | 4 ++ src/common/markdown/GMarkdown.tsx | 43 ++++++++++++++----- .../itemCard/OntologyCardContent.tsx | 2 +- 3 files changed, 38 insertions(+), 11 deletions(-) diff --git a/src/common/markdown/GMarkdown.module.css b/src/common/markdown/GMarkdown.module.css index 46129ada..e3a6f121 100644 --- a/src/common/markdown/GMarkdown.module.css +++ b/src/common/markdown/GMarkdown.module.css @@ -57,4 +57,8 @@ max-height: 300px; overflow: hidden; text-overflow: ellipsis; +} + +.ellipsis { + margin: auto; } \ No newline at end of file diff --git a/src/common/markdown/GMarkdown.tsx b/src/common/markdown/GMarkdown.tsx index d758413d..6bff1283 100644 --- a/src/common/markdown/GMarkdown.tsx +++ b/src/common/markdown/GMarkdown.tsx @@ -1,18 +1,41 @@ import classNames from 'classnames'; -import Markdown from 'markdown-to-jsx' -import React from 'react'; +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, - height?: number; -} -const GMarkdown: React.FC = ({ isCard, height, children }) => { + children: React.ReactNode; + isCard?: boolean; + maxContentHeight?: number; +}; + +const GMarkdown: React.FC = ({ isCard, maxContentHeight = 300, children }) => { + const [isHigher, setIsHigher] = useState(false); + const [contentHeight, setContentHeight] = useState(0); + const contentRef = useRef(null); + + useEffect(() => { + if (contentRef.current) { + const contentHeight = contentRef.current.scrollHeight; + setIsHigher(contentHeight > maxContentHeight); // Adjust height as needed + setContentHeight(contentHeight); + } + }, [children]); + const cardClass = isCard ? styles.card : ''; - const inlineStyles = isCard && height ? { maxHeight: height } : {}; - return
{ children }
-} + const inlineStyles = isCard && maxContentHeight ? { maxHeight: maxContentHeight } : {}; + + return ( + <> +
+
+ {children} +
+
+ {isCard && isHigher &&
...
} + + ); +}; export default GMarkdown; diff --git a/src/components/itemCard/OntologyCardContent.tsx b/src/components/itemCard/OntologyCardContent.tsx index 09a59380..306b3a65 100644 --- a/src/components/itemCard/OntologyCardContent.tsx +++ b/src/components/itemCard/OntologyCardContent.tsx @@ -27,7 +27,7 @@ const OntologyCardContent: FC = ({ ontology } ) => {
{ontology.subject}
- {ontology.description} + {ontology.description}
Date: Wed, 18 Sep 2024 16:49:27 +0300 Subject: [PATCH 3/8] fix ellipsis && height --- src/common/markdown/GMarkdown.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/common/markdown/GMarkdown.tsx b/src/common/markdown/GMarkdown.tsx index 6bff1283..d11826c0 100644 --- a/src/common/markdown/GMarkdown.tsx +++ b/src/common/markdown/GMarkdown.tsx @@ -12,14 +12,12 @@ type GMarkdownProps = { const GMarkdown: React.FC = ({ isCard, maxContentHeight = 300, children }) => { const [isHigher, setIsHigher] = useState(false); - const [contentHeight, setContentHeight] = useState(0); const contentRef = useRef(null); useEffect(() => { if (contentRef.current) { const contentHeight = contentRef.current.scrollHeight; setIsHigher(contentHeight > maxContentHeight); // Adjust height as needed - setContentHeight(contentHeight); } }, [children]); From ae9513bf05a2a65477ebe21a4e9f9184ece6cecb Mon Sep 17 00:00:00 2001 From: Keresztes Zsolt <178369172+zsoltker@users.noreply.github.com> Date: Mon, 23 Sep 2024 13:04:47 +0300 Subject: [PATCH 4/8] change default size to 200, use markdown component for resource cards too --- src/common/markdown/GMarkdown.module.css | 2 +- src/common/markdown/GMarkdown.tsx | 2 +- src/components/ItemCard/OntologyCardContent.tsx | 2 +- src/components/ItemCard/ResourceCardContent.tsx | 5 +++-- 4 files changed, 6 insertions(+), 5 deletions(-) diff --git a/src/common/markdown/GMarkdown.module.css b/src/common/markdown/GMarkdown.module.css index e3a6f121..aa6ef5c8 100644 --- a/src/common/markdown/GMarkdown.module.css +++ b/src/common/markdown/GMarkdown.module.css @@ -54,7 +54,7 @@ } .card { - max-height: 300px; + max-height: 200px; overflow: hidden; text-overflow: ellipsis; } diff --git a/src/common/markdown/GMarkdown.tsx b/src/common/markdown/GMarkdown.tsx index d11826c0..ac1d0f56 100644 --- a/src/common/markdown/GMarkdown.tsx +++ b/src/common/markdown/GMarkdown.tsx @@ -10,7 +10,7 @@ type GMarkdownProps = { maxContentHeight?: number; }; -const GMarkdown: React.FC = ({ isCard, maxContentHeight = 300, children }) => { +const GMarkdown: React.FC = ({ isCard, maxContentHeight = 200, children }) => { const [isHigher, setIsHigher] = useState(false); const contentRef = useRef(null); diff --git a/src/components/ItemCard/OntologyCardContent.tsx b/src/components/ItemCard/OntologyCardContent.tsx index 306b3a65..09a59380 100644 --- a/src/components/ItemCard/OntologyCardContent.tsx +++ b/src/components/ItemCard/OntologyCardContent.tsx @@ -27,7 +27,7 @@ const OntologyCardContent: FC = ({ ontology } ) => {
{ontology.subject}
- {ontology.description} + {ontology.description}
= ({ resource }) => { )) } -

{resource.description}

+ {resource.description}
Date: Mon, 23 Sep 2024 18:24:43 +0300 Subject: [PATCH 5/8] show markdown at resources cards/details, create own details page from common details --- .../ItemCard/ResourceCardContent.tsx | 2 +- src/components/Routes.tsx | 5 +- .../resources/ResourcesDatails.module.css | 11 +++ .../pages/resources/ResourcesDetailsPage.tsx | 74 ++++++++++++++ .../resources/ResourcesMainContent.module.css | 21 ++++ .../pages/resources/ResourcesMainContent.tsx | 96 +++++++++++++++++++ 6 files changed, 206 insertions(+), 3 deletions(-) create mode 100644 src/components/detailsPage/pages/resources/ResourcesDatails.module.css create mode 100644 src/components/detailsPage/pages/resources/ResourcesDetailsPage.tsx create mode 100644 src/components/detailsPage/pages/resources/ResourcesMainContent.module.css create mode 100644 src/components/detailsPage/pages/resources/ResourcesMainContent.tsx diff --git a/src/components/ItemCard/ResourceCardContent.tsx b/src/components/ItemCard/ResourceCardContent.tsx index 3e8e1c8d..87f92b8b 100644 --- a/src/components/ItemCard/ResourceCardContent.tsx +++ b/src/components/ItemCard/ResourceCardContent.tsx @@ -19,7 +19,7 @@ const ResourceCardContent: FC = ({ resource }) => { const handleNavigationToDetailsPage = () => { const encodedUri = encodeURIComponent(JSON.stringify(resource.claimsGraphUri)); - navigate(`/details/${encodedUri}`); + navigate(`/resources/${encodedUri}`); }; return ( diff --git a/src/components/Routes.tsx b/src/components/Routes.tsx index 7e210df9..29f01a74 100644 --- a/src/components/Routes.tsx +++ b/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 = () => ( )}/> )} /> )} /> - )}/> + )}/> )} /> )} /> )} /> diff --git a/src/components/detailsPage/pages/resources/ResourcesDatails.module.css b/src/components/detailsPage/pages/resources/ResourcesDatails.module.css new file mode 100644 index 00000000..daa854ff --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/src/components/detailsPage/pages/resources/ResourcesDetailsPage.tsx b/src/components/detailsPage/pages/resources/ResourcesDetailsPage.tsx new file mode 100644 index 00000000..1305884f --- /dev/null +++ b/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 ( +
+ loading... +
+ ); + } + + if (!selfDescriptionData) { + return
No data available.
; + } + + return ( +
+ {isLoading ? ( +
+ loading... +
+ ) : ( + <> +
+ +
+
+ + +
+ + )} +
+ ); +} diff --git a/src/components/detailsPage/pages/resources/ResourcesMainContent.module.css b/src/components/detailsPage/pages/resources/ResourcesMainContent.module.css new file mode 100644 index 00000000..52454125 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/src/components/detailsPage/pages/resources/ResourcesMainContent.tsx b/src/components/detailsPage/pages/resources/ResourcesMainContent.tsx new file mode 100644 index 00000000..25fd3b3f --- /dev/null +++ b/src/components/detailsPage/pages/resources/ResourcesMainContent.tsx @@ -0,0 +1,96 @@ +import Title from 'components/Title/Title'; +import Divider from 'components/divider/Divider'; +import Subtitle from 'components/subtitle/Subtitle'; +import DataField from 'data-field/DataField'; + +import GMarkdown from '../../../../common/markdown/GMarkdown'; +import { ISelfDescription } from '../../utils/dataMapper'; + +import styles from './ResourcesMainContent.module.css'; + +export interface IDetailsCard extends ISelfDescription { +} + +interface IDetailsCardProps { + cardData: IDetailsCard; +} + +export default function ResourcesMainContent({ cardData }: Readonly) { + console.log('What to work with: ', cardData); + + // Ensure cardData.items is an array and has data + const propertiesList = + cardData && cardData.items + ? cardData.items.map((item) => item['properties(n)']) + : []; + console.log('Property list: ', propertiesList); + + // Temporary solution to extract name and description for our Card. Will be refactored once we have a better paylaod structure + let name, description; + if (cardData && cardData.items && cardData.items.length > 0) { + const propertiesN = cardData.items[0]['properties(n)']; + name = propertiesN.name; + description = propertiesN.description; + } + + // Extracting the general properties from our propertiesList for Details part of our Card + const generalPropertiesList = propertiesList.flatMap((properties) => + Object.entries(properties) + .filter(([key, _]) => /general/i.test(key)) + .map(([key, value]) => ({ [key]: value })) + ); + + // Extracting the Related Offerings properties for lower part of our Card + const otherPropertiesList = propertiesList.flatMap((properties) => + Object.entries(properties) + .filter(([key, _]) => !/general/i.test(key)) + .map(([key, value]) => ({ [key]: value })) + ); + + return ( +
+ {name as string} + {description as string} + + General Information: +
+ {generalPropertiesList && + generalPropertiesList.map((properties, index) => + Object.entries(properties).map(([label, content]) => { + if (content !== 'Unknown') { + return ( + + ); + } + }) + )} +
+ + Details: +
+ {otherPropertiesList && + otherPropertiesList.map((properties, index) => + Object.entries(properties).map(([label, content]) => { + if ( + label !== 'name' && + label !== 'description' && + content !== 'Unknown' + ) { + return ( + + ); + } + }) + )} +
+
+ ); +} From 2ee586d114f5254e8cfba457baf36bb3a97395de Mon Sep 17 00:00:00 2001 From: Keresztes Zsolt <178369172+zsoltker@users.noreply.github.com> Date: Fri, 27 Sep 2024 16:38:17 +0300 Subject: [PATCH 6/8] fix code review comments Signed-off-by: Keresztes Zsolt <178369172+zsoltker@users.noreply.github.com> --- src/common/markdown/GMarkdown.tsx | 39 -------------- .../{GMarkdown.module.css => Markdown.css} | 23 ++++---- src/common/markdown/Markdown.tsx | 34 ++++++++++++ src/components/ItemCard/ItemCard.tsx | 3 +- .../ItemCard/OntologyCardContent.tsx | 4 +- .../ItemCard/ResourceCardContent.tsx | 4 +- src/components/Routes.tsx | 4 +- .../pages/ontologies/OntologyMainContent.tsx | 6 +-- ....module.css => ResourcesDatail.module.css} | 0 ...etailsPage.tsx => ResourcesDetailPage.tsx} | 54 ++++++++----------- .../pages/resources/ResourcesMainContent.tsx | 4 +- 11 files changed, 79 insertions(+), 96 deletions(-) delete mode 100644 src/common/markdown/GMarkdown.tsx rename src/common/markdown/{GMarkdown.module.css => Markdown.css} (77%) create mode 100644 src/common/markdown/Markdown.tsx rename src/components/detailsPage/pages/resources/{ResourcesDatails.module.css => ResourcesDatail.module.css} (100%) rename src/components/detailsPage/pages/resources/{ResourcesDetailsPage.tsx => ResourcesDetailPage.tsx} (53%) diff --git a/src/common/markdown/GMarkdown.tsx b/src/common/markdown/GMarkdown.tsx deleted file mode 100644 index ac1d0f56..00000000 --- a/src/common/markdown/GMarkdown.tsx +++ /dev/null @@ -1,39 +0,0 @@ -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 = ({ isCard, maxContentHeight = 200, children }) => { - const [isHigher, setIsHigher] = useState(false); - const contentRef = useRef(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 ( - <> -
-
- {children} -
-
- {isCard && isHigher &&
...
} - - ); -}; - -export default GMarkdown; diff --git a/src/common/markdown/GMarkdown.module.css b/src/common/markdown/Markdown.css similarity index 77% rename from src/common/markdown/GMarkdown.module.css rename to src/common/markdown/Markdown.css index aa6ef5c8..7f7e8d6c 100644 --- a/src/common/markdown/GMarkdown.module.css +++ b/src/common/markdown/Markdown.css @@ -1,37 +1,37 @@ -.gmarkdown { +.markdown { font-size: large; font-weight: lighter; text-align: justify; } -.gmarkdown table { +.markdown table { width: 100%; border: 1px solid black; border-collapse: collapse; margin: 20px 0; } -.gmarkdown th, -.gmarkdown td { +.markdown th, +.markdown td { border: 1px solid black; padding: 8px; text-align: left; } -.gmarkdown th { +.markdown th { background-color: #f2f2f2; font-weight: bold; } -.gmarkdown tr:nth-child(even) { +.markdown tr:nth-child(even) { background-color: #f9f9f9; } -.gmarkdown tr:hover { +.markdown tr:hover { background-color: #e0e0e0; } -.gmarkdown pre { +.markdown pre { background-color: #f5f5f5; border: 1px solid #ccc; border-radius: 4px; @@ -41,22 +41,21 @@ white-space: pre-wrap; } -.gmarkdown code { +.markdown code { background-color: #e8e8e8; border-radius: 4px; padding: 2px 4px; font-family: 'Courier New', Courier, monospace; } -.gmarkdown pre code { +.markdown pre code { background: none; color: inherit; } -.card { +.item-card .markdown { max-height: 200px; overflow: hidden; - text-overflow: ellipsis; } .ellipsis { diff --git a/src/common/markdown/Markdown.tsx b/src/common/markdown/Markdown.tsx new file mode 100644 index 00000000..089ba2a5 --- /dev/null +++ b/src/common/markdown/Markdown.tsx @@ -0,0 +1,34 @@ +import MarkdownToJSX from 'markdown-to-jsx'; +import React, { useEffect, useRef, useState } from 'react'; +import './Markdown.css' + +type GMarkdownProps = { + children: React.ReactNode; +}; + +const Markdown: React.FC = ({ children }) => { + const [isTruncated, setIsTruncated] = useState(false); + const contentRef = useRef(null); + + useEffect(() => { + const checkTruncation = () => { + if (contentRef.current) { + setIsTruncated(contentRef.current.scrollHeight > contentRef.current.clientHeight + 1); + } + } + + checkTruncation(); + + }, [children]); + + return ( + <> +
+ {children} +
+ {isTruncated &&
...
} + + ); +}; + +export default Markdown; diff --git a/src/components/ItemCard/ItemCard.tsx b/src/components/ItemCard/ItemCard.tsx index 3e9c6ef0..16c10c69 100644 --- a/src/components/ItemCard/ItemCard.tsx +++ b/src/components/ItemCard/ItemCard.tsx @@ -1,3 +1,4 @@ +import classNames from 'classnames'; import { FC } from 'react'; import { useTranslation } from 'react-i18next'; @@ -33,7 +34,7 @@ const ItemCard: FC = ({ const { t } = useTranslation(); return ( -
+
{label} {isGaiaXCompliant === undefined ? null : ( diff --git a/src/components/ItemCard/OntologyCardContent.tsx b/src/components/ItemCard/OntologyCardContent.tsx index 09a59380..1e78c05d 100644 --- a/src/components/ItemCard/OntologyCardContent.tsx +++ b/src/components/ItemCard/OntologyCardContent.tsx @@ -2,7 +2,7 @@ import React, { FC } from 'react'; import { useTranslation } from 'react-i18next'; import { useNavigate } from 'react-router-dom'; -import GMarkdown from '../../common/markdown/GMarkdown'; +import Markdown from '../../common/markdown/Markdown'; import { Ontology } from '../../types/ontologies.model'; import Title from '../Title/Title'; import GaiaXButton from '../buttons/GaiaXButton'; @@ -27,7 +27,7 @@ const OntologyCardContent: FC = ({ ontology } ) => {
{ontology.subject}
- {ontology.description} + {ontology.description}
= ({ resource }) => { )) } - {resource.description} + {resource.description}
( )} /> )} /> )}/> + element={ViewContainer()}/> )} /> )} /> )} /> diff --git a/src/components/detailsPage/pages/ontologies/OntologyMainContent.tsx b/src/components/detailsPage/pages/ontologies/OntologyMainContent.tsx index b9131df7..6c46c0e6 100644 --- a/src/components/detailsPage/pages/ontologies/OntologyMainContent.tsx +++ b/src/components/detailsPage/pages/ontologies/OntologyMainContent.tsx @@ -2,7 +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 Markdown from '../../../../common/markdown/Markdown'; import { OntologyContext } from '../../../../context/OntologyContext'; import { Shape } from '../../../../types/shapes.model'; import Text from '../../../Text/Text'; @@ -26,9 +26,9 @@ const OntologyMainContent: FC = () => { return (
{t('ontologies.title')} - + {ontology.description} - + {ontology.relatedShapes.length > 0 && (
{t('ontologies.classes')} diff --git a/src/components/detailsPage/pages/resources/ResourcesDatails.module.css b/src/components/detailsPage/pages/resources/ResourcesDatail.module.css similarity index 100% rename from src/components/detailsPage/pages/resources/ResourcesDatails.module.css rename to src/components/detailsPage/pages/resources/ResourcesDatail.module.css diff --git a/src/components/detailsPage/pages/resources/ResourcesDetailsPage.tsx b/src/components/detailsPage/pages/resources/ResourcesDetailPage.tsx similarity index 53% rename from src/components/detailsPage/pages/resources/ResourcesDetailsPage.tsx rename to src/components/detailsPage/pages/resources/ResourcesDetailPage.tsx index 1305884f..3f7b995f 100644 --- a/src/components/detailsPage/pages/resources/ResourcesDetailsPage.tsx +++ b/src/components/detailsPage/pages/resources/ResourcesDetailPage.tsx @@ -5,12 +5,13 @@ 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 LoadingIndicator from '../../../loading_view/LoadingIndicator'; +import NoContent from '../../../nocontent/NoContent'; -import styles from './ResourcesDatails.module.css'; +import styles from './ResourcesDatail.module.css'; import ResourcesMainContent from './ResourcesMainContent'; -export default function ResourcesDetailsPage() { +export default function ResourcesDetailPage() { const authContext = useContext(AuthContext); const [selfDescriptionData, setSelfDescriptionData] = useState(null); const { resourceId } = useParams(); @@ -24,8 +25,6 @@ export default function ResourcesDetailsPage() { if (response) { setSelfDescriptionData(response); } - } catch (error) { - console.error('Error fetching self descriptions:', error); } finally { setIsLoading(false); } @@ -36,37 +35,26 @@ export default function ResourcesDetailsPage() { } }, [resourceId, authContext.isAuthenticated]); - if (isLoading) { - return ( -
- loading... -
- ); - } - - if (!selfDescriptionData) { - return
No data available.
; - } - return (
- {isLoading ? ( -
- loading... -
- ) : ( + + {!isLoading && ( <> -
- -
-
- - -
+ + {selfDescriptionData && ( + <> +
+ +
+
+ + +
+ )} )}
diff --git a/src/components/detailsPage/pages/resources/ResourcesMainContent.tsx b/src/components/detailsPage/pages/resources/ResourcesMainContent.tsx index 25fd3b3f..007c6fe0 100644 --- a/src/components/detailsPage/pages/resources/ResourcesMainContent.tsx +++ b/src/components/detailsPage/pages/resources/ResourcesMainContent.tsx @@ -3,7 +3,7 @@ import Divider from 'components/divider/Divider'; import Subtitle from 'components/subtitle/Subtitle'; import DataField from 'data-field/DataField'; -import GMarkdown from '../../../../common/markdown/GMarkdown'; +import Markdown from '../../../../common/markdown/Markdown'; import { ISelfDescription } from '../../utils/dataMapper'; import styles from './ResourcesMainContent.module.css'; @@ -50,7 +50,7 @@ export default function ResourcesMainContent({ cardData }: Readonly {name as string} - {description as string} + {description as string} General Information:
From b40737cea598641ddc5f3589c96e54b834dab8ba Mon Sep 17 00:00:00 2001 From: Keresztes Zsolt <178369172+zsoltker@users.noreply.github.com> Date: Fri, 27 Sep 2024 16:42:59 +0300 Subject: [PATCH 7/8] fix namings Signed-off-by: Keresztes Zsolt <178369172+zsoltker@users.noreply.github.com> --- src/components/Routes.tsx | 4 ++-- ...ourcesDatail.module.css => ResourceDatails.module.css} | 0 .../{ResourcesDetailPage.tsx => ResourceDetailsPage.tsx} | 8 ++++---- ...nContent.module.css => ResourceMainContent.module.css} | 0 .../{ResourcesMainContent.tsx => ResourceMainContent.tsx} | 4 ++-- 5 files changed, 8 insertions(+), 8 deletions(-) rename src/components/detailsPage/pages/resources/{ResourcesDatail.module.css => ResourceDatails.module.css} (100%) rename src/components/detailsPage/pages/resources/{ResourcesDetailPage.tsx => ResourceDetailsPage.tsx} (89%) rename src/components/detailsPage/pages/resources/{ResourcesMainContent.module.css => ResourceMainContent.module.css} (100%) rename src/components/detailsPage/pages/resources/{ResourcesMainContent.tsx => ResourceMainContent.tsx} (95%) diff --git a/src/components/Routes.tsx b/src/components/Routes.tsx index 339eee88..6ed33508 100644 --- a/src/components/Routes.tsx +++ b/src/components/Routes.tsx @@ -11,7 +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 ResourcesDetailPage from './detailsPage/pages/resources/ResourcesDetailPage'; +import ResourceDetailsPage from './detailsPage/pages/resources/ResourceDetailsPage'; import ShapesDetailsPage from './detailsPage/pages/shapes/ShapesDetailsPage'; import DiscoveryItem from './discovery/DiscoveryItem'; import SearchView from './discovery/search/SearchView'; @@ -44,7 +44,7 @@ const Routes: FC = () => ( )} /> )} /> )}/> + element={ViewContainer()}/> )} /> )} /> )} /> diff --git a/src/components/detailsPage/pages/resources/ResourcesDatail.module.css b/src/components/detailsPage/pages/resources/ResourceDatails.module.css similarity index 100% rename from src/components/detailsPage/pages/resources/ResourcesDatail.module.css rename to src/components/detailsPage/pages/resources/ResourceDatails.module.css diff --git a/src/components/detailsPage/pages/resources/ResourcesDetailPage.tsx b/src/components/detailsPage/pages/resources/ResourceDetailsPage.tsx similarity index 89% rename from src/components/detailsPage/pages/resources/ResourcesDetailPage.tsx rename to src/components/detailsPage/pages/resources/ResourceDetailsPage.tsx index 3f7b995f..bd949188 100644 --- a/src/components/detailsPage/pages/resources/ResourcesDetailPage.tsx +++ b/src/components/detailsPage/pages/resources/ResourceDetailsPage.tsx @@ -8,10 +8,10 @@ import { CypherQueryApiService as cypherQuery } from 'services/cypherQueryApiSer import LoadingIndicator from '../../../loading_view/LoadingIndicator'; import NoContent from '../../../nocontent/NoContent'; -import styles from './ResourcesDatail.module.css'; -import ResourcesMainContent from './ResourcesMainContent'; +import styles from './ResourceDatails.module.css'; +import ResourceMainContent from './ResourceMainContent'; -export default function ResourcesDetailPage() { +export default function ResourceDetailsPage() { const authContext = useContext(AuthContext); const [selfDescriptionData, setSelfDescriptionData] = useState(null); const { resourceId } = useParams(); @@ -44,7 +44,7 @@ export default function ResourcesDetailPage() { {selfDescriptionData && ( <>
- +
diff --git a/src/components/detailsPage/pages/resources/ResourcesMainContent.module.css b/src/components/detailsPage/pages/resources/ResourceMainContent.module.css similarity index 100% rename from src/components/detailsPage/pages/resources/ResourcesMainContent.module.css rename to src/components/detailsPage/pages/resources/ResourceMainContent.module.css diff --git a/src/components/detailsPage/pages/resources/ResourcesMainContent.tsx b/src/components/detailsPage/pages/resources/ResourceMainContent.tsx similarity index 95% rename from src/components/detailsPage/pages/resources/ResourcesMainContent.tsx rename to src/components/detailsPage/pages/resources/ResourceMainContent.tsx index 007c6fe0..e24d2629 100644 --- a/src/components/detailsPage/pages/resources/ResourcesMainContent.tsx +++ b/src/components/detailsPage/pages/resources/ResourceMainContent.tsx @@ -6,7 +6,7 @@ import DataField from 'data-field/DataField'; import Markdown from '../../../../common/markdown/Markdown'; import { ISelfDescription } from '../../utils/dataMapper'; -import styles from './ResourcesMainContent.module.css'; +import styles from './ResourceMainContent.module.css'; export interface IDetailsCard extends ISelfDescription { } @@ -15,7 +15,7 @@ interface IDetailsCardProps { cardData: IDetailsCard; } -export default function ResourcesMainContent({ cardData }: Readonly) { +export default function ResourceMainContent({ cardData }: Readonly) { console.log('What to work with: ', cardData); // Ensure cardData.items is an array and has data From 4e4d1a5638af38b1cb003e27cadf441cd2d1365f Mon Sep 17 00:00:00 2001 From: Keresztes Zsolt <178369172+zsoltker@users.noreply.github.com> Date: Tue, 1 Oct 2024 09:47:48 +0300 Subject: [PATCH 8/8] fix markdown props naming Signed-off-by: Keresztes Zsolt <178369172+zsoltker@users.noreply.github.com> --- src/common/markdown/Markdown.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/common/markdown/Markdown.tsx b/src/common/markdown/Markdown.tsx index 089ba2a5..59a1f1e5 100644 --- a/src/common/markdown/Markdown.tsx +++ b/src/common/markdown/Markdown.tsx @@ -2,11 +2,11 @@ import MarkdownToJSX from 'markdown-to-jsx'; import React, { useEffect, useRef, useState } from 'react'; import './Markdown.css' -type GMarkdownProps = { +type MarkdownProps = { children: React.ReactNode; }; -const Markdown: React.FC = ({ children }) => { +const Markdown: React.FC = ({ children }) => { const [isTruncated, setIsTruncated] = useState(false); const contentRef = useRef(null);