Commit 4bcb0cc3 authored by Amy Stamile's avatar Amy Stamile
Browse files

Added limit slider.

parent 75e291d8

app/src/components/container/App.jsx

+1 −1
Original line number Diff line number Diff line
@@ -111,7 +111,7 @@ export default function App() { 
          <CreditsDisplay />

        </div>

        <div className={classes.rightSidebar}>

          <SearchAndFilterInput />

          <SearchAndFilterInput target={targetPlanet}/>

        </div>

      </Paper>

    </div>

app/src/components/presentational/SearchAndFilterInput.jsx

+50 −7
Original line number Diff line number Diff line 
import React from "react";

import React, {useEffect} from "react";

// Apply and Clear Buttons

import ButtonGroup from "@material-ui/core/ButtonGroup";

import Button from "@material-ui/core/Button";
@@ -21,6 +21,10 @@ import InputLabel from '@mui/material/InputLabel'; 
import FormControl from '@mui/material/FormControl';

import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward';

import ArrowUpwardIcon from '@mui/icons-material/ArrowUpward';

import Slider from '@mui/material/Slider';

import Pagination from '@mui/material/Pagination';



import { getMaxNumberPages } from "../../js/ApiJsonCollection";





/**
@@ -80,7 +84,7 @@ const useStyles = makeStyles(theme => ({ 
 * <SearchAndFilterInput />

 *

 */

export default function SearchAndFilterInput() {

export default function SearchAndFilterInput(props) {



  // import stylesheet from above

  const classes = useStyles();
@@ -99,6 +103,8 @@ export default function SearchAndFilterInput() { 
  const [dateCheckVal, setDateCheckVal] = React.useState(false);

  const [dateFromVal, setDateFromVal] = React.useState(null);

  const [dateToVal, setDateToVal] = React.useState(null);

  const [maxPages, setMaxPages] = React.useState(10000);

  const [limitVal, setLimitVal] = React.useState(10);



  // Clear all values

  const handleClear = (event) => {
@@ -110,6 +116,7 @@ export default function SearchAndFilterInput() { 
    setDateCheckVal(false);

    setDateFromVal(null);

    setDateToVal(null);

    setLimitVal(10);

    //// Uncomment to close details on clear

    // keywordDetails.current.open = false;

    // dateDetails.current.open = false;
@@ -156,6 +163,22 @@ export default function SearchAndFilterInput() { 
    setDateCheckVal(true);

  }



  // limit

  const handleLimitChange = (event) => {

    setLimitVal(event.target.value);

  }



  useEffect(() => {

    setMaxPages(getMaxNumberPages);

  });



  useEffect(() => {

    setLimitVal(10);

    console.log(maxPages);

    setMaxPages(getMaxNumberPages);

    console.log(maxPages);

  }, [props.target]);



  /* Control IDs for reference:

  applyButton

  clearButton
@@ -176,7 +199,6 @@ export default function SearchAndFilterInput() { 
          <div className="panelSection panelHeader">

            Sort and Filter

          </div>

          

          <div className="panelSection">

            <ButtonGroup>

              <Button id="applyButton" variant="contained" startIcon={<FilterAltIcon />} className={classes.button}>
@@ -294,6 +316,27 @@ export default function SearchAndFilterInput() { 
              </div>

            </details>

            </div>

            <div className="panelSectionHeader">

              <div className="panelItem">

                <div className="panelSectionTitle">Number of Displayed Footprints</div>

                  <Slider

                    id="valueSlider"

                    size="small"

                    defaultValue={10}

                    aria-label="Small"

                    valueLabelDisplay="auto"

                    onChange={handleLimitChange}

                    value={limitVal}

                    max={maxPages}

                  />

              </div>

            </div>

            <div className="panelSectionHeader">

              <div className="panelItem">

                <div className="panelSectionTitle">Showing 40 of 256 Footprints</div>

                  <Pagination count={5} size="small"/>

              </div>

            </div>

        </div>

    </div>

  );

app/src/js/ApiJsonCollection.js

+21 −1
Original line number Diff line number Diff line 
var _maxNumberPages = 10000;



function callAPI() {

  return fetch(

    "https://stac.astrogeology.usgs.gov/api/collections"
@@ -44,4 +46,22 @@ function getItemCollection(name, queryString) { 
  });

}



export { getItemCollection };
 
 No newline at end of file
 
/**

 * @function setMaxNumberPages

 * @description Sets the value of the max number of pages possible

 */

function setMaxNumberPages(pages) {

  if (pages <= 10000){

    _maxNumberPages = pages;

  }

}



/**

 * @function getMaxNumberPages

 * @description Gets the value of the max number of pages possible

 */

function getMaxNumberPages() {

  return _maxNumberPages;

}



export { getItemCollection, setMaxNumberPages, getMaxNumberPages };

app/src/js/AstroDrawControl.js

+16 −6
Original line number Diff line number Diff line
@@ -102,7 +102,9 @@ export default L.Control.AstroDrawControl = L.Control.Draw.extend({ 


  clearMap: function() {

    this._map._footprintControl.remove();

    this._map._geoLayer.clearLayers();

    for(let i = 0; i < this._map._geoLayers.length; i++){

      this._map._geoLayers[i].clearLayers();

    }

  },



  /**
@@ -133,8 +135,10 @@ export default L.Control.AstroDrawControl = L.Control.Draw.extend({ 
      bboxCoordArr[1][1]

    ];

    this._map._footprintControl.remove();

    this._map._geoLayer.clearLayers();

    this._map.removeControl(this._map._htmllegend);

    for(let i = 0; i < this._map._geoLayers.length; i++){

      this._map._geoLayers[i].clearLayers();

    }

    //this._map.removeControl(this._map._htmllegend);

    let queryString = "bbox=" + "[" + bboxArr + "]";

    return queryString;

  },
@@ -182,6 +186,10 @@ export default L.Control.AstroDrawControl = L.Control.Draw.extend({ 
      filterOptions.push(bboxValue);

    }



    let sliderElement = document.getElementById('valueSlider');

    let valueQuery = "limit=" + sliderElement.lastChild.firstChild.value;

    filterOptions.push(valueQuery);



    let queryString = "";



    for (let i = 0; i < filterOptions.length; i++) {
@@ -193,9 +201,11 @@ export default L.Control.AstroDrawControl = L.Control.Draw.extend({ 
    }

    // re render map

    this._map._footprintControl.remove();

    this._map._geoLayer.clearLayers();

    this._map.removeControl(this._map._htmllegend);

    this._map.loadFootprintLayer(this._map._name, queryString);

    for(let i = 0; i < this._map._geoLayers.length; i++){

      this._map._geoLayers[i].clearLayers();

    }

    //this._map.removeControl(this._map._htmllegend);

    this._map.loadFootprintLayer(this._map._target, queryString);

  },



  /**

app/src/js/AstroMap.js

+15 −17
Original line number Diff line number Diff line
@@ -2,7 +2,7 @@ import L from "leaflet"; 
import "proj4leaflet";

import AstroProj from "./AstroProj";

import LayerCollection from "./LayerCollection";

import { getItemCollection, url } from "./ApiJsonCollection";

import { getItemCollection, setMaxNumberPages, getMaxNumberPages } from "./ApiJsonCollection";

import { MY_JSON_MAPS } from "./layers";

import "leaflet-html-legend";

import React from "react";
@@ -47,8 +47,7 @@ export default L.Map.AstroMap = L.Map.extend({ 
    };

    this._footprintCollection = {};

    this._footprintControl = null;

    this._geoLayer = null;

    this._name = null;

    this._geoLayers = [];

    this._htmllegend = null;

    this._currentPage = 1;
@@ -129,27 +128,26 @@ export default L.Map.AstroMap = L.Map.extend({ 
   *                                        the FootprintLegend

   */

  loadFootprintLayer: function(name, queryString, loadFootprintLegend = true) {

    var numPages = 0;

    getItemCollection(name, queryString).then(result => {

      if (result != undefined) {

        this._name = name;

        this._geoLayer = L.geoJSON()

          .on('click', function(e){

            console.log(e);

        }).addTo(this);

        this._footprintCollection["Footprints"] = this._geoLayer;

        this._geoLayers = new Array(result.length);

        for (let i = 0; i < result.length; i++) {

          this._geoLayers[i] = L.geoJSON().addTo(this);

          numPages += result[i].numberMatched;

          for (let j = 0; j < result[i].features.length; j++) {

            this._geoLayer.addData(result[i].features[j]);

            this._footprintCollection[result[i].features[j].collection] = this._geoLayers[i];

            this._geoLayers[i].addData(result[i].features[j]);

          }

        }



        setMaxNumberPages(numPages);

        this._footprintControl = L.control

          .layers(null, this._footprintCollection)

          .addTo(this);



        if (loadFootprintLegend) {

          this.addFootprintLegend(name);

        }

        // if (loadFootprintLegend) {

        //   this.addFootprintLegend(name);

        // }

      }

    });

  },
@@ -168,7 +166,7 @@ export default L.Map.AstroMap = L.Map.extend({ 
      legends: [

        {

          name: "Footprints",

          layer: this._geoLayer,

          layer: this._geoLayers,

          elements: [

            {

              html: `<div class="pagination">
@@ -187,7 +185,7 @@ export default L.Map.AstroMap = L.Map.extend({ 
    $("#footprint_right").click(function() {

      self._currentPage += 1;

      self._footprintControl.remove();

      self._geoLayer.clearLayers();

      self._geoLayers.clearLayers();

      self.removeControl(legend);

      let queryString = "?page=" + self._currentPage;

      self.loadFootprintLayer(name, queryString);
@@ -197,7 +195,7 @@ export default L.Map.AstroMap = L.Map.extend({ 
      self._currentPage -= 1;

      if (this._currentPage > 0) {

        self._footprintControl.remove();

        self._geoLayer.clearLayers();

        self._geoLayers.clearLayers();

        self.removeControl(legend);

        let queryString = "?page=" + self._currentPage;

        self.loadFootprintLayer(name, queryString);