Skip to content

fix: refresh 3D tileset immediately when Cesium Ion token or data source changes#134

Merged
ZTongci merged 2 commits into
alphafrom
fix/tilesetKey
Jun 1, 2026
Merged

fix: refresh 3D tileset immediately when Cesium Ion token or data source changes#134
ZTongci merged 2 commits into
alphafrom
fix/tilesetKey

Conversation

@ZTongci

@ZTongci ZTongci commented May 29, 2026

Copy link
Copy Markdown

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.url is a constructor-only property — it cannot
be 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:

  1. React component level (Feature/index.tsx) — the key used for noFeature
    components (like Tileset) only included the URL hash. It did not include
    data.type or cesiumIonAccessToken, so React kept the same component instance
    across token changes and silently passed the new props without remounting.

  2. Cesium element level (Tileset/hooks.ts + index.tsx) — even when the
    Tileset component did re-render, the inner <Cesium3DTileset> needed its own
    key to force a Cesium-level remount when the effective source changed.

Changes

Feature/index.tsx

  • Replaced urlMD5 (URL-only hash) with dataSourceKey, a hash that covers
    type, url, layers, provider, googleMapApiKey, and
    cesiumIonAccessToken.
  • This ensures the Tileset (and any other noFeature) component is unmounted and
    remounted whenever the data source identity changes.

Tileset/hooks.ts

  • Extracted cesiumIonAccessToken as a local variable from meta for consistent
    use across dependency arrays.
  • Added reearthGooglePhotorealisticUrl memo (previously computed inline in
    multiple places).
  • Added tilesetKey memo — a stable hash of all source-identifying fields
    (type, url, tileset, provider, googleMapApiKey, reearthGooglePhotorealisticUrl,
    cesiumIonAccessToken for Ion-backed types). Used as key on <Cesium3DTileset>.
  • Added tilesetRefKeyRef to guard stale ref callbacks: if the cesium element
    was mounted under a previous tilesetKey, its ref/onReady callbacks are
    ignored.
  • Added useLayoutEffect on tilesetKey to reset all derived state (ready flags,
    feature index records, selection state, color map) when the tileset source changes.
  • Added handleError callback that resets the component to a clean unready state
    when Cesium fails to load the tileset.

Tileset/index.tsx

  • Added key={tilesetKey} to <Cesium3DTileset> to force Cesium-level remount.
  • Added onError={handleError}.
  • Removed the hand-written memo() comparator (the key-based remount strategy
    makes it unnecessary and it could mask updates).

@ZTongci ZTongci changed the base branch from beta to alpha May 29, 2026 06:04
@ZTongci ZTongci requested a review from Copilot May 29, 2026 06:08

Copilot AI left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 urlMD5 with a broader dataSourceKey (type, url, layers, provider, googleMapApiKey, cesiumIonAccessToken) in Feature/index.tsx so noFeature components remount on data source identity changes.
  • Add tilesetKey to Tileset/hooks.ts and use it as key on <Cesium3DTileset>, with stale-ref guards, a useLayoutEffect to reset derived state on key change, and an onError handler.
  • Remove the hand-written memo() comparator from Tileset/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.

@ZTongci ZTongci marked this pull request as ready for review May 29, 2026 06:18
airslice
airslice previously approved these changes May 29, 2026
Comment thread src/engines/Cesium/Feature/index.tsx Outdated

@bnimit bnimit left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM!

@ZTongci ZTongci enabled auto-merge June 1, 2026 06:06
@ZTongci ZTongci merged commit 8580d6b into alpha Jun 1, 2026
2 of 3 checks passed
@ZTongci ZTongci deleted the fix/tilesetKey branch June 1, 2026 06:06
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants