Commit 7f02318d authored by zchkfmn's avatar zchkfmn
Browse files

GeoTiff and MetaData PopUp viewer

parent 16c5061b

app/src/components/container/App.jsx

+2 −2
Original line number Diff line number Diff line
@@ -5,9 +5,9 @@ import QueryConsole from "../presentational/QueryConsole.jsx"; 
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";

import DisplayGeoTiff from "../presentational/DisplayGeoTiff.jsx";



const css = {

  expanded: {
@@ -48,7 +48,6 @@ export default function App() { 
  const [expandResults, setExpandResults] = React.useState(true);

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



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





  const [footprintData, setFootprintData] = React.useState([]);
@@ -102,6 +101,7 @@ export default function App() { 
            </div>

          </div>

      </div>

      <DisplayGeoTiff/>

    </div>

  );

}

app/src/components/presentational/DisplayGeoTiff.jsx

0 → 100644
+37 −0
Original line number Diff line number Diff line 
import React from "react";

import GeoTiffViewer from "../../js/geoTiffViewer.js";







export default function DisplayGeoTiff() {



    const geoTiffViewer = new GeoTiffViewer("");

  

      

      return (

        <div>

            <div id="GeoTiffModal">

                <div id="GeoTiffModalHeader">

                    <div id="GeoTiffTitle">

                        Displayed GeoTiff:

                    </div>

                    <button id="GeoTiffCloseButton" onClick={geoTiffViewer.closeModal}>&times;</button>

                </div>

                <div id="GeoTiffAssetsDiv">

                    <center>

                    <img id="GeoTiffAsset"></img>

                    </center>

                </div>

                <div id="GeoTiffModalFooter">

                    <div className="resultSub" className="resultSub" id = "GeoTiffCollection"></div>

                    <div className="resultSub" id = "GeoTiffID"></div>

                    <div className="resultSub" id = "GeoTiffDate"></div>

                </div>

            </div>

            <div id="GeoTiffOverlay"></div>

        </div>

        



          );

  

  }
 
 No newline at end of file

app/src/components/presentational/FootprintResults.jsx

+15 −3
Original line number Diff line number Diff line
@@ -10,11 +10,16 @@ import PreviewIcon from '@mui/icons-material/Preview'; 
import LaunchIcon from '@mui/icons-material/Launch';

import OpenInFullIcon from '@mui/icons-material/OpenInFull';

import CloseFullscreenIcon from '@mui/icons-material/CloseFullscreen';

import PhotoIcon from '@mui/icons-material/AddAPhoto';



// object with results

import { getFeatures } from "../../js/ApiJsonCollection";

import { autocompleteClasses } from "@mui/material";



// geotiff thumbnail viewer

import DisplayGeoTiff from "../presentational/DisplayGeoTiff.jsx";

import GeoTiffViewer from "../../js/geoTiffViewer.js";





/**

 * Controls css styling for this component using js to css
@@ -47,11 +52,17 @@ export default function FootprintResults(props) { 


  const [features, setFeatures] = React.useState([]);



  const geoTiffViewer = new GeoTiffViewer("GeoTiffAsset");



  const showMetadata = value => () => {

    // launch metadata popup here

    geoTiffViewer.displayGeoTiff(value.assets.thumbnail.href);

    geoTiffViewer.changeMetaData(value.collection, value.id, value.properties.datetime);

    geoTiffViewer.openModal();

    console.log(value);

  }



  



  useEffect(() => {

    setTimeout(() => {

      setFeatures(getFeatures);
@@ -82,7 +93,8 @@ export default function FootprintResults(props) { 
        {features.map((feature) => (

          <div className="resultContainer" key={feature.id}>

            <div className="resultImgDiv">

              <img className="resultImg" src={feature.assets.thumbnail.href}/>

              <img className="resultImg" 

              src={feature.assets.thumbnail.href}/>

            </div>

            <div className="resultData">

              <div className="resultSub">

app/src/components/presentational/GeoTiffViewer.jsx

+4 −74
Original line number Diff line number Diff line 
import React from "react";

import Typography from "@mui/material/Typography";

import AppBar from '@mui/material/AppBar';

import Container from '@mui/material/Container';

import ButtonBase from "@mui/material/ButtonBase";

import imageAsset from "../../assets/img/ImageIcon.png";

import { alpha } from "@mui/material/styles";

import Dialog from '@mui/material/Dialog';

import DialogTitle from '@mui/material/DialogTitle';

import PropTypes from 'prop-types';

import { Button } from "@mui/material";

import Grid from "@mui/material/Grid";

import GeoTiffViewer from "../../js/geoTiffViewer.js";





let css = {
@@ -26,56 +19,6 @@ let css = { 






function DisplayGeoTiff(props) {



  const { open, onClose } = props;



  const handleClose = () => {

    onClose();

  };



    

    return (

      <Dialog onClose={handleClose} open = {open}>

        <DialogTitle>

          Cloud Optimized GeoTiff

        </DialogTitle>

        <Container>

          <div id = "geoTiff-Asset">

          </div>

        </Container>

      </Dialog>

      /*

        <div id="geoTiff-Container">

        <Container>

          <AppBar position="relative">

            <Container sx={{ mr: 2, display: { xs: 'none', md: 'flex' } }}>

              <Typography 

                variant="h6"

                id="geoTiff-Asset-name"

                noWrap

                component="div"

                align="center"

                sx={{ mr: 2, display: { xs: 'none', md: 'flex' } }}

                >

                  Displayed GeoTiff

                </Typography>

            </Container>

          </AppBar>

          <div id = "geoTiff-Asset">

          </div>

        </Container>

      </div>

      */

        );



}



DisplayGeoTiff.propTypes = {

  open: PropTypes.bool.isRequired,

  onClose: PropTypes.func.isRequired,

  GeoTiffURL: PropTypes.string.isRequired

};





/**
@@ -84,18 +27,10 @@ DisplayGeoTiff.propTypes = { 
 *

 * @component

 */

 export default function GeoTiffViewer(props) {

  

  const [dialogOpen, setDialogOpen] = React.useState(false);

 export default function GeoTiffButton(props) {

  

  const handleDialogOpen = () => {

    setDialogOpen(true);

  }



  const handleClose = () => {

    setDialogOpen(false);

    props.close();

  }

  const geoTiffViewer = new GeoTiffViewer("");
@@ -111,15 +46,10 @@ DisplayGeoTiff.propTypes = { 
                id="geoTiffViewerButton"

                focusRipple

                sx={css.button}

                onClick={handleDialogOpen}

                onClick={geoTiffViewer.openModal}

              >

                <img style={css.img} src={imageAsset} />

          </ButtonBase>

          <DisplayGeoTiff

            open={dialogOpen}

            onClose={handleClose}

            GeoTiffURL = {""}

          />

        </Grid>



    );

app/src/js/geoTiffViewer.js

+39 −33
Original line number Diff line number Diff line
@@ -14,8 +14,6 @@ export default class GeoTiffViewer { 
	**/

	constructor( imageDiv )

	{

		this._imageArray = [];



		this._imgDiv = imageDiv;



		const currentIndex = 0;
@@ -31,15 +29,7 @@ export default class GeoTiffViewer { 
				const imageObjectUrl = URL.createObjectURL(imageBlob);

				console.log(imageObjectUrl);

			})

	*/

	/**

	 * function name: displayGeoTiff

	 * Desc: Takes in a URL for the asset file and changes the content

	 * inside of the geotiff div to display the asset to user

	 * Input: imageURL - String: Url link from the STAC catalogue

	 * */

	displayGeoTiff( imageURL )

	{



			this._imageArray.push(imageURL);



		(async () => {
@@ -63,35 +53,51 @@ export default class GeoTiffViewer { 
			document.getElementById(this._imgDiv).appendChild(img);

			

		})

	*/

	/**

	 * function name: displayGeoTiff

	 * Desc: Takes in a URL for the asset file and changes the content

	 * inside of the geotiff div to display the asset to user

	 * Input: imageURL - String: Url link from the STAC catalogue

	 * */

	displayGeoTiff( imageURL )

	{

		



		document.getElementById("GeoTiffAsset").src=imageURL;



	}





	/**

	 * Function name: toggleViewer

	 * Desc: This function will open and close the geotiffviewer depending

	 * on whether it is open or closed.

	 * Note: Could adjust the main maps size to display geotiff next to map 

	 * */

	toggleViewer()

	changeMetaData( GeoTiffCollectionName, GeoTiffIDName, GeoTiffDateName )

	{

		const geoTiffContainerDiv = document.getElementById("geoTiff-Container") 

		document.getElementById("GeoTiffCollection").innerHTML = ("<strong>Collection:</strong>&nbsp;" 

			+ GeoTiffCollectionName);



		if(geoTiffContainerDiv != null )

		{

			if (geoTiffContainerDiv.style.display == "none")

			{

				geoTiffContainerDiv.style.display = "block";

		document.getElementById("GeoTiffID").innerHTML = ("<strong>ID:</strong>&nbsp;" 

			+ GeoTiffIDName.substring(0));



		document.getElementById("GeoTiffDate").innerHTML = ("<strong>Date:</strong>&nbsp;" 

			+ GeoTiffDateName);



	}

			else



	openModal()

	{

				geoTiffContainerDiv.style.display = "none"; 

		if (document.getElementById("GeoTiffModal") == null) {

			return;

		}

		document.getElementById("GeoTiffModal").classList.add('active');

		document.getElementById("GeoTiffOverlay").classList.add('active');



	}



	closeModal()

	{

		if (document.getElementById("GeoTiffModal") == null) {

			return;

		}

		document.getElementById("GeoTiffModal").classList.remove('active');

		document.getElementById("GeoTiffOverlay").classList.remove('active');

	}