From 2ca7d724ca4512461d51ff44c419f5ff7d3c4a9d Mon Sep 17 00:00:00 2001
From: Nico Vermaas <vermaas@astron.nl>
Date: Mon, 1 Nov 2021 14:14:03 +0100
Subject: [PATCH] adding multiple archive query (under construction)
---
src/components/query/QueryMultipleArchives.js | 205 +++++++++++-------
src/contexts/MAQContext.js | 3 +-
2 files changed, 123 insertions(+), 85 deletions(-)
diff --git a/src/components/query/QueryMultipleArchives.js b/src/components/query/QueryMultipleArchives.js
index 6b3b2e0..b4405f9 100644
--- a/src/components/query/QueryMultipleArchives.js
+++ b/src/components/query/QueryMultipleArchives.js
@@ -7,7 +7,8 @@ import { GlobalContext } from "../../contexts/GlobalContext";
import { QueryContext } from "../../contexts/QueryContext";
import parseQueryForm from "../../utils/form/parseQueryForm";
import { MAQContext,
- CREATE_QUERY_PARAMS,
+ QUERY_FORM,
+ CREATE_QUERIES,
QUERIES_SELECTED,
FETCHING_CREATE_QUERY,
FETCHED_CREATE_QUERY,
@@ -19,7 +20,7 @@ import { MAQContext,
import CreateMultiQueryResults from "../services/query_results/CreateMultiQueryResults";
import RunMultiQueryResults from "../services/query_results/RunMultiQueryResults";
import { getQueryIcon } from "../../utils/styling";
-
+import LoadingSpinner from "../LoadingSpinner";
export default function QueryMultipleArchives() {
@@ -34,132 +35,142 @@ export default function QueryMultipleArchives() {
status, setStatus } = useContext(MAQContext);
const maqContext = useContext(MAQContext);
- // set ConfigName for archive
- useEffect(() => {
- setConfigName("multiple_archives");
- return () => {
- console.log("cleaned up");
- //queryMap.clear();
- setFormData();
- setConfigName(defaultConf);
- };
- }, []);
- // load the GUI for this configuration
- // should useEffect be used at all? Shouldn't this code just be in the body of the function?
+ // call to the ESAP API 'create-query' endpoint to construct a query based on esap common parameters
+ function fetchCreateQueries() {
- useEffect(() => {
- console.log("query schema:", config.query_schema);
if (!formData) return;
- console.log("formData:", formData);
const query_schema_name = config.query_schema.name;
+
let queries = [];
let archive_queries = []
- if (status === CREATE_QUERY_PARAMS) {
+ // create a list of queries based on the filled in form
+ queries = parseQueryForm(query_schema_name, formData);
- // create a list of queries based on the filled in form
- queries = parseQueryForm(query_schema_name, formData);
+ console.log("queries:", queries);
- console.log("queries:", queries);
+ // iterate through the query per archive
+ queries.forEach((query) => {
- // iterate through the query per archive
- queries.forEach((query) => {
+ let url = api_host + "query/create-query?" + query.esap_query;
- let url = api_host + "query/create-query?" + query.esap_query;
+ setStatus(FETCHING_CREATE_QUERY)
+ console.log('status = '+status)
- setStatus(FETCHING_CREATE_QUERY)
- console.log('status = '+status)
+ axios
+ .get(url)
+ .then((response) => {
+ // the 'create-query' call will return an archive specific query for each of the
+ // defined 'esap datasets' within that 'esap archive'
- axios
- .get(url)
- .then((response) => {
- // the 'create-query' call will return an archive specific query for each of the
- // defined 'esap datasets' within that 'esap archive'
+ let dataset_queries = response.data.query_input
+ dataset_queries.forEach((dataset_query) => {
- let dataset_queries = response.data.query_input
- dataset_queries.forEach((dataset_query) => {
+ dataset_query['archive'] = query.archive
+ archive_queries.push(dataset_query)
- dataset_query['archive'] = query.archive
- archive_queries.push(dataset_query)
+ })
+ setStatus(FETCHING_CREATE_QUERY)
+ setStatus(FETCHED_CREATE_QUERY)
+ // WARNING: status does not get updated here, why?
+ //alert('fetched query: status = '+status)
- })
+ // q: how do I trigger a render after this
- setStatus(FETCHED_CREATE_QUERY)
- // WARNING: status does not get updated here, why?
- //alert('fetched query: status = '+status)
+ })
+ .catch((error) => {
+ alert(error)
- // q: how do I trigger a render after this
+ });
+ });
- })
- .catch((error) => {
- alert(error)
+ // push all the gathered archive_queries to the central store
+ // WARNING: this happens before the '.then' promise is solved.
+ setArchiveQueries(archive_queries)
+ }
- });
- });
+ // call to the ESAP API 'query' endpoint
+ function fetchRunQueries() {
+ let query_results = []
- // push all the gathered archive_queries to the central store
- alert('fetched all create-queries: status = '+status)
- // WARNING: this happens before the '.then' promise is solved.
- setArchiveQueries(archive_queries)
- }
+ selectedQueries.forEach((query) => {
- let query_results = []
- if (status === RUN_SELECTED_QUERIES) {
+ let dataset_query = query.result.query
- selectedQueries.forEach((query) => {
+ // cut off the service_url and only leave the query part
+ if (dataset_query.includes('&QUERY=')) {
+ dataset_query = query.result.query.split('&QUERY=')[1]
+ }
- let dataset_query = query.result.query
+ let url = api_host + "query/query?archive_uri=" + query.result.archive + "&collection=" + query.result.collection
- // cut off the service_url and only leave the query part
- if (dataset_query.includes('&QUERY=')) {
- dataset_query = query.result.query.split('&QUERY=')[1]
- }
+ setStatus(FETCHING_SELECTED_QUERIES)
+ console.log('status = '+status)
- let url = api_host + "query/query?archive_uri=" + query.result.archive + "&collection=" + query.result.collection
+ axios
+ .get(url)
+ .then((response) => {
- setStatus(FETCHING_SELECTED_QUERIES)
- console.log('status = '+status)
+ let results = response.data.results
- axios
- .get(url)
- .then((response) => {
+ results.forEach((result) => {
+ query_results.push(result)
- let results = response.data.results
+ })
- results.forEach((result) => {
- query_results.push(result)
+ setStatus(FETCHED_SELECTED_QUERIES)
+ // WARNING: status does not get updated here, why?
+ //alert('fetched selected query: status = '+status)
- })
+ // q: how do I trigger a render after this
- setStatus(FETCHED_SELECTED_QUERIES)
- // WARNING: status does not get updated here, why?
- //alert('fetched selected query: status = '+status)
+ })
+ .catch((error) => {
+ alert(error)
- // q: how do I trigger a render after this
+ });
+ })
- })
- .catch((error) => {
- alert(error)
+ // push all the gathered archive_queries to the central store
+ // WARNING: this happens before the '.then' promise is solved.
+ setQueryResults(query_results)
- });
- })
+ console.log('status = '+status)
+ }
- // push all the gathered archive_queries to the central store
- alert('ran and fetched all queries: status = '+status)
- // WARNING: this happens before the '.then' promise is solved.
- setQueryResults(query_results)
+ // set ConfigName for archive
+ // load the GUI for this configuration
- console.log('status = '+status)
+ useEffect(() => {
+ setConfigName("multiple_archives");
+ return () => {
+ console.log("cleaned up");
+ //queryMap.clear();
+ setFormData();
+ setConfigName(defaultConf);
+ };
+ }, []);
+
+
+ useEffect(() => {
+
+ if (status === CREATE_QUERIES) {
+ fetchCreateQueries()
+ }
+
+ if (status === RUN_SELECTED_QUERIES) {
+ fetchRunQueries()
}
//alert('archiveQueries: ',archiveQueries)
}, [queryStep, formData]);
+
// this function is executed when the 'Create Queries' button is clicked
function handleCreateQueries() {
- setStatus(CREATE_QUERY_PARAMS)
+ setStatus(CREATE_QUERIES)
console.log('handleCreateQueries: status = '+status)
setQueryStep('create-query')
}
@@ -187,12 +198,31 @@ export default function QueryMultipleArchives() {
</div>
)}
+ // RENDER
+ if (!config) return <LoadingSpinner />
+
const uiSchemaProp = config.ui_schema ? { uiSchema: config.ui_schema } : {};
+
console.log("Form Data:", formData);
+ //alert('render: '+status)
+
+ if (status === CREATE_QUERIES) {
+ //fetchCreateQueries()
+ }
+
+ if (status === RUN_SELECTED_QUERIES) {
+ //fetchRunQueries()
+ }
+
+
+ let renderForm
+ if (status === QUERY_FORM) {
+ renderForm=<h1>Render Form</h1>
+ }
// the logic to construct the GUI
let renderCreateQueryButton
- //if (status === CREATE_QUERY_PARAMS) {
+ //if (status === CREATE_QUERIES) {
renderCreateQueryButton = <Button type="submit" onClick={() => {handleCreateQueries();}}>{getQueryIcon()} Create Queries</Button>
//}
@@ -202,11 +232,17 @@ export default function QueryMultipleArchives() {
}
let renderCreateQueryResults
+ if (status === FETCHING_CREATE_QUERY) {
+ renderCreateQueryResults = <LoadingSpinner />;
+ }
if (status === FETCHED_CREATE_QUERY || status === QUERIES_SELECTED) {
renderCreateQueryResults = <CreateMultiQueryResults results={archiveQueries} />
}
let renderQueryResults
+ if (status === FETCHING_SELECTED_QUERIES) {
+ renderQueryResults = <LoadingSpinner />;
+ }
if (status === FETCHED_SELECTED_QUERIES) {
renderQueryResults = <RunMultiQueryResults results={queryResults} />
}
@@ -214,6 +250,7 @@ export default function QueryMultipleArchives() {
return (
<Container fluid>
<h2>Status - {status}</h2>
+ {renderForm}
<Form
schema={config.query_schema}
ObjectFieldTemplate={myObjectFieldTemplate}
diff --git a/src/contexts/MAQContext.js b/src/contexts/MAQContext.js
index 0f4b5df..609c55d 100644
--- a/src/contexts/MAQContext.js
+++ b/src/contexts/MAQContext.js
@@ -3,7 +3,8 @@ import React, { createContext, useState, useEffect, useContext } from "react";
// Multiple Archives Query (MAQ) context
// statusses
-export const CREATE_QUERY_PARAMS = 'create-query-params'
+export const QUERY_FORM = 'query-form'
+export const CREATE_QUERIES = 'create-queries'
export const FETCHING_CREATE_QUERY = 'fetching-create-query'
export const FETCHED_CREATE_QUERY = 'fetched-create-query'
export const QUERIES_SELECTED = 'queries-selected'
--
GitLab