Commit c0ac6d5f authored by BrittainJackson7's avatar BrittainJackson7
Browse files

Implement data selection feature

parent 63d403e5

src/components/presentational/FootprintResults.jsx

+6 −1
Original line number Diff line number Diff line
@@ -221,6 +221,7 @@ export default function FootprintResults(props) { 
  if(numFeatures > matched) {

    setNumFeatures(matched);

  }

  

  return (

    <div id="footprintResults" className="scroll-parent">

      {hasFootprints &&
@@ -249,7 +250,11 @@ export default function FootprintResults(props) { 
          <div id="resultsList">

            <List sx={{maxWidth: 265, paddingTop: 0}}>

              {featureCollections[collectionId].features.map(feature => (

                <FootprintCard feature={feature} key={feature.id}/>

                <FootprintCard

                 feature={feature}

                  key={feature.id}

                  selectedQueryables = {props.selectedQueryables}

                  />

              ))}

            </List>

          </div>

src/components/presentational/ResultsAccessories.jsx

+9 −2
Original line number Diff line number Diff line
@@ -209,8 +209,11 @@ export function FootprintCard(props){ 
    window.postMessage(["unhighlightFootprint"], "*");

  };







  // get each option and put it within an array

  let queryableSelection = [];

  if(props.selectedQueryables) {

    queryableSelection = props.selectedQueryables.map(data => data.option);

  }



  return(

    <Card sx={{ width: 250, margin: 1}}>
@@ -254,6 +257,10 @@ export function FootprintCard(props){ 
              </ul> */}

              {props.feature?.properties &&

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

                    // Check if the key exists in the selected queryables

                    if(!queryableSelection.includes(key)){

                      return null

                    }

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

                    if (typeof value === 'object' && value !== null) {

                        return null;

src/components/presentational/Sidebar.jsx

+8 −2
Original line number Diff line number Diff line
@@ -51,11 +51,16 @@ export default function Sidebar(props) { 
    setSelectedTitle(newTitle);

  };



  // State to hold the seleced queryables

  let [updatedQueryableTitles, setUpdatedQueryableTitles] = React.useState("");



  // Callback to update selected queryables

  const UpdateQueryableTitles = (selectedQueryables) => {



    updatedQueryableTitles = selectedQueryables;

    setUpdatedQueryableTitles(selectedQueryables)

    console.log("Selected Queryables: ", selectedQueryables);

  }



  return (

    <>

      <div id="right-bar" className="scroll-parent">
@@ -78,6 +83,7 @@ export default function Sidebar(props) { 
            queryAddress={props.queryAddress}

            setQueryAddress={props.setQueryAddress}

            updateSelectedTitle={updateSelectedTitle} 

            selectedQueryables = {updatedQueryableTitles}

          />

        </Collapse>

      </div>