Added Artefact Editor

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");
             }
@@ -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>

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} />

src/components/DataStudio/artefactEditorActionBar.jsx

@@ -0,0 +1,222 @@
+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, artefactId, isEditing, setIsEditing, isMMArtefact }) {
+    const [changesMade, setChangesMade] = useState(false);
+    const [isConfirmSaveOpen, setIsConfirmSaveOpen] = useState(false);
+    const [saveLoading, setSaveLoading] = useState(false);
+
+    useEffect(() => {
+        setChangesMade(!isEqual(artefactData, originalArtefactData) && isEditing);
+    }, [artefactData, originalArtefactData, isEditing])
+
+    // Validation functions
+    const validateField = (fieldName, value) => {
+        if (value === null || value === undefined) return true;
+
+        switch (fieldName) {
+            case 'name':
+                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':
+            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('name', updateDict.name)) {
+            errors.push('Name must be between 1-25 characters');
+        }
+
+        if (isMMArtefact) {
+            // MM-type validation
+            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 && !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;
+    };
+
+    const handleCancelChanges = () => {
+        setArtefactData(originalArtefactData);
+        ToastWizard.standard("warning", "Changes Reset", "All changes reverted.", 3000);
+    }
+
+    const handleSaveChanges = async () => {
+        setSaveLoading(true);
+
+        var updateDict = {
+            artefactID: artefactId,
+            name: artefactData.name || '',
+        };
+
+        // Add fields based on artefact type
+        if (isMMArtefact) {
+            // MM-type metadata fields
+            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
+            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
+        const validationErrors = validateUpdateDict(updateDict);
+        if (validationErrors.length > 0) {
+            setSaveLoading(false);
+            ToastWizard.standard(
+                "error", 
+                "Validation Error", 
+                validationErrors.join('. '), 
+                5000
+            );
+            return;
+        }
+
+        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)
+                getArtefactData();
+                setIsConfirmSaveOpen(false);
+                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.", 
+                        5000,
+                        true,
+                        handleSaveChanges,
+                        "Retry"
+                    );
+                } 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,
+                        true,
+                        handleSaveChanges,
+                        "Retry"
+                    );
+                } else {
+                    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,
+                    true,
+                    handleSaveChanges,
+                    "Retry"
+                );
+            }
+        }
+
+        setSaveLoading(false);
+    }
+
+    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