Commit e292d90a authored by jrc632's avatar jrc632
Browse files

Added Sort and Filter Sidebar GUI 

Added a sidebar interface to sort and filter footprints (by date, area, or keyword).  Show more input in WKT bar without taking up much more space.  Updated depreciated styling components.
parent ddf68339

app/package.json

+8 −0
Original line number Diff line number Diff line
@@ -76,10 +76,18 @@ 
    "webpack-merge": "^4.2.2"

  },

  "dependencies": {

    "@date-io/date-fns": "^2.13.1",

    "@emotion/react": "^11.7.1",

    "@emotion/styled": "^11.6.0",

    "@material-ui/core": "^4.9.0",

    "@material-ui/icons": "^4.5.1",

    "@material-ui/lab": "^4.0.0-alpha.41",

    "@material-ui/pickers": "^3.3.10",

    "@mui/icons-material": "^5.3.1",

    "@mui/lab": "^5.0.0-alpha.66",

    "@mui/material": "^5.3.1",

    "@svgr/webpack": "^5.3.1",

    "date-fns": "^2.28.0",

    "jquery": "^3.4.1",

    "leaflet": "^1.6.0",

    "leaflet-draw": "1.0.4",

app/src/components/container/App.jsx

+20 −5
Original line number Diff line number Diff line
@@ -11,11 +11,21 @@ import MapContainer from "./MapContainer.jsx"; 
import ListSubheader from "@material-ui/core/ListSubheader";

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

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

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

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

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



/**

 * Controls css styling for this component using js to css

 */

const useStyles = makeStyles(theme => ({

  appPaper: {

    display: "flex",

    flexDirection: "row"

  },

  rightSidebar: {

    border: `1px solid ${theme.palette.divider}`

  },

  container: {

    display: "flex",

    alignContent: "center",
@@ -93,11 +103,16 @@ export default function App() { 
        </FormControl>

        {/* <AutoCompleteInput className={classes.autoComplete} /> */}

      </div>

      <Paper elevation={10}>

      <Paper elevation={10} className={classes.appPaper}>

        <div>

          <ConsoleContainer target={targetPlanet} />

          <MapContainer target={targetPlanet} />

          <WellKnownTextInput />

          <CreditsDisplay />

        </div>

        <div className={classes.rightSidebar}>

          <SearchAndFilterInput />

        </div>

      </Paper>

    </div>

  );

app/src/components/presentational/ConsoleAppBar.jsx

+2 −2
Original line number Diff line number Diff line
@@ -54,7 +54,7 @@ export default function ConsoleAppBar(props) { 
          <Grid

            className={classes.grid}

            container

            justify="space-between"

            justifyContent="space-between"

            alignItems="stretch"

          >

            <ConsoleProjectionButtons />
@@ -65,7 +65,7 @@ export default function ConsoleAppBar(props) { 
                container

                item

                xs

                justify="space-around"

                justifyContent="space-around"

                alignItems="center"

                wrap="nowrap"

              >

app/src/components/presentational/ConsoleCoordinates.jsx

+1 −1
Original line number Diff line number Diff line
@@ -58,7 +58,7 @@ export default function ConsoleCoordinates() { 
    <Grid

      container

      className={classes.grid}

      justify="center"

      justifyContent="center"

      alignItems="center"

      item

      xs={3}

app/src/components/presentational/ConsoleLonLatSelects.jsx

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

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

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

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

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

import AutorenewIcon from "@material-ui/icons/Autorenew";
@@ -46,9 +46,9 @@ const useStyles = makeStyles(theme => ({ 
  },

  paper: {

    display: "flex",

    border: `1px solid` & fade("#1971c2", 0.7),

    border: `1px solid` & alpha("#1971c2", 0.7),

    flexWrap: "wrap",

    backgroundColor: fade("#1971c2", 0.7)

    backgroundColor: alpha("#1971c2", 0.7)

  }

}));
@@ -60,8 +60,8 @@ const StyledToggleButton = withStyles(theme => ({ 
    height: 30,

    minHeight: 30,

    maxHeight: 30,

    color: fade("#f8f9fa", 0.8),

    backgroundColor: "transparent", //fade("#1971c2", 0.7),

    color: alpha("#f8f9fa", 0.8),

    backgroundColor: "transparent", //alpha("#1971c2", 0.7),

    border: "none",

    borderRadius: 0,

    "&:hover": {
@@ -87,7 +87,7 @@ const StyledToggleButton = withStyles(theme => ({ 


const StyledToggleButtonGroup = withStyles(theme => ({

  root: {

    backgroundColor: fade("#1971c2", 0.7),

    backgroundColor: alpha("#1971c2", 0.7),

    border: `1px solid ${theme.palette.divider}`,

    height: 37

  },
@@ -109,7 +109,7 @@ const StyledDivider = withStyles(theme => ({ 
    alignSelf: "stretch",

    height: "auto",

    margin: theme.spacing(1, 0.5),

    backgroundColor: fade("#f8f9fa", 0.8),

    backgroundColor: alpha("#f8f9fa", 0.8),

    width: 1

  }

}))(Divider);
@@ -149,7 +149,7 @@ export default function ConsoleLonLatSelects() { 
      container

      item

      wrap="nowrap"

      justify="center"

      justifyContent="center"

      alignItems="center"

      className={classes.grid}

      xs={7}