fix: refresh 3D tileset immediately when Cesium Ion token or data source changes#134
Merged
Conversation
… data source changes
There was a problem hiding this comment.
Pull request overview
Fixes a bug where the 3D tileset on the globe did not refresh when the Cesium Ion access token (or other underlying data source identity) changed — previously requiring users to toggle layer visibility twice. The fix forces an unmount/remount of <Cesium3DTileset> at both the React component level (via Feature/index.tsx key) and the Cesium element level (via key on the Resium component), since Cesium3DTileset.url is a constructor-only property.
Changes:
- Replace
urlMD5with a broaderdataSourceKey(type, url, layers, provider, googleMapApiKey, cesiumIonAccessToken) inFeature/index.tsxso noFeature components remount on data source identity changes. - Add
tilesetKeytoTileset/hooks.tsand use it askeyon<Cesium3DTileset>, with stale-ref guards, auseLayoutEffectto reset derived state on key change, and anonErrorhandler. - Remove the hand-written
memo()comparator fromTileset/index.tsx(key-based remount makes it redundant and could mask updates).
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated no comments.
| File | Description |
|---|---|
| src/engines/Cesium/Feature/index.tsx | Expand the noFeature remount key (dataSourceKey) to cover type, layers, provider, Google API key, and Ion token. |
| src/engines/Cesium/Feature/Tileset/hooks.ts | Introduce tilesetKey, key-aware ref/handler guards, useLayoutEffect to reset state, and handleError; extract cesiumIonAccessToken and reearthGooglePhotorealisticUrl memos. |
| src/engines/Cesium/Feature/Tileset/index.tsx | Apply key={tilesetKey} and onError={handleError} to <Cesium3DTileset>; drop the custom memo comparator. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
airslice
previously approved these changes
May 29, 2026
bnimit
reviewed
May 29, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.

Bug
When a Cesium Ion access token was added or removed (e.g. enabling OSM Buildings
or Google Photorealistic 3D Tiles), the tileset on the globe did not refresh.
The only workaround was to toggle the layer's visibility off and on twice.
Root cause:
Cesium3DTileset.urlis a constructor-only property — it cannotbe updated on a mounted component. The fix must force an unmount + remount of
<Cesium3DTileset>whenever the underlying data source or auth token changes.Two separate render layers needed to be addressed:
React component level (
Feature/index.tsx) — thekeyused for noFeaturecomponents (like Tileset) only included the URL hash. It did not include
data.typeorcesiumIonAccessToken, so React kept the same component instanceacross token changes and silently passed the new props without remounting.
Cesium element level (
Tileset/hooks.ts+index.tsx) — even when theTileset component did re-render, the inner
<Cesium3DTileset>needed its ownkeyto force a Cesium-level remount when the effective source changed.Changes
Feature/index.tsxurlMD5(URL-only hash) withdataSourceKey, a hash that coverstype,url,layers,provider,googleMapApiKey, andcesiumIonAccessToken.noFeature) component is unmounted andremounted whenever the data source identity changes.
Tileset/hooks.tscesiumIonAccessTokenas a local variable frommetafor consistentuse across dependency arrays.
reearthGooglePhotorealisticUrlmemo (previously computed inline inmultiple places).
tilesetKeymemo — a stable hash of all source-identifying fields(type, url, tileset, provider, googleMapApiKey, reearthGooglePhotorealisticUrl,
cesiumIonAccessToken for Ion-backed types). Used as
keyon<Cesium3DTileset>.tilesetRefKeyRefto guard stale ref callbacks: if the cesium elementwas mounted under a previous
tilesetKey, itsref/onReadycallbacks areignored.
useLayoutEffectontilesetKeyto reset all derived state (ready flags,feature index records, selection state, color map) when the tileset source changes.
handleErrorcallback that resets the component to a clean unready statewhen Cesium fails to load the tileset.
Tileset/index.tsxkey={tilesetKey}to<Cesium3DTileset>to force Cesium-level remount.onError={handleError}.memo()comparator (the key-based remount strategymakes it unnecessary and it could mask updates).