Chore/api frontend integration

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.

src/features/Compute/ComputeVariogram/CaseCard/CaseCardInputs/CaseCardInputs.tsx → 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,

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>
+  );
+};

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>
   );

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>
   );
 };

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>
         ))
       ) : (