Skip to content
Snippets Groups Projects
Commit a6047093 authored by Zheng Meyer's avatar Zheng Meyer
Browse files

add thumbnail or DS9 view in page

parent 7e5a46dd
No related branches found
No related tags found
1 merge request!5Esap gui dev
Hide whitespace changes
Inline Side-by-side
Showing
with 146 additions and 185 deletions
src/App.css
+ 0
− 71
View file @ a6047093
...@@ -20,74 +20,3 @@ ...@@ -20,74 +20,3 @@
.App-link { .App-link {
color: #1315c4; color: #1315c4;
} }
.Observations-header {
background-color: #282c34;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: inherit;
font-size: calc(10px + 2vmin);
color: white;
}
.card-img-top {
width: 30vh;
height: 15vw;
object-fit: cover;
background-color: darkgrey;
}
.card-datasource {
display: flex;
object-fit: cover;
background-color: #d4d4d4;
}
.card-description {
display: flex;
//background-color: #BBDEFB;
font-family: Raleway;
//font-size: 14pt;
}
.card-telescope {
display: flex;
width: 40vh;
height: 35vw;
}
.card-query {
display: inline;
align-items: flex-start;
justify-content: inherit;
background-color: lightgrey;
}
.key {
font-weight: bold;
}
.value {
font-style: italic;
}
@media (min-width:400px) {
.card-columns {
column-count: 1;
}
}
@media (min-width:800px) {
.card-columns {
column-count: 2;
}
}
@media (min-width:1200px) {
.card-columns {
column-count: 3;
}
}
src/components/FitsViewer.js deleted 100644 → 0
+ 0
− 20
View file @ 7e5a46dd
import React, { useContext } from "react";
import { QueryContext } from "../contexts/QueryContext";
export default function FitsViewer() {
const { fits } = useContext(QueryContext)
const url = "https://js9.si.edu/js9/js9.html?url="+JSON.parse(JSON.stringify(fits))+"&colormap=viridis&scale=log"
console.log(fits);
console.log("fits url: ", url);
return (
<div className="embed-responsive embed-responsive-16by9">
<iframe
className="embed-responsive-item"
src={url}
allowFullScreen
></iframe>
</div>
);
}
src/components/query/ASTRONVOResults.js
+ 29
− 44
View file @ a6047093
import React, { useContext } from "react"; import React, { useContext } from "react";
import { Table, Alert, Button } from "react-bootstrap"; import { Table, Alert } from "react-bootstrap";
import { useHistory } from "react-router-dom";
import { QueryContext } from "../../contexts/QueryContext"; import { QueryContext } from "../../contexts/QueryContext";
import LoadingSpinner from "../LoadingSpinner"; import LoadingSpinner from "../LoadingSpinner";
import Paginate from "../Paginate"; import Paginate from "../Paginate";
import HandlePreview from "./HandlePreview";
import Preview from "./Preview";
export default function ASTRONVOResults({ catalog }) { export default function ASTRONVOResults({ catalog }) {
const { queryMap, page, setPage, setFits } = useContext(QueryContext); const { queryMap, page, setPage, preview } = useContext(QueryContext);
const history = useHistory();
if (!queryMap) return null; if (!queryMap) return null;
if (queryMap.get(catalog).status === "fetched") { if (queryMap.get(catalog).status === "fetched") {
if (!("results" in queryMap.get(catalog).results)) if (!("results" in queryMap.get(catalog).results))
...@@ -49,46 +49,31 @@ export default function ASTRONVOResults({ catalog }) { ...@@ -49,46 +49,31 @@ export default function ASTRONVOResults({ catalog }) {
<tbody> <tbody>
{queryMap.get(catalog).results.results.map((result) => { {queryMap.get(catalog).results.results.map((result) => {
return ( return (
<tr key={result.result}> <>
{/* <th> <tr key={result.url}>
<InputGroup> {/* <th>
<InputGroup.Checkbox /> <InputGroup>
</InputGroup> <InputGroup.Checkbox />
</th> */} </InputGroup>
<td>{result.obs_collection}</td> </th> */}
<td>{Number(result.ra).toFixed(1)}</td> <td>{result.obs_collection}</td>
<td>{Number(result.dec).toFixed(1)}</td> <td>{Number(result.ra).toFixed(1)}</td>
<td>{Number(result.fov).toFixed(1)}</td> <td>{Number(result.dec).toFixed(1)}</td>
<td>{result.dataproduct_type}</td> <td>{Number(result.fov).toFixed(1)}</td>
<td>{result.calibration_level}</td> <td>{result.dataproduct_type}</td>
<td>{Number((result.size / 1024).toFixed(1))} MB</td> <td>{result.calibration_level}</td>
<td> <td>{Number((result.size / 1024).toFixed(1))} MB</td>
<a href={result.url} rel="noopener noreferrer" download> <td>
Download data <a href={result.url} rel="noopener noreferrer" download>
</a> Download data
</td> </a>
<td> </td>
{/* if results is in .fits format and is smaller than 10 MB, <td>
display it with js9 */} <HandlePreview result={result} />
{((result.url.includes('fits') || (result.url.includes('FITS'))) && </td>
Number(result.size) < 10000) ? </tr>
(<Button {preview === result.url && <tr key={result.url}><Preview /></tr>}
onClick={() => { </>
setFits(result.result);
history.push('/fitsviewer');
}}
>View fits with DS9</Button>) :
(result.thumbnail && (
<a
href={result.thumbnail}
target="_blank"
rel="noopener noreferrer"
className="ml-3"
>
View Thumbnail
</a>))}
</td>
</tr>
); );
})} })}
</tbody> </tbody>
......
src/components/query/ApertifResults.js
+ 8
− 12
View file @ a6047093
import React, { useContext } from "react"; import React, { useContext } from "react";
import { Table, Alert } from "react-bootstrap"; import { Table, Alert, Row } from "react-bootstrap";
import { QueryContext } from "../../contexts/QueryContext"; import { QueryContext } from "../../contexts/QueryContext";
import LoadingSpinner from "../LoadingSpinner"; import LoadingSpinner from "../LoadingSpinner";
import Paginate from "../Paginate"; import Paginate from "../Paginate";
import HandlePreview from "./HandlePreview";
import Preview from "./Preview";
export default function ApertifResults({ catalog }) { export default function ApertifResults({ catalog }) {
const { queryMap, page, setPage } = useContext(QueryContext); const { queryMap, page, setPage, preview } = useContext(QueryContext);
if (!queryMap) return null; if (!queryMap) return null;
if (queryMap.get(catalog).status === "fetched") { if (queryMap.get(catalog).status === "fetched") {
if (!("results" in queryMap.get(catalog).results)) if (!("results" in queryMap.get(catalog).results))
...@@ -47,6 +49,7 @@ export default function ApertifResults({ catalog }) { ...@@ -47,6 +49,7 @@ export default function ApertifResults({ catalog }) {
<tbody> <tbody>
{queryMap.get(catalog).results.results.map((result) => { {queryMap.get(catalog).results.results.map((result) => {
return ( return (
<>
<tr key={result.PID}> <tr key={result.PID}>
{/* <th> {/* <th>
<InputGroup> <InputGroup>
...@@ -71,18 +74,11 @@ export default function ApertifResults({ catalog }) { ...@@ -71,18 +74,11 @@ export default function ApertifResults({ catalog }) {
</a> </a>
</td> </td>
<td> <td>
{result.thumbnail ? ( <HandlePreview result={result} />
<a
href={result.thumbnail}
target="_blank"
rel="noopener noreferrer"
className="ml-3"
>
View Thumbnail
</a>
) : null}
</td> </td>
</tr> </tr>
{preview === result.url && <tr key={result.url}><Preview /></tr>}
</>
); );
})} })}
</tbody> </tbody>
......
src/components/query/HandlePreview.js 0 → 100644
+ 34
− 0
View file @ a6047093
import React, { useContext } from 'react';
import { Button } from 'react-bootstrap';
import { QueryContext } from '../../contexts/QueryContext';
export default function HandlePreview({ result }) {
const { preview, setPreview, setDS9, setURL } = useContext(QueryContext);
return (
<>
{/* if results is in .fits format and is smaller than 10 MB,
display it with js9 */}
{((result.url.includes('fits') || (result.url.includes('FITS'))) &&
Number(result.size) < 10000) ?
(<Button
onClick={() => {
preview ? setPreview("") : setPreview(result.url);
setURL(result.url);
setDS9(true);
}}
>View fits with DS9</Button>) :
(result.thumbnail && (
<Button
onClick={()=>{
preview ? setPreview("") : setPreview(result.url);
setURL(result.thumbnail);
}}
>
View Thumbnail
</Button>
))
}
</>
)
}
src/components/query/Preview.js 0 → 100644
+ 31
− 0
View file @ a6047093
import React, { useContext } from 'react';
import { Image } from 'react-bootstrap';
import { QueryContext } from '../../contexts/QueryContext';
export default function Preview() {
const { preview, ds9, url, key } = useContext(QueryContext);
return (
<>
{console.log("key: ", key)}
{console.log("url: ", url)}
{(preview &&
(ds9 ?
<iframe
className="embed-responsive-item"
height="700"
width="700"
src={"https://js9.si.edu/js9/js9.html?url="+JSON.parse(JSON.stringify(url))+"&colormap=viridis&scale=log"}
allowFullScreen
></iframe>
:
<Image
width={700}
className={"mt-3"}
src={url}
alt=""
/>)
)}
</>
)
}
src/components/query/VOServiceResults.js
+ 35
− 31
View file @ a6047093
import React, { useContext } from "react"; import React, { useContext } from "react";
import { Redirect, useHistory } from "react-router-dom";
import { Alert, Table, Button } from "react-bootstrap"; import { Alert, Table, Button } from "react-bootstrap";
import { QueryContext } from "../../contexts/QueryContext"; import { QueryContext } from "../../contexts/QueryContext";
import LoadingSpinner from "../LoadingSpinner"; import LoadingSpinner from "../LoadingSpinner";
import Paginate from "../Paginate"; import Paginate from "../Paginate";
import Preview from "./Preview";
export default function VORegistryResults({ catalog }) { export default function VORegistryResults({ catalog }) {
const { queryMap, page, setPage, setFits } = useContext(QueryContext); const { queryMap, page, setPage, preview, setPreview, setURL, setDS9 } = useContext(QueryContext);
const history = useHistory();
if (!queryMap.get(catalog)) return null; if (!queryMap.get(catalog)) return null;
console.log("VO service queryMap:", queryMap.get(catalog)); console.log("VO service queryMap:", queryMap.get(catalog));
...@@ -43,34 +42,39 @@ export default function VORegistryResults({ catalog }) { ...@@ -43,34 +42,39 @@ export default function VORegistryResults({ catalog }) {
<tbody> <tbody>
{queryMap.get(catalog).results.results.map((result) => { {queryMap.get(catalog).results.results.map((result) => {
return ( return (
<tr key={result.result}> <>
<td> <tr key={result.result}>
<a href={result.result} rel="noopener noreferrer" download> <td>
{result.result} <a href={result.result} rel="noopener noreferrer" download>
</a> {result.result}
</td> </a>
<td> </td>
{/* if results is in .fits format and is smaller than 10 MB, <td>
display it with js9 */} {/* if results is in .fits format and is smaller than 10 MB,
{((result.result.includes('fits') || (result.result.includes('FITS'))) && display it with js9 */}
Number(result.size) < 10000) ? {((result.result.includes('fits') || (result.result.includes('FITS'))) &&
(<Button Number(result.size) < 10000) ?
onClick={() => { (<Button
setFits(result.result); onClick={() => {
history.push('/fitsviewer'); preview ? setPreview("") : setPreview(result.result);
}} setURL(result.result);
>View fits with DS9</Button>) : setDS9(true);
(result.thumbnail && ( }}
<a >View fits with DS9</Button>) :
href={result.thumbnail} (result.thumbnail && (
target="_blank" <Button
rel="noopener noreferrer" onClick={()=>{
className="ml-3" preview ? setPreview("") : setPreview(result.result);
> setURL(result.thumbnail);
View Thumbnail }}
</a>))} >
</td> View Thumbnail
</tr> </Button>
))}
</td>
</tr>
{preview === result.url && <tr key={result.url}><Preview /></tr>}
</>
); );
})} })}
</tbody> </tbody>
......
src/contexts/QueryContext.js
+ 9
− 3
View file @ a6047093
...@@ -10,12 +10,14 @@ export function QueryContextProvider({ children }) { ...@@ -10,12 +10,14 @@ export function QueryContextProvider({ children }) {
const queryMap = useMap(); const queryMap = useMap();
const [formData, setFormData] = useState(); const [formData, setFormData] = useState();
const [page, setPage] = useState(1); const [page, setPage] = useState(1);
const [fits, setFits] = useState("https://uilennest.net/astrobase/data/191231001/3836665.fits"); const [url, setURL] = useState("https://uilennest.net/astrobase/data/191231001/3836665.fits");
const [dplevel, setDPLevel] = useState(); const [dplevel, setDPLevel] = useState();
const [collection, setCollection] = useState(); const [collection, setCollection] = useState();
const [config, setConfig] = useState(); const [config, setConfig] = useState();
const [configName, setConfigName] = useState(defaultConf); const [configName, setConfigName] = useState(defaultConf);
const { api_host } = useContext(GlobalContext); const { api_host } = useContext(GlobalContext);
const [preview, setPreview] = useState(false);
const [ds9, setDS9] = useState(false);
useEffect(() => { useEffect(() => {
let configNameString = ""; let configNameString = "";
...@@ -53,8 +55,8 @@ export function QueryContextProvider({ children }) { ...@@ -53,8 +55,8 @@ export function QueryContextProvider({ children }) {
queryMap, queryMap,
formData, formData,
setFormData, setFormData,
fits, url,
setFits, setURL,
dplevel, dplevel,
setDPLevel, setDPLevel,
collection, collection,
...@@ -62,6 +64,10 @@ export function QueryContextProvider({ children }) { ...@@ -62,6 +64,10 @@ export function QueryContextProvider({ children }) {
config, config,
setConfigName, setConfigName,
defaultConf, defaultConf,
ds9,
setDS9,
preview,
setPreview,
}} }}
> >
{children} {children}
......
src/routes/Routes.js
+ 0
− 4
View file @ a6047093
...@@ -11,7 +11,6 @@ import { QueryContext } from "../contexts/QueryContext"; ...@@ -11,7 +11,6 @@ import { QueryContext } from "../contexts/QueryContext";
import Rucio from "../components/Rucio"; import Rucio from "../components/Rucio";
import Interactive from "../components/Interactive"; import Interactive from "../components/Interactive";
import { IVOAContextProvider } from "../contexts/IVOAContext"; import { IVOAContextProvider } from "../contexts/IVOAContext";
import FitsViewer from "../components/FitsViewer";
export default function Routes() { export default function Routes() {
const { handleLogin, handleLogout, handleError } = useContext(GlobalContext); const { handleLogin, handleLogout, handleError } = useContext(GlobalContext);
...@@ -31,9 +30,6 @@ export default function Routes() { ...@@ -31,9 +30,6 @@ export default function Routes() {
<Route exact path="/interactive"> <Route exact path="/interactive">
<Interactive /> <Interactive />
</Route> </Route>
<Route exact path="/fitsviewer">
<FitsViewer />
</Route>
<Route exact path="/login" component={handleLogin} /> <Route exact path="/login" component={handleLogin} />
<Route exact path="/logout" component={handleLogout} /> <Route exact path="/logout" component={handleLogout} />
<Route exact path="/error" component={handleError} /> <Route exact path="/error" component={handleError} />
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment