From 9f6ce284f9565eead5bce38a51824e08b02f4a98 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=98rjan=20Aare=20J=C3=B8rgensen?= Date: Wed, 11 Dec 2024 18:22:22 +0100 Subject: [PATCH 1/4] fix: Variogram result dialog size --- .../ImageResult/ImageResult.styled.ts | 62 ++-- .../ImageResult/ImageResult.tsx | 300 ++++++++++++------ 2 files changed, 224 insertions(+), 138 deletions(-) diff --git a/src/features/Results/CaseResult/CaseResultView/VariogramCaseResult/ImageResult/ImageResult.styled.ts b/src/features/Results/CaseResult/CaseResultView/VariogramCaseResult/ImageResult/ImageResult.styled.ts index 06153d19..18996fc6 100644 --- a/src/features/Results/CaseResult/CaseResultView/VariogramCaseResult/ImageResult/ImageResult.styled.ts +++ b/src/features/Results/CaseResult/CaseResultView/VariogramCaseResult/ImageResult/ImageResult.styled.ts @@ -2,52 +2,48 @@ import { 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)` - width: fit-content; - max-width: 90vw; - max-height: 90vh; + width: min(1500px, 90vw); + height: min(1000px, 90vh); + grid-template-rows: auto 52px; `; export const Content = styled(Dialog.CustomContent)` display: flex; flex-direction: column; - row-gap: ${spacings.SMALL}; + + .tabs { + display: flex; + flex-direction: column; + height: 100%; + } + + .tabs-panels { + flex: 1; + display: flex; + flex-direction: column; + justify-content: center; + } + + .tabs-panel { + align-self: center; + } `; export { StyledDialog as Dialog }; export const ImageWrapper = styled.div` - display: flex; - flex-direction: column; - align-items: center; - - border-style: solid; - border-width: 1px; - border-color: ${theme.light.ui.background.medium}; - - > h5 { - font-weight: normal; - padding: ${spacings.SMALL}; + .image { + display: block; + width: 100%; + object-fit: contain; + max-height: calc( + min(1000px, 90vh) - 16px - 48px - 16px - 16px - 52px - 16px + ); /* Tweaking the height to match the content area minus patting, tab bars, action bar, etc. */ } - > .image { - width: fit-content; - max-width: 80vw; - max-height: 70vh; - padding: ${spacings.SMALL}; - - @media (max-width: 1200px) { - width: fit-content; - max-width: 70vw; - max-height: 60vh; - } - @media (max-width: 800px) { - width: fit-content; - max-width: 60vw; - max-height: 50vh; - } + .placeholder-text { + text-align: center; } `; diff --git a/src/features/Results/CaseResult/CaseResultView/VariogramCaseResult/ImageResult/ImageResult.tsx b/src/features/Results/CaseResult/CaseResultView/VariogramCaseResult/ImageResult/ImageResult.tsx index 4d019a9c..0710cfd2 100644 --- a/src/features/Results/CaseResult/CaseResultView/VariogramCaseResult/ImageResult/ImageResult.tsx +++ b/src/features/Results/CaseResult/CaseResultView/VariogramCaseResult/ImageResult/ImageResult.tsx @@ -1,5 +1,11 @@ /* eslint-disable max-lines-per-function */ -import { Button, Dialog, Tabs } from '@equinor/eds-core-react'; +import { + Button, + CircularProgress, + Dialog, + Tabs, + Typography, +} from '@equinor/eds-core-react'; import { useQuery } from '@tanstack/react-query'; import { useState } from 'react'; import { getVariogramImage } from '../../../../../../api/custom/getImageById'; @@ -77,7 +83,7 @@ export const ImageResult = ({ return ( - + Variogram slice Spherical @@ -85,121 +91,205 @@ export const ImageResult = ({ General Exponential Exponential - - - {loadedVariogramSlicesImage.isLoading && <>Loading ...} + + + <> + {loadedVariogramSlicesImage.isLoading && ( + <> + + + )} - {loadedVariogramSlicesImage.data && ( - - Case results - - )} + {loadedVariogramSlicesImage.data && ( + + Case results + + )} + - - {loadedSphericalImage && loadedSphericalImage.data ? ( - <> - {loadedSphericalImage.isLoading && <>Loading ...} - {loadedSphericalImage.data && ( - - Spherical - - )} - - ) : ( - <>No Spherical - )} + + <> + {loadedSphericalImage && loadedSphericalImage.data ? ( + <> + {loadedSphericalImage.isLoading && ( + <> + + + )} + {loadedSphericalImage.data && ( + + Spherical + + )} + + ) : ( + + + Spherical variogram model is not included in the result + + + )} + - - {loadedGaussianImage && loadedGaussianImage.data ? ( - <> - {loadedGaussianImage.isLoading && <>Loading ...} - {loadedGaussianImage.data && ( - - Gaussian - - )} - - ) : ( - <>No Gaussian - )} + + <> + {loadedGaussianImage && loadedGaussianImage.data ? ( + <> + {loadedGaussianImage.isLoading && ( + <> + + + )} + {loadedGaussianImage.data && ( + + Gaussian + + )} + + ) : ( + + + Gaussian variogram model is not included in the result + + + )} + - - {loadedGeneralExponentialImage && - loadedGeneralExponentialImage.data ? ( - <> - {loadedGeneralExponentialImage.isLoading && <>Loading ...} - {loadedGeneralExponentialImage.data && ( - - General Exponential - - )} - - ) : ( - <>No General Exponential - )} + + <> + {loadedGeneralExponentialImage && + loadedGeneralExponentialImage.data ? ( + <> + {loadedGeneralExponentialImage.isLoading && ( + <> + + + )} + {loadedGeneralExponentialImage.data && ( + + General Exponential + + )} + + ) : ( + + + General exponential variogram model is not included in the + result + + + )} + - - {loadedExponentialImage && loadedExponentialImage.data ? ( - <> - {loadedExponentialImage.isLoading && <>Loading ...} - {loadedExponentialImage.data && ( - - Exponential - - )} - - ) : ( - <>No General Exponential - )} + + <> + {loadedExponentialImage && loadedExponentialImage.data ? ( + <> + {loadedExponentialImage.isLoading && ( + <> + + + )} + {loadedExponentialImage.data && ( + + Exponential + + )} + + ) : ( + + + Exponential variogram model is not included in the result + + + )} + - From 1947069a4ed47804b2ebae797d863d06699f0445 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=98rjan=20Aare=20J=C3=B8rgensen?= Date: Wed, 11 Dec 2024 21:45:59 +0100 Subject: [PATCH 2/4] Fix typos, minor clean up --- .../ImageResult/ImageResult.styled.ts | 80 ++++++++++--------- .../ImageResult/ImageResult.tsx | 50 ++++++------ 2 files changed, 69 insertions(+), 61 deletions(-) diff --git a/src/features/Results/CaseResult/CaseResultView/VariogramCaseResult/ImageResult/ImageResult.styled.ts b/src/features/Results/CaseResult/CaseResultView/VariogramCaseResult/ImageResult/ImageResult.styled.ts index 18996fc6..ac1c3146 100644 --- a/src/features/Results/CaseResult/CaseResultView/VariogramCaseResult/ImageResult/ImageResult.styled.ts +++ b/src/features/Results/CaseResult/CaseResultView/VariogramCaseResult/ImageResult/ImageResult.styled.ts @@ -3,47 +3,55 @@ import styled from 'styled-components'; import { spacings } from '../../../../../../tokens/spacings'; export const StyledDialog = styled(Dialog)` - width: min(1500px, 90vw); - height: min(1000px, 90vh); - grid-template-rows: auto 52px; -`; + --image-width: 1500px; + --image-height: 1000px; -export const Content = styled(Dialog.CustomContent)` - display: flex; - flex-direction: column; - row-gap: ${spacings.SMALL}; - - .tabs { - display: flex; - flex-direction: column; - height: 100%; - } + width: min(var(--image-width), 90vw); + height: min(var(--image-height), 90vh); + grid-template-rows: auto 52px; - .tabs-panels { - flex: 1; + .dialog-content { display: flex; flex-direction: column; - justify-content: center; - } - - .tabs-panel { - align-self: center; + row-gap: ${spacings.SMALL}; + + .tabs { + display: flex; + flex-direction: column; + height: 100%; + } + + .tabs-panels { + flex: 1; + display: flex; + flex-direction: column; + justify-content: center; + } + + .tabs-panel { + align-self: center; + } + + .image-wrapper { + margin: 0; + } + + .image { + display: block; + width: 100%; + object-fit: contain; + + /* Tweak the content height inside the dialog minus tabs, actions, padding, etc. */ + max-height: calc( + min(var(--image-height), 90vh) - + (16px + 48px + 16px + 16px + 52px + 16px) + ); + } + + .placeholder-text { + text-align: center; + } } `; export { StyledDialog as Dialog }; - -export const ImageWrapper = styled.div` - .image { - display: block; - width: 100%; - object-fit: contain; - max-height: calc( - min(1000px, 90vh) - 16px - 48px - 16px - 16px - 52px - 16px - ); /* Tweaking the height to match the content area minus patting, tab bars, action bar, etc. */ - } - - .placeholder-text { - text-align: center; - } -`; diff --git a/src/features/Results/CaseResult/CaseResultView/VariogramCaseResult/ImageResult/ImageResult.tsx b/src/features/Results/CaseResult/CaseResultView/VariogramCaseResult/ImageResult/ImageResult.tsx index 0710cfd2..a4396ce3 100644 --- a/src/features/Results/CaseResult/CaseResultView/VariogramCaseResult/ImageResult/ImageResult.tsx +++ b/src/features/Results/CaseResult/CaseResultView/VariogramCaseResult/ImageResult/ImageResult.tsx @@ -82,7 +82,7 @@ export const ImageResult = ({ return ( - + Variogram slice @@ -106,17 +106,17 @@ export const ImageResult = ({ )} {loadedVariogramSlicesImage.data && ( - +
Case results - +
)} @@ -135,28 +135,28 @@ export const ImageResult = ({ )} {loadedSphericalImage.data && ( - +
Spherical - +
)} ) : ( - +
Spherical variogram model is not included in the result - +
)} @@ -175,28 +175,28 @@ export const ImageResult = ({ )} {loadedGaussianImage.data && ( - +
Gaussian - +
)} ) : ( - +
Gaussian variogram model is not included in the result - +
)} @@ -217,21 +217,21 @@ export const ImageResult = ({ )} {loadedGeneralExponentialImage.data && ( - +
General Exponential - +
)} ) : ( - +
- +
)} @@ -258,34 +258,34 @@ export const ImageResult = ({ )} {loadedExponentialImage.data && ( - +
Exponential - +
)} ) : ( - +
Exponential variogram model is not included in the result - +
)} - +