Fix addBox bugs

src/components/BaselayerSections.tsx

@@ -19,7 +19,11 @@ export function BaselayerSections({
   return (
     <>
       {internalBaselayerMaps?.map((map, index) => (
-        <CollapsibleSection summary={map.name} defaultOpen={index === 0}>
+        <CollapsibleSection
+          key={'section-internal-map-' + map.id}
+          summary={map.name}
+          defaultOpen={index === 0}
+        >
           {map.bands.map((band) => (
             <div className="input-container" key={band.map_id + '-' + band.id}>
               <input
@@ -42,7 +46,11 @@ export function BaselayerSections({
         </CollapsibleSection>
       ))}
       {
-        <CollapsibleSection summary="Comparison maps" defaultOpen={true}>
+        <CollapsibleSection
+          key="section-comparison-maps"
+          summary="Comparison maps"
+          defaultOpen={true}
+        >
           {EXTERNAL_BASELAYERS.map((bl) => (
             <div
               className={`input-container ${bl.disabledState(isFlipped) ? 'disabled' : ''}`}

src/components/BoxMenu.tsx

@@ -1,19 +1,21 @@
 import { ReactNode } from 'react';
-import { BoxWithPositionalData, NewBoxData, SubmapData } from '../types/maps';
+import { BoxWithDimensions, NewBoxData, SubmapData } from '../types/maps';
 import { MenuIcon } from './icons/MenuIcon';
 import { SUBMAP_DOWNLOAD_OPTIONS } from '../configs/submapConfigs';
 import { downloadSubmap } from '../utils/fetchUtils';
 import { transformBoxes } from '../utils/layerUtils';
+import { Map } from 'ol';
 
 type BoxMenuProps = {
   isNewBox: boolean;
-  boxData: BoxWithPositionalData | NewBoxData;
+  boxData: BoxWithDimensions | NewBoxData;
   setShowMenu: (showMenu: boolean) => void;
   showMenu: boolean;
   additionalButtons?: ReactNode[];
   submapData?: SubmapData;
   showMenuOverlay?: boolean;
   flipped: boolean;
+  mapRef: React.RefObject<Map | null>;
 };
 
 export function BoxMenu({
@@ -25,16 +27,24 @@ export function BoxMenu({
   submapData,
   showMenuOverlay,
   flipped,
+  mapRef,
 }: BoxMenuProps) {
+  const map = mapRef.current;
+
+  const topLeftBoxPosition = map?.getPixelFromCoordinate([
+    boxData.top_left_ra,
+    boxData.top_left_dec,
+  ]);
+
   return (
     <div
       className={
         'box-menu-hover-container no-background ' +
         (isNewBox && !showMenuOverlay && 'hide')
       }
       style={{
-        top: boxData.top,
-        left: boxData.left,
+        top: topLeftBoxPosition ? topLeftBoxPosition[1] : 0,
+        left: topLeftBoxPosition ? topLeftBoxPosition[0] : 0,
       }}
     >
       <div className="box-menu-header">

src/components/layers/AddHighlightBoxLayer.tsx

@@ -6,6 +6,7 @@ import { BoxMenu } from '../BoxMenu';
 import VectorLayer from 'ol/layer/Vector';
 import { Map } from 'ol';
 import { MapProps } from '../OpenLayersMap';
+import { drawStyle } from '../../utils/layerUtils';
 
 type AddHightlightBoxLayerProps = {
   mapRef: React.RefObject<Map | null>;
@@ -56,6 +57,7 @@ export function AddHighlightBoxLayer({
           type: 'Circle',
           geometryFunction: createBox(),
           geometryName: 'drawn-box-feature',
+          style: drawStyle,
         });
 
         draw.on('drawend', (e) => {
@@ -87,8 +89,6 @@ export function AddHighlightBoxLayer({
               top_left_dec,
               bottom_right_ra,
               bottom_right_dec,
-              top: topLeftBoxPosition[1],
-              left: topLeftBoxPosition[0],
               width: boxWidth,
               height: boxHeight,
             });
@@ -142,6 +142,7 @@ export function AddHighlightBoxLayer({
     <>
       {newBoxData && (
         <BoxMenu
+          mapRef={mapRef}
           isNewBox={true}
           flipped={flipped}
           boxData={newBoxData}

src/components/layers/HighlightBoxLayer.tsx

@@ -1,5 +1,5 @@
 import { useRef, useState, useEffect, useCallback } from 'react';
-import { Box, BoxWithPositionalData } from '../../types/maps';
+import { Box, BoxWithDimensions } from '../../types/maps';
 import VectorLayer from 'ol/layer/Vector';
 import VectorSource from 'ol/source/Vector';
 import { Feature, Map, MapBrowserEvent, Overlay } from 'ol';
@@ -31,7 +31,7 @@ export function HighlightBoxLayer({
 }: HightlightBoxLayerProps) {
   const boxOverlayRef = useRef<HTMLDivElement | null>(null);
   const [selectedBoxData, setSelectedBoxData] = useState<
-    BoxWithPositionalData | undefined
+    BoxWithDimensions | undefined
   >(undefined);
   const [showMenu, setShowMenu] = useState(false);
   const addedLayerIdsRef = useRef<Set<string>>(new Set());
@@ -70,8 +70,6 @@ export function HighlightBoxLayer({
 
         setSelectedBoxData({
           ...boxData,
-          top: topLeft[1],
-          left: topLeft[0],
           width,
           height,
         });
@@ -274,6 +272,7 @@ export function HighlightBoxLayer({
       </div>
       {showMenu && selectedBoxData && (
         <BoxMenu
+          mapRef={mapRef}
           isNewBox={false}
           flipped={flipped}
           boxData={selectedBoxData}

src/types/maps.ts

@@ -140,16 +140,12 @@ export type SubmapDataWithBounds = SubmapData & {
   right: number;
 };
 
-export type BoxWithPositionalData = Box & {
-  top: number;
-  left: number;
+export type BoxWithDimensions = Box & {
   width: number;
   height: number;
 };
 
 export type NewBoxData = Omit<Box, 'id' | 'name' | 'description'> & {
-  top: number;
-  left: number;
   width: number;
   height: number;
 };

src/utils/layerUtils.ts

@@ -2,6 +2,9 @@ import { Feature } from 'ol';
 import { BandWithCmapValues, BoxExtent } from '../types/maps';
 import { Source } from '../types/maps';
 import { NUMBER_OF_FIXED_COORDINATE_DECIMALS } from '../configs/mapSettings';
+import { Point } from 'ol/geom';
+import { Fill, Stroke, Style } from 'ol/style';
+import { FeatureLike } from 'ol/Feature';
 
 /**
  * A utility function to format a layer's name.
@@ -172,3 +175,26 @@ export function createSourcePopupContent(
   containerEl.appendChild(createSourceP('coord', data));
   containerEl.appendChild(createSourceP('flux', data));
 }
+
+/**
+ * Used to override default styling of the Draw feature so we can
+ * remove the blue Point that tracks the mouse cursor
+ */
+export function drawStyle(feature: FeatureLike) {
+  const geometry = feature.getGeometry();
+
+  // Hide the sketch point
+  if (geometry instanceof Point) {
+    return undefined;
+  }
+
+  return new Style({
+    stroke: new Stroke({
+      color: '#3399CC',
+      width: 2,
+    }),
+    fill: new Fill({
+      color: 'rgba(0, 0, 255, 0.1)',
+    }),
+  });
+}