Speed up pagination / Clean query cache (indirect variables) / The page is loading display / "Finished in" correct elapsed time (#196)

Author: mvanbrab

CHANGELOG.md

@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Added
 
 - A favicon (#188).
+- A cache to remember the entire result table (useful when scrolling through pages of a lengthy result table) (#193).
 
 ### Changed
 
@@ -23,7 +24,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Solved console warning when hovering over source verification question mark (#128).
 - ASK query is working now (#22).
 - "Finished in" now shows effective query execution time (#130).
-- "Clean query cache" button's functionality works as expected now (#190).
+- "Clean query cache" button's functionality works as expected now (also for templated queries with indirect variables) (#190).
+- "The page is loading." type of prompt is back (now "The list is loading." and "The options for the variables in this query are loading.") (#194).
 
 ## [1.6.0] - 2025-03-17
 

main/src/components/ActionBar/ActionBar.jsx

@@ -27,22 +27,26 @@ import configManager from "../../configManager/configManager.js";
  */
 function ActionBar() {
   const { total, isLoading, resource } = useListContext();
-  const [time, setTime] = useState(0);
+  const now = Date.now();
+  const [timeStart, setTimeStart] = useState(now);
+  const [timeNow, setTimeNow] = useState(now);
   const [sourceInfoOpen, setSourceInfoOpen] = useState(false);
 
   useEffect(() => {
     if (isLoading) {
-      setTime(0);
+      const now = Date.now();
+      setTimeStart(now);
+      setTimeNow(now);
     }
   }, [isLoading]);
 
   useEffect(() => {
     let intervalId;
     if (isLoading) {
-      intervalId = setInterval(() => setTime(time + 1), 10);
+      intervalId = setInterval(() => setTimeNow(Date.now()), 100);
     }
     return () => clearInterval(intervalId);
-  }, [time, isLoading]);
+  }, [timeNow, isLoading]);
 
   const config = configManager.getConfig();
   const query = configManager.getQueryWorkingCopyById(resource);
@@ -58,7 +62,7 @@ function ActionBar() {
             <div className="information-box">
               {isLoading && <strong>Runtime: </strong>}
               {!isLoading && <strong>Finished in: </strong>}
-              <Time time={time} showMilliseconds={config.showMilliseconds} />
+              <Time elapsedMilliseconds={timeNow - timeStart} showMilliseconds={config.showMilliseconds} />
             </div>
             <div className="information-box">
               <strong>Sources: </strong>

main/src/components/ActionBar/Time.jsx

@@ -6,24 +6,15 @@ import { Component } from "react";
  * @returns {Component} a component that displays the time in seconds and milliseconds (if configured to do so)
  */
 function Time(props) {
-  const time = props.time;
-  const minutes =
-    Math.floor((time % 360000) / 6000) + 60 * Math.floor(time / 360000);
-  const seconds = Math.floor((time % 6000) / 100) + 60 * minutes;
-  const milliseconds = time % 100;
-
-  let display = seconds.toString();
   if (props.showMilliseconds) {
-    display = `${display}.${milliseconds}`;
+    return <>{`${(props.elapsedMilliseconds / 1000).toFixed(3)} s`}</>;
+  } else {
+    return <>{`${Math.round(props.elapsedMilliseconds / 1000)} s`}</>;
   }
-
-  display += "s";
-
-  return <>{display}</>;
 }
 
 Time.propTypes = {
-  time: PropTypes.number,
+  elapsedMilliseconds: PropTypes.number,
   showMilliseconds: PropTypes.bool,
 };
 

main/src/components/InteractionLayout/NavigationBar/NavigationBar.jsx

@@ -1,7 +1,8 @@
-import { AppBar, TitlePortal, useRefresh } from "react-admin";
+import { AppBar, TitlePortal } from "react-admin";
 import "./NavigationBar.css";
 import AuthenticationMenu from "../AuthenticationMenu/AuthenticationMenu";
 import { Component, useState } from "react";
+import { useNavigate } from 'react-router-dom';
 import CleaningServicesIcon from '@mui/icons-material/CleaningServices';
 import { IconButton } from '@mui/material';
 import { Tooltip } from '@mui/material';
@@ -10,6 +11,7 @@ import AboutDialog from "./AboutDialog";
 
 import configManager from "../../../configManager/configManager";
 import comunicaEngineWrapper from "../../../comunicaEngineWrapper/comunicaEngineWrapper";
+import SparqlDataProvider from "../../../dataProvider/SparqlDataProvider";
 
 function AboutButton(props) {
   return (
@@ -22,10 +24,12 @@ function AboutButton(props) {
 }
 
 function InvalidateButton() {
-  const refresh = useRefresh();
+  const navigate = useNavigate();
   const handleClick = async () => {
     await comunicaEngineWrapper.reset();
-    refresh();
+    SparqlDataProvider.clearListCache();
+    // navigate! (refresh is not enough to clear status in case of templated queries with indirect variables)
+    navigate('/');
   }
   return (
     <Tooltip title="Clean Query Cache">

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

@@ -1,5 +1,5 @@
 import { Component } from "react";
-import { Datagrid, List, Title, useListContext, useResourceDefinition } from "react-admin";
+import { Datagrid, List, Title, Loading, useListContext, useResourceDefinition } from "react-admin";
 import ActionBar from "../../ActionBar/ActionBar";
 import GenericField from "../../../representationProvider/GenericField";
 import TableHeader from "./TableHeader/TableHeader";
@@ -92,6 +92,11 @@ const NoValuesDisplay = () => {
 const MyDatagrid = (props) => {
   const { query } = props;
   const { data, isLoading } = useListContext(props);
+
+  if (isLoading) {
+    return <Loading loadingSecondary={"The list is loading. Just a moment please."} />;
+  }
+  
   let values = {};
   if (!isLoading && data && data.length > 0) {
     data.forEach((record) => {

main/src/components/ListResultTable/TemplatedListResultTable.jsx

@@ -40,7 +40,9 @@ const TemplatedListResultTable = (props) => {
   useEffect(() => {
     (async () => {
       if (query.variables || query.indirectVariables) {
+        // LOG console.log('start waiting for variable options');
         setVariableOptions(await dataProvider.getVariableOptions(query));
+        // LOG console.log('done waiting for variable options');
         setWaitingForVariableOptions(false);
       }
     })();
@@ -55,7 +57,7 @@ const TemplatedListResultTable = (props) => {
 
   if (waitingForVariableOptions) {
     // LOG console.log('TemplatedListResultTable waiting for variable options.');
-    return <Loading loadingSecondary={"Loading variable options. Just a moment please."} />;
+    return <Loading sx={{ height: "auto" }} loadingSecondary={"The options for the variables in this query are loading. Just a moment please."} />;
   }
 
   if (isTemplatedQuery) {

main/src/dataProvider/SparqlDataProvider.js

@@ -26,6 +26,13 @@ const onConfigChanged = (newConfig) => {
 
 configManager.on('configChanged', onConfigChanged);
 
+// simple cache to save time while scrolling through pages of a list
+// results = the result of executeQuery, totalItems
+const listCache = {
+  hash: "",
+  results: {}
+};
+
 // LOG let getListCounter = 0;
 // LOG let getVariableOptionsCounter = 0;
 
@@ -58,7 +65,19 @@ export default {
       query.variableValues = meta.variableValues;
     }
 
-    let results = await executeQuery(query);
+    let results;
+    const hash = JSON.stringify({ resource, variableValues: query.variableValues });
+    // LOG console.log(`hash: ${hash}`);
+    if (hash == listCache.hash) {
+      // LOG console.log(`reusing listCache.results: ${JSON.stringify(listCache.results, null, 2)}`);
+      results = listCache.results;
+    } else {
+      results = await executeQuery(query);
+      listCache.hash = hash;
+      listCache.results = results;
+      // LOG console.log(`new listCache.results: ${JSON.stringify(listCache.results, null, 2)}`);
+    }
+
     let totalItems = results.length;
     results = results.slice(offset, offset + limit);
 
@@ -101,7 +120,8 @@ export default {
   deleteMany: async function deleteMany() {
     throw new NotImplementedError();
   },
-  getVariableOptions
+  getVariableOptions,
+  clearListCache
 };
 
 /**
@@ -427,3 +447,12 @@ async function getVariableOptions(query) {
   }
   return variableOptions;
 }
+
+/**
+ * Clears the list cache
+ */
+function clearListCache() {
+  // LOG console.log('Clearing listCache');
+  listCache.hash = "";
+}
+