Skip to content

Commit

Permalink
MWB-12-43: code clean
Browse files Browse the repository at this point in the history
  • Loading branch information
@SilverBerserk
SilverBerserk committed Feb 4, 2025
1 parent f850b6f commit 8413994
Show file tree
Hide file tree
Showing 9 changed files with 81 additions and 196 deletions.
79 changes: 70 additions & 9 deletions mapping_workbench/frontend/src/sections/app/mapping-package/state/utils.js
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,15 @@
import {useTheme} from '@mui/material/styles';
import {useState} from 'react';

import {Box} from '@mui/system';
import Stack from '@mui/material/Stack';
import Radio from '@mui/material/Radio';
import {capitalize} from '@mui/material';
import Button from '@mui/material/Button';
import Typography from '@mui/material/Typography';
import RadioGroup from '@mui/material/RadioGroup';
import FormControl from '@mui/material/FormControl';
import FormControlLabel from '@mui/material/FormControlLabel';
import Radio from '@mui/material/Radio';
import RadioGroup from '@mui/material/RadioGroup';
import Stack from '@mui/material/Stack';
import Typography from '@mui/material/Typography';
import {Box} from '@mui/system';
import {useState} from 'react';
import {capitalize, ResultChip} from '../../sparql-validation-report/utils';
import {ValueChip} from '../../xpath-validation-report/utils';

export const getValidationColor = (color) => {
switch (color) {
Expand Down Expand Up @@ -45,6 +46,23 @@ export const getResultColor = (result) => {
}
}

export const ValueChip = ({children, value, color, style}) => {
const theme = useTheme()
const themeColor = theme.palette?.[color] ?? {}
return (
<Stack sx={{
px: 1.4,
py: 0.3,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: themeColor.alpha12,
color: themeColor.main,
borderRadius: 5,
...style
}}>{value ?? children}</Stack>
)
}

export const getItemsDisplay = (items, total) => Object.entries(items)?.map(item => {
const [itemName, itemCount] = item
const percent = (itemCount / total) * 100 ?? 0
Expand Down Expand Up @@ -201,7 +219,7 @@ export const useFileNavigation = (reportTree) => {
}


export const handleOpenDetails = ({title, notices, handleSelect, setDescription}) => {
export const handleOpenDetails = (title, notices, handleSelect, setDescription) => {
const description = notices.map((notice, i) =>
<Box key={'notice' + i}>
<Button type='link'
Expand All @@ -218,4 +236,47 @@ export const handleOpenDetails = ({title, notices, handleSelect, setDescription}
</Box>)

setDescription({open: true, title, description});
}

export const ResultChip = ({label, color, fontColor, onClick, clickable, children}) => {
const hover = onClick ?? clickable ? {'&:hover': {filter: 'brightness(85%)'}, cursor: 'pointer'} : {}
return (
<Box sx={{
textAlign: 'center',
px: 1,
py: .5,
borderRadius: 12,
backgroundColor: color,
color: fontColor, ...hover
}}
onClick={onClick}
>
{label ?? children}
</Box>
)
}

export const ResultCell = ({item, handleSelect, setDescription}) => {
const title = item.title
return <Stack direction="column"
alignItems="center"
justifyContent="center"
gap={2}
height={100}>
{Object.entries(item.result).map(([key, value]) => {
return !!value.count && <Stack direction='row'
key={key}
gap={1}>
<ValueChip value={value.count}
color='primary'
sx={{p: 2}}/>
<ResultChip color={getValidationColor(key)}
clickable
fontColor='#fff'
onClick={() => handleOpenDetails(title, value.test_datas, handleSelect, setDescription)}
label={key}
/>
</Stack>
})}
</Stack>
}
56 changes: 3 additions & 53 deletions mapping_workbench/frontend/src/sections/app/shacl-validation-report/list-table.js
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,6 @@
import {useState} from "react";
import PropTypes from 'prop-types';

import {Box} from "@mui/system";
import Stack from "@mui/material/Stack";
import Table from '@mui/material/Table';
import Button from "@mui/material/Button";
import Dialog from '@mui/material/Dialog';
Expand All @@ -13,10 +11,9 @@ import TableHead from '@mui/material/TableHead';
import DialogTitle from "@mui/material/DialogTitle";
import DialogContent from "@mui/material/DialogContent";
import DialogActions from "@mui/material/DialogActions";
import {ResultCell} from '../mapping-package/state/utils';

import {ResultChip} from "./utils";
import {Scrollbar} from 'src/components/scrollbar';
import {ValueChip} from '../xpath-validation-report/utils';
import {useHighlighterTheme} from "src/hooks/use-highlighter-theme";
import SorterHeader from 'src/sections/components/table-sorter-header';
import TablePagination from "src/sections/components/table-pagination";
Expand Down Expand Up @@ -44,61 +41,13 @@ export const ListTable = (props) => {
handleSelectFile
} = props;

const handleOpenDetails = ({title, notices}) => {
const description = notices.map((notice, i) =>
<Box key={'notice' + i}>
<Button type='link'
onClick={() => handleSelectFile(notice.test_data_suite_oid)}
>
{notice.test_data_suite_id}
</Button>
{' / '}
<Button type='link'
onClick={() => handleSelectFile(notice.test_data_suite_oid, notice.test_data_oid)}
>
{notice.test_data_id}
</Button>
</Box>)

setDescriptionDialog({open: true, title, description});
}

const handleClose = () => setDescriptionDialog(e => ({...e, open: false}));

const SorterHeader = (props) => <TableSorterHeader sort={sort}
onSort={onSort}
{...props}
/>


const ResultCell = ({item, onClick}) => {
const title = item.title
return <Stack direction="column"
alignItems="center"
justifyContent="center"
gap={2}
height={100}>
{Object.entries(item.result).map(([key, value]) => {
return value.count > 0
? <Stack direction='row'
key={key}
gap={1}>
<ValueChip value={value.count}
color='primary'
sx={{p: 2}}/>
<ResultChip color={key}
clickable
fontColor='#fff'
onClick={() => onClick({title, notices: value.test_datas})}
label={key}
/>
</Stack>
: null
})
}
</Stack>
}

return (
<>
<TablePagination
Expand Down Expand Up @@ -170,7 +119,8 @@ export const ListTable = (props) => {
</TableCell>
<TableCell>
<ResultCell item={item}
onClick={handleOpenDetails}/>
handleSelect={handleSelectFile}
setDescription={setDescriptionDialog}/>
</TableCell>
</TableRow>

Expand Down
12 changes: 0 additions & 12 deletions mapping_workbench/frontend/src/sections/app/shacl-validation-report/utils.js
View file
Original file line number Diff line number Diff line change
@@ -1,21 +1,9 @@
import Chip from "@mui/material/Chip";
import Stack from "@mui/material/Stack";
import Alert from "@mui/material/Alert";
import Tooltip from "@mui/material/Tooltip";
import Skeleton from "@mui/material/Skeleton";
import TableSortLabel from "@mui/material/TableSortLabel";

import {getResultColor} from '../mapping-package/state/utils';

export const ResultChip = ({label, color, clickable, onClick}) => {
return (
<Chip label={label}
clickable={clickable}
color={getResultColor(color ?? label)}
onClick={onClick}
/>
)
}

export const SorterHeader = ({fieldName, title, desc, sort, onSort}) => {
return <Tooltip enterDelay={300}
Expand Down
3 changes: 1 addition & 2 deletions mapping_workbench/frontend/src/sections/app/sparql-validation-report/list-table-file.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,9 +13,8 @@ import CheckIcon from "@mui/icons-material/Check";
import CloseIcon from "@mui/icons-material/Close";
import Typography from '@mui/material/Typography';

import {ResultChip} from "./utils";
import {Scrollbar} from 'src/components/scrollbar';
import {getValidationColor} from '../mapping-package/state/utils';
import {getValidationColor, ResultChip} from '../mapping-package/state/utils';
import {useHighlighterTheme} from "src/hooks/use-highlighter-theme"
import TablePagination from "src/sections/components/table-pagination";
import {LocalHighlighter} from 'src/sections/components/local-highlighter';
Expand Down
54 changes: 3 additions & 51 deletions mapping_workbench/frontend/src/sections/app/sparql-validation-report/list-table.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ import PropTypes from 'prop-types';
import CheckIcon from "@mui/icons-material/Check";
import CloseIcon from "@mui/icons-material/Close";

import {Box} from "@mui/system";
import Table from '@mui/material/Table';
import Stack from "@mui/material/Stack";
import Button from "@mui/material/Button";
Expand All @@ -19,45 +18,15 @@ import DialogTitle from "@mui/material/DialogTitle";
import DialogContent from "@mui/material/DialogContent";
import DialogActions from "@mui/material/DialogActions";


import {ResultChip} from "./utils";
import {useDialog} from "src/hooks/use-dialog";
import {Scrollbar} from 'src/components/scrollbar';
import {ValueChip} from '../xpath-validation-report/utils';
import SorterHeader from '../../components/table-sorter-header';
import {getValidationColor} from '../mapping-package/state/utils';
import {ResultCell, ValueChip} from '../mapping-package/state/utils';
import {LocalHighlighter} from '../../components/local-highlighter';
import {useHighlighterTheme} from "src/hooks/use-highlighter-theme";
import TablePagination from "src/sections/components/table-pagination";
import {TableFilterHeader} from "src/layouts/app/table-filter-header/table-filter-header";

const ResultCell = ({item, onClick}) => {
const title = item.title
return <Stack direction="column"
alignItems="center"
justifyContent="center"
gap={2}
height={100}>
{Object.entries(item.result).map(([key, value]) => {
return value.count > 0
? <Stack direction='row'
key={key}
gap={1}>
<ValueChip value={value.count}
color='primary'
sx={{p: 2}}/>
<ResultChip color={getValidationColor(key)}
clickable
fontColor='#fff'
onClick={() => onClick({title, notices: value.test_datas})}
label={key}
/>
</Stack>
: null
})
}
</Stack>
}

export const ListTable = (props) => {
const [descriptionDialog, setDescriptionDialog] = useState({open: false, title: "", description: ""})
Expand All @@ -79,24 +48,6 @@ export const ListTable = (props) => {
handleSelectFile
} = props;

const handleOpenDetails = ({title, notices}) => {
const description = notices.map((notice, i) =>
<Box key={'notice' + i}>
<Button type='link'
onClick={() => handleSelectFile(notice.test_data_suite_oid)}
>
{notice.test_data_suite_id}
</Button>
{' / '}
<Button type='link'
onClick={() => handleSelectFile(notice.test_data_suite_oid, notice.test_data_oid)}
>
{notice.test_data_id}
</Button>
</Box>)
setDescriptionDialog({open: true, title, description});
}

const handleClose = () => setDescriptionDialog(e => ({...e, open: false}));

const xpathConditionDialog = useDialog()
Expand Down Expand Up @@ -200,7 +151,8 @@ export const ListTable = (props) => {
</TableCell>
<TableCell>
<ResultCell item={item}
onClick={handleOpenDetails}/>
handleSelect={handleSelectFile}
setDescription={setDescriptionDialog}/>
</TableCell>
</TableRow>

Expand Down
27 changes: 0 additions & 27 deletions mapping_workbench/frontend/src/sections/app/sparql-validation-report/utils.js
View file
Original file line number Diff line number Diff line change
@@ -1,34 +1,7 @@
import {Box} from "@mui/system";
import Stack from "@mui/material/Stack";
import Radio from "@mui/material/Radio";
import Alert from "@mui/material/Alert";
import Skeleton from "@mui/material/Skeleton";
import Typography from "@mui/material/Typography";
import RadioGroup from "@mui/material/RadioGroup";
import FormControl from '@mui/material/FormControl';
import FormControlLabel from "@mui/material/FormControlLabel";
import {getValidationColor} from '../mapping-package/state/utils';
import {ValueChip} from '../xpath-validation-report/utils';

export const capitalize = (value) => `${value[0].toUpperCase()}${value.slice(1)}`

export const ResultChip = ({label, color, fontColor, onClick, clickable, children}) => {
const hover = onClick ?? clickable ? {'&:hover': {filter: 'brightness(85%)'}, cursor: 'pointer'} : {}
return (
<Box sx={{
textAlign: 'center',
px: 1,
py: .5,
borderRadius: 12,
backgroundColor: color,
color: fontColor, ...hover
}}
onClick={onClick}
>
{label ?? children}
</Box>
)
}

export const TableSkeleton = ({lines = 5}) => {
return new Array(lines).fill("").map((e, i) =>
Expand Down
3 changes: 1 addition & 2 deletions mapping_workbench/frontend/src/sections/app/xpath-validation-report/list-table-file.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,9 +18,8 @@ import DialogActions from "@mui/material/DialogActions";
import DialogContentText from "@mui/material/DialogContentText";
import {LocalHighlighter} from '../../components/local-highlighter';

import {ValueChip} from './utils';
import {Scrollbar} from 'src/components/scrollbar';
import {getValidationColor} from '../mapping-package/state/utils';
import {getValidationColor, ValueChip} from '../mapping-package/state/utils';
import {useHighlighterTheme} from "src/hooks/use-highlighter-theme";
import TablePagination from "src/sections/components/table-pagination";
import TableSorterHeader from "src/sections/components/table-sorter-header";
Expand Down
Loading

0 comments on commit 8413994

Please sign in to comment.