Chore/api frontend integration

src/components/Table.tsx

@@ -1,15 +1,21 @@
-import { Chip } from '@equinor/eds-core-react';
+/* eslint-disable max-lines-per-function */
+import { Button, Chip } from '@equinor/eds-core-react';
 import { EdsDataGrid } from '@equinor/eds-data-grid-react';
-import * as Styled from './Table.styled';
 import { useQuery } from '@tanstack/react-query';
+import { useNavigate } from 'react-router-dom';
 import { AnalogueModelsService } from '../api/generated';
+import * as Styled from './Table.styled';
 
 export const Table = () => {
   const { isLoading, data } = useQuery({
     queryKey: ['analogue-models'],
     queryFn: () => AnalogueModelsService.getApiAnalogueModels(),
   });
+
+  const navigate = useNavigate();
+
   if (isLoading || !data?.success) return <p>Loading...</p>;
+
   return (
     <Styled.StyledDiv>
       <EdsDataGrid
@@ -60,6 +66,21 @@ export const Table = () => {
             header: 'Status',
             id: 'isProcessed',
           },
+
+          {
+            accessorKey: 'navigate',
+            cell: ({ row }) => (
+              <Button
+                onClick={() => {
+                  navigate(`/model/${row.original.analogueModelId}/details`);
+                }}
+              >
+                Go to model
+              </Button>
+            ),
+            header: '',
+            id: 'navigate',
+          },
         ]}
       />
     </Styled.StyledDiv>

src/features/AddModel/AddModelDialog/AddModelDialog.tsx

@@ -8,16 +8,17 @@ import * as Styled from './AddModelDialog.styled';
 
 interface AddModelDialogProps {
   isOpen: boolean;
-  confirm: (file: File) => Promise<void>;
+  confirm: (file: File, metadata: Partial<MetadataProps>) => Promise<void>;
   cancel: () => void;
 }
 
 export default interface MetadataProps {
-  description?: string;
+  name: string;
+  description: string;
   field: string[];
   zone?: string[];
   formation: string[];
-  analogue?: string[] | AnalogueList[];
+  analogue?: AnalogueList[];
 }
 
 export type ErrorType = {
@@ -35,7 +36,10 @@ export const AddModelDialog = ({
     NC: undefined,
     INI: undefined,
   });
-  const [metadata, setMetadata] = useState<Partial<MetadataProps>>();
+  const [metadata, setMetadata] = useState<Partial<MetadataProps>>({
+    name: '',
+    description: '',
+  });
   const [errors, setErrors] = useState({});
   const [submitting, setSubmitting] = useState(false);
 
@@ -70,7 +74,7 @@ export const AddModelDialog = ({
   };
 
   const finishSubmit = () => {
-    if (files.NC) confirm(files.NC);
+    if (files.NC) confirm(files.NC, metadata);
   };
 
   useEffect(() => {

src/features/AddModel/ModelMetadata/ModelMetadata.tsx

@@ -21,7 +21,6 @@ export const ModelMetadata = ({
   setMetadata: (metadata: Partial<MetadataProps>) => void;
 }) => {
   const fields = {
-    description: 'Description string',
     field: ['Tor', 'Pål'],
     zone: ['Zone 1', 'Zone 2', 'Zone 3'],
     formation: ['Rocky', 'Hilly', 'Flat'],
@@ -43,6 +42,14 @@ export const ModelMetadata = ({
     <Styled.ModelMetadata className="model-metadata">
       <Typography variant="h4">Description and metadata</Typography>
       <Styled.Form>
+        <Styled.TextInput
+          id="model-name"
+          label="Model Name (optional)"
+          value={metadata?.name}
+          onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) =>
+            setMetadata({ ...metadata, name: e.currentTarget.value })
+          }
+        />
         <Styled.TextInput
           id="model-description"
           label="Model description (optional)"
@@ -61,6 +68,7 @@ export const ModelMetadata = ({
                 className={`${errors.field && 'model-required'}`}
                 label="Field"
                 options={fields.field}
+                selectedOptions={metadata?.field}
                 onOptionsChange={(e: AutocompleteChanges<string>) =>
                   handleInput(e, 'field')
                 }
@@ -72,6 +80,7 @@ export const ModelMetadata = ({
                 className={`${errors.formation && 'model-required'}`}
                 label="Formation"
                 options={fields.formation}
+                selectedOptions={metadata?.formation}
                 multiple
                 onOptionsChange={(e: AutocompleteChanges<string>) =>
                   handleInput(e, 'formation')
@@ -87,6 +96,7 @@ export const ModelMetadata = ({
               label="Analogue (optional)"
               options={data.data}
               optionLabel={(option) => option.name}
+              selectedOptions={metadata?.analogue}
               multiple
               onOptionsChange={(e: AutocompleteChanges<AnalogueList>) =>
                 setMetadata({ ...metadata, analogue: e.selectedItems })
@@ -95,6 +105,7 @@ export const ModelMetadata = ({
             <Autocomplete
               label="Zone (optional)"
               options={fields.zone}
+              selectedOptions={metadata?.zone}
               onOptionsChange={(e: AutocompleteChanges<string>) =>
                 setMetadata({ ...metadata, zone: e.selectedItems })
               }

src/features/Compute/ComputeVariogram/CaseCard/CaseCard.tsx

@@ -29,7 +29,7 @@ export const CaseCard = ({
 }) => {
   const [selectedModelArea, setModelArea] = useState<optionTypes>();
   const [selectedComputeMethod, setComputeMethod] = useState<optionTypes>();
-  const [selectedGrainSize, setGrainSize] = useState<optionTypes>();
+  const [selectedGrainSize, setGrainSize] = useState<optionTypes[]>();
   const [selectedVariogramModels, setVariogramModels] =
     useState<optionTypes[]>();
   const [selectedParameters, setParameters] = useState<ParameterList[]>();

src/features/Compute/ComputeVariogram/CaseCard/CaseCardParameters/GrainSizeSelect/GrainSizeSelect.tsx

@@ -16,11 +16,11 @@ export const GrainSizeSelect = ({
   label: string;
   type: string;
   options: optionTypes[];
-  selectedGrainSize?: optionTypes;
-  setGrainSize: React.Dispatch<React.SetStateAction<optionTypes | undefined>>;
+  selectedGrainSize?: optionTypes[];
+  setGrainSize: React.Dispatch<React.SetStateAction<optionTypes[] | undefined>>;
 }) => {
   const onGrainSizeChange = (changes: AutocompleteChanges<optionTypes>) => {
-    setGrainSize && setGrainSize(changes.selectedItems[0]);
+    setGrainSize && setGrainSize(changes.selectedItems);
   };
 
   return (
@@ -30,11 +30,14 @@ export const GrainSizeSelect = ({
         options={options}
         optionLabel={(option) => option.name}
         onOptionsChange={onGrainSizeChange}
+        selectedOptions={selectedGrainSize}
       ></Autocomplete>
 
-      {selectedGrainSize && (
-        <Chip key={selectedGrainSize.id}>{selectedGrainSize.size}</Chip>
-      )}
+      {/* {selectedGrainSize && (
+        <Chip key={selectedGrainSize[0].id}>{selectedGrainSize[0].size}</Chip>
+      )} */}
+      {selectedGrainSize &&
+        selectedGrainSize.map((s) => <Chip key={s.id}>{s.name}</Chip>)}
     </Styled.Parameters>
   );
 };

src/features/Compute/ComputeVariogram/CaseCard/CaseCardParameters/ModelSelect/ModelSelect.tsx

@@ -34,6 +34,7 @@ export const ModelSelect = ({
         options={options}
         optionLabel={(opt) => opt.name}
         onOptionsChange={onModelChange}
+        selectedOptions={selectedVariogramModels}
         multiple
       ></Autocomplete>
 

src/features/Compute/ComputeVariogram/CaseCard/CaseCardParameters/ParameterSelect/ParameterSelect.tsx

@@ -32,6 +32,7 @@ export const ParameterSelect = ({
         options={options}
         optionLabel={(option) => option.name}
         onOptionsChange={onParameterChange}
+        selectedOptions={selectedParameters}
         multiple
       ></Autocomplete>
       {selectedParameters &&

src/pages/Browse/Browse.tsx

@@ -9,7 +9,9 @@ import {
   JobsService,
 } from '../../api/generated';
 import { Table } from '../../components/Table';
-import { AddModelDialog } from '../../features/AddModel/AddModelDialog/AddModelDialog';
+import MetadataProps, {
+  AddModelDialog,
+} from '../../features/AddModel/AddModelDialog/AddModelDialog';
 import * as Styled from './Browse.styled';
 
 enum UploadProcess {
@@ -23,12 +25,6 @@ type MutationContract = {
   file: Blob;
 };
 
-const ModelBody: CreateAnalogueModelCommand = {
-  name: 'Model test',
-  description: 'New test of the model',
-  sourceType: 'ResQML',
-};
-
 export const Browse = () => {
   const createModel = useMutation({
     mutationFn: AnalogueModelsService.postApiAnalogueModels,
@@ -60,8 +56,13 @@ export const Browse = () => {
     setAddModelDialog(!isAddModelDialog);
   }
 
-  async function uploadModel(file: File) {
+  async function uploadModel(file: File, metadata: Partial<MetadataProps>) {
     setUploadStatus(UploadProcess.STARTED);
+    const ModelBody: CreateAnalogueModelCommand = {
+      name: metadata.name,
+      description: metadata.description,
+      sourceType: 'ResQML',
+    };
 
     const modelUpload = await createModel.mutateAsync(ModelBody);
 
@@ -97,9 +98,6 @@ export const Browse = () => {
         <Typography variant="h1">Browse all models</Typography>
         <div className="btn-div">
           <Button onClick={toggleDialog}>Add new model</Button>
-          <Button href="/model/4e999a96-34a3-4121-998d-08dbb2a7609c/details">
-            Model view - Hardkodet
-          </Button>
         </div>
         <Table />
       </Styled.BrowseWrapper>