Add a manufacturer landing page and open the viewer fitted to a probe's contacts with a per-probe zoom cap

Author: h-mayorquin

apps/probe-viewer/public/logos/README.md

@@ -0,0 +1,19 @@
+# Manufacturer logos
+
+Drop a logo here named `<manufacturer-key>.png` to replace the wordmark on that
+manufacturer's landing-page card. The key is the manufacturer folder name in the
+repo root, e.g.:
+
+- `cambridgeneurotech.png`
+- `diagnosticbiochips.png`
+- `imec.png`
+- `neuronexus.png`
+- `plexon.png`
+- `sinaps-research-platform.png`
+
+If no file is present, the card falls back to a brand-colored wordmark
+(see `ProbeIndex.tsx`). Logos are landscape-friendly (rendered at 16:9, contained
+on a white background).
+
+Only add logos you have the right to use. Manufacturer logos are trademarks;
+they are intentionally not committed here by default.

apps/probe-viewer/public/logos/cambridgeneurotech.png

@@ -463,3 +463,205 @@
     padding: 1rem;
   }
 }
+
+/* ===== Catalog landing page ===== */
+.index {
+  height: 100%;
+  overflow-y: auto;
+  padding: 2rem 2.5rem 3rem;
+}
+
+.index-header {
+  max-width: 1200px;
+  margin: 0 auto 1.5rem;
+}
+
+.index-title {
+  margin: 0 0 0.25rem;
+  font-size: 1.6rem;
+  color: #0f172a;
+}
+
+.index-subtitle {
+  margin: 0 0 1rem;
+  color: #475569;
+}
+
+.index-controls {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+}
+
+.index-search,
+.index-manufacturer {
+  font: inherit;
+  padding: 0.5rem 0.75rem;
+  border-radius: 0.6rem;
+  border: 1px solid rgba(148, 163, 184, 0.6);
+  background: #fff;
+}
+
+.index-search {
+  flex: 1 1 16rem;
+  min-width: 12rem;
+}
+
+.index-hint,
+.index-error {
+  max-width: 1200px;
+  margin: 1rem auto;
+  color: #64748b;
+}
+
+.index-error {
+  color: #b91c1c;
+}
+
+.index-grid {
+  max-width: 1200px;
+  margin: 0 auto;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+  gap: 1rem;
+}
+
+/* Manufacturer landing: fewer, larger cards. */
+.index-grid--manufacturers {
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  gap: 1.5rem;
+}
+
+.probe-card {
+  display: flex;
+  flex-direction: column;
+  text-align: left;
+  padding: 0;
+  border: 1px solid rgba(148, 163, 184, 0.45);
+  border-radius: 0.9rem;
+  background: #fff;
+  cursor: pointer;
+  overflow: hidden;
+  font: inherit;
+  transition: transform 0.12s ease, box-shadow 0.2s ease, border-color 0.2s ease;
+}
+
+.probe-card:hover {
+  transform: translateY(-2px);
+  border-color: rgba(37, 99, 235, 0.6);
+  box-shadow: 0 12px 22px rgba(15, 23, 42, 0.12);
+}
+
+.probe-card-image {
+  width: 100%;
+  aspect-ratio: 4 / 3;
+  object-fit: contain;
+  background: #f8fafc;
+  border-bottom: 1px solid rgba(148, 163, 184, 0.3);
+}
+
+.probe-card-image--empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #94a3b8;
+  font-size: 0.85rem;
+}
+
+/* Manufacturer logo: centered in a uniform tile, sized by height (with a width
+   cap) so logos of different aspect ratios read at a consistent scale. */
+.probe-card-logo-tile {
+  aspect-ratio: 5 / 2;
+  background: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.5rem 0.75rem;
+}
+
+.probe-card-logo-img {
+  max-height: 5rem;
+  max-width: 97%;
+  width: auto;
+  height: auto;
+  object-fit: contain;
+}
+
+/* Manufacturer wordmark cards (fallback when no logo file is present). */
+.probe-card-logo {
+  width: 100%;
+  aspect-ratio: 16 / 9;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1.25rem;
+  text-align: center;
+  background: #334155;
+}
+
+.probe-card-logo-text {
+  color: #fff;
+  font-size: 1.4rem;
+  font-weight: 700;
+  letter-spacing: 0.01em;
+  line-height: 1.2;
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
+}
+
+.probe-card-logo--cambridgeneurotech {
+  background: linear-gradient(135deg, #0e7490, #06b6d4);
+}
+.probe-card-logo--imec {
+  background: linear-gradient(135deg, #9f1239, #e11d48);
+}
+.probe-card-logo--neuronexus {
+  background: linear-gradient(135deg, #1e40af, #3b82f6);
+}
+.probe-card-logo--diagnosticbiochips {
+  background: linear-gradient(135deg, #6d28d9, #8b5cf6);
+}
+.probe-card-logo--plexon {
+  background: linear-gradient(135deg, #9a3412, #f97316);
+}
+.probe-card-logo--sinaps-research-platform {
+  background: linear-gradient(135deg, #115e59, #14b8a6);
+}
+
+.probe-card-body {
+  display: flex;
+  flex-direction: column;
+  gap: 0.2rem;
+  padding: 0.7rem 0.85rem 0.9rem;
+}
+
+.probe-card-title {
+  font-weight: 600;
+  color: #0f172a;
+}
+
+.probe-card-manufacturer {
+  font-size: 0.85rem;
+  color: #2563eb;
+}
+
+.probe-card-meta {
+  font-size: 0.8rem;
+  color: #64748b;
+}
+
+.sidebar-home {
+  align-self: flex-start;
+  background: none;
+  border: none;
+  padding: 0;
+  margin-bottom: 0.6rem;
+  font: inherit;
+  font-size: 0.85rem;
+  font-weight: 600;
+  color: #2563eb;
+  cursor: pointer;
+}
+
+.sidebar-home:hover {
+  text-decoration: underline;
+}

apps/probe-viewer/public/logos/diagnosticbiochips.png

@@ -1,5 +1,7 @@
 import { useEffect } from "react";
+import { useParams } from "react-router-dom";
 
+import { ProbeIndex } from "./components/ProbeIndex";
 import { ProbeViewer } from "./components/ProbeViewer";
 import { Sidebar } from "./components/Sidebar";
 import { useAppStore } from "./state/useAppStore";
@@ -10,6 +12,8 @@ import "./App.css";
 
 function App() {
   const loadManifest = useAppStore((state) => state.loadManifest);
+  // Present on /probes/:manufacturer/:model, absent on the bare "/" landing.
+  const { model } = useParams();
 
   useEffect(() => {
     void loadManifest();
@@ -24,6 +28,11 @@ function App() {
   useRestoreCameraFromUrl();
   useSyncCameraToUrl();
 
+  // No probe in the route: show the catalog landing instead of a probe view.
+  if (!model) {
+    return <ProbeIndex />;
+  }
+
   return (
     <div className="app-shell">
       <aside className="app-sidebar">

apps/probe-viewer/public/logos/imec.png

@@ -13,7 +13,7 @@ import type {
 } from "react";
 
 import { useResizeObserver } from "../hooks/useResizeObserver";
-import { VIEW_ZOOM_MAX, VIEW_ZOOM_MIN } from "../state/useAppStore";
+import { VIEW_ZOOM_MIN } from "../state/useAppStore";
 import type {
   ContactShapeParams,
   ManifestEntry,
@@ -25,6 +25,7 @@ interface ProbeCanvasProps {
   entry: ManifestEntry;
   probeData: ProbeInterfaceFile;
   camera: ProbeViewerCamera;
+  maxZoom: number;
   showContactIds: boolean;
   showScaleBar: boolean;
   onViewCenterChange: (x: number | null, y: number | null) => void;
@@ -83,6 +84,7 @@ export const ProbeCanvas = forwardRef<HTMLCanvasElement, ProbeCanvasProps>(
       entry,
       probeData,
       camera,
+      maxZoom,
       showContactIds,
       showScaleBar,
       onViewCenterChange,
@@ -110,6 +112,36 @@ export const ProbeCanvas = forwardRef<HTMLCanvasElement, ProbeCanvasProps>(
   const geometry = useMemo(() => computeGeometrySummary(probeData), [probeData]);
   const probe = useMemo(() => probeData.probes?.[0], [probeData]);
 
+  // For uniform contact-id sizing: the widest id label (so one font fits the
+  // longest) and the smallest contact box in micrometers (so it fits every pad).
+  // These are zoom-independent, so they are computed once per probe.
+  const idLabelInfo = useMemo(() => {
+    const ids = probe?.contact_ids;
+    const positions = probe?.contact_positions;
+    if (!ids || !positions || positions.length === 0) return null;
+    const shapes = probe.contact_shapes ?? [];
+    const params = probe.contact_shape_params ?? [];
+    let widestLabel = "";
+    let minWidthUm = Infinity;
+    let minHeightUm = Infinity;
+    for (let i = 0; i < positions.length; i++) {
+      const label = String(ids[i] ?? i);
+      if (label.length > widestLabel.length) widestLabel = label;
+      const shape = shapes[i] ?? "";
+      const p = params[i] ?? {};
+      const widthUm = shape === "circle" ? 2 * (p.radius ?? 5) : p.width ?? 10;
+      const heightUm =
+        shape === "circle"
+          ? 2 * (p.radius ?? 5)
+          : shape === "rect"
+            ? p.height ?? 15
+            : p.width ?? 10;
+      if (widthUm < minWidthUm) minWidthUm = widthUm;
+      if (heightUm < minHeightUm) minHeightUm = heightUm;
+    }
+    return { widestLabel, minWidthUm, minHeightUm };
+  }, [probe]);
+
   // Calculate effective view center (use geometry center if null)
   const effectiveViewCenterX = centerX ?? geometry?.centerX ?? 0;
   const effectiveViewCenterY = centerY ?? geometry?.centerY ?? 0;
@@ -263,16 +295,28 @@ export const ProbeCanvas = forwardRef<HTMLCanvasElement, ProbeCanvasProps>(
       ctx.stroke();
     });
 
-    if (showContactIds && probe.contact_ids) {
+    if (showContactIds && probe.contact_ids && idLabelInfo) {
       const contactIds = probe.contact_ids;
-      ctx.font = `${Math.max(10, Math.min(14, 10 * (scale / 100)))}px "Inter", sans-serif`;
+      const { widestLabel, minWidthUm, minHeightUm } = idLabelInfo;
+      // One font for the whole probe: the size at which the widest id fits the
+      // smallest contact (by width and height). Text width scales linearly with
+      // font size, so measure the widest label once at a reference size and
+      // solve. Tracks zoom and real contact size; never overflows a pad.
+      const REF_FONT = 100;
+      ctx.font = `${REF_FONT}px "Inter", sans-serif`;
+      const widestWidthAtRef = Math.max(1, ctx.measureText(widestLabel).width);
+      const fontByWidth = (REF_FONT * minWidthUm * scale) / widestWidthAtRef;
+      const fontByHeight = minHeightUm * scale;
+      const fontPx = Math.min(fontByWidth, fontByHeight) * 0.85;
+
+      ctx.font = `${fontPx}px "Inter", sans-serif`;
       ctx.textAlign = "center";
-      ctx.textBaseline = "top";
+      ctx.textBaseline = "middle";
       ctx.fillStyle = "rgba(15, 23, 42, 0.95)";
       contactPositions.forEach((position, index) => {
         const [x, y] = projectPoint(position);
         // Show the probe's actual contact id, not the array index.
-        ctx.fillText(String(contactIds[index] ?? index), x, y + 4);
+        ctx.fillText(String(contactIds[index] ?? index), x, y);
       });
     }
 
@@ -343,11 +387,11 @@ export const ProbeCanvas = forwardRef<HTMLCanvasElement, ProbeCanvasProps>(
     if (showScaleBar) {
       renderScaleBar();
     }
-  }, [entry.id, effectiveViewCenterX, effectiveViewCenterY, geometry, probe, probeData, showContactIds, showScaleBar, size.height, size.width, zoom]);
+  }, [entry.id, effectiveViewCenterX, effectiveViewCenterY, geometry, idLabelInfo, probe, probeData, showContactIds, showScaleBar, size.height, size.width, zoom]);
 
   const clampZoom = useCallback(
-    (value: number) => Math.min(VIEW_ZOOM_MAX, Math.max(VIEW_ZOOM_MIN, value)),
-    [],
+    (value: number) => Math.min(maxZoom, Math.max(VIEW_ZOOM_MIN, value)),
+    [maxZoom],
   );
 
   // Helper to calculate scale (needed for coordinate conversion in handlers)