feat: Add Object results.

src/components/AreaCoordinates/AreaCoordinates.tsx

@@ -251,9 +251,8 @@ export const AreaCoordinates = ({ modelId }: { modelId: string }) => {
     if (area && NotANumber(area.coordinates[1].y)) {
       errors.y1 = 'Coodridnates can´t be string, just numbers is alowed.';
     }
-    if (area && (area.coordinates[1].x === 0 || area.coordinates[1].y === 0)) {
+    if (area && area.coordinates[1].x === 0) {
       errors.x1 = 'Bottom right conrner can not be 0.';
-      errors.y1 = 'Bottom right conrner can not be 0.';
     }
 
     if (

src/components/CaseCardComponent/CaseCardComponent.styled.tsx

@@ -7,6 +7,10 @@ export const Wrapper = styled.div`
   border-width: ${spacings.SMALL};
   border-color: ${theme.light.primary.resting};
   border-radius: ${spacings.BORDER_ROUNDED};
+
+  > .result {
+    background-color: ${theme.light.ui.background.default};
+  }
 `;
 
 export const Title = styled.div`

src/components/CaseCardComponent/CaseCardComponent.tsx

@@ -4,17 +4,24 @@ import * as Styled from './CaseCardComponent.styled';
 export const CaseCardComponent = ({
   children,
   title,
+  resultCard,
+  subTitle,
 }: {
   children: React.ReactNode;
   title: string;
+  resultCard?: boolean;
+  subTitle?: string;
 }) => {
   return (
     <Styled.CaseBorder>
       <Styled.Wrapper>
         <Styled.Title>
           <Typography variant="h4">{title}</Typography>
+          <Typography variant="h6">{subTitle}</Typography>
         </Styled.Title>
-        <Styled.Content>{children}</Styled.Content>
+        <Styled.Content className={resultCard ? 'result' : ''}>
+          {children}
+        </Styled.Content>
       </Styled.Wrapper>
     </Styled.CaseBorder>
   );

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

@@ -1,32 +1,39 @@
 import * as Styled from './CaseResultView.styled';
 
 import { Typography } from '@equinor/eds-core-react';
-import {
-  ObjectResultType,
-  VariogramResultListType,
-} from '../../../../pages/ModelPages/Results/Results';
-import { ObjectCaseResult } from './ObjectCaseResult/ObjectCaseResult';
+import { ComputeCaseDto, GetResultDto } from '../../../../api/generated';
+import { ChannelResultTable } from './ObjectCaseResult/ChannelResultTable';
 import { VariogramCaseResult } from './VariogramCaseResult/VariogramCaseResult';
 import ResultIMG from './vargrest_output-0-_variogram_slices_.png';
 
 export const CaseResultView = ({
-  caseList,
   objectList,
+  computeCases,
 }: {
-  caseList: VariogramResultListType[];
-  objectList: ObjectResultType[];
+  objectList?: GetResultDto[];
+  computeCases?: ComputeCaseDto[];
 }) => {
   return (
     <Styled.CaseResultView>
       <Typography variant="h2">Compute results</Typography>
       <Styled.CaseResultList>
         <VariogramCaseResult
-          caseList={caseList}
+          caseList={[]}
           img={ResultIMG}
         ></VariogramCaseResult>
-        {objectList.map((obj) => (
-          <ObjectCaseResult key={obj.identifier} data={obj}></ObjectCaseResult>
-        ))}
+        {objectList &&
+          objectList.map((obj) => (
+            <ChannelResultTable
+              key={obj.computeCaseId}
+              data={obj}
+              computeCase={
+                computeCases &&
+                computeCases.filter(
+                  (c) => c.computeCaseId === obj.computeCaseId,
+                )
+              }
+            ></ChannelResultTable>
+          ))}
       </Styled.CaseResultList>
     </Styled.CaseResultView>
   );

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

@@ -1,31 +1,16 @@
 /* eslint-disable prettier/prettier */
 import { Table } from '@equinor/eds-core-react';
 import styled from 'styled-components';
-import { spacings } from '../../../../../tokens/spacings';
 import { theme } from '../../../../../tokens/theme';
 
-export const ResultCard = styled.div`
-  display: flex;
-  flex-direction: row;
-  column-gap: ${spacings.LARGE};
-
-  padding: ${spacings.X_LARGE};
-`;
-
-export const CaseTable = styled.div`
-  display: flex;
-  flex-direction: column;
-  row-gap: ${spacings.LARGE};
-
-  width: 100%;
-`;
-
 export const ColumnCell = styled(Table.Cell)`
   background: ${theme.light.ui.background.light};
+  border: solid 0.5px ${theme.light.ui.background.medium};
 `;
 
 export const DataCell = styled(Table.Cell)`
   text-align: right;
+  border: solid 0.5px ${theme.light.ui.background.medium};
 
   > div {
     display: flex;

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

@@ -0,0 +1,65 @@
+/* eslint-disable max-lines-per-function */
+import { Table } from '@equinor/eds-core-react';
+import { CaseCardComponent } from '../../../../../components/CaseCardComponent/CaseCardComponent';
+
+import { ComputeCaseDto, GetResultDto } from '../../../../../api/generated';
+import * as Styled from './ChannelResultTable.styled';
+
+export const ChannelResultTable = ({
+  data,
+  computeCase,
+}: {
+  data: GetResultDto;
+  computeCase?: ComputeCaseDto[];
+}) => {
+  const filterValues = (name: string) => {
+    return data.resultValues.filter((d) => d.name === name);
+  };
+
+  let modelArea = '';
+  if (computeCase && computeCase[0].modelArea !== null)
+    modelArea = computeCase && computeCase[0].modelArea.name;
+
+  if (modelArea === '') modelArea = 'Whole model';
+
+  const channelHeightCount = filterValues('channel-height_count');
+  const channelHeightMean = filterValues('channel-height_mean');
+  const channelHeightSD = filterValues('channel-height_sd');
+
+  const channelWidthCount = filterValues('channel-width_count');
+  const channelWidthMean = filterValues('channel-width_mean');
+  const channelWidthSD = filterValues('channel-width_sd');
+
+  return (
+    <CaseCardComponent
+      title={data.resultType + ' Case'}
+      subTitle={modelArea}
+      resultCard={true}
+    >
+      <Table>
+        <Table.Head>
+          <Table.Row>
+            <Styled.DataCell></Styled.DataCell>
+            <Styled.DataCell>Mean</Styled.DataCell>
+            <Styled.DataCell>Standard deviation (SD)</Styled.DataCell>
+            <Styled.DataCell>Count</Styled.DataCell>
+          </Table.Row>
+        </Table.Head>
+        <Table.Body key={data.computeCaseId}>
+          <Table.Row>
+            <Styled.ColumnCell>Channel width</Styled.ColumnCell>
+            <Styled.DataCell>{channelWidthMean[0].value}</Styled.DataCell>
+            <Styled.DataCell>{channelWidthSD[0].value}</Styled.DataCell>
+            <Styled.DataCell>{channelWidthCount[0].value}</Styled.DataCell>
+          </Table.Row>
+          <Table.Row>
+            <Styled.ColumnCell>Channel height</Styled.ColumnCell>
+            <Styled.DataCell>{channelHeightMean[0].value}</Styled.DataCell>
+            <Styled.DataCell>{channelHeightSD[0].value}</Styled.DataCell>
+            <Styled.DataCell>{channelHeightCount[0].value}</Styled.DataCell>
+          </Table.Row>
+        </Table.Body>
+      </Table>
+    </CaseCardComponent>
+  );
+};

src/pages/ModelPages/Results/Results.tsx

@@ -1,6 +1,14 @@
 /* eslint-disable max-lines-per-function */
+import { useMsal } from '@azure/msal-react';
+import { useQuery } from '@tanstack/react-query';
+import { useParams } from 'react-router-dom';
+import {
+  AnalogueModelComputeCasesService,
+  AnalogueModelsService,
+} from '../../../api/generated';
 import { CaseResultView } from '../../../features/Results/CaseResult/CaseResultView/CaseResultView';
 import { NoResults } from '../../../features/Results/NoResults/NoResults';
+import { useAccessToken } from '../../../hooks/useAccessToken';
 
 export interface VariogramResultListType {
   caseId: number;
@@ -19,99 +27,36 @@ export interface VariogramResultType {
   approved: string;
 }
 
-export interface ObjectResultType {
-  identifier: number;
-  family: string;
-  CWMean: GLfloat;
-  CHMean: GLfloat;
-  CWSD: GLfloat;
-  CHSD: GLfloat;
-  CWCount: GLfloat;
-  CHCount: GLfloat;
-  approved: string;
-}
-
-export type ResultType = {
-  caseId: string;
-  case: string;
-  finished: boolean;
-};
 export const Results = () => {
-  const loaded = true;
-  const caseList: VariogramResultListType[] = [
-    {
-      caseId: 1,
-      title: 'Variogram Case 1',
-      resultList: [
-        {
-          identifier: 0,
-          family: 'exponential',
-          computeMethod: 'Net-to-gross',
-          modelArea: 'Left',
-          attribute: 'Porosity',
-          quality: 0.6427819811789964,
-          sigma: 0.06967589201242001,
-          approved: 'rejected',
-        },
-        {
-          identifier: 1,
-          family: 'gaussian',
-          computeMethod: 'Net-to-gross',
-          modelArea: 'Proximal',
-          attribute: 'Porosity',
-          quality: 0.5432924009373808,
-          sigma: 0.0670758033212357,
-          approved: 'pending',
-        },
-      ],
-    },
-    {
-      caseId: 3,
-      title: 'Variogram Case 3',
-      resultList: [
-        {
-          identifier: 2,
-          family: 'general_exponential',
-          computeMethod: 'Indicator / Architectural Element (AE)',
-          modelArea: 'Distal',
-          attribute: 'Porosity',
-          quality: 0.5580294305723851,
-          sigma: 0.0678988627745677,
-          approved: 'approved',
-        },
-      ],
-    },
-  ];
+  const { modelId } = useParams<{ modelId: string }>();
+  const { instance, accounts } = useMsal();
+  const token = useAccessToken(instance, accounts[0]);
+
+  const { data } = useQuery({
+    queryKey: ['model-results', modelId],
+    queryFn: () =>
+      AnalogueModelsService.getApiAnalogueModelsResults(modelId as string),
+    enabled: !!token,
+  });
+
+  const cases = useQuery({
+    queryKey: ['analogue-models', modelId],
+    queryFn: () =>
+      AnalogueModelComputeCasesService.getApiAnalogueModelsComputeCases(
+        modelId as string,
+      ),
+    enabled: !!token,
+  });
 
-  const objectList: ObjectResultType[] = [
-    {
-      identifier: 3,
-      family: 'channel',
-      CWMean: 190.15,
-      CHMean: 1.94,
-      CWSD: 68.69,
-      CHSD: 0.68,
-      CWCount: 863,
-      CHCount: 863,
-      approved: 'approved',
-    },
-    {
-      identifier: 4,
-      family: 'channel',
-      CWMean: 134.47,
-      CHMean: 1.76,
-      CWSD: 59.93,
-      CHSD: 0.73,
-      CWCount: 754,
-      CHCount: 754,
-      approved: 'approved',
-    },
-  ];
+  const objectResults = data?.filter((res) => res.resultType === 'Object');
 
   return (
     <>
-      {loaded && (caseList.length !== 0 || objectList.length !== 0) ? (
-        <CaseResultView caseList={caseList} objectList={objectList} />
+      {objectResults !== undefined && objectResults?.length > 0 ? (
+        <CaseResultView
+          objectList={objectResults}
+          computeCases={cases.data?.data}
+        />
       ) : (
         <NoResults />
       )}