add documentation and rename to tiling visualization

Author: orionarcher

src/app.tsx

@@ -22,7 +22,7 @@ import { Sandbox } from './pages/Sandbox';
 import { SynthesisExplorer } from './pages/SynthesisExplorer';
 import { MPContribsSearch } from './pages/MPContribsSearch';
 import { CatalystExplorer } from './pages/CatalystExplorer';
-import { PhononVisualization } from './pages/PhononVisualization';
+import { TilingVisualization } from './pages/TilingVisualization';
 import { Navbar } from './components/navigation/Navbar';
 import periodicTableImage from './assets/images/periodictable.png';
 import { MofExplorer } from './pages/MofExplorer';
@@ -72,8 +72,8 @@ ReactDOM.render(
             href: '/xas'
           },
           {
-            label: 'Phonon Visualization',
-            href: '/phonon'
+            label: 'Tiling Visualization',
+            href: '/tiling'
           },
           {
             label: 'More',
@@ -145,8 +145,8 @@ ReactDOM.render(
           <Route path="/matscholar">
             <MatscholarMaterialsExplorer />
           </Route>
-          <Route path="/phonon">
-            <PhononVisualization />
+          <Route path="/tiling">
+            <TilingVisualization />
           </Route>
           <Route path="/">
             <MaterialsExplorer />

src/components/crystal-toolkit/scene/Scene.ts

@@ -534,12 +534,7 @@ export default class Scene {
       Each scene is added to the arrayOfTilesRoots, it can be accessed by indexing through the
       arrayOfTileRoots. e.g. scene = arrayOfTileRoots[x][y][z][0].
      */
-    const traverseTiles = (
-      o: SceneJsonObject,
-      root: THREE.Object3D,
-      tiles: number[][]
-      // arrayOfTileRoots: number[][][][]
-    ) => {
+    const traverseTiles = (o: SceneJsonObject, root: THREE.Object3D, tiles: number[][]) => {
       // @ts-ignore
       let lattice = o.lattice ? o.lattice : emptyLattice;
 
@@ -624,20 +619,19 @@ export default class Scene {
     // TODO: does it make sense to split this code into two cases? NO!
     // set up the threeObjects and containers
     const rootObject = new THREE.Object3D();
-    if (this.maxTiling > 0) {
-      // if needed, create a parent for all Scene objects
-      rootObject.name = 'root';
-      rootObject.visible = true;
-      const maxTilingArray = [this.maxTiling, this.maxTiling, this.maxTiling];
-      let tiles = _getTiles(maxTilingArray);
-      traverseTiles(sceneJson, rootObject, tiles);
-      this.updateTiles(this.tiling);
-      console.log(this.arrayOfTileRoots);
-    } else {
-      rootObject.name = sceneJson.name!;
-      sceneJson.visible && (rootObject.visible = sceneJson.visible);
-      traverseScene(sceneJson, rootObject, emptyLattice, '');
-    } // TODO: take this out, hope things dont break, fix if they do
+    // if (this.maxTiling > 0) {
+    // if needed, create a parent for all Scene objects
+    rootObject.name = 'root';
+    rootObject.visible = true;
+    const maxTilingArray = [this.maxTiling, this.maxTiling, this.maxTiling];
+    let tiles = _getTiles(maxTilingArray);
+    traverseTiles(sceneJson, rootObject, tiles);
+    this.updateTiles(this.tiling);
+    // } else {
+    //   rootObject.name = sceneJson.name!;
+    //   sceneJson.visible && (rootObject.visible = sceneJson.visible);
+    //   traverseScene(sceneJson, rootObject, emptyLattice, '');
+    // } // TODO: take this out, hope things dont break, fix if they do
 
     // can cause memory leak
     this.scene.add(rootObject);

src/pages/PhononVisualization/PhononVisualization.tsx

@@ -0,0 +1,68 @@
+import React, { useEffect, useState } from 'react';
+import { crystalScene } from '../../components/crystal-toolkit/scene/simple-scene';
+import { Renderer } from '../../components/crystal-toolkit/scene/constants';
+import { CrystalToolkitScene } from '../../components/crystal-toolkit/CrystalToolkitScene/CrystalToolkitScene';
+import { RangeSlider } from '../../components/data-entry/RangeSlider';
+
+/**
+ * TilingVisualization shows off the new tiling functionality added to CrystalToolkitScene.
+ *
+ * It uses the useState hook to attach the tiling variables to the state of the sliders.
+ * These are then passed to CrystalToolkitScene as props that can be dynamically changed.
+ *
+ * For a diagram of how the props are organized, see here:
+ * https://oac-misc.s3.us-west-1.amazonaws.com/mp/programming_plan_v2.pdf
+ */
+export const TilingVisualization: React.FC = () => {
+  // the tiling hooks allows state to be easily set with the sliders
+  const [tilingX, setTilingX] = useState<any>(2);
+  const [tilingY, setTilingY] = useState<any>(1);
+  const [tilingZ, setTilingZ] = useState<any>(0);
+  // this sets the maximum tiling, unseen tilings are present but not visible
+  const maxTiling: number = 3;
+
+  return (
+    <div>
+      <CrystalToolkitScene
+        settings={{
+          renderer: Renderer.WEBGL,
+          extractAxis: false,
+          zoomToFit2D: true
+        }}
+        data={crystalScene}
+        tiling={[tilingX, tilingY, tilingZ]}
+        maxTiling={maxTiling}
+        sceneSize="100%"
+        debug={false}
+        toggleVisibility={{}}
+      />
+      {/* X slider*/}
+      <RangeSlider
+        domain={[0, maxTiling || 1]}
+        value={tilingX}
+        onChange={(values) => {
+          setTilingX(values[0]);
+          console.log(values);
+        }}
+      />
+      {/* Y slider*/}
+      <RangeSlider
+        domain={[0, maxTiling || 1]}
+        value={tilingY}
+        onChange={(values) => {
+          setTilingY(values[0]);
+          console.log(values);
+        }}
+      />
+      {/* Z slider*/}
+      <RangeSlider
+        domain={[0, maxTiling || 1]}
+        value={tilingZ}
+        onChange={(values) => {
+          setTilingZ(values[0]);
+          console.log(values);
+        }}
+      />
+    </div>
+  );
+};

src/pages/PhononVisualization/index.tsx

@@ -0,0 +1 @@
+export { TilingVisualization } from './TilingVisualization';