Skip to content

Commit 2d817e5

Browse files
jernestmyersjernestmyers
authored
Merge pull request #83 from simonsobs/refactor-coords-display
Refactor coords display
2 parents 335019c + 2813707 commit 2d817e5

File tree

11 files changed

+76
-76
lines changed

11 files changed

+76
-76
lines changed

‎src/components/ColorMapControls.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -157,7 +157,7 @@ export function ColorMapControls(props: ColorMapControlsProps) {
157157
const step = stepCalc >= 1 ? Math.floor(stepCalc) : stepCalc;
158158

159159
return { min, max, step };
160-
}, [processedHistogramData?.edges, values, isLogScale]);
160+
}, [processedHistogramData?.edges, values]);
161161

162162
/** Change handler for the color map <select> element */
163163
const handleCmapChange: ChangeEventHandler<HTMLSelectElement> = useCallback(

‎src/components/CoordinatesDisplay.tsx‎

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,25 @@
11
import { useCallback, useEffect, useRef, useState, FormEvent } from 'react';
2-
import { Map, Feature } from 'ol';
2+
import { Map, Feature, MapBrowserEvent } from 'ol';
33
import { Geometry } from 'ol/geom';
44
import { NUMBER_OF_FIXED_COORDINATE_DECIMALS } from '../configs/mapSettings';
55
import { transformGraticuleCoords } from '../utils/layerUtils';
66
import './styles/coordinates-display.css';
77
import { searchOverlayHelper } from '../utils/externalSearchUtils';
88

99
export function CoordinatesDisplay({
10-
coordinates,
1110
flipped,
1211
mapRef,
1312
externalSearchRef,
1413
externalSearchMarkerRef,
1514
}: {
16-
coordinates: number[];
1715
flipped: boolean;
1816
mapRef: React.RefObject<Map | null>;
1917
externalSearchRef: React.RefObject<HTMLDivElement | null>;
2018
externalSearchMarkerRef: React.RefObject<Feature<Geometry> | null>;
2119
}) {
20+
const [coordinates, setCoordinates] = useState<number[] | undefined>(
21+
undefined
22+
);
2223
const [showCoordInputs, setShowCoordInputs] = useState(false);
2324
const formRef = useRef<HTMLFormElement>(null);
2425
const firstInputRef = useRef<HTMLInputElement>(null);
@@ -54,6 +55,14 @@ export function CoordinatesDisplay({
5455
};
5556
}, []);
5657

58+
useEffect(() => {
59+
if (!mapRef.current) return;
60+
const currentMapRef = mapRef.current;
61+
const updateCoords = (e: MapBrowserEvent) => setCoordinates(e.coordinate);
62+
currentMapRef.on('pointermove', updateCoords);
63+
return () => currentMapRef.un('pointermove', updateCoords);
64+
}, [mapRef]);
65+
5766
const onSubmit = useCallback(
5867
(e: FormEvent) => {
5968
e.preventDefault();
@@ -87,6 +96,9 @@ export function CoordinatesDisplay({
8796
[mapRef, externalSearchRef, externalSearchMarkerRef, flipped]
8897
);
8998

99+
// Return early if coordinates aren't defined
100+
if (!coordinates) return;
101+
90102
const transformedCoords = transformGraticuleCoords(coordinates, flipped);
91103
return (
92104
<form

‎src/components/LayerSelector.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -89,7 +89,7 @@ export function LayerSelector({
8989
'keypress',
9090
previousLockMenuHandlerRef.current ?? newHandler
9191
);
92-
}, [setLockMenu, lockMenu, menuRef.current]);
92+
}, [setLockMenu, lockMenu, menuRef]);
9393

9494
const toggleMenu = useCallback(
9595
(e: MouseEvent) => {
@@ -102,7 +102,7 @@ export function LayerSelector({
102102
menuRef.current.classList.add('hide');
103103
}
104104
},
105-
[menuRef.current, lockMenu]
105+
[menuRef, lockMenu]
106106
);
107107

108108
return (

‎src/components/Login.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ export function Login({
1515
const hasRefreshToken = getCookie('valid_refresh_token');
1616

1717
setIsAuthenticated(!!hasAccessToken && !!hasRefreshToken);
18-
}, []);
18+
}, [setIsAuthenticated]);
1919

2020
if (isAuthenticated === null) return null;
2121

‎src/components/OpenLayersMap.tsx‎

Lines changed: 37 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -90,9 +90,6 @@ export function OpenLayersMap({
9090
const previousSearchOverlayHandlerRef =
9191
useRef<(e: MapBrowserEvent<any>) => void | null>(null);
9292
const previousKeyboardHandlerRef = useRef<(e: KeyboardEvent) => void>(null);
93-
const [coordinates, setCoordinates] = useState<number[] | undefined>(
94-
undefined
95-
);
9693
const [isDrawing, setIsDrawing] = useState(false);
9794
const [isNewBoxDrawn, setIsNewBoxDrawn] = useState(false);
9895
const [flipTiles, setFlipTiles] = useState(true);
@@ -104,7 +101,7 @@ export function OpenLayersMap({
104101
{ id: string; flipped: boolean }[]
105102
>([]);
106103

107-
const { activeBaselayer, internalBaselayers } = baselayersState;
104+
const { activeBaselayer } = baselayersState;
108105

109106
/**
110107
* Handler fires when user changes map layers. If the units of the new
@@ -175,13 +172,7 @@ export function OpenLayersMap({
175172
newBaselayer: newActiveBaselayer,
176173
});
177174
},
178-
[
179-
baselayersState.internalBaselayers,
180-
baselayersState.activeBaselayer,
181-
backHistoryStack,
182-
flipTiles,
183-
setFlipTiles,
184-
]
175+
[baselayersState, dispatchBaselayersChange, flipTiles, setFlipTiles]
185176
);
186177

187178
const goBack = useCallback(() => {
@@ -194,30 +185,30 @@ export function OpenLayersMap({
194185
onBaselayerChange(baselayer.id, 'goForward', baselayer.flipped);
195186
}, [onBaselayerChange, forwardHistoryStack]);
196187

197-
const tileLayers = useMemo(() => {
198-
return internalBaselayers?.map(
199-
(layer) =>
200-
new TileLayer({
201-
properties: { id: 'baselayer-' + layer.layer_id },
202-
source: new XYZ({
203-
url: `${SERVICE_URL}/maps/${layer.layer_id}/{z}/{-y}/{x}/tile.png?cmap=${layer.cmap}&vmin=${layer.isLogScale ? Math.pow(10, layer.vmin) : layer.vmin}&vmax=${layer.isLogScale ? Math.pow(10, layer.vmax) : layer.vmax}&flip=${flipTiles}&log_norm=${layer.isLogScale}&abs=${layer.isAbsoluteValue}`,
204-
tileGrid: new TileGrid({
205-
extent: [-180, -90, 180, 90],
206-
origin: [-180, 90],
207-
tileSize: layer.tile_size,
208-
resolutions: getBaselayerResolutions(
209-
180,
210-
layer.tile_size,
211-
layer.number_of_levels - 1
212-
),
213-
}),
214-
interpolate: false,
215-
projection: 'EPSG:4326',
216-
tilePixelRatio: layer.tile_size / 256,
188+
const activeInternalTileLayer = useMemo(() => {
189+
if (assertInternalBaselayer(activeBaselayer)) {
190+
const layer = activeBaselayer;
191+
return new TileLayer({
192+
properties: { id: 'baselayer-' + layer.layer_id },
193+
source: new XYZ({
194+
url: `${SERVICE_URL}/maps/${layer.layer_id}/{z}/{-y}/{x}/tile.png?cmap=${layer.cmap}&vmin=${layer.isLogScale ? Math.pow(10, layer.vmin) : layer.vmin}&vmax=${layer.isLogScale ? Math.pow(10, layer.vmax) : layer.vmax}&flip=${flipTiles}&log_norm=${layer.isLogScale}&abs=${layer.isAbsoluteValue}`,
195+
tileGrid: new TileGrid({
196+
extent: [-180, -90, 180, 90],
197+
origin: [-180, 90],
198+
tileSize: layer.tile_size,
199+
resolutions: getBaselayerResolutions(
200+
180,
201+
layer.tile_size,
202+
layer.number_of_levels - 1
203+
),
217204
}),
218-
})
219-
);
220-
}, [internalBaselayers, flipTiles]);
205+
interpolate: false,
206+
projection: 'EPSG:4326',
207+
tilePixelRatio: layer.tile_size / 256,
208+
}),
209+
});
210+
}
211+
}, [flipTiles, activeBaselayer]);
221212

222213
const externalTileLayers = useMemo(() => {
223214
return EXTERNAL_BASELAYERS.map((b) => {
@@ -254,10 +245,6 @@ export function OpenLayersMap({
254245
view: new View(DEFAULT_INTERNAL_MAP_SETTINGS),
255246
});
256247

257-
mapRef.current.on('pointermove', (e) => {
258-
setCoordinates(e.coordinate);
259-
});
260-
261248
/**
262249
* BEGIN
263250
* Set up overlay, markers, and events for the external searches functionality
@@ -347,7 +334,7 @@ export function OpenLayersMap({
347334
}
348335
}
349336
},
350-
[externalSearchMarkerRef.current, flipTiles]
337+
[externalSearchMarkerRef, flipTiles]
351338
);
352339

353340
useEffect(() => {
@@ -390,7 +377,7 @@ export function OpenLayersMap({
390377
}, [flipTiles]);
391378

392379
/**
393-
* Updates tilelayers when new baselayer is selected and/or color map settings change
380+
* Updates map layer when new baselayer is selected and/or color map settings change
394381
*/
395382
useEffect(() => {
396383
if (mapRef.current && activeBaselayer) {
@@ -401,11 +388,8 @@ export function OpenLayersMap({
401388
mapRef.current?.removeLayer(layer);
402389
}
403390
});
404-
if (assertInternalBaselayer(activeBaselayer)) {
405-
const activeLayer = tileLayers!.find(
406-
(t) => t.get('id') === 'baselayer-' + activeBaselayer!.layer_id
407-
)!;
408-
mapRef.current.addLayer(activeLayer);
391+
if (assertInternalBaselayer(activeBaselayer) && activeInternalTileLayer) {
392+
mapRef.current.addLayer(activeInternalTileLayer);
409393
} else {
410394
const externalBaselayer = EXTERNAL_BASELAYERS.find(
411395
(b) => b.layer_id === activeBaselayer.layer_id
@@ -419,7 +403,7 @@ export function OpenLayersMap({
419403
mapRef.current.addLayer(activeLayer);
420404
}
421405
}
422-
}, [activeBaselayer, tileLayers]);
406+
}, [activeBaselayer, activeInternalTileLayer, externalTileLayers]);
423407

424408
/**
425409
* Add keyboard support for switching baselayers
@@ -474,7 +458,7 @@ export function OpenLayersMap({
474458
view.setCenter(newCenter);
475459
}
476460
setFlipTiles(!flipTiles);
477-
}, [setFlipTiles, flipTiles, mapRef.current]);
461+
}, [setFlipTiles, flipTiles, mapRef]);
478462

479463
return (
480464
<div id="map" style={{ cursor: isDrawing ? 'crosshair' : 'auto' }}>
@@ -548,15 +532,12 @@ export function OpenLayersMap({
548532
goForward={goForward}
549533
/>
550534
<GraticuleLayer mapRef={mapRef} flipped={flipTiles} />
551-
{coordinates && (
552-
<CoordinatesDisplay
553-
coordinates={coordinates}
554-
flipped={flipTiles}
555-
mapRef={mapRef}
556-
externalSearchRef={externalSearchRef}
557-
externalSearchMarkerRef={externalSearchMarkerRef}
558-
/>
559-
)}
535+
<CoordinatesDisplay
536+
flipped={flipTiles}
537+
mapRef={mapRef}
538+
externalSearchRef={externalSearchRef}
539+
externalSearchMarkerRef={externalSearchMarkerRef}
540+
/>
560541
</div>
561542
);
562543
}

‎src/components/layers/AddHighlightBoxLayer.tsx‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -119,7 +119,14 @@ export function AddHighlightBoxLayer({
119119
}
120120
};
121121
}
122-
}, [mapRef.current, isDrawing]);
122+
}, [
123+
mapRef,
124+
isDrawing,
125+
drawBoxRef,
126+
setIsDrawing,
127+
setIsNewBoxDrawn,
128+
showMenuOverlay,
129+
]);
123130

124131
const handleAddBoxCleanup = useCallback(() => {
125132
setNewBoxData(undefined);
@@ -128,7 +135,7 @@ export function AddHighlightBoxLayer({
128135
if (source) {
129136
source.clear();
130137
}
131-
}, [drawBoxRef.current]);
138+
}, [setIsNewBoxDrawn, drawBoxRef]);
132139

133140
return (
134141
<>

‎src/components/layers/GraticuleLayer.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,7 @@ export function GraticuleLayer({
7777
mapRef.current.addLayer(graticule1);
7878
mapRef.current.addLayer(graticule2);
7979
}
80-
}, [mapRef.current, flipped]);
80+
}, [mapRef, flipped, handleLatLabelFormat, handleLonLabelFormat]);
8181

8282
return null;
8383
}

‎src/components/layers/HighlightBoxLayer.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -141,7 +141,7 @@ export function HighlightBoxLayer({
141141
map?.addLayer(layer);
142142
addedLayerIdsRef.current.add(layerId);
143143
});
144-
}, [mapRef.current, highlightBoxes, activeBoxIds, flipped]);
144+
}, [mapRef, highlightBoxes, activeBoxIds, flipped]);
145145

146146
useEffect(() => {
147147
if (!mapRef.current || !boxOverlayRef.current) return;
@@ -152,7 +152,7 @@ export function HighlightBoxLayer({
152152
});
153153
mapRef.current.addOverlay(overlayRef.current);
154154
}
155-
}, [mapRef.current, boxOverlayRef.current]);
155+
}, [mapRef, boxOverlayRef]);
156156

157157
useEffect(() => {
158158
if (mapRef.current) {
@@ -162,7 +162,7 @@ export function HighlightBoxLayer({
162162
handleBoxHoverRef.current = handleBoxHover;
163163
mapRef.current.on('pointermove', handleBoxHover);
164164
}
165-
}, [mapRef.current, handleBoxHover]);
165+
}, [mapRef, handleBoxHover]);
166166

167167
useEffect(() => {
168168
const map = mapRef.current;
@@ -240,7 +240,7 @@ export function HighlightBoxLayer({
240240
}
241241
}
242242
});
243-
}, [flipped, highlightBoxes]);
243+
}, [mapRef, flipped, highlightBoxes]);
244244

245245
return (
246246
<>

‎src/components/layers/SourcesLayer.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -115,7 +115,7 @@ export function SourcesLayer({
115115

116116
sourceGroupRef.current = group;
117117
map.addLayer(group);
118-
}, [sourceGroups, activeSourceGroupIds, flipped]);
118+
}, [mapRef, sourceGroups, activeSourceGroupIds, flipped]);
119119

120120
// Set up interaction and popup
121121
useEffect(() => {
@@ -149,7 +149,7 @@ export function SourcesLayer({
149149
map.removeOverlay(popupOverlay);
150150
map.removeInteraction(select);
151151
};
152-
}, [mapRef.current]);
152+
}, [mapRef]);
153153

154154
useEffect(() => {
155155
if (mapRef.current) {
@@ -162,7 +162,7 @@ export function SourcesLayer({
162162
handleSourceClickRef.current = handleSourceClick;
163163
selectInteractionRef.current?.on('select', handleSourceClick);
164164
}
165-
}, [handleSourceClick, selectInteractionRef.current]);
165+
}, [mapRef, handleSourceClick, selectInteractionRef]);
166166

167167
useEffect(() => {
168168
const map = mapRef.current;
@@ -190,7 +190,7 @@ export function SourcesLayer({
190190
});
191191
}
192192
});
193-
}, [flipped]);
193+
}, [mapRef, flipped, selectedSourceId]);
194194

195195
return null;
196196
}

‎src/hooks/useQuery.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { useState, useEffect } from 'react';
22

33
type UseQueryParams<T> = {
44
queryFn: () => Promise<T>;
5-
queryKey: any[];
5+
queryKey: unknown[];
66
initialData: T;
77
};
88

0 commit comments

Comments
 (0)