adding QueryOutputTiles

package-lock.json

@@ -8613,11 +8613,24 @@
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.15.tgz",
       "integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A=="
     },
+    "lodash._getnative": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/lodash._getnative/-/lodash._getnative-3.9.1.tgz",
+      "integrity": "sha1-VwvH3t5G1hzc3mh9ZdPuy6o6r/U="
+    },
     "lodash._reinterpolate": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz",
       "integrity": "sha1-DM8tiRZq8Ds2Y8eWU4t1rG4RTZ0="
     },
+    "lodash.debounce": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-3.1.1.tgz",
+      "integrity": "sha1-gSIRw3ipTMKdWqTjNGzwv846ffU=",
+      "requires": {
+        "lodash._getnative": "^3.0.0"
+      }
+    },
     "lodash.memoize": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
@@ -11197,6 +11210,15 @@
         }
       }
     },
+    "react-dock": {
+      "version": "0.2.4",
+      "resolved": "https://registry.npmjs.org/react-dock/-/react-dock-0.2.4.tgz",
+      "integrity": "sha1-5yfcdVCztzEWY13LnA4E0Lev4Xw=",
+      "requires": {
+        "lodash.debounce": "^3.1.1",
+        "prop-types": "^15.5.8"
+      }
+    },
     "react-dom": {
       "version": "16.11.0",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.11.0.tgz",

src/components/Main.js

@@ -57,7 +57,7 @@ function Main () {
 
                 <Switch>
                     <Route exact path="/">
-                        <ArchivesPage />
+                        <QueryPage />
                     </Route>
 
                     <Route path="/telescopes">

src/components/NavigationBar.js

@@ -3,8 +3,10 @@ import React from 'react';
 import { Navbar, Nav } from 'react-bootstrap';
 import logo from '../assets/esap_logo.png';
 import { NavLink } from "react-router-dom"
+import { get_backend_url } from '../utils/web'
 
 export function NavigationBar() {
+    const ESAP_GATEWAY = get_backend_url("/esap-api/")
 
     return (
         <Navbar bg="dark" variant="dark">
@@ -15,10 +17,9 @@ export function NavigationBar() {
             </Navbar.Brand>
 
             <Nav className="mr-auto">
-                <Nav.Link as={NavLink} to="/">Archives</Nav.Link>
                 <Nav.Link as={NavLink} to="/datasets">Datasets</Nav.Link>
                 <Nav.Link as={NavLink} to="/query">Query</Nav.Link>
-                <Nav.Link as={NavLink} to="/telescopes">Telescopes</Nav.Link>
+                <Nav.Link target="_blank" href={ESAP_GATEWAY}>AstroBase</Nav.Link>
                 <Nav.Link as={NavLink} to="/about">About</Nav.Link>
             </Nav>
 

src/components/Tiles.js

+import React from 'react';
+import { Container, Row, Col } from 'react-bootstrap';
+
+import DataProductImageCard from './cards/DataProductImageCard'
+
+// loop through a list of observations and create a Card with a clickable thumbnail for all of them
+export default function Tiles(props) {
+
+    return (
+        <div>
+            <Container fluid>
+                <Row>
+                    {
+                        props.data.map((item) => {
+
+                            let renderImage
+                            if (item.thumbnail) {
+                                renderImage = <Col lg={true}><DataProductImageCard item = {item}/></Col>
+                            }
+                            return (
+                                <div>
+                                    {renderImage}
+                                </div>
+                            );
+                        })
+                    }
+                </Row>
+            </Container>
+        </div>
+    );
+
+}
+

src/components/buttons/RunQueriesButton.js

@@ -43,7 +43,8 @@ export default function RunQueriesButton(props) {
     const runQueries = (queries) => {
         let datasets_to_query = []
         for (var i=0; i< queries.length; i++) {
-            datasets_to_query.push(queries[i].dataset)
+            //datasets_to_query.push(queries[i].dataset) // uri only
+            datasets_to_query.push(queries[i])
         }
 
         // store the list of datasets to query. This can later be used as keys to iterate over the results

src/components/cards/DataProductImageCard.js

@@ -3,7 +3,7 @@ import {Card, Button } from 'react-bootstrap'
 
 // display the main image
 function MainImage(props) {
-    return <a href={props.url} target="_blank"><img src={props.url} width="400"/></a>
+    return <a href={props.url} target="_blank"><img src={props.url} width="300"/></a>
 }
 
 // display a single archive on a card
@@ -12,9 +12,10 @@ export default function DataProductImageCard(props) {
     return (
 
         <Card className="card-archive">
+            <h5>{props.item.title}</h5>
             <Card.Body>
                 <tr>
-                    <MainImage url={props.url} />
+                    <MainImage url={props.item.thumbnail} />
                 </tr>
             </Card.Body>
 

src/components/cards/QueryResultsCard.js

@@ -16,17 +16,7 @@ export default function QueryResultsCard(props) {
 
     let renderQueryResults
     if (my_state.fetched_query_results[props.data.dataset]) {
-/*
-        try {
-            alert('after dispatch (apertif_observations = ' + my_state.fetched_query_results['apertif_observations'].urls[0])
-        } catch (e) {
-        }
 
-        try {
-            alert('after dispatch (astron.ivoa.obscore = ' + my_state.fetched_query_results['astron.ivoa.obscore'].urls[0])
-        } catch (e) {
-        }
-*/
         renderQueryResults= <div>
             <a href={my_state.fetched_query_results[props.data.dataset][0].results}>{my_state.fetched_query_results[props.data.dataset][0].results}</a>
         </div>

src/routes/query/QueryArchives.js

@@ -9,7 +9,7 @@ import LayoutField from "react-jsonschema-form-layout-grid"
 import { get_backend_url } from '../../utils/web'
 import { useGlobalReducer } from '../../Store';
 import { useLocalStorage } from '../../hooks/useLocalStorage';
-import { SET_ESAP_QUERY, SET_FETCHED_QUERY_INPUT, SET_FETCHED_QUERY_RESULTS } from '../../reducers/GlobalStateReducer'
+import { SET_ESAP_QUERY, SET_FETCHED_QUERY_INPUT, SET_FETCHED_QUERY_RESULTS, SET_STATUS_RUN_QUERY } from '../../reducers/GlobalStateReducer'
 import { useFetchCreateQuery } from '../../hooks/useFetchCreateQuery';
 
 import schema_archives from './schema_archives.json'
@@ -183,6 +183,18 @@ export default function QueryArchives(props) {
 
     // handle the submit and dispatch an action accordingly
     const handleSubmit = ({formData}, e) => {
+
+        // clear previous results
+        my_dispatch({type: SET_FETCHED_QUERY_INPUT, fetched_query: undefined})
+
+
+        my_dispatch({type: SET_FETCHED_QUERY_RESULTS, fetched_query_results: {}})
+
+        // 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_DATASETS_TO_QUERY, datasets_to_query:undefined})
+
         queryESAPBackend(formData)
     }
 

src/routes/query/QueryInputResultsGrid.js

@@ -25,12 +25,14 @@ export default function QueryInputResultsGrid(props) {
 
         let datasets_to_query = []
         for (var i=0; i< state.selectedRows.length; i++) {
-            datasets_to_query.push(state.selectedRows[i].dataset)
+            datasets_to_query.push(state.selectedRows[i])
         }
 
         // store the list of datasets to query. This can later be used as keys to iterate over the results
         my_dispatch({type: SET_DATASETS_TO_QUERY, datasets_to_query: datasets_to_query})
 
+        // invalidate the current selection
+
 
     }, []);
 
@@ -98,7 +100,7 @@ export default function QueryInputResultsGrid(props) {
 
     return (
         <div>
-            <h4>&nbsp;&nbsp;Created Queries</h4>
+            <h4>&nbsp;&nbsp;Created Queries ({my_state.status_run_query})</h4>
             <DataTable
                 //title="Created Queries"
                 columns={columns}

src/routes/query/QueryOutputResultList.js

-import React from 'react';
-import {Card, Table } from 'react-bootstrap'
-
-export default function QueryOutputResultList(props) {
-
-    return (
-        <Card>
-            <Table>
-                <thead>
-                <th>dataset</th>
-                <th>url</th>
-
-                </thead>
-                <tbody>
-                {props.items.map((item, index) => (
-                    <tr>
-                        <td>{item.dataset_uri}</td>
-                        <td>{item.urls}</td>
-
-                    </tr>
-                ))}
-                </tbody>
-            </Table>
-        </Card>
-    );
-}
\ No newline at end of file

src/routes/query/QueryOutputResultsGrid.js

@@ -67,6 +67,7 @@ export default function QueryOutputResultsGrid(props) {
             sortable: true,
             width: "10%"
         },
+
         {
             name: 'result',
             selector: 'result',
@@ -75,7 +76,6 @@ export default function QueryOutputResultsGrid(props) {
 
         },
 
-
         {
             cell: row =>
                 <AddToBasketButton input_query={row}/>,
@@ -95,7 +95,6 @@ export default function QueryOutputResultsGrid(props) {
     };
 
 
-
     const contextActions = React.useMemo(() => {
         return <AddToBasketButton queries={selectedRows}/>;
     }, [selectedRows, toggleCleared]);
@@ -103,11 +102,17 @@ export default function QueryOutputResultsGrid(props) {
     // get the query results from the state
     let datasetsToQuery = my_state.datasets_to_query
     let data
+    let title = "Query Results (List)"
 
     if (props.dataset) {
         // filter the data on dataset
-        let key = "fetched_query_results." + props.dataset
+        title = "Query Results for " + props.dataset.dataset
+        let key = "fetched_query_results." + props.dataset.dataset
         data = my_state[key]
+    } else
+
+    if (props.data) {
+       data = props.data
 
     } else {
         // combine the results from different queries.
@@ -115,7 +120,7 @@ export default function QueryOutputResultsGrid(props) {
         data = []
 
         datasetsToQuery.forEach(dataset => {
-            let key = "fetched_query_results." + dataset
+            let key = "fetched_query_results." + dataset.dataset
             let resultsPerQuery = my_state[key]
 
             if (resultsPerQuery!==undefined) {
@@ -130,7 +135,7 @@ export default function QueryOutputResultsGrid(props) {
 
     return (
         <div>
-            <h4>&nbsp;&nbsp;Query Results</h4>
+            <h4>&nbsp;&nbsp;{title}</h4>
             <DataTable
                 // title="Query Results"
                 columns={columns}

src/routes/query/QueryOutputResultsTiles.js

+import React, { useMemo, useState, useCallback, useEffect } from 'react';
+import { Link } from "react-router-dom"
+import { Button, Card, Row, Col, Container } from 'react-bootstrap';
+
+import { useGlobalReducer } from '../../Store';
+import { SET_ACTIVE_DATASET } from '../../reducers/GlobalStateReducer'
+import { get_backend_url } from '../../utils/web'
+
+import AddToBasketButton from '../../components/buttons/AddToBasketButton'
+
+import Tiles from '../../components/Tiles'
+
+export default function QueryOutputResultsTiles(props) {
+    const [ my_state , my_dispatch] = useGlobalReducer()
+
+    let data
+    let title = "Query Results (Tiles)"
+
+    // combine the results from different queries.
+    // iterate through the results of the several queries
+    data = []
+
+    if (props.dataset) {
+        // filter the data on dataset
+        title = "Query Results for " + props.dataset.dataset
+        let key = "fetched_query_results." + props.dataset.dataset
+        data = my_state[key]
+    } else
+
+    if (props.data) {
+        // a data selection is given
+        data = props.data
+
+    } else {
+        // get the list of datasets to query from the global state
+        // (currently this option is no longer used)
+        my_state.datasets_to_query.forEach(dataset => {
+            let key = "fetched_query_results." + dataset.dataset
+            let resultsPerQuery = my_state[key]
+
+            if (resultsPerQuery !== undefined) {
+                if (resultsPerQuery.length > 0) {
+                    data = data.concat(resultsPerQuery)
+                }
+            }
+        })
+    }
+
+    let renderData
+    if (my_state.status_run_query==='fetched') {
+        renderData = <Tiles data = {data} />
+    }
+
+    return (
+        <div>
+            <h4>&nbsp;&nbsp;{title}</h4>
+            <div className="App">
+
+                <Container fluid>
+                    <Row>
+                        <Col sm={12} md={12} lg={12}>
+                            <div>
+                                {renderData}
+                            </div>
+                        </Col>
+                    </Row>
+                </Container>
+
+
+            </div>
+        </div>
+    );
+}
\ No newline at end of file

src/routes/query/QueryPage.js

 
 import React, {useState }  from 'react';
-
 import { Card } from 'react-bootstrap'
 
 import { useGlobalReducer } from '../../Store';
 import LoadingSpinner from '../../components/LoadingSpinner';
 import QueryArchives from './QueryArchives'
-import QueryInputResultList from './QueryInputResultList'
 import QueryInputResultsGrid from './QueryInputResultsGrid'
 import QueryOutputResultsGrid from './QueryOutputResultsGrid'
+import QueryOutputResultsTiles from './QueryOutputResultsTiles'
+import QueryResultsPage from './QueryResultsPage'
 
 export default function QueryPage(props) {
     // use the global state
     const [ my_state , my_dispatch] = useGlobalReducer()
 
-    let renderQueryScreen
+    let renderQueryForm
+
+    // render the query form, only when the database is fetched
     if (my_state.fetched_archives!==undefined) {
-        renderQueryScreen = <div>
+        renderQueryForm = <div>
             <Card className="card-query">
                 <Card.Body>
                     <QueryArchives />
@@ -26,30 +28,30 @@ export default function QueryPage(props) {
     }
 
     let renderSpinner
-    if (my_state.status === "fetching") {
+    if (my_state.status_run_query === "fetching") {
         renderSpinner = <LoadingSpinner/>
     }
 
+    // render the results of the 'create query' button in a list.
     let renderQueryInputResultsGrid
     if (my_state.fetched_query!==undefined) {
         renderQueryInputResultsGrid = <QueryInputResultsGrid data = {my_state.fetched_query} />
     }
 
-    let renderQueryOutputResultsGrid
-
+    // render the results of the 'run query' button (in a list or tiles, depending on how that is defined in 'dataset'
+    let renderQueryResults
     if (my_state.status_run_query === "fetched") {
         if (my_state.datasets_to_query.length > 0) {
-            renderQueryOutputResultsGrid = <QueryOutputResultsGrid />
+            renderQueryResults = <QueryResultsPage/>
         }
     }
 
     return (
         <div >
             {renderSpinner}
-            {renderQueryScreen}
+            {renderQueryForm}
             {renderQueryInputResultsGrid}
-            {renderQueryOutputResultsGrid}
-
+            {renderQueryResults}
         </div>
     );
 }
\ No newline at end of file

src/routes/query/QueryResultsPage.js

+
+import React, {useState }  from 'react';
+import { Card } from 'react-bootstrap'
+
+import { useGlobalReducer } from '../../Store';
+import LoadingSpinner from '../../components/LoadingSpinner';
+
+import QueryOutputResultsGrid from './QueryOutputResultsGrid'
+import QueryOutputResultsTiles from './QueryOutputResultsTiles'
+
+export default function QueryResultsPage(props) {
+    // use the global state
+
+    const [ my_state , my_dispatch] = useGlobalReducer()
+
+    let renderSpinner
+    if (my_state.status_run_query === "fetching") {
+        renderSpinner = <LoadingSpinner/>
+    }
+
+    // get the query results from the state
+    let renderOutputResults
+
+    const renderDataset = (dataset) => {
+        if (dataset.output_format.toUpperCase()==='TILES') {
+            return <QueryOutputResultsTiles dataset={dataset}/>
+        } else {
+            return <QueryOutputResultsGrid dataset={dataset}/>
+        }
+    }
+
+    if (my_state.status_run_query === "fetched") {
+        if (my_state.datasets_to_query.length > 0) {
+
+            let datasetsToQuery = my_state.datasets_to_query
+            let data = []
+
+            // combine the results from different queries.
+            // iterate through the results of the several queries
+
+            renderOutputResults = my_state.datasets_to_query.map(dataset => {
+                let key = "fetched_query_results." + dataset.dataset
+                let resultsPerQuery = my_state[key]
+
+                if (resultsPerQuery !== undefined) {
+                    if (resultsPerQuery.length > 0) {
+                        return renderDataset(dataset)
+                    }
+                }
+            })
+
+        }
+    }
+
+    return (
+        <div >
+            {renderSpinner}
+            {renderOutputResults}
+        </div>
+    );
+}
\ No newline at end of file