From 7c781d034ef71930e4eaffa77f2f9f8f9680fd50 Mon Sep 17 00:00:00 2001 From: mheggelund Date: Thu, 26 Oct 2023 14:03:25 +0200 Subject: [PATCH 1/4] refactor: changed parm id names --- .../ModelMetadataView/ModelMetadataView.tsx | 7 ++++--- .../ModelSourceView/ModelSourceView.tsx | 7 ++++--- .../CaseResultCard/CaseResultCard.tsx | 2 +- .../CaseResultList/CaseResultList.tsx | 2 +- .../CaseResultView/CaseResultView.tsx | 18 +++++++++--------- src/pages/ModelPages/Model/Model.tsx | 11 ++++++----- src/pages/ModelPages/Results/Results.tsx | 6 +++--- src/router.tsx | 4 ++-- 8 files changed, 30 insertions(+), 27 deletions(-) diff --git a/src/features/ModelView/ModelMetadataView/ModelMetadataView.tsx b/src/features/ModelView/ModelMetadataView/ModelMetadataView.tsx index 07c242f9..2a18594e 100644 --- a/src/features/ModelView/ModelMetadataView/ModelMetadataView.tsx +++ b/src/features/ModelView/ModelMetadataView/ModelMetadataView.tsx @@ -7,10 +7,11 @@ export type ModelParam = { id: string; }; export const ModelMetadataView = () => { - const { id } = useParams(); + const { modelId } = useParams(); const { isLoading, data } = useQuery({ - queryKey: ['analogue-models', id], - queryFn: () => AnalogueModelsService.getApiAnalogueModels1(id as string), + queryKey: ['analogue-models', modelId], + queryFn: () => + AnalogueModelsService.getApiAnalogueModels1(modelId as string), }); if (isLoading || !data?.success) return

Loading ...

; diff --git a/src/features/ModelView/ModelSourceView/ModelSourceView.tsx b/src/features/ModelView/ModelSourceView/ModelSourceView.tsx index 7c0c54d3..678d2083 100644 --- a/src/features/ModelView/ModelSourceView/ModelSourceView.tsx +++ b/src/features/ModelView/ModelSourceView/ModelSourceView.tsx @@ -4,10 +4,11 @@ import { useParams } from 'react-router-dom'; import { AnalogueModelsService, UploadList } from '../../../api/generated'; export const ModelSourceView = () => { - const { id } = useParams(); + const { modelId } = useParams(); const { isLoading, data } = useQuery({ - queryKey: ['analogue-models', id], - queryFn: () => AnalogueModelsService.getApiAnalogueModels1(id as string), + queryKey: ['analogue-models', modelId], + queryFn: () => + AnalogueModelsService.getApiAnalogueModels1(modelId as string), }); if (isLoading || !data?.success) return

Loading ...

; diff --git a/src/features/Results/CaseResult/CaseResultCard/CaseResultCard.tsx b/src/features/Results/CaseResult/CaseResultCard/CaseResultCard.tsx index 13816c2a..f797179b 100644 --- a/src/features/Results/CaseResult/CaseResultCard/CaseResultCard.tsx +++ b/src/features/Results/CaseResult/CaseResultCard/CaseResultCard.tsx @@ -5,7 +5,7 @@ import * as Styled from './CaseResultCard.styled'; export const CaseResultCard = ({ result }: { result: ResultType }) => { const navigate = useNavigate(); const handleClick = () => { - navigate(`${result.id}`); + navigate(`${result.caseId}`); }; return ( diff --git a/src/features/Results/CaseResult/CaseResultList/CaseResultList.tsx b/src/features/Results/CaseResult/CaseResultList/CaseResultList.tsx index 31e1ef03..78a08596 100644 --- a/src/features/Results/CaseResult/CaseResultList/CaseResultList.tsx +++ b/src/features/Results/CaseResult/CaseResultList/CaseResultList.tsx @@ -6,7 +6,7 @@ export const CaseResultList = ({ results }: { results: ResultType[] }) => { return ( {results.map((res: ResultType) => ( - + ))} ); diff --git a/src/features/Results/CaseResult/CaseResultView/CaseResultView.tsx b/src/features/Results/CaseResult/CaseResultView/CaseResultView.tsx index 9ea723b0..c1183780 100644 --- a/src/features/Results/CaseResult/CaseResultView/CaseResultView.tsx +++ b/src/features/Results/CaseResult/CaseResultView/CaseResultView.tsx @@ -8,7 +8,7 @@ import Img from './vargrest_output-0-_variogram_slices_.png'; import Img1 from './vargrest_output-1-_variogram_slices_.png'; export const CaseResultView = () => { const caseResult: ResultType = { - id: '1', + caseId: '1', case: 'Variogramcase 1', finished: true, }; @@ -22,9 +22,9 @@ export const CaseResultView = () => {

Case Results

{caseResult.case}

- - - + + + ); @@ -106,23 +106,23 @@ const ResultMetadata = ({ - - + + Family {data[caseNumner].family} - + Quality factor {data[caseNumner].quality} - + Attribute {data[caseNumner].attribute} - + Sigma {data[caseNumner].sigma} diff --git a/src/pages/ModelPages/Model/Model.tsx b/src/pages/ModelPages/Model/Model.tsx index 5a61cc93..a2647734 100644 --- a/src/pages/ModelPages/Model/Model.tsx +++ b/src/pages/ModelPages/Model/Model.tsx @@ -1,16 +1,17 @@ +import { useQuery } from '@tanstack/react-query'; import { Outlet, useParams } from 'react-router-dom'; +import { AnalogueModelsService } from '../../../api/generated'; import { ModelNameFrame } from '../../../features/ModelView/ModelNameFrame/ModelNameFrame'; import { ModelNavigationBar } from '../../../features/ModelView/ModelNavigationBar/ModelNavigationBar'; import * as Styled from './Model.styled'; -import { useQuery } from '@tanstack/react-query'; -import { AnalogueModelsService } from '../../../api/generated'; export const Model = () => { - const { id } = useParams<{ id: string }>(); + const { modelId } = useParams<{ modelId: string }>(); const { data, isLoading } = useQuery({ - queryKey: ['analogue-models', id], - queryFn: () => AnalogueModelsService.getApiAnalogueModels1(id as string), + queryKey: ['analogue-models', modelId], + queryFn: () => + AnalogueModelsService.getApiAnalogueModels1(modelId as string), }); if (isLoading)

Loading.....

; diff --git a/src/pages/ModelPages/Results/Results.tsx b/src/pages/ModelPages/Results/Results.tsx index 6e47be16..0c44c49a 100644 --- a/src/pages/ModelPages/Results/Results.tsx +++ b/src/pages/ModelPages/Results/Results.tsx @@ -2,15 +2,15 @@ import { CaseResultList } from '../../../features/Results/CaseResult/CaseResultL import { NoResults } from '../../../features/Results/NoResults/NoResults'; export type ResultType = { - id: string; + caseId: string; case: string; finished: boolean; }; export const Results = () => { const loaded = true; const results: ResultType[] = [ - { id: '1', case: 'Variogramcase 1', finished: true }, - { id: '2', case: 'Variogramcase 2', finished: false }, + { caseId: '1', case: 'Variogramcase 1', finished: true }, + { caseId: '2', case: 'Variogramcase 2', finished: false }, ]; return ( diff --git a/src/router.tsx b/src/router.tsx index 4523c253..98159b2d 100644 --- a/src/router.tsx +++ b/src/router.tsx @@ -26,7 +26,7 @@ const tabs: Tab[] = [ ]; const appRoutes = (tabs as NonIndexRouteObject[]).concat([ { - path: 'model/:id/', + path: 'model/:modelId/', element: , children: [ { @@ -47,7 +47,7 @@ const appRoutes = (tabs as NonIndexRouteObject[]).concat([ path: 'results', element: , }, - { path: 'results/:id', element: }, + { path: 'results/:caseId', element: }, ], }, ]); From 6da66b24a8597286f7a9bb7e48898389326daed9 Mon Sep 17 00:00:00 2001 From: mheggelund Date: Mon, 30 Oct 2023 12:48:13 +0100 Subject: [PATCH 2/4] style: fixed nameFrame position and loading state --- .../ModelView/ModelNameFrame/ModelNameFrame.styled.tsx | 1 + src/features/ModelView/ModelNameFrame/ModelNameFrame.tsx | 4 ++-- src/pages/ModelPages/Model/Model.tsx | 2 +- src/tokens/spacings.ts | 2 ++ 4 files changed, 6 insertions(+), 3 deletions(-) diff --git a/src/features/ModelView/ModelNameFrame/ModelNameFrame.styled.tsx b/src/features/ModelView/ModelNameFrame/ModelNameFrame.styled.tsx index 479bd3ff..9f35b5e7 100644 --- a/src/features/ModelView/ModelNameFrame/ModelNameFrame.styled.tsx +++ b/src/features/ModelView/ModelNameFrame/ModelNameFrame.styled.tsx @@ -4,6 +4,7 @@ import { theme } from '../../../tokens/theme'; export const NameFrame = styled.div` width: 100%; + min-height: ${spacings.NAME_FRAME}; padding: ${spacings.LARGE} 0; background-color: ${theme.light.ui.background.light}; border-left: solid ${spacings.XX_SMALL} ${theme.light.ui.background.medium}; diff --git a/src/features/ModelView/ModelNameFrame/ModelNameFrame.tsx b/src/features/ModelView/ModelNameFrame/ModelNameFrame.tsx index d2f91148..ff0ae7bf 100644 --- a/src/features/ModelView/ModelNameFrame/ModelNameFrame.tsx +++ b/src/features/ModelView/ModelNameFrame/ModelNameFrame.tsx @@ -1,10 +1,10 @@ import { AnalogueModelDetail } from '../../../api/generated'; import * as Styled from './ModelNameFrame.styled'; -export const ModelNameFrame = ({ model }: { model: AnalogueModelDetail }) => { +export const ModelNameFrame = ({ model }: { model?: AnalogueModelDetail }) => { return ( -

{model.name}

+ {model ?

{model.name}

:

Loading ....

} ); }; diff --git a/src/pages/ModelPages/Model/Model.tsx b/src/pages/ModelPages/Model/Model.tsx index a2647734..7cab57ca 100644 --- a/src/pages/ModelPages/Model/Model.tsx +++ b/src/pages/ModelPages/Model/Model.tsx @@ -23,7 +23,7 @@ export const Model = () => { - {data?.success && } + diff --git a/src/tokens/spacings.ts b/src/tokens/spacings.ts index eac16066..4dcc9f5b 100644 --- a/src/tokens/spacings.ts +++ b/src/tokens/spacings.ts @@ -23,6 +23,8 @@ export const spacings = { XXX_LARGE: comfortable.xxx_large, /** 64px */ XXXX_LARGE: '64px', + /** 75,5px */ + NAME_FRAME: '75,5px', /** 92px */ COMPUTE_BUTTON: '92px', /** 5px */ From a9d257bb7451ffa4fde4df69a9e883df28af69ff Mon Sep 17 00:00:00 2001 From: mheggelund Date: Mon, 30 Oct 2023 13:09:45 +0100 Subject: [PATCH 3/4] fix: Fixed 401 error Unauthorized --- src/components/Table.tsx | 6 ++++++ .../ModelView/ModelMetadataView/ModelMetadataView.tsx | 6 ++++++ .../ModelView/ModelNavigationBar/ModelNavigationBar.tsx | 3 ++- src/features/ModelView/ModelSourceView/ModelSourceView.tsx | 6 ++++++ src/hooks/useAccessToken.tsx | 2 +- src/pages/Layout.tsx | 5 +---- src/pages/ModelPages/Model/Model.tsx | 5 +++++ 7 files changed, 27 insertions(+), 6 deletions(-) diff --git a/src/components/Table.tsx b/src/components/Table.tsx index e447beb6..5020fb19 100644 --- a/src/components/Table.tsx +++ b/src/components/Table.tsx @@ -1,19 +1,25 @@ /* eslint-disable max-lines-per-function */ +import { useMsal } from '@azure/msal-react'; import { Button, Chip, Scrim, SideSheet } from '@equinor/eds-core-react'; import { EdsDataGrid } from '@equinor/eds-data-grid-react'; import { useQuery } from '@tanstack/react-query'; import { useState } from 'react'; import { useNavigate } from 'react-router-dom'; import { AnalogueModelsService } from '../api/generated'; +import { useAccessToken } from '../hooks/useAccessToken'; import { AreaCoordinates } from './AreaCoordinates/AreaCoordinates'; import * as Styled from './Table.styled'; export const Table = () => { + const { instance, accounts } = useMsal(); + const token = useAccessToken(instance, accounts[0]); + const [toggle, setToggle] = useState(false); const [activeModel, setActiveModel] = useState(); const { isLoading, data } = useQuery({ queryKey: ['analogue-models'], queryFn: () => AnalogueModelsService.getApiAnalogueModels(), + enabled: !!token, }); const navigate = useNavigate(); diff --git a/src/features/ModelView/ModelMetadataView/ModelMetadataView.tsx b/src/features/ModelView/ModelMetadataView/ModelMetadataView.tsx index 2a18594e..3da9488f 100644 --- a/src/features/ModelView/ModelMetadataView/ModelMetadataView.tsx +++ b/src/features/ModelView/ModelMetadataView/ModelMetadataView.tsx @@ -1,17 +1,23 @@ +import { useMsal } from '@azure/msal-react'; 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 { useAccessToken } from '../../../hooks/useAccessToken'; export type ModelParam = { id: string; }; export const ModelMetadataView = () => { const { modelId } = useParams(); + const { instance, accounts } = useMsal(); + const token = useAccessToken(instance, accounts[0]); + const { isLoading, data } = useQuery({ queryKey: ['analogue-models', modelId], queryFn: () => AnalogueModelsService.getApiAnalogueModels1(modelId as string), + enabled: !!token, }); if (isLoading || !data?.success) return

Loading ...

; diff --git a/src/features/ModelView/ModelNavigationBar/ModelNavigationBar.tsx b/src/features/ModelView/ModelNavigationBar/ModelNavigationBar.tsx index 51ac08de..a091f5f1 100644 --- a/src/features/ModelView/ModelNavigationBar/ModelNavigationBar.tsx +++ b/src/features/ModelView/ModelNavigationBar/ModelNavigationBar.tsx @@ -21,6 +21,8 @@ type MenuItems = SidebarLinkProps & { export const ModelNavigationBar = () => { const location = useLocation(); + const navigate = useNavigate(); + const tab = location.pathname.split('/'); const path = tab[tab.length - 1]; const path2 = tab[tab.length - 2]; @@ -59,7 +61,6 @@ export const ModelNavigationBar = () => { }, ], }; - const navigate = useNavigate(); return ( diff --git a/src/features/ModelView/ModelSourceView/ModelSourceView.tsx b/src/features/ModelView/ModelSourceView/ModelSourceView.tsx index 678d2083..e5c93fc2 100644 --- a/src/features/ModelView/ModelSourceView/ModelSourceView.tsx +++ b/src/features/ModelView/ModelSourceView/ModelSourceView.tsx @@ -1,14 +1,20 @@ +import { useMsal } from '@azure/msal-react'; import { Table, Typography } from '@equinor/eds-core-react'; import { useQuery } from '@tanstack/react-query'; import { useParams } from 'react-router-dom'; import { AnalogueModelsService, UploadList } from '../../../api/generated'; +import { useAccessToken } from '../../../hooks/useAccessToken'; export const ModelSourceView = () => { const { modelId } = useParams(); + const { instance, accounts } = useMsal(); + const token = useAccessToken(instance, accounts[0]); + const { isLoading, data } = useQuery({ queryKey: ['analogue-models', modelId], queryFn: () => AnalogueModelsService.getApiAnalogueModels1(modelId as string), + enabled: !!token, }); if (isLoading || !data?.success) return

Loading ...

; diff --git a/src/hooks/useAccessToken.tsx b/src/hooks/useAccessToken.tsx index 89f6e9c7..c3152445 100644 --- a/src/hooks/useAccessToken.tsx +++ b/src/hooks/useAccessToken.tsx @@ -1,6 +1,6 @@ +import { AccountInfo, IPublicClientApplication } from '@azure/msal-browser'; import { useEffect, useState } from 'react'; import { loginRequest } from '../auth/authConfig'; -import { AccountInfo, IPublicClientApplication } from '@azure/msal-browser'; export const useAccessToken = ( instance: IPublicClientApplication, diff --git a/src/pages/Layout.tsx b/src/pages/Layout.tsx index 3a3f63cc..07796045 100644 --- a/src/pages/Layout.tsx +++ b/src/pages/Layout.tsx @@ -1,5 +1,4 @@ import { useMsal } from '@azure/msal-react'; -import { useEffect } from 'react'; import { Outlet } from 'react-router-dom'; import * as Styled from '../App.styled'; import { OpenAPI } from '../api/generated/core/OpenAPI'; @@ -11,9 +10,7 @@ export const Layout = () => { const { instance, accounts } = useMsal(); const token = useAccessToken(instance, accounts[0]); - useEffect(() => { - OpenAPI.TOKEN = token; - }, [token, accounts]); + if (token) OpenAPI.TOKEN = token; return ( <> diff --git a/src/pages/ModelPages/Model/Model.tsx b/src/pages/ModelPages/Model/Model.tsx index 7cab57ca..0ac97ea1 100644 --- a/src/pages/ModelPages/Model/Model.tsx +++ b/src/pages/ModelPages/Model/Model.tsx @@ -1,17 +1,22 @@ +import { useMsal } from '@azure/msal-react'; import { useQuery } from '@tanstack/react-query'; import { Outlet, useParams } from 'react-router-dom'; import { AnalogueModelsService } from '../../../api/generated'; import { ModelNameFrame } from '../../../features/ModelView/ModelNameFrame/ModelNameFrame'; import { ModelNavigationBar } from '../../../features/ModelView/ModelNavigationBar/ModelNavigationBar'; +import { useAccessToken } from '../../../hooks/useAccessToken'; import * as Styled from './Model.styled'; export const Model = () => { const { modelId } = useParams<{ modelId: string }>(); + const { instance, accounts } = useMsal(); + const token = useAccessToken(instance, accounts[0]); const { data, isLoading } = useQuery({ queryKey: ['analogue-models', modelId], queryFn: () => AnalogueModelsService.getApiAnalogueModels1(modelId as string), + enabled: !!token, }); if (isLoading)

Loading.....

; From a100031ffc3f7ba9d79b018cac350cb90b638348 Mon Sep 17 00:00:00 2001 From: mheggelund Date: Mon, 30 Oct 2023 15:40:14 +0100 Subject: [PATCH 4/4] fix: Fixed unwanted re render no sidebar navigation --- .../ModelNavigationBar/ModelNavigationBar.tsx | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/src/features/ModelView/ModelNavigationBar/ModelNavigationBar.tsx b/src/features/ModelView/ModelNavigationBar/ModelNavigationBar.tsx index a091f5f1..6fc35c1e 100644 --- a/src/features/ModelView/ModelNavigationBar/ModelNavigationBar.tsx +++ b/src/features/ModelView/ModelNavigationBar/ModelNavigationBar.tsx @@ -67,13 +67,14 @@ export const ModelNavigationBar = () => { { navigate('details'); }} > + { }} > ))} + { navigate('results');