@rubin-epo/epo-widget-lib 0.10.4 → 1.0.0-beta.1

package/dist/SupernovaThreeVector.cjs

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("react/jsx-runtime"),B=require("react"),O=require("react-i18next"),l=require("d3-array"),z=require("@rubin-epo/epo-react-lib/HorizontalSlider"),d=require("./lib/utils.cjs"),E=require("./widgets/SupernovaThreeVector/LiveLabel/index.cjs"),r=require("./widgets/SupernovaThreeVector/styles.cjs"),N=t=>t&&t.__esModule?t:{default:t},P=N(z),k=({histogramData:t,userData:C,binnedImages:T,step:u=100})=>{const{t:x}=O.useTranslation(),i={top:30,bottom:30,left:50,right:0},m="skyMapDescription",o=600,p=o/1.6,q=[i.left,o-i.right],R=[p-i.bottom,i.top],b=6,h=7,v=0,L=l.max(t,e=>e.value)||Math.max(...t.map(({value:e})=>e)),a=l.min(t,e=>e.bin)||0,c=l.max(t,e=>e.bin)||Math.max(...t.map(({bin:e})=>e)),y=l.nice(a,c,b),g=l.nice(v,L||v,h),j=d.getLinearScale(y,q),I=d.getLinearScale(g,R),[s,S]=B.useState([a,c]),f=15,$=`calc(${i.left/o*100}% - ${f}px)`,V=`calc(${(1-j(c)/o)*100}% - ${f}px)`,_=t.map(({bin:e})=>d.between(e,s[0],s[1])),M=C.filter(({distance:e})=>d.between(e,s[0],s[1]+u)),A=t.reduce((e,{value:H},w)=>_[w]?e+H:e,0);return n.jsxs(r.ThreeVectorContainer,{ratio:"landscape",smallScreenRatio:"portrait",children:[n.jsxs(r.ThreeVectorLayout,{children:[n.jsxs(r.HistogramContainer,{children:[n.jsx(r.ChartTitle,{children:x("supernova_three_vector.histogram.title")}),n.jsx(r.Histogram,{data:t,activeRange:s,xDomain:y,yDomain:g,xScale:j,yScale:I,yTicks:h,xTicks:b,step:u,margin:i,width:o,height:p})]}),n.jsx(r.SliderContainer,{style:{paddingInlineStart:$,paddingInlineEnd:V},children:n.jsx(P.default,{min:a,max:c,step:u,value:s,ariaValuetext:({valueNow:e})=>x("supernova_three_vector.slider.valueLabel",{value:e}),color:"var(--turquoise85,#12726D)",minLabel:`${a} kpc`,maxLabel:`${c} kpc`,onChangeCallback:e=>Array.isArray(e)&&S(e)})}),n.jsxs(r.SkymapContainer,{children:[n.jsx(r.ChartTitle,{children:x("supernova_three_vector.skymap.title")}),n.jsx(r.Skymap,{objects:M,images:T,describedById:m,visibleImages:_})]}),n.jsx(r.ResetButton,{onResetCallback:()=>S([a,c])})]}),n.jsx(E.default,{id:m,objects:M,min:s[0],max:s[1]+u,supernovaCount:A})]})};k.displayName="Widgets.SupernovaThreeVector";exports.default=k;
+"use client";"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),q=require("react"),D=require("react-i18next"),l=require("d3-array"),E=require("@rubin-epo/epo-react-lib/HorizontalSlider"),d=require("./lib/utils.cjs"),N=require("./widgets/SupernovaThreeVector/LiveLabel/index.cjs"),r=require("./widgets/SupernovaThreeVector/styles.cjs"),P=n=>n&&n.__esModule?n:{default:n},U=P(E),R=({histogramData:n,userData:k,binnedImages:I,step:u=100})=>{const{t:x}=D.useTranslation(),h=q.useId(),i={top:30,bottom:30,left:50,right:0},o=600,y=o/1.6,L=[i.left,o-i.right],V=[y-i.bottom,i.top],g=6,p=7,v=n.map(({value:e})=>e),b=0,$=l.max(v)||Math.max(...v),m=n.map(({bin:e})=>e),c=l.min(m)||0,a=l.max(m)||Math.max(...m),j=l.nice(c,a,g),S=l.nice(b,$||b,p),f=d.getLinearScale(j,L),A=d.getLinearScale(S,V),[s,M]=q.useState([c,a]),_=15,H=`calc(${i.left/o*100}% - ${_}px)`,w=`calc(${(1-f(a)/o)*100}% - ${_}px)`,C=n.map(({bin:e})=>d.between(e,s[0],s[1])),T=k.filter(({distance:e})=>d.between(e,s[0],s[1]+u)),B=n.reduce((e,{value:O},z)=>C[z]?e+O:e,0);return t.jsxs(r.ThreeVectorContainer,{ratio:"landscape",smallScreenRatio:"portrait",children:[t.jsxs(r.ThreeVectorLayout,{children:[t.jsxs(r.HistogramContainer,{children:[t.jsx(r.ChartTitle,{children:x("supernova_three_vector.histogram.title")}),t.jsx(r.Histogram,{data:n,activeRange:s,xDomain:j,yDomain:S,xScale:f,yScale:A,yTicks:p,xTicks:g,step:u,margin:i,width:o,height:y})]}),t.jsx(r.SliderContainer,{style:{paddingInlineStart:H,paddingInlineEnd:w},children:t.jsx(U.default,{min:c,max:a,step:u,value:s,ariaValuetext:({valueNow:e})=>x("supernova_three_vector.slider.valueLabel",{value:e}),color:"var(--turquoise85,#12726D)",minLabel:`${c} Mlyr`,maxLabel:`${a} Mlyr`,onChangeCallback:e=>Array.isArray(e)&&M(e)})}),t.jsxs(r.SkymapContainer,{children:[t.jsx(r.ChartTitle,{children:x("supernova_three_vector.skymap.title")}),t.jsx(r.Skymap,{objects:T,images:I,describedById:h,visibleImages:C})]}),t.jsx(r.ResetButton,{onResetCallback:()=>M([c,a])})]}),t.jsx(N.default,{id:h,objects:T,min:s[0],max:s[1]+u,supernovaCount:B})]})};R.displayName="Widgets.SupernovaThreeVector";exports.default=R;

package/dist/SupernovaThreeVector.js

@@ -1,105 +1,105 @@
 "use client";
-import { jsxs as l, jsx as r } from "react/jsx-runtime";
-import { useState as z } from "react";
-import { useTranslation as E } from "react-i18next";
-import { max as C, min as N, nice as M } from "d3-array";
-import U from "@rubin-epo/epo-react-lib/HorizontalSlider";
-import { getLinearScale as L, between as R } from "./lib/utils.js";
-import W from "./widgets/SupernovaThreeVector/LiveLabel/index.js";
-import { ThreeVectorContainer as F, ThreeVectorLayout as G, HistogramContainer as J, ChartTitle as T, Histogram as K, SliderContainer as P, SkymapContainer as Q, Skymap as X, ResetButton as Y } from "./widgets/SupernovaThreeVector/styles.js";
-const Z = ({
-  histogramData: t,
+import { jsxs as l, jsx as n } from "react/jsx-runtime";
+import { useId as N, useState as U } from "react";
+import { useTranslation as W } from "react-i18next";
+import { max as R, min as D, nice as T } from "d3-array";
+import F from "@rubin-epo/epo-react-lib/HorizontalSlider";
+import { getLinearScale as k, between as V } from "./lib/utils.js";
+import G from "./widgets/SupernovaThreeVector/LiveLabel/index.js";
+import { ThreeVectorContainer as J, ThreeVectorLayout as K, HistogramContainer as P, ChartTitle as I, Histogram as Q, SliderContainer as X, SkymapContainer as Y, Skymap as Z, ResetButton as ee } from "./widgets/SupernovaThreeVector/styles.js";
+const te = ({
+  histogramData: i,
   userData: _,
   binnedImages: $,
-  step: s = 100
+  step: c = 100
 }) => {
-  const { t: m } = E(), o = {
+  const { t: m } = W(), p = N(), r = {
     top: 30,
     bottom: 30,
     left: 50,
     right: 0
-  }, d = "skyMapDescription", c = 600, p = c / 1.6, j = [o.left, c - o.right], I = [p - o.bottom, o.top], u = 6, x = 7, h = 0, V = C(t, (e) => e.value) || Math.max(...t.map(({ value: e }) => e)), a = N(t, (e) => e.bin) || 0, i = C(t, (e) => e.bin) || Math.max(...t.map(({ bin: e }) => e)), v = M(a, i, u), b = M(h, V || h, x), f = L(v, j), A = L(b, I), [n, y] = z([a, i]), g = 15, B = `calc(${o.left / c * 100}% - ${g}px)`, H = `calc(${(1 - f(i) / c) * 100}% - ${g}px)`, S = t.map(
-    ({ bin: e }) => R(e, n[0], n[1])
-  ), k = _.filter(
-    ({ distance: e }) => R(e, n[0], n[1] + s)
-  ), w = t.reduce((e, { value: O }, q) => S[q] ? e + O : e, 0);
-  return /* @__PURE__ */ l(F, { ratio: "landscape", smallScreenRatio: "portrait", children: [
-    /* @__PURE__ */ l(G, { children: [
-      /* @__PURE__ */ l(J, { children: [
-        /* @__PURE__ */ r(T, { children: m("supernova_three_vector.histogram.title") }),
-        /* @__PURE__ */ r(
-          K,
+  }, a = 600, u = a / 1.6, j = [r.left, a - r.right], A = [u - r.bottom, r.top], h = 6, x = 7, y = i.map(({ value: e }) => e), f = 0, B = R(y) || Math.max(...y), d = i.map(({ bin: e }) => e), s = D(d) || 0, o = R(d) || Math.max(...d), g = T(s, o, h), v = T(f, B || f, x), b = k(g, j), H = k(v, A), [t, S] = U([s, o]), M = 15, w = `calc(${r.left / a * 100}% - ${M}px)`, O = `calc(${(1 - b(o) / a) * 100}% - ${M}px)`, C = i.map(
+    ({ bin: e }) => V(e, t[0], t[1])
+  ), L = _.filter(
+    ({ distance: e }) => V(e, t[0], t[1] + c)
+  ), q = i.reduce((e, { value: z }, E) => C[E] ? e + z : e, 0);
+  return /* @__PURE__ */ l(J, { ratio: "landscape", smallScreenRatio: "portrait", children: [
+    /* @__PURE__ */ l(K, { children: [
+      /* @__PURE__ */ l(P, { children: [
+        /* @__PURE__ */ n(I, { children: m("supernova_three_vector.histogram.title") }),
+        /* @__PURE__ */ n(
+          Q,
           {
-            data: t,
-            activeRange: n,
-            xDomain: v,
-            yDomain: b,
-            xScale: f,
-            yScale: A,
+            data: i,
+            activeRange: t,
+            xDomain: g,
+            yDomain: v,
+            xScale: b,
+            yScale: H,
             yTicks: x,
-            xTicks: u,
-            step: s,
-            margin: o,
-            width: c,
-            height: p
+            xTicks: h,
+            step: c,
+            margin: r,
+            width: a,
+            height: u
           }
         )
       ] }),
-      /* @__PURE__ */ r(
-        P,
+      /* @__PURE__ */ n(
+        X,
         {
           style: {
-            paddingInlineStart: B,
-            paddingInlineEnd: H
+            paddingInlineStart: w,
+            paddingInlineEnd: O
           },
-          children: /* @__PURE__ */ r(
-            U,
+          children: /* @__PURE__ */ n(
+            F,
             {
-              min: a,
-              max: i,
-              step: s,
-              value: n,
+              min: s,
+              max: o,
+              step: c,
+              value: t,
               ariaValuetext: ({ valueNow: e }) => m("supernova_three_vector.slider.valueLabel", { value: e }),
               color: "var(--turquoise85,#12726D)",
-              minLabel: `${a} kpc`,
-              maxLabel: `${i} kpc`,
-              onChangeCallback: (e) => Array.isArray(e) && y(e)
+              minLabel: `${s} Mlyr`,
+              maxLabel: `${o} Mlyr`,
+              onChangeCallback: (e) => Array.isArray(e) && S(e)
             }
           )
         }
       ),
-      /* @__PURE__ */ l(Q, { children: [
-        /* @__PURE__ */ r(T, { children: m("supernova_three_vector.skymap.title") }),
-        /* @__PURE__ */ r(
-          X,
+      /* @__PURE__ */ l(Y, { children: [
+        /* @__PURE__ */ n(I, { children: m("supernova_three_vector.skymap.title") }),
+        /* @__PURE__ */ n(
+          Z,
           {
-            objects: k,
+            objects: L,
             images: $,
-            describedById: d,
-            visibleImages: S
+            describedById: p,
+            visibleImages: C
           }
         )
       ] }),
-      /* @__PURE__ */ r(
-        Y,
+      /* @__PURE__ */ n(
+        ee,
         {
-          onResetCallback: () => y([a, i])
+          onResetCallback: () => S([s, o])
         }
       )
     ] }),
-    /* @__PURE__ */ r(
-      W,
+    /* @__PURE__ */ n(
+      G,
       {
-        id: d,
-        objects: k,
-        min: n[0],
-        max: n[1] + s,
-        supernovaCount: w
+        id: p,
+        objects: L,
+        min: t[0],
+        max: t[1] + c,
+        supernovaCount: q
       }
     )
   ] });
 };
-Z.displayName = "Widgets.SupernovaThreeVector";
+te.displayName = "Widgets.SupernovaThreeVector";
 export {
-  Z as default
+  te as default
 };

package/dist/atomic/Blinker/Blinker.cjs

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("react/jsx-runtime"),B=require("react"),A=require("../../lib/utils.cjs"),C=require("../../hooks/useInterval.cjs"),M=require("../ImageStack/index.cjs"),l=require("./styles.cjs"),h=({images:t=[],activeIndex:i=0,autoplay:g=!0,loop:j=!0,interval:p=200,blinkCallback:n,loadedCallback:u,className:q,showControls:y=!0,children:S})=>{const[c,a]=B.useState(g),[d,v]=B.useState(!1),r=t.length>1,x=(e=0)=>{const m=t.length-1;return A.getClampedArrayIndex(i+e,m)},f=()=>{if(r){const e=x(1);j===!1&&e===t.length-1&&o(),n&&n(e)}},o=()=>{a(!1)},k=()=>{a(e=>!e)},I=()=>{o(),f()},P=()=>{o(),n&&n(x(-1))};return C.default(f,r&&d&&c?p:null),s.jsxs(l.BlinkerContainer,{className:q,children:[s.jsx(M.default,{loadCallback:()=>{v(!0),u&&u()},visible:i,images:t}),s.jsxs(l.ControlsContainer,{children:[r&&y&&s.jsx(l.BlinkerControls,{isDisabled:!d,playing:c,handleStartStop:k,handleNext:I,handlePrevious:P}),S]})]})};h.displayName="Atomic.Blinker";const N=h;exports.default=N;
+"use client";"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),h=require("react"),C=require("../../lib/utils.cjs"),M=require("../../hooks/useInterval.cjs"),N=require("../ImageStack/index.cjs"),o=require("./styles.cjs"),B=({images:n=[],activeIndex:i=0,autoplay:g=!0,loop:j=!0,interval:p=200,blinkCallback:s,loadedCallback:u,className:q,showControls:y=!0,children:S,extraControls:v})=>{const[c,a]=h.useState(g),[d,k]=h.useState(!1),r=n.length>1,x=(e=0)=>{const A=n.length-1;return C.getClampedArrayIndex(i+e,A)},f=()=>{if(r){const e=x(1);j===!1&&e===n.length-1&&l(),s&&s(e)}},l=()=>{a(!1)},m=()=>{a(e=>!e)},I=()=>{l(),f()},P=()=>{l(),s&&s(x(-1))};return M.default(f,r&&d&&c?p:null),t.jsxs(o.BlinkerContainer,{className:q,children:[t.jsx(N.default,{loadCallback:()=>{k(!0),u&&u()},visible:i,images:n}),S,t.jsx(o.ControlsContainer,{children:r&&y&&t.jsxs(t.Fragment,{children:[t.jsx(o.BlinkerControls,{isDisabled:!d,playing:c,handleStartStop:m,handleNext:I,handlePrevious:P}),v]})})]})};B.displayName="Atomic.Blinker";const _=B;exports.default=_;

package/dist/atomic/Blinker/Blinker.d.ts

@@ -1,4 +1,4 @@
-import { FunctionComponent, PropsWithChildren } from 'react';
+import { FunctionComponent, PropsWithChildren, ReactNode } from 'react';
 import { ImageShape } from '@rubin-epo/epo-react-lib/Image';
 
 export interface BlinkerProps {
@@ -11,6 +11,7 @@ export interface BlinkerProps {
     loadedCallback?: () => void;
     className?: string;
     showControls?: boolean;
+    extraControls?: ReactNode;
 }
 declare const Blinker: FunctionComponent<PropsWithChildren<BlinkerProps>>;
 export default Blinker;

package/dist/atomic/Blinker/Blinker.js

@@ -1,67 +1,69 @@
 "use client";
-import { jsxs as f, jsx as p } from "react/jsx-runtime";
+import { jsxs as p, jsx as s, Fragment as P } from "react/jsx-runtime";
 import { useState as u } from "react";
-import { getClampedArrayIndex as N } from "../../lib/utils.js";
-import P from "../../hooks/useInterval.js";
-import D from "../ImageStack/index.js";
-import { BlinkerContainer as L, ControlsContainer as $, BlinkerControls as q } from "./styles.js";
-const B = ({
+import { getClampedArrayIndex as D } from "../../lib/utils.js";
+import F from "../../hooks/useInterval.js";
+import L from "../ImageStack/index.js";
+import { BlinkerContainer as $, ControlsContainer as q, BlinkerControls as w } from "./styles.js";
+const h = ({
   images: n = [],
-  activeIndex: s = 0,
-  autoplay: h = !0,
+  activeIndex: l = 0,
+  autoplay: B = !0,
   loop: x = !0,
   interval: g = 200,
   blinkCallback: e,
-  loadedCallback: l,
+  loadedCallback: i,
   className: k,
   showControls: y = !0,
-  children: I
+  children: I,
+  extraControls: S
 }) => {
-  const [i, a] = u(h), [c, S] = u(!1), o = n.length > 1, d = (t = 0) => {
-    const C = n.length - 1;
-    return N(s + t, C);
-  }, m = () => {
-    if (o) {
-      const t = d(1);
-      x === !1 && t === n.length - 1 && r(), e && e(t);
+  const [a, c] = u(B), [d, j] = u(!1), r = n.length > 1, m = (t = 0) => {
+    const N = n.length - 1;
+    return D(l + t, N);
+  }, f = () => {
+    if (r) {
+      const t = m(1);
+      x === !1 && t === n.length - 1 && o(), e && e(t);
     }
-  }, r = () => {
-    a(!1);
-  }, j = () => {
-    a((t) => !t);
+  }, o = () => {
+    c(!1);
   }, v = () => {
-    r(), m();
+    c((t) => !t);
   }, A = () => {
-    r(), e && e(d(-1));
+    o(), f();
+  }, C = () => {
+    o(), e && e(m(-1));
   };
-  return P(m, o && c && i ? g : null), /* @__PURE__ */ f(L, { className: k, children: [
-    /* @__PURE__ */ p(
-      D,
+  return F(f, r && d && a ? g : null), /* @__PURE__ */ p($, { className: k, children: [
+    /* @__PURE__ */ s(
+      L,
       {
         loadCallback: () => {
-          S(!0), l && l();
+          j(!0), i && i();
         },
-        visible: s,
+        visible: l,
         images: n
       }
     ),
-    /* @__PURE__ */ f($, { children: [
-      o && y && /* @__PURE__ */ p(
-        q,
+    I,
+    /* @__PURE__ */ s(q, { children: r && y && /* @__PURE__ */ p(P, { children: [
+      /* @__PURE__ */ s(
+        w,
         {
-          isDisabled: !c,
-          playing: i,
-          handleStartStop: j,
-          handleNext: v,
-          handlePrevious: A
+          isDisabled: !d,
+          playing: a,
+          handleStartStop: v,
+          handleNext: A,
+          handlePrevious: C
         }
       ),
-      I
-    ] })
+      S
+    ] }) })
   ] });
 };
-B.displayName = "Atomic.Blinker";
-const J = B;
+h.displayName = "Atomic.Blinker";
+const M = h;
 export {
-  J as default
+  M as default
 };

package/dist/charts/Base/styles.cjs

@@ -28,18 +28,20 @@
   grid-area: filler;
   width: var(--label-height);
 `,d=e.default.svg`
+  font-size: 1em;
   grid-area: chart;
   max-width: 100%;
   max-height: 100%;
   aspect-ratio: var(--aspect-ratio);
+  overflow: visible;
   z-index: 1;
-`,c=e.default.div`
+`,o=e.default.div`
   display: flex;
   align-items: center;
   grid-area: title;
   height: var(--label-height);
   padding-inline: var(--label-gutter);
-`,o=e.default.h3`
+`,c=e.default.h3`
   margin: 0;
 `,s=e.default.div`
   width: var(--label-height);
@@ -56,4 +58,4 @@
   height: 100%;
   width: 100%;
   font-size: 80%;
-`;exports.ChartContainer=r;exports.Filler=n;exports.HorizontalLabelWrapper=g;exports.Label=h;exports.SVG=d;exports.Title=o;exports.TitleWrapper=c;exports.VerticalLabelWrapper=s;
+`;exports.ChartContainer=r;exports.Filler=n;exports.HorizontalLabelWrapper=g;exports.Label=h;exports.SVG=d;exports.Title=c;exports.TitleWrapper=o;exports.VerticalLabelWrapper=s;

package/dist/charts/Base/styles.js

@@ -1,7 +1,7 @@
 "use client";
 import e from "styled-components";
 import { token as t } from "@rubin-epo/epo-react-lib/styles";
-const l = e.div`
+const a = e.div`
   --label-height: 2em;
   --label-gutter: calc(var(--label-height) / 2);
 
@@ -34,28 +34,30 @@ const r = e.div`
   grid-area: filler;
   width: var(--label-height);
 `, n = e.svg`
+  font-size: 1em;
   grid-area: chart;
   max-width: 100%;
   max-height: 100%;
   aspect-ratio: var(--aspect-ratio);
+  overflow: visible;
   z-index: 1;
-`, c = e.div`
+`, o = e.div`
   display: flex;
   align-items: center;
   grid-area: title;
   height: var(--label-height);
   padding-inline: var(--label-gutter);
-`, o = e.h3`
+`, c = e.h3`
   margin: 0;
 `, h = e.div`
   width: var(--label-height);
   writing-mode: vertical-rl;
   transform: rotate(180deg);
   grid-area: vertical-label;
-`, g = e.div`
+`, s = e.div`
   height: var(--label-height);
   grid-area: horizontal-label;
-`, d = e.span`
+`, g = e.span`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -64,12 +66,12 @@ const r = e.div`
   font-size: 80%;
 `;
 export {
-  l as ChartContainer,
+  a as ChartContainer,
   r as Filler,
-  g as HorizontalLabelWrapper,
-  d as Label,
+  s as HorizontalLabelWrapper,
+  g as Label,
   n as SVG,
-  o as Title,
-  c as TitleWrapper,
+  c as Title,
+  o as TitleWrapper,
   h as VerticalLabelWrapper
 };

package/dist/charts/ScatterPlot/index.cjs

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("react/jsx-runtime"),J=require("react"),K=require("../XAxis/index.cjs"),Q=require("../YAxis/index.cjs"),$=require("../Guidelines/index.cjs"),U=require("../Points/index.cjs"),V=require("../Tooltip/index.cjs"),X=require("../ClippingContainer/index.cjs"),R=require("../hooks/useAxis.cjs"),Y=require("./styles.cjs"),H=require("../defaults.cjs"),Z=require("../canvas/Points/index.cjs"),w={svg:U.default,canvas:Z.default},M=({data:B,className:C,xAxis:c,yAxis:l,width:d,height:u,title:D,activePointId:T,margins:p,tooltip:a,onLoadedCallback:z,renderer:E="svg",plotChildren:y})=>{const[q,h]=J.useState(),{label:O,points:x}=B,o={...H.default.margins,...p},e=typeof q<"u"?x[q]:x.find(({id:v})=>v===T),f=[0+o.left,d-o.right],b=[u-o.bottom,0+o.top],[r,j,t]=R.default({...c,range:f}),[i,S,s]=R.default({...l,range:b}),m=s(i[0]),g=t(r[0]),I=s(i[1]),_=t(r[1]),P="x-axis-label",k="y-axis-label",N=Math.abs(f[1]-f[0]),W=Math.abs(b[1]-b[0]),F=w[E],L=n.jsx(F,{data:x,onHoverCallback:a?v=>h(v):void 0,onHoverOutCallback:a?()=>h(void 0):void 0,width:d,height:u,xScale:t,yScale:s,label:O,onLoadedCallback:z}),G={Data:L,xScale:t,yScale:s,yStart:m,yEnd:I,xStart:g,xEnd:_,yDomain:i,xDomain:r};return n.jsxs(Y.Chart,{verticalLabel:l.label,verticalLabelId:k,horizontalLabel:c.label,horizontalLabelId:P,className:C,width:d,height:u,title:D,children:[n.jsx(Q.default,{ticks:S,x:g,labelledById:k,yDomain:i,yScale:s}),n.jsxs(X.default,{x:g,y:I,width:N,height:W,children:[c.guidelines&&n.jsx($.default,{guides:j.length,direction:"vertical",xDomain:r,yDomain:i,xScale:t,yScale:s}),l.guidelines&&n.jsx($.default,{guides:S.length,xDomain:r,yDomain:i,xScale:t,yScale:s}),y?y(G):L]}),n.jsx(K.default,{ticks:j,y:m,labelledById:P,xDomain:r,xScale:t}),a&&n.jsxs(V.default,{x:e?t(e.x):void 0,y:e?s(e.y):void 0,visible:!!e,offset:H.default.pointRadius,children:[e&&typeof a=="function"&&a(e),e&&typeof a=="string"&&a]})]})};M.displayName="Charts.ScatterPlot";const A=M;exports.default=A;
+"use client";"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("react/jsx-runtime"),J=require("react"),K=require("../XAxis/index.cjs"),Q=require("../YAxis/index.cjs"),$=require("../Guidelines/index.cjs"),U=require("../Points/index.cjs"),V=require("../Tooltip/index.cjs"),X=require("../ClippingContainer/index.cjs"),R=require("../hooks/useAxis.cjs"),Y=require("./styles.cjs"),H=require("../defaults.cjs"),Z=require("../canvas/Points/index.cjs"),w=require("../../lib/utils.cjs"),A={svg:U.default,canvas:Z.default},M=({data:B,className:C,xAxis:c,yAxis:l,width:d,height:u,title:D,activePointId:T,margins:p,tooltip:a,onLoadedCallback:z,renderer:E="svg",plotChildren:y})=>{const[q,h]=J.useState(),{label:O,points:x}=B,o={...H.default.margins,...p},e=typeof q<"u"?x[q]:x.find(({id:v})=>v===T),f=[0+o.left,d-o.right],b=[u-o.bottom,0+o.top],[r,S,t]=R.default({...c,range:f}),[i,j,s]=R.default({...l,range:b}),m=s(i[0]),g=t(r[0]),I=s(i[1]),_=t(r[1]),P="x-axis-label",k="y-axis-label",N=Math.abs(f[1]-f[0]),W=Math.abs(b[1]-b[0]),F=A[E],L=n.jsx(F,{data:x,onHoverCallback:a?v=>h(v):void 0,onHoverOutCallback:a?()=>h(void 0):void 0,width:d,height:u,xScale:t,yScale:s,label:O,onLoadedCallback:z}),G={Data:L,xScale:t,yScale:s,yStart:m,yEnd:I,xStart:g,xEnd:_,yDomain:i,xDomain:r};return n.jsxs(Y.Chart,{verticalLabel:l.label,verticalLabelId:k,horizontalLabel:c.label,horizontalLabelId:P,className:C,width:d,height:u,title:D,children:[n.jsx(Q.default,{ticks:j,x:g,labelledById:k,yDomain:i,yScale:s}),n.jsxs(X.default,{x:g,y:I,width:N,height:W,children:[c.guidelines&&n.jsx($.default,{guides:S.length,direction:"vertical",xDomain:r,yDomain:i,xScale:t,yScale:s}),l.guidelines&&n.jsx($.default,{guides:j.length,xDomain:r,yDomain:i,xScale:t,yScale:s}),y?y(G):L]}),n.jsx(K.default,{ticks:S,y:m,labelledById:P,xDomain:r,xScale:t}),a&&!w.isSafari()&&n.jsxs(V.default,{x:e?t(e.x):void 0,y:e?s(e.y):void 0,visible:!!e,offset:H.default.pointRadius,children:[e&&typeof a=="function"&&a(e),e&&typeof a=="string"&&a]})]})};M.displayName="Charts.ScatterPlot";const ee=M;exports.default=ee;

package/dist/charts/ScatterPlot/index.js

@@ -11,7 +11,8 @@ import B from "../hooks/useAxis.js";
 import { Chart as _ } from "./styles.js";
 import D from "../defaults.js";
 import $ from "../canvas/Points/index.js";
-const w = {
+import { isSafari as w } from "../../lib/utils.js";
+const tt = {
   svg: U,
   canvas: $
 }, T = ({
@@ -29,29 +30,29 @@ const w = {
   renderer: N = "svg",
   plotChildren: x
 }) => {
-  const [y, h] = J(), { label: O, points: f } = j, r = { ...D.margins, ...A }, t = typeof y < "u" ? f[y] : f.find(({ id: p }) => p === M), b = [0 + r.left, d - r.right], g = [m - r.bottom, 0 + r.top], [s, P, e] = B({ ...c, range: b }), [a, S, o] = B({ ...l, range: g }), I = o(a[0]), v = e(s[0]), k = o(a[1]), W = e(s[1]), C = "x-axis-label", L = "y-axis-label", X = Math.abs(b[1] - b[0]), Y = Math.abs(g[1] - g[0]), q = w[N], H = /* @__PURE__ */ i(
+  const [y, h] = J(), { label: O, points: f } = j, r = { ...D.margins, ...A }, t = typeof y < "u" ? f[y] : f.find(({ id: v }) => v === M), b = [0 + r.left, d - r.right], g = [m - r.bottom, 0 + r.top], [a, S, o] = B({ ...c, range: b }), [s, P, e] = B({ ...l, range: g }), I = e(s[0]), p = o(a[0]), k = e(s[1]), W = o(a[1]), C = "x-axis-label", L = "y-axis-label", X = Math.abs(b[1] - b[0]), Y = Math.abs(g[1] - g[0]), q = tt[N], H = /* @__PURE__ */ i(
     q,
     {
       data: f,
-      onHoverCallback: n ? (p) => h(p) : void 0,
+      onHoverCallback: n ? (v) => h(v) : void 0,
       onHoverOutCallback: n ? () => h(void 0) : void 0,
       width: d,
       height: m,
-      xScale: e,
-      yScale: o,
+      xScale: o,
+      yScale: e,
       label: O,
       onLoadedCallback: G
     }
   ), F = {
     Data: H,
-    xScale: e,
-    yScale: o,
+    xScale: o,
+    yScale: e,
     yStart: I,
     yEnd: k,
-    xStart: v,
+    xStart: p,
     xEnd: W,
-    yDomain: a,
-    xDomain: s
+    yDomain: s,
+    xDomain: a
   };
   return /* @__PURE__ */ u(
     _,
@@ -68,17 +69,17 @@ const w = {
         /* @__PURE__ */ i(
           Q,
           {
-            ticks: S,
-            x: v,
+            ticks: P,
+            x: p,
             labelledById: L,
-            yDomain: a,
-            yScale: o
+            yDomain: s,
+            yScale: e
           }
         ),
         /* @__PURE__ */ u(
           Z,
           {
-            x: v,
+            x: p,
             y: k,
             width: X,
             height: Y,
@@ -86,22 +87,22 @@ const w = {
               c.guidelines && /* @__PURE__ */ i(
                 R,
                 {
-                  guides: P.length,
+                  guides: S.length,
                   direction: "vertical",
-                  xDomain: s,
-                  yDomain: a,
-                  xScale: e,
-                  yScale: o
+                  xDomain: a,
+                  yDomain: s,
+                  xScale: o,
+                  yScale: e
                 }
               ),
               l.guidelines && /* @__PURE__ */ i(
                 R,
                 {
-                  guides: S.length,
-                  xDomain: s,
-                  yDomain: a,
-                  xScale: e,
-                  yScale: o
+                  guides: P.length,
+                  xDomain: a,
+                  yDomain: s,
+                  xScale: o,
+                  yScale: e
                 }
               ),
               x ? x(F) : H
@@ -111,18 +112,18 @@ const w = {
         /* @__PURE__ */ i(
           K,
           {
-            ticks: P,
+            ticks: S,
             y: I,
             labelledById: C,
-            xDomain: s,
-            xScale: e
+            xDomain: a,
+            xScale: o
           }
         ),
-        n && /* @__PURE__ */ u(
+        n && !w() && /* @__PURE__ */ u(
           V,
           {
-            x: t ? e(t.x) : void 0,
-            y: t ? o(t.y) : void 0,
+            x: t ? o(t.x) : void 0,
+            y: t ? e(t.y) : void 0,
             visible: !!t,
             offset: D.pointRadius,
             children: [
@@ -136,7 +137,7 @@ const w = {
   );
 };
 T.displayName = "Charts.ScatterPlot";
-const ft = T;
+const gt = T;
 export {
-  ft as default
+  gt as default
 };

package/dist/charts/ScatterPlot/styles.cjs

@@ -1,10 +1,9 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("styled-components"),o=require("@rubin-epo/epo-react-lib/styles"),n=require("../Base/index.cjs"),s=e=>e&&e.__esModule?e:{default:e},i=s(t),l=i.default(n.default)`
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("styled-components"),n=require("@rubin-epo/epo-react-lib/styles"),o=require("../Base/index.cjs"),s=e=>e&&e.__esModule?e:{default:e},i=s(t),r=i.default(o.default)`
   font-size: 1.5em;
-  overflow: visible;
 
   @container (
-min-width: ${o.token("BREAK_PHABLET_MIN")}
+min-width: ${n.token("BREAK_PHABLET_MIN")}
 ) {
     font-size: 1em;
   }
-`;exports.Chart=l;
+`;exports.Chart=r;

package/dist/charts/ScatterPlot/styles.js

@@ -1,13 +1,12 @@
 "use client";
-import o from "styled-components";
-import { token as e } from "@rubin-epo/epo-react-lib/styles";
-import t from "../Base/index.js";
-const n = o(t)`
+import t from "styled-components";
+import { token as o } from "@rubin-epo/epo-react-lib/styles";
+import e from "../Base/index.js";
+const n = t(e)`
   font-size: 1.5em;
-  overflow: visible;
 
   @container (
-min-width: ${e("BREAK_PHABLET_MIN")}
+min-width: ${o("BREAK_PHABLET_MIN")}
 ) {
     font-size: 1em;
   }

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

@@ -83,19 +83,19 @@
   "supernova_three_vector": {
     "histogram": {
       "title": "Supernova Distances",
-      "x_label": "Distance [kpc]",
-      "bar_label_one": "{{binMin}} to {{binMax}} kiloparsecs: {{count}} supernova",
-      "bar_label_other": "{{binMin}} to {{binMax}} kiloparsecs: {{count}} supernovae"
+      "x_label": "Distance [Mlyr]",
+      "bar_label_one": "{{binMin}} to {{binMax}} mega-lightyears: {{count}} supernova",
+      "bar_label_other": "{{binMin}} to {{binMax}} mega-lightyears: {{count}} supernovae"
     },
     "slider": {
       "label": "Select visible range",
-      "valueLabel": "{{value}} kiloparsecs"
+      "valueLabel": "{{value}} mega-lightyears"
     },
     "skymap": {
       "title": "Supernova Distribution",
       "description": "$t(supernova_three_vector.skymap.supernova_count, {\"count\": {{supernovaCount}}, \"min\": {{min}}, \"max\": {{max}}}) $t(supernova_three_vector.skymap.user_supernova_count, {\"count\": {{userObjectCount}}})",
-      "supernova_count_one": "Sky map projection showing {{count}} supernova between the distances of {{min}} and {{max}} kiloparsecs.",
-      "supernova_count_other": "Sky map projection showing {{count}} supernovae between the distances of {{min}} and {{max}} kiloparsecs.",
+      "supernova_count_one": "Sky map projection showing {{count}} supernova between the distances of {{min}} and {{max}} mega-lightyears.",
+      "supernova_count_other": "Sky map projection showing {{count}} supernovae between the distances of {{min}} and {{max}} mega-lightyears.",
       "user_supernova_count_zero": "None of your supernovae are visible.",
       "user_supernova_count_one": "{{count}} of your supernovae is visible near {{coords}}.",
       "user_supernova_count_other": "{{count}} of your supernovae are visible near {{coords}}."