Refactor/UI touch up

src/components/CaseCardComponent/CaseCardComponent.tsx

@@ -3,6 +3,7 @@ import { Typography } from '@equinor/eds-core-react';
 import { ComputeCaseDto } from '../../api/generated';
 import { AddCaseButtons } from '../AddCaseButtons/AddCaseButtons';
 import * as Styled from './CaseCardComponent.styled';
+import { titleMapping } from './FormattedMethodNames';
 
 export const CaseCardComponent = ({
   children,
@@ -24,7 +25,7 @@ export const CaseCardComponent = ({
       <Styled.Wrapper>
         <Styled.ButtonGroup>
           <Styled.Title>
-            <Typography variant="h4">{title}</Typography>
+            <Typography variant="h4">{titleMapping[title]}</Typography>
             <Typography variant="h6">{subTitle}</Typography>
           </Styled.Title>
           <AddCaseButtons

src/components/CaseCardComponent/FormattedMethodNames.tsx

@@ -0,0 +1,5 @@
+export const titleMapping: Record<string, string> = {
+  Indicator: 'Indicator',
+  'Net-To-Gross': 'Net-to-gross',
+  ContiniousParameter: 'Continious parameter',
+};

src/components/ConfirmDialog/ConfirmDialog.styled.ts

@@ -0,0 +1,11 @@
+import { Dialog } from '@equinor/eds-core-react';
+import styled from 'styled-components';
+import { spacings } from '../../tokens/spacings';
+
+export const Actions = styled(Dialog.Actions)`
+  display: flex;
+  flex: row;
+  flex-direction: row;
+  column-gap: ${spacings.SMALL};
+  align-items: start;
+`;

src/components/ConfirmDialog/ConfirmDialog.tsx

@@ -1,30 +1,36 @@
 import { Button, Dialog, Typography } from '@equinor/eds-core-react';
+import * as Styled from './ConfirmDialog.styled';
 
 export const ConfirmDialog = ({
   isOpen,
   message,
+  danger,
   confirmAction,
   setIsOpen,
 }: {
   isOpen: boolean;
   message: string;
+  danger: boolean;
   confirmAction: () => void;
   setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
 }) => {
   return (
     <Dialog open={isOpen}>
-      <Dialog.Header>
-        <Dialog.Title>Confirm</Dialog.Title>
-      </Dialog.Header>
       <Dialog.CustomContent>
         <Typography variant="body_short">{message}</Typography>
       </Dialog.CustomContent>
-      <Dialog.Actions>
-        <Button onClick={confirmAction}>OK</Button>
-        <Button variant="ghost" onClick={() => setIsOpen(false)}>
-          Cancel
+      <Styled.Actions>
+        <Button
+          variant="outlined"
+          color={danger ? 'danger' : undefined}
+          onClick={() => setIsOpen(false)}
+        >
+          {'Cancle'}
         </Button>
-      </Dialog.Actions>
+        <Button color={danger ? 'danger' : undefined} onClick={confirmAction}>
+          {danger ? 'Delete' : 'Ok'}
+        </Button>
+      </Styled.Actions>
     </Dialog>
   );
 };

src/features/Compute/CaseGroup/CaseButtons/CaseButtons.styled.tsx

@@ -1,3 +1,4 @@
+import { Button } from '@equinor/eds-core-react';
 import styled from 'styled-components';
 import { spacings } from '../../../../tokens/spacings';
 
@@ -9,3 +10,10 @@ export const ButtonDiv = styled.div`
   align-items: start;
   padding-top: ${spacings.MEDIUM};
 `;
+
+const StyledButton = styled(Button)`
+  white-space: nowrap;
+  width: 100px;
+`;
+
+export { StyledButton as Button };

src/features/Compute/CaseGroup/CaseButtons/CaseButtons.tsx

@@ -7,6 +7,7 @@ import {
   save as SAVE,
 } from '@equinor/eds-icons';
 import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
 import {
   ComputeJobStatus,
   ListComputeCasesByAnalogueModelIdQueryResponse,
@@ -43,7 +44,7 @@ export const CaseButtons = ({
 }) => {
   const [deleteConfirm, setDeleteConfirm] = useState(false);
   const [saveConfirm, setSaveConfirm] = useState(false);
-
+  const navigate = useNavigate();
   const handleConfirmSave = () => {
     saveCase();
     setSaveConfirm(false);
@@ -110,7 +111,16 @@ export const CaseButtons = ({
 
       {caseType === 'Object' ? (
         <>
-          {saved ? (
+          {caseStatus === 'Succeeded' ? (
+            <Styled.Button
+              variant="outlined"
+              onClick={() => {
+                navigate('../results/object');
+              }}
+            >
+              View Results{' '}
+            </Styled.Button>
+          ) : saved ? (
             <Tooltip
               title={
                 !isProcessed
@@ -123,27 +133,23 @@ export const CaseButtons = ({
               }
             >
               <Button
+                color={caseStatus === 'Failed' ? 'danger' : undefined}
                 variant="outlined"
                 onClick={saved ? runCase : saveCase}
                 disabled={
                   !isProcessed ||
                   caseStatus === 'Created' ||
                   caseStatus === 'Waiting' ||
-                  caseStatus === 'Running' ||
-                  caseStatus === 'Succeeded'
+                  caseStatus === 'Running'
                 }
               >
-                {caseStatus !== 'Succeeded' && (
-                  <Icon data={PLAY} size={18}></Icon>
-                )}
+                <Icon data={PLAY} size={18}></Icon>
                 {caseStatus === 'Created' ||
                 caseStatus === 'Waiting' ||
                 caseStatus === 'Running'
                   ? 'Running ... '
                   : caseStatus === 'Failed'
-                  ? 'Run Failed. Re-run Case'
-                  : caseStatus === 'Succeeded'
-                  ? 'Success'
+                  ? 'Re-run'
                   : 'Run'}
               </Button>
             </Tooltip>
@@ -167,31 +173,38 @@ export const CaseButtons = ({
                 : ''
             }
           >
-            <Button
-              variant="outlined"
-              onClick={runCase}
-              disabled={
-                !isProcessed ||
-                id.length < 3 ||
-                caseStatus === 'Created' ||
-                caseStatus === 'Waiting' ||
-                caseStatus === 'Running' ||
-                caseStatus === 'Succeeded'
-              }
-            >
-              {caseStatus !== 'Succeeded' && (
+            {caseStatus === 'Succeeded' ? (
+              <Styled.Button
+                variant="outlined"
+                onClick={() => {
+                  navigate('../results/variogram');
+                }}
+              >
+                View Results{' '}
+              </Styled.Button>
+            ) : (
+              <Styled.Button
+                color={caseStatus === 'Failed' && 'danger'}
+                variant="outlined"
+                onClick={runCase}
+                disabled={
+                  !isProcessed ||
+                  id.length < 3 ||
+                  caseStatus === 'Created' ||
+                  caseStatus === 'Waiting' ||
+                  caseStatus === 'Running'
+                }
+              >
                 <Icon data={PLAY} size={18}></Icon>
-              )}
-              {caseStatus === 'Created' ||
-              caseStatus === 'Waiting' ||
-              caseStatus === 'Running'
-                ? 'Running ... '
-                : caseStatus === 'Failed'
-                ? 'Run Failed. Re-run Case'
-                : caseStatus === 'Succeeded'
-                ? 'Success'
-                : 'Run'}
-            </Button>
+                {caseStatus === 'Created' ||
+                caseStatus === 'Waiting' ||
+                caseStatus === 'Running'
+                  ? 'Running ... '
+                  : caseStatus === 'Failed'
+                  ? 'Re-run'
+                  : 'Run'}
+              </Styled.Button>
+            )}
           </Tooltip>
           <Button
             variant="outlined"
@@ -206,6 +219,7 @@ export const CaseButtons = ({
         <ConfirmDialog
           isOpen={deleteConfirm}
           message="By pressing OK, the case and belonging results will be deleted."
+          danger={true}
           confirmAction={handleConfirmDelete}
           setIsOpen={setDeleteConfirm}
         ></ConfirmDialog>
@@ -215,6 +229,7 @@ export const CaseButtons = ({
           isOpen={saveConfirm}
           message="By pressing OK, the current case will be overwritten, deleting old
       results."
+          danger={false}
           confirmAction={handleConfirmSave}
           setIsOpen={setSaveConfirm}
         ></ConfirmDialog>

src/features/Compute/CaseGroup/CaseSettingSelects/CaseSettingSelect.tsx

@@ -1,5 +1,6 @@
 import { Autocomplete, AutocompleteChanges } from '@equinor/eds-core-react';
 import { ListComputeSettingsInputValueDto } from '../../../../api/generated';
+import * as Styled from './SettingSelect.styled';
 
 export const CaseSettingSelect = ({
   label,
@@ -25,17 +26,19 @@ export const CaseSettingSelect = ({
   };
 
   return (
-    <Autocomplete
-      label={label}
-      disabled={
-        (caseType === 'Net-To-Gross' || caseType === 'Indicator') &&
-        settingType !== 'ContiniousParameter'
-      }
-      options={options && options.length > 0 ? options : []}
-      optionLabel={(option) => option.name}
-      selectedOptions={selectedValue}
-      onOptionsChange={onSelectChange}
-      multiple={settingType !== 'Net-To-Gross'}
-    ></Autocomplete>
+    <Styled.MetadataWrapper>
+      <Autocomplete
+        label={label}
+        disabled={
+          (caseType === 'Net-To-Gross' || caseType === 'Indicator') &&
+          settingType !== 'ContiniousParameter'
+        }
+        options={options && options.length > 0 ? options : []}
+        optionLabel={(option) => option.name}
+        selectedOptions={selectedValue}
+        onOptionsChange={onSelectChange}
+        multiple={settingType !== 'Net-To-Gross'}
+      ></Autocomplete>
+    </Styled.MetadataWrapper>
   );
 };

src/features/Compute/CaseGroup/CaseSettingSelects/SettingSelect.styled.tsx

@@ -24,10 +24,23 @@ export const AutocompleteRow = styled.div`
 
   > div {
     flex-grow: 1;
+    > div {
+      > label {
+        white-space: nowrap;
+      }
+    }
   }
 `;
 
 export const ButtonWrapper = styled.div`
   display: flex;
   align-items: center;
 `;
+
+export const MetadataWrapper = styled.div`
+  > div {
+    > label {
+      white-space: nowrap;
+    }
+  }
+`;

src/features/ModelTable/ModelTable.styled.ts

@@ -4,6 +4,7 @@ import { spacings } from '../../tokens/spacings';
 export const Table = styled.div`
   overflow-x: auto;
   padding-bottom: ${spacings.MEDIUM};
+  max-width: 1750px;
 
   > div {
     > table {
@@ -35,6 +36,8 @@ export const Buttons = styled.div`
 export const List = styled.div`
   display: flex;
   flex-direction: row;
+  white-space: nowrap;
+
   > p {
     padding-right: ${spacings.X_SMALL};
   }

src/features/Results/CaseResult/CaseResultView/CaseResultView.styled.tsx

@@ -1,4 +1,3 @@
-import { Divider } from '@equinor/eds-core-react';
 import styled from 'styled-components';
 import { spacings } from '../../../../tokens/spacings';
 
@@ -8,25 +7,11 @@ export const CaseResultView = styled.div`
 
   row-gap: ${spacings.XXX_LARGE};
   padding: ${spacings.LARGE};
-
-  @media (min-width: 1505px) {
-    width: 80%;
-  }
 `;
 
 export const CaseResultList = styled.div`
   display: flex;
   flex-direction: column;
   row-gap: ${spacings.X_LARGE};
-
-  width: 100%;
-`;
-
-export const StyledDivider = styled(Divider)`
-  margin: ${spacings.MEDIUM} 0;
-  max-width: 1108px;
-`;
-
-export const Wrapper = styled.div`
-  width: 100%;
+  width: fit-content;
 `;

src/features/Results/CaseResult/CaseResultView/CaseResultView.tsx

@@ -42,25 +42,18 @@ export const CaseResultView = ({
           ></VariogramResultTable>
         )}
         {channelResultList &&
-          channelResultList.map((obj, index) => (
-            <Styled.Wrapper key={obj.computeCaseId}>
-              <ChannelResult
-                data={obj}
-                computeCase={
-                  computeCases && computeCases.length > 0
-                    ? computeCases.filter(
-                        (c) => c.computeCaseId === obj.computeCaseId,
-                      )
-                    : []
-                }
-              ></ChannelResult>
-              {index < channelResultList.length - 1 && (
-                <Styled.StyledDivider
-                  variant="small"
-                  color="medium"
-                ></Styled.StyledDivider>
-              )}
-            </Styled.Wrapper>
+          channelResultList.map((obj) => (
+            <ChannelResult
+              key={obj.computeCaseId}
+              data={obj}
+              computeCase={
+                computeCases && computeCases.length > 0
+                  ? computeCases.filter(
+                      (c) => c.computeCaseId === obj.computeCaseId,
+                    )
+                  : []
+              }
+            ></ChannelResult>
           ))}
       </Styled.CaseResultList>
     </Styled.CaseResultView>