@rubin-epo/epo-widget-lib 0.9.6 → 0.9.8

package/dist/localeStrings/en/epo-widget-lib.json

@@ -107,8 +107,8 @@
     },
     "curve": {
       "controls": {
-        "gaussian_width": "Gaussian Width",
-        "y_offset": "Y Offset"
+        "gaussian_width": "Curve Width",
+        "y_offset": "Vertical (y) Offset"
       },
       "description_above": "Mean distance from observations is {{residual}}, your peak is above the brightest measurement of {{brightest}}",
       "description_below": "Mean distance from observations is {{residual}}, your peak is below the brightest measurement of {{brightest}}"

package/dist/widgets/LightCurvePlot/LightCurve/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const c=require("react/jsx-runtime"),g=require("d3-array"),v=require("../helpers.cjs"),n=({xScale:s,xDomain:t,yScale:r,yDomain:u,gaussianWidth:i,yOffset:a})=>{const o=g.range(t[0],t[1],.5).map(e=>({x:e,y:v.estimateMagnitude(e,i)})).map(({x:e,y:d},l)=>`${l===0?"M":"L"}${s(e)},${r(d)}`).join("");return c.jsx("path",{transform:`translate(0,${r(u[0]-a)})`,d:o,fill:"none",strokeWidth:2,stroke:"var(--black,#000)",pointerEvents:"none"})};n.displayName="Widgets.LightCurve.Curve";const m=n;exports.default=m;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const c=require("react/jsx-runtime"),g=require("d3-array"),v=require("../helpers.cjs"),n=({xScale:s,xDomain:t,yScale:r,yDomain:u,gaussianWidth:i,yOffset:a})=>{const o=g.range(t[0],t[1],.5).map(e=>({x:e,y:v.estimateMagnitude(e,i)})).map(({x:e,y:d},l)=>`${l===0?"M":"L"}${s(e)},${r(d)}`).join("");return c.jsx("path",{transform:`translate(0,${r(u[1]-a)})`,d:o,fill:"none",strokeWidth:2,stroke:"var(--black,#000)",pointerEvents:"none"})};n.displayName="Widgets.LightCurve.Curve";const m=n;exports.default=m;

package/dist/widgets/LightCurvePlot/LightCurve/index.js

@@ -13,7 +13,7 @@ const n = ({
   return /* @__PURE__ */ d(
     "path",
     {
-      transform: `translate(0,${e(s[0] - i)})`,
+      transform: `translate(0,${e(s[1] - i)})`,
       d: m,
       fill: "none",
       strokeWidth: 2,

package/dist/widgets/LightCurvePlot/MagnitudeSlider/index.cjs

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("react/jsx-runtime"),h=require("react-i18next"),a=require("./styles.cjs"),x=(t,n,s)=>{const i=Number(Math.abs(n-t).toFixed(1)),u=i.toLocaleString(s,{minimumFractionDigits:1,maximumFractionDigits:1});let e;return i<=.05?(e="equal",{distance:i,context:e}):(t<n?e="above":e="below",{distance:u,context:e})},c=({magnitude:t,yMin:n,yMax:s,onMagnitudeChangeCallback:i,estimatedPeak:u,disabled:e,width:v,height:S})=>{const{t:l,i18n:{language:o}}=h.useTranslation();return r.jsx(a.Slider,{ariaLabel:l("light_curve.magnitude_slider.label")||void 0,orientation:"vertical",value:t,min:n,max:s,step:.1,disabled:e,ariaValuetext:()=>l("light_curve.magnitude_slider.value",{...x(u,t,o),magnitude:t.toLocaleString(o,{minimumFractionDigits:1,maximumFractionDigits:1})}),onChange:i,renderThumb:({key:d,style:m,...g})=>r.jsxs(a.ThumbContainer,{...g,style:m,children:[r.jsx(a.ThumbBar,{}),r.jsx(a.ThumbHandle,{})]},d)})};c.displayName="Widgets.LightCurve.MagnitudeSlider";const b=c;exports.default=b;
+"use client";"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("react/jsx-runtime"),h=require("react-i18next"),s=require("./styles.cjs"),v=(t,i,a)=>{const n=Number(Math.abs(i-t).toFixed(1)),u=n.toLocaleString(a,{minimumFractionDigits:1,maximumFractionDigits:1});let e;return n<=.05?(e="equal",{distance:n,context:e}):(t<i?e="above":e="below",{distance:u,context:e})},c=({magnitude:t,yMin:i,yMax:a,onMagnitudeChangeCallback:n,estimatedPeak:u,disabled:e})=>{const{t:o,i18n:{language:l}}=h.useTranslation(),m=Math.min(i,a),d=Math.max(i,a);return r.jsx(s.Slider,{ariaLabel:o("light_curve.magnitude_slider.label")||void 0,orientation:"vertical",value:t,step:.1,ariaValuetext:()=>o("light_curve.magnitude_slider.value",{...v(u,t,l),magnitude:t.toLocaleString(l,{minimumFractionDigits:1,maximumFractionDigits:1})}),onChange:n,renderThumb:({key:g,style:x,...b})=>r.jsxs(s.ThumbContainer,{...b,style:x,children:[r.jsx(s.ThumbBar,{}),r.jsx(s.ThumbHandle,{})]},g),min:m,max:d,disabled:e})};c.displayName="Widgets.LightCurve.MagnitudeSlider";const S=c;exports.default=S;

package/dist/widgets/LightCurvePlot/MagnitudeSlider/index.js

@@ -1,55 +1,53 @@
 "use client";
-import { jsx as o, jsxs as g } from "react/jsx-runtime";
-import { useTranslation as h } from "react-i18next";
-import { Slider as b, ThumbContainer as x, ThumbBar as v, ThumbHandle as f } from "./styles.js";
-const p = (t, n, a) => {
-  const e = Number(Math.abs(n - t).toFixed(1)), r = e.toLocaleString(a, {
+import { jsx as o, jsxs as b } from "react/jsx-runtime";
+import { useTranslation as x } from "react-i18next";
+import { Slider as v, ThumbContainer as f, ThumbBar as p, ThumbHandle as S } from "./styles.js";
+const D = (i, e, a) => {
+  const n = Number(Math.abs(e - i).toFixed(1)), r = n.toLocaleString(a, {
     minimumFractionDigits: 1,
     maximumFractionDigits: 1
   });
-  let i;
-  return e <= 0.05 ? (i = "equal", { distance: e, context: i }) : (t < n ? i = "above" : i = "below", { distance: r, context: i });
-}, u = ({
-  magnitude: t,
-  yMin: n,
+  let t;
+  return n <= 0.05 ? (t = "equal", { distance: n, context: t }) : (i < e ? t = "above" : t = "below", { distance: r, context: t });
+}, s = ({
+  magnitude: i,
+  yMin: e,
   yMax: a,
-  onMagnitudeChangeCallback: e,
+  onMagnitudeChangeCallback: n,
   estimatedPeak: r,
-  disabled: i,
-  width: S,
-  height: D
+  disabled: t
 }) => {
   const {
-    t: l,
-    i18n: { language: m }
-  } = h();
+    t: m,
+    i18n: { language: l }
+  } = x(), u = Math.min(e, a), c = Math.max(e, a);
   return /* @__PURE__ */ o(
-    b,
+    v,
     {
-      ariaLabel: l("light_curve.magnitude_slider.label") || void 0,
+      ariaLabel: m("light_curve.magnitude_slider.label") || void 0,
       orientation: "vertical",
-      value: t,
-      min: n,
-      max: a,
+      value: i,
       step: 0.1,
-      disabled: i,
-      ariaValuetext: () => l("light_curve.magnitude_slider.value", {
-        ...p(r, t, m),
-        magnitude: t.toLocaleString(m, {
+      ariaValuetext: () => m("light_curve.magnitude_slider.value", {
+        ...D(r, i, l),
+        magnitude: i.toLocaleString(l, {
           minimumFractionDigits: 1,
           maximumFractionDigits: 1
         })
       }),
-      onChange: e,
-      renderThumb: ({ key: s, style: c, ...d }) => /* @__PURE__ */ g(x, { ...d, style: c, children: [
-        /* @__PURE__ */ o(v, {}),
-        /* @__PURE__ */ o(f, {})
-      ] }, s)
+      onChange: n,
+      renderThumb: ({ key: d, style: g, ...h }) => /* @__PURE__ */ b(f, { ...h, style: g, children: [
+        /* @__PURE__ */ o(p, {}),
+        /* @__PURE__ */ o(S, {})
+      ] }, d),
+      min: u,
+      max: c,
+      disabled: t
     }
   );
 };
-u.displayName = "Widgets.LightCurve.MagnitudeSlider";
-const L = u;
+s.displayName = "Widgets.LightCurve.MagnitudeSlider";
+const L = s;
 export {
   L as default
 };

package/dist/widgets/LightCurvePlot/PlotWithCurve/index.cjs

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),F=require("react-i18next"),g=require("d3-array"),H=require("@rubin-epo/epo-react-lib/HorizontalSlider"),_=require("../../../charts/hooks/useAxis.cjs"),t=require("../defaults.cjs"),B=require("../ScatterPlot/index.cjs"),N=require("../LightCurve/index.cjs"),w=require("../A11Y/LightCurveLabel/index.cjs"),S=require("../helpers.cjs"),E=require("../../../atomic/Button/patterns/Reset.cjs"),J=require("../MagnitudeSlider/index.cjs"),i=require("./styles.cjs"),K=l=>l&&l.__esModule?l:{default:l},y=K(H),L=({gaussianWidth:l=t.default.gaussianWidth,yOffset:a=t.default.yOffset,alerts:I,peakMjd:D,yMin:r=t.default.yMin,yMax:d=t.default.yMax,width:f=t.default.width,height:x=t.default.height,userMagnitude:P=(d-r)/2+r,onUserMagnitudeChangeCallback:o,onGaussianChangeCallback:n,onYOffsetChangeCallback:c,className:M,isDisplayOnly:m,...R})=>{const{t:j}=F.useTranslation(),p="lightCurveControls",q="gaussianWidthLabel",h="yOffsetLabel",u=S.formatMagnitudePoints(I,D),T=g.min(u,({x:s})=>s)||Math.min(...u.map(({x:s})=>s)),W=g.max(u,({x:s})=>s)||Math.max(...u.map(({x:s})=>s)),$=()=>{o&&o((d-r)/2+r),c&&c(t.default.yOffset),n&&n(t.default.gaussianWidth)},[O,V,z]=_.default({min:T,max:W,step:t.default.xStep,range:[0,f]}),[A,X,v]=_.default({min:r,max:d,step:t.default.yStep,range:[0,x]}),b=S.estimateMagnitudeWithOffset(0,l,a);return e.jsxs(i.Container,{className:M,children:[e.jsx(B.default,{slider:e.jsx(J.default,{magnitude:P,onMagnitudeChangeCallback:s=>o&&o(s),disabled:m,yMin:r,yMax:d,yScale:v,estimatedPeak:b,width:f,height:x}),...R,data:u,width:f,height:x,yMin:r,yMax:d,children:u.length>0?e.jsxs(e.Fragment,{children:[e.jsx(N.default,{gaussianWidth:l,yOffset:a,xDomain:O,xScale:z,yScale:v,yDomain:A}),e.jsx(i.DM15Display,{gaussianWidth:l})]}):null}),!m&&e.jsxs(i.Controls,{id:p,children:[e.jsxs("div",{children:[e.jsx(i.ControlLabel,{id:q,children:j("light_curve.curve.controls.gaussian_width")}),e.jsx(y.default,{label:"Gaussian Width",labelledbyId:q,color:"var(--turquoise85, #12726D)",min:t.default.gaussianMin,max:t.default.gaussianMax,step:t.default.gaussianStep,value:l,onChangeCallback:s=>typeof s=="number"&&n&&n(s)})]}),e.jsxs("div",{children:[e.jsx(i.ControlLabel,{id:h,children:j("light_curve.curve.controls.y_offset")}),e.jsx(y.default,{label:"Y Offset",labelledbyId:h,color:"var(--turquoise85, #12726D)",min:t.default.yOffsetMin,max:t.default.yOffsetMax,step:t.default.yOffsetStep,value:a,onChangeCallback:s=>typeof s=="number"&&c&&c(s)})]}),e.jsx(E.default,{onResetCallback:$})]}),e.jsx(w.default,{controlledById:p,data:u,gaussianWidth:l,yOffset:a,estimatedPeak:b})]})};L.displayName="Widgets.LightCurve";const Q=L;exports.default=Q;
+"use client";"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),F=require("react-i18next"),g=require("d3-array"),H=require("@rubin-epo/epo-react-lib/HorizontalSlider"),_=require("../../../charts/hooks/useAxis.cjs"),t=require("../defaults.cjs"),B=require("../ScatterPlot/index.cjs"),N=require("../LightCurve/index.cjs"),w=require("../A11Y/LightCurveLabel/index.cjs"),S=require("../helpers.cjs"),E=require("../../../atomic/Button/patterns/Reset.cjs"),J=require("../MagnitudeSlider/index.cjs"),i=require("./styles.cjs"),K=l=>l&&l.__esModule?l:{default:l},y=K(H),L=({gaussianWidth:l=t.default.gaussianWidth,yOffset:a=t.default.yOffset,alerts:I,peakMjd:D,yMin:r=t.default.yMin,yMax:d=t.default.yMax,width:f=t.default.width,height:x=t.default.height,userMagnitude:P=(d-r)/2+r,onUserMagnitudeChangeCallback:o,onGaussianChangeCallback:n,onYOffsetChangeCallback:c,className:M,isDisplayOnly:m,...R})=>{const{t:j}=F.useTranslation(),p="lightCurveControls",q="gaussianWidthLabel",h="yOffsetLabel",u=S.formatMagnitudePoints(I,D),T=g.min(u,({x:s})=>s)||Math.min(...u.map(({x:s})=>s)),W=g.max(u,({x:s})=>s)||Math.max(...u.map(({x:s})=>s)),$=()=>{o&&o((d-r)/2+r),c&&c(t.default.yOffset),n&&n(t.default.gaussianWidth)},[O,V,z]=_.default({min:T,max:W,step:t.default.xStep,range:[0,f]}),[A,X,v]=_.default({min:r,max:d,step:t.default.yStep,range:[x,0]}),b=S.estimateMagnitudeWithOffset(0,l,a);return e.jsxs(i.Container,{className:M,children:[e.jsx(B.default,{slider:e.jsx(J.default,{magnitude:P,onMagnitudeChangeCallback:s=>o&&o(s),disabled:m,yMin:r,yMax:d,yScale:v,estimatedPeak:b,width:f,height:x}),...R,data:u,width:f,height:x,yMin:r,yMax:d,children:u.length>0?e.jsxs(e.Fragment,{children:[e.jsx(N.default,{gaussianWidth:l,yOffset:a,xDomain:O,xScale:z,yScale:v,yDomain:A}),e.jsx(i.DM15Display,{gaussianWidth:l})]}):null}),!m&&e.jsxs(i.Controls,{id:p,children:[e.jsxs("div",{children:[e.jsx(i.ControlLabel,{id:q,children:j("light_curve.curve.controls.gaussian_width")}),e.jsx(y.default,{label:"Gaussian Width",labelledbyId:q,color:"var(--turquoise85, #12726D)",min:t.default.gaussianMin,max:t.default.gaussianMax,step:t.default.gaussianStep,value:l,onChangeCallback:s=>typeof s=="number"&&n&&n(s)})]}),e.jsxs("div",{children:[e.jsx(i.ControlLabel,{id:h,children:j("light_curve.curve.controls.y_offset")}),e.jsx(y.default,{label:"Y Offset",labelledbyId:h,color:"var(--turquoise85, #12726D)",min:t.default.yOffsetMin,max:t.default.yOffsetMax,step:t.default.yOffsetStep,value:a,onChangeCallback:s=>typeof s=="number"&&c&&c(s)})]}),e.jsx(E.default,{onResetCallback:$})]}),e.jsx(w.default,{controlledById:p,data:u,gaussianWidth:l,yOffset:a,estimatedPeak:b})]})};L.displayName="Widgets.LightCurve";const Q=L;exports.default=Q;

package/dist/widgets/LightCurvePlot/PlotWithCurve/index.js

@@ -40,7 +40,7 @@ const D = ({
     min: r,
     max: s,
     step: t.yStep,
-    range: [0, u]
+    range: [u, 0]
   }), b = K(0, m, n);
   return /* @__PURE__ */ l(X, { className: R, children: [
     /* @__PURE__ */ o(

package/dist/widgets/LightCurvePlot/ScatterPlot/index.cjs

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),w=require("react"),G=require("react-i18next"),k=require("d3-array"),F=require("../../../charts/hooks/useAxis.cjs"),J=require("../../../charts/XAxis/index.cjs"),K=require("../../../charts/YAxis/index.cjs"),Q=require("../../../charts/Tooltip/index.cjs"),V=require("../../../charts/ClippingContainer/index.cjs"),X=require("../../../charts/Viewport/index.cjs"),s=require("../defaults.cjs"),Y=require("../Point/index.cjs"),p=require("./styles.cjs"),Z=(i,h,b)=>{const d={};return Object.keys(i).forEach(l=>{const a=l==="top"||l==="bottom"?b:h,c=`${l.charAt(0).toUpperCase()}${l.slice(1)}`;d[`padding${c}`]=`${i[l]/a*100}%`}),console.log({styles:d}),d},O=({data:i,activeAlertId:h,xMin:b,xMax:d,yMin:j=s.default.yMin,yMax:l=s.default.yMax,width:a=s.default.width,height:c=s.default.height,name:P,children:R,slider:q,className:W})=>{const{t:x,i18n:{language:C}}=G.useTranslation(),[L,S]=w.useState(),D=x("light_curve.plot.x_label"),M="xAxisLabel",T=x("light_curve.plot.y_label"),_="yAxisLabel",o=typeof L<"u"?i[L]:i.find(({id:n})=>n===h),f={top:10,right:10,bottom:25,left:40},y=[0+f.left,a-f.right],[A,z,r]=F.default({min:b||k.min(i,({x:n})=>n)||s.default.xMin,max:d||k.max(i,({x:n})=>n)||s.default.xMax,step:s.default.xStep,range:y}),m=r(A[0]),g=[0+f.top,c-f.bottom],[u,H,t]=F.default({min:j,max:l,step:s.default.yStep,range:g}),$=t(u[1]);return e.jsxs(p.PlotContainer,{className:W,children:[e.jsxs(p.Chart,{width:a,height:c,horizontalLabel:D,horizontalLabelId:M,verticalLabel:T,verticalLabelId:_,title:P,children:[e.jsx("rect",{x:r(0),y:t(u[0]),width:r(15)-r(0),height:$-t(u[0]),fill:"#F5F5F5"}),e.jsx(J.default,{ticks:z,y:$,labelledById:M,xDomain:A,xScale:r}),e.jsx(K.default,{ticks:H,x:m,labelledById:_,yDomain:u,yScale:t}),e.jsx(V.default,{x:m,y:t(u[0]),width:y[1]-y[0],height:g[1]-g[0],children:e.jsx("g",{role:"list","aria-label":x("light_curve.plot.plot_label")||void 0,children:i.map(({x:n,y:I,error:B,id:N},E)=>{const v=Math.round(n),U=v>0?"after":v===0?"peak":"before";return e.jsx(Y.default,{x:r(n),y:t(I),error:t(B)-t(0),onMouseOver:()=>S(E),onMouseOut:()=>S(void 0),description:x("light_curve.plot.point_label",{magnitude:I,count:Math.abs(v),context:U})||void 0},N)})})}),e.jsx(X.default,{x:m,y:t(u[0]),outerWidth:y[1]-y[0],outerHeight:g[1]-g[0],innerWidth:a,innerHeight:c,children:R}),e.jsx(Q.default,{x:o?r(o.x):void 0,y:o?t(o.y):void 0,visible:!!o,offset:6,children:x("light_curve.plot.tooltip",{magnitude:o==null?void 0:o.y.toLocaleString(C,{minimumFractionDigits:2,maximumFractionDigits:2})})})]}),q&&e.jsx(p.SliderOuterWrapper,{children:e.jsx(p.SliderInnerWrapper,{style:{...Z(f,a,c)},children:q})})]})};O.displayName="Widgets.LightCurve.ScatterPlot";const ee=O;exports.default=ee;
+"use client";"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),w=require("react"),G=require("react-i18next"),k=require("d3-array"),D=require("../../../charts/hooks/useAxis.cjs"),J=require("../../../charts/XAxis/index.cjs"),K=require("../../../charts/YAxis/index.cjs"),Q=require("../../../charts/Tooltip/index.cjs"),V=require("../../../charts/ClippingContainer/index.cjs"),X=require("../../../charts/Viewport/index.cjs"),r=require("../defaults.cjs"),Y=require("../Point/index.cjs"),y=require("./styles.cjs"),Z=(i,b,g)=>{const p={};return Object.keys(i).forEach(o=>{const a=o==="top"||o==="bottom"?g:b,c=`${o.charAt(0).toUpperCase()}${o.slice(1)}`;p[`padding${c}`]=`${i[o]/a*100}%`}),p},C=({data:i,activeAlertId:b,xMin:g,xMax:p,yMin:m=r.default.yMin,yMax:o=r.default.yMax,width:a=r.default.width,height:c=r.default.height,name:E,children:O,slider:q,className:P})=>{const{t:d,i18n:{language:R}}=G.useTranslation(),[S,L]=w.useState(),W=d("light_curve.plot.x_label"),_="xAxisLabel",T=d("light_curve.plot.y_label"),A="yAxisLabel",s=typeof S<"u"?i[S]:i.find(({id:n})=>n===b),x={top:10,right:10,bottom:25,left:40},f=[0+x.left,a-x.right],[M,z,l]=D.default({min:g||k.min(i,({x:n})=>n)||r.default.xMin,max:p||k.max(i,({x:n})=>n)||r.default.xMax,step:r.default.xStep,range:f}),v=l(M[0]),h=[c-x.bottom,0+x.top],[u,H,t]=D.default({min:m,max:o,step:m<o?Math.abs(r.default.yStep):r.default.yStep,range:h}),$=t(u[0]);return e.jsxs(y.PlotContainer,{className:P,children:[e.jsxs(y.Chart,{width:a,height:c,horizontalLabel:W,horizontalLabelId:_,verticalLabel:T,verticalLabelId:A,title:E,children:[e.jsxs(V.default,{x:v,y:t(u[1]),width:f[1]-f[0],height:h[0]-h[1],children:[e.jsx("rect",{x:l(0),y:t(u[1]),width:l(15)-l(0),height:$-t(u[1]),stroke:"var(--neutral60,##6A6E6E)",strokeDasharray:6,fill:"var(--neutral20,#DCE0E3)"}),e.jsx("g",{role:"list","aria-label":d("light_curve.plot.plot_label")||void 0,children:i.map(({x:n,y:I,error:B,id:F},N)=>{const j=Math.round(n),U=j>0?"after":j===0?"peak":"before";return e.jsx(Y.default,{x:l(n),y:t(I),error:t(B)-t(0),onMouseOver:()=>L(N),onMouseOut:()=>L(void 0),description:d("light_curve.plot.point_label",{magnitude:I,count:Math.abs(j),context:U})||void 0},F)})})]}),e.jsx(J.default,{ticks:z,y:$,labelledById:_,xDomain:M,xScale:l}),e.jsx(K.default,{ticks:H,x:v,labelledById:A,yDomain:u,yScale:t}),e.jsx(X.default,{x:v,y:t(u[1]),outerWidth:f[1]-f[0],outerHeight:h[0]-h[1],innerWidth:a,innerHeight:c,children:O}),e.jsx(Q.default,{x:s?l(s.x):void 0,y:s?t(s.y):void 0,visible:!!s,offset:6,children:d("light_curve.plot.tooltip",{magnitude:s==null?void 0:s.y.toLocaleString(R,{minimumFractionDigits:2,maximumFractionDigits:2})})})]}),q&&e.jsx(y.SliderOuterWrapper,{children:e.jsx(y.SliderInnerWrapper,{style:{...Z(x,a,c)},children:q})})]})};C.displayName="Widgets.LightCurve.ScatterPlot";const ee=C;exports.default=ee;

package/dist/widgets/LightCurvePlot/ScatterPlot/index.js

@@ -1,58 +1,58 @@
 "use client";
-import { jsxs as F, jsx as o } from "react/jsx-runtime";
+import { jsxs as L, jsx as o } from "react/jsx-runtime";
 import { useState as U } from "react";
 import { useTranslation as V } from "react-i18next";
 import { min as X, max as Y } from "d3-array";
-import P from "../../../charts/hooks/useAxis.js";
+import E from "../../../charts/hooks/useAxis.js";
 import q from "../../../charts/XAxis/index.js";
 import G from "../../../charts/YAxis/index.js";
 import J from "../../../charts/Tooltip/index.js";
 import K from "../../../charts/ClippingContainer/index.js";
 import Q from "../../../charts/Viewport/index.js";
-import n from "../defaults.js";
+import e from "../defaults.js";
 import Z from "../Point/index.js";
 import { PlotContainer as tt, Chart as ot, SliderOuterWrapper as et, SliderInnerWrapper as it } from "./styles.js";
-const rt = (e, h, f) => {
-  const p = {};
-  return Object.keys(e).forEach((l) => {
-    const a = l === "top" || l === "bottom" ? f : h, c = `${l.charAt(0).toUpperCase()}${l.slice(1)}`;
-    p[`padding${c}`] = `${e[l] / a * 100}%`;
-  }), console.log({ styles: p }), p;
-}, W = ({
-  data: e,
-  activeAlertId: h,
-  xMin: f,
-  xMax: p,
-  yMin: v = n.yMin,
-  yMax: l = n.yMax,
-  width: a = n.width,
-  height: c = n.height,
-  name: D,
+const rt = (i, f, g) => {
+  const h = {};
+  return Object.keys(i).forEach((r) => {
+    const a = r === "top" || r === "bottom" ? g : f, c = `${r.charAt(0).toUpperCase()}${r.slice(1)}`;
+    h[`padding${c}`] = `${i[r] / a * 100}%`;
+  }), h;
+}, P = ({
+  data: i,
+  activeAlertId: f,
+  xMin: g,
+  xMax: h,
+  yMin: y = e.yMin,
+  yMax: r = e.yMax,
+  width: a = e.width,
+  height: c = e.height,
+  name: W,
   children: O,
-  slider: L,
+  slider: A,
   className: R
 }) => {
   const {
-    t: d,
+    t: p,
     i18n: { language: T }
-  } = V(), [A, S] = U(), $ = d("light_curve.plot.x_label"), M = "xAxisLabel", j = d("light_curve.plot.y_label"), _ = "yAxisLabel", i = typeof A < "u" ? e[A] : e.find(({ id: r }) => r === h), x = {
+  } = V(), [S, _] = U(), $ = p("light_curve.plot.x_label"), M = "xAxisLabel", j = p("light_curve.plot.y_label"), k = "yAxisLabel", n = typeof S < "u" ? i[S] : i.find(({ id: l }) => l === f), d = {
     top: 10,
     right: 10,
     bottom: 25,
     left: 40
-  }, u = [0 + x.left, a - x.right], [I, z, s] = P({
-    min: f || X(e, ({ x: r }) => r) || n.xMin,
-    max: p || Y(e, ({ x: r }) => r) || n.xMax,
-    step: n.xStep,
+  }, x = [0 + d.left, a - d.right], [C, z, s] = E({
+    min: g || X(i, ({ x: l }) => l) || e.xMin,
+    max: h || Y(i, ({ x: l }) => l) || e.xMax,
+    step: e.xStep,
+    range: x
+  }), b = s(C[0]), u = [c - d.bottom, 0 + d.top], [m, H, t] = E({
+    min: y,
+    max: r,
+    step: y < r ? Math.abs(e.yStep) : e.yStep,
     range: u
-  }), y = s(I[0]), g = [0 + x.top, c - x.bottom], [m, H, t] = P({
-    min: v,
-    max: l,
-    step: n.yStep,
-    range: g
-  }), C = t(m[1]);
-  return /* @__PURE__ */ F(tt, { className: R, children: [
-    /* @__PURE__ */ F(
+  }), I = t(m[0]);
+  return /* @__PURE__ */ L(tt, { className: R, children: [
+    /* @__PURE__ */ L(
       ot,
       {
         width: a,
@@ -60,26 +60,65 @@ const rt = (e, h, f) => {
         horizontalLabel: $,
         horizontalLabelId: M,
         verticalLabel: j,
-        verticalLabelId: _,
-        title: D,
+        verticalLabelId: k,
+        title: W,
         children: [
-          /* @__PURE__ */ o(
-            "rect",
+          /* @__PURE__ */ L(
+            K,
             {
-              x: s(0),
-              y: t(m[0]),
-              width: s(15) - s(0),
-              height: C - t(m[0]),
-              fill: "#F5F5F5"
+              x: b,
+              y: t(m[1]),
+              width: x[1] - x[0],
+              height: u[0] - u[1],
+              children: [
+                /* @__PURE__ */ o(
+                  "rect",
+                  {
+                    x: s(0),
+                    y: t(m[1]),
+                    width: s(15) - s(0),
+                    height: I - t(m[1]),
+                    stroke: "var(--neutral60,##6A6E6E)",
+                    strokeDasharray: 6,
+                    fill: "var(--neutral20,#DCE0E3)"
+                  }
+                ),
+                /* @__PURE__ */ o(
+                  "g",
+                  {
+                    role: "list",
+                    "aria-label": p("light_curve.plot.plot_label") || void 0,
+                    children: i.map(({ x: l, y: D, error: B, id: F }, N) => {
+                      const v = Math.round(l), w = v > 0 ? "after" : v === 0 ? "peak" : "before";
+                      return /* @__PURE__ */ o(
+                        Z,
+                        {
+                          x: s(l),
+                          y: t(D),
+                          error: t(B) - t(0),
+                          onMouseOver: () => _(N),
+                          onMouseOut: () => _(void 0),
+                          description: p("light_curve.plot.point_label", {
+                            magnitude: D,
+                            count: Math.abs(v),
+                            context: w
+                          }) || void 0
+                        },
+                        F
+                      );
+                    })
+                  }
+                )
+              ]
             }
           ),
           /* @__PURE__ */ o(
             q,
             {
               ticks: z,
-              y: C,
+              y: I,
               labelledById: M,
-              xDomain: I,
+              xDomain: C,
               xScale: s
             }
           ),
@@ -87,54 +126,19 @@ const rt = (e, h, f) => {
             G,
             {
               ticks: H,
-              x: y,
-              labelledById: _,
+              x: b,
+              labelledById: k,
               yDomain: m,
               yScale: t
             }
           ),
-          /* @__PURE__ */ o(
-            K,
-            {
-              x: y,
-              y: t(m[0]),
-              width: u[1] - u[0],
-              height: g[1] - g[0],
-              children: /* @__PURE__ */ o(
-                "g",
-                {
-                  role: "list",
-                  "aria-label": d("light_curve.plot.plot_label") || void 0,
-                  children: e.map(({ x: r, y: k, error: B, id: N }, w) => {
-                    const b = Math.round(r), E = b > 0 ? "after" : b === 0 ? "peak" : "before";
-                    return /* @__PURE__ */ o(
-                      Z,
-                      {
-                        x: s(r),
-                        y: t(k),
-                        error: t(B) - t(0),
-                        onMouseOver: () => S(w),
-                        onMouseOut: () => S(void 0),
-                        description: d("light_curve.plot.point_label", {
-                          magnitude: k,
-                          count: Math.abs(b),
-                          context: E
-                        }) || void 0
-                      },
-                      N
-                    );
-                  })
-                }
-              )
-            }
-          ),
           /* @__PURE__ */ o(
             Q,
             {
-              x: y,
-              y: t(m[0]),
-              outerWidth: u[1] - u[0],
-              outerHeight: g[1] - g[0],
+              x: b,
+              y: t(m[1]),
+              outerWidth: x[1] - x[0],
+              outerHeight: u[0] - u[1],
               innerWidth: a,
               innerHeight: c,
               children: O
@@ -143,12 +147,12 @@ const rt = (e, h, f) => {
           /* @__PURE__ */ o(
             J,
             {
-              x: i ? s(i.x) : void 0,
-              y: i ? t(i.y) : void 0,
-              visible: !!i,
+              x: n ? s(n.x) : void 0,
+              y: n ? t(n.y) : void 0,
+              visible: !!n,
               offset: 6,
-              children: d("light_curve.plot.tooltip", {
-                magnitude: i == null ? void 0 : i.y.toLocaleString(T, {
+              children: p("light_curve.plot.tooltip", {
+                magnitude: n == null ? void 0 : n.y.toLocaleString(T, {
                   minimumFractionDigits: 2,
                   maximumFractionDigits: 2
                 })
@@ -158,17 +162,17 @@ const rt = (e, h, f) => {
         ]
       }
     ),
-    L && /* @__PURE__ */ o(et, { children: /* @__PURE__ */ o(
+    A && /* @__PURE__ */ o(et, { children: /* @__PURE__ */ o(
       it,
       {
-        style: { ...rt(x, a, c) },
-        children: L
+        style: { ...rt(d, a, c) },
+        children: A
       }
     ) })
   ] });
 };
-W.displayName = "Widgets.LightCurve.ScatterPlot";
-const yt = W;
+P.displayName = "Widgets.LightCurve.ScatterPlot";
+const yt = P;
 export {
   yt as default
 };

package/dist/widgets/LightCurvePlot/defaults.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={xMin:-10,xMax:50,xStep:10,yStep:.5,yMin:14,yMax:20,width:600,height:600,gaussianMin:-4,gaussianMax:4,gaussianStep:.01,gaussianWidth:-2,yOffsetMin:-50,yOffsetMax:50,yOffsetStep:.1,yOffset:-2},t=e;exports.default=t;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={xMin:-10,xMax:50,xStep:10,yStep:-.5,yMin:20,yMax:14,width:600,height:600,gaussianMin:-4,gaussianMax:4,gaussianStep:.01,gaussianWidth:-2,yOffsetMin:-50,yOffsetMax:50,yOffsetStep:.1,yOffset:-2},t=e;exports.default=t;

package/dist/widgets/LightCurvePlot/defaults.js

@@ -2,9 +2,9 @@ const s = {
   xMin: -10,
   xMax: 50,
   xStep: 10,
-  yStep: 0.5,
-  yMin: 14,
-  yMax: 20,
+  yStep: -0.5,
+  yMin: 20,
+  yMax: 14,
   width: 600,
   height: 600,
   gaussianMin: -4,

package/package.json

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