@rubin-epo/epo-widget-lib 0.9.0 → 0.9.2

package/dist/charts/Tooltip/styles.js

@@ -1,6 +1,9 @@
 "use client";
-import r from "styled-components";
-const t = r.div`
+import o from "styled-components";
+import r from "../ForeignObject/index.js";
+const i = o(r)`
+  overflow: visible;
+`, d = o.div`
   background-color: #dce0e3;
   border-radius: 4px;
   font-size: 0.5em;
@@ -8,7 +11,7 @@ const t = r.div`
   padding: 2px 4px;
   text-align: center;
   position: absolute;
-`, e = r.div`
+`, n = o.div`
   width: 0;
   height: 0;
   border-left: var(--arrow-width, 6px) solid transparent;
@@ -20,6 +23,7 @@ const t = r.div`
   left: 0;
 `;
 export {
-  e as Arrow,
-  t as Tooltip
+  n as Arrow,
+  d as Tooltip,
+  i as TooltipContainer
 };

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

@@ -128,7 +128,7 @@
       "point_label_peak": "Apparent Magnitude: {{magnitude}} at peak",
       "point_label_after_one": "Apparent Magnitude: {{magnitude}} {{count}} day after peak",
       "point_label_after_other": "Apparent Magnitude: {{magnitude}} {{count}} days after peak",
-      "tooltip": "Apparent Magnitude: {{magnitude}}<br/>Date: {{date}}"
+      "tooltip": "Apparent Magnitude: {{magnitude}}"
     }
   }
 }

package/dist/widgets/ColorTool/hooks/useFilteredImages.cjs

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("react"),q=require("lodash/isEqual"),w=require("../../../hooks/usePrevious.cjs"),g=require("../lib/canvas.cjs"),S=t=>t&&t.__esModule?t:{default:t},b=S(q),y=({images:t,filters:i})=>{const v=w.default(t),[m,d]=l.useState(0),[n,I]=l.useState(),h=n==null?void 0:n.some(({complete:s})=>!s),u=m!==t.length&&h;if(l.useLayoutEffect(()=>{b.default(v,t)||(d(0),I(t.map(({url:s,width:o,height:c})=>{const e=new Image(o,c);return e.onload=()=>{d(a=>a+1)},e.src=s,e})))},[t]),u)return[[],!!u];const f=[...n||[]].map((s,o)=>{if(!i[o].active)return;const c=document.createElement("canvas"),e=c.getContext("2d");if(e){const{width:a,height:r}=s,{color:p="transparent",brightness:_}=i[o];e.canvas.width=a,e.canvas.height=r,e.clearRect(0,0,a,r),e.filter=g.getFilters({brightness:_,contrast:1.3}),e.drawImage(s,0,0,a,r),g.updateColor(e,p,a,r)}return c}).filter(s=>!!s);return console.log({canvases:f}),[f,!!u]},E=y;exports.default=E;
+"use client";"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i=require("react"),_=require("lodash/isEqual"),q=require("../../../hooks/usePrevious.cjs"),f=require("../lib/canvas.cjs"),w=t=>t&&t.__esModule?t:{default:t},y=w(_),S=({images:t,filters:l})=>{const g=q.default(t),[v,d]=i.useState(0),[n,m]=i.useState(),I=n==null?void 0:n.some(({complete:s})=>!s),u=v!==t.length&&I;return i.useLayoutEffect(()=>{y.default(g,t)||(d(0),m(t.map(({url:s,width:o,height:r})=>{const e=new Image(o,r);return e.crossOrigin="anonymous",e.onload=()=>{d(a=>a+1)},e.src=s,e})))},[t]),u?[[],!!u]:[[...n||[]].map((s,o)=>{if(!l[o].active)return;const r=document.createElement("canvas"),e=r.getContext("2d");if(e){const{width:a,height:c}=s,{color:h="transparent",brightness:p}=l[o];e.canvas.width=a,e.canvas.height=c,e.clearRect(0,0,a,c),e.filter=f.getFilters({brightness:p,contrast:1.3}),e.drawImage(s,0,0,a,c),f.updateColor(e,h,a,c)}return r}).filter(s=>!!s),!!u]},b=S;exports.default=b;

package/dist/widgets/ColorTool/hooks/useFilteredImages.js

@@ -1,36 +1,33 @@
 "use client";
-import { useState as l, useLayoutEffect as w } from "react";
-import x from "lodash/isEqual";
-import F from "../../../hooks/usePrevious.js";
-import { getFilters as L, updateColor as y } from "../lib/canvas.js";
-const C = ({
+import { useState as d, useLayoutEffect as h } from "react";
+import w from "lodash/isEqual";
+import x from "../../../hooks/usePrevious.js";
+import { getFilters as y, updateColor as F } from "../lib/canvas.js";
+const L = ({
   images: s,
   filters: u
 }) => {
-  const f = F(s), [g, m] = l(0), [n, p] = l(), v = n == null ? void 0 : n.some(({ complete: e }) => !e), i = g !== s.length && v;
-  if (w(() => {
-    x(f, s) || (m(0), p(
+  const l = x(s), [f, m] = d(0), [n, g] = d(), p = n == null ? void 0 : n.some(({ complete: e }) => !e), i = f !== s.length && p;
+  return h(() => {
+    w(l, s) || (m(0), g(
       s.map(({ url: e, width: a, height: r }) => {
         const t = new Image(a, r);
-        return t.onload = () => {
+        return t.crossOrigin = "anonymous", t.onload = () => {
           m((o) => o + 1);
         }, t.src = e, t;
       })
     ));
-  }, [s]), i)
-    return [[], !!i];
-  const d = [...n || []].map((e, a) => {
+  }, [s]), i ? [[], !!i] : [[...n || []].map((e, a) => {
     if (!u[a].active)
       return;
     const r = document.createElement("canvas"), t = r.getContext("2d");
     if (t) {
-      const { width: o, height: c } = e, { color: I = "transparent", brightness: h } = u[a];
-      t.canvas.width = o, t.canvas.height = c, t.clearRect(0, 0, o, c), t.filter = L({ brightness: h, contrast: 1.3 }), t.drawImage(e, 0, 0, o, c), y(t, I, o, c);
+      const { width: o, height: c } = e, { color: v = "transparent", brightness: I } = u[a];
+      t.canvas.width = o, t.canvas.height = c, t.clearRect(0, 0, o, c), t.filter = y({ brightness: I, contrast: 1.3 }), t.drawImage(e, 0, 0, o, c), F(t, v, o, c);
     }
     return r;
-  }).filter((e) => !!e);
-  return console.log({ canvases: d }), [d, !!i];
-}, R = C;
+  }).filter((e) => !!e), !!i];
+}, P = L;
 export {
-  R as default
+  P as default
 };

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

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

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

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

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

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

@@ -1,15 +1,23 @@
-"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)`
+"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)`
   --thumb-size: 20px;
   --thumb-border-width: 2px;
 
   width: 100%;
   height: 100%;
-`,b=t.default.div`
+`,u=t.default.div`
   box-sizing: border-box;
   border: none;
   border-bottom: var(--thumb-border-width) dashed var(--black, #000);
   flex-grow: 1;
-`,u=t.default.div`
+`,o=t.default.div`
+  aspect-ratio: 1;
+  box-sizing: border-box;
+  background-color: var(--white, #fff);
+  border: var(--thumb-border-width) solid var(--black, #000);
+  border-radius: 50%;
+  pointer-events: auto;
+  width: var(--thumb-size);
+`,l=t.default.div`
   box-sizing: border-box;
   display: flex;
   align-items: center;
@@ -20,18 +28,15 @@
   &:focus {
     outline: none;
   }
-`,l=t.default.div`
-  aspect-ratio: 1;
-  box-sizing: border-box;
-  cursor: grab;
-  background-color: var(--white, #fff);
-  border: var(--thumb-border-width) solid var(--black, #000);
-  border-radius: 50%;
-  pointer-events: auto;
-  width: var(--thumb-size);
 
-  &:not([aria-disabled="true"]):active,
-  &:not([aria-disabled="true"]).active {
-    cursor: grabbing;
+  &:not([aria-disabled="true"]) {
+    ${o} {
+      cursor: grab;
+    }
+
+    &:active,
+    &.active {
+      cursor: grabbing;
+    }
   }
-`;exports.Slider=a;exports.ThumbBar=b;exports.ThumbContainer=u;exports.ThumbHandle=l;
+`;exports.Slider=b;exports.ThumbBar=u;exports.ThumbContainer=l;exports.ThumbHandle=o;

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

@@ -1,18 +1,26 @@
 "use client";
 import r from "styled-components";
 import o from "react-slider";
-const t = r(o)`
+const b = r(o)`
   --thumb-size: 20px;
   --thumb-border-width: 2px;
 
   width: 100%;
   height: 100%;
-`, b = r.div`
+`, d = r.div`
   box-sizing: border-box;
   border: none;
   border-bottom: var(--thumb-border-width) dashed var(--black, #000);
   flex-grow: 1;
-`, d = r.div`
+`, e = r.div`
+  aspect-ratio: 1;
+  box-sizing: border-box;
+  background-color: var(--white, #fff);
+  border: var(--thumb-border-width) solid var(--black, #000);
+  border-radius: 50%;
+  pointer-events: auto;
+  width: var(--thumb-size);
+`, a = r.div`
   box-sizing: border-box;
   display: flex;
   align-items: center;
@@ -23,24 +31,21 @@ const t = r(o)`
   &:focus {
     outline: none;
   }
-`, a = r.div`
-  aspect-ratio: 1;
-  box-sizing: border-box;
-  cursor: grab;
-  background-color: var(--white, #fff);
-  border: var(--thumb-border-width) solid var(--black, #000);
-  border-radius: 50%;
-  pointer-events: auto;
-  width: var(--thumb-size);
 
-  &:not([aria-disabled="true"]):active,
-  &:not([aria-disabled="true"]).active {
-    cursor: grabbing;
+  &:not([aria-disabled="true"]) {
+    ${e} {
+      cursor: grab;
+    }
+
+    &:active,
+    &.active {
+      cursor: grabbing;
+    }
   }
 `;
 export {
-  t as Slider,
-  b as ThumbBar,
-  d as ThumbContainer,
-  a as ThumbHandle
+  b as Slider,
+  d as ThumbBar,
+  a as ThumbContainer,
+  e 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 s=require("react/jsx-runtime"),A=require("react-i18next"),b=require("d3-array"),H=require("@rubin-epo/epo-react-lib/HorizontalSlider"),y=require("../../../charts/hooks/useAxis.cjs"),e=require("../defaults.cjs"),w=require("../ScatterPlot/index.cjs"),B=require("../LightCurve/index.cjs"),F=require("../A11Y/LightCurveLabel/index.cjs"),_=require("../helpers.cjs"),N=require("../../../atomic/Button/patterns/Reset.cjs"),E=require("../MagnitudeSlider/index.cjs"),d=require("./styles.cjs"),J=l=>l&&l.__esModule?l:{default:l},g=J(H),S=({gaussianWidth:l=e.default.gaussianWidth,yOffset:o=e.default.yOffset,alerts:L,peakMjd:D,yMin:r=e.default.yMin,yMax:u=e.default.yMax,width:f=e.default.width,height:x=e.default.height,userMagnitude:I=(u-r)/2+r,onUserMagnitudeChangeCallback:a,onGaussianChangeCallback:n,onYOffsetChangeCallback:c,className:P,...M})=>{const{t:m}=A.useTranslation(),p="lightCurveControls",j="gaussianWidthLabel",h="yOffsetLabel",i=_.formatMagnitudePoints(L,D),O=b.min(i,({x:t})=>t)||Math.min(...i.map(({x:t})=>t)),R=b.max(i,({x:t})=>t)||Math.max(...i.map(({x:t})=>t)),T=()=>{a&&a((u-r)/2+r),c&&c(e.default.yOffset),n&&n(e.default.gaussianWidth)},[W,Q,$]=y.default({min:O,max:R,step:e.default.xStep,range:[0,f]}),[z,V,q]=y.default({min:r,max:u,step:e.default.yStep,range:[0,x]}),v=_.estimateMagnitudeWithOffset(0,l,o);return s.jsxs(d.Container,{className:P,children:[s.jsxs(w.default,{...M,data:i,width:f,height:x,yMin:r,yMax:u,children:[s.jsx(B.default,{gaussianWidth:l,yOffset:o,xDomain:W,xScale:$,yScale:q,yDomain:z}),s.jsx(E.default,{magnitude:I,onMagnitudeChangeCallback:t=>a&&a(t),yMin:r,yMax:u,yScale:q,estimatedPeak:v}),s.jsx(d.DM15Display,{gaussianWidth:l})]}),s.jsxs(d.Controls,{id:p,children:[s.jsxs("div",{children:[s.jsx(d.ControlLabel,{id:j,children:m("light_curve.curve.controls.gaussian_width")}),s.jsx(g.default,{label:"Gaussian Width",labelledbyId:j,color:"var(--turquoise85, #12726D)",min:e.default.gaussianMin,max:e.default.gaussianMax,step:e.default.gaussianStep,value:l,onChangeCallback:t=>typeof t=="number"&&n&&n(t)})]}),s.jsxs("div",{children:[s.jsx(d.ControlLabel,{id:h,children:m("light_curve.curve.controls.y_offset")}),s.jsx(g.default,{label:"Y Offset",labelledbyId:h,color:"var(--turquoise85, #12726D)",min:e.default.yOffsetMin,max:e.default.yOffsetMax,step:e.default.yOffsetStep,value:o,onChangeCallback:t=>typeof t=="number"&&c&&c(t)})]}),s.jsx(N.default,{onResetCallback:T})]}),s.jsx(F.default,{controlledById:p,data:i,gaussianWidth:l,yOffset:o,estimatedPeak:v})]})};S.displayName="Widgets.LightCurve";const K=S;exports.default=K;
+"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"),w=require("../ScatterPlot/index.cjs"),B=require("../LightCurve/index.cjs"),N=require("../A11Y/LightCurveLabel/index.cjs"),S=require("../helpers.cjs"),E=require("../../../atomic/Button/patterns/Reset.cjs"),J=require("../MagnitudeSlider/index.cjs"),d=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:i=t.default.yMax,width:f=t.default.width,height:x=t.default.height,userMagnitude:P=(i-r)/2+r,onUserMagnitudeChangeCallback:o,onGaussianChangeCallback:n,onYOffsetChangeCallback:c,className:M,isDisplayOnly:m,...R})=>{const{t:h}=F.useTranslation(),j="lightCurveControls",p="gaussianWidthLabel",q="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((i-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:i,step:t.default.yStep,range:[0,x]}),b=S.estimateMagnitudeWithOffset(0,l,a);return e.jsxs(d.Container,{className:M,children:[e.jsx(w.default,{...R,data:u,width:f,height:x,yMin:r,yMax:i,children:u.length>0?e.jsxs(e.Fragment,{children:[e.jsx(B.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:i,yScale:v,estimatedPeak:b}),e.jsx(d.DM15Display,{gaussianWidth:l})]}):null}),!m&&e.jsxs(d.Controls,{id:j,children:[e.jsxs("div",{children:[e.jsx(d.ControlLabel,{id:p,children:h("light_curve.curve.controls.gaussian_width")}),e.jsx(y.default,{label:"Gaussian Width",labelledbyId:p,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(d.ControlLabel,{id:q,children:h("light_curve.curve.controls.y_offset")}),e.jsx(y.default,{label:"Y Offset",labelledbyId:q,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(N.default,{controlledById:j,data:u,gaussianWidth:l,yOffset:a,estimatedPeak:b})]})};L.displayName="Widgets.LightCurve";const Q=L;exports.default=Q;

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

@@ -1,12 +1,13 @@
 import { FunctionComponent } from "react";
 import { PlotWithoutCurveProps } from "../PlotWithoutCurve";
 interface PlotWithLightCurveProps extends PlotWithoutCurveProps {
-    gaussianWidth: number;
-    yOffset: number;
-    userMagnitude: number;
-    onUserMagnitudeChangeCallback: (value: number) => void;
-    onGaussianChangeCallback: (value: number) => void;
-    onYOffsetChangeCallback: (value: number) => void;
+    gaussianWidth?: number;
+    yOffset?: number;
+    userMagnitude?: number;
+    onUserMagnitudeChangeCallback?: (value: number) => void;
+    onGaussianChangeCallback?: (value: number) => void;
+    onYOffsetChangeCallback?: (value: number) => void;
+    isDisplayOnly?: boolean;
 }
 declare const PlotWithLightCurve: FunctionComponent<PlotWithLightCurveProps>;
 export default PlotWithLightCurve;

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

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

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

@@ -1,15 +1,9 @@
 import { FunctionComponent } from "react";
 import { Alert } from '../../../types/astro';
-export interface PlotWithoutCurveProps {
+import { ScatterPlotProps } from "../ScatterPlot";
+export interface PlotWithoutCurveProps extends Omit<ScatterPlotProps, "data"> {
     alerts: Array<Alert>;
-    name: string;
-    activeAlertId?: number;
     peakMjd: number;
-    yMin: number;
-    yMax?: number;
-    width?: number;
-    height?: number;
-    className?: string;
 }
 declare const PlotWithoutCurve: FunctionComponent<PlotWithoutCurveProps>;
 export default PlotWithoutCurve;

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

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

@@ -1,13 +1,11 @@
 import { FunctionComponent, PropsWithChildren } from "react";
+import { Bounds } from '../../../charts/types';
 import { formatMagnitudePoints } from "../helpers";
-export interface ScatterPlotProps {
+export interface ScatterPlotProps extends Partial<Bounds> {
     data: ReturnType<typeof formatMagnitudePoints>;
     name?: string;
     activeAlertId?: number;
-    yMin: number;
-    yMax?: number;
-    width?: number;
-    height?: number;
+    className?: string;
 }
 declare const ScatterPlot: FunctionComponent<PropsWithChildren<ScatterPlotProps>>;
 export default ScatterPlot;