Skip to content

fix(crystal-toolkit): stabilize legacy Storybook scenes and hover cleanup - #765

Open
HyaCiovo wants to merge 1 commit into
materialsproject:mainfrom
HyaCiovo:main
Open

fix(crystal-toolkit): stabilize legacy Storybook scenes and hover cleanup#765
HyaCiovo wants to merge 1 commit into
materialsproject:mainfrom
HyaCiovo:main

Conversation

@HyaCiovo

@HyaCiovo HyaCiovo commented Aug 17, 2026

Copy link
Copy Markdown

Summary

fixes #697

Major changes:

  • Fixed the Crystal Toolkit atom-hover regression where moving directly from one
    atom to another could leave the previous atom highlighted instead of restoring
    its original element color
    .
  • Fixed Crystal Toolkit Storybook compilation failures caused by legacy
    TypeScript constructor parameter properties being emitted as JavaScript
    private syntax by the current Storybook/Babel pipeline.
  • Removed the stale Storybook preview import for src/assets/fonts.css, which
    no longer exists in the repository.
  • Added @babel/preset-react as an explicit development dependency because it
    is referenced directly by the existing Babel configuration.
  • Fixed scene teardown timing so a component can unmount before delayed controls
    initialization without later calling dispose() on an undefined controls
    instance.
  • Made scene destruction idempotent and guarded optional renderer, controls,
    inset, and debug helper resources during cleanup.
  • Modernized RadiusTubeBufferGeometry construction from legacy
    function/prototype inheritance to a proper BufferGeometry subclass.
  • Preserved the existing tube geometry algorithm, Frenet-frame data, geometry
    attributes, and JSON serialization while resolving the runtime error:
    Class constructor BufferGeometry cannot be invoked without 'new'.
  • Added narrowly scoped TypeScript declarations for the custom geometry fields
    and legacy BufferGeometry methods used by this module, without introducing a
    project-wide Three.js type migration.

Todos

No functional work remains for this PR.

Follow-up work that is intentionally out of scope:

  • Investigate the repository-wide TypeScript diagnostics caused by duplicate
    React type declarations in the legacy Enzyme dependency tree.
  • Consider a separate dependency modernization effort for the legacy
    Storybook, Babel, React, and Three.js stack.
  • Consider adding automated regression coverage for scene teardown, tube
    geometry construction, and atom-to-atom hover transitions when the project
    test environment is modernized.

Checklist

  • Crystal Toolkit Storybook scenes were checked manually.
  • Verified the linked-camera story renders both scene canvases without a
    Storybook error display.
  • Verified the tube scene can mount and remount without the previous
    Cannot read properties of undefined (reading 'dispose') error.
  • Verified RadiusTubeBufferGeometry.ts no longer produces diagnostics
    related to its custom fields or inherited geometry methods.
  • Ran git diff --check.
  • No public component API was intentionally changed.
  • No large-scale formatting-only rewrite was included.
  • No new test files were added or restored, per the requested scope.
  • Full repository TypeScript validation is still blocked by pre-existing
    duplicate React declarations from the legacy Enzyme dependency tree.
  • Automated regression tests were not added for this PR by request.

@HyaCiovo HyaCiovo changed the title fix(crystal-toolkit): stabilize legacy Storybook scenes and hover cle fix(crystal-toolkit): stabilize legacy Storybook scenes and hover cleanup Aug 17, 2026
@HyaCiovo

Copy link
Copy Markdown
Author

Atom hover state restoration

Fixed an existing hover-state restoration bug in the Crystal Toolkit scene.

Previously, atom highlighting behaved differently depending on where the pointer
moved next:

  • Moving the pointer from an atom to empty canvas space correctly restored that
    atom's original element color.
  • Moving the pointer directly from atom A to atom B did not restore atom A
    first. Atom B received the new highlight, but atom A remained brightened.
  • Once the pointer eventually left all atoms, only the most recently hovered
    atom was restored. Earlier atoms that had been crossed during direct
    atom-to-atom movement could remain permanently highlighted.

The root cause was that updateTooltip() applied the new hover style whenever
the JSON target changed, but it did not clear the previously active Three.js
object before replacing the active tooltip state.

The updated implementation now:

  1. tracks both the active JSON object and the active Three.js object;
  2. detects a change in the hovered target;
  3. restores the previously highlighted atom's original material color before
    styling the new target;
  4. clears the prior tooltip state before applying the new highlight;
  5. retains the existing behavior for leaving the scene or moving onto empty
    canvas space.

This ensures that at most one atom is highlighted at any time and that every
atom returns to its original color immediately after it is no longer the active
hover target.

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.

Color of objects does not revert to original color after hover interaction concluded

1 participant