Merge pull request #22 from AuthEceSoftEng:thanos

Enhance file handling and UI adjustments

Author: ThanosMichailoudis3

src/api/api-config.js

@@ -40,7 +40,7 @@ const rootApi = ky.extend({
 					return new Response(JSON.stringify({ success: false }), { status: 200 });
 				}
 
-				if (status === 404) {
+				if (status === 404 && !_req.url.includes("/file/download/")) {
 					globalThis.location.href = "/";
 				}
 

src/api/index.js

@@ -22,6 +22,34 @@ export const signUp = (username, email, password) => api.post("createUser", { us
 export const invitedSignUp = (username, email, password, token) => api.post("createUserInvited", { username, email, password, token });
 export const uploadFile = (body) => rootApi.post("file/", { body }).json();
 export const reUploadFile = (body) => rootApi.put("file/", { body }).json();
+export const getFile = async (organization, saveName, originalName) => {
+	try {
+		const fileName = originalName || saveName;
+		// Make the API call to get the file as a blob
+		const response = await rootApi.get(
+			`file/download/${encodeURIComponent(organization)}/${encodeURIComponent(saveName)}/${encodeURIComponent(fileName)}`,
+		);
+		const blob = await response.blob();
+
+		// Create a download link and trigger it
+		const url = globalThis.URL.createObjectURL(blob);
+		const a = document.createElement("a");
+		a.href = url;
+		a.download = fileName;
+		document.body.append(a);
+		a.click();
+
+		// Cleanup
+		a.remove();
+		globalThis.URL.revokeObjectURL(url);
+
+		return { success: true };
+	} catch (error) {
+		console.error("Error downloading file:", error);
+		throw error;
+	}
+};
+
 export const deleteFile = (info) => api.post("file/delete/", info);
 export const inviteUser = (email) => api.post("user", { email });
 export const removeUser = (id) => api.post("user/delete", { id });

src/components/Card.js

@@ -34,15 +34,15 @@ const Card = ({
 			padding,
 			backgroundColor: transparent ? "transparent" : colors?.[backgroundColor] || backgroundColor,
 			opacity: transparent ? opacity : 1,
-			boxSizing: "border-box", // Ensure padding is included in the width
-			overflow: "hidden", // Prevent content overflow
-			borderRadius,
+			boxSizing: "border-box",
+			overflow: "hidden",
+			borderRadius: `${Number.parseInt(borderRadius, 10) + Number.parseInt(padding, 10)}px`,
 			cursor: clickable ? "pointer" : "default",
 			transition: "all 0.2s ease-in-out",
-			boxShadow: transparent ? elevation : null, // Add shadow based on elevation
+			boxShadow: transparent ? elevation : null,
 			"&:hover": hoverEffect && clickable ? {
 				transform: "scale(1.02)",
-				boxShadow: transparent ? elevation + 15 : null, // Increase shadow on hover
+				boxShadow: transparent ? elevation + 15 : null,
 			} : {},
 		}}
 		onClick={clickable ? onClick : undefined}
@@ -57,9 +57,9 @@ const Card = ({
 				flexDirection="row"
 				justifyContent="center"
 				alignItems="center"
-				boxSizing="border-box" // Ensure padding is included in the width
+				boxSizing="border-box"
 				borderRadius={borderRadius}
-				sx={{ flexShrink: 0 }} // Prevent title from shrinking
+				sx={{ flexShrink: 0 }}
 			>
 				{typeof title === "string" ? (
 					<Typography variant="body" component="h2" sx={{ fontWeight: "bold", fontSize: titleFontSize }}>
@@ -75,7 +75,7 @@ const Card = ({
 			padding="10px 5px"
 			justifyContent="center"
 			alignItems="center"
-			boxSizing="border-box" // Ensure padding is included in the width
+			boxSizing="border-box"
 			flexGrow={1}
 		>
 			{children}
@@ -89,8 +89,8 @@ const Card = ({
 				flexDirection="column"
 				justifyContent="space-between"
 				alignItems="center"
-				boxSizing="border-box" // Ensure padding is included in the width
-				sx={{ flexShrink: 0 }} // Prevent footer from shrinking
+				boxSizing="border-box"
+				sx={{ flexShrink: 0 }}
 			>
 				{typeof footer === "string" ? (
 					<Typography variant="h6" component="h2" align="left" fontSize={footerFontSize}>

src/components/Plot.js

@@ -97,8 +97,11 @@ const Plot = ({
 						suffix: d.suffix,
 						font: { color: colors?.[d?.textColor] || d?.textColor || "black" },
 					},
+					hovertemplate: d.hovertemplate,
+					customdata: d.customdata,
 					sort: d.sort ?? true,
 					orientation: d.orientation || "v",
+					automargin: true,
 				};
 
 				// Add pie-specific properties
@@ -111,7 +114,6 @@ const Plot = ({
 						text: pieDataThereshold(d.values, 0.03),
 						textinfo: "text",
 						hoverinfo: "label+percent+value",
-						automargin: true,
 						insidetextorientation: "radial",
 						domain: { x: [0, 1], y: [0, 1] },
 						textfont: { color: "white", size: 12 },
@@ -126,8 +128,6 @@ const Plot = ({
 							? (colors?.[d.color] || d.color)
 							: agriColors[index % agriColors.length],
 					},
-					hovertemplate: d.hovertemplate, // Add this line
-					customdata: d.customdata, // Add this line
 					gauge: d.type === "indicator" ? {
 						axis: { range: d.range },
 						bar: { color: colors?.[d?.color] || d?.color, thickness: 1 },
@@ -141,7 +141,6 @@ const Plot = ({
 						}),
 					} : undefined,
 					domain: { x: [0, 1], y: [0, 1] },
-					automargin: true,
 					labels: d.labels,
 					textfont: { color: "white" },
 				};

src/components/Sidebar.js

@@ -35,6 +35,12 @@ const useStyles = makeStyles((theme) => ({
 		minHeight: "30px",
 		transition: "transform 0.3s ease-in-out",
 	},
+	buttonHover: {
+		"&:hover": {
+			backgroundColor: "rgba(255, 255, 255, 0.1)",
+			transition: "background-color 0.3s ease",
+		},
+	},
 }));
 
 const IconRenderer = ({ icon, text, size = "25px" }) => (
@@ -60,22 +66,19 @@ const LogoRenderer = ({ logo, title, size = "20px", borderRadius = "8px" }) => (
 	</div>
 );
 
-const ButtonWithText = ({ text, icon, more, handler }) => (
+const ButtonWithText = ({ text, icon, more, handler, classes }) => (
 	<span key={text}>
 		{!more
 			&& (
 				<Button
 					key={text}
+					className={classes.buttonHover}
 					sx={{
 						width: "100%",
 						display: "flex",
 						flexDirection: "row",
 						justifyContent: "flex-start",
 						padding: "8px 40px 8px 16px",
-						"&:hover": {
-							backgroundColor: "rgba(255, 255, 255, 0.1)", // subtle white overlay on hover
-							transition: "background-color 0.3s ease",
-						},
 					}}
 					onClick={(event) => handler(event)}
 				>
@@ -122,10 +125,7 @@ const ButtonWithText = ({ text, icon, more, handler }) => (
 								sx={{
 									justifyContent: "flex-start",
 									marginLeft: "20px",
-									"&:hover": {
-										backgroundColor: "rgba(255, 255, 255, 0.1)",
-										transition: "background-color 0.3s ease",
-									},
+									...classes.buttonHover,
 								}}
 								onClick={el.handler}
 							>
@@ -143,21 +143,18 @@ const ButtonWithText = ({ text, icon, more, handler }) => (
 	</span>
 );
 
-const ButtonSimple = ({ text, icon, handler, ind }) => (
+const ButtonSimple = ({ text, icon, handler, ind, classes }) => (
 	<Button
 		key={text}
+		className={classes.buttonHover}
 		sx={{
 			minWidth: "30px!important",
 			padding: "8px",
 			position: "absolute",
-			top: `${ind * 40}px`, // Fixed position based on index (adjust the multiplier as needed)
+			top: `${ind * 40}px`,
 			left: "50%",
 			transform: "translateX(-50%)",
 			transition: "top 0.5s ease-in-out, background-color 0.3s ease",
-			"&:hover": {
-				backgroundColor: "rgba(255, 255, 255, 0.1)",
-				transition: "background-color 0.3s ease",
-			},
 		}}
 		onClick={(event) => handler(event)}
 	>
@@ -179,38 +176,32 @@ const Sidebar = ({ isSmall: sidebarIsSmall, onToggleSidebar }) => {
 
 	useEffect(() => setIsSmall(sidebarIsSmall), [sidebarIsSmall]);
 
+	// Create a wrapper handler
+	const createNavigationHandler = (path) => () => {
+		handleServicesMenuClose();
+		navigate(path);
+	};
+
 	const buttons = [
 		{
 			icon: <HomeRounded />,
-			text: "Overview",
-			handler: () => {
-				handleServicesMenuClose();
-				navigate("/home");
-			},
+			text: "Home",
+			handler: createNavigationHandler("/home"),
 		},
 		{
 			icon: <AgricultureRounded />,
 			text: "Products",
-			handler: () => {
-				handleServicesMenuClose();
-				navigate("/products");
-			},
+			handler: createNavigationHandler("/products"),
 		},
 		{
 			icon: <MapRounded />,
 			text: "Map",
-			handler: () => {
-				handleServicesMenuClose();
-				navigate("/Map");
-			},
+			handler: createNavigationHandler("/Map"),
 		},
 		{
 			icon: <CrisisAlertRounded />,
 			text: "Contaminants",
-			handler: () => {
-				handleServicesMenuClose();
-				navigate("/contaminants");
-			},
+			handler: createNavigationHandler("/contaminants"),
 		},
 		{
 			icon: <SpaRounded />,
@@ -277,6 +268,7 @@ const Sidebar = ({ isSmall: sidebarIsSmall, onToggleSidebar }) => {
 				className={classes.toggleButton}
 				sx={{
 					transform: isSmall ? "rotate(-90deg)" : "rotate(90deg)",
+					...classes.buttonHover,
 				}}
 				onClick={toggleSidebar}
 			>
@@ -289,6 +281,7 @@ const Sidebar = ({ isSmall: sidebarIsSmall, onToggleSidebar }) => {
 					text={button.text}
 					handler={button.handler}
 					more={button.more}
+					classes={classes}
 				/>
 			))}
 			{isSmall && (
@@ -310,6 +303,7 @@ const Sidebar = ({ isSmall: sidebarIsSmall, onToggleSidebar }) => {
 							handler={button.handler}
 							more={button.more}
 							ind={ind}
+							classes={classes}
 						/>
 					))}
 				</div>

src/config/LofsConfig.js

@@ -15,7 +15,6 @@ const createStatsConfig = (baseConfig, statsParams, attribute, stat, plotId, inc
 });
 
 const lofsConfigs = (product, startDate, endDate) => {
-	// Base configuration
 	const baseConfig = {
 		project: "lofsproject",
 		collection: "weatherdata",
@@ -54,7 +53,7 @@ const lofsConfigs = (product, startDate, endDate) => {
 				attributes: [
 					"key", "timestamp", "temp_max_c", "temp_min_c",
 					"rain_mm", "etp_mm", "humidity_percent",
-					"co2_ppm", "solar_radiation_j_cm2", "solar_radiation_mj_m2", "wind_speed_2m",
+					"co2_ppm", "solar_radiation_mj_m2", "wind_speed_2m", // "solar_radiation_j_cm2",
 				],
 				filters: [baseConfig.productFilter, ...dateFilter],
 				order_by: { field: "timestamp", order: "asc" },