[B] unified Source Selector helper

components/questions/Review/Widget/SourceSelector/index.tsx

@@ -3,6 +3,7 @@ import SourceSelector from "@rubin-epo/epo-widget-lib/SourceSelector";
 import { WidgetReviewProps } from "..";
 import { SourceSelectorData } from "@/types/widgets";
 import useAlerts from "@/lib/api/hooks/useAlerts";
+import { combineAlertsAndImages } from "@/helpers/widgets";
 
 const SourceSelectorReview: FunctionComponent<
   WidgetReviewProps<any, SourceSelectorData>
@@ -16,21 +17,13 @@ const SourceSelectorReview: FunctionComponent<
 
   if (isLoading) return null;
 
-  const alerts = alertData.map((d, i) => {
-    const {
-      width,
-      height,
-      url: { directUrlOriginal },
-    } = imageAlbum[i];
-
-    return { ...d, image: { width, height, url: directUrlOriginal } };
-  });
-
-  const [{ width, height }] = imageAlbum;
+  const { alerts, size } = combineAlertsAndImages(alertData, imageAlbum || []);
 
   return (
     <SourceSelector
-      {...{ sources, alerts, width, height, selectedSource }}
+      {...{ sources, alerts, selectedSource }}
+      width={size}
+      height={size}
       isDisplayOnly
     />
   );

components/questions/Widget/SourceSelector/index.tsx

@@ -7,6 +7,7 @@ import MagnitudeScatterPlotContainer from "@/components/dynamic/LightCurveTool/M
 import { WidgetQuestion } from "..";
 import * as Styled from "./styles";
 import Loader from "@/components/page/Loader";
+import { combineAlertsAndImages } from "@/helpers/widgets";
 
 const Fragment = graphql(`
   fragment SourceSelectorQuestion on questionWidgetsBlock_sourceSelectorBlock_BlockType {
@@ -57,7 +58,6 @@ type SourceSelectorQuestionProps = WidgetQuestion<
 const SourceSelectorQuestion: FunctionComponent<
   SourceSelectorQuestionProps
 > = ({ data, onChangeCallback, value = {}, instructions }) => {
-  const staticWidth = 1000;
   const { sourceSelector } = useFragment(Fragment, data);
   const [activeAlertIndex, setActiveAlertIndex] = useState(0);
 
@@ -100,21 +100,10 @@ const SourceSelectorQuestion: FunctionComponent<
       return { id, type };
     });
 
-  const alertsWithImages = alerts.map((alert, i) => {
-    const {
-      url: { directUrlPreview },
-    } = imageAlbum[i];
-    const urlWithoutConstraint = directUrlPreview.slice(0, -3);
-
-    return {
-      ...alert,
-      image: {
-        width: staticWidth,
-        height: staticWidth,
-        url: `${urlWithoutConstraint}${staticWidth}`,
-      },
-    };
-  });
+  const { alerts: alertsWithImages, size } = combineAlertsAndImages(
+    alerts,
+    imageAlbum || []
+  );
 
   return (
     <>
@@ -134,8 +123,8 @@ const SourceSelectorQuestion: FunctionComponent<
                   onChangeCallback && onChangeCallback({ selectedSource: data })
                 }
                 alertChangeCallback={setActiveAlertIndex}
-                width={staticWidth}
-                height={staticWidth}
+                width={size}
+                height={size}
                 {...{ sources, selectedSource, activeAlertIndex }}
               />
               {!!includeScatterPlot && (

helpers/widgets.ts

@@ -0,0 +1,29 @@
+import { Alert } from "@/lib/api/hooks/useAlerts";
+
+export const combineAlertsAndImages = (
+  alerts: Array<Alert | any>,
+  images: Array<any>
+) => {
+  const size = 1000;
+
+  return {
+    alerts: alerts.map((alert, i) => {
+      const {
+        url: { directUrlPreview },
+      } = images[i];
+
+      const urlWithoutConstraint = directUrlPreview.slice(0, -3);
+
+      return {
+        ...alert,
+        ...alert,
+        image: {
+          width: size,
+          height: size,
+          url: `${urlWithoutConstraint}${size}`,
+        },
+      };
+    }),
+    size,
+  };
+};