Merge pull request #33 from Geo-Kings/plugin (34ddfbb2) · Commits · aflab / astrogeology / Asc Geostac

src/components/presentational/FootprintResults.jsx

+49 −1

Original line number	Diff line number	Diff line
		@@ -119,6 +119,8 @@ export default function FootprintResults(props) {
		}

		let collectionUrls = {};
		let styleSheetUrls = [];

		for (const collection of props.target.collections) {


		@@ -133,26 +135,72 @@ export default function FootprintResults(props) {
		// change filter for the pygeo api
		myFilter = "&limit=" + step;
		}
		let styleSheet;
		const foundStyleSheet = collection.links.find(link=> link.rel == "stylesheet");

		if(foundStyleSheet) {
		styleSheet = foundStyleSheet.href;
		styleSheetUrls[collection.id] = styleSheet;
		}

		if(isInStacAPI \|\| isInPyAPI) {
		let itemsUrl = collection.links.find(link => link.rel === "items").href;
		collectionUrls[collection.id] = itemsUrl + myFilter + pageInfo;

		let style_url = null;
		for (let index = 0; index < collection.links.length; index++) {
		if (collection.links[index].rel === "stylesheet") {
		style_url = collection.links[index].href
		}
		}
		collectionUrls[collection.id + ": stylesheet"] = style_url;

		// if (collection.links.find(link => link.rel === "stylesheet").href != undefined) {
		// let styleUrl = collection.links.find(link => link.rel === "stylesheet").href;
		// collectionUrls[collection.id].style = styleUrl;
		// }

		// }
		}
		else {
		let itemsUrl = collection.links.find(link => link.rel === "items").href;
		collectionUrls[collection.id] = itemsUrl + pageInfo;
		}
		}

		async function fetchSLD(sld_url) {
		try {
		const response = await fetch(sld_url)
		if(!response.ok) {
		throw new Error('SLD response not ok ' + response.statusText);
		}
		const SLD_DATA = await response.text();
		//const parser = new DOMParser();
		//const sld_file = parser.parseFromString(SLD_DATA, text/xml);
		return SLD_DATA
		} catch (error) {
		console.error('SLD unable to be fetched', error);
		}
		}


		(async () => {
		let collections = await FetchObjects(collectionUrls);


		// Add extra properties to each collection
		for(const key in collections){
		collections[key].id = key;
		collections[key].title = props.target.collections.find(collection => collection.id === key).title;
		collections[key].url = collectionUrls[key];

		let sldtext = null;

		if (styleSheetUrls[key]) {
		sldtext = await fetchSLD(styleSheetUrls[key]);
		collections[key].styleSheets = sldtext;
		}

		}

		// Updates collectionId if switching to a new set of collections (new target)

src/components/presentational/HelpBox.jsx

0 → 100644

+93 −0

Original line number	Diff line number	Diff line
		import React, { useState } from 'react';

		function RasterVsVectorBox() {
		return (
		<div className="contentBox">
		<h3>Raster vs Vector</h3>
		<h4>Raster</h4>
		<p>
		The collections with the (Rastor) tag are Analysis Ready Data (ARD) holding obtained using the SpatioTemporal
		Asset Catalogs (STAC) API. These features include image footprints and their corresponding assets. More
		information can be found about this API using the "Help" button.
		</p>
		<h4>Vector</h4>
		<p>
		The collections with the (Vector) tag are footprints obtained from the USGS Vector API. These features
		include a multitude of collections condensed into an OGC compliant database to deliver Analysis Ready Data (ARD).
		Users will be able to sort this data using the "queryables'' tab to gather unique ID's or details for each feature in the collection.
		</p>
		</div>
		);
		}

		function SortingBox() {
		return (
		<div className="contentBox">
		<h3>Sorting</h3>
		<h4>Selected Area</h4>
		<p>To sort by selected area (Only works for Raster). To use, click the "square" icon
		to the left of the map and draw an area. The footprint card should update with only features
		within that area.
		</p>
		</div>
		);
		}

		function FootprintCardBox() {
		return (
		<div className="contentBox">
		<h3>Footprint Card</h3>
		<p> The footprint card to the right of the screen shows and displays all of the collection features
		selected from the large collections box. To show more features on the map and in the box click the
		"load more" button with the desired amount of features needed.

		</p>
		</div>
		);
		}

		export default function HelpBox({ isOpen, onClose }) {
		if(!isOpen) return null;

		const [showSubPopup, setShowSubPopup] = useState(null);

		const handleRasterVsVectorClick = () => {
		setShowSubPopup('rasterVsVector');
		};

		const handleSortingClick = () => {
		setShowSubPopup('sorting');
		};

		const handleFootprintCardClick = () => {
		setShowSubPopup('footprintCard');
		};

		return (
		<div id="helpBoxBackground">
		<div className="helpBoxContent">
		<h2>Help Menu</h2>
		<button className="helpButton" onClick={handleRasterVsVectorClick}>Raster vs Vector</button>
		<button className="helpButton" onClick={handleSortingClick}>Sorting</button>
		<button className="helpButton" onClick={handleFootprintCardClick}>Footprint Card</button>
		<button onClick={onClose} className="closeButton">Close</button>
		</div>

		{showSubPopup === 'rasterVsVector' &&
		<div className="subPopup">
		<RasterVsVectorBox/>
		</div>
		}
		{showSubPopup === 'sorting' &&
		<div className="subPopup">
		<SortingBox/>
		</div>
		}
		{showSubPopup === 'footprintCard' &&
		<div className="subPopup">
		<FootprintCardBox/>
		</div>
		}
		</div>
		);
		}

src/components/presentational/Menubar.jsx

+19 −1

Original line number	Diff line number	Diff line
		@@ -4,6 +4,7 @@ import OpenInFullIcon from "@mui/icons-material/OpenInFull";
		import CloseFullscreenIcon from "@mui/icons-material/CloseFullscreen";
		import HelpOutlineIcon from "@mui/icons-material/HelpOutline";
		import GeoStacWhiteIcon from "../../images/logos/geostac-logo-white.svg";
		import HelpBox from "./HelpBox.jsx";

		import Button from "@mui/material/Button";
		import Dialog from "@mui/material/Dialog";
		@@ -23,6 +24,16 @@ export default function Menubar(props) {
		setShowAbout(false);
		};

		const handleOpenHelpBox = () => {
		setShowHelpBox(true);
		};

		const handleCloseHelpBox = () => {
		setShowHelpBox(false);
		}

		const [showHelpBox, setShowHelpBox] = React.useState(false);

		return (
		<div id="menu-bar">
		<div className="menu-item" onClick={handleOpenAbout}>
		@@ -47,6 +58,13 @@ export default function Menubar(props) {
		<span className="menu-item-text">Help</span>
		</div>
		</a>

		<div className="menu-item"onClick={handleOpenHelpBox}>
		<span className="menu-item-text">Interactions</span>
		</div>

		<HelpBox isOpen={showHelpBox} onClose={handleCloseHelpBox} />

		<div className="menu-item" onClick={props.handleOpenCloseHeader}>
		{props.showHeaderFooter ? (
		<>

src/components/presentational/SearchAndFilterInput.jsx

+28 −29

Original line number	Diff line number	Diff line
		@@ -299,8 +299,6 @@ export default function SearchAndFilterInput(props) {

		}, [props.targetName]);



		/* Control IDs for reference:
		sortBySelect
		sortAscCheckBox
		@@ -356,8 +354,8 @@ export default function SearchAndFilterInput(props) {
		{pyGeoAPIFlag && (
		<div className="panelSection panelBar">
		<span>
		<FormControl sx={{ minWidth: 150 }}>
		<InputLabel id="selectQueryLabel" size="small">
		<FormControl sx={{ minWidth: 150 , minHeight: 40}}>
		<InputLabel id="selectQueryLabel" size="small" style={{paddingTop: '0.2rem'}}>
		Select Query
		</InputLabel>
		<Select
		@@ -367,6 +365,7 @@ export default function SearchAndFilterInput(props) {
		value={selectedOptions}
		onChange={handleOptionChange}
		renderValue={(selected) => selected.join(', ')}
		style={{height: 43}}
		>
		{queryableTitles.map((title) => (
		<MenuItem key={title} value={title}>

src/images/FGDC_svgs/elements/README.md

0 → 100644

+3 −0

Original line number	Diff line number	Diff line
		## SVG Markers

		These svg have been extracted from the FGDC files without scaling