chore: onClick to add case, conditional caseParameters for compute me…

…thod
equinor · Oct 3, 2023 · 6a380df · 6a380df
1 parent 1dfedcb
commit 6a380df
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 23 deletions.
diff --git a/src/features/Compute/ComputeVariogram/CaseCard/CaseCard.tsx b/src/features/Compute/ComputeVariogram/CaseCard/CaseCard.tsx
@@ -12,7 +12,7 @@ export default interface optionTypes {
   size?: string
 }
 
-export const CaseCard = () => {
+export const CaseCard = ({ name }: { name: string }) => {
   const [selectedModelArea, setModelArea] = useState<optionTypes>()
   const [selectedComputeMethod, setComputeMethod] = useState<optionTypes>()
   const [selectedGrainSize, setGrainSize] = useState<optionTypes>()
@@ -58,7 +58,7 @@ export const CaseCard = () => {
   return (
     <Styled.Wrapper>
       <Styled.Case>
-        <Typography variant="h4">Variogram/object case N</Typography>
+        <Typography variant="h4">{name}</Typography>
         <Styled.CaseCard>
           <CaseCardInputs
             modelAreas={modelAreas}
@@ -72,27 +72,32 @@ export const CaseCard = () => {
       <div>
         {selectedModelArea && selectedComputeMethod ? (
           <Styled.Parameters>
-            <CaseCardParameters
-              label={'From grain size'}
-              type={'grainSize'}
-              options={grainOptions}
-              selectedGrainSize={selectedGrainSize}
-              setGrainSize={setGrainSize}
-            />
+            {selectedComputeMethod.name === 'Net-to-gross' && (
+              <CaseCardParameters
+                label={'From grain size'}
+                type={'grainSize'}
+                options={grainOptions}
+                selectedGrainSize={selectedGrainSize}
+                setGrainSize={setGrainSize}
+              />
+            )}
+            {selectedComputeMethod.name === 'Continuous parameter' && (
+              <CaseCardParameters
+                label={'Parameter'}
+                type={'parameters'}
+                options={parameterOptions}
+                selectedParameters={selectedParameters}
+                setParameters={setParameters}
+              />
+            )}
+
             <CaseCardParameters
               label={'Variogram model'}
               type={'variogramModels'}
               options={modelOptions}
               selectedVariogramModels={selectedVariogramModels}
               setVariogramModels={setVariogramModels}
             />
-            <CaseCardParameters
-              label={'Parameter'}
-              type={'parameters'}
-              options={parameterOptions}
-              selectedParameters={selectedParameters}
-              setParameters={setParameters}
-            />
           </Styled.Parameters>
         ) : (
           <Styled.Parameters>

diff --git a/src/features/Compute/ComputeVariogram/ComputeCaseInfoActions/ComputeCaseInfoActions.tsx b/src/features/Compute/ComputeVariogram/ComputeCaseInfoActions/ComputeCaseInfoActions.tsx
@@ -1,7 +1,11 @@
 import { Button, Typography } from '@equinor/eds-core-react'
 import * as Styled from './ComputeCaseInfoActions.styled'
 
-export const ComputeCaseInfoActions = () => {
+export const ComputeCaseInfoActions = ({
+  addCase,
+}: {
+  addCase: () => void
+}) => {
   return (
     <Styled.CaseOverview>
       <Styled.Text>
@@ -11,7 +15,9 @@ export const ComputeCaseInfoActions = () => {
         </Typography>
       </Styled.Text>
       <Styled.Buttons>
-        <Button variant="outlined">Add Variogram case</Button>
+        <Button variant="outlined" onClick={addCase}>
+          Add Variogram case
+        </Button>
         <Button>Run all variograms</Button>
       </Styled.Buttons>
     </Styled.CaseOverview>

diff --git a/src/pages/ModelPages/Compute/ComputeVariogram/ComputeVariogram.tsx b/src/pages/ModelPages/Compute/ComputeVariogram/ComputeVariogram.tsx
@@ -1,15 +1,40 @@
+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 * as Styled from './ComputeVariogram.styled'
 
+interface Casetype {
+  id: number
+  name: string
+}
 export const ComputeVariogram = () => {
+  const [cases, setCases] = useState<Casetype[]>([
+    { id: 1, name: 'Variogram Case 1' },
+  ])
+
+  const AddCase = () => {
+    const newCase: Casetype = {
+      id: Math.floor(Math.random() * 100),
+      name: `Variogram Case ${cases.length + 1}`,
+    }
+
+    setCases([...cases, newCase])
+  }
+
   return (
     <Styled.Case>
-      <ComputeCaseInfoActions />
-      <Styled.CaseBorder>
-        <CaseCard />
-      </Styled.CaseBorder>
-      <Styled.AddCaseButton variant="outlined">
+      <ComputeCaseInfoActions addCase={AddCase} />
+      {cases.length !== 0 ? (
+        cases.map((c) => (
+          <Styled.CaseBorder key={c.id}>
+            <CaseCard name={c.name} />
+          </Styled.CaseBorder>
+        ))
+      ) : (
+        <Typography>Add a Case</Typography>
+      )}
+      <Styled.AddCaseButton variant="outlined" onClick={AddCase}>
         Add variogram case
       </Styled.AddCaseButton>
     </Styled.Case>