added pagination to IVOA query

src/components/Interactive.js

@@ -3,6 +3,13 @@ import { Alert } from "react-bootstrap";
 
 export default function Interactive() {
   return (
+    // <div class="embed-responsive embed-responsive-16by9">
+    //   <iframe
+    //     class="embed-responsive-item"
+    //     src="http://130.246.212.44/escape/"
+    //     allowfullscreen
+    //   ></iframe>
+    // </div>
     <Alert variant="warning">
       <p>You will leave ESAP GUI and be redirected to</p>
       <a

src/components/Rucio.js

 import React from "react";
-import { Alert } from "react-bootstrap";
 
 export default function Rucio() {
   return (
-    <Alert variant="warning">
-      <p>You will leave ESAP GUI and be redirected to</p>
-      <a
-        target="_blank"
-        rel="noopener noreferrer"
-        href="https://escape-dios-dl.cern.ch/ui/"
-      >
-        Rucio Web UI
-      </a>
-    </Alert>
+    <div class="embed-responsive embed-responsive-16by9">
+      <iframe
+        class="embed-responsive-item"
+        src="https://escape-rucio.cern.ch"
+        allowfullscreen
+      ></iframe>
+    </div>
   );
 }

src/components/query/QueryIVOARegistry.js

@@ -17,7 +17,7 @@ export default function QueryIVOARegistry() {
   //  "catalogquery": "querystring",
   //  "status": "fetching|fechted",
   //  "results": null}
-  const { queryMap, formData, setFormData } = useContext(QueryContext);
+  const { queryMap, formData, setFormData, page } = useContext(QueryContext);
   const { config, api_host, setConfigName } = useContext(GlobalContext);
   const { selectedRegistry, queryStep, setQueryStep } = useContext(IVOAContext);
   const { uri } = useParams();
@@ -59,16 +59,17 @@ export default function QueryIVOARegistry() {
 
     if (queryStep === "run-query") {
       selectedRegistry.forEach((access_url) => {
-        queries = [...queries, ...parseVOServiceForm(formData, access_url)];
+        queries = [
+          ...queries,
+          ...parseVOServiceForm(formData, access_url, page),
+        ];
       });
     } else {
-      queries = parseQueryForm(gui, formData);
+      queries = parseQueryForm(gui, formData, page);
     }
 
     console.log("queries:", queries);
 
-    // Ideally query for each catalog is sent to ESAP API Gateway, and query results is returned
-    // This is under development in the backend at the moment
     queryMap.clear();
     queries.forEach((query) => {
       queryMap.set(query.catalog, {
@@ -100,7 +101,7 @@ export default function QueryIVOARegistry() {
           });
         });
     });
-  }, [formData]);
+  }, [formData, page]);
 
   function formTemplate({ TitleField, properties, title, description }) {
     return (

src/components/query/VORegistryResults.js

@@ -6,7 +6,7 @@ import Paginate from "../Paginate";
 import { IVOAContext } from "../../contexts/IVOAContext";
 
 export default function VORegistryResults({ catalog }) {
-  const { queryMap } = useContext(QueryContext);
+  const { queryMap, page, setPage } = useContext(QueryContext);
   const {
     selectedRegistry,
     addRegistry,
@@ -35,8 +35,23 @@ export default function VORegistryResults({ catalog }) {
     setRegistryList(queryMap.get(catalog).results.results);
     console.log("Registry List:", registryList);
 
+    const numPages = queryMap.get(catalog).results.pages;
+    function newPageCallback(setPage) {
+      return (args) => {
+        if (args.target) {
+          setPage(parseFloat(args.target.text));
+        }
+      };
+    }
+
     return (
       <>
+        <Paginate
+          getNewPage={newPageCallback(setPage)}
+          currentPage={page}
+          numAdjacent={3}
+          numPages={numPages}
+        />
         <Table className="mt-3" responsive>
           <thead>
             <tr className="bg-light">
@@ -96,7 +111,6 @@ export default function VORegistryResults({ catalog }) {
             })}
           </tbody>
         </Table>
-        {/* <Paginate /> */}
       </>
     );
   } else {

src/components/query/VOServiceResults.js

-import React, { useContext } from "react";
+import React, { useContext, useEffect } from "react";
 import { Alert, Table } from "react-bootstrap";
 import { QueryContext } from "../../contexts/QueryContext";
+import LoadingSpinner from "../LoadingSpinner";
+import Paginate from "../Paginate";
 
 export default function VORegistryResults({ catalog }) {
-  const { queryMap } = useContext(QueryContext);
+  const { queryMap, page, setPage } = useContext(QueryContext);
 
   if (!queryMap.get(catalog)) return null;
   console.log("VO service queryMap:", queryMap.get(catalog));
+
   if (queryMap.get(catalog).status === "fetched") {
+    if (queryMap.get(catalog).results[0].includes("ERROR"))
+      return (
+        <Alert variant="warning">{queryMap.get(catalog).results[0]}</Alert>
+      );
     if (queryMap.get(catalog).results.results.length === 0)
       return <Alert variant="warning">No matching results found!</Alert>;
+
+    const numPages = queryMap.get(catalog).results.pages;
+    function newPageCallback(setPage) {
+      return (args) => {
+        if (args.target) {
+          setPage(parseFloat(args.target.text));
+        }
+      };
+    }
     return (
       <div>
         <h1>Results from {catalog}</h1>
+        <Paginate
+          getNewPage={newPageCallback(setPage)}
+          currentPage={page}
+          numAdjacent={3}
+          numPages={numPages}
+        />
         <Table className="mt-3" responsive>
           <thead>
             <tr className="bg-light">
@@ -35,6 +57,8 @@ export default function VORegistryResults({ catalog }) {
         </Table>
       </div>
     );
+  } else {
+    return <LoadingSpinner />;
   }
   return null;
 }

src/utils/form/parseADEXForm.js

-export default function ParseADEXForm(formData) {
+export default function ParseADEXForm(formData, page) {
   let catalogs = ["apertif", "astron_vo"];
   let queries = [];
   // queries is an array of dictionaries, where each dictionary consists of
@@ -32,7 +32,11 @@ export default function ParseADEXForm(formData) {
       return null;
     });
   } else {
-    let esapquery = query + `${`${query}` ? "&" : ""}archive_uri=` + catalog;
+    let esapquery =
+      query +
+      `${`${query}` ? "&" : ""}archive_uri=` +
+      catalog +
+      `&page=${page}`;
 
     queries.push({
       catalog: catalog,

src/utils/form/parseASTRONVOForm.js

-export default function ParseASTRONVOForm(formData) {
+export default function ParseASTRONVOForm(formData, page) {
   let queries = [];
   // queries is an array of dictionaries, where each dictionary consists of
   // {"catalog": "catalogname",
@@ -19,7 +19,8 @@ export default function ParseASTRONVOForm(formData) {
   //  "status": "null|fetching|fetched",
   //  "results": null}
   let catalog = formInput.find(([key]) => key === "catalog")[1];
-  let esapquery = query + `${`${query}` ? "&" : ""}archive_uri=` + catalog;
+  let esapquery =
+    query + `${`${query}` ? "&" : ""}archive_uri=` + catalog + `&page=${page}`;
   queries.push({
     catalog: catalog,
     esapquery: esapquery,

src/utils/form/parseApertifForm.js

-export default function ParseApertifForm(formData) {
+export default function ParseApertifForm(formData, page) {
   let queries = [];
   // queries is an array of dictionaries, where each dictionary consists of
   // {"catalog": "catalogname",
@@ -19,7 +19,8 @@ export default function ParseApertifForm(formData) {
   //  "status": "null|fetching|fetched",
   //  "results": null}
   let catalog = formInput.find(([key]) => key === "catalog")[1];
-  let esapquery = query + `${`${query}` ? "&" : ""}archive_uri=` + catalog;
+  let esapquery =
+    query + `${`${query}` ? "&" : ""}archive_uri=` + catalog + `&page=${page}`;
   queries.push({
     catalog: catalog,
     esapquery: esapquery,

src/utils/form/parseIVOAForm.js

-export default function ParseIVOAForm(formData) {
+export default function ParseIVOAForm(formData, page) {
   let queries = [];
   // queries is an array of dictionaries, where each dictionary consists of
   // {"catalog": "catalogname",
@@ -25,7 +25,11 @@ export default function ParseIVOAForm(formData) {
   let service_type = formInput.find(([key]) => key === "service_type")[1];
 
   let esapquery =
-    "get-services/?" + query + `${`${query}` ? "&" : ""}dataset_uri=` + catalog;
+    "get-services/?" +
+    query +
+    `${`${query}` ? "&" : ""}dataset_uri=` +
+    catalog +
+    `&page=${page}`;
 
   queries.push({
     catalog: catalog,

src/utils/form/parseLOFARForm.js

-export default function ParseLOFARForm(formData) {
+export default function ParseLOFARForm(formData, page) {
   let queries = [];
   // queries is an array of dictionaries, where each dictionary consists of
   // {"catalog": "catalogname",
@@ -19,7 +19,8 @@ export default function ParseLOFARForm(formData) {
   //  "status": "null|fetching|fetched",
   //  "results": null}
   let catalog = formInput.find(([key]) => key === "catalog")[1];
-  let esapquery = query + `${`${query}` ? "&" : ""}archive_uri=` + catalog;
+  let esapquery =
+    query + `${`${query}` ? "&" : ""}archive_uri=` + catalog + `&page=${page}`;
   queries.push({
     catalog: catalog,
     esapquery: esapquery,

src/utils/form/parseQueryForm.js

@@ -8,17 +8,17 @@ import parseASTRONVOForm from "./parseASTRONVOForm";
 export default function parseQueryForm(gui, formData, page) {
   switch (gui) {
     case "adex":
-      return parseADEXForm(formData);
+      return parseADEXForm(formData, page);
     case "zooniverse":
       return parseZooniverseForm(formData, page);
     case "lofar":
-      return parseLOFARForm(formData);
+      return parseLOFARForm(formData, page);
     case "apertif":
-      return parseApertifForm(formData);
+      return parseApertifForm(formData, page);
     case "astron_vo":
-      return parseASTRONVOForm(formData);
+      return parseASTRONVOForm(formData, page);
     case "ivoa":
-      return parseIVOAForm(formData);
+      return parseIVOAForm(formData, page);
     default:
       return null;
   }

src/utils/form/parseVOServiceForm.js

-export default function ParseVOServiceForm(formData, access_url) {
+export default function ParseVOServiceForm(formData, access_url, page) {
   let queries = [];
   // queries is an array of dictionaries, where each dictionary consists of
   // {"catalog": "catalogname",
@@ -29,7 +29,11 @@ export default function ParseVOServiceForm(formData, access_url) {
   let service_type = formInput.find(([key]) => key === "service_type")[1];
 
   let esapquery =
-    "query/?" + query + `${`${query}` ? "&" : ""}dataset_uri=` + catalog;
+    "query/?" +
+    query +
+    `${`${query}` ? "&" : ""}dataset_uri=` +
+    catalog +
+    `&page=${page}`;
 
   queries.push({
     catalog: access_url,