From eb7f0fdee70c6fc10bf931378f64fab76312198a Mon Sep 17 00:00:00 2001
From: Alexandra Goff <agoff@lsst.org>
Date: Wed, 16 Oct 2024 14:03:36 -0700
Subject: [PATCH] fix: use widget controls layout

---
 .../src/layout/Controls/index.tsx             |   2 +-
 .../widgets/SupernovaThreeVector/index.tsx    | 141 ++++++++++--------
 .../widgets/SupernovaThreeVector/styles.ts    |  22 +--
 3 files changed, 81 insertions(+), 84 deletions(-)

diff --git a/packages/epo-widget-lib/src/layout/Controls/index.tsx b/packages/epo-widget-lib/src/layout/Controls/index.tsx
index 4204e5d4..4ebe340c 100644
--- a/packages/epo-widget-lib/src/layout/Controls/index.tsx
+++ b/packages/epo-widget-lib/src/layout/Controls/index.tsx
@@ -4,7 +4,7 @@ import * as Styled from "./styles";
 
 interface WidgetControlsProps {
   widget: ReactNode;
-  controls: ReactNode;
+  controls?: ReactNode;
   ratio?: Ratios;
   controlsId?: string;
   actions?: ReactNode;
diff --git a/packages/epo-widget-lib/src/widgets/SupernovaThreeVector/index.tsx b/packages/epo-widget-lib/src/widgets/SupernovaThreeVector/index.tsx
index 6b2aebc2..ff5a20de 100644
--- a/packages/epo-widget-lib/src/widgets/SupernovaThreeVector/index.tsx
+++ b/packages/epo-widget-lib/src/widgets/SupernovaThreeVector/index.tsx
@@ -5,6 +5,8 @@ import HorizontalSlider from "@rubin-epo/epo-react-lib/HorizontalSlider";
 import { ImageShape } from "@rubin-epo/epo-react-lib/Image";
 import { ChartMargin, HistogramData } from "@/types/charts";
 import { getLinearScale, between } from "@/lib/utils";
+import ResetButton from "@/atomic/Button/patterns/Reset";
+import Controls from "@/layout/Controls";
 import { SkymapObject } from "./Skymap";
 import LiveLabel from "./LiveLabel";
 import * as Styled from "./styles";
@@ -82,74 +84,81 @@ const SupernovaThreeVector: FunctionComponent<SupernovaThreeVectorProps> = ({
   }, 0);
 
   return (
-    <Styled.ThreeVectorContainer ratio={{ landscape: 3 / 2, portrait: 9 / 16 }}>
-      <Styled.ThreeVectorLayout>
-        <Styled.HistogramContainer>
-          <Styled.ChartTitle>
-            {t("supernova_three_vector.histogram.title")}
-          </Styled.ChartTitle>
-          <Styled.Histogram
-            data={histogramData}
-            {...{
-              activeRange,
-              xDomain,
-              yDomain,
-              xScale,
-              yScale,
-              yTicks,
-              xTicks,
-              step,
-              margin,
-              width,
-              height,
-            }}
-          />
-        </Styled.HistogramContainer>
-        <Styled.SliderContainer
-          style={{
-            paddingInlineStart: sliderLeftMargin,
-            paddingInlineEnd: sliderRightMargin,
-          }}
-        >
-          <HorizontalSlider
-            min={xMin}
-            max={xMax}
-            step={step}
-            value={activeRange}
-            ariaValuetext={({ valueNow }) =>
-              t("supernova_three_vector.slider.valueLabel", { value: valueNow })
-            }
-            color="var(--turquoise85,#12726D)"
-            minLabel={`${xMin} Mlyr`}
-            maxLabel={`${xMax} Mlyr`}
-            onChangeCallback={(value) =>
-              Array.isArray(value) && setActiveRange(value)
-            }
-          />
-        </Styled.SliderContainer>
-        <Styled.SkymapContainer>
-          <Styled.ChartTitle>
-            {t("supernova_three_vector.skymap.title")}
-          </Styled.ChartTitle>
-          <Styled.Skymap
+    <Controls
+      ratio={{ landscape: 3 / 2, portrait: 1 / 2 }}
+      widget={
+        <>
+          <Styled.ThreeVectorLayout>
+            <Styled.HistogramContainer>
+              <Styled.ChartTitle>
+                {t("supernova_three_vector.histogram.title")}
+              </Styled.ChartTitle>
+              <Styled.Histogram
+                data={histogramData}
+                {...{
+                  activeRange,
+                  xDomain,
+                  yDomain,
+                  xScale,
+                  yScale,
+                  yTicks,
+                  xTicks,
+                  step,
+                  margin,
+                  width,
+                  height,
+                }}
+              />
+            </Styled.HistogramContainer>
+            <Styled.SliderContainer
+              style={{
+                paddingInlineStart: sliderLeftMargin,
+                paddingInlineEnd: sliderRightMargin,
+              }}
+            >
+              <HorizontalSlider
+                min={xMin}
+                max={xMax}
+                step={step}
+                value={activeRange}
+                ariaValuetext={({ valueNow }) =>
+                  t("supernova_three_vector.slider.valueLabel", {
+                    value: valueNow,
+                  })
+                }
+                color="var(--turquoise85,#12726D)"
+                minLabel={`${xMin} Mlyr`}
+                maxLabel={`${xMax} Mlyr`}
+                onChangeCallback={(value) =>
+                  Array.isArray(value) && setActiveRange(value)
+                }
+              />
+            </Styled.SliderContainer>
+            <Styled.SkymapContainer>
+              <Styled.ChartTitle>
+                {t("supernova_three_vector.skymap.title")}
+              </Styled.ChartTitle>
+              <Styled.Skymap
+                objects={visibleUserObjects}
+                images={binnedImages}
+                describedById={liveDescriptionId}
+                visibleImages={selectedBins}
+              />
+            </Styled.SkymapContainer>
+          </Styled.ThreeVectorLayout>
+          <LiveLabel
+            id={liveDescriptionId}
             objects={visibleUserObjects}
-            images={binnedImages}
-            describedById={liveDescriptionId}
-            visibleImages={selectedBins}
+            min={activeRange[0]}
+            max={activeRange[1] + step}
+            {...{ supernovaCount }}
           />
-        </Styled.SkymapContainer>
-        <Styled.ResetButton
-          onResetCallback={() => setActiveRange([xMin, xMax])}
-        />
-      </Styled.ThreeVectorLayout>
-      <LiveLabel
-        id={liveDescriptionId}
-        objects={visibleUserObjects}
-        min={activeRange[0]}
-        max={activeRange[1] + step}
-        {...{ supernovaCount }}
-      />
-    </Styled.ThreeVectorContainer>
+        </>
+      }
+      actions={
+        <ResetButton onResetCallback={() => setActiveRange([xMin, xMax])} />
+      }
+    ></Controls>
   );
 };
 
diff --git a/packages/epo-widget-lib/src/widgets/SupernovaThreeVector/styles.ts b/packages/epo-widget-lib/src/widgets/SupernovaThreeVector/styles.ts
index 7c34dfd8..507af043 100644
--- a/packages/epo-widget-lib/src/widgets/SupernovaThreeVector/styles.ts
+++ b/packages/epo-widget-lib/src/widgets/SupernovaThreeVector/styles.ts
@@ -1,34 +1,26 @@
 import styled from "styled-components";
 import { token } from "@rubin-epo/epo-react-lib/styles";
-import AspectRatio from "@/layout/AspectRatio";
-import * as Button from "@/atomic/Button";
 import DistanceHistogram from "./Histogram";
 import BaseSkymap from "./Skymap";
 
-export const ThreeVectorContainer = styled(AspectRatio)`
-  container-type: inline-size;
-`;
-
 export const ThreeVectorLayout = styled.div`
   --three-vector-gap: calc(var(--PADDING_SMALL, 20px) / 2);
 
   display: grid;
   grid-template-columns: 1fr;
-  grid-template-rows: min-content 1fr min-content min-content;
+  grid-auto-rows: min-content;
   grid-template-areas:
     "skymap"
     "histogram"
-    "slider"
-    "reset";
+    "slider";
   gap: var(--three-vector-gap);
 
-  @container (min-width: ${token("BREAK_LARGE_TABLET")}) {
+  @media (orientation: landscape) {
     grid-template-columns: 1fr 1fr;
-    grid-template-rows: 1fr min-content min-content;
+    grid-template-rows: 1fr min-content;
     grid-template-areas:
       "histogram skymap"
-      "slider ."
-      "reset reset";
+      "slider .";
   }
 
   @container (min-width: ${token("BREAK_TABLET_MIN")}) {
@@ -59,10 +51,6 @@ export const SliderContainer = styled.div`
   grid-area: slider;
 `;
 
-export const ResetButton = styled(Button.Reset)`
-  grid-area: reset;
-`;
-
 export const SkymapContainer = styled.div`
   display: flex;
   flex-direction: column;