From ab8cb27f04252719bde6f8fe80a2a3c9be848270 Mon Sep 17 00:00:00 2001
From: ilan-gold <ilanbassgold@gmail.com>
Date: Wed, 4 Aug 2021 11:56:26 -0400
Subject: [PATCH] Add Expansion Button for Non-Interleaved RGB

---
 CHANGELOG.md                                  |  2 ++
 .../src/components/Controller/Controller.jsx  | 25 ++++++++++++++++---
 2 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 198e17339..a32a2851c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,8 @@
 
 ### Added
 
+- Expansion button for non-interleaved RGB datasets that might be fluorescence.
+
 ### Changed
 
 ## 0.10.5
diff --git a/avivator/src/components/Controller/Controller.jsx b/avivator/src/components/Controller/Controller.jsx
index 1af5296a3..27ba24d8a 100644
--- a/avivator/src/components/Controller/Controller.jsx
+++ b/avivator/src/components/Controller/Controller.jsx
@@ -4,6 +4,8 @@ import Grid from '@material-ui/core/Grid';
 import Tabs from '@material-ui/core/Tabs';
 import Tab from '@material-ui/core/Tab';
 import Divider from '@material-ui/core/Divider';
+import UnfoldMoreIcon from '@material-ui/icons/UnfoldMore';
+import Button from '@material-ui/core/Button';
 
 import ChannelController from './components/ChannelController';
 import Menu from './components/Menu';
@@ -25,7 +27,12 @@ import {
   useImageSettingsStore,
   useChannelSetters
 } from '../../state';
-import { guessRgb, useWindowSize, getSingleSelectionStats } from '../../utils';
+import {
+  guessRgb,
+  useWindowSize,
+  getSingleSelectionStats,
+  isInterleaved
+} from '../../utils';
 import { GLOBAL_SLIDER_DIMENSION_FIELDS } from '../../constants';
 
 function TabPanel(props) {
@@ -75,6 +82,7 @@ const Controller = () => {
     isViewerLoading
   } = useViewerStore();
   const viewSize = useWindowSize();
+  const [areChannelsUnfolded, handleUnfoldChannels] = useState(false);
   const isRgb = metadata && guessRgb(metadata);
   const { shape, labels } = loader[0];
   const globalControlLabels = labels.filter(label =>
@@ -168,11 +176,22 @@ const Controller = () => {
           />
         )}
         {!use3d && globalControllers}
-        {!isViewerLoading && !isRgb ? (
+        {!isViewerLoading && (!isRgb || areChannelsUnfolded) ? (
           <Grid container>{channelControllers}</Grid>
         ) : (
           <Grid container justify="center">
-            {!isRgb && <CircularProgress />}
+            {!isRgb ? (
+              <CircularProgress />
+            ) : (
+              !isInterleaved(loader[0].shape) && (
+                <Button
+                  onClick={() => handleUnfoldChannels(true)}
+                  fullWidth
+                  startIcon={<UnfoldMoreIcon />}
+                  size="small"
+                />
+              )
+            )}
           </Grid>
         )}
         {!isRgb && <AddChannel />}