col page: do nto show empty maps. #691

gbif · Jan 9, 2025 · e54787e · e54787e
1 parent 9fb9145
commit e54787e
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 19 deletions.
diff --git a/packages/gbif-org/src/components/mapThumbnail.tsx b/packages/gbif-org/src/components/mapThumbnail.tsx
@@ -128,18 +128,21 @@ export function AdHocMapThumbnail({
   filter,
   basemapStyle = 'gbif-geyser', // default value for basemapStyle
   // basemapStyle = 'gbif-middle', // default value for basemapStyle
+  params,
   className,
 }: {
   filter: JSON;
   basemapStyle?: BasemapStyle;
+  params?: { [key: string]: string } | null;
   className?: string;
 }) {
-  const overlayStyle = {
+  const overlayStyleParams = params || {
     mode: 'GEO_CENTROID',
     squareSize: '256',
     style: 'scaled.circles',
   };
-  const styleString = stringify(overlayStyle);
+
+  const styleString = stringify(overlayStyleParams);
   const filterString = stringify(filter);
 
   return (

diff --git a/packages/gbif-org/src/components/properties.tsx b/packages/gbif-org/src/components/properties.tsx
@@ -186,10 +186,9 @@ export function Property({
 } & React.HTMLAttributes<HTMLDivElement>) {
   // if there is no value, and the user do not ask to show empty values, then do not show anything
   if (
-    (typeof value === 'undefined' ||
-      value === null ||
-      (Array.isArray(value) && value.length === 0)) &&
-    !children
+    typeof value === 'undefined' ||
+    value === null ||
+    (Array.isArray(value) && value.length === 0)
   ) {
     if (!props.showEmpty) return null;
   }

diff --git a/packages/gbif-org/src/routes/collection/key/About.tsx b/packages/gbif-org/src/routes/collection/key/About.tsx
@@ -25,15 +25,17 @@ import { GrSciCollMetadata } from '@/routes/institution/key/MetaData';
 import { ArticleContainer } from '@/routes/resource/key/components/articleContainer';
 import { ArticleTextContainer } from '@/routes/resource/key/components/articleTextContainer';
 import { isNoneEmptyArray } from '@/utils/isNoneEmptyArray';
+import { useContext } from 'react';
 import { FormattedMessage, FormattedNumber } from 'react-intl';
 import { useParams } from 'react-router-dom';
 import { useCollectionKeyLoaderData } from '.';
-import { FeaturedImageContent } from './collectionKeyPresentation';
+import { CollectionKeyContext, FeaturedImageContent } from './collectionKeyPresentation';
 import { DescriptorGroups } from './DescriptorGroups';
 
 export default function About() {
   const { key } = useParams();
   const { data } = useCollectionKeyLoaderData();
+  const { contentMetrics } = useContext(CollectionKeyContext);
   const { count, loading } = useCount({
     v1Endpoint: '/occurrence/search',
     params: { collectionKey: key },
@@ -107,11 +109,6 @@ export default function About() {
                       </DynamicLink>
                     </Property>
                   )}
-                  {/* {occurrenceSearch?.documents?.total > 0 && <Property value={occurrenceSearch?.documents?.total} labelId="grscicoll.specimensViaGbif" formatter={count => {
-                    return <ResourceLink type="collectionKeySpecimens" id={collection.key}>
-                      <FormattedNumber value={count} />
-                    </ResourceLink>
-                  }} />} */}
                   <Property value={collection.catalogUrls} labelId="grscicoll.catalogUrl">
                     <ul>
                       {collection.catalogUrls.map((url, i) => (
@@ -134,6 +131,11 @@ export default function About() {
                       ))}
                     </ul>
                   </Property>
+                  {collection.homepage && (
+                    <Property value={collection.homepage} labelId="grscicoll.homepage" showEmpty>
+                      <HyperText text={collection.homepage} />
+                    </Property>
+                  )}
                   <Property
                     value={collection.contentTypes}
                     labelId="collection.contentTypes"
@@ -444,12 +446,19 @@ export default function About() {
             <aside className="g-flex-none g-w-96 g-ms-4">
               {!!count && count > 0 && (
                 <>
-                  <div className="g-max-w-64 md:g-max-w-96 g-mb-4">
-                    <AdHocMapThumbnail
-                      filter={{ collectionKey: collection.key }}
-                      className="g-rounded g-border"
-                    />
-                  </div>
+                  {contentMetrics?.withCoordinates?.documents?.total > 0 && (
+                    <div className="g-max-w-64 md:g-max-w-96 g-mb-4">
+                      <AdHocMapThumbnail
+                        params={
+                          contentMetrics?.withCoordinates?.documents?.total < 100
+                            ? { bin: 'hex', hexPerTile: '20', style: 'red.poly' }
+                            : null
+                        }
+                        filter={{ collectionKey: collection.key }}
+                        className="g-rounded g-border"
+                      />
+                    </div>
+                  )}
                   <ClientSideOnly>
                     <charts.OccurrenceSummary predicate={predicate} className="g-mb-4" />
                     <charts.DataQuality predicate={predicate} className="g-mb-4" />

diff --git a/packages/gbif-org/src/routes/collection/key/collectionKeyPresentation.tsx b/packages/gbif-org/src/routes/collection/key/collectionKeyPresentation.tsx
@@ -40,7 +40,10 @@ const GBIF_REGISTRY_ENDPOINT = 'https://registry.gbif.org';
 const contactThreshold = 5;
 
 // create context to pass data to children
-export const CollectionKeyContext = createContext<{ key?: string; contentMetrics?: unknown }>({});
+export const CollectionKeyContext = createContext<{
+  key?: string;
+  contentMetrics?: CollectionSummaryMetricsQuery;
+}>({});
 
 export function CollectionKey({
   data,