Commit 387ca21e authored by Jacob Cain's avatar Jacob Cain
Browse files

loadFeatureCollections cleanup

parent 49b5c05c

src/components/presentational/FootprintResults.jsx

+26 −3
Original line number Original line Diff line number Diff line
@@ -14,8 +14,6 @@ import ExpandMore from '@mui/icons-material/ExpandMore'; 




// geotiff thumbnail viewer... Should we be using DisplayGeoTiff.jsx instead?

// geotiff thumbnail viewer... Should we be using DisplayGeoTiff.jsx instead?

import GeoTiffViewer from "../../js/geoTiffViewer.js";

import GeoTiffViewer from "../../js/geoTiffViewer.js";

import { lineHeight } from "@mui/system";







/**

/**

 * Skeleton to show when footprints are loading

 * Skeleton to show when footprints are loading
@@ -57,7 +55,7 @@ function NoFootprints(){ 
  return(

  return(

    <div style={{padding: 10, maxWidth: 268}}>

    <div style={{padding: 10, maxWidth: 268}}>

      <p>

      <p>

        This target has no footprints. To see 

        This target has no footprints. To find 

        footprints, go to the dropdown menu 

        footprints, go to the dropdown menu 

        in the upper left and pick a target 

        in the upper left and pick a target 

        body with the <TravelExploreIcon sx={{fontSize: 16, verticalAlign: "middle"}}/> icon next to it.

        body with the <TravelExploreIcon sx={{fontSize: 16, verticalAlign: "middle"}}/> icon next to it.
@@ -66,6 +64,24 @@ function NoFootprints(){ 
  );

  );

}

}





function FilterTooStrict(){

  return(

    <div style={{padding: 10, maxWidth: 268}}>

      <p>

        No footprints match this filter.

      </p>

      <p>

        To find more footprints: 

      </p>

      <ul>

        <li>Uncheck current filters</li>

        <li>Draw a larger search area</li>

        <li>Enter a wider date range to filter by</li>

      </ul>

    </div>

  );

}



function FootprintCard(props){

function FootprintCard(props){





  // Metadata Popup

  // Metadata Popup
@@ -289,6 +305,11 @@ export default function FootprintResults(props) { 




  }, [props.target.name, props.queryString]);

  }, [props.target.name, props.queryString]);





  let noFootprintsReturned = true;

  for(const collection of featureCollections){

    if(collection.numberReturned > 0) noFootprintsReturned = false;

  }



  return (

  return (

    <div style={css.root} className="scroll-parent">

    <div style={css.root} className="scroll-parent">

      <div className="resultHeader">

      <div className="resultHeader">
@@ -309,6 +330,8 @@ export default function FootprintResults(props) { 
      </div>

      </div>

      {isLoading ? 

      {isLoading ? 

        <LoadingFootprints/>

        <LoadingFootprints/>

      : noFootprintsReturned ?

        <FilterTooStrict/>

      : hasFootprints ?   

      : hasFootprints ?   

        <div className="resultsList">

        <div className="resultsList">

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

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

src/components/presentational/SearchAndFilterInput.jsx

+0 −1
Original line number Original line Diff line number Diff line
@@ -262,7 +262,6 @@ export default function SearchAndFilterInput(props) { 
  }, [sortVal, sortAscCheckVal, areaCheckVal, areaTextVal, keywordCheckVal, keywordTextVal, dateCheckVal, dateFromVal, dateToVal, props.currentStep, props.currentPage]);

  }, [sortVal, sortAscCheckVal, areaCheckVal, areaTextVal, keywordCheckVal, keywordTextVal, dateCheckVal, dateFromVal, dateToVal, props.currentStep, props.currentPage]);





  const onBoxDraw = event => {

  const onBoxDraw = event => {

    console.info("Window meassage received from: ", event.origin);  // For production, check if messages coming from prod url

    if(typeof event.data == "object" && event.data[0] === "setWkt"){

    if(typeof event.data == "object" && event.data[0] === "setWkt"){

      const receivedWkt = event.data[1];

      const receivedWkt = event.data[1];

      setAreaTextVal(receivedWkt);

      setAreaTextVal(receivedWkt);

src/js/AstroMap.js

+26 −28
Original line number Original line Diff line number Diff line
@@ -95,13 +95,6 @@ export default L.Map.AstroMap = L.Map.extend({ 
    L.Map.prototype.initialize.call(this, this._mapDiv, this.options);

    L.Map.prototype.initialize.call(this, this._mapDiv, this.options);

    this.loadLayerCollection("cylindrical");

    this.loadLayerCollection("cylindrical");





    // Remove this once loading from react works?

    // setCurrentPage(1);

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



    // Listener for list of features sent from React

    // L.DomEvent.on(window, "message", this.loadFeatureCollections, this);



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

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

    // viewed by the map.

    // viewed by the map.

    this.on("baselayerchange", function(e) {

    this.on("baselayerchange", function(e) {
@@ -152,33 +145,38 @@ export default L.Map.AstroMap = L.Map.extend({ 
    } 

    } 





    if (featureCollections != undefined) {

    if (featureCollections != undefined) {

      let matched = 0;

      

      let returned = 0;

        // Init _geoLayers, at the length of one layer per collection

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

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



        // For each Collection (and each geoLayer)

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

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



            // Add the click handler for each Layer

        this._geoLayers[i] = L.geoJSON().on({click: handleClick}).addTo(this);

        this._geoLayers[i] = L.geoJSON().on({click: handleClick}).addTo(this);

        matched += featureCollections[i].numberMatched;



        returned += featureCollections[i].context["returned"];

            // Add each _geoLayer that has footprints to the FootprintCollection object.

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

            // The collection title is used as the property name, and it

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

            // shows up as the layer title when added to the Leaflet control

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

        if(featureCollections[i].numberReturned > 0) {

          this._footprintCollection[featureCollections[i].title] = this._geoLayers[i];

        }

        }

            // Delete layers with no Footprints

        else {

          delete this._footprintCollection[featureCollections[i].title];

        }

        }





      var collectionNames = {};

            // Add each feature to _geoLayers.

      for(const collection of featureCollections) {

            // _geoLayers is the footprint outlines shown on the map

        collectionNames[collection.id] = collection.title;

        for(const feature of featureCollections[i].features) {

          this._geoLayers[i].addData(feature);

        }

        }



      for (var key in this._footprintCollection){

          let title = collectionNames[key];

          this._footprintCollection[title]= this._footprintCollection[key];

          delete this._footprintCollection[key];

      }

      }

      

      

        this._footprintControl = L.control

      this._footprintControl = L.control                          // 1. Make a leaflet control

        .layers(null, this._footprintCollection, {collapsed: true})

      .layers(null, this._footprintCollection, {collapsed: true}) // 2. Add the footprint collections to the control as layers

        .addTo(this)

      .addTo(this)                                                // 3. Add the control to leaflet.

                                                                  // Now the user show/hide layers (and see their titles)

    }

    }

  },

  },