Adds survey management and user access control to Aladin

Implements survey selection and management features alongside user group access control for surveys and catalogs.

Introduces a new context for handling surveys and integrates a control panel for selecting and displaying survey information.

Enhances user experience by providing feedback on the current survey selection while ensuring that only authorized users can access specific surveys and catalogs.

Improves code organization by encapsulating survey-related logic within dedicated components.

Relates to user feedback on survey accessibility and usability.

Closed #71

Author: glaubervila

frontend/components/Aladin/AladinContext.js

@@ -8,13 +8,13 @@ import { createContext, useContext } from 'react';
 export const AladinContext = createContext({
   containerRef: null,
   aladinRef: null,
+  surveysRef: {},
   catalogsRef: {},
   isReady: false,
+  currentSurveyId: null,
   setFoV: () => { },
   setTarget: () => { },
-  setSurvey: () => { },
-  createSurvey: () => { },
-  addCatalog: () => { },
+  setImageSurvey: () => { },
   toggleCatalogVisibility: () => { },
   addMarker: () => { },
 });

frontend/components/Aladin/CatalogControls/index.js

@@ -21,7 +21,6 @@ export default function CatalogControls() {
         {catalogsRef.current && Object.keys(catalogsRef.current).length > 0 && (
           Object.keys(catalogsRef.current).map(key => {
             const catalog = catalogsRef.current[key];
-            console.log(catalog)
             return (
               <CatalogListItem key={`catalog-list-item-${catalog.name.replace(/ /g, "-")}`} catalog={catalog} />
             )

frontend/components/Aladin/Controls.js

@@ -1,30 +1,16 @@
 'use client';
 
-import { useAladinContext } from './AladinContext';
-import { Button, Typography } from '@mui/material';
-import Box from '@mui/material/Box';
 import Stack from '@mui/material/Stack';
+import Divider from '@mui/material/Divider';
+import SurveyControls from '@/components/Aladin/SurveyControls';
 import CatalogControls from '@/components/Aladin/CatalogControls';
 
 export default function Controls() {
-    const { isReady, setFoV, setTarget, addMarker } = useAladinContext();
-
-    const handleGotoM42 = () => {
-        setTarget('M42');
-        setFoV(1.0);
-        addMarker(83.82208, -5.39111, { popupTitle: 'Orion Nebula' });
-    };
 
     return (
         <Stack spacing={2} m={2}>
-            <Typography variant="h6">Surveys</Typography>
-            <Button variant="contained" disabled={!isReady} onClick={handleGotoM42}>
-                DES DR2 IRG
-            </Button>
-            <Button variant="contained" disabled={!isReady} onClick={handleGotoM42}>
-                LSST DP0.2 IRG
-            </Button>
-            <hr></hr>
+            <SurveyControls />
+            <Divider />
             <CatalogControls />
         </Stack>
 

frontend/components/Aladin/SurveyControls/SurveyListItem.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import PropTypes from 'prop-types'
+import ListItem from '@mui/material/ListItem';
+import ListItemButton from '@mui/material/ListItemButton';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import ListItemText from '@mui/material/ListItemText';
+import CheckIcon from '@mui/icons-material/Check';
+
+import { useAladinContext } from '@/components/Aladin/AladinContext';
+
+export default function SurveyListItem({ survey }) {
+  const { setImageSurvey, currentSurveyId } = useAladinContext();
+
+  const handleToggle = (event) => {
+    setImageSurvey(survey.id);
+  };
+
+  return (
+    <React.Fragment>
+      <ListItem
+        key={`survey-option-${survey.id}`}
+        disablePadding
+      >
+        <ListItemButton
+          selected={currentSurveyId === survey.id}
+          onClick={handleToggle}
+        >
+          <ListItemIcon>
+            {currentSurveyId === survey.id && (<CheckIcon />)}
+          </ListItemIcon>
+          <ListItemText primary={survey.name} />
+        </ListItemButton>
+      </ListItem>
+
+    </React.Fragment>
+  )
+}
+
+SurveyListItem.propTypes = {
+  survey: PropTypes.object.isRequired,
+}

frontend/components/Aladin/SurveyControls/index.js

@@ -0,0 +1,34 @@
+'use client';
+
+import { useAladinContext } from '@/components/Aladin/AladinContext';
+import { Typography } from '@mui/material';
+import Stack from '@mui/material/Stack';
+import List from '@mui/material/List';
+import SurveyListItem from './SurveyListItem';
+
+export default function SurveyControls() {
+  const { surveysRef } = useAladinContext();
+
+  return (
+    <Stack spacing={2}>
+      <Typography variant="h6">Surveys</Typography>
+      <List
+        sx={{
+          width: '100%',
+        }}
+        component="nav"
+      >
+        {surveysRef.current && Object.keys(surveysRef.current).length > 0 && (
+          Object.keys(surveysRef.current).map(key => {
+            const survey = surveysRef.current[key];
+            console.log(survey)
+            return (
+              <SurveyListItem key={`survey-list-item-${survey.id}`} survey={survey} />
+            )
+          }))
+        }
+      </List>
+    </Stack>
+
+  );
+}

frontend/components/Aladin/index.js

@@ -17,6 +17,7 @@ export default function Aladin({ userGroups = [] }) {
         showCooGridControl: true,
         showContextMenu: true,
         showSettingsControl: true,
+        reticleColor: '#41b332'
       }}
       userGroups={userGroups}
     >
@@ -30,7 +31,6 @@ export default function Aladin({ userGroups = [] }) {
         </div>
         <div style={{
           width: '300px',
-          // padding: '1rem', 
           background: '#eee'
         }}>
           <Controls />