Improve thumbnail preview. Loading only on expanding accordion

src/components/AnnotationManifestsAccordion.js

@@ -30,6 +30,7 @@ export class AnnotationManifestsAccordion extends Component {
 
     const { annotation } = this.props;
 
+    annotation.manifestsOpen = false;
     annotation.manifests = searchManifestInID(annotation.id);
     if (annotation.manifests) {
       annotation.manifests = annotation.manifests.map(id => ({ id }));
@@ -43,7 +44,10 @@ export class AnnotationManifestsAccordion extends Component {
   /** */
   // eslint-disable-next-line class-methods-use-this,require-jsdoc
   handleOpenAccordion(e) {
+    let { annotation } = this.state;
+    annotation.manifestsOpen = true;
     e.stopPropagation();
+    this.state = { annotation };
   }
 
   /** */
@@ -67,6 +71,8 @@ export class AnnotationManifestsAccordion extends Component {
           >
             <Typography className={classes.heading}>{t('manifestFound')}</Typography>
           </AccordionSummary>
+          {
+            annotation.manifestsOpen && (
             <AccordionDetails className={classes.manifestContainer}>
               {annotation.manifests.map(manifest => (
                 <AnnotationManifestsItem
@@ -77,6 +83,8 @@ export class AnnotationManifestsAccordion extends Component {
                 />
               ))}
             </AccordionDetails>
+            )
+          }
         </Accordion>
       </div>
     );
@@ -90,6 +98,7 @@ AnnotationManifestsAccordion.propsTypes = {
       content: PropTypes.string,
       id: PropTypes.string,
       manifests: PropTypes.arrayOf(PropTypes.string),
+      manifestsOpen: PropTypes.boolean,
     },
   ),
   classes: PropTypes.objectOf(PropTypes.string),

src/components/AnnotationManifestsItem.js

@@ -6,6 +6,7 @@ import {
 } from '@material-ui/core';
 import Button from '@material-ui/core/Button';
 import Tooltip from '@material-ui/core/Tooltip';
+import ns from '../config/css-ns';
 
 /**
  * AnnotationManifestsItem
@@ -39,7 +40,7 @@ export class AnnotationManifestsItem extends Component {
   /** */
   render() {
     const {
-      classes, t, language, manifestId, thumbnail
+      classes, t, language, manifestId, thumbnail, title, description
     } = this.props;
 
     return (
@@ -49,16 +50,24 @@ export class AnnotationManifestsItem extends Component {
             {
               thumbnail && (
                 <CardMedia
+                  className={classes.thumbnail}
                   component="img"
                   height="140"
-                  image={[thumbnail]}
+                  image={thumbnail}
                   alt="green iguana"
                 />
-              )}
+              )
+            }
             <CardContent>
               <Typography>
-                { manifestId }
+                { title || manifestId }
               </Typography>
+              {
+                description && (
+                  <Typography>
+                    { description }
+                  </Typography>
+                )}
             </CardContent>
           </CardActionArea>
           <CardActions>
@@ -84,14 +93,15 @@ AnnotationManifestsItem.propsTypes = {
   addResource: PropTypes.func.isRequired,
   addWindow: PropTypes.func.isRequired,
   classes: PropTypes.objectOf(PropTypes.string),
+  description: PropTypes.string,
+  error: PropTypes.string,
   fetchManifest: PropTypes.func.isRequired,
-  manifests: PropTypes.arrayOf(PropTypes.string),
-  t: PropTypes.func.isRequired,
+  isFetching: PropTypes.bool,
   manifestLogo: PropTypes.string,
+  manifests: PropTypes.arrayOf(PropTypes.string),
   provider: PropTypes.string,
   ready: PropTypes.bool,
-  isFetching: PropTypes.bool,
-  error: PropTypes.string,
+  t: PropTypes.func.isRequired,
   thumbnail: PropTypes.string,
   title: PropTypes.string,
 };

src/containers/AnnotationManifestsItem.js

@@ -6,7 +6,7 @@ import { withPlugins } from '../extend/withPlugins';
 import * as actions from '../state/actions';
 import { AnnotationManifestsItem } from '../components/AnnotationManifestsItem';
 import {
-  getManifest, getManifestLogo,
+  getManifest, getManifestDescription, getManifestLogo,
   getManifestProvider, getManifestThumbnail, getManifestTitle,
   getWindowManifests,
 } from '../state/selectors';
@@ -16,7 +16,9 @@ const mapStateToProps = (state, { manifestId }) => {
   const manifest = getManifest(state, { manifestId }) || {};
 
   return {
-    active: getWindowManifests(state).includes(manifestId),
+    active: getWindowManifests(state)
+      .includes(manifestId),
+    description: getManifestDescription(state, { manifestId }),
     error: manifest.error,
     isFetching: manifest.isFetching,
     manifestLogo: getManifestLogo(state, { manifestId }),