Skip to content
Snippets Groups Projects
Select Git revision
  • df461d79b5c84c9f89fa7c841ebd1c0450c141fa
  • main default protected
  • oleg-alexandrov-patch-1
  • radtan
  • 2.0
  • Kelvinrr-patch-1
  • acpaquette-patch-1
  • gxp_testing
  • 2.0.2
  • 2.0.1
  • 2.0.0
  • 1.7.0
  • 1.6.0
  • 1.5.2
  • 1.5.1
  • 1.5.0
  • 1.4.1
  • 1.4.0
  • 1.3.1
  • 1.3.0
  • 1.2.0
  • 1.1.1
  • 1.1.0
  • 1.0.0
24 results

UsgsAstroFrameSensorModel.cpp

Blame
  • HelpBox.jsx 3.76 KiB
    import React, { useState, useRef, useEffect } from 'react';
    
    function RasterVsVectorBox() {
        return (
            <div className="contentBox">
                <h3>Raster vs Vector</h3>
                <h4>Raster</h4>
                <p>
                The collections with the (Raster) 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 popupRef = useRef();
    
        useEffect(() => {
            function handleClickOutside(event) {
                if (event.target === popupRef.current) {
                    onClose();
                }
            }
    
            if (isOpen) {
                document.addEventListener('mousedown', handleClickOutside);
            }
            return () => {
                document.removeEventListener('mousedown', handleClickOutside);
            };
        }, [isOpen, onClose]);
    
        const handleRasterVsVectorClick = () => {
            setShowSubPopup('rasterVsVector');
        };
    
        const handleSortingClick = () => {
            setShowSubPopup('sorting');
        };
    
        const handleFootprintCardClick = () => {
            setShowSubPopup('footprintCard');
        };
    
        return (
            <div id="helpBoxBackground" ref={popupRef}>
                <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>
        );
    }