-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Chore/refarctor variogram result tanstack table (#386)
* Feat: Add expandable rows to variogram result. * chore: Show dialog with result images for rows. * chore: Refactor all case results to be in the same table. * chore: Refactor table columns, add variogram model. * chore: Refactor quality factor level in results. * chore: remove comment.
- Loading branch information
1 parent
5679ab5
commit 574bda4
Showing
11 changed files
with
712 additions
and
214 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
195 changes: 181 additions & 14 deletions
195
...eatures/Results/CaseResult/CaseResultView/VariogramCaseResult/ImageResult/ImageResult.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
26 changes: 26 additions & 0 deletions
26
...seResultView/VariogramCaseResult/VariogramResultTable/SubRowResult/SubRowResult.styled.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,26 @@ | ||
| import styled from 'styled-components'; | ||
| import { spacings } from '../../../../../../../tokens/spacings'; | ||
|
|
||
| export const SubRowDiv = styled.div` | ||
| display: flex; | ||
| flex-direction: column; | ||
| row-gap: ${spacings.LARGE}; | ||
| padding: ${spacings.X_LARGE} ${spacings.XXXX_LARGE}; | ||
| width: 100%; | ||
| `; | ||
|
|
||
| export const SubRowInfo = styled.div` | ||
| display: flex; | ||
| flex-direction: row; | ||
| justify-content: space-between; | ||
| width: 100%; | ||
| `; | ||
|
|
||
| export const TableList = styled.div` | ||
| display: flex; | ||
| flex-direction: column; | ||
| row-gap: ${spacings.LARGE}; | ||
| width: 100%; | ||
| `; |
61 changes: 61 additions & 0 deletions
61
...ult/CaseResultView/VariogramCaseResult/VariogramResultTable/SubRowResult/SubRowResult.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,61 @@ | ||
| /* 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 { useState } from 'react'; | ||
| import { | ||
| GetVariogramResultsDto, | ||
| GetVariogramResultsVariogramResultFileDto, | ||
| } from '../../../../../../../api/generated'; | ||
| import { ImageResult } from '../../ImageResult/ImageResult'; | ||
| import { ResultObjectType } from '../TanStackTable/TanStackTable'; | ||
| import * as Styled from './SubRowResult.styled'; | ||
| import { SubRowResultItem } from './SubRowResultItem'; | ||
|
|
||
| export const SubRowResult = ({ | ||
| resultRows, | ||
| resultList, | ||
| }: { | ||
| resultRows: ResultObjectType[]; | ||
| resultList: GetVariogramResultsDto[]; | ||
| }) => { | ||
| const [open, setOpen] = useState<boolean>(false); | ||
| const [resultImages, setResultImages] = useState< | ||
| GetVariogramResultsVariogramResultFileDto[] | ||
| >([]); | ||
|
|
||
| const handleImageDialog = () => { | ||
| const resultFiles: Array<GetVariogramResultsVariogramResultFileDto> = []; | ||
| resultRows.forEach((row) => | ||
| row.variogramResultFiles.forEach((file) => { | ||
| const values = resultFiles.map((a) => a.fileName); | ||
| const has = values.find((str) => str === file.fileName); | ||
|
|
||
| if (!has) resultFiles.push(file); | ||
| }), | ||
| ); | ||
|
|
||
| if (resultFiles && resultFiles.length > 0) setResultImages(resultFiles); | ||
| setOpen(!open); | ||
| }; | ||
| return ( | ||
| <> | ||
| <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 | ||
| </Button> | ||
| </Styled.SubRowInfo> | ||
| <Styled.TableList> | ||
| <SubRowResultItem resultList={resultRows}></SubRowResultItem> | ||
| </Styled.TableList> | ||
| </Styled.SubRowDiv> | ||
| <ImageResult | ||
| resultImages={resultImages} | ||
| open={open} | ||
| setOpen={setOpen} | ||
| ></ImageResult> | ||
| </> | ||
| ); | ||
| }; |
14 changes: 14 additions & 0 deletions
14
...sultView/VariogramCaseResult/VariogramResultTable/SubRowResult/SubRowResultItem.styled.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| import { Table } from '@equinor/eds-core-react'; | ||
| import styled from 'styled-components'; | ||
| import { spacings } from '../../../../../../../tokens/spacings'; | ||
|
|
||
| export const HeaderContent = styled(Table.Row)` | ||
| height: ${spacings.MEDIUM}; | ||
| `; | ||
| export const TableWrapper = styled.div` | ||
| width: 100%; | ||
| > table { | ||
| width: 100%; | ||
| border: 1px solid #dcdcdc; | ||
| } | ||
| `; |
46 changes: 46 additions & 0 deletions
46
...CaseResultView/VariogramCaseResult/VariogramResultTable/SubRowResult/SubRowResultItem.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,46 @@ | ||
| import { Table } from '@equinor/eds-core-react'; | ||
| import { roundResultString } from '../../../../../../../utils/RoundResultString'; | ||
| import { ResultObjectType } from '../TanStackTable/TanStackTable'; | ||
| import * as Styled from './SubRowResultItem.styled'; | ||
| export const SubRowResultItem = ({ | ||
| resultList, | ||
| }: { | ||
| 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> | ||
| <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> | ||
| ); | ||
| }; |
Oops, something went wrong.