Chore/path fix

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<boolean>(false);
   const [activeModel, setActiveModel] = useState<string>();
   const { isLoading, data } = useQuery({
     queryKey: ['analogue-models'],
     queryFn: () => AnalogueModelsService.getApiAnalogueModels(),
+    enabled: !!token,
   });
 
   const navigate = useNavigate();

src/features/ModelView/ModelMetadataView/ModelMetadataView.tsx

@@ -1,16 +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 { id } = useParams();
+  const { modelId } = useParams();
+  const { instance, accounts } = useMsal();
+  const token = useAccessToken(instance, accounts[0]);
+
   const { isLoading, data } = useQuery({
-    queryKey: ['analogue-models', id],
-    queryFn: () => AnalogueModelsService.getApiAnalogueModels1(id as string),
+    queryKey: ['analogue-models', modelId],
+    queryFn: () =>
+      AnalogueModelsService.getApiAnalogueModels1(modelId as string),
+    enabled: !!token,
   });
   if (isLoading || !data?.success) return <p>Loading ...</p>;
 

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};

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 (
     <Styled.NameFrame className="metadata-name-frame">
-      <h1>{model.name}</h1>
+      {model ? <h1>{model.name}</h1> : <h1>Loading ....</h1>}
     </Styled.NameFrame>
   );
 };

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,20 +61,20 @@ export const ModelNavigationBar = () => {
       },
     ],
   };
-  const navigate = useNavigate();
 
   return (
     <SideBar open>
       <Styled.SidebarContent>
         <Styled.SidebarLink
           className={menuItems[0].href === path && 'activeTab'}
-          key={menuItems[0].label}
-          {...menuItems[0]}
+          label={menuItems[0].label}
+          icon={menuItems[0].icon}
           active={menuItems[0].href === path}
           onClick={() => {
             navigate('details');
           }}
         ></Styled.SidebarLink>
+
         <Styled.SidebarLink
           disabled
           className={('object' === path || 'variogram' === path) && 'activeTab'}
@@ -95,13 +97,14 @@ export const ModelNavigationBar = () => {
             }}
           ></Styled.AccordionItem>
         ))}
+
         <Styled.SidebarLink
           className={
             (menuItems[1].href === path || menuItems[1].href === path2) &&
             'activeTab'
           }
-          key={menuItems[1].label}
-          {...menuItems[1]}
+          label={menuItems[1].label}
+          icon={menuItems[1].icon}
           active={menuItems[1].href === path || menuItems[1].href === path2}
           onClick={() => {
             navigate('results');

src/features/ModelView/ModelSourceView/ModelSourceView.tsx

@@ -1,13 +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 { id } = useParams();
+  const { modelId } = useParams();
+  const { instance, accounts } = useMsal();
+  const token = useAccessToken(instance, accounts[0]);
+
   const { isLoading, data } = useQuery({
-    queryKey: ['analogue-models', id],
-    queryFn: () => AnalogueModelsService.getApiAnalogueModels1(id as string),
+    queryKey: ['analogue-models', modelId],
+    queryFn: () =>
+      AnalogueModelsService.getApiAnalogueModels1(modelId as string),
+    enabled: !!token,
   });
 
   if (isLoading || !data?.success) return <p>Loading ...</p>;

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 (

src/features/Results/CaseResult/CaseResultList/CaseResultList.tsx

@@ -6,7 +6,7 @@ export const CaseResultList = ({ results }: { results: ResultType[] }) => {
   return (
     <Styled.CaseResultList>
       {results.map((res: ResultType) => (
-        <CaseResultCard key={res.id} result={res} />
+        <CaseResultCard key={res.caseId} result={res} />
       ))}
     </Styled.CaseResultList>
   );

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 = () => {
       <h2>Case Results</h2>
       <h3>{caseResult.case}</h3>
       <Styled.CaseResultList>
-        <ResultMetadata caseNumner={0} img={Img}></ResultMetadata>
-        <ResultMetadata caseNumner={1} img={Img1}></ResultMetadata>
-        <ResultMetadata caseNumner={2} img={Img1}></ResultMetadata>
+        <ResultMetadata key={0} caseNumner={0} img={Img}></ResultMetadata>
+        <ResultMetadata key={1} caseNumner={1} img={Img1}></ResultMetadata>
+        <ResultMetadata key={2} caseNumner={2} img={Img1}></ResultMetadata>
       </Styled.CaseResultList>
     </Styled.CaseResultView>
   );
@@ -106,23 +106,23 @@ const ResultMetadata = ({
     <Styled.CaseResultCard>
       <Styled.CaseLeftDiv>
         <Table>
-          <Table.Body>
-            <Table.Row key={data[caseNumner].identifier} className="table-row">
+          <Table.Body key={data[caseNumner].identifier}>
+            <Table.Row className="table-row">
               <Table.Cell className="table-first-col">Family</Table.Cell>
               <Table.Cell>{data[caseNumner].family}</Table.Cell>
             </Table.Row>
-            <Table.Row key={data[caseNumner].identifier} className="table-row">
+            <Table.Row className="table-row">
               <Table.Cell className="table-first-col">
                 Quality factor
               </Table.Cell>
               <Table.Cell>{data[caseNumner].quality}</Table.Cell>
             </Table.Row>
 
-            <Table.Row key={data[caseNumner].identifier} className="table-row">
+            <Table.Row className="table-row">
               <Table.Cell className="table-first-col">Attribute</Table.Cell>
               <Table.Cell>{data[caseNumner].attribute}</Table.Cell>
             </Table.Row>
-            <Table.Row key={data[caseNumner].identifier} className="table-row">
+            <Table.Row className="table-row">
               <Table.Cell className="table-first-col">Sigma</Table.Cell>
               <Table.Cell>{data[caseNumner].sigma}</Table.Cell>
             </Table.Row>

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,

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 (
     <>

src/pages/ModelPages/Model/Model.tsx

@@ -1,16 +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';
-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 { instance, accounts } = useMsal();
+  const token = useAccessToken(instance, accounts[0]);
 
   const { data, isLoading } = useQuery({
-    queryKey: ['analogue-models', id],
-    queryFn: () => AnalogueModelsService.getApiAnalogueModels1(id as string),
+    queryKey: ['analogue-models', modelId],
+    queryFn: () =>
+      AnalogueModelsService.getApiAnalogueModels1(modelId as string),
+    enabled: !!token,
   });
 
   if (isLoading) <p>Loading.....</p>;
@@ -22,7 +28,7 @@ export const Model = () => {
           <ModelNavigationBar />
         </Styled.SidebarWrapper>
         <Styled.ContentWrapper>
-          {data?.success && <ModelNameFrame model={data.data} />}
+          <ModelNameFrame model={data?.data} />
 
           <Outlet />
         </Styled.ContentWrapper>

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 (

src/router.tsx

@@ -26,7 +26,7 @@ const tabs: Tab[] = [
 ];
 const appRoutes = (tabs as NonIndexRouteObject[]).concat([
   {
-    path: 'model/:id/',
+    path: 'model/:modelId/',
     element: <Model />,
     children: [
       {
@@ -47,7 +47,7 @@ const appRoutes = (tabs as NonIndexRouteObject[]).concat([
         path: 'results',
         element: <Results />,
       },
-      { path: 'results/:id', element: <CaseResultView /> },
+      { path: 'results/:caseId', element: <CaseResultView /> },
     ],
   },
 ]);

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 */