MWB-952: update sparql tables

meaningfy-ws · Jan 20, 2025 · ec3870a · ec3870a
1 parent b68aa3a
commit ec3870a
Show file tree

Hide file tree

Showing 6 changed files with 61 additions and 49 deletions.
diff --git a/mapping_workbench/frontend/src/sections/app/sparql-validation-report/list-table-file.js b/mapping_workbench/frontend/src/sections/app/sparql-validation-report/list-table-file.js
@@ -1,3 +1,4 @@
+import {capitalize} from '@mui/material';
 import {Prism as SyntaxHighlighter} from 'react-syntax-highlighter';
 
 import {Box} from "@mui/system";
@@ -12,10 +13,12 @@ import TableHead from '@mui/material/TableHead';
 import CheckIcon from "@mui/icons-material/Check";
 import CloseIcon from "@mui/icons-material/Close";
 import Typography from '@mui/material/Typography';
+import validationColor from '../mapping-package/state/validation-color';
+import {ValueChip} from '../xpath-validation-report/utils';
 
-import {resultColor} from "./utils";
+import {ResultChip, resultColor} from "./utils";
 import {Scrollbar} from 'src/components/scrollbar';
-import TablePagination from "src/sections/components/table-pagination";
+import TablePagination from "src/sections/components/table-pagination-pages";
 import TableSorterHeader from "src/sections/components/table-sorter-header";
 
 import PropTypes from "prop-types";
@@ -43,7 +46,7 @@ export const ListTableFile = (props) => {
         sectionApi
     } = props;
 
-    const syntaxHightligterTheme = useHighlighterTheme()
+    const syntaxHighlighterTheme = useHighlighterTheme()
 
     const SorterHeader = (props) => {
         const direction = props.fieldName === sort.column && sort.direction === 'desc' ? 'asc' : 'desc';
@@ -126,7 +129,11 @@ export const ListTableFile = (props) => {
                                                         <SyntaxHighlighter
                                                             language="xquery"
                                                             wrapLines
-                                                            style={syntaxHightligterTheme}
+                                                            customStyle={{
+                                                                borderRadius: 12,
+                                                                border: '1px solid #E4E7EC'
+                                                            }}
+                                                            style={syntaxHighlighterTheme}
                                                             lineProps={{
                                                                 style: {
                                                                     wordBreak: 'break-all',
@@ -152,7 +159,11 @@ export const ListTableFile = (props) => {
                                             <SyntaxHighlighter
                                                 language="sparql"
                                                 wrapLines
-                                                style={syntaxHightligterTheme}
+                                                style={syntaxHighlighterTheme}
+                                                customStyle={{
+                                                    borderRadius: 12,
+                                                    border: '1px solid #E4E7EC'
+                                                }}
                                                 lineProps={{
                                                     style: {
                                                         overflowWrap: 'break-word',
@@ -163,8 +174,10 @@ export const ListTableFile = (props) => {
                                             </SyntaxHighlighter>
                                         </TableCell>
                                         <TableCell align="left">
-                                            <Chip label={item.result}
-                                                  color={resultColor(item.result)}/>
+                                            <ResultChip color={validationColor(item.result)}
+                                                        fontColor='#fff'>
+                                                {capitalize(item.result)}
+                                            </ResultChip>
                                         </TableCell>
                                         <TableCell align="left">
                                             <Box>

diff --git a/mapping_workbench/frontend/src/sections/app/sparql-validation-report/list-table.js b/mapping_workbench/frontend/src/sections/app/sparql-validation-report/list-table.js
@@ -30,7 +30,6 @@ import TablePagination from "src/sections/components/table-pagination-pages";
 import {TableFilterHeader} from "src/layouts/app/table-filter-header/table-filter-header";
 
 const ResultCell = ({item, onClick}) => {
-    console.log(item)
     const title = item.title
     return <Stack direction="column"
                   alignItems="center"
@@ -189,7 +188,6 @@ export const ListTable = (props) => {
                                                 wrapLines
                                                 style={syntaxHighlighterTheme}
                                                 customStyle={{borderRadius: 12, border: '1px solid #E4E7EC'}}
-
                                                 lineProps={{
                                                     style: {
                                                         overflowWrap: 'break-word',

diff --git a/...bench/frontend/src/sections/app/sparql-validation-report/sparql_validation_report_file.js b/...bench/frontend/src/sections/app/sparql-validation-report/sparql_validation_report_file.js
@@ -1,7 +1,9 @@
 import {useEffect, useState} from "react";
 
+import Stack from '@mui/material/Stack';
 import Paper from '@mui/material/Paper';
 import Grid from '@mui/material/Unstable_Grid2';
+import Typography from '@mui/material/Typography';
 
 import {ListTableFile} from "./list-table-file";
 import {ResultFilter, TableLoadWrapper} from "./utils";
@@ -64,8 +66,15 @@ const SparqlFileReport = ({sid, suiteId, testId, handleExport}) => {
                 <Paper>
                     <TableLoadWrapper dataState={dataState}
                                       data={validationReport}>
-                        <ResultFilter onStateChange={handleResultFilterChange}
-                                      currentState={itemsSearch.state.filters.result}/>
+                        <Stack direction='row'
+                                                   alignItems='center'
+                                                   justifyContent='space-between'
+                                                   sx={{mx: 3}}>
+                            <Typography fontWeight='bold'>Assertions</Typography>
+                            <ResultFilter
+                                onStateChange={handleResultFilterChange}
+                                          currentState={itemsSearch.state.filters.result}/>
+                        </Stack>
                         <ListTableFile
                             items={itemsSearch.pagedItems}
                             count={itemsSearch.count}

diff --git a/...ntend/src/sections/app/sparql-validation-report/sparql_validation_report_package_state.js b/...ntend/src/sections/app/sparql-validation-report/sparql_validation_report_package_state.js
@@ -1,10 +1,12 @@
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
 import {useState} from "react";
 
 import Paper from '@mui/material/Paper';
 import Grid from '@mui/material/Unstable_Grid2';
 
 import {ListTable} from "./list-table";
-import {TableLoadWrapper} from "./utils";
+import {ResultFilter, TableLoadWrapper} from "./utils";
 import useItemsSearch from "src/hooks/use-items-search";
 import {ResultSummaryCoverage} from './result-summary-coverage';
 import {mappingPackageStatesApi as sectionApi} from "src/api/mapping-packages/states";
@@ -13,6 +15,7 @@ import {mappingPackageStatesApi as sectionApi} from "src/api/mapping-packages/st
 const SparqlValidationReport = ({handleSelectFile, validationReport, handleExport}) => {
     const [dataState, setDataState] = useState({load: false, error: false})
     const itemsSearch = useItemsSearch(validationReport, sectionApi);
+    const handleResultFilterChange = e => itemsSearch.handleFiltersChange({result: e.target.value})
 
     return (
         <>

diff --git a/mapping_workbench/frontend/src/sections/app/sparql-validation-report/utils.js b/mapping_workbench/frontend/src/sections/app/sparql-validation-report/utils.js
@@ -1,15 +1,17 @@
 import {Box} from "@mui/system";
-import Chip from "@mui/material/Chip";
 import Stack from "@mui/material/Stack";
-import Paper from "@mui/material/Paper";
 import Radio from "@mui/material/Radio";
 import Alert from "@mui/material/Alert";
 import Tooltip from "@mui/material/Tooltip";
 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 TableSortLabel from "@mui/material/TableSortLabel";
 import FormControlLabel from "@mui/material/FormControlLabel";
+import validationColor from '../mapping-package/state/validation-color';
+
+export const capitalize = (value) => `${value[0].toUpperCase()}${value.slice(1)}`
 
 export const resultColor = (result) => {
     switch (result.toLowerCase()) {
@@ -26,10 +28,10 @@ export const resultColor = (result) => {
     }
 }
 
-export const ResultChip = ({label, color, fontColor, onClick}) => {
-    const hover = onClick ? {'&:hover': {filter: 'brightness(85%)'}, cursor: 'pointer'} : {}
+export const ResultChip = ({label, color, fontColor, onClick, clickable, children}) => {
+    const hover = onClick ?? clickable ? {'&:hover': {filter: 'brightness(85%)'}, cursor: 'pointer'} : {}
     return (
-        <Box sx={{px: 1, py: .5, borderRadius: 12, backgroundColor: color, color: fontColor, ...hover}}
+        <Box sx={{textAlign:'center',px: 1, py: .5, borderRadius: 12, backgroundColor: color, color: fontColor, ...hover}}
              onClick={onClick}
         >
             {label ?? children}
@@ -47,50 +49,38 @@ export const ResultFilter = ({currentState, onStateChange}) => {
                 checked={currentState === (value ?? label.toLowerCase())}
                 label={(
                     <Box sx={{ml: 0, mr: 1}}>
-                        <Typography
-                            variant="subtitle2"
-                        >
-                            <ResultChip clickable
-                                        label={label}/>
-                        </Typography>
+                            <Typography
+                                variant="subtitle2"
+                            >
+                                <ResultChip color={validationColor(label)}
+                                            fontColor='#fff'
+                                            clickable
+                                            label={capitalize(label)}/>
+                            </Typography>
+
                     </Box>
                 )}
                 value={value ?? label.toLowerCase()}
             />)
     }
 
     return (
-        <Box sx={{p: 2.5, display: 'flex'}}
-             direction="row">
+        <FormControl sx={{p: 2}}>
             <Stack
+                direction='row'
                 component={RadioGroup}
                 name="terms_validity"
-                spacing={3}
                 onChange={onStateChange}
             >
-                <Paper
-                    sx={{
-                        alignItems: 'flex-start',
-                        display: 'flex',
-                        p: 2
-                    }}
-                    variant="outlined"
-                >
-                    <Box sx={{mr: 2, mt: 1}}>
-                        <b>Filter Results:</b>
-                    </Box>
-                    <FilterValue label="all"
-                                 value=""
-                                 currentState={currentState}/>
-                    {reportValues.map(value =>
-                        <FilterValue key={value}
-                                     label={value}
-                                     currentState={currentState}/>)}
-
-
-                </Paper>
+                <FilterValue label="all"
+                             value=""
+                             currentState={currentState}/>
+                {reportValues.map(value =>
+                    <FilterValue key={value}
+                                 label={value}
+                                 currentState={currentState}/>)}
             </Stack>
-        </Box>
+        </FormControl>
     )
 }
 

diff --git a/mapping_workbench/frontend/src/sections/app/xpath-validation-report/utils.js b/mapping_workbench/frontend/src/sections/app/xpath-validation-report/utils.js
@@ -1,4 +1,3 @@
-import Box from "@mui/material/Box";
 import Radio from "@mui/material/Radio";
 import Stack from "@mui/material/Stack";
 import Alert from "@mui/material/Alert";