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
-