fix: Graph has option to Display Only Selected Cases (PT-187458777) (#…

…1258)

* fix: Numeric legend shows `NaN` when all cases hidden.

* fix: axis not updating on case selection

* chore: fine tune numeric legend behavior

v3/src/components/axis/hooks/use-sub-axis.ts

@@ -16,6 +16,7 @@ import {DragInfo, collisionExists, computeBestNumberOfTicks, getCategoricalLabel
 import { useAxisProviderContext } from "./use-axis-provider-context"
 import { useDataDisplayModelContext } from "../../data-display/hooks/use-data-display-model"
 import { mstReaction } from "../../../utilities/mst-reaction"
+import { setNiceDomain } from "../../graph/utilities/graph-utils"
 
 export interface IUseSubAxis {
   subAxisIndex: number
@@ -399,33 +400,39 @@ export const useSubAxis = ({
     }
   }, [axisModel, renderSubAxis, layout, isCategorical, setupCategories])
 
-  const updateCategoriesAndRenderSubAxis = useCallback(() => {
+  const updateDomainAndRenderSubAxis = useCallback(() => {
     const role = axisPlaceToAttrRole[axisPlace]
-    const categoryValues = dataConfig?.categoryArrayForAttrRole(role) ?? []
-    layout.getAxisMultiScale(axisPlace)?.setCategoricalDomain(categoryValues)
-    setupCategories()
+    if (isCategoricalAxisModel(axisModel)) {
+      const categoryValues = dataConfig?.categoryArrayForAttrRole(role) ?? []
+      layout.getAxisMultiScale(axisPlace)?.setCategoricalDomain(categoryValues)
+      setupCategories()
+    } else if (isNumericAxisModel(axisModel)) {
+      const numericValues = dataConfig?.numericValuesForAttrRole(role) ?? []
+      layout.getAxisMultiScale(axisPlace)?.setNumericDomain(numericValues)
+      axisModel && setNiceDomain(numericValues, axisModel)
+    }
     renderSubAxis()
-  }, [axisPlace, dataConfig, layout, renderSubAxis, setupCategories])
+  }, [axisModel, axisPlace, dataConfig, layout, renderSubAxis, setupCategories])
 
   useEffect(function respondToSelectionChanges() {
     if (dataConfig?.dataset) {
       return mstReaction(
         () => dataConfig.displayOnlySelectedCases && dataConfig?.dataset?.selectionChanges,
-        () => updateCategoriesAndRenderSubAxis(),
+        () => updateDomainAndRenderSubAxis(),
         {name: "useSubAxis.respondToSelectionChanges"}, dataConfig
       )
     }
-  }, [dataConfig, updateCategoriesAndRenderSubAxis])
+  }, [dataConfig, updateDomainAndRenderSubAxis])
 
   useEffect(function respondToHiddenCasesChange() {
     if (dataConfig) {
       return mstReaction(
         () => dataConfig.hiddenCases.length,
-        () => updateCategoriesAndRenderSubAxis(),
+        () => updateDomainAndRenderSubAxis(),
         {name: "useSubAxis.respondToHiddenCasesChange"}, dataConfig
       )
     }
-  }, [dataConfig, updateCategoriesAndRenderSubAxis])
+  }, [dataConfig, updateDomainAndRenderSubAxis])
 
   // update d3 scale and axis when layout/range changes
   useEffect(() => {

v3/src/components/data-display/components/legend/choropleth-legend/choropleth-legend.ts

@@ -17,6 +17,11 @@ export type ChoroplethLegendProps = {
 
 type ChoroplethScale = ScaleQuantile<string>
 export function choroplethLegend(scale: ChoroplethScale, choroplethElt: SVGGElement, props: ChoroplethLegendProps) {
+  if (scale.domain().length === 0) {
+    select(choroplethElt).selectAll("*").remove()
+    return
+  }
+
   const {
       tickSize = 6, transform = '', width = 320, marginTop = 0, marginRight = 0, marginLeft = 0,
       ticks = 5, clickHandler, casesInQuantileSelectedHandler

v3/src/components/data-display/components/legend/numeric-legend.tsx

@@ -2,6 +2,7 @@ import {ScaleQuantile, scaleQuantile, schemeBlues} from "d3"
 import {reaction} from "mobx"
 import {observer} from "mobx-react-lite"
 import React, {useCallback, useEffect, useRef, useState} from "react"
+import { mstReaction } from "../../../../utilities/mst-reaction"
 import {isSelectionAction} from "../../../../models/data/data-set-actions"
 import { setOrExtendSelection } from "../../../../models/data/data-set-utils"
 import {axisGap} from "../../../axis/axis-types"
@@ -44,7 +45,28 @@ export const NumericLegend =
       }
 
       if (choroplethElt) {
-        valuesRef.current = dataConfiguration?.numericValuesForAttrRole('legend') ?? []
+        /**
+         *  Adjust the value range displayed by the legend based on the data configuration model's properties:
+         *  1. If all cases are hidden, the legend displays no range.
+         *  2. If `displayOnlySelectedCases` is true and not all cases are visible, the legend displays the range of all
+         *     cases, both hidden and visible.
+         *  3. Otherwise, the legend displays the range of only the visible cases.
+         *  
+         *  TODO: When `displayOnlySelectedCases` is true and all visible cases have the exact same value for the legend
+         *  attribute, the legend should only reflect the values of the case(s) shown.
+         */
+        const allCasesCount = dataConfiguration?.dataset?.cases.length ?? 0
+        const hiddenCasesCount = dataConfiguration?.hiddenCases.length ?? 0
+        const allCasesHidden = hiddenCasesCount === allCasesCount
+        if (allCasesHidden) {
+          valuesRef.current = []
+        } else if (dataConfiguration?.displayOnlySelectedCases && hiddenCasesCount > 0) {
+          const attribute = dataConfiguration?.dataset?.attrFromID(dataConfiguration?.attributeID("legend"))
+          valuesRef.current = attribute?.numValues ?? []
+        } else {
+          valuesRef.current = dataConfiguration?.numericValuesForAttrRole("legend") ?? []
+        }
+
         setDesiredExtent(layerIndex, computeDesiredExtent())
         quantileScale.current.domain(valuesRef.current).range(schemeBlues[5])
         choroplethLegend(quantileScale.current, choroplethElt,
@@ -90,6 +112,13 @@ export const NumericLegend =
     })
   }, [refreshScale, dataConfiguration])
 
+  useEffect(function respondToHiddenCaseChange() {
+  return mstReaction(
+    () => dataConfiguration?.hiddenCases.length,
+    () => refreshScale(),
+    {name: "NumericLegend respondToHiddenCaseChange"}, dataConfiguration)
+  }, [dataConfiguration, refreshScale])
+
   // todo: This reaction is not being triggered when a legend attribute value is changed.
   // It should be.
   useEffect(function respondToNumericValuesChange() {