fix(GUI): improved table layout (tested with Japanese and other local…

…es) with better column width distribution, per-table row height
daisy · Feb 6, 2025 · c6318f4 · c6318f4
1 parent 2d89006
commit c6318f4
Show file tree

Hide file tree

Showing 6 changed files with 65 additions and 41 deletions.
diff --git a/src/renderer/components/Report.js b/src/renderer/components/Report.js
@@ -36,7 +36,7 @@ export default class Report extends React.Component {
         ref={ref => { this.domRef = ReactDOM.findDOMNode(ref) }}>
 
         <h1>{localize("report.title")}</h1>
-        <Tabs onChange={(e, idx) => selectTab(idx)} value={selectedTab}>
+        <Tabs variant="scrollable" onChange={(e, idx) => selectTab(idx)} value={selectedTab}>
             <Tab className="pick-section-tab" label={localize("report.summary")}/>
             <Tab className="pick-section-tab" label={localize("report.violations")}/>
             <Tab className="pick-section-tab" label={localize("report.metadata")}/>

diff --git a/src/renderer/components/ReportSections/Images.js b/src/renderer/components/ReportSections/Images.js
@@ -9,6 +9,8 @@ const { localize } = localizer;
 
 import { ipcRenderer } from 'electron';
 
+const rowHeight = 150;
+
 // the images page of the report
 export default class Images extends React.Component {
 
@@ -54,7 +56,7 @@ export default class Images extends React.Component {
               <img onClick={() => {
                 // shell.openExternal(src);
                 ipcRenderer.send('ELECTRON_SHELL_OPEN_EXTERNAL', `file://${decodeURIComponent(src).replace(/\\/g, "/")}`);
-              }} style={{ objectFit: "contain", cursor: "pointer" }} src={`fileproto://host/${src}`}/>
+              }} style={{ maxHeight: rowHeight, objectFit: "contain", cursor: "pointer" }} src={`fileproto://host/${src}`}/>
             </TableCell>
           }
       },
@@ -73,8 +75,8 @@ export default class Images extends React.Component {
           overflowY: "auto",
           padding: 6,
           margin: 0,
-          height: 98,
-          maxheight: 98,
+          height: rowHeight,
+          maxHeight: rowHeight,
           whiteSpace: "break-spaces",
           textOverflow: "ellipsis"
         }} >
@@ -97,8 +99,8 @@ export default class Images extends React.Component {
               overflowY: "auto",
               padding: 6,
               margin: 0,
-              height: 98,
-              maxheight: 98,
+              height: rowHeight,
+              maxHeight: rowHeight,
               whiteSpace: "break-spaces",
               textOverflow: "ellipsis"
             }}>
@@ -121,8 +123,8 @@ export default class Images extends React.Component {
                   overflowY: "auto",
                   padding: 6,
                   margin: 0,
-                  height: 98,
-                  maxheight: 98,
+                  height: rowHeight,
+                  maxHeight: rowHeight,
                   whiteSpace: "break-spaces",
                   textOverflow: "ellipsis"
                 }}>
@@ -145,8 +147,8 @@ export default class Images extends React.Component {
               overflowY: "auto",
               padding: 6,
               margin: 0,
-              height: 98,
-              maxheight: 98,
+              height: rowHeight,
+              maxHeight: rowHeight,
               whiteSpace: "break-spaces",
               textOverflow: "ellipsis"
             }}>
@@ -170,8 +172,8 @@ export default class Images extends React.Component {
           overflowY: "auto",
           padding: 6,
           margin: 0,
-          height: 98,
-          maxheight: 98,
+          height: rowHeight,
+          maxHeight: rowHeight,
           textOverflow: "ellipsis",
           overflowWrap: "break-word",
         }} className="location">
@@ -205,8 +207,8 @@ export default class Images extends React.Component {
           overflowY: "auto",
           padding: 6,
           margin: 0,
-          height: 98,
-          maxheight: 98,
+          height: rowHeight,
+          maxHeight: rowHeight,
           whiteSpace: "break-spaces",
           textOverflow: "ellipsis"
         }}>

diff --git a/src/renderer/components/ReportSections/Metadata.js b/src/renderer/components/ReportSections/Metadata.js
@@ -21,6 +21,8 @@ import classNames from 'classnames';
 
 import CircularProgress from '@material-ui/core/CircularProgress'
 
+const rowHeight = 60;
+
 const styles = theme => ({
 
   buttonProcessing: {
@@ -127,8 +129,8 @@ class Metadata extends React.Component {
               overflowY: "auto",
               padding: 6,
               margin: 0,
-              height: 98,
-              maxheight: 98,
+              height: rowHeight,
+              maxHeight: rowHeight,
               whiteSpace: "break-spaces",
               textOverflow: "ellipsis"
             }} >
@@ -151,8 +153,8 @@ class Metadata extends React.Component {
               overflowY: "auto",
               padding: 6,
               margin: 0,
-              height: 98,
-              maxheight: 98,
+              height: rowHeight,
+              maxHeight: rowHeight,
               whiteSpace: "break-spaces",
               textOverflow: "ellipsis"
             }} >
@@ -185,8 +187,8 @@ class Metadata extends React.Component {
               overflowY: "auto",
               padding: 6,
               margin: 0,
-              height: 98,
-              maxheight: 98,
+              height: rowHeight,
+              maxHeight: rowHeight,
               whiteSpace: "break-spaces",
               textOverflow: "ellipsis"
             }} >

diff --git a/src/renderer/components/ReportSections/Violations.js b/src/renderer/components/ReportSections/Violations.js
@@ -7,6 +7,8 @@ const {ipcRenderer} = require('electron');
 import { localizer } from './../../../shared/l10n/localize';
 const { localize, getCurrentLanguage } = localizer;
 
+const rowHeight = 150;
+
 // the violations page of the report
 export default class Violations extends React.Component {
 
@@ -61,8 +63,8 @@ export default class Violations extends React.Component {
               overflowY: "auto",
               padding: 6,
               margin: 0,
-              height: 98,
-              maxheight: 98,
+              height: rowHeight,
+              maxheight: rowHeight,
               whiteSpace: "break-spaces",
               textOverflow: "ellipsis"
             }} >
@@ -91,8 +93,8 @@ export default class Violations extends React.Component {
               overflowY: "auto",
               padding: 6,
               margin: 0,
-              height: 98,
-              maxheight: 98,
+              height: rowHeight,
+              maxheight: rowHeight,
               whiteSpace: "break-spaces",
               textOverflow: "ellipsis"
             }} >
@@ -117,12 +119,12 @@ export default class Violations extends React.Component {
                       overflowY: "auto",
                       padding: 6,
                       margin: 0,
-                      height: 98,
-                      maxheight: 98,
+                      height: rowHeight,
+                      maxheight: rowHeight,
                       whiteSpace: "break-spaces",
                       textOverflow: "ellipsis"
                     }} >
-            <p>{row.rule.rule}</p>
+            <span>{row.rule.rule}</span>
             <p className="violation-engine">{localize("report.violationsSection.via")} {row.rule.engine}</p>
             </div>
           </TableCell>
@@ -145,24 +147,22 @@ export default class Violations extends React.Component {
                 overflowY: "auto",
                 padding: 6,
                 margin: 0,
-                height: 98,
-                maxheight: 98,
+                height: rowHeight,
+                maxheight: rowHeight,
                 textOverflow: "ellipsis",
                 overflowWrap: "break-word",
               }} >
 
-                <p>
                 <pre style={{
                       whiteSpace: "pre-wrap",
                       padding: 0,
                       margin: 0,
                     }}>{row.location.filename}</pre>
-            </p>
 
             {row.location.snippet != '' ?
-              <p><pre className='snippet' style={{
+              <pre className='snippet' style={{
                     whiteSpace: "pre-wrap",
-                  }}>{unescape(row.location.snippet)}</pre></p>
+                  }}>{unescape(row.location.snippet)}</pre>
               : ''}
             </div>
           </TableCell>
@@ -183,8 +183,8 @@ export default class Violations extends React.Component {
                 overflowY: "auto",
                 padding: 6,
                 margin: 0,
-                height: 98,
-                maxheight: 98,
+                height: rowHeight,
+                maxheight: rowHeight,
                 whiteSpace: "break-spaces",
                 textOverflow: "ellipsis"
               }} >

diff --git a/src/renderer/components/Table/EnhancedTable.js b/src/renderer/components/Table/EnhancedTable.js
@@ -19,6 +19,8 @@ import { lighten } from '@material-ui/core/styles/colorManipulator';
 import { localizer } from './../../../shared/l10n/localize';
 const { localize } = localizer;
 
+const tableLayoutFixed = false;
+
 function desc(a, b, orderBy, head) {
   // console.log("----------", JSON.stringify(a), " ================ ", JSON.stringify(b), " ############### ", orderBy, " ***** ", JSON.stringify(head));
   let aValue = head.hasOwnProperty('sortOn') ? head.sortOn(a[orderBy]) : a[orderBy];
@@ -294,7 +296,7 @@ export default class EnhancedTable extends React.Component {
     });
 
     return (
-      <div>
+      <div style={{ marginTop: 6 }}>
       {filters.length > 0 ?
         <Accordion
           className="table-filters-panel"
@@ -321,15 +323,20 @@ export default class EnhancedTable extends React.Component {
         </AccordionDetails>
       </Accordion>
       : ''}
-        <Table aria-live="polite" style={{
-          tableLayout: "fixed",
+        <div style={{
+          overflow: "visible"
+          // overflowX: "auto"
+        }}>
+          <Table aria-live="polite" style={{
+          tableLayout: tableLayoutFixed ? "fixed" : undefined,
           border: "silver solid 1px"
         }}>
         <TableHead>
           <TableRow>
             {heads.map(head => {
               return (
                 <TableCell
+                  style={{border: "black solid 2px", fontWeight: "bold", overflow: "hidden", padding: 6}}
                   key={head.id}
                   numeric={head.numeric.toString()}
                   sortDirection={head.sortable && orderBy === head.id ? order : false}>
@@ -380,6 +387,10 @@ export default class EnhancedTable extends React.Component {
         <TableFooter>
           <TableRow>
             <TablePagination
+              classes={{
+                spacer: "tablePaginationSpacerClass",
+                //.MuiTablePagination-spacer
+              }}
               colSpan={heads.length}
               count={filteredRows.length}
               rowsPerPage={rowsPerPage}
@@ -395,6 +406,7 @@ export default class EnhancedTable extends React.Component {
         </TableFooter>
         : '' }
       </Table>
+        </div>
       </div>
     );
   }

diff --git a/src/renderer/styles/Report.scss b/src/renderer/styles/Report.scss
@@ -11,10 +11,16 @@
 }
 
 .ace-report {
-  margin-left: 20px;
-  overflow: scroll;
+  padding-left: 10px;
+  padding-right: 10px;
+  overflow-x: auto;
+  overflow-y: auto;
   width: 100%;
 
+.tablePaginationSpacerClass {
+display: none;
+}
+
   .location {
     pre {
       /* white-space: pre-wrap; */
@@ -40,6 +46,9 @@
   }
 
   .report-section {
+    .table-filters-panel {
+      border: silver dotted 2px;
+    }
     .table-filters-panel.expanded{
       // special hack for table filters expansion panel
       // it makes the menus visible z-order wise
@@ -124,7 +133,6 @@
 
   .images {
     img {
-      max-height: 100px;
       object-fit: contain;
     }
   }