Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: Variogram results table size #406

Merged
merged 1 commit into from
Dec 20, 2024
Merged

fix: Variogram results table size #406

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 4 additions & 7 deletions ...seResultView/VariogramCaseResult/VariogramResultTable/SubRowResult/SubRowResult.styled.ts
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Loading