From 781aa20a4bcc42b94f8447791954c543eed75479 Mon Sep 17 00:00:00 2001 From: mheggelund Date: Wed, 24 Jan 2024 08:56:57 +0100 Subject: [PATCH 1/2] feat: Selected option dropdown list. --- .../CaseButtons/CaseButtons.styled.tsx | 3 +- .../{CaseRow.Styled.tsx => CaseRow.Styled.ts} | 11 +- .../Compute/CaseGroup/CaseRow/CaseRow.tsx | 25 ++- .../CaseSettingSelects/ModelAreaSelect.tsx | 80 ++++---- .../SettingSelect.styled.tsx | 6 + .../VariogramSettingSelect.styled.ts | 15 ++ .../VariogramSettingSelect.tsx | 176 ++++++++++++------ .../ViewSelectedVariogramSettings.tsx | 43 +++++ .../ModelPages/Compute/Compute.styled.tsx | 4 +- 9 files changed, 251 insertions(+), 112 deletions(-) rename src/features/Compute/CaseGroup/CaseRow/{CaseRow.Styled.tsx => CaseRow.Styled.ts} (79%) create mode 100644 src/features/Compute/CaseGroup/VariogramSettingSelect/VariogramSettingSelect.styled.ts rename src/features/Compute/CaseGroup/{CaseSettingSelects => VariogramSettingSelect}/VariogramSettingSelect.tsx (64%) create mode 100644 src/features/Compute/CaseGroup/ViewSelectedVariogramSettings/ViewSelectedVariogramSettings.tsx diff --git a/src/features/Compute/CaseGroup/CaseButtons/CaseButtons.styled.tsx b/src/features/Compute/CaseGroup/CaseButtons/CaseButtons.styled.tsx index def8acb6..33a464bc 100644 --- a/src/features/Compute/CaseGroup/CaseButtons/CaseButtons.styled.tsx +++ b/src/features/Compute/CaseGroup/CaseButtons/CaseButtons.styled.tsx @@ -6,5 +6,6 @@ export const ButtonDiv = styled.div` flex: row; flex-direction: row; column-gap: ${spacings.SMALL}; - align-items: end; + align-items: start; + padding-top: ${spacings.MEDIUM}; `; diff --git a/src/features/Compute/CaseGroup/CaseRow/CaseRow.Styled.tsx b/src/features/Compute/CaseGroup/CaseRow/CaseRow.Styled.ts similarity index 79% rename from src/features/Compute/CaseGroup/CaseRow/CaseRow.Styled.tsx rename to src/features/Compute/CaseGroup/CaseRow/CaseRow.Styled.ts index 44d87907..d2d1ad50 100644 --- a/src/features/Compute/CaseGroup/CaseRow/CaseRow.Styled.tsx +++ b/src/features/Compute/CaseGroup/CaseRow/CaseRow.Styled.ts @@ -7,7 +7,6 @@ export const Case = styled.div` flex-direction: column; padding: ${spacings.MEDIUM}; - column-gap: ${spacings.MEDIUM}; border-bottom: solid thin ${theme.light.ui.background.medium}; background-color: ${theme.light.ui.background.default}; @@ -15,7 +14,17 @@ export const Case = styled.div` `; export const CaseRow = styled.div` + &.Object { + align-items: center; + } + display: flex; + flex-direction: row; + column-gap: ${spacings.MEDIUM}; +`; + +export const AutocompleteWrapper = styled.div` display: flex; + flex: auto; flex-direction: row; column-gap: ${spacings.MEDIUM}; `; diff --git a/src/features/Compute/CaseGroup/CaseRow/CaseRow.tsx b/src/features/Compute/CaseGroup/CaseRow/CaseRow.tsx index 98d16581..6afd0160 100644 --- a/src/features/Compute/CaseGroup/CaseRow/CaseRow.tsx +++ b/src/features/Compute/CaseGroup/CaseRow/CaseRow.tsx @@ -16,7 +16,7 @@ import { import { useFetchModel } from '../../../../hooks/useFetchModel'; import { CaseButtons } from '../CaseButtons/CaseButtons'; import { ModelAreaSelect } from '../CaseSettingSelects/ModelAreaSelect'; -import { VariogramOptionSelect } from '../CaseSettingSelects/VariogramSettingSelect'; +import { VariogramOptionSelect } from '../VariogramSettingSelect/VariogramSettingSelect'; import * as Styled from './CaseRow.Styled'; export const CaseRow = ({ @@ -410,7 +410,9 @@ export const CaseRow = ({ return ( - + {rowCase.computeMethod.name === 'Indicator' && ( + + + )} + - - - 0 ? modelAreas : []} - selectedOptions={ - selectedModelArea && - selectedModelArea.length > 0 && - selectedModelArea[0].modelAreaId !== '' - ? selectedModelArea - : selectedModelArea && - selectedModelArea.length > 0 && - selectedModelArea[0].modelAreaType === 'Whole model' - ? [ - { - modelAreaId: '', - modelAreaType: 'Whole model', - coordinates: [], - }, - ] - : [ - { - modelAreaId: '', - modelAreaType: '', - coordinates: [], - }, - ] - } - optionLabel={(modelArea) => modelArea.modelAreaType} - onOptionsChange={(changes: AutocompleteChanges) => - setModelArea && setModelArea(changes.selectedItems) - } - optionDisabled={!caseType ? filterDisabled : undefined} - variant={caseError.length > 0 ? 'error' : undefined} - /> - {caseError.length > 0 && } - - - + + + 0 ? modelAreas : []} + selectedOptions={ + selectedModelArea && + selectedModelArea.length > 0 && + selectedModelArea[0].modelAreaId !== '' + ? selectedModelArea + : selectedModelArea && + selectedModelArea.length > 0 && + selectedModelArea[0].modelAreaType === 'Whole model' + ? [ + { + modelAreaId: '', + modelAreaType: 'Whole model', + coordinates: [], + }, + ] + : [ + { + modelAreaId: '', + modelAreaType: '', + coordinates: [], + }, + ] + } + optionLabel={(modelArea) => modelArea.modelAreaType} + onOptionsChange={(changes: AutocompleteChanges) => + setModelArea && setModelArea(changes.selectedItems) + } + optionDisabled={!caseType ? filterDisabled : undefined} + variant={caseError.length > 0 ? 'error' : undefined} + /> + {caseError.length > 0 && } + + ); }; diff --git a/src/features/Compute/CaseGroup/CaseSettingSelects/SettingSelect.styled.tsx b/src/features/Compute/CaseGroup/CaseSettingSelects/SettingSelect.styled.tsx index 7a1606c7..4b06aa1a 100644 --- a/src/features/Compute/CaseGroup/CaseSettingSelects/SettingSelect.styled.tsx +++ b/src/features/Compute/CaseGroup/CaseSettingSelects/SettingSelect.styled.tsx @@ -5,6 +5,7 @@ export const AutocompleteWrapper = styled.div` display: flex; flex: auto; flex-direction: row; + align-items: top; column-gap: ${spacings.MEDIUM}; `; @@ -25,3 +26,8 @@ export const AutocompleteRow = styled.div` flex-grow: 1; } `; + +export const ButtonWrapper = styled.div` + display: flex; + align-items: center; +`; diff --git a/src/features/Compute/CaseGroup/VariogramSettingSelect/VariogramSettingSelect.styled.ts b/src/features/Compute/CaseGroup/VariogramSettingSelect/VariogramSettingSelect.styled.ts new file mode 100644 index 00000000..9f11ce5b --- /dev/null +++ b/src/features/Compute/CaseGroup/VariogramSettingSelect/VariogramSettingSelect.styled.ts @@ -0,0 +1,15 @@ +import styled from 'styled-components'; +import { spacings } from '../../../../tokens/spacings'; + +export const Container = styled.div` + display: flex; + flex-direction: column; + flex: start; +`; + +export const SettingsContainer = styled.div` + padding-top: ${spacings.SMALL}; + display: flex; + flex-direction: column; + row-gap: ${spacings.SMALL}; +`; diff --git a/src/features/Compute/CaseGroup/CaseSettingSelects/VariogramSettingSelect.tsx b/src/features/Compute/CaseGroup/VariogramSettingSelect/VariogramSettingSelect.tsx similarity index 64% rename from src/features/Compute/CaseGroup/CaseSettingSelects/VariogramSettingSelect.tsx rename to src/features/Compute/CaseGroup/VariogramSettingSelect/VariogramSettingSelect.tsx index ca9e052c..dad5a0e1 100644 --- a/src/features/Compute/CaseGroup/CaseSettingSelects/VariogramSettingSelect.tsx +++ b/src/features/Compute/CaseGroup/VariogramSettingSelect/VariogramSettingSelect.tsx @@ -1,14 +1,18 @@ /* eslint-disable max-lines */ /* eslint-disable max-lines-per-function */ +import { Button, Icon } from '@equinor/eds-core-react'; +import { expand as EXPAND } from '@equinor/eds-icons'; +import { useState } from 'react'; import { ComputeCaseDto, ListComputeSettingsInputDto, ListComputeSettingsInputValueDto, ModelAreaDto, } from '../../../../api/generated'; -import { CaseSettingSelect } from './CaseSettingSelect'; -import { ModelAreaSelect } from './ModelAreaSelect'; -import * as Styled from './SettingSelect.styled'; +import { CaseSettingSelect } from '../CaseSettingSelects/CaseSettingSelect'; +import { ModelAreaSelect } from '../CaseSettingSelects/ModelAreaSelect'; +import * as Styled from '../CaseSettingSelects/SettingSelect.styled'; +import { ViewSelectedVariogramSettings } from '../ViewSelectedVariogramSettings/ViewSelectedVariogramSettings'; export const VariogramOptionSelect = ({ rowCase, @@ -68,6 +72,8 @@ export const VariogramOptionSelect = ({ saved: boolean; caseError: string; }) => { + const [expandSettings, setExpandSettings] = useState(false); + const filterSettings = ( setting: ListComputeSettingsInputDto[] | undefined, method: string, @@ -233,79 +239,135 @@ export const VariogramOptionSelect = ({ } }; + const handleExpandView = () => { + setExpandSettings(!expandSettings); + }; + return ( - + + + + > + + {setIndicatorParameters && caseType === 'Indicator' && ( - + > + + )} {setGrainSize && caseType === 'Net-To-Gross' && ( - + > + + )} {setParameters && caseType === 'ContiniousParameter' && ( + + + + )} + - )} - - + + + > + + ); }; diff --git a/src/features/Compute/CaseGroup/ViewSelectedVariogramSettings/ViewSelectedVariogramSettings.tsx b/src/features/Compute/CaseGroup/ViewSelectedVariogramSettings/ViewSelectedVariogramSettings.tsx new file mode 100644 index 00000000..ceb7f46f --- /dev/null +++ b/src/features/Compute/CaseGroup/ViewSelectedVariogramSettings/ViewSelectedVariogramSettings.tsx @@ -0,0 +1,43 @@ +import { Chip } from '@equinor/eds-core-react'; +import { + ListComputeSettingsInputValueDto, + ModelAreaDto, +} from '../../../../api/generated'; +import * as Styled from '../VariogramSettingSelect/VariogramSettingSelect.styled'; + +export const ViewSelectedVariogramSettings = ({ + expandSettings, + selecteSettings, + selectedModelArea, + children, +}: { + expandSettings: boolean; + selectedModelArea?: ModelAreaDto[] | undefined; + selecteSettings?: ListComputeSettingsInputValueDto[] | undefined; + children: React.ReactNode; +}) => { + return ( + + {children} + + {expandSettings && + selectedModelArea && + selectedModelArea?.map((m) => ( + + {m.modelAreaType} + + ))} + + + + {expandSettings && + selecteSettings && + selecteSettings?.map((s) => ( + + {s.name} + + ))} + + + ); +}; diff --git a/src/pages/ModelPages/Compute/Compute.styled.tsx b/src/pages/ModelPages/Compute/Compute.styled.tsx index 284f8ab3..e1c2ba4e 100644 --- a/src/pages/ModelPages/Compute/Compute.styled.tsx +++ b/src/pages/ModelPages/Compute/Compute.styled.tsx @@ -11,9 +11,9 @@ export const Case = styled.div` column-gap: ${spacings.MEDIUM}; row-gap: ${spacings.XXX_LARGE}; - width: 85%; + width: 70vw; - @media (max-width: 1550px) { + @media (max-width: 1725px) { width: 100%; } From 00bed06cf20b59b1928f7b5904a0bce9b212267c Mon Sep 17 00:00:00 2001 From: mheggelund Date: Wed, 24 Jan 2024 10:48:58 +0100 Subject: [PATCH 2/2] style: Highligted active local case. --- src/features/Compute/CaseGroup/CaseRow/CaseRow.Styled.ts | 4 ++++ src/features/Compute/CaseGroup/CaseRow/CaseRow.tsx | 2 +- 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/src/features/Compute/CaseGroup/CaseRow/CaseRow.Styled.ts b/src/features/Compute/CaseGroup/CaseRow/CaseRow.Styled.ts index d2d1ad50..4ded0fde 100644 --- a/src/features/Compute/CaseGroup/CaseRow/CaseRow.Styled.ts +++ b/src/features/Compute/CaseGroup/CaseRow/CaseRow.Styled.ts @@ -11,6 +11,10 @@ export const Case = styled.div` border-bottom: solid thin ${theme.light.ui.background.medium}; background-color: ${theme.light.ui.background.default}; border-radius: ${spacings.CARD_ROUNDED}; + + &.local-case { + border: solid lightgreen; + } `; export const CaseRow = styled.div` diff --git a/src/features/Compute/CaseGroup/CaseRow/CaseRow.tsx b/src/features/Compute/CaseGroup/CaseRow/CaseRow.tsx index 6afd0160..122a7e8f 100644 --- a/src/features/Compute/CaseGroup/CaseRow/CaseRow.tsx +++ b/src/features/Compute/CaseGroup/CaseRow/CaseRow.tsx @@ -409,7 +409,7 @@ export const CaseRow = ({ }, [caseList, allCasesList, saved]); return ( - +