From c1119cd4c1ad5097833320d5ebcd3cec7993ba13 Mon Sep 17 00:00:00 2001
From: mheggelund <maohe@equinor.com>
Date: Thu, 19 Oct 2023 12:18:55 +0200
Subject: [PATCH 1/4] chore: Add nameInput to add model

---
 .../AddModel/AddModelDialog/AddModelDialog.tsx  | 14 +++++++++-----
 .../AddModel/ModelMetadata/ModelMetadata.tsx    | 13 ++++++++++++-
 src/pages/Browse/Browse.tsx                     | 17 +++++++++--------
 3 files changed, 30 insertions(+), 14 deletions(-)

diff --git a/src/features/AddModel/AddModelDialog/AddModelDialog.tsx b/src/features/AddModel/AddModelDialog/AddModelDialog.tsx
index fefb7e75..96e1aa31 100644
--- a/src/features/AddModel/AddModelDialog/AddModelDialog.tsx
+++ b/src/features/AddModel/AddModelDialog/AddModelDialog.tsx
@@ -8,16 +8,17 @@ import * as Styled from './AddModelDialog.styled';
 
 interface AddModelDialogProps {
   isOpen: boolean;
-  confirm: (file: File) => Promise<void>;
+  confirm: (file: File, metadata: Partial<MetadataProps>) => Promise<void>;
   cancel: () => void;
 }
 
 export default interface MetadataProps {
-  description?: string;
+  name: string;
+  description: string;
   field: string[];
   zone?: string[];
   formation: string[];
-  analogue?: string[] | AnalogueList[];
+  analogue?: AnalogueList[];
 }
 
 export type ErrorType = {
@@ -35,7 +36,10 @@ export const AddModelDialog = ({
     NC: undefined,
     INI: undefined,
   });
-  const [metadata, setMetadata] = useState<Partial<MetadataProps>>();
+  const [metadata, setMetadata] = useState<Partial<MetadataProps>>({
+    name: '',
+    description: '',
+  });
   const [errors, setErrors] = useState({});
   const [submitting, setSubmitting] = useState(false);
 
@@ -70,7 +74,7 @@ export const AddModelDialog = ({
   };
 
   const finishSubmit = () => {
-    if (files.NC) confirm(files.NC);
+    if (files.NC) confirm(files.NC, metadata);
   };
 
   useEffect(() => {
diff --git a/src/features/AddModel/ModelMetadata/ModelMetadata.tsx b/src/features/AddModel/ModelMetadata/ModelMetadata.tsx
index 94462f0a..07e30118 100644
--- a/src/features/AddModel/ModelMetadata/ModelMetadata.tsx
+++ b/src/features/AddModel/ModelMetadata/ModelMetadata.tsx
@@ -21,7 +21,6 @@ export const ModelMetadata = ({
   setMetadata: (metadata: Partial<MetadataProps>) => void;
 }) => {
   const fields = {
-    description: 'Description string',
     field: ['Tor', 'Pål'],
     zone: ['Zone 1', 'Zone 2', 'Zone 3'],
     formation: ['Rocky', 'Hilly', 'Flat'],
@@ -43,6 +42,14 @@ export const ModelMetadata = ({
     <Styled.ModelMetadata className="model-metadata">
       <Typography variant="h4">Description and metadata</Typography>
       <Styled.Form>
+        <Styled.TextInput
+          id="model-name"
+          label="Model Name (optional)"
+          value={metadata?.name}
+          onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) =>
+            setMetadata({ ...metadata, name: e.currentTarget.value })
+          }
+        />
         <Styled.TextInput
           id="model-description"
           label="Model description (optional)"
@@ -61,6 +68,7 @@ export const ModelMetadata = ({
                 className={`${errors.field && 'model-required'}`}
                 label="Field"
                 options={fields.field}
+                selectedOptions={metadata?.field}
                 onOptionsChange={(e: AutocompleteChanges<string>) =>
                   handleInput(e, 'field')
                 }
@@ -72,6 +80,7 @@ export const ModelMetadata = ({
                 className={`${errors.formation && 'model-required'}`}
                 label="Formation"
                 options={fields.formation}
+                selectedOptions={metadata?.formation}
                 multiple
                 onOptionsChange={(e: AutocompleteChanges<string>) =>
                   handleInput(e, 'formation')
@@ -87,6 +96,7 @@ export const ModelMetadata = ({
               label="Analogue (optional)"
               options={data.data}
               optionLabel={(option) => option.name}
+              selectedOptions={metadata?.analogue}
               multiple
               onOptionsChange={(e: AutocompleteChanges<AnalogueList>) =>
                 setMetadata({ ...metadata, analogue: e.selectedItems })
@@ -95,6 +105,7 @@ export const ModelMetadata = ({
             <Autocomplete
               label="Zone (optional)"
               options={fields.zone}
+              selectedOptions={metadata?.zone}
               onOptionsChange={(e: AutocompleteChanges<string>) =>
                 setMetadata({ ...metadata, zone: e.selectedItems })
               }
diff --git a/src/pages/Browse/Browse.tsx b/src/pages/Browse/Browse.tsx
index 9001e09f..d95724d6 100644
--- a/src/pages/Browse/Browse.tsx
+++ b/src/pages/Browse/Browse.tsx
@@ -9,7 +9,9 @@ import {
   JobsService,
 } from '../../api/generated';
 import { Table } from '../../components/Table';
-import { AddModelDialog } from '../../features/AddModel/AddModelDialog/AddModelDialog';
+import MetadataProps, {
+  AddModelDialog,
+} from '../../features/AddModel/AddModelDialog/AddModelDialog';
 import * as Styled from './Browse.styled';
 
 enum UploadProcess {
@@ -23,12 +25,6 @@ type MutationContract = {
   file: Blob;
 };
 
-const ModelBody: CreateAnalogueModelCommand = {
-  name: 'Model test',
-  description: 'New test of the model',
-  sourceType: 'ResQML',
-};
-
 export const Browse = () => {
   const createModel = useMutation({
     mutationFn: AnalogueModelsService.postApiAnalogueModels,
@@ -60,8 +56,13 @@ export const Browse = () => {
     setAddModelDialog(!isAddModelDialog);
   }
 
-  async function uploadModel(file: File) {
+  async function uploadModel(file: File, metadata: Partial<MetadataProps>) {
     setUploadStatus(UploadProcess.STARTED);
+    const ModelBody: CreateAnalogueModelCommand = {
+      name: metadata.name,
+      description: metadata.description,
+      sourceType: 'ResQML',
+    };
 
     const modelUpload = await createModel.mutateAsync(ModelBody);
 

From 4e9a99e34c653a2ca3c68d633b0ddf486507e706 Mon Sep 17 00:00:00 2001
From: mheggelund <maohe@equinor.com>
Date: Thu, 19 Oct 2023 14:07:46 +0200
Subject: [PATCH 2/4] chore: Add selected options AddModel and AddCase
 Autocompletes

---
 .../ComputeVariogram/CaseCard/CaseCard.tsx        |  2 +-
 .../GrainSizeSelect/GrainSizeSelect.tsx           | 15 +++++++++------
 .../ModelSelect/ModelSelect.tsx                   |  1 +
 .../ParameterSelect/ParameterSelect.tsx           |  1 +
 4 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/src/features/Compute/ComputeVariogram/CaseCard/CaseCard.tsx b/src/features/Compute/ComputeVariogram/CaseCard/CaseCard.tsx
index e6d6d714..3bd61c5b 100644
--- a/src/features/Compute/ComputeVariogram/CaseCard/CaseCard.tsx
+++ b/src/features/Compute/ComputeVariogram/CaseCard/CaseCard.tsx
@@ -29,7 +29,7 @@ export const CaseCard = ({
 }) => {
   const [selectedModelArea, setModelArea] = useState<optionTypes>();
   const [selectedComputeMethod, setComputeMethod] = useState<optionTypes>();
-  const [selectedGrainSize, setGrainSize] = useState<optionTypes>();
+  const [selectedGrainSize, setGrainSize] = useState<optionTypes[]>();
   const [selectedVariogramModels, setVariogramModels] =
     useState<optionTypes[]>();
   const [selectedParameters, setParameters] = useState<ParameterList[]>();
diff --git a/src/features/Compute/ComputeVariogram/CaseCard/CaseCardParameters/GrainSizeSelect/GrainSizeSelect.tsx b/src/features/Compute/ComputeVariogram/CaseCard/CaseCardParameters/GrainSizeSelect/GrainSizeSelect.tsx
index b1d70a9c..a907abe0 100644
--- a/src/features/Compute/ComputeVariogram/CaseCard/CaseCardParameters/GrainSizeSelect/GrainSizeSelect.tsx
+++ b/src/features/Compute/ComputeVariogram/CaseCard/CaseCardParameters/GrainSizeSelect/GrainSizeSelect.tsx
@@ -16,11 +16,11 @@ export const GrainSizeSelect = ({
   label: string;
   type: string;
   options: optionTypes[];
-  selectedGrainSize?: optionTypes;
-  setGrainSize: React.Dispatch<React.SetStateAction<optionTypes | undefined>>;
+  selectedGrainSize?: optionTypes[];
+  setGrainSize: React.Dispatch<React.SetStateAction<optionTypes[] | undefined>>;
 }) => {
   const onGrainSizeChange = (changes: AutocompleteChanges<optionTypes>) => {
-    setGrainSize && setGrainSize(changes.selectedItems[0]);
+    setGrainSize && setGrainSize(changes.selectedItems);
   };
 
   return (
@@ -30,11 +30,14 @@ export const GrainSizeSelect = ({
         options={options}
         optionLabel={(option) => option.name}
         onOptionsChange={onGrainSizeChange}
+        selectedOptions={selectedGrainSize}
       ></Autocomplete>
 
-      {selectedGrainSize && (
-        <Chip key={selectedGrainSize.id}>{selectedGrainSize.size}</Chip>
-      )}
+      {/* {selectedGrainSize && (
+        <Chip key={selectedGrainSize[0].id}>{selectedGrainSize[0].size}</Chip>
+      )} */}
+      {selectedGrainSize &&
+        selectedGrainSize.map((s) => <Chip key={s.id}>{s.name}</Chip>)}
     </Styled.Parameters>
   );
 };
diff --git a/src/features/Compute/ComputeVariogram/CaseCard/CaseCardParameters/ModelSelect/ModelSelect.tsx b/src/features/Compute/ComputeVariogram/CaseCard/CaseCardParameters/ModelSelect/ModelSelect.tsx
index 33804e23..d9ad6dba 100644
--- a/src/features/Compute/ComputeVariogram/CaseCard/CaseCardParameters/ModelSelect/ModelSelect.tsx
+++ b/src/features/Compute/ComputeVariogram/CaseCard/CaseCardParameters/ModelSelect/ModelSelect.tsx
@@ -34,6 +34,7 @@ export const ModelSelect = ({
         options={options}
         optionLabel={(opt) => opt.name}
         onOptionsChange={onModelChange}
+        selectedOptions={selectedVariogramModels}
         multiple
       ></Autocomplete>
 
diff --git a/src/features/Compute/ComputeVariogram/CaseCard/CaseCardParameters/ParameterSelect/ParameterSelect.tsx b/src/features/Compute/ComputeVariogram/CaseCard/CaseCardParameters/ParameterSelect/ParameterSelect.tsx
index 14dda1f7..b9bf65b2 100644
--- a/src/features/Compute/ComputeVariogram/CaseCard/CaseCardParameters/ParameterSelect/ParameterSelect.tsx
+++ b/src/features/Compute/ComputeVariogram/CaseCard/CaseCardParameters/ParameterSelect/ParameterSelect.tsx
@@ -32,6 +32,7 @@ export const ParameterSelect = ({
         options={options}
         optionLabel={(option) => option.name}
         onOptionsChange={onParameterChange}
+        selectedOptions={selectedParameters}
         multiple
       ></Autocomplete>
       {selectedParameters &&

From 168b1e28fd5d736c76f45e49a1935b397f917c72 Mon Sep 17 00:00:00 2001
From: mheggelund <maohe@equinor.com>
Date: Thu, 19 Oct 2023 14:08:13 +0200
Subject: [PATCH 3/4] chore: Add navigate button to each row in model. Removed
 hardcoded button in browse file.

---
 src/components/Table.tsx    | 25 +++++++++++++++++++++++--
 src/pages/Browse/Browse.tsx |  3 ---
 2 files changed, 23 insertions(+), 5 deletions(-)

diff --git a/src/components/Table.tsx b/src/components/Table.tsx
index 8735d8aa..96508401 100644
--- a/src/components/Table.tsx
+++ b/src/components/Table.tsx
@@ -1,15 +1,21 @@
-import { Chip } from '@equinor/eds-core-react';
+/* eslint-disable max-lines-per-function */
+import { Button, Chip } from '@equinor/eds-core-react';
 import { EdsDataGrid } from '@equinor/eds-data-grid-react';
-import * as Styled from './Table.styled';
 import { useQuery } from '@tanstack/react-query';
+import { useNavigate } from 'react-router-dom';
 import { AnalogueModelsService } from '../api/generated';
+import * as Styled from './Table.styled';
 
 export const Table = () => {
   const { isLoading, data } = useQuery({
     queryKey: ['analogue-models'],
     queryFn: () => AnalogueModelsService.getApiAnalogueModels(),
   });
+
+  const navigate = useNavigate();
+
   if (isLoading || !data?.success) return <p>Loading...</p>;
+
   return (
     <Styled.StyledDiv>
       <EdsDataGrid
@@ -60,6 +66,21 @@ export const Table = () => {
             header: 'Status',
             id: 'isProcessed',
           },
+
+          {
+            accessorKey: 'navigate',
+            cell: ({ row }) => (
+              <Button
+                onClick={() => {
+                  navigate(`/model/${row.original.analogueModelId}/details`);
+                }}
+              >
+                Go to model
+              </Button>
+            ),
+            header: '',
+            id: 'navigate',
+          },
         ]}
       />
     </Styled.StyledDiv>
diff --git a/src/pages/Browse/Browse.tsx b/src/pages/Browse/Browse.tsx
index d95724d6..1fb476aa 100644
--- a/src/pages/Browse/Browse.tsx
+++ b/src/pages/Browse/Browse.tsx
@@ -98,9 +98,6 @@ export const Browse = () => {
         <Typography variant="h1">Browse all models</Typography>
         <div className="btn-div">
           <Button onClick={toggleDialog}>Add new model</Button>
-          <Button href="/model/4e999a96-34a3-4121-998d-08dbb2a7609c/details">
-            Model view - Hardkodet
-          </Button>
         </div>
         <Table />
       </Styled.BrowseWrapper>

From 4e3e5d306f0297ce99ece9fbe6bae77439b53809 Mon Sep 17 00:00:00 2001
From: mheggelund <maohe@equinor.com>
Date: Fri, 20 Oct 2023 13:21:37 +0200
Subject: [PATCH 4/4] chore: Add compute object page

---
 .../ComputeVariogram/CaseCard/CaseCard.tsx    | 96 ++++++++++++-------
 ...ardInputs.tsx => ObjectCaseCardInputs.tsx} |  2 +-
 .../VariogramCaseCardInputs.tsx               | 38 ++++++++
 .../ComputeCaseInfoActions.tsx                | 13 +--
 .../Compute/ComputeObject/ComputeObject.tsx   | 53 +++++++++-
 .../ComputeVariogram/ComputeVariogram.tsx     | 25 ++++-
 6 files changed, 179 insertions(+), 48 deletions(-)
 rename src/features/Compute/ComputeVariogram/CaseCard/CaseCardInputs/{CaseCardInputs.tsx => ObjectCaseCardInputs.tsx} (96%)
 create mode 100644 src/features/Compute/ComputeVariogram/CaseCard/CaseCardInputs/VariogramCaseCardInputs.tsx

diff --git a/src/features/Compute/ComputeVariogram/CaseCard/CaseCard.tsx b/src/features/Compute/ComputeVariogram/CaseCard/CaseCard.tsx
index 3bd61c5b..925dd3db 100644
--- a/src/features/Compute/ComputeVariogram/CaseCard/CaseCard.tsx
+++ b/src/features/Compute/ComputeVariogram/CaseCard/CaseCard.tsx
@@ -6,7 +6,8 @@ import { ParameterList } from '../../../../api/generated/models/ParameterList';
 import { ParametersService } from '../../../../api/generated/services/ParametersService';
 import * as Styled from './CaseCard.styled';
 import { CaseCardButtons } from './CaseCardButtons/CaseCardButtons';
-import { CaseCardInputs } from './CaseCardInputs/CaseCardInputs';
+import { ObjectCaseCardInputs } from './CaseCardInputs/ObjectCaseCardInputs';
+import { VariogramCaseCardInputs } from './CaseCardInputs/VariogramCaseCardInputs';
 import { ModelSelect } from './CaseCardParameters/ModelSelect/ModelSelect';
 
 import { GrainSizeSelect } from './CaseCardParameters/GrainSizeSelect/GrainSizeSelect';
@@ -22,10 +23,12 @@ export const CaseCard = ({
   name,
   id,
   removeCase,
+  caseType,
 }: {
   name: string;
   id: string;
   removeCase: (id: string) => void;
+  caseType: string;
 }) => {
   const [selectedModelArea, setModelArea] = useState<optionTypes>();
   const [selectedComputeMethod, setComputeMethod] = useState<optionTypes>();
@@ -64,10 +67,12 @@ export const CaseCard = ({
     { id: 11, name: 'Left' },
     { id: 12, name: 'Distal' },
   ];
-  const computeMethods: optionTypes[] = [
+  const variogramComputeMethods: optionTypes[] = [
     { id: 13, name: 'Net-to-gross' },
     { id: 14, name: 'Continuous parameter' },
   ];
+  const objectComputeMethods: optionTypes[] = [{ id: 15, name: 'Channel' }];
+
   const runCase = () => {
     // eslint-disable-next-line no-console
     console.log(selectedModelArea);
@@ -86,45 +91,66 @@ export const CaseCard = ({
       <Styled.Case>
         <Typography variant="h4">{name}</Typography>
         <Styled.CaseCard>
-          <CaseCardInputs
-            modelAreas={modelAreas}
-            computeMethods={computeMethods}
-            setModelArea={setModelArea}
-            setComputeMethod={setComputeMethod}
-          />
+          {caseType === 'variogram' ? (
+            <VariogramCaseCardInputs
+              modelAreas={modelAreas}
+              computeMethods={variogramComputeMethods}
+              setModelArea={setModelArea}
+              setComputeMethod={setComputeMethod}
+            />
+          ) : (
+            <ObjectCaseCardInputs
+              modelAreas={modelAreas}
+              computeMethods={objectComputeMethods}
+              setModelArea={setModelArea}
+              setComputeMethod={setComputeMethod}
+            />
+          )}
           <CaseCardButtons id={id} runCase={runCase} removeCase={removeCase} />
         </Styled.CaseCard>
       </Styled.Case>
       <div>
-        {selectedModelArea && selectedComputeMethod ? (
+        {caseType === 'variogram' &&
+          selectedComputeMethod &&
+          selectedModelArea && (
+            <Styled.Parameters>
+              {caseType === 'variogram' &&
+                selectedComputeMethod.name === 'Net-to-gross' && (
+                  <GrainSizeSelect
+                    label={'From grain size'}
+                    type={'grainSize'}
+                    options={grainOptions}
+                    selectedGrainSize={selectedGrainSize}
+                    setGrainSize={setGrainSize}
+                  />
+                )}
+              {selectedComputeMethod.name === 'Continuous parameter' && (
+                <ParameterSelect
+                  label={'Parameter'}
+                  type={'parameters'}
+                  options={data.data}
+                  selectedParameters={selectedParameters}
+                  setParameters={setParameters}
+                />
+              )}
+              {caseType === 'variogram' && (
+                <ModelSelect
+                  label={'Variogram model'}
+                  type={'variogramModels'}
+                  options={modelOptions}
+                  selectedVariogramModels={selectedVariogramModels}
+                  setVariogramModels={setVariogramModels}
+                />
+              )}
+            </Styled.Parameters>
+          )}
+        {caseType === 'object' && (
           <Styled.Parameters>
-            {selectedComputeMethod.name === 'Net-to-gross' && (
-              <GrainSizeSelect
-                label={'From grain size'}
-                type={'grainSize'}
-                options={grainOptions}
-                selectedGrainSize={selectedGrainSize}
-                setGrainSize={setGrainSize}
-              />
-            )}
-            {selectedComputeMethod.name === 'Continuous parameter' && (
-              <ParameterSelect
-                label={'Parameter'}
-                type={'parameters'}
-                options={data.data}
-                selectedParameters={selectedParameters}
-                setParameters={setParameters}
-              />
-            )}
-            <ModelSelect
-              label={'Variogram model'}
-              type={'variogramModels'}
-              options={modelOptions}
-              selectedVariogramModels={selectedVariogramModels}
-              setVariogramModels={setVariogramModels}
-            />
+            <Typography>This compute method has no parameters.</Typography>
           </Styled.Parameters>
-        ) : (
+        )}
+
+        {!selectedComputeMethod && caseType === 'variogram' && (
           <Styled.Parameters>
             <Typography>
               Select model area and compute method to see available parameters.
diff --git a/src/features/Compute/ComputeVariogram/CaseCard/CaseCardInputs/CaseCardInputs.tsx b/src/features/Compute/ComputeVariogram/CaseCard/CaseCardInputs/ObjectCaseCardInputs.tsx
similarity index 96%
rename from src/features/Compute/ComputeVariogram/CaseCard/CaseCardInputs/CaseCardInputs.tsx
rename to src/features/Compute/ComputeVariogram/CaseCard/CaseCardInputs/ObjectCaseCardInputs.tsx
index c18d366f..b060b698 100644
--- a/src/features/Compute/ComputeVariogram/CaseCard/CaseCardInputs/CaseCardInputs.tsx
+++ b/src/features/Compute/ComputeVariogram/CaseCard/CaseCardInputs/ObjectCaseCardInputs.tsx
@@ -2,7 +2,7 @@ import { Autocomplete, AutocompleteChanges } from '@equinor/eds-core-react';
 import { default as optionTypes } from '../CaseCard';
 import * as Styled from './CaseCardInputs.styled';
 
-export const CaseCardInputs = ({
+export const ObjectCaseCardInputs = ({
   modelAreas,
   computeMethods,
   setModelArea,
diff --git a/src/features/Compute/ComputeVariogram/CaseCard/CaseCardInputs/VariogramCaseCardInputs.tsx b/src/features/Compute/ComputeVariogram/CaseCard/CaseCardInputs/VariogramCaseCardInputs.tsx
new file mode 100644
index 00000000..78c1e053
--- /dev/null
+++ b/src/features/Compute/ComputeVariogram/CaseCard/CaseCardInputs/VariogramCaseCardInputs.tsx
@@ -0,0 +1,38 @@
+import { Autocomplete, AutocompleteChanges } from '@equinor/eds-core-react';
+import { default as optionTypes } from '../CaseCard';
+import * as Styled from './CaseCardInputs.styled';
+
+export const VariogramCaseCardInputs = ({
+  modelAreas,
+  computeMethods,
+  setModelArea,
+  setComputeMethod,
+}: {
+  modelAreas: optionTypes[];
+  computeMethods: optionTypes[];
+  setModelArea: React.Dispatch<React.SetStateAction<optionTypes | undefined>>;
+  setComputeMethod: React.Dispatch<
+    React.SetStateAction<optionTypes | undefined>
+  >;
+}) => {
+  return (
+    <Styled.AutocompleteWrapper>
+      <Autocomplete
+        label="Model area"
+        options={modelAreas}
+        optionLabel={(modelArea) => modelArea.name}
+        onOptionsChange={(changes: AutocompleteChanges<optionTypes>) =>
+          setModelArea(changes.selectedItems[0])
+        }
+      ></Autocomplete>
+      <Autocomplete
+        label="Compute method"
+        options={computeMethods}
+        optionLabel={(computeMethod) => computeMethod.name}
+        onOptionsChange={(changes: AutocompleteChanges<optionTypes>) =>
+          setComputeMethod(changes.selectedItems[0])
+        }
+      ></Autocomplete>
+    </Styled.AutocompleteWrapper>
+  );
+};
diff --git a/src/features/Compute/ComputeVariogram/ComputeCaseInfoActions/ComputeCaseInfoActions.tsx b/src/features/Compute/ComputeVariogram/ComputeCaseInfoActions/ComputeCaseInfoActions.tsx
index 7303a465..69f5749b 100644
--- a/src/features/Compute/ComputeVariogram/ComputeCaseInfoActions/ComputeCaseInfoActions.tsx
+++ b/src/features/Compute/ComputeVariogram/ComputeCaseInfoActions/ComputeCaseInfoActions.tsx
@@ -1,24 +1,25 @@
 import { Button, Typography } from '@equinor/eds-core-react';
+import { CaseInfoTyoe } from '../../../../pages/ModelPages/Compute/ComputeVariogram/ComputeVariogram';
 import * as Styled from './ComputeCaseInfoActions.styled';
 
 export const ComputeCaseInfoActions = ({
   addCase,
+  caseInfo,
 }: {
   addCase: () => void;
+  caseInfo: CaseInfoTyoe;
 }) => {
   return (
     <Styled.CaseOverview>
       <Styled.Text>
-        <Typography variant="h2">Variogram cases</Typography>
-        <Typography variant="body_long">
-          You can add multiple cases for the different areas in your model.
-        </Typography>
+        <Typography variant="h2"> {caseInfo.title} </Typography>
+        <Typography variant="body_long">{caseInfo.info}</Typography>
       </Styled.Text>
       <Styled.Buttons>
         <Button variant="outlined" onClick={addCase}>
-          Add Variogram case
+          {caseInfo.addText}
         </Button>
-        <Button>Run all variograms</Button>
+        <Button>{caseInfo.runText}</Button>
       </Styled.Buttons>
     </Styled.CaseOverview>
   );
diff --git a/src/pages/ModelPages/Compute/ComputeObject/ComputeObject.tsx b/src/pages/ModelPages/Compute/ComputeObject/ComputeObject.tsx
index 90093ae2..90c9d05e 100644
--- a/src/pages/ModelPages/Compute/ComputeObject/ComputeObject.tsx
+++ b/src/pages/ModelPages/Compute/ComputeObject/ComputeObject.tsx
@@ -1,7 +1,54 @@
+import { Typography } from '@equinor/eds-core-react';
+import { useState } from 'react';
+import { CaseCard } from '../../../../features/Compute/ComputeVariogram/CaseCard/CaseCard';
+import { ComputeCaseInfoActions } from '../../../../features/Compute/ComputeVariogram/ComputeCaseInfoActions/ComputeCaseInfoActions';
+import { CaseInfoTyoe, Casetype } from '../ComputeVariogram/ComputeVariogram';
+import * as Styled from '../ComputeVariogram/ComputeVariogram.styled';
+
 export const ComputeObject = () => {
+  const [cases, setCases] = useState<Casetype[]>([
+    { id: '1', name: 'Variogram Case 1' },
+  ]);
+  const ObjectCaseInfo: CaseInfoTyoe = {
+    title: 'Object cases',
+    info: 'You can add multiple cases for the different areas in your model.',
+    addText: 'Add object case',
+    runText: 'Run all object cases',
+  };
+
+  const addCase = () => {
+    const newCase: Casetype = {
+      id: `${Math.floor(Math.random() * 100)}`,
+      name: `Object Case ${cases.length + 1}`,
+    };
+    setCases([...cases, newCase]);
+  };
+
+  const removeCase = (id: string) => {
+    const newCaseList = cases.filter((c) => c.id !== id);
+    setCases(newCaseList);
+  };
+
   return (
-    <>
-      <p>Options to compute object will soon be possible here!</p>
-    </>
+    <Styled.Case>
+      <ComputeCaseInfoActions addCase={addCase} caseInfo={ObjectCaseInfo} />
+      {cases.length !== 0 ? (
+        cases.map((c) => (
+          <Styled.CaseBorder key={c.id}>
+            <CaseCard
+              id={c.id}
+              name={c.name}
+              removeCase={removeCase}
+              caseType={'object'}
+            />
+          </Styled.CaseBorder>
+        ))
+      ) : (
+        <Typography>Add a Case</Typography>
+      )}
+      <Styled.AddCaseButton variant="outlined" onClick={addCase}>
+        Add variogram case
+      </Styled.AddCaseButton>
+    </Styled.Case>
   );
 };
diff --git a/src/pages/ModelPages/Compute/ComputeVariogram/ComputeVariogram.tsx b/src/pages/ModelPages/Compute/ComputeVariogram/ComputeVariogram.tsx
index 46b4d67b..2e447d8a 100644
--- a/src/pages/ModelPages/Compute/ComputeVariogram/ComputeVariogram.tsx
+++ b/src/pages/ModelPages/Compute/ComputeVariogram/ComputeVariogram.tsx
@@ -5,15 +5,29 @@ import { CaseCard } from '../../../../features/Compute/ComputeVariogram/CaseCard
 import { ComputeCaseInfoActions } from '../../../../features/Compute/ComputeVariogram/ComputeCaseInfoActions/ComputeCaseInfoActions';
 import * as Styled from './ComputeVariogram.styled';
 
-interface Casetype {
+export interface Casetype {
   id: string;
   name: string;
 }
+
+export interface CaseInfoTyoe {
+  title: string;
+  info: string;
+  addText: string;
+  runText: string;
+}
 export const ComputeVariogram = () => {
   const [cases, setCases] = useState<Casetype[]>([
     { id: '1', name: 'Variogram Case 1' },
   ]);
 
+  const variogramCaseInfo: CaseInfoTyoe = {
+    title: 'Variogram cases',
+    info: 'You can add multiple cases for the different areas in your model.',
+    addText: 'Add Variogram case',
+    runText: 'Run all variograms',
+  };
+
   const addCase = () => {
     const newCase: Casetype = {
       id: `${Math.floor(Math.random() * 100)}`,
@@ -29,11 +43,16 @@ export const ComputeVariogram = () => {
 
   return (
     <Styled.Case>
-      <ComputeCaseInfoActions addCase={addCase} />
+      <ComputeCaseInfoActions addCase={addCase} caseInfo={variogramCaseInfo} />
       {cases.length !== 0 ? (
         cases.map((c) => (
           <Styled.CaseBorder key={c.id}>
-            <CaseCard id={c.id} name={c.name} removeCase={removeCase} />
+            <CaseCard
+              id={c.id}
+              name={c.name}
+              removeCase={removeCase}
+              caseType={'variogram'}
+            />
           </Styled.CaseBorder>
         ))
       ) : (