From 1f1d9a838e6d14f6bfe514c4f7ddf3087ab5b05f Mon Sep 17 00:00:00 2001 From: Alexandra Goff Date: Tue, 14 May 2024 16:54:15 -0700 Subject: [PATCH 1/2] [C] map source selector to percent --- .../MagnitudeScatterPlot/index.tsx | 2 +- .../Review/Widget/SourceSelector/index.tsx | 14 ++++-- .../questions/Widget/SourceSelector/index.tsx | 47 ++++++++++--------- helpers/widgets.ts | 18 +++++-- yarn.lock | 32 +++++++++---- 5 files changed, 70 insertions(+), 43 deletions(-) diff --git a/components/dynamic/LightCurveTool/MagnitudeScatterPlot/index.tsx b/components/dynamic/LightCurveTool/MagnitudeScatterPlot/index.tsx index fd2c5dc9..8664d1d4 100644 --- a/components/dynamic/LightCurveTool/MagnitudeScatterPlot/index.tsx +++ b/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 ( diff --git a/components/questions/Review/Widget/SourceSelector/index.tsx b/components/questions/Review/Widget/SourceSelector/index.tsx index 2640319f..1b75374e 100644 --- a/components/questions/Review/Widget/SourceSelector/index.tsx +++ b/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 @@ -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 ( = sources .filter(({ id }) => selectedSource.includes(id)) .map(({ id, type }) => { @@ -118,28 +122,25 @@ const SourceSelectorQuestion: FunctionComponent< } {...{ instructions }} > - {isLoading ? ( - - ) : ( - <> - - onChangeCallback && onChangeCallback({ selectedSource: data }) - } - alertChangeCallback={setActiveAlertIndex} - width={size} - height={size} - {...{ sources, selectedSource, activeAlertIndex }} + <> + + onChangeCallback && onChangeCallback({ selectedSource: data }) + } + alertChangeCallback={setActiveAlertIndex} + width={size} + height={size} + sources={percentageMappedSources} + {...{ selectedSource, activeAlertIndex, isLoading }} + /> + {!!includeScatterPlot && ( + 0} + {...{ alerts, peakMjd, yMin, yMax, activeAlertIndex }} /> - {!!includeScatterPlot && ( - 0} - {...{ alerts, peakMjd, yMin, yMax, activeAlertIndex }} - /> - )} - - )} + )} + ); diff --git a/helpers/widgets.ts b/helpers/widgets.ts index 2e9b6782..518ea042 100644 --- a/helpers/widgets.ts +++ b/helpers/widgets.ts @@ -4,7 +4,7 @@ export const combineAlertsAndImages = ( alerts: Array, images: Array ) => { - const size = 1000; + const size = 200; return { alerts: alerts.map((alert, i) => { @@ -12,18 +12,28 @@ export const combineAlertsAndImages = ( url: { directUrlPreview }, } = images[i]; - const urlWithoutConstraint = directUrlPreview.slice(0, -3); - return { ...alert, ...alert, image: { width: size, height: size, - url: `${urlWithoutConstraint}${size}`, + url: directUrlPreview, }, }; }), size, }; }; + +export const percentageMapSources = ( + sources: Array +) => + sources.map(({ x, y, radius, ...source }) => { + return { + x: `${x}%`, + y: `${y}%`, + radius: `${radius}%`, + ...source, + }; + }); diff --git a/yarn.lock b/yarn.lock index a9f11cd9..f686c769 100644 --- a/yarn.lock +++ b/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/epo-react-lib@2.0.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,24 @@ 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@file:../epo-react-lib/packages/epo-widget-lib/tempPublish": + version "0.9.12" + dependencies: + "@rubin-epo/epo-react-lib" "2.0.24" + context-filter-polyfill "^0.3.6" + d3-array "^3.2.4" + d3-geo "^3.1.0" + d3-geo-projection "^4.0.0" + lodash "^4.17.21" + react-slider "^2.0.6" + skia-canvas "^1.0.1" + styled-components "^6.1.1" + use-resize-observer "^9.1.0" + +"@rubin-epo/epo-widget-lib@file:/Users/agoff/Documents/workspace/epo-react-lib/packages/epo-widget-lib/tempPublish": + version "0.9.12" 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" From 92f155fb8d262624d501a78068ca2d4d12f31a35 Mon Sep 17 00:00:00 2001 From: Alexandra Goff Date: Wed, 15 May 2024 13:40:12 -0700 Subject: [PATCH 2/2] [C] update library --- helpers/assets.ts | 15 +++++++++++++++ helpers/widgets.ts | 5 +++-- package.json | 2 +- yarn.lock | 18 +++--------------- 4 files changed, 22 insertions(+), 18 deletions(-) create mode 100644 helpers/assets.ts diff --git a/helpers/assets.ts b/helpers/assets.ts new file mode 100644 index 00000000..427d4c19 --- /dev/null +++ b/helpers/assets.ts @@ -0,0 +1,15 @@ +type ValidCantoSize = 100 | 240 | 320 | 500 | 640 | 800 | 2050; + +const ValidCantoSizes: Array = [ + 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; +}; diff --git a/helpers/widgets.ts b/helpers/widgets.ts index 518ea042..42fcc73c 100644 --- a/helpers/widgets.ts +++ b/helpers/widgets.ts @@ -1,10 +1,11 @@ import { Alert } from "@/lib/api/hooks/useAlerts"; +import { resizeCantoImage } from "./assets"; export const combineAlertsAndImages = ( alerts: Array, images: Array ) => { - const size = 200; + const size = 240; return { alerts: alerts.map((alert, i) => { @@ -18,7 +19,7 @@ export const combineAlertsAndImages = ( image: { width: size, height: size, - url: directUrlPreview, + url: resizeCantoImage(directUrlPreview, size), }, }; }), diff --git a/package.json b/package.json index 6cfbb3c6..4e898b45 100644 --- a/package.json +++ b/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", diff --git a/yarn.lock b/yarn.lock index f686c769..e6e61d87 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3057,22 +3057,10 @@ react-uid "^2.3.2" styled-components "^6.1.1" -"@rubin-epo/epo-widget-lib@file:../epo-react-lib/packages/epo-widget-lib/tempPublish": - version "0.9.12" - dependencies: - "@rubin-epo/epo-react-lib" "2.0.24" - context-filter-polyfill "^0.3.6" - d3-array "^3.2.4" - d3-geo "^3.1.0" - d3-geo-projection "^4.0.0" - lodash "^4.17.21" - react-slider "^2.0.6" - skia-canvas "^1.0.1" - styled-components "^6.1.1" - use-resize-observer "^9.1.0" - -"@rubin-epo/epo-widget-lib@file:/Users/agoff/Documents/workspace/epo-react-lib/packages/epo-widget-lib/tempPublish": +"@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.24" context-filter-polyfill "^0.3.6"