From 68f9bcc22ff938e2b30c9b381ab76cce74772391 Mon Sep 17 00:00:00 2001
From: Prakhar Trivedi <Prakhar896@users.noreply.github.com>
Date: Thu, 14 Aug 2025 15:10:34 +0800
Subject: [PATCH 1/3] created FigureGallery page and FigureItem subcomponent

---
 src/components/DataStudio/FigureItem.jsx | 44 ++++++++++++++++++++++++
 src/components/Sidebar.jsx               |  6 +---
 src/main.jsx                             |  2 ++
 src/pages/FigureGallery.jsx              | 18 ++++++++++
 4 files changed, 65 insertions(+), 5 deletions(-)
 create mode 100644 src/components/DataStudio/FigureItem.jsx
 create mode 100644 src/pages/FigureGallery.jsx

diff --git a/src/components/DataStudio/FigureItem.jsx b/src/components/DataStudio/FigureItem.jsx
new file mode 100644
index 0000000..2712b3c
--- /dev/null
+++ b/src/components/DataStudio/FigureItem.jsx
@@ -0,0 +1,44 @@
+import { Button, CloseButton, Dialog, Field, Image, Input, Portal, Text, VStack } from '@chakra-ui/react'
+import React from 'react'
+
+function FigureItem({ figureID, label }) {
+    return (
+        <Dialog.Root placement={'center'}>
+            <Dialog.Trigger asChild>
+                <VStack display={'flex'} flexDir={'column'} alignItems={'center'} justifyContent={'center'} gap={2} cursor={'pointer'}>
+                    <Image src='https://bit.ly/sage-adebayo' fit={'cover'} boxSize={'100px'} borderRadius={'full'} />
+                    <Text fontSize={'md'}>{label}</Text>
+                </VStack>
+            </Dialog.Trigger>
+            <Portal>
+                <Dialog.Backdrop />
+                <Dialog.Positioner>
+                    <Dialog.Content>
+                        <Dialog.Header>
+                            <Dialog.Title>Update Label</Dialog.Title>
+                        </Dialog.Header>
+                        <Dialog.Body>
+                            <Text mt={'10px'}>Is '{label}' not quite right? Update the label for this auto-detected figure.</Text>
+                            <Field.Root mt={'20px'}>
+                                <Field.Label>Figure Name</Field.Label>
+                                <Input placeholder={'Enter figure\'s name'} />
+                                <Field.HelperText>This change will be reflected across the system.</Field.HelperText>
+                            </Field.Root>
+                        </Dialog.Body>
+                        <Dialog.Footer>
+                            <Dialog.ActionTrigger asChild>
+                                <Button variant="outline" colorPalette={'red'}>Cancel</Button>
+                            </Dialog.ActionTrigger>
+                            <Button variant={'ArchPrimaryAlt'}>Save Changes</Button>
+                        </Dialog.Footer>
+                        <Dialog.CloseTrigger asChild>
+                            <CloseButton size="sm" />
+                        </Dialog.CloseTrigger>
+                    </Dialog.Content>
+                </Dialog.Positioner>
+            </Portal>
+        </Dialog.Root>
+    )
+}
+
+export default FigureItem
\ No newline at end of file
diff --git a/src/components/Sidebar.jsx b/src/components/Sidebar.jsx
index e82df02..fc42c5f 100644
--- a/src/components/Sidebar.jsx
+++ b/src/components/Sidebar.jsx
@@ -42,15 +42,11 @@ function Sidebar({ isOpen, onOpenChange }) {
                                         <GrCatalogOption /> Catalogue Browser
                                     </Button>
 
-                                    <Button variant={isActive('/figures') ? 'solid' : 'outline'} colorPalette={'blue'} w={'100%'} onClick={() => nav('/')} fontSize={'md'}>
+                                    <Button variant={isActive('/figures') ? 'solid' : 'outline'} colorPalette={'blue'} w={'100%'} onClick={() => nav('/figures')} fontSize={'md'}>
                                         <FaPeopleGroup /> Key Figures
                                     </Button>
                                 </>}
 
-                                <Button variant={isActive('/publicGallery') ? 'solid' : 'outline'} colorPalette={'blue'} w={'100%'} onClick={() => nav('/publicGallery')} fontSize={'md'}>
-                                    <MdOutlinePublic /> Public Gallery
-                                </Button>
-
                                 {username && (
                                     <Button variant={isActive('/profile') ? 'solid' : 'outline'} colorPalette={'blue'} w={'100%'} onClick={() => nav('/profile')} fontSize={'md'}>
                                         <CgProfile /> My Profile
diff --git a/src/main.jsx b/src/main.jsx
index 4f79425..fe57bc3 100644
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -27,6 +27,7 @@ import Profile from './pages/Profile.jsx';
 import AdminConsole from './pages/AdminConsole.jsx';
 import UserManagement from './pages/UserManagement.jsx';
 import SuperuserLayout from './SuperuserLayout.jsx';
+import FigureGallery from './pages/FigureGallery.jsx';
 
 const store = configureStore({
     reducer: {
@@ -57,6 +58,7 @@ createRoot(document.getElementById('root')).render(
                             <Route element={<ProtectedLayout />}>
                                 <Route path='import' element={<DataImport />} />
                                 <Route path='profile' element={<Profile />} />
+                                <Route path='figures' element={<FigureGallery />} />
 
                                 <Route path='studio'>
                                     <Route path=':colID' element={<GroupView  />} />
diff --git a/src/pages/FigureGallery.jsx b/src/pages/FigureGallery.jsx
new file mode 100644
index 0000000..18d91bd
--- /dev/null
+++ b/src/pages/FigureGallery.jsx
@@ -0,0 +1,18 @@
+import { Avatar, Box, HStack, Image, SimpleGrid, Text } from '@chakra-ui/react'
+import React from 'react'
+import FigureItem from '../components/DataStudio/FigureItem'
+
+function FigureGallery() {
+    return (
+        <Box p={'20px'}>
+            <Text fontSize={'2xl'} fontWeight={'bold'}>Key Figures</Text>
+            <HStack mt={'30px'} display={'flex'} flexDir={'row'} alignItems={'center'} justifyContent={'flex-start'} flexWrap={'wrap'} gap={'50px'}>
+                <FigureItem figureID={1} label={'Figure 1'} />
+                <FigureItem figureID={2} label={'Figure 2'} />
+                <FigureItem figureID={3} label={'Figure 3'} />
+            </HStack>
+        </Box>
+    )
+}
+
+export default FigureGallery
\ No newline at end of file

From 64c5a4bc2ee85b6ff9135b4afddb7fa01553e778 Mon Sep 17 00:00:00 2001
From: Prakhar Trivedi <Prakhar896@users.noreply.github.com>
Date: Thu, 14 Aug 2025 15:21:59 +0800
Subject: [PATCH 2/3] completed retrieval of figures data and rendering images

---
 src/components/DataStudio/FigureItem.jsx |  4 +-
 src/pages/FigureGallery.jsx              | 71 ++++++++++++++++++++++--
 2 files changed, 68 insertions(+), 7 deletions(-)

diff --git a/src/components/DataStudio/FigureItem.jsx b/src/components/DataStudio/FigureItem.jsx
index 2712b3c..27b40ec 100644
--- a/src/components/DataStudio/FigureItem.jsx
+++ b/src/components/DataStudio/FigureItem.jsx
@@ -6,8 +6,8 @@ function FigureItem({ figureID, label }) {
         <Dialog.Root placement={'center'}>
             <Dialog.Trigger asChild>
                 <VStack display={'flex'} flexDir={'column'} alignItems={'center'} justifyContent={'center'} gap={2} cursor={'pointer'}>
-                    <Image src='https://bit.ly/sage-adebayo' fit={'cover'} boxSize={'100px'} borderRadius={'full'} />
-                    <Text fontSize={'md'}>{label}</Text>
+                    <Image src={`${import.meta.env.VITE_BACKEND_URL}/cdn/people/${figureID}`} fit={'cover'} boxSize={'100px'} borderRadius={'full'} />
+                    <Text fontSize={label.length > 15 ? 'xs': 'md'}>{label}</Text>
                 </VStack>
             </Dialog.Trigger>
             <Portal>
diff --git a/src/pages/FigureGallery.jsx b/src/pages/FigureGallery.jsx
index 18d91bd..5ca41de 100644
--- a/src/pages/FigureGallery.jsx
+++ b/src/pages/FigureGallery.jsx
@@ -1,15 +1,76 @@
-import { Avatar, Box, HStack, Image, SimpleGrid, Text } from '@chakra-ui/react'
-import React from 'react'
+import { Avatar, Box, HStack, Image, SimpleGrid, SkeletonCircle, SkeletonText, Text, VStack } from '@chakra-ui/react'
+import React, { useEffect, useState } from 'react'
 import FigureItem from '../components/DataStudio/FigureItem'
+import server, { JSONResponse } from '../networking';
+import ToastWizard from '../components/toastWizard';
+import { useSelector } from 'react-redux';
 
 function FigureGallery() {
+    const [figures, setFigures] = useState([]);
+    const [retrieving, setRetrieving] = useState(true);
+
+    const { loaded } = useSelector(state => state.auth);
+
+    const retrieveFigureInfo = async () => {
+        setRetrieving(true);
+
+        try {
+            const response = await server.get('/cdn/figures')
+
+            if (response.data instanceof JSONResponse) {
+                if (response.data.isErrorStatus()) {
+                    const errObject = {
+                        response: {
+                            data: response.data
+                        }
+                    };
+                    throw new Error(errObject);
+                }
+
+                // Success case
+                setFigures(response.data.raw.data);
+            } else {
+                throw new Error("Unexpected response format");
+            }
+        } catch (err) {
+            if (err.response && err.response.data instanceof JSONResponse) {
+                console.log("Error response in figures data retrieval request:", err.response.data.fullMessage());
+                if (err.response.data.userErrorType()) {
+                    ToastWizard.standard("error", "Couldn't retrieve figure data.", err.response.data.message);
+                } else {
+                    ToastWizard.standard("error", "Something went wrong", "Couldn't retrieve key figures information. Please try again.")
+                }
+            } else {
+                console.log("Unexpected error in figures data retrieval request:", err);
+                ToastWizard.standard("error", "Something went wrong", "Couldn't retrieve key figures information. Please try again.");
+            }
+        } finally {
+            setRetrieving(false);
+        }
+    }
+
+    useEffect(() => {
+        if (loaded) {
+            retrieveFigureInfo();
+        }
+    }, [loaded]);
+
     return (
         <Box p={'20px'}>
             <Text fontSize={'2xl'} fontWeight={'bold'}>Key Figures</Text>
             <HStack mt={'30px'} display={'flex'} flexDir={'row'} alignItems={'center'} justifyContent={'flex-start'} flexWrap={'wrap'} gap={'50px'}>
-                <FigureItem figureID={1} label={'Figure 1'} />
-                <FigureItem figureID={2} label={'Figure 2'} />
-                <FigureItem figureID={3} label={'Figure 3'} />
+                {retrieving ? <>
+                    {Array.from({ length: 5 }).map((_, index) => {
+                        return <VStack>
+                            <SkeletonCircle key={index} size={'100px'} />
+                            <SkeletonText width={'100px'} noOfLines={1} />
+                        </VStack>
+                    })}
+                </>: <>
+                    {figures.length > 0 ? figures.map((figure, index) => {
+                        return <FigureItem key={index} figureID={figure.id} label={figure.label} />
+                    }) : <Text fontSize={'md'}>No figures found.</Text>}
+                </>}
             </HStack>
         </Box>
     )

From 3f425aef41746c91445058f8d8be3a9a12b8456a Mon Sep 17 00:00:00 2001
From: Prakhar Trivedi <Prakhar896@users.noreply.github.com>
Date: Thu, 14 Aug 2025 15:30:43 +0800
Subject: [PATCH 3/3] figure gallery and figure item complete

---
 src/components/DataStudio/FigureItem.jsx | 82 +++++++++++++++++++++---
 src/pages/FigureGallery.jsx              |  4 +-
 2 files changed, 76 insertions(+), 10 deletions(-)

diff --git a/src/components/DataStudio/FigureItem.jsx b/src/components/DataStudio/FigureItem.jsx
index 27b40ec..0b070d9 100644
--- a/src/components/DataStudio/FigureItem.jsx
+++ b/src/components/DataStudio/FigureItem.jsx
@@ -1,13 +1,79 @@
 import { Button, CloseButton, Dialog, Field, Image, Input, Portal, Text, VStack } from '@chakra-ui/react'
-import React from 'react'
+import { useState } from 'react'
+import ToastWizard from '../toastWizard';
+import server, { JSONResponse } from '../../networking';
+
+function FigureItem({ figureID, label, reloadInfo }) {
+    const [dialogOpen, setDialogOpen] = useState(false);
+    const [updatingLabel, setUpdatingLabel] = useState(false);
+    const [newLabel, setNewLabel] = useState(label);
+
+    const handleUpdateLabel = async () => {
+        if (!newLabel) {
+            ToastWizard.standard("error", "All fields are required.")
+            return;
+        }
+        if (newLabel === label) {
+            ToastWizard.standard("error", "Please enter a different label to update.")
+            return;
+        }
+
+        const newValue = newLabel;
+
+        setUpdatingLabel(true);
+
+        try {
+            const response = await server.post('/gallery/updateFigure', {
+                figureID: figureID,
+                label: newValue
+            });
+
+            if (response.data instanceof JSONResponse) {
+                if (response.data.isErrorStatus()) {
+                    const errObject = {
+                        response: {
+                            data: response.data
+                        }
+                    };
+                    throw new Error(errObject);
+                }
+
+                // Success case
+                setDialogOpen(false);
+                reloadInfo();
+                ToastWizard.standard("success", "Label updated", `The figure's label has been changed to '${newValue}'.`);
+            } else {
+                throw new Error("Unexpected response format");
+            }
+        } catch (err) {
+            if (err.response && err.response.data instanceof JSONResponse) {
+                console.log("Error response in figure label update request:", err.response.data.fullMessage());
+                if (err.response.data.userErrorType()) {
+                    ToastWizard.standard("error", "Label update failed.", err.response.data.message);
+                } else {
+                    ToastWizard.standard("error", "Something went wrong", "Couldn't update the figure's label. Please try again.");
+                }
+            } else {
+                console.log("Unexpected error in figure label update request:", err);
+                ToastWizard.standard("error", "Something went wrong", "Couldn't update the figure's label. Please try again.");
+            }
+        } finally {
+            setUpdatingLabel(false);
+        }
+    }
+    
+    const handleEnterKey = (e) => {
+        if (e.key === 'Enter') {
+            handleUpdateLabel();
+        }
+    }
 
-function FigureItem({ figureID, label }) {
     return (
-        <Dialog.Root placement={'center'}>
+        <Dialog.Root placement={'center'} open={dialogOpen} onOpenChange={(e) => setDialogOpen(e.open)}>
             <Dialog.Trigger asChild>
                 <VStack display={'flex'} flexDir={'column'} alignItems={'center'} justifyContent={'center'} gap={2} cursor={'pointer'}>
                     <Image src={`${import.meta.env.VITE_BACKEND_URL}/cdn/people/${figureID}`} fit={'cover'} boxSize={'100px'} borderRadius={'full'} />
-                    <Text fontSize={label.length > 15 ? 'xs': 'md'}>{label}</Text>
+                    <Text fontSize={label.length > 15 ? 'xs' : 'md'}>{label}</Text>
                 </VStack>
             </Dialog.Trigger>
             <Portal>
@@ -21,18 +87,18 @@ function FigureItem({ figureID, label }) {
                             <Text mt={'10px'}>Is '{label}' not quite right? Update the label for this auto-detected figure.</Text>
                             <Field.Root mt={'20px'}>
                                 <Field.Label>Figure Name</Field.Label>
-                                <Input placeholder={'Enter figure\'s name'} />
+                                <Input placeholder={'Enter figure\'s name'} value={newLabel} onChange={(e) => setNewLabel(e.target.value)} onKeyDown={handleEnterKey} />
                                 <Field.HelperText>This change will be reflected across the system.</Field.HelperText>
                             </Field.Root>
                         </Dialog.Body>
                         <Dialog.Footer>
                             <Dialog.ActionTrigger asChild>
-                                <Button variant="outline" colorPalette={'red'}>Cancel</Button>
+                                <Button variant="outline" colorPalette={'red'} disabled={updatingLabel}>Cancel</Button>
                             </Dialog.ActionTrigger>
-                            <Button variant={'ArchPrimaryAlt'}>Save Changes</Button>
+                            <Button variant={'ArchPrimaryAlt'} onClick={handleUpdateLabel} loading={updatingLabel} loadingText={"Updating..."}>Update</Button>
                         </Dialog.Footer>
                         <Dialog.CloseTrigger asChild>
-                            <CloseButton size="sm" />
+                            <CloseButton disabled={updatingLabel} size="sm" />
                         </Dialog.CloseTrigger>
                     </Dialog.Content>
                 </Dialog.Positioner>
diff --git a/src/pages/FigureGallery.jsx b/src/pages/FigureGallery.jsx
index 5ca41de..04daf9c 100644
--- a/src/pages/FigureGallery.jsx
+++ b/src/pages/FigureGallery.jsx
@@ -1,5 +1,5 @@
 import { Avatar, Box, HStack, Image, SimpleGrid, SkeletonCircle, SkeletonText, Text, VStack } from '@chakra-ui/react'
-import React, { useEffect, useState } from 'react'
+import { useEffect, useState } from 'react'
 import FigureItem from '../components/DataStudio/FigureItem'
 import server, { JSONResponse } from '../networking';
 import ToastWizard from '../components/toastWizard';
@@ -68,7 +68,7 @@ function FigureGallery() {
                     })}
                 </>: <>
                     {figures.length > 0 ? figures.map((figure, index) => {
-                        return <FigureItem key={index} figureID={figure.id} label={figure.label} />
+                        return <FigureItem key={index} figureID={figure.id} label={figure.label} reloadInfo={retrieveFigureInfo} />
                     }) : <Text fontSize={'md'}>No figures found.</Text>}
                 </>}
             </HStack>