From 09b79d283083fa8f4ab9f88e743d45d99b7e895c Mon Sep 17 00:00:00 2001 From: Nico Vermaas <vermaas@astron.nl> Date: Fri, 17 Apr 2020 16:37:15 +0200 Subject: [PATCH] adding VO registry of registeries. Requires to move from dataset based querying to query based querying --- src/components/cards/QueryCard.js | 52 +++++++++++++++++++++ src/hooks/useFetchRunQuery.js | 6 --- src/routes/query/QueryArchives.js | 7 ++- src/routes/query/QueryInputResultsGrid.js | 35 ++++++++++++-- src/routes/query/QueryOutputResultsGrid.js | 20 ++++---- src/routes/query/QueryOutputResultsTiles.js | 11 +++-- src/routes/query/QueryResultsPage.js | 9 ++-- 7 files changed, 106 insertions(+), 34 deletions(-) create mode 100644 src/components/cards/QueryCard.js diff --git a/src/components/cards/QueryCard.js b/src/components/cards/QueryCard.js new file mode 100644 index 0000000..0c3e019 --- /dev/null +++ b/src/components/cards/QueryCard.js @@ -0,0 +1,52 @@ +import React from 'react'; +import {Card, Table } from 'react-bootstrap' + +import { useGlobalReducer } from '../../Store'; + +import DocumentationLink from '../buttons/DocumentationLink' + + +// display a single query on a card +export default function QueryCard(props) { + + const [ my_state , my_dispatch] = useGlobalReducer() + + // only show if there is content + if (!props.query) { + return null + } + + return ( + + <Card className="card-description"> + <Card.Body> + <Card.Title>{props.query.dataset_name}</Card.Title> + <Card.Text> + <Table striped bordered hover size="sm"> + <tbody> + <tr> + <td className="key">ID</td> + <td className="value">{props.query.query_id}</td> + </tr> + <tr> + <td className="key">Query</td> + <td className="value">{props.query.query}</td> + </tr> + <tr> + <td className="key">Description</td> + <td className="value">{props.query.res_description}</td> + </tr> + </tbody> + </Table> + + </Card.Text> + <DocumentationLink url={props.query.reference_url}/> + </Card.Body> + + </Card> + + ); + +} + + diff --git a/src/hooks/useFetchRunQuery.js b/src/hooks/useFetchRunQuery.js index 4c665de..b157b45 100644 --- a/src/hooks/useFetchRunQuery.js +++ b/src/hooks/useFetchRunQuery.js @@ -41,14 +41,8 @@ export const useFetchRunQuery = (url, options) => { // this sets the json in the response, which is in itself a useState hook setResponse(json); - //let query_results = {} - //query_results[query] = json.query_results - // dispatch the fetched data (per query) and the status to the global state my_dispatch({type: SET_FETCHED_QUERY_RESULTS, fetched_query_results: json.query_results}) - - //query_status = query+":fetched" - //query_status_object[query]=query_status my_dispatch({type: SET_STATUS_RUN_QUERY, status_run_query: query+":fetched"}) diff --git a/src/routes/query/QueryArchives.js b/src/routes/query/QueryArchives.js index be7bfd6..7d30b85 100644 --- a/src/routes/query/QueryArchives.js +++ b/src/routes/query/QueryArchives.js @@ -238,17 +238,16 @@ export default function QueryArchives(props) { // clear previous results my_dispatch({type: SET_FETCHED_QUERY_INPUT, fetched_query: undefined}) + //my_dispatch({type: SET_FETCHED_QUERY_RESULTS, fetched_query_results: {}}) - my_dispatch({type: SET_FETCHED_QUERY_RESULTS, fetched_query_results: {}}) - - // this clears the output results grid/tiles of the executed queries + // this clears the output results grid/tiles of the executed queries my_dispatch({type: SET_STATUS_RUN_QUERY, status_run_query: undefined}) my_dispatch({type: SET_QUERIES_HAVE_RESULTS, queries_have_results: false}) let queries = my_state.queries_to_run if (queries) { for (var i = 0; i < queries.length; i++) { - my_dispatch({type: SET_STATUS_RUN_QUERY, status_run_query: queries[i].dataset_name + ":fetched"}) + my_dispatch({type: SET_STATUS_RUN_QUERY, status_run_query: queries[i].dataset_name + ":n/a"}) } } diff --git a/src/routes/query/QueryInputResultsGrid.js b/src/routes/query/QueryInputResultsGrid.js index 416f080..e21ffeb 100644 --- a/src/routes/query/QueryInputResultsGrid.js +++ b/src/routes/query/QueryInputResultsGrid.js @@ -70,17 +70,25 @@ export default function QueryInputResultsGrid(props) { const columns = [ { - name: 'dataset uri', - selector: 'dataset', + name: 'ID', + selector: 'query_id', sortable: true, width: "10%" }, { - name: 'dataset name', + name: 'dataset', selector: 'dataset_name', sortable: true, width: "15%" }, +/* + { + name: 'Waveband', + selector: 'waveband', + sortable: true, + width: "10%" + }, +*/ /* { name: 'service', @@ -88,20 +96,26 @@ export default function QueryInputResultsGrid(props) { sortable: true, width: "5%" }, -*/ + { name: 'service connector', selector: 'service_connector', sortable: true, width: "10%" }, - +*/ { name: 'status', sortable: true, width: "10%", cell: row => getStatus(row), }, + { + name: 'access_url', + sortable: true, + width: "20%", + selector: 'service_url', + }, /* { name: 'resource', @@ -110,6 +124,7 @@ export default function QueryInputResultsGrid(props) { width: "10%" }, */ +/* { name: 'query', selector: 'query', @@ -119,6 +134,16 @@ export default function QueryInputResultsGrid(props) { {row.query} </a>, }, +*/ + { + name: 'Reference', + selector: 'reference_url', + sortable: true, + cell: row => + <a href={row.reference_url} target="_blank"> + {row.reference_url} + </a>, + }, ]; diff --git a/src/routes/query/QueryOutputResultsGrid.js b/src/routes/query/QueryOutputResultsGrid.js index d98423c..e590b44 100644 --- a/src/routes/query/QueryOutputResultsGrid.js +++ b/src/routes/query/QueryOutputResultsGrid.js @@ -9,6 +9,7 @@ import { getBackendUrl } from '../../utils/web' import AddToBasketButton from '../../components/buttons/AddToBasketButton' import DataProductImageCard from '../../components/cards/DataProductImageCard' +import QueryCard from '../../components/cards/QueryCard' // the definition of the columns // moved outside of the main function so that it will not rerender @@ -80,13 +81,12 @@ export default function QueryOutputResultsGrid(props) { sortable: true, width: "20%" }, - { name: 'Result', selector: 'result', sortable: true, cell: row => drawResult(row), - width: "20%" + //width: "20%" }, { name: 'Link to data', @@ -121,19 +121,18 @@ export default function QueryOutputResultsGrid(props) { // get the query results from the state let datasetsToQuery = my_state.queries_to_run let data - let title = "Query Results (List)" - if (props.dataset) { - // filter the data on dataset - title = "Query Results: " + props.dataset.dataset_name - let key = "fetched_query_results." + props.dataset.dataset_name - data = my_state[key] + if (props.query) { + // dataset is given as a parameter (current situation) + data = my_state["fetched_query_results." + props.query.dataset_name] } else if (props.data) { + // data is given as a parameter (currently not used) data = props.data } else { + // combine the results from different queries. // iterate through the results of the several queries data = [] @@ -152,11 +151,12 @@ export default function QueryOutputResultsGrid(props) { // alert('total length = ' + data.length.toString()) } + let queryCard = <QueryCard query={props.query}/> + return ( <div> - <h4> {title}</h4> + {queryCard} <DataTable - // title="Query Results" columns={columns} data={data} striped={true} diff --git a/src/routes/query/QueryOutputResultsTiles.js b/src/routes/query/QueryOutputResultsTiles.js index d2ffb00..70b8f86 100644 --- a/src/routes/query/QueryOutputResultsTiles.js +++ b/src/routes/query/QueryOutputResultsTiles.js @@ -6,6 +6,7 @@ import { useGlobalReducer } from '../../Store'; import { SET_ACTIVE_DATASET } from '../../reducers/GlobalStateReducer' import { getBackendUrl } from '../../utils/web' +import QueryCard from '../../components/cards/QueryCard' import AddToBasketButton from '../../components/buttons/AddToBasketButton' import Tiles from '../../components/Tiles' @@ -20,10 +21,10 @@ export default function QueryOutputResultsTiles(props) { // iterate through the results of the several queries data = [] - if (props.dataset) { + if (props.query) { // filter the data on dataset - title = "Query Results: " + props.dataset.dataset_name - let key = "fetched_query_results." + props.dataset.dataset_name + title = "Query Results: " + props.query.dataset_name + let key = "fetched_query_results." + props.query.dataset_name data = my_state[key] } else @@ -51,9 +52,11 @@ export default function QueryOutputResultsTiles(props) { renderData = <Tiles data = {data} /> } + let queryCard = <QueryCard query={props.query}/> + return ( <div> - <h4> {title}</h4> + {queryCard} <div className="App"> <Container fluid> diff --git a/src/routes/query/QueryResultsPage.js b/src/routes/query/QueryResultsPage.js index 7963952..7f880c0 100644 --- a/src/routes/query/QueryResultsPage.js +++ b/src/routes/query/QueryResultsPage.js @@ -21,11 +21,11 @@ export default function QueryResultsPage(props) { // get the query results from the state let renderOutputResults - const renderQueryResults = (dataset) => { - if (dataset.output_format.toUpperCase()==='TILES') { - return <QueryOutputResultsTiles dataset={dataset}/> + const renderQueryResults = (query) => { + if (query.output_format.toUpperCase()==='TILES') { + return <QueryOutputResultsTiles query={query}/> } else { - return <QueryOutputResultsGrid dataset={dataset}/> + return <QueryOutputResultsGrid query={query}/> } } @@ -39,7 +39,6 @@ export default function QueryResultsPage(props) { // iterate through the results of the several queries renderOutputResults = my_state.queries_to_run.map(query => { - //let key = "fetched_query_results." + dataset.dataset let key = "fetched_query_results." + query.dataset_name let resultsPerQuery = my_state[key] -- GitLab