Feat/compute variogram (#112)

* chore: updated EDS version * refactor: rearranged Model, moved ModelNameFrame * refactor: Add ComputeVariogram and ComputeObject pages * chore: Split compute tab into variogram and object * chore: Reordered and styled navbar * chore: updated EDS version * chore: add theme and spacing * chore: Add CaseCard for ComputeVariogram * chore: Add ComputeVariogram * chore: Cleanup and fixed imports * fix: fixed loading of model bu id * chore: onClick to add case, conditional caseParameters for compute method * Fixed CI error
equinor · Oct 4, 2023 · 8b8c6ff · 8b8c6ff
1 parent b01c94d
commit 8b8c6ff
Show file tree

Hide file tree

Showing 9 changed files with 117 additions and 68 deletions.
diff --git a/src/components/Table.tsx b/src/components/Table.tsx
@@ -4,7 +4,7 @@ import { useAnalogueModels } from '../hooks/useAnalogueModels'
 import * as Styled from './Table.styled'
 
 export const Table = () => {
-  const { models } = useAnalogueModels()
+  const { models } = useAnalogueModels('undefined')
 
   if (models.isLoading || !models.data?.data) return <p>Loading...</p>
 

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,31 @@ 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/features/ModelView/ModelMetadataView/ModelMetadataView.tsx b/src/features/ModelView/ModelMetadataView/ModelMetadataView.tsx
@@ -3,38 +3,32 @@ import { useParams } from 'react-router-dom'
 import { useAnalogueModels } from '../../../hooks/useAnalogueModels'
 
 export const ModelMetadataView = () => {
-  const { id } = useParams()
-  const { model } = useAnalogueModels(id)
+  const { id } = useParams<{ id: string }>()
+  const { model } = useAnalogueModels(id!)
 
-  if (!model) return <p>Loading ...</p>
-
-  // TODO
-  // Map rows to model data
+  if (model.isLoading) <p>Loading.....</p>
 
   return (
     <div className="metadata-view">
       <Typography variant="h3">Description and metadata</Typography>
-      {model.description && (
-        <p>
-          {model.description}
-          <br />
+      {!model.isLoadingError &&
+        model.isFetched &&
+        model.data.data.description && (
           <p>
-            ** Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas
-            bibendum ex at venenatis gravida. Sed id tempor dui. Nunc a posuere
-            ligula. Pellentesque pulvinar varius neque nec molestie. Aliquam
-            erat volutpat. Nunc pulvinar varius scelerisque. Suspendisse
-            iaculis, elit id fringilla semper, justo felis luctus felis, et
-            malesuada augue sapien a sem. Donec varius, sapien quis varius
-            blandit, justo ex pellentesque nisl, eu placerat magna nisi et odio.
-            Donec laoreet est quam, id fringilla magna semper in. Duis non massa
-            euismod, ultrices tortor et, ultricies ante. Vivamus quis dignissim
-            sem. Quisque purus dui, euismod eu lacus sed, mollis sagittis arcu.
-            Curabitur vitae mauris ornare, elementum massa suscipit, congue leo.
-            Sed fermentum imperdiet dapibus. Aliquam non ligula in felis laoreet
-            suscipit. **
+            {model.data.data.description}
+            <br />
+            <p>
+              ** Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+              Maecenas bibendum ex at venenatis gravida. Sed id tempor dui. Nunc
+              a posuere ligula. Pellentesque pulvinar varius neque nec molestie.
+              Aliquam erat volutpat. Nunc pulvinar varius scelerisque.
+              Suspendisse iaculis, elit id fringilla semper, justo felis luctus
+              felis, et malesuada augue sapien a sem. Donec varius, sapien quis
+              varius blandit, justo ex pellentesque nisl, eu placerat magna nisi
+              et odio. Donec laoreet est quam, id fringilla magna semper in. **
+            </p>
           </p>
-        </p>
-      )}
+        )}
       <div>
         <Table>
           <Table.Body>

diff --git a/src/features/ModelView/ModelSourceView/ModelSourceView.tsx b/src/features/ModelView/ModelSourceView/ModelSourceView.tsx
@@ -1,15 +1,11 @@
 import { Table, Typography } from '@equinor/eds-core-react'
 import { useParams } from 'react-router-dom'
 import { useAnalogueModels } from '../../../hooks/useAnalogueModels'
-
 export const ModelSourceView = () => {
-  const { id } = useParams()
-  const { model } = useAnalogueModels(id)
-
-  if (!model) return <p>Loading ...</p>
+  const { id } = useParams<{ id: string }>()
+  const { model } = useAnalogueModels(id!)
 
-  // TODO
-  // Add uploaded by and upload time
+  if (model.isLoading) <p>Loading.....</p>
 
   return (
     <div className="source-view">
@@ -25,9 +21,11 @@ export const ModelSourceView = () => {
           </Table.Row>
         </Table.Head>
         <Table.Body>
-          {model.fileUploads?.length === undefined ||
-          model.fileUploads?.length > 0 ? (
-            model.fileUploads?.map((file: any) => (
+          {!model.isLoadingError &&
+          model.isFetched &&
+          (model.data.data.fileUploads?.length === undefined ||
+            model.data.data.fileUploads?.length > 0) ? (
+            model.data.data.fileUploads?.map((file: any) => (
               <Table.Row key={file.uploadId} className="table-row">
                 <Table.Cell className="table-first-col">
                   {file.originalFileName}

diff --git a/src/hooks/useAnalogueModels.tsx b/src/hooks/useAnalogueModels.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable max-lines-per-function */
 import { useQuery } from '@tanstack/react-query'
 import axios from 'axios'
 import type { ParamsOption, RequestBodyOption } from 'openapi-fetch'
@@ -12,12 +13,14 @@ type UseQueryOptions<T> = ParamsOption<T> &
   }
 
 const ANALOGUEMODELS_KEY = '/api/analogue-models'
+const ANALOGUEMODEL_KEY = '/api/analogue-models/{id}'
 const NC_FILE_KEY = '/api/analogue-models/{id}/input-models'
 
-export function useAnalogueModels(id?: string) {
+export function useAnalogueModels(id: string) {
   const apiClient = useApiClient()
   const token = useAccessToken()
   const headers = new Headers({ Authorization: `Bearer ${token}` })
+  const modelId = id
 
   async function fetchModels(): AnalogueModelResponse {
     const { data } = await apiClient.GET(ANALOGUEMODELS_KEY, {
@@ -26,6 +29,17 @@ export function useAnalogueModels(id?: string) {
     return data
   }
 
+  async function fetchModel(id: string): AnalogueModelResponse {
+    const params = { path: { id } }
+
+    const { data } = await apiClient.GET(ANALOGUEMODEL_KEY, {
+      params,
+      headers: headers,
+    })
+
+    return data
+  }
+
   async function createModel({
     body,
   }: UseQueryOptions<paths[typeof ANALOGUEMODELS_KEY]['post']>) {
@@ -55,11 +69,13 @@ export function useAnalogueModels(id?: string) {
 
   const models = useQuery(['models', token], fetchModels, { enabled: !!token })
   // TODO: might want to add queryFn to this:
-  const model: AnalogueModel = useQuery([
-    'models',
-    token,
-    { analogueModelId: id },
-  ])
+
+  const model: AnalogueModel = useQuery({
+    queryKey: ['model', token, modelId],
+    queryFn: () => fetchModel(modelId),
+
+    enabled: !!modelId,
+  })
 
   return {
     model,

diff --git a/src/pages/Browse/Browse.tsx b/src/pages/Browse/Browse.tsx
@@ -12,7 +12,7 @@ enum UploadProcess {
 }
 
 export const Browse = () => {
-  const { createModel, uploadNCFile } = useAnalogueModels()
+  const { createModel, uploadNCFile } = useAnalogueModels('undefined')
   const [isAddModelDialog, setAddModelDialog] = useState<boolean>(false)
   const [uploadStatus, setUploadStatus] = useState<string>()
 

diff --git a/src/pages/ModelPages/Compute/ComputeVariogram/ComputeVariogram.tsx b/src/pages/ModelPages/Compute/ComputeVariogram/ComputeVariogram.tsx
@@ -1,15 +1,41 @@
+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>

diff --git a/src/pages/ModelPages/Model/Model.tsx b/src/pages/ModelPages/Model/Model.tsx
@@ -6,7 +6,9 @@ import * as Styled from './Model.styled'
 
 export const Model = () => {
   const { id } = useParams<{ id: string }>()
-  const { model } = useAnalogueModels(id)
+  const { model } = useAnalogueModels(id!)
+
+  if (model.isLoading) <p>Loading.....</p>
 
   return (
     <>
@@ -15,7 +17,10 @@ export const Model = () => {
           <ModelNavigationBar />
         </Styled.SidebarWrapper>
         <Styled.ContentWrapper>
-          {model && <ModelNameFrame model={model} />}
+          {!model.isLoadingError && model.isFetched && (
+            <ModelNameFrame model={model.data.data} />
+          )}
+
           <Outlet />
         </Styled.ContentWrapper>
       </Styled.Wrapper>