feat: Graph option Show Measures for Selection (PT-187459320) (#1287)

* feat: Graph option Show Measures for Selection (PT-187459320) [#187459320](https://www.pivotaltracker.com/story/show/187459320)
concord-consortium · May 31, 2024 · a1c2a1b · a1c2a1b
1 parent 9e4823b
commit a1c2a1b
Show file tree

Hide file tree

Showing 5 changed files with 77 additions and 10 deletions.
diff --git 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
@@ -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 &&
-      <div className="graph-adornments-banners" data-testid="graph-adornments-banners">
-        {adornmentBanners}
-      </div>
-    }
+      {adornmentBanners &&
+        <div className="graph-adornments-banners" data-testid="graph-adornments-banners">
+          {graphModel.showMeasuresForSelection && <MeasuresForSelectionBanner />}
+          {adornmentBanners}
+        </div>
+      }
       <div className={containerClass} data-testid={kGraphAdornmentsClass} style={outerGridStyle}>
         {outerGridCells}
       </div>

diff --git a/v3/src/components/graph/adornments/measures-for-selection-banner.scss 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
@@ -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 (
+    <div className="measures-for-selection-banner" data-testid="measures-for-selection-banner">
+      {content}
+    </div>
+  )
+})
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
@@ -69,15 +69,26 @@ 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),
       { undoStringKey, redoStringKey }
     )
   }
 
+  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
       <MenuItem onClick={handleParentTogglesChange} data-testid="show-parent-toggles">
         {parentToggleString}
       </MenuItem>
-      <MenuItem onClick={() => graphModel?.setShowMeasuresForSelection(!graphModel?.showMeasuresForSelection)}
-       data-testid="show-selection-measures">
+      <MenuItem onClick={handleMeasuresForSelectionChange} data-testid="show-selection-measures">
         {measuresForSelectionString}
       </MenuItem>
     </MenuList>