fix: image table column header sort, added aria-details, force table …

…window width, fix table row heights
daisy · Feb 5, 2025 · 74036ff · 74036ff
1 parent 4c84187
commit 74036ff
Show file tree

Hide file tree

Showing 5 changed files with 159 additions and 11 deletions.
diff --git a/src/renderer/components/ReportSections/Images.js b/src/renderer/components/ReportSections/Images.js
@@ -45,7 +45,12 @@ export default class Images extends React.Component {
         makeCell: (row, idx) =>
           {
             const src = encodeURIComponent(path.resolve(reportPath, `../data/${row.src}`));
-            return <TableCell key={idx}><img src={`fileproto://host/${src}`}/></TableCell>
+            return <TableCell key={idx} style={{
+                border: "black solid 1px", padding: 6,
+                overflow: "hidden",
+              }}>
+                <img style={{ objectFit: "contain" }} src={`fileproto://host/${src}`}/>
+            </TableCell>
           }
       },
       {
@@ -54,23 +59,95 @@ export default class Images extends React.Component {
         numeric: false,
         sortable: true,
         makeCell: (row, idx) =>
-          <TableCell key={idx}>{row.alt ? row.alt : localize("report.imagesSection.NA")}</TableCell>
+          <TableCell style={{
+              border: "black solid 1px", padding: 0,
+              overflow: "hidden",
+          }} key={idx}>
+      <div style={{
+          overflow: "hidden",
+          overflowY: "auto",
+          padding: 6,
+          margin: 0,
+          height: 98,
+          maxheight: 98,
+          whiteSpace: "break-spaces",
+          textOverflow: "ellipsis"
+        }} >
+          {row.alt ? row.alt : localize("report.imagesSection.NA")}
+        </div>
+        </TableCell>
       },
       {
         id: 'describedby',
         label: localize("report.imagesSection.ariaDescribedbyContent"),
         numeric: false,
         sortable: true,
         makeCell: (row, idx) =>
-          <TableCell key={idx}>{row.describedby ? row.describedby : localize("report.imagesSection.NA")}</TableCell>
+          <TableCell style={{
+              border: "black solid 1px", padding: 0,
+              overflow: "hidden",
+          }} key={idx}>
+          <div style={{
+              overflow: "hidden",
+              overflowY: "auto",
+              padding: 6,
+              margin: 0,
+              height: 98,
+              maxheight: 98,
+              whiteSpace: "break-spaces",
+              textOverflow: "ellipsis"
+            }}>
+              {row.describedby ? row.describedby : localize("report.imagesSection.NA")}
+            </div>
+          </TableCell>
+      },
+      {
+        id: 'details',
+        label: localize("report.imagesSection.ariaDetails"),
+        numeric: false,
+        sortable: true,
+        makeCell: (row, idx) =>
+          <TableCell style={{
+              border: "black solid 1px", padding: 0,
+              overflow: "hidden",
+            }} key={idx}>
+              <div style={{
+                  overflow: "hidden",
+                  overflowY: "auto",
+                  padding: 6,
+                  margin: 0,
+                  height: 98,
+                  maxheight: 98,
+                  whiteSpace: "break-spaces",
+                  textOverflow: "ellipsis"
+                }}>
+                  {row.details ? row.details : localize("report.imagesSection.NA")}
+              </div>
+          </TableCell>
       },
       {
         id: 'figcaption',
         label: localize("report.imagesSection.associatedFigcaption"),
         numeric: false,
         sortable: true,
         makeCell: (row, idx) =>
-          <TableCell key={idx}>{row.figcaption ? row.figcaption : localize("report.imagesSection.NA")}</TableCell>
+          <TableCell style={{
+              border: "black solid 1px", padding: 0,
+              overflow: "hidden",
+          }} key={idx}>
+          <div style={{
+              overflow: "hidden",
+              overflowY: "auto",
+              padding: 6,
+              margin: 0,
+              height: 98,
+              maxheight: 98,
+              whiteSpace: "break-spaces",
+              textOverflow: "ellipsis"
+            }}>
+              {row.figcaption ? row.figcaption : localize("report.imagesSection.NA")}
+            </div>
+          </TableCell>
       },
       {
         id: 'location',
@@ -79,7 +156,27 @@ export default class Images extends React.Component {
         sortable: true,
         filterOn: obj => obj.indexOf('#') > 0 ? obj.slice(0, obj.indexOf('#')) : obj,
         makeCell: (row, idx) =>
-          <TableCell key={idx} className="location"><pre>{decodeURIComponent(row.location)}</pre></TableCell>
+          <TableCell style={{
+              border: "black solid 1px", padding: 0,
+              overflow: "hidden",
+          }} key={idx}>
+      <div style={{
+          overflow: "hidden",
+          overflowY: "auto",
+          padding: 6,
+          margin: 0,
+          height: 98,
+          maxheight: 98,
+          textOverflow: "ellipsis",
+          overflowWrap: "break-word",
+        }} className="location">
+          <pre style={{
+              whiteSpace: "pre-wrap",
+              padding: 0,
+              margin: 0,
+            }}>{decodeURIComponent(row.location)}</pre>
+        </div>
+        </TableCell>
       },
       {
         id: 'role',
@@ -88,7 +185,23 @@ export default class Images extends React.Component {
         sortable: true,
         filterOn: obj => obj,
         makeCell: (row, idx) =>
-          <TableCell key={idx}>{row.role ? row.role : localize("report.imagesSection.NA")}</TableCell>
+          <TableCell style={{
+              border: "black solid 1px", padding: 0,
+              overflow: "hidden",
+          }} key={idx}>
+      <div style={{
+          overflow: "hidden",
+          overflowY: "auto",
+          padding: 6,
+          margin: 0,
+          height: 98,
+          maxheight: 98,
+          whiteSpace: "break-spaces",
+          textOverflow: "ellipsis"
+        }}>
+          {row.role ? row.role : localize("report.imagesSection.NA")}
+        </div>
+        </TableCell>
       }
     ];
 

diff --git a/src/renderer/components/Table/EnhancedTable.js b/src/renderer/components/Table/EnhancedTable.js
@@ -20,9 +20,33 @@ import { localizer } from './../../../shared/l10n/localize';
 const { localize } = localizer;
 
 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];
   let bValue = head.hasOwnProperty('sortOn') ? head.sortOn(b[orderBy]) : b[orderBy];
 
+  const aValueNIL = aValue == null; // NOT TRIPLE EQUAL! (includes typeof "undefined")
+  const bValueNIL = bValue == null;
+  if (aValueNIL && bValueNIL) {
+    // console.log("NILLLL", typeof aValue, typeof bValue, aValue, bValue);
+    aValue = "";
+    bValue = "";
+  } else if (aValueNIL) {
+    // console.log("NILLLL a", typeof bValue, bValue);
+    if (typeof bValue === "string") {
+      aValue = "";
+    } else {
+      aValue = 0;
+    }
+  } else if (bValueNIL) {
+    // console.log("NILLLL b", typeof aValue, aValue);
+    if (typeof aValue === "string") {
+      bValue = "";
+    } else {
+      bValue = 0;
+    }
+  }
+  // console.log("%%%%%%%%% ", aValue, bValue);
+
   if (bValue < aValue) {
     return -1;
   }
@@ -151,6 +175,7 @@ export default class EnhancedTable extends React.Component {
     if (sort.orderBy === id && sort.order === 'desc') {
       order = 'asc';
     }
+    //console.log("SORT", this.props.id, order, id);
     onSort(this.props.id, {order: order, orderBy: id});
   };
 
@@ -241,6 +266,8 @@ export default class EnhancedTable extends React.Component {
       rowsPerPageOptions.push(300);
     }
 
+    // console.log("filteredRows: ", order, orderBy, JSON.stringify(filteredRows, null, 4));
+
     // console.log("FILTERS render: ", JSON.stringify(filters, null, 4));
 
     // ensure correct language
@@ -294,7 +321,10 @@ export default class EnhancedTable extends React.Component {
         </AccordionDetails>
       </Accordion>
       : ''}
-      <Table aria-live="polite">
+        <Table aria-live="polite" style={{
+          tableLayout: "fixed",
+          border: "silver solid 1px"
+        }}>
         <TableHead>
           <TableRow>
             {heads.map(head => {
@@ -326,7 +356,10 @@ export default class EnhancedTable extends React.Component {
             .slice(Math.min(filteredRows - 1, page * rowsPerPage), page * rowsPerPage + rowsPerPage)
             .map((row, idx) => {
               return (
-                <TableRow
+                <TableRow style={{
+                    // border: "magenta solid 1px",
+                    height: "max-content",
+                  }}
                   tabIndex={-1}
                   key={idx}>
                   {heads.map((head, idx) => {

diff --git a/src/renderer/containers/ReportSections/ImagesContainer.js b/src/renderer/containers/ReportSections/ImagesContainer.js
@@ -8,7 +8,7 @@ const mapStateToProps = state => {
 
   return {
     language,
-    images: report.data.images == undefined ? [] : report.data.images,
+    images: !report.data.images ? [] : report.data.images,
     filters: filters['images'],
     pagination: pagination['images'],
     sort: sort['images'],

diff --git a/src/renderer/styles/Report.scss b/src/renderer/styles/Report.scss
@@ -17,7 +17,7 @@
 
   .location {
     pre {
-      white-space: pre-wrap;
+      /* white-space: pre-wrap; */
       background-color: lightyellow;
       color: #905a5a;
     }
@@ -111,7 +111,8 @@
 
   .images {
     img {
-      max-width: 200px;
+      max-height: 100px;
+      object-fit: contain;
     }
   }
 

diff --git a/src/shared/l10n/locales/en.json b/src/shared/l10n/locales/en.json
@@ -97,6 +97,7 @@
             "NA": "N/A",
             "altAttribute": "'alt' attribute",
             "ariaDescribedbyContent": "'aria-describedby' content",
+            "ariaDetails": "'aria-details'",
             "associatedFigcaption": "Associated 'figcaption'",
             "image": "Image",
             "location": "Location",