Segmentation thumbnail

CHANGELOG.md

@@ -16,6 +16,7 @@ For upgrade instructions, please check the [migration guide](MIGRATIONS.md).
 - Datasets imported through a datastore that is marked as 'scratch' will now show a construction-like header and error message to encourage moving the datasets to a permanent storage location. [#3500](https://github.com/scalableminds/webknossos/pull/3500)
 - Added the experimental feature to dynamically render isosurfaces for segmentation layers (can be enabled in the dataset settings when viewing a dataset). [#3533](https://github.com/scalableminds/webknossos/pull/3495)
 - Adds healthchecks to all Dockerfiles for automatic service healing [#3606](https://github.com/scalableminds/webknossos/pull/3606)
+- Adds a second colorful thumbnail for the datasets which have a segmentation layer and this segmentation thumbnail will be shown on hover over the other thumbnail. [#3507](https://github.com/scalableminds/webknossos/pull/3507)
 
 ### Changed
 

app/assets/javascripts/dashboard/dataset_panel.js

@@ -6,7 +6,11 @@ import _ from "lodash";
 
 import type { APIDataset } from "admin/api_flow_types";
 import { formatScale } from "libs/format_utils";
-import { getThumbnailURL, hasSegmentation } from "oxalis/model/accessors/dataset_accessor";
+import {
+  getThumbnailURL,
+  hasSegmentation,
+  getSegmentationThumbnailURL,
+} from "oxalis/model/accessors/dataset_accessor";
 
 const columnSpan = { xs: 24, sm: 24, md: 24, lg: 12, xl: 12, xxl: 8 };
 const thumbnailDimension = 500;
@@ -57,10 +61,12 @@ function ThumbnailAndDescription({
   thumbnailURL,
   description,
   name,
+  segmentationThumbnailURL,
 }: {
   thumbnailURL: string,
   name: string,
   description: React.Element<*> | string,
+  segmentationThumbnailURL: ?string,
 }) {
   return (
     <React.Fragment>
@@ -74,6 +80,20 @@ function ThumbnailAndDescription({
             height: "100%",
           }}
         />
+        {segmentationThumbnailURL ? (
+          <div
+            className="dataset-thumbnail-image segmentation"
+            style={{
+              background: `url('${segmentationThumbnailURL}?w=${thumbnailDimension}&h=${thumbnailDimension}')`,
+              backgroundSize: "cover",
+              width: "100%",
+              height: "100%",
+              position: "absolute",
+              left: "0",
+              top: "0",
+            }}
+          />
+        ) : null}
       </span>
       <div className="dataset-description">
         <div className="description-flex">
@@ -91,6 +111,9 @@ function ThumbnailAndDescriptionFromDataset({ dataset }: { dataset: APIDataset }
       thumbnailURL={getThumbnailURL(dataset)}
       name={getDisplayName(dataset)}
       description={getDescription(dataset)}
+      segmentationThumbnailURL={
+        hasSegmentation(dataset) ? getSegmentationThumbnailURL(dataset) : null
+      }
     />
   );
 }
@@ -149,6 +172,9 @@ class DatasetPanel extends React.PureComponent<Props, State> {
           thumbnailURL={getThumbnailURL(datasets[0])}
           name={groupName}
           description={multiDescription}
+          segmentationThumbnailURL={
+            hasSegmentation(datasets[0]) ? getSegmentationThumbnailURL(datasets[0]) : null
+          }
         />
       </Card>
     );

app/assets/javascripts/oxalis/model/accessors/dataset_accessor.js

@@ -183,4 +183,16 @@ export function getThumbnailURL(dataset: APIDataset): string {
   return "";
 }
 
+export function getSegmentationThumbnailURL(dataset: APIDataset): string {
+  const datasetName = dataset.name;
+  const organizationName = dataset.owningOrganization;
+  const segmentationLayer = getSegmentationLayer(dataset);
+  if (segmentationLayer) {
+    return `/api/datasets/${organizationName}/${datasetName}/layers/${
+      segmentationLayer.name
+    }/thumbnail`;
+  }
+  return "";
+}
+
 export default {};

app/assets/javascripts/test/snapshots/public/test-bundle/test/enzyme/snapshot.e2e.js.md

@@ -121,9 +121,10 @@ Generated by [AVA](https://ava.li).
     <div className="ant-card spotlight-item-card ant-card-bordered">␊
     <div className="ant-card-body" style={{...}}>␊
     <ThumbnailAndDescriptionFromDataset dataset={{...}}>␊
-    <ThumbnailAndDescription thumbnailURL="/api/datasets/Organization_X/e2006_knossos/layers/color/thumbnail" name="e2006_knossos" description={{...}}>␊
+    <ThumbnailAndDescription thumbnailURL="/api/datasets/Organization_X/e2006_knossos/layers/color/thumbnail" name="e2006_knossos" description={{...}} segmentationThumbnailURL="/api/datasets/Organization_X/e2006_knossos/layers/segmentation/thumbnail">␊
     <span className="dataset-thumbnail" title="Click to view dataset">␊
     <div className="dataset-thumbnail-image" style={{...}} />␊
+    <div className="dataset-thumbnail-image segmentation" style={{...}} />␊
     </span>␊
     <div className="dataset-description">␊
     <div className="description-flex">␊
@@ -158,7 +159,7 @@ Generated by [AVA](https://ava.li).
     <div className="ant-card spotlight-item-card ant-card-bordered">␊
     <div className="ant-card-body" style={{...}}>␊
     <ThumbnailAndDescriptionFromDataset dataset={{...}}>␊
-    <ThumbnailAndDescription thumbnailURL="/api/datasets/Organization_X/confocal-multi_knossos/layers/color_1/thumbnail" name="confocal-multi_knossos" description={{...}}>␊
+    <ThumbnailAndDescription thumbnailURL="/api/datasets/Organization_X/confocal-multi_knossos/layers/color_1/thumbnail" name="confocal-multi_knossos" description={{...}} segmentationThumbnailURL={{...}}>␊
     <span className="dataset-thumbnail" title="Click to view dataset">␊
     <div className="dataset-thumbnail-image" style={{...}} />␊
     </span>␊
@@ -348,9 +349,10 @@ Generated by [AVA](https://ava.li).
     <div className="ant-card spotlight-item-card ant-card-bordered">␊
     <div className="ant-card-body" style={{...}}>␊
     <ThumbnailAndDescriptionFromDataset dataset={{...}}>␊
-    <ThumbnailAndDescription thumbnailURL="/api/datasets/Organization_X/e2006_knossos/layers/color/thumbnail" name="e2006_knossos" description={{...}}>␊
+    <ThumbnailAndDescription thumbnailURL="/api/datasets/Organization_X/e2006_knossos/layers/color/thumbnail" name="e2006_knossos" description={{...}} segmentationThumbnailURL="/api/datasets/Organization_X/e2006_knossos/layers/segmentation/thumbnail">␊
     <span className="dataset-thumbnail" title="Click to view dataset">␊
     <div className="dataset-thumbnail-image" style={{...}} />␊
+    <div className="dataset-thumbnail-image segmentation" style={{...}} />␊
     </span>␊
     <div className="dataset-description">␊
     <div className="description-flex">␊
@@ -385,7 +387,7 @@ Generated by [AVA](https://ava.li).
     <div className="ant-card spotlight-item-card ant-card-bordered">␊
     <div className="ant-card-body" style={{...}}>␊
     <ThumbnailAndDescriptionFromDataset dataset={{...}}>␊
-    <ThumbnailAndDescription thumbnailURL="/api/datasets/Organization_X/confocal-multi_knossos/layers/color_1/thumbnail" name="confocal-multi_knossos" description={{...}}>␊
+    <ThumbnailAndDescription thumbnailURL="/api/datasets/Organization_X/confocal-multi_knossos/layers/color_1/thumbnail" name="confocal-multi_knossos" description={{...}} segmentationThumbnailURL={{...}}>␊
     <span className="dataset-thumbnail" title="Click to view dataset">␊
     <div className="dataset-thumbnail-image" style={{...}} />␊
     </span>␊
@@ -1594,9 +1596,10 @@ Generated by [AVA](https://ava.li).
     <div className="ant-card spotlight-item-card ant-card-bordered">␊
     <div className="ant-card-body" style={{...}}>␊
     <ThumbnailAndDescriptionFromDataset dataset={{...}}>␊
-    <ThumbnailAndDescription thumbnailURL="/api/datasets/Organization_X/e2006_knossos/layers/color/thumbnail" name="e2006_knossos" description={{...}}>␊
+    <ThumbnailAndDescription thumbnailURL="/api/datasets/Organization_X/e2006_knossos/layers/color/thumbnail" name="e2006_knossos" description={{...}} segmentationThumbnailURL="/api/datasets/Organization_X/e2006_knossos/layers/segmentation/thumbnail">␊
     <span className="dataset-thumbnail" title="Click to view dataset">␊
     <div className="dataset-thumbnail-image" style={{...}} />␊
+    <div className="dataset-thumbnail-image segmentation" style={{...}} />␊
     </span>␊
     <div className="dataset-description">␊
     <div className="description-flex">␊
@@ -1631,7 +1634,7 @@ Generated by [AVA](https://ava.li).
     <div className="ant-card spotlight-item-card ant-card-bordered">␊
     <div className="ant-card-body" style={{...}}>␊
     <ThumbnailAndDescriptionFromDataset dataset={{...}}>␊
-    <ThumbnailAndDescription thumbnailURL="/api/datasets/Organization_X/confocal-multi_knossos/layers/color_1/thumbnail" name="confocal-multi_knossos" description={{...}}>␊
+    <ThumbnailAndDescription thumbnailURL="/api/datasets/Organization_X/confocal-multi_knossos/layers/color_1/thumbnail" name="confocal-multi_knossos" description={{...}} segmentationThumbnailURL={{...}}>␊
     <span className="dataset-thumbnail" title="Click to view dataset">␊
     <div className="dataset-thumbnail-image" style={{...}} />␊
     </span>␊
@@ -3827,9 +3830,10 @@ Generated by [AVA](https://ava.li).
     <div className="ant-card spotlight-item-card ant-card-bordered">␊
     <div className="ant-card-body" style={{...}}>␊
     <ThumbnailAndDescriptionFromDataset dataset={{...}}>␊
-    <ThumbnailAndDescription thumbnailURL="/api/datasets/Organization_X/e2006_knossos/layers/color/thumbnail" name="e2006_knossos" description={{...}}>␊
+    <ThumbnailAndDescription thumbnailURL="/api/datasets/Organization_X/e2006_knossos/layers/color/thumbnail" name="e2006_knossos" description={{...}} segmentationThumbnailURL="/api/datasets/Organization_X/e2006_knossos/layers/segmentation/thumbnail">␊
     <span className="dataset-thumbnail" title="Click to view dataset">␊
     <div className="dataset-thumbnail-image" style={{...}} />␊
+    <div className="dataset-thumbnail-image segmentation" style={{...}} />␊
     </span>␊
     <div className="dataset-description">␊
     <div className="description-flex">␊
@@ -3864,7 +3868,7 @@ Generated by [AVA](https://ava.li).
     <div className="ant-card spotlight-item-card ant-card-bordered">␊
     <div className="ant-card-body" style={{...}}>␊
     <ThumbnailAndDescriptionFromDataset dataset={{...}}>␊
-    <ThumbnailAndDescription thumbnailURL="/api/datasets/Organization_X/confocal-multi_knossos/layers/color_1/thumbnail" name="confocal-multi_knossos" description={{...}}>␊
+    <ThumbnailAndDescription thumbnailURL="/api/datasets/Organization_X/confocal-multi_knossos/layers/color_1/thumbnail" name="confocal-multi_knossos" description={{...}} segmentationThumbnailURL={{...}}>␊
     <span className="dataset-thumbnail" title="Click to view dataset">␊
     <div className="dataset-thumbnail-image" style={{...}} />␊
     </span>␊

app/assets/stylesheets/_dashboard.less

@@ -28,17 +28,24 @@
   background-color: #e8e8e8;
   position: relative;
 
-  .dataset-thumbnail-image {
-    transition: all 0.3s ease-in-out;
-  }
-
   @media @smartphones {
     height: 55%;
     width: 100%;
     display: block;
   }
 }
 
+.dataset-thumbnail-image {
+  transition: all 0.3s ease-in-out;
+  &.segmentation {
+    opacity: 0;
+  }
+}
+
+.spotlight-item-card:hover .dataset-thumbnail-image.segmentation {
+  opacity: 0.2;
+}
+
 .dataset-description {
   position: absolute;
   display: inline-block;