Added metadata displaying in Catalogue Browser and static UI for Data Studio

package.json

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@chakra-ui/react": "^3.20.0",
+    "@dnd-kit/core": "^6.3.1",
     "@emotion/react": "^11.14.0",
     "@reduxjs/toolkit": "^2.8.2",
     "axios": "^1.9.0",

src/components/Catalogue/arrowOverlay.jsx

@@ -4,46 +4,58 @@ import { motion, AnimatePresence } from "framer-motion";
 
 const MotionBox = motion.create(Box);
 
-const ArrowOverlay = ({ direction, isDisabled, onClick, isOverflowing }) => {
+const ArrowOverlay = ({ direction, isDisabled, onClick, isOverflowing, smaller = false }) => {
     const isLeft = direction === "left";
 
+    const commonProps = {
+        initial: { opacity: 0, x: isLeft ? -20 : 20 },
+        animate: { opacity: 1, x: 0 },
+        exit: { opacity: 0, x: isLeft ? -20 : 20 },
+        transition: { duration: 0.3 },
+        position: "absolute",
+        top: 0,
+        bottom: 0,
+        left: isLeft ? 0 : "auto",
+        right: isLeft ? "auto" : 0,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: isLeft ? "flex-start" : "flex-end",
+        zIndex: 10,
+        cursor: isDisabled ? "not-allowed" : "pointer",
+        pointerEvents: isDisabled ? "none" : "auto",
+        opacity: isDisabled ? 0.3 : 1,
+        onClick,
+        bgGradient: isLeft ? "to-r" : "to-l",
+        gradientFrom: "rgb(255, 255, 255)",
+        gradientTo: "rgba(255, 255, 255, 0)",
+    };
+
     return (
         <AnimatePresence>
             {isOverflowing && (
-                <MotionBox
-                    key={direction}
-                    initial={{ opacity: 0, x: isLeft ? -20 : 20 }}
-                    animate={{ opacity: 1, x: 0 }}
-                    exit={{ opacity: 0, x: isLeft ? -20 : 20 }}
-                    transition={{ duration: 0.3 }}
-                    position="absolute"
-                    top={0}
-                    bottom={0}
-                    left={isLeft ? 0 : "auto"}
-                    right={isLeft ? "auto" : 0}
-                    width="100px"
-                    display="flex"
-                    alignItems="center"
-                    justifyContent={isLeft ? "flex-start" : "flex-end"}
-                    zIndex={10}
-                    px={6}
-                    bgGradient={isLeft ? "to-r" : "to-l"}
-                    gradientFrom="rgb(255, 255, 255)"
-                    gradientTo="rgba(255, 255, 255, 0)"
-                    cursor={isDisabled ? "not-allowed" : "pointer"}
-                    pointerEvents={isDisabled ? "none" : "auto"}
-                    opacity={isDisabled ? 0.3 : 1}
-                    onClick={onClick}
-                >
-                    <Icon
-                        as={isLeft ? FaChevronLeft : FaChevronRight}
-                        color="black"
-                        boxSize={8}
-                        mx={1}
-                        transition="transform 0.2s ease"
-                        _hover={!isDisabled ? { transform: "scale(1.2)" } : {}}
-                    />
-                </MotionBox>
+                smaller ? (
+                    <MotionBox {...commonProps} width="30px" px={2} key={direction}>
+                        <Icon
+                            as={isLeft ? FaChevronLeft : FaChevronRight}
+                            color="black"
+                            boxSize={4}
+                            mx={1}
+                            transition="transform 0.2s ease"
+                            _hover={!isDisabled ? { transform: "scale(1.2)" } : {}}
+                        />
+                    </MotionBox>
+                ) : (
+                    <MotionBox {...commonProps} width="100px" px={6} key={direction}>
+                        <Icon
+                            as={isLeft ? FaChevronLeft : FaChevronRight}
+                            color="black"
+                            boxSize={8}
+                            mx={1}
+                            transition="transform 0.2s ease"
+                            _hover={!isDisabled ? { transform: "scale(1.2)" } : {}}
+                        />
+                    </MotionBox>
+                )
             )}
         </AnimatePresence>
     );

src/components/Catalogue/cardComponent.jsx

@@ -1,13 +1,13 @@
 import { Card, Image, Text, Skeleton } from "@chakra-ui/react";
 import { useState } from "react";
 
-const CardComponent = ({ imageSrc, itemTitle, itemDescription, isSelected, expanded }) => {
+const CardComponent = ({ imageSrc, itemTitle, itemDescription, expanded }) => {
     const [isImageLoaded, setIsImageLoaded] = useState(false);
 
     const isLoading = !isImageLoaded;
 
     return (
-        <Card.Root overflow="hidden" boxShadow={isSelected ? "lg" : "md"} transition="all 0.3s ease-in-out">
+        <Card.Root overflow="hidden" boxShadow={"md"} transition="all 0.3s ease-in-out">
             <Skeleton loading={isLoading} height="180px">
                 <Image
                     src={imageSrc}
@@ -24,7 +24,7 @@ const CardComponent = ({ imageSrc, itemTitle, itemDescription, isSelected, expan
                 </Skeleton>
                 {expanded && (
                     <Skeleton loading={isLoading} mt={2}>
-                        <Text>{itemDescription}</Text>
+                        <Text fontSize={14}>{itemDescription}</Text>
                     </Skeleton>
                 )}
             </Card.Body>

src/components/Catalogue/cardItem.jsx

@@ -5,22 +5,15 @@ import CardComponent from "./cardComponent";
 
 const MotionBox = motion.create(Box);
 
-const CardItem = ({ itemTitle, itemDescription, selectedTitle, imageSrc }) => {
+const CardItem = ({ itemTitle, itemDescription, imageSrc, expandable = true, descriptionDisplay = false }) => {
     const isMobile = useBreakpointValue({ base: true, md: false });
 
     const [isHovered, setIsHovered] = useState(false);
-    const [isSelected, setIsSelected] = useState(selectedTitle === itemTitle);
-    const [isLoading, setIsLoading] = useState(true);
-
     const cardRef = useRef(null);
     const [hoverPos, setHoverPos] = useState({ top: 0, left: 0 });
     const scrollContainerRef = useRef(null);
     const hoverTimeoutRef = useRef(null);
 
-    useEffect(() => {
-        setIsSelected(selectedTitle === itemTitle);
-    }, [selectedTitle, itemTitle]);
-
     const updateHoverPosition = () => {
         const rect = cardRef.current?.getBoundingClientRect();
         if (rect) {
@@ -44,7 +37,7 @@ const CardItem = ({ itemTitle, itemDescription, selectedTitle, imageSrc }) => {
     };
 
     const handleMouseEnter = () => {
-        if (isMobile) return;
+        if (isMobile || !expandable) return;
         hoverTimeoutRef.current = setTimeout(() => {
             updateHoverPosition();
             setIsHovered(true);
@@ -99,24 +92,18 @@ const CardItem = ({ itemTitle, itemDescription, selectedTitle, imageSrc }) => {
                 transition="all 0.1s ease-in-out"
                 cursor="pointer"
                 w="280px"
-                border={isSelected ? "1px solid" : "none"}
-                borderColor={isSelected ? "blue.600" : "transparent"}
-                bg={isSelected ? "gray.100" : "white"}
                 borderRadius="md"
-                boxShadow={isSelected ? "lg" : "md"}
-                zIndex={isHovered ? 30 : "auto"}  // Conditional z-index
+                zIndex={isHovered ? 30 : "auto"}
             >
                 <CardComponent
                     imageSrc={imageSrc}
                     itemTitle={itemTitle}
                     itemDescription={itemDescription}
-                    isLoading={isLoading}
-                    isSelected={isSelected}
-                    expanded={false}
+                    expanded={descriptionDisplay}
                 />
             </Box>
 
-            {!isMobile && (
+            {!isMobile && expandable && (
                 <AnimatePresence>
                     {isHovered && (
                         <MotionBox
@@ -129,7 +116,7 @@ const CardItem = ({ itemTitle, itemDescription, selectedTitle, imageSrc }) => {
                                 position: "fixed",
                                 top: hoverPos.top,
                                 left: hoverPos.left + 15,
-                                zIndex: 30,  // Always high z-index for expanded card
+                                zIndex: 30, 
                                 pointerEvents: "auto",
                                 width: "280px",
                             }}
@@ -142,7 +129,6 @@ const CardItem = ({ itemTitle, itemDescription, selectedTitle, imageSrc }) => {
                                 imageSrc={imageSrc}
                                 itemTitle={itemTitle}
                                 itemDescription={itemDescription}
-                                isSelected={isSelected}
                                 expanded={true}
                             />
                         </MotionBox>