diff --git a/src/features/Results/CaseResult/CaseResultView/CaseResultView.tsx b/src/features/Results/CaseResult/CaseResultView/CaseResultView.tsx index 40f1b3bf..74c29665 100644 --- a/src/features/Results/CaseResult/CaseResultView/CaseResultView.tsx +++ b/src/features/Results/CaseResult/CaseResultView/CaseResultView.tsx @@ -8,7 +8,7 @@ import { GetVariogramResultsDto, } from '../../../../api/generated'; import { ChannelResult } from './ObjectCaseResult/ChannelResult'; -import { VariogramResultTable } from './VariogramCaseResult/VariogramResultTable/VariogramResultTable'; +import { TanStackTable } from './VariogramCaseResult/VariogramResultTable/TanStackTable/TanStackTable'; export const CaseResultView = ({ channelResultList, @@ -26,9 +26,7 @@ export const CaseResultView = ({ {type} results {variogramResultList && ( - + )} {channelResultList && channelResultList.map((obj) => ( diff --git a/src/features/Results/CaseResult/CaseResultView/VariogramCaseResult/ImageResult/ImageResult.tsx b/src/features/Results/CaseResult/CaseResultView/VariogramCaseResult/ImageResult/ImageResult.tsx index 6f752260..4d019a9c 100644 --- a/src/features/Results/CaseResult/CaseResultView/VariogramCaseResult/ImageResult/ImageResult.tsx +++ b/src/features/Results/CaseResult/CaseResultView/VariogramCaseResult/ImageResult/ImageResult.tsx @@ -1,33 +1,200 @@ -import { Button, Dialog, Typography } from '@equinor/eds-core-react'; +/* eslint-disable max-lines-per-function */ +import { Button, Dialog, Tabs } from '@equinor/eds-core-react'; import { useQuery } from '@tanstack/react-query'; +import { useState } from 'react'; import { getVariogramImage } from '../../../../../../api/custom/getImageById'; +import { GetVariogramResultsVariogramResultFileDto } from '../../../../../../api/generated'; import * as Styled from './ImageResult.styled'; export const ImageResult = ({ - imageId, open, setOpen, + resultImages, }: { - imageId: string; open: boolean; setOpen: React.Dispatch>; + resultImages: GetVariogramResultsVariogramResultFileDto[]; }) => { - const { data, isLoading } = useQuery({ - queryKey: ['case-image', imageId], - queryFn: () => getVariogramImage(imageId), - enabled: open, + const [activeTab, setActiveTab] = useState(0); + const handleChange = (index: number) => { + setActiveTab(index); + }; + + const variogramSlices = + resultImages && + resultImages.find((x) => x.fileName.includes('variogram_slices_')); + const variogramSlicesImageId = + variogramSlices && variogramSlices.variogramResultFileId; + + const loadedVariogramSlicesImage = useQuery({ + queryKey: ['case-image', variogramSlicesImageId], + queryFn: () => getVariogramImage(variogramSlicesImageId as string), + enabled: !!variogramSlicesImageId, + }); + + const sphericalImage = + resultImages && resultImages.find((x) => x.fileName.includes('spherical-')); + const sphericalImageId = + sphericalImage && sphericalImage.variogramResultFileId; + + const loadedSphericalImage = useQuery({ + queryKey: ['case-image', sphericalImageId], + queryFn: () => getVariogramImage(sphericalImageId as string), + enabled: !!sphericalImageId, + }); + + const gaussianImage = + resultImages && resultImages.find((x) => x.fileName.includes('gaussian')); + const gaussianImageId = gaussianImage && gaussianImage.variogramResultFileId; + const loadedGaussianImage = useQuery({ + queryKey: ['case-image', gaussianImageId], + queryFn: () => getVariogramImage(gaussianImageId as string), + enabled: !!gaussianImageId, + }); + + const generalExponentialImage = + resultImages && + resultImages.find((x) => x.fileName.includes('general_exponential')); + const generalExponentialImageId = + generalExponentialImage && generalExponentialImage.variogramResultFileId; + const loadedGeneralExponentialImage = useQuery({ + queryKey: ['case-image', generalExponentialImageId], + queryFn: () => getVariogramImage(generalExponentialImageId as string), + enabled: !!generalExponentialImageId, + }); + + const exponentialImage = + resultImages && + resultImages.find((x) => x.fileName.includes('-exponential')); + const exponentialImageId = + exponentialImage && exponentialImage.variogramResultFileId; + const loadedExponentialImage = useQuery({ + queryKey: ['case-image', exponentialImageId], + queryFn: () => getVariogramImage(exponentialImageId as string), + enabled: !!exponentialImageId, }); return ( - {isLoading && <>Loading ...} - {data && ( - - Case results - Case results - - )} + + + Variogram slice + Spherical + Gaussian + General Exponential + Exponential + + + + {loadedVariogramSlicesImage.isLoading && <>Loading ...} + + {loadedVariogramSlicesImage.data && ( + + Case results + + )} + + + {loadedSphericalImage && loadedSphericalImage.data ? ( + <> + {loadedSphericalImage.isLoading && <>Loading ...} + {loadedSphericalImage.data && ( + + Spherical + + )} + + ) : ( + <>No Spherical + )} + + + {loadedGaussianImage && loadedGaussianImage.data ? ( + <> + {loadedGaussianImage.isLoading && <>Loading ...} + {loadedGaussianImage.data && ( + + Gaussian + + )} + + ) : ( + <>No Gaussian + )} + + + + {loadedGeneralExponentialImage && + loadedGeneralExponentialImage.data ? ( + <> + {loadedGeneralExponentialImage.isLoading && <>Loading ...} + {loadedGeneralExponentialImage.data && ( + + General Exponential + + )} + + ) : ( + <>No General Exponential + )} + + + {loadedExponentialImage && loadedExponentialImage.data ? ( + <> + {loadedExponentialImage.isLoading && <>Loading ...} + {loadedExponentialImage.data && ( + + Exponential + + )} + + ) : ( + <>No General Exponential + )} + + + 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 new file mode 100644 index 00000000..faaa1282 --- /dev/null +++ b/src/features/Results/CaseResult/CaseResultView/VariogramCaseResult/VariogramResultTable/SubRowResult/SubRowResult.styled.ts @@ -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%; +`; diff --git a/src/features/Results/CaseResult/CaseResultView/VariogramCaseResult/VariogramResultTable/SubRowResult/SubRowResult.tsx b/src/features/Results/CaseResult/CaseResultView/VariogramCaseResult/VariogramResultTable/SubRowResult/SubRowResult.tsx new file mode 100644 index 00000000..a9d3bfa2 --- /dev/null +++ b/src/features/Results/CaseResult/CaseResultView/VariogramCaseResult/VariogramResultTable/SubRowResult/SubRowResult.tsx @@ -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(false); + const [resultImages, setResultImages] = useState< + GetVariogramResultsVariogramResultFileDto[] + >([]); + + const handleImageDialog = () => { + const resultFiles: Array = []; + 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 ( + <> + + + 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 new file mode 100644 index 00000000..fb54c7a0 --- /dev/null +++ b/src/features/Results/CaseResult/CaseResultView/VariogramCaseResult/VariogramResultTable/SubRowResult/SubRowResultItem.styled.ts @@ -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; + } +`; diff --git a/src/features/Results/CaseResult/CaseResultView/VariogramCaseResult/VariogramResultTable/SubRowResult/SubRowResultItem.tsx b/src/features/Results/CaseResult/CaseResultView/VariogramCaseResult/VariogramResultTable/SubRowResult/SubRowResultItem.tsx new file mode 100644 index 00000000..2b9d5d8d --- /dev/null +++ b/src/features/Results/CaseResult/CaseResultView/VariogramCaseResult/VariogramResultTable/SubRowResult/SubRowResultItem.tsx @@ -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 ( + + + + + 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} + +
+ {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 new file mode 100644 index 00000000..5d6b911b --- /dev/null +++ b/src/features/Results/CaseResult/CaseResultView/VariogramCaseResult/VariogramResultTable/TanStackTable/TanStackTable.styled.ts @@ -0,0 +1,72 @@ +import styled from 'styled-components'; + +export const TableWrapper = styled.div` + > div { + > table { + border: 1px solid #dcdcdc; + border-collapse: collapse; + + > 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)); + + > 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)); + } + } + } + } + } +`; diff --git a/src/features/Results/CaseResult/CaseResultView/VariogramCaseResult/VariogramResultTable/TanStackTable/TanStackTable.tsx b/src/features/Results/CaseResult/CaseResultView/VariogramCaseResult/VariogramResultTable/TanStackTable/TanStackTable.tsx new file mode 100644 index 00000000..def237b2 --- /dev/null +++ b/src/features/Results/CaseResult/CaseResultView/VariogramCaseResult/VariogramResultTable/TanStackTable/TanStackTable.tsx @@ -0,0 +1,299 @@ +/* eslint-disable max-lines */ +/* eslint-disable sort-imports */ +/* eslint-disable max-lines-per-function */ +import { Fragment } from 'react'; + +import { Button, Icon } from '@equinor/eds-core-react'; +import { + chevron_down as DOWN, + chevron_right as RIGHT, +} from '@equinor/eds-icons'; +import { + ColumnDef, + Row, + flexRender, + getCoreRowModel, + getExpandedRowModel, + useReactTable, +} from '@tanstack/react-table'; +import { + GetVariogramResultsDto, + GetVariogramResultsVariogramResultFileDto, +} from '../../../../../../../api/generated'; +import { usePepmContextStore } from '../../../../../../../hooks/GlobalState'; +import { roundResultString } from '../../../../../../../utils/RoundResultString'; +import { SubRowResult } from '../SubRowResult/SubRowResult'; +import * as Styled from './TanStackTable.styled'; + +export interface ResultObjectType { + variogramResultId: string; + variogramResultFiles: Array; + computeCaseId: string; + rmajor: number; + rminor: number; + azimuth: number; + rvertical: number; + sigma: number; + quality: string | number; + qualityX: number; + qualityY: number; + qualityZ: number; + method: string; + parameter: string; + archelFilter: string; + modelArea: string; + variogramModel: string; + identifier: number; + subRows?: ResultObjectType[]; +} + +type TableProps = { + data: TData[]; + columns: ColumnDef[]; + renderSubComponent: (props: { row: Row }) => React.ReactElement; + getRowCanExpand: (row: Row) => boolean; +}; + +function Table({ + data, + columns, + renderSubComponent, + getRowCanExpand, +}: TableProps): JSX.Element { + const table = useReactTable({ + data, + columns, + getRowCanExpand, + getCoreRowModel: getCoreRowModel(), + getExpandedRowModel: getExpandedRowModel(), + }); + + return ( +
+
+ + + {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() && ( + + + + )} + + ); + })} + +
+ {header.isPlaceholder ? null : ( +
+ {flexRender( + header.column.columnDef.header, + header.getContext(), + )} +
+ )} +
+ {flexRender( + cell.column.columnDef.cell, + cell.getContext(), + )} +
+ {renderSubComponent({ row })} +
+
+
+ ); +} + +export const TanStackTable = ({ + resultList, +}: { + resultList: GetVariogramResultsDto[]; +}) => { + const { computeCases } = usePepmContextStore(); + + const getSubRows = (computeCaseId: string, identifier: number) => { + const subRowArray: ResultObjectType[] = []; + if (computeCaseId === undefined || resultList === undefined) + return subRowArray; + + resultList + .filter((c) => c.computeCaseId === computeCaseId) + .filter((c) => c.identifier === identifier) + .forEach((e) => { + const method = computeCases.filter( + (c) => c.computeCaseId === e.computeCaseId, + )[0]?.computeMethod?.name; + + let parameter = ''; + if (method === 'Indicator') { + parameter = e.indicator ? e.indicator : ''; + } else if (method === 'Net-To-Gross') { + parameter = e.customIndicator ? e.customIndicator : ''; + } else if (method === 'ContiniousParameter') { + parameter = e.attribute ? e.attribute : ''; + } + + const modelArea = computeCases.filter( + (c) => c.computeCaseId === e.computeCaseId, + )[0]?.modelArea; + + const element: ResultObjectType = { + variogramResultId: e.variogramResultId, + variogramResultFiles: e.variogramResultFiles, + computeCaseId: e.computeCaseId, + rmajor: roundResultString(e.rmajor), + rminor: roundResultString(e.rminor), + azimuth: roundResultString(e.azimuth), + rvertical: roundResultString(e.rvertical), + sigma: roundResultString(e.sigma), + qualityX: roundResultString(e.qualityX), + qualityY: roundResultString(e.qualityY), + qualityZ: roundResultString(e.qualityZ), + method: method ? method : '', + parameter: parameter, + archelFilter: e.archelFilter ? e.archelFilter : '', + modelArea: modelArea ? modelArea.name : '', + variogramModel: e.family ? e.family : '', + quality: roundResultString(e.quality), + identifier: e.identifier, + }; + + subRowArray.push(element); + }); + + return subRowArray; + }; + + const renderSubComponent = ({ row }: { row: Row }) => { + const sub = getSubRows(row.original.computeCaseId, row.original.identifier); + return ( +
+ +
+ ); + }; + + const columns: ColumnDef[] = [ + { + id: 'expand', + header: () => null, + cell: ({ row }) => { + return ( + row.getCanExpand() && ( + + ) + ); + }, + }, + { + accessorKey: 'method', + header: () =>
Compute method
, + cell: ({ getValue }) =>
{getValue()}
, + id: 'method', + }, + { + accessorKey: 'parameter', + header: () =>
Parameter
, + id: 'parameter', + }, + { + accessorKey: 'archelFilter', + header: () =>
Archel Filter
, + id: 'archelFilter', + }, + { + accessorKey: 'modelArea', + header: () =>
Model Area
, + id: 'modelArea', + }, + ]; + + const getRows = () => { + const rowArray: ResultObjectType[] = []; + + resultList.forEach((e) => { + const res = rowArray.some( + (element) => + element.computeCaseId === e.computeCaseId && + element.identifier === e.identifier, + ); + + if (res) return; + + const method = computeCases.filter( + (c) => c.computeCaseId === e.computeCaseId, + )[0]?.computeMethod?.name; + let parameter = ''; + if (method === 'Indicator') { + parameter = e.indicator ? e.indicator : ''; + } else if (method === 'Net-To-Gross') { + parameter = e.customIndicator ? e.customIndicator : ''; + } else if (method === 'ContiniousParameter') { + parameter = e.attribute ? e.attribute : ''; + } + + const modelArea = computeCases.filter( + (c) => c.computeCaseId === e.computeCaseId, + )[0]?.modelArea; + + const element: ResultObjectType = { + variogramResultId: e.variogramResultId, + variogramResultFiles: e.variogramResultFiles, + computeCaseId: e.computeCaseId, + rmajor: roundResultString(e.rmajor), + rminor: roundResultString(e.rminor), + azimuth: roundResultString(e.azimuth), + rvertical: roundResultString(e.rvertical), + sigma: roundResultString(e.sigma), + qualityX: roundResultString(e.qualityX), + qualityY: roundResultString(e.qualityY), + qualityZ: roundResultString(e.qualityZ), + method: method ? method : '', + parameter: parameter, + archelFilter: e.archelFilter ? e.archelFilter : '', + modelArea: modelArea ? modelArea.name : '', + variogramModel: e.family ? e.family : '', + quality: roundResultString(e.quality), + identifier: e.identifier, + }; + rowArray.push(element); + }); + + return rowArray; + }; + + return ( + + true} + renderSubComponent={renderSubComponent} + /> + + ); +}; diff --git a/src/features/Results/CaseResult/CaseResultView/VariogramCaseResult/VariogramResultTable/VariogramResultTable.styled.ts b/src/features/Results/CaseResult/CaseResultView/VariogramCaseResult/VariogramResultTable/VariogramResultTable.styled.ts deleted file mode 100644 index 30a7c8bf..00000000 --- a/src/features/Results/CaseResult/CaseResultView/VariogramCaseResult/VariogramResultTable/VariogramResultTable.styled.ts +++ /dev/null @@ -1,42 +0,0 @@ -import { Dialog } from '@equinor/eds-core-react'; -import styled from 'styled-components'; -import { spacings } from '../../../../../../tokens/spacings'; - -export const Table = styled.div` - overflow-x: auto; - padding-bottom: ${spacings.MEDIUM}; - - > div { - overflow-y: hidden; - - > table { - > thead { - > tr { - > th { - vertical-align: baseline !important; - } - } - } - } - > div { - margin-top: 2rem; - } - } -`; - -export const StyledDialog = styled(Dialog)` - min-width: 500px; - min-height: 500px; -`; - -export const Column = styled.span` - white-space: nowrap; -`; - -export const Quality = styled.span` - display: flex; - flex-direction: column; - align-items: end; -`; - -export { StyledDialog as Dialog }; diff --git a/src/features/Results/CaseResult/CaseResultView/VariogramCaseResult/VariogramResultTable/VariogramResultTable.tsx b/src/features/Results/CaseResult/CaseResultView/VariogramCaseResult/VariogramResultTable/VariogramResultTable.tsx deleted file mode 100644 index 4b9d4f86..00000000 --- a/src/features/Results/CaseResult/CaseResultView/VariogramCaseResult/VariogramResultTable/VariogramResultTable.tsx +++ /dev/null @@ -1,154 +0,0 @@ -/* eslint-disable max-lines-per-function */ -import { Typography } from '@equinor/eds-core-react'; -import { EdsDataGrid } from '@equinor/eds-data-grid-react'; -import { useState } from 'react'; -import { GetVariogramResultsDto } from '../../../../../../api/generated'; -import { ImageResult } from '../ImageResult/ImageResult'; -import * as Styled from './VariogramResultTable.styled'; -import { usePepmContextStore } from '../../../../../../hooks/GlobalState'; - -interface ResultObjectType { - variogramResultId: string; - computeCaseId: string; - method: string; - parameter: string; - archelFilter: string; - modelArea: string; - variogramModel: string; - quality: string | number; -} - -const NumberOfDecimals = 3; - -export const VariogramResultTable = ({ - resultList, -}: { - resultList: GetVariogramResultsDto[]; -}) => { - const { computeCases } = usePepmContextStore(); - const [open, setOpen] = useState(false); - const [imageId, setImageId] = useState(''); - - const roundResultString = (value: number) => { - if (value) { - return value.toFixed(NumberOfDecimals); - } else return value; - }; - - const resultElementsList: ResultObjectType[] = resultList.map((e) => { - const method = computeCases.filter( - (c) => c.computeCaseId === e.computeCaseId, - )[0]?.computeMethod?.name; - let parameter = ''; - if (method === 'Indicator') { - parameter = e.indicator ? e.indicator : ''; - } else if (method === 'Net-To-Gross') { - parameter = e.customIndicator ? e.customIndicator : ''; - } else if (method === 'ContiniousParameter') { - parameter = e.attribute ? e.attribute : ''; - } - - const modelArea = computeCases.filter( - (c) => c.computeCaseId === e.computeCaseId, - )[0]?.modelArea; - - const element: ResultObjectType = { - variogramResultId: e.variogramResultId, - computeCaseId: e.computeCaseId, - method: method ? method : '', - parameter: parameter, - archelFilter: e.archelFilter ? e.archelFilter : '', - modelArea: modelArea ? modelArea.name : '', - variogramModel: e.family ? e.family : '', - quality: roundResultString(e.quality) - ? roundResultString(e.quality) - : e.quality, - }; - return element; - }); - - const handleImageDialog = (id: string, variogramResultId: string) => { - const computeCaseResults = resultList.filter((e) => e.computeCaseId === id); - const resultFile = computeCaseResults - .find((r) => r.variogramResultId === variogramResultId)! - .variogramResultFiles.find((x) => - x.fileName.includes('variogram_slices_'), - ); - - const imageId = resultFile ? resultFile.variogramResultFileId : ''; - setImageId(imageId); - setOpen(!open); - }; - - return ( - <> - - Compute method, - id: 'method', - }, - { - accessorKey: 'parameter', - header: () => Parameter, - id: 'parameter', - }, - { - accessorKey: 'archelFilter', - header: () => Archel Filter, - id: 'archelFilter', - }, - { - accessorKey: 'modelArea', - header: () => Model Area, - id: 'modelArea', - }, - { - accessorKey: 'variogramModel', - header: () => Variogram model, - id: 'variogramModel', - cell: ({ row }) => ( -
- - handleImageDialog( - row.original.computeCaseId, - row.original.variogramResultId, - ) - } - link - > - {row.original.variogramModel} - -
- ), - }, - { - accessorKey: 'quality', - header: () => Quality factor, - id: 'quality', - enableColumnFilter: false, - cell: ({ row }) => ( - {row.original.quality} - ), - }, - ]} - /> - - - - ); -}; diff --git a/src/utils/RoundResultString.ts b/src/utils/RoundResultString.ts new file mode 100644 index 00000000..03b72a4a --- /dev/null +++ b/src/utils/RoundResultString.ts @@ -0,0 +1,11 @@ +const NumberOfDecimals = 3; + +export const roundResultString = ( + value: number, + numberDecimals: number = NumberOfDecimals, +) => { + if (value) { + const res: string = value.toFixed(numberDecimals); + return Number(res); + } else return value; +};