Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add suffix props for RasterTimeseries component #543

Merged
merged 4 commits into from Jun 2, 2023
Merged

Add suffix props for RasterTimeseries component #543

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
cefe58b
Add suffix props for rastertimeseries
hanbyul-here May 25, 2023
8720b85
use Id with suffix for unmounting
hanbyul-here May 31, 2023
94ba895
Add suffix as a dependency
hanbyul-here May 31, 2023
8169d2e
Add idSuffix to vector layer, clean up
hanbyul-here Jun 1, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
56 changes: 10 additions & 46 deletions app/scripts/components/common/blocks/scrollytelling/index.tsx
View file
Open in desktop
Expand Up @@ -179,7 +179,7 @@ function useMapLayersFromChapters(chList: ScrollyChapter[]) {
const resolvedLayers = useMemo(
() =>
asyncLayers.map(({ baseLayer }, index) => {
if (baseLayer?.status !== S_SUCCEEDED || !baseLayer.data) return null;
if (baseLayer.status !== S_SUCCEEDED || !baseLayer.data) return null;

if (resolvedLayersCache.current[index]) {
return resolvedLayersCache.current[index];
Expand Down Expand Up @@ -217,7 +217,7 @@ function useMapLayersFromChapters(chList: ScrollyChapter[]) {
);

const resolvedStatus = useMemo(
() => asyncLayers.map(({ baseLayer }) => baseLayer?.status),
() => asyncLayers.map(({ baseLayer }) => baseLayer.status),
[asyncLayers]
);

Expand Down Expand Up @@ -358,42 +358,6 @@ function Scrollytelling(props) {
return (
<ScrollyMapWrapper>
<TheMap topOffset={topOffset}>
<Styles>
hanbyul-here marked this conversation as resolved.
Show resolved Hide resolved
<Basemap />
{isMapLoaded &&
resolvedLayers.map((resolvedLayer) => {
if (!resolvedLayer) return null;

const { runtimeData, Component: LayerCmp, layer } = resolvedLayer;

if (!LayerCmp) return null;

// Each layer type is added to the map through a component. This
// component has all the logic needed to add/update/remove the
// layer. Which component to use will depend on the characteristics
// of the layer and dataset.
// The function getLayerComponent() should be used to get the
// correct component.
return (
<LayerCmp
key={runtimeData.id}
id={runtimeData.id}
mapInstance={mapRef.current}
stacCol={layer.stacCol}
date={runtimeData.datetime}
sourceParams={layer.sourceParams}
zoomExtent={layer.zoomExtent}
onStatusChange={onLayerLoadSuccess}
isHidden={
!activeChapterLayerId ||
activeChapterLayerId !== runtimeData.id ||
activeChapter.showBaseMap
}
/>
);
})}
</Styles>

{areLayersLoading && <MapLoading />}

{/*
Expand All @@ -419,8 +383,8 @@ function Scrollytelling(props) {
>
{activeChapterLayer?.runtimeData.datetime
? formatSingleDate(
activeChapterLayer?.runtimeData.datetime,
activeChapterLayer?.layer.timeseries.timeDensity
activeChapterLayer.runtimeData.datetime,
activeChapterLayer.layer.timeseries.timeDensity
)
: null}
</MapMessage>
Expand Down Expand Up @@ -451,10 +415,13 @@ function Scrollytelling(props) {
<Styles>
<Basemap />
{isMapLoaded &&
resolvedLayers.map((resolvedLayer) => {
resolvedLayers.map((resolvedLayer, lIdx) => {
if (!resolvedLayer) return null;

const { runtimeData, Component: LayerCmp, layer } = resolvedLayer;
const isHidden = (!activeChapterLayerId ||
activeChapterLayerId !== runtimeData.id ||
activeChapter.showBaseMap);

if (!LayerCmp) return null;

Expand All @@ -474,11 +441,8 @@ function Scrollytelling(props) {
sourceParams={layer.sourceParams}
zoomExtent={layer.zoomExtent}
onStatusChange={onLayerLoadSuccess}
isHidden={
!activeChapterLayerId ||
activeChapterLayerId !== runtimeData.id ||
activeChapter.showBaseMap
}
idSuffix={'scrolly-'+ lIdx}
isHidden={isHidden}
/>
);
})}
Expand Down
14 changes: 9 additions & 5 deletions app/scripts/components/common/mapbox/layers/raster-timeseries.tsx
View file
Open in desktop
Expand Up @@ -45,6 +45,7 @@ interface MapLayerRasterTimeseriesProps {
zoomExtent?: [number, number];
onStatusChange?: (result: { status: ActionStatus; id: string }) => void;
isHidden: boolean;
idSuffix?: string
}

export interface StacFeature {
Expand Down Expand Up @@ -72,13 +73,15 @@ export function MapLayerRasterTimeseries(props: MapLayerRasterTimeseriesProps) {
sourceParams,
zoomExtent,
onStatusChange,
isHidden
isHidden,
idSuffix = ''
} = props;

const theme = useTheme();
const { updateStyle } = useMapStyle();

const minZoom = zoomExtent?.[0] ?? 0;
const generatorId = 'raster-timeseries' + idSuffix;

// Status tracking.
// A raster timeseries layer has a base layer and may have markers.
Expand Down Expand Up @@ -404,7 +407,7 @@ export function MapLayerRasterTimeseries(props: MapLayerRasterTimeseriesProps) {
}

updateStyle({
generatorId: 'raster-timeseries',
generatorId,
sources,
layers
});
Expand All @@ -417,7 +420,8 @@ export function MapLayerRasterTimeseries(props: MapLayerRasterTimeseriesProps) {
minZoom,
points,
haveSourceParamsChanged,
isHidden
isHidden,
generatorId
]
);

Expand All @@ -427,12 +431,12 @@ export function MapLayerRasterTimeseries(props: MapLayerRasterTimeseriesProps) {
useEffect(() => {
return () => {
updateStyle({
generatorId: 'raster-timeseries',
generatorId,
sources: {},
layers: []
});
};
}, [updateStyle]);
}, [updateStyle, generatorId]);

//
// Listen to mouse events on the markers layer
Expand Down
15 changes: 10 additions & 5 deletions app/scripts/components/common/mapbox/layers/vector-timeseries.tsx
View file
Open in desktop
Expand Up @@ -28,6 +28,7 @@ interface MapLayerVectorTimeseriesProps {
zoomExtent?: [number, number];
onStatusChange?: (result: { status: ActionStatus; id: string }) => void;
isHidden: boolean;
idSuffix?: string;
}

export function MapLayerVectorTimeseries(props: MapLayerVectorTimeseriesProps) {
Expand All @@ -39,7 +40,8 @@ export function MapLayerVectorTimeseries(props: MapLayerVectorTimeseriesProps) {
sourceParams,
zoomExtent,
onStatusChange,
isHidden
isHidden,
idSuffix = ''
} = props;

const theme = useTheme();
Expand All @@ -48,6 +50,8 @@ export function MapLayerVectorTimeseries(props: MapLayerVectorTimeseriesProps) {

const [minZoom, maxZoom] = zoomExtent ?? [0, 20];

const generatorId = 'vector-timeseries' + idSuffix;

//
// Get the tiles url
//
Expand Down Expand Up @@ -204,7 +208,7 @@ export function MapLayerVectorTimeseries(props: MapLayerVectorTimeseriesProps) {
].filter(Boolean) as AnyLayer[];

updateStyle({
generatorId: 'vector-timeseries',
generatorId,
sources,
layers
});
Expand All @@ -219,7 +223,8 @@ export function MapLayerVectorTimeseries(props: MapLayerVectorTimeseriesProps) {
minZoom,
maxZoom,
isHidden,
haveSourceParamsChanged
haveSourceParamsChanged,
generatorId
]);

//
Expand All @@ -228,12 +233,12 @@ export function MapLayerVectorTimeseries(props: MapLayerVectorTimeseriesProps) {
useEffect(() => {
return () => {
updateStyle({
generatorId: 'vector-timeseries',
generatorId,
sources: {},
layers: []
});
};
}, [updateStyle]);
}, [updateStyle, generatorId]);

//
// Listen to mouse events on the markers layer
Expand Down