Address comments

Author: vanessavmac

ui/src/design-system/components/identification/identification-summary/identification-summary.module.scss

@@ -43,7 +43,10 @@
 }
 
 .details {
-  display: block;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 8px;
   @include mono();
   color: $color-neutral-600;
 }

ui/src/design-system/components/identification/identification-summary/identification-summary.tsx

@@ -1,11 +1,12 @@
 import { Identification } from 'data-services/models/occurrence-details'
 import { Tooltip } from 'design-system/components/tooltip/tooltip'
 import { Link } from 'react-router-dom'
+import { APP_ROUTES } from 'utils/constants'
 import { STRING, translate } from 'utils/language'
 import { Icon, IconTheme, IconType } from '../../icon/icon'
 import styles from './identification-summary.module.scss'
-
 interface IdentificationSummaryProps {
+  projectId?: string
   user?: {
     name: string
     image?: string
@@ -14,6 +15,7 @@ interface IdentificationSummaryProps {
 }
 
 export const IdentificationSummary = ({
+  projectId,
   user,
   identification,
 }: IdentificationSummaryProps) => (
@@ -38,9 +40,9 @@ export const IdentificationSummary = ({
         {user?.name ?? translate(STRING.MACHINE_SUGGESTION)}
       </span>
     </div>
-    {identification.algorithm && (
-      <Link to={identification.algorithm.uri}>
-        <Tooltip content={identification.algorithm.description}>
+    {identification.algorithm && projectId && (
+      <Link to={APP_ROUTES.ALGORITHMS({ projectId })}>
+        <Tooltip content={identification.algorithm.name}>
           <div className={styles.details}>
             {identification.algorithm.name}
             <Icon

ui/src/pages/algorithm-details/algorithm-details-dialog.tsx

@@ -4,6 +4,8 @@ import { Algorithm } from 'data-services/models/algorithm'
 import * as Dialog from 'design-system/components/dialog/dialog'
 import { InputValue } from 'design-system/components/input/input'
 import _ from 'lodash'
+import { ExternalLinkIcon } from 'lucide-react'
+import { buttonVariants } from 'nova-ui-kit'
 import { useNavigate, useParams } from 'react-router-dom'
 import { APP_ROUTES } from 'utils/constants'
 import { getAppRoute } from 'utils/getAppRoute'
@@ -82,31 +84,38 @@ const AlgorithmDetailsContent = ({ algorithm }: { algorithm: Algorithm }) => (
         />
       </FormRow>
       <FormRow>
-        <InputValue
-          label={translate(STRING.FIELD_LABEL_URI)}
-          value={algorithm.uri}
-          to={algorithm.uri}
-        />
         <InputValue
           label={translate(STRING.FIELD_LABEL_VERSION)}
           value={algorithm.version}
         />
-      </FormRow>
-      <FormRow>
         <InputValue
           label={translate(STRING.FIELD_LABEL_DESCRIPTION)}
           value={algorithm.description}
         />
       </FormRow>
-    </FormSection>
-    <FormSection title={translate(STRING.CATEGORY_MAP_DETAILS)}>
       <FormRow>
         <InputValue
-          label={translate(STRING.FIELD_LABEL_CATEGORY_MAP_ID)}
-          value={algorithm.categoryMapID}
-          to={algorithm.categoryMapURI}
+          label={translate(STRING.FIELD_LABEL_URI)}
+          value={algorithm.uri || 'None'}
+          to={algorithm.uri || undefined}
         />
       </FormRow>
     </FormSection>
+    {algorithm.categoryMapURI && (
+      <FormSection title={translate(STRING.CATEGORY_MAP_DETAILS)}>
+        <a
+          className={buttonVariants({
+            size: 'small',
+            variant: 'outline',
+          })}
+          href={algorithm.categoryMapURI}
+          rel="noreferrer"
+          target="_blank"
+        >
+          <span>View category map API</span>
+          <ExternalLinkIcon className="w-4 h-4 ml-2" />
+        </a>
+      </FormSection>
+    )}
   </>
 )

ui/src/pages/occurrence-details/identification-card/identification-card.tsx

@@ -64,7 +64,11 @@ export const IdentificationCard = ({
           {identification.applied && (
             <StatusLabel label={translate(STRING.ID_APPLIED)} />
           )}
-          <IdentificationSummary user={user} identification={identification} />
+          <IdentificationSummary
+            projectId={projectId}
+            user={user}
+            identification={identification}
+          />
         </div>
         <div className={styles.content}>
           <TaxonInfo

ui/src/pages/project/algorithms/algorithms-columns.tsx

@@ -10,14 +10,12 @@ export const columns: (projectId: string) => TableColumn<Algorithm>[] = (
 ) => [
   {
     id: 'id',
-    sortField: 'id',
     name: translate(STRING.FIELD_LABEL_ID),
     renderCell: (item: Algorithm) => <BasicTableCell value={item.id} />,
   },
   {
     id: 'name',
     name: translate(STRING.FIELD_LABEL_NAME),
-    sortField: 'name',
     renderCell: (item: Algorithm) => (
       <Link
         to={APP_ROUTES.ALGORITHM_DETAILS({ projectId, algorithmId: item.id })}
@@ -29,13 +27,11 @@ export const columns: (projectId: string) => TableColumn<Algorithm>[] = (
   {
     id: 'task-type',
     name: 'Task type',
-    sortField: 'task_type',
     renderCell: (item: Algorithm) => <BasicTableCell value={item.taskType} />,
   },
   {
     id: 'description',
     name: 'Description',
-    sortField: 'description',
     renderCell: (item: Algorithm) => (
       <BasicTableCell value={item.description} />
     ),