Queries no longer executed twice; templated queries with variable values in url search parameters work

CHANGELOG.md

@@ -7,6 +7,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Fixed
+
+- Queries no longer executed twice (#176).
+- Templated queries: visiting with variable values in url search parameters now works as expected (#183).
+
 ## [1.6.0] - 2025-03-17
 
 ### Added

main/src/components/InteractionLayout/SelectionMenu/SelectionMenu.jsx

@@ -15,6 +15,7 @@ import IconProvider from "../../../IconProvider/IconProvider";
 import configManager from '../../../configManager/configManager';
 
 
+// LOG let selectionMenuCounter = 0;
 
 const SelectionMenu = () => {
   const resources = useResourceDefinitions();
@@ -52,6 +53,11 @@ const SelectionMenu = () => {
     }));
   };
 
+  // LOG console.log(`--- SelectionMenu #${++selectionMenuCounter}`);
+  // LOG console.log(`queryGroups: ${ JSON.stringify(queryGroups, null, 2) }`);
+  // LOG console.log(`looseQueries: ${JSON.stringify(looseQueries, null, 2)}`);
+  // LOG console.log(`openGroups: ${ JSON.stringify(openGroups, null, 2) }`);
+
   return (
     <ThemeProvider theme={menuItemTheme}>
       <div style={{ height: '100%', overflowY: 'auto', backgroundColor: 'white' }}>

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

@@ -1,5 +1,5 @@
-import { Component, useEffect, useState } from "react";
-import { Datagrid, ListView, Title, useListContext, useResourceDefinition } from "react-admin";
+import { Component } from "react";
+import { Loading, Datagrid, ListView, Title, useListContext, useResourceDefinition } from "react-admin";
 import ActionBar from "../../ActionBar/ActionBar";
 import GenericField from "../../../representationProvider/GenericField";
 import { Term } from "sparqljs";
@@ -13,44 +13,55 @@ import IconProvider from "../../../IconProvider/IconProvider";
 import configManager from "../../../configManager/configManager";
 import CustomConversionButton from "../../CustomQueryEditor/customConversionButton";
 
+
+// LOG let queryResultListCounter = 0;
+
 /**
  * @param {object} props - the props passed down to the component
  * @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, variables, changeVariables, submitted } = props;
+  const { resource, variableValues, changeVariables, submitted } = props;
   const resourceDef = useResourceDefinition();
-
-  const queryTitle = resourceDef.options.label;
-  const { data } = useListContext(props);
-  const [values, setValues] = useState(undefined);
-  useEffect(() => {
-    if (data && data.length > 0) {
-      const setData = reduceDataToObject(data);
-      delete setData.id;
-      setValues(setData);
-    }
-  }, [data]);
+  const queryTitle = resourceDef?.options?.label;
+  const { data, isLoading } = useListContext(props);
+  let values = {};
+  if (!isLoading && data && data.length > 0) {
+    data.forEach((record) => {
+      Object.keys(record).forEach((variable) => {
+        if (!values[variable]) {
+          values[variable] = [];
+        }
+        values[variable] = values[variable].concat(record[variable]);
+      });
+    });
+    delete values.id;
+  }
 
   const config = configManager.getConfig();
   const query = configManager.getQueryWorkingCopyById(resource);
 
+  // LOG console.log(`--- QueryResultList #${++queryResultListCounter}`);
+  // LOG console.log(`props: ${ JSON.stringify(props, null, 2) }`);
+  // LOG console.log(`isLoading: ${isLoading}`);
+
   return (
+    isLoading ? <Loading loadingSecondary={"The page is loading. Just a moment please."} /> :
     <div style={{ paddingLeft: '20px', paddingRight: '10px' }}>
       <Title title={config.title} />
       <div style={{ display: 'flex', flexDirection: 'row' }}>
         {submitted && <Aside changeVariables={changeVariables} />}
         {resourceDef.options.queryGroupId === 'cstm' ? <CustomQueryEditButton queryID={resourceDef.name} submitted={submitted} /> : <CustomConversionButton query={query} id={resourceDef.name}/>}
       </div>
       <Typography sx={{ fontSize: '2rem' }} > {queryTitle} </Typography>
-      {variables && <>
-        {Object.keys(variables).map((key) => {
-          return (<Typography sx={{ fontSize: '1.5rem' }} > {key}: {variables[key]} </Typography>)
+      {variableValues && <>
+        {Object.keys(variableValues).map((key) => {
+          return (<Typography sx={{ fontSize: '1.5rem' }} > {key}: {variableValues[key]} </Typography>)
         })
         }
       </>
       }
-      {values ? (
+      {Object.keys(values).length ? (
         <ListView title=" " actions={<ActionBar />} {...props} >
           <Datagrid header={<TableHeader query={query} />} bulkActionButtons={false}>
             {Object.keys(values).map((key) => {
@@ -73,28 +84,11 @@ function QueryResultList(props) {
 
 QueryResultList.propTypes = {
   resource: PropTypes.string.isRequired,
+  variableValues: PropTypes.object.isRequired,
   changeVariables: PropTypes.func.isRequired,
   submitted: PropTypes.bool.isRequired
 };
 
-/**
- *
- * @param {Array<Term>} data - a list of data objects
- * @returns {Term} an object with the keys of the data and the values as an array of the values of the data
- */
-function reduceDataToObject(data) {
-  const dataObject = {};
-  data.forEach((record) => {
-    Object.keys(record).forEach((variable) => {
-      if (!dataObject[variable]) {
-        dataObject[variable] = [];
-      }
-      dataObject[variable] = dataObject[variable].concat(record[variable]);
-    });
-  });
-  return dataObject;
-}
-
 const Aside = (props) => {
   const { changeVariables } = props;
   return (