Update styling for identification cards to fit some more information (#…

…702) * style: update styling for identification cards to fit some more information * style: tweak timestamp label in right column * chore: move time label styles to a class * copy: include score label to clarify
RolnickLab · Jan 28, 2025 · 178231a · 178231a
1 parent 0fc9762
commit 178231a
Show file tree

Hide file tree

Showing 9 changed files with 123 additions and 127 deletions.
diff --git a/ui/src/components/blueprint-collection/blueprint-collection.module.scss b/ui/src/components/blueprint-collection/blueprint-collection.module.scss
@@ -58,6 +58,10 @@
     padding: 4px 8px;
     box-sizing: border-box;
     @include paragraph-x-small();
+
+    span {
+      white-space: nowrap;
+    }
   }
 
   .count {
@@ -67,6 +71,12 @@
     gap: 6px;
   }
 
+  .time {
+    flex: 1;
+    color: $color-neutral-300;
+    text-align: right;
+  }
+
   .blueprintLabel {
     white-space: pre-wrap;
     text-align: center;

diff --git a/ui/src/components/blueprint-collection/blueprint-collection.tsx b/ui/src/components/blueprint-collection/blueprint-collection.tsx
@@ -42,16 +42,13 @@ const BlueprintItem = ({ item }: { item: BlueprintItem }) => {
   return (
     <div className={classNames(styles.blueprintItem, 'group')}>
       <div className={styles.blueprintInfo} style={{ width: size.width }}>
-        <span className={styles.count}>
-          {item.countLabel?.length ? (
-            <>
-              <Icon type={IconType.Detections} size={12} />
-              <span>{item.countLabel}</span>
-            </>
-          ) : null}
-        </span>
-        <span style={{ flex: 1 }} />
-        <span>{item.timeLabel}</span>
+        {item.countLabel?.length ? (
+          <span className={styles.count}>
+            <Icon type={IconType.Detections} size={12} />
+            <span>{item.countLabel}</span>
+          </span>
+        ) : null}
+        <span className={styles.time}>{item.timeLabel}</span>
       </div>
       <div className={styles.blueprintImage}>
         <img

diff --git a/...ystem/components/identification/identification-summary/identification-summary.module.scss b/...ystem/components/identification/identification-summary/identification-summary.module.scss
@@ -41,3 +41,9 @@
     color: $color-primary-1-600;
   }
 }
+
+.details {
+  display: block;
+  @include mono();
+  color: $color-neutral-600;
+}
diff --git a/...design-system/components/identification/identification-summary/identification-summary.tsx b/...design-system/components/identification/identification-summary/identification-summary.tsx
@@ -1,7 +1,5 @@
 import { Identification } from 'data-services/models/occurrence-details'
 import { Tooltip } from 'design-system/components/tooltip/tooltip'
-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'
@@ -17,54 +15,48 @@ interface IdentificationSummaryProps {
 export const IdentificationSummary = ({
   user,
   identification,
-}: IdentificationSummaryProps) => {
-  const formattedTime = getFormatedDateTimeString({
-    date: new Date(identification.createdAt),
-  })
-
-  return (
-    <div className={styles.wrapper}>
-      <div className={styles.user}>
-        {user ? (
-          <div className={styles.profileImage}>
-            {user.image ? (
-              <img src={user.image} alt="" />
-            ) : (
-              <Icon
-                type={IconType.Photograph}
-                theme={IconTheme.Primary}
-                size={16}
-              />
-            )}
-          </div>
-        ) : (
-          <Icon type={IconType.BatchId} theme={IconTheme.Primary} size={16} />
-        )}
-        <Tooltip content={formattedTime}>
-          <span className={styles.username}>
-            {user?.name ?? translate(STRING.MACHINE_SUGGESTION)}
-          </span>
-        </Tooltip>
-      </div>
-      {identification.algorithm && (
-        <AlgorithmDetails algorithm={identification.algorithm} />
-      )}
-
-      {identification.score && (
-        <div className={styles.AlgorithmDetails}>
-          <span>{`${identification.score.toPrecision(4)}`}</span>
+}: IdentificationSummaryProps) => (
+  <div className={styles.wrapper}>
+    <div className={styles.user}>
+      {user ? (
+        <div className={styles.profileImage}>
+          {user.image ? (
+            <img src={user.image} alt="" />
+          ) : (
+            <Icon
+              type={IconType.Photograph}
+              theme={IconTheme.Primary}
+              size={16}
+            />
+          )}
         </div>
+      ) : (
+        <Icon type={IconType.BatchId} theme={IconTheme.Primary} size={16} />
       )}
-      {identification.terminal !== undefined && (
-        <div className={styles.AlgorithmDetails}>
-          {identification.terminal
-            ? translate(STRING.TERMINAL_CLASSIFICATION)
-            : translate(STRING.INTERMEDIATE_CLASSIFICATION)}
-        </div>
-      )}
-      <div className={styles.AlgorithmDetails}>
-        <span>{formattedTime}</span>
-      </div>
+      <span className={styles.username}>
+        {user?.name ?? translate(STRING.MACHINE_SUGGESTION)}
+      </span>
     </div>
-  )
-}
+    {identification.algorithm && (
+      <Tooltip content={identification.algorithm.description}>
+        <div className={styles.details}>{identification.algorithm.name}</div>
+      </Tooltip>
+    )}
+    {identification.score && (
+      <div className={styles.details}>
+        <span>
+          {translate(STRING.FIELD_LABEL_SCORE)}{' '}
+          {`${identification.score.toPrecision(4)}`}
+        </span>
+        {identification.terminal !== undefined && (
+          <span>
+            {' | '}
+            {identification.terminal
+              ? translate(STRING.TERMINAL_CLASSIFICATION)
+              : translate(STRING.INTERMEDIATE_CLASSIFICATION)}
+          </span>
+        )}
+      </div>
+    )}
+  </div>
+)
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
diff --git a/ui/src/pages/occurrence-details/algorithm-details/algorithm-details.tsx b/ui/src/pages/occurrence-details/algorithm-details/algorithm-details.tsx
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
@@ -11,6 +11,14 @@
   overflow: hidden;
 }
 
+.timestamp {
+  display: block;
+  color: $color-neutral-300;
+  padding: 4px 8px;
+  text-align: right;
+  @include paragraph-x-small();
+}
+
 .header {
   padding: 16px;
   border-bottom: 1px solid $color-neutral-100;

diff --git a/ui/src/pages/occurrence-details/identification-card/identification-card.tsx b/ui/src/pages/occurrence-details/identification-card/identification-card.tsx
@@ -11,6 +11,7 @@ import { IdentificationSummary } from 'design-system/components/identification/i
 import { useState } from 'react'
 import { useParams } from 'react-router-dom'
 import { APP_ROUTES } from 'utils/constants'
+import { getFormatedDateTimeString } from 'utils/date/getFormatedDateTimeString/getFormatedDateTimeString'
 import { getAppRoute } from 'utils/getAppRoute'
 import { STRING, translate } from 'utils/language'
 import { UserInfo, UserPermission } from 'utils/user/types'
@@ -42,6 +43,9 @@ export const IdentificationCard = ({
   )
   const showAgree = !byCurrentUser && canAgree
   const showDelete = byCurrentUser && canDelete
+  const formattedTime = getFormatedDateTimeString({
+    date: new Date(identification.createdAt),
+  })
 
   if (deleteIdOpen) {
     return (
@@ -53,50 +57,53 @@ 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}>
-        <TaxonInfo
-          overridden={identification.overridden}
-          taxon={identification.taxon}
-          getLink={(id: string) =>
-            getAppRoute({
-              to: APP_ROUTES.TAXON_DETAILS({
-                projectId: projectId as string,
-                taxonId: id,
-              }),
-            })
-          }
-        />
-        {identification.comment && (
-          <div className={styles.comment}>"{identification.comment}"</div>
-        )}
-        <div className={styles.actions}>
-          {showAgree && (
-            <Agree
-              agreed={
-                currentUser ? occurrence.userAgreed(currentUser?.id) : false
-              }
-              agreeWith={
-                user
-                  ? { identificationId: identification.id }
-                  : { predictionId: identification.id }
-              }
-              occurrenceId={occurrence.id}
-              taxonId={identification.taxon.id}
-            />
+    <div>
+      <span className={styles.timestamp}>{formattedTime}</span>
+      <div className={styles.identificationCard}>
+        <div className={styles.header}>
+          {identification.applied && (
+            <StatusLabel label={translate(STRING.ID_APPLIED)} />
           )}
-          {showDelete && (
-            <IconButton
-              icon={IconType.RadixTrash}
-              onClick={() => setDeleteIdOpen(true)}
-            />
+          <IdentificationSummary user={user} identification={identification} />
+        </div>
+        <div className={styles.content}>
+          <TaxonInfo
+            overridden={identification.overridden}
+            taxon={identification.taxon}
+            getLink={(id: string) =>
+              getAppRoute({
+                to: APP_ROUTES.TAXON_DETAILS({
+                  projectId: projectId as string,
+                  taxonId: id,
+                }),
+              })
+            }
+          />
+          {identification.comment && (
+            <div className={styles.comment}>"{identification.comment}"</div>
           )}
+          <div className={styles.actions}>
+            {showAgree && (
+              <Agree
+                agreed={
+                  currentUser ? occurrence.userAgreed(currentUser?.id) : false
+                }
+                agreeWith={
+                  user
+                    ? { identificationId: identification.id }
+                    : { predictionId: identification.id }
+                }
+                occurrenceId={occurrence.id}
+                taxonId={identification.taxon.id}
+              />
+            )}
+            {showDelete && (
+              <IconButton
+                icon={IconType.RadixTrash}
+                onClick={() => setDeleteIdOpen(true)}
+              />
+            )}
+          </div>
         </div>
       </div>
     </div>

diff --git a/ui/src/pages/occurrence-details/occurrence-details.module.scss b/ui/src/pages/occurrence-details/occurrence-details.module.scss
@@ -73,7 +73,7 @@
 .identifications {
   display: grid;
   grid-template-columns: 1fr;
-  gap: 16px;
+  gap: 32px;
   padding: 4px 0;
 }