Unverified Commit 456954e5 authored by amystamile's avatar amystamile Committed by GitHub
Browse files

Merge pull request #50 from zak52/testing_branch 

GeoTiff and MetaData PopUp
parents bc5cb23f d9a220c0

app/src/components/container/App.jsx

+2 −35
Original line number Diff line number Diff line
@@ -5,12 +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 Typography from '@mui/material/Typography';

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

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

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: {
@@ -51,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([]);
@@ -103,36 +99,7 @@ export default function App() { 
            </div>

          </div>

      </div>



      <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>

                <button onClick={geoTiffViewer.toggleViewer} 

                  id="geoTiffClose">

                    CLOSE

                </button>

            </Container>

          </AppBar>

          <div id = "geoTiff-Asset">

          </div>

          <AppBar position="relative">

            <Container>

              <button id="download-button">Download Asset</button>

            </Container>

          </AppBar>

        </Container>

      </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

+30 −45
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 Grid from "@mui/material/Grid";

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







let css = {
@@ -17,38 +16,20 @@ let css = { 
        width: "10%",

        height: "10%"

    },

    container: {

      display: "flex",

      flexWrap: "noWrap",

      width: 170,

      height: 40,

      marginTop: 5,

      verticalAlign: "middle",

    },

    grid: {

      width: 120,

      height: "100%"

    },

  };



function DisplayGeoTiff(props) {

    

    return (

        <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>

                <button 

                  id="geoTiffClose">

                    CLOSE

                </button>

            </Container>

          </AppBar>

          <div id = "geoTiff-Asset">

          </div>

        </Container>

      </div>

        );



}





/**
@@ -57,19 +38,23 @@ function DisplayGeoTiff(props) { 
 *

 * @component

 */

 export default function GeoTiffViewer() {

 export default function GeoTiffButton(props) {

  



  const geoTiffViewer = new GeoTiffViewer("");







    return (

        <div>

        <div sx={css.container}>

          <ButtonBase

                id="geoTiffViewerButton"

                focusRipple

                sx={css.button}

                onClick={geoTiffViewer.openModal}

              >

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

          </ButtonBase>



        </div>



    );

 }
 
 No newline at end of file

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');

	}