[C] Resize source selector images

components/dynamic/LightCurveTool/MagnitudeScatterPlot/index.tsx

@@ -27,7 +27,7 @@ const MagnitudeScatterPlotContainer: FunctionComponent<
 
   const activeAlertId =
     typeof activeAlertIndex === "number"
-      ? alerts[activeAlertIndex].id
+      ? alerts[activeAlertIndex]?.id
       : undefined;
 
   return (

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

@@ -3,7 +3,10 @@ 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";
+import {
+  combineAlertsAndImages,
+  percentageMapSources,
+} from "@/helpers/widgets";
 
 const SourceSelectorReview: FunctionComponent<
   WidgetReviewProps<any, SourceSelectorData>
@@ -13,15 +16,16 @@ const SourceSelectorReview: FunctionComponent<
   const [{ sources, json, imageAlbum }] = dataset;
   const { selectedSource = [] } = value || {};
 
-  const { data: alertData = [], error, isLoading } = useAlerts(json[0].url);
-
-  if (isLoading) return null;
+  const { data: alertData = [], isLoading } = useAlerts(json[0].url);
 
   const { alerts, size } = combineAlertsAndImages(alertData, imageAlbum || []);
 
+  const percentageMappedSources = percentageMapSources(sources);
+
   return (
     <SourceSelector
-      {...{ sources, alerts, selectedSource }}
+      {...{ alerts, selectedSource, isLoading }}
+      sources={percentageMappedSources}
       width={size}
       height={size}
       isDisplayOnly

components/questions/Widget/SourceSelector/index.tsx

@@ -7,8 +7,10 @@ import useAlerts from "@/lib/api/hooks/useAlerts";
 import WidgetContainerWithModal from "@/components/layout/WidgetContainerWithModal";
 import MagnitudeScatterPlotContainer from "@/components/dynamic/LightCurveTool/MagnitudeScatterPlot";
 import { WidgetQuestion } from "..";
-import Loader from "@/components/page/Loader";
-import { combineAlertsAndImages } from "@/helpers/widgets";
+import {
+  combineAlertsAndImages,
+  percentageMapSources,
+} from "@/helpers/widgets";
 
 const Fragment = graphql(`
   fragment SourceSelectorQuestion on questionWidgetsBlock_sourceSelectorBlock_BlockType {
@@ -95,6 +97,8 @@ const SourceSelectorQuestion: FunctionComponent<
     }
   };
 
+  const percentageMappedSources = percentageMapSources(sources);
+
   const selectedSources: Array<{ type: string; id: string }> = sources
     .filter(({ id }) => selectedSource.includes(id))
     .map(({ id, type }) => {
@@ -118,28 +122,25 @@ const SourceSelectorQuestion: FunctionComponent<
         }
         {...{ instructions }}
       >
-        {isLoading ? (
-          <Loader height="20rem" />
-        ) : (
-          <>
-            <SourceSelector
-              alerts={alertsWithImages}
-              selectionCallback={(data) =>
-                onChangeCallback && onChangeCallback({ selectedSource: data })
-              }
-              alertChangeCallback={setActiveAlertIndex}
-              width={size}
-              height={size}
-              {...{ sources, selectedSource, activeAlertIndex }}
+        <>
+          <SourceSelector
+            alerts={alertsWithImages}
+            selectionCallback={(data) =>
+              onChangeCallback && onChangeCallback({ selectedSource: data })
+            }
+            alertChangeCallback={setActiveAlertIndex}
+            width={size}
+            height={size}
+            sources={percentageMappedSources}
+            {...{ selectedSource, activeAlertIndex, isLoading }}
+          />
+          {!!includeScatterPlot && (
+            <MagnitudeScatterPlotContainer
+              showPlot={selectedSource.length > 0}
+              {...{ alerts, peakMjd, yMin, yMax, activeAlertIndex }}
             />
-            {!!includeScatterPlot && (
-              <MagnitudeScatterPlotContainer
-                showPlot={selectedSource.length > 0}
-                {...{ alerts, peakMjd, yMin, yMax, activeAlertIndex }}
-              />
-            )}
-          </>
-        )}
+          )}
+        </>
       </WidgetContainerWithModal>
     </>
   );

helpers/assets.ts

@@ -0,0 +1,15 @@
+type ValidCantoSize = 100 | 240 | 320 | 500 | 640 | 800 | 2050;
+
+const ValidCantoSizes: Array<ValidCantoSize> = [
+  100, 240, 320, 500, 640, 800, 2050,
+];
+
+export const resizeCantoImage = (previewUrl: string, size: ValidCantoSize) => {
+  if (ValidCantoSizes.includes(size)) {
+    const urlWithoutConstraint = previewUrl.slice(0, -3);
+
+    return urlWithoutConstraint.concat(size.toString());
+  }
+
+  return previewUrl;
+};

helpers/widgets.ts

@@ -1,29 +1,40 @@
 import { Alert } from "@/lib/api/hooks/useAlerts";
+import { resizeCantoImage } from "./assets";
 
 export const combineAlertsAndImages = (
   alerts: Array<Alert | any>,
   images: Array<any>
 ) => {
-  const size = 1000;
+  const size = 240;
 
   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}`,
+          url: resizeCantoImage(directUrlPreview, size),
         },
       };
     }),
     size,
   };
 };
+
+export const percentageMapSources = <T extends { x: any; y: any; radius: any }>(
+  sources: Array<T>
+) =>
+  sources.map(({ x, y, radius, ...source }) => {
+    return {
+      x: `${x}%`,
+      y: `${y}%`,
+      radius: `${radius}%`,
+      ...source,
+    };
+  });

package.json

@@ -58,7 +58,7 @@
     "@greatsumini/react-facebook-login": "^3.3.3",
     "@react-oauth/google": "^0.11.0",
     "@rubin-epo/epo-react-lib": "^2.0.24",
-    "@rubin-epo/epo-widget-lib": "^0.9.11-beta.1",
+    "@rubin-epo/epo-widget-lib": "^0.9.12",
     "@unly/universal-language-detector": "^2.0.3",
     "@urql/core": "^4.1.0",
     "@urql/next": "^1.1.0",

yarn.lock

@@ -3019,13 +3019,13 @@
   resolved "https://registry.yarnpkg.com/@repeaterjs/repeater/-/repeater-3.0.4.tgz#a04d63f4d1bf5540a41b01a921c9a7fddc3bd1ca"
   integrity sha512-AW8PKd6iX3vAZ0vA43nOUOnbq/X5ihgU+mSXXqunMkeQADGiqw/PY0JNeYtD5sr0PAy51YPgAPbDoeapv9r8WA==
 
-"@rubin-epo/epo-react-lib@^2.0.20":
-  version "2.0.20"
-  resolved "https://registry.yarnpkg.com/@rubin-epo/epo-react-lib/-/epo-react-lib-2.0.20.tgz#a4fc6cc2765688da12ed2d7e651018a1d712cddb"
-  integrity sha512-ZCdeqnlqSCmGX6PcaG+18lMB/5SsW0qWT19p28bGZZxdF66uI/qzSVMAKTPaWKHKD2kW/UejMk0ZvomQ4VKCDA==
+"@rubin-epo/[email protected].24":
+  version "2.0.24"
+  resolved "https://registry.yarnpkg.com/@rubin-epo/epo-react-lib/-/epo-react-lib-2.0.24.tgz#c30d6e71490dee279b1a1bc8db63b8483f8bf539"
+  integrity sha512-dGkO3R4Y3eYrBKbJp9xdWtjR+wlBp+SqhrrO6lg1QnKyvtrzV40WNrxfvyco7ZHYLPXIzbBi+onAhCwpmJJjew==
   dependencies:
     "@castiron/style-mixins" "^1.0.6"
-    "@headlessui/react" "^1.7.17"
+    "@headlessui/react" "^2.0.3"
     flickity "^3.0.0"
     focus-trap "^7.4.2"
     i18next "^22.4.10"
@@ -3057,12 +3057,12 @@
     react-uid "^2.3.2"
     styled-components "^6.1.1"
 
-"@rubin-epo/epo-widget-lib@^0.9.11-beta.1":
-  version "0.9.11-beta.1"
-  resolved "https://registry.yarnpkg.com/@rubin-epo/epo-widget-lib/-/epo-widget-lib-0.9.11-beta.1.tgz#bac1a69848b60c7af0837a498c3a1995d0847f84"
-  integrity sha512-bW2n4zCjCwjftUjsY2umE1R3EROd8Un7Pq5jadzEpatKMC7nZJIy6z+8B/Zluzx8J+nEspNC0NwIP3j5cMv7bg==
+"@rubin-epo/epo-widget-lib@^0.9.12":
+  version "0.9.12"
+  resolved "https://registry.yarnpkg.com/@rubin-epo/epo-widget-lib/-/epo-widget-lib-0.9.12.tgz#91facebe49705c9932c100169b87a506d73d8490"
+  integrity sha512-6MRYFdQ0QATuGVqOYVpfXLASwujBrqXfTZLn62WbAMgUNCq1LWiX5rT9OHb4bmT5PUgOfxbcVDbskcBBwnl7uQ==
   dependencies:
-    "@rubin-epo/epo-react-lib" "^2.0.20"
+    "@rubin-epo/epo-react-lib" "2.0.24"
     context-filter-polyfill "^0.3.6"
     d3-array "^3.2.4"
     d3-geo "^3.1.0"