Skip to content

Commit

Permalink
chore: Add compute object page
Browse files Browse the repository at this point in the history
  • Loading branch information
mheggelund committed Oct 23, 2023
1 parent 168b1e2 commit 4e3e5d3
Show file tree
Hide file tree
Showing 6 changed files with 179 additions and 48 deletions.
96 changes: 61 additions & 35 deletions src/features/Compute/ComputeVariogram/CaseCard/CaseCard.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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>();
Expand Down Expand Up @@ -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);
Expand All @@ -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.
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
Original file line number Diff line number Diff line change
@@ -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>
);
};
Original file line number Diff line number Diff line change
@@ -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>
);
Expand Down
53 changes: 50 additions & 3 deletions src/pages/ModelPages/Compute/ComputeObject/ComputeObject.tsx
Original file line number Diff line number Diff line change
@@ -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>
);
};
25 changes: 22 additions & 3 deletions src/pages/ModelPages/Compute/ComputeVariogram/ComputeVariogram.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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)}`,
Expand All @@ -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>
))
) : (
Expand Down

0 comments on commit 4e3e5d3

Please sign in to comment.