@rubin-epo/epo-widget-lib 0.2.0 → 0.4.0

package/README.MD

@@ -18,17 +18,11 @@ EPO React Library has 5 peer dependencies required to pull it in to your applica
 
 ### Styles
 
-After installing the package library, the global styles will need to be added to the top level of your application.
+After installing the package library, the global styles from `epo-react-lib` will need to be added to your application
 
 ```
-import { GlobalStyles } from "@rubin-epo/epo-widget-lib";
+import { GlobalStyles } from "@rubin-epo/epo-react-lib/styles";
 
-const App = () => {
-  return <main><GlobalStyles></main>
-}
-```
-
-If you have already imported the global styles from `epo-react-lib` this step is unnecessary.
 
 ### Translations
 
@@ -43,10 +37,13 @@ This project uses Vite in library mode to package the contents of `/packages/epo
 To build from source:
 
 ```
+
 cd packages/epo-widget-lib
 yarn
 yarn build # production build
+
 # yarn dev # development server
+
 ```
 
 ### Storybook
@@ -58,8 +55,10 @@ Stories from component folders following the `\*\*.stories.[t|j]sx will be inclu
 To run Storybook:
 
 ```
+
 yarn build
 yarn storybook
+
 ```
 
 ## Test
@@ -67,20 +66,27 @@ yarn storybook
 Each component in EPO Widget Library contains a Jest unit test. Tests should be co-located with component code and their stories and follow the `**.test.[t|j]sx` naming format.
 
 ```
+
 yarn test
+
 # yarn test:generate-output # will save to .jest-test-results.json for Storybook
+
 ```
 
 To add a unit test to it's Storybook page add the filename of the unit test to the `parameters` property of the story
 
 ```
+
 export const Primary: ComponentStoryObj<typeof DemoButton> = {
-  args: {
-    disabled: false,
-    children: "Hello",
-  },
-  parameters: {
-    jest: "DemoButton.test.tsx",
-  },
+args: {
+disabled: false,
+children: "Hello",
+},
+parameters: {
+jest: "DemoButton.test.tsx",
+},
 };
+
+```
+
 ```

package/dist/CameraFilter.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),v=require("react"),q=require("@rubin-epo/epo-react-lib/SelectListbox"),C=require("@rubin-epo/epo-react-lib/styles"),S=require("react-i18next"),R=require("use-resize-observer"),s=require("./widgets/CameraFilter/data.cjs"),r=require("./widgets/CameraFilter/styles.cjs"),y=require("./widgets/CameraFilter/CondensedFilterRanges/CondensedFilterRanges.cjs"),L=require("./widgets/CameraFilter/SpectrumDisplay/SpectrumDisplay.cjs"),x=l=>l&&l.__esModule?l:{default:l},M=x(q),O=x(R),h=()=>{const{t:l}=S.useTranslation(),{ref:j,width:m=1}=O.default(),[c,p]=v.useState(null),{BREAK_TABLET:g}=C.tokens,i=m<parseInt(g),{[i?"condensed":"default"]:{min:a,max:_,range:n}}=s.rangeConfig,o=s.filters[0].range[0],d=s.filters[s.filters.length-1].range[1]-o,u=s.filters.filter(({band:e})=>e),F=[{value:"none",label:l("camera_filter.labels.option",{context:"none"})}].concat(u.map(({band:e})=>({value:e,label:l("camera_filter.labels.option",{band:e})}))),b=s.filters.find(({band:e})=>e===c);return t.jsxs(r.FilterContainer,{ref:j,children:[t.jsx("h1",{children:l("camera_filter.title")}),i&&t.jsx(y.default,{filters:u,min:a,spectrumRange:n}),t.jsxs(r.FilterTable,{"aria-hidden":i,range:d/n*100,offset:(o-a)/n*100,"data-testid":"expanded-filters",children:[t.jsx("colgroup",{children:s.filters.map(({range:e})=>t.jsx("col",{style:{width:`${(e[1]-e[0])/d*100}%`}},e.join("")))}),t.jsx(r.FilterNames,{children:t.jsx("tr",{children:s.filters.map(({band:e})=>t.jsx(r.FilterName,{id:`${e}-name`,band:e,scope:"col","aria-hidden":!e,$isCondensed:i,children:e},e))})}),!i&&t.jsx(r.FilterRanges,{children:t.jsx("tr",{children:s.filters.map(({band:e,range:f})=>t.jsx(r.FilterRange,{"aria-hidden":!e,children:e&&t.jsxs(t.Fragment,{children:[f.join("–"),t.jsx("br",{}),t.jsx(r.Wavelength,{children:"nm"})]})},f.join()))})})]}),t.jsx(L.default,{min:a,max:_,range:n,isCondensed:i,activeFilter:b}),t.jsxs(r.SelectContainer,{children:[t.jsx(r.SelectLabel,{id:"filterSelectLabel",children:l("camera_filter.labels.select")}),t.jsx(M.default,{options:F,value:c,onChangeCallback:e=>p(e),width:"100%",maxWidth:"100%",labelledById:"filterSelectLabel"})]})]})};h.displayName="Widgets.CameraFilter";exports.default=h;

package/dist/CameraFilter.d.ts

@@ -0,0 +1,3 @@
+export * from './widgets/CameraFilter/CameraFilter'
+import _default from './widgets/CameraFilter/CameraFilter'
+export default _default

package/dist/CameraFilter.js

@@ -0,0 +1,99 @@
+import { jsxs as a, jsx as t, Fragment as b } from "react/jsx-runtime";
+import { useState as v } from "react";
+import R from "@rubin-epo/epo-react-lib/SelectListbox";
+import { tokens as S } from "@rubin-epo/epo-react-lib/styles";
+import { useTranslation as j } from "react-i18next";
+import y from "use-resize-observer";
+import { filters as i, rangeConfig as B } from "./widgets/CameraFilter/data.js";
+import { FilterContainer as L, FilterTable as _, FilterNames as O, FilterName as T, FilterRanges as w, FilterRange as A, Wavelength as M, SelectContainer as N, SelectLabel as W } from "./widgets/CameraFilter/styles.js";
+import $ from "./widgets/CameraFilter/CondensedFilterRanges/CondensedFilterRanges.js";
+import k from "./widgets/CameraFilter/SpectrumDisplay/SpectrumDisplay.js";
+const E = () => {
+  const { t: l } = j(), { ref: p, width: h = 1 } = y(), [s, g] = v(null), { BREAK_TABLET: u } = S, r = h < parseInt(u), {
+    [r ? "condensed" : "default"]: { min: o, max: F, range: n }
+  } = B, c = i[0].range[0], d = i[i.length - 1].range[1] - c, m = i.filter(({ band: e }) => e), x = [{
+    value: "none",
+    label: l("camera_filter.labels.option", { context: "none" })
+  }].concat(
+    m.map(({ band: e }) => ({
+      value: e,
+      label: l("camera_filter.labels.option", { band: e })
+    }))
+  ), C = i.find(({ band: e }) => e === s);
+  return /* @__PURE__ */ a(L, { ref: p, children: [
+    /* @__PURE__ */ t("h1", { children: l("camera_filter.title") }),
+    r && /* @__PURE__ */ t(
+      $,
+      {
+        filters: m,
+        min: o,
+        spectrumRange: n
+      }
+    ),
+    /* @__PURE__ */ a(
+      _,
+      {
+        "aria-hidden": r,
+        range: d / n * 100,
+        offset: (c - o) / n * 100,
+        "data-testid": "expanded-filters",
+        children: [
+          /* @__PURE__ */ t("colgroup", { children: i.map(({ range: e }) => /* @__PURE__ */ t(
+            "col",
+            {
+              style: {
+                width: `${(e[1] - e[0]) / d * 100}%`
+              }
+            },
+            e.join("")
+          )) }),
+          /* @__PURE__ */ t(O, { children: /* @__PURE__ */ t("tr", { children: i.map(({ band: e }) => /* @__PURE__ */ t(
+            T,
+            {
+              id: `${e}-name`,
+              band: e,
+              scope: "col",
+              "aria-hidden": !e,
+              $isCondensed: r,
+              children: e
+            },
+            e
+          )) }) }),
+          !r && /* @__PURE__ */ t(w, { children: /* @__PURE__ */ t("tr", { children: i.map(({ band: e, range: f }) => /* @__PURE__ */ t(A, { "aria-hidden": !e, children: e && /* @__PURE__ */ a(b, { children: [
+            f.join("–"),
+            /* @__PURE__ */ t("br", {}),
+            /* @__PURE__ */ t(M, { children: "nm" })
+          ] }) }, f.join())) }) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ t(
+      k,
+      {
+        min: o,
+        max: F,
+        range: n,
+        isCondensed: r,
+        activeFilter: C
+      }
+    ),
+    /* @__PURE__ */ a(N, { children: [
+      /* @__PURE__ */ t(W, { id: "filterSelectLabel", children: l("camera_filter.labels.select") }),
+      /* @__PURE__ */ t(
+        R,
+        {
+          options: x,
+          value: s,
+          onChangeCallback: (e) => g(e),
+          width: "100%",
+          maxWidth: "100%",
+          labelledById: "filterSelectLabel"
+        }
+      )
+    ] })
+  ] });
+};
+E.displayName = "Widgets.CameraFilter";
+export {
+  E as default
+};

package/dist/ColorTool.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),g=require("react"),N=require("use-resize-observer"),M=require("react-i18next"),c=require("./widgets/ColorTool/utilities.cjs"),t=require("./widgets/ColorTool/styles.cjs"),H=require("@rubin-epo/epo-react-lib"),W=require("./widgets/ColorTool/FilterControls/FilterControls.cjs"),$=require("./widgets/ColorTool/ImageComposite/ImageComposite.cjs"),z=l=>l&&l.__esModule?l:{default:l},O=z(N),m=({data:l,objectOptions:T=[],selectedData:p,colorOptions:L=[],selectionCallback:j,isDisabled:b=!1,isDisplayOnly:i=!1,hideImage:_=!1,hideSubtitle:q=!1})=>{const{ref:S,width:y=1}=O.default(),[s,h]=g.useState(c.prepareData(p));g.useEffect(()=>{j&&j(s)},[s]);const F=r=>{const{label:n}=r,{filters:f}=s,I=f.map(C=>C.label===n?r:C);return h({...s,filters:I})},R=r=>{const{value:n}=r.target;return h({name:n,filters:c.getDataFiltersByName(l,n)})},v=()=>h({...s,filters:c.resetFilters(s.filters)}),d=l.length>1,{t:o}=M.useTranslation(),B=o("colorTool.actions.select_an_object"),{filters:u,name:a,caption:x}=s,D=c.getCategoryName(l,a);return e.jsxs(t.WidgetContainer,{ref:S,$isCondensed:y<1e3,$hideControls:i,children:[a&&(i||d)&&e.jsxs(t.Subtitle,{children:[d&&e.jsxs(e.Fragment,{children:[e.jsx("dt",{children:o("colorTool.labels.object_type")}),e.jsx("dd",{children:D})]}),!q&&e.jsxs(e.Fragment,{children:[e.jsx("dt",{children:o("colorTool.labels.object",{context:d?"selected":!1})}),e.jsx("dd",{children:a})]})]}),!i&&e.jsxs(t.ControlsContainer,{children:[d&&e.jsx(t.SelectionContainer,{children:e.jsx(H.Select,{id:"astroObjectSelector",placeholder:B,options:T,onChange:R,value:a,disabled:b})}),u&&e.jsxs(e.Fragment,{children:[e.jsx(t.ToolsHeader,{id:"filterLabel",children:o("colorTool.labels.filter")}),e.jsx(t.ToolsHeader,{id:"colorLabel",children:o("colorTool.labels.color")}),e.jsx(t.ToolsHeader,{id:"intensityLabel",children:o("colorTool.labels.color_intensity")})]}),u&&u.map(r=>{const{label:n,isDisabled:f}=r;return e.jsx(W.default,{filter:r,isDisabled:b||f,colorOptions:L,onChangeFilterCallback:F,buttonLabelledById:"filterLabel",selectLabelledById:"colorLabel",sliderLabelledById:"intensityLabel"},`filter-${n}`)})]}),!_&&e.jsx($.default,{filters:u}),a&&!i&&e.jsx(t.ResetButton,{disabled:b||!c.isResetButtonActive(s),onClick:v,icon:"RotateLeftWithCenter",children:o("colorTool.actions.reset")}),x&&e.jsx(t.Caption,{children:x})]})};m.displayName="Widgets.ColorTool";exports.default=m;

package/dist/ColorTool.d.ts

@@ -0,0 +1,3 @@
+export * from './widgets/ColorTool/ColorTool'
+import _default from './widgets/ColorTool/ColorTool'
+export default _default

package/dist/ColorTool.js

@@ -0,0 +1,116 @@
+import { jsxs as s, Fragment as b, jsx as e } from "react/jsx-runtime";
+import { useState as _, useEffect as W } from "react";
+import $ from "use-resize-observer";
+import { useTranslation as k } from "react-i18next";
+import { prepareData as w, getCategoryName as z, isResetButtonActive as A, getDataFiltersByName as E, resetFilters as H } from "./widgets/ColorTool/utilities.js";
+import { WidgetContainer as M, Subtitle as P, ControlsContainer as q, SelectionContainer as G, ToolsHeader as p, ResetButton as J, Caption as K } from "./widgets/ColorTool/styles.js";
+import { Select as O } from "@rubin-epo/epo-react-lib";
+import Q from "./widgets/ColorTool/FilterControls/FilterControls.js";
+import U from "./widgets/ColorTool/ImageComposite/ImageComposite.js";
+const V = ({
+  data: d,
+  objectOptions: T = [],
+  selectedData: L,
+  colorOptions: j = [],
+  selectionCallback: C,
+  isDisabled: f = !1,
+  isDisplayOnly: i = !1,
+  hideImage: S = !1,
+  hideSubtitle: y = !1
+}) => {
+  const { ref: B, width: F = 1 } = $(), [t, h] = _(
+    w(L)
+  );
+  W(() => {
+    C && C(t);
+  }, [t]);
+  const N = (l) => {
+    const { label: r } = l, { filters: m } = t, I = m.map(
+      (g) => g.label === r ? l : g
+    );
+    return h({
+      ...t,
+      filters: I
+    });
+  }, R = (l) => {
+    const { value: r } = l.target;
+    return h({
+      name: r,
+      filters: E(d, r)
+    });
+  }, v = () => h({
+    ...t,
+    filters: H(t.filters)
+  }), a = d.length > 1, { t: o } = k(), x = o("colorTool.actions.select_an_object"), { filters: c, name: n, caption: u } = t, D = z(d, n);
+  return /* @__PURE__ */ s(
+    M,
+    {
+      ref: B,
+      $isCondensed: F < 1e3,
+      $hideControls: i,
+      children: [
+        n && (i || a) && /* @__PURE__ */ s(P, { children: [
+          a && /* @__PURE__ */ s(b, { children: [
+            /* @__PURE__ */ e("dt", { children: o("colorTool.labels.object_type") }),
+            /* @__PURE__ */ e("dd", { children: D })
+          ] }),
+          !y && /* @__PURE__ */ s(b, { children: [
+            /* @__PURE__ */ e("dt", { children: o("colorTool.labels.object", {
+              context: a ? "selected" : !1
+            }) }),
+            /* @__PURE__ */ e("dd", { children: n })
+          ] })
+        ] }),
+        !i && /* @__PURE__ */ s(q, { children: [
+          a && /* @__PURE__ */ e(G, { children: /* @__PURE__ */ e(
+            O,
+            {
+              id: "astroObjectSelector",
+              placeholder: x,
+              options: T,
+              onChange: R,
+              value: n,
+              disabled: f
+            }
+          ) }),
+          c && /* @__PURE__ */ s(b, { children: [
+            /* @__PURE__ */ e(p, { id: "filterLabel", children: o("colorTool.labels.filter") }),
+            /* @__PURE__ */ e(p, { id: "colorLabel", children: o("colorTool.labels.color") }),
+            /* @__PURE__ */ e(p, { id: "intensityLabel", children: o("colorTool.labels.color_intensity") })
+          ] }),
+          c && c.map((l) => {
+            const { label: r, isDisabled: m } = l;
+            return /* @__PURE__ */ e(
+              Q,
+              {
+                filter: l,
+                isDisabled: f || m,
+                colorOptions: j,
+                onChangeFilterCallback: N,
+                buttonLabelledById: "filterLabel",
+                selectLabelledById: "colorLabel",
+                sliderLabelledById: "intensityLabel"
+              },
+              `filter-${r}`
+            );
+          })
+        ] }),
+        !S && /* @__PURE__ */ e(U, { filters: c }),
+        n && !i && /* @__PURE__ */ e(
+          J,
+          {
+            disabled: f || !A(t),
+            onClick: v,
+            icon: "RotateLeftWithCenter",
+            children: o("colorTool.actions.reset")
+          }
+        ),
+        u && /* @__PURE__ */ e(K, { children: u })
+      ]
+    }
+  );
+};
+V.displayName = "Widgets.ColorTool";
+export {
+  V as default
+};

package/dist/FilterTool.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react/jsx-runtime"),i=require("react-i18next"),_=require("@rubin-epo/epo-react-lib/SelectListbox"),m=require("@rubin-epo/epo-react-lib/ColorSwatch"),r=require("./widgets/FilterTool/styles.cjs"),c=e=>e&&e.__esModule?e:{default:e},C=c(_),T=c(m),j=({selectedColor:e="none",selectionCallback:f,isDisabled:h=!1,id:u,labelledById:g})=>{const{t:l}=i.useTranslation(),t={violet:"#861cff",blue:"#0019ff",green:"#6bd853",yellow:"#ffdd15",orange:"#f18922",red:"#ec1c24",none:"transparent"},p={violet:"M546.1,312.5l212.8,1.9h0.4l0.5,0.2L1396,522.8c6.9,2.3,10.7,9.7,8.5,16.7s-9.7,10.7-16.7,8.5l0,0l-0.4-0.1L757.8,320.4l0.9,0.2L546.1,312.5z",blue:"M546.1,312.4l206.5-4.4h0.4l0.4,0.1l641.1,164c7,1.8,11.2,8.9,9.4,15.9c-1.8,7-8.9,11.2-15.9,9.4l-0.4-0.1L751.8,313.8l0.8,0.1L546.1,312.4z",green:"M547.8,312l200.6-10.6h0.3l0.4,0.1l644.8,120.3c7,1.4,11.5,8.2,10.1,15.2c-1.4,6.9-8,11.4-14.9,10.2l-0.4-0.1L747.8,307.4l0.7,0.1L547.8,312z",yellow:"M546.1,312.5l205.8-17.3h0.3h0.4l640.4,75.3c7.1,0.8,12.2,7.2,11.3,14.3c-0.8,7.1-7.2,12.2-14.3,11.3l-0.4-0.1l-637.9-94.5h0.6L546.1,312.5z",orange:"M546.1,311l189.3-21.8h0.2h0.3l656.5,33.3c7,0.4,12.4,6.3,12,13.3s-6.3,12.4-13.3,12h-0.4l-655.2-52.9h0.5L546.1,311z",red:"M546.1,311L730,283.9h0.1h0.2l661.4-9.9c6.9-0.1,12.6,5.4,12.7,12.3s-5.4,12.6-12.3,12.7h-0.4l-661.4-9.8h0.4L546.1,311z"},n={violet:"1426.5,547.9 1353.2,550.6 1377.9,530.1 1372.3,498.5",blue:"1431.5,496.4 1358.6,504.1 1381.8,482 1374.1,450.9",green:"1437.9,443.4 1366.1,458.4 1387,434.1 1376.2,403.9",yellow:"1438.9,389.7 1368,408.2 1387.6,382.8 1375.4,353.3",orange:"1443.7,340.3 1373.9,362.8 1392.1,336.4 1378.2,307.5",red:"1441.9,290 1372.4,313.2 1390.3,286.6 1376.1,257.9"},y=Object.keys(t).map(s=>({value:s,label:l(`filterTool.colors.${s}`),icon:o.jsx(T.default,{color:s,size:"small"})})),x=s=>e!==s&&e!=="none",w=l("filterTool.selectLabel"),a=e==="none",b=n[e].split(" ").pop()||"",d=n[e]?(b||"").split(","):[];return o.jsxs(r.Wrapper,{children:[o.jsxs(r.PrismSVG,{version:"1.1",viewBox:"0 0 1551.6 736.7","aria-labelledby":g,children:[o.jsxs("defs",{children:[o.jsxs("linearGradient",{id:"no-arrow-red",children:[o.jsx("stop",{offset:"0%",stopColor:t.red}),o.jsx("stop",{offset:"81%",stopColor:t.red}),o.jsx("stop",{offset:"81%",stopColor:"transparent"}),o.jsx("stop",{offset:"100%",stopColor:"transparent"})]}),o.jsxs("linearGradient",{id:"no-arrow-orange",children:[o.jsx("stop",{offset:"0%",stopColor:t.orange}),o.jsx("stop",{offset:"80%",stopColor:t.orange}),o.jsx("stop",{offset:"80%",stopColor:"transparent"}),o.jsx("stop",{offset:"100%",stopColor:"transparent"})]}),o.jsxs("linearGradient",{id:"no-arrow-yellow",children:[o.jsx("stop",{offset:"0%",stopColor:t.yellow}),o.jsx("stop",{offset:"79%",stopColor:t.yellow}),o.jsx("stop",{offset:"79%",stopColor:"transparent"}),o.jsx("stop",{offset:"100%",stopColor:"transparent"})]}),o.jsxs("linearGradient",{id:"no-arrow-green",children:[o.jsx("stop",{offset:"0%",stopColor:t.green}),o.jsx("stop",{offset:"78%",stopColor:t.green}),o.jsx("stop",{offset:"78%",stopColor:"transparent"}),o.jsx("stop",{offset:"100%",stopColor:"transparent"})]}),o.jsxs("linearGradient",{id:"no-arrow-blue",children:[o.jsx("stop",{offset:"0%",stopColor:t.blue}),o.jsx("stop",{offset:"77%",stopColor:t.blue}),o.jsx("stop",{offset:"77%",stopColor:"transparent"}),o.jsx("stop",{offset:"100%",stopColor:"transparent"})]}),o.jsxs("linearGradient",{id:"no-arrow-violet",children:[o.jsx("stop",{offset:"0%",stopColor:t.violet}),o.jsx("stop",{offset:"77%",stopColor:t.violet}),o.jsx("stop",{offset:"77%",stopColor:"transparent"}),o.jsx("stop",{offset:"100%",stopColor:"transparent"})]})]}),o.jsxs("radialGradient",{id:"gradient_1_",cx:"718.4264",cy:"-294.6529",r:"417.8",fx:"638.9412",fy:"-303.5418",gradientTransform:"matrix(1 0 0 1 0 534)",gradientUnits:"userSpaceOnUse",children:[o.jsx("stop",{offset:"0.12",style:{stopColor:"#FFFFFF"}}),o.jsx("stop",{offset:"1",style:{stopColor:"#000000"}})]}),o.jsxs("g",{children:[o.jsx(r.WhiteLine,{id:"white_ray",x1:"108.2",y1:"463.3",x2:"546.1",y2:"312.5"}),o.jsx(r.WhiteLine,{id:"white_light_arrow_line",x1:"376.8",y1:"327.9",x2:"430",y2:"309.6"}),o.jsx("polygon",{id:"white_light_arrow",points:"420.7,325.4 428.1,310.3 413,302.9 422.5,299.7 437.6,307 430.2,322.1",fill:"#ffffff"}),o.jsx("text",{transform:"matrix(0.9446 -0.3282 0.3282 0.9446 152.0965 417.697)",fill:"#ffffff",children:o.jsx(i.Trans,{i18nKey:"filterTool.whiteLight"})})]}),o.jsxs("g",{children:[o.jsx("text",{transform:"matrix(1 0 0 1 598.2964 606.0872)",fill:"#ffffff",children:o.jsx(i.Trans,{i18nKey:"filterTool.prism"})}),o.jsx("polygon",{id:"gradient",points:"653.2,127 867.4,498 438.9,498",fill:"url(#gradient_1_)",style:{opacity:.3}})]}),o.jsx(r.PrismOutline,{id:"outline",points:"653.2,127 760.3,312.5 867.4,498 653.2,498 438.9,498 546.1,312.5 "}),o.jsx("g",{role:"list",id:"rays_out","aria-label":l("filterTool.light_out"),children:Object.keys(p).map(s=>o.jsx(r.Ray,{id:`${s}_ray`,style:{"--ray-fill":x(s)?`url(#no-arrow-${s})`:t[s]},d:p[s],role:"listitem","aria-label":l(`filterTool.colors.${s}`)},s))}),o.jsxs("g",{children:[o.jsx("text",{transform:"matrix(1 0 0 1 1206.5464 164.1372)",fill:"#ffffff",children:o.jsx(i.Trans,{i18nKey:"filterTool.filter"})}),o.jsx(r.Filter,{id:"filter",x1:"1255.6",y1:"235.7",x2:"1193.1",y2:"550.3",stroke:t[e],fill:"#ffffff","aria-label":l(`filterTool.colors.${e}`)})]}),o.jsxs("g",{role:"list",id:"rays_filtered","aria-label":l("filterTool.light_filtered"),children:[Object.keys(n).map(s=>o.jsx(r.Arrow,{id:`${s}_arrow`,style:{"--arrow-opacity":x(s)&&0,"--arrow-fill":t[s]},points:n[s],role:a?"listitem":"presentation","aria-label":a?l(`filterTool.colors.${s}`):void 0},s)),!a&&o.jsx("text",{role:"listitem",x:d[0],y:d[1],fill:"#ffffff",dy:"-25",children:o.jsx(i.Trans,{i18nKey:`filterTool.colors.${e}`})})]})]}),o.jsx(r.SelectContainer,{children:o.jsx(C.default,{options:y,isDisabled:h,value:e,onChangeCallback:s=>f&&f(s||"none"),placeholder:w,maxWidth:"100%",width:"200px",id:u})})]})};j.displayName="Widgets.FilterTool";exports.default=j;

package/dist/FilterTool.d.ts

@@ -0,0 +1,3 @@
+export * from './widgets/FilterTool/FilterTool'
+import _default from './widgets/FilterTool/FilterTool'
+export default _default

package/dist/FilterTool.js

@@ -0,0 +1,253 @@
+import { jsx as o, jsxs as l } from "react/jsx-runtime";
+import { useTranslation as C, Trans as n } from "react-i18next";
+import u from "@rubin-epo/epo-react-lib/SelectListbox";
+import L from "@rubin-epo/epo-react-lib/ColorSwatch";
+import { Wrapper as T, PrismSVG as _, WhiteLine as h, PrismOutline as v, Ray as F, Filter as G, Arrow as $, SelectContainer as z } from "./widgets/FilterTool/styles.js";
+const M = ({
+  selectedColor: e = "none",
+  selectionCallback: a,
+  isDisabled: m = !1,
+  id: g,
+  labelledById: y
+}) => {
+  const { t: i } = C(), r = {
+    violet: "#861cff",
+    blue: "#0019ff",
+    green: "#6bd853",
+    yellow: "#ffdd15",
+    orange: "#f18922",
+    red: "#ec1c24",
+    none: "transparent"
+  }, p = {
+    violet: "M546.1,312.5l212.8,1.9h0.4l0.5,0.2L1396,522.8c6.9,2.3,10.7,9.7,8.5,16.7s-9.7,10.7-16.7,8.5l0,0l-0.4-0.1L757.8,320.4l0.9,0.2L546.1,312.5z",
+    blue: "M546.1,312.4l206.5-4.4h0.4l0.4,0.1l641.1,164c7,1.8,11.2,8.9,9.4,15.9c-1.8,7-8.9,11.2-15.9,9.4l-0.4-0.1L751.8,313.8l0.8,0.1L546.1,312.4z",
+    green: "M547.8,312l200.6-10.6h0.3l0.4,0.1l644.8,120.3c7,1.4,11.5,8.2,10.1,15.2c-1.4,6.9-8,11.4-14.9,10.2l-0.4-0.1L747.8,307.4l0.7,0.1L547.8,312z",
+    yellow: "M546.1,312.5l205.8-17.3h0.3h0.4l640.4,75.3c7.1,0.8,12.2,7.2,11.3,14.3c-0.8,7.1-7.2,12.2-14.3,11.3l-0.4-0.1l-637.9-94.5h0.6L546.1,312.5z",
+    orange: "M546.1,311l189.3-21.8h0.2h0.3l656.5,33.3c7,0.4,12.4,6.3,12,13.3s-6.3,12.4-13.3,12h-0.4l-655.2-52.9h0.5L546.1,311z",
+    red: "M546.1,311L730,283.9h0.1h0.2l661.4-9.9c6.9-0.1,12.6,5.4,12.7,12.3s-5.4,12.6-12.3,12.7h-0.4l-661.4-9.8h0.4L546.1,311z"
+  }, s = {
+    violet: "1426.5,547.9 1353.2,550.6 1377.9,530.1 1372.3,498.5",
+    blue: "1431.5,496.4 1358.6,504.1 1381.8,482 1374.1,450.9",
+    green: "1437.9,443.4 1366.1,458.4 1387,434.1 1376.2,403.9",
+    yellow: "1438.9,389.7 1368,408.2 1387.6,382.8 1375.4,353.3",
+    orange: "1443.7,340.3 1373.9,362.8 1392.1,336.4 1378.2,307.5",
+    red: "1441.9,290 1372.4,313.2 1390.3,286.6 1376.1,257.9"
+  }, w = Object.keys(r).map((t) => ({
+    value: t,
+    label: i(`filterTool.colors.${t}`),
+    icon: /* @__PURE__ */ o(L, { color: t, size: "small" })
+  })), d = (t) => e !== t && e !== "none", x = i("filterTool.selectLabel"), f = e === "none", b = s[e].split(" ").pop() || "", c = s[e] ? (b || "").split(",") : [];
+  return /* @__PURE__ */ l(T, { children: [
+    /* @__PURE__ */ l(
+      _,
+      {
+        version: "1.1",
+        viewBox: "0 0 1551.6 736.7",
+        "aria-labelledby": y,
+        children: [
+          /* @__PURE__ */ l("defs", { children: [
+            /* @__PURE__ */ l("linearGradient", { id: "no-arrow-red", children: [
+              /* @__PURE__ */ o("stop", { offset: "0%", stopColor: r.red }),
+              /* @__PURE__ */ o("stop", { offset: "81%", stopColor: r.red }),
+              /* @__PURE__ */ o("stop", { offset: "81%", stopColor: "transparent" }),
+              /* @__PURE__ */ o("stop", { offset: "100%", stopColor: "transparent" })
+            ] }),
+            /* @__PURE__ */ l("linearGradient", { id: "no-arrow-orange", children: [
+              /* @__PURE__ */ o("stop", { offset: "0%", stopColor: r.orange }),
+              /* @__PURE__ */ o("stop", { offset: "80%", stopColor: r.orange }),
+              /* @__PURE__ */ o("stop", { offset: "80%", stopColor: "transparent" }),
+              /* @__PURE__ */ o("stop", { offset: "100%", stopColor: "transparent" })
+            ] }),
+            /* @__PURE__ */ l("linearGradient", { id: "no-arrow-yellow", children: [
+              /* @__PURE__ */ o("stop", { offset: "0%", stopColor: r.yellow }),
+              /* @__PURE__ */ o("stop", { offset: "79%", stopColor: r.yellow }),
+              /* @__PURE__ */ o("stop", { offset: "79%", stopColor: "transparent" }),
+              /* @__PURE__ */ o("stop", { offset: "100%", stopColor: "transparent" })
+            ] }),
+            /* @__PURE__ */ l("linearGradient", { id: "no-arrow-green", children: [
+              /* @__PURE__ */ o("stop", { offset: "0%", stopColor: r.green }),
+              /* @__PURE__ */ o("stop", { offset: "78%", stopColor: r.green }),
+              /* @__PURE__ */ o("stop", { offset: "78%", stopColor: "transparent" }),
+              /* @__PURE__ */ o("stop", { offset: "100%", stopColor: "transparent" })
+            ] }),
+            /* @__PURE__ */ l("linearGradient", { id: "no-arrow-blue", children: [
+              /* @__PURE__ */ o("stop", { offset: "0%", stopColor: r.blue }),
+              /* @__PURE__ */ o("stop", { offset: "77%", stopColor: r.blue }),
+              /* @__PURE__ */ o("stop", { offset: "77%", stopColor: "transparent" }),
+              /* @__PURE__ */ o("stop", { offset: "100%", stopColor: "transparent" })
+            ] }),
+            /* @__PURE__ */ l("linearGradient", { id: "no-arrow-violet", children: [
+              /* @__PURE__ */ o("stop", { offset: "0%", stopColor: r.violet }),
+              /* @__PURE__ */ o("stop", { offset: "77%", stopColor: r.violet }),
+              /* @__PURE__ */ o("stop", { offset: "77%", stopColor: "transparent" }),
+              /* @__PURE__ */ o("stop", { offset: "100%", stopColor: "transparent" })
+            ] })
+          ] }),
+          /* @__PURE__ */ l(
+            "radialGradient",
+            {
+              id: "gradient_1_",
+              cx: "718.4264",
+              cy: "-294.6529",
+              r: "417.8",
+              fx: "638.9412",
+              fy: "-303.5418",
+              gradientTransform: "matrix(1 0 0 1 0 534)",
+              gradientUnits: "userSpaceOnUse",
+              children: [
+                /* @__PURE__ */ o("stop", { offset: "0.12", style: { stopColor: "#FFFFFF" } }),
+                /* @__PURE__ */ o("stop", { offset: "1", style: { stopColor: "#000000" } })
+              ]
+            }
+          ),
+          /* @__PURE__ */ l("g", { children: [
+            /* @__PURE__ */ o(
+              h,
+              {
+                id: "white_ray",
+                x1: "108.2",
+                y1: "463.3",
+                x2: "546.1",
+                y2: "312.5"
+              }
+            ),
+            /* @__PURE__ */ o(
+              h,
+              {
+                id: "white_light_arrow_line",
+                x1: "376.8",
+                y1: "327.9",
+                x2: "430",
+                y2: "309.6"
+              }
+            ),
+            /* @__PURE__ */ o(
+              "polygon",
+              {
+                id: "white_light_arrow",
+                points: "420.7,325.4 428.1,310.3 413,302.9 422.5,299.7 437.6,307 430.2,322.1",
+                fill: "#ffffff"
+              }
+            ),
+            /* @__PURE__ */ o(
+              "text",
+              {
+                transform: "matrix(0.9446 -0.3282 0.3282 0.9446 152.0965 417.697)",
+                fill: "#ffffff",
+                children: /* @__PURE__ */ o(n, { i18nKey: "filterTool.whiteLight" })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ l("g", { children: [
+            /* @__PURE__ */ o("text", { transform: "matrix(1 0 0 1 598.2964 606.0872)", fill: "#ffffff", children: /* @__PURE__ */ o(n, { i18nKey: "filterTool.prism" }) }),
+            /* @__PURE__ */ o(
+              "polygon",
+              {
+                id: "gradient",
+                points: "653.2,127 867.4,498 438.9,498",
+                fill: "url(#gradient_1_)",
+                style: { opacity: 0.3 }
+              }
+            )
+          ] }),
+          /* @__PURE__ */ o(
+            v,
+            {
+              id: "outline",
+              points: "653.2,127 760.3,312.5 867.4,498 653.2,498 438.9,498 546.1,312.5 "
+            }
+          ),
+          /* @__PURE__ */ o(
+            "g",
+            {
+              role: "list",
+              id: "rays_out",
+              "aria-label": i("filterTool.light_out"),
+              children: Object.keys(p).map((t) => /* @__PURE__ */ o(
+                F,
+                {
+                  id: `${t}_ray`,
+                  style: {
+                    "--ray-fill": d(t) ? `url(#no-arrow-${t})` : r[t]
+                  },
+                  d: p[t],
+                  role: "listitem",
+                  "aria-label": i(`filterTool.colors.${t}`)
+                },
+                t
+              ))
+            }
+          ),
+          /* @__PURE__ */ l("g", { children: [
+            /* @__PURE__ */ o("text", { transform: "matrix(1 0 0 1 1206.5464 164.1372)", fill: "#ffffff", children: /* @__PURE__ */ o(n, { i18nKey: "filterTool.filter" }) }),
+            /* @__PURE__ */ o(
+              G,
+              {
+                id: "filter",
+                x1: "1255.6",
+                y1: "235.7",
+                x2: "1193.1",
+                y2: "550.3",
+                stroke: r[e],
+                fill: "#ffffff",
+                "aria-label": i(`filterTool.colors.${e}`)
+              }
+            )
+          ] }),
+          /* @__PURE__ */ l(
+            "g",
+            {
+              role: "list",
+              id: "rays_filtered",
+              "aria-label": i("filterTool.light_filtered"),
+              children: [
+                Object.keys(s).map((t) => /* @__PURE__ */ o(
+                  $,
+                  {
+                    id: `${t}_arrow`,
+                    style: {
+                      "--arrow-opacity": d(t) && 0,
+                      "--arrow-fill": r[t]
+                    },
+                    points: s[t],
+                    role: f ? "listitem" : "presentation",
+                    "aria-label": f ? i(`filterTool.colors.${t}`) : void 0
+                  },
+                  t
+                )),
+                !f && /* @__PURE__ */ o(
+                  "text",
+                  {
+                    role: "listitem",
+                    x: c[0],
+                    y: c[1],
+                    fill: "#ffffff",
+                    dy: "-25",
+                    children: /* @__PURE__ */ o(n, { i18nKey: `filterTool.colors.${e}` })
+                  }
+                )
+              ]
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ o(z, { children: /* @__PURE__ */ o(
+      u,
+      {
+        options: w,
+        isDisabled: m,
+        value: e,
+        onChangeCallback: (t) => a && a(t || "none"),
+        placeholder: x,
+        maxWidth: "100%",
+        width: "200px",
+        id: g
+      }
+    ) })
+  ] });
+};
+M.displayName = "Widgets.FilterTool";
+export {
+  M as default
+};

package/dist/SourceSelector.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("react/jsx-runtime"),a=require("react"),R=require("react-i18next"),T=require("@rubin-epo/epo-react-lib/IconComposer"),u=require("./widgets/SourceSelector/styles.cjs"),k=require("./widgets/SourceSelector/utilities.cjs"),W=require("./widgets/SourceSelector/Message/Message.cjs"),F=require("./widgets/SourceSelector/Points/Points.cjs"),G=e=>e&&e.__esModule?e:{default:e},N=G(T),C=({width:e=600,height:r=600,selectedSource:_=[],sources:f,alerts:n,images:b,selectionCallback:g,blinkConfig:q,color:y,isDisplayOnly:d=!1})=>{const[l,h]=a.useState(_),[v,A]=a.useState(!1),[I,x]=a.useState(),[B,S]=a.useState(!1),[M,L]=a.useState(null),{t:p}=R.useTranslation(),m="sourceSelectorWidget";a.useEffect(()=>{g&&g(l)},[l]);const j=(o,i,t)=>o.filter(c=>c.id===i&&c.type===t),V=o=>{if(v&&!d){const{target:i}=o,{id:t,type:c}=i.dataset;if(t&&c){if(!(j(l,t,c).length>0)){const D=j(f,t,c);h(P=>P.concat(D)),x(s.jsxs(s.Fragment,{children:[s.jsx(N.default,{icon:"checkmark"}),p("source_selector.messages.success")]})),S(!0)}}else x(p("source_selector.messages.failure")),S(!0)}},E=()=>{S(!1)},$=o=>{if(n&&n.length>1){const t=n[o].date-n[0].date;L({day:Math.round(t),hour:Math.round(24/t%24)||0})}};return s.jsxs(u.SourceSelectorContainer,{width:e,height:r,children:[!d&&s.jsx(W.default,{onMessageChangeCallback:E,isVisible:B,forIds:[m],children:I}),s.jsx(u.BackgroundBlinker,{images:b,blinkCallback:$,loadedCallback:()=>A(!0),...q}),M&&s.jsx(u.ElapsedDisplay,{...M}),s.jsx(u.SVG,{preserveAspectRatio:"xMidYMid meet",viewBox:`0 0 ${e} ${r}`,onClick:V,id:m,$isDisplayOnly:d,children:s.jsx(F.default,{xScale:k.getLinearScale([0,e],[0,e]),yScale:k.getLinearScale([0,r],[r,0]),color:y,sources:f,selectedSource:l})})]})};C.displayName="Widgets.SourceSelector";exports.default=C;

package/dist/SourceSelector.d.ts

@@ -0,0 +1,3 @@
+export * from './widgets/SourceSelector/SourceSelector'
+import _default from './widgets/SourceSelector/SourceSelector'
+export default _default