Render images, tables and mathematical notation in DetailsDialog

client/package.json

@@ -70,6 +70,7 @@
     "eslint-plugin-jest": "^27.6.0",
     "eslint-plugin-jsx-a11y": "^6.8.0",
     "eslint-plugin-react": "^7.33.2",
+    "katex": "^0.16.11",
     "oidc-client-ts": "^2.2.2",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
@@ -84,6 +85,7 @@
     "react-tabs": "^6.0.2",
     "redux": "^4.2.1",
     "remarkable": "^2.0.1",
+    "remarkable-katex": "^1.2.1",
     "resize-observer-polyfill": "^1.5.1",
     "serve": "^14.2.1",
     "styled-components": "^6.1.1",

client/src/preview/route/digitaltwins/manage/DetailsDialog.tsx

@@ -2,6 +2,9 @@ import * as React from 'react';
 import { Dispatch, SetStateAction } from 'react';
 import { Dialog, DialogContent, DialogActions, Button } from '@mui/material';
 import { Remarkable } from 'remarkable';
+import 'katex/dist/katex.min.css';
+// @ts-expect-error: Ignoring TypeScript error due to missing type definitions for 'remarkable-katex'.
+import RemarkableKatex from 'remarkable-katex';
 import { useSelector } from 'react-redux';
 import { selectDigitalTwinByName } from '../../../store/digitalTwin.slice';
 
@@ -17,10 +20,11 @@ const handleCloseLog = (setShowLog: Dispatch<SetStateAction<boolean>>) => {
 
 function DetailsDialog({ showLog, setShowLog, name }: DetailsDialogProps) {
   const digitalTwin = useSelector(selectDigitalTwinByName(name));
+
   const md = new Remarkable({
     html: true,
     typographer: true,
-  });
+  }).use(RemarkableKatex);
 
   return (
     <Dialog open={showLog} maxWidth="md">
@@ -29,13 +33,37 @@ function DetailsDialog({ showLog, setShowLog, name }: DetailsDialogProps) {
           dangerouslySetInnerHTML={{
             __html: md.render(digitalTwin.fullDescription),
           }}
+          style={{
+            maxWidth: '100%',
+          }}
         />
       </DialogContent>
       <DialogActions>
         <Button onClick={() => handleCloseLog(setShowLog)} color="primary">
           Close
         </Button>
       </DialogActions>
+      <style>{`
+        img {
+          max-width: 100%;
+          height: auto;
+          display: block;
+          margin: 0 auto;
+        }
+        table {
+          width: 100%;
+          border-collapse: collapse;
+          margin: 20px 0;
+        }
+        th, td {
+          border: 1px solid #ccc;
+          padding: 8px;
+          text-align: left;
+        }
+        th {
+          background-color: #f0f0f0;
+        }
+      `}</style>
     </Dialog>
   );
 }

client/src/preview/util/gitlabDigitalTwin.ts

@@ -1,3 +1,4 @@
+import { getAuthority } from 'util/envUtil';
 import GitlabInstance from './gitlab';
 
 const RUNNER_TAG = 'linux';
@@ -38,20 +39,25 @@ class DigitalTwin {
   async getFullDescription(): Promise<void> {
     if (this.gitlabInstance.projectId) {
       const readmePath = `digital_twins/${this.DTName}/README.md`;
+      const imagesPath = `digital_twins/${this.DTName}/`; // Path per le immagini
       try {
         const fileData = await this.gitlabInstance.api.RepositoryFiles.show(
           this.gitlabInstance.projectId,
           readmePath,
           'main',
         );
-        this.fullDescription = atob(fileData.content);
+        this.fullDescription = atob(fileData.content).replace(/(!\[[^\]]*\])\(([^)]+)\)/g, (match, altText, imagePath) => {
+          const fullUrl = `${getAuthority()}/dtaas/${sessionStorage.getItem('username')}/-/raw/main/${imagesPath}${imagePath}`;
+          return `${altText}(${fullUrl})`;
+        });
       } catch (error) {
         this.fullDescription = `There is no README.md file in the ${this.DTName} GitLab folder`;
       }
     } else {
       this.fullDescription = 'Error fetching description, retry.';
     }
   }
+
 
   isValidInstance(): boolean {
     return !!(