Skip to content

Commit 5bc52cd

Browse files
author
sentinel-hub
committed
Update sources to version [v3.16.6]
1 parent 56681f6 commit 5bc52cd

38 files changed

+420
-140
lines changed

‎src/Controls/Timelapse/Timelapse.js

+21-3
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@ import {
3030

3131
import './Timelapse.scss';
3232
import { applyFilterMonthsToDateRange } from '../../junk/EOBCommon/utils/filterDates';
33+
import { getDataSourceHandler } from '../../Tools/SearchPanel/dataSourceHandlers/dataSourceHandlers';
3334

3435
const IMAGE_WIDTH = 512;
3536
const IMAGE_HEIGHT = 512;
@@ -136,11 +137,16 @@ class Timelapse extends Component {
136137
};
137138

138139
getVisualizations = async () => {
139-
const { datasetId, pins, auth } = this.props;
140+
const { datasetId, pins, auth, customSelected } = this.props;
140141

141142
// always include base layer visualization
142143
const visualizations = [
143-
{ layer: this.layer, datasetId: datasetId, effects: constructGetMapParamsEffects(this.props) },
144+
{
145+
layer: this.layer,
146+
datasetId: datasetId,
147+
effects: constructGetMapParamsEffects(this.props),
148+
customSelected: customSelected,
149+
},
144150
];
145151

146152
// add visualizations from pins
@@ -153,6 +159,7 @@ class Timelapse extends Component {
153159
),
154160
datasetId: pin.datasetId,
155161
effects: constructGetMapParamsEffects(pin),
162+
pin: pin,
156163
});
157164
}
158165
return visualizations;
@@ -304,6 +311,8 @@ class Timelapse extends Component {
304311
...image,
305312
layer: flyover.visualization.layer,
306313
datasetId: flyover.visualization.datasetId,
314+
customSelected: flyover.visualization.customSelected,
315+
pin: flyover.visualization.pin,
307316
fromTime: flyover.fromTime,
308317
toTime: flyover.toTime,
309318
isSelected: isSelectAllChecked,
@@ -751,6 +760,7 @@ class Timelapse extends Component {
751760
pinsItems,
752761
fromTime,
753762
toTime,
763+
filterMonths,
754764
selectedPeriod,
755765
maxCCPercentAllowed,
756766
minCoverageAllowed,
@@ -761,6 +771,7 @@ class Timelapse extends Component {
761771
timelapseFPS,
762772
transition,
763773
pins,
774+
customSelected,
764775
} = this.props;
765776

766777
let { minDate, maxDate } = getMinMaxDates(datasetId);
@@ -775,6 +786,11 @@ class Timelapse extends Component {
775786
}
776787
});
777788

789+
const sidebarPins = pinsItems.filter((pin) => {
790+
const dsh = getDataSourceHandler(pin.item.datasetId);
791+
return dsh && dsh.supportsTimelapse();
792+
});
793+
778794
const screenCoverage = timelapseSharePreviewMode ? (isMobile ? 80 : 90) : 100;
779795

780796
return (
@@ -799,6 +815,7 @@ class Timelapse extends Component {
799815
toTime={toTime}
800816
minDate={minDate}
801817
maxDate={maxDate}
818+
filterMonths={filterMonths}
802819
selectedPeriod={selectedPeriod}
803820
supportsOrbitPeriod={supportsOrbitPeriod}
804821
updateDate={this.updateDate}
@@ -807,6 +824,7 @@ class Timelapse extends Component {
807824
setSelectedPeriod={this.setSelectedPeriod}
808825
pins={pins}
809826
layer={this.layer}
827+
customSelected={customSelected}
810828
datasetId={datasetId}
811829
onRemovePin={this.onRemovePin}
812830
onSidebarPopupToggle={this.onSidebarPopupToggle}
@@ -837,7 +855,7 @@ class Timelapse extends Component {
837855
/>
838856
{sidebarPopup === 'pins' ? (
839857
<TimelapseSidebarPins
840-
pins={pinsItems}
858+
pins={sidebarPins}
841859
onAddPin={this.onAddPin}
842860
onSidebarPopupToggle={this.onSidebarPopupToggle}
843861
/>

‎src/Controls/Timelapse/Timelapse.utils.js

+11-4
Original file line numberDiff line numberDiff line change
@@ -382,13 +382,20 @@ export const isImageApplicable = (
382382
minCoverageAllowed,
383383
) => {
384384
return (
385-
image &&
386-
image.isSelected &&
387-
(canWeFilterByClouds ? image.averageCloudCoverPercent <= maxCCPercentAllowed : true) &&
388-
(canWeFilterByCoverage ? image.coveragePercent >= minCoverageAllowed : true)
385+
isImageSelected(image) &&
386+
isImageClearEnough(image, canWeFilterByClouds, maxCCPercentAllowed) &&
387+
isImageCoverageEnough(image, canWeFilterByCoverage, minCoverageAllowed)
389388
);
390389
};
391390

391+
export const isImageSelected = (image) => image && image.isSelected;
392+
393+
export const isImageClearEnough = (image, canWeFilterByClouds, maxCCPercentAllowed) =>
394+
image && (canWeFilterByClouds ? Math.round(image.averageCloudCoverPercent) <= maxCCPercentAllowed : true);
395+
396+
export const isImageCoverageEnough = (image, canWeFilterByCoverage, minCoverageAllowed) =>
397+
image && (canWeFilterByCoverage ? Math.round(image.coveragePercent) >= minCoverageAllowed : true);
398+
392399
export const generateS3PreSignedPost = async (access_token, filename) => {
393400
try {
394401
const url = `${process.env.REACT_APP_EOB_BACKEND}generatepresignedpost`;

‎src/Controls/Timelapse/TimelapseControls.js

+4-2
Original file line numberDiff line numberDiff line change
@@ -26,10 +26,12 @@ export class TimelapseControls extends Component {
2626
maxDate,
2727
loadingLayer,
2828
loadingImages,
29+
filterMonths,
2930
selectedPeriod,
3031
supportsOrbitPeriod,
3132
pins,
3233
layer,
34+
customSelected,
3335
datasetId,
3436
onRemovePin,
3537
onSidebarPopupToggle,
@@ -64,7 +66,7 @@ export class TimelapseControls extends Component {
6466
<div className="timelapse-calendar-holder" ref={this.calendarHolder} />
6567

6668
<div className="filter-months">
67-
<EOBFilterSearchByMonths onChange={this.props.setFilterMonths} />
69+
<EOBFilterSearchByMonths selectedMonths={filterMonths} onChange={this.props.setFilterMonths} />
6870
</div>
6971

7072
<div className="select-period-container">
@@ -89,7 +91,7 @@ export class TimelapseControls extends Component {
8991

9092
<div className="visualisations">
9193
<div className="layer">
92-
{getDatasetLabel(datasetId)}: {layer?.title}
94+
{getDatasetLabel(datasetId)}: {customSelected ? 'Custom' : layer?.title}
9395
</div>
9496

9597
{pins.map((pin, index) => (

‎src/Controls/Timelapse/TimelapseImages.js

+36-13
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,13 @@ import { t } from 'ttag';
33

44
import { EOBCCSlider } from '../../junk/EOBCommon/EOBCCSlider/EOBCCSlider';
55
import { getDatasetLabel } from '../../Tools/SearchPanel/dataSourceHandlers/dataSourceHandlers';
6-
import { dateTimeDisplayFormat } from './Timelapse.utils';
6+
import {
7+
isImageApplicable,
8+
isImageCoverageEnough,
9+
isImageClearEnough,
10+
isImageSelected,
11+
dateTimeDisplayFormat,
12+
} from './Timelapse.utils';
713

814
export class TimelapseImages extends Component {
915
render() {
@@ -87,23 +93,34 @@ export class TimelapseImages extends Component {
8793
<span className="loader" />
8894
) : (
8995
images.map((image, i) => {
90-
const isImageSelected = image.isSelected;
91-
const isImageTooCloudy =
92-
canWeFilterByClouds && Math.round(image.averageCloudCoverPercent) > maxCCPercentAllowed;
93-
const isImageTooSmallCoverage = Math.round(image.coveragePercent) < minCoverageAllowed;
96+
const isApplicable = isImageApplicable(
97+
image,
98+
canWeFilterByClouds,
99+
canWeFilterByCoverage,
100+
maxCCPercentAllowed,
101+
minCoverageAllowed,
102+
);
103+
const isSelected = isImageSelected(image);
104+
const isClearEnough = isImageClearEnough(image, canWeFilterByClouds, maxCCPercentAllowed);
105+
const isCoverageEnough = isImageCoverageEnough(
106+
image,
107+
canWeFilterByCoverage,
108+
minCoverageAllowed,
109+
);
110+
94111
return (
95112
<div className="image-container" key={i}>
96113
<div
97114
className={`image-item ${i === activeImageIndex ? 'active' : ''} ${
98-
isImageTooCloudy || isImageTooSmallCoverage || !isImageSelected ? 'not-selected' : ''
115+
!isApplicable ? 'not-selected' : ''
99116
}`}
100117
>
101-
{isImageTooSmallCoverage ? <i className="fas fa-border-all" /> : null}
102-
{isImageTooCloudy ? <i className="fas fa-cloud-sun" /> : null}
118+
{!isCoverageEnough ? <i className="fas fa-border-all" /> : null}
119+
{!isClearEnough ? <i className="fas fa-cloud-sun" /> : null}
103120

104-
{!isImageTooCloudy && !isImageTooSmallCoverage ? (
121+
{isClearEnough && isCoverageEnough ? (
105122
<span
106-
className={`image-select ${isImageSelected ? 'selected' : ''}`}
123+
className={`image-select ${isSelected ? 'selected' : ''}`}
107124
onClick={() => this.props.toggleImageSelected(i)}
108125
/>
109126
) : null}
@@ -116,10 +133,16 @@ export class TimelapseImages extends Component {
116133
/>
117134
<i className="image-date">{dateTimeDisplayFormat(image.toTime, selectedPeriod)}</i>
118135
</div>
119-
{isImageSelected && !isImageTooCloudy && !isImageTooSmallCoverage ? (
136+
{isApplicable ? (
120137
<div className="dataset-info">
121-
<span>{getDatasetLabel(image.datasetId)}</span>
122-
<span className="break">{image.layer.title}</span>
138+
{image.pin ? (
139+
<span className="break">{image.pin.title}</span>
140+
) : (
141+
<>
142+
<span>{getDatasetLabel(image.datasetId)}</span>
143+
<span className="break">{image.customSelected ? 'Custom' : image.layer.title}</span>
144+
</>
145+
)}
123146
{image.coveragePercent !== undefined ? (
124147
<span>
125148
{t`Coverage`}: {Math.round(image.coveragePercent)}%

‎src/Map/plugins/sentinelhubLeafletLayer.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,7 @@ import {
6969
COPERNICUS_HR_VPP_VPP_S1,
7070
COPERNICUS_HR_VPP_VPP_S2,
7171
COPERNICUS_CLC_ACCOUNTING,
72-
COPERNICUS_WORLD_COVER,
72+
ESA_WORLD_COVER,
7373
AWS_LOTL1,
7474
AWS_LOTL2,
7575
AWS_LTML1,
@@ -560,7 +560,7 @@ class SentinelHubLayer extends L.TileLayer {
560560
case COPERNICUS_HR_VPP_VPP_S1:
561561
case COPERNICUS_HR_VPP_VPP_S2:
562562
case COPERNICUS_CLC_ACCOUNTING:
563-
case COPERNICUS_WORLD_COVER:
563+
case ESA_WORLD_COVER:
564564
const dsh = getDataSourceHandler(datasetId);
565565
return await this.createBYOCLayer(
566566
url,

‎src/Tools/ComparePanel/ComparePanel.scss

+1
Original file line numberDiff line numberDiff line change
@@ -179,6 +179,7 @@
179179
.compare-layer-info {
180180
display: flex;
181181
flex-direction: column;
182+
word-wrap: anywhere;
182183
}
183184

184185
.compare-layer-actions {

‎src/Tools/Pins/Pin.utils.js

+4-2
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ import {
2626
isEffectValueSetAndNotDefault,
2727
isEffectRangeSetAndNotDefault,
2828
} from '../../utils/effectsUtils';
29+
import { getLayerFromParams } from '../../Controls/ImgDownload/ImageDownload.utils';
2930

3031
const PINS_LC_NAME = 'eob-pins';
3132

@@ -685,7 +686,7 @@ export function isPinValid(pin) {
685686
return { isValid: true, error: null };
686687
}
687688

688-
export function constructPinFromProps(props) {
689+
export async function constructPinFromProps(props) {
689690
const {
690691
lat,
691692
lng,
@@ -719,8 +720,9 @@ export function constructPinFromProps(props) {
719720
} = props;
720721
const isGIBS = !fromTime; //GIBS only has toTime
721722
const themeName = getThemeName(themesLists[selectedThemesListId].find((t) => t.id === selectedThemeId));
723+
const layer = await getLayerFromParams(props);
722724
return {
723-
title: `${getDatasetLabel(datasetId)}: ${customSelected ? 'Custom' : layerId} (${themeName})`,
725+
title: `${getDatasetLabel(datasetId)}: ${customSelected ? 'Custom' : layer.title} (${themeName})`,
724726
lat: lat,
725727
lng: lng,
726728
zoom: zoom,

‎src/Tools/Pins/Pins.scss

+3-3
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,6 @@
2929
flex-direction: row;
3030
align-items: center;
3131
justify-content: space-around;
32-
height: 15px;
3332
font-size: 12px;
3433
border-bottom: 1px solid $primaryCol;
3534
padding: 2px 0;
@@ -40,7 +39,7 @@
4039
flex-direction: row;
4140
align-items: center;
4241
justify-content: space-between;
43-
margin: 5px;
42+
margin: 0 3px;
4443
padding-left: 3px;
4544
cursor: pointer;
4645
transition: all ease 0.2s;
@@ -233,6 +232,7 @@
233232

234233
.pin-title-text {
235234
width: 100%;
235+
word-wrap: anywhere;
236236
}
237237

238238
input {
@@ -329,7 +329,7 @@
329329
.pin-info-row {
330330
line-height: 16px;
331331
font-size: 14px;
332-
height: 16px;
332+
height: auto;
333333

334334
label {
335335
height: 16px;

‎src/Tools/SearchPanel/dataSourceHandlers/BYOCDataSourceHandler.js

+4-1
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { t } from 'ttag';
44

55
import DataSourceHandler from './DataSourceHandler';
66
import CopernicusServicesDataSourceHandler from './CopernicusServicesDataSourceHandler';
7+
import OthersDataSourceHandler from './OthersDataSourceHandler';
78
import GenericSearchGroup from './DatasourceRenderingComponents/searchGroups/GenericSearchGroup';
89
import { FetchingFunction } from '../search';
910
import { convertGeoJSONToEPSG4326 } from '../../../utils/coords';
@@ -31,14 +32,16 @@ export default class BYOCDataSourceHandler extends DataSourceHandler {
3132
};
3233

3334
COPERNICUS_SERVICES_KNOWN_COLLECTIONS = new CopernicusServicesDataSourceHandler().getKnownCollectionsList();
35+
OTHER_KNOWN_COLLECTIONS = new OthersDataSourceHandler().getKnownCollectionsList();
3436

3537
willHandle(service, url, name, layers, preselected) {
3638
name = isFunction(name) ? name() : name;
3739
const customLayers = layers.filter(
3840
(l) =>
3941
l instanceof BYOCLayer &&
4042
l.collectionId &&
41-
!this.COPERNICUS_SERVICES_KNOWN_COLLECTIONS.includes(l.collectionId),
43+
!this.COPERNICUS_SERVICES_KNOWN_COLLECTIONS.includes(l.collectionId) &&
44+
!this.OTHER_KNOWN_COLLECTIONS.includes(l.collectionId),
4245
);
4346
if (customLayers.length === 0) {
4447
return false;

0 commit comments

Comments
 (0)