add archive_name in url for archive-specific query form routing

src/components/Interactive.js

+import React from "react";
+import { Alert } from "react-bootstrap";
+
+export default function Interactive() {
+  return <Alert variant="info">This service is under development!</Alert>;
+}

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" href="https://escape-dios-dl.cern.ch/ui/">
+        Rucio Web UI
+      </a>
+    </Alert>
+  );
+}

src/components/archives/ArchiveDetails.js

 import React, { useContext } from "react";
 import { useParams } from "react-router-dom";
 import { GlobalContext } from "../../contexts/GlobalContext";
-import { Container, Row, Col, Card, Table, Alert, Image } from "react-bootstrap";
+import {
+  Container,
+  Row,
+  Col,
+  Card,
+  Table,
+  Alert,
+  Image,
+} from "react-bootstrap";
 import DataProductCategories from "./DataProductCategories";
 
 export default function ArchiveDetails(props) {
   const { uri } = useParams();
   console.log(uri);
-  const { archives, defaultConfigName, setConfigName } = useContext(GlobalContext);
+  const { archives } = useContext(GlobalContext);
   if (!archives) return null;
 
-  /* This is a nasty hack. There must be a better way! */
-  if (uri.search("zooniverse") >= 0){
-    setConfigName("zooniverse");
-  }
-  else{
-    setConfigName(defaultConfigName);
-  }
-
   const archive = archives.find((archive) => archive.uri === uri);
   if (!archive) return <Alert variant="danger">No Archive found!</Alert>;
   console.log(archive);
@@ -46,15 +46,19 @@ export default function ArchiveDetails(props) {
                   </tbody>
                 </Table>
                 <Card>
-                <Image
-                  className="mx-auto d-block"
-                  src={archive.thumbnail}
-                  alt=""
-                  rounded
-                  fluid
-                />
-                <Card.Title className="text-center h4 pt-3">{archive.short_description}</Card.Title>
-                <Card.Text className="text-justify m-3">{archive.long_description}</Card.Text>
+                  <Image
+                    className="mx-auto d-block"
+                    src={archive.thumbnail}
+                    alt=""
+                    rounded
+                    fluid
+                  />
+                  <Card.Title className="text-center h4 pt-3">
+                    {archive.short_description}
+                  </Card.Title>
+                  <Card.Text className="text-justify m-3">
+                    {archive.long_description}
+                  </Card.Text>
                 </Card>
               </Card.Body>
             </Card>

src/components/archives/Archives.js

 import React, { useContext } from "react";
-import { CardColumns} from "react-bootstrap";
+import { CardColumns } from "react-bootstrap";
 import ArchiveCard from "./ArchiveCard";
 import { GlobalContext } from "../../contexts/GlobalContext";
 
 export function Archives() {
-  const { archives, defaultConfigName, setConfigName} = useContext(GlobalContext);
+  const { archives } = useContext(GlobalContext);
   if (!archives) return null;
 
-  setConfigName(defaultConfigName);
-
   console.log("archives: ", { archives });
   return (
     <CardColumns className="row-2">
-            {archives.map((archive) => {
-              let key = "archive-" + archive.id;
-              return (
-                  <ArchiveCard key={key} archive={archive} />
-              );
-            })}
+      {archives.map((archive) => {
+        let key = "archive-" + archive.id;
+        return <ArchiveCard key={key} archive={archive} />;
+      })}
     </CardColumns>
   );
 }

src/components/archives/DataProductCategories.js

 import React, { useState, useContext, useEffect } from "react";
 import { NavLink } from "react-router-dom";
-import {
-  ListGroup,
-  Card,
-  Button,
-  Row,
-  Col,
-} from "react-bootstrap";
+import { ListGroup, Card, Button, Row, Col } from "react-bootstrap";
 import { GlobalContext } from "../../contexts/GlobalContext";
 import axios from "axios";
 
@@ -37,13 +31,15 @@ export default function DataProductCategories({ archive }) {
           {categories
             .filter((category) => archive.datasets.includes(category.uri))
             .map((category) => {
-              console.log(category);
+              console.log("category:", category);
               let button;
               let extra_info;
               let documentation;
               if (category.service_connector) {
+                let query_url = `${category.archive_uri_derived}/query`;
+                console.log("query_url:", query_url);
                 button = (
-                  <Button as={NavLink} variant="outline-info" to="/query">
+                  <Button as={NavLink} variant="outline-info" to={query_url}>
                     Browse Catalog & Run Queries
                   </Button>
                 );

src/components/query/QueryCatalogs.js

 import React, { useContext, useEffect } from "react";
+import { useParams } from "react-router-dom";
 import axios from "axios";
 import { Container } from "react-bootstrap";
 import Form from "react-jsonschema-form";
@@ -14,16 +15,38 @@ export default function QueryCatalogs() {
   //  "status": "fetching|fechted",
   //  "results": null}
   const { queryMap, formData, setFormData } = useContext(QueryContext);
-  const { config, api_host } = useContext(GlobalContext);
+  const { config, api_host, setConfigName } = useContext(GlobalContext);
+  const { uri } = useParams();
+  console.log(uri);
 
-  console.log(config.query_schema);
+  // set ConfigName for archive
   useEffect(() => {
+    switch (uri) {
+      case "adex":
+        setConfigName("adex");
+        break;
+      case "apertif":
+        setConfigName("apertif");
+        break;
+      case "zooniverse":
+        setConfigName("zooniverse");
+        break;
+      case "astron_vo":
+        setConfigName("astron_vo");
+        break;
+      case "lofar":
+        setConfigName("lofar");
+        break;
+      default:
+        setConfigName("esap_ivoa");
+    }
+  }, [uri]);
+
+  useEffect(() => {
+    console.log(config.query_schema);
     if (!formData) return;
-    let catalogs = config.query_schema.properties.catalog.enum.filter(
-      (name) => name !== "all"
-    );
     let gui = config.query_schema.name;
-    const queries = parseQueryForm(gui, formData, catalogs);
+    const queries = parseQueryForm(gui, formData);
 
     // 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
@@ -78,7 +101,7 @@ export default function QueryCatalogs() {
 
   console.log("queryMap", Array.from(queryMap.values()));
 
-  const uiSchemaProp = config.ui_schema ? { uiSchema : config.ui_schema } : {};
+  const uiSchemaProp = config.ui_schema ? { uiSchema: config.ui_schema } : {};
   return (
     <Container fluid>
       <Form

src/contexts/GlobalContext.js

@@ -8,17 +8,16 @@ export function GlobalContextProvider({ children }) {
   console.log("ASTRON ESAP version 14 aug 2020");
   const api_host =
     process.env.NODE_ENV === "development"
-      ? "http://sdc.astron.nl:15671/esap-api/"
+      ? "http://localhost:8000/esap-api/"
       : "/esap-api/";
 
   const [config, setConfig] = useState();
-  const [configName, setConfigName] = useState("esap_config");
-  const [defaultConfigName, setDefaultConfigName] = useState("esap_config");
+  const [configName, setConfigName] = useState("esap_ivoa");
 
   useEffect(() => {
-    let configNameString=""
-    if (configName){
-      configNameString=`?name=${configName}`
+    let configNameString = "";
+    if (configName) {
+      configNameString = `?name=${configName}`;
     }
     axios
       .get(api_host + "query/configuration" + configNameString)
@@ -63,7 +62,7 @@ export function GlobalContextProvider({ children }) {
         archives,
         handleLogin,
         handleLogout,
-        setConfigName
+        setConfigName,
       }}
     >
       {children}

src/routes/Routes.js

@@ -7,6 +7,8 @@ import QueryCatalogs from "../components/query/QueryCatalogs";
 import { BrowserRouter as Router } from "react-router-dom";
 import NavBar from "../components/NavBar";
 import { QueryContextProvider } from "../contexts/QueryContext";
+import Rucio from "../components/Rucio";
+import Interactive from "../components/Interactive";
 
 export default function Routes() {
   const { config, handleLogin, handleLogout } = useContext(GlobalContext);
@@ -22,14 +24,25 @@ export default function Routes() {
         <Route exact path="/archives">
           <Archives />
         </Route>
-        <Route path="/query">
+        <Route exact path="/query">
           <QueryContextProvider>
             <QueryCatalogs />
           </QueryContextProvider>
         </Route>
+        <Route exact path="/rucio">
+          <Rucio />
+        </Route>
+        <Route exact path="/interactive">
+          <Interactive />
+        </Route>
         <Route exact path="/login" component={handleLogin} />
         <Route exact path="/logout" component={handleLogout} />
-        <Route path="/archives/:uri" component={ArchiveDetails} />
+        <Route exact path="/archives/:uri" component={ArchiveDetails} />
+        <Route exact path="/archives/:uri/query">
+          <QueryContextProvider>
+            <QueryCatalogs />
+          </QueryContextProvider>
+        </Route>
       </Switch>
     </Router>
   );

src/utils/form/parseADEXForm.js

-export default function ParseADEXForm(formData, catalogs) {
+export default function ParseADEXForm(formData) {
+  let catalogs = ["apertif", "astron_vo"];
   let queries = [];
   // queries is an array of dictionaries, where each dictionary consists of
   // {"catalog": "catalogname",

src/utils/form/parseASTRONVOForm.js

+export default function ParseASTRONVOForm(formData) {
+  let catalogs = "astron_vo";
+  let queries = [];
+  // queries is an array of dictionaries, where each dictionary consists of
+  // {"catalog": "catalogname",
+  //  "esapquery": "querystring"}
+  let query = "";
+  let formInput = Object.entries(formData);
+  console.log(formInput);
+
+  for (let [key, value] of formInput) {
+    console.log(`${key}: ${value}`);
+    if (value && value !== "all" && key !== "catalog") {
+      query += `${`${query}` ? "&" : ""}` + key + "=" + value;
+    }
+  }
+  console.log("Query:", query);
+  // If catalog is set to "all", query for each catalog needs to be generated {"catalog": "catalogname",
+  //  "catalogquery": "querystring",
+  //  "status": "null|fetching|fetched",
+  //  "results": null}
+  let catalog = formInput.find(([key]) => key === "catalog")[1];
+  if (catalog === "all") {
+    console.log("Catalogs:", catalogs);
+    catalogs.map((catalog) => {
+      let esapquery = query + `${`${query}` ? "&" : ""}archive_uri=` + catalog;
+
+      queries.push({
+        catalog: catalog,
+        esapquery: esapquery,
+      });
+      return null;
+    });
+  } else {
+    let esapquery = query + `${`${query}` ? "&" : ""}archive_uri=` + catalog;
+
+    queries.push({
+      catalog: catalog,
+      esapquery: esapquery,
+    });
+  }
+  console.log("Queries:", queries);
+  return queries;
+}

src/utils/form/parseApertifForm.js

+export default function ParseApertifForm(formData) {
+  let catalogs = "apertif";
+  let queries = [];
+  // queries is an array of dictionaries, where each dictionary consists of
+  // {"catalog": "catalogname",
+  //  "esapquery": "querystring"}
+  let query = "";
+  let formInput = Object.entries(formData);
+  console.log("formInput:", formInput);
+
+  for (let [key, value] of formInput) {
+    console.log(`${key}: ${value}`);
+    if (value && value !== "all" && key !== "catalog") {
+      query += `${`${query}` ? "&" : ""}` + key + "=" + value;
+    }
+  }
+  console.log("Query:", query);
+  // If catalog is set to "all", query for each catalog needs to be generated {"catalog": "catalogname",
+  //  "catalogquery": "querystring",
+  //  "status": "null|fetching|fetched",
+  //  "results": null}
+  let catalog = formInput.find(([key]) => key === "catalog")[1];
+  if (catalog === "all") {
+    console.log("Catalogs:", catalogs);
+    catalogs.map((catalog) => {
+      let esapquery = query + `${`${query}` ? "&" : ""}archive_uri=` + catalog;
+
+      queries.push({
+        catalog: catalog,
+        esapquery: esapquery,
+      });
+      return null;
+    });
+  } else {
+    let esapquery = query + `${`${query}` ? "&" : ""}archive_uri=` + catalog;
+
+    queries.push({
+      catalog: catalog,
+      esapquery: esapquery,
+    });
+  }
+  console.log("Queries:", queries);
+  return queries;
+}

src/utils/form/parseIVOAForm.js

+export default function ParseIVOAForm(formData) {
+  let catalogs = "ivoa";
+  let queries = [];
+  // queries is an array of dictionaries, where each dictionary consists of
+  // {"catalog": "catalogname",
+  //  "esapquery": "querystring"}
+  let query = "";
+  let formInput = Object.entries(formData);
+  console.log(formInput);
+
+  for (let [key, value] of formInput) {
+    console.log(`${key}: ${value}`);
+    if (value && value !== "all" && key !== "catalog") {
+      query += `${`${query}` ? "&" : ""}` + key + "=" + value;
+    }
+  }
+  console.log("Query:", query);
+  // If catalog is set to "all", query for each catalog needs to be generated {"catalog": "catalogname",
+  //  "catalogquery": "querystring",
+  //  "status": "null|fetching|fetched",
+  //  "results": null}
+  let catalog = formInput.find(([key]) => key === "catalog")[1];
+  if (catalog === "all") {
+    console.log("Catalogs:", catalogs);
+    catalogs.map((catalog) => {
+      let esapquery = query + `${`${query}` ? "&" : ""}archive_uri=` + catalog;
+
+      queries.push({
+        catalog: catalog,
+        esapquery: esapquery,
+      });
+      return null;
+    });
+  } else {
+    let esapquery = query + `${`${query}` ? "&" : ""}archive_uri=` + catalog;
+
+    queries.push({
+      catalog: catalog,
+      esapquery: esapquery,
+    });
+  }
+  console.log("Queries:", queries);
+  return queries;
+}

src/utils/form/parseLOFARForm.js

+export default function ParseLOFARForm(formData) {
+  let catalogs = "lofar";
+  let queries = [];
+  // queries is an array of dictionaries, where each dictionary consists of
+  // {"catalog": "catalogname",
+  //  "esapquery": "querystring"}
+  let query = "";
+  let formInput = Object.entries(formData);
+  console.log(formInput);
+
+  for (let [key, value] of formInput) {
+    console.log(`${key}: ${value}`);
+    if (value && value !== "all" && key !== "catalog") {
+      query += `${`${query}` ? "&" : ""}` + key + "=" + value;
+    }
+  }
+  console.log("Query:", query);
+  // If catalog is set to "all", query for each catalog needs to be generated {"catalog": "catalogname",
+  //  "catalogquery": "querystring",
+  //  "status": "null|fetching|fetched",
+  //  "results": null}
+  let catalog = formInput.find(([key]) => key === "catalog")[1];
+  if (catalog === "all") {
+    console.log("Catalogs:", catalogs);
+    catalogs.map((catalog) => {
+      let esapquery = query + `${`${query}` ? "&" : ""}archive_uri=` + catalog;
+
+      queries.push({
+        catalog: catalog,
+        esapquery: esapquery,
+      });
+      return null;
+    });
+  } else {
+    let esapquery = query + `${`${query}` ? "&" : ""}archive_uri=` + catalog;
+
+    queries.push({
+      catalog: catalog,
+      esapquery: esapquery,
+    });
+  }
+  console.log("Queries:", queries);
+  return queries;
+}

src/utils/form/parseQueryForm.js

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

src/utils/form/parseZooniverseForm.js

-export default function parseZooniverseForm(formData, catalogs) {
+export default function parseZooniverseForm(formData) {
+  let catalogs = "zooniverse";
   let queries = [];
   // queries is an array of dictionaries, where each dictionary consists of
   // {"catalog": "catalogname",
@@ -23,7 +24,11 @@ export default function parseZooniverseForm(formData, catalogs) {
   if (catalog === "all") {
     console.log(`Catalogs: ${catalogs}`);
     catalogs.map((catalog) => {
-      let esapquery = [query, "archive_uri=zooniverse", `catalog=${catalog}`].join("&");
+      let esapquery = [
+        query,
+        "archive_uri=zooniverse",
+        `catalog=${catalog}`,
+      ].join("&");
 
       queries.push({
         catalog: catalog,
@@ -32,7 +37,11 @@ export default function parseZooniverseForm(formData, catalogs) {
       return null;
     });
   } else {
-    let esapquery = [query, "archive_uri=zooniverse", `catalog=${catalog}`].join("&");
+    let esapquery = [
+      query,
+      "archive_uri=zooniverse",
+      `catalog=${catalog}`,
+    ].join("&");
 
     queries.push({
       catalog: catalog,