From d27f63475e34c4287dc23cc8094774e545eee936 Mon Sep 17 00:00:00 2001 From: Hanbyul Jo Date: Tue, 26 Sep 2023 21:08:42 -0400 Subject: [PATCH] Align date selection tools, lint --- .../analysis/define/aoi-selector.tsx | 8 +-- .../components/analysis/define/index.tsx | 71 ++++++++++--------- .../analysis/define/page-footer.actions.tsx | 18 +++-- package.json | 2 +- 4 files changed, 54 insertions(+), 45 deletions(-) diff --git a/app/scripts/components/analysis/define/aoi-selector.tsx b/app/scripts/components/analysis/define/aoi-selector.tsx index a130f22ab..4ba1a3d87 100644 --- a/app/scripts/components/analysis/define/aoi-selector.tsx +++ b/app/scripts/components/analysis/define/aoi-selector.tsx @@ -27,13 +27,11 @@ import { } from '@devseed-ui/collecticons'; import { FeatureByRegionPreset, RegionPreset } from '../constants'; import AoIUploadModal from './aoi-upload-modal'; -import {FoldWOBottomPadding, FoldTitleWOAccent} from '.'; +import { FoldWGuideLine, FoldTitleWOAccent } from '.'; import { - Fold, FoldHeader, FoldHeadline, FoldHeadActions, - FoldTitle, FoldBody } from '$components/common/fold'; import MapboxMap, { MapboxMapRef } from '$components/common/mapbox'; @@ -121,7 +119,7 @@ export default function AoiSelector({ const [aoiModalRevealed, setAoIModalRevealed] = useState(false); return ( - + - + ); } diff --git a/app/scripts/components/analysis/define/index.tsx b/app/scripts/components/analysis/define/index.tsx index 3e1e57fb9..65248ed7d 100644 --- a/app/scripts/components/analysis/define/index.tsx +++ b/app/scripts/components/analysis/define/index.tsx @@ -20,7 +20,7 @@ import { } from '@devseed-ui/collecticons'; import { Overline } from '@devseed-ui/typography'; -import { datasets, DatasetLayer, VedaDatum, DatasetData } from 'veda'; +import { datasets, DatasetLayer } from 'veda'; import { Button, ButtonGroup } from '@devseed-ui/button'; import { useAnalysisParams } from '../results/use-analysis-params'; import SavedAnalysisControl from '../saved-analysis-control'; @@ -56,7 +56,6 @@ const FormBlock = styled.div` display: flex; flex-flow: row nowrap; gap: ${variableGlsp(0.5)}; - > * { width: 50%; } @@ -151,7 +150,7 @@ const FloatingFooter = styled.div<{ isSticky: boolean }>` `} `; -const FoldWithBullet = styled(Fold)<{number: string}>` +const FoldWithBullet = styled(Fold)<{ number: string }>` ${media.largeUp` padding-left: ${variableGlsp(1)}; > div { @@ -178,7 +177,7 @@ const FoldWithBullet = styled(Fold)<{number: string}>` `} `; -export const FoldWOBottomPadding = styled(FoldWithBullet)` +export const FoldWGuideLine = styled(FoldWithBullet)` ${media.largeUp` padding-bottom: 0; > div { @@ -200,12 +199,24 @@ export const FoldTitleWOAccent = styled(FoldTitle)` `} `; +const FormGroupStructureCustom = styled(FormGroupStructure)` + ${media.largeUp` + display: inline-flex; + align-items: center; + `} +`; + +const FoldBodyCustom = styled(FoldBody)` + ${media.largeUp` + flex-flow: row; + flex-grow: 3; + justify-content: space-between; + `} +`; const findParentDataset = (layerId: string) => { const parentDataset = Object.values(datasets).find((dataset) => - (dataset!).data.layers.find( - (l) => l.id === layerId - ) + dataset!.data.layers.find((l) => l.id === layerId) ); return parentDataset?.data; }; @@ -213,7 +224,7 @@ const findParentDataset = (layerId: string) => { export const allAvailableDatasetsLayers: DatasetLayer[] = Object.values( datasets ) - .map((dataset) => (dataset!).data.layers) + .map((dataset) => dataset!.data.layers) .flat() .filter((d) => d.type !== 'vector' && !d.analysis?.exclude); @@ -371,7 +382,7 @@ export default function Analysis() { onAoiEvent={onAoiEvent} /> - + Pick a date period @@ -380,27 +391,12 @@ export default function Analysis() { date range.

- - - Presets - - - - - - + - +
- + - + - + - +
- - + + Presets + + + + + + + diff --git a/app/scripts/components/analysis/define/page-footer.actions.tsx b/app/scripts/components/analysis/define/page-footer.actions.tsx index cb3f73ecc..fdaa862ad 100644 --- a/app/scripts/components/analysis/define/page-footer.actions.tsx +++ b/app/scripts/components/analysis/define/page-footer.actions.tsx @@ -4,14 +4,14 @@ import { format } from 'date-fns'; import { Button, ButtonProps } from '@devseed-ui/button'; import { CollecticonTickSmall } from '@devseed-ui/collecticons'; +import { DatasetLayer } from 'veda'; +import { FeatureCollection, Polygon } from 'geojson'; +import styled from 'styled-components'; import { analysisParams2QueryString } from '../results/use-analysis-params'; import useSavedSettings from '../use-saved-settings'; import { composeVisuallyDisabled } from '$utils/utils'; import { ANALYSIS_RESULTS_PATH } from '$utils/routes'; -import { DatasetLayer } from 'veda'; -import { FeatureCollection, Polygon } from 'geojson'; -import styled from 'styled-components'; import { calcFeatCollArea } from '$components/common/aoi/utils'; const SaveButton = composeVisuallyDisabled(Button); @@ -43,7 +43,7 @@ const FooterRight = styled.div` const AnalysisDescription = styled.div` font-size: 0.875rem; opacity: 0.5; -` +`; export default function PageFooterActions({ // size, @@ -75,13 +75,17 @@ export default function PageFooterActions({ }); const analysisDescription = useMemo(() => { - if (!start || !end || !datasetsLayers || !aoi || !datasetsLayers.length) return ''; + if (!start || !end || !datasetsLayers || !aoi || !datasetsLayers.length) + return ''; const dataset = datasetsLayers.length === 1 ? datasetsLayers[0].name : `${datasetsLayers.length} datasets`; - const area = `over a ${calcFeatCollArea(aoi)} km² area` - const dates = `from ${format(start, 'MMM d, yyyy')} to ${format(end, 'MMM d, yyyy')}` + const area = `over a ${calcFeatCollArea(aoi)} km² area`; + const dates = `from ${format(start, 'MMM d, yyyy')} to ${format( + end, + 'MMM d, yyyy' + )}`; return [dataset, area, dates].join(' '); }, [start, end, datasetsLayers, aoi]); diff --git a/package.json b/package.json index 3006101ee..83f483556 100644 --- a/package.json +++ b/package.json @@ -121,9 +121,9 @@ "@turf/bbox-polygon": "^6.5.0", "@turf/boolean-intersects": "^6.5.0", "@turf/centroid": "^6.5.0", + "@turf/helpers": "^6.5.0", "@turf/simplify": "^6.5.0", "@turf/union": "^6.5.0", - "@turf/helpers": "^6.5.0", "@types/geojson": "^7946.0.10", "@types/mdx": "^2.0.1", "@types/react": "^18.2.12",