Linked catalogue browser to artefact editor, enhanced functionalities in artefact editor

.gitignore

@@ -26,3 +26,4 @@ package-lock.json
 
 .env
 /src/pages/test.jsx
+/src/components/Old

src/components/Catalogue/catalogueItemView.jsx

@@ -1,16 +1,18 @@
 import { Portal, CloseButton, Image, Box, Text, Icon, Flex, useBreakpointValue } from "@chakra-ui/react";
+import { Tooltip } from "../../components/ui/tooltip"
 import { useEffect, useState, useRef } from "react";
+import { useNavigate } from "react-router-dom";
 import { motion, AnimatePresence } from "framer-motion";
 import { FaChevronLeft, FaChevronRight } from "react-icons/fa";
 import ItemViewToggle from "./itemViewToggle";
-import ItemViewMenu from "./itemViewMenu";
 import MetadataDisplay from "./metadataDisplay";
 import ItemChat from "./itemChat";
+import { IoOpen } from "react-icons/io5";
 
 const MotionBox = motion.create(Box);
 const MotionChevron = motion.create(Box);
 
-const CatalogueItemView = ({ isOpen, onClose, title, items, setDialogTitle, imageSrc }) => {
+const CatalogueItemView = ({ isOpen, onClose, title, sectionId, items, setDialogTitle, imageSrc }) => {
     const [isNavigating, setIsNavigating] = useState(false);
     const [direction, setDirection] = useState(0);
     const [isInitialRender, setIsInitialRender] = useState(true);
@@ -20,6 +22,8 @@ const CatalogueItemView = ({ isOpen, onClose, title, items, setDialogTitle, imag
     const scrollRef = useRef(null);
     const modalRef = useRef(null);
     const currentIndex = items.findIndex((item) => item.title === title);
+    const currentId = currentIndex !== -1 ? items[currentIndex].id : null;
+    const navigate = useNavigate()
 
     const prevItem = () => {
         if (!isNavigating && currentIndex > 0) {
@@ -357,7 +361,17 @@ const CatalogueItemView = ({ isOpen, onClose, title, items, setDialogTitle, imag
                                                                 >
                                                                     {item.title}
                                                                 </Text>
-                                                                <ItemViewMenu />
+
+                                                                <Tooltip 
+                                                                    showArrow 
+                                                                    content="Open in Data Studio" 
+                                                                    positioning={{ placement: "right-end" }} 
+                                                                    closeDelay={150} 
+                                                                    openDelay={150}
+                                                                    contentProps={{ css: { "--tooltip-bg": "#12144C" } }}
+                                                                >
+                                                                    <IoOpen size={25} color="#12144C" onClick={() => navigate(`/studio/${sectionId}/${currentId}`)} cursor={"pointer"}/>
+                                                                </Tooltip>
                                                             </Flex>
 
                                                             <CloseButton
@@ -481,10 +495,21 @@ const CatalogueItemView = ({ isOpen, onClose, title, items, setDialogTitle, imag
                                                                     lg: "2xl",
                                                                 }}
                                                                 fontWeight="bold"
+                                                                mr={4}
                                                             >
                                                                 {title}
                                                             </Text>
-                                                            <ItemViewMenu />
+
+                                                            <Tooltip 
+                                                                showArrow 
+                                                                content="Open in Data Studio" 
+                                                                positioning={{ placement: "right-end" }} 
+                                                                closeDelay={150} 
+                                                                openDelay={150}
+                                                                contentProps={{ css: { "--tooltip-bg": "#12144C" } }}
+                                                            >
+                                                                <IoOpen size={25} color="#12144C" onClick={() => navigate(`/studio/${sectionId}/${currentId}`)} cursor={"pointer"}/>
+                                                            </Tooltip>
                                                         </Flex>
 
                                                         <Box
@@ -505,7 +530,7 @@ const CatalogueItemView = ({ isOpen, onClose, title, items, setDialogTitle, imag
                                                             />
                                                         </Box>
 
-                                                        <Box flex={1} mt={4}>
+                                                        <Box flex={1} mt={4} overflowY={"auto"} scrollbar={"hidden"}>
                                                             {selectedSegment ===
                                                             "metadata" ? (
                                                                 <MetadataDisplay

src/components/Catalogue/metadataDisplay.jsx

@@ -249,13 +249,13 @@ function MetadataDisplay({ currentItem, isOpen }) {
                     {metadata.addInfo && (
                         <>
                             <Text fontWeight="bold" mb={1}>Additional Info:</Text>
-                            <Text>{metadata.addInfo}</Text>
+                            <Text mb={6}>{metadata.addInfo}</Text>
                         </>
                     )}
 
                     {/* Figure headshots (if available) */}
                     {Array.isArray(metadata.figureIDs) && metadata.figureIDs.length > 0 ? (
-                        <Flex wrap="wrap" gap={4} mb={4}>
+                        <Flex wrap="wrap" gap={10} mb={4}>
                             {metadata.figureIDs.map((id) => (
                                 <Box
                                     key={id}

src/components/Catalogue/section.jsx

@@ -1,12 +1,15 @@
-import { Box, Text, Flex, useBreakpointValue, Image } from "@chakra-ui/react";
+import { Box, Text, Flex, useBreakpointValue, Image, Button } from "@chakra-ui/react";
 import { useRef, useState, useEffect } from "react";
 import CardItem from "./cardItem.jsx";
 import CatalogueItemView from "./catalogueItemView.jsx";
 import ArrowOverlay from "./arrowOverlay.jsx";
 import placeholderImage from "../../assets/placeholderImage.png"
+import { useNavigate } from "react-router-dom";
+import { BsEye } from "react-icons/bs";
 
-const Section = ({ sectionTitle, onItemClick, artefacts = [] }) => {
+const Section = ({ sectionTitle, sectionId, onItemClick, artefacts = [] }) => {
     const isMobile = useBreakpointValue({ base: true, md: false });
+    const navigate = useNavigate()
 
     const items = artefacts.map((art) => ({
         id: art.id,
@@ -66,15 +69,21 @@ const Section = ({ sectionTitle, onItemClick, artefacts = [] }) => {
 
     return (
         <Box mt={5} position="relative" overflow="hidden">
-            <Text
-                paddingLeft={14}
-                textStyle="xl"
-                zIndex={20}
-                position="relative"
-                mb={4}
-            >
-                {sectionTitle}
-            </Text>
+            <Flex flexDirection={"row"} alignItems={"center"} mb={4}>
+                <Text
+                    paddingLeft={14}
+                    textStyle="xl"
+                    zIndex={20}
+                    position="relative"
+                >
+                    {sectionTitle}
+                </Text>
+
+                <Button size={"sm"} variant={"ArchPrimary"} ml={6} onClick={() => navigate(`/studio/${sectionId}`)}>
+                    <BsEye />
+                    <Text>View</Text>
+                </Button>
+            </Flex>
 
             {!isMobile && (
                 <>
@@ -136,6 +145,7 @@ const Section = ({ sectionTitle, onItemClick, artefacts = [] }) => {
                 isOpen={dialogOpen}
                 onClose={() => setDialogOpen(false)}
                 title={dialogTitle}
+                sectionId={sectionId}
                 items={items}
                 setDialogTitle={setDialogTitle}
                 imageSrc={currentItem?.imageSrc}