Avoided extending query objects in the configuration (#127)

Avoided extending query objects in the configuration

Author: mvanbrab

CHANGELOG.md

@@ -17,6 +17,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Fixed the broken production version due to a missing package (#123).
 - Corrected the counting of the total number of items in the result list (#120).
+- Avoided extending query objects in the configuration (#126).
 
 ## [1.2.0] - 2024-05-07
 

src/App.jsx

@@ -64,9 +64,7 @@ function App() {
         authProvider={authenticationProvider}
         loginPage={SolidLoginForm}
         requireAuth={false}
-        dashboard={() => {
-          return Dashboard({ title: config.title, text: config.introductionText })
-        }}
+        dashboard={Dashboard}
       >
         {config.queries.map((query) => {
           return (

src/components/ActionBar/ActionBar.jsx

@@ -20,7 +20,6 @@ import SourceFetchStatusIcon from "./SourceFetchStatusIcon/SourceFetchStatusIcon
 import SourceVerificationIcon from "./SourceVerificationIcon/SourceVerificationIcon.jsx";
 
 import configManager from "../../configManager/configManager.js";
-const config = configManager.getConfig();
 
 /**
  *
@@ -31,10 +30,6 @@ function ActionBar() {
   const [time, setTime] = useState(0);
   const [sourceInfoOpen, setSourceInfoOpen] = useState(false);
 
-  const context = config.queries.filter((query) => query.id === resource)[0]
-    .comunicaContext;
-
-  const sources = context.sources;
   useEffect(() => {
     if (isLoading) {
       setTime(0);
@@ -49,6 +44,10 @@ function ActionBar() {
     return () => clearInterval(intervalId);
   }, [time, isLoading]);
 
+  const config = configManager.getConfig();
+  const query = configManager.getQueryWorkingCopyById(resource);
+  const context = query.comunicaContext;
+  const sources = context.sources;
   const resultCount = total <= perPage ? total : perPage;
 
   return (

src/components/Dashboard/Dashboard.jsx

@@ -1,31 +1,25 @@
 import Card from '@mui/material/Card';
 import CardContent from '@mui/material/CardContent';
 import {Title} from 'react-admin';
-import PropTypes from 'prop-types';
 import './Dashboard.css';
 
+import configManager from '../../configManager/configManager';
+
 /**
  * This function returns a function that creates a dashboard with an introduction for <Admin>.
- * @param {object} props - This has the properties `title` (text for the app bar) and `text` (the introduction text).
  * @returns {function(): *} - A function that creates a dashboard with an introduction for <Admin>.
  */
-function Dashboard(props) {
-  let {title, text} = props;
-
-  title = title || 'You change this title via the config file.';
-  text = text || 'You change this text via the config file.';
+function Dashboard() {
+  const config = configManager.getConfig();
+  const title = config.title || 'You change this title via the config file.';
+  const introductionText = config.introductionText || 'You change this introduction text via the config file.';
 
   return (
     <Card>
       <Title title={title}/>
-      <CardContent>{text}</CardContent>
+      <CardContent>{introductionText}</CardContent>
     </Card>
   );
 }
 
-Dashboard.propTypes = {
-  title: PropTypes.string,
-  text: PropTypes.string
-};
-
 export default Dashboard;

src/components/InteractionLayout/NavigationBar/NavigationBar.jsx

@@ -8,7 +8,6 @@ import { IconButton } from '@mui/material';
 import { Tooltip } from '@mui/material';
 
 import configManager from "../../../configManager/configManager";
-const config = configManager.getConfig();
 
 function InvalidateButton() {
   const refresh = useRefresh();
@@ -31,6 +30,7 @@ function InvalidateButton() {
  * @returns {Component} custom AppBar as defined by react-admin
  */
 function NavigationBar(props) {
+  const config = configManager.getConfig();
   return (
     <AppBar {...props} userMenu={<AuthenticationMenu />}>
       <img

src/components/InteractionLayout/SelectionMenu/SelectionMenu.jsx

@@ -14,16 +14,15 @@ import IconProvider from "../../../IconProvider/IconProvider";
 import ListAltIcon from '@mui/icons-material/ListAlt';
 
 import configManager from '../../../configManager/configManager';
-const config = configManager.getConfig();
 
 /**
  * A custom menu as defined in React Admin for selecting the query the user whishes to execute.
  * @returns {Component} the selection menu component
  */
 function SelectionMenu() {
-
-  const resources = useResourceDefinitions();
+  const config = configManager.getConfig();
   const queryGroups = config.queryGroups || [];
+  const resources = useResourceDefinitions();
 
   // adding a list to the group that will contain all the queries for said group
   queryGroups.forEach(group => group.queries = [])

src/components/ListResultTable/ListResultTable.jsx

@@ -3,6 +3,8 @@ import PropTypes from "prop-types";
 import {Component} from "react";
 import QueryResultList from "./QueryResultList/QueryResultList";
 
+import configManager from "../../configManager/configManager";
+
 /**
  * @param {object} props - the props passed down to the component
  * @returns {Component} custom List as defined by react-admin which either shows a loading indicator or the query results
@@ -18,8 +20,6 @@ function ListResultTable(props) {
     resource,
     sort,
     variables,
-    changeVariables,
-    submitted,
     ...rest
   } = props;
 
@@ -31,6 +31,8 @@ function ListResultTable(props) {
     }
   });
 
+  const query = configManager.getQueryWorkingCopyById(resource);
+
   return (
     <ListBase
       debounce={debounce}
@@ -45,7 +47,7 @@ function ListResultTable(props) {
       sort={sort}
     >
       {isLoading && <Loading loadingSecondary={"The page is loading. Just a moment please."} />}
-      {!isLoading && <QueryResultList {...rest} changeVariables={changeVariables} submitted={submitted} />}
+      {!isLoading && <QueryResultList resource={resource} { ...rest } />}
     </ListBase>
   );
 }
@@ -59,9 +61,9 @@ ListResultTable.propTypes = {
   filterDefaultValues: PropTypes.object,
   perPage: PropTypes.number,
   queryOptions: PropTypes.object,
-  resource: PropTypes.string,
+  resource: PropTypes.string.isRequired,
   sort: PropTypes.object,
-  variables: PropTypes.object,
+  variables: PropTypes.object.isRequired
 };
 
 export default ListResultTable;

src/components/ListResultTable/QueryResultList/QueryResultList.jsx

@@ -7,18 +7,18 @@ import TableHeader from "./TableHeader/TableHeader";
 import Button from '@mui/material/Button';
 import SearchOffIcon from '@mui/icons-material/SearchOff';
 import { SvgIcon, Box, Typography } from "@mui/material";
+import PropTypes from "prop-types";
 
 import configManager from "../../../configManager/configManager";
-const config = configManager.getConfig();
 
 /**
  * @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 QueryTitle = useResourceDefinition().options.label;
+  const queryTitle = useResourceDefinition().options.label;
   const { data } = useListContext(props);
-  const {changeVariables, submitted} = props;
+  const { resource, changeVariables, submitted} = props;
   const [values, setValues] = useState(undefined);
   useEffect(() => {
     if (data && data.length > 0) {
@@ -28,15 +28,18 @@ function QueryResultList(props) {
     }
   }, [data]);
 
+  const config = configManager.getConfig();
+  const query = configManager.getQueryWorkingCopyById(resource);
+
   return (
     <div style={{ paddingLeft: '20px' , paddingRight: '10px' }}>
       <Title title={config.title} />
 
       {submitted && <Aside changeVariables={changeVariables}/> /*  Adding button to make a new query - top left corner */ } 
-      <Typography fontSize={"2rem"} mt={2} > {QueryTitle} </Typography>
+      <Typography fontSize={"2rem"} mt={2} > {queryTitle} </Typography>
       {values ?(
-          <ListView title=" " actions={<ActionBar />} {...props} >
-            <Datagrid header={<TableHeader config={config}/>} bulkActionButtons={false}>
+        <ListView title=" " actions={<ActionBar />} {...props} >
+            <Datagrid header={<TableHeader query={query}/>} bulkActionButtons={false}>
               {Object.keys(values).map((key) => {
                 return (
                   <GenericField
@@ -49,12 +52,18 @@ function QueryResultList(props) {
             </Datagrid>
           </ListView>
         ): 
-          <NoValuesDiplay/>
+          <NoValuesDisplay/>
       }
     </div>
   );
 }
 
+QueryResultList.propTypes = {
+  resource: PropTypes.string.isRequired,
+  changeVariables: PropTypes.func.isRequired,
+  submitted: PropTypes.bool.isRequired
+};
+
 /**
  *
  * @param {Array<Term>} data - a list of data objects
@@ -81,7 +90,7 @@ const Aside = (props) => {
     </div>
 )}
 
-const NoValuesDiplay = () => {
+const NoValuesDisplay = () => {
   return(
     <div>
       <Box display="flex" alignItems="center" sx={{m:3}}>

src/components/ListResultTable/QueryResultList/TableHeader/TableHeader.jsx

@@ -8,18 +8,16 @@ import LinkIcon from "@mui/icons-material/Link";
 import PropTypes from "prop-types";
 import { Component } from "react";
 
+import configManager from "../../../../configManager/configManager";
+
 /**
  * 
  * @param {object} props - the props passed down to the component
  * @param {Array<Component>} props.children - the children of the component 
- * @param {object} props.config - the config object of the application
  * @returns {Component} the header of the table containing the column names, the sort icons and ontology links
  */
-function TableHeader({ children, config }) {
+function TableHeader({ children }) {
   const { sort, setSort, resource } = useListContext();
-  const { variableOntology } = config.queries.filter(
-    (query) => query.id === resource
-  )[0];
 
   /**
    * Handles the click on a header and sets the sort state accordingly
@@ -37,6 +35,9 @@ function TableHeader({ children, config }) {
     setSort(newSort);
   }
 
+  const query = configManager.getQueryWorkingCopyById(resource);
+  const variableOntology = query.variableOntology;
+
   return (
     <TableHead>
       <TableRow>
@@ -90,8 +91,6 @@ function TableHeader({ children, config }) {
 }
 
 TableHeader.propTypes = {
-  children: PropTypes.node,
-  config: PropTypes.object.isRequired,
-
+  children: PropTypes.node
 }
 export default TableHeader;

src/components/ListResultTable/TemplatedListResultTable.jsx

@@ -6,7 +6,6 @@ import TemplatedQueryForm from "./TemplatedQueryForm.jsx";
 import ListResultTable from "./ListResultTable.jsx";
 
 import configManager from '../../configManager/configManager.js';
-const config = configManager.getConfig();
 
 /**
  * A wrapper component around ListResultTable, to support templated queries
@@ -22,15 +21,10 @@ const TemplatedListResultTable = (props) => {
   const [submitted, setSubmitted] = useState(false);
   const [searchPar, setSearchPar] = useState({});
 
-  const query = config.queries.filter(
-    (query) => query.id === resource
-  )[0];
-
+  const query = configManager.getQueryWorkingCopyById(resource);
   const isTemplatedQuery = query.variables !== undefined;
   let tableEnabled = !isTemplatedQuery;
 
-  
-
   if (isTemplatedQuery) {
     // Update variables from query parameters
     const queryParams = new URLSearchParams(location.search);
@@ -83,7 +77,7 @@ const TemplatedListResultTable = (props) => {
           searchPar={searchPar} 
         />
       }
-      {tableEnabled && <ListResultTable {...props} variables={variables} changeVariables={changeVariables} submitted={submitted}/>}
+      {tableEnabled && <ListResultTable {...props} resource={resource} variables={variables} changeVariables={changeVariables} submitted={submitted}/>}
     </>
   )
 }