fix(jupyter): Fix initial viewport sizing and React 18 migration

[yharby]

Summary

This PR fixes two related issues in the kepler.gl-jupyter HTML export:

1. Initial viewport sizing - Map doesn't fill the viewport on initial page load, requiring a browser resize to trigger correct sizing
2. React 18 compatibility - Migrates from deprecated ReactDOM.render to the modern createRoot API

Changes

app.js:

• Call handleResize() on component mount in the useEffect hook to set correct initial dimensions

root.js:

• Migrate from ReactDOM.render to React 18's createRoot API
• Add DataLoader component to handle data loading after Redux Provider mounts
• This ensures Provider subscriptions are active before dispatching addDataToMap actions

main.js:

• Remove data loading logic (now handled by DataLoader component in React lifecycle)
• Simplify to only handle DOM setup and trigger render

Root Cause

The original code had two issues:

1. handleResize() was only called on the resize event, never on initial mount, so the map container started with 0x0 dimensions until a resize occurred

2. React 18's createRoot().render() is asynchronous, unlike the synchronous ReactDOM.render(). This caused a race condition where data was dispatched to Redux before the Provider's subscriptions were active, resulting in no layers being displayed

Testing

• Tested locally with HTML export - map now fills viewport immediately on load
• Data/config loads correctly with layers displayed
• No console errors

Fixes #3252

[Copilot]

Pull request overview

This PR addresses viewport sizing issues in kepler.gl-jupyter HTML exports and migrates to React 18's modern rendering API. The changes fix a bug where maps didn't render at the correct size on initial load and resolve a race condition introduced by React 18's asynchronous rendering.

Key changes:

• Added initial resize handler call on component mount to set correct viewport dimensions
• Migrated from deprecated ReactDOM.render to React 18's createRoot API
• Moved data loading into React component lifecycle via new DataLoader component to ensure Redux Provider subscriptions are active before dispatching actions

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 2 comments.

File	Description
bindings/kepler.gl-jupyter/js/lib/keplergl/main.js	Removed data loading logic (now handled in root.js) and cleaned up unused imports
bindings/kepler.gl-jupyter/js/lib/keplergl/components/root.js	Migrated to React 18 createRoot API and added DataLoader component to handle data loading after Redux Provider mounts
bindings/kepler.gl-jupyter/js/lib/keplergl/components/app.js	Added handleResize() call on component mount to fix initial viewport sizing

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

Pull request overview

Copilot reviewed 3 out of 3 changed files in this pull request and generated 3 comments.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

The dimension update logic has been simplified, but this may cause unnecessary re-renders. The previous implementation only updated state when dimensions actually changed:

const dimensionToSet = {
  ...(width && width !== windowDimension.width ? {width} : {}),
  ...(height && height !== windowDimension.height ? {height} : {})
};
setDimension(dimensionToSet);

The new logic always calls setDimension({width, height}) even if the dimensions haven't changed. Consider adding a check to only update when dimensions actually change:

if ((width && width !== windowDimension.width) || (height && height !== windowDimension.height)) {
  setDimension({width, height});
}

Suggested change

	setDimension({width, height});
	if (
	width !== windowDimension.width ||
	height !== windowDimension.height
	) {
	setDimension({width, height});
	}

[Copilot]

The cleanup function in useEffect doesn't clear the timeout created by resizeDelay(). If the component unmounts while a timeout is pending, the timeout callback will still execute, potentially calling handleResize() on an unmounted component.

Consider storing the timeout ID and clearing it in the cleanup:

useEffect(() => {
  handleResize();
  let timeoutId = null;
  const resizeHandler = () => {
    if (timeoutId) clearTimeout(timeoutId);
    timeoutId = window.setTimeout(handleResize, 500);
  };
  window.addEventListener('resize', resizeHandler);
  return () => {
    window.removeEventListener('resize', resizeHandler);
    if (timeoutId) clearTimeout(timeoutId);
  };
}, []);

[Copilot]

Including store in the useEffect dependency array may cause unexpected behavior. If the store reference changes (which shouldn't happen in normal usage), the effect will re-run but hasLoadedData.current will still be true, preventing data from being reloaded with the new store.

Consider either:

1. Removing store from the dependency array (if the store reference is guaranteed to be stable)
2. Resetting hasLoadedData.current = false when the store changes
3. Using a WeakMap to track loaded state per store instance

The current implementation assumes the store reference never changes while also including it in dependencies, which is inconsistent.