Implemented dynamic md files on the frontend

frontend/package.json

@@ -19,6 +19,7 @@
     "react-dom": "^18.2.0",
     "react-drag-drop-files": "^2.3.8",
     "react-frame-component": "^5.2.3",
+    "react-markdown": "^8.0.7",
     "react-modal": "^3.16.1",
     "react-router-dom": "^6.4.2",
     "react-scripts": "^5.0.1",

frontend/src/components/Analysis/Analysis.jsx

@@ -1,6 +1,6 @@
 import { Box, Grid, Button, Tab, Tabs, Typography, CircularProgress } from "@mui/material";
 import { Container } from "@mui/system";
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import TabPanel from "../GlobalComponents/TabPanel/TabPanel";
 import Data from "./Data/Data";
 import { CommentProvider } from "./Discussion/CommentContext";
@@ -17,6 +17,7 @@ import BlurryPage from "../GlobalComponents/BlurryPage/blurryPage";
 import { AnalysisService } from "../../services/analysis_service";
 import { faker } from "@faker-js/faker";
 import { useNavigate } from "react-router-dom";
+import ReactMarkdown from "react-markdown";
 
 export default function Analysis() {
     const navigate = useNavigate();
@@ -29,6 +30,48 @@ export default function Analysis() {
 
     const [isLoading, error, card, analysis_id] = AnalysisService.useGetCardDetails();
 
+    // Set the md descriptions
+
+    const [datasetDescription, setDatasetDescription] = useState("");
+    const [longDescription, setLongDescription] = useState("");
+    const [shortDescription, setShortDescription] = useState("");
+    const [rulesetDescription, setRulesetDescription] = useState("");
+
+    useEffect(() => {
+        import(`../../public/assets/${analysis_id}/dataset.md`)
+            .then(res => {
+                fetch(res.default)
+                    .then(res => res.text())
+                    .then(res => setDatasetDescription(res))
+                    .catch(err => console.log(err));
+            })
+            .catch(err => console.log(err));
+        import(`../../public/assets/${analysis_id}/longdesc.md`)
+            .then(res => {
+                fetch(res.default)
+                    .then(res => res.text())
+                    .then(res => setLongDescription(res))
+                    .catch(err => console.log(err));
+            })
+            .catch(err => console.log(err));
+        import(`../../public/assets/${analysis_id}/shortdesc.md`)
+            .then(res => {
+                fetch(res.default)
+                    .then(res => res.text())
+                    .then(res => setShortDescription(res))
+                    .catch(err => console.log(err));
+            })
+            .catch(err => console.log(err));
+        import(`../../public/assets/${analysis_id}/ruleset.md`)
+            .then(res => {
+                fetch(res.default)
+                    .then(res => res.text())
+                    .then(res => setRulesetDescription(res))
+                    .catch(err => console.log(err));
+            })
+            .catch(err => console.log(err));
+    });
+
     const closeModal = () => {
         setIsOpen(false);
     }
@@ -70,7 +113,7 @@ export default function Analysis() {
                     </Box>
                     <Box sx={{ flexGrow: 1, marginTop: 2, marginLeft: 2 }}>
                         <Typography color={"white"} variant="body2" gutterBottom>
-                            {card.short_description}
+                            <ReactMarkdown source={shortDescription} />
                         </Typography>
                     </Box>
                 </Box>
@@ -117,7 +160,7 @@ export default function Analysis() {
                     <TabPanel value={value} index={0}>
                         <Overview
                             title={"Overview of " + card.analysis_name}
-                            description={card.description}
+                            description={longDescription}
                         />
                     </TabPanel>
 
@@ -127,8 +170,7 @@ export default function Analysis() {
                                 <BlurryPage />
                                 :
                                 <Data
-                                    data_description={card.dataset_description}
-                                    downloadable_link={card.evaluation_script}
+                                    data_description={datasetDescription}
                                 />
                         }
                     </TabPanel>
@@ -142,7 +184,7 @@ export default function Analysis() {
                     <TabPanel value={value} index={3}>
                         <Rules
                             title={card.analysis_name}
-                            description={card.ruleset}
+                            description={rulesetDescription}
                         />
                     </TabPanel>
 

frontend/src/components/Analysis/Data/Data.jsx

@@ -1,6 +1,7 @@
 import { Box, Button, Grid, Typography } from "@mui/material";
 import { DashboardService } from "../../../services/dashboard_service";
 import PropTypes from 'prop-types';
+import ReactMarkdown from "react-markdown";
 
 export default function Data(props) {
 
@@ -21,7 +22,7 @@ export default function Data(props) {
                         Dataset Description
                     </Typography>
                     <Typography variant="body2">
-                        {props.data_description}
+                        <ReactMarkdown source={props.data_description} />
                     </Typography>
                 </Box>
             </Grid>

frontend/src/components/Analysis/Overview/Overview.js → frontend/src/components/Analysis/Overview/Overview.jsx

@@ -2,6 +2,7 @@ import { Grid, Typography } from '@mui/material';
 import { Box, Container } from '@mui/system';
 import PropTypes from 'prop-types';
 import { DashboardService } from '../../../services/dashboard_service';
+import { ReactMarkdown } from 'react-markdown/lib/react-markdown';
 
 export default function Overview(props) {
 
@@ -12,7 +13,7 @@ export default function Overview(props) {
                     {props.title}
                 </Typography>
                 <Typography variant='body2'>
-                    {props.description}
+                    <ReactMarkdown source={props.description} />
                 </Typography>
             </Box>
             <Grid container spacing={2} sx={{marginTop: 6}}>

frontend/src/components/Analysis/Rules/Rules.jsx

@@ -1,6 +1,7 @@
 import { Typography } from '@mui/material';
 import { Box, Container } from '@mui/system';
 import PropTypes from 'prop-types';
+import ReactMarkdown from 'react-markdown';
 
 export default function Rules(props) {
 
@@ -11,7 +12,7 @@ export default function Rules(props) {
                     {"Rules for " + props.title}
                 </Typography>
                 <Typography variant='body2' sx={{marginTop: 2}}>
-                    {props.description}
+                    <ReactMarkdown source={props.description} />
                 </Typography>
             </Box>
         </Container >

s3Emulator/pv-validation-hub-bucket/evaluation_scripts/pvinsight-validation-runner.py

@@ -42,7 +42,16 @@
 # Create a logger
 logger = logging.getLogger(__name__)
 
-is_s3_emulation = True
+def is_local():
+    """
+    Checks if the application is running locally or in an Amazon ECS environment.
+
+    Returns:
+        bool: True if the application is running locally, False otherwise.
+    """
+    return 'AWS_EXECUTION_ENV' not in os.environ and 'ECS_CONTAINER_METADATA_URI' not in os.environ and 'ECS_CONTAINER_METADATA_URI_V4' not in os.environ
+
+is_s3_emulation = is_local()
 
 def pull_from_s3(s3_file_path):
     if s3_file_path.startswith('/'):

workers/docker-entrypoint.sh

@@ -12,4 +12,4 @@
 #     sleep 5
 # done
 
-python submission_worker_local.py
+python submission_worker.py