Commit 6bf72845 authored by Amy Stamile's avatar Amy Stamile
Browse files

Moved pagination to side panel and added a slider for number of footprints displayed.

parent 4bcb0cc3

app/src/components/presentational/SearchAndFilterInput.jsx

+28 −15
Original line number Diff line number Diff line
@@ -24,7 +24,7 @@ import ArrowUpwardIcon from '@mui/icons-material/ArrowUpward'; 
import Slider from '@mui/material/Slider';

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



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

import { getMaxNumberPages, setCurrentPage, getCurrentPage, getNumberMatched } from "../../js/ApiJsonCollection";





/**
@@ -103,8 +103,9 @@ export default function SearchAndFilterInput(props) { 
  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);

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

  const [maxNumberFootprints, setMaxNumberFootprints] = React.useState(getNumberMatched);

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



  // Clear all values

  const handleClear = (event) => {
@@ -117,6 +118,8 @@ export default function SearchAndFilterInput(props) { 
    setDateFromVal(null);

    setDateToVal(null);

    setLimitVal(10);

    setMaxPages(getMaxNumberPages);

    setMaxNumberFootprints(getNumberMatched);

    //// Uncomment to close details on clear

    // keywordDetails.current.open = false;

    // dateDetails.current.open = false;
@@ -166,19 +169,24 @@ export default function SearchAndFilterInput(props) { 
  // limit

  const handleLimitChange = (event) => {

    setLimitVal(event.target.value);

    setTimeout(() => {

      setMaxPages(getMaxNumberPages);

    }, 1000);

  }



  // resets pagination and limit when switching targets

  useEffect(() => {

    setTimeout(() => {

      setMaxNumberFootprints(getNumberMatched);

      setMaxPages(getMaxNumberPages);

  });



  useEffect(() => {

      setLimitVal(10);

    console.log(maxPages);

    setMaxPages(getMaxNumberPages);

    console.log(maxPages);

    }, 1000);

  }, [props.target]);



  // Pagination

  const handlePageChange = (event, value) => {

    setCurrentPage(value);

  };



  /* Control IDs for reference:

  applyButton

  clearButton
@@ -327,14 +335,19 @@ export default function SearchAndFilterInput(props) { 
                    valueLabelDisplay="auto"

                    onChange={handleLimitChange}

                    value={limitVal}

                    max={maxPages}

                    max={maxNumberFootprints}

                  />

              </div>

            </div>

            <div className="panelSectionHeader">

              <div className="panelItem">

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

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

                <div className="panelSectionTitle">Showing {limitVal} of {maxNumberFootprints} Footprints</div>

                  <Pagination

                    id="pagination"

                    count={maxPages}

                    size="small"

                    onChange={handlePageChange}

                  />

              </div>

            </div>

        </div>

app/src/js/ApiJsonCollection.js

+44 −5
Original line number Diff line number Diff line 
var _maxNumberPages = 10000;

var _maxNumberPages = 0;

var _currentPage = 1;

var _numberMatched = 0;



function callAPI() {

  return fetch(
@@ -46,15 +48,35 @@ function getItemCollection(name, queryString) { 
  });

}



/**

 * @function setNumberMatched

 * @description Sets the value of the return number of footprints

 */

function setNumberMatched(matched) {

  _numberMatched = matched;

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

  let limitVal = sliderElement.lastChild.firstChild.value;

  if (limitVal == 0){

    limitVal = 10;

  }

  setMaxNumberPages(Math.floor(_numberMatched/limitVal));

}



/**

 * @function getNumberMatched

 * @description Gets the value of the return number of footprints

 */

function getNumberMatched() {

  return _numberMatched

}



/**

 * @function setMaxNumberPages

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

 */

function setMaxNumberPages(pages) {

  if (pages <= 10000){

  _maxNumberPages = pages;

}

}



/**

 * @function getMaxNumberPages
@@ -64,4 +86,21 @@ function getMaxNumberPages() { 
  return _maxNumberPages;

}



export { getItemCollection, setMaxNumberPages, getMaxNumberPages };
 
/**

 * @function setCurrentPage

 * @description Sets the value of the current page

 */

function setCurrentPage(page) {

  _currentPage = page;

}



/**

 * @function getMaxNumberPages

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

 */

function getCurrentPage() {

  return _currentPage;

}





export { getItemCollection, getMaxNumberPages, setCurrentPage, getCurrentPage, setNumberMatched, getNumberMatched, setMaxNumberPages };

app/src/js/AstroDrawControl.js

+32 −11
Original line number Diff line number Diff line 
import L from "leaflet";

import "leaflet-draw";

import Wkt from "wicket";

import {getCurrentPage} from "./ApiJsonCollection";



/**

 * @class AstroDrawControl

 * @aka L.Control.AstroDrawControl
@@ -74,6 +76,35 @@ export default L.Control.AstroDrawControl = L.Control.Draw.extend({ 
    );

    L.DomEvent.on(L.DomUtil.get("clearButton"), "click", this.clearMap, this);



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

    sliderElement.addEventListener('click', event => {

      this._map._footprintControl.remove();

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

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

      }

      let currentPage = getCurrentPage();

      let limitVal = sliderElement.lastChild.firstChild.value;

      let queryString = "?page=" + currentPage;

      queryString += "&limit=" + limitVal;

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

    });



    let pagElement = document.getElementById('pagination');

    pagElement.addEventListener('click', event => {

      this._map._footprintControl.remove();

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

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

      }

      setTimeout(() => {

        let currentPage = getCurrentPage();

        let limitVal = sliderElement.lastChild.firstChild.value;

        let queryString = "?page=" + currentPage;

        queryString += "&limit=" + limitVal;

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

      }, 1000);

    });





    map.on("draw:created", this.shapesToWKT, this);



    // map.on("projChange", this.reprojectFeature, this);
@@ -105,6 +136,7 @@ export default L.Control.AstroDrawControl = L.Control.Draw.extend({ 
    for(let i = 0; i < this._map._geoLayers.length; i++){

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

    }



  },



  /**
@@ -134,11 +166,6 @@ export default L.Control.AstroDrawControl = L.Control.Draw.extend({ 
      bboxCoordArr[1][0],

      bboxCoordArr[1][1]

    ];

    this._map._footprintControl.remove();

    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;

  },
@@ -181,15 +208,10 @@ export default L.Control.AstroDrawControl = L.Control.Draw.extend({ 
    }



    if (L.DomUtil.get("areaCheckBox").checked == true) {

      console.log("area");

      let bboxValue = this.shapesToFootprint(this.wktTextBox.value);

      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++) {
@@ -204,7 +226,6 @@ export default L.Control.AstroDrawControl = L.Control.Draw.extend({ 
    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

+10 −65
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, setMaxNumberPages, getMaxNumberPages } from "./ApiJsonCollection";

import { getItemCollection, setNumberMatched, setMaxNumberPages, getCurrentPage, setCurrentPage } from "./ApiJsonCollection";

import { MY_JSON_MAPS } from "./layers";

import "leaflet-html-legend";

import React from "react";
@@ -49,7 +49,6 @@ export default L.Map.AstroMap = L.Map.extend({ 
    this._footprintControl = null;

    this._geoLayers = [];

    this._htmllegend = null;

    this._currentPage = 1;



    // Set by layer collection or baselayerchange event

    this._currentLayer = null;
@@ -97,7 +96,10 @@ export default L.Map.AstroMap = L.Map.extend({ 
    L.Map.prototype.initialize.call(this, this._mapDiv, this.options);

    this.loadLayerCollection("cylindrical");



    this.loadFootprintLayer(target, "?page=" + this._currentPage);

    setCurrentPage(1);

    setMaxNumberPages(0);

    setNumberMatched(0);

    this.loadFootprintLayer(target, "?page=1");



    // Listen to baselayerchange event so that we can set the current layer being

    // viewed by the map.
@@ -116,6 +118,7 @@ export default L.Map.AstroMap = L.Map.extend({ 
    this.layers[name].addTo(this);

  },





  /**

   * @function AstroMap.prototype.loadFootprintLayer

   * @description Adds the ApiJsonCollection with the requested name.
@@ -124,83 +127,25 @@ export default L.Map.AstroMap = L.Map.extend({ 
   *

   * @param {String} queryString - Filter for deisered footprints ie: ?page=1

   *

   * @param {Boolean} loadFootprintLegend - Boolean value used to bypass adding

   *                                        the FootprintLegend

   */

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

    var numPages = 0;

  loadFootprintLayer: function(name, queryString) {

    var matched = 0;

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

      if (result != undefined) {

        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;

          matched += result[i].numberMatched;

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

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

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

          }

        }

        setMaxNumberPages(numPages);

        setNumberMatched(matched);

        this._footprintControl = L.control

          .layers(null, this._footprintCollection)

          .addTo(this);



        // if (loadFootprintLegend) {

        //   this.addFootprintLegend(name);

        // }

      }

    });

  },



  /**

   * @function AstroMap.prototype.addFootprintLegend

   * @description Adds legend for each footprint layer

   *

   * @param {String} name - Name of the projection

   *

   */

  addFootprintLegend: function(name) {

    var self = this;



    var legend = L.control.htmllegend({

      legends: [

        {

          name: "Footprints",

          layer: this._geoLayers,

          elements: [

            {

              html: `<div class="pagination">

                      <a id=footprint_left>&laquo;</a>

                      <a id=footprint_pageNumber>${self._currentPage}</a>

                      <a id=footprint_right>&raquo;</a>

                    </div>`

            }

          ]

        }

      ]

    });

    this._htmllegend = legend;

    this.addControl(legend);



    $("#footprint_right").click(function() {

      self._currentPage += 1;

      self._footprintControl.remove();

      self._geoLayers.clearLayers();

      self.removeControl(legend);

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

      self.loadFootprintLayer(name, queryString);

    });



    $("#footprint_left").click(function() {

      self._currentPage -= 1;

      if (this._currentPage > 0) {

        self._footprintControl.remove();

        self._geoLayers.clearLayers();

        self.removeControl(legend);

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

        self.loadFootprintLayer(name, queryString);

      }

      // should add some error message here eventually

    });

  },