Fix spectrogram color map not updating channel 2 in "both" mode (v6.0.1)

naomiaro · claude · naomiaro · commit 1996ecc5e0d7 · 2026-02-01T23:55:18.000-08:00
SpectrogramChannel.index served dual duty: CSS positioning and canvas ID
construction. In "both" mode, index*2 was needed for layout but corrupted
canvas IDs (ch2 instead of ch1), so the worker couldn't find the canvas
when re-rendering after a color map change. Added separate channelIndex
prop for canvas identity.

Co-Authored-By: Claude Opus 4.5 &lt;noreply@anthropic.com&gt;
diff --git a/CLAUDE.MD b/CLAUDE.MD
@@ -287,6 +287,10 @@ interface AudioClip {
 - Switch between `defaultTheme` and `darkTheme` based on Docusaurus mode
 - Example: `minimal-app.tsx` detects and responds to theme toggle
 
+### SpectrogramChannel Index vs ChannelIndex
+
+**`SpectrogramChannel`** has two index concerns: `index` (CSS positioning via Wrapper `top` offset) and `channelIndex` (canvas ID construction for worker registration, e.g. `clipId-ch{channelIndex}-chunk0`). In "both" mode, `SmartChannel` passes `index={props.index * 2}` for layout interleaving but `channelIndex={props.index}` for correct canvas identity. When `channelIndex` is omitted it defaults to `index`. Never use the visual `index` for canvas IDs — the worker and SpectrogramProvider registry expect sequential audio channel indices (0, 1).
+
 ### Integration Context Pattern (Spectrogram, Annotations)
 
 **Pattern:** Browser package defines an interface + context, optional packages provide implementation via a Provider component. Used by both `@waveform-playlist/spectrogram` (SpectrogramIntegrationContext) and `@waveform-playlist/annotations` (AnnotationIntegrationContext).
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "waveform-playlist-monorepo",
-  "version": "6.0.0",
+  "version": "6.0.1",
   "private": true,
   "description": "Multiple track web audio editor and player with waveform preview",
   "author": "Naomi Aro",
diff --git a/packages/annotations/package.json b/packages/annotations/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@waveform-playlist/annotations",
-  "version": "6.0.0",
+  "version": "6.0.1",
   "description": "Annotation support for waveform-playlist",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
diff --git a/packages/browser/package.json b/packages/browser/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@waveform-playlist/browser",
-  "version": "6.0.0",
+  "version": "6.0.1",
   "description": "Browser bundle for waveform-playlist with React",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
diff --git a/packages/core/package.json b/packages/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@waveform-playlist/core",
-  "version": "6.0.0",
+  "version": "6.0.1",
   "description": "Core types, interfaces and utilities for waveform-playlist",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
diff --git a/packages/loaders/package.json b/packages/loaders/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@waveform-playlist/loaders",
-  "version": "6.0.0",
+  "version": "6.0.1",
   "description": "Audio loaders for waveform-playlist",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
diff --git a/packages/media-element-playout/package.json b/packages/media-element-playout/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@waveform-playlist/media-element-playout",
-  "version": "6.0.0",
+  "version": "6.0.1",
   "description": "HTMLMediaElement-based playout engine for waveform-playlist with pitch-preserving playback rate",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
diff --git a/packages/playout/package.json b/packages/playout/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@waveform-playlist/playout",
-  "version": "6.0.0",
+  "version": "6.0.1",
   "description": "Playout engine for waveform-playlist using Tone.js",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
diff --git a/packages/recording/package.json b/packages/recording/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@waveform-playlist/recording",
-  "version": "6.0.0",
+  "version": "6.0.1",
   "description": "Audio recording support for waveform-playlist using AudioWorklet",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
diff --git a/packages/spectrogram/package.json b/packages/spectrogram/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@waveform-playlist/spectrogram",
-  "version": "6.0.0",
+  "version": "6.0.1",
   "description": "Spectrogram computation and UI for waveform-playlist",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
diff --git a/packages/ui-components/package.json b/packages/ui-components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@waveform-playlist/ui-components",
-  "version": "6.0.0",
+  "version": "6.0.1",
   "description": "React UI components for waveform-playlist",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
diff --git a/packages/ui-components/src/components/SmartChannel.tsx b/packages/ui-components/src/components/SmartChannel.tsx
@@ -98,6 +98,7 @@ export const SmartChannel: FunctionComponent<SmartChannelProps> = ({
       <>
         <SpectrogramChannel
           index={props.index * 2}
+          channelIndex={props.index}
           data={spectrogramData}
           length={props.length}
           waveHeight={halfHeight}
diff --git a/packages/ui-components/src/components/SpectrogramChannel.tsx b/packages/ui-components/src/components/SpectrogramChannel.tsx
@@ -58,8 +58,10 @@ export interface SpectrogramWorkerCanvasApi {
 }
 
 export interface SpectrogramChannelProps {
-  /** Channel index (0 = first, 1 = second, etc.) */
+  /** Visual position index — used for CSS positioning (top offset). */
   index: number;
+  /** Audio channel index for canvas ID construction. Defaults to `index` when omitted. */
+  channelIndex?: number;
   /** Computed spectrogram data (not needed when workerApi is provided) */
   data?: SpectrogramData;
   /** Width in CSS pixels */
@@ -88,6 +90,7 @@ export interface SpectrogramChannelProps {
 
 export const SpectrogramChannel: FunctionComponent<SpectrogramChannelProps> = ({
   index,
+  channelIndex: channelIndexProp,
   data,
   length,
   waveHeight,
@@ -101,6 +104,7 @@ export const SpectrogramChannel: FunctionComponent<SpectrogramChannelProps> = ({
   clipId,
   onCanvasesReady,
 }) => {
+  const channelIndex = channelIndexProp ?? index;
   const canvasesRef = useRef<HTMLCanvasElement[]>([]);
   const registeredIdsRef = useRef<string[]>([]);
   const transferredCanvasesRef = useRef<WeakSet<HTMLCanvasElement>>(new WeakSet());
@@ -135,7 +139,7 @@ export const SpectrogramChannel: FunctionComponent<SpectrogramChannelProps> = ({
       // Skip canvases that have already been transferred to the worker
       if (transferredCanvasesRef.current.has(canvas)) continue;
 
-      const canvasId = `${clipId}-ch${index}-chunk${i}`;
+      const canvasId = `${clipId}-ch${channelIndex}-chunk${i}`;
 
       try {
         const offscreen = canvas.transferControlToOffscreen();
@@ -163,7 +167,7 @@ export const SpectrogramChannel: FunctionComponent<SpectrogramChannelProps> = ({
     };
   // Re-run when canvas keys change (length changes cause remount via key prop)
   // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isWorkerMode, clipId, index, length]);
+  }, [isWorkerMode, clipId, channelIndex, length]);
 
   const lut = colorLUT ?? defaultGetColorMap();
   const maxF = maxFrequency ?? (data ? data.sampleRate / 2 : 22050);
diff --git a/packages/webaudio-peaks/package.json b/packages/webaudio-peaks/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@waveform-playlist/webaudio-peaks",
-  "version": "6.0.0",
+  "version": "6.0.1",
   "description": "Small library to extract peaks from an array of audio samples or an AudioBuffer from the WebAudio API.",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "waveform-playlist-monorepo",`
`3`		`- "version": "6.0.0",`
	`3`	`+ "version": "6.0.1",`
`4`	`4`	`"private": true,`
`5`	`5`	`"description": "Multiple track web audio editor and player with waveform preview",`
`6`	`6`	`"author": "Naomi Aro",`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@waveform-playlist/annotations",`
`3`		`- "version": "6.0.0",`
	`3`	`+ "version": "6.0.1",`
`4`	`4`	`"description": "Annotation support for waveform-playlist",`
`5`	`5`	`"main": "./dist/index.js",`
`6`	`6`	`"module": "./dist/index.mjs",`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@waveform-playlist/browser",`
`3`		`- "version": "6.0.0",`
	`3`	`+ "version": "6.0.1",`
`4`	`4`	`"description": "Browser bundle for waveform-playlist with React",`
`5`	`5`	`"main": "./dist/index.js",`
`6`	`6`	`"module": "./dist/index.mjs",`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@waveform-playlist/core",`
`3`		`- "version": "6.0.0",`
	`3`	`+ "version": "6.0.1",`
`4`	`4`	`"description": "Core types, interfaces and utilities for waveform-playlist",`
`5`	`5`	`"main": "./dist/index.js",`
`6`	`6`	`"module": "./dist/index.mjs",`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@waveform-playlist/loaders",`
`3`		`- "version": "6.0.0",`
	`3`	`+ "version": "6.0.1",`
`4`	`4`	`"description": "Audio loaders for waveform-playlist",`
`5`	`5`	`"main": "./dist/index.js",`
`6`	`6`	`"module": "./dist/index.mjs",`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@waveform-playlist/media-element-playout",`
`3`		`- "version": "6.0.0",`
	`3`	`+ "version": "6.0.1",`
`4`	`4`	`"description": "HTMLMediaElement-based playout engine for waveform-playlist with pitch-preserving playback rate",`
`5`	`5`	`"main": "./dist/index.js",`
`6`	`6`	`"module": "./dist/index.mjs",`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@waveform-playlist/playout",`
`3`		`- "version": "6.0.0",`
	`3`	`+ "version": "6.0.1",`
`4`	`4`	`"description": "Playout engine for waveform-playlist using Tone.js",`
`5`	`5`	`"main": "./dist/index.js",`
`6`	`6`	`"module": "./dist/index.mjs",`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@waveform-playlist/recording",`
`3`		`- "version": "6.0.0",`
	`3`	`+ "version": "6.0.1",`
`4`	`4`	`"description": "Audio recording support for waveform-playlist using AudioWorklet",`
`5`	`5`	`"main": "./dist/index.js",`
`6`	`6`	`"module": "./dist/index.mjs",`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@waveform-playlist/spectrogram",`
`3`		`- "version": "6.0.0",`
	`3`	`+ "version": "6.0.1",`
`4`	`4`	`"description": "Spectrogram computation and UI for waveform-playlist",`
`5`	`5`	`"main": "./dist/index.js",`
`6`	`6`	`"module": "./dist/index.mjs",`