fix(packages/shared-components): ensure that sample solutions are alw…

…ays visible on evaluation histogram (#4420)
uzh-bf · Dec 30, 2024 · d73c976 · d73c976
1 parent 4bdc708
commit d73c976
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 9 deletions.
diff --git a/packages/shared-components/src/charts/ElementHistogram.tsx b/packages/shared-components/src/charts/ElementHistogram.tsx
@@ -60,9 +60,18 @@ function ElementHistogram({
   const supportedElementTypes = [ElementType.Numerical]
   const [numBins, setNumBins] = useState('20')
 
+  const showSolutionRanges = showSolution && solutionRanges
+  const showExactSolutions =
+    showSolution && exactSolutions && exactSolutions.length > 0
   const processedData = useEvaluationHistogramData({
     type,
     responses,
+    solutionRanges: showSolutionRanges ? solutionRanges : undefined,
+    exactSolutions: showExactSolutions
+      ? exactSolutions.map((solution) =>
+          typeof solution === 'number' ? solution : parseFloat(solution)
+        )
+      : undefined,
     minValue,
     maxValue,
     binCount: parseInt(numBins),
@@ -214,8 +223,7 @@ function ElementHistogram({
             />
           )}
 
-          {showSolution &&
-            solutionRanges &&
+          {showSolutionRanges &&
             solutionRanges.map(
               (
                 solutionRange: { min?: number | null; max?: number | null },
@@ -243,9 +251,7 @@ function ElementHistogram({
               )
             )}
 
-          {showSolution &&
-            exactSolutions &&
-            exactSolutions.length > 0 &&
+          {showExactSolutions &&
             exactSolutions.map((solution, idx) => (
               <ReferenceLine
                 key={`exact-solution-${idx}`}

diff --git a/packages/shared-components/src/evaluation/NREvaluation.tsx b/packages/shared-components/src/evaluation/NREvaluation.tsx
@@ -26,10 +26,10 @@ function NREvaluation({ options, evaluation, reference }: NREvaluationProps) {
         exactSolutions={options.exactSolutions ?? undefined}
         minValue={options.restrictions?.min}
         maxValue={options.restrictions?.max}
-        showSolution={true}
         textSize="md"
         className={{ root: 'h-40' }}
         reference={reference ? parseFloat(reference) : undefined}
+        showSolution
         hideBins
         basic
       />

diff --git a/packages/shared-components/src/hooks/useEvaluationHistogramData.tsx b/packages/shared-components/src/hooks/useEvaluationHistogramData.tsx
@@ -1,10 +1,15 @@
-import { ElementType } from '@klicker-uzh/graphql/dist/ops'
+import {
+  ElementType,
+  type NumericalSolutionRange,
+} from '@klicker-uzh/graphql/dist/ops'
 import { maxBy, minBy, round, sumBy } from 'lodash'
 import { useMemo } from 'react'
 
 interface UseEvaluationHistogramDataProps {
   type: ElementType
   responses: { value: number; count: number }[]
+  solutionRanges?: NumericalSolutionRange[] | null
+  exactSolutions?: number[] | null
   minValue?: number | null
   maxValue?: number | null
   binCount: number
@@ -13,6 +18,8 @@ interface UseEvaluationHistogramDataProps {
 function useEvaluationHistogramData({
   type,
   responses,
+  solutionRanges,
+  exactSolutions,
   minValue,
   maxValue,
   binCount,
@@ -22,15 +29,27 @@ function useEvaluationHistogramData({
       return null
     }
 
+    // use the minima defined for the solution ranges and exact solutions to compute the bounds for the histogram
+    const solutionRangesMin =
+      minBy(solutionRanges, 'min')?.min ?? Number.MAX_VALUE
+    const solutionRangesMax =
+      maxBy(solutionRanges, 'max')?.max ?? Number.MIN_VALUE
+    const exactSolutionsMin = minBy(exactSolutions) ?? Number.MAX_VALUE
+    const exactSolutionsMax = maxBy(exactSolutions) ?? Number.MIN_VALUE
+    const solutionsMin = Math.min(solutionRangesMin, exactSolutionsMin)
+    const solutionsMax = Math.max(solutionRangesMax, exactSolutionsMax)
+
+    // compute the lower and upper bounds of the histogram
     const min: number =
       minValue !== null && typeof minValue === 'number'
         ? minValue
-        : (minBy(responses, 'value')?.value ?? 0) - 10
+        : Math.min(minBy(responses, 'value')?.value ?? 0, solutionsMin) - 10
     const max: number =
       maxValue !== null && typeof maxValue === 'number'
         ? maxValue
-        : (maxBy(responses, 'value')?.value ?? 0) + 10
+        : Math.max(maxBy(responses, 'value')?.value ?? 0, solutionsMax) + 10
 
+    // organize the data into histogram bins based on the computed min and max values
     let dataArray = Array.from({ length: binCount }, (_, i) => ({
       value: min + (max - min) * (i / binCount) + (max - min) / (2 * binCount),
     }))