Merge pull request #180 from tnc-ca-geo/misc-bug-fixes

Misc bug fixes
tnc-ca-geo · Dec 22, 2023 · 82ee762 · 82ee762
2 parents e56f097 + 11b2beb
commit 82ee762
Show file tree

Hide file tree

Showing 10 changed files with 82 additions and 72 deletions.
diff --git a/src/components/ErrorAlerts.jsx b/src/components/ErrorAlerts.jsx
@@ -38,9 +38,15 @@ import {
   dismissImageContextError,
   selectStatsErrors,
   dismissStatsError,
-  selectExportErrors,
+  selectExportDataErrors,
   dismissExportError,
 } from '../features/images/imagesSlice';
+import {
+  selectExportImageErrorsErrors,
+  dismissExportErrorsError,
+  selectRedriveBatchErrors,
+  dismissRedriveBatchError
+} from '../features/upload/uploadSlice';
 import getErrorContent from '../content/Errors';
 import { selectManageUserErrors, dismissManageUsersError } from '../features/projects/usersSlice';
 
@@ -58,7 +64,9 @@ const ErrorAlerts = () => {
   const imagesErrors = useSelector(selectImagesErrors);
   const imageContextErrors = useSelector(selectImageContextErrors);
   const statsErrors = useSelector(selectStatsErrors);
-  const exportErrors = useSelector(selectExportErrors);
+  const exportDataErrors = useSelector(selectExportDataErrors);
+  const exportImageErrorsErrors = useSelector(selectExportImageErrorsErrors);
+  const redriveBatchErrors = useSelector(selectRedriveBatchErrors);
   const manageUserErrors = useSelector(selectManageUserErrors);
   const createProjectErrors = useSelector(selectCreateProjectsErrors);
 
@@ -73,7 +81,9 @@ const ErrorAlerts = () => {
     enrichErrors(imagesErrors, 'Image Error', 'images'),
     enrichErrors(imageContextErrors, 'Image Error', 'imageContext'),
     enrichErrors(statsErrors, 'Error Getting Stats', 'stats'),
-    enrichErrors(exportErrors, 'Error Exporting Data', 'data'),
+    enrichErrors(exportDataErrors, 'Error Exporting Data', 'data'),
+    enrichErrors(exportImageErrorsErrors, 'Error downloading errors CSV', 'uploadImageErrors'),
+    enrichErrors(redriveBatchErrors, 'Error retrying failed images in batch', 'redriveBatch'),
     enrichErrors(manageUserErrors, 'Manage user error', 'manageUsers'),
     enrichErrors(createProjectErrors, 'Error Creating Project', 'createProject'),
   ];
@@ -134,6 +144,8 @@ const dismissErrorActions = {
   'imageContext': (i) => dismissImageContextError(i),
   'stats': (i) => dismissStatsError(i),
   'data': (i) => dismissExportError(i),
+  'uploadImageErrors': (i) => dismissExportErrorsError(i),
+  'redriveBatch': (i) => dismissRedriveBatchError(i),
   'manageUsers': (i) => dismissManageUsersError(i),
 };
 

diff --git a/src/features/images/ImagesTable.jsx b/src/features/images/ImagesTable.jsx
@@ -38,6 +38,7 @@ import { SimpleSpinner, SpinnerOverlay } from '../../components/Spinner';
 import { selectProjectsLoading } from '../projects/projectsSlice';
 import DeleteImagesAlert from '../loupe/DeleteImagesAlert.jsx';
 import { columnConfig, columnsToHideMap, defaultColumnDims, tableBreakpoints } from './config';
+import StyledScrollArea from '../../components/ScrollArea.jsx';
 
 
 // TODO: make table horizontally scrollable on smaller screens
@@ -115,39 +116,13 @@ const HeaderCell = styled(TableCell, {
   },
 });
 
-const DataCell = styled(TableCell, { // TODO: doesn't seem to be used?
-  margin: '0px',
-  display: 'flex',
-  alignItems: 'center',
-  fontSize: '$3',
-  color: '$textDark',
-  borderBottom: '1px solid $border',
-  variants: {
-    selected: {
-      true: {
-        backgroundColor: '$backgroundExtraDark',
-        // '&:first-child': {
-        //   borderLeft: '4px solid $blue500',
-        //   paddingLeft: '12px',
-        // },
-      }
-    },
-    scrollable: {
-      true: {
-        overflowY: 'scroll',
-        alignItems: 'start',
-      }
-    }
-  }
-});
-
 const TableHeader = styled('div', {
   display: 'flex',
   alignItems: 'center',
-  paddingTop: '$2',
-  paddingBottom: '$2',
+  paddingTop: '$1',
+  paddingBottom: '$1',
   backgroundColor: '$backgroundDark',
-  fontSize: '$3',
+  fontSize: '$2',
   'svg': {
     marginLeft: '$2',
     'path': {
@@ -236,6 +211,7 @@ const ImagesTable = ({ workingImages, hasNext, loadNextPage }) => {
     return !hasNext || index < workingImages.length;
   }, [hasNext, workingImages]);
   const selectedImageIndices = useSelector(selectSelectedImageIndices);
+  const headerHeight = 27;
 
   // prepare table
   const data = makeRows(workingImages, focusIndex, selectedImageIndices);
@@ -336,20 +312,21 @@ const ImagesTable = ({ workingImages, hasNext, loadNextPage }) => {
           loadMoreItems={loadNextPage}
         >
           {({ onItemsRendered, ref }) => (
-            <List
-              height={height - 33}
-              itemCount={imagesCount}
-              itemSize={91}
-              onItemsRendered={onItemsRendered}
-              ref={list => {
-                // https://github.com/bvaughn/react-window/issues/324
-                ref(list);
-                listRef.current = list;
-              }}
-              width={width}
-            >
-              { RenderRow }
-            </List>
+              <List
+                height={height - headerHeight}
+                itemCount={imagesCount}
+                itemSize={91}
+                onItemsRendered={onItemsRendered}
+                style={{ overflowX: 'clip' }}
+                ref={list => {
+                  // https://github.com/bvaughn/react-window/issues/324
+                  ref(list);
+                  listRef.current = list;
+                }}
+                width={width}
+              >
+                { RenderRow }
+              </List>
           )}
         </InfiniteLoader>
       </div>
@@ -373,7 +350,7 @@ const ImagesTable = ({ workingImages, hasNext, loadNextPage }) => {
       {workingImages.length > 0 &&
         <Table {...getTableProps()}>
           <div
-            style={{ height: '33px', width: `calc(100% - ${scrollBarSize.width}px)` }}
+            style={{ height: headerHeight, width: `calc(100% - ${scrollBarSize.width}px)` }}
           >
             {headerGroups.map(headerGroup => (
               <TableRow
@@ -423,7 +400,7 @@ function makeRows(workingImages, focusIndex, selectedImageIndices) {
     // date created
     const dtOriginal = DateTime
       .fromISO(img.dateTimeOriginal)
-      .toLocaleString(DateTime.DATETIME_MED_WITH_SECONDS);
+      .toLocaleString(DateTime.DATETIME_SHORT_WITH_SECONDS);
 
     // date added
     const dtAdded = DateTime

diff --git a/src/features/images/ImagesTableRow.jsx b/src/features/images/ImagesTableRow.jsx
@@ -80,7 +80,8 @@ const DataCell = styled(TableCell, {
   margin: '0px',
   display: 'flex',
   alignItems: 'center',
-  fontSize: '$3',
+  fontSize: '$2',
+  // fontFamily: '$mono',
   color: '$textDark',
   borderBottom: '1px solid $border',
   variants: {
@@ -276,7 +277,6 @@ const ImagesTableRow = ({ row, index, focusIndex, style, selectedImageIndices })
     dispatch(setDeleteImagesAlertOpen(true));
   };
 
-
   return (
     <ContextMenu modal={false}> {/* modal={false} is fix for pointer-events:none bug: https://github.com/radix-ui/primitives/issues/2416#issuecomment-1738294359 */}
       <ContextMenuTrigger disabled={!selected || !isAuthorized}>

diff --git a/src/features/images/config.js b/src/features/images/config.js
@@ -20,6 +20,7 @@ export const columnConfig = [
   {
     Header: 'Date created',
     accessor: 'dtOriginal',
+    width: '150'
   },
   {
     Header: 'Date added',
@@ -29,6 +30,7 @@ export const columnConfig = [
     Header: 'Reviewed',
     accessor: 'reviewed',
     disableSortBy: true,
+    width: '50'
   },
   {
     Header: 'Camera',

diff --git a/src/features/images/imagesSlice.js b/src/features/images/imagesSlice.js
@@ -6,6 +6,7 @@ import { call } from '../../api';
 import { enrichImages } from './utils';
 import { setActiveFilters } from '../filters/filtersSlice';
 import { IMAGE_QUERY_LIMITS } from '../../config';
+import { setFocus, setSelectedImageIndices } from '../review/reviewSlice';
 
 const initialState = {
   // images: [], // we aren't using this... consider removing?
@@ -484,6 +485,11 @@ export const deleteImages = (imageIds) => async (dispatch, getState) => {
         input: { imageIds },
       });
     }
+    dispatch(setFocus({ 
+      index: { image: null, object: null, label: null }, 
+      type: 'auto' 
+    }));
+    dispatch(setSelectedImageIndices([]));
     dispatch(deleteImagesSuccess(imageIds));
   } catch (err) {
     console.log(`error attempting to delete image: `, err);
@@ -508,7 +514,7 @@ export const selectStatsLoading = state => state.images.loadingStates.stats;
 export const selectStatsErrors = state => state.images.loadingStates.stats.errors;
 export const selectExport = state => state.images.export;
 export const selectExportLoading = state => state.images.loadingStates.export;
-export const selectExportErrors = state => state.images.loadingStates.export.errors;
+export const selectExportDataErrors = state => state.images.loadingStates.export.errors;
 export const selectDeleteImagesAlertOpen = state => state.images.deleteImagesAlertOpen;
 
 // TODO: find a different place for this?

diff --git a/src/features/loupe/DeleteImagesAlert.jsx b/src/features/loupe/DeleteImagesAlert.jsx
@@ -28,7 +28,13 @@ const DeleteImagesAlert = () => {
       <AlertPortal>
         <AlertOverlay/>
         <AlertContent>
-          <AlertTitle>Are you sure you'd like to delete this image?</AlertTitle>
+          <AlertTitle>
+            Are you sure you'd like to  
+            delete {selectedImages.length > 1 
+              ? `these ${selectedImages.length} images` 
+              : `this image`
+            }?
+          </AlertTitle>
           <p>This action can not be undone.</p>
           <div style={{ display: 'flex', gap: 25, justifyContent: 'flex-end' }}>
             <Button size='small' css={{ border: 'none' }} onClick={handleCancelDelete}>Cancel</Button>
@@ -42,7 +48,7 @@ const DeleteImagesAlert = () => {
               }} 
               onClick={handleConfirmDelete}
             >
-              Yes, delete image
+              Yes, delete
             </Button>
           </div>
         </AlertContent>

diff --git a/src/features/loupe/Loupe.jsx b/src/features/loupe/Loupe.jsx
@@ -32,8 +32,6 @@ import ImageReviewToolbar from './ImageReviewToolbar.jsx';
 import ShareImageButton from './ShareImageButton';
 import LoupeDropdown from './LoupeDropdown.jsx';
 
-import { Image } from '../../components/Image';
-
 
 const ItemValue = styled('div', {
   fontSize: '$3',
@@ -126,15 +124,9 @@ const Loupe = () => {
   const userId = useSelector(selectUserUsername);
   const workingImages = useSelector(selectWorkingImages);
   const focusIndex = useSelector(selectFocusIndex);
-  const currImgObjects = workingImages[focusIndex.image].objects;
+  const image = workingImages[focusIndex.image];
   const dispatch = useDispatch();
 
-  // track focused image
-  const [ image, setImage ] = useState();
-  useEffect(() => {
-    setImage(workingImages[focusIndex.image]);
-  }, [ workingImages, focusIndex ]);
-
   // // track reivew mode
   // const reviewMode = useSelector(selectReviewMode);
   // const handleToggleReviewMode = (e) => {
@@ -150,7 +142,7 @@ const Loupe = () => {
 
   const validateLabels = (validated) => {
     const labelsToValidate = [];
-    currImgObjects.forEach((object) => {
+    image.objects.forEach((object) => {
       if (object.locked) return;
       // find first non-invalidated label in array
       const label = object.labels.find((lbl) => lbl.validation === null || lbl.validation.validated);
@@ -196,7 +188,7 @@ const Loupe = () => {
 
   const markEmpty = () => {
     const labelsToValidate = [];
-    currImgObjects.forEach((obj) => {
+    image.objects.forEach((obj) => {
       obj.labels
         .filter((lbl) => lbl.category === 'empty' && !lbl.validated)
         .forEach((lbl) => {
@@ -221,7 +213,7 @@ const Loupe = () => {
   const handleCloseLoupe = () => dispatch(toggleOpenLoupe(false));
 
   const handleUnlockAllButtonClick = () => {
-    const objects = currImgObjects
+    const objects = image.objects
       .filter((obj) => (
         obj.locked && obj.labels.some((lbl) => (
           lbl.validation === null || lbl.validation.validated

diff --git a/src/features/upload/BulkUploadTable.jsx b/src/features/upload/BulkUploadTable.jsx
@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import { fetchBatches, stopBatch, exportErrors, getErrorsExportStatus, filterBatches, selectStopBatchLoading, selectRedriveBatchLoading, redriveBatch } from './uploadSlice';
+import { fetchBatches, stopBatch, exportErrors, getErrorsExportStatus, filterBatches, selectStopBatchLoading, selectRedriveBatchLoading, redriveBatch, selectBatchStatesLoading } from './uploadSlice';
 import { selectBatchStates, selectBatchPageInfo, selectErrorsExport, selectErrorsExportLoading, selectBatchFilter } from './uploadSlice';
 import { styled, keyframes } from '@stitches/react';
 import * as ToggleGroup from '@radix-ui/react-toggle-group';
@@ -9,6 +9,7 @@ import Button from '../../components/Button';
 import IconButton from '../../components/IconButton.jsx';
 import { ChevronLeftIcon, ChevronRightIcon, Cross2Icon, ExclamationTriangleIcon, ReloadIcon } from '@radix-ui/react-icons';
 import { Tooltip, TooltipContent, TooltipArrow, TooltipTrigger } from '../../components/Tooltip.jsx';
+import { SimpleSpinner, SpinnerOverlay } from '../../components/Spinner';
 
 
 const Table = styled('table', {
@@ -91,6 +92,7 @@ const Error = styled('span', {
 const BulkUploadTable = ({ percentUploaded }) => {
   const { hasNext, hasPrevious } = useSelector(selectBatchPageInfo);
   const batchStates = useSelector(selectBatchStates);
+  const batchStatesLoading = useSelector(selectBatchStatesLoading);
   const errorsExport = useSelector(selectErrorsExport);
   const errorsExportLoading = useSelector(selectErrorsExportLoading);
   const stopBatchLoading = useSelector(selectStopBatchLoading);
@@ -148,7 +150,12 @@ const BulkUploadTable = ({ percentUploaded }) => {
   }, [errorsExportReady, errorsExport, dispatch]);
 
   return (
-    <div>
+    <div style={{ position: 'relative' }}>
+      {batchStatesLoading.isLoading &&
+        <SpinnerOverlay>
+          <SimpleSpinner/>
+        </SpinnerOverlay>
+      }
       <CurrentCompletedToggle />
       <Table>
         <thead>
@@ -225,6 +232,7 @@ const BulkUploadTable = ({ percentUploaded }) => {
                         variant='ghost'
                         state={isRedrivingImages && 'loading'}
                         size='large'
+                        css={{ color: '$errorText' }}
                         disabled={!(status['processing-complete'] && status['has-failed-images'])}
                         onClick={() => dispatch(redriveBatch(_id))}
                       >