Merge pull request #2 from GeoSTAC/master (16c5061b) · Commits · aflab / astrogeology / Asc Geostac

app/src/assets/img/cartocosmos-logo.svg

deleted100644 → 0

+0 −27

Original line number	Diff line number	Diff line
		<?xml version="1.0" encoding="utf-8"?>
		<!-- Generator: Adobe Illustrator 24.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
		<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
		viewBox="0 0 1000 1000" style="enable-background:new 0 0 1000 1000;" xml:space="preserve">
		<path d="M987.2,484.61l-59.95-11.1c-6.47-105.81-51.74-204.92-127.71-279.34C725.73,121.86,629.17,79.04,526.49,72.75l-11.1-59.95
		C514.02,5.38,507.55,0,500,0s-14.02,5.38-15.39,12.8l-11.09,59.93C367.39,79.22,268,124.78,193.55,201.1
		c-71.92,73.73-114.53,170.06-120.8,272.41l-59.95,11.1C5.38,485.98,0,492.45,0,500c0,7.55,5.38,14.02,12.8,15.39l59.93,11.09
		c6.48,106.13,52.04,205.52,128.37,279.98c73.73,71.92,170.05,114.52,272.4,120.79l11.1,59.95c1.37,7.42,7.85,12.8,15.39,12.8
		s14.02-5.38,15.39-12.8l11.1-59.95c105.74-6.46,204.76-51.65,279.17-127.54c72.41-73.84,115.3-170.45,121.59-273.22l59.95-11.1
		c7.42-1.37,12.8-7.85,12.8-15.39C1000,492.45,994.62,485.98,987.2,484.61z M775.86,218.36c67.94,66.55,109.22,154.54,117.01,248.79
		l-36.11-6.68c-9.02-82.15-46.47-159.08-105.86-217.14c-57.41-56.13-132-91.34-211.36-100.08l-6.68-36.11
		C624.25,114.7,709.9,153.75,775.86,218.36z M542.52,159.36c72.84,9.05,141.22,41.45,194.6,92.45L579.74,360.45L542.52,159.36z
		M711.46,288.54L589.09,410.91l-6.22-33.6L711.46,288.54z M748.2,262.89c50.92,53.31,83.41,121.67,92.45,194.6l-200.58-37.13
		L748.2,262.89z M217.78,224.74c66.59-68.26,154.83-109.81,249.37-117.61l-6.69,36.13c-82.28,9.04-159.33,46.6-217.41,106.14
		c-55.97,57.37-91.08,131.86-99.81,211.08l-36.11,6.68C114.68,376.05,153.53,290.6,217.78,224.74z M377.32,417.13l-88.76-128.58
		l0.02,0.01l122.34,122.34L377.32,417.13z M159.36,457.48c9.05-72.83,41.45-141.23,92.45-194.6l108.64,157.37L159.36,457.48z
		M420.25,360.49L262.88,251.81c53.3-50.91,121.67-83.42,194.6-92.46L420.25,360.49z M15.65,500L15.65,500 M224.75,782.23
		c-68.27-66.59-109.82-154.84-117.62-249.38l36.13,6.69c9.03,82.26,46.57,159.28,106.08,217.36c57.38,56,131.89,91.13,211.13,99.86
		l6.68,36.11C376.05,885.32,290.61,846.48,224.75,782.23z M457.48,840.64c-72.83-9.05-141.23-41.45-194.6-92.45l157.37-108.64
		L457.48,840.64z M288.55,711.45l122.37-122.37l6.22,33.6L288.55,711.45z M251.81,737.12c-50.92-53.3-83.42-121.67-92.45-194.6
		l201.04,37.21L251.81,737.12z M424.35,424.35L500,15.65v0V500l75.65-75.65 M575.65,424.35L984.35,500l0,0L500,500l75.65,75.65
		L500,984.35v0V500l-75.65,75.65L15.65,500L500,500l-75.65-75.65 M589.09,589.09L589.09,589.09l33.6-6.22l88.77,128.59L589.09,589.09
		z M579.65,640.07l157.47,108.13c-53.32,50.93-121.67,83.41-194.59,92.45L579.65,640.07z M748.19,737.12L639.55,579.74l201.09-37.22
		C831.59,615.36,799.2,683.74,748.19,737.12z M781.49,776.01c-66.55,67.86-154.46,109.07-248.64,116.85l6.68-36.1
		c82.1-9.02,158.96-46.41,217.01-105.73c56.21-57.44,91.46-132.07,100.21-211.49l36.11-6.68
		C885.3,624.32,846.19,710.03,781.49,776.01z"/>
		</svg>

app/src/assets/img/geostaclogo.svg

0 → 100644

+1 −0

File added.

Preview size limit exceeded, changes collapsed.

app/src/components/container/App.jsx

+46 −10

Original line number	Diff line number	Diff line
		@@ -6,12 +6,27 @@ import CreditsDisplay from "../presentational/CreditsDisplay.jsx";
		import SearchAndFilterInput from "../presentational/SearchAndFilterInput.jsx";
		import ArrowLeftIcon from '@mui/icons-material/ArrowLeft';
		import GeoTiffViewer from "../../js/geoTiffViewer";
		import FootprintResults from "../presentational/FootprintResults.jsx";
		import { getFeatures } from "../../js/ApiJsonCollection";

		const css = {
		shown: {
		display: "block",
		expanded: {
		height: "100vh",
		display: "flex",
		flexDirection: "row",
		alignItems: "flex-start",
		background: "#f8f9fa"
		},
		stacked: {
		height: "100vh",
		display: "flex",
		flexDirection: "column",
		alignItems: "flex-start",
		background: "#f8f9fa"
		},
		shown: {
		display: "block"
		},
		hidden: {
		display: "none"
		}
		@@ -26,13 +41,26 @@ const css = {
		*/
		export default function App() {
		const [targetPlanet, setTargetPlanet] = React.useState("Mars");
		const [showSortBar, setShowSortBar] = React.useState(true);
		const [sortBarStyle, setSortBarStyle] = React.useState(css.hidden);

		const [showSidePanel, setShowSidePanel] = React.useState(false);
		const [sidePanelVisStyle, setSidePanelVisStyle] = React.useState(css.shown);

		const [expandResults, setExpandResults] = React.useState(true);
		const [resultsExpandStyle, setResultsExpandStyle] = React.useState(css.stacked);

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

		const ShowHideSort = () => {
		setShowSortBar(!showSortBar);
		setSortBarStyle(showSortBar ? css.shown : css.hidden);

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

		const showHideSort = () => {
		setShowSidePanel(!showSidePanel);
		setSidePanelVisStyle(showSidePanel ? css.shown : css.hidden);
		}

		const handlePanelLayout = (event) => {
		setExpandResults(expandResults => !expandResults);
		setResultsExpandStyle(expandResults ? css.expanded : css.stacked);
		}

		/**
		@@ -43,6 +71,11 @@ export default function App() {
		setTargetPlanet(value);
		};

		const handleFootprintClick = () => {
		setFootprintData(getFeatures);
		//console.log(footprintData);
		};

		return (
		<div id="app-container">
		<div id="main-column">
		@@ -57,13 +90,16 @@ export default function App() {
		</div>
		</div>
		<div id="right-bar">
		<div id="sort-filter-collapsed" onClick={ShowHideSort} >
		<div id="sort-filter-collapsed" onClick={showHideSort} >
		<ArrowLeftIcon/>
		Sort and Filter
		<ArrowLeftIcon/>
		</div>
		<div style={sortBarStyle}>
		<SearchAndFilterInput target={targetPlanet}/>
		<div style={sidePanelVisStyle}>
		<div style={resultsExpandStyle}>
		<SearchAndFilterInput target={targetPlanet} footprintNavClick={handleFootprintClick} />
		<FootprintResults changeLayout={handlePanelLayout}/>
		</div>
		</div>
		</div>
		</div>

app/src/components/container/MapContainer.jsx

+18 −26

Original line number	Diff line number	Diff line
		import React, { Component } from "react";
		import React, { useEffect } from "react";
		import AstroMap from "../../js/AstroMap";
		import AstroControlManager from "../../js/AstroControlManager";

		@@ -8,36 +8,30 @@ import AstroControlManager from "../../js/AstroControlManager";
		* for the map.
		*
		*
		* @class MapContainer
		* @extends {Component}
		* @component MapContainer
		* @param {target, map, mapChange}
		*/
		export default class MapContainer extends Component {
		/**
		*
		* @param {*} props target - target body name
		*/
		constructor(props) {
		super(props);
		this.state = {oldTarget: ""};
		}
		export default function MapContainer(props) {

		const [oldTarget, setOldTarget] = React.useState("");

		/**
		* Invoked when the component is successfully mounted to the DOM, then
		* handles all of the map intialization and creation.
		*/
		componentDidMount() {
		let map = new AstroMap("map-container", this.props.target, {});
		useEffect( () => {
		let map = new AstroMap("map-container", props.target, {});
		let controlManager = new AstroControlManager(map);
		controlManager.addTo(map);
		this.setState({oldTarget: this.props.target})
		}
		setOldTarget(props.target)
		}, []);

		/**
		* Invoked after the component's state has changed when the
		* target selector passes down a new target name from props.
		*/
		componentDidUpdate() {
		if (this.props.target != this.state.oldTarget ) {
		useEffect( () => {
		if (props.target != oldTarget ) {
		// remove old map container and append new container to its parent
		let oldContainer = document.getElementById("map-container");
		let parent = oldContainer.parentNode;
		@@ -54,16 +48,14 @@ export default class MapContainer extends Component {
		document.getElementById("projectionSouthPole").classList.remove("disabled");

		// create new map with updated target
		let map = new AstroMap("map-container", this.props.target, {});
		let map = new AstroMap("map-container", props.target, {});
		let controlManager = new AstroControlManager(map);
		controlManager.addTo(map);
		this.setState({oldTarget: this.props.target})
		}
		setOldTarget(props.target)
		}
		});

		render() {
		return (
		<div id="map-container" />
		);
		}
		}

app/src/components/presentational/CreditsDisplay.jsx

+8 −22

Original line number	Diff line number	Diff line
		@@ -4,7 +4,7 @@ import Link from "@mui/material/Link";
		import Divider from "@mui/material/Divider";
		import GitHubIcon from "@mui/icons-material/GitHub";
		import SvgIcon from "@mui/material/SvgIcon";
		import CartoCosmosIcon from "../../assets/img/cartocosmos-logo.svg";
		import GeoSTACIcon from "../../assets/img/geostaclogo.svg";


		export default function CreditsDisplay() {
		@@ -31,7 +31,7 @@ export default function CreditsDisplay() {
		color="inherit"
		style={{ fontWeight: 600 }}
		variant="caption"
		href="https://docs.google.com/document/d/1Wy5rwjEU7qACsI3jc-JdGEjh8jkq_v5DyQelfNOkjO4/edit?usp=sharing"
		href=""
		>
		User Manual
		</Link>
		@@ -39,28 +39,27 @@ export default function CreditsDisplay() {
		<Divider orientation="vertical" />
		<div className="credit-item">
		<Typography style={{ fontSize: 12 }} variant="caption">
		Made by{" "}
		<Link
		target="_blank"
		rel="noopener"
		variant="caption"
		color="inherit"
		style={{ fontWeight: 600 }}
		href="https://cefns.nau.edu/capstone/projects/CS/2020/CartoCosmos-S20/"
		href="https://www.ceias.nau.edu/capstone/projects/CS/2022/GeoSTAC/"
		>
		CartoCosmos{" "}
		GeoSTAC Project Website
		</Link>
		</Typography>
		<SvgIcon
		viewBox="0 0 1000 1000"
		viewBox="0 0 375 375"
		style={{
		color: "#343a40",
		top: 3,
		width: 13,
		width: 20,
		height: 13,
		position: "relative"
		}}
		component={CartoCosmosIcon}
		component={GeoSTACIcon}
		/>
		</div>
		<Divider orientation="vertical" />
		@@ -68,20 +67,7 @@ export default function CreditsDisplay() {
		<Link
		target="_blank"
		rel="noopener"
		color="inherit"
		variant="caption"
		style={{ fontWeight: 600 }}
		href="https://cartocosmos-test.readthedocs.io/en/latest/"
		>
		Jupyter Notebooks
		</Link>
		</div>
		<Divider orientation="vertical" />
		<div className="credit-item">
		<Link
		target="_blank"
		rel="noopener"
		href="https://github.com/CartoCosmos/CartoCosmos/"
		href="https://github.com/GeoSTAC/CartoCosmos-with-STAC"
		>
		<GitHubIcon
		style={{