Fix Interleaved RGB Handling In Avivator (#475)

hms-dbmi · Jul 28, 2021 · ca1e4ee · ca1e4ee
1 parent eacf516
commit ca1e4ee
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 22 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,7 +5,9 @@
 ### Added
 
 ### Changed
+
 - Fix Galaxy note in the README.md.
+- Fix interleaved RGB issue in Avivator when setting up viewer initially.
 
 ## 0.10.4
 

diff --git a/avivator/src/hooks.js b/avivator/src/hooks.js
@@ -11,7 +11,8 @@ import {
   buildDefaultSelection,
   guessRgb,
   getMultiSelectionStats,
-  getBoundingCube
+  getBoundingCube,
+  isInterleaved
 } from './utils';
 import { COLOR_PALLETE, FILL_PIXEL_VALUE } from './constants';
 
@@ -47,23 +48,38 @@ export const useImage = (source, history) => {
         const { Channels } = nextMeta.Pixels;
         const channelOptions = Channels.map((c, i) => c.Name ?? `Channel ${i}`);
         // Default RGB.
-        let newSliders = [
-          [0, 255],
-          [0, 255],
-          [0, 255]
-        ];
-        let newDomains = [
-          [0, 255],
-          [0, 255],
-          [0, 255]
-        ];
-        let newColors = [
-          [255, 0, 0],
-          [0, 255, 0],
-          [0, 0, 255]
-        ];
+        let newSliders = [];
+        let newDomains = [];
+        let newColors = [];
         const isRgb = guessRgb(nextMeta);
-        if (!isRgb) {
+        if (isRgb) {
+          if (isInterleaved(nextLoader[0].shape)) {
+            // These don't matter because the data is interleaved.
+            newSliders = [[0, 255]];
+            newDomains = [[0, 255]];
+            newColors = [[255, 0, 0]];
+          } else {
+            newSliders = [
+              [0, 255],
+              [0, 255],
+              [0, 255]
+            ];
+            newDomains = [
+              [0, 255],
+              [0, 255],
+              [0, 255]
+            ];
+            newColors = [
+              [255, 0, 0],
+              [0, 255, 0],
+              [0, 0, 255]
+            ];
+          }
+          if (isLensOn) {
+            toggleIsLensOn();
+          }
+          setViewerState({ useColormap: false, useLens: false });
+        } else {
           const stats = await getMultiSelectionStats({
             loader: nextLoader,
             selections: newSelections,
@@ -80,11 +96,6 @@ export const useImage = (source, history) => {
             useLens: channelOptions.length !== 1,
             useColormap: true
           });
-        } else {
-          if (isLensOn) {
-            toggleIsLensOn();
-          }
-          setViewerState({ useColormap: false, useLens: false });
         }
         addChannels({
           ids: newDomains.map(() => String(Math.random())),