added fitsviewer DS9 to esap

src/components/FitsViewer.js

+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 class="embed-responsive embed-responsive-16by9">
+      <iframe
+        class="embed-responsive-item"
+        src={url}
+        allowfullscreen
+      ></iframe>
+    </div>
+  );
+}

src/components/query/VOServiceResults.js

 import React, { useContext } from "react";
-import { Alert, Table } from "react-bootstrap";
+import { Redirect, useHistory } from "react-router-dom";
+import { Alert, Table, Button } from "react-bootstrap";
 import { QueryContext } from "../../contexts/QueryContext";
 import LoadingSpinner from "../LoadingSpinner";
 import Paginate from "../Paginate";
 
 export default function VORegistryResults({ catalog }) {
-  const { queryMap, page, setPage } = useContext(QueryContext);
+  const { queryMap, page, setPage, setFits } = useContext(QueryContext);
+  const history = useHistory();
 
   if (!queryMap.get(catalog)) return null;
   console.log("VO service queryMap:", queryMap.get(catalog));
@@ -46,6 +48,18 @@ export default function VORegistryResults({ catalog }) {
                       {result.result}
                     </a>
                   </td>
+                  <td>
+                    {/* if results is in .fits format
+                      display it with js9 */}
+                    {(result.result.endsWith('.fits')) && 
+                      <Button 
+                        value={result.result} 
+                        onClick={(event) => {
+                          setFits(event.target.value);
+                          history.push('/fitsviewer');
+                        }}
+                      >View fits</Button>}
+                  </td>
                 </tr>
               );
             })}

src/contexts/QueryContext.js

@@ -7,6 +7,7 @@ export function QueryContextProvider({ children }) {
   const queryMap = useMap();
   const [formData, setFormData] = useState();
   const [page, setPage] = useState(1);
+  const [fits, setFits] = useState("https://uilennest.net/astrobase/data/191231001/3836665.fits");
   // const [category, setCategory] = useState();
   // const [level, setLevel] = useState();
 
@@ -18,6 +19,8 @@ export function QueryContextProvider({ children }) {
         queryMap,
         formData,
         setFormData,
+        fits,
+        setFits,
       }}
     >
       {children}

src/routes/Routes.js

@@ -11,6 +11,7 @@ import { QueryContextProvider } from "../contexts/QueryContext";
 import Rucio from "../components/Rucio";
 import Interactive from "../components/Interactive";
 import { IVOAContextProvider } from "../contexts/IVOAContext";
+import FitsViewer from "../components/FitsViewer";
 
 export default function Routes() {
   const { config, handleLogin, handleLogout, handleError } = useContext(GlobalContext);
@@ -26,29 +27,29 @@ export default function Routes() {
         <Route exact path="/archives">
           <Archives />
         </Route>
-        <Route exact path="/query">
-          <QueryContextProvider>
-            <QueryCatalogs />
-          </QueryContextProvider>
-        </Route>
         <Route exact path="/rucio">
           <Rucio />
         </Route>
         <Route exact path="/interactive">
           <Interactive />
         </Route>
+        <Route exact path="/fitsviewer">
+          <QueryContextProvider>
+            <FitsViewer />
+          </QueryContextProvider>
+        </Route>
         <Route exact path="/login" component={handleLogin} />
         <Route exact path="/logout" component={handleLogout} />
         <Route exact path="/error" component={handleError} />
         <Route exact path="/archives/:uri" component={ArchiveDetails} />
-        <Route exact path="/archives/ivoa/query">
+        <Route exact path={["/vo-query", "/archives/ivoa/query"]}>
           <QueryContextProvider>
             <IVOAContextProvider>
               <QueryIVOARegistry />
             </IVOAContextProvider>
           </QueryContextProvider>
         </Route>
-        <Route exact path="/archives/:uri/query">
+        <Route exact path={["/adex-query", "/archives/:uri/query"]}>
           <QueryContextProvider>
             <QueryCatalogs />
           </QueryContextProvider>