Clean React test and resolve dependencies

.github/workflows/jest_tests.yml

@@ -4,6 +4,7 @@ on:
   push:
     branches:
       - main
+      - github_action_tests
 
 jobs:
   test:

demo/app.tsx

@@ -27,7 +27,7 @@ ReactDOM.render(
       <section>
         <Switch>
           <Route path="/">
-            <CrystalStructureViewer />
+            <CrystalStructureAnimationViewer />
           </Route>
         </Switch>
       </section>

jest.config.js

@@ -10,7 +10,7 @@ module.exports = {
    * This is necessary for node modules that distribute their source code as uncompiled JS.
    */
   transformIgnorePatterns: [
-    'node_modules/(?!(three|unist-.*|hast-.*|rehype-slug|remark-rehype|react-markdown|vfile.*|unified|bail|is-plain-obj|trough|remark-parse|mdast-.*|micromark.*|decode-named-character-reference|unist-.*|character-entities|property-information|space-separated-tokens|comma-separated-tokens)/)'
+    'node_modules/(?!(three|trim-lines|github-slugger|unist-.*|hast-.*|rehype-slug|remark-rehype|react-markdown|vfile.*|unified|bail|is-plain-obj|trough|remark-parse|mdast-.*|micromark.*|decode-named-character-reference|unist-.*|character-entities|property-information|space-separated-tokens|comma-separated-tokens)/)'
   ],
   modulePaths: ['<rootDir>'],
   moduleDirectories: ['node_modules', '<rootDir>'],

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

@@ -1,12 +1,12 @@
 import { mount } from 'enzyme';
 import * as React from 'react';
 import { CrystalToolkitAnimationScene } from './CrystalToolkitAnimationScene';
-import { s2 as scene } from '../scene/simple-scene';
+import { phonon_scene as scene } from '../scene/phonon-animation-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 :)
+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

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.

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;

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: [
     {

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;
 

src/components/data-display/SearchUI/index.tsx

@@ -0,0 +1 @@
+// src/components/data-display/SearchUI/index.tsx

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={{}}