remove animate from test case for CrystalToolkitAnimation (static)

Chiu Peter · Chiu Peter · commit 292ac0ed756a · 2025-10-06T13:56:28.000-07:00
diff --git a/demo/app.tsx b/demo/app.tsx
@@ -27,7 +27,7 @@ ReactDOM.render(
       <section>
         <Switch>
           <Route path="/">
-            <CrystalStructureViewer />
+            <CrystalStructureAnimationViewer />
           </Route>
         </Switch>
       </section>
diff --git a/src/components/crystal-toolkit/CrystalToolkitAnimationScene/CrystalToolkitAnimationScene.test.tsx b/src/components/crystal-toolkit/CrystalToolkitAnimationScene/CrystalToolkitAnimationScene.test.tsx
@@ -6,10 +6,7 @@ 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 = 3;
-// goal is to reach 1 and stay there :)
-// MHC: not share why reach 1 is the goal...
-// But in this test, when mount, run animate(), addToScene(), and resizeRendererToDisplaySize()
+const RENDERSCENE_CALLS_BY_REACT_RENDERING = 3; // 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
diff --git a/src/components/crystal-toolkit/CrystalToolkitAnimationScene/CrystalToolkitAnimationScene.tsx b/src/components/crystal-toolkit/CrystalToolkitAnimationScene/CrystalToolkitAnimationScene.tsx
@@ -419,9 +419,9 @@ export const CrystalToolkitAnimationScene: React.FC<CrystalToolkitAnimationScene
       },
       mountNodeDebugRef.current!
     ));
-
     _s.removeListener();
     _s.animate();
+
     /**
      * I believe this can be removed because image requesting is now handled by
      * the image dropdown.
diff --git a/src/components/crystal-toolkit/scene/Scene.ts b/src/components/crystal-toolkit/scene/Scene.ts
@@ -459,6 +459,9 @@ export default class Scene {
           this.threeUUIDTojsonObject[object.uuid] = childObject;
           this.computeIdToThree[`${currentId}--${idx}`] = object;
           childObject.id = `${currentId}--${idx}`;
+          if (childObject.animate) {
+            objectToAnimate.add(`${currentId}--${idx}`);
+          }
         } else {
           const threeObject = new THREE.Object3D();
           threeObject.name = childObject.name!;
diff --git a/src/components/crystal-toolkit/scene/animation-helper.ts b/src/components/crystal-toolkit/scene/animation-helper.ts
@@ -61,7 +61,6 @@ export class AnimationHelper {
       } else {
         console.warn(`Unknown animationType: ${animationType}`);
       }
-
       const positionKF = new THREE.VectorKeyframeTrack('.position', [...kf], values);
 
       let kflVal;
diff --git a/src/components/crystal-toolkit/scene/simple-scene.ts b/src/components/crystal-toolkit/scene/simple-scene.ts
@@ -220,6 +220,278 @@ export const s4 = {
 };
 
 export const s2 = {
+  name: '_ct_StructureMoleculeComponent_1',
+  contents: [
+    {
+      name: 'atoms',
+      clickable: true,
+      contents: [
+        {
+          positions: [
+            [4.2, 4.2, 0],
+            [0, 4.2, 4.2],
+            [0, 4.2, 0],
+            [4.2, 0, 4.2],
+            [4.2, 4.2, 4.2],
+            [0, 0, 0],
+            [0, 0, 4.2],
+            [4.2, 0, 0]
+          ],
+          color: '#f9dc3c',
+          radius: 0.5,
+          tooltip: 'label',
+          type: 'spheres',
+          clickable: true,
+          keyframes: [0, 1]
+        },
+        {
+          positions: [[2.1, 2.1, 2.1]],
+          color: '#4444ff',
+          radius: 0.5,
+          type: 'spheres',
+          tooltip: 'label',
+          clickable: true,
+          keyframes: [0, 1]
+        }
+      ],
+      origin: [-2.1, -2.1, -2.1],
+      visible: true
+    },
+    {
+      name: 'bonds',
+      contents: [
+        {
+          positionPairs: [
+            [
+              [4.2, 4.2, 0],
+              [3.1500000000000004, 3.1500000000000004, 1.05]
+            ],
+            [
+              [0, 4.2, 4.2],
+              [1.05, 3.1500000000000004, 3.1500000000000004]
+            ],
+            [
+              [0, 4.2, 0],
+              [1.05, 3.1500000000000004, 1.05]
+            ],
+            [
+              [4.2, 0, 4.2],
+              [3.1500000000000004, 1.05, 3.1500000000000004]
+            ],
+            [
+              [4.2, 4.2, 4.2],
+              [3.1500000000000004, 3.1500000000000004, 3.1500000000000004]
+            ],
+            [
+              [0, 0, 0],
+              [1.05, 1.05, 1.05]
+            ],
+            [
+              [0, 0, 4.2],
+              [1.05, 1.05, 3.1500000000000004]
+            ],
+            [
+              [4.2, 0, 0],
+              [3.1500000000000004, 1.05, 1.05]
+            ]
+          ],
+          keyframes: [0, 1],
+          color: '#f9dc3c',
+          tooltip: 'label',
+          radius: 0.1,
+          type: 'cylinders',
+          clickable: true
+        },
+        {
+          positionPairs: [
+            [
+              [2.1, 2.1, 2.1], // starts from center sphere
+              [1.05, 1.05, 1.05] // end in yellow
+            ],
+            [
+              [2.1, 2.1, 2.1],
+              [3.1500000000000004, 1.05, 1.05]
+            ],
+            [
+              [2.1, 2.1, 2.1],
+              [3.1500000000000004, 3.1500000000000004, 3.1500000000000004]
+            ],
+            [
+              [2.1, 2.1, 2.1],
+              [3.1500000000000004, 1.05, 3.1500000000000004]
+            ],
+            [
+              [2.1, 2.1, 2.1],
+              [1.05, 3.1500000000000004, 1.05]
+            ],
+            [
+              [2.1, 2.1, 2.1],
+              [3.1500000000000004, 3.1500000000000004, 1.05]
+            ],
+            [
+              [2.1, 2.1, 2.1],
+              [1.05, 1.05, 3.1500000000000004]
+            ],
+            [
+              [2.1, 2.1, 2.1],
+              [1.05, 3.1500000000000004, 3.1500000000000004]
+            ]
+          ],
+          keyframes: [0, 1],
+          color: '#a121f6',
+          radius: 0.1,
+          type: 'cylinders',
+          tooltip: 'label',
+          clickable: true
+        }
+      ],
+      origin: [-2.1, -2.1, -2.1],
+      visible: true
+    },
+    {
+      name: 'cubes',
+      contents: [
+        {
+          positions: [
+            [4, 4, 4],
+            [10, 10, 10]
+          ],
+          width: 2,
+          color: '#ababaa',
+          type: 'cubes',
+          tooltip: 'label',
+          keyframes: [0, 1]
+        }
+      ]
+    },
+    {
+      name: 'polyhedra',
+      contents: [
+        {
+          positions: [
+            [2.1, 2.1, 2.1],
+            [0, 0, 0],
+            [4.2, 0, 0],
+            [4.2, 4.2, 4.2],
+            [4.2, 0, 4.2],
+            [0, 4.2, 0],
+            [4.2, 4.2, 0],
+            [0, 0, 4.2],
+            [0, 4.2, 4.2]
+          ],
+          keyframes: [0, 1],
+          color: '#a121f6',
+          type: 'convex'
+        }
+      ],
+      origin: [-2.1, -2.1, -2.1],
+      tooltip: 'label',
+      visible: true
+    },
+    {
+      name: 'unit_cell',
+      contents: [
+        {
+          name: 'a=4.2, b=4.2, c=4.2, alpha=90.0, beta=90.0, gamma=90.0',
+          contents: [
+            {
+              positions: [
+                [0, 0, 0],
+                [4.2, 0, 0],
+                [0, 0, 0],
+                [0, 4.2, 0],
+                [0, 0, 0],
+                [0, 0, 4.2],
+                [4.2, 0, 0],
+                [4.2, 4.2, 0],
+                [4.2, 0, 0],
+                [4.2, 0, 4.2],
+                [0, 4.2, 0],
+                [4.2, 4.2, 0],
+                [0, 4.2, 0],
+                [0, 4.2, 4.2],
+                [0, 0, 4.2],
+                [4.2, 0, 4.2],
+                [0, 0, 4.2],
+                [0, 4.2, 4.2],
+                [4.2, 4.2, 0],
+                [4.2, 4.2, 4.2],
+                [4.2, 0, 4.2],
+                [4.2, 4.2, 4.2],
+                [0, 4.2, 4.2],
+                [4.2, 4.2, 4.2]
+              ],
+              keyframes: [0, 1],
+              type: 'lines'
+            }
+          ],
+          visible: false
+        }
+      ],
+      origin: [-2.1, -2.1, -2.1],
+      visible: false
+    },
+    {
+      name: 'axes',
+      contents: [
+        {
+          positionPairs: [
+            [
+              [-2.1, -2.1, -2.1],
+              [-1.4, -1.4, -3.1]
+            ]
+          ],
+          color: 'red',
+          radius: 0.07, // / 0.37302772291498865) * 2,
+          headLength: 0.24,
+          headWidth: 0.14,
+          type: 'arrows',
+          clickable: false
+        },
+        {
+          positionPairs: [
+            [
+              [-2.1, -2.1, -2.1],
+              [-0.1, -2.5, -1.1]
+            ]
+          ],
+          color: 'green',
+          radius: 0.07, // / 0.37302772291498865) * 2,
+          headLength: 0.24, // / 0.37302772291498865,
+          headWidth: 0.14, // 0.37302772291498865,
+          type: 'arrows',
+          clickable: false
+        },
+        {
+          positionPairs: [
+            [
+              [-2.1, -2.1, -2.1],
+              [-1.1, -1.1, -1.1]
+            ]
+          ],
+          color: 'blue',
+          radius: 0.07, // 0.37302772291498865) * 2,
+          headLength: 0.24, // / 0.37302772291498865) * 2,
+          headWidth: 0.14, // / 0.37302772291498865) * 2,
+          type: 'arrows',
+          clickable: false
+        },
+        {
+          positions: [[-2.1, -2.1, -2.1]],
+          color: 'black',
+          radius: 0.0175,
+          type: 'spheres',
+          clickable: false
+        }
+      ],
+      visible: false
+    }
+  ],
+  origin: [-2.1, -2.1, -2.1],
+  visible: true
+};
+
+export const s2_old = {
   name: '_ct_StructureMoleculeComponent_1',
   contents: [
     {
diff --git a/src/components/data-display/SearchUI/SearchUIContextProvider/MatscholarSearchUIContextProvider.tsx b/src/components/data-display/SearchUI/SearchUIContextProvider/MatscholarSearchUIContextProvider.tsx
@@ -234,7 +234,8 @@ export const MatscholarSearchUIContextProvider: React.FC<SearchState> = ({
       const params: any = preprocessQueryParams(
         { ...query, ...props.apiEndpointParams },
         state.filterGroups,
-        defaultQuery
+        defaultQuery,
+        ''
       );
       params[props.fieldsKey] = fields;
 
diff --git a/src/pages/CrystalStructureAnimationViewer/CrystalStructureAnimationViewer.tsx b/src/pages/CrystalStructureAnimationViewer/CrystalStructureAnimationViewer.tsx
@@ -184,8 +184,8 @@ export const CrystalStructureAnimationViewer: React.FC = () => {
                   extractAxis: false,
                   zoomToFit2D: true
                 }}
-                //data={phonon_scene}
-                data={phonon_position_scene}
+                data={phonon_scene}
+                // data={phonon_position_scene}
                 sceneSize="100%"
                 debug={false}
                 toggleVisibility={{}}

Original file line number	Diff line number	Diff line change
`@@ -61,7 +61,6 @@ export class AnimationHelper {`
`61`	`61`	`} else {`
`62`	`62`	console.warn(`Unknown animationType: ${animationType}`);
`63`	`63`	`}`
`64`		`-`
`65`	`64`	`const positionKF = new THREE.VectorKeyframeTrack('.position', [...kf], values);`
`66`	`65`
`67`	`66`	`let kflVal;`