From 1929b6a8dc5d8295e23ce78ac703ef37dd6c4163 Mon Sep 17 00:00:00 2001 From: Suzette McCanny Date: Fri, 2 Aug 2024 10:43:56 -0400 Subject: [PATCH 01/12] add bottom banner to explorer --- .../components/BottomBanner/BottomBanner.tsx | 67 ++++++++++++++++ .../src/components/BottomBanner/constants.ts | 7 ++ client/src/components/BottomBanner/index.tsx | 12 +++ client/src/components/BottomBanner/style.ts | 79 +++++++++++++++++++ client/src/components/app.tsx | 57 +++++++------ client/src/components/framework/container.tsx | 50 ++++++++---- client/src/components/framework/layout.tsx | 4 +- client/src/components/graph/graph.tsx | 6 ++ client/src/components/graph/types.ts | 1 + client/src/reducers/index.ts | 3 + client/src/reducers/showBottomBanner.ts | 41 ++++++++++ 11 files changed, 285 insertions(+), 42 deletions(-) create mode 100644 client/src/components/BottomBanner/BottomBanner.tsx create mode 100644 client/src/components/BottomBanner/constants.ts create mode 100644 client/src/components/BottomBanner/index.tsx create mode 100644 client/src/components/BottomBanner/style.ts create mode 100644 client/src/reducers/showBottomBanner.ts diff --git a/client/src/components/BottomBanner/BottomBanner.tsx b/client/src/components/BottomBanner/BottomBanner.tsx new file mode 100644 index 000000000..38005b17a --- /dev/null +++ b/client/src/components/BottomBanner/BottomBanner.tsx @@ -0,0 +1,67 @@ +import React, { memo } from "react"; +import { connect } from "react-redux"; +import { + BOTTOM_BANNER_ID, + StyledBanner, + StyledBottomBannerWrapper, + StyledLink, +} from "./style"; +import { + BOTTOM_BANNER_SURVEY_LINK_TEXT, + BOTTOM_BANNER_SURVEY_TEXT, +} from "./constants"; +import { AppDispatch, RootState } from "../../reducers"; + +export interface BottomBannerProps { + surveyLink: string; + showBottomBanner: boolean; + dispatch: AppDispatch; +} + +const mapStateToProps = (state: RootState) => ({ + showBottomBanner: state.showBottomBanner, +}); + +const mapDispatchToProps = (dispatch: AppDispatch) => ({ + dispatch, +}); + +const BottomBanner = memo( + ({ + surveyLink, + showBottomBanner, + dispatch, + }: BottomBannerProps): JSX.Element | null => { + const setBottomBannerLastClosedTime = () => { + dispatch({ + type: "update bottom banner last closed time", + time: Date.now(), + }); + }; + + if (!showBottomBanner) return null; + + return ( + <> + + + {BOTTOM_BANNER_SURVEY_TEXT} + + {BOTTOM_BANNER_SURVEY_LINK_TEXT} + + + } + /> + + + ); + } +); + +export default connect(mapStateToProps, mapDispatchToProps)(BottomBanner); diff --git a/client/src/components/BottomBanner/constants.ts b/client/src/components/BottomBanner/constants.ts new file mode 100644 index 000000000..f85e0e2a4 --- /dev/null +++ b/client/src/components/BottomBanner/constants.ts @@ -0,0 +1,7 @@ +export const BANNER_FEEDBACK_SURVEY_LINK = + "https://airtable.com/app8fNSQ8ieIiHLOv/shrmD31azkGtSupmO"; +export const BOTTOM_BANNER_SURVEY_LINK_TEXT = "quick survey."; +export const BOTTOM_BANNER_SURVEY_TEXT = "Send us feedback with this"; +export const BOTTOM_BANNER_LAST_CLOSED_TIME_KEY = "bottomBannerLastClosedTime"; +// export const BOTTOM_BANNER_EXPIRATION_TIME_MS = 30 * 24 * 60 * 60 * 1000; // 30 days +export const BOTTOM_BANNER_EXPIRATION_TIME_MS = 30 * 1000; // 30 seconds diff --git a/client/src/components/BottomBanner/index.tsx b/client/src/components/BottomBanner/index.tsx new file mode 100644 index 000000000..9b2819802 --- /dev/null +++ b/client/src/components/BottomBanner/index.tsx @@ -0,0 +1,12 @@ +import BottomBanner from "./BottomBanner"; + +export { BottomBanner }; + +/* + NOTE: component code should go in BottomBanner.tsx + This index file is here so our imports are cleaner. + This way we can use + import { BottomBanner } from .../BottomBanner + rather than + import { BottomBanner } from .../BottomBanner/BottomBanner.tsx +*/ diff --git a/client/src/components/BottomBanner/style.ts b/client/src/components/BottomBanner/style.ts new file mode 100644 index 000000000..abae58a11 --- /dev/null +++ b/client/src/components/BottomBanner/style.ts @@ -0,0 +1,79 @@ +import styled from "@emotion/styled"; +import { Banner, Icon, fontBodyS } from "czifui"; +import { beta100, beta400, gray500 } from "../theme"; + +export const SKINNY_MODE_BREAKPOINT_WIDTH = 960; +export const BOTTOM_BANNER_ID = "bottom-banner"; + +export const StyledBanner = styled(Banner)` + ${fontBodyS} + + letter-spacing: -0.006em; + + height: auto; + + @media (max-width: ${SKINNY_MODE_BREAKPOINT_WIDTH}px) { + padding: 8px 16px; + box-shadow: 0px 0px 4px 0px rgba(50, 50, 50, 0.75); + } + + /** + * beta intent does not exist for SDS banner, but the colors do targeting + * specific id to overwrite style + */ + border-color: ${beta400} !important; + background-color: ${beta100}; + color: black; + + /* Hide default svg icon in the Banner as it is not in figma */ + :first-of-type > div:first-of-type > div:first-of-type { + display: none; + } + + /* Change close button icon default color */ + button svg { + path { + fill: ${gray500}; + } + } +`; + +export const StyledBottomBannerWrapper = styled.div` + width: 100%; + + /* Right behind modal overlay */ + z-index: 19; + background-color: purple; +`; + +export const StyledLink = styled.a` + padding: 0px 5px 0px 5px; + text-decoration-line: underline; + color: #8f5aff; + font-weight: 500; + + :hover { + color: #5826c1; + } +`; + +export const HeaderContainer = styled.div` + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: flex-start; +`; + +const STYLED_CLOSE_BUTTON_ICON_DENY_PROPS = ["hideCloseButton"]; + +export const StyledCloseButtonIcon = styled(Icon, { + shouldForwardProp: (prop) => + !STYLED_CLOSE_BUTTON_ICON_DENY_PROPS.includes(prop), +})``; + +export const FooterContentWrapper = styled.div` + margin: 24px 24px 40px 24px; + display: flex; + flex-direction: column; + align-items: center; +`; diff --git a/client/src/components/app.tsx b/client/src/components/app.tsx index 7ed196efb..601a42246 100644 --- a/client/src/components/app.tsx +++ b/client/src/components/app.tsx @@ -4,6 +4,7 @@ import { connect } from "react-redux"; import { ThemeProvider as EmotionThemeProvider } from "@emotion/react"; import { StylesProvider, ThemeProvider } from "@material-ui/core/styles"; import { theme } from "./theme"; +import { BottomBanner } from "./BottomBanner"; import Controls from "./controls"; import DatasetSelector from "./datasetSelector/datasetSelector"; @@ -23,6 +24,7 @@ import Graph from "./graph/graph"; import DiffexNotice from "./diffexNotice"; import Scatterplot from "./scatterplot/scatterplot"; import PanelEmbedding from "./PanelEmbedding"; +import { BANNER_FEEDBACK_SURVEY_LINK } from "./BottomBanner/constants"; interface StateProps { loading: RootState["controls"]["loading"]; @@ -99,32 +101,35 @@ class App extends React.Component {
)} {loading || error ? null : ( - ( - <> - - - - - - - {scatterplotXXaccessor && scatterplotYYaccessor && ( - - )} - - - - - - )} - > - - - + <> + ( + <> + + + + + + + {scatterplotXXaccessor && scatterplotYYaccessor && ( + + )} + + + + + + )} + > + + + + + )} diff --git a/client/src/components/framework/container.tsx b/client/src/components/framework/container.tsx index a50e25e6a..83ca0e86d 100644 --- a/client/src/components/framework/container.tsx +++ b/client/src/components/framework/container.tsx @@ -1,22 +1,44 @@ import React from "react"; +import { connect } from "react-redux"; + +import { RootState } from "../../reducers"; + +const mapStateToProps = (state: RootState) => ({ + showBottomBanner: state.showBottomBanner, +}); // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/no-explicit-any -- - FIXME: disabled temporarily on migrate to TS. function Container(props: any) { - const { children } = props; + const { children, showBottomBanner } = props; return ( -
- {children} -
+ (showBottomBanner && ( +
+ {children} +
+ )) || ( +
+ {children} +
+ ) ); } -export default Container; +export default connect(mapStateToProps)(Container); diff --git a/client/src/components/framework/layout.tsx b/client/src/components/framework/layout.tsx index 83e70e26c..e29d6dcf9 100644 --- a/client/src/components/framework/layout.tsx +++ b/client/src/components/framework/layout.tsx @@ -43,8 +43,8 @@ const Layout: React.FC = (props) => { columnGap: "0px", justifyItems: "stretch", alignItems: "stretch", - height: "inherit", - width: "inherit", + height: "100%", + width: "100%", position: "relative", top: 0, left: 0, diff --git a/client/src/components/graph/graph.tsx b/client/src/components/graph/graph.tsx index 470201a63..b3b502ca7 100644 --- a/client/src/components/graph/graph.tsx +++ b/client/src/components/graph/graph.tsx @@ -93,6 +93,7 @@ const mapStateToProps = (state: RootState, ownProps: OwnProps): StateProps => ({ unsMetadata: state.controls.unsMetadata, imageOpacity: state.controls.imageOpacity, dotOpacity: state.controls.dotOpacity, + showBottomBanner: state.showBottomBanner, }); class Graph extends React.Component { @@ -315,6 +316,7 @@ class Graph extends React.Component { isHidden, isSidePanel, imageOpacity, + showBottomBanner, } = this.props; const { toolSVG, viewport } = this.state; @@ -377,6 +379,10 @@ class Graph extends React.Component { this.showOpenseadragon(); } + if (prevProps.showBottomBanner !== showBottomBanner) { + this.handleResize(); + } + // Re-center when switching embedding mode if (prevProps.layoutChoice.current !== layoutChoice.current) { this.handleResize(); diff --git a/client/src/components/graph/types.ts b/client/src/components/graph/types.ts index 38fe01179..ff57d89f2 100644 --- a/client/src/components/graph/types.ts +++ b/client/src/components/graph/types.ts @@ -65,6 +65,7 @@ export interface StateProps { unsMetadata: RootState["controls"]["unsMetadata"]; imageOpacity: RootState["controls"]["imageOpacity"]; dotOpacity: RootState["controls"]["dotOpacity"]; + showBottomBanner: RootState["showBottomBanner"]; } export interface OwnProps { diff --git a/client/src/reducers/index.ts b/client/src/reducers/index.ts index 99b7044e0..028ca0307 100644 --- a/client/src/reducers/index.ts +++ b/client/src/reducers/index.ts @@ -27,6 +27,7 @@ import pointDilation from "./pointDilation"; import quickGenes from "./quickGenes"; import singleContinuousValue from "./singleContinuousValue"; import panelEmbedding from "./panelEmbedding"; +import showBottomBanner from "./showBottomBanner"; import { gcMiddleware as annoMatrixGC } from "../annoMatrix"; @@ -52,6 +53,7 @@ const AppReducer = undoable( ["centroidLabels", centroidLabels], ["pointDilation", pointDilation], ["datasetMetadata", datasetMetadata], + ["showBottomBanner", showBottomBanner], ] as Parameters[0]), [ "annoMatrix", @@ -101,6 +103,7 @@ export type RootState = { centroidLabels: ReturnType; pointDilation: ReturnType; datasetMetadata: ReturnType; + showBottomBanner: ReturnType; }; export type AppDispatch = ThunkDispatch; diff --git a/client/src/reducers/showBottomBanner.ts b/client/src/reducers/showBottomBanner.ts new file mode 100644 index 000000000..f6dacad45 --- /dev/null +++ b/client/src/reducers/showBottomBanner.ts @@ -0,0 +1,41 @@ +/* +Reducer for showBottomBanner +*/ + +import { AnyAction } from "redux"; +import { + BOTTOM_BANNER_EXPIRATION_TIME_MS, + BOTTOM_BANNER_LAST_CLOSED_TIME_KEY, +} from "../components/BottomBanner/constants"; +import type { RootState } from "./index"; + +const showBanner = () => { + const bottomBannerLastClosedTime = localStorage.getItem( + BOTTOM_BANNER_LAST_CLOSED_TIME_KEY + ); + const show = + !bottomBannerLastClosedTime || + Date.now() - Number(bottomBannerLastClosedTime) > + BOTTOM_BANNER_EXPIRATION_TIME_MS; + if (show && bottomBannerLastClosedTime) { + localStorage.setItem(BOTTOM_BANNER_LAST_CLOSED_TIME_KEY, "0"); + } + return show; +}; + +const showBottomBanner = (_state: RootState, action: AnyAction): boolean => { + switch (action.type) { + case "initial data load start": { + return showBanner(); + } + case "update bottom banner last closed time": { + localStorage.setItem(BOTTOM_BANNER_LAST_CLOSED_TIME_KEY, action.time); + return showBanner(); + } + default: { + return showBanner(); + } + } +}; + +export default showBottomBanner; From 43751a0c5a7e36671ffc9854667a96bf46c080d4 Mon Sep 17 00:00:00 2001 From: rainandbare Date: Fri, 2 Aug 2024 14:54:24 +0000 Subject: [PATCH 02/12] chore: Updated [rdev] values.yaml image tags to sha-1929b6a8 --- .infra/rdev/values.yaml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.infra/rdev/values.yaml b/.infra/rdev/values.yaml index ffdd3ff5f..44b82e9d8 100644 --- a/.infra/rdev/values.yaml +++ b/.infra/rdev/values.yaml @@ -2,7 +2,7 @@ stack: services: explorer: image: - tag: sha-d5d17168 + tag: sha-1929b6a8 replicaCount: 1 env: # env vars common to all deployment stages From aa810525d8b9ea9bc7ff5fe49ae1d96d414d9ecb Mon Sep 17 00:00:00 2001 From: Suzette McCanny Date: Fri, 2 Aug 2024 12:01:37 -0400 Subject: [PATCH 03/12] add tests --- client/__tests__/e2e/e2e.test.ts | 32 +++++++++++++++++++ .../components/BottomBanner/BottomBanner.tsx | 5 ++- .../src/components/BottomBanner/constants.ts | 3 +- 3 files changed, 37 insertions(+), 3 deletions(-) diff --git a/client/__tests__/e2e/e2e.test.ts b/client/__tests__/e2e/e2e.test.ts index bd7543a1f..5fada9c5c 100644 --- a/client/__tests__/e2e/e2e.test.ts +++ b/client/__tests__/e2e/e2e.test.ts @@ -205,6 +205,38 @@ for (const testDataset of testDatasets) { }); }); + + describe("bottom banner", () => { + const SURVEY_LINK = "https://airtable.com/app8fNSQ8ieIiHLOv/shrmD31azkGtSupmO"; + test("bottom banner appears", async ({ page }, testInfo) => { + await goToPage(page, url); + + const bottomBanner = page.getByTestId("bottom-banner"); + + await expect(bottomBanner).toBeVisible(); + + await expect(page.getByText("quick survey")).toHaveAttribute( + "href", + SURVEY_LINK + ); + + await snapshotTestGraph(page, testInfo); + }); + test("bottom banner disappears", async ({ page }, testInfo) => { + await goToPage(page, url); + + const bottomBanner = page.getByTestId("bottom-banner"); + + const bottomBannerClose = bottomBanner.getByRole("button"); + + await bottomBannerClose.click(); + + await expect(bottomBanner).not.toBeVisible(); + + await snapshotTestGraph(page, testInfo); + }); + }); + test("resize graph", async ({ page }, testInfo) => { skipIfSidePanel(graphTestId, MAIN_PANEL); diff --git a/client/src/components/BottomBanner/BottomBanner.tsx b/client/src/components/BottomBanner/BottomBanner.tsx index 38005b17a..727dec7d0 100644 --- a/client/src/components/BottomBanner/BottomBanner.tsx +++ b/client/src/components/BottomBanner/BottomBanner.tsx @@ -43,7 +43,10 @@ const BottomBanner = memo( return ( <> - + Date: Fri, 2 Aug 2024 16:55:40 +0000 Subject: [PATCH 04/12] chore: Updated [rdev] values.yaml image tags to sha-95e62beb --- .infra/rdev/values.yaml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.infra/rdev/values.yaml b/.infra/rdev/values.yaml index 44b82e9d8..7ac2a399e 100644 --- a/.infra/rdev/values.yaml +++ b/.infra/rdev/values.yaml @@ -2,7 +2,7 @@ stack: services: explorer: image: - tag: sha-1929b6a8 + tag: sha-95e62beb replicaCount: 1 env: # env vars common to all deployment stages From adad9b6933caebafd58a64107f844aedab273898 Mon Sep 17 00:00:00 2001 From: Suzette McCanny Date: Tue, 6 Aug 2024 10:45:10 -0400 Subject: [PATCH 05/12] fix tests --- client/__tests__/e2e/e2e.test.ts | 12 ++++++------ client/__tests__/util/helpers.ts | 12 ++++++++++++ 2 files changed, 18 insertions(+), 6 deletions(-) diff --git a/client/__tests__/e2e/e2e.test.ts b/client/__tests__/e2e/e2e.test.ts index 5c133e37e..e32c88dba 100644 --- a/client/__tests__/e2e/e2e.test.ts +++ b/client/__tests__/e2e/e2e.test.ts @@ -66,6 +66,7 @@ import { pageURLSpatial, } from "../common/constants"; import { + closeBottomBanner, conditionallyToggleSidePanel, goToPage, shouldSkipTests, @@ -227,12 +228,7 @@ for (const testDataset of testDatasets) { test("bottom banner disappears", async ({ page }, testInfo) => { await goToPage(page, url); - const bottomBanner = page.getByTestId("bottom-banner"); - - const bottomBannerClose = bottomBanner.getByRole("button"); - - await bottomBannerClose.click(); - + const bottomBanner = await closeBottomBanner(page) await expect(bottomBanner).not.toBeVisible(); await snapshotTestGraph(page, testInfo); @@ -346,6 +342,8 @@ for (const testDataset of testDatasets) { await conditionallyToggleSidePanel(page, graphTestId, SIDE_PANEL); + await closeBottomBanner(page); + const originalCellCount = await getCellSetCount(1, page); for (const cellset of data.cellsets.lasso) { @@ -538,6 +536,8 @@ for (const testDataset of testDatasets) { await conditionallyToggleSidePanel(page, graphTestId, SIDE_PANEL); + await closeBottomBanner(page) + const lassoSelection = await calcDragCoordinates( graphTestId, data.subset.lasso["coordinates-as-percent"], diff --git a/client/__tests__/util/helpers.ts b/client/__tests__/util/helpers.ts index 1ce673cdd..da40dbb14 100644 --- a/client/__tests__/util/helpers.ts +++ b/client/__tests__/util/helpers.ts @@ -304,3 +304,15 @@ export function shouldSkipTests( ): boolean { return graphTestId === SIDE_PANEL; } + + +export async function closeBottomBanner(page: Page): Promise { + const bottomBanner = page.getByTestId("bottom-banner"); + + if(bottomBanner) { + const bottomBannerClose = bottomBanner.getByRole("button"); + await bottomBannerClose.click(); + } + + return bottomBanner; +} \ No newline at end of file From 4c929e00c35294fbc8469878b2e926e6c4aed579 Mon Sep 17 00:00:00 2001 From: rainandbare Date: Tue, 6 Aug 2024 14:54:52 +0000 Subject: [PATCH 06/12] chore: Updated [rdev] values.yaml image tags to sha-adad9b69 --- .infra/rdev/values.yaml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.infra/rdev/values.yaml b/.infra/rdev/values.yaml index 7ac2a399e..1edebeedb 100644 --- a/.infra/rdev/values.yaml +++ b/.infra/rdev/values.yaml @@ -2,7 +2,7 @@ stack: services: explorer: image: - tag: sha-95e62beb + tag: sha-adad9b69 replicaCount: 1 env: # env vars common to all deployment stages From 6dde5040e2da36fe6e5505360258967f97a0f099 Mon Sep 17 00:00:00 2001 From: Suzette McCanny Date: Tue, 6 Aug 2024 11:20:49 -0400 Subject: [PATCH 07/12] styling tweaks --- .../components/BottomBanner/BottomBanner.tsx | 6 ++-- .../src/components/BottomBanner/constants.ts | 1 + client/src/components/BottomBanner/style.ts | 28 ++++--------------- client/src/components/framework/container.tsx | 2 +- 4 files changed, 11 insertions(+), 26 deletions(-) diff --git a/client/src/components/BottomBanner/BottomBanner.tsx b/client/src/components/BottomBanner/BottomBanner.tsx index 727dec7d0..2ef7ae7bb 100644 --- a/client/src/components/BottomBanner/BottomBanner.tsx +++ b/client/src/components/BottomBanner/BottomBanner.tsx @@ -51,14 +51,14 @@ const BottomBanner = memo( dismissible sdsType="primary" onClose={setBottomBannerLastClosedTime} - // @ts-expect-error -- czifui Banner component types text prop as astring but the prop works with JSX as well + // @ts-expect-error -- czifui Banner component types text prop as a string but the prop works with JSX as well text={ - <> + {BOTTOM_BANNER_SURVEY_TEXT} {BOTTOM_BANNER_SURVEY_LINK_TEXT} - + } /> diff --git a/client/src/components/BottomBanner/constants.ts b/client/src/components/BottomBanner/constants.ts index b5c63fc82..191bb6b51 100644 --- a/client/src/components/BottomBanner/constants.ts +++ b/client/src/components/BottomBanner/constants.ts @@ -4,3 +4,4 @@ export const BOTTOM_BANNER_SURVEY_LINK_TEXT = "quick survey."; export const BOTTOM_BANNER_SURVEY_TEXT = "Send us feedback with this"; export const BOTTOM_BANNER_LAST_CLOSED_TIME_KEY = "bottomBannerLastClosedTime"; export const BOTTOM_BANNER_EXPIRATION_TIME_MS = 30 * 24 * 60 * 60 * 1000; // 30 days +// export const BOTTOM_BANNER_EXPIRATION_TIME_MS = 30 * 1000; // 30 seconds diff --git a/client/src/components/BottomBanner/style.ts b/client/src/components/BottomBanner/style.ts index abae58a11..cf6c75b5e 100644 --- a/client/src/components/BottomBanner/style.ts +++ b/client/src/components/BottomBanner/style.ts @@ -1,22 +1,20 @@ import styled from "@emotion/styled"; -import { Banner, Icon, fontBodyS } from "czifui"; +import { Banner, Icon } from "czifui"; import { beta100, beta400, gray500 } from "../theme"; export const SKINNY_MODE_BREAKPOINT_WIDTH = 960; export const BOTTOM_BANNER_ID = "bottom-banner"; export const StyledBanner = styled(Banner)` - ${fontBodyS} - - letter-spacing: -0.006em; - - height: auto; - @media (max-width: ${SKINNY_MODE_BREAKPOINT_WIDTH}px) { padding: 8px 16px; box-shadow: 0px 0px 4px 0px rgba(50, 50, 50, 0.75); } - + span { + font-family: "Roboto Condensed", "Helvetica Neue", "Helvetica", "Arial", + sans-serif; + font-weight: 400; + } /** * beta intent does not exist for SDS banner, but the colors do targeting * specific id to overwrite style @@ -57,23 +55,9 @@ export const StyledLink = styled.a` } `; -export const HeaderContainer = styled.div` - display: flex; - flex-direction: row; - justify-content: space-between; - align-items: flex-start; -`; - const STYLED_CLOSE_BUTTON_ICON_DENY_PROPS = ["hideCloseButton"]; export const StyledCloseButtonIcon = styled(Icon, { shouldForwardProp: (prop) => !STYLED_CLOSE_BUTTON_ICON_DENY_PROPS.includes(prop), })``; - -export const FooterContentWrapper = styled.div` - margin: 24px 24px 40px 24px; - display: flex; - flex-direction: column; - align-items: center; -`; diff --git a/client/src/components/framework/container.tsx b/client/src/components/framework/container.tsx index 83ca0e86d..9fbf3e420 100644 --- a/client/src/components/framework/container.tsx +++ b/client/src/components/framework/container.tsx @@ -15,7 +15,7 @@ function Container(props: any) {
Date: Tue, 6 Aug 2024 15:33:02 +0000 Subject: [PATCH 08/12] chore: Updated [rdev] values.yaml image tags to sha-84c1b50f --- .infra/rdev/values.yaml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.infra/rdev/values.yaml b/.infra/rdev/values.yaml index 1edebeedb..07b510d7c 100644 --- a/.infra/rdev/values.yaml +++ b/.infra/rdev/values.yaml @@ -2,7 +2,7 @@ stack: services: explorer: image: - tag: sha-adad9b69 + tag: sha-84c1b50f replicaCount: 1 env: # env vars common to all deployment stages From 7928a44a58d60946ad896eafd984967bcdcb2d30 Mon Sep 17 00:00:00 2001 From: Suzette McCanny Date: Tue, 6 Aug 2024 11:37:26 -0400 Subject: [PATCH 09/12] use index.ts for now --- .../components/BottomBanner/BottomBanner.tsx | 70 ---------------- client/src/components/BottomBanner/index.tsx | 82 ++++++++++++++++--- client/src/components/app.tsx | 2 +- 3 files changed, 71 insertions(+), 83 deletions(-) delete mode 100644 client/src/components/BottomBanner/BottomBanner.tsx diff --git a/client/src/components/BottomBanner/BottomBanner.tsx b/client/src/components/BottomBanner/BottomBanner.tsx deleted file mode 100644 index 2ef7ae7bb..000000000 --- a/client/src/components/BottomBanner/BottomBanner.tsx +++ /dev/null @@ -1,70 +0,0 @@ -import React, { memo } from "react"; -import { connect } from "react-redux"; -import { - BOTTOM_BANNER_ID, - StyledBanner, - StyledBottomBannerWrapper, - StyledLink, -} from "./style"; -import { - BOTTOM_BANNER_SURVEY_LINK_TEXT, - BOTTOM_BANNER_SURVEY_TEXT, -} from "./constants"; -import { AppDispatch, RootState } from "../../reducers"; - -export interface BottomBannerProps { - surveyLink: string; - showBottomBanner: boolean; - dispatch: AppDispatch; -} - -const mapStateToProps = (state: RootState) => ({ - showBottomBanner: state.showBottomBanner, -}); - -const mapDispatchToProps = (dispatch: AppDispatch) => ({ - dispatch, -}); - -const BottomBanner = memo( - ({ - surveyLink, - showBottomBanner, - dispatch, - }: BottomBannerProps): JSX.Element | null => { - const setBottomBannerLastClosedTime = () => { - dispatch({ - type: "update bottom banner last closed time", - time: Date.now(), - }); - }; - - if (!showBottomBanner) return null; - - return ( - <> - - - {BOTTOM_BANNER_SURVEY_TEXT} - - {BOTTOM_BANNER_SURVEY_LINK_TEXT} - - - } - /> - - - ); - } -); - -export default connect(mapStateToProps, mapDispatchToProps)(BottomBanner); diff --git a/client/src/components/BottomBanner/index.tsx b/client/src/components/BottomBanner/index.tsx index 9b2819802..2ef7ae7bb 100644 --- a/client/src/components/BottomBanner/index.tsx +++ b/client/src/components/BottomBanner/index.tsx @@ -1,12 +1,70 @@ -import BottomBanner from "./BottomBanner"; - -export { BottomBanner }; - -/* - NOTE: component code should go in BottomBanner.tsx - This index file is here so our imports are cleaner. - This way we can use - import { BottomBanner } from .../BottomBanner - rather than - import { BottomBanner } from .../BottomBanner/BottomBanner.tsx -*/ +import React, { memo } from "react"; +import { connect } from "react-redux"; +import { + BOTTOM_BANNER_ID, + StyledBanner, + StyledBottomBannerWrapper, + StyledLink, +} from "./style"; +import { + BOTTOM_BANNER_SURVEY_LINK_TEXT, + BOTTOM_BANNER_SURVEY_TEXT, +} from "./constants"; +import { AppDispatch, RootState } from "../../reducers"; + +export interface BottomBannerProps { + surveyLink: string; + showBottomBanner: boolean; + dispatch: AppDispatch; +} + +const mapStateToProps = (state: RootState) => ({ + showBottomBanner: state.showBottomBanner, +}); + +const mapDispatchToProps = (dispatch: AppDispatch) => ({ + dispatch, +}); + +const BottomBanner = memo( + ({ + surveyLink, + showBottomBanner, + dispatch, + }: BottomBannerProps): JSX.Element | null => { + const setBottomBannerLastClosedTime = () => { + dispatch({ + type: "update bottom banner last closed time", + time: Date.now(), + }); + }; + + if (!showBottomBanner) return null; + + return ( + <> + + + {BOTTOM_BANNER_SURVEY_TEXT} + + {BOTTOM_BANNER_SURVEY_LINK_TEXT} + + + } + /> + + + ); + } +); + +export default connect(mapStateToProps, mapDispatchToProps)(BottomBanner); diff --git a/client/src/components/app.tsx b/client/src/components/app.tsx index 601a42246..e17eda196 100644 --- a/client/src/components/app.tsx +++ b/client/src/components/app.tsx @@ -4,7 +4,7 @@ import { connect } from "react-redux"; import { ThemeProvider as EmotionThemeProvider } from "@emotion/react"; import { StylesProvider, ThemeProvider } from "@material-ui/core/styles"; import { theme } from "./theme"; -import { BottomBanner } from "./BottomBanner"; +import BottomBanner from "./BottomBanner"; import Controls from "./controls"; import DatasetSelector from "./datasetSelector/datasetSelector"; From d88c689f27365a950c4158edd6d550a7363c62c2 Mon Sep 17 00:00:00 2001 From: rainandbare Date: Tue, 6 Aug 2024 15:48:03 +0000 Subject: [PATCH 10/12] chore: Updated [rdev] values.yaml image tags to sha-ef66a398 --- .infra/rdev/values.yaml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.infra/rdev/values.yaml b/.infra/rdev/values.yaml index 07b510d7c..f694b6f66 100644 --- a/.infra/rdev/values.yaml +++ b/.infra/rdev/values.yaml @@ -2,7 +2,7 @@ stack: services: explorer: image: - tag: sha-84c1b50f + tag: sha-ef66a398 replicaCount: 1 env: # env vars common to all deployment stages From e55179083d57d48eeae6b34644e0acca9799cfdc Mon Sep 17 00:00:00 2001 From: Suzette McCanny Date: Tue, 6 Aug 2024 14:44:05 -0400 Subject: [PATCH 11/12] fix tests again --- client/__tests__/e2e/e2e.test.ts | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/client/__tests__/e2e/e2e.test.ts b/client/__tests__/e2e/e2e.test.ts index e32c88dba..677db2912 100644 --- a/client/__tests__/e2e/e2e.test.ts +++ b/client/__tests__/e2e/e2e.test.ts @@ -749,6 +749,7 @@ for (const testDataset of testDatasets) { }); describe("graph overlay", () => { + test("transform centroids correctly", async ({ page }, testInfo) => { skipIfSidePanel(graphTestId, MAIN_PANEL); @@ -847,6 +848,7 @@ for (const testDataset of testDatasets) { }, testInfo) => { await goToPage(page, url); await conditionallyToggleSidePanel(page, graphTestId, SIDE_PANEL); + await closeBottomBanner(page); await tryUntil( async () => { @@ -903,6 +905,7 @@ for (const testDataset of testDatasets) { test("lasso moves after pan", async ({ page }, testInfo) => { await goToPage(page, url); await conditionallyToggleSidePanel(page, graphTestId, SIDE_PANEL); + await closeBottomBanner(page); await tryUntil( async () => { @@ -1733,7 +1736,12 @@ async function setup({ testInfo: TestInfo; }) { await goToPage(page, url); - + await tryUntil( + async () => { + await closeBottomBanner(page); + }, + { page } + ); if (withSubset) { await subset({ x1: 0.1, y1: 0.15, x2: 0.8, y2: 0.85 }, page, testInfo); } From e2f5920c17cc93d22ab707eda190102ac3e7eda6 Mon Sep 17 00:00:00 2001 From: rainandbare Date: Tue, 6 Aug 2024 18:54:03 +0000 Subject: [PATCH 12/12] chore: Updated [rdev] values.yaml image tags to sha-4c9517de --- .infra/rdev/values.yaml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.infra/rdev/values.yaml b/.infra/rdev/values.yaml index f694b6f66..344930479 100644 --- a/.infra/rdev/values.yaml +++ b/.infra/rdev/values.yaml @@ -2,7 +2,7 @@ stack: services: explorer: image: - tag: sha-ef66a398 + tag: sha-4c9517de replicaCount: 1 env: # env vars common to all deployment stages