added Leaflet resize observer, removed old consoleContainer and WKT components. (b6bcb9a9) · Commits · aflab / astrogeology / Asc Geostac

app/src/components/container/App.jsx

+8 −2

Original line number	Diff line number	Diff line
		@@ -5,6 +5,7 @@ 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";
		import ArrowLeftIcon from '@mui/icons-material/ArrowLeft';

		const useStyles = makeStyles(theme => ({
		shown: {
		@@ -55,10 +56,15 @@ export default function App() {
		</div>
		</div>
		<div id="right-bar">
		<div id="sort-filter-collapsed" onClick={ShowHideSort} >Sort and Filter</div>
		<div id="sort-filter-collapsed" onClick={ShowHideSort} >
		<ArrowLeftIcon/>
		Sort and Filter
		<ArrowLeftIcon/>
		</div>
		<div className={sortBarStyle}>
		<SearchAndFilterInput />
		{/* instead of styled surrounding div: { showSortBar ? <SearchAndFilterInput /> : null } */}
		{/* instead of styled surrounding div: { showSortBar ? <SearchAndFilterInput /> : null }
		^ simpler but might break things if another part of the program is looking for it and it's not there? */}
		</div>
		</div>
		</div>

app/src/components/container/ConsoleContainer.jsx

deleted100644 → 0

+0 −14

Original line number	Diff line number	Diff line
		import React from "react";
		import ConsoleAppBar from "../presentational/ConsoleAppBar.jsx";

		/**
		* Container component that holds the ConsoleAppBar and all of its subcomponents
		*
		* @component
		*
		*/
		export default function ConsoleContainer(props) {
		return (
		<ConsoleAppBar target={props.target} bodyChange={props.bodyChange} />
		);
		}

app/src/components/container/MapContainer.jsx

+25 −22

Original line number	Diff line number	Diff line
		@@ -18,11 +18,7 @@ export default class MapContainer extends Component {
		*/
		constructor(props) {
		super(props);
		this.state = {};
		}

		shouldComponentUpdate(){
		return false;
		this.state = {oldTarget: ""};
		}

		/**
		@@ -33,6 +29,7 @@ export default class MapContainer extends Component {
		let map = new AstroMap("map-container", this.props.target, {});
		let controlManager = new AstroControlManager(map);
		controlManager.addTo(map);
		this.setState({oldTarget: this.props.target})
		}

		/**
		@@ -40,6 +37,7 @@ export default class MapContainer extends Component {
		* target selector passes down a new target name from props.
		*/
		componentDidUpdate() {
		if (this.props.target != this.state.oldTarget ) {
		// remove old map container and append new container to its parent
		let oldContainer = document.getElementById("map-container");
		let parent = oldContainer.parentNode;
		@@ -59,6 +57,11 @@ export default class MapContainer extends Component {
		let map = new AstroMap("map-container", this.props.target, {});
		let controlManager = new AstroControlManager(map);
		controlManager.addTo(map);
		this.setState({oldTarget: this.props.target})
		}
		else {
		// TODO: L.Map.invalidateSize(); // but in a different file???
		}
		}

		render() {

app/src/components/presentational/WellKnownTextInput.jsx

deleted100644 → 0

+0 −112

Original line number	Diff line number	Diff line
		import React from "react";
		import Typography from "@material-ui/core/Typography";
		import Button from "@material-ui/core/Button";
		import TextField from "@material-ui/core/TextField";
		import Zoom from "@material-ui/core/Zoom";
		import { makeStyles, withStyles, alpha } from "@material-ui/core/styles";
		import Link from "@material-ui/core/Link";
		import StyledTooltip from "./StyledTooltip.jsx";

		/**
		* Controls css styling for this component using js to css
		*/
		const useStyles = makeStyles(theme => ({
		root: {
		textAlign: "center",
		backgroundColor: "#f8f9fa",
		overflow: "hidden"
		},
		container: {
		padding: "1rem",
		height: 55,
		width: "95%",
		display: "flex",
		justifyContent: "space-between",
		alignItems: "center",
		margin: "auto"
		},
		textbox: {
		flex: "3 1 auto",
		backgroundColor: "#e9ecef",
		"&:focus": {
		borderColor: "#1971c2"
		}
		},
		button: {
		height: 40,
		color: "#fff",
		backgroundColor: "#1971c2",
		marginLeft: "1rem",
		alignSelf: "center",
		"&:hover": {
		backgroundColor: alpha("#1971c2", 0.7)
		}
		},
		title: {
		padding: "0.2rem",
		color: "#343a40",
		fontSize: 18,
		fontWeight: 600
		}
		}));

		/**
		* Component that accepts user input of Well-Known Text
		*
		* @component
		* @example
		* <WellKnownTextInput />
		*
		*/
		export default function WellKnownTextInput() {
		const classes = useStyles();
		const wktLink =
		"https://www.vertica.com/docs/9.2.x/HTML/Content/Authoring/AnalyzingData/Geospatial/Spatial_Definitions/WellknownTextWKT.htm";

		return (
		<div className={classes.root}>
		<details>
		<summary id="wkt-collapsed">
		WKT String Input
		</summary>
		<div id="wkt-expanded">
		<StyledTooltip
		title={
		<Typography>
		Enter a <Link href={wktLink}>Well-Known Text</Link> string then
		press "Draw" to plot the polygon on the map.
		</Typography>
		}
		enterDelay={800}
		leaveDelay={250}
		interactive
		arrow
		placement="top"
		TransitionComponent={Zoom}
		>
		<div className={classes.container}>
		<TextField
		className={classes.textbox}
		variant="outlined"
		label="Enter WKT String"
		InputLabelProps={{
		shrink: true
		}}
		id="wktTextBox"
		name="fname"
		type="text"
		autoComplete="off"
		multiline
		rows={2}
		size="small"
		/>
		<Button variant="contained" className={classes.button} id="wktButton">
		Draw
		</Button>
		</div>
		</StyledTooltip>
		</div>
		</details>
		</div>
		);
		}

app/src/js/AstroMap.js

+8 −0

Original line number	Diff line number	Diff line
		@@ -102,6 +102,14 @@ export default L.Map.AstroMap = L.Map.extend({
		this.on("baselayerchange", function(e) {
		this.setCurrentLayer(e["layer"]);
		});

		// Resize Observer
		const mapDivEl = document.getElementById(mapDiv);
		const resizeObserver = new ResizeObserver(() => {
		this.invalidateSize();
		});

		resizeObserver.observe(mapDivEl);
		},

		/**