working MD document reference

frontend/public/assets/1/dataset.md

@@ -1,5 +1,8 @@
 
-DATASET_DESCRIPTION="A description of the dataset. Lorem ipsum dolor sit amet, 
-    consectetur adipiscing elit. Fusce euismod felis a mi aliquam, sit amet consequat mi aliquet. 
-    Vestibulum consectetur, purus vel ullamcorper ullamcorper, 
-    libero sapien pharetra sapien, eget varius lorem dui auctor magna."
+# Dataset Description
+
+**Description:** A description of the dataset. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce euismod felis a mi aliquam, sit amet consequat mi aliquet. Vestibulum consectetur, purus vel ullamcorper ullamcorper, libero sapien pharetra sapien, eget varius lorem dui auctor magna.
+
+**Note:** This dataset contains valuable information for research and analysis purposes. Please make sure to adhere to ethical guidelines and terms of use when accessing and utilizing the data.
+
+For more details, refer to the [official documentation](link_to_documentation).

frontend/public/assets/1/longdesc.md

@@ -1,9 +1,6 @@
-DESCRIPTION="Time shift validation analysis is a statistical technique used to evaluate the accuracy and consistency of forecasting models. 
-    It involves shifting time series data and comparing forecasts against actual values. 
-    The purpose is to assess the reliability of models for predicting future time periods. 
-    The data is split into a training and validation set, and forecasts are generated for the validation set. 
-    Time shifts are then applied to the validation set, 
-    and forecasts for the shifted data are compared against the original validation set. 
-    The accuracy is measured using statistical metrics like MAE or RMSE. 
-    The analysis can provide insights into the stability and reliability of the model. 
-    It is useful for evaluating forecasting models and ensuring they are trustworthy for real-world predictions."
+# Time Shift Validation Analysis
+
+**Description:** Time shift validation analysis is a statistical technique used to evaluate the accuracy and consistency of forecasting models. It involves shifting time series data and comparing forecasts against actual values. The purpose is to assess the reliability of models for predicting future time periods. The data is split into a training and validation set, and forecasts are generated for the validation set. Time shifts are then applied to the validation set, and forecasts for the shifted data are compared against the original validation set. The accuracy is measured using statistical metrics like MAE or RMSE. The analysis can provide insights into the stability and reliability of the model. It is useful for evaluating forecasting models and ensuring they are trustworthy for real-world predictions.
+
+**Note:** This technique is commonly used in various fields to validate forecasting models and enhance their performance. For more in-depth information, refer to the [official documentation](link_to_documentation).
+

frontend/public/assets/1/ruleset.md

@@ -1,5 +1,7 @@
 
-RULESET="Some ruleset data. Lorem ipsum dolor sit amet, 
-    consectetur adipiscing elit. Fusce euismod felis a mi aliquam, sit amet consequat mi aliquet. 
-    Vestibulum consectetur, purus vel ullamcorper ullamcorper, 
-    libero sapien pharetra sapien, eget varius lorem dui auctor magna."
+# Ruleset Data
+
+**Ruleset:** Some ruleset data. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce euismod felis a mi aliquam, sit amet consequat mi aliquet. Vestibulum consectetur, purus vel ullamcorper ullamcorper, libero sapien pharetra sapien, eget varius lorem dui auctor magna.
+
+**Note:** The ruleset provides a set of guidelines or criteria for making decisions or evaluating data. It can be a valuable tool for various applications. Refer to the [official documentation](link_to_documentation) for detailed information.
+

frontend/public/assets/1/shortdesc.md

@@ -1,4 +1,7 @@
 
-SHORT_DESCRIPTION="Time shift validation analysis evaluates the reliability and 
-    accuracy of forecasting models by comparing shifted time series data and 
-    generated forecasts against the original data."
+# Time Shift Validation Analysis
+
+**Short Description:** Time shift validation analysis evaluates the reliability and accuracy of forecasting models by comparing shifted time series data and generated forecasts against the original data.
+
+**Note:** This analysis technique is crucial for ensuring that forecasting models can reliably predict future trends and outcomes. For more details, see the [official documentation](link_to_documentation).
+

frontend/src/components/Analyses/Analyses.jsx

@@ -11,6 +11,7 @@ import { useState } from "react";
 import { useEffect } from "react";
 import CircularProgress from '@mui/material/CircularProgress';
 import { faker } from "@faker-js/faker";
+import ReactMarkdown from "react-markdown";
 
 export default function Dashboard() {
     const navigate = useNavigate();
@@ -67,6 +68,15 @@ export default function Dashboard() {
 }
 
 function CustomizedCard({ index, card, onClick }) {
+    const [shortDescription, setShortDescription] = useState("");
+
+    if (card.analysis_id !== undefined && card.analysis_id !== null && card.analysis_id > 0) {
+        fetch(process.env.PUBLIC_URL + `/assets/${card.analysis_id}/shortdesc.md`)
+        .then(res => res.text())
+        .then(text => setShortDescription(text))
+        .catch(err => console.log(err));
+    }
+
     return (
         <Grid item xs={2} sm={4} md={4} key={index}>
             <Card sx={{ maxWidth: 345, height: 380 }} key={card.analysis_id} onClick={() => onClick(card.analysis_id, card.analysis_name)}>
@@ -88,7 +98,7 @@ function CustomizedCard({ index, card, onClick }) {
                 />
                 <CardContent>
                     <Typography variant="body2" color="text.secondary">
-                        {card.short_description != undefined && card.short_description.length > 100 ? card.short_description.slice(0, 100) + "....." : card.short_description}
+                        <ReactMarkdown children={shortDescription != undefined && shortDescription.length > 100 ? shortDescription.slice(0, 100) + "....." : shortDescription} />
                     </Typography>
                 </CardContent>
             </Card>

frontend/src/components/Analysis/Analysis.jsx

@@ -38,39 +38,30 @@ export default function Analysis() {
     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));
-            })
+        console.log("analysis", analysis_id, typeof analysis_id)
+        if (analysis_id !== undefined && analysis_id !== null && analysis_id > 0) {
+            fetch(process.env.PUBLIC_URL + `/assets/${analysis_id}/dataset.md`)
+            .then(res => res.text())
+            .then(text => setDatasetDescription(text))
             .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));
-            })
+
+            fetch(process.env.PUBLIC_URL + `/assets/${analysis_id}/longdesc.md`)
+            .then(res => res.text())
+            .then(text => setLongDescription(text))
             .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));
-            })
+
+            fetch(process.env.PUBLIC_URL + `/assets/${analysis_id}/shortdesc.md`)
+            .then(res => res.text())
+            .then(text => setShortDescription(text))
             .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));
-            })
+
+            fetch(process.env.PUBLIC_URL + `/assets/${analysis_id}/ruleset.md`)
+            .then(res => res.text())
+            .then(text => setRulesetDescription(text))
             .catch(err => console.log(err));
-    });
+
+        }
+    }, [analysis_id]);
 
     const closeModal = () => {
         setIsOpen(false);
@@ -113,7 +104,7 @@ export default function Analysis() {
                     </Box>
                     <Box sx={{ flexGrow: 1, marginTop: 2, marginLeft: 2 }}>
                         <Typography color={"white"} variant="body2" gutterBottom>
-                            <ReactMarkdown source={shortDescription} />
+                            <ReactMarkdown children={shortDescription} />
                         </Typography>
                     </Box>
                 </Box>

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

@@ -22,7 +22,7 @@ export default function Data(props) {
                         Dataset Description
                     </Typography>
                     <Typography variant="body2">
-                        <ReactMarkdown source={props.data_description} />
+                        <ReactMarkdown children={props.data_description} />
                     </Typography>
                 </Box>
             </Grid>

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

@@ -13,7 +13,7 @@ export default function Overview(props) {
                     {props.title}
                 </Typography>
                 <Typography variant='body2'>
-                    <ReactMarkdown source={props.description} />
+                    <ReactMarkdown children={props.description} />
                 </Typography>
             </Box>
             <Grid container spacing={2} sx={{marginTop: 6}}>

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

@@ -12,7 +12,7 @@ export default function Rules(props) {
                     {"Rules for " + props.title}
                 </Typography>
                 <Typography variant='body2' sx={{marginTop: 2}}>
-                    <ReactMarkdown source={props.description} />
+                    <ReactMarkdown children={props.description} />
                 </Typography>
             </Box>
         </Container >