Add static layerName prop to each layer type

Author: manzt

src/layers/grid-layer.ts

@@ -28,21 +28,6 @@ export interface GridLayerProps
   concurrency?: number;
 }
 
-const defaultProps = {
-  // @ts-expect-error - XRLayer props are not typed
-  ...XRLayer.defaultProps,
-  // Special grid props
-  loaders: { type: "array", value: [], compare: true },
-  spacer: { type: "number", value: 5, compare: true },
-  rows: { type: "number", value: 0, compare: true },
-  columns: { type: "number", value: 0, compare: true },
-  concurrency: { type: "number", value: 10, compare: false }, // set concurrency for queue
-  text: { type: "boolean", value: false, compare: true },
-  // Deck.gl
-  onClick: { type: "function", value: null, compare: true },
-  onHover: { type: "function", value: null, compare: true },
-};
-
 function scaleBounds(width: number, height: number, translate = [0, 0], scale = 1) {
   const [left, top] = translate;
   const right = width * scale + left;
@@ -92,6 +77,22 @@ type SharedLayerState = {
 };
 
 class GridLayer extends CompositeLayer<CompositeLayerProps & GridLayerProps> {
+  static layerName = "VizarrGridLayer";
+  static defaultProps = {
+    // @ts-expect-error - XRLayer props are not typed
+    ...XRLayer.defaultProps,
+    // Special grid props
+    loaders: { type: "array", value: [], compare: true },
+    spacer: { type: "number", value: 5, compare: true },
+    rows: { type: "number", value: 0, compare: true },
+    columns: { type: "number", value: 0, compare: true },
+    concurrency: { type: "number", value: 10, compare: false }, // set concurrency for queue
+    text: { type: "boolean", value: false, compare: true },
+    // Deck.gl
+    onClick: { type: "function", value: null, compare: true },
+    onHover: { type: "function", value: null, compare: true },
+  };
+
   get #state(): SharedLayerState {
     // @ts-expect-error - typed as any by deck
     return this.state;
@@ -210,7 +211,4 @@ class GridLayer extends CompositeLayer<CompositeLayerProps & GridLayerProps> {
   }
 }
 
-GridLayer.layerName = "GridLayer";
-GridLayer.defaultProps = defaultProps;
-
 export { GridLayer };

src/layers/label-layer.ts

@@ -36,6 +36,8 @@ type LabelPixelData = {
 };
 
 export class LabelLayer extends TileLayer<LabelPixelData> {
+  static layerName = "VizarrLabelLayer";
+
   constructor(props: LabelLayerProps) {
     const resolutions = props.loader;
     const dimensions = getImageSize(resolutions[0]);
@@ -83,7 +85,7 @@ export class LabelLayer extends TileLayer<LabelPixelData> {
 }
 
 export class GrayscaleBitmapLayer extends BitmapLayer<{ pixelData: LabelPixelData; lut: Float32Array }> {
-  static layerName = "GrayscaleBitmapLayer";
+  static layerName = "VizarrGrayscaleBitmapLayer";
   // @ts-expect-error - only way to extend the base state type
   state!: { texture: Texture } & BitmapLayer["state"];
 

src/layers/viv-layers.ts

@@ -31,6 +31,7 @@ export class MultiscaleImageLayer
   extends BaseMultiscaleImageLayer<string[]>
   implements Layer<MultiscaleImageLayerProps>
 {
+  static layerName = "VizarMultiscaleImageLayer";
   // biome-ignore lint/complexity/noUselessConstructor: Necessary for TypeScript to get the types
   constructor(props: MultiscaleImageLayerProps) {
     // @ts-expect-error - Viv's types are not correct
@@ -44,6 +45,7 @@ export interface ImageLayerProps extends BaseLayerProps {
 
 // @ts-expect-error - Viv does faithfully implement the Layer interface, just not captured in the types
 export class ImageLayer extends BaseImageLayer<string[]> implements Layer<ImageLayerProps> {
+  static layerName = "VizarrImageLayer";
   // biome-ignore lint/complexity/noUselessConstructor: Necessary for TypeScript to get the types
   constructor(props: ImageLayerProps) {
     // @ts-expect-error - Viv's types are not correct

src/state.ts

@@ -170,23 +170,26 @@ const LayerConstructors = {
   image: ImageLayer,
   multiscale: MultiscaleImageLayer,
   grid: GridLayer,
-};
+} as const;
 
 export const layerAtoms = atom((get) => {
   const atoms = get(sourceInfoAtomAtoms);
-  if (atoms.length === 0) return [];
-  const layers = get(waitForAll(atoms.map((a) => layerFamilyAtom(get(a)))));
-  return layers.flatMap((layer) => {
+  if (atoms.length === 0) {
+    return [];
+  }
+  const layersState = get(waitForAll(atoms.map((a) => layerFamilyAtom(get(a)))));
+  return layersState.flatMap((layer) => {
+    if (!layer.on) return [];
     const Layer = LayerConstructors[layer.kind];
     // @ts-expect-error - TS can't resolve that Layer & layerProps bound together
-    let inner: Array<VizarrLayer> = !layer.on ? [] : [new Layer(layer.layerProps)];
-    if (layer.kind === "multiscale" && layer.labels) {
+    const layers: Array<VizarrLayer> = [new Layer(layer.layerProps)];
+    if (layer.kind === "multiscale" && layer.labels?.on) {
       const { layerProps, transformSourceSelection } = layer.labels;
       const selection = transformSourceSelection(layer.layerProps.selections[0]);
       const imageLabelLayers = layerProps.map((props) => new LabelLayer({ ...props, selection }));
       // @ts-expect-error - TS can't resolve that Array<ImageLabelLayer> == Array<Layer<ImageLabelLayerProps>>
-      inner.push(...imageLabelLayers);
+      layers.push(...imageLabelLayers);
     }
-    return inner;
+    return layers;
   });
 });