Add unwise layer v2

src/App.tsx

@@ -3,6 +3,7 @@ import { MapMetadataResponse, Band, SourceList } from './types/maps';
 import { ColorMapControls } from './components/ColorMapControls';
 import { fetchProducts } from './utils/fetchUtils';
 import {
+  assertBand,
   baselayerReducer,
   CHANGE_BASELAYER,
   CHANGE_CMAP_TYPE,
@@ -13,6 +14,7 @@ import { useQuery } from './hooks/useQuery';
 import { useHighlightBoxes } from './hooks/useHighlightBoxes';
 import { OpenLayersMap } from './components/OpenLayersMap';
 import { handleSelectChange } from './utils/layerUtils';
+import { EXTERNAL_BASELAYERS } from './configs/mapSettings';
 
 function App() {
   /** contains useful state of the baselayer for tile requests and matplotlib color mapping */
@@ -98,10 +100,12 @@ function App() {
    * TileLayer requests.
    */
   const onBaseLayerChange = useCallback(
-    (selectedBaselayerId: number) => {
-      const newActiveBaselayer = bands?.find(
-        (b) => b.id === selectedBaselayerId
-      );
+    (selectedBaselayerId: string) => {
+      const isExternalBaselayer = selectedBaselayerId.includes('external');
+
+      const newActiveBaselayer = isExternalBaselayer
+        ? EXTERNAL_BASELAYERS.find((b) => b.id === selectedBaselayerId)
+        : bands?.find((b) => b.id === Number(selectedBaselayerId));
 
       if (!newActiveBaselayer) return;
 
@@ -149,7 +153,7 @@ function App() {
   /** Creates an object of data needed by the submap endpoints to download and to add regions. Since it's 
     composed from state at this level, we must construct it here and pass it down. */
   const submapData = useMemo(() => {
-    if (baselayerState.activeBaselayer) {
+    if (assertBand(baselayerState.activeBaselayer)) {
       const { map_id: mapId, id: bandId } = baselayerState.activeBaselayer;
       const { cmap, cmapValues } = baselayerState;
       return {
@@ -162,33 +166,27 @@ function App() {
     }
   }, [baselayerState]);
 
-  if (
-    !baselayerState.activeBaselayer ||
-    !baselayerState.cmap ||
-    !baselayerState.cmapValues
-  ) {
-    return null;
-  } else {
-    const { activeBaselayer, cmap, cmapValues } = baselayerState;
-    return (
-      <>
-        {baselayerState.activeBaselayer && bands && (
-          <OpenLayersMap
-            bands={bands}
-            baselayerState={baselayerState}
-            onBaseLayerChange={onBaseLayerChange}
-            sourceLists={sourceLists}
-            activeSourceListIds={activeSourceListIds}
-            onSelectedSourceListsChange={onSelectedSourceListsChange}
-            highlightBoxes={optimisticHighlightBoxes}
-            setBoxes={updateHighlightBoxes}
-            activeBoxIds={activeBoxIds}
-            setActiveBoxIds={setActiveBoxIds}
-            onSelectedHighlightBoxChange={onSelectedHighlightBoxChange}
-            submapData={submapData}
-            addOptimisticHighlightBox={addOptimisticHighlightBox}
-          />
-        )}
+  const { activeBaselayer, cmap, cmapValues } = baselayerState;
+  return (
+    <>
+      {baselayerState.activeBaselayer && bands && (
+        <OpenLayersMap
+          bands={bands}
+          baselayerState={baselayerState}
+          onBaseLayerChange={onBaseLayerChange}
+          sourceLists={sourceLists}
+          activeSourceListIds={activeSourceListIds}
+          onSelectedSourceListsChange={onSelectedSourceListsChange}
+          highlightBoxes={optimisticHighlightBoxes}
+          setBoxes={updateHighlightBoxes}
+          activeBoxIds={activeBoxIds}
+          setActiveBoxIds={setActiveBoxIds}
+          onSelectedHighlightBoxChange={onSelectedHighlightBoxChange}
+          submapData={submapData}
+          addOptimisticHighlightBox={addOptimisticHighlightBox}
+        />
+      )}
+      {assertBand(activeBaselayer) && cmap && cmapValues && (
         <ColorMapControls
           values={[cmapValues.min, cmapValues.max]}
           onCmapValuesChange={onCmapValuesChange}
@@ -198,9 +196,9 @@ function App() {
           units={activeBaselayer.units}
           quantity={activeBaselayer.quantity}
         />
-      </>
-    );
-  }
+      )}
+    </>
+  );
 }
 
 export default App;

src/components/AddBoxDialog.tsx

@@ -12,6 +12,7 @@ type AddBoxDialogProps = {
   setActiveBoxIds: MapProps['setActiveBoxIds'];
   addOptimisticHighlightBox: MapProps['addOptimisticHighlightBox'];
   handleAddBoxCleanup: () => void;
+  flipped: boolean;
 };
 
 export function AddBoxDialog({
@@ -22,6 +23,7 @@ export function AddBoxDialog({
   setActiveBoxIds,
   addOptimisticHighlightBox,
   handleAddBoxCleanup,
+  flipped,
 }: AddBoxDialogProps) {
   const [boxName, setBoxName] = useState('');
   const [boxDescription, setBoxDescription] = useState('');
@@ -51,6 +53,7 @@ export function AddBoxDialog({
 
       addSubmapAsBox(
         boxData,
+        flipped,
         setBoxes,
         setActiveBoxIds,
         addOptimisticHighlightBox
@@ -69,6 +72,7 @@ export function AddBoxDialog({
       addOptimisticHighlightBox,
       setActiveBoxIds,
       setBoxes,
+      flipped,
     ]
   );
 

src/components/BoxMenu.tsx

@@ -3,6 +3,7 @@ import { BoxWithPositionalData, 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';
 
 type BoxMenuProps = {
   isNewBox: boolean;
@@ -12,6 +13,7 @@ type BoxMenuProps = {
   additionalButtons?: ReactNode[];
   submapData?: SubmapData;
   showMenuOverlay?: boolean;
+  flipped: boolean;
 };
 
 export function BoxMenu({
@@ -22,6 +24,7 @@ export function BoxMenu({
   additionalButtons = [],
   submapData,
   showMenuOverlay,
+  flipped,
 }: BoxMenuProps) {
   return (
     <div
@@ -48,15 +51,25 @@ export function BoxMenu({
                 <button
                   className="area-select-button highlight-box-button"
                   key={option.display}
+                  disabled={!submapData}
                   onClick={() => {
                     if (submapData) {
+                      const boxPosition = transformBoxes(
+                        {
+                          top_left_ra: boxData.top_left_ra,
+                          top_left_dec: boxData.top_left_dec,
+                          bottom_right_ra: boxData.bottom_right_ra,
+                          bottom_right_dec: boxData.bottom_right_dec,
+                        },
+                        flipped
+                      );
                       downloadSubmap(
                         {
                           ...submapData,
-                          top: boxData.top_left_dec,
-                          left: boxData.top_left_ra,
-                          bottom: boxData.bottom_right_dec,
-                          right: boxData.bottom_right_ra,
+                          top: boxPosition.top_left_dec,
+                          left: boxPosition.top_left_ra,
+                          bottom: boxPosition.bottom_right_dec,
+                          right: boxPosition.bottom_right_ra,
                         },
                         option.ext
                       );

src/components/CoordinatesDisplay.tsx

@@ -1,15 +1,23 @@
 import { NUMBER_OF_FIXED_COORDINATE_DECIMALS } from '../configs/mapSettings';
+import { transformGraticuleCoords } from '../utils/layerUtils';
 import './styles/coordinates-display.css';
 
-export function CoordinatesDisplay({ coordinates }: { coordinates: number[] }) {
+export function CoordinatesDisplay({
+  coordinates,
+  flipped,
+}: {
+  coordinates: number[];
+  flipped: boolean;
+}) {
+  const transformedCoords = transformGraticuleCoords(coordinates, flipped);
   return (
     <div className="coordinates-display">
       <span className="parens">( </span>
       <span className="coords lat">
-        {coordinates[0].toFixed(NUMBER_OF_FIXED_COORDINATE_DECIMALS)} ,
+        {transformedCoords[0].toFixed(NUMBER_OF_FIXED_COORDINATE_DECIMALS)} ,
       </span>
       <span className="coords lng">
-        {coordinates[1].toFixed(NUMBER_OF_FIXED_COORDINATE_DECIMALS)}
+        {transformedCoords[1].toFixed(NUMBER_OF_FIXED_COORDINATE_DECIMALS)}
       </span>
       <span className="parens"> )</span>
     </div>

src/components/LayerSelector.tsx

@@ -4,6 +4,7 @@ import { makeLayerName } from '../utils/layerUtils';
 import { LayersIcon } from './icons/LayersIcon';
 import './styles/layer-selector.css';
 import { MapProps } from './OpenLayersMap';
+import { EXTERNAL_BASELAYERS } from '../configs/mapSettings';
 
 interface Props
   extends Omit<
@@ -14,8 +15,9 @@ interface Props
     | 'setBoxes'
     | 'addOptimisticHighlightBox'
   > {
-  activeBaselayerId?: number;
+  activeBaselayerId?: number | string;
   sourceLists: SourceList[];
+  isFlipped: boolean;
 }
 
 export function LayerSelector({
@@ -28,6 +30,7 @@ export function LayerSelector({
   highlightBoxes,
   activeBoxIds,
   onSelectedHighlightBoxChange,
+  isFlipped,
 }: Props) {
   const menuRef = useRef<HTMLDivElement | null>(null);
 
@@ -65,13 +68,30 @@ export function LayerSelector({
                 value={band.id}
                 name="baselayer"
                 checked={band.id === activeBaselayerId}
-                onChange={(e) => onBaseLayerChange(Number(e.target.value))}
+                onChange={(e) => onBaseLayerChange(e.target.value)}
               />
               <label htmlFor={String(band.id)}>{makeLayerName(band)}</label>
             </div>
           ))}
+          {EXTERNAL_BASELAYERS.map((bl) => (
+            <div
+              className={`input-container ${bl.disabledState(isFlipped) ? 'disabled' : ''}`}
+              key={bl.id}
+            >
+              <input
+                type="radio"
+                id={bl.id}
+                value={bl.id}
+                name="baselayer"
+                checked={bl.id === activeBaselayerId}
+                onChange={(e) => onBaseLayerChange(e.target.value)}
+                disabled={bl.disabledState(isFlipped)}
+              />
+              <label htmlFor={bl.id}>{bl.name}</label>
+            </div>
+          ))}
         </fieldset>
-        {sourceLists.length && (
+        {sourceLists.length ? (
           <fieldset>
             <legend>Source catalogs</legend>
             {sourceLists.map((sl) => (
@@ -87,8 +107,8 @@ export function LayerSelector({
               </div>
             ))}
           </fieldset>
-        )}
-        {highlightBoxes && (
+        ) : null}
+        {highlightBoxes && highlightBoxes.length ? (
           <fieldset>
             <legend>Highlight regions</legend>
             {highlightBoxes.map((box) => (
@@ -104,7 +124,7 @@ export function LayerSelector({
               </div>
             ))}
           </fieldset>
-        )}
+        ) : null}
       </div>
     </>
   );