Reactivity updates being triggered too often

[jsheunis]

Found during work on #47.

When loading many triples into a custom reactive rdf.dataset() I get the error:

Uncaught (in promise) Maximum recursive updates exceeded in component <App>. This means you have a reactive effect that is mutating its own dependencies and thus recursively triggering itself. Possible sources include component template, render function, updated hook or watcher source function.

This does not happen when I have a file being loaded with few triples.

A few functions are watching the graphData variable for updates, and I'm guessing this is what then triggers too many recursive updates. It looks like we need a way to limit the triggers somehow. E.g. during the data loading step, the watchers do not actually need to run their code, this is basically only needed when a user completes form fields.

[jsheunis]

The custom reactive wrapper for the rdf dataset looks like this:

function createReactiveDataset() {
    const dataset = rdf.dataset();
    const proxy = new Proxy(dataset, {
      get(target, prop, receiver) {
        const value = Reflect.get(target, prop, receiver);
        if (typeof value === 'function' && ['add', 'delete'].includes(prop)) {
          return function (...args) {
            const result = value.apply(target, args);
            triggerReactivity(); // Trigger reactivity when dataset is mutated
            console.log("(Adding triple to reactive rdf.dataset)")
            return result;
          };
        }
        return value;
      }
    });

So we can easily tell it not to trigger the reactive update, whenever we decide to, e.g. by setting a batch mode variable:

if (!batchMode.value) {
   triggerReactivity(); // Trigger reactivity when dataset is mutated
}

[jsheunis]

The batch mode was added in 6851979#diff-dd1fd08fe6cb7cfec09943beeadd4b356af4fca9f295618e074942f75cde8521 and fixed the issue.