Fix/div small tasks (#218)

* fix: Remove scrollbar i side-menue. Fixed model table width on small screens. * Refactor: Refetch model data on set interval. Refactor model table cell sizes. Removed modelId cell. Fixed responsive status update on finish transform. * refactor: Nuber of listed models in model table. Space above paginator. Increase responsive max width. * refactor: Prevent scroll in model view sidebar. * refactor: Add/edit model dialog height and conditional title.
equinor · Jan 31, 2024 · d46acfc · d46acfc
1 parent 7be2e8f
commit d46acfc
Show file tree

Hide file tree

Showing 6 changed files with 33 additions and 26 deletions.
diff --git a/src/features/AddModel/AddModelDialog/AddModelDialog.styled.ts b/src/features/AddModel/AddModelDialog/AddModelDialog.styled.ts
@@ -15,7 +15,8 @@ const StyledDialogCustomContent = styled(Dialog.CustomContent)`
   display: flex;
   flex-direction: column;
   row-gap: ${spacings.X_LARGE};
-  height: 740px;
+  height: fit-content;
+  padding-bottom: ${spacings.XXX_LARGE};
 
   > p {
     &.error {

diff --git a/src/features/AddModel/AddModelDialog/AddModelDialog.tsx b/src/features/AddModel/AddModelDialog/AddModelDialog.tsx
@@ -119,7 +119,9 @@ export const AddModelDialog = ({
   return (
     <Styled.Dialog open={isOpen}>
       <Styled.Dialog.Header>
-        <Styled.Dialog.Title>Add new model</Styled.Dialog.Title>
+        <Styled.Dialog.Title>
+          {isEdit ? 'Edit model details' : 'Add new model'}
+        </Styled.Dialog.Title>
       </Styled.Dialog.Header>
       <Styled.DialogCustomContent scrollable>
         {!isEdit && (

diff --git a/src/features/ModelTable/ModelTable.styled.ts b/src/features/ModelTable/ModelTable.styled.ts
@@ -10,8 +10,18 @@ export const Table = styled.div`
       min-width: 90% !important;
     }
     > div {
+      margin-top: 2rem;
       min-width: 90% !important;
     }
+
+    @media (max-width: 1500px) {
+      > table {
+        min-width: 100% !important;
+      }
+      > div {
+        min-width: 100% !important;
+      }
+    }
   }
 `;
 
@@ -25,7 +35,6 @@ export const Buttons = styled.div`
 export const List = styled.div`
   display: flex;
   flex-direction: row;
-  overflow: auto;
   > p {
     padding-right: ${spacings.X_SMALL};
   }

diff --git a/src/features/ModelTable/ModelTable.tsx b/src/features/ModelTable/ModelTable.tsx
@@ -35,6 +35,7 @@ export const ModelTable = ({
     queryKey: ['analogue-models'],
     queryFn: () => AnalogueModelsService.getApiAnalogueModels(),
     enabled: !!token,
+    refetchInterval: 60000,
   });
 
   if (isLoading || !data?.success) return <p>Loading...</p>;
@@ -54,7 +55,7 @@ export const ModelTable = ({
   };
 
   const isTransforming = (id: string, status: boolean) => {
-    if (transforming && id === activeUploadId) {
+    if (transforming && id === activeUploadId && !status) {
       return <>Transforming model</>;
     } else {
       return status && <>Ready</>;
@@ -70,20 +71,15 @@ export const ModelTable = ({
         emptyMessage="Empty :("
         columnResizeMode="onChange"
         rows={data.data}
-        pageSize={5}
+        pageSize={10}
         columns={[
-          {
-            accessorKey: 'analogueModelId',
-            header: 'Model ID',
-            id: 'analogueModelId',
-          },
           { accessorKey: 'name', header: 'Model name', id: 'name' },
           {
             accessorKey: 'analogues',
             id: 'analogues',
             header: 'Analogue',
             enableColumnFilter: false,
-            size: 120,
+            size: 100,
             cell: ({ row }) => (
               <Styled.List>
                 {row.original.analogues.map((a) => (
@@ -97,7 +93,7 @@ export const ModelTable = ({
             id: 'formation',
             header: 'Formation',
             enableColumnFilter: false,
-            size: 120,
+            size: 150,
             cell: ({ row }) => (
               <Styled.List>
                 {row.original.metadata
@@ -113,7 +109,7 @@ export const ModelTable = ({
             id: 'zone',
             header: 'Zone',
             enableColumnFilter: false,
-            size: 120,
+            size: 150,
             cell: ({ row }) => (
               <Styled.List>
                 {row.original.metadata
@@ -129,6 +125,7 @@ export const ModelTable = ({
             id: 'field',
             header: 'Field',
             enableColumnFilter: false,
+            size: 200,
             cell: ({ row }) => (
               <Styled.List>
                 {row.original.metadata
@@ -145,7 +142,7 @@ export const ModelTable = ({
             id: 'isProcessed',
             header: 'Status',
             enableColumnFilter: false,
-            size: 50,
+            size: 100,
             cell: ({ row }) => (
               <>
                 {isActiveModel(row.original.analogueModelId) ? (
@@ -175,7 +172,6 @@ export const ModelTable = ({
             enableColumnFilter: false,
             enableResizing: false,
             maxSize: 220,
-            size: 200,
             cell: ({ row }) => (
               <Styled.Buttons>
                 <Button

diff --git a/src/features/ModelView/ModelNavigationBar/ModelNavigationBar.styled.tsx b/src/features/ModelView/ModelNavigationBar/ModelNavigationBar.styled.tsx
@@ -5,6 +5,7 @@ import { theme } from '../../../tokens/theme';
 
 export const StyledSidebarContent = styled(SideBar.Content)`
   padding-top: ${spacings.MEDIUM};
+  overflow: hidden;
   > a {
     border-bottom: none;
   }

diff --git a/src/pages/ModelPages/Model/Model.tsx b/src/pages/ModelPages/Model/Model.tsx
@@ -8,16 +8,14 @@ export const Model = () => {
   const { data } = useFetchModel();
 
   return (
-    <>
-      <Styled.Wrapper>
-        <Styled.SidebarWrapper>
-          <ModelNavigationBar />
-        </Styled.SidebarWrapper>
-        <Styled.ContentWrapper>
-          <ModelNameFrame model={data?.data} />
-          <Outlet />
-        </Styled.ContentWrapper>
-      </Styled.Wrapper>
-    </>
+    <Styled.Wrapper>
+      <Styled.SidebarWrapper>
+        <ModelNavigationBar />
+      </Styled.SidebarWrapper>
+      <Styled.ContentWrapper>
+        <ModelNameFrame model={data?.data} />
+        <Outlet />
+      </Styled.ContentWrapper>
+    </Styled.Wrapper>
   );
 };