From 639cc05af4e1c26b8cfe7fa322416bf0b4c2418b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=98rjan=20Aare=20J=C3=B8rgensen?= <oajo@equinor.com>
Date: Thu, 12 Dec 2024 10:48:25 +0100
Subject: [PATCH] Fix: Variogram result dialog size (#399)

---
 .../ImageResult/ImageResult.styled.ts         |  82 ++---
 .../ImageResult/ImageResult.tsx               | 304 ++++++++++++------
 2 files changed, 240 insertions(+), 146 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..ac1c3146 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,56 @@ 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;
-`;
-
-export const Content = styled(Dialog.CustomContent)`
-  display: flex;
-  flex-direction: column;
-
-  row-gap: ${spacings.SMALL};
-`;
-
-export { StyledDialog as Dialog };
+  --image-width: 1500px;
+  --image-height: 1000px;
+
+  width: min(var(--image-width), 90vw);
+  height: min(var(--image-height), 90vh);
+  grid-template-rows: auto 52px;
+
+  .dialog-content {
+    display: flex;
+    flex-direction: column;
+    row-gap: ${spacings.SMALL};
+
+    .tabs {
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+    }
 
-export const ImageWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
+    .tabs-panels {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+    }
 
-  border-style: solid;
-  border-width: 1px;
-  border-color: ${theme.light.ui.background.medium};
+    .tabs-panel {
+      align-self: center;
+    }
 
-  > h5 {
-    font-weight: normal;
-    padding: ${spacings.SMALL};
-  }
+    .image-wrapper {
+      margin: 0;
+    }
 
-  > .image {
-    width: fit-content;
-    max-width: 80vw;
-    max-height: 70vh;
-    padding: ${spacings.SMALL};
+    .image {
+      display: block;
+      width: 100%;
+      object-fit: contain;
 
-    @media (max-width: 1200px) {
-      width: fit-content;
-      max-width: 70vw;
-      max-height: 60vh;
+      /* 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)
+      );
     }
-    @media (max-width: 800px) {
-      width: fit-content;
-      max-width: 60vw;
-      max-height: 50vh;
+
+    .placeholder-text {
+      text-align: center;
     }
   }
 `;
+
+export { StyledDialog as Dialog };
diff --git a/src/features/Results/CaseResult/CaseResultView/VariogramCaseResult/ImageResult/ImageResult.tsx b/src/features/Results/CaseResult/CaseResultView/VariogramCaseResult/ImageResult/ImageResult.tsx
index 4d019a9c..a4396ce3 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';
@@ -76,8 +82,8 @@ export const ImageResult = ({
 
   return (
     <Styled.Dialog open={open} isDismissable>
-      <Styled.Content>
-        <Tabs activeTab={activeTab} onChange={handleChange}>
+      <Dialog.CustomContent className="dialog-content">
+        <Tabs activeTab={activeTab} onChange={handleChange} className="tabs">
           <Tabs.List>
             <Tabs.Tab>Variogram slice</Tabs.Tab>
             <Tabs.Tab>Spherical</Tabs.Tab>
@@ -85,121 +91,205 @@ export const ImageResult = ({
             <Tabs.Tab>General Exponential</Tabs.Tab>
             <Tabs.Tab>Exponential</Tabs.Tab>
           </Tabs.List>
-          <Tabs.Panels>
-            <Tabs.Panel>
-              {loadedVariogramSlicesImage.isLoading && <>Loading ...</>}
+          <Tabs.Panels className="tabs-panels">
+            <Tabs.Panel className="tabs-panel">
+              <>
+                {loadedVariogramSlicesImage.isLoading && (
+                  <>
+                    <CircularProgress
+                      color="primary"
+                      size={24}
+                      value={100}
+                      variant="indeterminate"
+                    />
+                  </>
+                )}
 
-              {loadedVariogramSlicesImage.data && (
-                <Styled.ImageWrapper>
-                  <img
-                    className="image"
-                    alt="Case results"
-                    src={
-                      loadedVariogramSlicesImage.data
-                        ? loadedVariogramSlicesImage.data
-                        : ''
-                    }
-                  />
-                </Styled.ImageWrapper>
-              )}
+                {loadedVariogramSlicesImage.data && (
+                  <figure className="image-wrapper">
+                    <img
+                      className="image"
+                      alt="Variogram x/y/z slice"
+                      src={
+                        loadedVariogramSlicesImage.data
+                          ? loadedVariogramSlicesImage.data
+                          : ''
+                      }
+                    />
+                  </figure>
+                )}
+              </>
             </Tabs.Panel>
-            <Tabs.Panel>
-              {loadedSphericalImage && loadedSphericalImage.data ? (
-                <>
-                  {loadedSphericalImage.isLoading && <>Loading ...</>}
-                  {loadedSphericalImage.data && (
-                    <Styled.ImageWrapper>
-                      <img
-                        className="image"
-                        alt="Spherical"
-                        src={
-                          loadedSphericalImage.data
-                            ? loadedSphericalImage.data
-                            : ''
-                        }
-                      />
-                    </Styled.ImageWrapper>
-                  )}
-                </>
-              ) : (
-                <>No Spherical</>
-              )}
+            <Tabs.Panel className="tabs-panel">
+              <>
+                {loadedSphericalImage && loadedSphericalImage.data ? (
+                  <>
+                    {loadedSphericalImage.isLoading && (
+                      <>
+                        <CircularProgress
+                          color="primary"
+                          size={24}
+                          value={100}
+                          variant="indeterminate"
+                        />
+                      </>
+                    )}
+                    {loadedSphericalImage.data && (
+                      <figure className="image-wrapper">
+                        <img
+                          className="image"
+                          alt="Spherical variogram (empirical and fitted)"
+                          src={
+                            loadedSphericalImage.data
+                              ? loadedSphericalImage.data
+                              : ''
+                          }
+                        />
+                      </figure>
+                    )}
+                  </>
+                ) : (
+                  <figure className="image-wrapper">
+                    <Typography
+                      variant="body_short"
+                      className="placeholder-text"
+                    >
+                      Spherical variogram model is not included in the result
+                    </Typography>
+                  </figure>
+                )}
+              </>
             </Tabs.Panel>
-            <Tabs.Panel>
-              {loadedGaussianImage && loadedGaussianImage.data ? (
-                <>
-                  {loadedGaussianImage.isLoading && <>Loading ...</>}
-                  {loadedGaussianImage.data && (
-                    <Styled.ImageWrapper>
-                      <img
-                        className="image"
-                        alt="Gaussian"
-                        src={
-                          loadedGaussianImage.data
-                            ? loadedGaussianImage.data
-                            : ''
-                        }
-                      />
-                    </Styled.ImageWrapper>
-                  )}
-                </>
-              ) : (
-                <>No Gaussian</>
-              )}
+            <Tabs.Panel className="tabs-panel">
+              <>
+                {loadedGaussianImage && loadedGaussianImage.data ? (
+                  <>
+                    {loadedGaussianImage.isLoading && (
+                      <>
+                        <CircularProgress
+                          color="primary"
+                          size={24}
+                          value={100}
+                          variant="indeterminate"
+                        />
+                      </>
+                    )}
+                    {loadedGaussianImage.data && (
+                      <figure className="image-wrapper">
+                        <img
+                          className="image"
+                          alt="Gaussian variogram (empirical and fitted)"
+                          src={
+                            loadedGaussianImage.data
+                              ? loadedGaussianImage.data
+                              : ''
+                          }
+                        />
+                      </figure>
+                    )}
+                  </>
+                ) : (
+                  <figure className="image-wrapper">
+                    <Typography
+                      variant="body_short"
+                      className="placeholder-text"
+                    >
+                      Gaussian variogram model is not included in the result
+                    </Typography>
+                  </figure>
+                )}
+              </>
             </Tabs.Panel>
 
-            <Tabs.Panel>
-              {loadedGeneralExponentialImage &&
-              loadedGeneralExponentialImage.data ? (
-                <>
-                  {loadedGeneralExponentialImage.isLoading && <>Loading ...</>}
-                  {loadedGeneralExponentialImage.data && (
-                    <Styled.ImageWrapper>
-                      <img
-                        className="image"
-                        alt="General Exponential"
-                        src={
-                          loadedGeneralExponentialImage.data
-                            ? loadedGeneralExponentialImage.data
-                            : ''
-                        }
-                      />
-                    </Styled.ImageWrapper>
-                  )}
-                </>
-              ) : (
-                <>No General Exponential</>
-              )}
+            <Tabs.Panel className="tabs-panel">
+              <>
+                {loadedGeneralExponentialImage &&
+                loadedGeneralExponentialImage.data ? (
+                  <>
+                    {loadedGeneralExponentialImage.isLoading && (
+                      <>
+                        <CircularProgress
+                          color="primary"
+                          size={24}
+                          value={100}
+                          variant="indeterminate"
+                        />
+                      </>
+                    )}
+                    {loadedGeneralExponentialImage.data && (
+                      <figure className="image-wrapper">
+                        <img
+                          className="image"
+                          alt="General Exponential variogram (empirical and fitted)"
+                          src={
+                            loadedGeneralExponentialImage.data
+                              ? loadedGeneralExponentialImage.data
+                              : ''
+                          }
+                        />
+                      </figure>
+                    )}
+                  </>
+                ) : (
+                  <figure className="image-wrapper">
+                    <Typography
+                      variant="body_short"
+                      className="placeholder-text"
+                    >
+                      General exponential variogram model is not included in the
+                      result
+                    </Typography>
+                  </figure>
+                )}
+              </>
             </Tabs.Panel>
-            <Tabs.Panel>
-              {loadedExponentialImage && loadedExponentialImage.data ? (
-                <>
-                  {loadedExponentialImage.isLoading && <>Loading ...</>}
-                  {loadedExponentialImage.data && (
-                    <Styled.ImageWrapper>
-                      <img
-                        className="image"
-                        alt="Exponential"
-                        src={
-                          loadedExponentialImage.data
-                            ? loadedExponentialImage.data
-                            : ''
-                        }
-                      />
-                    </Styled.ImageWrapper>
-                  )}
-                </>
-              ) : (
-                <>No General Exponential</>
-              )}
+            <Tabs.Panel className="tabs-panel">
+              <>
+                {loadedExponentialImage && loadedExponentialImage.data ? (
+                  <>
+                    {loadedExponentialImage.isLoading && (
+                      <>
+                        <CircularProgress
+                          color="primary"
+                          size={24}
+                          value={100}
+                          variant="indeterminate"
+                        />
+                      </>
+                    )}
+                    {loadedExponentialImage.data && (
+                      <figure className="image-wrapper">
+                        <img
+                          className="image"
+                          alt="Exponential variogram (empirical and fitted)"
+                          src={
+                            loadedExponentialImage.data
+                              ? loadedExponentialImage.data
+                              : ''
+                          }
+                        />
+                      </figure>
+                    )}
+                  </>
+                ) : (
+                  <figure className="image-wrapper">
+                    <Typography
+                      variant="body_short"
+                      className="placeholder-text"
+                    >
+                      Exponential variogram model is not included in the result
+                    </Typography>
+                  </figure>
+                )}
+              </>
             </Tabs.Panel>
           </Tabs.Panels>
         </Tabs>
-      </Styled.Content>
+      </Dialog.CustomContent>
 
       <Dialog.Actions>
-        <Button variant="ghost" onClick={() => setOpen(!open)}>
-          Close
+        <Button variant="contained" onClick={() => setOpen(!open)}>
+          Close this window
         </Button>
       </Dialog.Actions>
     </Styled.Dialog>