fix mime type error

app/packages/looker/src/processOverlays.test.ts

@@ -0,0 +1,20 @@
+import { describe, expect, it } from "vitest";
+
+import HeatmapOverlay from "./overlays/heatmap";
+import SegmentationOverlay from "./overlays/segmentation";
+import { filter } from "./processOverlays";
+
+const EMPTY = {
+  id: "",
+  tags: [],
+};
+
+describe("test overlay processing", () => {
+  it("filters heatmap without a map", () => {
+    expect(filter(new HeatmapOverlay("test", EMPTY), {})).toBe(true);
+  });
+
+  it("filters segmentations without a mask", () => {
+    expect(filter(new SegmentationOverlay("test", EMPTY), {})).toBe(true);
+  });
+});

app/packages/looker/src/processOverlays.ts

@@ -2,11 +2,12 @@
  * Copyright 2017-2025, Voxel51, Inc.
  */
 
-import { CONTAINS, Overlay } from "./overlays/base";
+import type { Overlay } from "./overlays/base";
+import { CONTAINS } from "./overlays/base";
 import { ClassificationsOverlay } from "./overlays/classifications";
 import HeatmapOverlay from "./overlays/heatmap";
 import SegmentationOverlay from "./overlays/segmentation";
-import { BaseState } from "./state";
+import type { BaseState } from "./state";
 import { rotate } from "./util";
 
 const processOverlays = <State extends BaseState>(
@@ -30,33 +31,17 @@ const processOverlays = <State extends BaseState>(
       continue;
     }
 
-    if (!(overlay.field && overlay.field in bins)) continue;
-
-    // todo: find a better approach / place for this.
-    // for instance, this won't work in detection overlay, where
-    // we might want the bounding boxes but masks might not have been loaded
-    if (
-      overlay instanceof SegmentationOverlay &&
-      overlay.label.mask_path &&
-      !overlay.label.mask
-    ) {
-      continue;
-    }
-
-    if (
-      overlay instanceof HeatmapOverlay &&
-      overlay.label.map_path &&
-      !overlay.label.map
-    ) {
-      continue;
-    }
-
     if (!overlay.isShown(state)) continue;
 
+    if (filter(overlay, bins)) continue;
+
     bins[overlay.field].push(overlay);
   }
 
-  let ordered = activePaths.reduce((acc, cur) => [...acc, ...bins[cur]], []);
+  let ordered = activePaths.reduce((acc, cur) => {
+    acc.push(...bins[cur]);
+    return acc;
+  }, []);
 
   if (classifications && !state.config.thumbnail) {
     ordered = [classifications, ...ordered];
@@ -97,4 +82,26 @@ const processOverlays = <State extends BaseState>(
   return [[...contained, ...outside], newRotate];
 };
 
+export const filter = <State extends BaseState>(
+  overlay: Overlay<State>,
+  bins: {
+    [k: string]: Overlay<State>[];
+  }
+) => {
+  if (!(overlay.field && overlay.field in bins)) return true;
+
+  // todo: find a better approach / place for this.
+  // for instance, this won't work in detection overlay, where
+  // we might want the bounding boxes but masks might not have been loaded
+  if (overlay instanceof HeatmapOverlay && !overlay.label.map) {
+    return true;
+  }
+
+  if (overlay instanceof SegmentationOverlay && !overlay.label.mask) {
+    return true;
+  }
+
+  return false;
+};
+
 export default processOverlays;

app/packages/looker/src/worker/canvas-decoder.ts

@@ -15,9 +15,11 @@ const canvasAndCtx = (() => {
 const PNG_SIGNATURE = [0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a];
 /**
  * Reads the PNG's image header chunk to determine the color type.
- * Returns the color type if PNG, otherwise undefined.
+ * Returns the color type if valid PNG, otherwise undefined.
  */
-const getPngcolorType = async (blob: Blob): Promise<number | undefined> => {
+const getMaybePngcolorType = async (
+  blob: Blob
+): Promise<number | undefined> => {
   // https://www.w3.org/TR/2003/REC-PNG-20031110/#11IHDR
 
   // PNG signature is 8 bytes
@@ -70,8 +72,9 @@ export const recastBufferToMonoChannel = (
 export const decodeWithCanvas = async (blob: Blob, cls: string) => {
   let channels: number = 4;
 
-  if (blob.type === "image/png") {
-    const colorType = await getPngcolorType(blob);
+  if (blob.type !== "image/jpg" && blob.type !== "image/jpeg") {
+    // note that the following function doesn't rely on MIME type and instead reads the file header
+    const colorType = await getMaybePngcolorType(blob);
     if (colorType !== undefined) {
       // according to PNG specs:
       // 0: Grayscale          => 1 channel