Merge pull request #219 from tnc-ca-geo/adding-reviewed-field

Updating Filters to Use New "Reviewed" Field
tnc-ca-geo · Apr 26, 2024 · e343a10 · e343a10
2 parents 3f43b3e + 6205ae1
commit e343a10
Show file tree

Hide file tree

Showing 10 changed files with 68 additions and 49 deletions.
diff --git a/src/api/buildQuery.js b/src/api/buildQuery.js
@@ -60,6 +60,7 @@ const imageFields = `
   comments {
     ${imageCommentFields}
   }
+  reviewed
 `;
 
 const pageInfoFields = `
@@ -123,7 +124,6 @@ const viewFields = `
     addedStart
     addedEnd
     reviewed
-    notReviewed
     custom
   }
 `;

diff --git a/src/app/utils.js b/src/app/utils.js
@@ -135,7 +135,10 @@ export const getRandomColor = () => {
   const green = Math.floor(Math.random() * (255 - 0) + 0);
   const blue = Math.floor(Math.random() * (255 - 0) + 0);
 
-  const integer = ((Math.round(red) & 0xff) << 16) + ((Math.round(green) & 0xff) << 8) + (Math.round(blue) & 0xff);
+  const integer =
+    ((Math.round(red) & 0xff) << 16) +
+    ((Math.round(green) & 0xff) << 8) +
+    (Math.round(blue) & 0xff);
 
   const string = integer.toString(16).toUpperCase();
   return '000000'.substring(string.length) + string;
@@ -154,3 +157,16 @@ export const normalizeErrors = (error, code) => {
   }
   return errs;
 };
+
+export const isImageReviewed = (image) => {
+  // images are considered reviewed if they:
+  // have objects,
+  // all objects are locked,
+  // AND not all labels of all objects have been invalidated
+  const hasObjs = image.objects.length > 0;
+  const hasUnlockedObjs = image.objects.some((obj) => obj.locked === false);
+  const hasAllInvalidatedLabels = !image.objects.some((obj) =>
+    obj.labels.some((lbl) => !lbl.validation || lbl.validation.validated),
+  );
+  return hasObjs && !hasUnlockedObjs && !hasAllInvalidatedLabels;
+};
diff --git a/src/config.js b/src/config.js
@@ -1,6 +1,6 @@
 const API_URLS = {
-  development: 'https://7bs5tmbd8e.execute-api.us-west-2.amazonaws.com/dev/external',
-  staging: 'https://7bs5tmbd8e.execute-api.us-west-2.amazonaws.com/dev/external',
+  development: 'https://ko0yratczi.execute-api.us-west-2.amazonaws.com/dev/external',
+  staging: 'https://ko0yratczi.execute-api.us-west-2.amazonaws.com/dev/external',
   production: 'https://4634jgo56f.execute-api.us-west-2.amazonaws.com/prod/external/',
 };
 

diff --git a/src/features/filters/ReviewFilter.jsx b/src/features/filters/ReviewFilter.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { useDispatch, useSelector } from 'react-redux'
-import { reviewedFilterToggled, selectReviewed, selectNotReviewed } from './filtersSlice';
+import { reviewedFilterToggled, selectReviewed } from './filtersSlice';
 import Accordion from '../../components/Accordion';
 import Checkbox from '../../components/Checkbox';
 import { CheckboxLabel } from '../../components/CheckboxLabel';
@@ -9,29 +9,40 @@ import { CheckboxWrapper } from '../../components/CheckboxWrapper';
 
 const ReviewFilter = () => {
   const dispatch = useDispatch();
-  const reviewed = useSelector(selectReviewed);
-  const notReviewed = useSelector(selectNotReviewed);
-  const includeReviewed = reviewed === null || reviewed;
-  const includeNotReviewed = notReviewed === null || notReviewed;
+  let reviewed = useSelector(selectReviewed);
 
+  /*
+    Reviewed can have 3 states: null, true, false. 
+      1. Null: both reviewed and not reviewed images are included.
+      2. True: Only reviewed images are included.
+      3. False: only not-reviewed images are included.
+    Using these 3 states we can then manage both the filter state and the UI state.
+  */
   const handleCheckboxChange = (e) => {
     const objFilter = e.target.dataset.objFilter;
-    dispatch(reviewedFilterToggled({type: objFilter}));
+    if (objFilter === 'reviewed') {
+      reviewed = reviewed === null ? false : reviewed === true ? false : null;
+    }
+    else {
+      reviewed = reviewed === null ? true : reviewed === true ? null : true;
+    } 
+
+    dispatch(reviewedFilterToggled({ reviewed }));
   };
 
   return (
     <Accordion label='Review' expandedDefault={false}>
       <CheckboxWrapper>
         <label>
           <Checkbox
-            checked={includeReviewed}
-            active={includeReviewed}
+            checked={reviewed ?? true}
+            active={reviewed ?? true}
             data-obj-filter={'reviewed'}
             onChange={handleCheckboxChange}
           />
           <CheckboxLabel
-            checked={includeReviewed}
-            active={includeReviewed}
+            checked={reviewed ?? true}
+            active={reviewed ?? true}
           >
             reviewed images
           </CheckboxLabel>
@@ -40,14 +51,14 @@ const ReviewFilter = () => {
       <CheckboxWrapper>
       <label>
         <Checkbox
-          checked={includeNotReviewed}
-          active={includeNotReviewed}
+          checked={!reviewed ?? true}
+          active={!reviewed ?? true}
           data-obj-filter={'notReviewed'}
           onChange={handleCheckboxChange}
         />
         <CheckboxLabel
-          checked={includeNotReviewed}
-          active={includeNotReviewed}
+          checked={!reviewed ?? true }
+          active={!reviewed ?? true}
         >
           not-reviewed images
         </CheckboxLabel>

diff --git a/src/features/filters/filtersSlice.js b/src/features/filters/filtersSlice.js
@@ -28,7 +28,6 @@ const initialState = {
     addedStart: null,
     addedEnd: null,
     reviewed: null,
-    notReviewed: null,
     custom: null,
   },
 };
@@ -60,13 +59,7 @@ export const filtersSlice = createSlice({
     },
 
     reviewedFilterToggled: (state, { payload }) => {
-      const reviewedFilter = state.activeFilters[payload.type];
-      state.activeFilters[payload.type] = reviewedFilter === null ? false : null;
-    },
-
-    notReviewedFilterToggled: (state, { payload }) => {
-      const notReviewedFilter = state.activeFilters[payload.type];
-      state.activeFilters[notReviewedFilter] = notReviewedFilter === null ? false : null;
+      state.activeFilters['reviewed'] = payload.reviewed;
     },
 
     customFilterChanged: (state, { payload }) => {
@@ -190,7 +183,6 @@ export const {
   getModelsSuccess,
   checkboxFilterToggled,
   reviewedFilterToggled,
-  notReviewedFilterToggled,
   customFilterChanged,
   dateFilterChanged,
   setActiveFilters,
@@ -205,7 +197,6 @@ export const selectAvailCameraFilters = (state) => state.filters.availFilters.ca
 export const selectAvailDeploymentFilters = (state) => state.filters.availFilters.deployments;
 export const selectAvailLabelFilters = (state) => state.filters.availFilters.labels;
 export const selectReviewed = (state) => state.filters.activeFilters.reviewed;
-export const selectNotReviewed = (state) => state.filters.activeFilters.notReviewed;
 export const selectCustomFilter = (state) => state.filters.activeFilters.custom;
 export const selectDateAddedFilter = (state) => ({
   start: state.filters.activeFilters.addedStart,

diff --git a/src/features/images/ImagesTable.jsx b/src/features/images/ImagesTable.jsx
@@ -362,25 +362,15 @@ function makeRows(workingImages, focusIndex, selectedImageIndices) {
     const dtAdded = DateTime.fromISO(img.dateAdded).toLocaleString(DateTime.DATE_SHORT);
 
     // reviewed columns
-    const hasObjs = img.objects.length > 0;
-    const hasUnlockedObjs = img.objects.some((obj) => obj.locked === false);
-    const hasAllInvalidatedLabels = !img.objects.some((obj) =>
-      obj.labels.some((lbl) => !lbl.validation || lbl.validation.validated),
-    );
-    const reviewed =
-      hasObjs && !hasUnlockedObjs && !hasAllInvalidatedLabels ? (
-        <ReviewedIcon reviewed={true} />
-      ) : (
-        <ReviewedIcon reviewed={false} />
-      );
+    const reviewedIcon = <ReviewedIcon reviewed={img.reviewed} />;
 
     return {
       thumbnail,
       labelPills,
       dtOriginal,
       dtAdded,
-      reviewed,
-      ...img,
+      reviewedIcon,
+      ...img
     };
   });
 }

diff --git a/src/features/images/config.js b/src/features/images/config.js
@@ -28,7 +28,7 @@ export const columnConfig = [
   },
   {
     Header: 'Reviewed',
-    accessor: 'reviewed',
+    accessor: 'reviewedIcon',
     disableSortBy: true,
     width: '50'
   },
@@ -53,9 +53,9 @@ export const tableBreakpoints = [
 ];
 
 export const columnsToHideMap = {
-  'loupeOpen': ['dtOriginal', 'dtAdded', 'reviewed', 'cameraId', 'deploymentName'],
-  'xxs': ['dtAdded', 'deploymentName', 'cameraId', 'reviewed', 'dtOriginal'],
-  'xs': ['dtAdded', 'deploymentName', 'cameraId', 'reviewed'],
+  'loupeOpen': ['dtOriginal', 'dtAdded', 'reviewedIcon', 'cameraId', 'deploymentName'],
+  'xxs': ['dtAdded', 'deploymentName', 'cameraId', 'reviewedIcon', 'dtOriginal'],
+  'xs': ['dtAdded', 'deploymentName', 'cameraId', 'reviewedIcon'],
   'sm': ['dtAdded', 'deploymentName', 'cameraId'],
   'md': ['dtAdded', 'deploymentName'],
   'lg': ['dtAdded']

diff --git a/src/features/images/imagesSlice.js b/src/features/images/imagesSlice.js
@@ -300,7 +300,6 @@ export const fetchImageContext = (imgId) => {
           deployments: [res.image.deploymentId],
           labels: null,
           reviewed: null,
-          notReviewed: null,
           custom: null,
         };
         dispatch(setActiveFilters(filters));

diff --git a/src/features/projects/projectsMiddleware.js b/src/features/projects/projectsMiddleware.js
@@ -6,7 +6,6 @@ import {
   checkboxFilterToggled,
   dateFilterChanged,
   reviewedFilterToggled,
-  notReviewedFilterToggled,
   selectActiveFilters,
   customFilterChanged,
   checkboxOnlyButtonClicked,
@@ -72,7 +71,6 @@ export const diffFilters = (store) => (next) => (action) => {
     checkboxOnlyButtonClicked.match(action) ||
     dateFilterChanged.match(action) ||
     reviewedFilterToggled.match(action) ||
-    notReviewedFilterToggled.match(action) ||
     customFilterChanged.match(action) ||
     setSelectedProjAndView.match(action) ||
     editDeploymentsSuccess.match(action) ||

diff --git a/src/features/review/reviewSlice.js b/src/features/review/reviewSlice.js
@@ -1,7 +1,7 @@
 import { createSlice, createAction, createSelector } from '@reduxjs/toolkit';
 import { Auth } from 'aws-amplify';
 import { call } from '../../api';
-import { findImage, findObject, findLabel } from '../../app/utils';
+import { findImage, findObject, findLabel, isImageReviewed } from '../../app/utils';
 import { toggleOpenLoupe } from '../loupe/loupeSlice';
 import { getImagesSuccess, clearImages, deleteImagesSuccess } from '../images/imagesSlice';
 
@@ -50,13 +50,16 @@ export const reviewSlice = createSlice({
       const { imgId, objId } = payload;
       const object = findObject(state.workingImages, imgId, objId);
       object.bbox = payload.bbox;
+      const image = findImage(state.workingImages, imgId);
+      image.reviewed = isImageReviewed(image);
     },
 
     objectsRemoved: (state, { payload }) => {
       for (const obj of payload.objects) {
         const image = findImage(state.workingImages, obj.imgId);
         const objectIndex = image.objects.findIndex((o) => o._id === obj.objId);
         image.objects.splice(objectIndex, 1);
+        image.reviewed = isImageReviewed(image);
       }
     },
 
@@ -70,6 +73,7 @@ export const reviewSlice = createSlice({
           const object = image.objects.find((obj) => obj._id === objId);
           object.labels.unshift(newLabel);
         }
+        image.reviewed = isImageReviewed(image);
       }
       state.lastAction = 'labels-added';
       state.lastCategoryApplied = payload.labels[0].labelId;
@@ -88,14 +92,19 @@ export const reviewSlice = createSlice({
           const objectIndex = image.objects.findIndex((obj) => obj._id === objId);
           image.objects.splice(objectIndex, 1);
         }
+
+        image.reviewed = isImageReviewed(image);
       }
     },
 
     labelsValidated: (state, { payload }) => {
       payload.labels.forEach(({ userId, imgId, objId, lblId, validated }) => {
         const label = findLabel(state.workingImages, imgId, objId, lblId);
         label.validation = { validated, userId };
+        const image = findImage(state.workingImages, imgId);
+        image.reviewed = isImageReviewed(image);
       });
+
       state.lastAction = payload.labels[0].validated ? 'labels-validated' : 'labels-invalidated';
     },
 
@@ -106,13 +115,17 @@ export const reviewSlice = createSlice({
         object.locked = oldLocked;
         const label = findLabel(state.workingImages, imgId, objId, lblId);
         label.validation = oldValidation;
+        const image = findImage(state.workingImages, imgId);
+        image.reviewed = isImageReviewed(image);
       });
     },
 
     objectsLocked: (state, { payload }) => {
       payload.objects.forEach(({ imgId, objId, locked }) => {
         const object = findObject(state.workingImages, imgId, objId);
         object.locked = locked;
+        const image = findImage(state.workingImages, imgId);
+        image.reviewed = isImageReviewed(image);
       });
     },
 
@@ -121,6 +134,7 @@ export const reviewSlice = createSlice({
         if (img.newObject) {
           const image = findImage(state.workingImages, img.imgId);
           image.objects.push(img.newObject);
+          image.reviewed = isImageReviewed(image);
         }
       }
       state.lastAction = 'marked-empty';