Merge branch 'main' into feature/react18perf-functionize

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aics/web-3d-viewer",
-  "version": "2.10.2",
+  "version": "2.10.3",
   "description": "web view of cell volume images",
   "repository": "github:allen-cell-animated/website-3d-cell-viewer",
   "main": "es/index.js",

src/aics-image-viewer/components/App/index.tsx

@@ -190,8 +190,8 @@ const App: React.FC<AppProps> = (props) => {
 
   // State for image loading/reloading
 
-  // `true` when this is the initial load of an image
-  const initialLoadRef = useRef(true);
+  /** `true` when a channel's data has been loaded for the current image. */
+  const hasChannelLoadedRef = useRef<boolean[]>([]);
   // `true` when image data has been requested, but no data has been received yet
   const [sendingQueryRequest, setSendingQueryRequest] = useState(false);
   // `true` when all channels of the current image are loaded
@@ -262,7 +262,7 @@ const App: React.FC<AppProps> = (props) => {
 
     // If this is the first load of this image, auto-generate initial LUTs
     if (
-      initialLoadRef.current ||
+      !hasChannelLoadedRef.current[channelIndex] ||
       !thisChannelsSettings.controlPoints ||
       !thisChannelsSettings.ramp ||
       getChannelsAwaitingResetOnLoad().has(channelIndex)
@@ -313,14 +313,14 @@ const App: React.FC<AppProps> = (props) => {
     if (aimg.channelNames[channelIndex] === getCurrentViewerChannelSettings()?.maskChannelName) {
       view3d.setVolumeChannelAsMask(aimg, channelIndex);
     }
+    hasChannelLoadedRef.current[channelIndex] = true;
 
     // when any channel data has arrived:
     setSendingQueryRequest(false);
     setOneChannelLoaded(channelIndex);
     if (aimg.isLoaded()) {
       view3d.updateActiveChannels(aimg);
       setImageLoaded(true);
-      initialLoadRef.current = false;
       playControls.onImageLoaded();
     }
   };
@@ -404,7 +404,7 @@ const App: React.FC<AppProps> = (props) => {
 
     setSendingQueryRequest(true);
     setImageLoaded(false);
-    initialLoadRef.current = true;
+    hasChannelLoadedRef.current = [];
 
     const loadSpec = new LoadSpec();
     loadSpec.time = viewerState.current.time;

src/aics-image-viewer/components/StyleProvider/index.tsx

@@ -105,8 +105,8 @@ const theme = {
       bannerBg: "#020202DB",
     },
     statusFlag: {
-      bg: palette.veryLtPurple,
-      text: palette.veryDarkPurple,
+      border: palette.medGrey,
+      text: palette.ltGrey,
     },
     layout: {
       dividers: palette.medGrey,
@@ -204,7 +204,7 @@ const CssProvider = styled.div<{ $theme: AppTheme }>`
       --color-landingpage-text: ${$theme.colors.landingPage.text};
       --color-landingpage-banner-highlight-bg: ${$theme.colors.landingPage.bannerBg};
 
-      --color-statusflag-bg: ${$theme.colors.statusFlag.bg};
+      --color-statusflag-border: ${$theme.colors.statusFlag.border};
       --color-statusflag-text: ${$theme.colors.statusFlag.text};
 
       --color-layout-dividers: ${$theme.colors.layout.dividers};

website/components/LandingPage/index.tsx

@@ -209,15 +209,15 @@ const DatasetCard = styled.li`
 const InReviewFlag = styled(FlexRowAlignCenter)`
   border-radius: 4px;
   padding: 1px 6px;
-  background-color: var(--color-statusflag-bg);
-  height: 22px;
+  border: 1px solid var(--color-statusflag-border);
+  height: 23px;
   flex-wrap: wrap;
 
   && > p {
     margin-bottom: 0;
     color: var(--color-statusflag-text);
     font-size: 11px;
-    font-weight: 600;
+    font-weight: 500;
     white-space: nowrap;
   }
 `;