@rubin-epo/epo-widget-lib 0.8.0 → 0.8.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"),i=require("./widgets/SupernovaThreeVector/styles.cjs"),N=t=>t&&t.__esModule?t:{default:t},P=N(z),k=({histogramData:t,userData:q,binnedImages:_,step:u=100})=>{const{t:C}=O.useTranslation(),r={top:30,bottom:30,left:50,right:0},x="skyMapDescription",o=600,m=o/1.6,R=[r.left,o-r.right],T=[m-r.bottom,r.top],b=6,p=7,y=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)),g=l.nice(a,c,b),S=l.nice(y,L||y,p),f=d.getLinearScale(g,R),I=d.getLinearScale(S,T),[s,j]=B.useState([a,c]),v=15,$=`calc(${r.left/o*100}% - ${v}px)`,V=`calc(${(1-f(c)/o)*100}% - ${v}px)`,h=t.map(({bin:e})=>d.between(e,s[0],s[1])),M=q.filter(({distance:e})=>d.between(e,s[0],s[1]+u)),A=t.reduce((e,{value:H},w)=>h[w]?e+H:e,0);return n.jsxs(i.ThreeVectorContainer,{children:[n.jsxs(i.ThreeVectorLayout,{children:[n.jsx(i.HistogramContainer,{children:n.jsx(i.Histogram,{data:t,activeRange:s,xDomain:g,yDomain:S,xScale:f,yScale:I,yTicks:p,xTicks:b,step:u,margin:r,width:o,height:m})}),n.jsx(i.SliderContainer,{style:{paddingInlineStart:$,paddingInlineEnd:V},children:n.jsx(P.default,{min:a,max:c,step:u,value:s,ariaValuetext:({valueNow:e})=>C("supernova_three_vector.slider.valueLabel",{value:e}),label:"distanceSlider",color:"var(--turquoise85,#12726D)",minLabel:`${a} kpc`,maxLabel:`${c} kpc`,onChangeCallback:e=>Array.isArray(e)&&j(e)})}),n.jsx(i.SkymapContainer,{children:n.jsx(i.Skymap,{objects:M,images:_,describedById:x,visibleImages:h})}),n.jsx(i.ResetButton,{onResetCallback:()=>j([a,c])})]}),n.jsx(E.default,{id:x,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 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,{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}),label:"distanceSlider",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;

package/dist/SupernovaThreeVector.js

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

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

@@ -82,6 +82,7 @@
   },
   "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"
@@ -91,6 +92,7 @@
       "valueLabel": "{{value}} kiloparsecs"
     },
     "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.",

package/dist/widgets/SupernovaThreeVector/styles.cjs

@@ -1,7 +1,8 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("styled-components"),e=require("@rubin-epo/epo-react-lib/styles"),r=require("../../atomic/Button/patterns/Reset.cjs"),o=require("./Histogram/index.cjs"),a=require("./Skymap/index.cjs"),s=n=>n&&n.__esModule?n:{default:n},t=s(i),d=t.default.div`
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("styled-components"),t=require("@rubin-epo/epo-react-lib/styles"),r=require("../../atomic/Button/patterns/Reset.cjs"),a=require("./Histogram/index.cjs"),o=require("./Skymap/index.cjs"),s=n=>n&&n.__esModule?n:{default:n},e=s(i),d=e.default.div`
   container-type: inline-size;
-`,m=t.default.div`
-  align-items: center;
+`,c=e.default.div`
+  --three-vector-gap: calc(var(--PADDING_SMALL, 20px) / 2);
+
   display: grid;
   grid-template-columns: 1fr;
   grid-template-rows: min-content 1fr min-content min-content;
@@ -10,9 +11,9 @@
     "histogram"
     "slider"
     "reset";
-  gap: calc(var(--PADDING_SMALL, 20px) / 2);
+  gap: var(--three-vector-gap);
 
-  @container (min-width: ${e.token("BREAK_PHABLET_MIN")}) {
+  @container (min-width: ${t.token("BREAK_PHABLET_MIN")}) {
     grid-template-columns: 1fr 1fr;
     grid-template-rows: 1fr min-content min-content;
     grid-template-areas:
@@ -21,58 +22,67 @@
       "reset reset";
   }
 
-  @container (min-width: ${e.token("BREAK_TABLET_MIN")}) {
-    gap: var(--PADDING_SMALL, 20px);
+  @container (min-width: ${t.token("BREAK_TABLET_MIN")}) {
+    --three-vector-gap: var(--PADDING_SMALL, 20px);
+    gap: var(--three-vector-gap);
   }
-`,c=t.default.div`
+`,l=e.default.div`
+  display: flex;
+  flex-direction: column;
+  gap: var(--three-vector-gap);
   container-type: inline-size;
   grid-area: histogram;
-`,l=t.default(o.default)`
+`,m=e.default(a.default)`
   font-size: 2.25em;
 
   @container (
-    min-width: ${e.token("BREAK_MOBILE")}
+    min-width: ${t.token("BREAK_MOBILE")}
   ) {
     font-size: 1.5em;
   }
 
   @container (
-    min-width: ${e.token("BREAK_PHABLET_MIN")}
+    min-width: ${t.token("BREAK_PHABLET_MIN")}
   ) {
     font-size: 1.25em;
   }
 
   @container (
-    min-width: ${e.token("BREAK_LARGE_TABLET_MIN")}
+    min-width: ${t.token("BREAK_LARGE_TABLET_MIN")}
   ) {
     font-size: 1em;
   }
-`,u=t.default.div`
+`,f=e.default.div`
   grid-area: slider;
-`,f=t.default(r.default)`
+`,p=e.default(r.default)`
   grid-area: reset;
-`,g=t.default.div`
+`,u=e.default.div`
+  display: flex;
+  flex-direction: column;
+  gap: var(--three-vector-gap);
   container-type: inline-size;
   grid-area: skymap;
-`,p=t.default(a.default)`
+`,g=e.default(o.default)`
   max-width: 100%;
   font-size: 2.25em;
 
   @container (
-  min-width: ${e.token("BREAK_MOBILE")}
+  min-width: ${t.token("BREAK_MOBILE")}
 ) {
     font-size: 1.5em;
   }
 
   @container (
-  min-width: ${e.token("BREAK_PHABLET_MIN")}
+  min-width: ${t.token("BREAK_PHABLET_MIN")}
 ) {
     font-size: 1.25em;
   }
 
   @container (
-  min-width: ${e.token("BREAK_LARGE_TABLET_MIN")}
+  min-width: ${t.token("BREAK_LARGE_TABLET_MIN")}
 ) {
     font-size: 1em;
   }
-`;exports.Histogram=l;exports.HistogramContainer=c;exports.ResetButton=f;exports.Skymap=p;exports.SkymapContainer=g;exports.SliderContainer=u;exports.ThreeVectorContainer=d;exports.ThreeVectorLayout=m;
+`,h=e.default.h4`
+  margin: 0;
+`;exports.ChartTitle=h;exports.Histogram=m;exports.HistogramContainer=l;exports.ResetButton=p;exports.Skymap=g;exports.SkymapContainer=u;exports.SliderContainer=f;exports.ThreeVectorContainer=d;exports.ThreeVectorLayout=c;

package/dist/widgets/SupernovaThreeVector/styles.js

@@ -2,12 +2,13 @@
 import e from "styled-components";
 import { token as t } from "@rubin-epo/epo-react-lib/styles";
 import i from "../../atomic/Button/patterns/Reset.js";
-import n from "./Histogram/index.js";
-import r from "./Skymap/index.js";
-const d = e.div`
+import r from "./Histogram/index.js";
+import n from "./Skymap/index.js";
+const p = e.div`
   container-type: inline-size;
-`, p = e.div`
-  align-items: center;
+`, d = e.div`
+  --three-vector-gap: calc(var(--PADDING_SMALL, 20px) / 2);
+
   display: grid;
   grid-template-columns: 1fr;
   grid-template-rows: min-content 1fr min-content min-content;
@@ -16,7 +17,7 @@ const d = e.div`
     "histogram"
     "slider"
     "reset";
-  gap: calc(var(--PADDING_SMALL, 20px) / 2);
+  gap: var(--three-vector-gap);
 
   @container (min-width: ${t("BREAK_PHABLET_MIN")}) {
     grid-template-columns: 1fr 1fr;
@@ -28,12 +29,16 @@ const d = e.div`
   }
 
   @container (min-width: ${t("BREAK_TABLET_MIN")}) {
-    gap: var(--PADDING_SMALL, 20px);
+    --three-vector-gap: var(--PADDING_SMALL, 20px);
+    gap: var(--three-vector-gap);
   }
 `, g = e.div`
+  display: flex;
+  flex-direction: column;
+  gap: var(--three-vector-gap);
   container-type: inline-size;
   grid-area: histogram;
-`, l = e(n)`
+`, l = e(r)`
   font-size: 2.25em;
 
   @container (
@@ -53,14 +58,17 @@ const d = e.div`
   ) {
     font-size: 1em;
   }
-`, A = e.div`
+`, f = e.div`
   grid-area: slider;
-`, B = e(i)`
+`, h = e(i)`
   grid-area: reset;
-`, f = e.div`
+`, A = e.div`
+  display: flex;
+  flex-direction: column;
+  gap: var(--three-vector-gap);
   container-type: inline-size;
   grid-area: skymap;
-`, E = e(r)`
+`, B = e(n)`
   max-width: 100%;
   font-size: 2.25em;
 
@@ -81,14 +89,17 @@ const d = e.div`
 ) {
     font-size: 1em;
   }
+`, E = e.h4`
+  margin: 0;
 `;
 export {
+  E as ChartTitle,
   l as Histogram,
   g as HistogramContainer,
-  B as ResetButton,
-  E as Skymap,
-  f as SkymapContainer,
-  A as SliderContainer,
-  d as ThreeVectorContainer,
-  p as ThreeVectorLayout
+  h as ResetButton,
+  B as Skymap,
+  A as SkymapContainer,
+  f as SliderContainer,
+  p as ThreeVectorContainer,
+  d as ThreeVectorLayout
 };

package/package.json

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