feat: 6867 6868 image and dot opacity #1029

tihuan · 2024-07-09T17:29:14Z

Add Opacities component to control both image and dots opacity
Move Image Toggle button to the left side as part of the Embedding component

KNOWN ISSUES

The opacity control is persistent across different embedding types and shared between main and side panels
For example, if you set dot opacity to 50% and switch embedding to a non-spatial one, the dots will still be at 50% opacity

Screenshots:

Video:

Screen.Recording.2024-07-09.at.10.12.03.AM-1.mov

tihuan · 2024-07-09T17:30:37Z

client/src/components/menubar/index.tsx

-  imageUnderlay: RootState["controls"]["imageUnderlay"];
-  // eslint-disable-next-line react/no-unused-prop-types -- used in shouldShowOpenseadragon
-  layoutChoice: RootState["layoutChoice"];
-  // eslint-disable-next-line react/no-unused-prop-types -- used in shouldShowOpenseadragon
-  config: RootState["config"];
-  // eslint-disable-next-line react/no-unused-prop-types -- used in shouldShowOpenseadragon
-  panelEmbedding: RootState["panelEmbedding"];


moved the image toggle button to Embedding component, so we no longer need these props here

tihuan · 2024-07-09T17:30:53Z

client/src/reducers/controls.ts

+  imageOpacity: number;
+  dotOpacity: number;


new redux state for both opacities

client/src/components/embedding/components/Opacities/components/Opacity/index.tsx

tihuan · 2024-07-09T17:32:12Z

client/src/components/embedding/components/Opacities/index.tsx

+import { RootState } from "../../../../reducers";
+import { Props, StateProps } from "./types";
+
+function Opacities({ imageOpacity, dotOpacity, dispatch }: Props) {


Opacities component hosts both types of opacity control

tihuan · 2024-07-09T17:32:41Z

client/src/components/embedding/index.tsx

+  // eslint-disable-next-line react/no-unused-prop-types -- used in shouldShowOpenseadragon
+  config: RootState["config"];
+  // eslint-disable-next-line react/no-unused-prop-types -- used in shouldShowOpenseadragon
+  panelEmbedding: RootState["panelEmbedding"];
+  imageUnderlay: RootState["controls"]["imageUnderlay"];


Embedding component now needs these props to determine whether to show the Image toggle button and its dropdown or not

tihuan · 2024-07-09T17:32:50Z

client/src/components/embedding/index.tsx

@@ -146,7 +158,7 @@ const Embedding = (props: Props) => {
            </div>
          }
        >
-          <Tooltip
+          <Tooltip2


upgrade to Tooltip2 as a bonus

tihuan · 2024-07-09T17:33:20Z

client/src/components/embedding/index.tsx

+                <Button
+                  type="button"
+                  data-testid="toggle-image-underlay"
+                  icon="media"
+                  intent={imageUnderlay ? "primary" : "none"}
+                  active={imageUnderlay}
+                  onClick={() => {
+                    track(
+                      /**
+                       * (thuang): If `imageUnderlay` is currently `true`, then
+                       * we're about to deselect it thus firing the deselection event.
+                       */
+                      imageUnderlay
+                        ? EVENTS.EXPLORER_IMAGE_DESELECT
+                        : EVENTS.EXPLORER_IMAGE_SELECT
+                    );
+                    dispatch({
+                      type: "toggle image underlay",
+                      toggle: !imageUnderlay,
+                    });
+                  }}
+                />


existing code moved here

tihuan · 2024-07-09T17:34:27Z

client/src/components/embedding/index.tsx

+              <Popover2
+                onOpening={handleLayoutChoiceClick}
+                position={Position.BOTTOM_LEFT}
+                content={<Opacities />}
+              >
+                <ImageDropdownButton
+                  type="button"
+                  data-testid="image-underlay-dropdown"
+                  icon="caret-down"
+                />
+              </Popover2>


the new pop over that shows Opacities control as its content

tihuan · 2024-07-09T17:34:58Z

client/src/components/graph/graph.tsx

@@ -1115,7 +1125,7 @@ class Graph extends React.Component<GraphProps, GraphState> {
    return createColorQuery(colorMode, colorAccessor, schema, genesets);
  }

-  updateOpenSeadragon() {
+  initOpenSeadragon() {


update the name to reflect its actual functionality

hthomas-czi

Looks great, Timmy! I just see a couple things that would be great to fix.

The "Image Opacity" and "Dot Opacity" labels should use the same style as the "Standard Categories" label.
Clicking outside of the opacity popover (and the embedding popover actually) to dismiss it doesn't work as expected. It only works if you click outside of the main center workspace (i.e., one of the sidebars or the inline with the toolbar)

This isn't from this PR but it'd also be nice to fix the position of the cell count. It should be left aligned with the embedding selector icon. It appears to be shifted over because of the color legend, but it looks weird when the user isn't coloring by a continuous variable. Ideally, the color legend would appear below the cell count.

tihuan · 2024-07-09T22:40:05Z

Ohh eagle eye 🦅 👁️!! Thanks so much, Harley! Will address all 3 👍

Also I need to investigate the failing e2e tests HMM!

tihuan · 2024-07-11T15:14:12Z

@hthomas-czi okay all 3 issues should be address now 😄 PTAL again and thanks again for catching them!

Screen.Recording.2024-07-11.at.8.12.20.AM.mov

tihuan · 2024-07-11T15:15:30Z

client/src/components/NavBar/index.tsx

@@ -132,6 +132,7 @@ const Header = (props: HeaderProps) => {
        <Right>
          <LinkWrapper>
            <Popover2
+              hasBackdrop


adding backdrop creates a reliable way to detect click outside of the popover element

hthomas-czi

Looks good! Thanks, Timmy.

tihuan · 2024-07-11T17:00:11Z

Thanks so much, Harley!

Looks like I need to update the e2e tests. Will do that after my meetings!

tihuan · 2024-07-11T22:24:32Z

Okay finally all passed lol Merging!

tihuan commented Jul 9, 2024

View reviewed changes

tihuan force-pushed the thuang-6867-image-dot-opacity branch from 49d7440 to 15bf212 Compare July 9, 2024 17:36

tihuan requested review from kaloster and hthomas-czi July 9, 2024 17:39

tihuan added the stack label Jul 9, 2024

kaloster approved these changes Jul 9, 2024

View reviewed changes

tihuan force-pushed the thuang-6867-image-dot-opacity branch from e5a7ece to d17f372 Compare July 9, 2024 18:45

tihuan added stack and removed stack labels Jul 9, 2024

tihuan force-pushed the thuang-6867-image-dot-opacity branch from 26658b5 to af96c05 Compare July 9, 2024 20:56

hthomas-czi requested changes Jul 9, 2024

View reviewed changes

tihuan force-pushed the thuang-6867-image-dot-opacity branch from 376260d to 02d29bd Compare July 11, 2024 15:11

tihuan requested a review from hthomas-czi July 11, 2024 15:14

tihuan commented Jul 11, 2024

View reviewed changes

hthomas-czi approved these changes Jul 11, 2024

View reviewed changes

tihuan force-pushed the thuang-6867-image-dot-opacity branch 2 times, most recently from 3c7ae9e to 452693e Compare July 11, 2024 21:40

tihuan added 4 commits July 11, 2024 14:49

feat: 6867 6868 image and dot opacity

d51afff

test: Add force click due to new blueprint backdrop

ac0f99f

test: Add force click due to new blueprint backdrop again

e8b975e

test: improve test steps

01db94a

tihuan force-pushed the thuang-6867-image-dot-opacity branch from 452693e to 01db94a Compare July 11, 2024 21:50

chore: Updated [rdev] values.yaml image tags to sha-01db94ac

833a950

tihuan merged commit 97f57e6 into main Jul 11, 2024
19 checks passed

tihuan deleted the thuang-6867-image-dot-opacity branch July 11, 2024 22:24

czi-github-helper bot mentioned this pull request Jul 11, 2024

chore(main): release 1.1.0 #1020

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: 6867 6868 image and dot opacity #1029

feat: 6867 6868 image and dot opacity #1029

tihuan commented Jul 9, 2024 •

edited by github-actions bot

Loading

tihuan Jul 9, 2024

tihuan Jul 9, 2024

tihuan Jul 9, 2024

tihuan Jul 9, 2024

tihuan Jul 9, 2024

tihuan Jul 9, 2024

tihuan Jul 9, 2024

tihuan Jul 9, 2024

hthomas-czi left a comment

tihuan commented Jul 9, 2024

tihuan commented Jul 11, 2024

tihuan Jul 11, 2024

hthomas-czi left a comment

tihuan commented Jul 11, 2024

tihuan commented Jul 11, 2024

feat: 6867 6868 image and dot opacity #1029

feat: 6867 6868 image and dot opacity #1029

Conversation

tihuan commented Jul 9, 2024 • edited by github-actions bot Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

hthomas-czi left a comment

Choose a reason for hiding this comment

tihuan commented Jul 9, 2024

tihuan commented Jul 11, 2024

Choose a reason for hiding this comment

hthomas-czi left a comment

Choose a reason for hiding this comment

tihuan commented Jul 11, 2024

tihuan commented Jul 11, 2024

tihuan commented Jul 9, 2024 •

edited by github-actions bot

Loading