style(resources): style disambiguatingDescription

src/components/resource-sections/components/authors/index.tsx

@@ -90,9 +90,9 @@ const ResourceAuthors = ({
               >
                 <Box w='100%' flex='1' textAlign='left' mr={6}>
                   <Heading
-                    size='sm'
+                    fontSize='sm'
                     color='gray.700'
-                    fontWeight='semibold'
+                    fontWeight='light'
                     lineHeight='short'
                   >
                     {formatAuthorsList2String(authors, ',', 10)}

src/components/resource-sections/components/header/index.tsx

@@ -35,12 +35,7 @@ const Header: React.FC<HeaderProps> = ({
         pt={4}
         pb={2}
       >
-        <Heading
-          as='h1'
-          fontSize='2xl'
-          fontWeight='semibold'
-          lineHeight='short'
-        >
+        <Heading as='h1' fontSize='2xl' fontWeight='bold' lineHeight='short'>
           <DisplayHTMLString>{name || alternateName}</DisplayHTMLString>
           {!!name && alternateName && (
             <Heading

src/components/resource-sections/components/sidebar/components/external/index.tsx

@@ -6,6 +6,7 @@ import {
   Heading,
   HeadingProps,
   Skeleton,
+  SkeletonProps,
   Stack,
 } from '@chakra-ui/react';
 import { DataAccess } from './components/data-access';
@@ -16,22 +17,24 @@ import { AccessibleForFree, ConditionsOfAccess } from 'src/components/badges';
 import { HasDownload } from 'src/components/badges/components/HasDownload';
 import { HasAPI } from 'src/components/badges/components/HasAPI';
 
-export const External = ({
+interface ExternalProps extends Omit<WrapperProps, 'children'> {
+  data?: FormattedResource;
+}
+
+export const ExternalAccess = ({
   data,
   isLoading,
   hasDivider = true,
-}: {
-  isLoading: boolean;
-  data?: FormattedResource;
-  hasDivider: boolean;
-}) => {
+  ...props
+}: ExternalProps) => {
   return (
     <>
       {/* Source + data access info. */}
       <Wrapper
         isLoading={isLoading}
         label='Data Access'
         hasDivider={hasDivider}
+        {...props}
       >
         {(data?.isAccessibleForFree === true ||
           data?.isAccessibleForFree === false ||
@@ -63,6 +66,19 @@ export const External = ({
           url={data?.url}
         />
       </Wrapper>
+    </>
+  );
+};
+
+export const UsageInfo = ({
+  data,
+  isLoading,
+}: {
+  isLoading: boolean;
+  data?: FormattedResource;
+}) => {
+  return (
+    <>
       <Box bg='secondary.50'>
         {/* License, usage agreement */}
         {(data?.usageInfo || data?.license) && (
@@ -98,20 +114,23 @@ export const External = ({
   );
 };
 
+interface WrapperProps extends SkeletonProps {
+  label?: string;
+  isLoading: boolean;
+  children: React.ReactNode;
+  headingProps?: HeadingProps;
+  hasDivider?: boolean;
+}
+
 export const Wrapper = ({
   label,
   isLoading,
   children,
   headingProps,
   hasDivider = true,
-}: {
-  label?: string;
-  isLoading: boolean;
-  children: React.ReactNode;
-  headingProps?: HeadingProps;
-  hasDivider?: boolean;
-}) => (
-  <Skeleton isLoaded={!isLoading} fontSize='xs' flex={1}>
+  ...props
+}: WrapperProps) => (
+  <Skeleton isLoaded={!isLoading} fontSize='xs' flex={1} {...props}>
     {hasDivider && <Divider borderColor='niaid.placeholder' />}
     {label && (
       <Heading

src/components/resource-sections/components/sidebar/index.tsx

@@ -17,7 +17,7 @@ import { Route } from 'src/components/resource-sections/helpers';
 import { useLocalStorage } from 'usehooks-ts';
 import { CardContainer } from 'src/components/resource-sections/components/related-datasets';
 import { FaMagnifyingGlass } from 'react-icons/fa6';
-import { External } from './components/external';
+import { ExternalAccess, UsageInfo } from './components/external';
 import { ScrollContainer } from 'src/components/scroll-container';
 import { ResourceData } from 'src/pages/resources';
 import { CompletenessBadgeCircle } from 'src/components/metadata-completeness-badge/Circular';
@@ -57,7 +57,8 @@ export const Sidebar = ({
             />
           )}
           {/* External links to access data, documents or dataset at the source. */}
-          <External data={data} isLoading={isLoading} hasDivider={true} />
+          <ExternalAccess data={data} isLoading={isLoading} hasDivider={true} />
+          <UsageInfo data={data} isLoading={isLoading} />
         </Card>
 
         {/* Local navigation for page */}

src/components/resource-sections/components/summary/index.tsx

@@ -0,0 +1,96 @@
+import { FormattedResource } from 'src/utils/api/types';
+import {
+  Button,
+  Flex,
+  Icon,
+  Tag,
+  TagLabel,
+  TagLeftIcon,
+  Text,
+  useDisclosure,
+} from '@chakra-ui/react';
+import { FaInfo, FaWandMagicSparkles } from 'react-icons/fa6';
+import { Link } from 'src/components/link';
+import Tooltip from 'src/components/tooltip';
+
+export const Summary = ({
+  description,
+  tagLabel,
+}: {
+  description: FormattedResource['disambiguatingDescription'];
+  tagLabel: string;
+}) => {
+  const { isOpen, onToggle } = useDisclosure();
+
+  return (
+    <Flex
+      lineHeight='short'
+      display='flex'
+      alignItems='baseline'
+      flexWrap='wrap'
+      // mx={2}
+      px={4}
+      py={3}
+      bg='status.info_lt'
+      borderRadius='semi'
+    >
+      <Tooltip label='This summary is based on the description field using ChatGPT4.'>
+        <Link
+          href='/knowledge-center/ai-generated'
+          mx={1}
+          fontSize='13px'
+          fontWeight='medium'
+          letterSpacing='wide'
+          textTransform='uppercase'
+          whiteSpace={['unset', 'nowrap']}
+          lineHeight='inherit'
+          textDecoration='underline'
+          color='gray.800!important'
+          _hover={{ textDecoration: 'none' }}
+        >
+          SUMMARY{' '}
+          <Icon
+            as={FaInfo}
+            boxSize={3.5}
+            border='1px solid'
+            borderRadius='full'
+            p={0.5}
+            color='gray.800!important'
+          />
+        </Link>
+      </Tooltip>
+
+      <Text
+        lineHeight='short'
+        pt={1}
+        mx={1}
+        fontSize='lg'
+        verticalAlign='bottom'
+        noOfLines={isOpen ? undefined : 5}
+      >
+        <Tag
+          variant='solid'
+          size='sm'
+          mr={1.5}
+          colorScheme='tertiary'
+          bg='status.info'
+        >
+          <TagLeftIcon as={FaWandMagicSparkles}></TagLeftIcon>
+          <TagLabel>{tagLabel}</TagLabel>
+        </Tag>
+        {description}
+      </Text>
+      <Flex flex={1} w='100%' justifyContent='flex-end'>
+        <Button
+          size='xs'
+          variant='link'
+          m={1}
+          color='inherit'
+          onClick={onToggle}
+        >
+          read {isOpen ? 'less' : 'full summary'}
+        </Button>
+      </Flex>
+    </Flex>
+  );
+};