From c9822d966d77f59e05dc6150eb27284258723b97 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=98rjan=20Aare=20J=C3=B8rgensen?= Date: Fri, 13 Dec 2024 13:03:23 +0100 Subject: [PATCH] fix: Variogram results table size --- .../SubRowResult/SubRowResult.styled.ts | 11 +- .../SubRowResult/SubRowResult.tsx | 16 +- .../SubRowResult/SubRowResultItem.styled.ts | 17 +- .../SubRowResult/SubRowResultItem.tsx | 102 ++++++++---- .../TanStackTable/TanStackTable.styled.ts | 149 +++++++++++------- .../TanStackTable/TanStackTable.tsx | 145 +++++++++-------- 6 files changed, 272 insertions(+), 168 deletions(-) diff --git a/src/features/Results/CaseResult/CaseResultView/VariogramCaseResult/VariogramResultTable/SubRowResult/SubRowResult.styled.ts b/src/features/Results/CaseResult/CaseResultView/VariogramCaseResult/VariogramResultTable/SubRowResult/SubRowResult.styled.ts index faaa128..253ba59 100644 --- a/src/features/Results/CaseResult/CaseResultView/VariogramCaseResult/VariogramResultTable/SubRowResult/SubRowResult.styled.ts +++ b/src/features/Results/CaseResult/CaseResultView/VariogramCaseResult/VariogramResultTable/SubRowResult/SubRowResult.styled.ts @@ -5,17 +5,14 @@ export const SubRowDiv = styled.div` display: flex; flex-direction: column; row-gap: ${spacings.LARGE}; - padding: ${spacings.X_LARGE} ${spacings.XXXX_LARGE}; - - width: 100%; + padding: ${spacings.MEDIUM} ${spacings.MEDIUM} ${spacings.X_LARGE} + calc(${spacings.MEDIUM} + ${spacings.XXXX_LARGE} + ${spacings.MEDIUM}); `; export const SubRowInfo = styled.div` display: flex; - flex-direction: row; - justify-content: space-between; - - width: 100%; + align-items: center; + gap: 1.5rem; `; export const TableList = styled.div` diff --git a/src/features/Results/CaseResult/CaseResultView/VariogramCaseResult/VariogramResultTable/SubRowResult/SubRowResult.tsx b/src/features/Results/CaseResult/CaseResultView/VariogramCaseResult/VariogramResultTable/SubRowResult/SubRowResult.tsx index a9d3bfa..e8e79e4 100644 --- a/src/features/Results/CaseResult/CaseResultView/VariogramCaseResult/VariogramResultTable/SubRowResult/SubRowResult.tsx +++ b/src/features/Results/CaseResult/CaseResultView/VariogramCaseResult/VariogramResultTable/SubRowResult/SubRowResult.tsx @@ -1,6 +1,6 @@ /* eslint-disable max-lines-per-function */ import { Button, Icon, Typography } from '@equinor/eds-core-react'; -import { bar_chart as barChart } from '@equinor/eds-icons'; +import { timeline } from '@equinor/eds-icons'; import { useState } from 'react'; import { GetVariogramResultsDto, @@ -41,10 +41,16 @@ export const SubRowResult = ({ <> - Variogram model details - diff --git a/src/features/Results/CaseResult/CaseResultView/VariogramCaseResult/VariogramResultTable/SubRowResult/SubRowResultItem.styled.ts b/src/features/Results/CaseResult/CaseResultView/VariogramCaseResult/VariogramResultTable/SubRowResult/SubRowResultItem.styled.ts index fb54c7a..6aef1f0 100644 --- a/src/features/Results/CaseResult/CaseResultView/VariogramCaseResult/VariogramResultTable/SubRowResult/SubRowResultItem.styled.ts +++ b/src/features/Results/CaseResult/CaseResultView/VariogramCaseResult/VariogramResultTable/SubRowResult/SubRowResultItem.styled.ts @@ -7,8 +7,23 @@ export const HeaderContent = styled(Table.Row)` `; export const TableWrapper = styled.div` width: 100%; - > table { + + .variogram-models-table { width: 100%; border: 1px solid #dcdcdc; } + + .capitalize { + text-transform: capitalize; + } + + .align-right { + text-align: right; + } + + .unit { + font-weight: 400; + display: inline-block; + margin-inline-start: ${spacings.X_SMALL}; + } `; diff --git a/src/features/Results/CaseResult/CaseResultView/VariogramCaseResult/VariogramResultTable/SubRowResult/SubRowResultItem.tsx b/src/features/Results/CaseResult/CaseResultView/VariogramCaseResult/VariogramResultTable/SubRowResult/SubRowResultItem.tsx index 2b9d5d8..531be34 100644 --- a/src/features/Results/CaseResult/CaseResultView/VariogramCaseResult/VariogramResultTable/SubRowResult/SubRowResultItem.tsx +++ b/src/features/Results/CaseResult/CaseResultView/VariogramCaseResult/VariogramResultTable/SubRowResult/SubRowResultItem.tsx @@ -1,4 +1,6 @@ -import { Table } from '@equinor/eds-core-react'; +/* eslint-disable max-lines-per-function */ +import { EdsProvider, Icon, Table, Tooltip } from '@equinor/eds-core-react'; +import { help_outline as HELP } from '@equinor/eds-icons'; import { roundResultString } from '../../../../../../../utils/RoundResultString'; import { ResultObjectType } from '../TanStackTable/TanStackTable'; import * as Styled from './SubRowResultItem.styled'; @@ -8,39 +10,75 @@ export const SubRowResultItem = ({ resultList: ResultObjectType[]; }) => { return ( - - - - - Variogram model - Range major (m) - Range minor (m) - Azimuth (deg) - Range vertical (m) - SILL/STD (m) - X/Y/Z quality factor - - - - {resultList.map((resultItem) => ( - - {resultItem.variogramModel} - {resultItem.rmajor} - {resultItem.rminor} - {resultItem.azimuth} - {resultItem.rvertical} - {resultItem.sigma} + + +
+ + + Variogram model + + Range major (m) + + + Range minor (m) + + + Azimuth (deg) + + + Range vertical (m) + + + SILL/STD (m) + -
- {roundResultString(resultItem.qualityX, 2)} {' / '} - {roundResultString(resultItem.qualityY, 2)} {' / '} - {roundResultString(resultItem.qualityZ, 2)} +
+ X/Y/Z quality factor + + +
- - ))} - -
- + + + + {resultList.map((resultItem) => ( + + + + {resultItem.variogramModel} + + + + {resultItem.rmajor} + + + {resultItem.rminor} + + + {resultItem.azimuth} + + + {resultItem.rvertical} + + + {resultItem.sigma} + + +
+ {roundResultString(resultItem.qualityX, 2)} {' / '} + {roundResultString(resultItem.qualityY, 2)} {' / '} + {roundResultString(resultItem.qualityZ, 2)} +
+ + + ))} + + + + ); }; diff --git a/src/features/Results/CaseResult/CaseResultView/VariogramCaseResult/VariogramResultTable/TanStackTable/TanStackTable.styled.ts b/src/features/Results/CaseResult/CaseResultView/VariogramCaseResult/VariogramResultTable/TanStackTable/TanStackTable.styled.ts index 5d6b911..218619d 100644 --- a/src/features/Results/CaseResult/CaseResultView/VariogramCaseResult/VariogramResultTable/TanStackTable/TanStackTable.styled.ts +++ b/src/features/Results/CaseResult/CaseResultView/VariogramCaseResult/VariogramResultTable/TanStackTable/TanStackTable.styled.ts @@ -1,72 +1,103 @@ import styled from 'styled-components'; +import { theme } from '../../../../../../../tokens/theme'; +import { spacings } from '../../../../../../../tokens/spacings'; export const TableWrapper = styled.div` - > div { - > table { - border: 1px solid #dcdcdc; - border-collapse: collapse; + .variogram-results-table { + border: 1px solid #dcdcdc; + border-collapse: collapse; + min-width: 1180px; - > thead { - border-bottom: 2px solid - var(--eds_ui_background__medium, rgba(220, 220, 220, 1)); - background: var( - --eds_interactive_table__header__fill_resting, - rgba(247, 247, 247, 1) - ); - > tr { - > th { - white-space: nowrap; - min-height: var(--eds_table__cell__height, 48px); - height: var(--eds_table__cell__height, 48px); - background: var( - --eds_interactive_table__header__fill_resting, - rgba(247, 247, 247, 1) - ); - box-sizing: border-box; - padding-left: var(--eds_table__cell__padding_x, 16px); - padding-top: var(--eds_table__cell__padding_y, 0); - padding-right: var(--eds_table__cell__padding_x, 16px); - padding-bottom: var(--eds_table__cell__padding_y, 0); - margin: 0; - color: var(--eds_text__static_icons__default, rgba(61, 61, 61, 1)); - font-family: Equinor; - font-size: var(--eds_table__font_size, 0.875rem); - font-weight: 700; - line-height: 1.429em; - text-align: left; - border-bottom: 2px solid - var(--eds_ui_background__medium, rgba(220, 220, 220, 1)); - } + /* Fixed width for the expand toggle button column */ + > thead th:first-child, + > tbody td:not(.expanded-cell, .expanded-cell td):first-child { + width: calc( + ${spacings.MEDIUM} + ${spacings.XXX_LARGE} + ${spacings.MEDIUM} + ); + text-align: center; + } + + /* Fixed width for the "Published" toggle button column */ + > thead th:last-child, + > tbody td:not(.expanded-cell, .expanded-cell td):last-child { + width: 136px; + } + + > thead { + border-bottom: 2px solid + var(--eds_ui_background__medium, rgba(220, 220, 220, 1)); + background: var( + --eds_interactive_table__header__fill_resting, + rgba(247, 247, 247, 1) + ); + > tr { + > th { + white-space: nowrap; + min-height: var(--eds_table__cell__height, 48px); + height: var(--eds_table__cell__height, 48px); + background: var( + --eds_interactive_table__header__fill_resting, + rgba(247, 247, 247, 1) + ); + box-sizing: border-box; + padding-left: var(--eds_table__cell__padding_x, 16px); + padding-top: var(--eds_table__cell__padding_y, 0); + padding-right: var(--eds_table__cell__padding_x, 16px); + padding-bottom: var(--eds_table__cell__padding_y, 0); + margin: 0; + color: var(--eds_text__static_icons__default, rgba(61, 61, 61, 1)); + font-family: Equinor; + font-size: var(--eds_table__font_size, 0.875rem); + font-weight: 700; + line-height: 1.429em; + text-align: left; + border-bottom: 2px solid + var(--eds_ui_background__medium, rgba(220, 220, 220, 1)); } } + } - > tbody { - border-bottom: 2px solid - var(--eds_ui_background__medium, rgba(220, 220, 220, 1)); + > tbody { + border-bottom: 1px solid + var(--eds_ui_background__medium, rgba(220, 220, 220, 1)); - > tr { - > td { - white-space: nowrap; - min-height: var(--eds_table__cell__height, 48px); - height: var(--eds_table__cell__height, 48px); - vertical-align: var(--eds_table__cell__vertical_align, inherit); - box-sizing: border-box; - padding-left: var(--eds_table__cell__padding_x, 16px); - padding-top: var(--eds_table__cell__padding_y, 0); - padding-right: var(--eds_table__cell__padding_x, 16px); - padding-bottom: var(--eds_table__cell__padding_y, 0); - margin: 0; - color: var(--eds_text__static_icons__default, rgba(61, 61, 61, 1)); - font-family: Equinor; - font-size: var(--eds_table__font_size, 0.875rem); - font-weight: 500; - line-height: 1.429em; - text-align: left; - border-bottom: 1px solid - var(--eds_ui_background__medium, rgba(220, 220, 220, 1)); - } + > tr { + > td { + white-space: nowrap; + min-height: var(--eds_table__cell__height, 48px); + height: var(--eds_table__cell__height, 48px); + vertical-align: var(--eds_table__cell__vertical_align, inherit); + box-sizing: border-box; + padding-left: var(--eds_table__cell__padding_x, 16px); + padding-top: var(--eds_table__cell__padding_y, 0); + padding-right: var(--eds_table__cell__padding_x, 16px); + padding-bottom: var(--eds_table__cell__padding_y, 0); + margin: 0; + color: var(--eds_text__static_icons__default, rgba(61, 61, 61, 1)); + font-family: Equinor; + font-size: var(--eds_table__font_size, 0.875rem); + font-weight: 500; + line-height: 1.429em; + text-align: left; + border-bottom: 1px solid + var(--eds_ui_background__medium, rgba(220, 220, 220, 1)); } } } + + .expanded-cell { + background-color: ${theme.light.ui.background.light}; + padding-inline: 0; + } + + .has-tooltip { + display: flex; + column-gap: ${spacings.SMALL}; + align-items: center; + + .icon { + color: ${theme.light.primary.resting}; + } + } } `; diff --git a/src/features/Results/CaseResult/CaseResultView/VariogramCaseResult/VariogramResultTable/TanStackTable/TanStackTable.tsx b/src/features/Results/CaseResult/CaseResultView/VariogramCaseResult/VariogramResultTable/TanStackTable/TanStackTable.tsx index 0951e8e..ea3bbd4 100644 --- a/src/features/Results/CaseResult/CaseResultView/VariogramCaseResult/VariogramResultTable/TanStackTable/TanStackTable.tsx +++ b/src/features/Results/CaseResult/CaseResultView/VariogramCaseResult/VariogramResultTable/TanStackTable/TanStackTable.tsx @@ -3,9 +3,10 @@ /* eslint-disable max-lines-per-function */ import { ChangeEvent, Fragment } from 'react'; -import { Button, Icon, Switch } from '@equinor/eds-core-react'; +import { Button, Icon, Switch, Tooltip } from '@equinor/eds-core-react'; import { chevron_down as DOWN, + help_outline as HELP, chevron_right as RIGHT, } from '@equinor/eds-icons'; import { @@ -76,60 +77,59 @@ function Table({ }); return ( -
-
- - - {table.getHeaderGroups().map((headerGroup) => ( - - {headerGroup.headers.map((header) => { - return ( - - ); - })} - - ))} - - - {table.getRowModel().rows.map((row) => { - return ( - +
- {header.isPlaceholder ? null : ( -
- {flexRender( - header.column.columnDef.header, - header.getContext(), - )} -
- )} -
+ + {table.getHeaderGroups().map((headerGroup) => ( + + {headerGroup.headers.map((header) => { + return ( + + ); + })} + + ))} + + + {table.getRowModel().rows.map((row) => { + return ( + + + {/* first row is a normal row */} + {row.getVisibleCells().map((cell) => { + return ( + + ); + })} + + {row.getIsExpanded() && ( - {/* first row is a normal row */} - {row.getVisibleCells().map((cell) => { - return ( - - ); - })} + - {row.getIsExpanded() && ( - - - - )} - - ); - })} - -
+ {header.isPlaceholder ? null : ( +
+ {flexRender( + header.column.columnDef.header, + header.getContext(), + )} +
+ )} +
+ {flexRender( + cell.column.columnDef.cell, + cell.getContext(), + )} +
- {flexRender( - cell.column.columnDef.cell, - cell.getContext(), - )} - + {renderSubComponent({ row })} +
- {renderSubComponent({ row })} -
-
-
+ )} + + ); + })} + + ); } @@ -256,7 +256,10 @@ export const TanStackTable = ({ cell: ({ row }) => { return ( row.getCanExpand() && ( - ) @@ -269,6 +272,11 @@ export const TanStackTable = ({ cell: ({ getValue }) =>
{getValue()}
, id: 'method', }, + { + accessorKey: 'modelArea', + header: () =>
Model Area
, + id: 'modelArea', + }, { accessorKey: 'parameter', header: () =>
Parameter
, @@ -279,25 +287,34 @@ export const TanStackTable = ({ header: () =>
Archel Filter
, id: 'archelFilter', }, - { - accessorKey: 'modelArea', - header: () =>
Model Area
, - id: 'modelArea', - }, { accessorKey: 'status', - header: () =>
Published
, + header: () => ( +
+ Published + + + +
+ ), cell: ({ row }) => { return ( - row.getCanExpand() && ( + row.getCanExpand() && + (isOwner ? ( ) => { updateStatus(e.target.checked, row.original); }} checked={checkedStatus(row.original)} - disabled={!isOwner} - > - ) + /> + ) : ( + + + + )) ); }, id: 'status',