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

Merge pull request #17 from ausvat/filterFootprintCard 

Drop Down API works 100%, Filter functionality needing to be implemented still
parents 0a00e7cf 7e9bae0c

src/components/presentational/FootprintResults.jsx

+14 −0
Original line number Diff line number Diff line
@@ -32,6 +32,12 @@ export default function FootprintResults(props) { 
  const [oldTargetName, setOldTargetName] = React.useState("");

  const [oldFilterString, setOldFilterString] = React.useState("");



  /*const [selectedOptionsWithValues, setSelectedOptionsWithValues] = React.useState([]);



    // Function to update selected options and values

    const updateSelectedOptions = (selectedOptions) => {

      setSelectedOptionsWithValues(selectedOptions);

    }; */



  const addFeatures = (newFeatures, key) => {

    let myFeatureCollections = featureCollections;
@@ -62,6 +68,14 @@ 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);





    // Send to Leaflet

    window.postMessage(["setVisibleCollections", newCollectionId], "*");

  };

src/components/presentational/ResultsAccessories.jsx

+11 −2
Original line number Diff line number Diff line
@@ -120,6 +120,7 @@ export function FootprintCard(props){ 
  let stacAPIFlag = false;

  let pyGeoAPIFlag = false;

 

  const { selectedOptionsWithValues } = props;



   // Metadata Popup

  const geoTiffViewer = new GeoTiffViewer("GeoTiffAsset");
@@ -243,6 +244,14 @@ export function FootprintCard(props){ 
                <strong>ID:</strong>&nbsp;{props.feature.id}

              </div>

              <div className="resultSub">

            {/*}

              <ul>

              {selectedOptionsWithValues.map((optionWithValues, index) => (

                <li key={index}>

                   <strong>Option:</strong> {optionWithValues.option}, <strong>Value:</strong> {optionWithValues.value}

               </li>

              ))}

              </ul> */}

              {props.feature?.properties &&

                Object.entries(props.feature.properties).map(([key, value]) => {

                    // Checking if the value is an object or array, and not rendering it if it is

src/components/presentational/SearchAndFilterInput.jsx

+102 −33
Original line number Diff line number Diff line
@@ -145,20 +145,87 @@ export default function SearchAndFilterInput(props) { 
    props.setFilterString(myFilterString);

  }



  // testing 

  const options = [

    { value: 'option1', label: 'Option 1' },

    { value: 'option2', label: 'Option 2' },

    { value: 'option3', label: 'Option 3' },

    { value: 'option4', label: 'Option 4' },

    { value: 'option5', label: 'Option 5' },

  ];

  // initialize pyGeoAPI flag

  let pyGeoAPIFlag = false;



  // New state for queryable titles

  const [queryableTitles, setQueryableTitles] = useState([]); 

 

  // all collections

  const collection = props.target.collections;

 

  // retrieves all PyGEO collections

  const isInPyAPI = collection.filter(data => data.hasOwnProperty('itemType'));

  //console.log(isInPyAPI);



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

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



  //console.log(selectedCollection);



  // 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 => {

    setSelectedOptions(event.target.value);

    const selectedValues = event.target.value;

    setSelectedOptions(selectedValues);



    /*// Create an array of objects with selected option and value

    const selectedOptionsWithValues = selectedValues.map((option) => ({

      option,

        value: queryableTitles.find((title) => title.title === option)?.value, 

      }));



  // Pass the selected options and values to FootprintResults

    props.updateSelectedOptions(selectedOptionsWithValues); */

  };
@@ -286,6 +353,8 @@ export default function SearchAndFilterInput(props) { 
            />

          </span>

        </div>

        

        {pyGeoAPIFlag && (

        <div className="panelSection panelBar">

          <span>

            <FormControl sx={{ minWidth: 150 }}>
@@ -300,17 +369,17 @@ export default function SearchAndFilterInput(props) { 
                onChange={handleOptionChange}

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

              >

        {options.map((option) => (

          <MenuItem key={option.value} value={option.value}>

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

            <ListItemText primary={option.label} />

                {queryableTitles.map((title) => (

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

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

                          <ListItemText primary={title} />

                        </MenuItem>

                ))}

              </Select>

            </FormControl>

          </span>

        </div>



        )}

        <Divider/>



        <div className="panelSection">

src/components/presentational/Sidebar.jsx

+12 −1
Original line number Diff line number Diff line
@@ -43,6 +43,14 @@ export default function Sidebar(props) { 
    setShowSidePanel(!showSidePanel);

  };



  // State to hold the selected title

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



  // Callback function to update selected title

  const updateSelectedTitle = (newTitle) => {

    setSelectedTitle(newTitle);

  };



  return (

    <>

      <div id="right-bar" className="scroll-parent">
@@ -55,12 +63,15 @@ export default function Sidebar(props) { 
          <SearchAndFilterInput

            setFilterString={setFilterString}

            targetName={props.target.name}

            target={props.target}

            selectedTitle={selectedTitle} 

          />

          <FootprintResults

            target={props.target} 

            filterString={filterString}

            queryAddress={props.queryAddress}

            setQueryAddress={props.setQueryAddress}

            updateSelectedTitle={updateSelectedTitle} 

          />

        </Collapse>

      </div>