Merge branch 'master' into master (dfc302dc) · Commits · aflab / astrogeology / Asc Geostac

app/src/assets/img/ImageIcon.png

0 → 100644

+15.7 KiB

Loading image diff...

app/src/components/container/App.jsx

+3 −34

Original line number	Diff line number	Diff line
		@@ -5,9 +5,6 @@ import QueryConsole from "../presentational/QueryConsole.jsx";
		import CreditsDisplay from "../presentational/CreditsDisplay.jsx";
		import SearchAndFilterInput from "../presentational/SearchAndFilterInput.jsx";
		import ArrowLeftIcon from '@mui/icons-material/ArrowLeft';
		import Typography from '@mui/material/Typography';
		import AppBar from '@mui/material/AppBar';
		import Container from '@mui/material/Container';
		import GeoTiffViewer from "../../js/geoTiffViewer";
		import FootprintResults from "../presentational/FootprintResults.jsx";
		import { getFeatures } from "../../js/ApiJsonCollection";
		@@ -51,7 +48,8 @@ export default function App() {
		const [expandResults, setExpandResults] = React.useState(true);
		const [resultsExpandStyle, setResultsExpandStyle] = React.useState(css.stacked);

		const geoTiffViewer = new GeoTiffViewer("geoTiff-Container");
		// const geoTiffViewer = new GeoTiffViewer("geoTiff-Container");


		const [footprintData, setFootprintData] = React.useState([]);

		@@ -85,6 +83,7 @@ export default function App() {
		<ConsoleAppBar target={targetPlanet} bodyChange={handleTargetBodyChange} />
		</div>
		<MapContainer target={targetPlanet} />

		<div id="bottom-bar">
		<QueryConsole />
		<CreditsDisplay />
		@@ -103,36 +102,6 @@ export default function App() {
		</div>
		</div>
		</div>

		<div id="geoTiff-Container">
		<Container>
		<AppBar position="relative">
		<Container sx={{ mr: 2, display: { xs: 'none', md: 'flex' } }}>
		<Typography
		variant="h6"
		id="geoTiff-Asset-name"
		noWrap
		component="div"
		align="center"
		sx={{ mr: 2, display: { xs: 'none', md: 'flex' } }}
		>
		Displayed GeoTiff
		</Typography>
		<button onClick={geoTiffViewer.toggleViewer}
		id="geoTiffClose">
		CLOSE
		</button>
		</Container>
		</AppBar>
		<div id = "geoTiff-Asset">
		</div>
		<AppBar position="relative">
		<Container>
		<button id="download-button">Download Asset</button>
		</Container>
		</AppBar>
		</Container>
		</div>
		</div>
		);
		}

app/src/components/presentational/ConsoleAppBar.jsx

+7 −0

Original line number	Diff line number	Diff line
		@@ -5,6 +5,7 @@ import ConsoleLonLatSelects from "../presentational/ConsoleLonLatSelects.jsx";
		import ConsoleCoordinates from "./ConsoleCoordinates.jsx";
		import AppBar from "@mui/material/AppBar";
		import Divider from "@mui/material/Divider";
		import GeoTiffViewer from "../presentational/GeoTiffViewer.jsx";

		/**
		* Controls css styling for this component using js to css
		@@ -23,6 +24,8 @@ let css = {
		*/
		export default function ConsoleAppBar(props) {



		return (
		<AppBar
		sx={css.appbar}
		@@ -46,6 +49,10 @@ export default function ConsoleAppBar(props) {
		<div className="flexbar-item">
		<ConsoleLonLatSelects />
		</div>
		<Divider orientation="vertical" />
		<div className = "flex-bar-item">
		<GeoTiffViewer />
		</div>

		</div>
		</AppBar>

app/src/components/presentational/GeoTiffViewer.jsx

0 → 100644

+126 −0

Original line number	Diff line number	Diff line
		import React from "react";
		import Typography from "@mui/material/Typography";
		import AppBar from '@mui/material/AppBar';
		import Container from '@mui/material/Container';
		import ButtonBase from "@mui/material/ButtonBase";
		import imageAsset from "../../assets/img/ImageIcon.png";
		import { alpha } from "@mui/material/styles";
		import Dialog from '@mui/material/Dialog';
		import DialogTitle from '@mui/material/DialogTitle';
		import PropTypes from 'prop-types';
		import { Button } from "@mui/material";
		import Grid from "@mui/material/Grid";


		let css = {
		img: {
		width: "100%",
		height: "100%"
		},
		button: {
		display: "inline",
		width: "10%",
		height: "10%"
		},
		};



		function DisplayGeoTiff(props) {

		const { open, onClose } = props;

		const handleClose = () => {
		onClose();
		};


		return (
		<Dialog onClose={handleClose} open = {open}>
		<DialogTitle>
		Cloud Optimized GeoTiff
		</DialogTitle>
		<Container>
		<div id = "geoTiff-Asset">
		</div>
		</Container>
		</Dialog>
		/*
		<div id="geoTiff-Container">
		<Container>
		<AppBar position="relative">
		<Container sx={{ mr: 2, display: { xs: 'none', md: 'flex' } }}>
		<Typography
		variant="h6"
		id="geoTiff-Asset-name"
		noWrap
		component="div"
		align="center"
		sx={{ mr: 2, display: { xs: 'none', md: 'flex' } }}
		>
		Displayed GeoTiff
		</Typography>
		</Container>
		</AppBar>
		<div id = "geoTiff-Asset">
		</div>
		</Container>
		</div>
		*/
		);

		}

		DisplayGeoTiff.propTypes = {
		open: PropTypes.bool.isRequired,
		onClose: PropTypes.func.isRequired,
		GeoTiffURL: PropTypes.string.isRequired
		};


		/**
		* Main component that displays the geoTiff Viewer
		* user click events.
		*
		* @component
		*/
		export default function GeoTiffViewer(props) {

		const [dialogOpen, setDialogOpen] = React.useState(false);

		const handleDialogOpen = () => {
		setDialogOpen(true);
		}

		const handleClose = () => {
		setDialogOpen(false);
		props.close();
		}



		return (
		<Grid
		container
		item
		justifyContent="center"
		alignItems="center"
		xs
		>
		<ButtonBase
		id="geoTiffViewerButton"
		focusRipple
		sx={css.button}
		onClick={handleDialogOpen}
		>
		<img style={css.img} src={imageAsset} />
		</ButtonBase>
		<DisplayGeoTiff
		open={dialogOpen}
		onClose={handleClose}
		GeoTiffURL = {""}
		/>
		</Grid>

		);
		}
		No newline at end of file

app/src/styles.css

+1 −1

Original line number	Diff line number	Diff line
		@@ -340,7 +340,7 @@ summary {
		width: 400px;
		text-align: center;
		margin: 0 auto;
		display: none;
		display: block;
		}

		#geoTiff-Asset-name {