Skip to content

Commit

Permalink
Align date selection tools, lint
Browse files Browse the repository at this point in the history
  • Loading branch information
@hanbyul-here
hanbyul-here committed Sep 27, 2023
1 parent 180447b commit d27f634
Show file tree
Hide file tree
Showing 4 changed files with 54 additions and 45 deletions.
8 changes: 3 additions & 5 deletions app/scripts/components/analysis/define/aoi-selector.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -121,7 +119,7 @@ export default function AoiSelector({
const [aoiModalRevealed, setAoIModalRevealed] = useState(false);

return (
<FoldWOBottomPadding number={1}>
<FoldWGuideLine number={1}>
<AoIUploadModal
setFeatureCollection={setFeatureCollection}
revealed={aoiModalRevealed}
Expand Down Expand Up @@ -206,6 +204,6 @@ export default function AoiSelector({
/>
</MapContainer>
</FoldBody>
</FoldWOBottomPadding>
</FoldWGuideLine>
);
}
71 changes: 39 additions & 32 deletions app/scripts/components/analysis/define/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -56,7 +56,6 @@ const FormBlock = styled.div`
display: flex;
flex-flow: row nowrap;
gap: ${variableGlsp(0.5)};
> * {
width: 50%;
}
Expand Down Expand Up @@ -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 {
Expand All @@ -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 {
Expand All @@ -200,20 +199,32 @@ 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;
};

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);

Expand Down Expand Up @@ -371,7 +382,7 @@ export default function Analysis() {
onAoiEvent={onAoiEvent}
/>

<FoldWOBottomPadding number='2'>
<FoldWGuideLine number='2'>
<FoldHeader>
<FoldHeadline>
<FoldTitleWOAccent>Pick a date period</FoldTitleWOAccent>
Expand All @@ -380,27 +391,12 @@ export default function Analysis() {
date range.
</p>
</FoldHeadline>
<FoldHeadActions>
<Toolbar size='small'>
<ToolbarLabel>Presets</ToolbarLabel>
<ButtonGroup
variation='base-outline'
radius='square'
>
<Button onClick={(e) => onDatePresetClick(e, 'last10Years')}>
Last 10 years
</Button>
<Button onClick={(e) => onDatePresetClick(e, '2018-2022')}>
2018 - 2022
</Button>
</ButtonGroup>
</Toolbar>
</FoldHeadActions>
<FoldHeadActions></FoldHeadActions>
</FoldHeader>
<FoldBody>
<FoldBodyCustom>
<Form>
<FormBlock>
<FormGroupStructure label='From' id='start-date' required>
<FormGroupStructureCustom label='From' id='start-date' required>
<FormInput
type='date'
size='large'
Expand All @@ -411,9 +407,9 @@ export default function Analysis() {
min='1900-01-01'
max={dateToInputFormat(end)}
/>
</FormGroupStructure>
</FormGroupStructureCustom>

<FormGroupStructure label='To' id='end-date' required>
<FormGroupStructureCustom label='To' id='end-date' required>
<FormInput
type='date'
size='large'
Expand All @@ -424,11 +420,22 @@ export default function Analysis() {
min={dateToInputFormat(start)}
max={new Date().toISOString().split('T')[0]}
/>
</FormGroupStructure>
</FormGroupStructureCustom>
</FormBlock>
</Form>
</FoldBody>
</FoldWOBottomPadding>
<Toolbar size='small'>
<ToolbarLabel>Presets</ToolbarLabel>
<ButtonGroup variation='base-outline' radius='square'>
<Button onClick={(e) => onDatePresetClick(e, 'last10Years')}>
Last 10 years
</Button>
<Button onClick={(e) => onDatePresetClick(e, '2018-2022')}>
2018 - 2022
</Button>
</ButtonGroup>
</Toolbar>
</FoldBodyCustom>
</FoldWGuideLine>

<FoldWithBullet number='3'>
<FoldHeader>
Expand Down
18 changes: 11 additions & 7 deletions app/scripts/components/analysis/define/page-footer.actions.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -43,7 +43,7 @@ const FooterRight = styled.div`
const AnalysisDescription = styled.div`
font-size: 0.875rem;
opacity: 0.5;
`
`;

export default function PageFooterActions({
// size,
Expand Down Expand Up @@ -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]);

Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down

0 comments on commit d27f634

Please sign in to comment.