Skip to content

adjust for border syntax check #73

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 5 commits into
base: development
Choose a base branch
from
Open

adjust for border syntax check #73

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
7403d7c
adjust for border syntax check
Ghesselink Jun 21, 2023
4ac6621
modify error indicator sign
Ghesselink Jun 21, 2023
4116dfa
reverse selection & clearer variables
Ghesselink Jun 21, 2023
2634fe1
change regex, use react fragment
Ghesselink Jun 29, 2023
17c11d5
remove unused code
Ghesselink Jun 29, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
43 changes: 40 additions & 3 deletions ui/src/SyntaxResult.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,12 +14,34 @@ export default function SyntaxResult({ content, status }) {

const handleChangePage = (_, newPage) => {
setPage(newPage);
};
};

useEffect(() => {
setRows(content.slice(page * 10, page * 10 + 10))
}, [page, content]);

function renderMessage(error_instance, numWhitespace, numHighlight) {
const beforeHighlight = error_instance.substring(0, numWhitespace);
const highlightedChar = error_instance.substring(numWhitespace, numWhitespace + numHighlight);
const afterHighlight = error_instance.substring(numWhitespace + numHighlight);
return (
<React.Fragment>
{beforeHighlight}
<span
style={{
textDecoration: 'underline',
fontWeight: 'bold',
backgroundColor: '#ddd',
border: 'solid 1px red'
}}
>
{highlightedChar}
</span>
{afterHighlight}
</React.Fragment>
);
};

return (
<Paper sx={{overflow: 'hidden'}}>
<TreeView
Expand All @@ -41,13 +63,27 @@ export default function SyntaxResult({ content, status }) {
".MuiTreeItem-content.Mui-expanded .subcaption" : { visibility: "visible" },
"table": { borderCollapse: 'collapse', fontSize: '80%' },
"td, th": { padding: '0.2em 0.5em', verticalAlign: 'top' },
".pre": { whiteSpace: 'pre', display: 'block' },
".pre": {
whiteSpace: 'pre-wrap',
wordBreak: 'break-word',
},
".mono": { fontFamily: 'monospace, monospace', marginTop: '0.3em' }
}}
>
<TreeItem nodeId="0" label="Syntax">
{ rows.length
? rows.map(item => {
const msg_parts = item.msg.split('\n');
const [_, numWhitespace, numHighlight] = msg_parts[msg_parts.length -1].match(/(\s*)(\^+)/).map(s => s.length);
const error_instance = msg_parts[msg_parts.length - 2];

const errorMessage = renderMessage(
error_instance,
numWhitespace,
numHighlight
);


return <TreeView defaultCollapseIcon={<ExpandMoreIcon />}
defaultExpandIcon={<ChevronRightIcon />}>
<TreeItem nodeId="syntax-0" label={<div class='caption'>{(item.error_type || 'syntax_error').replace('_', ' ')}</div>}>
Expand All @@ -61,7 +97,8 @@ export default function SyntaxResult({ content, status }) {
<td>{item.column}</td>
<td>
<span class='pre'>{item.msg.split('\n').slice(0, -2).join('\n')}</span>
<span class='pre mono'>{item.msg.split('\n').slice(-2).join('\n')}</span>
<br /> {}
<span class='pre mono'>{errorMessage}</span>
</td>
</tr>
</tbody>
Expand Down