Chore/compute variogram

src/features/AddModelDialog/AddModelDialog.styled.ts → src/features/AddModel/AddModelDialog/AddModelDialog.styled.ts

@@ -1,6 +1,6 @@
 import { Dialog } from '@equinor/eds-core-react'
 import styled from 'styled-components'
-import { spacings } from '../../tokens/spacings'
+import { spacings } from '../../../tokens/spacings'
 
 const StyledDialog = styled(Dialog)`
   min-width: 600px;

src/features/FileUploader/FileUploader.styled.ts → src/features/AddModel/FileUploader/FileUploader.styled.ts

@@ -1,6 +1,6 @@
 import { Typography } from '@equinor/eds-core-react'
 import styled from 'styled-components'
-import { spacings } from '../../tokens/spacings'
+import { spacings } from '../../../tokens/spacings'
 
 /*
   Note: Hiding the input element because it is ugly,

src/features/FileUploader/FileUploader.tsx → src/features/AddModel/FileUploader/FileUploader.tsx

@@ -1,7 +1,7 @@
 import { Icon } from '@equinor/eds-core-react'
 import { subdirectory_arrow_right as arrowIcon } from '@equinor/eds-icons'
 import { ChangeEvent, useRef } from 'react'
-import { theme } from '../../tokens/theme'
+import { theme } from '../../../tokens/theme'
 import { FileUpload, SelectFile } from './FileUploader.styled'
 
 interface FileUploaderProps {

src/features/ModelInputFilesTable/ModelInputFilesTable.tsx → src/features/AddModel/ModelInputFilesTable/ModelInputFilesTable.tsx

@@ -1,7 +1,7 @@
 import { Button, Table } from '@equinor/eds-core-react'
 import { delete_to_trash as deleteIcon } from '@equinor/eds-icons'
 import { ChangeEvent } from 'react'
-import IconButton from '../../components/IconButton/IconButton'
+import IconButton from '../../../components/IconButton/IconButton'
 import { FileUploader } from '../FileUploader/FileUploader'
 
 type FileDisplay = { isVisible: boolean; toggle: () => void }

src/features/ModelMetadata/ModelMetadata.styled.ts → src/features/AddModel/ModelMetadata/ModelMetadata.styled.ts

@@ -1,5 +1,5 @@
 import styled from 'styled-components'
-import { spacings } from '../../tokens/spacings'
+import { spacings } from '../../../tokens/spacings'
 
 export const ModelMetadata = styled.div`
   &.model-metadata {

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

@@ -16,22 +16,22 @@ export const Case = styled.div`
   padding: ${spacings.LARGE};
   column-gap: ${spacings.MEDIUM};
 
-  border: solid thin ${theme.light.ui.background.medium};
+  border-bottom: solid thin ${theme.light.ui.background.medium};
 `
 
 export const Parameters = styled.div`
   display: flex;
   flex-direction: column;
   row-gap: ${spacings.MEDIUM};
 
-  background-color: ${theme.light.ui.background.light};
   padding: ${spacings.LARGE};
   background-color: ${theme.light.ui.background.light};
+  border-radius: 0 0 ${spacings.CARD_ROUNDED} 0;
 `
 
 export const Wrapper = styled.div`
   border-left: solid;
-  border-width: thick;
+  border-width: ${spacings.SMALL};
   border-color: ${theme.light.primary.resting};
-  border-radius: ${spacings.X_SMALL};
+  border-radius: ${spacings.BORDER_ROUNDED};
 `

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

@@ -5,7 +5,7 @@ import { theme } from '../../../../../tokens/theme'
 export const Parameters = styled.div`
   background-color: ${theme.light.ui.background.default};
   padding: ${spacings.MEDIUM};
-  border-radius: ${spacings.X_SMALL};
+  border-radius: ${spacings.CARD_ROUNDED};
   box-shadow: ${theme.light.ui.elevation.raised};
 
   display: flex;

src/features/ModelView/ModelMetadataView/ModelMetadataView.tsx

@@ -2,9 +2,12 @@ import { Button, Table, Typography } from '@equinor/eds-core-react'
 import { useParams } from 'react-router-dom'
 import { useAnalogueModels } from '../../../hooks/useAnalogueModels'
 
+export type ModelParam = {
+  id: string
+}
 export const ModelMetadataView = () => {
-  const { id } = useParams<{ id: string }>()
-  const { model } = useAnalogueModels(id!)
+  const { id } = useParams<keyof ModelParam>() as ModelParam
+  const { model } = useAnalogueModels(id)
 
   if (model.isLoading) <p>Loading.....</p>
 

src/features/ModelView/ModelNameFrame/ModelNameFrame.styled.tsx

@@ -6,6 +6,7 @@ export const NameFrame = styled.div`
   width: 100%;
   padding: ${spacings.LARGE} 0;
   background-color: ${theme.light.ui.background.light};
+  border-left: solid ${spacings.XX_SMALL} ${theme.light.ui.background.medium};
 
   > h1 {
     margin: 0;

src/features/ModelView/ModelSourceView/ModelSourceView.tsx

@@ -1,9 +1,10 @@
 import { Table, Typography } from '@equinor/eds-core-react'
 import { useParams } from 'react-router-dom'
 import { useAnalogueModels } from '../../../hooks/useAnalogueModels'
+import { ModelParam } from '../ModelMetadataView/ModelMetadataView'
 export const ModelSourceView = () => {
-  const { id } = useParams<{ id: string }>()
-  const { model } = useAnalogueModels(id!)
+  const { id } = useParams<keyof ModelParam>() as ModelParam
+  const { model } = useAnalogueModels(id)
 
   if (model.isLoading) <p>Loading.....</p>
 
@@ -25,7 +26,7 @@ export const ModelSourceView = () => {
           model.isFetched &&
           (model.data.data.fileUploads?.length === undefined ||
             model.data.data.fileUploads?.length > 0) ? (
-            model.data.data.fileUploads?.map((file: any) => (
+            model.data.data.fileUploads?.map((file: AnalogueModel) => (
               <Table.Row key={file.uploadId} className="table-row">
                 <Table.Cell className="table-first-col">
                   {file.originalFileName}

src/hooks/useAnalogueModels.tsx

@@ -20,7 +20,6 @@ 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, {
@@ -50,31 +49,27 @@ export function useAnalogueModels(id: string) {
     return data
   }
 
-  async function uploadNCFile(modelId: string, file: File) {
+  async function uploadNCFile(id: string, file: File) {
     axios.defaults.baseURL = process.env.REACT_APP_BACKEND_ENV
     const form = new FormData()
     form.append('file', file)
-    const { data } = await axios.post(
-      NC_FILE_KEY.replace('{id}', modelId),
-      form,
-      {
-        headers: {
-          Authorization: `Bearer ${token}`,
-          'Content-Type': 'multipart/form-data',
-        },
-      }
-    )
+    const { data } = await axios.post(NC_FILE_KEY.replace('{id}', id), form, {
+      headers: {
+        Authorization: `Bearer ${token}`,
+        'Content-Type': 'multipart/form-data',
+      },
+    })
     return data
   }
 
   const models = useQuery(['models', token], fetchModels, { enabled: !!token })
   // TODO: might want to add queryFn to this:
 
   const model: AnalogueModel = useQuery({
-    queryKey: ['model', token, modelId],
-    queryFn: () => fetchModel(modelId),
+    queryKey: ['model', token, id],
+    queryFn: () => fetchModel(id),
 
-    enabled: !!modelId,
+    enabled: !!id,
   })
 
   return {

src/pages/Browse/Browse.tsx

@@ -1,7 +1,7 @@
 import { Button, Snackbar, Typography } from '@equinor/eds-core-react'
 import { useState } from 'react'
 import { Table } from '../../components/Table'
-import { AddModelDialog } from '../../features/AddModelDialog/AddModelDialog'
+import { AddModelDialog } from '../../features/AddModel/AddModelDialog/AddModelDialog'
 import { useAnalogueModels } from '../../hooks/useAnalogueModels'
 import * as Styled from './Browse.styled'
 

src/pages/ModelPages/Compute/ComputeVariogram/ComputeVariogram.styled.tsx

@@ -7,22 +7,24 @@ export const Case = styled.div`
   display: flex;
   flex-direction: column;
 
-  margin: ${spacings.X_LARGE};
+  padding: ${spacings.X_LARGE};
   column-gap: ${spacings.MEDIUM};
   row-gap: ${spacings.XXX_LARGE};
 
-  width: 70%;
+  width: 75%;
 
   @media (max-width: 1450px) {
     width: 95%;
   }
+
+  border-left: solid ${spacings.XX_SMALL} ${theme.light.ui.background.medium};
 `
 export const CaseBorder = styled.div`
   display: flex;
   flex-direction: column;
   row-gap: ${spacings.XXX_LARGE};
 
-  border-radius: ${spacings.X_SMALL};
+  border-radius: ${spacings.CARD_ROUNDED};
   border: solid 1px ${theme.light.ui.background.medium};
 `
 export const AddCaseButton = styled(Button)`

src/pages/ModelPages/Model/Model.styled.tsx

@@ -1,4 +1,5 @@
 import styled from 'styled-components'
+import { theme } from '../../../tokens/theme'
 
 export const Wrapper = styled.div`
   display: flex;
@@ -16,4 +17,7 @@ export const ContentWrapper = styled.div`
 export const SidebarWrapper = styled.div`
   heigth: 100%;
   max-width: 256px;
+  > div {
+    border-color: ${theme.light.ui.background.medium};
+  }
 `

src/pages/ModelPages/Model/Model.tsx

@@ -1,12 +1,13 @@
 import { Outlet, useParams } from 'react-router-dom'
+import { ModelParam } from '../../../features/ModelView/ModelMetadataView/ModelMetadataView'
 import { ModelNameFrame } from '../../../features/ModelView/ModelNameFrame/ModelNameFrame'
 import { ModelNavigationBar } from '../../../features/ModelView/ModelNavigationBar/ModelNavigationBar'
 import { useAnalogueModels } from '../../../hooks/useAnalogueModels'
 import * as Styled from './Model.styled'
 
 export const Model = () => {
-  const { id } = useParams<{ id: string }>()
-  const { model } = useAnalogueModels(id!)
+  const { id } = useParams<keyof ModelParam>() as ModelParam
+  const { model } = useAnalogueModels(id)
 
   if (model.isLoading) <p>Loading.....</p>
 

src/tokens/spacings.ts

@@ -25,4 +25,8 @@ export const spacings = {
   XXXX_LARGE: '64px',
   /** 92px */
   COMPUTE_BUTTON: '92px',
+  /** 5px */
+  CARD_ROUNDED: '5px',
+  /** 4px */
+  BORDER_ROUNDED: '4px', // CARD_ROUNDED - 1px
 }