Merge pull request #441 from RolnickLab/fix/small-ui-tweaks

Small UI tweaks
RolnickLab · Jul 1, 2024 · 1ae0016 · 1ae0016
2 parents 6d5cf0f + a0e31c2
commit 1ae0016
Show file tree

Hide file tree

Showing 15 changed files with 92 additions and 60 deletions.
diff --git a/ui/src/design-system/components/image-carousel/image-carousel.tsx b/ui/src/design-system/components/image-carousel/image-carousel.tsx
@@ -6,10 +6,10 @@ import {
 } from 'design-system/components/icon-button/icon-button'
 import { Icon, IconTheme, IconType } from 'design-system/components/icon/icon'
 import { ReactNode, useEffect, useRef, useState } from 'react'
+import { Link } from 'react-router-dom'
 import styles from './image-carousel.module.scss'
 import { CarouselTheme } from './types'
 import { getImageBoxStyles, getPlaceholderStyles } from './utils'
-import { Link } from 'react-router-dom'
 
 interface ImageCarouselProps {
   autoPlay?: boolean
@@ -222,16 +222,7 @@ const MultiImageCarousel = ({
         </div>
       </div>
       <span className={styles.info}>
-        <>
-          <Icon type={IconType.Detections} size={12} />
-          {paused ? (
-            <span>
-              {slideIndex + 1} / {images.length}
-            </span>
-          ) : (
-            <span>{totalLabel}</span>
-          )}
-        </>
+        {slideIndex + 1} / {totalLabel}
       </span>
     </div>
   )

diff --git a/ui/src/design-system/components/info-block/info-block.module.scss b/ui/src/design-system/components/info-block/info-block.module.scss
@@ -23,5 +23,12 @@
 
   &.link {
     color: $color-primary-1-600;
+    font-weight: 600;
+  }
+
+  &.bubble {
+    @include bubble-label();
+    display: inline-flex;
+    margin-top: 4px;
   }
 }
diff --git a/ui/src/design-system/components/info-block/info-block.tsx b/ui/src/design-system/components/info-block/info-block.tsx
@@ -1,4 +1,5 @@
 import classNames from 'classnames'
+import _ from 'lodash'
 import { Link } from 'react-router-dom'
 import { STRING, translate } from 'utils/language'
 import styles from './info-block.module.scss'
@@ -22,7 +23,11 @@ export const InfoBlock = ({ fields }: { fields: Field[] }) => (
           <span className={styles.fieldLabel}>{field.label}</span>
           {field.to ? (
             <Link to={field.to}>
-              <span className={classNames(styles.fieldValue, styles.link)}>
+              <span
+                className={classNames(styles.fieldValue, styles.link, {
+                  [styles.bubble]: _.isNumber(value),
+                })}
+              >
                 {value}
               </span>
             </Link>

diff --git a/ui/src/design-system/components/plot/plot.module.scss b/ui/src/design-system/components/plot/plot.module.scss
@@ -3,6 +3,12 @@
   text-align: center;
 
   :global(.barlayer .point > path) {
-    clip-path: inset(0% 0% 0% 0% round 16px);
+    clip-path: inset(0% 0% 0% 0% round 4px);
+  }
+
+  &.round {
+    :global(.barlayer .point > path) {
+      clip-path: inset(0% 0% 0% 0% round 32px);
+    }
   }
 }
diff --git a/ui/src/design-system/components/plot/plot.tsx b/ui/src/design-system/components/plot/plot.tsx
@@ -1,3 +1,4 @@
+import classNames from 'classnames'
 import _Plot from 'react-plotly.js'
 import styles from './plot.module.scss'
 import { PlotProps } from './types'
@@ -16,8 +17,11 @@ const Plot = ({
   orientation,
   type = 'bar',
   showRangeSlider,
+  hovertemplate,
 }: PlotProps) => (
-  <div className={styles.plot}>
+  <div
+    className={classNames(styles.plot, { [styles.round]: data.x.length >= 3 })}
+  >
     <_Plot
       data={[
         {
@@ -30,6 +34,7 @@ const Plot = ({
           marker: {
             color: markerColor,
           },
+          hovertemplate,
         },
       ]}
       config={{
@@ -76,6 +81,8 @@ const Plot = ({
           zeroline: false,
           tickvals: data.tickvals,
           ticktext: data.ticktext,
+          tickformat: 'd',
+          dtick: 1,
           automargin: true,
           ...(showRangeSlider
             ? {

diff --git a/ui/src/design-system/components/plot/types.ts b/ui/src/design-system/components/plot/types.ts
@@ -10,4 +10,5 @@ export interface PlotProps {
   type?: 'bar' | 'scatter'
   showRangeSlider?: boolean
   categorical?: boolean
+  hovertemplate?: string
 }
diff --git a/ui/src/design-system/components/table/basic-table-cell/basic-table-cell.module.scss b/ui/src/design-system/components/table/basic-table-cell/basic-table-cell.module.scss
@@ -25,14 +25,8 @@
 
   &.bubble {
     .label {
+      @include bubble-label();
       display: inline-flex;
-      height: 30px;
-      border-radius: 15px;
-      padding: 0 12px;
-      background-color: #f2f3fe;
-      line-height: 30px;
-      color: $color-primary-1-600;
-      font-weight: 600;
     }
   }
 }

diff --git a/ui/src/design-system/variables/typography.scss b/ui/src/design-system/variables/typography.scss
@@ -111,6 +111,18 @@
   text-transform: uppercase;
 }
 
+@mixin bubble-label {
+  display: inline-flex;
+  height: 30px;
+  border-radius: 15px;
+  padding: 0 12px;
+  background-color: #f2f3fe;
+  color: $color-primary-1-600;
+  font-size: 16px;
+  line-height: 30px;
+  font-weight: 600;
+}
+
 @mixin mono {
   @include paragraph-xx-small();
   font-family: monospace;

diff --git a/...ent-details/deployment-details-form/section-example-captures/section-example-captures.tsx b/...ent-details/deployment-details-form/section-example-captures/section-example-captures.tsx
@@ -50,7 +50,7 @@ export const SectionExampleCaptures = ({
   if (!deployment.createdAt) {
     return (
       <InputContent
-        label={translate(STRING.FIELD_LABEL_UPLOADED_CAPTURES)}
+        label={translate(STRING.FIELD_LABEL_SAMPLE_CAPTURES)}
         description={translate(STRING.MESSAGE_CAPTURE_UPLOAD_HIDDEN)}
       />
     )
@@ -62,7 +62,7 @@ export const SectionExampleCaptures = ({
 
   return (
     <InputContent
-      label={translate(STRING.FIELD_LABEL_UPLOADED_CAPTURES)}
+      label={translate(STRING.FIELD_LABEL_SAMPLE_CAPTURES)}
       description={CAPTURE_FIELD_DESCRIPTION}
     >
       <div className={styles.collection}>

diff --git a/ui/src/pages/deployment-details/deployment-details-info.tsx b/ui/src/pages/deployment-details/deployment-details-info.tsx
@@ -3,7 +3,7 @@ import { DeploymentDetails } from 'data-services/models/deployment-details'
 import { Button } from 'design-system/components/button/button'
 import * as Dialog from 'design-system/components/dialog/dialog'
 import { ImageCarousel } from 'design-system/components/image-carousel/image-carousel'
-import { InputValue } from 'design-system/components/input/input'
+import { InputContent, InputValue } from 'design-system/components/input/input'
 import { MultiMarkerMap } from 'design-system/map/multi-marker-map/multi-marker-map'
 import { MarkerPosition } from 'design-system/map/types'
 import { useMemo } from 'react'
@@ -91,14 +91,16 @@ export const DeploymentDetailsInfo = ({
               value={deployment.numImages}
             />
           </FormRow>
-          {deployment.exampleCaptures.length > 0 && (
-            <div className={styles.section}>
-              <ImageCarousel
-                images={deployment.exampleCaptures}
-                size={{ width: '100%', ratio: 16 / 9 }}
-              />
-            </div>
-          )}
+          <InputContent label={translate(STRING.FIELD_LABEL_SAMPLE_CAPTURES)}>
+            {deployment.exampleCaptures.length > 0 && (
+              <div className={styles.section}>
+                <ImageCarousel
+                  images={deployment.exampleCaptures}
+                  size={{ width: '100%', ratio: 16 / 9 }}
+                />
+              </div>
+            )}
+          </InputContent>
         </FormSection>
       </div>
     </>

diff --git a/ui/src/pages/occurrence-details/occurrence-details.tsx b/ui/src/pages/occurrence-details/occurrence-details.tsx
@@ -25,8 +25,8 @@ import { Agree } from './agree/agree'
 import { userAgreed } from './agree/userAgreed'
 import { IdentificationCard } from './identification-card/identification-card'
 import styles from './occurrence-details.module.scss'
-import { SuggestId } from './suggest-id/suggest-id'
 import { RejectId } from './reject-id/reject-id'
+import { SuggestId } from './suggest-id/suggest-id'
 
 export const TABS = {
   FIELDS: 'fields',
@@ -165,7 +165,7 @@ export const OccurrenceDetails = ({
                 taxonId={occurrence.determinationTaxon.id}
               />
               <Button
-                label={translate(STRING.SUGGEST_ID)}
+                label={translate(STRING.SUGGEST_ID_SHORT)}
                 icon={IconType.ShieldAlert}
                 onClick={() => {
                   setSelectedTab(TABS.IDENTIFICATION)

diff --git a/ui/src/pages/occurrence-details/reject-id/reject-id.module.scss b/ui/src/pages/occurrence-details/reject-id/reject-id.module.scss
@@ -20,3 +20,7 @@
   flex-direction: column;
   gap: 4px;
 }
+
+.triggerButton {
+  flex-direction: row-reverse;
+}
diff --git a/ui/src/pages/occurrence-details/reject-id/reject-id.tsx b/ui/src/pages/occurrence-details/reject-id/reject-id.tsx
@@ -1,7 +1,6 @@
-import { IconButton } from 'design-system/components/icon-button/icon-button'
+import { Button } from 'design-system/components/button/button'
 import { IconType } from 'design-system/components/icon/icon'
 import * as Popover from 'design-system/components/popover/popover'
-import { Tooltip } from 'design-system/components/tooltip/tooltip'
 import { RefObject, useEffect, useState } from 'react'
 import { STRING, translate } from 'utils/language'
 import { REJECT_OPTIONS } from './contants'
@@ -28,13 +27,13 @@ export const RejectId = ({
 
   return (
     <Popover.Root open={open} onOpenChange={setIsOpen}>
-      <Tooltip content={translate(STRING.REJECT_ID)}>
-        <div>
-          <Popover.Trigger>
-            <IconButton icon={IconType.CircleBackslash} />
-          </Popover.Trigger>
-        </div>
-      </Tooltip>
+      <Popover.Trigger>
+        <Button
+          label={translate(STRING.REJECT_ID_SHORT)}
+          icon={IconType.ToggleDown}
+          customClass={styles.triggerButton}
+        />
+      </Popover.Trigger>
       <Popover.Content
         ariaCloselabel={translate(STRING.CLOSE)}
         align="start"

diff --git a/ui/src/pages/occurrences/occurrence-columns.tsx b/ui/src/pages/occurrences/occurrence-columns.tsx
@@ -1,7 +1,6 @@
 import { TaxonInfo } from 'components/taxon/taxon-info/taxon-info'
 import { Occurrence } from 'data-services/models/occurrence'
-import { ButtonTheme } from 'design-system/components/button/button'
-import { IconButton } from 'design-system/components/icon-button/icon-button'
+import { Button, ButtonTheme } from 'design-system/components/button/button'
 import { IconType } from 'design-system/components/icon/icon'
 import { IdentificationStatus } from 'design-system/components/identification/identification-status/identification-status'
 import { BasicTableCell } from 'design-system/components/table/basic-table-cell/basic-table-cell'
@@ -207,19 +206,18 @@ const TaxonCell = ({
                 occurrenceId={item.id}
                 taxonId={item.determinationTaxon.id}
               />
-              <Tooltip content={translate(STRING.SUGGEST_ID)}>
-                <IconButton
-                  icon={IconType.ShieldAlert}
-                  onClick={() =>
-                    navigate(detailsRoute, {
-                      state: {
-                        defaultTab: TABS.IDENTIFICATION,
-                        suggestIdOpen: true,
-                      },
-                    })
-                  }
-                />
-              </Tooltip>
+              <Button
+                label={translate(STRING.SUGGEST_ID_SHORT)}
+                icon={IconType.ShieldAlert}
+                onClick={() =>
+                  navigate(detailsRoute, {
+                    state: {
+                      defaultTab: TABS.IDENTIFICATION,
+                      suggestIdOpen: true,
+                    },
+                  })
+                }
+              />
               <RejectId
                 occurrenceId={item.id}
                 occurrenceTaxonId={item.determinationTaxon.id}

diff --git a/ui/src/utils/language.ts b/ui/src/utils/language.ts
@@ -31,6 +31,7 @@ export enum STRING {
   START,
   SUBMIT,
   SUGGEST_ID,
+  SUGGEST_ID_SHORT,
   VIEW_PUBLIC_PROJECTS,
 
   /* ENTITY */
@@ -87,6 +88,7 @@ export enum STRING {
   FIELD_LABEL_SOURCE_IMAGE,
   FIELD_LABEL_SOURCE_IMAGES,
   FIELD_LABEL_DATA_SOURCE,
+  FIELD_LABEL_SAMPLE_CAPTURES,
   FIELD_LABEL_SCORE,
   FIELD_LABEL_SNAPSHOTS,
   FIELD_LABEL_SPECIES,
@@ -101,7 +103,6 @@ export enum STRING {
   FIELD_LABEL_FIRST_DATE,
   FIELD_LABEL_LAST_DATE,
   FIELD_LABEL_UPDATED_AT,
-  FIELD_LABEL_UPLOADED_CAPTURES,
   FIELD_LABEL_VERSION,
   FIELD_LABEL_VERSION_NAME,
 
@@ -173,6 +174,8 @@ export enum STRING {
   NOT_CONNECTED,
   OR,
   REJECT_ID,
+  REJECT_ID_SHORT,
+  SELECT_COLUMNS,
   RESULTS,
   STAGES,
   SUMMARY,
@@ -216,6 +219,7 @@ const ENGLISH_STRINGS: { [key in STRING]: string } = {
   [STRING.START]: 'Start',
   [STRING.SUBMIT]: 'Submit',
   [STRING.SUGGEST_ID]: 'Suggest ID',
+  [STRING.SUGGEST_ID_SHORT]: 'Suggest',
   [STRING.VIEW_PUBLIC_PROJECTS]: 'View public projects',
 
   /* FIELD_LABEL */
@@ -259,6 +263,7 @@ const ENGLISH_STRINGS: { [key in STRING]: string } = {
   [STRING.FIELD_LABEL_SOURCE_IMAGE]: 'Source image',
   [STRING.FIELD_LABEL_SOURCE_IMAGES]: 'Source images',
   [STRING.FIELD_LABEL_DATA_SOURCE]: 'Data source',
+  [STRING.FIELD_LABEL_SAMPLE_CAPTURES]: 'Sample captures',
   [STRING.FIELD_LABEL_SCORE]: 'Score',
   [STRING.FIELD_LABEL_SNAPSHOTS]: 'Snapshots',
   [STRING.FIELD_LABEL_SPECIES]: 'Species',
@@ -273,7 +278,6 @@ const ENGLISH_STRINGS: { [key in STRING]: string } = {
   [STRING.FIELD_LABEL_FIRST_DATE]: 'First date',
   [STRING.FIELD_LABEL_LAST_DATE]: 'Last date',
   [STRING.FIELD_LABEL_UPDATED_AT]: 'Updated at',
-  [STRING.FIELD_LABEL_UPLOADED_CAPTURES]: 'Sample captures',
   [STRING.FIELD_LABEL_VERSION]: 'Version',
   [STRING.FIELD_LABEL_VERSION_NAME]: 'Version',
 
@@ -369,6 +373,8 @@ const ENGLISH_STRINGS: { [key in STRING]: string } = {
   [STRING.NOT_CONNECTED]: 'Not connected',
   [STRING.OR]: 'Or',
   [STRING.REJECT_ID]: 'Reject ID',
+  [STRING.REJECT_ID_SHORT]: 'Reject',
+  [STRING.SELECT_COLUMNS]: 'Select columns',
   [STRING.RESULTS]: '{{total}} results',
   [STRING.STAGES]: 'Stages',
   [STRING.SUMMARY]: 'Summary',