Crystaltoolkit animation scene

package.json

@@ -27,6 +27,7 @@
   "dependencies": {
     "@babel/preset-typescript": "^7.17.12",
     "@babel/runtime": "^7.17.9",
+    "@react-three/fiber": "^9.2.0",
     "@types/classnames": "^2.2.11",
     "axios": "^0.21.1",
     "base64-js": "^1.5.1",
@@ -66,7 +67,7 @@
     "scroll-into-view-if-needed": "^2.2.28",
     "styled-components": "^5.3.5",
     "svgtodatauri": "0.0.0",
-    "three": "^0.139.0",
+    "three": "^0.139.2",
     "use-deep-compare-effect": "^1.6.1",
     "use-query-params": "^1.2.3",
     "use-resize-observer": "^8.0.0",

src/app.tsx

@@ -26,6 +26,7 @@ import { Navbar } from './components/navigation/Navbar';
 import periodicTableImage from './assets/images/periodictable.png';
 import { MofExplorer } from './pages/MofExplorer';
 import { MatscholarMaterialsExplorer } from './pages/MatscholarMaterialsExplorer/MatscholarMaterialsExplorer';
+import { CrystalStructureAnimationViewer } from './pages/CrystalStructureAnimationViewer';
 
 const mountNodeSelector = 'app';
 const mountNode = document.getElementById(mountNodeSelector);
@@ -46,6 +47,7 @@ ReactDOM.render(
         <Link to="/contribs">Contributions</Link>
         <Link to="/crystal">Crystal Structure</Link>
         <Link to="/sandbox">Sandbox</Link>
+        <Link to="/crystal_animation">Crystal Animation</Link>
       </div>
       <section>
         <Switch>
@@ -85,6 +87,9 @@ ReactDOM.render(
           <Route path="/matscholar">
             <MatscholarMaterialsExplorer />
           </Route>
+          <Route path="/crystal_animation">
+            <CrystalStructureAnimationViewer />
+          </Route>
           <Route path="/">
             <MaterialsExplorer />
           </Route>

src/components/crystal-toolkit/CrystalToolkitAnimationScene/CrystalToolkitAnimationScene.less

@@ -0,0 +1,89 @@
+.mpc-scene {
+  position: relative;
+}
+
+.tooltiptext {
+  background-color: black;
+  color: #fff;
+  text-align: center;
+  border-radius: 6px;
+  padding: 5px;
+}
+
+.show-pointer {
+  cursor: pointer !important;
+}
+
+.mpc-scene-square {
+  position: relative;
+}
+
+.mpc-scene-square:before {
+  content: '';
+  display: block;
+  height: 0;
+  width: 0;
+  float: left;
+  padding-bottom: 100%;
+}
+
+.mpc-scene-square::after {
+  clear: left;
+  content: ' ';
+  display: table;
+}
+
+/**
+* Prevent the structure layout from growing beyond the height of the modal.
+* Setting max-width with vh instead of simply setting max-height so we don't interfere
+* with the structure's styles that force it to render with 1:1 ratio.
+*/
+.mpc-scene-square-wrapper {
+  width: 100% !important;
+  max-width: calc(95vh - 3rem);
+  height: auto !important;
+  margin: auto;
+}
+
+.mpc-scene .mpc-button-bar {
+  position: absolute;
+  right: 0;
+  z-index: 3;
+}
+
+.mpc-scene-settings-panel {
+  position: absolute;
+  right: 4.5rem;
+  max-height: 100%;
+  max-width: 450px;
+  overflow: auto;
+  border: 1px solid #ccc;
+  border-radius: 6px;
+  padding: 1.25rem;
+  background-color: #fff;
+  opacity: 0.8;
+  z-index: 2;
+}
+
+.mpc-scene-bottom-panel {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  z-index: 1;
+}
+
+/**
+ * Include this explicitly so that toggling the settings panel works without bulma
+ */
+.mpc-scene-settings-panel.is-hidden {
+  display: none;
+}
+
+/**
+ * Include this explicitly so that file dropdown looks okay without bulma
+ */
+.mpc-scene .dropdown-content {
+  position: absolute;
+  right: 0;
+  min-width: 100px;
+}

src/components/crystal-toolkit/CrystalToolkitAnimationScene/CrystalToolkitAnimationScene.test.tsx

@@ -0,0 +1,47 @@
+import { mount } from 'enzyme';
+import * as React from 'react';
+import { CrystalToolkitAnimationScene } from './CrystalToolkitAnimationScene';
+import { s2 as scene } from '../scene/simple-scene';
+import { MOUNT_NODE_CLASS, Renderer } from '../scene/constants';
+import Scene from '../scene/Scene';
+
+const spy = jest.spyOn(Scene.prototype, 'renderScene');
+const RENDERSCENE_CALLS_BY_REACT_RENDERING = 1; // goal is to reach 1 and stay there :)
+
+// When we run test, three.js is bundled differently, and we encounter again the bug
+// where we have 2 different instances of three
+describe('<CrystalToolkitAnimationScene/>', () => {
+  it('should be rendered', () => {
+    const wrapper = renderElement();
+    expect(wrapper.find(`.${MOUNT_NODE_CLASS}`).length).toBe(1);
+    expect(wrapper.find(`.mpc-scene-square`).length).toBe(1);
+
+    // Note(chab) we call renderScene when we mount, due to the react effect
+    // those are the three call sites (constructor / toggleVis / inlet )
+    expect(spy).toBeCalledTimes(1 * RENDERSCENE_CALLS_BY_REACT_RENDERING);
+
+    // fails because SVGRender will import a different instance of Three
+    // expect(wrapper.find('path').length).toBe(6);
+  });
+
+  it('should re-render if we change the size of the screen', () => {
+    const wrapper = renderElement();
+    wrapper.setProps({ size: 400 });
+    expect(spy).toBeCalledTimes(2 * RENDERSCENE_CALLS_BY_REACT_RENDERING);
+  });
+});
+
+function renderElement() {
+  // we use mount to test the rendering of the underlying elements
+  return mount(
+    <CrystalToolkitAnimationScene
+      sceneSize={500}
+      settings={{
+        renderer: Renderer.SVG
+      }}
+      data={scene}
+      debug={false}
+      toggleVisibility={{}}
+    />
+  );
+}