Commit 7e9bae0c authored by ausvat's avatar ausvat
Browse files

Drop Down API works 100%, Filter functionality needing to be implented still

parent f0fc138e

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

+89 −57
Original line number Diff line number Diff line
@@ -145,24 +145,48 @@ export default function SearchAndFilterInput(props) { 
    props.setFilterString(myFilterString);

  }



  const [queryableTitles, setQueryableTitles] = useState([]); // New state for queryable titles

  // initialize pyGeoAPI flag

  let pyGeoAPIFlag = false;



  // New state for queryable titles

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

 

  // all collections

  const collection = props.target.collections;

 

  // filter the PyGeo API queryables

  for (const collection of props.target.collections) {

  // retrieves all PyGEO collections

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

  //console.log(isInPyAPI);



    let isInPyAPI = collection.hasOwnProperty("itemType");

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

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



    if (isInPyAPI)

  //console.log(selectedCollection);



  // retrieves all pyGEO titles

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



    

    

  // checks if correct title selected 

  if (collectionTitles.includes(props.selectedTitle))

  {

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

    //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;
@@ -175,27 +199,33 @@ export default function SearchAndFilterInput(props) { 
        }

     }



       

        setQueryableTitles(queryableTitlesArray); // Set the state with the queryable titles

      // 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); */

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

          </span>

        </div>

        

        {pyGeoAPIFlag && (

        <div className="panelSection panelBar">

          <span>

            <FormControl sx={{ minWidth: 150 }}>
@@ -347,7 +379,7 @@ export default function SearchAndFilterInput(props) { 
            </FormControl>

          </span>

        </div>



        )}

        <Divider/>



        <div className="panelSection">

src/components/presentational/Sidebar.jsx

+11 −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">
@@ -56,12 +64,14 @@ export default function Sidebar(props) { 
            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>