Canadian-Geospatial-Platform · cphelefu · Sep 17, 2024 · Sep 17, 2024 · Sep 17, 2024
diff --git a/index.html b/index.html
@@ -5,6 +5,7 @@
     <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <script src="cgpv-main.js" ></script>
+    <script src="https://canadian-geospatial-platform.github.io/geoview/public/cgpv-main.js"></script>
     <title>GeoView Demo Page</title>
   </head>
   <body>

diff --git a/src/components/GeoViewMap.tsx b/src/components/GeoViewMap.tsx
@@ -10,17 +10,18 @@ import ArrowBackIcon from '@mui/icons-material/ArrowBack';
 import { useNavigate } from 'react-router-dom';
 import { CodeSnippet } from './CodeSnippet';
 import { EventsLog } from './EventsLog';
+import { LegendLayerStatusTable } from './LegendLayerStatusTable';
 
 interface GeoViewMapProps {
   showConfigEditor?: boolean;
   showEventsLog?: boolean;
+  showLegendLayerStatus?: boolean;
   config: string | object;
   configIsFilePath?: boolean;
   codeSnippet?: string;
   children?: React.ReactNode;
   top?: React.ReactNode;
   bottom?: React.ReactNode;
-
 }
 
 function GeoViewMap(props: GeoViewMapProps) {
@@ -35,6 +36,7 @@ function GeoViewMap(props: GeoViewMapProps) {
   const {
     showConfigEditor = true,
     showEventsLog = true,
+    showLegendLayerStatus = true,
     config = DEFAULT_CONFIG,
     configIsFilePath,
     codeSnippet,
@@ -86,6 +88,7 @@ function GeoViewMap(props: GeoViewMapProps) {
             {showConfigEditor && <Tab label="Config Editor" value="config-editor" />}
             {codeSnippet && <Tab label="Code Snippet" value="code-snippet" />}
             {showEventsLog && <Tab label="Events Log" value="events-log" />}
+            {showLegendLayerStatus && <Tab label="Legend Layer Status" value="legend-layer-status" />}
           </Tabs>
         </Box>
         <Box sx={{ display: selectedTab === 'map' ? 'unset' : 'none' }}>
@@ -104,6 +107,11 @@ function GeoViewMap(props: GeoViewMapProps) {
           <EventsLog />
         </Box>
         }
+        {showLegendLayerStatus && <Box sx={{ marginTop: '20px', display: selectedTab === 'legend-layer-status' ? 'unset' : 'none' }}>
+          <LegendLayerStatusTable />
+        </Box>
+        }
+
       </Box>
     );
   };

diff --git a/src/components/LegendLayerStatusTable.tsx b/src/components/LegendLayerStatusTable.tsx
@@ -0,0 +1,47 @@
+import { useContext } from 'react';
+import { CGPVContext } from '../providers/cgpvContextProvider/CGPVContextProvider';
+import { Box, Paper, Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from '@mui/material';
+
+
+export function LegendLayerStatusTable() {
+    const cgpvContext = useContext(CGPVContext);
+
+    if (!cgpvContext) {
+      throw new Error('CGPVContent must be used within a CGPVProvider');
+    }
+
+    const { legendLayerStatusList } = cgpvContext;
+
+
+    return (
+        <Box sx={{ p: 2 }}>
+          <h2>Legend Layer Status</h2>
+
+          <TableContainer component={Paper}>
+            <Table sx={{ minWidth: 550 }} aria-label="simple table">
+              <TableHead sx={{ fontWeight: 'bold' }}>
+                <TableRow>
+                  <TableCell>Layer Name</TableCell>
+                  <TableCell>Status</TableCell>
+                </TableRow>
+              </TableHead>
+              <TableBody>
+                {legendLayerStatusList.map((row, index) => (
+                  <TableRow
+                    key={`$layer_index_${index}`}
+                    sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
+                  >
+                    <TableCell component="th" scope="row">
+                      {row.layerName}
+                    </TableCell>
+                    <TableCell>{row?.status}</TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </TableContainer>
+        </Box>
+      );
+
+
+};
diff --git a/src/components/SplitButton.tsx b/src/components/SplitButton.tsx
@@ -28,7 +28,7 @@ export default function SplitButton({ options, label, title, onClick }: SplitBut
     }
   };
 
-  const handleMenuItemClick = (event: React.MouseEvent<HTMLLIElement, MouseEvent>, index: number) => {
+  const handleMenuItemClick = (index: number) => {
     setSelectedIndex(index);
     setOpen(false);
   };
@@ -84,7 +84,7 @@ export default function SplitButton({ options, label, title, onClick }: SplitBut
               <ClickAwayListener onClickAway={handleClose}>
                 <MenuList id="split-button-menu" autoFocusItem>
                   {options.map((option, index) => (
-                    <MenuItem key={option} selected={index === selectedIndex} onClick={(event) => handleMenuItemClick(event, index)}>
+                    <MenuItem key={option} selected={index === selectedIndex} onClick={() => handleMenuItemClick(index)}>
                       {option}
                     </MenuItem>
                   ))}

diff --git a/src/providers/cgpvContextProvider/cgpvHook.ts b/src/providers/cgpvContextProvider/cgpvHook.ts
@@ -6,7 +6,7 @@ import {
   DEFAULT_MAP_WIDTH,
 } from '../../constants';
 import _ from 'lodash';
-import { EventListItemType } from '../../types';
+import { EventListItemType, LegendLayerStatus } from '@/types';
 
 export interface ICgpvHook {
   mapId: string;
@@ -20,6 +20,7 @@ export interface ICgpvHook {
   mapHeight: number;
   setMapHeight: React.Dispatch<React.SetStateAction<number>>;
   eventsList: EventListItemType[];
+  legendLayerStatusList: LegendLayerStatus[];
 
   initializeMap: (mapId: string, config: string | object, configIsFilePath?: boolean) => void;
   handleRemoveMap: () => string;
@@ -42,6 +43,7 @@ export function useCgpvHook(): ICgpvHook {
   const [isInitialized, setIsInitialized] = useState<boolean>(false);
   const [isLoading, setIsLoading] = useState<boolean>(false);
   const [eventsList, setEventsList] = useState<EventListItemType[]>([]);
+  const [legendLayerStatusList, setLegendLayerStatusList] = useState<LegendLayerStatus[]>([]);
 
 
   const addEventToList = (eventName: string, description: string) => {
@@ -50,8 +52,19 @@ export function useCgpvHook(): ICgpvHook {
     });
   };
 
-  const registerEventListeners = () => {
+  const registerEventListeners = (mapId: string) => {
     // Events=====================================================================================================================
+    console.log('registering events');
+
+    cgpv.api.maps[mapId].layer.legendsLayerSet.onLayerSetUpdated((sender: any, payload: any) => {
+      const { resultSet } = payload;
+      const resultArr: LegendLayerStatus[] = Object.keys(resultSet).map((key) => {
+        return { layerName: resultSet[key]?.layerName, status: resultSet[key]?.layerStatus };
+      });
+      console.log('resultArr', resultArr);
+      setLegendLayerStatusList(resultArr);
+    });
+
     // listen to layer added event
     cgpv.api.maps[mapId].layer.onLayerAdded((sender: any, payload: any) => {
       addEventToList('onLayerAdded', `layer ${payload.layerPath} added`);
@@ -168,7 +181,7 @@ export function useCgpvHook(): ICgpvHook {
       handleCreateMap(mapId, configJson);
       cgpv.init(() => {
         // write some code ...
-        registerEventListeners();
+        registerEventListeners(mapId);
         setIsLoading(false);
       });
     }
@@ -209,6 +222,8 @@ export function useCgpvHook(): ICgpvHook {
     cgpv.api.createMapFromConfig(theMapId, JSON.stringify(data));
     cgpv.init(() => {
       // write some code ...
+      console.log('map created----------------------------------------');
+      registerEventListeners(theMapId);
     });
     setConfigJson({ ...data });
     setMapId(theMapId);
@@ -304,6 +319,7 @@ export function useCgpvHook(): ICgpvHook {
     isLoading,
     applyWidthHeight,
     eventsList,
+    legendLayerStatusList,
 
     initializeMap,
     handleRemoveMap,

diff --git a/src/types.ts b/src/types.ts
@@ -10,4 +10,10 @@ export type EventListItemType = {
   eventName: string;
   description: string;
   status?: string;
+}
+
+
+export type LegendLayerStatus = {
+  layerName: string;
+  status: string;
 }
diff --git a/tsconfig.app.json b/tsconfig.app.json
@@ -1,8 +1,8 @@
 {
   "compilerOptions": {
-    "target": "ES2020",
+    "target": "ES2021",
     "useDefineForClassFields": true,
-    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "lib": ["ES2021", "DOM", "DOM.Iterable"],
     "module": "ESNext",
     "skipLibCheck": true,
 
@@ -17,7 +17,7 @@
     /* Linting */
     "strict": true,
     "noUnusedLocals": true,
-    "noUnusedParameters": true,
+    "noUnusedParameters": false,
     "noFallthroughCasesInSwitch": true,
 
     "paths": {