From 41b2a20449329277476af0352f13e9eaf2648e6c Mon Sep 17 00:00:00 2001
From: Caleb Robinson <calebrob6@gmail.com>
Date: Mon, 31 Aug 2026 21:03:58 +0000
Subject: [PATCH] chore(ui): remove the imagery adjustment panel from View
 Results

The opacity, contrast, hue rotation and saturation sliders are gone from
the results page, along with the state and the two handlers that existed
only to feed them.

The panel wrote straight to the Azure Maps layer options and its reset
button restored opacity 1, contrast 0, hueRotation 0, saturation 0, which
are the values the layers already start with. Removing it therefore
changes nothing about what the map draws.

The labeling tool has its own separate copy of these sliders in
LabelingToolLeftPanel, which is untouched. The shared
.labeling-imagery-controls CSS class stays for that reason.
---
 ui/src/Components/Visualizer/Visualizer.jsx   |  69 ---------
 .../Visualizer/VisualizerImageryControls.jsx  | 140 ------------------
 2 files changed, 209 deletions(-)
 delete mode 100644 ui/src/Components/Visualizer/VisualizerImageryControls.jsx

diff --git a/ui/src/Components/Visualizer/Visualizer.jsx b/ui/src/Components/Visualizer/Visualizer.jsx
index 6b79cfd6..072e2a47 100644
--- a/ui/src/Components/Visualizer/Visualizer.jsx
+++ b/ui/src/Components/Visualizer/Visualizer.jsx
@@ -8,7 +8,6 @@ import Labels from "./Labels";
 import { AppContext } from "../../AppContext";
 import PropType from "prop-types";
 import { convertDateToString } from "../../util/conversion";
-import VisualizerImageryControls from "./VisualizerImageryControls"
 import "../../assets/css/visualizer.css";
 import { getAzureMapsAuthOptions } from "../../util/azureMapsAuth";
 import { shouldIgnoreShortcut } from "../keyboardShortcuts";
@@ -30,13 +29,6 @@ const Visualizer = ({ setModalComponent }) => {
   const zoomControlRef = useRef(null);
   const [swipeStateMobile, setSwipeStateMobile] = useState("post");
 
-  const [imageryValues, setImageryValues] = useState({
-    opacity: 1,
-    contrast: 0,
-    hueRotation: 0,
-    saturation: 0,
-  });
-
   // Visualizer data fetching function
   async function getVisualizerResults() {
     setIsLoading(true);
@@ -397,60 +389,6 @@ const Visualizer = ({ setModalComponent }) => {
     }
   }
 
-  const updateImageryProperties = (key, value) => {
-    try {
-
-      var preImageryRef = getLayerById(primaryMapRef, "preDisasterImagery");
-      var postImageryRef = getLayerById(secondaryMapRef, "postDisasterImagery");
-
-      preImageryRef.setOptions({
-        [key]: value,
-      });
-
-      postImageryRef.setOptions({
-        [key]: value,
-      });
-
-      setImageryValues({
-        ...imageryValues,
-        [key]: value,
-      });
-
-    } catch (error) {
-      console.error("Error updating imagery values:", error);
-    }
-  };
-
-  const resetImageryProperties = () => {
-    try {
-
-      var preImageryRef = getLayerById(primaryMapRef, "preDisasterImagery");
-      var postImageryRef = getLayerById(secondaryMapRef, "postDisasterImagery");
-
-      preImageryRef.setOptions({
-        opacity: 1,
-        contrast: 0,
-        hueRotation: 0,
-        saturation: 0,
-      });
-
-      postImageryRef.setOptions({
-        opacity: 1,
-        contrast: 0,
-        hueRotation: 0,
-        saturation: 0,
-      });
-
-      setImageryValues({
-        opacity: 1,
-        contrast: 0,
-        hueRotation: 0,
-        saturation: 0,
-      });
-    } catch (error) {
-      console.error("Error resetting imagery values:", error);
-    }
-  };
 
 
   return (
@@ -467,13 +405,6 @@ const Visualizer = ({ setModalComponent }) => {
         setSwipeStateMobile={setSwipeStateMobile}
         swipeStateMobile={swipeStateMobile}
       />
-
-      <VisualizerImageryControls
-        updateImageryProperties={updateImageryProperties}
-        resetImageryProperties={resetImageryProperties}
-        imageryValues={imageryValues}
-        visualizerResults={globalVisualizerResults}
-      />
     </div>
   );
 };
diff --git a/ui/src/Components/Visualizer/VisualizerImageryControls.jsx b/ui/src/Components/Visualizer/VisualizerImageryControls.jsx
deleted file mode 100644
index e1078220..00000000
--- a/ui/src/Components/Visualizer/VisualizerImageryControls.jsx
+++ /dev/null
@@ -1,140 +0,0 @@
-// Copyright (c) Microsoft Corporation. All rights reserved.
-// Licensed under the MIT License.
-import {
-  Slider,
-  Button,
-  Field,
-  makeStyles,
-  tokens,
-} from "@fluentui/react-components";
-import { FluentIcon } from "../../util/icons";
-
-import PropTypes from "prop-types";
-
-const useStyles = makeStyles({
-  surface: {
-    color: tokens.colorNeutralForeground1,
-    backgroundColor: tokens.colorNeutralBackground1,
-    border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke2}`,
-    boxShadow: tokens.shadow8,
-  },
-});
-
-const VisualizerImageryControls = ({ updateImageryProperties, resetImageryProperties, imageryValues,  visualizerResults}) => {
-  const styles = useStyles();
-
-  return (
-    <>
-      {visualizerResults.projectName && (
-        <div
-
-          className={`d-none d-lg-flex absolute-labels imagery-controls ${styles.surface}`}
-          id="imageryControls"
-        >
-          <div>
-            <div
-              style={{
-                paddingTop: "5px",
-              }}
-              className="d-none d-lg-block"
-            >
-              <Field
-                className="labeling-imagery-field"
-                label={
-                  <span className="labeling-imagery-label">
-                    <span>Opacity</span>
-                    <output>{Math.round(imageryValues.opacity * 100)}%</output>
-                  </span>
-                }
-              >
-                <Slider
-                  className="labeling-imagery-slider"
-                  min={0}
-                  max={1}
-                  step={0.01}
-                  onChange={(e, data) => updateImageryProperties("opacity", data.value)}
-                  value={imageryValues.opacity}
-                />
-              </Field>
-
-              <Field
-                className="labeling-imagery-field"
-                label={
-                  <span className="labeling-imagery-label">
-                    <span>Contrast</span>
-                    <output>{imageryValues.contrast.toFixed(2)}</output>
-                  </span>
-                }
-              >
-                <Slider
-                  className="labeling-imagery-slider"
-                  min={-1}
-                  max={1}
-                  step={0.01}
-                  onChange={(e, data) => updateImageryProperties("contrast", data.value)}
-                  value={imageryValues.contrast}
-                />
-              </Field>
-
-              <Field
-                className="labeling-imagery-field"
-                label={
-                  <span className="labeling-imagery-label">
-                    <span>Hue Rotation</span>
-                    <output>{imageryValues.hueRotation}&deg;</output>
-                  </span>
-                }
-              >
-                <Slider
-                  className="labeling-imagery-slider"
-                  min={-180}
-                  max={180}
-                  step={1}
-                  onChange={(e, data) => updateImageryProperties("hueRotation", data.value)}
-                  value={imageryValues.hueRotation}
-                />
-              </Field>
-
-              <Field
-                className="labeling-imagery-field"
-                label={
-                  <span className="labeling-imagery-label">
-                    <span>Saturation</span>
-                    <output>{imageryValues.saturation.toFixed(2)}</output>
-                  </span>
-                }
-              >
-                <Slider
-                  className="labeling-imagery-slider"
-                  min={-1}
-                  max={1}
-                  step={0.01}
-                  onChange={(e, data) => updateImageryProperties("saturation", data.value)}
-                  value={imageryValues.saturation}
-                />
-              </Field>
-
-              <Button
-                appearance="transparent"
-                icon={<FluentIcon name="Slider" />}
-                className="w-100 mb-2 mt-2"
-                onClick={resetImageryProperties}
-              >
-                Reset controls
-              </Button>
-            </div>
-          </div>
-        </div>
-      )}
-    </>
-  );
-};
-
-VisualizerImageryControls.propTypes = {
-  updateImageryProperties: PropTypes.func.isRequired,
-  resetImageryProperties: PropTypes.func.isRequired,
-  imageryValues: PropTypes.object.isRequired,
-  visualizerResults: PropTypes.object.isRequired,
-};
-
-export default VisualizerImageryControls;