show currently clustered record in style with others. relates to gbif/hosted-portals#263

Author: MortenHofft

packages/graphql-api/src/resources/gbif/occurrence/occurrence.resolver.js

@@ -208,6 +208,7 @@ export default {
           size,
           from,
           count: response.relatedOccurrences.length,
+          currentOccurrence: response.currentOccurrence,
           relatedOccurrences: response.relatedOccurrences.slice(
             from,
             from + size,
@@ -563,6 +564,13 @@ export default {
       }),
     stub: (related) => related.occurrence,
   },
+  RelatedCurrentOccurrence: {
+    occurrence: (current, _args, { dataSources }) =>
+      dataSources.occurrenceAPI.getOccurrenceByKey({
+        key: current.gbifId,
+      }),
+    stub: (current) => current,
+  },
   LongitudeHistogram: {
     bounds: ({ buckets, interval }) => {
       return getLongitudeBounds(buckets, interval);

packages/graphql-api/src/resources/gbif/occurrence/occurrence.type.js

@@ -335,6 +335,7 @@ const typeDef = gql`
     count: Int
     size: Int
     from: Int
+    currentOccurrence: RelatedCurrentOccurrence!
     relatedOccurrences: [RelatedOccurrence]
   }
 
@@ -347,6 +348,14 @@ const typeDef = gql`
     stub: RelatedOccurrenceStub
   }
 
+  type RelatedCurrentOccurrence {
+    occurrence: Occurrence
+    """
+    The occurrence as provided by the cluster API. It only has relev
+    """
+    stub: RelatedOccurrenceStub
+  }
+
   type RelatedOccurrenceStub {
     gbifId: ID
     scientificName: String

packages/react-components/src/entities/OccurrenceSidebar/details/Cluster.js

@@ -1,8 +1,8 @@
 
-import { jsx } from '@emotion/react';
+import { jsx, css } from '@emotion/react';
 import React, { useContext, useState, useEffect } from 'react';
 import ThemeContext from '../../../style/themes/ThemeContext';
-import * as css from '../styles';
+import * as styles from '../styles';
 import { Row, Col, Image, Properties, IconFeatures } from "../../../components";
 import { useQuery } from '../../../dataManagement/api';
 import { Header } from './Header';
@@ -35,8 +35,14 @@ export function Cluster({
   }
 
   return <div style={{ padding: '12px 16px' }}>
-    <Header data={data} />
-    <div style={{ marginTop: 24 }}>
+    {/* Based on feedback in https://github.com/gbif/hosted-portals/issues/263 I have removed the header and instead repeated the information in a format similar to the other clustered records */}
+    {/* <Header data={data} /> */}
+    <div>
+      <RelatedOccurrence onClick={e => setActiveKey(data.occurrence.key)} related={data.occurrence} css={css`
+        border-color: var(--primary);
+        background: var(--paperBackground700);
+        border-radius: var(--borderRadiusPx);
+      `}/>
       {related.map(x => {
         if (x.occurrence) {
           return <RelatedOccurrence key={x.occurrence.key} onClick={e => setActiveKey(x.occurrence.key)} related={x.occurrence} reasons={x.reasons} original={data.occurrence} />;
@@ -61,17 +67,17 @@ export function Cluster({
 
 export function RelatedOccurrence({ original, reasons, related, ...props }) {
   const theme = useContext(ThemeContext);
-  return <article css={css.clusterCard({ theme })} {...props}>
+  return <article css={styles.clusterCard({ theme })} {...props}>
     <Row wrap="nowrap" halfGutter={6} style={{ padding: 12 }}>
       <Col>
         <h4 style={{ margin: 0 }} dangerouslySetInnerHTML={{ __html: related.gbifClassification.usage.formattedName }}></h4>
-        <div css={css.entitySummary({ theme })}>
-          <IconFeatures css={css.features({ theme })}
+        <div css={styles.entitySummary({ theme })}>
+          <IconFeatures css={styles.features({ theme })}
             eventDate={related.eventDate}
             countryCode={related.countryCode}
             locality={related.locality}
           />
-          <IconFeatures css={css.features({ theme })}
+          <IconFeatures css={styles.features({ theme })}
             stillImageCount={related.stillImageCount}
             movingImageCount={related.movingImageCount}
             soundCount={related.soundCount}
@@ -98,11 +104,12 @@ export function RelatedOccurrence({ original, reasons, related, ...props }) {
         </div>
       </Col>
     </Row>
-    <div css={css.clusterFooter({ theme })}>
-      <Properties style={{ fontSize: 12 }} horizontal dense>
+    <div css={styles.clusterFooter({ theme })}>
+      {!reasons && <div>Current record</div>}
+      {reasons && <Properties style={{ fontSize: 12 }} horizontal dense>
         <T>Similarities</T>
-        <V>{ reasons.map(reason => <span css={css.chip({ theme })} key={reason}>{prettifyEnum(reason)}</span>) }</V>
-      </Properties>
+        <V>{ reasons.map(reason => <span css={styles.chip({ theme })} key={reason}>{prettifyEnum(reason)}</span>) }</V>
+      </Properties>}
     </div>
   </article>
 };

packages/react-components/src/search/OccurrenceSearch/OccurrenceSearch.stories.js

@@ -177,7 +177,7 @@ const config = {
   labels, 
   getSuggests, 
   filters, 
-  occurrenceSearchTabs: ['TABLE', 'MAP', 'DATASETS', 'GALLERY'],
+  occurrenceSearchTabs: ['CLUSTERS', 'TABLE', 'MAP', 'DATASETS', 'GALLERY'],
   // highlightedFilters: ['establishmentMeans'],
   // excludedFilters: ['locality'],
   availableCatalogues: ['OCCURRENCE', 'LITERATURE', 'COLLECTION'],