From a3dc77fc86753471dee7c5d21fd023a439509548 Mon Sep 17 00:00:00 2001
From: JunHam <joonjunhan@gmail.com>
Date: Tue, 12 Aug 2025 01:39:42 +0800
Subject: [PATCH 01/28] Fixed path routes for group view and artefact editor

---
 src/main.jsx                 | 6 ++----
 src/pages/ArtefactEditor.jsx | 4 ++--
 src/pages/GroupView.jsx      | 4 ++--
 3 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/src/main.jsx b/src/main.jsx
index c37405d..a73c062 100644
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -52,10 +52,8 @@ createRoot(document.getElementById('root')).render(
 
                                 <Route path='studio'>
                                     <Route index element={<DataStudio />} />
-                                    <Route path='editor'>
-                                        <Route path=':colID/:artID' element={<GroupView  />} />
-                                        <Route path='artefact/:artID' element={<ArtefactEditor />} />
-                                    </Route>
+                                    <Route path=':colID' element={<GroupView  />} />
+                                    <Route path=':colID/:artID' element={<ArtefactEditor />} />
                                 </Route>
                             </Route>
 
diff --git a/src/pages/ArtefactEditor.jsx b/src/pages/ArtefactEditor.jsx
index 5a297fe..e0494cb 100644
--- a/src/pages/ArtefactEditor.jsx
+++ b/src/pages/ArtefactEditor.jsx
@@ -2,9 +2,9 @@ import { Box, Flex } from "@chakra-ui/react";
 import { useParams } from 'react-router-dom';
 
 function ArtefactEditor() {
-    const { artID } = useParams();
+    const { colID, artID } = useParams();
     return (
-        <Box>ArtefactEditor for {artID}</Box>
+        <Box>ArtefactEditor for {colID} {artID}</Box>
     );
 }
 
diff --git a/src/pages/GroupView.jsx b/src/pages/GroupView.jsx
index 575240f..d3fbe4d 100644
--- a/src/pages/GroupView.jsx
+++ b/src/pages/GroupView.jsx
@@ -1,9 +1,9 @@
 import { useParams } from 'react-router-dom';
 
 function GroupView() {
-    const { artID, colID } = useParams();
+    const { colID } = useParams();
 
-    return <div>GroupView for collection {colID}, {artID}</div>;
+    return <div>GroupView for collection {colID}</div>;
 }
 
 export default GroupView;

From 3aa6174e48a019df396373c398c92aa11deb7f3f Mon Sep 17 00:00:00 2001
From: JunHam <joonjunhan@gmail.com>
Date: Tue, 12 Aug 2025 02:06:51 +0800
Subject: [PATCH 02/28] Added fetch metadata request for artefact editor

---
 src/pages/ArtefactEditor.jsx | 65 ++++++++++++++++++++++++++++++++++++
 1 file changed, 65 insertions(+)

diff --git a/src/pages/ArtefactEditor.jsx b/src/pages/ArtefactEditor.jsx
index e0494cb..7d6c2b5 100644
--- a/src/pages/ArtefactEditor.jsx
+++ b/src/pages/ArtefactEditor.jsx
@@ -1,8 +1,73 @@
 import { Box, Flex } from "@chakra-ui/react";
 import { useParams } from 'react-router-dom';
+import { useEffect, useRef, useState } from "react";
+import ToastWizard from "../components/toastWizard";
+import server, { JSONResponse } from "../networking";
 
 function ArtefactEditor() {
     const { colID, artID } = useParams();
+
+    // Metadata fetching states
+    const [metadata, setMetadata] = useState(null);
+    const [loading, setLoading] = useState(false);
+
+    // Metadata fetching function
+    const fetchMetadata = async () => {
+
+        setLoading(true);
+
+        try {
+            const response = await server.get(`/cdn/artefactMetadata/${artID}`);
+            console.log(response)
+
+            if (response.data instanceof JSONResponse) {
+                if (response.data.isErrorStatus()) {
+                    const errObject = {
+                        response: {
+                            data: response.data
+                        }
+                    };
+                    throw errObject;
+                }
+
+                // Success case
+                setMetadata(response.data.raw.data);
+            } else {
+                throw new Error("Unexpected response format");
+            }
+        } catch (err) {
+            if (err.response && err.response.data instanceof JSONResponse) {
+                if (err.response.data.userErrorType()) {
+                    ToastWizard.standard(
+                        "error",
+                        "We could not load the details",
+                        err.response.data.message || "There was a problem retrieving this item information. Please try again later."
+                    );
+                } else {
+                    ToastWizard.standard(
+                        "error",
+                        "Something went wrong",
+                        "We are having trouble loading the information. Please try again in a moment."
+                    );
+                }
+            } else {
+                ToastWizard.standard(
+                    "error",
+                    "Connection issue",
+                    "We could not connect to the server. Please check your internet connection or try again later."
+                );
+            }
+            setMetadata(null);
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    // Fetch metadata when currentItem changes or modal opens
+    useEffect(() => {
+        fetchMetadata();
+    }, []);
+
     return (
         <Box>ArtefactEditor for {colID} {artID}</Box>
     );

From ee52930e99d5dc7dc2409f25ece261eac53054f3 Mon Sep 17 00:00:00 2001
From: JunHam <joonjunhan@gmail.com>
Date: Tue, 12 Aug 2025 15:10:23 +0800
Subject: [PATCH 03/28] Added rough layout for artefact editor

---
 src/main.jsx                 | 12 +++----
 src/pages/ArtefactEditor.jsx | 67 +++++++++++++++++++++++++++---------
 2 files changed, 56 insertions(+), 23 deletions(-)

diff --git a/src/main.jsx b/src/main.jsx
index a73c062..1b3c99e 100644
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -49,18 +49,18 @@ createRoot(document.getElementById('root')).render(
                                 <Route path='auth'>
                                     <Route path='login' element={<Login />} />
                                 </Route>
-
-                                <Route path='studio'>
-                                    <Route index element={<DataStudio />} />
-                                    <Route path=':colID' element={<GroupView  />} />
-                                    <Route path=':colID/:artID' element={<ArtefactEditor />} />
-                                </Route>
                             </Route>
 
                             {/* Protected Pages */}
                             <Route element={<ProtectedLayout />}>
                                 <Route path='profile' element={<Profile />} />
                                 <Route path='admin' element={<AdminConsole />} />
+
+                                <Route path='studio'>
+                                    <Route index element={<DataStudio />} />
+                                    <Route path=':colID' element={<GroupView  />} />
+                                    <Route path=':colID/:artID' element={<ArtefactEditor />} />
+                                </Route>
                             </Route>
                         </Route>
 
diff --git a/src/pages/ArtefactEditor.jsx b/src/pages/ArtefactEditor.jsx
index 7d6c2b5..69579f5 100644
--- a/src/pages/ArtefactEditor.jsx
+++ b/src/pages/ArtefactEditor.jsx
@@ -1,21 +1,18 @@
-import { Box, Flex } from "@chakra-ui/react";
+import { Box, Flex, Text, Center, Spinner } from "@chakra-ui/react";
 import { useParams } from 'react-router-dom';
 import { useEffect, useRef, useState } from "react";
+import { useSelector } from "react-redux";
 import ToastWizard from "../components/toastWizard";
 import server, { JSONResponse } from "../networking";
+import CentredSpinner from "../components/CentredSpinner";
 
 function ArtefactEditor() {
-    const { colID, artID } = useParams();
-
-    // Metadata fetching states
+    const { artID } = useParams();
     const [metadata, setMetadata] = useState(null);
-    const [loading, setLoading] = useState(false);
+    const { loaded } = useSelector(state => state.auth);
 
     // Metadata fetching function
     const fetchMetadata = async () => {
-
-        setLoading(true);
-
         try {
             const response = await server.get(`/cdn/artefactMetadata/${artID}`);
             console.log(response)
@@ -41,36 +38,72 @@ function ArtefactEditor() {
                     ToastWizard.standard(
                         "error",
                         "We could not load the details",
-                        err.response.data.message || "There was a problem retrieving this item information. Please try again later."
+                        err.response.data.message || "There was a problem retrieving this item information. Please try again later.",
+                        3000,
+                        true,
+                        fetchMetadata,
+                        'Retry'
                     );
                 } else {
                     ToastWizard.standard(
                         "error",
                         "Something went wrong",
-                        "We are having trouble loading the information. Please try again in a moment."
+                        "We are having trouble loading the information. Please try again in a moment.",
+                        3000,
+                        true,
+                        fetchMetadata,
+                        'Retry'
                     );
                 }
             } else {
                 ToastWizard.standard(
                     "error",
                     "Connection issue",
-                    "We could not connect to the server. Please check your internet connection or try again later."
+                    "We could not connect to the server. Please check your internet connection or try again later.",
+                    3000,
+                    true,
+                    fetchMetadata,
+                    'Retry'
                 );
             }
             setMetadata(null);
-        } finally {
-            setLoading(false);
         }
     };
 
     // Fetch metadata when currentItem changes or modal opens
     useEffect(() => {
-        fetchMetadata();
-    }, []);
+        if (loaded) {
+            fetchMetadata()
+        }
+    }, [loaded]);
+
+    // Show loading spinner while data is being fetched
+    if (!metadata) {
+        return <CentredSpinner />
+    }
 
     return (
-        <Box>ArtefactEditor for {colID} {artID}</Box>
+        <>
+            <Box py={2} mb={6} mt={4}>
+                <Text fontSize="2xl" fontWeight="bold">Data Studio</Text>
+                <Text fontSize="md">{metadata.name}</Text>
+            </Box>
+
+            <Flex h={30}>
+                <Flex
+                    flexDirection="column"
+                    width="50%"
+                    bg="yellow"
+                >
+
+                </Flex>
+
+                <Box width="50%" bg="orange">
+
+                </Box>
+            </Flex>
+        </>
     );
 }
 
-export default ArtefactEditor;
+export default ArtefactEditor;
\ No newline at end of file

From 55eed68d5fb839be2f9b38d2717a6de23a7fc8b4 Mon Sep 17 00:00:00 2001
From: JunHam <joonjunhan@gmail.com>
Date: Tue, 12 Aug 2025 15:13:22 +0800
Subject: [PATCH 04/28] Fixed metadataDisplay to set metadata based on
 response.data.raw.data.metadata

---
 src/components/Catalogue/metadataDisplay.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Catalogue/metadataDisplay.jsx b/src/components/Catalogue/metadataDisplay.jsx
index 9e1972a..36e2b31 100644
--- a/src/components/Catalogue/metadataDisplay.jsx
+++ b/src/components/Catalogue/metadataDisplay.jsx
@@ -113,7 +113,7 @@ function MetadataDisplay({ currentItem, isOpen }) {
                 }
 
                 // Success case
-                setMetadata(response.data.raw.data);
+                setMetadata(response.data.raw.data.metadata);
             } else {
                 throw new Error("Unexpected response format");
             }

From 8dba01ef1c62dc176ff257af885fdc19a0695268 Mon Sep 17 00:00:00 2001
From: JunHam <joonjunhan@gmail.com>
Date: Tue, 12 Aug 2025 16:43:59 +0800
Subject: [PATCH 05/28] Added back arrow and chevrons for artefact editor

---
 src/pages/ArtefactEditor.jsx | 35 ++++++++++++++++++++++-------------
 1 file changed, 22 insertions(+), 13 deletions(-)

diff --git a/src/pages/ArtefactEditor.jsx b/src/pages/ArtefactEditor.jsx
index 69579f5..f52f1e7 100644
--- a/src/pages/ArtefactEditor.jsx
+++ b/src/pages/ArtefactEditor.jsx
@@ -5,6 +5,8 @@ import { useSelector } from "react-redux";
 import ToastWizard from "../components/toastWizard";
 import server, { JSONResponse } from "../networking";
 import CentredSpinner from "../components/CentredSpinner";
+import { FaArrowAltCircleLeft, FaChevronLeft, FaChevronRight } from "react-icons/fa";
+import ArrowOverlay from "../components/Catalogue/arrowOverlay";
 
 function ArtefactEditor() {
     const { artID } = useParams();
@@ -83,26 +85,33 @@ function ArtefactEditor() {
     }
 
     return (
-        <>
-            <Box py={2} mb={6} mt={4}>
-                <Text fontSize="2xl" fontWeight="bold">Data Studio</Text>
-                <Text fontSize="md">{metadata.name}</Text>
-            </Box>
-
-            <Flex h={30}>
-                <Flex
-                    flexDirection="column"
-                    width="50%"
-                    bg="yellow"
-                >
+        <Box>
+            <Flex mt={10} flexDirection="row">
+                <FaArrowAltCircleLeft size={50} color='darkBlue' />
+                <Box ml={6}>
+                    <Text fontSize="2xl" fontWeight="bold">Data Studio</Text>
+                    <Text fontSize="md" mt={1} mb={6}>{metadata.name}</Text>
+                </Box>
+            </Flex>
 
+            <Flex>
+                <Flex width="10%" bg="orange" justifyContent={"flex-start"}>
+                    <FaChevronLeft size={30} />
                 </Flex>
 
+                <Box width="50%" bg="yellow">
+                    
+                </Box>
+
                 <Box width="50%" bg="orange">
 
                 </Box>
+
+                <Flex width="10%" bg="yellow" justifyContent={"flex-end"}>
+                    <FaChevronRight size={30}/>
+                </Flex>
             </Flex>
-        </>
+        </Box>
     );
 }
 

From a09a706bf58a4f44caa13ff5c836f3b4848f7afc Mon Sep 17 00:00:00 2001
From: JunHam <joonjunhan@gmail.com>
Date: Tue, 12 Aug 2025 17:05:11 +0800
Subject: [PATCH 06/28] Added image rendering for AE

---
 src/pages/ArtefactEditor.jsx | 28 ++++++++++++++++++----------
 1 file changed, 18 insertions(+), 10 deletions(-)

diff --git a/src/pages/ArtefactEditor.jsx b/src/pages/ArtefactEditor.jsx
index f52f1e7..0bff8d8 100644
--- a/src/pages/ArtefactEditor.jsx
+++ b/src/pages/ArtefactEditor.jsx
@@ -1,4 +1,4 @@
-import { Box, Flex, Text, Center, Spinner } from "@chakra-ui/react";
+import { Box, Flex, Text, Image } from "@chakra-ui/react";
 import { useParams } from 'react-router-dom';
 import { useEffect, useRef, useState } from "react";
 import { useSelector } from "react-redux";
@@ -6,7 +6,6 @@ import ToastWizard from "../components/toastWizard";
 import server, { JSONResponse } from "../networking";
 import CentredSpinner from "../components/CentredSpinner";
 import { FaArrowAltCircleLeft, FaChevronLeft, FaChevronRight } from "react-icons/fa";
-import ArrowOverlay from "../components/Catalogue/arrowOverlay";
 
 function ArtefactEditor() {
     const { artID } = useParams();
@@ -84,8 +83,11 @@ function ArtefactEditor() {
         return <CentredSpinner />
     }
 
+    console.log(metadata)
+    console.log(`${import.meta.env.VITE_BACKEND_URL}/cdn/artefacts/${artID}`)
+
     return (
-        <Box>
+        <Box h="79vh">
             <Flex mt={10} flexDirection="row">
                 <FaArrowAltCircleLeft size={50} color='darkBlue' />
                 <Box ml={6}>
@@ -94,20 +96,26 @@ function ArtefactEditor() {
                 </Box>
             </Flex>
 
-            <Flex>
-                <Flex width="10%" bg="orange" justifyContent={"flex-start"}>
+            <Flex h="calc(79vh - 80px)">
+                <Flex width="5%" bg="orange" display="flex" alignItems="center" justifyContent="flex-start">
                     <FaChevronLeft size={30} />
                 </Flex>
 
-                <Box width="50%" bg="yellow">
-                    
+                <Box width="55%" bg="yellow" overflow="hidden">
+                    <Image
+                        src={`${import.meta.env.VITE_BACKEND_URL}/cdn/artefacts/${artID}`}
+                        w="100%"
+                        h="100%"
+                        objectFit="cover"
+                        borderRadius={20}
+                        p={2}
+                    />
                 </Box>
 
-                <Box width="50%" bg="orange">
-
+                <Box width="55%" bg="orange">
                 </Box>
 
-                <Flex width="10%" bg="yellow" justifyContent={"flex-end"}>
+                <Flex width="5%" bg="yellow" display="flex" alignItems="center" justifyContent="flex-end">
                     <FaChevronRight size={30}/>
                 </Flex>
             </Flex>

From 7c5f36c8b1cace067c4467d5ed92fa90f51f4977 Mon Sep 17 00:00:00 2001
From: JunHam <joonjunhan@gmail.com>
Date: Tue, 12 Aug 2025 17:09:43 +0800
Subject: [PATCH 07/28] Fixed sizing and layout in AE

---
 src/pages/ArtefactEditor.jsx | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/pages/ArtefactEditor.jsx b/src/pages/ArtefactEditor.jsx
index 0bff8d8..e0a0060 100644
--- a/src/pages/ArtefactEditor.jsx
+++ b/src/pages/ArtefactEditor.jsx
@@ -92,30 +92,30 @@ function ArtefactEditor() {
                 <FaArrowAltCircleLeft size={50} color='darkBlue' />
                 <Box ml={6}>
                     <Text fontSize="2xl" fontWeight="bold">Data Studio</Text>
-                    <Text fontSize="md" mt={1} mb={6}>{metadata.name}</Text>
+                    <Text fontSize="md" mt={1} mb={2}>{metadata.name}</Text>
                 </Box>
             </Flex>
 
-            <Flex h="calc(79vh - 80px)">
-                <Flex width="5%" bg="orange" display="flex" alignItems="center" justifyContent="flex-start">
+            <Flex h="calc(79vh - 45px)">
+                <Flex width="4%" bg="orange" display="flex" alignItems="center" justifyContent="flex-start">
                     <FaChevronLeft size={30} />
                 </Flex>
 
-                <Box width="55%" bg="yellow" overflow="hidden">
+                <Box width="46%" bg="yellow" overflow="hidden">
                     <Image
                         src={`${import.meta.env.VITE_BACKEND_URL}/cdn/artefacts/${artID}`}
                         w="100%"
                         h="100%"
                         objectFit="cover"
                         borderRadius={20}
-                        p={2}
+                        p={3}
                     />
                 </Box>
 
-                <Box width="55%" bg="orange">
+                <Box width="46%" bg="orange">
                 </Box>
 
-                <Flex width="5%" bg="yellow" display="flex" alignItems="center" justifyContent="flex-end">
+                <Flex width="4%" bg="yellow" display="flex" alignItems="center" justifyContent="flex-end">
                     <FaChevronRight size={30}/>
                 </Flex>
             </Flex>

From 512c63ef9993e8b9dc3be359ca929660400d891a Mon Sep 17 00:00:00 2001
From: JunHam <joonjunhan@gmail.com>
Date: Tue, 12 Aug 2025 17:29:23 +0800
Subject: [PATCH 08/28] added editorCard

---
 src/components/DataStudio/editorCard.jsx | 11 +++++++++++
 src/pages/ArtefactEditor.jsx             | 16 +++++++---------
 2 files changed, 18 insertions(+), 9 deletions(-)
 create mode 100644 src/components/DataStudio/editorCard.jsx

diff --git a/src/components/DataStudio/editorCard.jsx b/src/components/DataStudio/editorCard.jsx
new file mode 100644
index 0000000..b883e74
--- /dev/null
+++ b/src/components/DataStudio/editorCard.jsx
@@ -0,0 +1,11 @@
+import { Card } from "@chakra-ui/react"
+
+function EditorCard() {
+    return (
+        <Card.Root h={"100%"} borderRadius={15}>
+
+        </Card.Root>
+    )
+}
+
+export default EditorCard
\ No newline at end of file
diff --git a/src/pages/ArtefactEditor.jsx b/src/pages/ArtefactEditor.jsx
index e0a0060..9017727 100644
--- a/src/pages/ArtefactEditor.jsx
+++ b/src/pages/ArtefactEditor.jsx
@@ -6,6 +6,7 @@ import ToastWizard from "../components/toastWizard";
 import server, { JSONResponse } from "../networking";
 import CentredSpinner from "../components/CentredSpinner";
 import { FaArrowAltCircleLeft, FaChevronLeft, FaChevronRight } from "react-icons/fa";
+import EditorCard from "../components/DataStudio/editorCard";
 
 function ArtefactEditor() {
     const { artID } = useParams();
@@ -83,9 +84,6 @@ function ArtefactEditor() {
         return <CentredSpinner />
     }
 
-    console.log(metadata)
-    console.log(`${import.meta.env.VITE_BACKEND_URL}/cdn/artefacts/${artID}`)
-
     return (
         <Box h="79vh">
             <Flex mt={10} flexDirection="row">
@@ -97,25 +95,25 @@ function ArtefactEditor() {
             </Flex>
 
             <Flex h="calc(79vh - 45px)">
-                <Flex width="4%" bg="orange" display="flex" alignItems="center" justifyContent="flex-start">
+                <Flex width="4%" display="flex" alignItems="center" justifyContent="flex-start">
                     <FaChevronLeft size={30} />
                 </Flex>
 
-                <Box width="46%" bg="yellow" overflow="hidden">
+                <Box width="46%" overflow="hidden" p={3}>
                     <Image
                         src={`${import.meta.env.VITE_BACKEND_URL}/cdn/artefacts/${artID}`}
                         w="100%"
                         h="100%"
                         objectFit="cover"
-                        borderRadius={20}
-                        p={3}
+                        borderRadius={15}
                     />
                 </Box>
 
-                <Box width="46%" bg="orange">
+                <Box width="46%" p={3}>
+                    <EditorCard />
                 </Box>
 
-                <Flex width="4%" bg="yellow" display="flex" alignItems="center" justifyContent="flex-end">
+                <Flex width="4%" display="flex" alignItems="center" justifyContent="flex-end">
                     <FaChevronRight size={30}/>
                 </Flex>
             </Flex>

From f046b57bd72381be68d2ebe686f6d4521c7c6f8f Mon Sep 17 00:00:00 2001
From: JunHam <joonjunhan@gmail.com>
Date: Tue, 12 Aug 2025 18:00:16 +0800
Subject: [PATCH 09/28] Added title and button for editCard

---
 src/components/DataStudio/editorCard.jsx | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/src/components/DataStudio/editorCard.jsx b/src/components/DataStudio/editorCard.jsx
index b883e74..a17d0a8 100644
--- a/src/components/DataStudio/editorCard.jsx
+++ b/src/components/DataStudio/editorCard.jsx
@@ -1,9 +1,21 @@
-import { Card } from "@chakra-ui/react"
+import { Card, Button, Flex } from "@chakra-ui/react"
+import { IoInformationCircleOutline } from "react-icons/io5"
 
 function EditorCard() {
     return (
         <Card.Root h={"100%"} borderRadius={15}>
-
+            <Card.Header alignItems={"center"} flexDirection={"row"} justifyContent="space-between">
+                <Flex alignItems={"center"} flexDirection={"row"} gap={1}>
+                    <IoInformationCircleOutline size={25}/>
+                    <Card.Title>Artefact Details</Card.Title>
+                </Flex>
+                <Button size={"sm"} variant={'ArchPrimary'}>
+                    Manage Group
+                </Button>
+            </Card.Header>
+            <Card.Body>
+                
+            </Card.Body>
         </Card.Root>
     )
 }

From 8b2d04014992adf9a5d4907469bd624fe9f9818d Mon Sep 17 00:00:00 2001
From: JunHam <joonjunhan@gmail.com>
Date: Tue, 12 Aug 2025 18:01:58 +0800
Subject: [PATCH 10/28] Shifted addInfo in metadatadisplay to be before the
 figure headshot

---
 src/components/Catalogue/metadataDisplay.jsx | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/components/Catalogue/metadataDisplay.jsx b/src/components/Catalogue/metadataDisplay.jsx
index 36e2b31..5ab3368 100644
--- a/src/components/Catalogue/metadataDisplay.jsx
+++ b/src/components/Catalogue/metadataDisplay.jsx
@@ -245,6 +245,14 @@ function MetadataDisplay({ currentItem, isOpen }) {
                     <Text fontWeight="bold" mb={1}>Caption:</Text>
                     <Text mb={6}>{metadata.caption || "N/A"}</Text>
 
+                    {/* Additional figure metadata, if present */}
+                    {metadata.addInfo && (
+                        <>
+                            <Text fontWeight="bold" mb={1}>Additional Info:</Text>
+                            <Text>{metadata.addInfo}</Text>
+                        </>
+                    )}
+
                     {/* Figure headshots (if available) */}
                     {Array.isArray(metadata.figureIDs) && metadata.figureIDs.length > 0 ? (
                         <Flex wrap="wrap" gap={4} mb={4}>
@@ -277,14 +285,6 @@ function MetadataDisplay({ currentItem, isOpen }) {
                     ) : (
                         <Text mb={2}>N/A</Text>
                     )}
-
-                    {/* Additional figure metadata, if present */}
-                    {metadata.addInfo && (
-                        <>
-                            <Text fontWeight="bold" mb={1}>Additional Info:</Text>
-                            <Text>{metadata.addInfo}</Text>
-                        </>
-                    )}
                 </>
             )}
         </Box>

From aa43d21cb0229438bb5fc5e1e7d426b787ab0d7e Mon Sep 17 00:00:00 2001
From: JunHam <joonjunhan@gmail.com>
Date: Tue, 12 Aug 2025 18:53:06 +0800
Subject: [PATCH 11/28] Added metadata toggle

---
 .../Catalogue/transcriptionToggle.jsx         |  2 +-
 src/components/DataStudio/editorCard.jsx      | 15 ++++-
 src/components/DataStudio/metadataToggle.jsx  | 59 +++++++++++++++++++
 src/pages/ArtefactEditor.jsx                  |  2 +-
 4 files changed, 73 insertions(+), 5 deletions(-)
 create mode 100644 src/components/DataStudio/metadataToggle.jsx

diff --git a/src/components/Catalogue/transcriptionToggle.jsx b/src/components/Catalogue/transcriptionToggle.jsx
index adec14b..b1ec21d 100644
--- a/src/components/Catalogue/transcriptionToggle.jsx
+++ b/src/components/Catalogue/transcriptionToggle.jsx
@@ -57,7 +57,7 @@ const TranscriptionToggle = ({ value, onChange }) => {
             p="1"
             rounded="lg"
             boxShadow="sm"
-            gap="00"
+            gap="0"
         >
             <SegmentGroup.Indicator bg="primaryColour" rounded="lg" />
             <SegmentGroup.Items items={items} />
diff --git a/src/components/DataStudio/editorCard.jsx b/src/components/DataStudio/editorCard.jsx
index a17d0a8..ccaf539 100644
--- a/src/components/DataStudio/editorCard.jsx
+++ b/src/components/DataStudio/editorCard.jsx
@@ -1,7 +1,11 @@
-import { Card, Button, Flex } from "@chakra-ui/react"
+import { Card, Button, Flex, Text } from "@chakra-ui/react"
+import { useState } from "react";
 import { IoInformationCircleOutline } from "react-icons/io5"
+import MetadataToggle from "./metadataToggle";
+
+function EditorCard(metadata) {
+    const [selectedTranscription, setSelectedTranscription] = useState("tradCN");
 
-function EditorCard() {
     return (
         <Card.Root h={"100%"} borderRadius={15}>
             <Card.Header alignItems={"center"} flexDirection={"row"} justifyContent="space-between">
@@ -14,7 +18,12 @@ function EditorCard() {
                 </Button>
             </Card.Header>
             <Card.Body>
-                
+                <Flex flexDirection={"row"} alignItems={"center"}>
+                    <MetadataToggle
+                        value={selectedTranscription}
+                        onChange={setSelectedTranscription}
+                    />
+                </Flex>
             </Card.Body>
         </Card.Root>
     )
diff --git a/src/components/DataStudio/metadataToggle.jsx b/src/components/DataStudio/metadataToggle.jsx
new file mode 100644
index 0000000..dc7927b
--- /dev/null
+++ b/src/components/DataStudio/metadataToggle.jsx
@@ -0,0 +1,59 @@
+import { SegmentGroup, Text } from "@chakra-ui/react";
+
+const MetadataToggle = ({ value, onChange }) => {
+    const items = [
+        { value: "tradCN", label: "Trad CN" },
+        { value: "simplifiedCN", label: "Simp CN" },
+        { value: "english", label: "ENG" },
+        { value: "summary", label: "SUM" },
+    ];
+
+    return (
+        <SegmentGroup.Root
+            value={value}
+            onValueChange={({ value }) => onChange(value)}
+            size="sm"
+            bg="gray.100"
+            p="1"
+            rounded="lg"
+            boxShadow="sm"
+            w="100%"
+            display="flex"
+            position="relative"
+        >
+            <SegmentGroup.Indicator 
+                bg="primaryColour" 
+                rounded="lg"
+                w="25%"
+            />
+            <SegmentGroup.Items
+                display="flex"
+                w="100%"
+                items={items.map(item => ({
+                    value: item.value,
+                    label: (
+                        <Text
+                            fontWeight={value === item.value ? "bold" : "normal"}
+                            color={value === item.value ? "white" : "black"}
+                            w="100%"
+                            textAlign="center"
+                        >
+                            {item.label}
+                        </Text>
+                    ),
+                    style: {
+                        flex: 1,
+                        minWidth: 0,
+                        position: "relative",
+                        zIndex: 1,
+                        display: "flex",
+                        justifyContent: "center",
+                        alignItems: "center",
+                    },
+                }))}
+            />
+        </SegmentGroup.Root>
+    );
+};
+
+export default MetadataToggle;
\ No newline at end of file
diff --git a/src/pages/ArtefactEditor.jsx b/src/pages/ArtefactEditor.jsx
index 9017727..6af0a37 100644
--- a/src/pages/ArtefactEditor.jsx
+++ b/src/pages/ArtefactEditor.jsx
@@ -110,7 +110,7 @@ function ArtefactEditor() {
                 </Box>
 
                 <Box width="46%" p={3}>
-                    <EditorCard />
+                    <EditorCard metadata={metadata}/>
                 </Box>
 
                 <Flex width="4%" display="flex" alignItems="center" justifyContent="flex-end">

From fd57f372fb22c73f237c436edbe8ee658c8ca70f Mon Sep 17 00:00:00 2001
From: JunHam <joonjunhan@gmail.com>
Date: Tue, 12 Aug 2025 22:53:03 +0800
Subject: [PATCH 12/28] Added rendering of name and mm transcription using text
 area

---
 src/components/DataStudio/editorCard.jsx | 26 ++++++++++++++++++++----
 src/pages/ArtefactEditor.jsx             |  1 -
 2 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/src/components/DataStudio/editorCard.jsx b/src/components/DataStudio/editorCard.jsx
index ccaf539..4ceabb9 100644
--- a/src/components/DataStudio/editorCard.jsx
+++ b/src/components/DataStudio/editorCard.jsx
@@ -1,9 +1,9 @@
-import { Card, Button, Flex, Text } from "@chakra-ui/react"
+import { Card, Button, Flex, Text, Field, Input, Textarea } from "@chakra-ui/react"
 import { useState } from "react";
 import { IoInformationCircleOutline } from "react-icons/io5"
 import MetadataToggle from "./metadataToggle";
 
-function EditorCard(metadata) {
+function EditorCard({ metadata }) {
     const [selectedTranscription, setSelectedTranscription] = useState("tradCN");
 
     return (
@@ -17,13 +17,31 @@ function EditorCard(metadata) {
                     Manage Group
                 </Button>
             </Card.Header>
-            <Card.Body>
-                <Flex flexDirection={"row"} alignItems={"center"}>
+            <Card.Body display="flex" flexDirection="column" flex="1">
+                <Flex flexDirection={"row"} alignItems={"center"} mb={5}>
+                    <Text mr={4}>Name:</Text>
+                    <Field.Root>
+                        <Input placeholder="Artefact name" type='text' value={metadata.name || ''} />
+                    </Field.Root>
+                </Flex>
+
+                <Flex flexDirection={"row"} alignItems={"center"} mb={4}>
+                    <Text mr={4}>Transcription:</Text>
                     <MetadataToggle
                         value={selectedTranscription}
                         onChange={setSelectedTranscription}
                     />
                 </Flex>
+
+                <Field.Root flex="1" display="flex" flexDirection="column">
+                    <Textarea
+                        placeholder="Artefact transcription"
+                        type="text"
+                        value={metadata.metadata.tradCN || ""}
+                        resize="none"
+                        flex="1"
+                    />
+                </Field.Root>
             </Card.Body>
         </Card.Root>
     )
diff --git a/src/pages/ArtefactEditor.jsx b/src/pages/ArtefactEditor.jsx
index 6af0a37..eca1c05 100644
--- a/src/pages/ArtefactEditor.jsx
+++ b/src/pages/ArtefactEditor.jsx
@@ -17,7 +17,6 @@ function ArtefactEditor() {
     const fetchMetadata = async () => {
         try {
             const response = await server.get(`/cdn/artefactMetadata/${artID}`);
-            console.log(response)
 
             if (response.data instanceof JSONResponse) {
                 if (response.data.isErrorStatus()) {

From 24e157dfbcfcae7de35999f182fa49eba55ede2d Mon Sep 17 00:00:00 2001
From: JunHam <joonjunhan@gmail.com>
Date: Tue, 12 Aug 2025 23:12:45 +0800
Subject: [PATCH 13/28] Added displaying of all transcriptions

---
 src/components/DataStudio/editorCard.jsx | 129 ++++++++++++++++++++---
 1 file changed, 112 insertions(+), 17 deletions(-)

diff --git a/src/components/DataStudio/editorCard.jsx b/src/components/DataStudio/editorCard.jsx
index 4ceabb9..f75f79f 100644
--- a/src/components/DataStudio/editorCard.jsx
+++ b/src/components/DataStudio/editorCard.jsx
@@ -1,31 +1,119 @@
-import { Card, Button, Flex, Text, Field, Input, Textarea } from "@chakra-ui/react"
-import { useState } from "react";
-import { IoInformationCircleOutline } from "react-icons/io5"
+import { Card, Button, Flex, Text, Field, Input, Textarea, Box } from "@chakra-ui/react";
+import { useState, useRef } from "react";
+import { IoInformationCircleOutline } from "react-icons/io5";
 import MetadataToggle from "./metadataToggle";
 
+// Reuse your entity highlighting renderer from MetadataDisplay
+function renderHighlightedText(text, labels, hoveredIndex, setHoveredIndex) {
+    if (!labels || !Array.isArray(labels)) return <Text whiteSpace="pre-wrap">{text}</Text>;
+
+    const entityColors = {
+        PERSON: "yellow.200",
+        ORGANIZATION: "blue.200",
+        LOCATION: "green.200",
+        DATE: "orange.200",
+        GPE: "purple.200",
+        EVENT: "pink.200",
+    };
+
+    const chunks = [];
+    let remainingText = text;
+
+    labels.forEach(([entity, label], i) => {
+        const index = remainingText.indexOf(entity);
+        if (index === -1) return;
+
+        const before = remainingText.slice(0, index);
+        const matched = remainingText.slice(index, index + entity.length);
+        const after = remainingText.slice(index + entity.length);
+
+        if (before) {
+            chunks.push(<Text as="span" key={`before-${i}`}>{before}</Text>);
+        }
+
+        chunks.push(
+            <Box
+                key={`entity-${i}`}
+                as="span"
+                position="relative"
+                onMouseEnter={() => setHoveredIndex(i)}
+                onMouseLeave={() => setHoveredIndex(null)}
+                display="inline-block"
+                bg={entityColors[label] || "gray.200"}
+                borderRadius="md"
+                px={1}
+                mx="0.5px"
+            >
+                {matched}
+                <Box
+                    position="absolute"
+                    top="100%"
+                    left="50%"
+                    transform="translateX(-50%)"
+                    mt={1}
+                    px={2}
+                    py={1}
+                    fontSize="xs"
+                    bg="blackAlpha.700"
+                    color="white"
+                    borderRadius="md"
+                    whiteSpace="nowrap"
+                    zIndex={10}
+                    pointerEvents="none"
+                    opacity={hoveredIndex === i ? 1 : 0}
+                    transition="opacity 0.1s ease"
+                    transitionDelay={hoveredIndex === i ? "0.2s" : "0s"}
+                >
+                    {label}
+                </Box>
+            </Box>
+        );
+
+        remainingText = after;
+    });
+
+    if (remainingText) {
+        chunks.push(<Text as="span" key="remaining">{remainingText}</Text>);
+    }
+
+    return <Box as="div" whiteSpace="pre-wrap">{chunks}</Box>;
+}
+
 function EditorCard({ metadata }) {
     const [selectedTranscription, setSelectedTranscription] = useState("tradCN");
+    const [hoveredIndex, setHoveredIndex] = useState(null);
+    const hoverTimeoutRef = useRef(null);
+
+    const handleMouseEnter = (index) => {
+        if (hoverTimeoutRef.current) {
+            clearTimeout(hoverTimeoutRef.current);
+        }
+        hoverTimeoutRef.current = setTimeout(() => {
+            setHoveredIndex(index);
+        }, 500);
+    };
 
     return (
-        <Card.Root h={"100%"} borderRadius={15}>
-            <Card.Header alignItems={"center"} flexDirection={"row"} justifyContent="space-between">
-                <Flex alignItems={"center"} flexDirection={"row"} gap={1}>
-                    <IoInformationCircleOutline size={25}/>
+        <Card.Root h="100%" borderRadius={15}>
+            <Card.Header alignItems="center" flexDirection="row" justifyContent="space-between">
+                <Flex alignItems="center" flexDirection="row" gap={1}>
+                    <IoInformationCircleOutline size={25} />
                     <Card.Title>Artefact Details</Card.Title>
                 </Flex>
-                <Button size={"sm"} variant={'ArchPrimary'}>
+                <Button size="sm" variant="ArchPrimary">
                     Manage Group
                 </Button>
             </Card.Header>
+
             <Card.Body display="flex" flexDirection="column" flex="1">
-                <Flex flexDirection={"row"} alignItems={"center"} mb={5}>
+                <Flex flexDirection="row" alignItems="center" mb={5}>
                     <Text mr={4}>Name:</Text>
                     <Field.Root>
-                        <Input placeholder="Artefact name" type='text' value={metadata.name || ''} />
+                        <Input placeholder="Artefact name" type="text" value={metadata.name || ''} />
                     </Field.Root>
                 </Flex>
 
-                <Flex flexDirection={"row"} alignItems={"center"} mb={4}>
+                <Flex flexDirection="row" alignItems="center" mb={4}>
                     <Text mr={4}>Transcription:</Text>
                     <MetadataToggle
                         value={selectedTranscription}
@@ -35,16 +123,23 @@ function EditorCard({ metadata }) {
 
                 <Field.Root flex="1" display="flex" flexDirection="column">
                     <Textarea
-                        placeholder="Artefact transcription"
-                        type="text"
-                        value={metadata.metadata.tradCN || ""}
-                        resize="none"
                         flex="1"
+                        overflowY="auto"
+                        p={2}
+                        borderRadius="md"
+                        whiteSpace="pre-wrap"
+                        scrollbar="hidden"
+                        resize="none"
+                        value={
+                            selectedTranscription === "english"
+                                ? metadata.metadata[selectedTranscription] || ""
+                                : metadata.metadata[selectedTranscription] || ""
+                        }
                     />
                 </Field.Root>
             </Card.Body>
         </Card.Root>
-    )
+    );
 }
 
-export default EditorCard
\ No newline at end of file
+export default EditorCard;
\ No newline at end of file

From 8b80ffaaa70f2fadce97619ca579b0682df4cd16 Mon Sep 17 00:00:00 2001
From: JunHam <joonjunhan@gmail.com>
Date: Wed, 13 Aug 2025 09:50:02 +0800
Subject: [PATCH 14/28] Added artefact editor action bar

---
 .../DataStudio/artefactEditorActionBar.jsx    | 131 ++++++++++
 src/components/DataStudio/editorCard.jsx      | 236 ++++++++----------
 src/pages/ArtefactEditor.jsx                  |  11 +-
 3 files changed, 245 insertions(+), 133 deletions(-)
 create mode 100644 src/components/DataStudio/artefactEditorActionBar.jsx

diff --git a/src/components/DataStudio/artefactEditorActionBar.jsx b/src/components/DataStudio/artefactEditorActionBar.jsx
new file mode 100644
index 0000000..1fc70b8
--- /dev/null
+++ b/src/components/DataStudio/artefactEditorActionBar.jsx
@@ -0,0 +1,131 @@
+import { ActionBar, Button, Dialog, Portal } from '@chakra-ui/react'
+import { isEqual } from 'lodash';
+import { useEffect, useState } from 'react'
+import ToastWizard from '../toastWizard';
+import server, { JSONResponse } from '../../networking';
+
+function ArtefactEditorActionBar({  artefactData,  originalArtefactData,  setArtefactData,  getArtefactData,  enterKeyHit, artefactId }) {
+    const [changesMade, setChangesMade] = useState(false);
+    const [isConfirmSaveOpen, setIsConfirmSaveOpen] = useState(false);
+    const [saveLoading, setSaveLoading] = useState(false);
+
+    useEffect(() => {
+        setChangesMade(!isEqual(artefactData, originalArtefactData));
+    }, [artefactData, originalArtefactData])
+
+    useEffect(() => {
+        if (changesMade) {
+            setIsConfirmSaveOpen(true);
+        }
+    }, [enterKeyHit]);
+
+    const handleCancelChanges = () => {
+        setArtefactData(originalArtefactData);
+    }
+
+    const handleSaveChanges = async () => {
+        setSaveLoading(true);
+
+        const currentMetadata = artefactData.metadata || {};
+
+        var updateDict = {
+            artefactID: artefactId,
+            name: artefactData.name || '',
+            // MM-type metadata fields - always include all
+            tradCN: currentMetadata.tradCN || null,
+            simplifiedCN: currentMetadata.simplifiedCN || null,
+            english: currentMetadata.english || null,
+            summary: currentMetadata.summary || null,
+        };
+
+        try {
+            const response = await server.post('/studio/artefact/update', updateDict);
+
+            if (response.data instanceof JSONResponse) {
+                if (response.data.isErrorStatus()) {
+                    const errObject = {
+                        response: {
+                            data: response.data
+                        }
+                    };
+                    throw new Error(errObject);
+                }
+
+                // Success case - handle both full success (200) and partial success (207)
+                setIsConfirmSaveOpen(false);
+
+                if (response.data.status === 207) {
+                    // Partial success - metadata updated but NER labelling failed
+                    ToastWizard.standard("warning", "Artefact partially updated.", response.data.message, 5000);
+                } else {
+                    // Full success
+                    ToastWizard.standard("success", "Artefact updated.", response.data.message);
+                }
+            } else {
+                throw new Error("Unexpected response format");
+            }
+        } catch (err) {
+            if (err.response && err.response.data instanceof JSONResponse) {
+                console.log("Error response in update artefact data request:", err.response.data.fullMessage());
+                if (err.response.data.userErrorType()) {
+                    ToastWizard.standard("error", "Artefact update failed.", err.response.data.message, 3000);
+                } else {
+                    ToastWizard.standard("error", "Artefact update failed.", "Failed to update your artefact information. Please try again.", 3000);
+                }
+            } else {
+                console.log("Unexpected error in artefact update request:", err);
+                ToastWizard.standard("error", "Artefact update failed.", "Failed to update your artefact information. Please try again.", 3000);
+            }
+        }
+        setChangesMade(false);
+        setSaveLoading(false);
+        getArtefactData()
+    }
+
+    return (
+        <ActionBar.Root open={changesMade}>
+            <Portal>
+                <ActionBar.Positioner>
+                    <ActionBar.Content>
+                        <Button variant={'outline'} colorPalette={'red'} onClick={handleCancelChanges}>
+                            Reset
+                        </Button>
+
+                        <Dialog.Root placement="center" open={isConfirmSaveOpen} onOpenChange={(e) => setIsConfirmSaveOpen(e.open)}>
+                            <Dialog.Trigger asChild>
+                                <Button variant={"outline"} colorPalette={'green'} size="sm">
+                                    Save Changes
+                                </Button>
+                            </Dialog.Trigger>
+                            <Portal>
+                                <Dialog.Backdrop />
+                                <Dialog.Positioner>
+                                    <Dialog.Content>
+                                        <Dialog.Header>
+                                            <Dialog.Title>Update Artefact</Dialog.Title>
+                                        </Dialog.Header>
+                                        <Dialog.Body>
+                                            <Dialog.Description>
+                                                Are you sure you'd like to save these changes? This action cannot be undone.
+                                            </Dialog.Description>
+                                        </Dialog.Body>
+                                        <Dialog.Footer>
+                                            <Button variant={'solid'} colorPalette={'red'} onClick={() => setIsConfirmSaveOpen(false)}>
+                                                Cancel
+                                            </Button>
+                                            <Button bgColor={'primaryColour'} color={'white'} onClick={handleSaveChanges} loading={saveLoading} loadingText={'Saving...'}>
+                                                Save Changes
+                                            </Button>
+                                        </Dialog.Footer>
+                                    </Dialog.Content>
+                                </Dialog.Positioner>
+                            </Portal>
+                        </Dialog.Root>
+                    </ActionBar.Content>
+                </ActionBar.Positioner>
+            </Portal>
+        </ActionBar.Root>
+    )
+}
+
+export default ArtefactEditorActionBar
\ No newline at end of file
diff --git a/src/components/DataStudio/editorCard.jsx b/src/components/DataStudio/editorCard.jsx
index f75f79f..d96ed14 100644
--- a/src/components/DataStudio/editorCard.jsx
+++ b/src/components/DataStudio/editorCard.jsx
@@ -1,144 +1,122 @@
 import { Card, Button, Flex, Text, Field, Input, Textarea, Box } from "@chakra-ui/react";
-import { useState, useRef } from "react";
+import { useState, useEffect } from "react";
 import { IoInformationCircleOutline } from "react-icons/io5";
 import MetadataToggle from "./metadataToggle";
+import ArtefactEditorActionBar from "./artefactEditorActionBar";
 
-// Reuse your entity highlighting renderer from MetadataDisplay
-function renderHighlightedText(text, labels, hoveredIndex, setHoveredIndex) {
-    if (!labels || !Array.isArray(labels)) return <Text whiteSpace="pre-wrap">{text}</Text>;
-
-    const entityColors = {
-        PERSON: "yellow.200",
-        ORGANIZATION: "blue.200",
-        LOCATION: "green.200",
-        DATE: "orange.200",
-        GPE: "purple.200",
-        EVENT: "pink.200",
-    };
-
-    const chunks = [];
-    let remainingText = text;
-
-    labels.forEach(([entity, label], i) => {
-        const index = remainingText.indexOf(entity);
-        if (index === -1) return;
-
-        const before = remainingText.slice(0, index);
-        const matched = remainingText.slice(index, index + entity.length);
-        const after = remainingText.slice(index + entity.length);
-
-        if (before) {
-            chunks.push(<Text as="span" key={`before-${i}`}>{before}</Text>);
+function EditorCard({ metadata, artefactId, refreshArtefactData }) {
+    const [selectedTranscription, setSelectedTranscription] = useState("tradCN");
+    
+    // Change detection states
+    const [originalArtefactData, setOriginalArtefactData] = useState({});
+    const [artefactData, setArtefactData] = useState({});
+    const [enterKeyHit, setEnterKeyHit] = useState(false);
+
+    // Initialize data when metadata prop changes
+    useEffect(() => {
+        if (metadata) {
+            const processedData = {
+                name: metadata.name || '',
+                metadata: metadata.metadata || {}
+            };
+            
+            setOriginalArtefactData(processedData);
+            setArtefactData(processedData);
         }
+    }, [metadata]);
 
-        chunks.push(
-            <Box
-                key={`entity-${i}`}
-                as="span"
-                position="relative"
-                onMouseEnter={() => setHoveredIndex(i)}
-                onMouseLeave={() => setHoveredIndex(null)}
-                display="inline-block"
-                bg={entityColors[label] || "gray.200"}
-                borderRadius="md"
-                px={1}
-                mx="0.5px"
-            >
-                {matched}
-                <Box
-                    position="absolute"
-                    top="100%"
-                    left="50%"
-                    transform="translateX(-50%)"
-                    mt={1}
-                    px={2}
-                    py={1}
-                    fontSize="xs"
-                    bg="blackAlpha.700"
-                    color="white"
-                    borderRadius="md"
-                    whiteSpace="nowrap"
-                    zIndex={10}
-                    pointerEvents="none"
-                    opacity={hoveredIndex === i ? 1 : 0}
-                    transition="opacity 0.1s ease"
-                    transitionDelay={hoveredIndex === i ? "0.2s" : "0s"}
-                >
-                    {label}
-                </Box>
-            </Box>
-        );
-
-        remainingText = after;
-    });
-
-    if (remainingText) {
-        chunks.push(<Text as="span" key="remaining">{remainingText}</Text>);
+    // Handle Enter key press
+    const handleEnterKey = (e) => {
+        if (e.key === 'Enter') {
+            setEnterKeyHit(prev => !prev);
+        }
     }
 
-    return <Box as="div" whiteSpace="pre-wrap">{chunks}</Box>;
-}
-
-function EditorCard({ metadata }) {
-    const [selectedTranscription, setSelectedTranscription] = useState("tradCN");
-    const [hoveredIndex, setHoveredIndex] = useState(null);
-    const hoverTimeoutRef = useRef(null);
+    // Handle input changes
+    const handleNameChange = (e) => {
+        setArtefactData({
+            ...artefactData,
+            name: e.target.value
+        });
+    }
 
-    const handleMouseEnter = (index) => {
-        if (hoverTimeoutRef.current) {
-            clearTimeout(hoverTimeoutRef.current);
-        }
-        hoverTimeoutRef.current = setTimeout(() => {
-            setHoveredIndex(index);
-        }, 500);
-    };
+    const handleTranscriptionChange = (e) => {
+        setArtefactData({
+            ...artefactData,
+            metadata: {
+                ...artefactData.metadata,
+                [selectedTranscription]: e.target.value
+            }
+        });
+    }
 
     return (
-        <Card.Root h="100%" borderRadius={15}>
-            <Card.Header alignItems="center" flexDirection="row" justifyContent="space-between">
-                <Flex alignItems="center" flexDirection="row" gap={1}>
-                    <IoInformationCircleOutline size={25} />
-                    <Card.Title>Artefact Details</Card.Title>
-                </Flex>
-                <Button size="sm" variant="ArchPrimary">
-                    Manage Group
-                </Button>
-            </Card.Header>
-
-            <Card.Body display="flex" flexDirection="column" flex="1">
-                <Flex flexDirection="row" alignItems="center" mb={5}>
-                    <Text mr={4}>Name:</Text>
-                    <Field.Root>
-                        <Input placeholder="Artefact name" type="text" value={metadata.name || ''} />
+        <>
+            <Card.Root h="100%" borderRadius={15}>
+                <Card.Header alignItems="center" flexDirection="row" justifyContent="space-between">
+                    <Flex alignItems="center" flexDirection="row" gap={1}>
+                        <IoInformationCircleOutline size={25} />
+                        <Card.Title>Artefact Details</Card.Title>
+                    </Flex>
+                    <Button size="sm" variant="ArchPrimary">
+                        Manage Group
+                    </Button>
+                </Card.Header>
+
+                <Card.Body display="flex" flexDirection="column" flex="1">
+                    <Flex flexDirection="row" alignItems="center" mb={5}>
+                        <Text mr={4}>Name:</Text>
+                        <Field.Root>
+                            <Input 
+                                placeholder="Artefact name" 
+                                type="text" 
+                                value={artefactData.name || ''} 
+                                onChange={handleNameChange}
+                                onKeyDown={handleEnterKey}
+                                borderColor={artefactData.name !== originalArtefactData.name ? 'darkblue' : 'inherit'}
+                            />
+                        </Field.Root>
+                    </Flex>
+
+                    <Flex flexDirection="row" alignItems="center" mb={4}>
+                        <Text mr={4}>Transcription:</Text>
+                        <MetadataToggle
+                            value={selectedTranscription}
+                            onChange={setSelectedTranscription}
+                        />
+                    </Flex>
+
+                    <Field.Root flex="1" display="flex" flexDirection="column">
+                        <Textarea
+                            flex="1"
+                            overflowY="auto"
+                            p={2}
+                            borderRadius="md"
+                            whiteSpace="pre-wrap"
+                            scrollbar="hidden"
+                            resize="none"
+                            value={artefactData.metadata?.[selectedTranscription] || ''}
+                            onChange={handleTranscriptionChange}
+                            onKeyDown={handleEnterKey}
+                            borderColor={
+                                artefactData.metadata?.[selectedTranscription] !== originalArtefactData.metadata?.[selectedTranscription] 
+                                    ? 'darkblue' 
+                                    : 'inherit'
+                            }
+                        />
                     </Field.Root>
-                </Flex>
-
-                <Flex flexDirection="row" alignItems="center" mb={4}>
-                    <Text mr={4}>Transcription:</Text>
-                    <MetadataToggle
-                        value={selectedTranscription}
-                        onChange={setSelectedTranscription}
-                    />
-                </Flex>
-
-                <Field.Root flex="1" display="flex" flexDirection="column">
-                    <Textarea
-                        flex="1"
-                        overflowY="auto"
-                        p={2}
-                        borderRadius="md"
-                        whiteSpace="pre-wrap"
-                        scrollbar="hidden"
-                        resize="none"
-                        value={
-                            selectedTranscription === "english"
-                                ? metadata.metadata[selectedTranscription] || ""
-                                : metadata.metadata[selectedTranscription] || ""
-                        }
-                    />
-                </Field.Root>
-            </Card.Body>
-        </Card.Root>
+                </Card.Body>
+            </Card.Root>
+
+            <ArtefactEditorActionBar 
+                artefactData={artefactData}
+                originalArtefactData={originalArtefactData}
+                setArtefactData={setArtefactData}
+                getArtefactData={refreshArtefactData}
+                enterKeyHit={enterKeyHit}
+                artefactId={artefactId}
+            />
+        </>
     );
 }
 
diff --git a/src/pages/ArtefactEditor.jsx b/src/pages/ArtefactEditor.jsx
index eca1c05..84eb9b6 100644
--- a/src/pages/ArtefactEditor.jsx
+++ b/src/pages/ArtefactEditor.jsx
@@ -15,8 +15,11 @@ function ArtefactEditor() {
 
     // Metadata fetching function
     const fetchMetadata = async () => {
+        console.log("RAN")
         try {
-            const response = await server.get(`/cdn/artefactMetadata/${artID}`);
+            const cacheBuster = new Date().getTime();
+            const response = await server.get(`/cdn/artefactMetadata/${artID}?cb=${cacheBuster}`);
+            console.log(response.data.raw.data)
 
             if (response.data instanceof JSONResponse) {
                 if (response.data.isErrorStatus()) {
@@ -84,8 +87,8 @@ function ArtefactEditor() {
     }
 
     return (
-        <Box h="79vh">
-            <Flex mt={10} flexDirection="row">
+        <Box h="80vh">
+            <Flex mt={6} flexDirection="row">
                 <FaArrowAltCircleLeft size={50} color='darkBlue' />
                 <Box ml={6}>
                     <Text fontSize="2xl" fontWeight="bold">Data Studio</Text>
@@ -109,7 +112,7 @@ function ArtefactEditor() {
                 </Box>
 
                 <Box width="46%" p={3}>
-                    <EditorCard metadata={metadata}/>
+                    <EditorCard metadata={metadata} artefactId={artID} refreshArtefactData={fetchMetadata}/>
                 </Box>
 
                 <Flex width="4%" display="flex" alignItems="center" justifyContent="flex-end">

From 48d135842c5dfa45558bb2f1ecc96f9adcb319bc Mon Sep 17 00:00:00 2001
From: JunHam <joonjunhan@gmail.com>
Date: Wed, 13 Aug 2025 10:03:02 +0800
Subject: [PATCH 15/28] Change icon size

---
 src/pages/ArtefactEditor.jsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/pages/ArtefactEditor.jsx b/src/pages/ArtefactEditor.jsx
index 84eb9b6..a5dacdc 100644
--- a/src/pages/ArtefactEditor.jsx
+++ b/src/pages/ArtefactEditor.jsx
@@ -5,8 +5,9 @@ import { useSelector } from "react-redux";
 import ToastWizard from "../components/toastWizard";
 import server, { JSONResponse } from "../networking";
 import CentredSpinner from "../components/CentredSpinner";
-import { FaArrowAltCircleLeft, FaChevronLeft, FaChevronRight } from "react-icons/fa";
+import { FaChevronLeft, FaChevronRight } from "react-icons/fa";
 import EditorCard from "../components/DataStudio/editorCard";
+import { FaCircleArrowLeft } from "react-icons/fa6";
 
 function ArtefactEditor() {
     const { artID } = useParams();
@@ -89,7 +90,7 @@ function ArtefactEditor() {
     return (
         <Box h="80vh">
             <Flex mt={6} flexDirection="row">
-                <FaArrowAltCircleLeft size={50} color='darkBlue' />
+                <FaCircleArrowLeft size={40} color='darkBlue' />
                 <Box ml={6}>
                     <Text fontSize="2xl" fontWeight="bold">Data Studio</Text>
                     <Text fontSize="md" mt={1} mb={2}>{metadata.name}</Text>

From 27ed57ff7a85fa37312f542e44677bac51c160d8 Mon Sep 17 00:00:00 2001
From: JunHam <joonjunhan@gmail.com>
Date: Wed, 13 Aug 2025 10:09:09 +0800
Subject: [PATCH 16/28] Added edit button

---
 src/components/DataStudio/editorCard.jsx | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/components/DataStudio/editorCard.jsx b/src/components/DataStudio/editorCard.jsx
index d96ed14..b5332d6 100644
--- a/src/components/DataStudio/editorCard.jsx
+++ b/src/components/DataStudio/editorCard.jsx
@@ -3,6 +3,7 @@ import { useState, useEffect } from "react";
 import { IoInformationCircleOutline } from "react-icons/io5";
 import MetadataToggle from "./metadataToggle";
 import ArtefactEditorActionBar from "./artefactEditorActionBar";
+import { MdOutlineEdit } from "react-icons/md";
 
 function EditorCard({ metadata, artefactId, refreshArtefactData }) {
     const [selectedTranscription, setSelectedTranscription] = useState("tradCN");
@@ -58,9 +59,15 @@ function EditorCard({ metadata, artefactId, refreshArtefactData }) {
                         <IoInformationCircleOutline size={25} />
                         <Card.Title>Artefact Details</Card.Title>
                     </Flex>
-                    <Button size="sm" variant="ArchPrimary">
-                        Manage Group
-                    </Button>
+                    <Flex alignItems="center" flexDirection="row" gap={4}>
+                        <Button size="sm" variant="ArchPrimaryAlt">
+                            Manage Associations
+                        </Button>
+                        <Button size="sm" variant="ArchPrimary">
+                            <MdOutlineEdit />
+                            <Text>Edit</Text>
+                        </Button>
+                    </Flex>
                 </Card.Header>
 
                 <Card.Body display="flex" flexDirection="column" flex="1">

From 2b67068714aee8a7843a952e0fe3e602ad659aae Mon Sep 17 00:00:00 2001
From: JunHam <joonjunhan@gmail.com>
Date: Wed, 13 Aug 2025 10:14:03 +0800
Subject: [PATCH 17/28] Added icon to edit button

---
 src/components/DataStudio/editorCard.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/DataStudio/editorCard.jsx b/src/components/DataStudio/editorCard.jsx
index b5332d6..19a17b0 100644
--- a/src/components/DataStudio/editorCard.jsx
+++ b/src/components/DataStudio/editorCard.jsx
@@ -63,7 +63,7 @@ function EditorCard({ metadata, artefactId, refreshArtefactData }) {
                         <Button size="sm" variant="ArchPrimaryAlt">
                             Manage Associations
                         </Button>
-                        <Button size="sm" variant="ArchPrimary">
+                        <Button size="sm" variant="ArchPrimary" onClick={handleEditClick}>
                             <MdOutlineEdit />
                             <Text>Edit</Text>
                         </Button>

From 682cff003692a7fdc359c4a890a30d1ac69fd666 Mon Sep 17 00:00:00 2001
From: JunHam <joonjunhan@gmail.com>
Date: Wed, 13 Aug 2025 11:10:12 +0800
Subject: [PATCH 18/28] Added feedback toasts and edit button for editor card

---
 .../DataStudio/artefactEditorActionBar.jsx    |  59 +++++++--
 src/components/DataStudio/editorCard.jsx      | 117 +++++++++++++-----
 src/pages/ArtefactEditor.jsx                  |   5 +-
 3 files changed, 136 insertions(+), 45 deletions(-)

diff --git a/src/components/DataStudio/artefactEditorActionBar.jsx b/src/components/DataStudio/artefactEditorActionBar.jsx
index 1fc70b8..d23e9c4 100644
--- a/src/components/DataStudio/artefactEditorActionBar.jsx
+++ b/src/components/DataStudio/artefactEditorActionBar.jsx
@@ -4,23 +4,24 @@ import { useEffect, useState } from 'react'
 import ToastWizard from '../toastWizard';
 import server, { JSONResponse } from '../../networking';
 
-function ArtefactEditorActionBar({  artefactData,  originalArtefactData,  setArtefactData,  getArtefactData,  enterKeyHit, artefactId }) {
+function ArtefactEditorActionBar({  artefactData,  originalArtefactData,  setArtefactData,  getArtefactData,  enterKeyHit, artefactId, isEditing, setIsEditing }) {
     const [changesMade, setChangesMade] = useState(false);
     const [isConfirmSaveOpen, setIsConfirmSaveOpen] = useState(false);
     const [saveLoading, setSaveLoading] = useState(false);
 
     useEffect(() => {
-        setChangesMade(!isEqual(artefactData, originalArtefactData));
-    }, [artefactData, originalArtefactData])
+        setChangesMade(!isEqual(artefactData, originalArtefactData) && isEditing);
+    }, [artefactData, originalArtefactData, isEditing])
 
     useEffect(() => {
-        if (changesMade) {
+        if (changesMade && isEditing) {
             setIsConfirmSaveOpen(true);
         }
     }, [enterKeyHit]);
 
     const handleCancelChanges = () => {
         setArtefactData(originalArtefactData);
+        ToastWizard.standard("warning", "Changes Reset", "All changes reverted.", 3000);
     }
 
     const handleSaveChanges = async () => {
@@ -36,9 +37,13 @@ function ArtefactEditorActionBar({  artefactData,  originalArtefactData,  setArt
             simplifiedCN: currentMetadata.simplifiedCN || null,
             english: currentMetadata.english || null,
             summary: currentMetadata.summary || null,
+            // // HF-type metadata fields - always include all
+            // caption: currentMetadata.caption || null,
+            // addInfo: currentMetadata.addInfo || null
         };
 
         try {
+            console.log(updateDict);
             const response = await server.post('/studio/artefact/update', updateDict);
 
             if (response.data instanceof JSONResponse) {
@@ -52,11 +57,22 @@ function ArtefactEditorActionBar({  artefactData,  originalArtefactData,  setArt
                 }
 
                 // Success case - handle both full success (200) and partial success (207)
+                getArtefactData();
                 setIsConfirmSaveOpen(false);
+                setIsEditing(false); // Exit editing mode after successful save
+                setIsEditing(false); // Exit editing mode after successful save
 
                 if (response.data.status === 207) {
                     // Partial success - metadata updated but NER labelling failed
-                    ToastWizard.standard("warning", "Artefact partially updated.", response.data.message, 5000);
+                    ToastWizard.standard(
+                        "warning", 
+                        "Artefact partially updated.", 
+                        response.data.message, 
+                        5000,
+                        true,
+                        handleSaveChanges,
+                        "Retry"
+                    );
                 } else {
                     // Full success
                     ToastWizard.standard("success", "Artefact updated.", response.data.message);
@@ -68,18 +84,41 @@ function ArtefactEditorActionBar({  artefactData,  originalArtefactData,  setArt
             if (err.response && err.response.data instanceof JSONResponse) {
                 console.log("Error response in update artefact data request:", err.response.data.fullMessage());
                 if (err.response.data.userErrorType()) {
-                    ToastWizard.standard("error", "Artefact update failed.", err.response.data.message, 3000);
+                    ToastWizard.standard(
+                        "error", 
+                        "Artefact update failed.", 
+                        err.response.data.message, 
+                        3000,
+                        true,
+                        handleSaveChanges,
+                        "Retry"
+                    );
                 } else {
-                    ToastWizard.standard("error", "Artefact update failed.", "Failed to update your artefact information. Please try again.", 3000);
+                    ToastWizard.standard(
+                        "error", 
+                        "Artefact update failed.", 
+                        "Failed to update your artefact information. Please try again.", 
+                        3000,
+                        true,
+                        handleSaveChanges,
+                        "Retry"
+                    );
                 }
             } else {
                 console.log("Unexpected error in artefact update request:", err);
-                ToastWizard.standard("error", "Artefact update failed.", "Failed to update your artefact information. Please try again.", 3000);
+                ToastWizard.standard(
+                    "error", 
+                    "Artefact update failed.", 
+                    "Failed to update your artefact information. Please try again.", 
+                    3000,
+                    true,
+                    handleSaveChanges,
+                    "Retry"
+                );
             }
         }
-        setChangesMade(false);
+
         setSaveLoading(false);
-        getArtefactData()
     }
 
     return (
diff --git a/src/components/DataStudio/editorCard.jsx b/src/components/DataStudio/editorCard.jsx
index 19a17b0..b49aa52 100644
--- a/src/components/DataStudio/editorCard.jsx
+++ b/src/components/DataStudio/editorCard.jsx
@@ -1,12 +1,14 @@
 import { Card, Button, Flex, Text, Field, Input, Textarea, Box } from "@chakra-ui/react";
 import { useState, useEffect } from "react";
 import { IoInformationCircleOutline } from "react-icons/io5";
+import { MdOutlineEdit, MdOutlineCancel } from "react-icons/md";
 import MetadataToggle from "./metadataToggle";
 import ArtefactEditorActionBar from "./artefactEditorActionBar";
-import { MdOutlineEdit } from "react-icons/md";
+import ToastWizard from "../toastWizard";
 
-function EditorCard({ metadata, artefactId, refreshArtefactData }) {
+function EditorCard({ metadata, artefactId, isMMArtefact, refreshArtefactData }) {
     const [selectedTranscription, setSelectedTranscription] = useState("tradCN");
+    const [isEditing, setIsEditing] = useState(false);
     
     // Change detection states
     const [originalArtefactData, setOriginalArtefactData] = useState({});
@@ -33,6 +35,19 @@ function EditorCard({ metadata, artefactId, refreshArtefactData }) {
         }
     }
 
+    // Handle edit/cancel button click
+    const handleEditClick = () => {
+        setIsEditing(true);
+        ToastWizard.standard("info", "Editor Mode Enabled", "You are currently in editor mode. Remember to save your changes!", 3000);
+    }
+
+    const handleCancelClick = () => {
+        // Reset data to original state
+        setArtefactData(originalArtefactData);
+        setIsEditing(false);
+        ToastWizard.standard("warning", "Editor Mode Disabled", "All changes reverted.", 3000);
+    }
+
     // Handle input changes
     const handleNameChange = (e) => {
         setArtefactData({
@@ -63,25 +78,42 @@ function EditorCard({ metadata, artefactId, refreshArtefactData }) {
                         <Button size="sm" variant="ArchPrimaryAlt">
                             Manage Associations
                         </Button>
-                        <Button size="sm" variant="ArchPrimary" onClick={handleEditClick}>
-                            <MdOutlineEdit />
-                            <Text>Edit</Text>
+                        <Button size="sm" variant="ArchPrimary" onClick={isEditing ? handleCancelClick : handleEditClick}>
+                            {isEditing ? <MdOutlineCancel /> : <MdOutlineEdit />}
+                            <Text>{isEditing ? 'Cancel' : 'Edit'}</Text>
                         </Button>
                     </Flex>
                 </Card.Header>
 
-                <Card.Body display="flex" flexDirection="column" flex="1">
+                <Card.Body display="flex" flexDirection="column" flex="1" overflow="hidden">
                     <Flex flexDirection="row" alignItems="center" mb={5}>
                         <Text mr={4}>Name:</Text>
-                        <Field.Root>
-                            <Input 
-                                placeholder="Artefact name" 
-                                type="text" 
-                                value={artefactData.name || ''} 
-                                onChange={handleNameChange}
-                                onKeyDown={handleEnterKey}
-                                borderColor={artefactData.name !== originalArtefactData.name ? 'darkblue' : 'inherit'}
-                            />
+                        <Field.Root flex="1">
+                            {isEditing ? (
+                                <Input 
+                                    placeholder="Artefact name" 
+                                    type="text" 
+                                    value={artefactData.name || ''} 
+                                    onChange={handleNameChange}
+                                    onKeyDown={handleEnterKey}
+                                    borderColor={artefactData.name !== originalArtefactData.name ? 'darkblue' : 'inherit'}
+                                    width="100%"
+                                    fontSize={17}
+                                />
+                            ) : (
+                                <Box 
+                                    p={2}
+                                    borderRadius="md"
+                                    border="1px solid"
+                                    borderColor="gray.200"
+                                    minH="40px"
+                                    display="flex"
+                                    alignItems="center"
+                                    w="100%"
+                                >
+                                    <Text fontWeight={"light"} fontSize={16} isTruncated>{artefactData.name || 'No name set'}</Text>
+                                </Box>
+                            )}
                         </Field.Root>
                     </Flex>
 
@@ -93,24 +125,41 @@ function EditorCard({ metadata, artefactId, refreshArtefactData }) {
                         />
                     </Flex>
 
-                    <Field.Root flex="1" display="flex" flexDirection="column">
-                        <Textarea
-                            flex="1"
-                            overflowY="auto"
-                            p={2}
-                            borderRadius="md"
-                            whiteSpace="pre-wrap"
-                            scrollbar="hidden"
-                            resize="none"
-                            value={artefactData.metadata?.[selectedTranscription] || ''}
-                            onChange={handleTranscriptionChange}
-                            onKeyDown={handleEnterKey}
-                            borderColor={
-                                artefactData.metadata?.[selectedTranscription] !== originalArtefactData.metadata?.[selectedTranscription] 
-                                    ? 'darkblue' 
-                                    : 'inherit'
-                            }
-                        />
+                    <Field.Root flex="1" display="flex" flexDirection="column" minHeight="0" overflow="hidden">
+                        {isEditing ? (
+                            <Textarea
+                                flex="1"
+                                overflowY="auto"
+                                p={2}
+                                borderRadius="md"
+                                whiteSpace="pre-wrap"
+                                resize="none"
+                                fontSize={17}
+                                lineHeight={1.5}
+                                value={artefactData.metadata?.[selectedTranscription] || ''}
+                                onChange={handleTranscriptionChange}
+                                onKeyDown={handleEnterKey}
+                                borderColor={
+                                    artefactData.metadata?.[selectedTranscription] !== originalArtefactData.metadata?.[selectedTranscription] 
+                                        ? 'darkblue' 
+                                        : 'inherit'
+                                }
+                            />
+                        ) : (
+                            <Box
+                                flex="1"
+                                overflowY="auto"
+                                p={2}
+                                borderRadius="md"
+                                whiteSpace="pre-wrap"
+                                border="1px solid"
+                                borderColor="gray.200"
+                                cursor="default"
+                                minWidth="0"
+                            >
+                                <Text fontWeight={"light"} fontSize={16} wordBreak="break-word">{artefactData.metadata?.[selectedTranscription] || 'No content available'}</Text>
+                            </Box>
+                        )}
                     </Field.Root>
                 </Card.Body>
             </Card.Root>
@@ -122,6 +171,8 @@ function EditorCard({ metadata, artefactId, refreshArtefactData }) {
                 getArtefactData={refreshArtefactData}
                 enterKeyHit={enterKeyHit}
                 artefactId={artefactId}
+                isEditing={isEditing}
+                setIsEditing={setIsEditing}
             />
         </>
     );
diff --git a/src/pages/ArtefactEditor.jsx b/src/pages/ArtefactEditor.jsx
index a5dacdc..97074ee 100644
--- a/src/pages/ArtefactEditor.jsx
+++ b/src/pages/ArtefactEditor.jsx
@@ -16,7 +16,6 @@ function ArtefactEditor() {
 
     // Metadata fetching function
     const fetchMetadata = async () => {
-        console.log("RAN")
         try {
             const cacheBuster = new Date().getTime();
             const response = await server.get(`/cdn/artefactMetadata/${artID}?cb=${cacheBuster}`);
@@ -87,6 +86,8 @@ function ArtefactEditor() {
         return <CentredSpinner />
     }
 
+    const isMMArtefact = (metadata.metadata.english || metadata.metadata.tradCN || metadata.metadata.simplifiedCN || metadata.metadata.summary) ? true : false;
+
     return (
         <Box h="80vh">
             <Flex mt={6} flexDirection="row">
@@ -113,7 +114,7 @@ function ArtefactEditor() {
                 </Box>
 
                 <Box width="46%" p={3}>
-                    <EditorCard metadata={metadata} artefactId={artID} refreshArtefactData={fetchMetadata}/>
+                    <EditorCard metadata={metadata} artefactId={artID} isMMArtefact={isMMArtefact} refreshArtefactData={fetchMetadata}/>
                 </Box>
 
                 <Flex width="4%" display="flex" alignItems="center" justifyContent="flex-end">

From b9f42ea0cc0bff6320cbe2a5699cab849e90950f Mon Sep 17 00:00:00 2001
From: JunHam <joonjunhan@gmail.com>
Date: Wed, 13 Aug 2025 11:46:49 +0800
Subject: [PATCH 19/28] changed informatin toast

---
 src/components/DataStudio/editorCard.jsx | 212 ++++++++++++++++++-----
 src/components/ui/toaster.jsx            |  21 ++-
 2 files changed, 184 insertions(+), 49 deletions(-)

diff --git a/src/components/DataStudio/editorCard.jsx b/src/components/DataStudio/editorCard.jsx
index b49aa52..2893dfb 100644
--- a/src/components/DataStudio/editorCard.jsx
+++ b/src/components/DataStudio/editorCard.jsx
@@ -86,6 +86,7 @@ function EditorCard({ metadata, artefactId, isMMArtefact, refreshArtefactData })
                 </Card.Header>
 
                 <Card.Body display="flex" flexDirection="column" flex="1" overflow="hidden">
+                    {/* Name Field (common to both MM and HF) */}
                     <Flex flexDirection="row" alignItems="center" mb={5}>
                         <Text mr={4}>Name:</Text>
                         <Field.Root flex="1">
@@ -117,50 +118,174 @@ function EditorCard({ metadata, artefactId, isMMArtefact, refreshArtefactData })
                         </Field.Root>
                     </Flex>
 
-                    <Flex flexDirection="row" alignItems="center" mb={4}>
-                        <Text mr={4}>Transcription:</Text>
-                        <MetadataToggle
-                            value={selectedTranscription}
-                            onChange={setSelectedTranscription}
-                        />
-                    </Flex>
+                    {isMMArtefact ? (
+                        <>
+                            {/* MM Artefact Specific Fields */}
+                            <Flex flexDirection="row" alignItems="center" mb={4}>
+                                <Text mr={4}>Transcription:</Text>
+                                <MetadataToggle
+                                    value={selectedTranscription}
+                                    onChange={setSelectedTranscription}
+                                />
+                            </Flex>
+
+                            <Field.Root flex="1" display="flex" flexDirection="column" minHeight="0" overflow="hidden">
+                                {isEditing ? (
+                                    <Textarea
+                                        flex="1"
+                                        overflowY="auto"
+                                        p={2}
+                                        borderRadius="md"
+                                        whiteSpace="pre-wrap"
+                                        resize="none"
+                                        fontSize={17}
+                                        lineHeight={1.5}
+                                        value={artefactData.metadata?.[selectedTranscription] || ''}
+                                        onChange={handleTranscriptionChange}
+                                        onKeyDown={handleEnterKey}
+                                        borderColor={
+                                            artefactData.metadata?.[selectedTranscription] !== originalArtefactData.metadata?.[selectedTranscription] 
+                                                ? 'darkblue' 
+                                                : 'inherit'
+                                        }
+                                    />
+                                ) : (
+                                    <Box
+                                        flex="1"
+                                        overflowY="auto"
+                                        p={2}
+                                        borderRadius="md"
+                                        whiteSpace="pre-wrap"
+                                        border="1px solid"
+                                        borderColor="gray.200"
+                                        cursor="default"
+                                        minWidth="0"
+                                    >
+                                        <Text fontWeight={"light"} fontSize={16} wordBreak="break-word">
+                                            {artefactData.metadata?.[selectedTranscription] || 'No content available'}
+                                        </Text>
+                                    </Box>
+                                )}
+                            </Field.Root>
+                        </>
+                    ) : (
+                        <>
+                            {/* HF Artefact Specific Fields */}
+                            <Flex flexDirection="column" gap={4} flex="1" overflow="hidden">
+                                {/* Caption Field */}
+                                <Flex flexDirection="column">
+                                    <Text mb={2}>Caption:</Text>
+                                    <Field.Root>
+                                        {isEditing ? (
+                                            <Textarea
+                                                value={artefactData.metadata?.caption || ''}
+                                                onChange={(e) => setArtefactData({
+                                                    ...artefactData,
+                                                    metadata: {
+                                                        ...artefactData.metadata,
+                                                        caption: e.target.value
+                                                    }
+                                                })}
+                                                onKeyDown={handleEnterKey}
+                                                borderColor={
+                                                    artefactData.metadata?.caption !== originalArtefactData.metadata?.caption 
+                                                        ? 'darkblue' 
+                                                        : 'inherit'
+                                                }
+                                                resize="vertical"
+                                                minH="100px"
+                                                fontSize={17}
+                                            />
+                                        ) : (
+                                            <Box
+                                                p={2}
+                                                borderRadius="md"
+                                                border="1px solid"
+                                                borderColor="gray.200"
+                                                minH="100px"
+                                            >
+                                                <Text fontWeight={"light"} fontSize={16} wordBreak="break-word">
+                                                    {artefactData.metadata?.caption || 'No caption available'}
+                                                </Text>
+                                            </Box>
+                                        )}
+                                    </Field.Root>
+                                </Flex>
+
+                                {/* Additional Info Field */}
+                                <Flex flexDirection="column" flex="1">
+                                    <Text mb={2}>Additional Info:</Text>
+                                    <Field.Root flex="1">
+                                        {isEditing ? (
+                                            <Textarea
+                                                flex="1"
+                                                value={artefactData.metadata?.addInfo || ''}
+                                                onChange={(e) => setArtefactData({
+                                                    ...artefactData,
+                                                    metadata: {
+                                                        ...artefactData.metadata,
+                                                        addInfo: e.target.value
+                                                    }
+                                                })}
+                                                onKeyDown={handleEnterKey}
+                                                borderColor={
+                                                    artefactData.metadata?.addInfo !== originalArtefactData.metadata?.addInfo 
+                                                        ? 'darkblue' 
+                                                        : 'inherit'
+                                                }
+                                                resize="none"
+                                                fontSize={17}
+                                            />
+                                        ) : (
+                                            <Box
+                                                flex="1"
+                                                p={2}
+                                                borderRadius="md"
+                                                border="1px solid"
+                                                borderColor="gray.200"
+                                                minH="100px"
+                                                overflowY="auto"
+                                            >
+                                                <Text fontWeight={"light"} fontSize={16} wordBreak="break-word">
+                                                    {artefactData.metadata?.addInfo || 'No additional info available'}
+                                                </Text>
+                                            </Box>
+                                        )}
+                                    </Field.Root>
+                                </Flex>
 
-                    <Field.Root flex="1" display="flex" flexDirection="column" minHeight="0" overflow="hidden">
-                        {isEditing ? (
-                            <Textarea
-                                flex="1"
-                                overflowY="auto"
-                                p={2}
-                                borderRadius="md"
-                                whiteSpace="pre-wrap"
-                                resize="none"
-                                fontSize={17}
-                                lineHeight={1.5}
-                                value={artefactData.metadata?.[selectedTranscription] || ''}
-                                onChange={handleTranscriptionChange}
-                                onKeyDown={handleEnterKey}
-                                borderColor={
-                                    artefactData.metadata?.[selectedTranscription] !== originalArtefactData.metadata?.[selectedTranscription] 
-                                        ? 'darkblue' 
-                                        : 'inherit'
-                                }
-                            />
-                        ) : (
-                            <Box
-                                flex="1"
-                                overflowY="auto"
-                                p={2}
-                                borderRadius="md"
-                                whiteSpace="pre-wrap"
-                                border="1px solid"
-                                borderColor="gray.200"
-                                cursor="default"
-                                minWidth="0"
-                            >
-                                <Text fontWeight={"light"} fontSize={16} wordBreak="break-word">{artefactData.metadata?.[selectedTranscription] || 'No content available'}</Text>
-                            </Box>
-                        )}
-                    </Field.Root>
+                                {/* Figure IDs Display (Read-only) */}
+                                <Flex flexDirection="column">
+                                    <Text mb={2}>Associated Figures:</Text>
+                                    <Box
+                                        p={2}
+                                        borderRadius="md"
+                                        border="1px solid"
+                                        borderColor="gray.200"
+                                        minH="50px"
+                                    >
+                                        {artefactData.metadata?.figureIDs?.length > 0 ? (
+                                            <Flex wrap="wrap" gap={2}>
+                                                {artefactData.metadata.figureIDs.map(id => (
+                                                    <Box 
+                                                        key={id}
+                                                        px={2}
+                                                        py={1}
+                                                        bg="gray.100"
+                                                        borderRadius="md"
+                                                    >
+                                                        <Text fontSize={14}>{id}</Text>
+                                                    </Box>
+                                                ))}
+                                            </Flex>
+                                        ) : (
+                                            <Text fontWeight={"light"} fontSize={16}>No associated figures</Text>
+                                        )}
+                                    </Box>
+                                </Flex>
+                            </Flex>
+                        </>
+                    )}
                 </Card.Body>
             </Card.Root>
 
@@ -173,6 +298,7 @@ function EditorCard({ metadata, artefactId, isMMArtefact, refreshArtefactData })
                 artefactId={artefactId}
                 isEditing={isEditing}
                 setIsEditing={setIsEditing}
+                isMMArtefact={isMMArtefact}
             />
         </>
     );
diff --git a/src/components/ui/toaster.jsx b/src/components/ui/toaster.jsx
index e68f1c7..0a29358 100644
--- a/src/components/ui/toaster.jsx
+++ b/src/components/ui/toaster.jsx
@@ -15,7 +15,7 @@ export const toaster = createToaster({
   overlap: true
 })
 
-const toastColors = {
+const toastColours = {
   success: 'primaryColour',
   error: 'sccciColour',
   info: 'blue.500',
@@ -24,28 +24,37 @@ const toastColors = {
   default: 'white',
 };
 
+const toastFgColours = {
+  'success': 'white',
+  'error': 'white',
+  'info': 'white',
+  'warning': 'white',
+  'loading': 'black',
+  'default': 'black'
+}
+
 
 export const Toaster = () => {
   return (
     <Portal>
       <ChakraToaster toaster={toaster} insetInline={{ mdDown: '4' }}>
         {(toast) => (
-          <Toast.Root width={{ md: 'sm' }} bg={toastColors[toast.type] || toastColors.default} borderRadius={'20px'}>
+          <Toast.Root width={{ md: 'sm' }} bg={toastColours[toast.type] || toastColours.default} borderRadius={'20px'}>
             {toast.type === 'loading' ? (
               <Spinner size='sm' color='blue.solid' />
             ) : (
               <Toast.Indicator />
             )}
             <Stack gap='1' flex='1' maxWidth='100%'>
-              {toast.title && <Toast.Title>{toast.title}</Toast.Title>}
+              {toast.title && <Toast.Title color={toastFgColours[toast.type] || toastFgColours.default}>{toast.title}</Toast.Title>}
               {toast.description && (
-                <Toast.Description>{toast.description}</Toast.Description>
+                <Toast.Description color={toastFgColours[toast.type] || toastFgColours.default}>{toast.description}</Toast.Description>
               )}
             </Stack>
             {toast.action && (
-              <Toast.ActionTrigger>{toast.action.label}</Toast.ActionTrigger>
+              <Toast.ActionTrigger color={toastFgColours[toast.type] || toastFgColours.default}>{toast.action.label}</Toast.ActionTrigger>
             )}
-            {toast.closable && <Toast.CloseTrigger />}
+            {toast.closable && <Toast.CloseTrigger color={toastFgColours[toast.type] || toastFgColours.default} />}
           </Toast.Root>
         )}
       </ChakraToaster>

From 30173823ea210ae396b55adeeb063f255882f5bc Mon Sep 17 00:00:00 2001
From: JunHam <joonjunhan@gmail.com>
Date: Wed, 13 Aug 2025 12:45:40 +0800
Subject: [PATCH 20/28] Implemented better and cleaner layout for HF editor
 card

---
 .../DataStudio/artefactEditorActionBar.jsx    |  99 +++++++++-
 src/components/DataStudio/editorCard.jsx      | 172 +++++++++++-------
 2 files changed, 191 insertions(+), 80 deletions(-)

diff --git a/src/components/DataStudio/artefactEditorActionBar.jsx b/src/components/DataStudio/artefactEditorActionBar.jsx
index d23e9c4..4c86016 100644
--- a/src/components/DataStudio/artefactEditorActionBar.jsx
+++ b/src/components/DataStudio/artefactEditorActionBar.jsx
@@ -4,7 +4,7 @@ import { useEffect, useState } from 'react'
 import ToastWizard from '../toastWizard';
 import server, { JSONResponse } from '../../networking';
 
-function ArtefactEditorActionBar({  artefactData,  originalArtefactData,  setArtefactData,  getArtefactData,  enterKeyHit, artefactId, isEditing, setIsEditing }) {
+function ArtefactEditorActionBar({  artefactData,  originalArtefactData,  setArtefactData,  getArtefactData,  enterKeyHit, artefactId, isEditing, setIsEditing, isMMArtefact }) {
     const [changesMade, setChangesMade] = useState(false);
     const [isConfirmSaveOpen, setIsConfirmSaveOpen] = useState(false);
     const [saveLoading, setSaveLoading] = useState(false);
@@ -19,6 +19,68 @@ function ArtefactEditorActionBar({  artefactData,  originalArtefactData,  setArt
         }
     }, [enterKeyHit]);
 
+    // Validation functions
+    const validateField = (fieldName, value, validator) => {
+        if (value === null || value === undefined) return true; // Allow null/undefined values
+        
+        switch (fieldName) {
+            case 'artefactID':
+                return typeof value === 'string';
+            case 'name':
+                return typeof value === 'string' && value.trim().length >= 1 && value.trim().length <= 25;
+            case 'tradCN':
+            case 'simplifiedCN':
+            case 'caption':
+                return typeof value === 'string' && value.trim().length >= 1 && value.trim().length <= 200;
+            case 'english':
+            case 'summary':
+                return typeof value === 'string' && value.trim().length >= 1 && value.trim().length <= 2000;
+            case 'addInfo':
+                return typeof value === 'string' && value.trim().length <= 3000;
+            default:
+                return true;
+        }
+    };
+
+    const validateUpdateDict = (updateDict) => {
+        const errors = [];
+        
+        // Common validation
+        if (!validateField('artefactID', updateDict.artefactID)) {
+            errors.push('Artefact ID is required');
+        }
+        
+        if (!validateField('name', updateDict.name)) {
+            errors.push('Name must be between 1-25 characters');
+        }
+
+        if (isMMArtefact) {
+            // MM-type validation
+            if (updateDict.tradCN !== null && !validateField('tradCN', updateDict.tradCN)) {
+                errors.push('Traditional Chinese must be between 1-1000 characters');
+            }
+            if (updateDict.simplifiedCN !== null && !validateField('simplifiedCN', updateDict.simplifiedCN)) {
+                errors.push('Simplified Chinese must be between 1-1000 characters');
+            }
+            if (updateDict.english !== null && !validateField('english', updateDict.english)) {
+                errors.push('English must be between 1-2000 characters');
+            }
+            if (updateDict.summary !== null && !validateField('summary', updateDict.summary)) {
+                errors.push('Summary must be between 1-2000 characters');
+            }
+        } else {
+            // HF-type validation
+            if (updateDict.caption !== null && !validateField('caption', updateDict.caption)) {
+                errors.push('Caption must be between 1-200 characters');
+            }
+            if (updateDict.addInfo !== null && !validateField('addInfo', updateDict.addInfo)) {
+                errors.push('Additional Info must be 3000 characters or less');
+            }
+        }
+
+        return errors;
+    };
+
     const handleCancelChanges = () => {
         setArtefactData(originalArtefactData);
         ToastWizard.standard("warning", "Changes Reset", "All changes reverted.", 3000);
@@ -32,16 +94,34 @@ function ArtefactEditorActionBar({  artefactData,  originalArtefactData,  setArt
         var updateDict = {
             artefactID: artefactId,
             name: artefactData.name || '',
-            // MM-type metadata fields - always include all
-            tradCN: currentMetadata.tradCN || null,
-            simplifiedCN: currentMetadata.simplifiedCN || null,
-            english: currentMetadata.english || null,
-            summary: currentMetadata.summary || null,
-            // // HF-type metadata fields - always include all
-            // caption: currentMetadata.caption || null,
-            // addInfo: currentMetadata.addInfo || null
         };
 
+        // Add fields based on artefact type
+        if (isMMArtefact) {
+            // MM-type metadata fields
+            updateDict.tradCN = currentMetadata.tradCN || null;
+            updateDict.simplifiedCN = currentMetadata.simplifiedCN || null;
+            updateDict.english = currentMetadata.english || null;
+            updateDict.summary = currentMetadata.summary || null;
+        } else {
+            // HF-type metadata fields
+            updateDict.caption = currentMetadata.caption || null;
+            updateDict.addInfo = currentMetadata.addInfo || null;
+        }
+
+        // Validate the update dictionary
+        const validationErrors = validateUpdateDict(updateDict);
+        if (validationErrors.length > 0) {
+            setSaveLoading(false);
+            ToastWizard.standard(
+                "error", 
+                "Validation Error", 
+                validationErrors.join('. '), 
+                5000
+            );
+            return;
+        }
+
         try {
             console.log(updateDict);
             const response = await server.post('/studio/artefact/update', updateDict);
@@ -60,7 +140,6 @@ function ArtefactEditorActionBar({  artefactData,  originalArtefactData,  setArt
                 getArtefactData();
                 setIsConfirmSaveOpen(false);
                 setIsEditing(false); // Exit editing mode after successful save
-                setIsEditing(false); // Exit editing mode after successful save
 
                 if (response.data.status === 207) {
                     // Partial success - metadata updated but NER labelling failed
diff --git a/src/components/DataStudio/editorCard.jsx b/src/components/DataStudio/editorCard.jsx
index 2893dfb..9762fec 100644
--- a/src/components/DataStudio/editorCard.jsx
+++ b/src/components/DataStudio/editorCard.jsx
@@ -1,4 +1,4 @@
-import { Card, Button, Flex, Text, Field, Input, Textarea, Box } from "@chakra-ui/react";
+import { Card, Button, Flex, Text, Field, Input, Textarea, Box, Image, SkeletonCircle } from "@chakra-ui/react";
 import { useState, useEffect } from "react";
 import { IoInformationCircleOutline } from "react-icons/io5";
 import { MdOutlineEdit, MdOutlineCancel } from "react-icons/md";
@@ -85,43 +85,39 @@ function EditorCard({ metadata, artefactId, isMMArtefact, refreshArtefactData })
                     </Flex>
                 </Card.Header>
 
-                <Card.Body display="flex" flexDirection="column" flex="1" overflow="hidden">
-                    {/* Name Field (common to both MM and HF) */}
-                    <Flex flexDirection="row" alignItems="center" mb={5}>
-                        <Text mr={4}>Name:</Text>
-                        <Field.Root flex="1">
-                            {isEditing ? (
-                                <Input 
-                                    placeholder="Artefact name" 
-                                    type="text" 
-                                    value={artefactData.name || ''} 
-                                    onChange={handleNameChange}
-                                    onKeyDown={handleEnterKey}
-                                    borderColor={artefactData.name !== originalArtefactData.name ? 'darkblue' : 'inherit'}
-                                    width="100%"
-                                    fontSize={17}
-                                />
-                            ) : (
-                                <Box 
-                                    p={2}
-                                    borderRadius="md"
-                                    border="1px solid"
-                                    borderColor="gray.200"
-                                    minH="40px"
-                                    display="flex"
-                                    alignItems="center"
-                                    w="100%"
-                                >
-                                    <Text fontWeight={"light"} fontSize={16} isTruncated>{artefactData.name || 'No name set'}</Text>
-                                </Box>
-                            )}
-                        </Field.Root>
-                    </Flex>
-
+                <Card.Body display="flex" flexDirection="column" flex="1" overflowY="hidden">
                     {isMMArtefact ? (
                         <>
+                            <Flex flexDirection="row" alignItems="center" overflowY={"auto"}>
+                                <Text mr={4}>Name:</Text>
+                                <Field.Root flex="1">
+                                    {isEditing ? (
+                                        <Input 
+                                            placeholder="Artefact name" 
+                                            type="text" 
+                                            value={artefactData.name || ''} 
+                                            onChange={handleNameChange}
+                                            onKeyDown={handleEnterKey}
+                                            borderColor={artefactData.name !== originalArtefactData.name ? 'darkblue' : 'inherit'}
+                                            width="100%"
+                                            fontSize={17}
+                                        />
+                                    ) : (
+                                        <Box 
+                                            p={2}
+                                            minH="40px"
+                                            display="flex"
+                                            alignItems="center"
+                                            w="100%"
+                                        >
+                                            <Text fontWeight={"light"} fontSize={16} isTruncated>{artefactData.name || 'No name set'}</Text>
+                                        </Box>
+                                    )}
+                                </Field.Root>
+                            </Flex>
+
                             {/* MM Artefact Specific Fields */}
-                            <Flex flexDirection="row" alignItems="center" mb={4}>
+                            <Flex flexDirection="row" alignItems="center" mb={4} mt={5}>
                                 <Text mr={4}>Transcription:</Text>
                                 <MetadataToggle
                                     value={selectedTranscription}
@@ -139,7 +135,7 @@ function EditorCard({ metadata, artefactId, isMMArtefact, refreshArtefactData })
                                         whiteSpace="pre-wrap"
                                         resize="none"
                                         fontSize={17}
-                                        lineHeight={1.5}
+                                        lineHeight={1.6}
                                         value={artefactData.metadata?.[selectedTranscription] || ''}
                                         onChange={handleTranscriptionChange}
                                         onKeyDown={handleEnterKey}
@@ -148,20 +144,19 @@ function EditorCard({ metadata, artefactId, isMMArtefact, refreshArtefactData })
                                                 ? 'darkblue' 
                                                 : 'inherit'
                                         }
+                                        scrollbar={"hidden"}
                                     />
                                 ) : (
                                     <Box
                                         flex="1"
                                         overflowY="auto"
                                         p={2}
-                                        borderRadius="md"
                                         whiteSpace="pre-wrap"
-                                        border="1px solid"
-                                        borderColor="gray.200"
                                         cursor="default"
-                                        minWidth="0"
+                                        w="100%"
+                                        scrollbar={"hidden"}    
                                     >
-                                        <Text fontWeight={"light"} fontSize={16} wordBreak="break-word">
+                                        <Text fontSize={16} lineHeight={1.6} wordBreak="break-word">
                                             {artefactData.metadata?.[selectedTranscription] || 'No content available'}
                                         </Text>
                                     </Box>
@@ -169,9 +164,37 @@ function EditorCard({ metadata, artefactId, isMMArtefact, refreshArtefactData })
                             </Field.Root>
                         </>
                     ) : (
-                        <>
+                        <Box overflowY={"auto"} scrollbar={"hidden"}>
+                            <Flex flexDirection="row" alignItems="center">
+                                <Text mr={4}>Name:</Text>
+                                <Field.Root flex="1">
+                                    {isEditing ? (
+                                        <Input 
+                                            placeholder="Artefact name" 
+                                            type="text" 
+                                            value={artefactData.name || ''} 
+                                            onChange={handleNameChange}
+                                            onKeyDown={handleEnterKey}
+                                            borderColor={artefactData.name !== originalArtefactData.name ? 'darkblue' : 'inherit'}
+                                            width="100%"
+                                            fontSize={17}
+                                        />
+                                    ) : (
+                                        <Box 
+                                            p={2}
+                                            minH="40px"
+                                            display="flex"
+                                            alignItems="center"
+                                            w="100%"
+                                        >
+                                            <Text fontWeight={"light"} fontSize={16} isTruncated>{artefactData.name || 'No name set'}</Text>
+                                        </Box>
+                                    )}
+                                </Field.Root>
+                            </Flex>
+
                             {/* HF Artefact Specific Fields */}
-                            <Flex flexDirection="column" gap={4} flex="1" overflow="hidden">
+                            <Flex flexDirection="column" gap={4} flex="1" overflow="hidden" mt={4}>
                                 {/* Caption Field */}
                                 <Flex flexDirection="column">
                                     <Text mb={2}>Caption:</Text>
@@ -192,19 +215,19 @@ function EditorCard({ metadata, artefactId, isMMArtefact, refreshArtefactData })
                                                         ? 'darkblue' 
                                                         : 'inherit'
                                                 }
-                                                resize="vertical"
-                                                minH="100px"
+                                                resize="none"
                                                 fontSize={17}
+                                                lineHeight={1.5}
+                                                minH={100}
+                                                scrollbar={"hidden"}
                                             />
                                         ) : (
                                             <Box
-                                                p={2}
-                                                borderRadius="md"
-                                                border="1px solid"
-                                                borderColor="gray.200"
-                                                minH="100px"
+                                                w={"100%"}
+                                                overflowY={"auto"}
+                                                scrollbar={"hidden"}
                                             >
-                                                <Text fontWeight={"light"} fontSize={16} wordBreak="break-word">
+                                                <Text fontWeight={"light"} fontSize={16} wordBreak="break-word" lineHeight={1.6} numberOfLines={0}>
                                                     {artefactData.metadata?.caption || 'No caption available'}
                                                 </Text>
                                             </Box>
@@ -235,18 +258,16 @@ function EditorCard({ metadata, artefactId, isMMArtefact, refreshArtefactData })
                                                 }
                                                 resize="none"
                                                 fontSize={17}
+                                                minH={200}
+                                                lineHeight={1.5}
+                                                scrollbar={"hidden"}
                                             />
                                         ) : (
                                             <Box
                                                 flex="1"
-                                                p={2}
-                                                borderRadius="md"
-                                                border="1px solid"
-                                                borderColor="gray.200"
-                                                minH="100px"
-                                                overflowY="auto"
+                                                w={"100%"}
                                             >
-                                                <Text fontWeight={"light"} fontSize={16} wordBreak="break-word">
+                                                <Text fontWeight={"light"} fontSize={16} wordBreak="break-word" lineHeight={1.6} numberOfLines={0}>
                                                     {artefactData.metadata?.addInfo || 'No additional info available'}
                                                 </Text>
                                             </Box>
@@ -259,22 +280,33 @@ function EditorCard({ metadata, artefactId, isMMArtefact, refreshArtefactData })
                                     <Text mb={2}>Associated Figures:</Text>
                                     <Box
                                         p={2}
-                                        borderRadius="md"
-                                        border="1px solid"
-                                        borderColor="gray.200"
-                                        minH="50px"
+                                        h="auto"
                                     >
                                         {artefactData.metadata?.figureIDs?.length > 0 ? (
-                                            <Flex wrap="wrap" gap={2}>
+                                            <Flex wrap="wrap" gap={4}>
                                                 {artefactData.metadata.figureIDs.map(id => (
-                                                    <Box 
+                                                    <Box
                                                         key={id}
-                                                        px={2}
-                                                        py={1}
-                                                        bg="gray.100"
-                                                        borderRadius="md"
+                                                        textAlign="center"
+                                                        position="relative"
+                                                        width={100}
+                                                        height={100}
+                                                        cursor="pointer"
                                                     >
-                                                        <Text fontSize={14}>{id}</Text>
+                                                        <Image
+                                                            src={`${import.meta.env.VITE_BACKEND_URL}/cdn/people/${id}`}
+                                                            alt={`Headshot of ${id}`}
+                                                            width="100%"
+                                                            height="100%"
+                                                            objectFit="cover"
+                                                            borderRadius="full"
+                                                            border="1px solid"
+                                                            borderColor="gray.200"
+                                                            fallback={
+                                                                <SkeletonCircle size="100px"/>
+                                                            }
+                                                            loading="eager"
+                                                        />
                                                     </Box>
                                                 ))}
                                             </Flex>
@@ -284,7 +316,7 @@ function EditorCard({ metadata, artefactId, isMMArtefact, refreshArtefactData })
                                     </Box>
                                 </Flex>
                             </Flex>
-                        </>
+                        </Box>
                     )}
                 </Card.Body>
             </Card.Root>

From 4f00109a9bdde60c64d6a7339a78372404f0c88b Mon Sep 17 00:00:00 2001
From: JunHam <joonjunhan@gmail.com>
Date: Wed, 13 Aug 2025 14:45:34 +0800
Subject: [PATCH 21/28] Added remove figure function

---
 src/components/DataStudio/editorCard.jsx    |  47 ++------
 src/components/DataStudio/figureDisplay.jsx | 127 ++++++++++++++++++++
 2 files changed, 134 insertions(+), 40 deletions(-)
 create mode 100644 src/components/DataStudio/figureDisplay.jsx

diff --git a/src/components/DataStudio/editorCard.jsx b/src/components/DataStudio/editorCard.jsx
index 9762fec..abe8a73 100644
--- a/src/components/DataStudio/editorCard.jsx
+++ b/src/components/DataStudio/editorCard.jsx
@@ -5,6 +5,7 @@ import { MdOutlineEdit, MdOutlineCancel } from "react-icons/md";
 import MetadataToggle from "./metadataToggle";
 import ArtefactEditorActionBar from "./artefactEditorActionBar";
 import ToastWizard from "../toastWizard";
+import FigureDisplaySection from "./figureDisplay";
 
 function EditorCard({ metadata, artefactId, isMMArtefact, refreshArtefactData }) {
     const [selectedTranscription, setSelectedTranscription] = useState("tradCN");
@@ -275,46 +276,12 @@ function EditorCard({ metadata, artefactId, isMMArtefact, refreshArtefactData })
                                     </Field.Root>
                                 </Flex>
 
-                                {/* Figure IDs Display (Read-only) */}
-                                <Flex flexDirection="column">
-                                    <Text mb={2}>Associated Figures:</Text>
-                                    <Box
-                                        p={2}
-                                        h="auto"
-                                    >
-                                        {artefactData.metadata?.figureIDs?.length > 0 ? (
-                                            <Flex wrap="wrap" gap={4}>
-                                                {artefactData.metadata.figureIDs.map(id => (
-                                                    <Box
-                                                        key={id}
-                                                        textAlign="center"
-                                                        position="relative"
-                                                        width={100}
-                                                        height={100}
-                                                        cursor="pointer"
-                                                    >
-                                                        <Image
-                                                            src={`${import.meta.env.VITE_BACKEND_URL}/cdn/people/${id}`}
-                                                            alt={`Headshot of ${id}`}
-                                                            width="100%"
-                                                            height="100%"
-                                                            objectFit="cover"
-                                                            borderRadius="full"
-                                                            border="1px solid"
-                                                            borderColor="gray.200"
-                                                            fallback={
-                                                                <SkeletonCircle size="100px"/>
-                                                            }
-                                                            loading="eager"
-                                                        />
-                                                    </Box>
-                                                ))}
-                                            </Flex>
-                                        ) : (
-                                            <Text fontWeight={"light"} fontSize={16}>No associated figures</Text>
-                                        )}
-                                    </Box>
-                                </Flex>
+                                <FigureDisplaySection 
+                                    artefactId={artefactId}
+                                    figureIds={metadata.metadata.figureIDs} 
+                                    getArtefactData={refreshArtefactData}
+                                    isEditing={isEditing}
+                                />
                             </Flex>
                         </Box>
                     )}
diff --git a/src/components/DataStudio/figureDisplay.jsx b/src/components/DataStudio/figureDisplay.jsx
new file mode 100644
index 0000000..9aa8cc4
--- /dev/null
+++ b/src/components/DataStudio/figureDisplay.jsx
@@ -0,0 +1,127 @@
+import { Box, Flex, Text, Image, SkeletonCircle } from '@chakra-ui/react';
+import { MdOutlineDeleteForever } from 'react-icons/md';
+import { useState } from 'react';
+import server, { JSONResponse } from '../../networking';
+import ToastWizard from '../toastWizard';
+
+function FigureDisplaySection({ artefactId, figureIds, getArtefactData, isEditing }) {
+    const [deletingFigure, setDeletingFigure] = useState(null);
+
+    const handleRemoveFigure = async (figureID) => {
+        setDeletingFigure(figureID);
+        
+        try {
+            const response = await server.post('/studio/artefact/removeFigure', {
+                artefactID: artefactId,
+                figureID: figureID
+            });
+
+            console.log(response)
+
+            if (response.data instanceof JSONResponse) {
+                if (response.data.isErrorStatus()) {
+                    throw new Error(response.data.message);
+                }
+
+                // Success case
+                ToastWizard.standard("success", "Figure removed", response.data.message);
+                getArtefactData();
+            } else {
+                throw new Error("Unexpected response format");
+            }
+        } catch (err) {
+            console.error("Error removing figure:", err);
+            
+            let errorMessage = "Failed to remove figure. Please try again.";
+            if (err.response && err.response.data instanceof JSONResponse) {
+                errorMessage = err.response.data.message;
+            } else if (err.message) {
+                errorMessage = err.message;
+            }
+
+            ToastWizard.standard("error", "Remove failed", errorMessage, 3000);
+        } finally {
+            setDeletingFigure(null);
+        }
+    };
+
+    return (
+        <Flex flexDirection="column">
+            <Text mb={2}>Associated Figures:</Text>
+            <Box p={2} h="auto">
+                {figureIds.length > 0 ? (
+                    <Flex wrap="wrap" gap={4}>
+                        {figureIds.map(id => (
+                            <Box
+                                key={id}
+                                textAlign="center"
+                                position="relative"
+                                width={100}
+                                height={100}
+                                cursor="pointer"
+                                borderRadius="full"
+                                overflow="hidden"
+                                _hover={isEditing ? {
+                                    '& .delete-overlay': {
+                                        opacity: 1
+                                    }
+                                } : {}}
+                            >
+                                <Image
+                                    src={`${import.meta.env.VITE_BACKEND_URL}/cdn/people/${id}`}
+                                    alt={`Headshot of ${id}`}
+                                    width="100%"
+                                    height="100%"
+                                    objectFit="cover"
+                                    border="1px solid"
+                                    borderColor="gray.200"
+                                    fallback={<SkeletonCircle size="100px"/>}
+                                    loading="eager"
+                                />
+                                
+                                {/* Delete Overlay - only show when editing */}
+                                {isEditing && (
+                                    <Box
+                                        className="delete-overlay"
+                                        position="absolute"
+                                        top={0}
+                                        left={0}
+                                        right={0}
+                                        bottom={0}
+                                        bg="blackAlpha.600"
+                                        opacity={0}
+                                        transition="opacity 0.2s ease-in-out"
+                                        display="flex"
+                                        alignItems="center"
+                                        justifyContent="center"
+                                        borderRadius="full"
+                                        onClick={(e) => {
+                                            e.stopPropagation();
+                                            handleRemoveFigure(id);
+                                        }}
+                                        cursor={deletingFigure === id ? "not-allowed" : "pointer"}
+                                        pointerEvents={deletingFigure === id ? "none" : "auto"}
+                                    >
+                                        <MdOutlineDeleteForever
+                                            size={32}
+                                            color={deletingFigure === id ? "#999" : "#e53e3e"}
+                                            style={{
+                                                opacity: deletingFigure === id ? 0.5 : 1,
+                                                transform: deletingFigure === id ? "scale(0.8)" : "scale(1)",
+                                                transition: "all 0.2s ease-in-out"
+                                            }}
+                                        />
+                                    </Box>
+                                )}
+                            </Box>
+                        ))}
+                    </Flex>
+                ) : (
+                    <Text fontWeight={"light"} fontSize={16}>No associated figures</Text>
+                )}
+            </Box>
+        </Flex>
+    );
+}
+
+export default FigureDisplaySection;
\ No newline at end of file

From f64b261684ade8cd3329673c670d39444a026691 Mon Sep 17 00:00:00 2001
From: JunHam <joonjunhan@gmail.com>
Date: Wed, 13 Aug 2025 15:35:29 +0800
Subject: [PATCH 22/28] Added dialog to confirm delete of  HF for artefact
 figure association

---
 .../DataStudio/artefactEditorActionBar.jsx    |  9 ++--
 src/components/DataStudio/editorCard.jsx      | 13 -----
 src/components/DataStudio/figureDisplay.jsx   | 54 ++++++++++++++++---
 3 files changed, 51 insertions(+), 25 deletions(-)

diff --git a/src/components/DataStudio/artefactEditorActionBar.jsx b/src/components/DataStudio/artefactEditorActionBar.jsx
index 4c86016..d57167c 100644
--- a/src/components/DataStudio/artefactEditorActionBar.jsx
+++ b/src/components/DataStudio/artefactEditorActionBar.jsx
@@ -4,7 +4,7 @@ import { useEffect, useState } from 'react'
 import ToastWizard from '../toastWizard';
 import server, { JSONResponse } from '../../networking';
 
-function ArtefactEditorActionBar({  artefactData,  originalArtefactData,  setArtefactData,  getArtefactData,  enterKeyHit, artefactId, isEditing, setIsEditing, isMMArtefact }) {
+function ArtefactEditorActionBar({  artefactData,  originalArtefactData,  setArtefactData,  getArtefactData, artefactId, isEditing, setIsEditing, isMMArtefact }) {
     const [changesMade, setChangesMade] = useState(false);
     const [isConfirmSaveOpen, setIsConfirmSaveOpen] = useState(false);
     const [saveLoading, setSaveLoading] = useState(false);
@@ -17,11 +17,11 @@ function ArtefactEditorActionBar({  artefactData,  originalArtefactData,  setArt
         if (changesMade && isEditing) {
             setIsConfirmSaveOpen(true);
         }
-    }, [enterKeyHit]);
+    }, []);
 
     // Validation functions
-    const validateField = (fieldName, value, validator) => {
-        if (value === null || value === undefined) return true; // Allow null/undefined values
+    const validateField = (fieldName, value) => {
+        if (value === null || value === undefined) return true;
         
         switch (fieldName) {
             case 'artefactID':
@@ -30,6 +30,7 @@ function ArtefactEditorActionBar({  artefactData,  originalArtefactData,  setArt
                 return typeof value === 'string' && value.trim().length >= 1 && value.trim().length <= 25;
             case 'tradCN':
             case 'simplifiedCN':
+                return typeof value === 'string' && value.trim().length >= 1 && value.trim().length <= 1000;
             case 'caption':
                 return typeof value === 'string' && value.trim().length >= 1 && value.trim().length <= 200;
             case 'english':
diff --git a/src/components/DataStudio/editorCard.jsx b/src/components/DataStudio/editorCard.jsx
index abe8a73..3224e17 100644
--- a/src/components/DataStudio/editorCard.jsx
+++ b/src/components/DataStudio/editorCard.jsx
@@ -29,13 +29,6 @@ function EditorCard({ metadata, artefactId, isMMArtefact, refreshArtefactData })
         }
     }, [metadata]);
 
-    // Handle Enter key press
-    const handleEnterKey = (e) => {
-        if (e.key === 'Enter') {
-            setEnterKeyHit(prev => !prev);
-        }
-    }
-
     // Handle edit/cancel button click
     const handleEditClick = () => {
         setIsEditing(true);
@@ -98,7 +91,6 @@ function EditorCard({ metadata, artefactId, isMMArtefact, refreshArtefactData })
                                             type="text" 
                                             value={artefactData.name || ''} 
                                             onChange={handleNameChange}
-                                            onKeyDown={handleEnterKey}
                                             borderColor={artefactData.name !== originalArtefactData.name ? 'darkblue' : 'inherit'}
                                             width="100%"
                                             fontSize={17}
@@ -139,7 +131,6 @@ function EditorCard({ metadata, artefactId, isMMArtefact, refreshArtefactData })
                                         lineHeight={1.6}
                                         value={artefactData.metadata?.[selectedTranscription] || ''}
                                         onChange={handleTranscriptionChange}
-                                        onKeyDown={handleEnterKey}
                                         borderColor={
                                             artefactData.metadata?.[selectedTranscription] !== originalArtefactData.metadata?.[selectedTranscription] 
                                                 ? 'darkblue' 
@@ -175,7 +166,6 @@ function EditorCard({ metadata, artefactId, isMMArtefact, refreshArtefactData })
                                             type="text" 
                                             value={artefactData.name || ''} 
                                             onChange={handleNameChange}
-                                            onKeyDown={handleEnterKey}
                                             borderColor={artefactData.name !== originalArtefactData.name ? 'darkblue' : 'inherit'}
                                             width="100%"
                                             fontSize={17}
@@ -210,7 +200,6 @@ function EditorCard({ metadata, artefactId, isMMArtefact, refreshArtefactData })
                                                         caption: e.target.value
                                                     }
                                                 })}
-                                                onKeyDown={handleEnterKey}
                                                 borderColor={
                                                     artefactData.metadata?.caption !== originalArtefactData.metadata?.caption 
                                                         ? 'darkblue' 
@@ -251,7 +240,6 @@ function EditorCard({ metadata, artefactId, isMMArtefact, refreshArtefactData })
                                                         addInfo: e.target.value
                                                     }
                                                 })}
-                                                onKeyDown={handleEnterKey}
                                                 borderColor={
                                                     artefactData.metadata?.addInfo !== originalArtefactData.metadata?.addInfo 
                                                         ? 'darkblue' 
@@ -293,7 +281,6 @@ function EditorCard({ metadata, artefactId, isMMArtefact, refreshArtefactData })
                 originalArtefactData={originalArtefactData}
                 setArtefactData={setArtefactData}
                 getArtefactData={refreshArtefactData}
-                enterKeyHit={enterKeyHit}
                 artefactId={artefactId}
                 isEditing={isEditing}
                 setIsEditing={setIsEditing}
diff --git a/src/components/DataStudio/figureDisplay.jsx b/src/components/DataStudio/figureDisplay.jsx
index 9aa8cc4..7ed498b 100644
--- a/src/components/DataStudio/figureDisplay.jsx
+++ b/src/components/DataStudio/figureDisplay.jsx
@@ -1,4 +1,4 @@
-import { Box, Flex, Text, Image, SkeletonCircle } from '@chakra-ui/react';
+import { Box, Flex, Text, Image, SkeletonCircle, Portal, Dialog, Button } from '@chakra-ui/react';
 import { MdOutlineDeleteForever } from 'react-icons/md';
 import { useState } from 'react';
 import server, { JSONResponse } from '../../networking';
@@ -6,9 +6,13 @@ import ToastWizard from '../toastWizard';
 
 function FigureDisplaySection({ artefactId, figureIds, getArtefactData, isEditing }) {
     const [deletingFigure, setDeletingFigure] = useState(null);
+    const [saveLoading, setSaveLoading] = useState(false);
+    const [isConfirmDeleteOpen, setIsConfirmDeleteOpen] = useState(false);
+    const [selectedFigureId, setSelectedFigureId] = useState(null);
 
     const handleRemoveFigure = async (figureID) => {
         setDeletingFigure(figureID);
+        setSaveLoading(true);
         
         try {
             const response = await server.post('/studio/artefact/removeFigure', {
@@ -16,8 +20,6 @@ function FigureDisplaySection({ artefactId, figureIds, getArtefactData, isEditin
                 figureID: figureID
             });
 
-            console.log(response)
-
             if (response.data instanceof JSONResponse) {
                 if (response.data.isErrorStatus()) {
                     throw new Error(response.data.message);
@@ -25,7 +27,6 @@ function FigureDisplaySection({ artefactId, figureIds, getArtefactData, isEditin
 
                 // Success case
                 ToastWizard.standard("success", "Figure removed", response.data.message);
-                getArtefactData();
             } else {
                 throw new Error("Unexpected response format");
             }
@@ -39,9 +40,20 @@ function FigureDisplaySection({ artefactId, figureIds, getArtefactData, isEditin
                 errorMessage = err.message;
             }
 
-            ToastWizard.standard("error", "Remove failed", errorMessage, 3000);
+            ToastWizard.standard(
+                "error", 
+                "Remove failed", 
+                errorMessage, 
+                3000,
+                true,
+                handleRemoveFigure,
+                'Retry'
+            );
         } finally {
             setDeletingFigure(null);
+            setSaveLoading(false);
+            setIsConfirmDeleteOpen(false);
+            getArtefactData();
         }
     };
 
@@ -95,9 +107,9 @@ function FigureDisplaySection({ artefactId, figureIds, getArtefactData, isEditin
                                         alignItems="center"
                                         justifyContent="center"
                                         borderRadius="full"
-                                        onClick={(e) => {
-                                            e.stopPropagation();
-                                            handleRemoveFigure(id);
+                                        onClick={() => {
+                                            setSelectedFigureId(id);
+                                            setIsConfirmDeleteOpen(true);
                                         }}
                                         cursor={deletingFigure === id ? "not-allowed" : "pointer"}
                                         pointerEvents={deletingFigure === id ? "none" : "auto"}
@@ -120,6 +132,32 @@ function FigureDisplaySection({ artefactId, figureIds, getArtefactData, isEditin
                     <Text fontWeight={"light"} fontSize={16}>No associated figures</Text>
                 )}
             </Box>
+
+            <Dialog.Root placement="center" open={isConfirmDeleteOpen} onOpenChange={(e) => setIsConfirmDeleteOpen(e.open)}>
+                <Portal>
+                    <Dialog.Backdrop />
+                    <Dialog.Positioner>
+                        <Dialog.Content>
+                            <Dialog.Header>
+                                <Dialog.Title>Update Artefact</Dialog.Title>
+                            </Dialog.Header>
+                            <Dialog.Body>
+                                <Dialog.Description>
+                                    Are you sure you'd like to save these changes? This action cannot be undone.
+                                </Dialog.Description>
+                            </Dialog.Body>
+                            <Dialog.Footer>
+                                <Button variant={'solid'} colorPalette={'red'} onClick={() => setIsConfirmDeleteOpen(false)}>
+                                    Cancel
+                                </Button>
+                                <Button bgColor={'primaryColour'} color={'white'} onClick={() => handleRemoveFigure(selectedFigureId)} loading={saveLoading} loadingText={'Saving...'}>
+                                    Save Changes
+                                </Button>
+                            </Dialog.Footer>
+                        </Dialog.Content>
+                    </Dialog.Positioner>
+                </Portal>
+            </Dialog.Root>
         </Flex>
     );
 }

From e588914d4b74c7854e95fa9c56a7e7b728aec722 Mon Sep 17 00:00:00 2001
From: JunHam <joonjunhan@gmail.com>
Date: Wed, 13 Aug 2025 15:44:10 +0800
Subject: [PATCH 23/28] Added highlighted text

---
 src/components/DataStudio/editorCard.jsx | 110 +++++++++++++++++++++--
 1 file changed, 105 insertions(+), 5 deletions(-)

diff --git a/src/components/DataStudio/editorCard.jsx b/src/components/DataStudio/editorCard.jsx
index 3224e17..dec2e56 100644
--- a/src/components/DataStudio/editorCard.jsx
+++ b/src/components/DataStudio/editorCard.jsx
@@ -1,5 +1,5 @@
-import { Card, Button, Flex, Text, Field, Input, Textarea, Box, Image, SkeletonCircle } from "@chakra-ui/react";
-import { useState, useEffect } from "react";
+import { Card, Button, Flex, Text, Field, Input, Textarea, Box } from "@chakra-ui/react";
+import { useState, useEffect, useRef } from "react";
 import { IoInformationCircleOutline } from "react-icons/io5";
 import { MdOutlineEdit, MdOutlineCancel } from "react-icons/md";
 import MetadataToggle from "./metadataToggle";
@@ -7,9 +7,90 @@ import ArtefactEditorActionBar from "./artefactEditorActionBar";
 import ToastWizard from "../toastWizard";
 import FigureDisplaySection from "./figureDisplay";
 
+// Helper function to render text with labeled entities highlighted
+function renderHighlightedText(text, labels, hoveredIndex, setHoveredIndex) {
+    if (!labels || !Array.isArray(labels)) return <Text>{text}</Text>;
+
+    // Define background colors for each entity type
+    const entityColors = {
+        PERSON: "yellow.200",
+        ORGANIZATION: "blue.200",
+        LOCATION: "green.200",
+        DATE: "orange.200",
+        GPE: "purple.200",
+        EVENT: "pink.200",
+    };
+
+    const chunks = [];
+    let remainingText = text;
+
+    // Iterate through each labeled entity and highlight it
+    labels.forEach(([entity, label], i) => {
+        const index = remainingText.indexOf(entity);
+        if (index === -1) return;
+
+        const before = remainingText.slice(0, index);
+        const matched = remainingText.slice(index, index + entity.length);
+        const after = remainingText.slice(index + entity.length);
+
+        if (before) {
+            chunks.push(<Text as="span" key={`before-${i}`}>{before}</Text>);
+        }
+
+        // Render the matched entity with a tooltip for the label
+        chunks.push(
+            <Box
+                key={`entity-${i}`}
+                as="span"
+                position="relative"
+                onMouseEnter={() => setHoveredIndex(i)}
+                onMouseLeave={() => setHoveredIndex(null)}
+                display="inline-block"
+                bg={entityColors[label] || "gray.200"}
+                borderRadius="md"
+                px={1}
+                mx="0.5px"
+            >
+                {matched}
+                <Box
+                    position="absolute"
+                    top="100%"
+                    left="50%"
+                    transform="translateX(-50%)"
+                    mt={1}
+                    px={2}
+                    py={1}
+                    fontSize="xs"
+                    bg="blackAlpha.700"
+                    color="white"
+                    borderRadius="md"
+                    whiteSpace="nowrap"
+                    zIndex={10}
+                    pointerEvents="none"
+                    opacity={hoveredIndex === i ? 1 : 0}
+                    transition="opacity 0.1s ease"
+                    transitionDelay={hoveredIndex === i ? "0.2s" : "0s"}
+                >
+                    {label}
+                </Box>
+            </Box>
+        );
+
+        remainingText = after;
+    });
+
+    if (remainingText) {
+        chunks.push(<Text as="span" key="remaining">{remainingText}</Text>);
+    }
+
+    return <Box as="div" whiteSpace="pre-wrap">{chunks}</Box>;
+}
+
 function EditorCard({ metadata, artefactId, isMMArtefact, refreshArtefactData }) {
     const [selectedTranscription, setSelectedTranscription] = useState("tradCN");
     const [isEditing, setIsEditing] = useState(false);
+    const [hoveredIndex, setHoveredIndex] = useState(null);
+    const hoverTimeoutRef = useRef(null);
     
     // Change detection states
     const [originalArtefactData, setOriginalArtefactData] = useState({});
@@ -29,6 +110,16 @@ function EditorCard({ metadata, artefactId, isMMArtefact, refreshArtefactData })
         }
     }, [metadata]);
 
+    // Delay tooltip hover effect for entity labels
+    const handleMouseEnter = (index) => {
+        if (hoverTimeoutRef.current) {
+            clearTimeout(hoverTimeoutRef.current);
+        }
+        hoverTimeoutRef.current = setTimeout(() => {
+            setHoveredIndex(index);
+        }, 500);
+    };
+
     // Handle edit/cancel button click
     const handleEditClick = () => {
         setIsEditing(true);
@@ -148,9 +239,18 @@ function EditorCard({ metadata, artefactId, isMMArtefact, refreshArtefactData })
                                         w="100%"
                                         scrollbar={"hidden"}    
                                     >
-                                        <Text fontSize={16} lineHeight={1.6} wordBreak="break-word">
-                                            {artefactData.metadata?.[selectedTranscription] || 'No content available'}
-                                        </Text>
+                                        {selectedTranscription === "english" ? (
+                                            renderHighlightedText(
+                                                artefactData.metadata?.[selectedTranscription] || "",
+                                                artefactData.metadata?.nerLabels,
+                                                hoveredIndex,
+                                                handleMouseEnter
+                                            )
+                                        ) : (
+                                            <Text fontSize={16} lineHeight={1.6} wordBreak="break-word">
+                                                {artefactData.metadata?.[selectedTranscription] || 'No content available'}
+                                            </Text>
+                                        )}
                                     </Box>
                                 )}
                             </Field.Root>

From b80bd3e9b2823d9773f1c8c2b92fc6e872ddab02 Mon Sep 17 00:00:00 2001
From: JunHam <joonjunhan@gmail.com>
Date: Wed, 13 Aug 2025 15:47:06 +0800
Subject: [PATCH 24/28] Removed debug console logs

---
 src/components/DataStudio/artefactEditorActionBar.jsx | 1 -
 src/pages/ArtefactEditor.jsx                          | 1 -
 2 files changed, 2 deletions(-)

diff --git a/src/components/DataStudio/artefactEditorActionBar.jsx b/src/components/DataStudio/artefactEditorActionBar.jsx
index d57167c..bb5d544 100644
--- a/src/components/DataStudio/artefactEditorActionBar.jsx
+++ b/src/components/DataStudio/artefactEditorActionBar.jsx
@@ -124,7 +124,6 @@ function ArtefactEditorActionBar({  artefactData,  originalArtefactData,  setArt
         }
 
         try {
-            console.log(updateDict);
             const response = await server.post('/studio/artefact/update', updateDict);
 
             if (response.data instanceof JSONResponse) {
diff --git a/src/pages/ArtefactEditor.jsx b/src/pages/ArtefactEditor.jsx
index 97074ee..4b0ecd0 100644
--- a/src/pages/ArtefactEditor.jsx
+++ b/src/pages/ArtefactEditor.jsx
@@ -19,7 +19,6 @@ function ArtefactEditor() {
         try {
             const cacheBuster = new Date().getTime();
             const response = await server.get(`/cdn/artefactMetadata/${artID}?cb=${cacheBuster}`);
-            console.log(response.data.raw.data)
 
             if (response.data instanceof JSONResponse) {
                 if (response.data.isErrorStatus()) {

From c4f589d4755a67306a84fe5d0edb2c3724d7b800 Mon Sep 17 00:00:00 2001
From: JunHam <joonjunhan@gmail.com>
Date: Wed, 13 Aug 2025 16:53:06 +0800
Subject: [PATCH 25/28] Minor fixes to the Artefact Editor

---
 src/components/DataStudio/editorCard.jsx     | 18 ------------------
 src/components/DataStudio/figureDisplay.jsx  |  6 +++---
 src/components/DataStudio/metadataToggle.jsx |  1 +
 src/pages/ArtefactEditor.jsx                 |  5 ++---
 4 files changed, 6 insertions(+), 24 deletions(-)

diff --git a/src/components/DataStudio/editorCard.jsx b/src/components/DataStudio/editorCard.jsx
index dec2e56..034d4ba 100644
--- a/src/components/DataStudio/editorCard.jsx
+++ b/src/components/DataStudio/editorCard.jsx
@@ -95,7 +95,6 @@ function EditorCard({ metadata, artefactId, isMMArtefact, refreshArtefactData })
     // Change detection states
     const [originalArtefactData, setOriginalArtefactData] = useState({});
     const [artefactData, setArtefactData] = useState({});
-    const [enterKeyHit, setEnterKeyHit] = useState(false);
 
     // Initialize data when metadata prop changes
     useEffect(() => {
@@ -182,7 +181,6 @@ function EditorCard({ metadata, artefactId, isMMArtefact, refreshArtefactData })
                                             type="text" 
                                             value={artefactData.name || ''} 
                                             onChange={handleNameChange}
-                                            borderColor={artefactData.name !== originalArtefactData.name ? 'darkblue' : 'inherit'}
                                             width="100%"
                                             fontSize={17}
                                         />
@@ -222,11 +220,6 @@ function EditorCard({ metadata, artefactId, isMMArtefact, refreshArtefactData })
                                         lineHeight={1.6}
                                         value={artefactData.metadata?.[selectedTranscription] || ''}
                                         onChange={handleTranscriptionChange}
-                                        borderColor={
-                                            artefactData.metadata?.[selectedTranscription] !== originalArtefactData.metadata?.[selectedTranscription] 
-                                                ? 'darkblue' 
-                                                : 'inherit'
-                                        }
                                         scrollbar={"hidden"}
                                     />
                                 ) : (
@@ -266,7 +259,6 @@ function EditorCard({ metadata, artefactId, isMMArtefact, refreshArtefactData })
                                             type="text" 
                                             value={artefactData.name || ''} 
                                             onChange={handleNameChange}
-                                            borderColor={artefactData.name !== originalArtefactData.name ? 'darkblue' : 'inherit'}
                                             width="100%"
                                             fontSize={17}
                                         />
@@ -300,11 +292,6 @@ function EditorCard({ metadata, artefactId, isMMArtefact, refreshArtefactData })
                                                         caption: e.target.value
                                                     }
                                                 })}
-                                                borderColor={
-                                                    artefactData.metadata?.caption !== originalArtefactData.metadata?.caption 
-                                                        ? 'darkblue' 
-                                                        : 'inherit'
-                                                }
                                                 resize="none"
                                                 fontSize={17}
                                                 lineHeight={1.5}
@@ -340,11 +327,6 @@ function EditorCard({ metadata, artefactId, isMMArtefact, refreshArtefactData })
                                                         addInfo: e.target.value
                                                     }
                                                 })}
-                                                borderColor={
-                                                    artefactData.metadata?.addInfo !== originalArtefactData.metadata?.addInfo 
-                                                        ? 'darkblue' 
-                                                        : 'inherit'
-                                                }
                                                 resize="none"
                                                 fontSize={17}
                                                 minH={200}
diff --git a/src/components/DataStudio/figureDisplay.jsx b/src/components/DataStudio/figureDisplay.jsx
index 7ed498b..1412650 100644
--- a/src/components/DataStudio/figureDisplay.jsx
+++ b/src/components/DataStudio/figureDisplay.jsx
@@ -139,11 +139,11 @@ function FigureDisplaySection({ artefactId, figureIds, getArtefactData, isEditin
                     <Dialog.Positioner>
                         <Dialog.Content>
                             <Dialog.Header>
-                                <Dialog.Title>Update Artefact</Dialog.Title>
+                                <Dialog.Title>Remove Figure</Dialog.Title>
                             </Dialog.Header>
                             <Dialog.Body>
                                 <Dialog.Description>
-                                    Are you sure you'd like to save these changes? This action cannot be undone.
+                                    Are you sure you'd like to remove this figure? This action cannot be undone.
                                 </Dialog.Description>
                             </Dialog.Body>
                             <Dialog.Footer>
@@ -151,7 +151,7 @@ function FigureDisplaySection({ artefactId, figureIds, getArtefactData, isEditin
                                     Cancel
                                 </Button>
                                 <Button bgColor={'primaryColour'} color={'white'} onClick={() => handleRemoveFigure(selectedFigureId)} loading={saveLoading} loadingText={'Saving...'}>
-                                    Save Changes
+                                    Remove
                                 </Button>
                             </Dialog.Footer>
                         </Dialog.Content>
diff --git a/src/components/DataStudio/metadataToggle.jsx b/src/components/DataStudio/metadataToggle.jsx
index dc7927b..416e122 100644
--- a/src/components/DataStudio/metadataToggle.jsx
+++ b/src/components/DataStudio/metadataToggle.jsx
@@ -29,6 +29,7 @@ const MetadataToggle = ({ value, onChange }) => {
             <SegmentGroup.Items
                 display="flex"
                 w="100%"
+                cursor={"pointer"}
                 items={items.map(item => ({
                     value: item.value,
                     label: (
diff --git a/src/pages/ArtefactEditor.jsx b/src/pages/ArtefactEditor.jsx
index 4b0ecd0..5524409 100644
--- a/src/pages/ArtefactEditor.jsx
+++ b/src/pages/ArtefactEditor.jsx
@@ -17,8 +17,7 @@ function ArtefactEditor() {
     // Metadata fetching function
     const fetchMetadata = async () => {
         try {
-            const cacheBuster = new Date().getTime();
-            const response = await server.get(`/cdn/artefactMetadata/${artID}?cb=${cacheBuster}`);
+            const response = await server.get(`/cdn/artefactMetadata/${artID}`);
 
             if (response.data instanceof JSONResponse) {
                 if (response.data.isErrorStatus()) {
@@ -107,7 +106,7 @@ function ArtefactEditor() {
                         src={`${import.meta.env.VITE_BACKEND_URL}/cdn/artefacts/${artID}`}
                         w="100%"
                         h="100%"
-                        objectFit="cover"
+                        objectFit="contain"
                         borderRadius={15}
                     />
                 </Box>

From b832e0a78d2de0c8dfe42e97b04cf031fb1ace8b Mon Sep 17 00:00:00 2001
From: JunHam <joonjunhan@gmail.com>
Date: Wed, 13 Aug 2025 17:25:57 +0800
Subject: [PATCH 26/28] Fixed variable names and removed field.root tags

---
 src/components/DataStudio/editorCard.jsx    | 271 ++++++++++----------
 src/components/DataStudio/figureDisplay.jsx |  10 +-
 src/pages/ArtefactEditor.jsx                |   8 +-
 3 files changed, 141 insertions(+), 148 deletions(-)

diff --git a/src/components/DataStudio/editorCard.jsx b/src/components/DataStudio/editorCard.jsx
index 034d4ba..a1b21c7 100644
--- a/src/components/DataStudio/editorCard.jsx
+++ b/src/components/DataStudio/editorCard.jsx
@@ -86,7 +86,7 @@ function renderHighlightedText(text, labels, hoveredIndex, setHoveredIndex) {
     return <Box as="div" whiteSpace="pre-wrap">{chunks}</Box>;
 }
 
-function EditorCard({ metadata, artefactId, isMMArtefact, refreshArtefactData }) {
+function EditorCard({ metadata, artefactId, refreshArtefactData }) {
     const [selectedTranscription, setSelectedTranscription] = useState("tradCN");
     const [isEditing, setIsEditing] = useState(false);
     const [hoveredIndex, setHoveredIndex] = useState(null);
@@ -150,6 +150,9 @@ function EditorCard({ metadata, artefactId, isMMArtefact, refreshArtefactData })
         });
     }
 
+    const isMMArtefact = (metadata.metadata.english || metadata.metadata.tradCN || metadata.metadata.simplifiedCN || metadata.metadata.summary) ? true : false;
+
+    console.log(isMMArtefact)
     return (
         <>
             <Card.Root h="100%" borderRadius={15}>
@@ -174,28 +177,26 @@ function EditorCard({ metadata, artefactId, isMMArtefact, refreshArtefactData })
                         <>
                             <Flex flexDirection="row" alignItems="center" overflowY={"auto"}>
                                 <Text mr={4}>Name:</Text>
-                                <Field.Root flex="1">
-                                    {isEditing ? (
-                                        <Input 
-                                            placeholder="Artefact name" 
-                                            type="text" 
-                                            value={artefactData.name || ''} 
-                                            onChange={handleNameChange}
-                                            width="100%"
-                                            fontSize={17}
-                                        />
-                                    ) : (
-                                        <Box 
-                                            p={2}
-                                            minH="40px"
-                                            display="flex"
-                                            alignItems="center"
-                                            w="100%"
-                                        >
-                                            <Text fontWeight={"light"} fontSize={16} isTruncated>{artefactData.name || 'No name set'}</Text>
-                                        </Box>
-                                    )}
-                                </Field.Root>
+                                {isEditing ? (
+                                    <Input 
+                                        placeholder="Artefact name" 
+                                        type="text" 
+                                        value={artefactData.name || ''} 
+                                        onChange={handleNameChange}
+                                        width="100%"
+                                        fontSize={17}
+                                    />
+                                ) : (
+                                    <Box 
+                                        p={2}
+                                        minH="40px"
+                                        display="flex"
+                                        alignItems="center"
+                                        w="100%"
+                                    >
+                                        <Text fontWeight={"light"} fontSize={16} isTruncated>{artefactData.name || 'No name set'}</Text>
+                                    </Box>
+                                )}
                             </Flex>
 
                             {/* MM Artefact Specific Fields */}
@@ -207,73 +208,69 @@ function EditorCard({ metadata, artefactId, isMMArtefact, refreshArtefactData })
                                 />
                             </Flex>
 
-                            <Field.Root flex="1" display="flex" flexDirection="column" minHeight="0" overflow="hidden">
+                            {isEditing ? (
+                                <Textarea
+                                    flex="1"
+                                    overflowY="auto"
+                                    p={2}
+                                    borderRadius="md"
+                                    whiteSpace="pre-wrap"
+                                    resize="none"
+                                    fontSize={17}
+                                    lineHeight={1.6}
+                                    value={artefactData.metadata?.[selectedTranscription] || ''}
+                                    onChange={handleTranscriptionChange}
+                                    scrollbar={"hidden"}
+                                />
+                            ) : (
+                                <Box
+                                    flex="1"
+                                    overflowY="auto"
+                                    p={2}
+                                    whiteSpace="pre-wrap"
+                                    cursor="default"
+                                    w="100%"
+                                    scrollbar={"hidden"}    
+                                >
+                                    {selectedTranscription === "english" ? (
+                                        renderHighlightedText(
+                                            artefactData.metadata?.[selectedTranscription] || "",
+                                            artefactData.metadata?.nerLabels,
+                                            hoveredIndex,
+                                            handleMouseEnter
+                                        )
+                                    ) : (
+                                        <Text fontSize={16} lineHeight={1.6} wordBreak="break-word">
+                                            {artefactData.metadata?.[selectedTranscription] || 'No content available'}
+                                        </Text>
+                                    )}
+                                </Box>
+                            )}
+                        </>
+                    ) : (
+                        <Box overflowY={"auto"} scrollbar={"hidden"}>
+                            <Flex flexDirection="row" alignItems="center">
+                                <Text mr={4}>Name:</Text>
                                 {isEditing ? (
-                                    <Textarea
-                                        flex="1"
-                                        overflowY="auto"
-                                        p={2}
-                                        borderRadius="md"
-                                        whiteSpace="pre-wrap"
-                                        resize="none"
+                                    <Input 
+                                        placeholder="Artefact name" 
+                                        type="text" 
+                                        value={artefactData.name || ''} 
+                                        onChange={handleNameChange}
+                                        width="100%"
                                         fontSize={17}
-                                        lineHeight={1.6}
-                                        value={artefactData.metadata?.[selectedTranscription] || ''}
-                                        onChange={handleTranscriptionChange}
-                                        scrollbar={"hidden"}
                                     />
                                 ) : (
-                                    <Box
-                                        flex="1"
-                                        overflowY="auto"
+                                    <Box 
                                         p={2}
-                                        whiteSpace="pre-wrap"
-                                        cursor="default"
+                                        minH="40px"
+                                        display="flex"
+                                        alignItems="center"
                                         w="100%"
-                                        scrollbar={"hidden"}    
                                     >
-                                        {selectedTranscription === "english" ? (
-                                            renderHighlightedText(
-                                                artefactData.metadata?.[selectedTranscription] || "",
-                                                artefactData.metadata?.nerLabels,
-                                                hoveredIndex,
-                                                handleMouseEnter
-                                            )
-                                        ) : (
-                                            <Text fontSize={16} lineHeight={1.6} wordBreak="break-word">
-                                                {artefactData.metadata?.[selectedTranscription] || 'No content available'}
-                                            </Text>
-                                        )}
+                                        <Text fontWeight={"light"} fontSize={16} isTruncated>{artefactData.name || 'No name set'}</Text>
                                     </Box>
                                 )}
-                            </Field.Root>
-                        </>
-                    ) : (
-                        <Box overflowY={"auto"} scrollbar={"hidden"}>
-                            <Flex flexDirection="row" alignItems="center">
-                                <Text mr={4}>Name:</Text>
-                                <Field.Root flex="1">
-                                    {isEditing ? (
-                                        <Input 
-                                            placeholder="Artefact name" 
-                                            type="text" 
-                                            value={artefactData.name || ''} 
-                                            onChange={handleNameChange}
-                                            width="100%"
-                                            fontSize={17}
-                                        />
-                                    ) : (
-                                        <Box 
-                                            p={2}
-                                            minH="40px"
-                                            display="flex"
-                                            alignItems="center"
-                                            w="100%"
-                                        >
-                                            <Text fontWeight={"light"} fontSize={16} isTruncated>{artefactData.name || 'No name set'}</Text>
-                                        </Box>
-                                    )}
-                                </Field.Root>
                             </Flex>
 
                             {/* HF Artefact Specific Fields */}
@@ -281,69 +278,65 @@ function EditorCard({ metadata, artefactId, isMMArtefact, refreshArtefactData })
                                 {/* Caption Field */}
                                 <Flex flexDirection="column">
                                     <Text mb={2}>Caption:</Text>
-                                    <Field.Root>
-                                        {isEditing ? (
-                                            <Textarea
-                                                value={artefactData.metadata?.caption || ''}
-                                                onChange={(e) => setArtefactData({
-                                                    ...artefactData,
-                                                    metadata: {
-                                                        ...artefactData.metadata,
-                                                        caption: e.target.value
-                                                    }
-                                                })}
-                                                resize="none"
-                                                fontSize={17}
-                                                lineHeight={1.5}
-                                                minH={100}
-                                                scrollbar={"hidden"}
-                                            />
-                                        ) : (
-                                            <Box
-                                                w={"100%"}
-                                                overflowY={"auto"}
-                                                scrollbar={"hidden"}
-                                            >
-                                                <Text fontWeight={"light"} fontSize={16} wordBreak="break-word" lineHeight={1.6} numberOfLines={0}>
-                                                    {artefactData.metadata?.caption || 'No caption available'}
-                                                </Text>
-                                            </Box>
-                                        )}
-                                    </Field.Root>
+                                    {isEditing ? (
+                                        <Textarea
+                                            value={artefactData.metadata?.caption || ''}
+                                            onChange={(e) => setArtefactData({
+                                                ...artefactData,
+                                                metadata: {
+                                                    ...artefactData.metadata,
+                                                    caption: e.target.value
+                                                }
+                                            })}
+                                            resize="none"
+                                            fontSize={17}
+                                            lineHeight={1.5}
+                                            minH={100}
+                                            scrollbar={"hidden"}
+                                        />
+                                    ) : (
+                                        <Box
+                                            w={"100%"}
+                                            overflowY={"auto"}
+                                            scrollbar={"hidden"}
+                                        >
+                                            <Text fontWeight={"light"} fontSize={16} wordBreak="break-word" lineHeight={1.6} numberOfLines={0}>
+                                                {artefactData.metadata?.caption || 'No caption available'}
+                                            </Text>
+                                        </Box>
+                                    )}
                                 </Flex>
 
                                 {/* Additional Info Field */}
                                 <Flex flexDirection="column" flex="1">
                                     <Text mb={2}>Additional Info:</Text>
-                                    <Field.Root flex="1">
-                                        {isEditing ? (
-                                            <Textarea
-                                                flex="1"
-                                                value={artefactData.metadata?.addInfo || ''}
-                                                onChange={(e) => setArtefactData({
-                                                    ...artefactData,
-                                                    metadata: {
-                                                        ...artefactData.metadata,
-                                                        addInfo: e.target.value
-                                                    }
-                                                })}
-                                                resize="none"
-                                                fontSize={17}
-                                                minH={200}
-                                                lineHeight={1.5}
-                                                scrollbar={"hidden"}
-                                            />
-                                        ) : (
-                                            <Box
-                                                flex="1"
-                                                w={"100%"}
-                                            >
-                                                <Text fontWeight={"light"} fontSize={16} wordBreak="break-word" lineHeight={1.6} numberOfLines={0}>
-                                                    {artefactData.metadata?.addInfo || 'No additional info available'}
-                                                </Text>
-                                            </Box>
-                                        )}
-                                    </Field.Root>
+                                    {isEditing ? (
+                                        <Textarea
+                                            flex="1"
+                                            value={artefactData.metadata?.addInfo || ''}
+                                            onChange={(e) => setArtefactData({
+                                                ...artefactData,
+                                                metadata: {
+                                                    ...artefactData.metadata,
+                                                    addInfo: e.target.value
+                                                }
+                                            })}
+                                            resize="none"
+                                            fontSize={17}
+                                            minH={200}
+                                            lineHeight={1.5}
+                                            scrollbar={"hidden"}
+                                        />
+                                    ) : (
+                                        <Box
+                                            flex="1"
+                                            w={"100%"}
+                                        >
+                                            <Text fontWeight={"light"} fontSize={16} wordBreak="break-word" lineHeight={1.6} numberOfLines={0}>
+                                                {artefactData.metadata?.addInfo || 'No additional info available'}
+                                            </Text>
+                                        </Box>
+                                    )}
                                 </Flex>
 
                                 <FigureDisplaySection 
diff --git a/src/components/DataStudio/figureDisplay.jsx b/src/components/DataStudio/figureDisplay.jsx
index 1412650..d47d465 100644
--- a/src/components/DataStudio/figureDisplay.jsx
+++ b/src/components/DataStudio/figureDisplay.jsx
@@ -6,13 +6,13 @@ import ToastWizard from '../toastWizard';
 
 function FigureDisplaySection({ artefactId, figureIds, getArtefactData, isEditing }) {
     const [deletingFigure, setDeletingFigure] = useState(null);
-    const [saveLoading, setSaveLoading] = useState(false);
+    const [removing, setRemoving] = useState(false);
     const [isConfirmDeleteOpen, setIsConfirmDeleteOpen] = useState(false);
     const [selectedFigureId, setSelectedFigureId] = useState(null);
 
     const handleRemoveFigure = async (figureID) => {
         setDeletingFigure(figureID);
-        setSaveLoading(true);
+        setRemoving(true);
         
         try {
             const response = await server.post('/studio/artefact/removeFigure', {
@@ -26,7 +26,7 @@ function FigureDisplaySection({ artefactId, figureIds, getArtefactData, isEditin
                 }
 
                 // Success case
-                ToastWizard.standard("success", "Figure removed", response.data.message);
+                ToastWizard.standard("success", "Figure removed");
             } else {
                 throw new Error("Unexpected response format");
             }
@@ -51,7 +51,7 @@ function FigureDisplaySection({ artefactId, figureIds, getArtefactData, isEditin
             );
         } finally {
             setDeletingFigure(null);
-            setSaveLoading(false);
+            setRemoving(false);
             setIsConfirmDeleteOpen(false);
             getArtefactData();
         }
@@ -150,7 +150,7 @@ function FigureDisplaySection({ artefactId, figureIds, getArtefactData, isEditin
                                 <Button variant={'solid'} colorPalette={'red'} onClick={() => setIsConfirmDeleteOpen(false)}>
                                     Cancel
                                 </Button>
-                                <Button bgColor={'primaryColour'} color={'white'} onClick={() => handleRemoveFigure(selectedFigureId)} loading={saveLoading} loadingText={'Saving...'}>
+                                <Button bgColor={'primaryColour'} color={'white'} onClick={() => handleRemoveFigure(selectedFigureId)} loading={removing} loadingText={'Removing...'}>
                                     Remove
                                 </Button>
                             </Dialog.Footer>
diff --git a/src/pages/ArtefactEditor.jsx b/src/pages/ArtefactEditor.jsx
index 5524409..e1f30c5 100644
--- a/src/pages/ArtefactEditor.jsx
+++ b/src/pages/ArtefactEditor.jsx
@@ -36,6 +36,7 @@ function ArtefactEditor() {
             }
         } catch (err) {
             if (err.response && err.response.data instanceof JSONResponse) {
+                console.log("Error response in fetching metadata:", err.response.data.fullMessage());
                 if (err.response.data.userErrorType()) {
                     ToastWizard.standard(
                         "error",
@@ -58,6 +59,7 @@ function ArtefactEditor() {
                     );
                 }
             } else {
+                console.log("Unexpected error in fetching metadata:", err.response.data.fullMessage());
                 ToastWizard.standard(
                     "error",
                     "Connection issue",
@@ -72,7 +74,7 @@ function ArtefactEditor() {
         }
     };
 
-    // Fetch metadata when currentItem changes or modal opens
+    // Fetch metadata if user is loaded
     useEffect(() => {
         if (loaded) {
             fetchMetadata()
@@ -84,8 +86,6 @@ function ArtefactEditor() {
         return <CentredSpinner />
     }
 
-    const isMMArtefact = (metadata.metadata.english || metadata.metadata.tradCN || metadata.metadata.simplifiedCN || metadata.metadata.summary) ? true : false;
-
     return (
         <Box h="80vh">
             <Flex mt={6} flexDirection="row">
@@ -112,7 +112,7 @@ function ArtefactEditor() {
                 </Box>
 
                 <Box width="46%" p={3}>
-                    <EditorCard metadata={metadata} artefactId={artID} isMMArtefact={isMMArtefact} refreshArtefactData={fetchMetadata}/>
+                    <EditorCard metadata={metadata} artefactId={artID} refreshArtefactData={fetchMetadata}/>
                 </Box>
 
                 <Flex width="4%" display="flex" alignItems="center" justifyContent="flex-end">

From ff45a8e354e5078a520df6e6d3ed3fa83ed3c7ad Mon Sep 17 00:00:00 2001
From: JunHam <joonjunhan@gmail.com>
Date: Wed, 13 Aug 2025 17:44:32 +0800
Subject: [PATCH 27/28] Changed validation for artefact editor action bar

---
 .../DataStudio/artefactEditorActionBar.jsx    | 51 +++++--------------
 1 file changed, 12 insertions(+), 39 deletions(-)

diff --git a/src/components/DataStudio/artefactEditorActionBar.jsx b/src/components/DataStudio/artefactEditorActionBar.jsx
index bb5d544..0188d80 100644
--- a/src/components/DataStudio/artefactEditorActionBar.jsx
+++ b/src/components/DataStudio/artefactEditorActionBar.jsx
@@ -13,19 +13,11 @@ function ArtefactEditorActionBar({  artefactData,  originalArtefactData,  setArt
         setChangesMade(!isEqual(artefactData, originalArtefactData) && isEditing);
     }, [artefactData, originalArtefactData, isEditing])
 
-    useEffect(() => {
-        if (changesMade && isEditing) {
-            setIsConfirmSaveOpen(true);
-        }
-    }, []);
-
     // Validation functions
     const validateField = (fieldName, value) => {
         if (value === null || value === undefined) return true;
         
         switch (fieldName) {
-            case 'artefactID':
-                return typeof value === 'string';
             case 'name':
                 return typeof value === 'string' && value.trim().length >= 1 && value.trim().length <= 25;
             case 'tradCN':
@@ -47,36 +39,20 @@ function ArtefactEditorActionBar({  artefactData,  originalArtefactData,  setArt
         const errors = [];
         
         // Common validation
-        if (!validateField('artefactID', updateDict.artefactID)) {
-            errors.push('Artefact ID is required');
-        }
-        
         if (!validateField('name', updateDict.name)) {
             errors.push('Name must be between 1-25 characters');
         }
 
         if (isMMArtefact) {
             // MM-type validation
-            if (updateDict.tradCN !== null && !validateField('tradCN', updateDict.tradCN)) {
-                errors.push('Traditional Chinese must be between 1-1000 characters');
-            }
-            if (updateDict.simplifiedCN !== null && !validateField('simplifiedCN', updateDict.simplifiedCN)) {
-                errors.push('Simplified Chinese must be between 1-1000 characters');
-            }
-            if (updateDict.english !== null && !validateField('english', updateDict.english)) {
-                errors.push('English must be between 1-2000 characters');
-            }
-            if (updateDict.summary !== null && !validateField('summary', updateDict.summary)) {
-                errors.push('Summary must be between 1-2000 characters');
-            }
+            if (updateDict.tradCN && !validateField('tradCN', updateDict.tradCN)) errors.push('Traditional Chinese must be between 1-1000 characters')
+            if (updateDict.simplifiedCN && !validateField('simplifiedCN', updateDict.simplifiedCN)) errors.push('Simplified Chinese must be between 1-1000 characters')
+            if (updateDict.english && !validateField('english', updateDict.english)) errors.push('English must be between 1-2000 characters')
+            if (updateDict.summary && !validateField('summary', updateDict.summary)) errors.push('Summary must be between 1-2000 characters')
         } else {
             // HF-type validation
-            if (updateDict.caption !== null && !validateField('caption', updateDict.caption)) {
-                errors.push('Caption must be between 1-200 characters');
-            }
-            if (updateDict.addInfo !== null && !validateField('addInfo', updateDict.addInfo)) {
-                errors.push('Additional Info must be 3000 characters or less');
-            }
+            if (updateDict.caption && !validateField('caption', updateDict.caption)) errors.push('Caption must be between 1-200 characters')
+            if (updateDict.addInfo && !validateField('addInfo', updateDict.addInfo)) errors.push('Additional Info must be 3000 characters or less')
         }
 
         return errors;
@@ -90,8 +66,6 @@ function ArtefactEditorActionBar({  artefactData,  originalArtefactData,  setArt
     const handleSaveChanges = async () => {
         setSaveLoading(true);
 
-        const currentMetadata = artefactData.metadata || {};
-
         var updateDict = {
             artefactID: artefactId,
             name: artefactData.name || '',
@@ -100,14 +74,14 @@ function ArtefactEditorActionBar({  artefactData,  originalArtefactData,  setArt
         // Add fields based on artefact type
         if (isMMArtefact) {
             // MM-type metadata fields
-            updateDict.tradCN = currentMetadata.tradCN || null;
-            updateDict.simplifiedCN = currentMetadata.simplifiedCN || null;
-            updateDict.english = currentMetadata.english || null;
-            updateDict.summary = currentMetadata.summary || null;
+            if (artefactData.metadata.tradCN != originalArtefactData.tradCN) updateDict.tradCN = artefactData.metadata.tradCN
+            if (artefactData.metadata.simplifiedCN != originalArtefactData.simplifiedCN) updateDict.simplifiedCN = artefactData.metadata.simplifiedCN
+            if (artefactData.metadata.english != originalArtefactData.english) updateDict.english = artefactData.metadata.english
+            if (artefactData.metadata.summary != originalArtefactData.summary) updateDict.summary = artefactData.metadata.summary
         } else {
             // HF-type metadata fields
-            updateDict.caption = currentMetadata.caption || null;
-            updateDict.addInfo = currentMetadata.addInfo || null;
+            if (artefactData.metadata.caption != originalArtefactData.caption) updateDict.caption = artefactData.metadata.caption
+            if (artefactData.metadata.addInfo != originalArtefactData.addInfo) updateDict.addInfo = artefactData.metadata.addInfo
         }
 
         // Validate the update dictionary
@@ -146,7 +120,6 @@ function ArtefactEditorActionBar({  artefactData,  originalArtefactData,  setArt
                     ToastWizard.standard(
                         "warning", 
                         "Artefact partially updated.", 
-                        response.data.message, 
                         5000,
                         true,
                         handleSaveChanges,

From fd85709aa3276513e4a6ec98b4d993a71212b6b1 Mon Sep 17 00:00:00 2001
From: JunHam <joonjunhan@gmail.com>
Date: Wed, 13 Aug 2025 17:48:13 +0800
Subject: [PATCH 28/28] Removed debug console log

---
 src/components/DataStudio/editorCard.jsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/DataStudio/editorCard.jsx b/src/components/DataStudio/editorCard.jsx
index a1b21c7..29dbc71 100644
--- a/src/components/DataStudio/editorCard.jsx
+++ b/src/components/DataStudio/editorCard.jsx
@@ -152,7 +152,6 @@ function EditorCard({ metadata, artefactId, refreshArtefactData }) {
 
     const isMMArtefact = (metadata.metadata.english || metadata.metadata.tradCN || metadata.metadata.simplifiedCN || metadata.metadata.summary) ? true : false;
 
-    console.log(isMMArtefact)
     return (
         <>
             <Card.Root h="100%" borderRadius={15}>