Skip to content

Commit 260a506

Browse files
sandrahoang686sandrahoang686
committed
Cleaning
1 parent 25ce06d commit 260a506

File tree

10 files changed

+57
-78
lines changed

10 files changed

+57
-78
lines changed

‎app/scripts/components/common/blocks/block-map.tsx

+17-37
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,5 @@
11
import React, { useMemo, useState, useEffect } from 'react';
22
import styled from 'styled-components';
3-
// @NOTE: This should be replaced by types/veda once the changes are consolidated
4-
// import { ProjectionOptions } from 'veda';
5-
import { ProjectionOptions } from '$types/veda';
63
import { MapboxOptions } from 'mapbox-gl';
74
import {
85
convertProjectionToMapbox,
@@ -36,13 +33,9 @@ import {
3633
DatasetStatus
3734
} from '$components/exploration/types.d.ts';
3835

39-
// import { reconcileDatasets } from '$components/exploration/data-utils';
40-
// import { datasetLayers } from '$components/exploration/data-utils';
4136
import { reconcileDatasets, getDatasetLayers } from '$components/exploration/data-utils-no-faux-module';
4237
import { useReconcileWithStacMetadata } from '$components/exploration/hooks/use-stac-metadata-datasets';
43-
44-
import { ReactQueryProvider } from '$context/react-query';
45-
import { VedaDatum, DatasetData } from '$types/veda';
38+
import { ProjectionOptions, VedaDatum, DatasetData } from '$types/veda';
4639

4740
export const mapHeight = '32rem';
4841
const Carto = styled.div`
@@ -132,10 +125,8 @@ interface MapBlockProps {
132125
}
133126

134127
const getDataLayer = (layerIndex: number, layers: VizDataset[] | undefined): (VizDatasetSuccess | null) => {
135-
console.log(`getDataLayer_layers: `, layers)
136128
if (!layers || layers.length <= layerIndex) return null;
137129
const layer = layers[layerIndex];
138-
console.log(`getDataLayer_layer: `, layer)
139130
// @NOTE: What to do when data returns ERROR
140131
if (layer.status !== DatasetStatus.SUCCESS) return null;
141132
return {
@@ -169,9 +160,9 @@ function MapBlock(props: MapBlockProps) {
169160
if (errors.length) {
170161
throw new HintedError('Malformed Map Block', errors);
171162
}
172-
// console.log(`datasets_in_blockmap: `, datasets)
163+
173164
const datasetLayers = getDatasetLayers(datasets);
174-
console.log(`datasetLayers: `, datasetLayers)
165+
175166
const layersToFetch = useMemo(() => {
176167
const [baseMapStaticData] = reconcileDatasets([layerId], datasetLayers, []);
177168
let totalLayers = [baseMapStaticData];
@@ -187,7 +178,7 @@ function MapBlock(props: MapBlockProps) {
187178
}
188179
return totalLayers;
189180
},[layerId]);
190-
console.log(`layersToFetch: `, layersToFetch)
181+
191182
const [layers, setLayers] = useState<VizDataset[]>(layersToFetch);
192183

193184
useReconcileWithStacMetadata(layers, setLayers);
@@ -218,7 +209,7 @@ function MapBlock(props: MapBlockProps) {
218209
}, [projectionId, projectionCenter, projectionParallels]);
219210

220211
const [, setProjection] = useState(projectionStart);
221-
console.log(`layers_before_getDataLayer: `, layers)
212+
222213
const baseDataLayer: (VizDatasetSuccess | null) = useMemo(() => getDataLayer(0, layers), [layers]);
223214
const compareDataLayer: (VizDatasetSuccess | null) = useMemo(() => getDataLayer(1, layers), [layers]);
224215

@@ -272,18 +263,16 @@ function MapBlock(props: MapBlockProps) {
272263
const providedLabel = compareDataLayer.data.mapLabel as string;
273264
return providedLabel;
274265
}
275-
// console.log(`selectedDatetime; `, selectedDatetime, `compareToDate: `, compareToDate, `baseTimeDensity: `, baseTimeDensity, 'compareTimeDensity: ', compareTimeDensity)
276-
// // Default to date comparison.
277-
// return selectedDatetime && compareToDate
278-
// ? formatCompareDate(
279-
// selectedDatetime,
280-
// compareToDate,
281-
// baseTimeDensity,
282-
// compareTimeDensity
283-
// )
284-
// : null;
285-
return null; // @NOTE-SANDRA: failing with $3Zh6r$format is not defined
286-
// selectedDatetime; Thu Mar 01 2018 00:00:00 GMT-0500 (Eastern Standard Time) compareToDate: Wed Mar 01 2017 00:00:00 GMT-0500 (Eastern Standard Time) baseTimeDensity: undefined compareTimeDensity: undefined
266+
267+
// Default to date comparison.
268+
return selectedDatetime && compareToDate
269+
? formatCompareDate(
270+
selectedDatetime,
271+
compareToDate,
272+
baseTimeDensity,
273+
compareTimeDensity
274+
)
275+
: null;
287276
}, [
288277
compareLabel,
289278
compareDataLayer,
@@ -292,7 +281,6 @@ function MapBlock(props: MapBlockProps) {
292281
baseTimeDensity,
293282
compareTimeDensity
294283
]);
295-
console.log(`baseDataLayer: `, baseDataLayer)
296284
const initialPosition = useMemo(
297285
() => (center ? { lng: center[0], lat: center[1], zoom } : undefined),
298286
[center, zoom]
@@ -337,7 +325,7 @@ function MapBlock(props: MapBlockProps) {
337325
)}
338326
</LayerLegendContainer>
339327
)}
340-
{/* <MapControls>
328+
<MapControls>
341329
{selectedDatetime && selectedCompareDatetime ? (
342330
<MapMessage
343331
id='compare-message'
@@ -373,18 +361,10 @@ function MapBlock(props: MapBlockProps) {
373361
/>
374362
)}
375363
</Compare>
376-
)} */}
364+
)}
377365
</Map>
378366
</Carto>
379367
);
380368
}
381369

382-
export function MapBlockWithProvider(props: MapBlockProps) {
383-
return (
384-
<ReactQueryProvider>
385-
<MapBlock {...props}/>
386-
</ReactQueryProvider>
387-
);
388-
};
389-
390370
export default MapBlock;

‎app/scripts/components/common/map/maps.tsx

+2-3
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,6 @@ import {
1515
iconDataURI
1616
} from '@devseed-ui/collecticons';
1717
import { themeVal } from '@devseed-ui/theme-provider';
18-
import { ProjectionOptions } from '$types/veda';
1918
import useDimensions from 'react-cool-dimensions';
2019
import 'mapbox-gl/dist/mapbox-gl.css';
2120
import 'mapbox-gl-compare/dist/mapbox-gl-compare.css';
@@ -27,6 +26,7 @@ import MapComponent from './map-component';
2726
import useMaps, { useMapsContext } from './hooks/use-maps';
2827
import { aoiCustomCursorStyle } from './controls/aoi/custom-aoi-control';
2928
import { COMPARE_CONTAINER_NAME, CONTROLS_CONTAINER_NAME } from '.';
29+
import { ProjectionOptions } from '$types/veda';
3030

3131
const chevronRightURI = () =>
3232
iconDataURI(CollecticonChevronRightSmall, {
@@ -210,8 +210,7 @@ interface MapsContextType {
210210
containerId: string;
211211
}
212212

213-
// export const MapsContext = createContext<MapsContextType>({
214-
export const MapsContext = createContext({
213+
export const MapsContext = createContext<MapsContextType>({
215214
initialViewState: {},
216215
setInitialViewState: () => undefined,
217216
mainId: '',

‎app/scripts/components/common/map/style-generators/raster-timeseries.tsx

+1-2
Original file line numberDiff line numberDiff line change
@@ -358,15 +358,13 @@ export function RasterTimeseries(props: RasterTimeseriesProps) {
358358
);
359359

360360
const tilejsonUrl = `${mosaicUrl}?${tileParams}`;
361-
362361
try {
363362
const tilejsonData = await requestQuickCache<any>({
364363
url: tilejsonUrl,
365364
method: 'GET',
366365
payload: null,
367366
controller
368367
});
369-
370368
const tileServerUrl = tilejsonData.tiles[0];
371369

372370
const wmtsBaseUrl = mosaicUrl.replace(
@@ -417,6 +415,7 @@ export function RasterTimeseries(props: RasterTimeseriesProps) {
417415
context: STATUS_KEY.StacSearch
418416
});
419417
}
418+
420419
LOG &&
421420
/* eslint-disable-next-line no-console */
422421
console.log(

‎app/scripts/components/common/map/styles.tsx

+8-9
Original file line numberDiff line numberDiff line change
@@ -14,13 +14,13 @@ import {
1414
LayerOrderPosition
1515
} from './types';
1616

17-
// interface StylesContextType {
18-
// updateStyle: (params: GeneratorStyleParams) => void;
19-
// style?: Style;
20-
// updateMetaData?: (params: unknown) => void;
21-
// metaData?: unknown;
22-
// isCompared?: boolean;
23-
// }
17+
interface StylesContextType {
18+
updateStyle: (params: GeneratorStyleParams) => void;
19+
style?: Style;
20+
updateMetaData?: (params: unknown) => void;
21+
metaData?: unknown;
22+
isCompared?: boolean;
23+
}
2424

2525
// This is the glyphs source used in the default satellite basemap (mapbox://fonts/mapbox/{fontstack}/{range}.pbf)
2626
const DEFAULT_GLYPHS_SOURCE = 'mapbox://fonts/mapbox/{fontstack}/{range}.pbf';
@@ -29,8 +29,7 @@ const DEFAULT_SPRITE_SOURCE =
2929
'mapbox://sprites/covid-nasa/cldu1cb8f00ds01p6gi583w1m/e3w0e56evrnnyy9tj4v36mbo4';
3030
const DEFAULT_MAPBOX_STYLE_VERSION = 8;
3131

32-
// export const StylesContext = createContext<StylesContextType>({ // @NOTE: Breaks with "@parcel/transformer-typescript-types: Got unexpected undefined"
33-
export const StylesContext = createContext({
32+
export const StylesContext = createContext<StylesContextType>({
3433
updateStyle: (params: GeneratorStyleParams) => {
3534
return params;
3635
},

‎app/scripts/components/common/map/utils.ts

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,17 @@
11
import axios, { Method } from 'axios';
2-
import { format } from 'date-fns';
2+
import format from 'date-fns/format';
33
import { Map as MapboxMap } from 'mapbox-gl';
44
import { MapRef } from 'react-map-gl';
5-
import { endOfDay, startOfDay } from 'date-fns';
5+
import startOfDay from 'date-fns/startOfDay';
6+
import endOfDay from 'date-fns/endOfDay';
67
import { Feature, MultiPolygon, Polygon } from 'geojson';
78
import { BBox } from '@turf/helpers';
9+
import { StacFeature } from './types';
810
import {
911
DatasetDatumFn,
1012
DatasetDatumFnResolverBag,
1113
DatasetDatumReturnType
1214
} from '$types/veda';
13-
14-
import { StacFeature } from './types';
1515
import { TimeDensity } from '$context/layer-data';
1616
import { userTzDate2utcString } from '$utils/date';
1717
import { validateRangeNum } from '$utils/utils';

‎app/scripts/components/exploration/data-utils.ts

+2-3
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,9 @@ import {
33
eachMonthOfInterval,
44
eachYearOfInterval,
55
startOfDay,
6-
startOfMonth,
76
startOfYear
87
} from 'date-fns';
9-
import { DatasetLayer, DatasetData, VedaDatum } from '$types/veda';
8+
import startOfMonth from 'date-fns/startOfMonth';
109
import {
1110
EnhancedDatasetLayer,
1211
StacDatasetData,
@@ -20,7 +19,7 @@ import {
2019
DEFAULT_DATA_METRICS
2120
} from './components/datasets/analysis-metrics';
2221
import { veda_datasets } from '$data-layer/datasets';
23-
22+
import { DatasetLayer, DatasetData, VedaDatum } from '$types/veda';
2423
import { utcString2userTzDate } from '$utils/date';
2524

2625
// @TODO: These should be updated to take in datasets as a param instead of using veda_datasets directly

‎app/scripts/components/exploration/hooks/use-stac-metadata-datasets.ts

+7-9
Original file line numberDiff line numberDiff line change
@@ -4,25 +4,23 @@ import {
44
UseQueryResult
55
} from '@tanstack/react-query';
66
import axios from 'axios';
7+
import {
8+
eachDayOfInterval,
9+
eachYearOfInterval,
10+
} from 'date-fns';
11+
import eachMonthOfInterval from 'date-fns/eachMonthOfInterval';
712
import {
813
StacDatasetData,
914
TimeDensity,
1015
TimelineDataset,
1116
DatasetStatus,
1217
VizDataset
1318
} from '../types.d.ts';
14-
// import { resolveLayerTemporalExtent } from '../data-utils';
15-
1619
import { useEffectPrevious } from '$utils/use-effect-previous';
1720
import { SetState } from '$types/aliases';
18-
19-
import {
20-
eachDayOfInterval,
21-
eachMonthOfInterval,
22-
eachYearOfInterval,
23-
} from 'date-fns';
2421
import { utcString2userTzDate } from '$utils/date';
2522

23+
2624
export function resolveLayerTemporalExtent(
2725
datasetId: string,
2826
datasetData: StacDatasetData
@@ -44,7 +42,7 @@ export function resolveLayerTemporalExtent(
4442
case TimeDensity.MONTH:
4543
return eachMonthOfInterval({
4644
start: utcString2userTzDate(domain[0]),
47-
end: utcString2userTzDate(domain.last)
45+
end: utcString2userTzDate(domain[domain.length - 1])
4846
});
4947
case TimeDensity.DAY:
5048
return eachDayOfInterval({

‎app/scripts/context/react-query.tsx

+4-1
Original file line numberDiff line numberDiff line change
@@ -5,15 +5,18 @@ import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
55
// Create a client
66
const queryClient = new QueryClient();
77

8-
export function ReactQueryProvider({
8+
function ReactQueryProvider({
99
children
1010
}: {
1111
children: ReactNode;
1212
}) {
13+
1314
return (
1415
<QueryClientProvider client={queryClient}>
1516
{children}
1617
<ReactQueryDevtools initialIsOpen={false} />
1718
</QueryClientProvider>
1819
);
1920
}
21+
22+
export default ReactQueryProvider;

‎app/scripts/index.ts

+11-9
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,20 @@
11
import DataCatalog from './components/common/catalog';
22

33
import Block from './components/common/blocks';
4-
import Image from './components/common/blocks/images'
5-
import { MapBlockWithProvider } from './components/common/blocks/block-map';
4+
import Image from './components/common/blocks/images';
5+
import MapBlock from './components/common/blocks/block-map';
66
import Figure from './components/common/blocks/figure';
77
import { ContentBlockProse as Prose } from './styles/content-block';
88
import MDXImage, { Caption } from './components/common/blocks/images';
99
import { Chapter } from './components/common/blocks/scrollytelling/chapter';
10-
1110
import Chart from './components/common/chart/block';
12-
1311
import Table from './components/common/table';
1412
import CompareImage from './components/common/blocks/images/compare';
15-
16-
13+
import ReactQueryProvider from './context/react-query';
1714
import Embed from './components/common/blocks/embed';
18-
import TProvider from './theme-provider';
15+
import DevseedUiThemeProvider from './theme-provider';
16+
import { PageMainContent } from '$styles/page';
17+
import PageHero from '$components/common/page-hero';
1918

2019
export {
2120
DataCatalog,
@@ -29,7 +28,10 @@ export {
2928
Chart,
3029
Table,
3130
Embed,
32-
TProvider,
33-
MapBlockWithProvider,
31+
MapBlock,
3432
Image,
33+
DevseedUiThemeProvider,
34+
PageMainContent,
35+
PageHero,
36+
ReactQueryProvider,
3537
};

‎app/scripts/main.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ const UserPagesComponent = lazy(() => import('$components/user-pages'));
4343

4444

4545
// Contexts
46-
import { ReactQueryProvider } from '$context/react-query';
46+
import ReactQueryProvider from '$context/react-query';
4747
import {
4848
ABOUT_PATH,
4949
ANALYSIS_PATH,

0 commit comments

Comments
 (0)