diff --git a/v3/cypress/e2e/graph.spec.ts b/v3/cypress/e2e/graph.spec.ts index 9c6e4e0682..829037c09b 100644 --- a/v3/cypress/e2e/graph.spec.ts +++ b/v3/cypress/e2e/graph.spec.ts @@ -283,6 +283,23 @@ context("Graph UI", () => { cy.wait(500) cy.get("[data-testid=show-parent-toggles]").should("exist").and("have.text", "Show Parent Visibility Toggles") }) + // TODO: Get the tests below working. For some reason, the banner isn't being rendered in Cypress even though it + // seems to render fine in the browser. + // it("It adds a banner to the graph when Show Measures for Selection is activated", () => { + // cy.dragAttributeToTarget("table", "Sleep", "bottom") + // cy.get("[data-testid=measures-for-selection-banner]").should("not.exist") + // graph.getHideShowButton().click() + // cy.wait(500) + // cy.get("[data-testid=show-selection-measures]").click() + // cy.wait(500) + // cy.get("[data-testid=measures-for-selection-banner]") + // .should("exist").and("have.text", "Showing measures for 0 selected cases") + // graph.getHideShowButton().click() + // cy.wait(500) + // cy.get("[data-testid=show-selection-measures]").click() + // cy.wait(500) + // cy.get("[data-testid=measures-for-selection-banner]").should("not.exist") + // }) it("disables Point Size control when display type is bars", () => { cy.dragAttributeToTarget("table", "Sleep", "bottom") cy.wait(500) diff --git a/v3/src/components/graph/adornments/adornments.tsx b/v3/src/components/graph/adornments/adornments.tsx index 14169e4530..f57ea1f244 100644 --- a/v3/src/components/graph/adornments/adornments.tsx +++ b/v3/src/components/graph/adornments/adornments.tsx @@ -14,6 +14,7 @@ import { useGraphLayoutContext } from "../hooks/use-graph-layout-context" import { getAdornmentComponentInfo } from "./adornment-component-info" import { updateCellKey } from "./adornment-utils" import { kGraphAdornmentsBannerHeight } from "./adornment-types" +import { MeasuresForSelectionBanner } from "./measures-for-selection-banner" import "./adornments.scss" @@ -29,7 +30,8 @@ export const Adornments = observer(function Adornments() { useEffect(function handleAdornmentBannerCountChange() { return mstAutorun(() => { - const bannerCount = graphModel.adornmentsStore.activeBannerCount + let bannerCount = graphModel.showMeasuresForSelection ? 1 : 0 + bannerCount += graphModel.adornmentsStore.activeBannerCount const bannersHeight = bannerCount * kGraphAdornmentsBannerHeight layout.setDesiredExtent("banners", bannersHeight) }, { name: "Graph.handleAdornmentBannerCountChange" }, graphModel @@ -154,11 +156,12 @@ export const Adornments = observer(function Adornments() { ) return ( <> - {adornmentBanners && -
- {adornmentBanners} -
- } + {adornmentBanners && +
+ {graphModel.showMeasuresForSelection && } + {adornmentBanners} +
+ }
{outerGridCells}
diff --git a/v3/src/components/graph/adornments/measures-for-selection-banner.scss b/v3/src/components/graph/adornments/measures-for-selection-banner.scss new file mode 100644 index 0000000000..71e3a7e890 --- /dev/null +++ b/v3/src/components/graph/adornments/measures-for-selection-banner.scss @@ -0,0 +1,18 @@ +@use "../../vars.scss" as *; + +.measures-for-selection-banner { + background: $background-fill; + border: none; + color: #000; + display: flex; + flex-direction: column; + font: 12px "MuseoSans-500", sans-serif; + justify-content: center; + line-height: 1; + min-height: 22px; + overflow: hidden; + padding: 0 5px; + pointer-events: all; + text-align: left; + width: calc(100% - 10px); +} diff --git a/v3/src/components/graph/adornments/measures-for-selection-banner.tsx b/v3/src/components/graph/adornments/measures-for-selection-banner.tsx new file mode 100644 index 0000000000..18f3cb4cb3 --- /dev/null +++ b/v3/src/components/graph/adornments/measures-for-selection-banner.tsx @@ -0,0 +1,19 @@ +import React from "react" +import { observer } from "mobx-react-lite" +import { t } from "../../../utilities/translation/translate" +import { useGraphDataConfigurationContext } from "../hooks/use-graph-data-configuration-context" + +import "./measures-for-selection-banner.scss" + +export const MeasuresForSelectionBanner = observer(function MeasuresForSelectionBanner() { + const dataConfig = useGraphDataConfigurationContext() + const content = dataConfig?.selection.length === 1 + ? t("DG.SelectedInfoView.infoSing", { vars: [1] }) + : t("DG.SelectedInfoView.infoPlural", { vars: [dataConfig?.selection.length] }) + + return ( +
+ {content} +
+ ) +}) diff --git a/v3/src/components/graph/components/inspector-panel/hide-show-menu-list.tsx b/v3/src/components/graph/components/inspector-panel/hide-show-menu-list.tsx index 6f8e902ee0..7e142f61e9 100644 --- a/v3/src/components/graph/components/inspector-panel/hide-show-menu-list.tsx +++ b/v3/src/components/graph/components/inspector-panel/hide-show-menu-list.tsx @@ -69,8 +69,9 @@ export const HideShowMenuList = observer(function HideShowMenuList({tile}: IProp } const handleParentTogglesChange = () => { - const undoStringKey = graphModel?.showParentToggles ? "DG.Undo.disableNumberToggle" : "DG.Undo.enableNumberToggle" - const redoStringKey = graphModel?.showParentToggles ? "DG.Redo.disableNumberToggle" : "DG.Redo.enableNumberToggle" + const [undoStringKey, redoStringKey] = graphModel?.showParentToggles + ? ["DG.Undo.disableNumberToggle", "DG.Redo.disableNumberToggle"] + : ["DG.Undo.enableNumberToggle", "DG.Redo.enableNumberToggle"] dataConfig?.applyModelChange( () => graphModel?.setShowParentToggles(!graphModel?.showParentToggles), @@ -78,6 +79,16 @@ export const HideShowMenuList = observer(function HideShowMenuList({tile}: IProp ) } + const handleMeasuresForSelectionChange = () => { + const [undoStringKey, redoStringKey] = graphModel?.showMeasuresForSelection + ? ["DG.Undo.disableMeasuresForSelection", "DG.Redo.disableMeasuresForSelection"] + : ["DG.Undo.enableMeasuresForSelection", "DG.Redo.enableMeasuresForSelection"] + dataConfig?.applyModelChange( + () => graphModel?.setShowMeasuresForSelection(!graphModel?.showMeasuresForSelection), + { undoStringKey, redoStringKey } + ) + } + const numSelected = dataConfig?.selection.length ?? 0, hideSelectedIsDisabled = numSelected === 0, hideSelectedString = (numSelected === 1) ? t("DG.DataDisplayMenu.hideSelectedSing") @@ -113,8 +124,7 @@ export const HideShowMenuList = observer(function HideShowMenuList({tile}: IProp {parentToggleString} - graphModel?.setShowMeasuresForSelection(!graphModel?.showMeasuresForSelection)} - data-testid="show-selection-measures"> + {measuresForSelectionString}