Handle thumb errors, normalize non-int8

app/api/tasks.py

@@ -8,6 +8,7 @@ import rasterio
 from rasterio.enums import ColorInterp
 from PIL import Image
 import io
+import numpy as np
 
 from shutil import copyfileobj, move
 from django.core.exceptions import ObjectDoesNotExist, SuspiciousFileOperation, ValidationError
@@ -454,6 +455,19 @@ class TaskThumbnail(TaskNestedView):
                 thumb_size,
             ), resampling=rasterio.enums.Resampling.nearest).transpose((1, 2, 0))
         
+        if img.dtype != np.uint8:
+            img = img.astype(np.float32)
+            
+            # Ignore alpha values
+            minval = img[:,:,:3].min()
+            maxval = img[:,:,:3].max()
+
+            if minval != maxval:
+                img[:,:,:3] -= minval
+                img[:,:,:3] *= (255.0/(maxval-minval))
+            
+            img = img.astype(np.uint8)
+
         img = Image.fromarray(img)
         output = io.BytesIO()
         img.save(output, format='PNG', quality=quality)

app/static/app/js/components/TaskListItem.jsx

@@ -48,6 +48,7 @@ class TaskListItem extends React.Component {
       view: "basic",
       showMoveDialog: false,
       actionLoading: false,
+      thumbLoadFailed: false
     }
 
     for (let k in props.data){
@@ -429,6 +430,10 @@ class TaskListItem extends React.Component {
     }
   }
 
+  handleThumbError = e => {
+    this.setState({thumbLoadFailed: true});
+  }
+
   render() {
     const task = this.state.task;
     const name = task.name !== null ? task.name : interpolate(_("Task #%(number)s"), { number: task.id });
@@ -610,10 +615,10 @@ class TaskListItem extends React.Component {
                   </tbody>
                 </table>
               </div>
-              {task.status === statusCodes.COMPLETED ? 
+              {!this.state.thumbLoadFailed && task.status === statusCodes.COMPLETED ? 
               <div className="col-md-3 col-sm-2 text-center">
                 <a href={`/map/project/${task.project}/task/${task.id}/`}>
-                  <img className="task-thumbnail" src={this.thumbnailUrl()} alt={_("Thumbnail")}/>
+                  <img onError={this.handleThumbError} className="task-thumbnail" src={this.thumbnailUrl()} alt={_("Thumbnail")}/>
                 </a>
               </div> : ""}