make layers work again

examples/src/app.tsx

@@ -21,10 +21,7 @@ export function App() {
                     path="/omezarr"
                     element={<OmezarrDemo />}
                 />
-                {/* <Route
-                    path="/layers"
-                    element={<LayersDemo />}
-                /> */}
+                <Route path="/layers" />
             </Routes>
         </BrowserRouter>
     );

examples/src/home.tsx

@@ -14,12 +14,10 @@ export function Home() {
                     <a href="/omezarr">OMEZARR</a>
                     <br />
                 </li>
-                {/* layers is not in the AC to be converted to a react component
-                    maybe we'll convert it at some point though so I'll leave this here
-                 <li>
+                <li>
                     <a href="/layers">Layers</a>
                     <br />
-                </li> */}
+                </li>
             </ul>
         </>
     );

examples/src/layers.ts

@@ -29,7 +29,7 @@ import {
 } from './data-sources/scatterplot/dynamic-grid';
 import type { OptionalTransform } from './data-sources/types';
 import type { CacheEntry, AnnotationLayer, Layer } from './types';
-import { AppUi } from './app';
+import { AppUi } from './layers/app';
 import { createRoot } from 'react-dom/client';
 import {
     createZarrSliceGrid,

examples/src/layers/app.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import { SliceViewLayer } from '../ui/slice-ui';
+import type { Demo } from '../layers';
+import { AnnotationGrid } from '../ui/annotation-grid';
+import { ContactSheetUI } from '../ui/contact-sheet';
+import { ScatterplotUI } from '../ui/scatterplot-ui';
+import { Button } from '@czi-sds/components';
+
+export function AppUi(props: { demo: Demo }) {
+    const { demo } = props;
+    return (
+        <div>
+            <Button
+                onClick={() => {
+                    demo.requestSnapshot(3000);
+                }}
+            >
+                {'📷'}
+            </Button>
+            <label>{`Layer ${demo.selectedLayer}`}</label>
+            <Button
+                onClick={() => {
+                    demo.selectLayer(demo.selectedLayer - 1);
+                }}
+            >
+                {'<-'}
+            </Button>
+            <Button
+                onClick={() => {
+                    demo.selectLayer(demo.selectedLayer + 1);
+                }}
+            >
+                {'->'}
+            </Button>
+            <LayerUi demo={demo} />
+        </div>
+    );
+}
+function LayerUi(props: { demo: Demo }) {
+    const { demo } = props;
+    const layer = demo.layers[demo.selectedLayer];
+    if (layer) {
+        switch (layer.type) {
+            case 'annotationGrid':
+                return <AnnotationGrid demo={demo} />;
+            case 'volumeGrid':
+                return <ContactSheetUI demo={demo} />;
+            case 'volumeSlice':
+                return <SliceViewLayer demo={demo} />;
+            case 'scatterplot':
+            case 'scatterplotGrid':
+                return <ScatterplotUI demo={demo} />;
+            default:
+                return null;
+        }
+    }
+    return <SliceViewLayer demo={props.demo} />;
+}