Chore/api frontend integration

src/api/generated/models/AnalogueList.ts

@@ -5,6 +5,6 @@
 
 export type AnalogueList = {
   analogueId?: string;
-  name?: string | null;
+  name: string;
   description?: string | null;
 };

src/api/generated/models/ParameterList.ts

@@ -6,6 +6,6 @@
 export type ParameterList = {
   parameterId?: string;
   identifier?: string | null;
-  name?: string | null;
+  name: string;
   description?: string | null;
 };

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 = {

src/features/AddModel/ModelMetadata/ModelMetadata.tsx

@@ -7,6 +7,8 @@ import {
 } from '@equinor/eds-core-react';
 import MetadataProps, { ErrorType } from '../AddModelDialog/AddModelDialog';
 
+import { useQuery } from '@tanstack/react-query';
+import { AnalogueList, AnaloguesService } from '../../../api/generated';
 import * as Styled from './ModelMetadata.styled';
 
 export const ModelMetadata = ({
@@ -26,6 +28,13 @@ export const ModelMetadata = ({
     analogue: ['Analouge1', 'Analouge2'],
   };
 
+  const { isLoading, data } = useQuery({
+    queryKey: ['apiParameters'],
+    queryFn: () => AnaloguesService.getApiAnalogues(),
+  });
+
+  if (isLoading || !data?.success) return <p>Loading ...</p>;
+
   const handleInput = (e: AutocompleteChanges<string>, target: string) => {
     setMetadata({ ...metadata, [target]: e.selectedItems });
   };
@@ -76,9 +85,10 @@ export const ModelMetadata = ({
           <Styled.AutocompleteRow>
             <Autocomplete
               label="Analogue (optional)"
-              options={fields.analogue}
+              options={data.data}
+              optionLabel={(option) => option.name}
               multiple
-              onOptionsChange={(e: AutocompleteChanges<string>) =>
+              onOptionsChange={(e: AutocompleteChanges<AnalogueList>) =>
                 setMetadata({ ...metadata, analogue: e.selectedItems })
               }
             ></Autocomplete>

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}

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

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

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