style: add registered conditions of access + consistent copy NIAID-Da…

…ta-Ecosystem/niaid-feedback#167

src/components/badges/components/ConditionsOfAccess.tsx

@@ -3,6 +3,7 @@ import { Icon } from '@chakra-ui/react';
 import { FaLock, FaUnlock } from 'react-icons/fa6';
 import { BadgeWithTooltip, BadgeWithTooltipProps } from 'src/components/badges';
 import SchemaDefinitions from 'configs/schema-definitions.json';
+import { transformConditionsOfAccessLabel } from 'src/utils/formatting/formatConditionsOfAccess';
 
 interface ConditionsOfAccessProps extends Omit<BadgeWithTooltipProps, 'value'> {
   conditionsOfAccess?: FormattedResource['conditionsOfAccess'];
@@ -24,15 +25,19 @@ export const ConditionsOfAccess = ({
   const getColorScheme = (
     conditionsOfAccess: ConditionsOfAccessProps['conditionsOfAccess'],
   ) => {
-    if (conditionsOfAccess === 'Open') {
+    if (conditionsOfAccess?.includes('Open')) {
       return 'green';
-    } else if (conditionsOfAccess === 'Restricted') {
+    } else if (conditionsOfAccess?.includes('Restricted')) {
       return 'red';
-    } else if (conditionsOfAccess === 'Controlled') {
+    } else if (
+      conditionsOfAccess?.includes('Controlled') ||
+      conditionsOfAccess?.includes('Unknown') ||
+      conditionsOfAccess?.includes('Registered')
+    ) {
       return 'gray';
     } else if (
-      conditionsOfAccess === 'Embargoed' ||
-      conditionsOfAccess === 'Varied'
+      conditionsOfAccess?.includes('Embargoed') ||
+      conditionsOfAccess?.includes('Varied')
     ) {
       return 'orange';
     } else {
@@ -43,22 +48,26 @@ export const ConditionsOfAccess = ({
   const getIcon = (
     conditionsOfAccess: ConditionsOfAccessProps['conditionsOfAccess'],
   ) => {
-    if (conditionsOfAccess === 'Open') {
+    if (conditionsOfAccess?.includes('Open')) {
       return <Icon as={FaUnlock}></Icon>;
     } else if (
-      conditionsOfAccess === 'Restricted' ||
-      conditionsOfAccess === 'Controlled' ||
-      conditionsOfAccess === 'Embargoed'
+      conditionsOfAccess?.includes('Embargoed') ||
+      conditionsOfAccess?.includes('Registered') ||
+      conditionsOfAccess?.includes('Restricted') ||
+      conditionsOfAccess?.includes('Controlled')
     ) {
       return <Icon as={FaLock}></Icon>;
-    } else if (conditionsOfAccess === 'Varied') {
+    } else if (
+      conditionsOfAccess?.includes('Varied') ||
+      conditionsOfAccess?.includes('Unknown')
+    ) {
       return <Icon as={FaUnlock}></Icon>;
     }
   };
   return (
     <BadgeWithTooltip
       colorScheme={getColorScheme(conditionsOfAccess)}
-      value={conditionsOfAccess}
+      value={transformConditionsOfAccessLabel(conditionsOfAccess)}
       tooltipLabel={property?.description[type]}
       leftIcon={getIcon(conditionsOfAccess)}
       {...props}

src/hooks/api/useRepoData.ts

@@ -7,6 +7,10 @@ import {
   FormattedResource,
 } from 'src/utils/api/types';
 import axios from 'axios';
+import {
+  formatConditionsOfAccess,
+  transformConditionsOfAccessLabel,
+} from 'src/utils/formatting/formatConditionsOfAccess';
 
 export interface Repository {
   _id: string;
@@ -118,7 +122,11 @@ export function useRepoData(options: any = {}) {
             name: name || '',
             domain: genre,
             url,
-            conditionsOfAccess: conditionsOfAccess || '',
+            conditionsOfAccess: conditionsOfAccess
+              ? transformConditionsOfAccessLabel(
+                  formatConditionsOfAccess(conditionsOfAccess),
+                )
+              : '',
           };
         });
 

src/hooks/api/useResourceCatalogs.ts

@@ -5,6 +5,10 @@ import {
   FetchSearchResultsResponse,
   FormattedResource,
 } from 'src/utils/api/types';
+import {
+  formatConditionsOfAccess,
+  transformConditionsOfAccessLabel,
+} from 'src/utils/formatting/formatConditionsOfAccess';
 
 export interface ResourceCatalog {
   _id: string;
@@ -62,7 +66,9 @@ export function useResourceCatalogs({
       return catalogs.map(catalog => ({
         _id: catalog._id,
         abstract: catalog.abstract,
-        conditionsOfAccess: catalog.conditionsOfAccess,
+        conditionsOfAccess: transformConditionsOfAccessLabel(
+          formatConditionsOfAccess(catalog.conditionsOfAccess),
+        ),
         type: ['Resource Catalog'],
         name: catalog.name,
         domain: catalog.genre,

src/utils/api/helpers.ts

@@ -1,10 +1,5 @@
-import {
-  Author,
-  Citation,
-  Distribution,
-  FormattedResource,
-  AccessTypes,
-} from './types';
+import { formatConditionsOfAccess } from '../formatting/formatConditionsOfAccess';
+import { Author, Citation, Distribution, FormattedResource } from './types';
 
 interface APIAuthor {
   identifier?: string; // orcid id
@@ -169,32 +164,6 @@ const convertToArray = (property: any) => {
   return property ? (Array.isArray(property) ? property : [property]) : null;
 };
 
-/*
- Stardized conditions of access value. Feedback provided by NIAID proposes "controlled" access instead of "closed" or "restricted".
- See issue #59 for more information.
-*/
-type APIAccessTypes = 'Open' | 'Closed' | 'Embargoed' | 'Restricted';
-
-const formatConditionsOfAccess = (
-  access: APIAccessTypes,
-): AccessTypes | null => {
-  if (!access || access === undefined) {
-    return null;
-  } else if (
-    access === 'Closed' ||
-    access.toLowerCase().includes('closed') ||
-    access.toLowerCase().includes('restricted')
-  ) {
-    /*
-     Group "closed" and "restricted" access types as "controlled".
-     https://github.com/NIAID-Data-Ecosystem/nde-portal/issues/59
-    */
-    return 'Controlled';
-  } else {
-    return access;
-  }
-};
-
 export const formatAPIResource = (data: any) => {
   if (!data) {
     return undefined;

src/utils/api/types.ts

@@ -41,6 +41,7 @@ export type AccessTypes =
   | 'Open'
   | 'Controlled'
   | 'Embargoed'
+  | 'Registered'
   | 'Restricted'
   | 'Varied'
   | 'Unknown';

src/utils/formatting/formatConditionsOfAccess.ts

@@ -0,0 +1,48 @@
+import { AccessTypes } from '../api/types';
+
+/*
+ Stardized conditions of access value. Feedback provided by NIAID proposes "controlled" access instead of "closed" or "restricted".
+ See issue #59 for more information.
+*/
+
+export const formatConditionsOfAccess = (
+  access: string | null,
+): AccessTypes | null => {
+  if (!access || access === undefined) {
+    return null;
+  } else {
+    let label = access;
+
+    if (access === 'Closed' || access.toLowerCase().includes('closed')) {
+      /*
+       Group "closed" access types as "registered".
+       https://github.com/NIAID-Data-Ecosystem/niaid-feedback/issues/169#issuecomment-2546339216
+      */
+      label = 'Registered';
+    } else if (
+      access === 'Restricted' ||
+      access.toLowerCase().includes('restricted')
+    ) {
+      /*
+       Group "restricted" access types as "controlled".
+       https://github.com/NIAID-Data-Ecosystem/nde-portal/issues/59
+      */
+      label = 'Controlled';
+    }
+    return (label.charAt(0).toUpperCase() + label.slice(1)) as AccessTypes;
+  }
+};
+
+export const transformConditionsOfAccessLabel = (
+  conditionsOfAccess: AccessTypes | null,
+) => {
+  if (!conditionsOfAccess) {
+    return '';
+  }
+  return (
+    conditionsOfAccess.charAt(0) +
+    conditionsOfAccess.slice(1).toLowerCase() +
+    ' ' +
+    'Access'
+  );
+};

src/views/home/components/TableWithSearch/index.tsx

@@ -273,10 +273,7 @@ export const RepositoryCells = ({
             (data.domain ? formatDomainName(data.domain) : '-')}
           {column.property === 'conditionsOfAccess' &&
             (data['conditionsOfAccess']
-              ? `${
-                  data['conditionsOfAccess'].charAt(0) +
-                  data['conditionsOfAccess'].slice(1)
-                } Access`
+              ? `${data['conditionsOfAccess']}`
               : '-')}
         </SkeletonText>
       )}

src/views/search-results-page/components/card/index.tsx

@@ -216,6 +216,7 @@ const SearchResultCard: React.FC<SearchResultCardProps> = ({
                       mx={1}
                     />
                     <ConditionsOfAccess
+                      type={data?.['@type']}
                       conditionsOfAccess={conditionsOfAccess}
                       mx={1}
                     />
@@ -332,45 +333,46 @@ const SearchResultCard: React.FC<SearchResultCardProps> = ({
 
               <MetadataAccordion data={data} />
 
-              {data?.topicCategory && data?.topicCategory.length > 0 && (
-                <Flex
-                  borderBottom='1px solid'
-                  borderBottomColor='gray.200'
-                  my={0}
-                  px={paddingCard}
-                  py={1}
-                >
-                  <SearchableItems
-                    fieldName='topicCategory.name'
-                    generateButtonLabel={(
-                      limit,
-                      length,
-                      itemLabel = 'topics',
-                    ) =>
-                      limit === length
-                        ? `Show fewer ${itemLabel}`
-                        : `Show all ${itemLabel} (${length - limit} more)`
-                    }
-                    itemLimit={3}
-                    items={data.topicCategory?.flatMap(
-                      (topic: { name?: string }) =>
-                        topic?.name && typeof topic.name === 'string'
-                          ? [topic.name]
-                          : [],
-                    )}
-                    name={
-                      <InfoLabel
-                        title='Topic Categories'
-                        tooltipText={
-                          metadataFields['topicCategory'].description?.[
-                            data['@type']
-                          ]
-                        }
-                      />
-                    }
-                  />
-                </Flex>
-              )}
+              {data?.topicCategory &&
+                data?.topicCategory.some(topic => topic.name) && (
+                  <Flex
+                    borderBottom='1px solid'
+                    borderBottomColor='gray.200'
+                    my={0}
+                    px={paddingCard}
+                    py={1}
+                  >
+                    <SearchableItems
+                      fieldName='topicCategory.name'
+                      generateButtonLabel={(
+                        limit,
+                        length,
+                        itemLabel = 'topics',
+                      ) =>
+                        limit === length
+                          ? `Show fewer ${itemLabel}`
+                          : `Show all ${itemLabel} (${length - limit} more)`
+                      }
+                      itemLimit={3}
+                      items={data.topicCategory?.flatMap(
+                        (topic: { name?: string }) =>
+                          topic?.name && typeof topic.name === 'string'
+                            ? [topic.name]
+                            : [],
+                      )}
+                      name={
+                        <InfoLabel
+                          title='Topic Categories'
+                          tooltipText={
+                            metadataFields['topicCategory'].description?.[
+                              data['@type']
+                            ]
+                          }
+                        />
+                      }
+                    />
+                  </Flex>
+                )}
 
               {data?.applicationCategory &&
                 data?.applicationCategory.length > 0 && (

src/views/search-results-page/components/filters/components/tag.tsx

@@ -71,7 +71,7 @@ export const FilterTags: React.FC<FilterTagsProps> = ({
             displayValue = `${
               scientificName.charAt(0).toUpperCase() + scientificName.slice(1)
             } ( ${commonName.charAt(0).toUpperCase() + commonName.slice(1)} )`;
-          } else if (key === '@type') {
+          } else if (key === '@type' || key === 'conditionsOfAccess') {
             displayValue = filterConfig?.transformData
               ? filterConfig.transformData({ term: value, count: 0 })?.label
               : '';

src/views/search-results-page/components/filters/config.ts

@@ -5,14 +5,18 @@ import {
 import { FilterConfig, FacetTermWithDetails } from './types';
 import { buildQueries, buildSourceQueries } from './utils/query-builders';
 import { formatDate, formatISOString } from 'src/utils/api/helpers';
-import { FetchSearchResultsResponse } from 'src/utils/api/types';
+import { AccessTypes, FetchSearchResultsResponse } from 'src/utils/api/types';
 import {
   createCommonQuery,
   createNotExistsQuery,
   structureQueryData,
 } from './utils/queries';
 import SCHEMA_DEFINITIONS from 'configs/schema-definitions.json';
 import { SchemaDefinitions } from 'scripts/generate-schema-definitions/types';
+import {
+  formatConditionsOfAccess,
+  transformConditionsOfAccessLabel,
+} from 'src/utils/formatting/formatConditionsOfAccess';
 
 const schema = SCHEMA_DEFINITIONS as SchemaDefinitions;
 
@@ -185,6 +189,19 @@ export const FILTER_CONFIGS: FilterConfig[] = [
     property: 'conditionsOfAccess',
     description: getSchemaDescription('conditionsOfAccess'),
     createQueries: buildQueries(),
+    transformData: (item): FacetTermWithDetails => {
+      let term = item.label || item.term;
+      // Ignore any and non specified
+      if (item.term.includes('_exists_')) {
+        return { ...item, label: item.label || '' };
+      }
+      return {
+        ...item,
+        label:
+          transformConditionsOfAccessLabel(formatConditionsOfAccess(term)) ||
+          '',
+      };
+    },
   },
   {
     _id: 'variableMeasured.name.raw',