Commit 424a9b55 authored by jrc632's avatar jrc632
Browse files

Integrated Wkt into queryConsole !! MapContainer Update Problem !!

parent 2d82535f

app/src/components/container/App.jsx

+21 −6
Original line number Diff line number Diff line 
import React from "react";

import ConsoleAppBar from "../presentational/ConsoleAppBar.jsx";

import MapContainer from "./MapContainer.jsx";

import WellKnownTextInput from "../presentational/WellKnownTextInput.jsx";

import StacQueryConsole from "../presentational/StacQueryConsole.jsx";

import QueryConsole from "../presentational/QueryConsole.jsx";

import CreditsDisplay from "../presentational/CreditsDisplay.jsx";

import SearchAndFilterInput from "../presentational/SearchAndFilterInput.jsx";

import { makeStyles } from "@material-ui/core/styles";



const useStyles = makeStyles(theme => ({

  shown: {

    display: "block",

    background: "#f8f9fa"

  },

  hidden: {

    display: "none"

  }

}))



/**

 * App is the parent component for all of the other components in the project. It
@@ -14,11 +24,14 @@ import SearchAndFilterInput from "../presentational/SearchAndFilterInput.jsx"; 
 * @component

 */

export default function App() {

  const classes = useStyles();

  const [targetPlanet, setTargetPlanet] = React.useState("Mars");

  const [showSortBar, setShowSortBar] = React.useState(true);

  const [sortBarStyle, setSortBarStyle] = React.useState(classes.hidden);



  const ShowHideSort = () => {

    setShowSortBar(!showSortBar);

    setSortBarStyle(showSortBar ? classes.shown : classes.hidden);

  }



  /**
@@ -37,14 +50,16 @@ export default function App() { 
        </div>

        <MapContainer target={targetPlanet} />

        <div id="bottom-bar">

          <WellKnownTextInput />

          <StacQueryConsole />

          <QueryConsole />

          <CreditsDisplay />

        </div>

      </div>

      <div id="right-bar">  

        <div id="sort-filter-collapsed" onClick={ShowHideSort} >Sort and Filter</div>

        { showSortBar ? <SearchAndFilterInput /> : null }

          <div className={sortBarStyle}>

            <SearchAndFilterInput />

            {/* instead of styled surrounding div: { showSortBar ? <SearchAndFilterInput /> : null } */}

          </div> 

      </div>

    </div>

  );

app/src/components/container/MapContainer.jsx

+4 −0
Original line number Diff line number Diff line
@@ -21,6 +21,10 @@ export default class MapContainer extends Component { 
    this.state = {};

  }



  shouldComponentUpdate(){

    return false;

  }



  /**

   * Invoked when the component is successfully mounted to the DOM, then

   * handles all of the map intialization and creation.

app/src/components/presentational/StacQueryConsole.jsx→app/src/components/presentational/QueryConsole.jsx

+15 −10
Original line number Diff line number Diff line
@@ -29,27 +29,32 @@ const useStyles = makeStyles(theme => ({ 
 * @example

 * <StacQueryConsole />

 */

export default function StacQueryConsole() {

export default function QueryConsole() {

  const classes = useStyles();



  const [consoleFunctionVal, setConsoleFunctionVal] = React.useState(false);

  const [consoleAuto, setConsoleAuto] = React.useState(true);

  const [consoleAutoWkt, setConsoleAutoWkt] = React.useState(false);



  const handleConsoleFunctionChange = (event) => {

    setConsoleFunctionVal(event.target.checked);

  const handleConsoleAutoChange = (event) => {

    setConsoleAuto(event.target.checked);

  }



  const handleConsoleAutoWktChange = (event) => {

    setConsoleAutoWkt(event.target.checked);

  }



  return (

    <details id="query-console-container">

      <summary id="query-console-collapsed">

        <span id="query-console-title">

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

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

        </span>

        <span id="query-function">

          <Checkbox />

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

          Auto-populate with: 

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

          <Checkbox id="grabWktCheckBox" checked={consoleFunctionVal} onChange={handleConsoleFunctionChange}

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

          {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">
@@ -61,7 +66,7 @@ export default function StacQueryConsole() { 
                size="small" 

                variant="contained">

                <Button className={classes.button} startIcon={<ContentCopyIcon />}>Copy Code</Button>

                <Button className={classes.button} startIcon={<PolylineIcon />}>Draw WKT String</Button>

                <Button id="wktButton" className={classes.button} startIcon={<PolylineIcon />}>Draw WKT String</Button>

                <Button className={classes.button} startIcon={<PlayArrowIcon />}>Run STAC Query</Button>

              </ButtonGroup>

            </div>

app/src/components/presentational/SearchAndFilterInput.jsx

+4 −3
Original line number Diff line number Diff line
@@ -7,7 +7,7 @@ import FilterAltIcon from '@mui/icons-material/FilterAlt'; 
// Keyword Filter

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

// CSS

import { makeStyles, withStyles, alpha } from "@material-ui/core/styles";

import { makeStyles, alpha } from "@material-ui/core/styles";

// Date Range

import AdapterDateFns from '@mui/lab/AdapterDateFns';

import LocalizationProvider from '@mui/lab/LocalizationProvider';
@@ -30,14 +30,15 @@ const useStyles = makeStyles(theme => ({ 
  root: {

    backgroundColor: "#f8f9fa",

    overflow: "hidden",

    display: "flex",

    alignItems: "flex-start"

  },

  container: {

    padding: "1rem",

    height: "100vh",

    width: 225,

    display: "flex",

    flexDirection: "column", 

    justifyContent: "space-between",

    alignItems: "left",

    margin: "auto",

    padding: 0

  },

app/src/js/AstroDrawControl.js

+10 −3
Original line number Diff line number Diff line
@@ -60,7 +60,12 @@ export default L.Control.AstroDrawControl = L.Control.Draw.extend({ 
      }

    }



    this.wktTextBox = L.DomUtil.get("wktTextBox");

    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);
@@ -90,7 +95,9 @@ export default L.Control.AstroDrawControl = L.Control.Draw.extend({ 
    geoJson = geoJson["geometry"];



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

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

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

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

    }

  },



  /**
@@ -104,7 +111,7 @@ export default L.Control.AstroDrawControl = L.Control.Draw.extend({ 
    this.myLayer.clearLayers();

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



    let wktValue = this.wktTextBox.value;

    let wktValue = this.queryTextBox.value;



    try {

      this.wkt.read(wktValue);