Unverified Commit 34174276 authored by brittainjackson7's avatar brittainjackson7 Committed by GitHub
Browse files

Merge pull request #34 from jrcain-usgs/capstone-2023-mod 

Prevent fetch loop and fix paging
parents 83ea8ebb 41b2b9ce

.gitignore

+3 −0
Original line number Diff line number Diff line
@@ -18,3 +18,6 @@ app/node_modules 
.Trashes

ehthumbs.db

Thumbs.db



# IDE generated files

.vscode
 
 No newline at end of file

src/components/presentational/FootprintResults.jsx

+1 −5
Original line number Diff line number Diff line
@@ -61,12 +61,8 @@ export default function FootprintResults(props) { 
    setCollectionId(newCollectionId);

    setMatched(featureCollections[newCollectionId].numberMatched);



    // Extract the selected collection title

    const selectedCollection = props.target.collections.find(collection => collection.id === newCollectionId);

    const selectedCollectionTitle = selectedCollection ? selectedCollection.title : '';



    // Call the callback function to pass the selected title to the Sidebar

    props.updateSelectedTitle(selectedCollectionTitle);

    props.updateAvailableQueriables(props.target.collections.find(col => col.id === newCollectionId).querTitles);



    props.UpdateQueryableTitles(null);

src/components/presentational/SearchAndFilterInput.jsx

+36 −77
Original line number Diff line number Diff line
@@ -147,9 +147,6 @@ export default function SearchAndFilterInput(props) { 
    props.setFilterString(myFilterString);

  }



  // initialize pyGeoAPI flag

  let pyGeoAPIFlag = false;



  // New state for queryable titles

  const [queryableTitles, setQueryableTitles] = useState([]);
@@ -160,57 +157,11 @@ export default function SearchAndFilterInput(props) { 
  const isInPyAPI = collection.filter(data => data.hasOwnProperty('itemType'));



  // finds and assigns the selected collection from the PYGEO api

  const selectedCollection = isInPyAPI.find(data => data.title === props.selectedTitle);

  const selectedCollection = isInPyAPI.find(data => data.title === props.availableQueriables);



  // retrieves all pyGEO titles

  const collectionTitles = isInPyAPI.map(data => data.title);







  // checks if correct title selected

  if (collectionTitles.includes(props.selectedTitle))

  {

    //set pyGeoAPI flag

    pyGeoAPIFlag = true;



    // set the selected link

    let QueryableDirectoryLink = selectedCollection.links.find(link => link.rel === "queryables").href;



    // creates URL to get the properties

    let QueryableURL = 'https://astrogeology.usgs.gov/pygeoapi/' + QueryableDirectoryLink;



    // fetches URL to get the properties

    fetch(QueryableURL)

    .then(response => response.json())

    .then(data => {



      let queryableTitlesArray = [];



      // Extract the "properties" property from the JSON response

      let Queryables = data.properties;



      // loop over titles

      for (const property in Queryables) {

        if (Queryables.hasOwnProperty(property) && Queryables[property].hasOwnProperty("title")) {



          queryableTitlesArray.push(data.properties[property].title);



        }

     }



      // Set the state with the queryable titles

      setQueryableTitles(queryableTitlesArray);





    }, [])

    .catch(error => {

    console.error("Error fetching data:", error);

    });

    }









  const [selectedOptions, setSelectedOptions] = useState([]);



  const handleOptionChange = event => {
@@ -285,6 +236,11 @@ export default function SearchAndFilterInput(props) { 
    return () => window.removeEventListener("message", onBoxDraw);

  }, []);



  // If Available queriables are changed, reset the ones selected to none

  useEffect(() => {

    setSelectedOptions([]);

  }, [props.availableQueriables]);



  // If target is changed, reset filter values;

  useEffect(() => {
@@ -326,7 +282,7 @@ export default function SearchAndFilterInput(props) { 
      <Collapse in={expandFilter}>

        <div className="panelSection panelBar">

          <span>

            <FormControl sx={{ minWidth: 150 }}>

            <FormControl sx={{ minWidth: 180 }}>

              <InputLabel id="sortByLabel" size="small">

                Sort By

              </InputLabel>
@@ -357,23 +313,25 @@ export default function SearchAndFilterInput(props) { 
          </span>

        </div>



        {pyGeoAPIFlag && (

        {props.availableQueriables.length > 0 && (

        <>

          <Divider/>

          <div className="panelSection panelBar">

            <span>

            <FormControl sx={{ minWidth: 150 , minHeight: 40}}>

              <InputLabel id="selectQueryLabel" size="small" style={{paddingTop: '0.2rem'}}>

              <FormControl sx={{ minWidth: 180 , minHeight: 40}}>

                <InputLabel id="showPropertiesLabel" size="small" style={{paddingTop: '0.2rem'}}>

                  Show Properties

                </InputLabel>

                <Select

                labelId="selectQueryLabel"

                label="Select Query"

                  labelId="showPropertiesLabel"

                  label="Show Properties"

                  multiple

                  value={selectedOptions}

                  onChange={handleOptionChange}

                  renderValue={(selected) => selected.join(', ')}

                  style={{height: 43}}

                >

                {queryableTitles.map((title) => (

                  {props.availableQueriables.map((title) => (

                          <MenuItem key={title} value={title}>

                            <Checkbox checked={selectedOptions.includes(title)} />

                            <ListItemText primary={title} />
@@ -383,6 +341,7 @@ export default function SearchAndFilterInput(props) { 
              </FormControl>

            </span>

          </div>

        </>

        )}

        <Divider/>

src/components/presentational/Sidebar.jsx

+5 −5
Original line number Diff line number Diff line
@@ -44,11 +44,11 @@ export default function Sidebar(props) { 
  };



  // State to hold the selected title

  const [selectedTitle, setSelectedTitle] = React.useState("");

  const [availableQueriables, setAvailableQueriables] = React.useState("");



  // Callback function to update selected title

  const updateSelectedTitle = (newTitle) => {

    setSelectedTitle(newTitle);

  const updateAvailableQueriables = (queriables) => {

    setAvailableQueriables(queriables);

  };



  // State to hold the seleced queryables
@@ -72,7 +72,7 @@ export default function Sidebar(props) { 
            setFilterString={setFilterString}

            targetName={props.target.name}

            target={props.target}

            selectedTitle={selectedTitle} 

            availableQueriables={availableQueriables} 

            UpdateQueryableTitles = {UpdateQueryableTitles}

          />

          <FootprintResults
@@ -80,7 +80,7 @@ export default function Sidebar(props) { 
            filterString={filterString}

            queryAddress={props.queryAddress}

            setQueryAddress={props.setQueryAddress}

            updateSelectedTitle={updateSelectedTitle}

            updateAvailableQueriables={updateAvailableQueriables}

            selectedQueryables = {updatedQueryableTitles}

            UpdateQueryableTitles = {UpdateQueryableTitles}

          />

src/js/AstroMap.js

+6 −2
Original line number Diff line number Diff line
@@ -173,8 +173,12 @@ export default L.Map.AstroMap = L.Map.extend({ 
    for(const feature of myFeatures) {



      // Check if feature or feature.geometry is null or undefined

      if(!feature || !feature.geometry){

        console.warn("Invalid feature or missing geometry: ", feature);

      if(!feature){

        console.log("Invalid/Null Feature", feature);

        continue;

      }

      else if(!feature.geometry){

        console.log("Feature with missing geometry", feature)

        continue;

      }