v2.4.0 (#22)

* initial biorepository collections presentation

* add max height to biorepository collections

* fix bio repo collections overflow property

* update core-components

* fix data ava app release doi checks

* portal-core-components v2.4.0, sync assets

* prepare v2.4.0

Author: sampsonj

apps/data-availability/package.json

@@ -1,6 +1,6 @@
 {
   "name": "data-availability",
-  "version": "2.3.1",
+  "version": "2.4.0",
   "private": true,
   "homepage": "https://localhost/visualizations/data-availability",
   "dependencies": {
@@ -19,7 +19,7 @@
     "core-js": "^3.30.0",
     "lodash": "^4.17.21",
     "moment": "^2.29.4",
-    "portal-core-components": "github:NEONScience/portal-core-components#v2.3.0",
+    "portal-core-components": "github:NEONScience/portal-core-components#v2.4.0",
     "prop-types": "^15.8.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",

apps/data-availability/public/assets/css/drupal-theme.98af391f0797dc8df157fb52a8a37b1d.min.css

@@ -16,7 +16,7 @@
     <link
       rel="stylesheet"
       data-meta="drupal-theme"
-      href="%PUBLIC_URL%/assets/css/drupal-theme.e17db4d4671c58da18ec4cfa8dd9d2ee.min.css"
+      href="%PUBLIC_URL%/assets/css/drupal-theme.98af391f0797dc8df157fb52a8a37b1d.min.css"
     />
     <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
     <!-- jQuery needed for drupal header -->

apps/data-availability/public/assets/css/drupal-theme.e17db4d4671c58da18ec4cfa8dd9d2ee.min.css

@@ -34,7 +34,9 @@ const TombstoneNotice: React.FC = (): JSX.Element => {
   const state: TombstoneNoticeState = useTombstoneNoticdSelector();
   const classes = useStyles(Theme);
   const { isTombstoned, focalProductReleaseDoi }: TombstoneNoticeState = state;
-  if (!(isTombstoned === true) || !exists(focalProductReleaseDoi)) {
+  if (!(isTombstoned === true)
+      || !exists(focalProductReleaseDoi)
+      || (Array.isArray(focalProductReleaseDoi) && (focalProductReleaseDoi.length <= 0))) {
     return <></>;
   }
   let citationReleases: DataProductReleaseDoi[] = [];

apps/data-availability/public/index.html

@@ -1,6 +1,6 @@
 {
   "name": "portal-data-products",
-  "version": "2.3.1",
+  "version": "2.4.0",
   "private": true,
   "homepage": "http://localhost/data-products/",
   "dependencies": {
@@ -15,7 +15,7 @@
     "lodash": "^4.17.21",
     "material-table": "^1.69.3",
     "moment": "2.29.4",
-    "portal-core-components": "github:NEONScience/portal-core-components#v2.3.0",
+    "portal-core-components": "github:NEONScience/portal-core-components#v2.4.0",
     "prop-types": "^15.8.1",
     "react": "^17.0.2",
     "react-copy-to-clipboard": "^5.1.0",

apps/data-availability/src/components/release/TombstoneNotice.tsx

@@ -16,7 +16,7 @@
     <link
       rel="stylesheet"
       data-meta="drupal-theme"
-      href="%PUBLIC_URL%/assets/css/drupal-theme.e17db4d4671c58da18ec4cfa8dd9d2ee.min.css"
+      href="%PUBLIC_URL%/assets/css/drupal-theme.98af391f0797dc8df157fb52a8a37b1d.min.css"
     />
     <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
     <!-- jQuery needed for drupal header -->

apps/data-product-detail/package.json

@@ -0,0 +1,121 @@
+import React from 'react';
+
+import { makeStyles } from '@material-ui/core/styles';
+import IconButton from '@material-ui/core/IconButton';
+import List from '@material-ui/core/List';
+import ListItem from '@material-ui/core/ListItem';
+import ListItemText from '@material-ui/core/ListItemText';
+import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';
+import Tooltip from '@material-ui/core/Tooltip';
+
+import DownloadIcon from '@material-ui/icons/SaveAlt';
+
+import Theme from 'portal-core-components/lib/components/Theme';
+import { existsNonEmpty, isStringNonEmpty } from 'portal-core-components/lib/util/typeUtil';
+
+import DataProductContext from '../DataProductContext';
+import Detail from './Detail';
+
+const useStyles = makeStyles((theme) => ({
+  list: {
+    padding: theme.spacing(0),
+    marginTop: theme.spacing(-1),
+    marginBottom: theme.spacing(1),
+    maxHeight: '440px',
+    overflowY: 'auto',
+  },
+  listItemLink: {
+    borderRadius: theme.spacing(0.5),
+    border: '0.5px solid #ffffff00',
+    '&:hover': {
+      border: `0.5px solid ${theme.palette.primary.main}`,
+    },
+  },
+  listItemLinkSecondary: {
+    '& p': {
+      color: theme.palette.primary.main,
+      textDecoration: 'underline',
+      marginTop: theme.spacing(0.5),
+      '&:hover': {
+        color: Theme.colors.LIGHT_BLUE[400],
+      },
+    },
+  },
+}));
+
+const downloadCollection = (url) => {
+  if (!isStringNonEmpty(url)) {
+    return;
+  }
+  try {
+    const link = window.document.createElement('a');
+    link.href = url;
+    link.setAttribute('download', url);
+    link.setAttribute('rel', 'noopener noreferrer');
+    window.document.body.appendChild(link);
+    link.click();
+    window.document.body.removeChild(link);
+  } catch (e) {
+    // eslint-disable-next-line no-console
+    console.error(e);
+  }
+};
+
+const BioRepoCollectionsDetail = () => {
+  const classes = useStyles(Theme);
+  const [state] = DataProductContext.useDataProductContextState();
+  const product = DataProductContext.getCurrentProductFromState(state);
+  const { biorepositoryCollections: collections } = product;
+  if (!existsNonEmpty(collections)) {
+    return null;
+  }
+  return (
+    <Detail title="Biorepository Collections">
+      <List dense className={classes.list}>
+        {collections.map((collection) => {
+          const {
+            collectionCode,
+            collectionName,
+            collectionContentUrl,
+            collectionDownloadUrl,
+          } = collection;
+          const showDownload = isStringNonEmpty(collectionDownloadUrl);
+          if (!isStringNonEmpty(collectionCode) || !isStringNonEmpty(collectionName)) {
+            return null;
+          }
+          return (
+            <ListItem
+              key={`${collectionCode}-${collectionName}`}
+              className={`${classes.listItemLink} ${classes.listItemLinkSecondary}`}
+              component="a"
+              href={collectionContentUrl}
+              target="_blank"
+              rel="noopener noreferrer"
+              button
+            >
+              <ListItemText primary={collectionName} secondary={collectionCode} />
+              {!showDownload ? null : (
+                <ListItemSecondaryAction>
+                  <Tooltip
+                    style={{ flex: 0 }}
+                    placement="left"
+                    title="Download collection"
+                  >
+                    <IconButton
+                      color="primary"
+                      onClick={() => { downloadCollection(collectionDownloadUrl); }}
+                    >
+                      <DownloadIcon />
+                    </IconButton>
+                  </Tooltip>
+                </ListItemSecondaryAction>
+              )}
+            </ListItem>
+          );
+        })}
+      </List>
+    </Detail>
+  );
+};
+
+export default BioRepoCollectionsDetail;