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

Refactor/set coordinates #241

Merged
merged 4 commits into from
Feb 21, 2024
Merged

Refactor/set coordinates #241

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
736b06a
refactor: Adapted set area coordinates layout and logick.
mheggelund Feb 19, 2024
a974d8a
fix: Set active area as default on close.
mheggelund Feb 19, 2024
f54d9e9
Add check and warning if model area has linked results.
mheggelund Feb 21, 2024
31e044c
Merge branch 'main' into refactor/set-coordinates
mheggelund Feb 21, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
42 changes: 39 additions & 3 deletions src/components/AreaCoordinates/AreaCoordinates.styled.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,38 @@
import { Dialog } from '@equinor/eds-core-react';
import { Banner, Dialog } from '@equinor/eds-core-react';
import styled from 'styled-components';
import { spacings } from '../../tokens/spacings';
import { theme } from '../../tokens/theme';

export const StyledDialog = styled(Dialog)`
min-width: 500px;
min-height: 500px;
width: fit-content;
`;

export const ContentSplitter = styled.div`
display: flex;
flex-direction: row;
column-gap: ${spacings.XXX_LARGE};
`;

export const Selects = styled.div`
display: flex;
flex-direction: column;

row-gap: ${spacings.XXX_LARGE};

min-width: 450px;
`;

export const CoordinateFields = styled.div`
display: flex;
flex-direction: column;

row-gap: ${spacings.LARGE};
`;

export const Content = styled(Dialog.CustomContent)`
display: flex;
flex-direction: column;
justify-content: start;

row-gap: ${spacings.SMALL};
`;
Expand All @@ -25,4 +48,17 @@ export const CoordinateInputs = styled.div`
column-gap: ${spacings.MEDIUM};
`;

export const Warning = styled(Banner)`
div {
background-color: ${theme.light.info.warning};
max-width: 450px;
}
`;

export const Buttons = styled.div`
display: flex;
flex-direction: row;
column-gap: ${spacings.MEDIUM};
`;

export { StyledDialog as Dialog };
192 changes: 103 additions & 89 deletions src/components/AreaCoordinates/AreaCoordinates.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,8 @@
import {
Autocomplete,
AutocompleteChanges,
Banner,
Button,
Dialog,
Snackbar,
Typography,
} from '@equinor/eds-core-react';
import { useState } from 'react';
Expand All @@ -16,16 +15,19 @@ import {
CoordinateDto,
ModelAreaTypeDto,
} from '../../api/generated';
import Img from '../../features/ModelView/image.png';
import { useFetchModel } from '../../hooks/useFetchModel';
import { useFetchModelAreas } from '../../hooks/useFetchModelAreas';
import { useMutateAreaCoordinates } from '../../hooks/useMutateAreaCoordinates';
import { ErrorMessage } from '../ErrorMessage/ErrorMessage';
import { ImageView } from '../ImageView/ImageView';
import * as Styled from './AreaCoordinates.styled';
import { CoordinateInput } from './CoordinateInput/CoordinateInput';
import {
CoordinateErrorType,
validateCoordinates,
} from './AreaCoordinates.hooks';
import * as Styled from './AreaCoordinates.styled';
import { CoordinateInput } from './CoordinateInput/CoordinateInput';
} from './hooks/AreaCoordinates.hooks';
import { useModelResults } from './hooks/useModelResults';

export type AreaCoordinateType = {
modelAreaId: string;
Expand Down Expand Up @@ -55,16 +57,14 @@ const defaultArea: ModelAreaTypeDto = {
};

export const AreaCoordinates = ({
open,
toggleOpen,
setSaveAlert,
}: {
open: boolean;
toggleOpen: () => void;
setSaveAlert: React.Dispatch<React.SetStateAction<boolean>>;
}) => {
const [showSaveAlert, setSaveAlert] = useState(false);
const [activeArea, setActiveArea] = useState<ModelAreaTypeDto>(defaultArea);
const [newArea, setNewArea] = useState<ModelAreaTypeDto>();
const [errors, setErrors] = useState<CoordinateErrorType>({});
const [edit, setEdit] = useState<boolean>(false);
const [areaCoordinate, setAreaCoordinate] = useState<AreaCoordinateType>({
modelAreaId: '',
coordinates: [
Expand All @@ -81,18 +81,15 @@ export const AreaCoordinates = ({
],
});
const { modelId } = useParams();

const { data, isLoading } = useFetchModel(modelId);
const { activeAreaResultList } = useModelResults(activeArea.name);
const modelAreas = useFetchModelAreas();
const mutateAreaCoordinates = useMutateAreaCoordinates();

function clearStatus() {
setSaveAlert(false);
}

const handleSelectChange = async (
changes: AutocompleteChanges<ModelAreaTypeDto>,
) => {
setEdit(false);
setErrors({});

// If area dropdown is set to empty:
Expand Down Expand Up @@ -171,8 +168,7 @@ export const AreaCoordinates = ({
};

const clearAndUpdate = async () => {
setActiveArea(defaultArea);
setAreaCoordinate(defaultState);
setEdit(false);
return 'success';
};

Expand Down Expand Up @@ -244,21 +240,17 @@ export const AreaCoordinates = ({
}
};

const handleEditChange = () => {
setEdit(!edit);
};

if (modelAreas.isLoading || modelAreas.data === undefined || isLoading)
return <p>Loading.....</p>;

return (
<>
<Styled.Dialog open={open}>
<Dialog.Header>
<Dialog.Title>Model Areas</Dialog.Title>
</Dialog.Header>
<Styled.Content>
<Typography variant="body_long">
Select from predefined model areas and set the X/Y coordinates for
each area.
</Typography>

<Styled.ContentSplitter>
<Styled.Selects>
<Styled.CoordinateGroup className={'autocomplete-error'}>
<Autocomplete
className={errors?.area && 'autocomplete-error'}
Expand All @@ -271,70 +263,92 @@ export const AreaCoordinates = ({
></Autocomplete>
</Styled.CoordinateGroup>

<Styled.CoordinateGroup>
<Typography variant="h6">Top Left Corner</Typography>
<Styled.CoordinateInputs>
<CoordinateInput
label="X start"
error={errors.x0 ? true : false}
areaCoordinate={areaCoordinate}
setCoordinates={setCoordinates}
position={0}
axis="x"
activeArea={activeArea}
/>
<CoordinateInput
label="Y start"
error={errors.y0 ? true : false}
areaCoordinate={areaCoordinate}
setCoordinates={setCoordinates}
position={0}
axis="y"
activeArea={activeArea}
/>
</Styled.CoordinateInputs>
</Styled.CoordinateGroup>
<Styled.CoordinateGroup>
<Typography variant="h6">Bottom Right Corner </Typography>
<Styled.CoordinateInputs>
<CoordinateInput
label="X end"
error={errors.x1 ? true : false}
areaCoordinate={areaCoordinate}
setCoordinates={setCoordinates}
position={1}
axis="x"
activeArea={activeArea}
/>
<CoordinateInput
label="Y end"
error={errors.y1 ? true : false}
areaCoordinate={areaCoordinate}
setCoordinates={setCoordinates}
position={1}
axis="y"
activeArea={activeArea}
/>
</Styled.CoordinateInputs>
{activeArea.modelAreaTypeId !== '' && (
<Styled.CoordinateFields>
<Styled.CoordinateGroup>
<Typography variant="h6">Top Left Corner</Typography>
<Styled.CoordinateInputs>
<CoordinateInput
label="X start"
error={errors.x0 ? true : false}
areaCoordinate={areaCoordinate}
setCoordinates={setCoordinates}
position={0}
axis="x"
edit={edit}
/>
<CoordinateInput
label="Y start"
error={errors.y0 ? true : false}
areaCoordinate={areaCoordinate}
setCoordinates={setCoordinates}
position={0}
axis="y"
edit={edit}
/>
</Styled.CoordinateInputs>
</Styled.CoordinateGroup>
<Styled.CoordinateGroup>
<Typography variant="h6">Bottom Right Corner </Typography>
<Styled.CoordinateInputs>
<CoordinateInput
label="X end"
error={errors.x1 ? true : false}
areaCoordinate={areaCoordinate}
setCoordinates={setCoordinates}
position={1}
axis="x"
edit={edit}
/>
<CoordinateInput
label="Y end"
error={errors.y1 ? true : false}
areaCoordinate={areaCoordinate}
setCoordinates={setCoordinates}
position={1}
axis="y"
edit={edit}
/>
</Styled.CoordinateInputs>

{errors && <ErrorMessage errors={errors}></ErrorMessage>}
</Styled.CoordinateGroup>
</Styled.Content>
{errors && <ErrorMessage errors={errors}></ErrorMessage>}
</Styled.CoordinateGroup>
{activeAreaResultList &&
activeAreaResultList?.length > 0 &&
edit && (
<Styled.Warning elevation="none">
<Banner.Message>
IMPORTANT - this model area has one or more results in
object or variogram cases. Changing the coordinates will
discard any associated result.
</Banner.Message>
</Styled.Warning>
)}

<Styled.Buttons>
{edit ? (
<>
<Button onClick={handleSubmit}>Save coordinates</Button>
<Button variant="outlined" onClick={handleEditChange}>
Cancel
</Button>
</>
) : (
<Button variant="outlined" onClick={handleEditChange}>
Edit coordinates
</Button>
)}
</Styled.Buttons>
</Styled.CoordinateFields>
)}
</Styled.Selects>

<Dialog.Actions>
<Button onClick={handleSubmit}>Save</Button>
<Button variant="ghost" onClick={toggleOpen}>
Cancel
</Button>
</Dialog.Actions>
</Styled.Dialog>
<Snackbar
open={!!showSaveAlert}
autoHideDuration={3000}
onClose={clearStatus}
>
{'Saved model area'}
</Snackbar>
<ImageView
text="Model placeholder image"
img={Img}
altText="Model placeholder image"
/>
</Styled.ContentSplitter>
</>
);
};
7 changes: 3 additions & 4 deletions src/components/AreaCoordinates/CoordinateInput/CoordinateInput.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import { Icon, Input, Label } from '@equinor/eds-core-react';
import { error_filled as ERROR_FILLED } from '@equinor/eds-icons';
import { ModelAreaTypeDto } from '../../../api/generated';
import { AreaCoordinateType } from '../AreaCoordinates';

export const CoordinateInput = ({
Expand All @@ -10,15 +9,15 @@ export const CoordinateInput = ({
setCoordinates,
position,
axis,
activeArea,
edit,
}: {
label: string;
error: boolean;
areaCoordinate: AreaCoordinateType | undefined;
setCoordinates: (value: string, index: number, axis: string) => void;
position: number;
axis: string;
activeArea: ModelAreaTypeDto;
edit: boolean;
}) => {
return (
<div>
Expand All @@ -40,7 +39,7 @@ export const CoordinateInput = ({
)
}
variant={error ? 'error' : undefined}
disabled={activeArea?.modelAreaTypeId === ''}
disabled={!edit}
/>
</div>
);
Expand Down
Loading
Loading