Skip to content

Commit

Permalink
MWB-952: update shacl tables
Browse files Browse the repository at this point in the history
  • Loading branch information
@SilverBerserk
SilverBerserk committed Jan 20, 2025
1 parent ec3870a commit 16719bc
Show file tree
Hide file tree
Showing 5 changed files with 72 additions and 108 deletions.
64 changes: 27 additions & 37 deletions mapping_workbench/frontend/src/sections/app/shacl-validation-report/list-table-file.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,19 @@ import TableRow from '@mui/material/TableRow';

import {Scrollbar} from 'src/components/scrollbar';
import {useHighlighterTheme} from "src/hooks/use-highlighter-theme";
import TablePagination from 'src/sections/components/table-pagination';
import {TableFilterHeader} from "../../../layouts/app/table-filter-header/table-filter-header";
import TablePagination from 'src/sections/components/table-pagination-pages';
import {TableFilterHeader} from "src/layouts/app/table-filter-header/table-filter-header";

const LocalHighlighter = ({text, language, theme}) => {
return text ? <SyntaxHighlighter
language={language}
wrapLines
customStyle={{borderRadius: 12, border: '1px solid #E4E7EC'}}
style={theme}
lineProps={{style: {overflowWrap: 'break-word', whiteSpace: 'pre-wrap'}}}>
{text}
</SyntaxHighlighter> : null
}
export const ListTableFile = (props) => {

const {
Expand Down Expand Up @@ -91,49 +101,29 @@ export const ListTableFile = (props) => {
return (
<TableRow key={key}>
<TableCell width="25%">
<SyntaxHighlighter
language="turtle"
wrapLines
style={syntaxHighlighterTheme}
lineProps={{style: {overflowWrap: 'break-word', whiteSpace: 'pre-wrap'}}}>
{item.short_focus_node}
</SyntaxHighlighter>
<LocalHighlighter language='turtle'
text={item.short_focus_node}
theme={syntaxHighlighterTheme}/>
</TableCell>
<TableCell>
<SyntaxHighlighter
language="turtle"
wrapLines
style={syntaxHighlighterTheme}
lineProps={{style: {overflowWrap: 'break-word', whiteSpace: 'pre-wrap'}}}>
{item.message}
</SyntaxHighlighter>
<LocalHighlighter language='turtle'
text={item.message}
theme={syntaxHighlighterTheme}/>
</TableCell>
<TableCell>
<SyntaxHighlighter
language="sparql"
wrapLines
style={syntaxHighlighterTheme}
lineProps={{style: {overflowWrap: 'break-word', whiteSpace: 'pre-wrap'}}}>
{item.short_result_path}
</SyntaxHighlighter>
<LocalHighlighter language='sparql'
text={item.short_result_path}
theme={syntaxHighlighterTheme}/>
</TableCell>
<TableCell>
<SyntaxHighlighter
language="turtle"
wrapLines
style={syntaxHighlighterTheme}
lineProps={{style: {overflowWrap: 'break-word', whiteSpace: 'pre-wrap'}}}>
{item.short_result_severity}
</SyntaxHighlighter>
<LocalHighlighter language='turtle'
text={item.short_result_severity}
theme={syntaxHighlighterTheme}/>
</TableCell>
<TableCell>
<SyntaxHighlighter
language="turtle"
wrapLines
style={syntaxHighlighterTheme}
lineProps={{style: {overflowWrap: 'break-word', whiteSpace: 'pre-wrap'}}}>
{item.short_source_constraint_component}
</SyntaxHighlighter>
<LocalHighlighter language='turtle'
text={item.short_source_constraint_component}
theme={syntaxHighlighterTheme}/>
</TableCell>
</TableRow>
);
Expand Down
97 changes: 36 additions & 61 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
Expand Up @@ -13,14 +13,16 @@ 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 validationColor from '../mapping-package/state/validation-color';
import {ValueChip} from '../xpath-validation-report/utils';

import {ResultChip} from "./utils";
import {Scrollbar} from 'src/components/scrollbar';
import {useHighlighterTheme} from "src/hooks/use-highlighter-theme";
import {Prism as SyntaxHighlighter} from 'react-syntax-highlighter';
import TablePagination from "src/sections/components/table-pagination";
import TableSorterHeader from "src/sections/components/table-sorter-header";
import {TableFilterHeader} from "../../../layouts/app/table-filter-header/table-filter-header";
import TablePagination from "src/sections/components/table-pagination-pages";
import {TableFilterHeader} from "src/layouts/app/table-filter-header/table-filter-header";

export const ListTable = (props) => {
const [descriptionDialog, setDescriptionDialog] = useState({open: false, title: "", text: ""})
Expand Down Expand Up @@ -67,20 +69,33 @@ export const ListTable = (props) => {
{...props}
/>

const ResultCell = ({title, result, onClick}) => {
return (
<Stack direction="column"
alignItems="center"
justifyContent="start"
height={100}>
{result.count
? <Button variant="outlined"
onClick={() => onClick({title, notices: result.test_datas})}>
{result.count}
</Button>
: <Box sx={{mt: '10px'}}>{result.count}</Box>}
</Stack>
)

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={validationColor(key)}
clickable
fontColor='#fff'
onClick={() => onClick({title, notices: value.test_datas})}
label={key}
/>
</Stack>
: null
})
}
</Stack>
}

return (
Expand Down Expand Up @@ -120,29 +135,8 @@ export const ListTable = (props) => {
fieldName="short_result_path"
title="Result Path"/>
</TableCell>
<TableCell align="center">
<SorterHeader fieldName="infoCount"
title={<ResultChip label="Info"
clickable/>}
desc/>
</TableCell>
<TableCell align="center">
<SorterHeader fieldName="validCount"
title={<ResultChip label="Valid"
clickable/>}
desc/>
</TableCell>
<TableCell align="center">
<SorterHeader fieldName="warningCount"
title={<ResultChip label="Warning"
clickable/>}
desc/>
</TableCell>
<TableCell align="center">
<SorterHeader fieldName="violationCount"
title={<ResultChip label="Violation"
clickable/>}
desc/>
<TableCell align='center'>
Result
</TableCell>
</TableRow>
</TableHead>
Expand All @@ -161,6 +155,7 @@ export const ListTable = (props) => {
language="turtle"
wrapLines
style={syntaxHighlighterTheme}
customStyle={{borderRadius: 12, border: '1px solid #E4E7EC'}}
lineProps={{
style: {
overflowWrap: 'break-word',
Expand All @@ -171,28 +166,8 @@ export const ListTable = (props) => {
</SyntaxHighlighter>
</TableCell>
<TableCell>
<ResultCell
title={item.shacl_suite}
result={item.result.info}
onClick={handleOpenDetails}/>
</TableCell>
<TableCell>
<ResultCell
title={item.shacl_suite}
result={item.result.valid}
onClick={handleOpenDetails}/>
</TableCell>
<TableCell>
<ResultCell
title={item.shacl_suite}
result={item.result.warning}
onClick={handleOpenDetails}/>
</TableCell>
<TableCell>
<ResultCell
title={item.shacl_suite}
result={item.result.violation}
onClick={handleOpenDetails}/>
<ResultCell item={item}
onClick={handleOpenDetails}/>
</TableCell>
</TableRow>

Expand Down
1 change: 0 additions & 1 deletion ...ng_workbench/frontend/src/sections/app/shacl-validation-report/result-summary-coverage.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,6 @@ export const ResultSummaryCoverage = ({validationReport, handleExport}) => {

const itemsDisplay = Object.entries(itemsReduce)?.map(item => {
const [itemName, itemCount] = item
console.log(item)
const percent = (itemCount / itemsTotal) * 100 ?? 0

return {
Expand Down
2 changes: 0 additions & 2 deletions ...rkbench/frontend/src/sections/app/shacl-validation-report/shacl_validation_report_view.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,6 @@ const ShaclValidationReportView = ({sid, reportTree, validationReport, handleExp
const [selectedPackageState, setSelectedPackageState] = useState()
const [selectedTestDataset, setSelectedTestDataset] = useState()

console.log(selectedTestDataset,selectedTestDataset)

const handleSetPackageState = (file) => {
setSelectedPackageState(file)
setSelectedTestDataset(undefined)
Expand Down
16 changes: 9 additions & 7 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 @@ -33,21 +33,23 @@ const ResultCell = ({item, onClick}) => {
const title = item.title
return <Stack direction="column"
alignItems="center"
justifyContent="start"
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}}/>
sx={{p: 2}}/>
<ResultChip color={validationColor(key)}
clickable
fontColor='#fff'
onClick={() => onClick({title, notices: value.test_datas})}
label={key}
/>
clickable
fontColor='#fff'
onClick={() => onClick({title, notices: value.test_datas})}
label={key}
/>
</Stack>
: null
})
Expand Down

0 comments on commit 16719bc

Please sign in to comment.