Reloading for changing HSDS data

[felix-engelmann]

h5web is a really neat interface explore h5 structured files. With the support of hsds, a visualized file may change while it is viewed.

Is there any way to allow the web interface to refresh the data from the hsds server. Either regularly, or with an update button?
Probably there needs to be an assumption that the structure does not change but only the data. I realized that the webinterface only queries the backend for new datasets, but caches already viewed ones, so switching back to an already viewed one does not reload from the backend.

Is such a reload feature on the horizon or out of scope for this project?

[axelboc]

Excellent question! The current caching strategy is definitely limited... The long-term plan is to have at least an LRU cache of sorts to avoid growing the cache indefinitely (or the ability for the consumer application to provide its own caching data structure).

Adding a refresh button somewhere to force a refetch of the current dataset is not out of the question, but I do think it'd be a bit of a shame, since it moves the responsibility of knowing when a dataset is stale to the end user.

One thing that's actually very easy to do currently is clearing the entire cache. To do so, all you need is to pass a key to HsdsProvider and change the value of that key whenever you want the cache to be recreated.

This is a React feature: because the fetching cache is part of the internal state of HsdsProvider, the simplest way to clear it is to force a remount of HsdsProvider, which is what the key prop is particularly good for.

<HsdsProvider
  key={<file-hash>} // or an incrementing number (as long as you know when to increment it)
  url={...}
  username={...}
  password={...}
  filepath={...}
>
  <App />
</HsdsProvider>

A couple of notes for clarity:

• The fetch cache is already recreated whenever any of the props of HsdsProvider change, so no need to pass a key when dealing with immutable files.
• The same technique works with the other providers as well (though it makes less sense with H5WasmProvider, since it currently expects to receive the entire file as a buffer).
• Make sure to set the key on the provider itself and not on a parent component to avoid remounting the App component and losing its internal state (like the selected entity).

Let me know if this works and matches your need!

[axelboc]

I've just added some documentation on using key for this purpose in the README of @h5web/app: https://github.com/silx-kit/h5web/tree/main/packages/app#key-key-optional. Let me know if it's not clear or if the key solution doesn't quite fit.

[felix-engelmann]

Thanks for the additional documentation. This is exactly what I wanted to achieve. So far I was just unsuccessful in changing the key from a independent websocket sending pings when the data changed. But the problem is just that I never used react and need to go through a few tutorials. I'll let you know when I get something working.

[felix-engelmann]

I finally had time to revisit this web app and thanks to your documentation, I managed to make a refresh button. Unfortunately it refreshes the full App losing the tree state.

I suspect as the App element is a child, it gets remounted on every change of the parent HsdsProvider. Is there a way to keep the App state while updating the provider.

Here is my full MyApp.tsx.

import { App, HsdsProvider } from '@h5web/app';
import { useState, useCallback } from 'react';

function MyApp() {
  const [key, setKey] = useState(0);
  const incrementKey = useCallback(() => setKey((val) => val + 1), []);

  return (
    <>
      <button type="button" onClick={incrementKey}>
        Refresh
      </button>
      <HsdsProvider
        key={key}
        url="http://..."
        filepath="/home/live"
      >
        <App />
      </HsdsProvider>
    </>
  );
}

export default MyApp;

[axelboc]

Make sure to set the key on the provider itself and not on a parent component to avoid remounting the App component and losing its internal state (like the selected entity).

Seems I was wrong about this, sorry! 😢

I've just opened #1673 which offers an alternative in the form of a resetKeys array prop. Please look out for the next release 😉

[axelboc]

v12 is now released 😉