@rubin-epo/epo-widget-lib 0.9.3 → 0.9.4

package/dist/charts/Base/styles.js

@@ -1,44 +1,69 @@
 "use client";
 import e from "styled-components";
-const t = e.div`
+const i = e.div`
   --label-height: 3em;
   --label-gutter: calc(var(--label-height) / 2);
 
   display: grid;
-  grid-template-columns: var(--label-height) 1fr var(--label-height);
-  grid-template-rows: var(--label-height) 1fr var(--label-height);
+  grid-template-columns: min-content 1fr min-content;
+  grid-template-rows: min-content 1fr min-content;
   grid-template-areas:
-    "title title ."
-    "vertical-label chart ."
-    ". horizontal-label .";
+    "title title title"
+    "vertical-label chart filler"
+    ". horizontal-label filler";
+  /* for Safari */
+  align-items: center;
   width: 100%;
-`, l = e.span`
-  font-size: 80%;
-  grid-area: horizontal-label;
+`;
+e.div`
   place-self: center;
   align-self: center;
-`, r = e.span`
-  font-size: 80%;
-  grid-area: vertical-label;
+`;
+e.div`
+  display: flex;
+  align-items: center;
   place-self: center;
   align-self: center;
-  writing-mode: vertical-rl;
-  transform: rotate(180deg);
-`, i = e.svg`
+`;
+const a = e.div`
+  grid-area: filler;
+  width: var(--label-height);
+`, l = e.svg`
   grid-area: chart;
   max-width: 100%;
+  max-height: 100%;
   aspect-ratio: var(--aspect-ratio);
-`, n = e.h3`
+`, r = e.div`
   display: flex;
   align-items: center;
   grid-area: title;
+  height: var(--label-height);
   padding-inline: var(--label-gutter);
+`, n = e.h3`
   margin: 0;
+`, c = e.div`
+  width: var(--label-height);
+  writing-mode: vertical-rl;
+  transform: rotate(180deg);
+  grid-area: vertical-label;
+`, g = e.div`
+  height: var(--label-height);
+  grid-area: horizontal-label;
+`, o = e.span`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  width: 100%;
+  font-size: 80%;
 `;
 export {
-  t as ChartContainer,
-  l as HorizontalLabel,
-  i as SVG,
+  i as ChartContainer,
+  a as Filler,
+  g as HorizontalLabelWrapper,
+  o as Label,
+  l as SVG,
   n as Title,
-  r as VerticalLabel
+  r as TitleWrapper,
+  c as VerticalLabelWrapper
 };

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

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

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

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

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

@@ -1,15 +1,15 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("styled-components"),d=require("react-slider"),r=e=>e&&e.__esModule?e:{default:e},t=r(i),a=r(d),b=t.default(a.default)`
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("styled-components"),i=require("react-slider"),r=e=>e&&e.__esModule?e:{default:e},t=r(o),d=r(i),a=t.default(d.default)`
   --thumb-size: 20px;
   --thumb-border-width: 2px;
 
   width: 100%;
   height: 100%;
-`,u=t.default.div`
+`,b=t.default.div`
   box-sizing: border-box;
   border: none;
   border-bottom: var(--thumb-border-width) dashed var(--black, #000);
   flex-grow: 1;
-`,o=t.default.div`
+`,n=t.default.div`
   aspect-ratio: 1;
   box-sizing: border-box;
   background-color: var(--white, #fff);
@@ -17,26 +17,25 @@
   border-radius: 50%;
   pointer-events: auto;
   width: var(--thumb-size);
-`,l=t.default.div`
+`,u=t.default.div`
   box-sizing: border-box;
   display: flex;
   align-items: center;
   height: 0px;
   width: 100%;
   overflow: visible;
+  pointer-events: auto;
 
   &:focus {
     outline: none;
   }
 
   &:not([aria-disabled="true"]) {
-    ${o} {
-      cursor: grab;
-    }
+    cursor: grab;
 
     &:active,
     &.active {
       cursor: grabbing;
     }
   }
-`;exports.Slider=b;exports.ThumbBar=u;exports.ThumbContainer=l;exports.ThumbHandle=o;
+`;exports.Slider=a;exports.ThumbBar=b;exports.ThumbContainer=u;exports.ThumbHandle=n;

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

@@ -1,18 +1,18 @@
 "use client";
 import r from "styled-components";
 import o from "react-slider";
-const b = r(o)`
+const t = r(o)`
   --thumb-size: 20px;
   --thumb-border-width: 2px;
 
   width: 100%;
   height: 100%;
-`, d = r.div`
+`, b = r.div`
   box-sizing: border-box;
   border: none;
   border-bottom: var(--thumb-border-width) dashed var(--black, #000);
   flex-grow: 1;
-`, e = r.div`
+`, d = r.div`
   aspect-ratio: 1;
   box-sizing: border-box;
   background-color: var(--white, #fff);
@@ -27,15 +27,14 @@ const b = r(o)`
   height: 0px;
   width: 100%;
   overflow: visible;
+  pointer-events: auto;
 
   &:focus {
     outline: none;
   }
 
   &:not([aria-disabled="true"]) {
-    ${e} {
-      cursor: grab;
-    }
+    cursor: grab;
 
     &:active,
     &.active {
@@ -44,8 +43,8 @@ const b = r(o)`
   }
 `;
 export {
-  b as Slider,
-  d as ThumbBar,
+  t as Slider,
+  b as ThumbBar,
   a as ThumbContainer,
-  e as ThumbHandle
+  d as ThumbHandle
 };

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,{...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(J.default,{magnitude:P,onMagnitudeChangeCallback:s=>o&&o(s),disabled:m,yMin:r,yMax:d,yScale:v,estimatedPeak:b,width:f,height:x}),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:[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;

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

@@ -46,6 +46,20 @@ const D = ({
     /* @__PURE__ */ o(
       $,
       {
+        slider: /* @__PURE__ */ o(
+          V,
+          {
+            magnitude: _,
+            onMagnitudeChangeCallback: (e) => a && a(e),
+            disabled: f,
+            yMin: r,
+            yMax: s,
+            yScale: L,
+            estimatedPeak: b,
+            width: p,
+            height: u
+          }
+        ),
         ...T,
         data: i,
         width: p,
@@ -64,20 +78,6 @@ const D = ({
               yDomain: z
             }
           ),
-          /* @__PURE__ */ o(
-            V,
-            {
-              magnitude: _,
-              onMagnitudeChangeCallback: (e) => a && a(e),
-              disabled: f,
-              yMin: r,
-              yMax: s,
-              yScale: L,
-              estimatedPeak: b,
-              width: p,
-              height: u
-            }
-          ),
           /* @__PURE__ */ o(Z, { gaussianWidth: m })
         ] }) : null
       }

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

@@ -1,10 +1,10 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("styled-components"),i=require("../DM15Display/index.cjs"),l=t=>t&&t.__esModule?t:{default:t},e=l(a),r=e.default.div`
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("styled-components"),a=require("../DM15Display/index.cjs"),l=t=>t&&t.__esModule?t:{default:t},e=l(i),r=e.default.div`
   --light-curve-padding: var(--PADDING_SMALL, 20px);
 
   display: grid;
   gap: var(--light-curve-padding);
   grid-template-rows: 1fr min-content;
-  grid-template-columns: 1fr;
+  position: relative;
 `;e.default.div`
   display: flex;
   flex-direction: column;
@@ -13,9 +13,10 @@
   border: 1px solid var(--turquoise55, #009fa1);
   gap: var(--light-curve-padding);
   padding: var(--light-curve-padding);
+  grid-template-columns: 1fr;
 `;e.default.h3`
   margin: 0;
-`;const n=e.default(i.default)`
+`;const n=e.default(a.default)`
   background-color: var(--white, #fff);
   margin: 2px 1em;
   padding: 2px;

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

@@ -7,7 +7,7 @@ const e = i.div`
   display: grid;
   gap: var(--light-curve-padding);
   grid-template-rows: 1fr min-content;
-  grid-template-columns: 1fr;
+  position: relative;
 `;
 i.div`
   display: flex;
@@ -17,6 +17,7 @@ i.div`
   border: 1px solid var(--turquoise55, #009fa1);
   gap: var(--light-curve-padding);
   padding: var(--light-curve-padding);
+  grid-template-columns: 1fr;
 `;
 i.h3`
   margin: 0;

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

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

package/dist/widgets/LightCurvePlot/ScatterPlot/index.d.ts

@@ -1,4 +1,4 @@
-import { FunctionComponent, PropsWithChildren } from "react";
+import { FunctionComponent, PropsWithChildren, ReactNode } from "react";
 import { Bounds } from '../../../charts/types';
 import { formatMagnitudePoints } from "../helpers";
 export interface ScatterPlotProps extends Partial<Bounds> {
@@ -6,6 +6,7 @@ export interface ScatterPlotProps extends Partial<Bounds> {
     name?: string;
     activeAlertId?: number;
     className?: string;
+    slider?: ReactNode;
 }
 declare const ScatterPlot: FunctionComponent<PropsWithChildren<ScatterPlotProps>>;
 export default ScatterPlot;