For templated queries: variables shown in title of result table

Author: mvanbrab

CHANGELOG.md

@@ -11,6 +11,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Support for multiple configurations (#69, #49).
 - Collections of known configurations are gathered in subdirectories of main/configs (#175).
+- For templated queries: variables shown in title of result table (#163).
 
 ## [1.5.0] - 2025-01-02
 

README.md

@@ -6,7 +6,7 @@ inspect the corresponding results.
 Table of contents:
 
 * [Preface](#preface)
-* [Prerequistes](#prerequistes)
+* [Prerequisites](#prerequisites)
 * [Getting started](#getting-started)
 * [The supporting resources](#the-supporting-resources)
 * [Static, production build](#static-production-build)
@@ -25,6 +25,7 @@ Table of contents:
 * [For developers](#for-developers)
   * [Adding your own configuration](#adding-your-own-configuration)
   * [Testing](#testing)
+    * [Additional prerequisites](#additional-prerequisites)
     * [Testing the production version](#testing-the-production-version)
     * [Testing the development version](#testing-the-development-version)
 
@@ -41,9 +42,10 @@ In order to be able to maintain several different configurations (or *flavours*)
 Before launching or building the application, their contents need to be copied from the appropriate subdirectory of `main/configs`.
 The instructions below explain when and how to use the `select-config.cjs` script for this purpose.
 
-## Prerequistes
+## Prerequisites
 
 * Node >= 18 with npm
+* A Linux platform with a bash shell
 
 ## Getting started
 
@@ -382,14 +384,28 @@ The easiest way to add your own configuration is:
 
 ### Testing
 
-For testing with the provided configuration file, we use [Cypress](https://www.cypress.io/).
-
 > It is important to test the production version at least at the end of a development cycle.
 
 The development version might be tested repeatedly during development.
 
 Both the production version and the development version are tested from a non-empty path in the base URL.
 
+#### Additional prerequisites
+
+Testing uses [Cypress](https://docs.cypress.io/app/get-started/why-cypress).
+The app will be installed with `npm install` as documented below, but you need to do take care of additional [Linux prerequisites](https://docs.cypress.io/app/get-started/install-cypress#Linux-Prerequisites).
+
+We instruct Cypress to use the Chrome browser, so you'll need it on your system. Installation example:
+
+```bash
+sudo apt update
+sudo apt -y upgrade
+sudo apt -y autoremove
+cd ~
+wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb
+sudo apt -y install ./google-chrome-stable_current_amd64.deb
+```
+
 #### Testing the production version
 
 1. Build the production version of the Web application and serve it:

main/src/components/ListResultTable/ListResultTable.jsx

@@ -47,7 +47,7 @@ function ListResultTable(props) {
       sort={sort}
     >
       {isLoading && <Loading loadingSecondary={"The page is loading. Just a moment please."} />}
-      {!isLoading && <QueryResultList resource={resource} { ...rest } />}
+      {!isLoading && <QueryResultList resource={resource} variables={variables} { ...rest } />}
     </ListBase>
   );
 }

main/src/components/ListResultTable/QueryResultList/QueryResultList.jsx

@@ -18,7 +18,7 @@ import CustomConversionButton from "../../CustomQueryEditor/customConversionButt
  * @returns {Component} custom ListViewer as defined by react-admin containing the results of the query with each variable its generic field. 
  */
 function QueryResultList(props) {
-  const { resource, changeVariables, submitted } = props;
+  const { resource, variables, changeVariables, submitted } = props;
   const resourceDef = useResourceDefinition();
 
   const queryTitle = resourceDef.options.label;
@@ -42,7 +42,14 @@ function QueryResultList(props) {
         {submitted && <Aside changeVariables={changeVariables} />}
         {resourceDef.options.queryGroupId === 'cstm' ? <CustomQueryEditButton queryID={resourceDef.name} submitted={submitted} /> : <CustomConversionButton query={query} id={resourceDef.name}/>}
       </div>
-      <Typography fontSize={"2rem"} mt={2} > {queryTitle} </Typography>
+      <Typography sx={{ fontSize: '2rem' }} > {queryTitle} </Typography>
+      {variables && <>
+        {Object.keys(variables).map((key) => {
+          return (<Typography sx={{ fontSize: '1.5rem' }} > {key}: {variables[key]} </Typography>)
+        })
+        }
+      </>
+      }
       {values ? (
         <ListView title=" " actions={<ActionBar />} {...props} >
           <Datagrid header={<TableHeader query={query} />} bulkActionButtons={false}>

test/cypress/e2e/templated-query.cy.js

@@ -18,6 +18,9 @@ describe("Templated query", () => {
     // Comfirm query
     cy.get('button').contains('Query').click();
 
+    // Check the display of the variable(s) and their value
+    cy.contains("genre: \"Baroque\"");
+
     // Check that the page loaded and that we can see the correct data
     cy.contains("Finished in:");
     cy.get('.column-name').find('span').contains("Johann Sebastian Bach");
@@ -69,6 +72,12 @@ describe("Templated query", () => {
     cy.get('li').contains('Mozart').click();
 
     cy.get('button').contains('Query').click();
+
+    // Check the display of the variable(s) and their value
+    cy.contains("genre: \"Classical\"");
+    cy.contains("sameAsUrl: <https://en.wikipedia.org/wiki/Wolfgang_Amadeus_Mozart>");
+
+    // Check that the page loaded and that we can see the correct data
     cy.contains("Finished in:");
     cy.get('.column-name').find('span').contains("Wolfgang Amadeus Mozart");
   });