Merge branch 'UpdateUI' of https://github.com/Geo-Kings/asc-geostac-forked into plugin (5037a06f) · Commits · aflab / astrogeology / Asc Geostac

src/components/presentational/HelpBox.jsx

0 → 100644

+74 −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>
		<p> This is some sort of information In Raster vs Vector</p>
		</div>
		);
		}

		function SortingBox() {
		return (
		<div className="contentBox">
		<h3>Sorting</h3>
		<p> This is some sort of information In Sorting</p>
		</div>
		);
		}

		function FootprintCardBox() {
		return (
		<div className="contentBox">
		<h3>Footprint Card</h3>
		<p> This is some sort of information in FootprintCard</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/SearchAndFilterInput.jsx

+43 −28

Original line number	Diff line number	Diff line
		@@ -19,6 +19,8 @@ import ArrowUpwardIcon from "@mui/icons-material/ArrowUpward";

		import { Collapse, Divider } from "@mui/material";
		import ListItemText from "@mui/material/ListItemText";
		//help box
		import HelpBox from "./HelpBox.jsx";

		/**
		* Controls css styling for this component using js to css
		@@ -85,6 +87,9 @@ export default function SearchAndFilterInput(props) {
		const [dateFromVal, setDateFromVal] = React.useState(null); // From Date
		const [dateToVal, setDateToVal] = React.useState(null); // To Date

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

		//const for callback
		const {UpdateQueryableTitles} = props;
		const handleExpandFilterClick = () => {
		@@ -299,7 +304,14 @@ export default function SearchAndFilterInput(props) {

		}, [props.targetName]);

		//help box
		const handleOpenHelpBox = () => {
		setShowHelpBox(true);
		};

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

		/* Control IDs for reference:
		sortBySelect
		@@ -356,8 +368,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 +379,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}>
		@@ -442,6 +455,8 @@ export default function SearchAndFilterInput(props) {
		</Collapse>
		</div>
		</Collapse>
		<button onClick={handleOpenHelpBox} style={{marginTop: "20px"}}>Help</button>
		<HelpBox isOpen={showHelpBox} onClose={handleCloseHelpBox} />
		</div>
		);
		}

src/js/FetchData.js

+14 −9

Original line number	Diff line number	Diff line
		@@ -112,14 +112,19 @@ export default async function Initialize(){
		if (hasFootprints) {
		for (const collection of stacApiCollections.collections){
		if (target.name == collection.summaries["ssys:targets"][0].toUpperCase()) {
		// Add a specification to the title in order to show what kind of data the user is requesting
		collection.title = collection.title.concat(" (Raster)")
		myCollections.push(collection);
		}
		}

		for (const pycollection of vectorApiCollections.collections){
		// view the collection as GEOJSON
		let target_name = pycollection.id.split('/')[0];
		if (target.name == target_name.toUpperCase()) {
		pycollection.links[9].href = "https://astrogeology.usgs.gov/pygeoapi" + pycollection.links[9].href;
		// Add a specification to the title in order to show what kind of data the user is requesting
		pycollection.title = pycollection.title.concat(" (Vector)");
		myCollections.push(pycollection);
		}
		}

src/styles.css

+73 −1

Original line number	Diff line number	Diff line
		@@ -490,3 +490,75 @@ summary {
		opacity: 1;
		pointer-events: all;
		}

		/*
		Help Box Inside Search and Filter
		*/
		#helpBoxBackground {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.7);
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 1000;
		}

		.helpBoxContent, .subPopup {
		width: 300px;
		padding: 20px;
		background-color: #fff;
		border-radius: 8px;
		box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
		text-align: center;
		display: flex;
		flex-direction: column;
		align-items: stretch;
		}
		.helpButton {
		margin: 10px 0;
		padding: 15px;
		flex: 1;
		border: none;
		border-radius: 5px;
		cursor: pointer;
		background-color: #351370;
		color: white;
		font-weight: bold;
		transition: background-color 0.3s;

		&:hover {
		background-color: #113851;
		}
		}
		.closeButton {
		margin: 10px 0;
		padding: 15px;
		flex: 1;
		border: none;
		border-radius: 5px;
		cursor: pointer;
		background-color: #e10e19;
		color: white;
		font-weight: bold;
		transition: background-color 0.8s ease;

		&:hover {
		background-color: #980000;
		}
		}

		.contentBox h3 {
		font-size: 24px;
		margin-bottom: 20px;
		color: #333;
		}

		.contentBox p {
		font-size: 16px;
		line-height: 1.5;
		color: #555;
		}