refactor: Load parameters and analogues from API. Adaptions for API d…

…ata.
equinor · Oct 18, 2023 · 62dda86 · 62dda86
1 parent e04edda
commit 62dda86
Show file tree

Hide file tree

Showing 7 changed files with 162 additions and 99 deletions.
diff --git a/src/features/AddModel/AddModelDialog/AddModelDialog.tsx b/src/features/AddModel/AddModelDialog/AddModelDialog.tsx
@@ -1,6 +1,7 @@
 /* eslint-disable max-lines-per-function */
 import { Button, Typography } from '@equinor/eds-core-react';
 import { useEffect, useState } from 'react';
+import { AnalogueList } from '../../../api/generated/models/AnalogueList';
 import { ModelInputFilesTable } from '../ModelInputFilesTable/ModelInputFilesTable';
 import { ModelMetadata } from '../ModelMetadata/ModelMetadata';
 import * as Styled from './AddModelDialog.styled';
@@ -16,7 +17,7 @@ export default interface MetadataProps {
   field: string[];
   zone?: string[];
   formation: string[];
-  analogue?: string[];
+  analogue?: string[] | AnalogueList[];
 }
 
 export type ErrorType = {

diff --git a/src/features/Compute/ComputeVariogram/CaseCard/CaseCard.tsx b/src/features/Compute/ComputeVariogram/CaseCard/CaseCard.tsx
@@ -1,10 +1,17 @@
 /* eslint-disable max-lines-per-function */
 import { Typography } from '@equinor/eds-core-react';
+import { useQuery } from '@tanstack/react-query';
 import { useState } from 'react';
+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 { CaseCardParameters } from './CaseCardParameters/CaseCardParameters';
+import { ModelSelect } from './CaseCardParameters/ModelSelect/ModelSelect';
+
+import { GrainSizeSelect } from './CaseCardParameters/GrainSizeSelect/GrainSizeSelect';
+import { ParameterSelect } from './CaseCardParameters/ParameterSelect/ParameterSelect';
+
 export default interface optionTypes {
   id: number;
   name: string;
@@ -25,7 +32,14 @@ export const CaseCard = ({
   const [selectedGrainSize, setGrainSize] = useState<optionTypes>();
   const [selectedVariogramModels, setVariogramModels] =
     useState<optionTypes[]>();
-  const [selectedParameters, setParameters] = useState<optionTypes[]>();
+  const [selectedParameters, setParameters] = useState<ParameterList[]>();
+
+  const { isLoading, data } = useQuery({
+    queryKey: ['apiParameters'],
+    queryFn: () => ParametersService.getApiParameters(),
+  });
+
+  if (isLoading || !data?.success) return <p>Loading ...</p>;
 
   const grainOptions: optionTypes[] = [
     { id: 1, name: 'Silt', size: '0.044mm' },
@@ -40,10 +54,10 @@ export const CaseCard = ({
     { id: 7, name: 'General exponential' },
   ];
 
-  const parameterOptions: optionTypes[] = [
-    { id: 8, name: 'Porosity' },
-    { id: 9, name: 'Permeability' },
-  ];
+  // const parameterOptions: optionTypes[] = [
+  //   { id: 8, name: 'Porosity' },
+  //   { id: 9, name: 'Permeability' },
+  // ];
 
   const modelAreas: optionTypes[] = [
     { id: 10, name: 'Proximal' },
@@ -55,10 +69,15 @@ export const CaseCard = ({
     { id: 14, name: 'Continuous parameter' },
   ];
   const runCase = () => {
+    // eslint-disable-next-line no-console
     console.log(selectedModelArea);
+    // eslint-disable-next-line no-console
     console.log(selectedComputeMethod);
+    // eslint-disable-next-line no-console
     console.log(selectedGrainSize);
+    // eslint-disable-next-line no-console
     console.log(selectedVariogramModels);
+    // eslint-disable-next-line no-console
     console.log(selectedParameters);
   };
 
@@ -80,7 +99,7 @@ export const CaseCard = ({
         {selectedModelArea && selectedComputeMethod ? (
           <Styled.Parameters>
             {selectedComputeMethod.name === 'Net-to-gross' && (
-              <CaseCardParameters
+              <GrainSizeSelect
                 label={'From grain size'}
                 type={'grainSize'}
                 options={grainOptions}
@@ -89,15 +108,15 @@ export const CaseCard = ({
               />
             )}
             {selectedComputeMethod.name === 'Continuous parameter' && (
-              <CaseCardParameters
+              <ParameterSelect
                 label={'Parameter'}
                 type={'parameters'}
-                options={parameterOptions}
+                options={data.data}
                 selectedParameters={selectedParameters}
                 setParameters={setParameters}
               />
             )}
-            <CaseCardParameters
+            <ModelSelect
               label={'Variogram model'}
               type={'variogramModels'}
               options={modelOptions}

diff --git a/src/features/Compute/ComputeVariogram/CaseCard/CaseCardParameters/CaseCardParameters.tsx b/src/features/Compute/ComputeVariogram/CaseCard/CaseCardParameters/CaseCardParameters.tsx
diff --git a/.../Compute/ComputeVariogram/CaseCard/CaseCardParameters/GrainSizeSelect/GrainSizeSelect.tsx b/.../Compute/ComputeVariogram/CaseCard/CaseCardParameters/GrainSizeSelect/GrainSizeSelect.tsx
@@ -0,0 +1,40 @@
+import {
+  Autocomplete,
+  AutocompleteChanges,
+  Chip,
+} from '@equinor/eds-core-react';
+import { default as optionTypes } from '../../CaseCard';
+import * as Styled from '../CaseCardParameters.styled';
+
+export const GrainSizeSelect = ({
+  label,
+  type,
+  options,
+  selectedGrainSize,
+  setGrainSize,
+}: {
+  label: string;
+  type: string;
+  options: optionTypes[];
+  selectedGrainSize?: optionTypes;
+  setGrainSize: React.Dispatch<React.SetStateAction<optionTypes | undefined>>;
+}) => {
+  const onGrainSizeChange = (changes: AutocompleteChanges<optionTypes>) => {
+    setGrainSize && setGrainSize(changes.selectedItems[0]);
+  };
+
+  return (
+    <Styled.Parameters>
+      <Autocomplete
+        label={label}
+        options={options}
+        optionLabel={(option) => option.name}
+        onOptionsChange={onGrainSizeChange}
+      ></Autocomplete>
+
+      {selectedGrainSize && (
+        <Chip key={selectedGrainSize.id}>{selectedGrainSize.size}</Chip>
+      )}
+    </Styled.Parameters>
+  );
+};
diff --git a/...features/Compute/ComputeVariogram/CaseCard/CaseCardParameters/ModelSelect/ModelSelect.tsx b/...features/Compute/ComputeVariogram/CaseCard/CaseCardParameters/ModelSelect/ModelSelect.tsx
@@ -0,0 +1,45 @@
+/* eslint-disable max-lines-per-function */
+import {
+  Autocomplete,
+  AutocompleteChanges,
+  Chip,
+} from '@equinor/eds-core-react';
+import { default as optionTypes } from '../../CaseCard';
+import * as Styled from '../CaseCardParameters.styled';
+
+export const ModelSelect = ({
+  label,
+  type,
+  options,
+  selectedVariogramModels,
+  setVariogramModels,
+}: {
+  label: string;
+  type: string;
+  options: optionTypes[];
+
+  selectedVariogramModels?: optionTypes[] | undefined;
+  setVariogramModels?: React.Dispatch<
+    React.SetStateAction<optionTypes[] | undefined>
+  >;
+}) => {
+  const onModelChange = (changes: AutocompleteChanges<optionTypes>) => {
+    setVariogramModels && setVariogramModels(changes.selectedItems);
+  };
+
+  return (
+    <Styled.Parameters>
+      <Autocomplete
+        label={label}
+        options={options}
+        optionLabel={(opt) => opt.name}
+        onOptionsChange={onModelChange}
+        multiple
+      ></Autocomplete>
+
+      {selectedVariogramModels &&
+        type === 'variogramModels' &&
+        selectedVariogramModels.map((s) => <Chip key={s.id}>{s.name}</Chip>)}
+    </Styled.Parameters>
+  );
+};
diff --git a/.../Compute/ComputeVariogram/CaseCard/CaseCardParameters/ParameterSelect/ParameterSelect.tsx b/.../Compute/ComputeVariogram/CaseCard/CaseCardParameters/ParameterSelect/ParameterSelect.tsx
@@ -0,0 +1,43 @@
+import {
+  Autocomplete,
+  AutocompleteChanges,
+  Chip,
+} from '@equinor/eds-core-react';
+import { ParameterList } from '../../../../../../api/generated/models/ParameterList';
+import * as Styled from '../CaseCardParameters.styled';
+
+export const ParameterSelect = ({
+  label,
+  type,
+  options,
+  selectedParameters,
+  setParameters,
+}: {
+  label: string;
+  type: string;
+  options: ParameterList[];
+  selectedParameters?: ParameterList[];
+  setParameters: React.Dispatch<
+    React.SetStateAction<ParameterList[] | undefined>
+  >;
+}) => {
+  const onParameterChange = (changes: AutocompleteChanges<ParameterList>) => {
+    setParameters(changes.selectedItems);
+  };
+
+  return (
+    <Styled.Parameters>
+      <Autocomplete
+        label={label}
+        options={options}
+        optionLabel={(option) => option.name}
+        onOptionsChange={onParameterChange}
+        multiple
+      ></Autocomplete>
+      {selectedParameters &&
+        selectedParameters.map((s) => (
+          <Chip key={s.parameterId}>{s.name}</Chip>
+        ))}
+    </Styled.Parameters>
+  );
+};
diff --git a/src/features/ModelView/ModelMetadataView/ModelMetadataView.tsx b/src/features/ModelView/ModelMetadataView/ModelMetadataView.tsx
@@ -1,7 +1,7 @@
 import { Button, Table, Typography } from '@equinor/eds-core-react';
+import { useQuery } from '@tanstack/react-query';
 import { useParams } from 'react-router-dom';
 import { AnalogueModelsService } from '../../../api/generated/services/AnalogueModelsService';
-import { useQuery } from '@tanstack/react-query';
 
 export type ModelParam = {
   id: string;
@@ -21,7 +21,7 @@ export const ModelMetadataView = () => {
     <div className="metadata-view">
       <Typography variant="h3">Description and metadata</Typography>
       {data.data.description && (
-        <p>
+        <div>
           {data.data.description}
           <br />
           <p>
@@ -34,7 +34,7 @@ export const ModelMetadataView = () => {
             blandit, justo ex pellentesque nisl, eu placerat magna nisi et odio.
             Donec laoreet est quam, id fringilla magna semper in. **
           </p>
-        </p>
+        </div>
       )}
       <div>
         <Table>