Refactor/object results (#215)

* refactor: Split result tab into Variogram and Object results. * refactor: Adapted Object case result table and view. * fix: remove logging for debugging. * refactor: Adjust responsiveness to screen width. * refactor: Moved fetch results into own hook. Add variogramResult component. * refactor: Refactor VariogramResult component to match data structure. * fix: typo in filename.
equinor · Jan 31, 2024 · 4584090 · 4584090
1 parent 1735b62
commit 4584090
Show file tree

Hide file tree

Showing 16 changed files with 359 additions and 224 deletions.
diff --git a/src/features/AppBar/AppBar.tsx b/src/features/AppBar/AppBar.tsx
@@ -1,13 +1,11 @@
 import { TopBar } from '@equinor/eds-core-react';
-import { useLocation, useNavigate } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 import * as Styled from './AppBar.styled';
 import { Icons } from './Icons/Icons';
 import { Navigation } from './Navigation/Navigation';
 
 const AppBar = ({ title }: { title: string }) => {
   const navigate = useNavigate();
-  const location = useLocation();
-  console.log(location.pathname);
 
   return (
     <Styled.TopBar>

diff --git a/src/features/ModelView/ModelNavigationBar/ModelNavigationBar.tsx b/src/features/ModelView/ModelNavigationBar/ModelNavigationBar.tsx
@@ -1,10 +1,9 @@
 /* eslint-disable max-lines-per-function */
 import { SideBar, SidebarLinkProps } from '@equinor/eds-core-react';
 import {
+  approve as APPROVE,
+  format_list_bulleted as FORMATLISTBULLET,
   IconData,
-  // eslint-disable-next-line sort-imports
-  approve,
-  format_list_bulleted as formatListBullet,
   settings,
 } from '@equinor/eds-icons';
 import { useLocation, useNavigate } from 'react-router-dom';
@@ -27,20 +26,12 @@ export const ModelNavigationBar = () => {
   const path = tab[tab.length - 1];
   const path2 = tab[tab.length - 2];
 
-  const menuItems: SidebarLinkProps[] = [
-    {
-      label: 'Details',
-      icon: formatListBullet,
-      href: 'details',
-      active: false,
-    },
-    {
-      label: 'Results',
-      icon: approve,
-      href: 'results',
-      active: false,
-    },
-  ];
+  const menuItems: SidebarLinkProps = {
+    label: 'Details',
+    icon: FORMATLISTBULLET,
+    href: 'details',
+    active: false,
+  };
 
   const sidebarCompute: MenuItems = {
     label: 'Compute',
@@ -50,48 +41,76 @@ export const ModelNavigationBar = () => {
       {
         label: 'Variogram',
         name: 'variogram',
-        href: 'variogram',
+        href: 'compute/variogram',
         icon: settings,
       },
       {
         label: 'Object',
         name: 'object',
-        href: 'object',
+        href: 'compute/object',
         icon: settings,
       },
     ],
   };
 
+  const sidebarResults: MenuItems = {
+    label: 'Results',
+    href: '',
+    icon: APPROVE,
+    subItems: [
+      {
+        label: 'Variogram',
+        name: 'variogram',
+        href: 'results/variogram',
+        icon: APPROVE,
+      },
+      {
+        label: 'Object',
+        name: 'object',
+        href: 'results/object',
+        icon: APPROVE,
+      },
+    ],
+  };
+
   return (
     <SideBar open>
       <Styled.SidebarContent>
         <Styled.SidebarLink
-          className={menuItems[0].href === path && 'activeTab'}
-          label={menuItems[0].label}
-          icon={menuItems[0].icon}
-          active={menuItems[0].href === path}
+          className={menuItems.href === path && 'activeTab'}
+          label={menuItems.label}
+          icon={menuItems.icon}
+          active={menuItems.href === path}
           onClick={() => {
             navigate('details');
           }}
         ></Styled.SidebarLink>
 
         <Styled.SidebarLink
           disabled
-          className={('object' === path || 'variogram' === path) && 'activeTab'}
+          className={
+            ('object' === path || 'variogram' === path) &&
+            'compute' === path2 &&
+            'activeTab'
+          }
           isExpanded
           label={sidebarCompute.label}
           icon={sidebarCompute.icon}
-          active={'object' === path || 'variogram' === path}
+          active={
+            ('object' === path || 'variogram' === path) && 'compute' === path2
+          }
           onClick={() => {
-            navigate('variogram');
+            navigate('compute/variogram');
           }}
         ></Styled.SidebarLink>
         {sidebarCompute.subItems?.map((item) => (
           <Styled.AccordionItem
-            className={item.href === path && 'activeTab actTab'}
+            className={
+              item.name === path && path2 === 'compute' && 'activeTab actTab'
+            }
             key={item.label}
             label={item.label}
-            active={item.href === path && item.label === 'Variogram'}
+            active={item.name === path && path2 === 'compute'}
             onClick={() => {
               navigate(`${item.href}`);
             }}
@@ -100,16 +119,32 @@ export const ModelNavigationBar = () => {
 
         <Styled.SidebarLink
           className={
-            (menuItems[1].href === path || menuItems[1].href === path2) &&
+            ('object' === path || 'variogram' === path) &&
+            'results' === path2 &&
             'activeTab'
           }
-          label={menuItems[1].label}
-          icon={menuItems[1].icon}
-          active={menuItems[1].href === path || menuItems[1].href === path2}
+          label={sidebarResults.label}
+          icon={sidebarResults.icon}
+          active={
+            ('object' === path || 'variogram' === path) && 'results' === path2
+          }
           onClick={() => {
-            navigate('results');
+            navigate('results/variogram');
           }}
         ></Styled.SidebarLink>
+        {sidebarResults.subItems?.map((item) => (
+          <Styled.AccordionItem
+            className={
+              item.name === path && path2 === 'results' && 'activeTab actTab'
+            }
+            key={item.label}
+            label={item.label}
+            active={item.name === path && path2 === 'results'}
+            onClick={() => {
+              navigate(`${item.href}`);
+            }}
+          ></Styled.AccordionItem>
+        ))}
       </Styled.SidebarContent>
     </SideBar>
   );

diff --git a/src/features/Results/CaseResult/CaseResultView/CaseResultView.styled.tsx b/src/features/Results/CaseResult/CaseResultView/CaseResultView.styled.tsx
@@ -1,3 +1,4 @@
+import { Divider } from '@equinor/eds-core-react';
 import styled from 'styled-components';
 import { spacings } from '../../../../tokens/spacings';
 
@@ -8,12 +9,23 @@ export const CaseResultView = styled.div`
   row-gap: ${spacings.XXX_LARGE};
   padding: ${spacings.LARGE};
 
-  width: 75vw;
+  @media (min-width: 1400px) {
+    width: 80%;
+  }
 `;
 
 export const CaseResultList = styled.div`
   display: flex;
   flex-direction: column;
 
-  row-gap: ${spacings.XXX_LARGE};
+  width: 100%;
+`;
+
+export const StyledDivider = styled(Divider)`
+  margin: ${spacings.MEDIUM} 0;
+  max-width: 1108px;
+`;
+
+export const Wrapper = styled.div`
+  width: 100%;
 `;
diff --git a/src/features/Results/CaseResult/CaseResultView/CaseResultView.tsx b/src/features/Results/CaseResult/CaseResultView/CaseResultView.tsx
@@ -2,38 +2,50 @@ import * as Styled from './CaseResultView.styled';
 
 import { Typography } from '@equinor/eds-core-react';
 import { ComputeCaseDto, GetResultDto } from '../../../../api/generated';
-import { ChannelResultTable } from './ObjectCaseResult/ChannelResultTable';
+import { ChannelResult } from './ObjectCaseResult/ChannelResult';
 import { VariogramCaseResult } from './VariogramCaseResult/VariogramCaseResult';
 import ResultIMG from './vargrest_output-0-_variogram_slices_.png';
 
 export const CaseResultView = ({
-  objectList,
+  resultList,
   computeCases,
 }: {
-  objectList?: GetResultDto[];
+  resultList: GetResultDto[];
   computeCases?: ComputeCaseDto[];
 }) => {
+  const caseType = resultList[0].resultType;
+
   return (
     <Styled.CaseResultView>
-      <Typography variant="h2">Compute results</Typography>
+      <Typography variant="h2">{caseType} results</Typography>
       <Styled.CaseResultList>
-        <VariogramCaseResult
-          caseList={[]}
-          img={ResultIMG}
-        ></VariogramCaseResult>
-        {objectList &&
-          objectList.map((obj) => (
-            <ChannelResultTable
-              key={obj.computeCaseId}
-              data={obj}
-              computeCase={
-                computeCases && computeCases.length > 0
-                  ? computeCases.filter(
-                      (c) => c.computeCaseId === obj.computeCaseId,
-                    )
-                  : []
-              }
-            ></ChannelResultTable>
+        {caseType === 'Variogram' && (
+          <VariogramCaseResult
+            resultList={resultList}
+            img={ResultIMG}
+          ></VariogramCaseResult>
+        )}
+
+        {caseType === 'Object' &&
+          resultList.map((obj, index) => (
+            <Styled.Wrapper key={obj.computeCaseId}>
+              <ChannelResult
+                data={obj}
+                computeCase={
+                  computeCases && computeCases.length > 0
+                    ? computeCases.filter(
+                        (c) => c.computeCaseId === obj.computeCaseId,
+                      )
+                    : []
+                }
+              ></ChannelResult>
+              {index < resultList.length - 1 && (
+                <Styled.StyledDivider
+                  variant="small"
+                  color="medium"
+                ></Styled.StyledDivider>
+              )}
+            </Styled.Wrapper>
           ))}
       </Styled.CaseResultList>
     </Styled.CaseResultView>

diff --git a/src/features/Results/CaseResult/CaseResultView/ObjectCaseResult/ChannelResult.styled.ts b/src/features/Results/CaseResult/CaseResultView/ObjectCaseResult/ChannelResult.styled.ts
@@ -0,0 +1,21 @@
+import styled from 'styled-components';
+import { spacings } from '../../../../../tokens/spacings';
+
+export const Wrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+export const InnerWrapper = styled.div`
+  display: flex;
+  flex-direction: row;
+  column-gap: ${spacings.SMALL};
+  width: 100%;
+`;
+
+export const Info = styled.div`
+  display: flex;
+  flex-direction: column;
+
+  width: 150px;
+`;
diff --git a/src/features/Results/CaseResult/CaseResultView/ObjectCaseResult/ChannelResult.tsx b/src/features/Results/CaseResult/CaseResultView/ObjectCaseResult/ChannelResult.tsx
@@ -0,0 +1,37 @@
+import { Typography } from '@equinor/eds-core-react';
+import { ComputeCaseDto, GetResultDto } from '../../../../../api/generated';
+import * as Styled from './ChannelResult.styled';
+import { ChannelResultTable } from './ChannelResultTable';
+
+export const ChannelResult = ({
+  data,
+  computeCase,
+}: {
+  data: GetResultDto;
+  computeCase?: ComputeCaseDto[];
+}) => {
+  let modelArea = '';
+  if (
+    computeCase &&
+    computeCase[0] &&
+    computeCase[0].modelArea !== undefined &&
+    computeCase[0].modelArea !== null
+  )
+    modelArea = computeCase && computeCase[0].modelArea.name;
+
+  if (modelArea === '') modelArea = 'Whole model';
+  const caseFilter = computeCase && computeCase[0];
+  const computeMethod = caseFilter && caseFilter.computeMethod.name;
+
+  return (
+    <Styled.Wrapper>
+      <Styled.InnerWrapper>
+        <Styled.Info>
+          <Typography variant="h5"> {computeMethod}</Typography>
+          <Typography variant="body_short"> {modelArea}</Typography>
+        </Styled.Info>
+        <ChannelResultTable data={data}></ChannelResultTable>
+      </Styled.InnerWrapper>
+    </Styled.Wrapper>
+  );
+};
diff --git a/...features/Results/CaseResult/CaseResultView/ObjectCaseResult/ChannelResultTable.styled.tsx b/...features/Results/CaseResult/CaseResultView/ObjectCaseResult/ChannelResultTable.styled.tsx
@@ -3,7 +3,8 @@ import { Table } from '@equinor/eds-core-react';
 import styled from 'styled-components';
 import { theme } from '../../../../../tokens/theme';
 
-export const Wrapper = styled.div`
+const StyledTable = styled(Table)`
+  width: 100%;
   max-width: 950px;
 `;
 export const ColumnCell = styled(Table.Cell)`
@@ -20,3 +21,5 @@ export const DataCell = styled(Table.Cell)`
     justify-content: right;
   }
 `;
+
+export { StyledTable as Table };