fix(epo-widget-lib): fix isochroneplot step to 0.0.5

packages/epo-widget-lib/CHANGELOG.md

@@ -112,3 +112,7 @@
 # 1.0.6
 
 - fix: `IsochronePlot` does not show marks and increase age to 3 decimal places
+
+# 1.0.7
+
+- fix: `IsochronePlot` step fixed to `0.05`

packages/epo-widget-lib/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rubin-epo/epo-widget-lib",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "description": "Rubin Observatory Education & Public Outreach team React scientific and educational widgets.",
   "author": "Rubin EPO",
   "license": "MIT",

packages/epo-widget-lib/src/types/charts.d.ts

@@ -76,7 +76,7 @@ export interface PlotPoint {
   fill?: string;
   radius?: number;
   index?: string | number;
-  id: string | number;
+  id?: string | number;
   x: number;
   y: number;
   error?: {

packages/epo-widget-lib/src/widgets/IsochronePlot/IsochronePlot.stories.tsx

@@ -1,6 +1,6 @@
 import { Meta, StoryFn, StoryObj } from "@storybook/react";
 import IsochronePlot from ".";
-import { getAgeLibrary } from "./mock";
+import library from "./mock/iso_lib.json";
 import data from "./mock/points.json";
 import { useState } from "react";
 
@@ -39,7 +39,7 @@ export const Primary: StoryObj<typeof IsochronePlot> = Template.bind({});
 Primary.args = { ...props };
 Primary.loaders = [
   async () => ({
-    ageLibrary: await getAgeLibrary(),
+    ageLibrary: library,
   }),
 ];
 

packages/epo-widget-lib/src/widgets/IsochronePlot/index.tsx

@@ -1,10 +1,9 @@
 import { FunctionComponent, useId, useState } from "react";
 import { useTranslation } from "react-i18next";
 import useResizeObserver from "use-resize-observer";
-import round from "lodash/round";
 import { token } from "@rubin-epo/epo-react-lib/styles";
 
-import { AxisConfig, Point, PlotPoint } from "@/types/charts";
+import { AxisConfig, Point, PlotPoint, ScaleFunction } from "@/types/charts";
 import WidgetControls from "@/layout/Controls";
 import ScatterPlot from "@/charts/ScatterPlot";
 import ResetButton from "@/atomic/Button/patterns/Reset";
@@ -47,6 +46,36 @@ const getPointRadius = (width?: number) => {
   return defaults.pointRadius.lg;
 };
 
+const validKey = (age: number, ages: Array<string>, precision = 2): string => {
+  if (precision < 0) return "";
+
+  const key = age.toFixed(precision);
+
+  if (ages.includes(key)) {
+    return key;
+  } else {
+    return validKey(age, ages, precision - 1);
+  }
+};
+
+const isochroneLibrary = (
+  age: number,
+  xScale: ScaleFunction,
+  yScale: ScaleFunction,
+  ages: Record<string, Array<Point>>
+): Array<Point> => {
+  const key = validKey(age, Object.keys(ages));
+  const library = ages[key];
+
+  if (library) {
+    return library.map(({ x, y }) => {
+      return { x: xScale(x), y: yScale(y) };
+    });
+  } else {
+    return [];
+  }
+};
+
 const IsochronePlot: FunctionComponent<Props> = ({
   data,
   value: userValue,
@@ -89,7 +118,7 @@ const IsochronePlot: FunctionComponent<Props> = ({
     age: {
       min: ageValues.length > 0 ? Math.min(...ageValues) : 0,
       max: ageValues.length > 0 ? Math.max(...ageValues) : 0,
-      step: round(ageValues[1] - ageValues[0], 1) || 0.5,
+      step: 0.05,
     },
     distance: { min: 0, max: yAxis.min + 1, step: 0.05 },
   };
@@ -151,10 +180,8 @@ const IsochronePlot: FunctionComponent<Props> = ({
           xEnd,
           yDomain,
         }) => {
-          const isochrone =
-            (ages[age.toFixed(1)] || []).map(({ x, y }) => {
-              return { x: xScale(x), y: yScale(y) };
-            }) || [];
+          const isochrone = isochroneLibrary(age, xScale, yScale, ages);
+
           const offset = yScale(distance + yDomain[1]);
 
           return (