Skip to content

Commit

Permalink
fix(GUI): significantly improved report table column width distributi…
Browse files Browse the repository at this point in the history 
…on and code snippet presentation, fixed Japanese line break column headers
  • Loading branch information
@danielweck
danielweck committed Feb 6, 2025
1 parent c6318f4 commit a9da23b
Show file tree
Hide file tree
Showing 3 changed files with 116 additions and 79 deletions.
57 changes: 32 additions & 25 deletions src/renderer/components/ReportSections/Images.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,12 @@ export default class Images extends React.Component {
border: "black solid 1px", padding: 6,
overflow: "hidden",
}}>
<img onClick={() => {
<img tabIndex="0" onKeyUp={(e) => {
if (e.key === "Enter") {
// shell.openExternal(src);
ipcRenderer.send('ELECTRON_SHELL_OPEN_EXTERNAL', `file://${decodeURIComponent(src).replace(/\\/g, "/")}`);
}
}} onClick={() => {
// shell.openExternal(src);
ipcRenderer.send('ELECTRON_SHELL_OPEN_EXTERNAL', `file://${decodeURIComponent(src).replace(/\\/g, "/")}`);
}} style={{ maxHeight: rowHeight, objectFit: "contain", cursor: "pointer" }} src={`fileproto://host/${src}`}/>
Expand Down Expand Up @@ -157,11 +162,11 @@ export default class Images extends React.Component {
</TableCell>
},
{
id: 'location',
label: localize("report.imagesSection.location"),
id: 'role',
label: localize("report.imagesSection.role"),
numeric: false,
sortable: true,
filterOn: obj => obj.indexOf('#') > 0 ? obj.slice(0, obj.indexOf('#')) : obj,
filterOn: obj => obj,
makeCell: (row, idx) =>
<TableCell style={{
border: "black solid 1px", padding: 0,
Expand All @@ -174,29 +179,19 @@ export default class Images extends React.Component {
margin: 0,
height: rowHeight,
maxHeight: rowHeight,
textOverflow: "ellipsis",
overflowWrap: "break-word",
}} className="location">
<pre style={{
whiteSpace: "pre-wrap",
padding: 0,
margin: 0,
}}>{decodeURIComponent(row.location)}</pre>
<p style={{
whiteSpace: "pre-wrap",
padding: 3,
border: "silver solid 2px",
fontFamily: "monospace"
}}>{ row.src }</p>
whiteSpace: "break-spaces",
textOverflow: "ellipsis"
}}>
{row.role ? row.role : localize("report.imagesSection.NA")}
</div>
</TableCell>
},
{
id: 'role',
label: localize("report.imagesSection.role"),
id: 'location',
label: localize("report.imagesSection.location"),
numeric: false,
sortable: true,
filterOn: obj => obj,
filterOn: obj => obj.indexOf('#') > 0 ? obj.slice(0, obj.indexOf('#')) : obj,
makeCell: (row, idx) =>
<TableCell style={{
border: "black solid 1px", padding: 0,
Expand All @@ -209,10 +204,22 @@ export default class Images extends React.Component {
margin: 0,
height: rowHeight,
maxHeight: rowHeight,
whiteSpace: "break-spaces",
textOverflow: "ellipsis"
}}>
{row.role ? row.role : localize("report.imagesSection.NA")}
textOverflow: "ellipsis",
overflowWrap: "break-word",
}} className="location">
<pre style={{
whiteSpace: "pre-wrap",
padding: 0,
margin: 0,
maxWidth: 300,
}}>{decodeURIComponent(row.location)}</pre>
<p style={{
whiteSpace: "pre-wrap",
padding: 3,
border: "silver solid 2px",
fontFamily: "monospace",
maxWidth: 300,
}}>{ row.src }</p>
</div>
</TableCell>
}
Expand Down
120 changes: 75 additions & 45 deletions src/renderer/components/ReportSections/Violations.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ const {ipcRenderer} = require('electron');
import { localizer } from './../../../shared/l10n/localize';
const { localize, getCurrentLanguage } = localizer;

const rowHeight = 150;
const rowHeight = 200;

// the violations page of the report
export default class Violations extends React.Component {
Expand Down Expand Up @@ -130,82 +130,112 @@ export default class Violations extends React.Component {
</TableCell>
},
{
id: "location",
label: localize("report.violationsSection.location"),
id: "details",
label: localize("report.violationsSection.details"),
numeric: false,
sortable: true,
sortOn: location => location.filename,
filterOn: obj => obj.filename.indexOf('#') > 0 ? obj.filename.slice(0, obj.filename.indexOf('#')) : obj.filename,
sortable: false,
makeCell: (row, idx) =>

<TableCell style={{
border: "black solid 1px", padding: 0,
overflow: "hidden",
}} key={idx} className="location">
}} key={idx} className="details">
<div style={{
overflow: "hidden",
overflowY: "auto",
padding: 6,
margin: 0,
height: rowHeight,
maxheight: rowHeight,
whiteSpace: "break-spaces",
textOverflow: "ellipsis",
overflowWrap: "break-word",
minWidth: 260,
}} >

<pre style={{
whiteSpace: "pre-wrap",
padding: 0,
margin: 0,
}}>{row.location.filename}</pre>

{row.location.snippet != '' ?
<pre className='snippet' style={{
whiteSpace: "pre-wrap",
}}>{unescape(row.location.snippet)}</pre>
: ''}
</div>
<p style={{
padding: 0,
margin: 0,
marginBottom: 6,
}} ><a
href="#"
tabIndex={0}
className="external-link"
onKeyPress={(e) => { if (e.key === "Enter") { this.onExternalLinkClick(getCurrentLanguage() === "ja" ? row.details.kburl.replace(/\/docs\//, "/ja/") : row.details.kburl); }}}
onClick={() => this.onExternalLinkClick(getCurrentLanguage() === "ja" ? row.details.kburl.replace(/\/docs\//, "/ja/") : row.details.kburl)}
>{localize("report.violationsSection.learnAbout")} {row.details.kbtitle}</a></p>
<ul style={{
paddingLeft: "1em",
margin: 0,
}} >
{row.details.desc.map((txt, idx) => {
return (
<li key={idx}>{unescape(txt)}</li>
);
})}
</ul>
</div>
</TableCell>
},
{
id: "details",
label: localize("report.violationsSection.details"),
id: "location",
label: localize("report.violationsSection.location"),
numeric: false,
sortable: false,
sortable: true,
sortOn: location => location.filename,
filterOn: obj => obj.filename.indexOf('#') > 0 ? obj.filename.slice(0, obj.filename.indexOf('#')) : obj.filename,
makeCell: (row, idx) =>

<TableCell style={{
border: "black solid 1px", padding: 0,
overflow: "hidden",
}} key={idx} className="details">
}} key={idx} className="location">
<div style={{
overflow: "hidden",
overflowY: "auto",
padding: 6,
margin: 0,
height: rowHeight,
maxheight: rowHeight,
whiteSpace: "break-spaces",
textOverflow: "ellipsis"
}} >
<ul style={{
padding: "0 0 0 1em",
margin: 0,
textOverflow: "ellipsis",
overflowWrap: "break-word",
}} >
{row.details.desc.map((txt, idx) => {
return (
<li key={idx}>{unescape(txt)}</li>
);
})}
</ul>
<p><a
href="#"
tabIndex={0}
className="external-link"
onKeyPress={(e) => { if (e.key === "Enter") { this.onExternalLinkClick(getCurrentLanguage() === "ja" ? row.details.kburl.replace(/\/docs\//, "/ja/") : row.details.kburl); }}}
onClick={() => this.onExternalLinkClick(getCurrentLanguage() === "ja" ? row.details.kburl.replace(/\/docs\//, "/ja/") : row.details.kburl)}
>{localize("report.violationsSection.learnAbout")} {row.details.kbtitle}</a></p>
</div>

<pre style={{
whiteSpace: "pre-wrap",
padding: 0,
margin: 0,
marginBottom: 6,
maxWidth: 400,
}}>{row.location.filename}</pre>

{row.location.snippet ?
Array.from(new Set(
unescape(row.location.snippet)
.replace(/ xmlns="http:\/\/www\.w3\.org\/1999\/xhtml"/g, "")
.replace(/xmlns="http:\/\/www\.w3\.org\/1999\/xhtml" /g, "")
.replace(/xmlns="http:\/\/www\.w3\.org\/1999\/xhtml"/g, "")
.replace(/ xmlns:epub="http:\/\/www\.idpf\.org\/2007\/ops"/g, "")
.replace(/\s\s+/g, " ")
.split(" <!--##--> ")
.map(str => str && str.trim()) // str?.trim() NOT SUPPORTED BY BABEL IN THIS PROJECT!!
.filter((item) => {
return item && !/^<[^>]+>$/.test(item); // <p> etc. (related nodes generated by Deque Axe)
})
))
.map((item, index) => {
return (
<pre
key={`pre${index}`}
className='snippet' style={{
whiteSpace: "pre-wrap",
maxWidth: 400,
}}>
{item}
</pre>
);
})

: ''}
</div>
</TableCell>
}
];
Expand Down
18 changes: 9 additions & 9 deletions src/renderer/components/Table/EnhancedTable.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -323,20 +323,19 @@ export default class EnhancedTable extends React.Component {
</AccordionDetails>
</Accordion>
: ''}
<div style={{
overflow: "visible"
// overflowX: "auto"
}}>
<Table aria-live="polite" style={{
tableLayout: tableLayoutFixed ? "fixed" : undefined,
border: "silver solid 1px"
border: "silver solid 1px",
overflow: "visible"
}}>
<TableHead>
<TableRow>
{heads.map(head => {
return (
<TableCell
style={{border: "black solid 2px", fontWeight: "bold", overflow: "hidden", padding: 6}}
style={{border: "black solid 2px", fontWeight: "bold", overflow: "hidden", padding: 6,
wordBreak: "auto-phrase"
}}
key={head.id}
numeric={head.numeric.toString()}
sortDirection={head.sortable && orderBy === head.id ? order : false}>
Expand All @@ -359,8 +358,9 @@ export default class EnhancedTable extends React.Component {
</TableRow>
</TableHead>
<TableBody>
{stableSort(filteredRows, getSorting(order, orderBy, heads))
.slice(Math.min(filteredRows - 1, page * rowsPerPage), page * rowsPerPage + rowsPerPage)
{
stableSort(filteredRows, getSorting(order, orderBy, heads))
.slice(Math.min(filteredRows.length - 1, page * rowsPerPage), page * rowsPerPage + rowsPerPage)
.map((row, idx) => {
return (
<TableRow style={{
Expand Down Expand Up @@ -406,7 +406,7 @@ export default class EnhancedTable extends React.Component {
</TableFooter>
: '' }
</Table>
</div>

</div>
);
}
Expand Down

0 comments on commit a9da23b

Please sign in to comment.