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

package/dist/widgets/FilterTool/styles.js

@@ -1,8 +1,9 @@
 "use client";
 import o from "styled-components";
-const t = o.div`
+import t from "../../layout/AspectRatio/index.js";
+const e = o(t)`
   background-color: var(--black, #000);
-`, i = o.div`
+`, l = o.div`
   box-sizing: border-box;
   display: flex;
   align-items: center;
@@ -15,36 +16,36 @@ const t = o.div`
 o.label`
   color: var(--white, #fff);
 `;
-const e = o.svg`
+const n = o.svg`
   font-size: 42px;
-`, l = o.line`
+`, a = o.line`
   fill: none;
   stroke: #ffffff;
   stroke-miterlimit: 10;
   stroke-width: 7;
-`, n = o.path`
+`, s = o.path`
   fill: var(--ray-fill);
-`, a = o.polygon`
+`, f = o.polygon`
   opacity: var(--arrow-opacity, 1);
   fill: var(--arrow-fill);
-`, s = o.polygon`
+`, c = o.polygon`
   fill: none;
   stroke: #ffffff;
   stroke-miterlimit: 10;
   stroke-width: 12;
-`, f = o.line`
+`, p = o.line`
   fill: none;
   stroke-linecap: round;
   stroke-miterlimit: 10;
   stroke-width: 27.27;
 `;
 export {
-  a as Arrow,
-  f as Filter,
-  s as PrismOutline,
-  e as PrismSVG,
-  n as Ray,
-  i as SelectContainer,
-  l as WhiteLine,
-  t as Wrapper
+  f as Arrow,
+  p as Filter,
+  c as PrismOutline,
+  n as PrismSVG,
+  s as Ray,
+  l as SelectContainer,
+  a as WhiteLine,
+  e as Wrapper
 };

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

@@ -0,0 +1 @@
+"use client";"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i=require("react/jsx-runtime"),$=require("react-i18next"),v=require("d3-array"),C=require("../../../charts/ScatterPlot/index.cjs"),e=require("../defaults.cjs"),x=require("./styles.cjs"),L=(s,u,c)=>{const r={};return Object.keys(s).forEach(l=>{const a=l==="top"||l==="bottom"?c:u,o=`${l.charAt(0).toUpperCase()}${l.slice(1)}`;r[`padding${o}`]=`${s[l]/a*100}%`}),r},y=({data:s,activeAlertId:u,xMin:c,xMax:r,yMin:d=e.default.yMin,yMax:l=e.default.yMax,width:a=e.default.width,height:o=e.default.height,name:j,slider:m,className:_,plotChildren:g})=>{const{t:n,i18n:{language:A}}=$.useTranslation(),q=n("light_curve.plot.x_label"),M=n("light_curve.plot.y_label"),h={top:10,right:10,bottom:25,left:40};return i.jsxs(x.PlotContainer,{className:_,children:[i.jsx(C.default,{width:a,height:o,margins:h,activePointId:u,title:j,xAxis:{min:c||v.min(s,({x:t})=>t)||e.default.xMin,max:r||v.max(s,({x:t})=>t)||e.default.xMax,step:e.default.xStep,label:q},yAxis:{min:d,max:l,step:d<l?Math.abs(e.default.yStep):e.default.yStep,label:M},data:{label:n("light_curve.plot.plot_label"),points:s},tooltip:({y:t})=>n("light_curve.plot.tooltip",{magnitude:t.toLocaleString(A,{minimumFractionDigits:2,maximumFractionDigits:2})}),plotChildren:({xScale:t,yStart:f,yEnd:p,Data:b,...P})=>i.jsxs(i.Fragment,{children:[i.jsx("rect",{x:t(0),y:p,width:t(15)-t(0),height:f-p,stroke:"var(--neutral60,##6A6E6E)",strokeDasharray:6,fill:"var(--neutral20,#DCE0E3)"}),b,g&&g({xScale:t,yStart:f,yEnd:p,Data:b,...P})]})}),m&&i.jsx(x.SliderOuterWrapper,{children:i.jsx(x.SliderInnerWrapper,{style:{...L(h,a,o)},children:m})})]})};y.displayName="Widgets.LightCurve.Plot";const S=y;exports.default=S;

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

@@ -0,0 +1,12 @@
+import { FunctionComponent, ReactNode } from "react";
+import { Bounds, PlotChildRenderer, Point } from '../../../types/charts';
+export interface PlotProps extends Partial<Bounds> {
+    data: Array<Point>;
+    name?: string;
+    activeAlertId?: number;
+    className?: string;
+    slider?: ReactNode;
+    plotChildren?: PlotChildRenderer;
+}
+declare const Plot: FunctionComponent<PlotProps>;
+export default Plot;

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

@@ -0,0 +1,99 @@
+"use client";
+import { jsxs as f, jsx as n, Fragment as L } from "react/jsx-runtime";
+import { useTranslation as M } from "react-i18next";
+import { min as j, max as D } from "d3-array";
+import E from "../../../charts/ScatterPlot/index.js";
+import e from "../defaults.js";
+import { PlotContainer as F, SliderOuterWrapper as S, SliderInnerWrapper as W } from "./styles.js";
+const k = (i, m, p) => {
+  const r = {};
+  return Object.keys(i).forEach((o) => {
+    const l = o === "top" || o === "bottom" ? p : m, s = `${o.charAt(0).toUpperCase()}${o.slice(1)}`;
+    r[`padding${s}`] = `${i[o] / l * 100}%`;
+  }), r;
+}, v = ({
+  data: i,
+  activeAlertId: m,
+  xMin: p,
+  xMax: r,
+  yMin: c = e.yMin,
+  yMax: o = e.yMax,
+  width: l = e.width,
+  height: s = e.height,
+  name: y,
+  slider: g,
+  className: _,
+  plotChildren: h
+}) => {
+  const {
+    t: a,
+    i18n: { language: A }
+  } = M(), P = a("light_curve.plot.x_label"), $ = a("light_curve.plot.y_label"), x = {
+    top: 10,
+    right: 10,
+    bottom: 25,
+    left: 40
+  };
+  return /* @__PURE__ */ f(F, { className: _, children: [
+    /* @__PURE__ */ n(
+      E,
+      {
+        width: l,
+        height: s,
+        margins: x,
+        activePointId: m,
+        title: y,
+        xAxis: {
+          min: p || j(i, ({ x: t }) => t) || e.xMin,
+          max: r || D(i, ({ x: t }) => t) || e.xMax,
+          step: e.xStep,
+          label: P
+        },
+        yAxis: {
+          min: c,
+          max: o,
+          step: c < o ? Math.abs(e.yStep) : e.yStep,
+          label: $
+        },
+        data: {
+          label: a("light_curve.plot.plot_label"),
+          points: i
+        },
+        tooltip: ({ y: t }) => a("light_curve.plot.tooltip", {
+          magnitude: t.toLocaleString(A, {
+            minimumFractionDigits: 2,
+            maximumFractionDigits: 2
+          })
+        }),
+        plotChildren: ({ xScale: t, yStart: d, yEnd: u, Data: b, ...C }) => /* @__PURE__ */ f(L, { children: [
+          /* @__PURE__ */ n(
+            "rect",
+            {
+              x: t(0),
+              y: u,
+              width: t(15) - t(0),
+              height: d - u,
+              stroke: "var(--neutral60,##6A6E6E)",
+              strokeDasharray: 6,
+              fill: "var(--neutral20,#DCE0E3)"
+            }
+          ),
+          b,
+          h && h({ xScale: t, yStart: d, yEnd: u, Data: b, ...C })
+        ] })
+      }
+    ),
+    g && /* @__PURE__ */ n(S, { children: /* @__PURE__ */ n(
+      W,
+      {
+        style: { ...k(x, l, s) },
+        children: g
+      }
+    ) })
+  ] });
+};
+v.displayName = "Widgets.LightCurve.Plot";
+const T = v;
+export {
+  T as default
+};

package/dist/widgets/LightCurvePlot/{ScatterPlot → Plot}/styles.cjs

@@ -1,4 +1,4 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("styled-components"),i=require("@rubin-epo/epo-react-lib/styles"),o=require("../../../charts/Base/index.cjs"),n=e=>e&&e.__esModule?e:{default:e},t=n(r),a=t.default.div`
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("styled-components"),i=require("@rubin-epo/epo-react-lib/styles"),o=require("../../../charts/Base/index.cjs"),n=e=>e&&e.__esModule?e:{default:e},t=n(r),l=t.default.div`
   --label-height: 3em;
 
   aspect-ratio: 1;
@@ -8,7 +8,7 @@
   border: 1px solid var(--turquoise55, #009fa1);
   gap: var(--light-curve-padding);
   position: relative;
-`,l=t.default(o.default)`
+`;t.default(o.default)`
   font-size: 2.5em;
   overflow: visible;
 
@@ -29,7 +29,7 @@
 ) {
     font-size: 1.25em;
   }
-`,s=t.default.div`
+`;const a=t.default.div`
   position: absolute;
   width: calc(100% - calc(var(--label-height) * 2));
   height: calc(100% - calc(var(--label-height) * 2));
@@ -41,4 +41,4 @@
   width: 100%;
   height: 100%;
   position: relative;
-`;exports.Chart=l;exports.PlotContainer=a;exports.SliderInnerWrapper=d;exports.SliderOuterWrapper=s;
+`;exports.PlotContainer=l;exports.SliderInnerWrapper=d;exports.SliderOuterWrapper=a;

package/dist/widgets/LightCurvePlot/{ScatterPlot → Plot}/styles.js

@@ -12,7 +12,8 @@ const a = e.div`
   border: 1px solid var(--turquoise55, #009fa1);
   gap: var(--light-curve-padding);
   position: relative;
-`, l = e(t)`
+`;
+e(t)`
   font-size: 2.5em;
   overflow: visible;
 
@@ -33,22 +34,22 @@ const a = e.div`
 ) {
     font-size: 1.25em;
   }
-`, c = e.div`
+`;
+const l = e.div`
   position: absolute;
   width: calc(100% - calc(var(--label-height) * 2));
   height: calc(100% - calc(var(--label-height) * 2));
   top: var(--label-height);
   left: var(--label-height);
   pointer-events: none;
-`, h = e.div`
+`, c = e.div`
   box-sizing: border-box;
   width: 100%;
   height: 100%;
   position: relative;
 `;
 export {
-  l as Chart,
   a as PlotContainer,
-  h as SliderInnerWrapper,
-  c as SliderOuterWrapper
+  c as SliderInnerWrapper,
+  l as SliderOuterWrapper
 };

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

@@ -0,0 +1 @@
+"use client";"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const g=require("react/jsx-runtime"),d=require("react-i18next"),b=require("lodash/minBy"),v=require("../../../helpers.cjs"),L=require("../../../../../lib/utils.cjs"),f=require("./styles.cjs"),h=e=>e&&e.__esModule?e:{default:e},_=h(b),u=({data:e,gaussianWidth:n,yOffset:s,controlledById:l,estimatedPeak:o})=>{const{t:c,i18n:{language:r}}=d.useTranslation(),a=e.filter(({x:t})=>L.between(t,0,15)).reduce((t,m)=>t+v.calculateResidual(m,n,s),0)/e.length,{y:i}=_.default(e,({y:t})=>t)||{};return g.jsx(f.HiddenOutput,{form:l,children:c("light_curve.curve.description",{residual:a.toLocaleString(r,{minimumFractionDigits:2,maximumFractionDigits:2}),brightest:i==null?void 0:i.toLocaleString(r,{minimumFractionDigits:1,maximumFractionDigits:1}),context:o<Number(i)?"above":"below"})})};u.displayName="Widgets.LightCurvel.A11Y.LightCurveLabel";const p=u;exports.default=p;

package/dist/widgets/LightCurvePlot/{A11Y → PlotWithCurve/A11Y}/LightCurveLabel/index.d.ts

@@ -1,7 +1,7 @@
 import { FunctionComponent } from "react";
-import { formatMagnitudePoints } from "../../helpers";
+import { useAlertsAsPoints } from "../../../helpers";
 interface LightCurveLabelProps {
-    data: ReturnType<typeof formatMagnitudePoints>;
+    data: ReturnType<typeof useAlertsAsPoints>;
     controlledById?: string;
     estimatedPeak: number;
     gaussianWidth: number;

package/dist/widgets/LightCurvePlot/{A11Y → PlotWithCurve/A11Y}/LightCurveLabel/index.js

@@ -2,8 +2,8 @@
 import { jsx as g } from "react/jsx-runtime";
 import { useTranslation as p } from "react-i18next";
 import d from "lodash/minBy";
-import { calculateResidual as f } from "../../helpers.js";
-import { between as L } from "../../../../lib/utils.js";
+import { calculateResidual as f } from "../../../helpers.js";
+import { between as L } from "../../../../../lib/utils.js";
 import { HiddenOutput as b } from "./styles.js";
 const o = ({
   data: e,

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

@@ -0,0 +1 @@
+"use client";"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),u=require("react-i18next"),d=require("../../../../charts/ForeignObject/index.cjs"),s=require("../../helpers.cjs"),i=require("./styles.cjs"),n=({gaussianWidth:t,className:r})=>{const{t:a,i18n:{language:l}}=u.useTranslation(),c=s.estimateMagnitude(0,t),o=s.estimateMagnitude(15,t)-c;return e.jsx(d.default,{children:e.jsx(i.DisplayContainer,{children:e.jsxs(i.Display,{className:r,children:[e.jsx(i.Line,{}),e.jsxs("math",{xmlns:"http://www.w3.org/1998/Math/MathML",children:[e.jsx("mn",{children:"Δ"}),e.jsxs("msub",{children:[e.jsx("mi",{children:"m"}),e.jsx("mn",{children:"15"})]}),e.jsx("mo",{children:"="}),e.jsx("mn",{role:"status","aria-live":"polite","aria-label":a("light_curve.deltaM15.label")||void 0,children:Number(o).toLocaleString(l,{minimumFractionDigits:2,maximumFractionDigits:2})})]})]})})})};n.displayName="Widgets.LightCurve.DM15Display";const m=n;exports.default=m;

package/dist/widgets/LightCurvePlot/{DM15Display → PlotWithCurve/DM15Display}/index.js

@@ -1,8 +1,8 @@
 "use client";
 import { jsx as i, jsxs as e } from "react/jsx-runtime";
 import { useTranslation as c } from "react-i18next";
-import d from "../../../charts/ForeignObject/index.js";
-import { estimateMagnitude as n } from "../helpers.js";
+import d from "../../../../charts/ForeignObject/index.js";
+import { estimateMagnitude as n } from "../../helpers.js";
 import { DisplayContainer as h, Display as p, Line as u } from "./styles.js";
 const r = ({ gaussianWidth: t, className: a }) => {
   const {

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

@@ -0,0 +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[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 → PlotWithCurve/LightCurve}/index.d.ts

@@ -1,5 +1,5 @@
 import { FunctionComponent } from "react";
-import { Domain, ScaleFunction } from '../../../charts/types';
+import { Domain, ScaleFunction } from '../../../../types/charts';
 interface LightCurveProps {
     xScale: ScaleFunction;
     yScale: ScaleFunction;

package/dist/widgets/LightCurvePlot/{LightCurve → PlotWithCurve/LightCurve}/index.js

@@ -1,6 +1,6 @@
 import { jsx as d } from "react/jsx-runtime";
 import { range as g } from "d3-array";
-import { estimateMagnitude as v } from "../helpers.js";
+import { estimateMagnitude as v } from "../../helpers.js";
 const n = ({
   xScale: o,
   xDomain: r,

package/dist/widgets/LightCurvePlot/{MagnitudeSlider → PlotWithCurve/MagnitudeSlider}/index.d.ts

@@ -6,8 +6,6 @@ interface MagnitudeSliderProps {
     onMagnitudeChangeCallback: (value: number) => void;
     estimatedPeak: number;
     disabled?: boolean;
-    width?: number;
-    height?: number;
 }
 declare const MagnitudeSlider: FunctionComponent<MagnitudeSliderProps>;
 export default MagnitudeSlider;

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

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

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

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

@@ -1,8 +1,6 @@
-"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);
-
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("styled-components"),i=require("./DM15Display/index.cjs"),a=t=>t&&t.__esModule?t:{default:t},e=a(d);e.default.div`
   display: grid;
-  gap: var(--light-curve-padding);
+  gap: var(--widget-padding);
   grid-template-rows: 1fr min-content;
   position: relative;
 `;e.default.div`
@@ -11,20 +9,20 @@
   container-type: inline-size;
   background-color: var(--white, #fff);
   border: 1px solid var(--turquoise55, #009fa1);
-  gap: var(--light-curve-padding);
-  padding: var(--light-curve-padding);
+  gap: var(--widget-padding);
+  padding: var(--widget-padding);
   grid-template-columns: 1fr;
 `;e.default.h3`
   margin: 0;
-`;const n=e.default(a.default)`
+`;const l=e.default(i.default)`
   background-color: var(--white, #fff);
   margin: 2px 1em;
   padding: 2px;
-`,d=e.default.form`
+`,n=e.default.form`
   display: flex;
   flex-direction: column;
-  gap: var(--light-curve-padding);
+  gap: var(--widget-padding);
 `,o=e.default.span`
   display: block;
-  margin-block-end: var(--light-curve-padding);
-`;exports.Container=r;exports.ControlLabel=o;exports.Controls=d;exports.DM15Display=n;
+  margin-block-end: var(--widget-padding);
+`;exports.ControlLabel=o;exports.Controls=n;exports.DM15Display=l;