add filter to show only different images

src/components/ImageDiff.jsx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { Table, Modal, Button, Tabs, Tab } from 'react-bootstrap';
+import { Table, Modal, Button, Tabs, Tab, Form } from 'react-bootstrap';
 import ReactCompareImage from 'react-compare-image';
 import 'bootstrap/dist/css/bootstrap.min.css';
 import ImageTable from './ImageTable';
@@ -11,6 +11,7 @@ const ImageDiff = ({ data, timestamp }) => {
   const [show, setShow] = useState(false);
   const [leftImage, setLeftImage] = useState('');
   const [rightImage, setRightImage] = useState('');
+  const [showOnlyDiff, setShowOnlyDiff] = useState(false); // State to manage the filter
 
   const handleClose = () => setShow(false);
   const handleShow = (leftImg, rightImg) => {
@@ -34,18 +35,22 @@ const ImageDiff = ({ data, timestamp }) => {
     return Object.entries(data).reduce((acc, [category, comparisons]) => {
       const segments = category.split('-');
       const segment = segments[segments.length - 1].trim(); // Get the second segment
-      
+
       if (!acc[segment]) {
         acc[segment] = 0;
       }
-      
+
       const diffNumber = comparisons.reduce((count, item) => item.diff ? count + 1 : count, 0);
-      
+
       acc[segment] += diffNumber;
       return acc;
     }, {});
   };
-
+
+  // Function to filter comparisons based on the showOnlyDiff state
+  const filterComparisons = (comparisons) => {
+    return showOnlyDiff ? comparisons.filter(item => item.diff) : comparisons;
+  };
 
   // Group data
   const groupedData = groupByCategorySegment(data);
@@ -55,36 +60,52 @@ const ImageDiff = ({ data, timestamp }) => {
     <div>
       <div className='text-xl m-3 text-blue-600'>Report Time: {timestamp}</div>
       <div className='text-lg m-3 text-red-600'>Notes: a number specifies how many different images there are per device.</div>
+      <div className="d-flex align-items-center m-3">
+        <Form.Check 
+          type="checkbox"
+          label="Show only different images"
+          checked={showOnlyDiff}
+          onChange={(e) => setShowOnlyDiff(e.target.checked)}
+          className="mb-3 ms-auto" // Move to the right
+        />
+      </div>
       <Tabs defaultActiveKey={Object.keys(groupedData)[0]} className="mb-3">
         {Object.entries(groupedData).map(([segment, items], idx) => (
           <Tab eventKey={`tab-${segment}`} title={`${segment}(${groupDiffNumber[segment]})`} key={idx}>
-            {items.map(({ category, comparisons }, index) => (
-              <div key={index}>
-                <h3 className='m-2'>{index} - {category} [{comparisons[0].urls}]</h3>
-                <Table striped bordered hover>
-                  <thead>
-                    <tr>
-                      <th>Order</th>
-                      <th>Stable</th>
-                      <th>Beta</th>
-                      <th>Diff</th>
-                      <th>Slider</th>
-                    </tr>
-                  </thead>
-                  <tbody>
-                    {comparisons.map((item, index) => (
-                      <tr key={index}>
-                        <td>{item.order}</td>
-                        <ImageTable HOST={HOST} item={item} handleShow={handleShow} />
-                        <td>
-                          <Button variant="primary" onClick={() => handleShow(`${HOST}/${item.a}`, `${HOST}/${item.b}`)}>Compare Images</Button>
-                        </td>
-                      </tr>
-                    ))}
-                  </tbody>
-                </Table>
-              </div>
-            ))}
+            {items.map(({ category, comparisons }, index) => {
+              const filteredComparisons = filterComparisons(comparisons);
+              return (
+                <div key={index}>
+                  {filteredComparisons.length > 0 && (
+                    <>
+                      <h3 className='m-2'>{index} - {category} [{comparisons[0].urls}]</h3>
+                      <Table striped bordered hover>
+                        <thead>
+                          <tr>
+                            <th>Order</th>
+                            <th>Stable</th>
+                            <th>Beta</th>
+                            <th>Diff</th>
+                            <th>Slider</th>
+                          </tr>
+                        </thead>
+                        <tbody>
+                          {filteredComparisons.map((item, index) => (
+                            <tr key={index}>
+                              <td>{item.order}</td>
+                              <ImageTable HOST={HOST} item={item} handleShow={handleShow} />
+                              <td>
+                                <Button variant="primary" onClick={() => handleShow(`${HOST}/${item.a}`, `${HOST}/${item.b}`)}>Compare Images</Button>
+                              </td>
+                            </tr>
+                          ))}
+                        </tbody>
+                      </Table>
+                    </>
+                  )}
+                </div>
+              );
+            })}
           </Tab>
         ))}
       </Tabs>
@@ -110,4 +131,4 @@ const ImageDiff = ({ data, timestamp }) => {
   );
 };
 
-export default ImageDiff;
+export default ImageDiff;