Chore/merge result

src/App.styled.tsx

@@ -2,6 +2,5 @@ import styled from 'styled-components';
 
 const StyledOutletWrapper = styled.section`
   height: calc(100% - 128px);
-  overflow: scroll;
 `;
 export { StyledOutletWrapper as OutletWrapper };

src/features/ModelView/ModelNavigationBar/ModelNavigationBar.styled.tsx

@@ -12,14 +12,17 @@ export const StyledSidebarContent = styled(SideBar.Content)`
 
 export const StyledSidebarLink = styled(SideBar.Link)`
   &.activeTab {
-    background: none;
+    background: transparent;
     > p {
       color: ${theme.light.primary.resting};
       font-weight: bold;
     }
     > svg {
       fill: ${theme.light.primary.resting};
     }
+    &:hover {
+      background-color: ${theme.light.ui.background.light};
+    }
   }
 `;
 
@@ -31,7 +34,7 @@ export const StyledAccordionItem = styled(SideBar.AccordionItem)`
   }
 
   &.activeTab {
-    background: none;
+    background: transparent;
 
     > div {
       border-left: solid;
@@ -47,6 +50,9 @@ export const StyledAccordionItem = styled(SideBar.AccordionItem)`
         fill: ${theme.light.primary.resting};
       }
     }
+    &:hover {
+      background-color: ${theme.light.ui.background.light};
+    }
   }
 `;
 

src/features/ModelView/ModelNavigationBar/ModelNavigationBar.tsx

@@ -7,7 +7,7 @@ import {
   format_list_bulleted as formatListBullet,
   settings,
 } from '@equinor/eds-icons';
-import { useLocation } from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router-dom';
 import * as Styled from './ModelNavigationBar.styled';
 
 type MenuItems = SidebarLinkProps & {
@@ -23,6 +23,7 @@ export const ModelNavigationBar = () => {
   const location = useLocation();
   const tab = location.pathname.split('/');
   const path = tab[tab.length - 1];
+  const path2 = tab[tab.length - 2];
 
   const menuItems: SidebarLinkProps[] = [
     {
@@ -58,6 +59,7 @@ export const ModelNavigationBar = () => {
       },
     ],
   };
+  const navigate = useNavigate();
 
   return (
     <SideBar open>
@@ -67,6 +69,9 @@ export const ModelNavigationBar = () => {
           key={menuItems[0].label}
           {...menuItems[0]}
           active={menuItems[0].href === path}
+          onClick={() => {
+            navigate('details');
+          }}
         ></Styled.SidebarLink>
         <Styled.SidebarLink
           disabled
@@ -75,22 +80,32 @@ export const ModelNavigationBar = () => {
           label={sidebarCompute.label}
           icon={sidebarCompute.icon}
           active={'object' === path || 'variogram' === path}
-          href={'variogram'}
+          onClick={() => {
+            navigate('variogram');
+          }}
         ></Styled.SidebarLink>
         {sidebarCompute.subItems?.map((item) => (
           <Styled.AccordionItem
             className={item.href === path && 'activeTab actTab'}
             key={item.label}
             label={item.label}
             active={item.href === path && item.label === 'Variogram'}
-            href={item.href}
+            onClick={() => {
+              navigate(`${item.href}`);
+            }}
           ></Styled.AccordionItem>
         ))}
         <Styled.SidebarLink
-          className={menuItems[1].href === path && 'activeTab'}
+          className={
+            (menuItems[1].href === path || menuItems[1].href === path2) &&
+            'activeTab'
+          }
           key={menuItems[1].label}
           {...menuItems[1]}
-          active={menuItems[1].href === path}
+          active={menuItems[1].href === path || menuItems[1].href === path2}
+          onClick={() => {
+            navigate('results');
+          }}
         ></Styled.SidebarLink>
       </Styled.SidebarContent>
     </SideBar>

src/features/ModelView/ModelView.styled.tsx

@@ -5,12 +5,11 @@ export const MetadataWrapper = styled.div`
   display: flex;
   flex-direction: row;
   justify-content: space-between;
-  height: 100%;
+  height: calc(100% - 75.5px);
   width: 100%;
   padding: ${spacings.X_LARGE};
   row-gap: ${spacings.XXX_LARGE};
   column-gap: ${spacings.X_LARGE};
-  overflow-y: scroll;
 
   @media (max-width: 1350px) {
     flex-direction: column;

src/features/Results/CaseResult/CaseResultCard/CaseResultCard.styled.tsx

@@ -0,0 +1,19 @@
+import styled from 'styled-components';
+import { spacings } from '../../../../tokens/spacings';
+import { theme } from '../../../../tokens/theme';
+
+export const CaseResultCard = styled.div`
+  display: flex;
+  flex-direction: row;
+
+  width: 60%;
+  column-gap: ${spacings.LARGE};
+  padding-left: ${spacings.LARGE};
+
+  background-color: ${theme.light.ui.background.light};
+
+  &:hover {
+    background-color: ${theme.light.ui.background.medium};
+    cursor: pointer;
+  }
+`;

src/features/Results/CaseResult/CaseResultCard/CaseResultCard.tsx

@@ -0,0 +1,17 @@
+import { useNavigate } from 'react-router-dom';
+import { ResultType } from '../../../../pages/ModelPages/Results/Results';
+import * as Styled from './CaseResultCard.styled';
+
+export const CaseResultCard = ({ result }: { result: ResultType }) => {
+  const navigate = useNavigate();
+  const handleClick = () => {
+    navigate(`${result.id}`);
+  };
+
+  return (
+    <Styled.CaseResultCard onClick={handleClick}>
+      <h2>{result.case}</h2>
+      {result.finished ? <h4>Finished</h4> : <h4>Not computed yet!</h4>}
+    </Styled.CaseResultCard>
+  );
+};

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

@@ -0,0 +1,12 @@
+import styled from 'styled-components';
+import { spacings } from '../../../../tokens/spacings';
+
+export const CaseResultList = styled.div`
+  display: flex;
+  flex-direction: column;
+
+  column-gap: ${spacings.LARGE};
+  row-gap: ${spacings.LARGE};
+
+  margin: ${spacings.XXX_LARGE};
+`;

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

@@ -0,0 +1,13 @@
+import { ResultType } from '../../../../pages/ModelPages/Results/Results';
+import { CaseResultCard } from '../../CaseResult/CaseResultCard/CaseResultCard';
+import * as Styled from './CaseResultList.styled';
+
+export const CaseResultList = ({ results }: { results: ResultType[] }) => {
+  return (
+    <Styled.CaseResultList>
+      {results.map((res: ResultType) => (
+        <CaseResultCard key={res.id} result={res} />
+      ))}
+    </Styled.CaseResultList>
+  );
+};

src/features/Results/CaseResult/CaseResultView/CaseResultView.styled.tsx

@@ -0,0 +1,9 @@
+import styled from 'styled-components';
+import { spacings } from '../../../../tokens/spacings';
+export const CaseResultView = styled.div`
+  display: flex;
+  flex-direction: column;
+
+  column-gap: ${spacings.LARGE};
+  padding-left: ${spacings.LARGE};
+`;

src/features/Results/CaseResult/CaseResultView/CaseResultView.tsx

@@ -0,0 +1,24 @@
+import { ResultType } from '../../../../pages/ModelPages/Results/Results';
+import * as Styled from './CaseResultView.styled';
+
+export const CaseResultView = () => {
+  const caseResult: ResultType = {
+    id: '1',
+    case: 'Variogramcase 1',
+    finished: true,
+  };
+  // const results: ResultType[] = [
+  //   { id: '1', case: 'Variogramcase 1', finished: true },
+  //   { id: '2', case: 'Variogramcase 2', finished: false },
+  // ]
+
+  return (
+    <>
+      <Styled.CaseResultView>
+        <h2>Case Result</h2>
+        <h3>{caseResult.case}</h3>
+        {caseResult.finished ? <h4>Finished</h4> : <h4>Not computed yet!</h4>}
+      </Styled.CaseResultView>
+    </>
+  );
+};

src/pages/Layout.tsx

@@ -1,11 +1,11 @@
+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';
 import AppBar from '../features/AppBar/AppBar';
 import { Footer } from '../features/Footer/Footer';
-import * as Styled from '../App.styled';
-import { useEffect } from 'react';
-import { useMsal } from '@azure/msal-react';
 import { useAccessToken } from '../hooks/useAccessToken';
-import { OpenAPI } from '../api/generated/core/OpenAPI';
 
 export const Layout = () => {
   const { instance, accounts } = useMsal();
@@ -16,12 +16,12 @@ export const Layout = () => {
   }, [token, accounts]);
 
   return (
-    <div>
+    <>
       <AppBar title="PEPM" />
       <Styled.OutletWrapper>
         <Outlet />
       </Styled.OutletWrapper>
       <Footer text="All information is proprietary of Equinor © 2023 Equinor ASA" />
-    </div>
+    </>
   );
 };

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

@@ -12,6 +12,7 @@ export const Wrapper = styled.div`
 
 export const ContentWrapper = styled.div`
   width: 100%;
+  overflow: scroll;
 `;
 
 export const SidebarWrapper = styled.div`

src/pages/ModelPages/Results/Results.tsx

@@ -1,7 +1,21 @@
+import { CaseResultList } from '../../../features/Results/CaseResult/CaseResultList/CaseResultList';
 import { NoResults } from '../../../features/Results/NoResults/NoResults';
 
+export type ResultType = {
+  id: string;
+  case: string;
+  finished: boolean;
+};
 export const Results = () => {
-  const results = undefined;
+  const loaded = true;
+  const results: ResultType[] = [
+    { id: '1', case: 'Variogramcase 1', finished: true },
+    { id: '2', case: 'Variogramcase 2', finished: false },
+  ];
 
-  return <>{results ? <p>Results Here</p> : <NoResults />}</>;
+  return (
+    <>
+      {loaded && results ? <CaseResultList results={results} /> : <NoResults />}
+    </>
+  );
 };

src/router.tsx

@@ -1,6 +1,7 @@
 import { createBrowserRouter, NonIndexRouteObject } from 'react-router-dom';
 import { App } from './App';
 import { ModelView } from './features/ModelView/ModelView';
+import { CaseResultView } from './features/Results/CaseResult/CaseResultView/CaseResultView';
 import { About } from './pages/About/About';
 import { Api } from './pages/Api/Api';
 import { Browse } from './pages/Browse/Browse';
@@ -46,6 +47,7 @@ const appRoutes = (tabs as NonIndexRouteObject[]).concat([
         path: 'results',
         element: <Results />,
       },
+      { path: 'results/:id', element: <CaseResultView /> },
     ],
   },
 ]);