From e06e7cb53526f2effa3c01c546fcbfed8aaebe17 Mon Sep 17 00:00:00 2001
From: orioncohen <orion@lbl.gov>
Date: Thu, 7 Oct 2021 09:00:25 -0700
Subject: [PATCH 01/21] new page on website to demo phonon visualization

---
 src/app.tsx                                   |  8 ++++
 .../PhononVisualization.tsx                   | 37 +++++++++++++++++++
 src/pages/PhononVisualization/index.tsx       |  1 +
 3 files changed, 46 insertions(+)
 create mode 100644 src/pages/PhononVisualization/PhononVisualization.tsx
 create mode 100644 src/pages/PhononVisualization/index.tsx

diff --git a/src/app.tsx b/src/app.tsx
index cfdb25b9..0e8c07ae 100644
--- a/src/app.tsx
+++ b/src/app.tsx
@@ -21,6 +21,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 { Navbar } from './components/navigation/Navbar';
 import periodicTableImage from './assets/images/periodictable.png';
 
@@ -64,6 +65,10 @@ ReactDOM.render(
             icon: 'icon-fontastic-synthesis',
             href: '/catalysts'
           },
+          {
+            label: 'Phonon Visualization',
+            href: '/phonon'
+          },
           {
             icon: 'icon-fontastic-synthesis',
             isRight: true,
@@ -124,6 +129,9 @@ ReactDOM.render(
           <Route path="/sandbox">
             <Sandbox />
           </Route>
+          <Route path="/phonon">
+            <PhononVisualization />
+          </Route>
           <Route path="/">
             <MaterialsExplorer />
           </Route>
diff --git a/src/pages/PhononVisualization/PhononVisualization.tsx b/src/pages/PhononVisualization/PhononVisualization.tsx
new file mode 100644
index 00000000..28d39a75
--- /dev/null
+++ b/src/pages/PhononVisualization/PhononVisualization.tsx
@@ -0,0 +1,37 @@
+import React, { useEffect, useState } from 'react';
+import { scene, scene2 } from '../../components/crystal-toolkit/scene/mike';
+import { s2, s3, s4, s5, shperes } from '../../components/crystal-toolkit/scene/simple-scene';
+import { CameraContextProvider } from '../../components/crystal-toolkit/CameraContextProvider';
+import { AnimationStyle, Renderer } from '../../components/crystal-toolkit/scene/constants';
+import { CrystalToolkitScene } from '../../components/crystal-toolkit/CrystalToolkitScene/CrystalToolkitScene';
+import { ExportType } from '../../components/crystal-toolkit/scene/constants';
+import { Download } from '../../components/crystal-toolkit/Download';
+import { ScenePosition } from '../../components/crystal-toolkit/scene/inset-helper';
+import { CameraState } from '../../components/crystal-toolkit/CameraContextProvider/camera-reducer';
+import * as THREE from 'three';
+import { Camera } from 'three';
+import { useRef } from 'react';
+
+export const PhononVisualization: React.FC = () => {
+  const [dataInput, setDataInput] = useState<any>();
+  const [structureContainerWidth, setStructureContainerWidth] = useState('100%');
+  const structureContainer = useRef(null);
+
+  const [value, setValue] = useState<any>('test');
+
+  return (
+    <div>
+      <CrystalToolkitScene
+        settings={{
+          renderer: Renderer.WEBGL,
+          extractAxis: false,
+          zoomToFit2D: true
+        }}
+        data={s3}
+        sceneSize="100%"
+        debug={false}
+        toggleVisibility={{}}
+      />
+    </div>
+  );
+};
diff --git a/src/pages/PhononVisualization/index.tsx b/src/pages/PhononVisualization/index.tsx
new file mode 100644
index 00000000..746b2a1a
--- /dev/null
+++ b/src/pages/PhononVisualization/index.tsx
@@ -0,0 +1 @@
+export { PhononVisualization } from './PhononVisualization';

From c7b6ffbb9d6ce88d775d841b9b2aad6824643205 Mon Sep 17 00:00:00 2001
From: orioncohen <orion@lbl.gov>
Date: Mon, 6 Dec 2021 09:27:19 -0800
Subject: [PATCH 02/21] create crystal test scene and include in
 PhononVisualization page

---
 .../crystal-toolkit/scene/crystal-scene.json  | 231 +++++++++
 .../crystal-toolkit/scene/simple-scene.ts     | 488 +++++++++---------
 .../PhononVisualization.tsx                   |  11 +-
 3 files changed, 488 insertions(+), 242 deletions(-)
 create mode 100644 src/components/crystal-toolkit/scene/crystal-scene.json

diff --git a/src/components/crystal-toolkit/scene/crystal-scene.json b/src/components/crystal-toolkit/scene/crystal-scene.json
new file mode 100644
index 00000000..2cbf3c3e
--- /dev/null
+++ b/src/components/crystal-toolkit/scene/crystal-scene.json
@@ -0,0 +1,231 @@
+{
+  "name": "Structure",
+  "contents": [
+    {
+      "name": "atoms",
+      "contents": [
+        {
+          "positions": [[-1.5733063740697162e-8, 1.8166976957501553, 5.996085336983941]],
+          "color": "#bfc2c7",
+          "radius": 0.5,
+          "type": "spheres",
+          "tooltip": "Ti (-0.000, 1.817, 5.996)",
+          "clickable": true
+        },
+        {
+          "positions": [[1.57330635, 2.72504653, 0.0]],
+          "color": "#909090",
+          "radius": 0.5,
+          "type": "spheres",
+          "tooltip": "C (1.573, 2.725, 0.000)",
+          "clickable": true
+        },
+        {
+          "positions": [[3.1466127, 0.0, 14.21716731]],
+          "color": "#909090",
+          "radius": 0.5,
+          "type": "spheres",
+          "tooltip": "C (3.147, 0.000, 14.217)",
+          "clickable": true
+        },
+        {
+          "positions": [[-1.57330635, 2.72504653, 7.108583655]],
+          "color": "#909090",
+          "radius": 0.5,
+          "type": "spheres",
+          "tooltip": "C (-1.573, 2.725, 7.109)",
+          "clickable": true
+        },
+        {
+          "positions": [[3.1466127, 0.0, 7.108583655]],
+          "color": "#909090",
+          "radius": 0.5,
+          "type": "spheres",
+          "tooltip": "C (3.147, 0.000, 7.109)",
+          "clickable": true
+        },
+        {
+          "positions": [[1.5733063657330637, 0.9083488342498449, 13.104668991983942]],
+          "color": "#bfc2c7",
+          "radius": 0.5,
+          "type": "spheres",
+          "tooltip": "Ti (1.573, 0.908, 13.105)",
+          "clickable": true
+        },
+        {
+          "positions": [[0.0, 0.0, 14.21716731]],
+          "color": "#909090",
+          "radius": 0.5,
+          "type": "spheres",
+          "tooltip": "C (0.000, 0.000, 14.217)",
+          "clickable": true
+        },
+        {
+          "positions": [[-1.57330635, 2.72504653, 14.21716731]],
+          "color": "#909090",
+          "radius": 0.5,
+          "type": "spheres",
+          "tooltip": "C (-1.573, 2.725, 14.217)",
+          "clickable": true
+        },
+        {
+          "positions": [[-1.5733063740697162e-8, 1.8166976957501553, 10.6628754825]],
+          "color": "#a67573",
+          "radius": 0.5,
+          "type": "spheres",
+          "tooltip": "In (-0.000, 1.817, 10.663)",
+          "clickable": true
+        },
+        {
+          "positions": [[0.0, 0.0, 7.108583655]],
+          "color": "#909090",
+          "radius": 0.5,
+          "type": "spheres",
+          "tooltip": "C (0.000, 0.000, 7.109)",
+          "clickable": true
+        },
+        {
+          "positions": [[-1.57330635, 2.72504653, 0.0]],
+          "color": "#909090",
+          "radius": 0.5,
+          "type": "spheres",
+          "tooltip": "C (-1.573, 2.725, 0.000)",
+          "clickable": true
+        },
+        {
+          "positions": [[3.1466127, 0.0, 0.0]],
+          "color": "#909090",
+          "radius": 0.5,
+          "type": "spheres",
+          "tooltip": "C (3.147, 0.000, 0.000)",
+          "clickable": true
+        },
+        {
+          "positions": [[1.5733063657330637, 0.9083488342498449, 8.221081973016059]],
+          "color": "#bfc2c7",
+          "radius": 0.5,
+          "type": "spheres",
+          "tooltip": "Ti (1.573, 0.908, 8.221)",
+          "clickable": true
+        },
+        {
+          "positions": [[1.57330635, 2.72504653, 7.108583655]],
+          "color": "#909090",
+          "radius": 0.5,
+          "type": "spheres",
+          "tooltip": "C (1.573, 2.725, 7.109)",
+          "clickable": true
+        },
+        {
+          "positions": [[1.57330635, 2.72504653, 14.21716731]],
+          "color": "#909090",
+          "radius": 0.5,
+          "type": "spheres",
+          "tooltip": "C (1.573, 2.725, 14.217)",
+          "clickable": true
+        },
+        {
+          "positions": [[0.0, 0.0, 0.0]],
+          "color": "#909090",
+          "radius": 0.5,
+          "type": "spheres",
+          "tooltip": "C (0.000, 0.000, 0.000)",
+          "clickable": true
+        },
+        {
+          "positions": [[1.5733063657330637, 0.9083488342498449, 3.5542918275]],
+          "color": "#a67573",
+          "radius": 0.5,
+          "type": "spheres",
+          "tooltip": "In (1.573, 0.908, 3.554)",
+          "clickable": true
+        },
+        {
+          "positions": [[-1.5733063740697162e-8, 1.8166976957501553, 1.1124983180160586]],
+          "color": "#bfc2c7",
+          "radius": 0.5,
+          "type": "spheres",
+          "tooltip": "Ti (-0.000, 1.817, 1.112)",
+          "clickable": true
+        }
+      ],
+      "origin": [-0.786653175, -1.362523265, -7.108583655],
+      "visible": true,
+      "tiling": [2, 1, 0],
+      "lattice": [
+        [3.1466127, 0.0, 0.0],
+        [-1.57330635, 2.72504653, 0.0],
+        [0.0, 0.0, 14.21716731]
+      ]
+    },
+    {
+      "name": "bonds",
+      "contents": [],
+      "origin": [-0.786653175, -1.362523265, -7.108583655],
+      "visible": true
+    },
+    {
+      "name": "polyhedra",
+      "contents": [],
+      "origin": [-0.786653175, -1.362523265, -7.108583655],
+      "visible": true
+    },
+    {
+      "name": "magmoms",
+      "contents": [],
+      "origin": [-0.786653175, -1.362523265, -7.108583655],
+      "visible": true
+    },
+    {
+      "name": "unit_cell",
+      "contents": [
+        {
+          "name": "a=3.1466127, b=3.1466126964746337, c=14.21716731, alpha=90.0, beta=90.0, gamma=120.0000000370615",
+          "contents": [
+            {
+              "positions": [
+                [0, 0, 0],
+                [3.1466127, 0.0, 0.0],
+                [0, 0, 0],
+                [-1.57330635, 2.72504653, 0.0],
+                [0, 0, 0],
+                [0.0, 0.0, 14.21716731],
+                [3.1466127, 0.0, 0.0],
+                [1.57330635, 2.72504653, 0.0],
+                [3.1466127, 0.0, 0.0],
+                [3.1466127, 0.0, 14.21716731],
+                [-1.57330635, 2.72504653, 0.0],
+                [1.57330635, 2.72504653, 0.0],
+                [-1.57330635, 2.72504653, 0.0],
+                [-1.57330635, 2.72504653, 14.21716731],
+                [0.0, 0.0, 14.21716731],
+                [3.1466127, 0.0, 14.21716731],
+                [0.0, 0.0, 14.21716731],
+                [-1.57330635, 2.72504653, 14.21716731],
+                [1.57330635, 2.72504653, 0.0],
+                [1.57330635, 2.72504653, 14.21716731],
+                [3.1466127, 0.0, 14.21716731],
+                [1.57330635, 2.72504653, 14.21716731],
+                [-1.57330635, 2.72504653, 14.21716731],
+                [1.57330635, 2.72504653, 14.21716731]
+              ],
+              "type": "lines",
+              "clickable": false
+            }
+          ],
+          "visible": true
+        }
+      ],
+      "origin": [-0.786653175, -1.362523265, -7.108583655],
+      "visible": true,
+      "tiling": [2, 1, 0],
+      "lattice": [
+        [3.1466127, 0.0, 0.0],
+        [-1.57330635, 2.72504653, 0.0],
+        [0.0, 0.0, 14.21716731]
+      ]
+    }
+  ],
+  "origin": [-0.786653175, -1.362523265, -7.108583655],
+  "visible": true
+}
diff --git a/src/components/crystal-toolkit/scene/simple-scene.ts b/src/components/crystal-toolkit/scene/simple-scene.ts
index 3e13f9b2..8316581a 100644
--- a/src/components/crystal-toolkit/scene/simple-scene.ts
+++ b/src/components/crystal-toolkit/scene/simple-scene.ts
@@ -30,27 +30,27 @@ export const s4 = {
           positions: [
             [1.6081450794147842, 0.9284629773820368, 2.6153700106355755],
             [-1.9414784057759444e-8, 1.8569259826179634, 5.235351240635575],
-            [-1.9414784057759444e-8, 1.8569259826179634, -0.004611219364424821],
+            [-1.9414784057759444e-8, 1.8569259826179634, -0.004611219364424821]
           ],
           color: '#9ee373',
           radius: 0.8,
           type: 'ellipsoids',
           scale: [0.4, 1.2, 1.9],
-          clickable: true,
+          clickable: true
         },
         {
           positions: [
             [1.6081450794147842, 0.9284629773820368, 4.589578371864425],
-            [-1.9414784057759444e-8, 1.8569259826179634, 1.9695971418644245],
+            [-1.9414784057759444e-8, 1.8569259826179634, 1.9695971418644245]
           ],
           color: '#b0b9e6',
           radius: 0.5,
           type: 'spheres',
-          clickable: true,
-        },
+          clickable: true
+        }
       ],
       origin: [-0.80407253, -1.39269448, -2.61998123],
-      visible: true,
+      visible: true
     },
     {
       name: 'bonds',
@@ -59,68 +59,67 @@ export const s4 = {
           positionPairs: [
             [
               [1.6081450794147842, 0.9284629773820368, 2.6153700106355755],
-              [0.8040725300000001, 1.39269448, 2.29248357625],
+              [0.8040725300000001, 1.39269448, 2.29248357625]
             ],
             [
               [1.6081450794147842, 0.9284629773820368, 2.6153700106355755],
-              [1.6081450794147842, 0.9284629773820368, 3.6024741912500002],
+              [1.6081450794147842, 0.9284629773820368, 3.6024741912500002]
             ],
             [
               [-1.9414784057759444e-8, 1.8569259826179634, 5.235351240635575],
-              [0.8040725300000001, 1.39269448, 4.91246480625],
+              [0.8040725300000001, 1.39269448, 4.91246480625]
             ],
             [
               [-1.9414784057759444e-8, 1.8569259826179634, -0.004611219364424821],
-              [-1.9414784057759444e-8, 1.8569259826179634, 0.9824929612499999],
-            ],
+              [-1.9414784057759444e-8, 1.8569259826179634, 0.9824929612499999]
+            ]
           ],
           color: '#9ee373',
           radius: 0.1,
           type: 'cylinders',
-          clickable: false,
+          clickable: false
         },
         {
           positionPairs: [
             [
               [1.6081450794147842, 0.9284629773820368, 4.589578371864425],
-              [0.8040725300000001, 1.39269448, 4.91246480625],
+              [0.8040725300000001, 1.39269448, 4.91246480625]
             ],
             [
               [1.6081450794147842, 0.9284629773820368, 4.589578371864425],
-              [1.6081450794147842, 0.9284629773820368, 3.6024741912500002],
+              [1.6081450794147842, 0.9284629773820368, 3.6024741912500002]
             ],
             [
               [-1.9414784057759444e-8, 1.8569259826179634, 1.9695971418644245],
-              [0.8040725300000001, 1.39269448, 2.29248357625],
+              [0.8040725300000001, 1.39269448, 2.29248357625]
             ],
             [
               [-1.9414784057759444e-8, 1.8569259826179634, 1.9695971418644245],
-              [-1.9414784057759444e-8, 1.8569259826179634, 0.9824929612499999],
-            ],
+              [-1.9414784057759444e-8, 1.8569259826179634, 0.9824929612499999]
+            ]
           ],
           animate: [[[1, 1, 1], [2, 2, 2], 0]],
           keyframes: [0, 1],
           color: '#b0b9e6',
           radius: 0.1,
           type: 'cylinders',
-          clickable: false,
-        },
+          clickable: false
+        }
       ],
       origin: [-0.80407253, -1.39269448, -2.61998123],
-      visible: true,
+      visible: true
     },
     {
       name: 'polyhedra',
       contents: [],
       origin: [-0.80407253, -1.39269448, -2.61998123],
-      visible: true,
+      visible: true
     },
     {
       name: 'unit_cell',
       contents: [
         {
-          name:
-            'a=3.21629013, b=3.2162901337807175, c=5.23996246, alpha=90.0, beta=90.0, gamma=120.00000006396569',
+          name: 'a=3.21629013, b=3.2162901337807175, c=5.23996246, alpha=90.0, beta=90.0, gamma=120.00000006396569',
           contents: [
             {
               positions: [
@@ -147,17 +146,17 @@ export const s4 = {
                 [3.21629013, 0, 5.23996246],
                 [1.60814506, 2.78538896, 5.23996246],
                 [-1.60814507, 2.78538896, 5.23996246],
-                [1.60814506, 2.78538896, 5.23996246],
+                [1.60814506, 2.78538896, 5.23996246]
               ],
               type: 'lines',
-              clickable: false,
-            },
+              clickable: false
+            }
           ],
-          visible: false,
-        },
+          visible: false
+        }
       ],
       origin: [-0.80407253, -1.39269448, -2.61998123],
-      visible: true,
+      visible: true
     },
     {
       name: 'axes',
@@ -166,57 +165,57 @@ export const s4 = {
           positionPairs: [
             [
               [-0.80407253, -1.39269448, -2.61998123],
-              [0.19592747, -1.39269448, -2.61998123],
-            ],
+              [0.19592747, -1.39269448, -2.61998123]
+            ]
           ],
           color: 'red',
           radius: 0.07,
           headLength: 0.24,
           headWidth: 0.14,
           type: 'arrows',
-          clickable: false,
+          clickable: false
         },
         {
           positionPairs: [
             [
               [-0.80407253, -1.39269448, -2.61998123],
-              [-1.304072530966841, -0.5266690767737673, -2.61998123],
-            ],
+              [-1.304072530966841, -0.5266690767737673, -2.61998123]
+            ]
           ],
           color: 'green',
           radius: 0.07,
           headLength: 0.24,
           headWidth: 0.14,
           type: 'arrows',
-          clickable: false,
+          clickable: false
         },
         {
           positionPairs: [
             [
               [-0.80407253, -1.39269448, -2.61998123],
-              [-0.80407253, -1.39269448, -1.61998123],
-            ],
+              [-0.80407253, -1.39269448, -1.61998123]
+            ]
           ],
           color: 'blue',
           radius: 0.07,
           headLength: 0.24,
           headWidth: 0.14,
           type: 'arrows',
-          clickable: false,
+          clickable: false
         },
         {
           positions: [[-0.80407253, -1.39269448, -2.61998123]],
           color: 'white',
           radius: 0.0175,
           type: 'spheres',
-          clickable: false,
-        },
+          clickable: false
+        }
       ],
-      visible: false,
-    },
+      visible: false
+    }
   ],
   origin: [-0.80407253, -1.39269448, -2.61998123],
-  visible: true,
+  visible: true
 };
 
 export const s2 = {
@@ -235,7 +234,7 @@ export const s2 = {
             [4.2, 4.2, 4.2],
             [0, 0, 0],
             [0, 0, 4.2],
-            [4.2, 0, 0],
+            [4.2, 0, 0]
           ],
           color: '#f9dc3c',
           radius: 0.5,
@@ -250,9 +249,9 @@ export const s2 = {
             [4, 4, 4],
             [1, 1, 1],
             [1, 1, 4],
-            [4, 1, 1],
+            [4, 1, 1]
           ],
-          keyframes: [0, 1],
+          keyframes: [0, 1]
         },
         {
           positions: [[2.1, 2.1, 2.1]],
@@ -262,11 +261,11 @@ export const s2 = {
           tooltip: 'label',
           clickable: true,
           animate: [1, 1, 1],
-          keyframes: [0, 1],
-        },
+          keyframes: [0, 1]
+        }
       ],
       origin: [-2.1, -2.1, -2.1],
-      visible: true,
+      visible: true
     },
     {
       name: 'bonds',
@@ -275,36 +274,36 @@ export const s2 = {
           positionPairs: [
             [
               [4.2, 4.2, 0],
-              [3.1500000000000004, 3.1500000000000004, 1.05],
+              [3.1500000000000004, 3.1500000000000004, 1.05]
             ],
             [
               [0, 4.2, 4.2],
-              [1.05, 3.1500000000000004, 3.1500000000000004],
+              [1.05, 3.1500000000000004, 3.1500000000000004]
             ],
             [
               [0, 4.2, 0],
-              [1.05, 3.1500000000000004, 1.05],
+              [1.05, 3.1500000000000004, 1.05]
             ],
             [
               [4.2, 0, 4.2],
-              [3.1500000000000004, 1.05, 3.1500000000000004],
+              [3.1500000000000004, 1.05, 3.1500000000000004]
             ],
             [
               [4.2, 4.2, 4.2],
-              [3.1500000000000004, 3.1500000000000004, 3.1500000000000004],
+              [3.1500000000000004, 3.1500000000000004, 3.1500000000000004]
             ],
             [
               [0, 0, 0],
-              [1.05, 1.05, 1.05],
+              [1.05, 1.05, 1.05]
             ],
             [
               [0, 0, 4.2],
-              [1.05, 1.05, 3.1500000000000004],
+              [1.05, 1.05, 3.1500000000000004]
             ],
             [
               [4.2, 0, 0],
-              [3.1500000000000004, 1.05, 1.05],
-            ],
+              [3.1500000000000004, 1.05, 1.05]
+            ]
           ],
           animate: [
             [[4, 4, 1], [1, 1, 1], 0],
@@ -314,49 +313,49 @@ export const s2 = {
             [[4, 4, 4], [1, 1, 1], 4],
             [[1, 1, 1], [1, 1, 1], 5],
             [[1, 1, 4], [1, 1, 1], 6],
-            [[4, 1, 1], [1, 1, 1], 7],
+            [[4, 1, 1], [1, 1, 1], 7]
           ],
           keyframes: [0, 1],
           color: '#f9dc3c',
           tooltip: 'label',
           radius: 0.1,
           type: 'cylinders',
-          clickable: true,
+          clickable: true
         },
         {
           positionPairs: [
             [
               [2.1, 2.1, 2.1], // starts from center sphere
-              [1.05, 1.05, 1.05], // end in yellow
+              [1.05, 1.05, 1.05] // end in yellow
             ],
             [
               [2.1, 2.1, 2.1],
-              [3.1500000000000004, 1.05, 1.05],
+              [3.1500000000000004, 1.05, 1.05]
             ],
             [
               [2.1, 2.1, 2.1],
-              [3.1500000000000004, 3.1500000000000004, 3.1500000000000004],
+              [3.1500000000000004, 3.1500000000000004, 3.1500000000000004]
             ],
             [
               [2.1, 2.1, 2.1],
-              [3.1500000000000004, 1.05, 3.1500000000000004],
+              [3.1500000000000004, 1.05, 3.1500000000000004]
             ],
             [
               [2.1, 2.1, 2.1],
-              [1.05, 3.1500000000000004, 1.05],
+              [1.05, 3.1500000000000004, 1.05]
             ],
             [
               [2.1, 2.1, 2.1],
-              [3.1500000000000004, 3.1500000000000004, 1.05],
+              [3.1500000000000004, 3.1500000000000004, 1.05]
             ],
             [
               [2.1, 2.1, 2.1],
-              [1.05, 1.05, 3.1500000000000004],
+              [1.05, 1.05, 3.1500000000000004]
             ],
             [
               [2.1, 2.1, 2.1],
-              [1.05, 3.1500000000000004, 3.1500000000000004],
-            ],
+              [1.05, 3.1500000000000004, 3.1500000000000004]
+            ]
           ],
           animate: [
             [[1, 1, 1], [0, 0, 0], 0],
@@ -366,18 +365,18 @@ export const s2 = {
             [[1, 1, 1], [0, 0, 0], 4],
             [[1, 1, 1], [0, 0, 0], 5],
             [[1, 1, 1], [0, 0, 0], 6],
-            [[1, 1, 1], [0, 0, 0], 7],
+            [[1, 1, 1], [0, 0, 0], 7]
           ],
           keyframes: [0, 1],
           color: '#a121f6',
           radius: 0.1,
           type: 'cylinders',
           tooltip: 'label',
-          clickable: true,
-        },
+          clickable: true
+        }
       ],
       origin: [-2.1, -2.1, -2.1],
-      visible: true,
+      visible: true
     },
     {
       name: 'cubes',
@@ -385,16 +384,16 @@ export const s2 = {
         {
           positions: [
             [4, 4, 4],
-            [10, 10, 10],
+            [10, 10, 10]
           ],
           width: 2,
           color: '#ababaa',
           type: 'cubes',
           animate: [10, 10, 10],
           tooltip: 'label',
-          keyframes: [0, 1],
-        },
-      ],
+          keyframes: [0, 1]
+        }
+      ]
     },
     {
       name: 'polyhedra',
@@ -409,7 +408,7 @@ export const s2 = {
             [0, 4.2, 0],
             [4.2, 4.2, 0],
             [0, 0, 4.2],
-            [0, 4.2, 4.2],
+            [0, 4.2, 4.2]
           ],
           animate: [
             [[3.1, 3.1, 3.1], 0],
@@ -420,16 +419,16 @@ export const s2 = {
             [[1, 4, 1], 6],
             [[4, 4, 1], 7],
             [[1, 1, 4], 8],
-            [[1, 4, 4], 9],
+            [[1, 4, 4], 9]
           ],
           keyframes: [0, 1],
           color: '#a121f6',
-          type: 'convex',
-        },
+          type: 'convex'
+        }
       ],
       origin: [-2.1, -2.1, -2.1],
       tooltip: 'label',
-      visible: true,
+      visible: true
     },
     {
       name: 'unit_cell',
@@ -462,7 +461,7 @@ export const s2 = {
                 [4.2, 0, 4.2],
                 [4.2, 4.2, 4.2],
                 [0, 4.2, 4.2],
-                [4.2, 4.2, 4.2],
+                [4.2, 4.2, 4.2]
               ],
               animate: [
                 [0, 0, 0],
@@ -488,17 +487,17 @@ export const s2 = {
                 [4.2, 0, 4.2],
                 [4.2, 4.2, 4.2],
                 [0, 4.2, 4.2],
-                [4.2, 4.2, 4.2],
+                [4.2, 4.2, 4.2]
               ],
               keyframes: [0, 1],
-              type: 'lines',
-            },
+              type: 'lines'
+            }
           ],
-          visible: false,
-        },
+          visible: false
+        }
       ],
       origin: [-2.1, -2.1, -2.1],
-      visible: false,
+      visible: false
     },
     {
       name: 'axes',
@@ -507,57 +506,57 @@ export const s2 = {
           positionPairs: [
             [
               [-2.1, -2.1, -2.1],
-              [-1.4, -1.4, -3.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,
+          clickable: false
         },
         {
           positionPairs: [
             [
               [-2.1, -2.1, -2.1],
-              [-0.1, -2.5, -1.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,
+          clickable: false
         },
         {
           positionPairs: [
             [
               [-2.1, -2.1, -2.1],
-              [-1.1, -1.1, -1.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,
+          clickable: false
         },
         {
           positions: [[-2.1, -2.1, -2.1]],
           color: 'black',
           radius: 0.0175,
           type: 'spheres',
-          clickable: false,
-        },
+          clickable: false
+        }
       ],
-      visible: false,
-    },
+      visible: false
+    }
   ],
   origin: [-2.1, -2.1, -2.1],
-  visible: true,
+  visible: true
 };
 
 export const s3 = {
@@ -570,36 +569,36 @@ export const s3 = {
           positionPairs: [
             [
               [4.2, 4.2, 0],
-              [3.1500000000000004, 3.1500000000000004, 1.05],
+              [3.1500000000000004, 3.1500000000000004, 1.05]
             ],
             [
               [0, 4.2, 4.2],
-              [1.05, 3.1500000000000004, 3.1500000000000004],
+              [1.05, 3.1500000000000004, 3.1500000000000004]
             ],
             [
               [0, 4.2, 0],
-              [1.05, 3.1500000000000004, 1.05],
+              [1.05, 3.1500000000000004, 1.05]
             ],
             [
               [4.2, 0, 4.2],
-              [3.1500000000000004, 1.05, 3.1500000000000004],
+              [3.1500000000000004, 1.05, 3.1500000000000004]
             ],
             [
               [4.2, 4.2, 4.2],
-              [3.1500000000000004, 3.1500000000000004, 3.1500000000000004],
+              [3.1500000000000004, 3.1500000000000004, 3.1500000000000004]
             ],
             [
               [0, 0, 0],
-              [1.05, 1.05, 1.05],
+              [1.05, 1.05, 1.05]
             ],
             [
               [0, 0, 4.2],
-              [1.05, 1.05, 3.1500000000000004],
+              [1.05, 1.05, 3.1500000000000004]
             ],
             [
               [4.2, 0, 0],
-              [3.1500000000000004, 1.05, 1.05],
-            ],
+              [3.1500000000000004, 1.05, 1.05]
+            ]
           ],
           animate: [
             [[4, 4, 1], [1, 1, 1], 0],
@@ -609,49 +608,49 @@ export const s3 = {
             [[4, 4, 4], [1, 1, 1], 4],
             [[1, 1, 1], [1, 1, 1], 5],
             [[1, 1, 4], [1, 1, 1], 6],
-            [[4, 1, 1], [1, 1, 1], 7],
+            [[4, 1, 1], [1, 1, 1], 7]
           ],
           keyframes: [0, 1],
           color: '#f9dc3c',
           tooltip: 'label',
           radius: 0.1,
           type: 'cylinders',
-          clickable: true,
+          clickable: true
         },
         {
           positionPairs: [
             [
               [2.1, 2.1, 2.1], // starts from center sphere
-              [1.05, 1.05, 1.05], // end in yellow
+              [1.05, 1.05, 1.05] // end in yellow
             ],
             [
               [2.1, 2.1, 2.1],
-              [3.1500000000000004, 1.05, 1.05],
+              [3.1500000000000004, 1.05, 1.05]
             ],
             [
               [2.1, 2.1, 2.1],
-              [3.1500000000000004, 3.1500000000000004, 3.1500000000000004],
+              [3.1500000000000004, 3.1500000000000004, 3.1500000000000004]
             ],
             [
               [2.1, 2.1, 2.1],
-              [3.1500000000000004, 1.05, 3.1500000000000004],
+              [3.1500000000000004, 1.05, 3.1500000000000004]
             ],
             [
               [2.1, 2.1, 2.1],
-              [1.05, 3.1500000000000004, 1.05],
+              [1.05, 3.1500000000000004, 1.05]
             ],
             [
               [2.1, 2.1, 2.1],
-              [3.1500000000000004, 3.1500000000000004, 1.05],
+              [3.1500000000000004, 3.1500000000000004, 1.05]
             ],
             [
               [2.1, 2.1, 2.1],
-              [1.05, 1.05, 3.1500000000000004],
+              [1.05, 1.05, 3.1500000000000004]
             ],
             [
               [2.1, 2.1, 2.1],
-              [1.05, 3.1500000000000004, 3.1500000000000004],
-            ],
+              [1.05, 3.1500000000000004, 3.1500000000000004]
+            ]
           ],
           animate: [
             [[1, 1, 1], [0, 0, 0], 0],
@@ -661,18 +660,18 @@ export const s3 = {
             [[1, 1, 1], [0, 0, 0], 4],
             [[1, 1, 1], [0, 0, 0], 5],
             [[1, 1, 1], [0, 0, 0], 6],
-            [[1, 1, 1], [0, 0, 0], 7],
+            [[1, 1, 1], [0, 0, 0], 7]
           ],
           keyframes: [0, 1],
           color: '#a121f6',
           radius: 0.1,
           type: 'cylinders',
           tooltip: 'label',
-          clickable: true,
-        },
+          clickable: true
+        }
       ],
       origin: [-2.1, -2.1, -2.1],
-      visible: true,
+      visible: true
     },
     {
       name: 'cubes',
@@ -680,16 +679,16 @@ export const s3 = {
         {
           positions: [
             [4, 4, 4],
-            [10, 10, 10],
+            [10, 10, 10]
           ],
           width: 2,
           color: '#ababaa',
           type: 'cubes',
           animate: [10, 10, 10],
           tooltip: 'label',
-          keyframes: [0, 1],
-        },
-      ],
+          keyframes: [0, 1]
+        }
+      ]
     },
     {
       name: 'polyhedra',
@@ -704,7 +703,7 @@ export const s3 = {
             [0, 4.2, 0],
             [4.2, 4.2, 0],
             [0, 0, 4.2],
-            [0, 4.2, 4.2],
+            [0, 4.2, 4.2]
           ],
           animate: [
             [[3.1, 3.1, 3.1], 0],
@@ -715,16 +714,16 @@ export const s3 = {
             [[1, 4, 1], 6],
             [[4, 4, 1], 7],
             [[1, 1, 4], 8],
-            [[1, 4, 4], 9],
+            [[1, 4, 4], 9]
           ],
           keyframes: [0, 1],
           color: '#a121f6',
-          type: 'convex',
-        },
+          type: 'convex'
+        }
       ],
       origin: [-2.1, -2.1, -2.1],
       tooltip: 'label',
-      visible: true,
+      visible: true
     },
     {
       name: 'unit_cell',
@@ -757,7 +756,7 @@ export const s3 = {
                 [4.2, 0, 4.2],
                 [4.2, 4.2, 4.2],
                 [0, 4.2, 4.2],
-                [4.2, 4.2, 4.2],
+                [4.2, 4.2, 4.2]
               ],
               animate: [
                 [0, 0, 0],
@@ -783,17 +782,17 @@ export const s3 = {
                 [4.2, 0, 4.2],
                 [4.2, 4.2, 4.2],
                 [0, 4.2, 4.2],
-                [4.2, 4.2, 4.2],
+                [4.2, 4.2, 4.2]
               ],
               keyframes: [0, 1],
-              type: 'lines',
-            },
+              type: 'lines'
+            }
           ],
-          visible: false,
-        },
+          visible: false
+        }
       ],
       origin: [-2.1, -2.1, -2.1],
-      visible: false,
+      visible: false
     },
     {
       name: 'axes',
@@ -802,57 +801,57 @@ export const s3 = {
           positionPairs: [
             [
               [-2.1, -2.1, -2.1],
-              [-1.4, -1.4, -3.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,
+          clickable: false
         },
         {
           positionPairs: [
             [
               [-2.1, -2.1, -2.1],
-              [-0.1, -2.5, -1.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,
+          clickable: false
         },
         {
           positionPairs: [
             [
               [-2.1, -2.1, -2.1],
-              [-1.1, -1.1, -1.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,
+          clickable: false
         },
         {
           positions: [[-2.1, -2.1, -2.1]],
           color: 'black',
           radius: 0.0175,
           type: 'spheres',
-          clickable: false,
-        },
+          clickable: false
+        }
       ],
-      visible: false,
-    },
+      visible: false
+    }
   ],
   origin: [-2.1, -2.1, -2.1],
-  visible: true,
+  visible: true
 };
 
 export const scene = {
@@ -865,56 +864,56 @@ export const scene = {
           positionPairs: [
             [
               [-2.13336842, -1.2940969500000001, -7.74158491],
-              [-1.618063699237322, -1.2962610988334031, -6.884580615250245],
-            ],
+              [-1.618063699237322, -1.2962610988334031, -6.884580615250245]
+            ]
           ],
           color: 'red',
           radius: 0.7,
           headLength: 2.3,
           headWidth: 1.4,
           type: 'arrows',
-          clickable: true,
+          clickable: true
         },
         {
           positionPairs: [
             [
               [-2.13336842, -1.2940969500000001, -7.74158491],
-              [-1.8972015468796977, -0.8360916583284603, -6.884580615470827],
-            ],
+              [-1.8972015468796977, -0.8360916583284603, -6.884580615470827]
+            ]
           ],
           color: 'green',
           radius: 0.7,
           headLength: 2.3,
           headWidth: 1.4,
           type: 'arrows',
-          clickable: true,
+          clickable: true
         },
         {
           positionPairs: [
             [
               [-2.13336842, -1.2940969500000001, -7.74158491],
-              [-2.1369361013796637, -1.296261098833144, -6.741593615983197],
-            ],
+              [-2.1369361013796637, -1.296261098833144, -6.741593615983197]
+            ]
           ],
           color: 'blue',
           radius: 0.7,
           headLength: 2.3,
           headWidth: 1.4,
           type: 'arrows',
-          clickable: true,
+          clickable: true
         },
         {
           positions: [[-2.13336842, -1.2940969500000001, -7.74158491]],
           color: 'white',
           radius: 0.175,
           type: 'spheres',
-          clickable: true,
-        },
+          clickable: true
+        }
       ],
-      origin: [0, 0, 0],
-    },
+      origin: [0, 0, 0]
+    }
   ],
-  origin: [2.13336842, 1.2940969500000001, 7.74158491],
+  origin: [2.13336842, 1.2940969500000001, 7.74158491]
 };
 
 export const shperes = {
@@ -930,53 +929,53 @@ export const shperes = {
               positionPairs: [
                 [
                   [-2.1, -2.1, -2.1],
-                  [-1.4, -1.4, -3.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,
+              clickable: false
             },
             {
               positionPairs: [
                 [
                   [-2.1, -2.1, -2.1],
-                  [-0.1, -2.5, -1.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,
+              clickable: false
             },
             {
               positionPairs: [
                 [
                   [-2.1, -2.1, -2.1],
-                  [-1.1, -1.1, -1.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,
+              clickable: false
             },
             {
               positions: [[-2.1, -2.1, -2.1]],
               color: 'black',
               radius: 0.0175,
               type: 'spheres',
-              clickable: false,
-            },
+              clickable: false
+            }
           ],
-          visible: false,
+          visible: false
         },
         {
           positions: [
@@ -987,33 +986,39 @@ export const shperes = {
             [2.13336842, 1.2940969500000001, 7.74158491],
             [-2.15372178, -1.3064432600000002, -2.0367080900000003],
             [0.7860537699999997, -1.31878957, 2.8524384099999995],
-            [-0.7860537700000001, 1.3187895699999999, -2.8524384100000004],
+            [-0.7860537700000001, 1.3187895699999999, -2.8524384100000004]
           ],
           clickable: true,
           color: '#ffaaaa',
           radius: [0.5],
-          type: 'spheres',
+          type: 'spheres'
         },
         {
           positions: [
             [1.1352943356867837, 0.688667561081374, 4.1197692008924705],
-            [-1.1352941382531998, -0.6886632575514795, -4.119769120104752],
+            [-1.1352941382531998, -0.6886632575514795, -4.119769120104752]
           ],
           color: '#111111',
           radius: [0.5],
-          type: 'spheres',
+          type: 'spheres'
         },
         {
           positions: [[1.3132662690651387e-7, 0.000002162567968477802, -0.000004955452009625105]],
           color: '#00ffdd',
           radius: [0.65],
-          type: 'spheres',
-        },
+          type: 'spheres'
+        }
       ],
-      origin: [0, 0, 0],
-    },
+      origin: [0, 0, 0]
+    }
   ],
   origin: [-2.1, -2.1, -2.1],
+  latticeVectors: [
+    [1, 0, 0],
+    [0, 1, 0],
+    [0, 0, 1]
+  ],
+  tiling: [1, 0, 0]
 };
 
 export const buggyScene = {
@@ -1027,17 +1032,17 @@ export const buggyScene = {
             [-0.7860537700000001, 1.3187895699999999, -2.8524384100000004],
             [-1.7860537700000001, 1.3187895699999999, -2.8524384100000004],
             [-2.7860537700000001, 1.3187895699999999, -2.8524384100000004],
-            [-3.7860537700000001, 1.3187895699999999, -2.8524384100000004],
+            [-3.7860537700000001, 1.3187895699999999, -2.8524384100000004]
           ],
           color: '#ffaaaa',
           radius: [0.5],
-          type: 'spheres',
-        },
+          type: 'spheres'
+        }
       ],
-      origin: [0, 0, 0],
-    },
+      origin: [0, 0, 0]
+    }
   ],
-  origin: [2.13336842, 1.2940969500000001, 7.74158491],
+  origin: [2.13336842, 1.2940969500000001, 7.74158491]
 };
 
 export const s5 = {
@@ -1050,28 +1055,28 @@ export const s5 = {
           positions: [
             [1.6081450794147842, 0.9284629773820368, 2.6153700106355755],
             [-1.9414784057759444e-8, 1.8569259826179634, 5.235351240635575],
-            [-1.9414784057759444e-8, 1.8569259826179634, -0.004611219364424821],
+            [-1.9414784057759444e-8, 1.8569259826179634, -0.004611219364424821]
           ],
           color: '#9ee373',
           radius: 0.5,
           type: 'spheres',
           tooltip: 'heell',
-          clickable: true,
+          clickable: true
         },
         {
           positions: [
             [1.6081450794147842, 0.9284629773820368, 4.589578371864425],
-            [-1.9414784057759444e-8, 1.8569259826179634, 1.9695971418644245],
+            [-1.9414784057759444e-8, 1.8569259826179634, 1.9695971418644245]
           ],
           color: '#b0b9e6',
           radius: 0.5,
           type: 'spheres',
           tooltip: 'heell2',
-          clickable: true,
-        },
+          clickable: true
+        }
       ],
       origin: [-0.80407253, -1.39269448, -2.61998123],
-      visible: true,
+      visible: true
     },
     {
       name: 'bonds',
@@ -1080,20 +1085,20 @@ export const s5 = {
           positionPairs: [
             [
               [1.6081450794147842, 0.9284629773820368, 2.6153700106355755],
-              [0.8040725300000001, 1.39269448, 2.29248357625],
+              [0.8040725300000001, 1.39269448, 2.29248357625]
             ],
             [
               [1.6081450794147842, 0.9284629773820368, 2.6153700106355755],
-              [1.6081450794147842, 0.9284629773820368, 3.6024741912500002],
+              [1.6081450794147842, 0.9284629773820368, 3.6024741912500002]
             ],
             [
               [-1.9414784057759444e-8, 1.8569259826179634, 5.235351240635575],
-              [0.8040725300000001, 1.39269448, 4.91246480625],
+              [0.8040725300000001, 1.39269448, 4.91246480625]
             ],
             [
               [-1.9414784057759444e-8, 1.8569259826179634, -0.004611219364424821],
-              [-1.9414784057759444e-8, 1.8569259826179634, 0.9824929612499999],
-            ],
+              [-1.9414784057759444e-8, 1.8569259826179634, 0.9824929612499999]
+            ]
           ],
           color: '#9ee373',
           radius: 0.1,
@@ -1101,50 +1106,49 @@ export const s5 = {
           radiusBottom: 0.4,
           type: 'cylinders',
           tooltip: 'heell4',
-          clickable: false,
+          clickable: false
         },
         {
           positionPairs: [
             [
               [1.6081450794147842, 0.9284629773820368, 4.589578371864425],
-              [0.8040725300000001, 1.39269448, 4.91246480625],
+              [0.8040725300000001, 1.39269448, 4.91246480625]
             ],
             [
               [1.6081450794147842, 0.9284629773820368, 4.589578371864425],
-              [1.6081450794147842, 0.9284629773820368, 3.6024741912500002],
+              [1.6081450794147842, 0.9284629773820368, 3.6024741912500002]
             ],
             [
               [-1.9414784057759444e-8, 1.8569259826179634, 1.9695971418644245],
-              [0.8040725300000001, 1.39269448, 2.29248357625],
+              [0.8040725300000001, 1.39269448, 2.29248357625]
             ],
             [
               [-1.9414784057759444e-8, 1.8569259826179634, 1.9695971418644245],
-              [-1.9414784057759444e-8, 1.8569259826179634, 0.9824929612499999],
-            ],
+              [-1.9414784057759444e-8, 1.8569259826179634, 0.9824929612499999]
+            ]
           ],
           color: '#b0b9e6',
           radius: 0.1,
           radiusTop: [0.13, 0.01, 0.05, 0.1, 0.25],
           radiusBottom: [0.4, 0.3, 0.25, 0.5, 0.01],
           type: 'cylinders',
-          clickable: false,
-        },
+          clickable: false
+        }
       ],
       origin: [-0.80407253, -1.39269448, -2.61998123],
-      visible: true,
+      visible: true
     },
     {
       name: 'polyhedra',
       contents: [],
       origin: [-0.80407253, -1.39269448, -2.61998123],
-      visible: true,
+      visible: true
     },
     {
       name: 'unit_cell',
       contents: [
         {
-          name:
-            'a=3.21629013, b=3.2162901337807175, c=5.23996246, alpha=90.0, beta=90.0, gamma=120.00000006396569',
+          name: 'a=3.21629013, b=3.2162901337807175, c=5.23996246, alpha=90.0, beta=90.0, gamma=120.00000006396569',
           contents: [
             {
               positions: [
@@ -1171,17 +1175,17 @@ export const s5 = {
                 [3.21629013, 0, 5.23996246],
                 [1.60814506, 2.78538896, 5.23996246],
                 [-1.60814507, 2.78538896, 5.23996246],
-                [1.60814506, 2.78538896, 5.23996246],
+                [1.60814506, 2.78538896, 5.23996246]
               ],
               type: 'lines',
-              clickable: false,
-            },
+              clickable: false
+            }
           ],
-          visible: true,
-        },
+          visible: true
+        }
       ],
       origin: [-0.80407253, -1.39269448, -2.61998123],
-      visible: true,
+      visible: true
     },
     {
       name: 'axes',
@@ -1190,55 +1194,59 @@ export const s5 = {
           positionPairs: [
             [
               [-0.80407253, -1.39269448, -2.61998123],
-              [0.19592747, -1.39269448, -2.61998123],
-            ],
+              [0.19592747, -1.39269448, -2.61998123]
+            ]
           ],
           color: 'red',
           radius: 0.07,
           headLength: 0.24,
           headWidth: 0.14,
           type: 'arrows',
-          clickable: false,
+          clickable: false
         },
         {
           positionPairs: [
             [
               [-0.80407253, -1.39269448, -2.61998123],
-              [-1.304072530966841, -0.5266690767737673, -2.61998123],
-            ],
+              [-1.304072530966841, -0.5266690767737673, -2.61998123]
+            ]
           ],
           color: 'green',
           radius: 0.07,
           headLength: 0.24,
           headWidth: 0.14,
           type: 'arrows',
-          clickable: false,
+          clickable: false
         },
         {
           positionPairs: [
             [
               [-0.80407253, -1.39269448, -2.61998123],
-              [-0.80407253, -1.39269448, -1.61998123],
-            ],
+              [-0.80407253, -1.39269448, -1.61998123]
+            ]
           ],
           color: 'blue',
           radius: 0.07,
           headLength: 0.24,
           headWidth: 0.14,
           type: 'arrows',
-          clickable: false,
+          clickable: false
         },
         {
           positions: [[-0.80407253, -1.39269448, -2.61998123]],
           color: 'white',
           radius: 0.0175,
           type: 'spheres',
-          clickable: false,
-        },
+          clickable: false
+        }
       ],
-      visible: false,
-    },
+      visible: false
+    }
   ],
   origin: [-0.80407253, -1.39269448, -2.61998123],
-  visible: true,
+  visible: true
 };
+
+// a test structure
+import crystal from './crystal-scene.json';
+export const crystalScene = crystal;
diff --git a/src/pages/PhononVisualization/PhononVisualization.tsx b/src/pages/PhononVisualization/PhononVisualization.tsx
index 28d39a75..2bc71df7 100644
--- a/src/pages/PhononVisualization/PhononVisualization.tsx
+++ b/src/pages/PhononVisualization/PhononVisualization.tsx
@@ -1,6 +1,13 @@
 import React, { useEffect, useState } from 'react';
 import { scene, scene2 } from '../../components/crystal-toolkit/scene/mike';
-import { s2, s3, s4, s5, shperes } from '../../components/crystal-toolkit/scene/simple-scene';
+import {
+  s2,
+  s3,
+  s4,
+  s5,
+  shperes,
+  crystalScene
+} from '../../components/crystal-toolkit/scene/simple-scene';
 import { CameraContextProvider } from '../../components/crystal-toolkit/CameraContextProvider';
 import { AnimationStyle, Renderer } from '../../components/crystal-toolkit/scene/constants';
 import { CrystalToolkitScene } from '../../components/crystal-toolkit/CrystalToolkitScene/CrystalToolkitScene';
@@ -27,7 +34,7 @@ export const PhononVisualization: React.FC = () => {
           extractAxis: false,
           zoomToFit2D: true
         }}
-        data={s3}
+        data={crystalScene}
         sceneSize="100%"
         debug={false}
         toggleVisibility={{}}

From e556147739427314ac059537e7dde620fa3afbed Mon Sep 17 00:00:00 2001
From: orioncohen <orion@lbl.gov>
Date: Mon, 6 Dec 2021 09:28:14 -0800
Subject: [PATCH 03/21] adwrite new inner loop in Scene.ts to include tiling

---
 src/components/crystal-toolkit/scene/Scene.ts | 66 ++++++++++++++++++-
 1 file changed, 65 insertions(+), 1 deletion(-)

diff --git a/src/components/crystal-toolkit/scene/Scene.ts b/src/components/crystal-toolkit/scene/Scene.ts
index 20e5eab4..b1e2b21c 100644
--- a/src/components/crystal-toolkit/scene/Scene.ts
+++ b/src/components/crystal-toolkit/scene/Scene.ts
@@ -486,7 +486,71 @@ export default class Scene {
       });
     };
 
-    traverse_scene(sceneJson, rootObject, '');
+    const _get_tiles = (tiling: number[]) => {
+      // enumerate all tiles needed for a given tiling size
+      let tiles: number[][] = [];
+      for (let x: number = 0; x <= tiling[0]; x++) {
+        for (let y: number = 0; y <= tiling[1]; y++) {
+          for (let z: number = 0; z <= tiling[2]; z++) {
+            tiles.push([x, y, z]);
+          }
+        }
+      }
+      return tiles;
+    };
+
+    // a alternative inner loop that includes tiling
+    const traverse_scene_w_tiling = (
+      o: SceneJsonObject,
+      parent: THREE.Object3D,
+      currentId: string
+    ) => {
+      o.contents!.forEach((childObject, idx) => {
+        // determine proper tiling if it exists
+        let tiling = childObject.tiling ? childObject.tiling : [0, 0, 0];
+        let tiles = _get_tiles(tiling);
+        let lattice = childObject.lattice
+          ? childObject.lattice
+          : [
+              [0, 0, 0],
+              [0, 0, 0],
+              [0, 0, 0]
+            ];
+        // loop over all tiles and render each tile
+        for (const tile of tiles) {
+          const threeObject = new THREE.Object3D();
+          threeObject.name = childObject.name!;
+          this.computeIdToThree[`${currentId}--${threeObject.name}`] = threeObject;
+          childObject.id = `${currentId}--${threeObject.name}`;
+          threeObject.visible = childObject.visible === undefined ? true : !!childObject.visible;
+          let scaled_lattice = lattice.map((vector: number[], index: number) => {
+            return vector.map((x: number) => x * tile[index]);
+          });
+          // transform tile according to lattice vectors
+          for (const vec of scaled_lattice) {
+            const tiling_translation = new THREE.Matrix4();
+            tiling_translation.makeTranslation(...(vec as ThreePosition));
+            threeObject.applyMatrix4(tiling_translation);
+          }
+          if (childObject.origin) {
+            const origin_translation = new THREE.Matrix4();
+            // note(chab) have a typedefinition for the JSON
+            origin_translation.makeTranslation(...(childObject.origin as ThreePosition));
+            threeObject.applyMatrix4(origin_translation);
+          }
+          if (!this.settings.extractAxis || threeObject.name !== 'axes') {
+            parent.add(threeObject);
+          }
+          traverse_scene(childObject, threeObject, `${currentId}--${threeObject.name}`);
+          if (threeObject.name === 'axes') {
+            this.axis = threeObject.clone();
+            this.axisJson = { ...childObject };
+          }
+        }
+      });
+    };
+
+    traverse_scene_w_tiling(sceneJson, rootObject, '');
     // can cause memory leak
     //console.log('rootObject', rootObject, rootObject);
     this.scene.add(rootObject);

From a93b5d214d36cb24e81bda40859ab44c6421edc3 Mon Sep 17 00:00:00 2001
From: orioncohen <orion@lbl.gov>
Date: Mon, 6 Dec 2021 09:34:35 -0800
Subject: [PATCH 04/21] restore original commas in simple-scene.ts

---
 src/components/crystal-toolkit/scene/simple-scene.ts | 8 +-------
 1 file changed, 1 insertion(+), 7 deletions(-)

diff --git a/src/components/crystal-toolkit/scene/simple-scene.ts b/src/components/crystal-toolkit/scene/simple-scene.ts
index 8316581a..d4e0496f 100644
--- a/src/components/crystal-toolkit/scene/simple-scene.ts
+++ b/src/components/crystal-toolkit/scene/simple-scene.ts
@@ -1012,13 +1012,7 @@ export const shperes = {
       origin: [0, 0, 0]
     }
   ],
-  origin: [-2.1, -2.1, -2.1],
-  latticeVectors: [
-    [1, 0, 0],
-    [0, 1, 0],
-    [0, 0, 1]
-  ],
-  tiling: [1, 0, 0]
+  origin: [-2.1, -2.1, -2.1]
 };
 
 export const buggyScene = {

From 178b602a8dc0cc01e81521c99e8f7bec7927e957 Mon Sep 17 00:00:00 2001
From: orioncohen <orion@lbl.gov>
Date: Mon, 6 Dec 2021 09:36:59 -0800
Subject: [PATCH 05/21] add commas fix


From a15d1c3345235f3a06b317027a73082cb890b38f Mon Sep 17 00:00:00 2001
From: orioncohen <orion@lbl.gov>
Date: Mon, 23 May 2022 15:28:30 -0700
Subject: [PATCH 06/21] previously the defaults in SimpleSlider were hardcoded,
 I fixed SimpleSlider to optionally use the props.

---
 .../scene/animation-slider.tsx                | 63 ++++++++++---------
 1 file changed, 32 insertions(+), 31 deletions(-)

diff --git a/src/components/crystal-toolkit/scene/animation-slider.tsx b/src/components/crystal-toolkit/scene/animation-slider.tsx
index de97d984..4c8b7e31 100644
--- a/src/components/crystal-toolkit/scene/animation-slider.tsx
+++ b/src/components/crystal-toolkit/scene/animation-slider.tsx
@@ -6,10 +6,10 @@ const sliderStyle: any = {
   position: 'relative',
   margin: 'auto',
   width: '80%',
-  touchAction: 'none',
+  touchAction: 'none'
 };
 
-const domain: any = [0, 100];
+const defaultDomain: any = [0, 100];
 const defaultValues: any = [0];
 
 class SimpleSlider extends Component<any, any> {
@@ -19,7 +19,7 @@ class SimpleSlider extends Component<any, any> {
 
   state = {
     values: defaultValues.slice(),
-    update: defaultValues.slice(),
+    update: defaultValues.slice()
   };
 
   onUpdate = (update) => {
@@ -28,12 +28,13 @@ class SimpleSlider extends Component<any, any> {
   };
 
   onChange = (values) => {
+    this.props.onChange(values[0]);
     this.setState({ values });
   };
 
   render() {
     const {
-      state: { values, update },
+      state: { values, update }
     } = this;
 
     return (
@@ -41,11 +42,11 @@ class SimpleSlider extends Component<any, any> {
         <Slider
           mode={1}
           step={1}
-          domain={domain}
+          domain={this.props.domain ? this.props.domain : defaultDomain}
           rootStyle={sliderStyle}
           onUpdate={this.onUpdate}
           onChange={this.onChange}
-          values={values}
+          values={this.props.values ? this.props.values : defaultValues}
         >
           <Rail>{({ getRailProps }) => <SliderRail getRailProps={getRailProps} />}</Rail>
           <Handles>
@@ -55,7 +56,7 @@ class SimpleSlider extends Component<any, any> {
                   <Handle
                     key={handle.id}
                     handle={handle}
-                    domain={domain}
+                    domain={defaultDomain}
                     getHandleProps={getHandleProps}
                   />
                 ))}
@@ -95,7 +96,7 @@ const railOuterStyle = {
   height: 42,
   transform: 'translate(0%, -50%)',
   borderRadius: 7,
-  cursor: 'pointer',
+  cursor: 'pointer'
   // border: '1px solid white',
 };
 
@@ -106,7 +107,7 @@ const railInnerStyle: any = {
   transform: 'translate(0%, -50%)',
   borderRadius: 7,
   pointerEvents: 'none',
-  backgroundColor: 'rgb(155,155,155)',
+  backgroundColor: 'rgb(155,155,155)'
 };
 
 export function SliderRail({ getRailProps }) {
@@ -119,7 +120,7 @@ export function SliderRail({ getRailProps }) {
 }
 
 SliderRail.propTypes = {
-  getRailProps: PropTypes.func.isRequired,
+  getRailProps: PropTypes.func.isRequired
 };
 
 // *******************************************************
@@ -129,7 +130,7 @@ export function Handle({
   domain: [min, max],
   handle: { id, value, percent },
   disabled,
-  getHandleProps,
+  getHandleProps
 }) {
   return (
     <Fragment>
@@ -144,7 +145,7 @@ export function Handle({
           height: 42,
           cursor: 'pointer',
           // border: '1px solid white',
-          backgroundColor: 'none',
+          backgroundColor: 'none'
         }}
         {...getHandleProps(id)}
       />
@@ -162,7 +163,7 @@ export function Handle({
           height: 24,
           borderRadius: '50%',
           boxShadow: '1px 1px 1px 1px rgba(0, 0, 0, 0.3)',
-          backgroundColor: disabled ? '#666' : '#ffc400',
+          backgroundColor: disabled ? '#666' : '#ffc400'
         }}
       />
     </Fragment>
@@ -174,14 +175,14 @@ Handle.propTypes = {
   handle: PropTypes.shape({
     id: PropTypes.string.isRequired,
     value: PropTypes.number.isRequired,
-    percent: PropTypes.number.isRequired,
+    percent: PropTypes.number.isRequired
   }).isRequired,
   getHandleProps: PropTypes.func.isRequired,
-  disabled: PropTypes.bool,
+  disabled: PropTypes.bool
 };
 
 Handle.defaultProps = {
-  disabled: false,
+  disabled: false
 };
 
 // *******************************************************
@@ -192,7 +193,7 @@ export function KeyboardHandle({
   domain: [min, max],
   handle: { id, value, percent },
   disabled,
-  getHandleProps,
+  getHandleProps
 }) {
   return (
     <button
@@ -209,7 +210,7 @@ export function KeyboardHandle({
         height: 24,
         borderRadius: '50%',
         boxShadow: '1px 1px 1px 1px rgba(0, 0, 0, 0.3)',
-        backgroundColor: disabled ? '#666' : '#ffc400',
+        backgroundColor: disabled ? '#666' : '#ffc400'
       }}
       {...getHandleProps(id)}
     />
@@ -221,14 +222,14 @@ KeyboardHandle.propTypes = {
   handle: PropTypes.shape({
     id: PropTypes.string.isRequired,
     value: PropTypes.number.isRequired,
-    percent: PropTypes.number.isRequired,
+    percent: PropTypes.number.isRequired
   }).isRequired,
   getHandleProps: PropTypes.func.isRequired,
-  disabled: PropTypes.bool,
+  disabled: PropTypes.bool
 };
 
 KeyboardHandle.defaultProps = {
-  disabled: false,
+  disabled: false
 };
 
 // *******************************************************
@@ -246,7 +247,7 @@ export function Track({ source, target, getTrackProps, disabled }) {
         borderRadius: 7,
         cursor: 'pointer',
         left: `${source.percent}%`,
-        width: `${target.percent - source.percent}%`,
+        width: `${target.percent - source.percent}%`
       }}
       {...getTrackProps()}
     />
@@ -257,19 +258,19 @@ Track.propTypes = {
   source: PropTypes.shape({
     id: PropTypes.string.isRequired,
     value: PropTypes.number.isRequired,
-    percent: PropTypes.number.isRequired,
+    percent: PropTypes.number.isRequired
   }).isRequired,
   target: PropTypes.shape({
     id: PropTypes.string.isRequired,
     value: PropTypes.number.isRequired,
-    percent: PropTypes.number.isRequired,
+    percent: PropTypes.number.isRequired
   }).isRequired,
   getTrackProps: PropTypes.func.isRequired,
-  disabled: PropTypes.bool,
+  disabled: PropTypes.bool
 };
 
 Track.defaultProps = {
-  disabled: false,
+  disabled: false
 };
 
 // *******************************************************
@@ -285,7 +286,7 @@ export function Tick({ tick, count, format }) {
           width: 1,
           height: 5,
           backgroundColor: 'rgb(200,200,200)',
-          left: `${tick.percent}%`,
+          left: `${tick.percent}%`
         }}
       />
       <div
@@ -296,7 +297,7 @@ export function Tick({ tick, count, format }) {
           textAlign: 'center',
           marginLeft: `${-(100 / count) / 2}%`,
           width: `${100 / count}%`,
-          left: `${tick.percent}%`,
+          left: `${tick.percent}%`
         }}
       >
         {format(tick.value)}
@@ -309,14 +310,14 @@ Tick.propTypes = {
   tick: PropTypes.shape({
     id: PropTypes.string.isRequired,
     value: PropTypes.number.isRequired,
-    percent: PropTypes.number.isRequired,
+    percent: PropTypes.number.isRequired
   }).isRequired,
   count: PropTypes.number.isRequired,
-  format: PropTypes.func.isRequired,
+  format: PropTypes.func.isRequired
 };
 
 Tick.defaultProps = {
-  format: (d) => d,
+  format: (d) => d
 };
 
 export default SimpleSlider;

From 2132c7eff3fb128a6728184e14bb03f1677f4c92 Mon Sep 17 00:00:00 2001
From: orioncohen <orion@lbl.gov>
Date: Mon, 23 May 2022 15:30:50 -0700
Subject: [PATCH 07/21] added the crystal-scene.json as a new test case, added
 a lattice parameter to it

---
 .../crystal-toolkit/scene/crystal-scene.json  | 23 +++++++------------
 1 file changed, 8 insertions(+), 15 deletions(-)

diff --git a/src/components/crystal-toolkit/scene/crystal-scene.json b/src/components/crystal-toolkit/scene/crystal-scene.json
index 2cbf3c3e..10101357 100644
--- a/src/components/crystal-toolkit/scene/crystal-scene.json
+++ b/src/components/crystal-toolkit/scene/crystal-scene.json
@@ -150,13 +150,7 @@
         }
       ],
       "origin": [-0.786653175, -1.362523265, -7.108583655],
-      "visible": true,
-      "tiling": [2, 1, 0],
-      "lattice": [
-        [3.1466127, 0.0, 0.0],
-        [-1.57330635, 2.72504653, 0.0],
-        [0.0, 0.0, 14.21716731]
-      ]
+      "visible": true
     },
     {
       "name": "bonds",
@@ -217,15 +211,14 @@
         }
       ],
       "origin": [-0.786653175, -1.362523265, -7.108583655],
-      "visible": true,
-      "tiling": [2, 1, 0],
-      "lattice": [
-        [3.1466127, 0.0, 0.0],
-        [-1.57330635, 2.72504653, 0.0],
-        [0.0, 0.0, 14.21716731]
-      ]
+      "visible": true
     }
   ],
   "origin": [-0.786653175, -1.362523265, -7.108583655],
-  "visible": true
+  "visible": true,
+  "lattice": [
+    [3.1466127, 0.0, 0.0],
+    [-1.57330635, 2.72504653, 0.0],
+    [0.0, 0.0, 14.21716731]
+  ]
 }

From 92127db06d455d90520500e6f62594b4cecd8c67 Mon Sep 17 00:00:00 2001
From: orioncohen <orion@lbl.gov>
Date: Mon, 23 May 2022 15:31:06 -0700
Subject: [PATCH 08/21] added the lattice parameter to the SceneJsonObject

---
 src/components/crystal-toolkit/scene/simple-scene.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/crystal-toolkit/scene/simple-scene.ts b/src/components/crystal-toolkit/scene/simple-scene.ts
index d4e0496f..33990ab6 100644
--- a/src/components/crystal-toolkit/scene/simple-scene.ts
+++ b/src/components/crystal-toolkit/scene/simple-scene.ts
@@ -18,6 +18,7 @@ export interface SceneJsonObject {
   keyframes?: number[];
   animate?: any[];
   id?: string;
+  lattice?: number[][];
 }
 
 export const s4 = {

From 9c87cc81b51e258bac5937535bb54eac1002149c Mon Sep 17 00:00:00 2001
From: orioncohen <orion@lbl.gov>
Date: Mon, 23 May 2022 15:31:59 -0700
Subject: [PATCH 09/21] added support for lattice tiling that can be controlled
 with the tiling and maxTiling arguments

---
 src/components/crystal-toolkit/scene/Scene.ts | 204 ++++++++++++++----
 1 file changed, 167 insertions(+), 37 deletions(-)

diff --git a/src/components/crystal-toolkit/scene/Scene.ts b/src/components/crystal-toolkit/scene/Scene.ts
index b1e2b21c..4dd02ba9 100644
--- a/src/components/crystal-toolkit/scene/Scene.ts
+++ b/src/components/crystal-toolkit/scene/Scene.ts
@@ -69,6 +69,8 @@ export default class Scene {
 
   private clock = new THREE.Clock();
   private animationHelper: AnimationHelper;
+  private tiling: any;
+  private maxTiling: any;
 
   private cacheMountBBox(mountNode: Element) {
     this.cachedMountNodeSize = { width: mountNode.clientWidth, height: mountNode.clientHeight };
@@ -120,6 +122,8 @@ export default class Scene {
     mountNode.appendChild(labelRenderer.domElement);
   }
 
+  componentDidUpdate = () => {};
+
   mouseMoveListener = (e) => {
     if (this.renderer instanceof WebGLRenderer || true) {
       // tooltips
@@ -242,7 +246,7 @@ export default class Scene {
 
   private onClickImplementation(p, e) {
     let needRedraw = false;
-    //TODO(chab) make it more readale
+    //TODO(chab) make it more readable
     if (p && p.object) {
       const { object, point } = p;
       if (object?.sceneObject) {
@@ -361,11 +365,16 @@ export default class Scene {
     settings,
     size,
     padding,
+    tiling,
+    maxTiling, // TODO
     clickCallback,
     private dispatch: (p: Vector3, r: Quaternion, zoom: number) => void,
     private debugDOMElement?,
     cameraState?: CameraState
   ) {
+    this.tiling = tiling;
+    this.maxTiling = maxTiling;
+
     this.settings = Object.assign(defaults, settings);
     this.objectBuilder = new ThreeBuilder(this.settings);
     this.cameraState = cameraState;
@@ -418,7 +427,7 @@ export default class Scene {
   }
 
   addToScene(sceneJson: SceneJsonObject, bypassRendering = false) {
-    // we need to clarify the  current semantics
+    // we need to clarify the current semantics
     // currently, it will remove the old scene if the name is the same,
     // otherwise it will keep it
     // it will then zoom on the content of the added scene
@@ -445,15 +454,14 @@ export default class Scene {
       console.log('The scene is a new scene:', sceneJson.name);
     }
 
-    const rootObject = new THREE.Object3D();
-    rootObject.name = sceneJson.name!;
-    sceneJson.visible && (rootObject.visible = sceneJson.visible);
-
     const objectToAnimate = new Set<string>();
-    // recursively visit the scene, starting with the root object
+
+    // this is now defunct and should be removed, only included for comparison
+    // TODO: remove traverse_scene
     const traverse_scene = (o: SceneJsonObject, parent: THREE.Object3D, currentId: string) => {
       o.contents!.forEach((childObject, idx) => {
         if (childObject.type) {
+          // if object can be made into a ThreeObject, add to scene and end recursion
           const object = this.makeObject(childObject);
           parent.add(object);
           this.threeUUIDTojsonObject[object.uuid] = childObject;
@@ -463,6 +471,8 @@ export default class Scene {
             objectToAnimate.add(`${currentId}--${idx}`);
           }
         } else {
+          // if object cannot be made into a ThreeObject, add empty child scene,
+          // set origin, and recurse
           const threeObject = new THREE.Object3D();
           threeObject.name = childObject.name!;
           this.computeIdToThree[`${currentId}--${threeObject.name}`] = threeObject;
@@ -485,8 +495,11 @@ export default class Scene {
         }
       });
     };
-
-    const _get_tiles = (tiling: number[]) => {
+    /*
+      this function returns an array of tiles based on the tiling array
+      e.g. _getTiles([0, 1, 1] === [[0,0,0], [0,0,1], [0,1,1], [0,1,0]]
+     */
+    const _getTiles = (tiling: number[]) => {
       // enumerate all tiles needed for a given tiling size
       let tiles: number[][] = [];
       for (let x: number = 0; x <= tiling[0]; x++) {
@@ -499,49 +512,128 @@ export default class Scene {
       return tiles;
     };
 
-    // a alternative inner loop that includes tiling
-    const traverse_scene_w_tiling = (
+    /*
+      this function returns a 3-dimensional empty array based on the tiling array
+      e.g. _getTiles([1, 1, 1] === [ [ [[], []], [[], []] ], [ [[], []], [[], []] ] ]
+      all of the arrays are unique instances, not copies
+      this allows us to create an array that can store the contents of each tiles and
+      be accessed with the tile indices. For example:
+      arr = _getTiles([2, 2, 2])
+      arr[0][1][2].push(scene)
+      scene = arr[0][1][2][0]
+     */
+    const _getEmptyTilesArray = (tiling: number[]) => {
+      let grid = [];
+      for (let x = 0; x <= tiling[2]; x++) {
+        let arrX = [];
+        for (let y = 0; y <= tiling[1]; y++) {
+          let arrY = [];
+          for (let z = 0; z <= tiling[0]; z++) {
+            let arrZ = [];
+            // @ts-ignore
+            arrY.push(arrZ);
+          }
+          // @ts-ignore
+          arrX.push(arrY);
+        }
+        // @ts-ignore
+        grid.push(arrX);
+      }
+      return grid;
+    };
+
+    const emptyLattice = [
+      [0, 0, 0],
+      [0, 0, 0],
+      [0, 0, 0]
+    ];
+
+    /*
+      This function traverses through all the tiles and renders the SceneJsonObject once for each.
+      Each new scene is a child of root and is offset according to the SceneJsonObject.lattice.
+      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[][][][]
+    ) => {
+      // @ts-ignore
+      let lattice = o.lattice ? o.lattice : emptyLattice;
+
+      for (const tile of tiles) {
+        const tileRootObject = new THREE.Object3D();
+        tileRootObject.name = sceneJson.name!;
+        sceneJson.visible && (tileRootObject.visible = sceneJson.visible);
+
+        root.add(tileRootObject);
+        const [x, y, z] = tile;
+        arrayOfTileRoots[x][y][z].push(tileRootObject);
+
+        let tileOffsets: number[][] = lattice.map((vector: number[], index: number) => {
+          return vector.map((x: number) => x * tile[index]);
+        });
+        traverseScene(sceneJson, tileRootObject, tileOffsets, '');
+      }
+    };
+
+    /*
+      This is the core rendering loop of the Scene class. This function recursively
+      traverses through the scene graph and render all objects that can be converted
+      into threeObject's.
+      It will apply the tileOffset to the rendered scenes, translating them relative
+      to the parent threeObject.
+     */
+    const traverseScene = (
       o: SceneJsonObject,
       parent: THREE.Object3D,
+      tileOffsets: number[][],
       currentId: string
     ) => {
+      // create root and add to
       o.contents!.forEach((childObject, idx) => {
-        // determine proper tiling if it exists
-        let tiling = childObject.tiling ? childObject.tiling : [0, 0, 0];
-        let tiles = _get_tiles(tiling);
-        let lattice = childObject.lattice
-          ? childObject.lattice
-          : [
-              [0, 0, 0],
-              [0, 0, 0],
-              [0, 0, 0]
-            ];
-        // loop over all tiles and render each tile
-        for (const tile of tiles) {
+        if (childObject.type) {
+          // render the threeObject according to childObject.type and end recursion
+          const object = this.makeObject(childObject);
+          parent.add(object);
+          this.threeUUIDTojsonObject[object.uuid] = childObject;
+          this.computeIdToThree[`${currentId}--${idx}`] = object;
+          childObject.id = `${currentId}--${idx}`;
+          if (childObject.animate) {
+            objectToAnimate.add(`${currentId}--${idx}`);
+          }
+        } else {
+          // create threeObject, save id, and add to arrayOfTileRoots
           const threeObject = new THREE.Object3D();
           threeObject.name = childObject.name!;
           this.computeIdToThree[`${currentId}--${threeObject.name}`] = threeObject;
           childObject.id = `${currentId}--${threeObject.name}`;
           threeObject.visible = childObject.visible === undefined ? true : !!childObject.visible;
-          let scaled_lattice = lattice.map((vector: number[], index: number) => {
-            return vector.map((x: number) => x * tile[index]);
-          });
-          // transform tile according to lattice vectors
-          for (const vec of scaled_lattice) {
-            const tiling_translation = new THREE.Matrix4();
-            tiling_translation.makeTranslation(...(vec as ThreePosition));
-            threeObject.applyMatrix4(tiling_translation);
+
+          // translate tile according to lattice vectors
+          for (let offset of tileOffsets) {
+            if (threeObject.name !== 'unit_cell') {
+              const tilingTranslation = new THREE.Matrix4();
+              tilingTranslation.makeTranslation(...(offset as ThreePosition));
+              threeObject.applyMatrix4(tilingTranslation);
+            }
           }
+
+          // translate tile to scene origin
           if (childObject.origin) {
-            const origin_translation = new THREE.Matrix4();
+            const translation = new THREE.Matrix4();
             // note(chab) have a typedefinition for the JSON
-            origin_translation.makeTranslation(...(childObject.origin as ThreePosition));
-            threeObject.applyMatrix4(origin_translation);
+            translation.makeTranslation(...(childObject.origin as ThreePosition));
+            threeObject.applyMatrix4(translation);
           }
           if (!this.settings.extractAxis || threeObject.name !== 'axes') {
             parent.add(threeObject);
           }
-          traverse_scene(childObject, threeObject, `${currentId}--${threeObject.name}`);
+
+          // recurse through Scene graph
+          traverseScene(childObject, threeObject, tileOffsets, `${currentId}--${threeObject.name}`);
           if (threeObject.name === 'axes') {
             this.axis = threeObject.clone();
             this.axisJson = { ...childObject };
@@ -550,11 +642,49 @@ export default class Scene {
       });
     };
 
-    traverse_scene_w_tiling(sceneJson, rootObject, '');
+    /*
+      loop through the arrayOfTileRoots and set the visibility of each object.
+      In particular, set threeObject.visible = true if the x, y, and z indices
+      are all less than the x, y, and z indices in tiling.
+     */
+    const updateTiles = (arrayOfTileRoots, tiling) => {
+      const [xCut, yCut, zCut] = tiling;
+      arrayOfTileRoots.forEach((arrX, x) => {
+        arrX.forEach((arrY, y) => {
+          arrY.forEach((arrZ, z) => {
+            arrZ[0].visible = x <= xCut && y <= yCut && z <= zCut;
+          });
+        });
+      });
+    };
+
+    // TODO: does it make sense to split this code into two cases?
+    // set up the threeObjects and containers
+    let arrayOfTileRoots: number[][][][];
+    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);
+      arrayOfTileRoots = _getEmptyTilesArray(maxTilingArray);
+      traverseTiles(sceneJson, rootObject, tiles, arrayOfTileRoots);
+      updateTiles(arrayOfTileRoots, this.tiling);
+    } else {
+      rootObject.name = sceneJson.name!;
+      sceneJson.visible && (rootObject.visible = sceneJson.visible);
+      traverseScene(sceneJson, rootObject, emptyLattice, '');
+    }
+
+    // for demonstration purposes TODO: remove next two lines
+    // arrayOfTileRoots[1][1][1][0].visible = false;
+    // arrayOfTileRoots[0][0][0][0].visible = false;
+
     // can cause memory leak
     //console.log('rootObject', rootObject, rootObject);
     this.scene.add(rootObject);
-    this.setupCamera(rootObject);
+    this.setupCamera(rootObject); // TODO: this could introduce issues if the new root is not compatible
 
     // we try to update the outline from the preceding scene, but if the corresponding
     // object is not there, we'll remove the outline

From 09d9370a2d85dba15414b9faf432ae478ac9a039 Mon Sep 17 00:00:00 2001
From: orioncohen <orion@lbl.gov>
Date: Mon, 23 May 2022 15:32:22 -0700
Subject: [PATCH 10/21] added tiling and maxTiling props that are passed to the
 Scene constructor

---
 .../CrystalToolkitScene/CrystalToolkitScene.tsx             | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/crystal-toolkit/CrystalToolkitScene/CrystalToolkitScene.tsx b/src/components/crystal-toolkit/CrystalToolkitScene/CrystalToolkitScene.tsx
index c29bd25d..a70a1b96 100644
--- a/src/components/crystal-toolkit/CrystalToolkitScene/CrystalToolkitScene.tsx
+++ b/src/components/crystal-toolkit/CrystalToolkitScene/CrystalToolkitScene.tsx
@@ -64,7 +64,6 @@ interface Props {
    * in crystal_toolkit.core.scene and its to_json method.
    */
   data: any;
-
   /**
    * Options used for generating scene.
    * Supported options and their defaults are given as follows:
@@ -91,6 +90,9 @@ interface Props {
    */
   toggleVisibility?: any;
 
+  tiling?: number;
+  maxTiling?: number;
+
   /**
    * Set to trigger a screenshot or scene download.
    * Must be an object with the following structure:
@@ -274,6 +276,8 @@ export const CrystalToolkitScene: React.FC<Props> = ({
       props.settings,
       props.inletSize,
       props.inletPadding,
+      props.tiling,
+      props.maxTiling,
       (objects) => {
         if (props.onObjectClicked) {
           props.onObjectClicked(objects);

From cbcf49a66eb1edaa5092a7a8c250396f667f063f Mon Sep 17 00:00:00 2001
From: orioncohen <orion@lbl.gov>
Date: Mon, 23 May 2022 15:33:02 -0700
Subject: [PATCH 11/21] added sliders to control tiling prop that is passed to
 the CrystalToolkitScene component.

---
 .../PhononVisualization.tsx                   | 50 ++++++++++++++++++-
 1 file changed, 49 insertions(+), 1 deletion(-)

diff --git a/src/pages/PhononVisualization/PhononVisualization.tsx b/src/pages/PhononVisualization/PhononVisualization.tsx
index 2bc71df7..cfc5e67c 100644
--- a/src/pages/PhononVisualization/PhononVisualization.tsx
+++ b/src/pages/PhononVisualization/PhononVisualization.tsx
@@ -17,6 +17,7 @@ import { ScenePosition } from '../../components/crystal-toolkit/scene/inset-help
 import { CameraState } from '../../components/crystal-toolkit/CameraContextProvider/camera-reducer';
 import * as THREE from 'three';
 import { Camera } from 'three';
+import SimpleSlider from '../../components/crystal-toolkit/scene/animation-slider';
 import { useRef } from 'react';
 
 export const PhononVisualization: React.FC = () => {
@@ -26,8 +27,14 @@ export const PhononVisualization: React.FC = () => {
 
   const [value, setValue] = useState<any>('test');
 
+  const [tilingX, setTilingX] = useState<any>(2);
+  const [tilingY, setTilingY] = useState<any>(1);
+  const [tilingZ, setTilingZ] = useState<any>(0);
+  const maxTiling: number = 3;
+
   return (
     <div>
+      {/*perhaps add tiling variable to CrystalToolkitScene*/}
       <CrystalToolkitScene
         settings={{
           renderer: Renderer.WEBGL,
@@ -35,10 +42,51 @@ export const PhononVisualization: React.FC = () => {
           zoomToFit2D: true
         }}
         data={crystalScene}
+        tiling={[tilingX, tilingY, tilingZ]}
+        maxTiling={maxTiling}
         sceneSize="100%"
-        debug={false}
+        debug={true}
         toggleVisibility={{}}
       />
+      {/* X slider*/}
+      <SimpleSlider
+        onUpdate={(a) => {
+          if (a != tilingX) {
+            setTilingX(a);
+          }
+        }}
+        onChange={(a) => {
+          console.log(a);
+        }}
+        domain={[0, maxTiling]}
+        values={[tilingX]}
+      />
+      {/* Y slider*/}
+      <SimpleSlider
+        onUpdate={(a) => {
+          if (a != tilingX) {
+            setTilingY(a);
+          }
+        }}
+        onChange={(a) => {
+          console.log(a);
+        }}
+        domain={[0, maxTiling]}
+        values={[tilingY]}
+      />
+      {/* Z slider */}
+      <SimpleSlider
+        onUpdate={(a) => {
+          if (a != tilingX) {
+            setTilingZ(a);
+          }
+        }}
+        onChange={(a) => {
+          console.log(a);
+        }}
+        domain={[0, maxTiling]}
+        values={[tilingZ]}
+      />
     </div>
   );
 };

From b80ac9480a35bc594d0cf7fec5fec8634c60c028 Mon Sep 17 00:00:00 2001
From: orioncohen <orion@lbl.gov>
Date: Mon, 23 May 2022 18:35:33 -0700
Subject: [PATCH 12/21] added new slider and commented out old slider

---
 .../PhononVisualization.tsx                   | 80 ++++++++++---------
 1 file changed, 44 insertions(+), 36 deletions(-)

diff --git a/src/pages/PhononVisualization/PhononVisualization.tsx b/src/pages/PhononVisualization/PhononVisualization.tsx
index cfc5e67c..ac9cbd8d 100644
--- a/src/pages/PhononVisualization/PhononVisualization.tsx
+++ b/src/pages/PhononVisualization/PhononVisualization.tsx
@@ -17,7 +17,8 @@ import { ScenePosition } from '../../components/crystal-toolkit/scene/inset-help
 import { CameraState } from '../../components/crystal-toolkit/CameraContextProvider/camera-reducer';
 import * as THREE from 'three';
 import { Camera } from 'three';
-import SimpleSlider from '../../components/crystal-toolkit/scene/animation-slider';
+// import SimpleSlider from '../../components/crystal-toolkit/scene/animation-slider';
+import { RangeSlider } from '../../components/data-entry/RangeSlider';
 import { useRef } from 'react';
 
 export const PhononVisualization: React.FC = () => {
@@ -49,44 +50,51 @@ export const PhononVisualization: React.FC = () => {
         toggleVisibility={{}}
       />
       {/* X slider*/}
-      <SimpleSlider
-        onUpdate={(a) => {
-          if (a != tilingX) {
-            setTilingX(a);
-          }
-        }}
-        onChange={(a) => {
-          console.log(a);
-        }}
+      <RangeSlider
         domain={[0, maxTiling]}
-        values={[tilingX]}
-      />
-      {/* Y slider*/}
-      <SimpleSlider
-        onUpdate={(a) => {
-          if (a != tilingX) {
-            setTilingY(a);
-          }
+        onChange={(values) => {
+          setTilingX(values[0]);
+          console.log(values);
         }}
-        onChange={(a) => {
-          console.log(a);
-        }}
-        domain={[0, maxTiling]}
-        values={[tilingY]}
-      />
-      {/* Z slider */}
-      <SimpleSlider
-        onUpdate={(a) => {
-          if (a != tilingX) {
-            setTilingZ(a);
-          }
-        }}
-        onChange={(a) => {
-          console.log(a);
-        }}
-        domain={[0, maxTiling]}
-        values={[tilingZ]}
       />
+      {/*<SimpleSlider*/}
+      {/*  onUpdate={(a) => {*/}
+      {/*    if (a != tilingX) {*/}
+      {/*      setTilingX(a);*/}
+      {/*    }*/}
+      {/*  }}*/}
+      {/*  onChange={(a) => {*/}
+      {/*    console.log(a);*/}
+      {/*  }}*/}
+      {/*  domain={[0, maxTiling]}*/}
+      {/*  values={[tilingX]}*/}
+      {/*/>*/}
+      {/*/!* Y slider*!/*/}
+      {/*<SimpleSlider*/}
+      {/*  onUpdate={(a) => {*/}
+      {/*    if (a != tilingX) {*/}
+      {/*      setTilingY(a);*/}
+      {/*    }*/}
+      {/*  }}*/}
+      {/*  onChange={(a) => {*/}
+      {/*    console.log(a);*/}
+      {/*  }}*/}
+      {/*  domain={[0, maxTiling]}*/}
+      {/*  values={[tilingY]}*/}
+      {/*/>*/}
+      {/*/!* Z slider *!/*/}
+      {/*<SimpleSlider*/}
+      {/*  onUpdate={(a) => {*/}
+      {/*    if (a != tilingX) {*/}
+      {/*      setTilingZ(a);*/}
+      {/*    }*/}
+      {/*  }}*/}
+      {/*  onChange={(a) => {*/}
+      {/*    console.log(a);*/}
+      {/*  }}*/}
+      {/*  domain={[0, maxTiling]}*/}
+      {/*  values={[tilingZ]}*/}
+      {/*/>*/}
     </div>
   );
 };

From e5a18eed428684a94a97235086b115313f2e9c66 Mon Sep 17 00:00:00 2001
From: orioncohen <orion@lbl.gov>
Date: Tue, 24 May 2022 12:55:52 -0700
Subject: [PATCH 13/21] remove line from .babelrc to fix build error

---
 .babelrc | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/.babelrc b/.babelrc
index 940d8bdc..8a7d81a8 100644
--- a/.babelrc
+++ b/.babelrc
@@ -2,7 +2,6 @@
   "presets": ["@babel/preset-env", "@babel/preset-react", "@babel/preset-typescript"],
   "plugins": [
     "@babel/transform-runtime",
-    "@babel/plugin-proposal-nullish-coalescing-operator",
     "@babel/plugin-proposal-optional-chaining"
   ]
-}
\ No newline at end of file
+}

From 22a6971304f0e1ba5ca8c86143684f0dd92da690 Mon Sep 17 00:00:00 2001
From: orioncohen <orion@lbl.gov>
Date: Mon, 20 Jun 2022 20:11:33 -0700
Subject: [PATCH 14/21] a basic React component for the phonon visualization

---
 .../PhononVisualization.tsx                   | 62 +++++++------------
 1 file changed, 21 insertions(+), 41 deletions(-)

diff --git a/src/pages/PhononVisualization/PhononVisualization.tsx b/src/pages/PhononVisualization/PhononVisualization.tsx
index ac9cbd8d..04775f7d 100644
--- a/src/pages/PhononVisualization/PhononVisualization.tsx
+++ b/src/pages/PhononVisualization/PhononVisualization.tsx
@@ -43,58 +43,38 @@ export const PhononVisualization: React.FC = () => {
           zoomToFit2D: true
         }}
         data={crystalScene}
-        tiling={[tilingX, tilingY, tilingZ]}
+        tiling={[tilingX, tilingY, tilingZ]} // TODO: does this need to be broken up?
         maxTiling={maxTiling}
         sceneSize="100%"
-        debug={true}
+        debug={false}
         toggleVisibility={{}}
       />
+      {/* TODO: consider creating triple slider component*/}
       {/* X slider*/}
       <RangeSlider
-        domain={[0, maxTiling]}
+        domain={[0, maxTiling || 1]}
+        value={tilingX}
         onChange={(values) => {
           setTilingX(values[0]);
           console.log(values);
         }}
       />
-      {/*<SimpleSlider*/}
-      {/*  onUpdate={(a) => {*/}
-      {/*    if (a != tilingX) {*/}
-      {/*      setTilingX(a);*/}
-      {/*    }*/}
-      {/*  }}*/}
-      {/*  onChange={(a) => {*/}
-      {/*    console.log(a);*/}
-      {/*  }}*/}
-      {/*  domain={[0, maxTiling]}*/}
-      {/*  values={[tilingX]}*/}
-      {/*/>*/}
-      {/*/!* Y slider*!/*/}
-      {/*<SimpleSlider*/}
-      {/*  onUpdate={(a) => {*/}
-      {/*    if (a != tilingX) {*/}
-      {/*      setTilingY(a);*/}
-      {/*    }*/}
-      {/*  }}*/}
-      {/*  onChange={(a) => {*/}
-      {/*    console.log(a);*/}
-      {/*  }}*/}
-      {/*  domain={[0, maxTiling]}*/}
-      {/*  values={[tilingY]}*/}
-      {/*/>*/}
-      {/*/!* Z slider *!/*/}
-      {/*<SimpleSlider*/}
-      {/*  onUpdate={(a) => {*/}
-      {/*    if (a != tilingX) {*/}
-      {/*      setTilingZ(a);*/}
-      {/*    }*/}
-      {/*  }}*/}
-      {/*  onChange={(a) => {*/}
-      {/*    console.log(a);*/}
-      {/*  }}*/}
-      {/*  domain={[0, maxTiling]}*/}
-      {/*  values={[tilingZ]}*/}
-      {/*/>*/}
+      <RangeSlider
+        domain={[0, maxTiling || 1]}
+        value={tilingY}
+        onChange={(values) => {
+          setTilingY(values[0]);
+          console.log(values);
+        }}
+      />
+      <RangeSlider
+        domain={[0, maxTiling || 1]}
+        value={tilingZ}
+        onChange={(values) => {
+          setTilingZ(values[0]);
+          console.log(values);
+        }}
+      />
     </div>
   );
 };

From a71a5713575e45d7e388e063253ac5dd88f4e5fe Mon Sep 17 00:00:00 2001
From: orioncohen <orion@lbl.gov>
Date: Mon, 20 Jun 2022 20:12:26 -0700
Subject: [PATCH 15/21] a functioning non-reponsive tiling implementation

---
 src/components/crystal-toolkit/scene/Scene.ts | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/crystal-toolkit/scene/Scene.ts b/src/components/crystal-toolkit/scene/Scene.ts
index 4dd02ba9..2085ea34 100644
--- a/src/components/crystal-toolkit/scene/Scene.ts
+++ b/src/components/crystal-toolkit/scene/Scene.ts
@@ -658,6 +658,8 @@ export default class Scene {
       });
     };
 
+    const updateMaxTiling = () => {};
+
     // TODO: does it make sense to split this code into two cases?
     // set up the threeObjects and containers
     let arrayOfTileRoots: number[][][][];
@@ -671,11 +673,12 @@ export default class Scene {
       arrayOfTileRoots = _getEmptyTilesArray(maxTilingArray);
       traverseTiles(sceneJson, rootObject, tiles, arrayOfTileRoots);
       updateTiles(arrayOfTileRoots, this.tiling);
+      console.log(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
 
     // for demonstration purposes TODO: remove next two lines
     // arrayOfTileRoots[1][1][1][0].visible = false;

From 1bd86f0b0715b2cac9904ea40e79841406fbe6ab Mon Sep 17 00:00:00 2001
From: orioncohen <orion@lbl.gov>
Date: Mon, 20 Jun 2022 20:40:08 -0700
Subject: [PATCH 16/21] turn updateTiles and arrayOfTileRoots into a method and
 property instead of consts

---
 .../CrystalToolkitScene/CrystalToolkitScene.tsx              | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/crystal-toolkit/CrystalToolkitScene/CrystalToolkitScene.tsx b/src/components/crystal-toolkit/CrystalToolkitScene/CrystalToolkitScene.tsx
index 9f11bd71..32e8a3df 100644
--- a/src/components/crystal-toolkit/CrystalToolkitScene/CrystalToolkitScene.tsx
+++ b/src/components/crystal-toolkit/CrystalToolkitScene/CrystalToolkitScene.tsx
@@ -110,7 +110,7 @@ export interface CrystalToolkitSceneProps {
   /**
    * the dynamic tiling, to be updated in scene.
    */
-  tiling?: number;
+  tiling?: number[];
   /**
    * the maximum size of the tiling, controls render size
    */
@@ -418,6 +418,9 @@ export const CrystalToolkitScene: React.FC<CrystalToolkitSceneProps> = ({
     () => scene.current!.updateInsetSettings(props.inletSize!, props.inletPadding!, props.axisView),
     [props.inletSize, props.inletPadding, props.axisView]
   );
+  useEffect(() => {
+    scene.current!.updateTiles(props.tiling);
+  }, [props.tiling]);
 
   useEffect(() => {
     scene.current!.resizeRendererToDisplaySize();

From f68bfc1885ffd7cb92cfcd81c81de5b0fe6a376f Mon Sep 17 00:00:00 2001
From: orioncohen <orion@lbl.gov>
Date: Mon, 20 Jun 2022 20:41:28 -0700
Subject: [PATCH 17/21] interactive tiling is now complete

---
 src/components/crystal-toolkit/scene/Scene.ts | 123 +++++++++---------
 1 file changed, 60 insertions(+), 63 deletions(-)

diff --git a/src/components/crystal-toolkit/scene/Scene.ts b/src/components/crystal-toolkit/scene/Scene.ts
index 2085ea34..a73a24e5 100644
--- a/src/components/crystal-toolkit/scene/Scene.ts
+++ b/src/components/crystal-toolkit/scene/Scene.ts
@@ -71,6 +71,7 @@ export default class Scene {
   private animationHelper: AnimationHelper;
   private tiling: any;
   private maxTiling: any;
+  private arrayOfTileRoots: any;
 
   private cacheMountBBox(mountNode: Element) {
     this.cachedMountNodeSize = { width: mountNode.clientWidth, height: mountNode.clientHeight };
@@ -110,6 +111,36 @@ export default class Scene {
     mountNode.appendChild(this.renderer.domElement);
   }
 
+  /*
+  this function returns a 3-dimensional empty array based on the tiling array
+  e.g. _getTiles([1, 1, 1] === [ [ [[], []], [[], []] ], [ [[], []], [[], []] ] ]
+  all of the arrays are unique instances, not copies
+  this allows us to create an array that can store the contents of each tiles and
+  be accessed with the tile indices. For example:
+  arr = _getTiles([2, 2, 2])
+  arr[0][1][2].push(scene)
+  scene = arr[0][1][2][0]
+ */
+  private static getEmptyTilesArray(tiling: number[]) {
+    let grid = [];
+    for (let x = 0; x <= tiling[2]; x++) {
+      let arrX = [];
+      for (let y = 0; y <= tiling[1]; y++) {
+        let arrY = [];
+        for (let z = 0; z <= tiling[0]; z++) {
+          let arrZ = [];
+          // @ts-ignore
+          arrY.push(arrZ);
+        }
+        // @ts-ignore
+        arrX.push(arrY);
+      }
+      // @ts-ignore
+      grid.push(arrX);
+    }
+    return grid;
+  }
+
   private configureLabelRenderer(mountNode: Element) {
     const labelRenderer = new CSS2DRenderer();
     this.labelRenderer = labelRenderer;
@@ -374,7 +405,11 @@ export default class Scene {
   ) {
     this.tiling = tiling;
     this.maxTiling = maxTiling;
-
+    this.arrayOfTileRoots = Scene.getEmptyTilesArray([
+      this.maxTiling,
+      this.maxTiling,
+      this.maxTiling
+    ]);
     this.settings = Object.assign(defaults, settings);
     this.objectBuilder = new ThreeBuilder(this.settings);
     this.cameraState = cameraState;
@@ -412,6 +447,23 @@ export default class Scene {
     this.renderInlet();
   }
 
+  /*
+    loop through the arrayOfTileRoots and set the visibility of each object.
+    In particular, set threeObject.visible = true if the x, y, and z indices
+    are all less than the x, y, and z indices in tiling.
+   */
+  updateTiles(tiling) {
+    const [xCut, yCut, zCut] = tiling;
+    this.arrayOfTileRoots.forEach((arrX, x) => {
+      arrX.forEach((arrY, y) => {
+        arrY.forEach((arrZ, z) => {
+          arrZ[0].visible = x <= xCut && y <= yCut && z <= zCut;
+        });
+      });
+    });
+    this.renderScene();
+  }
+
   public resizeRendererToDisplaySize() {
     const canvas = this.renderer.domElement as HTMLCanvasElement;
     this.cacheMountBBox(canvas.parentElement as Element);
@@ -512,36 +564,6 @@ export default class Scene {
       return tiles;
     };
 
-    /*
-      this function returns a 3-dimensional empty array based on the tiling array
-      e.g. _getTiles([1, 1, 1] === [ [ [[], []], [[], []] ], [ [[], []], [[], []] ] ]
-      all of the arrays are unique instances, not copies
-      this allows us to create an array that can store the contents of each tiles and
-      be accessed with the tile indices. For example:
-      arr = _getTiles([2, 2, 2])
-      arr[0][1][2].push(scene)
-      scene = arr[0][1][2][0]
-     */
-    const _getEmptyTilesArray = (tiling: number[]) => {
-      let grid = [];
-      for (let x = 0; x <= tiling[2]; x++) {
-        let arrX = [];
-        for (let y = 0; y <= tiling[1]; y++) {
-          let arrY = [];
-          for (let z = 0; z <= tiling[0]; z++) {
-            let arrZ = [];
-            // @ts-ignore
-            arrY.push(arrZ);
-          }
-          // @ts-ignore
-          arrX.push(arrY);
-        }
-        // @ts-ignore
-        grid.push(arrX);
-      }
-      return grid;
-    };
-
     const emptyLattice = [
       [0, 0, 0],
       [0, 0, 0],
@@ -557,8 +579,8 @@ export default class Scene {
     const traverseTiles = (
       o: SceneJsonObject,
       root: THREE.Object3D,
-      tiles: number[][],
-      arrayOfTileRoots: number[][][][]
+      tiles: number[][]
+      // arrayOfTileRoots: number[][][][]
     ) => {
       // @ts-ignore
       let lattice = o.lattice ? o.lattice : emptyLattice;
@@ -567,10 +589,10 @@ export default class Scene {
         const tileRootObject = new THREE.Object3D();
         tileRootObject.name = sceneJson.name!;
         sceneJson.visible && (tileRootObject.visible = sceneJson.visible);
-
+        console.log(this.arrayOfTileRoots);
         root.add(tileRootObject);
         const [x, y, z] = tile;
-        arrayOfTileRoots[x][y][z].push(tileRootObject);
+        this.arrayOfTileRoots[x][y][z].push(tileRootObject);
 
         let tileOffsets: number[][] = lattice.map((vector: number[], index: number) => {
           return vector.map((x: number) => x * tile[index]);
@@ -642,27 +664,8 @@ export default class Scene {
       });
     };
 
-    /*
-      loop through the arrayOfTileRoots and set the visibility of each object.
-      In particular, set threeObject.visible = true if the x, y, and z indices
-      are all less than the x, y, and z indices in tiling.
-     */
-    const updateTiles = (arrayOfTileRoots, tiling) => {
-      const [xCut, yCut, zCut] = tiling;
-      arrayOfTileRoots.forEach((arrX, x) => {
-        arrX.forEach((arrY, y) => {
-          arrY.forEach((arrZ, z) => {
-            arrZ[0].visible = x <= xCut && y <= yCut && z <= zCut;
-          });
-        });
-      });
-    };
-
-    const updateMaxTiling = () => {};
-
     // TODO: does it make sense to split this code into two cases?
     // set up the threeObjects and containers
-    let arrayOfTileRoots: number[][][][];
     const rootObject = new THREE.Object3D();
     if (this.maxTiling > 0) {
       // if needed, create a parent for all Scene objects
@@ -670,22 +673,16 @@ export default class Scene {
       rootObject.visible = true;
       const maxTilingArray = [this.maxTiling, this.maxTiling, this.maxTiling];
       let tiles = _getTiles(maxTilingArray);
-      arrayOfTileRoots = _getEmptyTilesArray(maxTilingArray);
-      traverseTiles(sceneJson, rootObject, tiles, arrayOfTileRoots);
-      updateTiles(arrayOfTileRoots, this.tiling);
-      console.log(arrayOfTileRoots);
+      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
 
-    // for demonstration purposes TODO: remove next two lines
-    // arrayOfTileRoots[1][1][1][0].visible = false;
-    // arrayOfTileRoots[0][0][0][0].visible = false;
-
     // can cause memory leak
-    //console.log('rootObject', rootObject, rootObject);
     this.scene.add(rootObject);
     this.setupCamera(rootObject); // TODO: this could introduce issues if the new root is not compatible
 

From 23c308232e9df503298639859128c9d6abdf509d Mon Sep 17 00:00:00 2001
From: orioncohen <orion@lbl.gov>
Date: Tue, 21 Jun 2022 15:25:14 -0700
Subject: [PATCH 18/21] removal of TODOs and unnecesary variables

---
 src/components/crystal-toolkit/scene/Scene.ts | 49 ++-----------------
 1 file changed, 3 insertions(+), 46 deletions(-)

diff --git a/src/components/crystal-toolkit/scene/Scene.ts b/src/components/crystal-toolkit/scene/Scene.ts
index a73a24e5..a62570ef 100644
--- a/src/components/crystal-toolkit/scene/Scene.ts
+++ b/src/components/crystal-toolkit/scene/Scene.ts
@@ -32,7 +32,6 @@ import '../CrystalToolkitScene/CrystalToolkitScene.less';
 import { CameraState } from '../CameraContextProvider/camera-reducer';
 
 const POINTER_CLASS = 'show-pointer';
-let D;
 export default class Scene {
   private settings;
   private renderer!: THREE.WebGLRenderer | SVGRenderer;
@@ -153,8 +152,6 @@ export default class Scene {
     mountNode.appendChild(labelRenderer.domElement);
   }
 
-  componentDidUpdate = () => {};
-
   mouseMoveListener = (e) => {
     if (this.renderer instanceof WebGLRenderer || true) {
       // tooltips
@@ -397,7 +394,7 @@ export default class Scene {
     size,
     padding,
     tiling,
-    maxTiling, // TODO
+    maxTiling,
     clickCallback,
     private dispatch: (p: Vector3, r: Quaternion, zoom: number) => void,
     private debugDOMElement?,
@@ -508,45 +505,6 @@ export default class Scene {
 
     const objectToAnimate = new Set<string>();
 
-    // this is now defunct and should be removed, only included for comparison
-    // TODO: remove traverse_scene
-    const traverse_scene = (o: SceneJsonObject, parent: THREE.Object3D, currentId: string) => {
-      o.contents!.forEach((childObject, idx) => {
-        if (childObject.type) {
-          // if object can be made into a ThreeObject, add to scene and end recursion
-          const object = this.makeObject(childObject);
-          parent.add(object);
-          this.threeUUIDTojsonObject[object.uuid] = childObject;
-          this.computeIdToThree[`${currentId}--${idx}`] = object;
-          childObject.id = `${currentId}--${idx}`;
-          if (childObject.animate) {
-            objectToAnimate.add(`${currentId}--${idx}`);
-          }
-        } else {
-          // if object cannot be made into a ThreeObject, add empty child scene,
-          // set origin, and recurse
-          const threeObject = new THREE.Object3D();
-          threeObject.name = childObject.name!;
-          this.computeIdToThree[`${currentId}--${threeObject.name}`] = threeObject;
-          childObject.id = `${currentId}--${threeObject.name}`;
-          threeObject.visible = childObject.visible === undefined ? true : !!childObject.visible;
-          if (childObject.origin) {
-            const translation = new THREE.Matrix4();
-            // note(chab) have a typedefinition for the JSON
-            translation.makeTranslation(...(childObject.origin as ThreePosition));
-            threeObject.applyMatrix4(translation);
-          }
-          if (!this.settings.extractAxis || threeObject.name !== 'axes') {
-            parent.add(threeObject);
-          }
-          traverse_scene(childObject, threeObject, `${currentId}--${threeObject.name}`);
-          if (threeObject.name === 'axes') {
-            this.axis = threeObject.clone();
-            this.axisJson = { ...childObject };
-          }
-        }
-      });
-    };
     /*
       this function returns an array of tiles based on the tiling array
       e.g. _getTiles([0, 1, 1] === [[0,0,0], [0,0,1], [0,1,1], [0,1,0]]
@@ -589,7 +547,6 @@ export default class Scene {
         const tileRootObject = new THREE.Object3D();
         tileRootObject.name = sceneJson.name!;
         sceneJson.visible && (tileRootObject.visible = sceneJson.visible);
-        console.log(this.arrayOfTileRoots);
         root.add(tileRootObject);
         const [x, y, z] = tile;
         this.arrayOfTileRoots[x][y][z].push(tileRootObject);
@@ -664,7 +621,7 @@ export default class Scene {
       });
     };
 
-    // TODO: does it make sense to split this code into two cases?
+    // 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) {
@@ -684,7 +641,7 @@ export default class Scene {
 
     // can cause memory leak
     this.scene.add(rootObject);
-    this.setupCamera(rootObject); // TODO: this could introduce issues if the new root is not compatible
+    this.setupCamera(rootObject);
 
     // we try to update the outline from the preceding scene, but if the corresponding
     // object is not there, we'll remove the outline

From 8925f75eb08aa5e2ac491412268a4f14e85f622e Mon Sep 17 00:00:00 2001
From: orioncohen <orion@lbl.gov>
Date: Mon, 19 Sep 2022 14:15:24 -0700
Subject: [PATCH 19/21] add documentation and rename to tiling visualization

---
 src/app.tsx                                   | 10 +--
 src/components/crystal-toolkit/scene/Scene.ts | 34 ++++----
 .../PhononVisualization.tsx                   | 80 -------------------
 src/pages/PhononVisualization/index.tsx       |  1 -
 .../TilingVisualization.tsx                   | 68 ++++++++++++++++
 src/pages/TilingVisualization/index.tsx       |  1 +
 6 files changed, 88 insertions(+), 106 deletions(-)
 delete mode 100644 src/pages/PhononVisualization/PhononVisualization.tsx
 delete mode 100644 src/pages/PhononVisualization/index.tsx
 create mode 100644 src/pages/TilingVisualization/TilingVisualization.tsx
 create mode 100644 src/pages/TilingVisualization/index.tsx

diff --git a/src/app.tsx b/src/app.tsx
index 1e4bc4a1..f98a647a 100644
--- a/src/app.tsx
+++ b/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 />
diff --git a/src/components/crystal-toolkit/scene/Scene.ts b/src/components/crystal-toolkit/scene/Scene.ts
index a62570ef..2e98f44b 100644
--- a/src/components/crystal-toolkit/scene/Scene.ts
+++ b/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);
diff --git a/src/pages/PhononVisualization/PhononVisualization.tsx b/src/pages/PhononVisualization/PhononVisualization.tsx
deleted file mode 100644
index 04775f7d..00000000
--- a/src/pages/PhononVisualization/PhononVisualization.tsx
+++ /dev/null
@@ -1,80 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import { scene, scene2 } from '../../components/crystal-toolkit/scene/mike';
-import {
-  s2,
-  s3,
-  s4,
-  s5,
-  shperes,
-  crystalScene
-} from '../../components/crystal-toolkit/scene/simple-scene';
-import { CameraContextProvider } from '../../components/crystal-toolkit/CameraContextProvider';
-import { AnimationStyle, Renderer } from '../../components/crystal-toolkit/scene/constants';
-import { CrystalToolkitScene } from '../../components/crystal-toolkit/CrystalToolkitScene/CrystalToolkitScene';
-import { ExportType } from '../../components/crystal-toolkit/scene/constants';
-import { Download } from '../../components/crystal-toolkit/Download';
-import { ScenePosition } from '../../components/crystal-toolkit/scene/inset-helper';
-import { CameraState } from '../../components/crystal-toolkit/CameraContextProvider/camera-reducer';
-import * as THREE from 'three';
-import { Camera } from 'three';
-// import SimpleSlider from '../../components/crystal-toolkit/scene/animation-slider';
-import { RangeSlider } from '../../components/data-entry/RangeSlider';
-import { useRef } from 'react';
-
-export const PhononVisualization: React.FC = () => {
-  const [dataInput, setDataInput] = useState<any>();
-  const [structureContainerWidth, setStructureContainerWidth] = useState('100%');
-  const structureContainer = useRef(null);
-
-  const [value, setValue] = useState<any>('test');
-
-  const [tilingX, setTilingX] = useState<any>(2);
-  const [tilingY, setTilingY] = useState<any>(1);
-  const [tilingZ, setTilingZ] = useState<any>(0);
-  const maxTiling: number = 3;
-
-  return (
-    <div>
-      {/*perhaps add tiling variable to CrystalToolkitScene*/}
-      <CrystalToolkitScene
-        settings={{
-          renderer: Renderer.WEBGL,
-          extractAxis: false,
-          zoomToFit2D: true
-        }}
-        data={crystalScene}
-        tiling={[tilingX, tilingY, tilingZ]} // TODO: does this need to be broken up?
-        maxTiling={maxTiling}
-        sceneSize="100%"
-        debug={false}
-        toggleVisibility={{}}
-      />
-      {/* TODO: consider creating triple slider component*/}
-      {/* X slider*/}
-      <RangeSlider
-        domain={[0, maxTiling || 1]}
-        value={tilingX}
-        onChange={(values) => {
-          setTilingX(values[0]);
-          console.log(values);
-        }}
-      />
-      <RangeSlider
-        domain={[0, maxTiling || 1]}
-        value={tilingY}
-        onChange={(values) => {
-          setTilingY(values[0]);
-          console.log(values);
-        }}
-      />
-      <RangeSlider
-        domain={[0, maxTiling || 1]}
-        value={tilingZ}
-        onChange={(values) => {
-          setTilingZ(values[0]);
-          console.log(values);
-        }}
-      />
-    </div>
-  );
-};
diff --git a/src/pages/PhononVisualization/index.tsx b/src/pages/PhononVisualization/index.tsx
deleted file mode 100644
index 746b2a1a..00000000
--- a/src/pages/PhononVisualization/index.tsx
+++ /dev/null
@@ -1 +0,0 @@
-export { PhononVisualization } from './PhononVisualization';
diff --git a/src/pages/TilingVisualization/TilingVisualization.tsx b/src/pages/TilingVisualization/TilingVisualization.tsx
new file mode 100644
index 00000000..05e4f545
--- /dev/null
+++ b/src/pages/TilingVisualization/TilingVisualization.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>
+  );
+};
diff --git a/src/pages/TilingVisualization/index.tsx b/src/pages/TilingVisualization/index.tsx
new file mode 100644
index 00000000..20249c42
--- /dev/null
+++ b/src/pages/TilingVisualization/index.tsx
@@ -0,0 +1 @@
+export { TilingVisualization } from './TilingVisualization';

From 7a01e7d8d8ffa464b5e9969698be51a9aae85e66 Mon Sep 17 00:00:00 2001
From: orioncohen <orion@lbl.gov>
Date: Mon, 19 Sep 2022 14:17:05 -0700
Subject: [PATCH 20/21] remove unused old code

---
 src/components/crystal-toolkit/scene/Scene.ts | 13 +++++--------
 1 file changed, 5 insertions(+), 8 deletions(-)

diff --git a/src/components/crystal-toolkit/scene/Scene.ts b/src/components/crystal-toolkit/scene/Scene.ts
index 2e98f44b..5449a3fb 100644
--- a/src/components/crystal-toolkit/scene/Scene.ts
+++ b/src/components/crystal-toolkit/scene/Scene.ts
@@ -616,22 +616,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
+
+    // set up the threeObjects and containers
     rootObject.name = 'root';
     rootObject.visible = true;
     const maxTilingArray = [this.maxTiling, this.maxTiling, this.maxTiling];
+    // get list of tiles needed
     let tiles = _getTiles(maxTilingArray);
+    // render all tiles
     traverseTiles(sceneJson, rootObject, tiles);
+    // hide/show tiles as appropriate
     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);

From bae73d37bb0766e824b6be6c9f313a59db8ca421 Mon Sep 17 00:00:00 2001
From: orioncohen <orion@lbl.gov>
Date: Mon, 19 Sep 2022 14:26:08 -0700
Subject: [PATCH 21/21] bunch package dependencies

---
 package-lock.json | 68 +++++++++++++++++++++++++++++++++++++++++++++++
 package.json      |  3 ++-
 2 files changed, 70 insertions(+), 1 deletion(-)

diff --git a/package-lock.json b/package-lock.json
index 4fc263cf..37e1750b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -28,6 +28,7 @@
         "react": "^16.14.0",
         "react-aria-menubutton": "^7.0.1",
         "react-collapsible": "^2.8.3",
+        "react-compound-slider": "^3.4.0",
         "react-data-table-component": "^6.11.6",
         "react-dom": "^16.14.0",
         "react-graph-vis": "^1.0.5",
@@ -18799,6 +18800,11 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/internmap": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/internmap/-/internmap-1.0.1.tgz",
+      "integrity": "sha512-lDB5YccMydFBtasVtxnZ3MRBHuaoE8GKsppq+EchKL2U4nK/DmEpPHNH8MZe5HkMtpSiTSOZwfN0tzYjO/lJEw=="
+    },
     "node_modules/interpret": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/interpret/-/interpret-2.2.0.tgz",
@@ -27872,6 +27878,27 @@
         "react-dom": ">=16.8.0"
       }
     },
+    "node_modules/react-compound-slider": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/react-compound-slider/-/react-compound-slider-3.4.0.tgz",
+      "integrity": "sha512-KSje/rB0xSvvcb7YV0+82hkiXTV5ljSS7axKrNiXLf9AEO+rrr1Xq4MJWA+6v030YNNo/RoSoEB6D6fnoy+8ng==",
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "d3-array": "^2.8.0",
+        "warning": "^4.0.3"
+      },
+      "peerDependencies": {
+        "react": ">=16.9"
+      }
+    },
+    "node_modules/react-compound-slider/node_modules/d3-array": {
+      "version": "2.12.1",
+      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-2.12.1.tgz",
+      "integrity": "sha512-B0ErZK/66mHtEsR1TkPEEkwdy+WDesimkM5gpZr5Dsg54BiTA5RXtYW5qTLIAcekaS9xfZrzBLF/OAkB3Qn1YQ==",
+      "dependencies": {
+        "internmap": "^1.0.0"
+      }
+    },
     "node_modules/react-data-table-component": {
       "version": "6.11.8",
       "resolved": "https://registry.npmjs.org/react-data-table-component/-/react-data-table-component-6.11.8.tgz",
@@ -33441,6 +33468,14 @@
         "makeerror": "1.0.12"
       }
     },
+    "node_modules/warning": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
+      "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
+      "dependencies": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "node_modules/watchpack": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.3.1.tgz",
@@ -48740,6 +48775,11 @@
         "side-channel": "^1.0.4"
       }
     },
+    "internmap": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/internmap/-/internmap-1.0.1.tgz",
+      "integrity": "sha512-lDB5YccMydFBtasVtxnZ3MRBHuaoE8GKsppq+EchKL2U4nK/DmEpPHNH8MZe5HkMtpSiTSOZwfN0tzYjO/lJEw=="
+    },
     "interpret": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/interpret/-/interpret-2.2.0.tgz",
@@ -55681,6 +55721,26 @@
       "dev": true,
       "requires": {}
     },
+    "react-compound-slider": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/react-compound-slider/-/react-compound-slider-3.4.0.tgz",
+      "integrity": "sha512-KSje/rB0xSvvcb7YV0+82hkiXTV5ljSS7axKrNiXLf9AEO+rrr1Xq4MJWA+6v030YNNo/RoSoEB6D6fnoy+8ng==",
+      "requires": {
+        "@babel/runtime": "^7.12.5",
+        "d3-array": "^2.8.0",
+        "warning": "^4.0.3"
+      },
+      "dependencies": {
+        "d3-array": {
+          "version": "2.12.1",
+          "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-2.12.1.tgz",
+          "integrity": "sha512-B0ErZK/66mHtEsR1TkPEEkwdy+WDesimkM5gpZr5Dsg54BiTA5RXtYW5qTLIAcekaS9xfZrzBLF/OAkB3Qn1YQ==",
+          "requires": {
+            "internmap": "^1.0.0"
+          }
+        }
+      }
+    },
     "react-data-table-component": {
       "version": "6.11.8",
       "resolved": "https://registry.npmjs.org/react-data-table-component/-/react-data-table-component-6.11.8.tgz",
@@ -59997,6 +60057,14 @@
         "makeerror": "1.0.12"
       }
     },
+    "warning": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
+      "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
+      "requires": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "watchpack": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.3.1.tgz",
diff --git a/package.json b/package.json
index ef583390..7ac40583 100644
--- a/package.json
+++ b/package.json
@@ -47,6 +47,7 @@
     "react": "^16.14.0",
     "react-aria-menubutton": "^7.0.1",
     "react-collapsible": "^2.8.3",
+    "react-compound-slider": "^3.4.0",
     "react-data-table-component": "^6.11.6",
     "react-dom": "^16.14.0",
     "react-graph-vis": "^1.0.5",
@@ -100,8 +101,8 @@
     "@types/react": "^17.0.43",
     "@types/react-dom": "^17.0.9",
     "@types/react-responsive": "^8.0.2",
-    "css-loader": "^6.7.1",
     "babel-loader": "^8.2.5",
+    "css-loader": "^6.7.1",
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.5",
     "husky": "^4.3.6",