Merge pull request #954 from singnet/data-preset-tab

Fixed bugs in data preset tab
singnet · Dec 4, 2024 · cf5dca7 · cf5dca7
2 parents c4da308 + fa96474
commit cf5dca7
Show file tree

Hide file tree

Showing 9 changed files with 34 additions and 13 deletions.
diff --git a/src/components/ServiceDetails/DataPreset/DashboardModal/ButtonGroup.js b/src/components/ServiceDetails/DataPreset/DashboardModal/ButtonGroup.js
@@ -29,7 +29,7 @@ const ButtonsGroup = ({ classes, selectedParameters, isTableView, toggleTableVie
       const improvedDataset = {
         additionalInfo: {
           analysis: data.analysis,
-          datasaet_sample: data.dataset_sample,
+          dataset_sample: data.dataset_sample,
         },
         datasetKey: data.dataset_key_new,
         name: dataset.name + "_improved_rate_" + data.analysis.overall_score,

diff --git a/src/components/ServiceDetails/DataPreset/DashboardModal/Graphs/TreemapGraph.js b/src/components/ServiceDetails/DataPreset/DashboardModal/Graphs/TreemapGraph.js
@@ -2,8 +2,6 @@ import { Treemap } from "recharts";
 import { roundToDesimals } from "../../../../../utility/JSHelper";
 
 const TreemapGraph = ({ data }) => {
-  console.log("data: ", data);
-
   // const dataKeys = Object.keys(data[0]);
 
   const labelKey = "name"; //dataKeys[0];

diff --git a/src/components/ServiceDetails/DataPreset/DashboardModal/Table/index.js b/src/components/ServiceDetails/DataPreset/DashboardModal/Table/index.js
@@ -2,6 +2,10 @@ import { withStyles } from "@mui/styles";
 import { useStyles } from "./styles";
 
 const TableSamples = ({ classes, tableData }) => {
+  if (tableData.length === 0) {
+    return null;
+  }
+
   const headData = tableData[0];
   const bodyData = tableData.length >= 2 ? tableData.slice(1) : [];
 

diff --git a/src/components/ServiceDetails/DataPreset/DashboardModal/index.js b/src/components/ServiceDetails/DataPreset/DashboardModal/index.js
@@ -29,7 +29,7 @@ const DashboardModal = ({ classes, onClose, isShow, dataset, index }) => {
           toggleTableView={toggleTableView}
           index={index}
         />
-        {isTableView && (dataset?.additionalInfo?.dataset_sample || dataset?.additionalInfo?.datasaet_sample) && (
+        {isTableView && dataset?.additionalInfo?.dataset_sample && (
           <TableSamples tableData={dataset?.additionalInfo?.dataset_sample} />
         )}
         <Graphs graphs={dataset?.additionalInfo?.analysis?.graphs} />

diff --git a/src/components/ServiceDetails/DataPreset/DatasetInfo/styles.js b/src/components/ServiceDetails/DataPreset/DatasetInfo/styles.js
@@ -1,6 +1,6 @@
 export const useStyles = (theme) => ({
   datasetParameter: {
-    minWidth: "100px",
+    flex: 1,
     display: "flex",
     padding: "14px 10px",
     flexDirection: "column",
@@ -60,11 +60,11 @@ export const useStyles = (theme) => ({
   parameterTitle: {
     margin: 0,
     fontSize: 17,
-    fontWeight: 700,
+    fontWeight: 600,
   },
   parameterValue: {
     margin: 0,
-    fontSize: 28,
-    fontWeight: 700,
+    fontSize: 24,
+    fontWeight: 600,
   },
 });
diff --git a/src/components/ServiceDetails/DataPreset/DatasetsList/styles.js b/src/components/ServiceDetails/DataPreset/DatasetsList/styles.js
@@ -5,6 +5,7 @@ export const useStyles = (theme) => ({
     gap: 16,
   },
   datasetLine: {
+    boxSizing: "border-box",
     display: "flex",
     padding: "8px 12px",
     justifyContent: "space-between",
@@ -15,6 +16,12 @@ export const useStyles = (theme) => ({
     background: theme.palette.text.gray,
     cursor: "pointer",
   },
+  datasetName: {
+    whiteSpace: "wrap",
+    textOverflow: "ellipsis",
+    width: "100%",
+    overflow: "hidden",
+  },
   datasetTag: {
     padding: 5,
     borderRadius: 6,

diff --git a/src/components/ServiceDetails/DataPreset/index.js b/src/components/ServiceDetails/DataPreset/index.js
@@ -73,15 +73,15 @@ const DataPreset = ({ classes }) => {
 
   const goToCreateModel = () => {
     const baseUrl = DatafactoryInstanceS3.getUri();
-    const link =`${baseUrl}/download?key=${mainDataset.datasetKey}`
+    const link = `${baseUrl}/download?key=${mainDataset.datasetKey}`;
     const model = {
       dataset: {
-      ...mainDataset,
+        ...mainDataset,
         link,
       },
       modelName: mainDataset.name,
       description: mainDataset.name,
-    }
+    };
     dispatch(setCurrentModelDetails(model));
     navigate(location.pathname.split("tab/")[0] + "tab/" + 3, { state: { isOpenCreatingModel: true } });
   };
@@ -116,7 +116,7 @@ const DataPreset = ({ classes }) => {
       <div className={classes.dataPresetContainer}>
         <h2>Upload Your Dataset</h2>
         <div className={clsx(classes.datasetUploaderContainer, mergeDataset && classes.verticalCentered)}>
-          <div className={classes.fileZone}>
+          <div className={mergeDataset ? classes.fileZone : classes.fileZoneExtended}>
             <DatasetUploader
               datasetInfo={mainDataset}
               setDatasetInfo={setMainDatasetFunction}

diff --git a/src/components/ServiceDetails/DataPreset/styles.js b/src/components/ServiceDetails/DataPreset/styles.js
@@ -8,6 +8,9 @@ export const useStyles = (theme) => ({
     display: "flex",
     justifyContent: "space-between",
     gap: 30,
+    "@media(max-width: 1024px)": {
+      flexDirection: "column",
+    },
   },
   fineTuneBatton: {
     textAlign: "right",
@@ -16,7 +19,16 @@ export const useStyles = (theme) => ({
     alignItems: "center",
   },
   fileZone: {
+    width: "40%",
+    "@media(max-width: 1024px)": {
+      width: "100% !important",
+    },
+  },
+  fileZoneExtended: {
     width: "50%",
+    "@media(max-width: 1024px)": {
+      width: "100% !important",
+    },
   },
   mergeButtonContainer: {
     "& button": {

diff --git a/src/components/common/SNETFileUpload/styles.js b/src/components/common/SNETFileUpload/styles.js
@@ -9,7 +9,7 @@ export const useStyles = makeStyles((MUITheme) => ({
     boxSizing: "border-box",
     position: "relative",
     width: "100%",
-    padding: "50px 45px !important",
+    padding: "50px 25px !important",
     borderWidth: 1,
     borderStyle: "dashed",
     borderColor: MUITheme.palette.text.darkGray,