Unverified Commit 424f8d15 authored by amystamile's avatar amystamile Committed by GitHub
Browse files

Merge pull request #60 from amystamile/cleanup 

Final code cleanup and closing issues
parents e972abca c3379712

app/src/components/presentational/QueryConsole.jsx

+0 −7
Original line number Diff line number Diff line
@@ -47,13 +47,6 @@ export default function QueryConsole() { 
        <span id="query-console-title">

          <ArrowDropDownCircleIcon sx={{marginRight:1}}/> Query Console

        </span>

        <span id="query-function">

          <Checkbox checked={consoleAuto} onChange={handleConsoleAutoChange} id="query-auto-checkbox"/>

          Auto-populate with:

          {consoleAutoWkt ? " WKT String" : " STAC Query"}

          <Checkbox id="query-auto-wkt-checkbox" checked={consoleAutoWkt} onChange={handleConsoleAutoWktChange}

                icon={<SwitchRightIcon/>} checkedIcon={<SwitchLeftIcon/>} color="default"/>

        </span>

      </summary>

      <div id="query-console-expanded">

          <div id="query-textarea-container">

app/src/js/ApiJsonCollection.js

+14 −2
Original line number Diff line number Diff line
@@ -5,18 +5,31 @@ var _numberReturned = 0; 
var _features = [];

var _limitVal = 10;



/**

 * @function callAPI

 * @description Fetches the STAC API at the collections level

 */

function callAPI() {

  return fetch(

    "https://6vpdmaqce6.execute-api.us-west-2.amazonaws.com/dev/collections"

  ).then(response => response.json());

}



/**

 * @function getItemCollection

 * @description Function takes the fetch return from callAPI and iterates through

 * collections with matching target name, if there are multiple collections for

 * the same target, these will be pushed to an array. Then the function fetches

 * all the items within the associated collections.

 * @param {String} name - The target name

 * @param {String} queryString - the query string to fetch against

 */

export function getItemCollection(name, queryString) {

  var urlArray = [];

  return callAPI().then(result => {

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

      if (

        result.collections[i].summaries["ssys:targets"] == name.toLowerCase()

        result.collections[i].summaries["ssys:targets"][0].toLowerCase() == name.toLowerCase()

      ) {

        let length = result.collections[i].links.length;

        for (let j = 0; j < length; j++) {
@@ -97,7 +110,6 @@ export function getNumberMatched() { 
 */

export function setNumberReturned(returned) {

  _numberReturned = returned;

  console.log(_numberReturned);

}



/**

app/src/js/AstroControlManager.js

+2 −34
Original line number Diff line number Diff line
@@ -2,8 +2,7 @@ import L from "leaflet"; 


import ProjectionControl from "./ProjectionControl";

import MousePositionControl from "./MousePositionControl";

import AstroDrawControl from "./AstroDrawControl";

import AstroSidebarControl from "./SidebarControl";

import AstroDrawFilterControl from "./AstroDrawFilterControl";

import ViewCenterControl from "./ViewCenterControl";



/**
@@ -40,17 +39,12 @@ export default L.AstroControlManager = L.Class.extend({ 
    let drawnItems = new L.FeatureGroup();

    map.addLayer(drawnItems);



    this._drawControl = new AstroDrawControl({

    this._drawControl = new AstroDrawFilterControl({

      edit: {

        featureGroup: drawnItems

      }

    });

    this._controls.push(this._drawControl);



    this._sidebarControl = new AstroSidebarControl(

      L.DomUtil.get("consoleToolbar"),

      L.DomUtil.get("coordContainer")

    );

  },



  /**
@@ -63,32 +57,6 @@ export default L.AstroControlManager = L.Class.extend({ 
      map.addControl(control);

    });

    map.addControl(new L.Control.Scale({ imperial: false }));



    let that = this;

    map.on("fullscreenchange", function() {

      if (map.isFullscreen()) {

        that.reorderControls(map);

      } else {

        map.removeControl(that._sidebarControl);

      }

    });

  },



  /**

   * @function AstroControlManager.prototype.reorderControls

   * @description Removes/adds the existing controls to the map so that the

   *              sidebar control is at the top.

   * @param {AstroMap} map - The AstroMap to add the controls to.

   */

  reorderControls: function(map) {

    this._controls.forEach(function(control, index) {

      map.removeControl(control);

    });



    map.addControl(this._sidebarControl);



    this._controls.forEach(function(control, index) {

      map.addControl(control);

    });

  }

});

app/src/js/AstroDrawControl.js→app/src/js/AstroDrawFilterControl.js

+24 −57
Original line number Diff line number Diff line
@@ -4,8 +4,8 @@ import Wkt from "wicket"; 
import {getCurrentPage} from "./ApiJsonCollection";



/**

 * @class AstroDrawControl

 * @aka L.Control.AstroDrawControl

 * @class AstroDrawFilterControl

 * @aka L.Control.AstroDrawFilterControl

 * @extends L.Control

 * @classdesc

 * Class that extends from the class L.Control.Draw and handles the back-end when a user draws on the leaflet map.
@@ -18,13 +18,13 @@ import {getCurrentPage} from "./ApiJsonCollection"; 
 * map.addLayer(drawnItems);

 *

 * // add draw control to map

 * let drawControl = new AstroDrawControl({

 * let drawControl = new AstroDrawFilterControl({

 *   edit: {

 *      featureGroup: drawnItems

 *   }

 * }).addTo(map);

 */

export default L.Control.AstroDrawControl = L.Control.Draw.extend({

export default L.Control.AstroDrawFilterControl = L.Control.Draw.extend({

  options: {

    draw: {

      circle: false,
@@ -36,7 +36,7 @@ export default L.Control.AstroDrawControl = L.Control.Draw.extend({ 
  },



  /**

   * @function AstroDrawControl.prototype.onAdd

   * @function AstroDrawFilterControl.prototype.onAdd

   * @description Adds the draw control to the map provided. Creates an on-draw and on-click event

   *              that allows users to draw polygons onto the leaflet map.

   * @param  {AstroMap} map - The AstroMap to add the control to.
@@ -66,10 +66,6 @@ export default L.Control.AstroDrawControl = L.Control.Draw.extend({ 
      }

    }

    this.queryTextBox = L.DomUtil.get("query-textarea");

    this.queryAuto = L.DomUtil.get("query-auto-checkbox");

    this.queryAutoWkt = L.DomUtil.get("query-auto-wkt-checkbox");

    // TODO: STAC Query should auto-populate/set this.queryTextBox.value

    //       if (this.queryAuto.checked === true && this.queryAutoWkt.checked === false)



    this.wkt = new Wkt.Wkt();

    this.myLayer = L.Proj.geoJson().addTo(map);
@@ -88,14 +84,12 @@ export default L.Control.AstroDrawControl = L.Control.Draw.extend({ 


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



    // map.on("projChange", this.reprojectFeature, this);



    return container;

  },



  /**

   * 

   * 

  * @function AstroDrawFilterControl.copyToClipboard

  * @description Copies query string in the query console to clipboard

  */

  copyToClipboard: function(){

    /* Get the text field */
@@ -108,10 +102,9 @@ export default L.Control.AstroDrawControl = L.Control.Draw.extend({ 
  },



  /**

   * @function AstroDrawControl.prototype.shapesToWKT

   * @function AstroDrawFilterControl.prototype.shapesToWKT

   * @description Is called when a user draws a shape using the on map drawing features.

   *              Converts the shaped drawn into a Well-Known text string and inserts it into

   *              the Well-Known text box.

   *              Converts the shaped drawn into a Well-Known text string.

   * @param  {DomEvent} e  - On draw.

   */

  shapesToWKT: function(e) {
@@ -123,11 +116,12 @@ export default L.Control.AstroDrawControl = L.Control.Draw.extend({ 
    geoJson = geoJson["geometry"];



    this.wkt.read(JSON.stringify(geoJson));

    if (this.queryAuto.checked === true && this.queryAutoWkt.checked === true) {

      this.queryTextBox.value = this.wkt.write();

    }

  },



  /**

  * @function AstroDrawFilterControl.clearMap

  * @description clears the layers on map

  */

  clearMap: function() {

    this._map._footprintControl.remove();

    for(let i = 0; i < this._map._geoLayers.length; i++){
@@ -161,8 +155,6 @@ export default L.Control.AstroDrawControl = L.Control.Draw.extend({ 
        bboxCoordArr.push([parseFloat(temp[0]), parseFloat(temp[1])]);

      }

    }

    // will proballby end up refactoring this a little bit when the front end of

    // this is up

    let bboxArr = [

      bboxCoordArr[0][0],

      bboxCoordArr[0][1],
@@ -173,6 +165,11 @@ export default L.Control.AstroDrawControl = L.Control.Draw.extend({ 
    return queryString;

  },



  /**

   * @function applyFilter

   * @description grabs the information from the filter panel and creates a query string

   * this function then recalls loadFootprintLayer with the updated query string

   */

  applyFilter: function() {

    let filterOptions = [];
@@ -238,35 +235,5 @@ export default L.Control.AstroDrawControl = L.Control.Draw.extend({ 
      this._map._geoLayers[i].clearLayers();

    }

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

  },



  /**

   * @function AstroDrawControl.prototype.mapWKTString

   * @description  Is called when a user clicks the draw button below the AstroMap.

   *               Will take the Well-Known text string and draw the shape onto the map.

   *               If the Well-Known text string is invalid an error will show in the text box.

   * @param  {DomEvent} e  - On Click of Well-Known text button.

   */

  mapWKTString: function(e) {

    this.myLayer.clearLayers();

    this.options.edit["featureGroup"].clearLayers();



    let wktValue = this.queryTextBox.value;



    try {

      this.wkt.read(wktValue);

    } catch (err) {

      alert("Invalid Well Known Text String");

      return;

    }



    let geoJson = this.wkt.toJson();



    let geojsonFeature = {

      type: "Feature",

      geometry: geoJson

    };



    this.myLayer.addData(geojsonFeature);

  }

});

app/src/js/SidebarControl.js

deleted100644 → 0
+0 −105
Original line number Diff line number Diff line 
import L from "leaflet";



/**

 * @class AstroSidebarControl

 * @aka L.Control.AstroSidebarControl

 * @extends L.Control

 * @classdesc

 * Holds the projection and lat/lon buttons and lat/lon coordinate display when

 * the map goes fullscreen.

 */

export default L.Control.AstroSidebarControl = L.Control.extend({

  options: {

    position: "topleft"

  },



  /**

   * @function AstroSidebarControl.prototype.initialize

   * @description Constructs a sidebar control.

   * @param {DOMElement} consoleElement - GUI Console element to add to the sidebar.

   * @param {DOMElement} coordContainer - Div element containing the coordinate displays.

   */

  initialize: function(consoleElement, coordContainer) {

    this._console = consoleElement;

    this._consoleParent = consoleElement.parentNode;

    this._coordContainer = coordContainer;

    this._coordContainerParent = coordContainer.parentNode;



    this._container = L.DomUtil.create("div", "sidebar");

    L.DomUtil.addClass(this._container, "sidebar-collapsed");

    this._expandButton = L.DomUtil.create(

      "a",

      "sidebar-button",

      this._container

    );

    this._expandButton.innerHTML = ">";

    this._expandButton.title = "expand";

    this._expandButton.setAttribute("role", "button");

    L.DomEvent.on(this._expandButton, "click", this.buttonClicked, this);

  },



  /**

   * @function AstroSidebarControl.prototype.onAdd

   * @description Moves the controls onto the sidebar.

   * @param  {AstroMap} map - The AstroMap to add the control to.

   * @return {Object} The div-container the control is in.

   */

  onAdd: function(map) {

    this._container.appendChild(this._coordContainer);

    this._container.appendChild(this._expandButton);

    return this._container;

  },



  /**

   * @function AstroSidebarControl.prototype.onRemove

   * @description Puts the controls back onto the console.

   * @param  {AstroMap} map - The AstroMap to remove the control from.

   */

  onRemove: function(map) {

    this.collapse();

    this._coordContainerParent.appendChild(this._coordContainer);

  },



  /**

   * @function AstroSidebarControl.prototype.buttonClicked

   * @description Is called when the expand/collapse button is clicked.

   */

  buttonClicked: function() {

    if (L.DomUtil.hasClass(this._container, "sidebar-collapsed")) {

      this.expand();

    } else {

      this.collapse();

    }

  },



  /**

   * @function AstroSidebarControl.prototype.expand

   * @description Expands the sidebar by removing the lat/lon coord display,

   *              adding the console, and changing the styling of the container.

   */

  expand: function() {

    L.DomUtil.removeClass(this._container, "sidebar-collapsed");

    L.DomUtil.addClass(this._container, "sidebar-expanded");



    this._coordContainerParent.appendChild(this._coordContainer);

    this._container.insertBefore(this._console, this._expandButton);

    this._expandButton.innerHTML = "<";

    this._expandButton.title = "collapse";

  },



  /**

   * @function AstroSidebarControl.prototype.collapse

   * @description Collapses the sidebar by removing the console,

   *              adding the lat/lon coord display, and changing t

   *              he styling of the container.

   */

  collapse: function() {

    L.DomUtil.addClass(this._container, "sidebar-collapsed");

    L.DomUtil.removeClass(this._container, "sidebar-expanded");



    this._consoleParent.appendChild(this._console);

    this._container.insertBefore(this._coordContainer, this._expandButton);

    this._expandButton.innerHTML = ">";

    this._expandButton.title = "expand";

  }

});