Minor UI updates

- Set Accession display background color for historic records
- accessionCount using <Number
- Subset display uses AccessionRefCard instead of AccessionCard

locales/en/translations.json

@@ -356,6 +356,8 @@
         "removeFromMyList": "Remove {{accessionNumber}} from my list",
         "addToMyList": "Add {{accessionNumber}}  to my list",
         "holdingInstitute": "Holding institute",
+        "historic": "Historic accession",
+        "isHistoric": "This is a historic record of an accession",
         "DOI": "DOI",
         "acquisitionDate": "Acquisition Date",
         "availability": "Availability for distribution",
@@ -1666,7 +1668,8 @@
           "detailedInstructions4": "Copy and paste the table from Excel into the text field below.",
           "listOfAccessions": "List of accessions described in the dataset",
           "pasteData": "Paste accessions data here (comma separated)",
-          "accessionListCount": "Accession list: {{count, numeric}} rows"
+          "accessionListCount": "List with {{count, number}} accession",
+          "accessionListCount_plural": "List with {{count, number}} accessions"
         },
         "basicInfo": {
           "stepName": "Basic information",

src/accessions/translations.json

@@ -30,6 +30,8 @@
         "removeFromMyList": "Remove {{accessionNumber}} from my list",
         "addToMyList": "Add {{accessionNumber}}  to my list",
         "holdingInstitute": "Holding institute",
+        "historic": "Historic accession",
+        "isHistoric": "This is a historic record of an accession",
         "DOI": "DOI",
         "acquisitionDate": "Acquisition Date",
         "availability": "Availability for distribution",

src/accessions/ui/DisplayPage.tsx

@@ -38,6 +38,12 @@ const styles = (theme) => ({
   pageSection: {
     marginBottom: '1em',
   },
+  selected: {
+    background: '#c9e2cb',
+  },
+  historic: {
+    background: '#ffe2e2 !important',
+  },
 });
 
 
@@ -96,7 +102,7 @@ class BrowsePage extends React.Component<IBrowsePageProps, any> {
       :
       {details: null, pdci: null, datasets: null, subsets: null, files: null, imageGallery: null};
 
-    const  isChecked  =  accession && accessions && accessions.includes(accession.uuid);
+    const isChecked  =  accession && accessions && accessions.includes(accession.uuid);
     const theDoi = `10.${doi}`;
     const stillLoading: boolean = ! error && (! accession
       || (doi && accession && accession.doi !== theDoi)
@@ -115,7 +121,7 @@ class BrowsePage extends React.Component<IBrowsePageProps, any> {
 
             { accession &&
               <PageContents className="pt-1rem">
-                <MainSection title={
+                <MainSection className={ isChecked ? classes.selected : accession.historic ?  classes.historic : '' } title={
                   <div>
                     { t('accessions.common.modelName') }: { accession.accessionNumber }
                     <div className="float-right">
@@ -144,6 +150,7 @@ class BrowsePage extends React.Component<IBrowsePageProps, any> {
                       <span> &mdash; </span>
                       <CountryLink noflag country={ accession.institute.country }/>
                     </PropertiesItem>
+                    { accession.historic && <PropertiesItem className={ accession.historic ?  classes.historic : '' } title={ t('accessions.public.p.display.historic') }>{ t('accessions.public.p.display.isHistoric') }</PropertiesItem> }
                     <PropertiesItem title={ t('accessions.common.instituteCode') }>{ accession.institute.code }</PropertiesItem>
                     <PropertiesItem title={ t('accessions.public.p.display.acquisitionDate') }><McpdDate value={ accession.acquisitionDate } /></PropertiesItem>
                     { accession.countryOfOrigin && <PropertiesItem title={ t('accessions.common.countryOfOrigin') }>{ <CountryLink country={ accession.countryOfOrigin }/> }</PropertiesItem> }
@@ -271,7 +278,7 @@ class BrowsePage extends React.Component<IBrowsePageProps, any> {
                     small
                     title={ t('accessions.public.p.display.associatedDatasets') }
                     propertyItemProps={ { keepEmpty: true } }
-                    propertiesList={ datasets.map((dataset) => ({ title: t('dataset.common.modelName'), value: <DatasetLink to={ dataset } /> })) }
+                    propertiesList={ datasets.map((dataset) => ({ value: <DatasetLink to={ dataset } /> })) }
                   />
                   }
                   { subsets && subsets.length > 0 &&
@@ -279,7 +286,7 @@ class BrowsePage extends React.Component<IBrowsePageProps, any> {
                     small
                     title={ t('accessions.public.p.display.associatedSubsets') }
                     propertyItemProps={ { keepEmpty: true } }
-                    propertiesList={ subsets.map((subset) => ({ title: t('subset.common.modelName'), value: <SubsetLink to={ subset } /> })) }
+                    propertiesList={ subsets.map((subset) => ({ value: <SubsetLink to={ subset } /> })) }
                   />
                   }
                 </GridContainer>

src/accessions/ui/c/AccessionCard.tsx

@@ -20,7 +20,7 @@ const styles = (theme) => ({
     background: '#c9e2cb',
   },
   historic: {
-    background: '#f3dddd',
+    background: '#ffe2e2',
   },
 });
 

src/datasets/ui/c/DatasetDisplay.tsx

@@ -37,6 +37,7 @@ import Card, { CardHeader, CardContent, CardActions } from 'ui/common/Card';
 import McpdDate from 'ui/common/time/McpdDate';
 import PagedLoader from 'ui/common/PagedLoader';
 import AccessionRefCard from 'accessions/ui/c/AccessionRefCard';
+import Number from 'ui/common/Number';
 
 const styles = (theme) => ({
   root: {
@@ -267,10 +268,10 @@ class DetailInfo extends React.Component<IDetailInfoProps, any> {
                   </PropertiesItem>
                   }
                   <PropertiesItem title={ t('datasets.public.common.accessionsNumber') }>
-                    { dataset.accessionCount }
+                    <Number value={ dataset.accessionCount } />
                   </PropertiesItem>
                   <PropertiesItem title={ t('datasets.public.common.traitsNumber') }>
-                    { dataset.descriptorCount }
+                    <Number value={ dataset.descriptorCount } />
                   </PropertiesItem>
                   <PropertiesItem title={ t('datasets.public.c.datasetDisplay.properties.evaluationStart') }>
                     <McpdDate value={ dataset.startDate }/>

src/subsets/translations.json

@@ -74,7 +74,8 @@
           "detailedInstructions4": "Copy and paste the table from Excel into the text field below.",
           "listOfAccessions": "List of accessions described in the dataset",
           "pasteData": "Paste accessions data here (comma separated)",
-          "accessionListCount": "Accession list: {{count, numeric}} rows"
+          "accessionListCount": "List with {{count, number}} accession",
+          "accessionListCount_plural": "List with {{count, number}} accessions"
         },
         "basicInfo": {
           "stepName": "Basic information",

src/subsets/ui/c/SubsetDisplay.tsx

@@ -12,11 +12,11 @@ import Page from 'model/Page';
 import {AccessionRef} from 'model/accession/AccessionRef';
 // ui
 import SubsetCard from 'subsets/ui/c/SubsetCard';
-import AccessionCard from 'accessions/ui/c/AccessionCard';
 import PropertiesCard from 'ui/common/PropertiesCard';
 import Grid from '@material-ui/core/Grid';
 import Loading from 'ui/common/Loading';
 import PagedLoader from 'ui/common/PagedLoader';
+import AccessionRefCard from 'accessions/ui/c/AccessionRefCard';
 
 const styles = (theme) => ({
   accessionSection: {
@@ -49,8 +49,8 @@ class DetailInfo extends React.Component<IDetailInfoProps, any> {
     }
 
     const renderAccession = (accessionRef: AccessionRef, index: number) => (
-      <Grid key={ accessionRef.accession.uuid } item xs={ 12 } className={ classes.accessionCard }>
-        <AccessionCard index={ index } accession={ accessionRef.accession }/>
+      <Grid key={ `aref-${index}` } item xs={ 12 } className={ classes.accessionCard }>
+        <AccessionRefCard index={ index } accessionRef={ accessionRef }/>
       </Grid>
     );
 

src/ui/common/Properties.tsx

@@ -48,29 +48,33 @@ const styles = (theme) => ({
 
 interface IItemProps extends React.ClassAttributes<any> {
     // classes: any;
-    title: any;
+    title?: any;
     small?: boolean;
     keepEmpty?: boolean;
     numeric?: boolean;
     t: any;
     // children: any;
     style?: any;
+    className?: string;
 }
 
 class PropertiesItem1 extends React.Component<IItemProps & WithStyles<'propertiesContainer' | 'propertiesRow' | 'propertiesValue' | 'propertiesValueSmall' | 'propertiesValueNumeric'>, any> {
 
     public render() {
-        const { keepEmpty, small, numeric, title, classes, children, t, style } = this.props;
+        const { keepEmpty, small, numeric, title, classes, className, children, t, style } = this.props;
         if (!keepEmpty && ! children) {
           return null;
         }
+        const hasTitle: boolean = title !== null && title;
         return (
-          <Grid item xs={ 12 } md={ small ? 3 : 12 } className={ classes.propertiesRow }>
+          <Grid item xs={ 12 } md={ small ? 3 : 12 } className={ `${classes.propertiesRow} ${className ? className : ''}` }>
             <Grid container  style={ small ? {height: '100%' } : {} } spacing={ 0 }>
-              <Grid item xs={ small && numeric ? 8 : 6 } md={ small ? 12 : (numeric ? 9 : 3) } className="font-bold p-halfrem" style={ { fontSize: '1rem', fontFamily: 'Roboto, sans-serif' } }>
-                { title && typeof title === 'string' ? t(title) : title }
-              </Grid>
-              <Grid item xs={ small && numeric ? 4 : 6 } md={ small ? 12 : (numeric ? 3 : 9) } style={ style }
+              { hasTitle && (
+                <Grid item xs={ small && numeric ? 8 : 6 } md={ small ? 12 : (numeric ? 9 : 3) } className="font-bold p-halfrem" style={ { fontSize: '1rem', fontFamily: 'Roboto, sans-serif' } }>
+                    { title && typeof title === 'string' ? t(title) : title }
+                </Grid>
+              ) }
+              <Grid item xs={ !hasTitle ? 12 : small && numeric ? 4 : 6 } md={ !hasTitle ? 12 : small ? 12 : (numeric ? 3 : 9) } style={ style }
                 className={ style ? `${style}` : `${small ? classes.propertiesValueSmall : ''} ${numeric && !small ? classes.propertiesValueNumeric : ''} ${classes.propertiesValue}` }>
                   { children }
               </Grid>

src/ui/common/PropertiesCard.tsx

@@ -36,7 +36,7 @@ class PropertiesCard extends React.Component<IBundledProps, any> {
                             <Properties>
                                 {
                                     propertiesList.map((property, i) => (
-                                        <PropertiesItem key={ `${i}-${property.title}` } numeric title={ property.title } { ...propertyItemProps }>
+                                        <PropertiesItem key={ `${i}-${property.title}` } title={ property.title } { ...propertyItemProps }>
                                             { property.value &&  typeof property.value === 'number' ? t(`common:label.prettyNumber`, {value: property.value}) : property.value }
                                         </PropertiesItem>
                                     ))

src/ui/layout/PageLayout.tsx

@@ -77,9 +77,9 @@ const Layout = ({classes, children = null, sidebar = null, withFooter = false}:
 );
 
 const Contents = ({classes, style = {}, children = null, className = ''}) => children && <div style={ style } className={ `${className} ${classes.pageContents}` }>{ children }</div>;
-const Section1 = ({classes, title, children = null}) => children && (
+const Section1 = ({classes, className = '', title, children = null}) => children && (
   <Card className={ classes.mainSection }>
-    <CardHeader classes={ { title: classes.mainSectionTitle } } title={ title } />
+    <CardHeader classes={ { title: classes.mainSectionTitle } } className={ className } title={ title } />
     <CardContent>{ children }</CardContent>
   </Card>
 );