From fe848f3093ada490f2d99228c5cdd43b0a693f04 Mon Sep 17 00:00:00 2001
From: Alexandra Goff <agoff@lsst.org>
Date: Thu, 2 May 2024 14:42:32 -0700
Subject: [PATCH] [B] unified Source Selector helper

---
 .../Review/Widget/SourceSelector/index.tsx    | 17 ++++-------
 .../questions/Widget/SourceSelector/index.tsx | 25 +++++-----------
 helpers/widgets.ts                            | 29 +++++++++++++++++++
 3 files changed, 41 insertions(+), 30 deletions(-)
 create mode 100644 helpers/widgets.ts

diff --git a/components/questions/Review/Widget/SourceSelector/index.tsx b/components/questions/Review/Widget/SourceSelector/index.tsx
index 866c34c0..2640319f 100644
--- a/components/questions/Review/Widget/SourceSelector/index.tsx
+++ b/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
     />
   );
diff --git a/components/questions/Widget/SourceSelector/index.tsx b/components/questions/Widget/SourceSelector/index.tsx
index e303f99e..dc29e2ff 100644
--- a/components/questions/Widget/SourceSelector/index.tsx
+++ b/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 && (
diff --git a/helpers/widgets.ts b/helpers/widgets.ts
new file mode 100644
index 00000000..2e9b6782
--- /dev/null
+++ b/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,
+  };
+};