Add tiling to CrystalToolkitScene

.babelrc

@@ -3,4 +3,4 @@
   "plugins": [
     "@babel/transform-runtime"
   ]
-}
+}

package.json

@@ -44,6 +44,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",

src/app.tsx

@@ -22,6 +22,7 @@ import { Sandbox } from './pages/Sandbox';
 import { SynthesisExplorer } from './pages/SynthesisExplorer';
 import { MPContribsSearch } from './pages/MPContribsSearch';
 import { CatalystExplorer } from './pages/CatalystExplorer';
+import { TilingVisualization } from './pages/TilingVisualization';
 import { Navbar } from './components/navigation/Navbar';
 import periodicTableImage from './assets/images/periodictable.png';
 import { MofExplorer } from './pages/MofExplorer';
@@ -45,6 +46,7 @@ ReactDOM.render(
         <Link to="/phasediagram">Phase Diagram</Link>
         <Link to="/contribs">Contributions</Link>
         <Link to="/crystal">Crystal Structure</Link>
+        <Link to="/tiling">Tiling Visualization</Link>
         <Link to="/sandbox">Sandbox</Link>
       </div>
       <section>
@@ -85,6 +87,9 @@ ReactDOM.render(
           <Route path="/matscholar">
             <MatscholarMaterialsExplorer />
           </Route>
+          <Route path="/tiling">
+            <TilingVisualization />
+          </Route>
           <Route path="/">
             <MaterialsExplorer />
           </Route>

src/components/crystal-toolkit/CrystalToolkitScene/CrystalToolkitScene.tsx

@@ -107,6 +107,14 @@ export interface CrystalToolkitSceneProps {
    */
   settings?: any;
 
+  /**
+   * the dynamic tiling, to be updated in scene.
+   */
+  tiling?: number[];
+  /**
+   * the maximum size of the tiling, controls render size
+   */
+  maxTiling?: number;
   /**
    * Hide/show nodes in scene by its name (key), value is 1 to show the node
    * and 0 to hide it.
@@ -371,6 +379,8 @@ export const CrystalToolkitScene: React.FC<CrystalToolkitSceneProps> = ({
       props.settings,
       props.inletSize,
       props.inletPadding,
+      props.tiling,
+      props.maxTiling,
       (objects) => {
         if (props.onObjectClicked) {
           props.onObjectClicked(objects);
@@ -433,6 +443,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();