pushing up

package.json

@@ -17,6 +17,7 @@
     "@mui/material": "^5.15.11",
     "@mui/system": "^5.15.11",
     "@mui/x-date-pickers": "^6.19.6",
+    "@tanstack/react-query": "^5.51.11",
     "dayjs": "^1.11.10",
     "esri-leaflet": "^3.0.12",
     "esri-leaflet-vector": "^4.2.3",
@@ -27,7 +28,8 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-esri-leaflet": "^2.0.1",
-    "react-leaflet": "^4.2.1"
+    "react-leaflet": "^4.2.1",
+    "react-xml-parser": "^1.1.8"
   },
   "devDependencies": {
     "@types/react": "^18.2.56",

src/App.jsx

@@ -4,14 +4,17 @@ import Box from '@mui/material/Box';
 import Grid from '@mui/material/Unstable_Grid2'; // Grid version 2
 import PlayArrowIcon from '@mui/icons-material/PlayArrow';
 import PauseIcon from '@mui/icons-material/Pause';
+import {
+  useQuery,
+} from '@tanstack/react-query'
+import XMLParser from 'react-xml-parser';
 
 // internal imports
 import BasicSelect from './components/BasicSelect';
 import BasicButton from './components/BasicButton';
 import BasicDatePicker from './components/BasicDatePicker';
 import DateSlider from './components/DateSlider';
 import ReactLeafletMap from './components/ReactLeafletMap';
-import { findMostRecentLayerDate } from './utils';
 import { config } from './config';
 
 function App() {
@@ -23,21 +26,59 @@ function App() {
   const [playButton, setPlayButton] = React.useState(false);
   const [playSpeed, setPlaySpeed] = React.useState(config.playSpeeds['1x']);
   const [selectedDate, setSelectedDate] = React.useState('20231226'); // TODO: Make this not hardcoded
-  const hardCodedDates = config.nonLeapYearDays.map(date => '2023' + date);
+  const [availableLayers, setAvailableLayers] = React.useState([{value: 1}]);
 
   const onSelectedDateChange = (event) => {
     console.log(event)
   }
 
+  const handleChangeProductChange = (event) => {
+    const newLayer = event.target.value;
+    setChangeProduct(newLayer);
+    const layers = data?.getElementsByTagName('Layer');
+    const queryableLayers = layers.filter(layer => layer.attributes.queryable === "1");
+    const allLayers = [];
+    const layerConfig = config.wmsLayers.find(layer => layer.name === newLayer.name);
+    let counter = 1;
+    queryableLayers.forEach(layer => {
+      const layerName = layer.getElementsByTagName('Name')[0]?.value;
+      if (layerConfig.layer_regex.test(layerName)) {
+        const date = layerName.match(/(\d{4})(\d{2})(\d{2})/);
+        allLayers.push({
+          value: counter,
+          label: 'Jeff'
+        })
+      }
+      counter+=1;
+    })
+    setAvailableLayers(allLayers)
+  };
+
+  const { isPending, error, data, isFetching } = useQuery({
+    queryKey: ['wmsCapabilities'],
+    queryFn: async () => {
+      const response = await fetch(
+        'http://load-balancer-dev-947115727.us-east-1.elb.amazonaws.com/?map=/etc/mapserver/ecs_test_map_files/mapserver.map&service=WMS&request=GetCapabilities',
+      )
+      const xmlText = await response.text();
+      const xml = new XMLParser().parseFromString(xmlText);
+      return xml;
+    }
+  })
+
+  if (isPending) return 'Loading...'
+  if (error) return 'An error has occurred: ' + error.message
+
   return (
     <Box>
       <Grid container spacing={2}>
         <Grid xs={4}>
           <BasicSelect
             label={'Change Product'}
             selectedDate={selectedDate}
-            changeProduct={changeProduct}
-            setChangeProduct={setChangeProduct}
+            selection={changeProduct}
+            selectionList={config.wmsLayers}
+            handleChange={handleChangeProductChange}
           />
         </Grid>
         <Grid xs={4}>
@@ -46,15 +87,25 @@ function App() {
         <Grid xs={4}>
           Placeholder for Basemap
         </Grid>
-        <Grid xs={1}>
-          <BasicDatePicker/>
+        <Grid xs={6}>
+          <BasicDatePicker
+            label='Set Start Date'
+            setDate={setStartDate}
+          />
+        </Grid>
+        <Grid xs={6}>
+          <BasicDatePicker
+            label='Set End Date'
+            setDate={setEndDate}
+          />
         </Grid>
-        <Grid xs={9}>
+        <Grid xs={4}>
           <DateSlider
             setSelectedDate={setSelectedDate}
             onSelectedDateChange={onSelectedDateChange}
             changeProduct={changeProduct}
             setChangeProduct={setChangeProduct}
+            marks={availableLayers}
           />
         </Grid>
         <Grid xs={2}>

src/components/BasicDatePicker.jsx

@@ -5,11 +5,17 @@ import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 import { DatePicker } from '@mui/x-date-pickers/DatePicker';
 
 export default function BasicDatePicker(props) {
-  const { setStartDate, setEndDate } = props;
+  const { label, setDate } = props;
+
+  const changeHandler = (event) => {
+    setDate(String(event["$y"]).concat(String(event["$M"]+ 1))
+      .concat(String(event["$D"]))); // e.g. 20240725 for July 25, 2024 (month is zero-based)
+  } ;
+
   return (
     <LocalizationProvider dateAdapter={AdapterDayjs}>
       <DemoContainer components={['DatePicker']}>
-        <DatePicker label="Basic date picker" />
+        <DatePicker label={label} onChange={changeHandler} />
       </DemoContainer>
     </LocalizationProvider>
   );

src/components/BasicSelect.jsx

@@ -4,16 +4,14 @@ import InputLabel from '@mui/material/InputLabel';
 import MenuItem from '@mui/material/MenuItem';
 import FormControl from '@mui/material/FormControl';
 import Select from '@mui/material/Select';
+import {
+  useQuery,
+} from '@tanstack/react-query'
+import XMLParser from 'react-xml-parser';
 import { config } from '../config';
 
 export default function BasicSelect(props) {
-  const { label, selectedDate, changeProduct, setChangeProduct } = props;
-
-  const handleChange = (event) => {
-    const layer = event.target.value;
-    layer.layer = layer.layer.concat(selectedDate).concat('MaskForForest');
-    setChangeProduct(layer);
-  };
+  const { label, selection, selectionList, handleChange } = props;
 
   return (
     <Box sx={{ minWidth: 120 }}>
@@ -22,11 +20,11 @@ export default function BasicSelect(props) {
         <Select
           labelId="demo-simple-select-label"
           id="demo-simple-select"
-          value={changeProduct}
+          value={selection}
           label={label}
           onChange={handleChange}
         >
-          {config.wmsLayers.map((layer, index) => (
+          {selectionList.map((layer, index) => (
             <MenuItem key={index} value={layer}>
               {layer.name}
             </MenuItem>

src/components/DateSlider.jsx

@@ -4,27 +4,17 @@ import Slider from '@mui/material/Slider';
 import { config } from '../config';
 
 export default function DateSlider(props) {
-  const { setSelectedDate, onSelectedDateChange } = props;
-  const hardCodedDates = config.nonLeapYearDays.map(date => '2023' + date);
-
-  const valuetext = (value) => {
-    const hardCodedDates = config.nonLeapYearDays.map(date => '2023' + date);
-    return hardCodedDates[value];
-  }
+  const { setSelectedDate, onSelectedDateChange, marks } = props;
 
   return (
     <Box sx={{ width: 300 }}>
       <Slider
         aria-label="Date"
-        defaultValue={0}
-        getAriaValueText={valuetext}
-        valueLabelFormat={valuetext}
+        defaultValue={1}
         valueLabelDisplay="auto"
         onChange={(event) => onSelectedDateChange(event)}
-        step={1}
-        marks
-        min={0}
-        max={10}
+        step={null}
+        marks={marks}
       />
     </Box>
   );