Skip to content

Commit

Permalink
fix: Variogram results table size (#406)
Browse files Browse the repository at this point in the history
  • Loading branch information
@o-jorgensen
o-jorgensen authored Dec 20, 2024
1 parent 639cc05 commit 0daea46
Show file tree
Hide file tree
Showing 6 changed files with 272 additions and 168 deletions.
11 changes: 4 additions & 7 deletions ...seResultView/VariogramCaseResult/VariogramResultTable/SubRowResult/SubRowResult.styled.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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`
Expand Down
16 changes: 11 additions & 5 deletions ...ult/CaseResultView/VariogramCaseResult/VariogramResultTable/SubRowResult/SubRowResult.tsx
View file
Original file line number Diff line number Diff line change
@@ -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,
Expand Down Expand Up @@ -41,10 +41,16 @@ export const SubRowResult = ({
<>
<Styled.SubRowDiv>
<Styled.SubRowInfo>
<Typography>Variogram model details</Typography>
<Button variant="outlined" onClick={handleImageDialog}>
<Icon data={barChart} title={'Open plot for case results.'} />
Show plot
<Typography variant="h6" as="h3">
Variogram model details
</Typography>
<Button
color="secondary"
variant="outlined"
onClick={handleImageDialog}
>
Show variogram slices
<Icon data={timeline} />
</Button>
</Styled.SubRowInfo>
<Styled.TableList>
Expand Down
17 changes: 16 additions & 1 deletion ...sultView/VariogramCaseResult/VariogramResultTable/SubRowResult/SubRowResultItem.styled.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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};
}
`;
102 changes: 70 additions & 32 deletions ...CaseResultView/VariogramCaseResult/VariogramResultTable/SubRowResult/SubRowResultItem.tsx
View file
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -8,39 +10,75 @@ export const SubRowResultItem = ({
resultList: ResultObjectType[];
}) => {
return (
<Styled.TableWrapper>
<Table>
<Table.Head>
<Styled.HeaderContent>
<Table.Cell>Variogram model</Table.Cell>
<Table.Cell>Range major (m)</Table.Cell>
<Table.Cell>Range minor (m)</Table.Cell>
<Table.Cell>Azimuth (deg)</Table.Cell>
<Table.Cell>Range vertical (m)</Table.Cell>
<Table.Cell>SILL/STD (m)</Table.Cell>
<Table.Cell>X/Y/Z quality factor</Table.Cell>
</Styled.HeaderContent>
</Table.Head>
<Table.Body>
{resultList.map((resultItem) => (
<Table.Row key={resultItem.computeCaseId + resultItem.quality}>
<Table.Cell>{resultItem.variogramModel}</Table.Cell>
<Table.Cell>{resultItem.rmajor}</Table.Cell>
<Table.Cell>{resultItem.rminor}</Table.Cell>
<Table.Cell>{resultItem.azimuth}</Table.Cell>
<Table.Cell>{resultItem.rvertical}</Table.Cell>
<Table.Cell>{resultItem.sigma}</Table.Cell>
<EdsProvider density="compact">
<Styled.TableWrapper>
<Table className="variogram-models-table">
<Table.Head>
<Styled.HeaderContent>
<Table.Cell>Variogram model</Table.Cell>
<Table.Cell className="align-right">
Range major <span className="unit">(m)</span>
</Table.Cell>
<Table.Cell className="align-right">
Range minor <span className="unit">(m)</span>
</Table.Cell>
<Table.Cell className="align-right">
Azimuth <span className="unit">(deg)</span>
</Table.Cell>
<Table.Cell className="align-right">
Range vertical <span className="unit">(m)</span>
</Table.Cell>
<Table.Cell className="align-right">
SILL/STD <span className="unit">(m)</span>
</Table.Cell>
<Table.Cell>
<div>
{roundResultString(resultItem.qualityX, 2)} {' / '}
{roundResultString(resultItem.qualityY, 2)} {' / '}
{roundResultString(resultItem.qualityZ, 2)}
<div className="has-tooltip">
X/Y/Z quality factor
<Tooltip
title="The quality factor is based on the 3D-variogram for each axis"
placement="top"
>
<Icon data={HELP} className="icon" />
</Tooltip>
</div>
</Table.Cell>
</Table.Row>
))}
</Table.Body>
</Table>
</Styled.TableWrapper>
</Styled.HeaderContent>
</Table.Head>
<Table.Body>
{resultList.map((resultItem) => (
<Table.Row key={resultItem.computeCaseId + resultItem.quality}>
<Table.Cell>
<span className="capitalize">
{resultItem.variogramModel}
</span>
</Table.Cell>
<Table.Cell className="align-right">
{resultItem.rmajor}
</Table.Cell>
<Table.Cell className="align-right">
{resultItem.rminor}
</Table.Cell>
<Table.Cell className="align-right">
{resultItem.azimuth}
</Table.Cell>
<Table.Cell className="align-right">
{resultItem.rvertical}
</Table.Cell>
<Table.Cell className="align-right">
{resultItem.sigma}
</Table.Cell>
<Table.Cell>
<div>
{roundResultString(resultItem.qualityX, 2)} {' / '}
{roundResultString(resultItem.qualityY, 2)} {' / '}
{roundResultString(resultItem.qualityZ, 2)}
</div>
</Table.Cell>
</Table.Row>
))}
</Table.Body>
</Table>
</Styled.TableWrapper>
</EdsProvider>
);
};
149 changes: 90 additions & 59 deletions ...ResultView/VariogramCaseResult/VariogramResultTable/TanStackTable/TanStackTable.styled.ts
View file
Original file line number Diff line number Diff line change
@@ -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};
}
}
}
`;
Loading

0 comments on commit 0daea46

Please sign in to comment.