Tweak UI for identifications (#417)

* Tweak UI for identifications * Conditionally render algorithm tooltip
RolnickLab · Jun 12, 2024 · c99d8af · c99d8af
1 parent be893ea
commit c99d8af
Show file tree

Hide file tree

Showing 9 changed files with 56 additions and 44 deletions.
diff --git a/ui/src/data-services/models/algorithm.ts b/ui/src/data-services/models/algorithm.ts
@@ -15,7 +15,7 @@ export class Algorithm {
     })
   }
 
-  get description(): string {
+  get description(): string | undefined {
     return this._algorithm.description
   }
 

diff --git a/...ystem/components/identification/identification-summary/identification-summary.module.scss b/...ystem/components/identification/identification-summary/identification-summary.module.scss
@@ -1,12 +1,19 @@
 @import 'src/design-system/variables/colors.scss';
 @import 'src/design-system/variables/typography.scss';
 
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: flex-start;
+  gap: 4px;
+}
+
 .user {
   display: flex;
   align-items: center;
   justify-content: flex-start;
   gap: 8px;
-  margin-bottom: 4px;
 
   .profileImage {
     width: 46px;

diff --git a/...design-system/components/identification/identification-summary/identification-summary.tsx b/...design-system/components/identification/identification-summary/identification-summary.tsx
@@ -1,13 +1,12 @@
 import { Identification } from 'data-services/models/occurrence-details'
 import { Tooltip } from 'design-system/components/tooltip/tooltip'
-import { ReactNode } from 'react'
+import { AlgorithmDetails } from 'pages/occurrence-details/algorithm-details/algorithm-details'
 import { getFormatedDateTimeString } from 'utils/date/getFormatedDateTimeString/getFormatedDateTimeString'
 import { STRING, translate } from 'utils/language'
 import { Icon, IconTheme, IconType } from '../../icon/icon'
 import styles from './identification-summary.module.scss'
 
 interface IdentificationSummaryProps {
-  children: ReactNode
   user?: {
     name: string
     image?: string
@@ -16,7 +15,6 @@ interface IdentificationSummaryProps {
 }
 
 export const IdentificationSummary = ({
-  children,
   user,
   identification,
 }: IdentificationSummaryProps) => {
@@ -25,7 +23,7 @@ export const IdentificationSummary = ({
   })
 
   return (
-    <div>
+    <div className={styles.wrapper}>
       <div className={styles.user}>
         {user ? (
           <div className={styles.profileImage}>
@@ -48,7 +46,9 @@ export const IdentificationSummary = ({
           </span>
         </Tooltip>
       </div>
-      {children}
+      {identification.algorithm && (
+        <AlgorithmDetails algorithm={identification.algorithm} />
+      )}
     </div>
   )
 }
diff --git a/ui/src/pages/occurrence-details/agree/agree.tsx b/ui/src/pages/occurrence-details/agree/agree.tsx
@@ -35,6 +35,7 @@ export const Agree = ({
         label={translate(STRING.AGREED)}
         icon={IconType.RadixCheck}
         theme={buttonTheme}
+        disabled
       />
     )
   }

diff --git a/ui/src/pages/occurrence-details/algorithm-details/algorithm-details.module.scss b/ui/src/pages/occurrence-details/algorithm-details/algorithm-details.module.scss
@@ -3,8 +3,7 @@
 @import 'src/design-system/variables/typography.scss';
 
 .algorithmDetails {
-    display: block;
-    @include mono();
-    padding-bottom: 2px;
-    color: $color-neutral-600;
+  display: block;
+  @include mono();
+  color: $color-neutral-600;
 }
diff --git a/ui/src/pages/occurrence-details/algorithm-details/algorithm-details.tsx b/ui/src/pages/occurrence-details/algorithm-details/algorithm-details.tsx
@@ -2,16 +2,14 @@ import { Algorithm } from 'data-services/models/algorithm'
 import { Tooltip } from 'design-system/components/tooltip/tooltip'
 import styles from './algorithm-details.module.scss'
 
-export const AlgorithmDetails = ({
-  algorithm,
-}: {
-  algorithm: Algorithm | undefined
-}) => {
-  return algorithm ? (
-    <Tooltip
-      content={`id: ${algorithm.id} created: ${algorithm.description} jobs: `}
-    >
+export const AlgorithmDetails = ({ algorithm }: { algorithm: Algorithm }) => {
+  if (!algorithm.description) {
+    return <div className={styles.algorithmDetails}>{algorithm.name}</div>
+  }
+
+  return (
+    <Tooltip content={algorithm.description}>
       <div className={styles.algorithmDetails}>{algorithm.name}</div>
     </Tooltip>
-  ) : null
+  )
 }
diff --git a/ui/src/pages/occurrence-details/identification-card/identification-card.module.scss b/ui/src/pages/occurrence-details/identification-card/identification-card.module.scss
@@ -7,15 +7,20 @@
   display: flex;
   flex-direction: column;
   border-radius: 4px;
-  border: 1px solid $color-neutral-100;
+  border: 1px solid $color-neutral-200;
+}
+
+.header {
+  padding: 16px;
+  border-bottom: 1px solid $color-neutral-200;
+  background-color: $color-neutral-50;
 }
 
 .content {
   display: flex;
   flex-direction: column;
   gap: 12px;
   padding: 16px;
-  position: relative;
 }
 
 .actions {
@@ -29,4 +34,5 @@
   padding-top: 2px;
   @include paragraph-small();
   color: $color-neutral-600;
+  font-style: italic;
 }
diff --git a/ui/src/pages/occurrence-details/identification-card/identification-card.tsx b/ui/src/pages/occurrence-details/identification-card/identification-card.tsx
@@ -16,7 +16,6 @@ import { STRING, translate } from 'utils/language'
 import { UserInfo, UserPermission } from 'utils/user/types'
 import { Agree } from '../agree/agree'
 import { userAgreed } from '../agree/userAgreed'
-import { AlgorithmDetails } from '../algorithm-details/algorithm-details'
 import { StatusLabel } from '../status-label/status-label'
 import styles from './identification-card.module.scss'
 
@@ -56,26 +55,28 @@ export const IdentificationCard = ({
 
   return (
     <div className={styles.identificationCard}>
+      <div className={styles.header}>
+        {identification.applied && (
+          <StatusLabel label={translate(STRING.ID_APPLIED)} />
+        )}
+        <IdentificationSummary user={user} identification={identification} />
+      </div>
       <div className={styles.content}>
-        <IdentificationSummary user={user} identification={identification}>
-          {identification.applied && (
-            <StatusLabel label={translate(STRING.ID_APPLIED)} />
-          )}
-          <AlgorithmDetails algorithm={identification.algorithm} />
-          <TaxonInfo
-            overridden={identification.overridden}
-            taxon={identification.taxon}
-            getLink={(id: string) =>
-              getAppRoute({
-                to: APP_ROUTES.SPECIES_DETAILS({
-                  projectId: projectId as string,
-                  speciesId: id,
-                }),
-              })
-            }
-          />
-          <div className={styles.comment}>{identification.comment}</div>
-        </IdentificationSummary>
+        <TaxonInfo
+          overridden={identification.overridden}
+          taxon={identification.taxon}
+          getLink={(id: string) =>
+            getAppRoute({
+              to: APP_ROUTES.SPECIES_DETAILS({
+                projectId: projectId as string,
+                speciesId: id,
+              }),
+            })
+          }
+        />
+        {identification.comment && (
+          <div className={styles.comment}>"{identification.comment}"</div>
+        )}
         <div className={styles.actions}>
           {showAgree && (
             <Agree

diff --git a/ui/src/pages/occurrence-details/suggest-id/suggest-id.module.scss b/ui/src/pages/occurrence-details/suggest-id/suggest-id.module.scss
@@ -4,7 +4,7 @@
 
 .wrapper {
   border-radius: 4px;
-  border: 1px solid $color-neutral-100;
+  border: 1px solid $color-neutral-200;
 }
 
 .content {