diff --git a/app/scripts/components/analysis/define/aoi-selector.tsx b/app/scripts/components/analysis/define/aoi-selector.tsx index fca6fa35d..a130f22ab 100644 --- a/app/scripts/components/analysis/define/aoi-selector.tsx +++ b/app/scripts/components/analysis/define/aoi-selector.tsx @@ -27,6 +27,7 @@ import { } from '@devseed-ui/collecticons'; import { FeatureByRegionPreset, RegionPreset } from '../constants'; import AoIUploadModal from './aoi-upload-modal'; +import {FoldWOBottomPadding, FoldTitleWOAccent} from '.'; import { Fold, FoldHeader, @@ -120,7 +121,7 @@ export default function AoiSelector({ const [aoiModalRevealed, setAoIModalRevealed] = useState(false); return ( - + - Select area of interest + Select area of interest

Use the pencil tool to draw a shape on the map or upload your own shapefile. @@ -205,6 +206,6 @@ export default function AoiSelector({ /> - + ); } diff --git a/app/scripts/components/analysis/define/index.tsx b/app/scripts/components/analysis/define/index.tsx index 0b5a7c4a4..3dd3bb8d7 100644 --- a/app/scripts/components/analysis/define/index.tsx +++ b/app/scripts/components/analysis/define/index.tsx @@ -21,9 +21,12 @@ import { import { Overline } from '@devseed-ui/typography'; import { datasets, DatasetLayer, VedaDatum, DatasetData } from 'veda'; +import { Button, ButtonGroup } from '@devseed-ui/button'; import { useAnalysisParams } from '../results/use-analysis-params'; +import SavedAnalysisControl from '../saved-analysis-control'; import AoiSelector from './aoi-selector'; import { useStacCollectionSearch } from './use-stac-collection-search'; +import PageFooterActions from './page-footer.actions'; import { variableGlsp } from '$styles/variable-utils'; import { PageMainContent } from '$styles/page'; @@ -45,12 +48,9 @@ import { getRangeFromPreset, inputFormatToDate } from '$utils/date'; -import DropMenuItemButton from '$styles/drop-menu-item-button'; + import { MapboxMapRef } from '$components/common/mapbox'; -import PageFooterActions from './page-footer.actions'; -import SavedAnalysisControl from '../saved-analysis-control'; import { ANALYSIS_PATH } from '$utils/routes'; -import { Button, ButtonGroup } from '@devseed-ui/button'; const FormBlock = styled.div` display: flex; @@ -151,9 +151,54 @@ const FloatingFooter = styled.div<{ isSticky: boolean }>` `} `; +const FoldWithBullet = styled(Fold)<{number: string}>` + ${media.largeUp` + padding-left: ${variableGlsp(1)}; + > div { + padding-left: ${variableGlsp(2)}; + position: relative; + // bullet + &::after { + position: absolute; + top: 0; + left: -20px; + width: 40px; + height: 40px; + background-color: #1565EF; + color: ${themeVal('color.surface')}; + border-radius: ${themeVal('shape.ellipsoid')}; + font-size: 1.75rem; + display: flex; + justify-content: center; + align-items: center; + font-weight: 600; + ${(props) => `content: "${props.number}";`} + } + } +`} +`; +export const FoldWOBottomPadding = styled(FoldWithBullet)` + ${media.largeUp` + padding-bottom: 0; + > div { + border-left : 3px solid ${themeVal('color.base-200a')}; + padding-bottom: ${variableGlsp(2)}; + } + `} +`; + +export const FoldTitleWOAccent = styled(FoldTitle)` + ${media.largeUp` + &::before { + content: none; + } + `} +`; + + const findParentDataset = (layerId: string) => { const parentDataset = Object.values(datasets).find((dataset) => - (dataset as VedaDatum).data.layers.find( + (dataset!).data.layers.find( (l) => l.id === layerId ) ); @@ -163,7 +208,7 @@ const findParentDataset = (layerId: string) => { export const allAvailableDatasetsLayers: DatasetLayer[] = Object.values( datasets ) - .map((dataset) => (dataset as VedaDatum).data.layers) + .map((dataset) => (dataset!).data.layers) .flat() .filter((d) => d.type !== 'vector' && !d.analysis?.exclude); @@ -252,7 +297,7 @@ export default function Analysis() { const selectableDatasetLayersIds = selectableDatasetLayers.map( (layer) => layer.id ); - const cleanedDatasetsLayers = datasetsLayers?.filter((l) => + const cleanedDatasetsLayers = datasetsLayers.filter((l) => selectableDatasetLayersIds.includes(l.id) ); @@ -307,13 +352,12 @@ export default function Analysis() { description='Generate timeseries data for your area of interest.' /> ( )} /> - - + - Pick a date period + Pick a date period

Select start and end date of time series, or choose a pre-set date range. @@ -338,7 +382,7 @@ export default function Analysis() { variation='base-outline' radius='square' > -