feat/Add area coordinate component in object result view.

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

@@ -9,7 +9,7 @@ export const CaseResultView = styled.div`
   row-gap: ${spacings.XXX_LARGE};
   padding: ${spacings.LARGE};
 
-  @media (min-width: 1400px) {
+  @media (min-width: 1505px) {
     width: 80%;
   }
 `;

src/features/Results/CaseResult/CaseResultView/ObjectCaseResult/ChannelResult.styled.ts

@@ -9,13 +9,6 @@ export const Wrapper = styled.div`
 export const InnerWrapper = styled.div`
   display: flex;
   flex-direction: row;
-  column-gap: ${spacings.SMALL};
+  column-gap: ${spacings.LARGE};
   width: 100%;
 `;
-
-export const Info = styled.div`
-  display: flex;
-  flex-direction: column;
-
-  width: 150px;
-`;

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

@@ -1,10 +1,10 @@
-import { Typography } from '@equinor/eds-core-react';
 import {
   ComputeCaseDto,
   GetChannelResultsDto,
 } from '../../../../../api/generated';
 import * as Styled from './ChannelResult.styled';
-import { ChannelResultTable } from './ChannelResultTable';
+import { ChannelResultTable } from './ChannelResultTable/ChannelResultTable';
+import { ResultArea } from './ResultArea/ResultArea';
 
 export const ChannelResult = ({
   data,
@@ -29,10 +29,11 @@ export const ChannelResult = ({
   return (
     <Styled.Wrapper>
       <Styled.InnerWrapper>
-        <Styled.Info>
-          <Typography variant="h5"> {computeMethod}</Typography>
-          <Typography variant="body_short"> {modelArea}</Typography>
-        </Styled.Info>
+        <ResultArea
+          computeMethod={computeMethod}
+          modelArea={modelArea}
+          data={data}
+        ></ResultArea>
         <ChannelResultTable data={data}></ChannelResultTable>
       </Styled.InnerWrapper>
     </Styled.Wrapper>

src/features/Results/CaseResult/CaseResultView/ObjectCaseResult/ChannelResultTable.styled.tsx → src/features/Results/CaseResult/CaseResultView/ObjectCaseResult/ChannelResultTable/ChannelResultTable.styled.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable prettier/prettier */
 import { Table } from '@equinor/eds-core-react';
 import styled from 'styled-components';
-import { theme } from '../../../../../tokens/theme';
+import { theme } from '../../../../../../tokens/theme';
 
 const StyledTable = styled(Table)`
   width: 100%;
@@ -15,7 +15,17 @@ export const ColumnCell = styled(Table.Cell)`
 export const DataCell = styled(Table.Cell)`
   text-align: right;
   border: solid 0.5px ${theme.light.ui.background.medium};
+  width: 25%;
+  > div {
+    display: flex;
+    justify-content: right;
+  }
+`;
 
+export const InfoCell = styled(Table.Cell)`
+  text-align: right;
+  border: solid 0.5px ${theme.light.ui.background.medium};
+  width: 20%;
   > div {
     display: flex;
     justify-content: right;

src/features/Results/CaseResult/CaseResultView/ObjectCaseResult/ChannelResultTable.tsx → src/features/Results/CaseResult/CaseResultView/ObjectCaseResult/ChannelResultTable/ChannelResultTable.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable max-lines-per-function */
 import { Table } from '@equinor/eds-core-react';
 
-import { GetChannelResultsDto } from '../../../../../api/generated';
+import { GetChannelResultsDto } from '../../../../../../api/generated';
 import * as Styled from './ChannelResultTable.styled';
 
 const NumberOfDecimals = 2;
@@ -21,7 +21,7 @@ export const ChannelResultTable = ({
     <Styled.Table>
       <Table.Head>
         <Table.Row>
-          <Styled.DataCell></Styled.DataCell>
+          <Styled.InfoCell></Styled.InfoCell>
           <Styled.DataCell>Mean</Styled.DataCell>
           <Styled.DataCell>Standard deviation (SD)</Styled.DataCell>
           <Styled.DataCell>Count</Styled.DataCell>

src/features/Results/CaseResult/CaseResultView/ObjectCaseResult/ResultArea/ResultArea.styled.ts

@@ -0,0 +1,34 @@
+import styled from 'styled-components';
+import { spacings } from '../../../../../../tokens/spacings';
+
+export const Wrapper = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+
+  width: 500px;
+`;
+
+export const Info = styled.div`
+  display: flex;
+  flex-direction: column;
+  row-gap: ${spacings.MEDIUM};
+
+  width: 150px;
+`;
+
+export const Coordinates = styled.div`
+  display: flex;
+  flex-direction: column;
+  row-gap: ${spacings.MEDIUM};
+`;
+
+export const CoordinateRow = styled.div`
+  display: flex;
+  flex-direction: row;
+  column-gap: ${spacings.MEDIUM};
+`;
+
+export const RowElement = styled.div`
+  white-space: nowrap;
+`;

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

@@ -0,0 +1,80 @@
+/* eslint-disable max-lines-per-function */
+import { Label, Typography } from '@equinor/eds-core-react';
+import { GetChannelResultsDto } from '../../../../../../api/generated';
+import * as Styled from './ResultArea.styled';
+
+export const ResultArea = ({
+  computeMethod,
+  modelArea,
+  data,
+}: {
+  computeMethod?: string;
+  modelArea: string;
+  data: GetChannelResultsDto;
+}) => {
+  const xCoordinate = data.box?.filter((b) => b.m === 0)[0];
+  const yCoordinate = data.box?.filter((b) => b.m === 1)[0];
+
+  const xLength = () => {
+    if (xCoordinate && yCoordinate) return yCoordinate?.x - xCoordinate?.x;
+  };
+
+  const yLength = () => {
+    if (xCoordinate && yCoordinate) {
+      const value = yCoordinate?.y - xCoordinate?.y;
+      return value;
+    }
+  };
+
+  const area = () => {
+    const x = xLength();
+    const y = yLength();
+
+    if (x && y) return x * y + ' m^2';
+  };
+
+  return (
+    <Styled.Wrapper>
+      <Styled.Info>
+        <div>
+          <Typography variant="h5"> {computeMethod}</Typography>
+          <Typography variant="body_short"> {modelArea}</Typography>
+        </div>
+        <div>
+          <Label label="Area size"></Label>
+          <Typography variant="body_short">{area() ? area() : '-'}</Typography>
+        </div>
+      </Styled.Info>
+      <Styled.Coordinates>
+        <Styled.CoordinateRow>
+          <Styled.RowElement>
+            <Label label="X start"></Label>
+            <Typography variant="body_short">
+              {modelArea === 'Whole model' ? '-' : xCoordinate?.x + ' m'}
+            </Typography>
+          </Styled.RowElement>
+          <Styled.RowElement>
+            <Label label="X length"></Label>
+            <Typography variant="body_short">
+              {modelArea === 'Whole model' ? '-' : xLength() + ' m'}
+            </Typography>
+          </Styled.RowElement>
+        </Styled.CoordinateRow>
+        <Styled.CoordinateRow>
+          <Styled.RowElement>
+            <Label label="Y start"></Label>
+            <Typography variant="body_short">
+              {modelArea === 'Whole model' ? '-' : yCoordinate?.x + ' m'}
+            </Typography>
+          </Styled.RowElement>
+          <Styled.RowElement>
+            <Label label="Y length"></Label>
+            <Typography variant="body_short">
+              {modelArea === 'Whole model' ? '-' : yLength() + ' m'}
+            </Typography>
+          </Styled.RowElement>
+        </Styled.CoordinateRow>
+      </Styled.Coordinates>
+    </Styled.Wrapper>
+  );
+};